ov-components: Updated testapp to Angular 17

pull/744/merge
Carlos Santos 2024-05-24 12:02:35 +02:00
parent f2ab607c82
commit 6221c92bae
8 changed files with 2466 additions and 4038 deletions

View File

@ -20,7 +20,7 @@
"outputPath": "dist/openvidu-components-testapp", "outputPath": "dist/openvidu-components-testapp",
"index": "src/index.html", "index": "src/index.html",
"main": "src/main.ts", "main": "src/main.ts",
"polyfills": "src/polyfills.ts", "polyfills": ["zone.js"],
"tsConfig": "tsconfig.app.json", "tsConfig": "tsconfig.app.json",
"aot": true, "aot": true,
"assets": ["src/favicon.ico", "src/assets"], "assets": ["src/favicon.ico", "src/assets"],
@ -69,29 +69,29 @@
"serve": { "serve": {
"builder": "@angular-devkit/build-angular:dev-server", "builder": "@angular-devkit/build-angular:dev-server",
"options": { "options": {
"browserTarget": "openvidu-components-testapp:build", "proxyConfig": "src/proxy.config.json",
"proxyConfig": "src/proxy.config.json" "buildTarget": "openvidu-components-testapp:build"
}, },
"configurations": { "configurations": {
"development": { "development": {
"browserTarget": "openvidu-components-testapp:build:development" "buildTarget": "openvidu-components-testapp:build:development"
}, },
"production": { "production": {
"browserTarget": "openvidu-components-testapp:build:production" "buildTarget": "openvidu-components-testapp:build:production"
} }
} }
}, },
"extract-i18n": { "extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n", "builder": "@angular-devkit/build-angular:extract-i18n",
"options": { "options": {
"browserTarget": "openvidu-components-testapp:build" "buildTarget": "openvidu-components-testapp:build"
} }
}, },
"test": { "test": {
"builder": "@angular-devkit/build-angular:karma", "builder": "@angular-devkit/build-angular:karma",
"options": { "options": {
"main": "src/test.ts", "main": "src/test.ts",
"polyfills": "src/polyfills.ts", "polyfills": ["zone.js"],
"tsConfig": "tsconfig.spec.json", "tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js", "karmaConfig": "karma.conf.js",
"assets": ["src/favicon.ico", "src/assets"], "assets": ["src/favicon.ico", "src/assets"],
@ -162,7 +162,7 @@
"outputPath": "dist/openvidu-webcomponent-rc", "outputPath": "dist/openvidu-webcomponent-rc",
"index": "src/index.html", "index": "src/index.html",
"main": "src/app/openvidu-webcomponent/openvidu-webcomponent.main.ts", "main": "src/app/openvidu-webcomponent/openvidu-webcomponent.main.ts",
"polyfills": "src/polyfills.ts", "polyfills": ["zone.js"],
"tsConfig": "src/app/openvidu-webcomponent/tsconfig.openvidu-webcomponent.json", "tsConfig": "src/app/openvidu-webcomponent/tsconfig.openvidu-webcomponent.json",
"aot": true, "aot": true,
"assets": ["src/favicon.ico"], "assets": ["src/favicon.ico"],
@ -201,8 +201,8 @@
} }
} }
} }
}, },
"cli": { "cli": {
"analytics": false "analytics": false
} }
} }

File diff suppressed because it is too large Load Diff

View File

@ -1,27 +1,27 @@
{ {
"dependencies": { "dependencies": {
"@angular/animations": "16.2.12", "@angular/animations": "17.3.10",
"@angular/cdk": "16.2.14", "@angular/cdk": "17.3.10",
"@angular/common": "16.2.12", "@angular/common": "17.3.10",
"@angular/core": "16.2.12", "@angular/core": "17.3.10",
"@angular/flex-layout": "15.0.0-beta.42", "@angular/flex-layout": "15.0.0-beta.42",
"@angular/forms": "16.2.12", "@angular/forms": "17.3.10",
"@angular/material": "16.2.14", "@angular/material": "17.3.10",
"@angular/platform-browser": "16.2.12", "@angular/platform-browser": "17.3.10",
"@angular/platform-browser-dynamic": "16.2.12", "@angular/platform-browser-dynamic": "17.3.10",
"@angular/router": "16.2.12", "@angular/router": "17.3.10",
"autolinker": "4.0.0", "autolinker": "4.0.0",
"openvidu-browser": "2.29.1", "openvidu-browser": "2.29.1",
"rxjs": "7.5.7", "rxjs": "7.5.7",
"tslib": "2.3.1", "tslib": "2.3.1",
"zone.js": "0.13.3" "zone.js": "^0.14.6"
}, },
"devDependencies": { "devDependencies": {
"@angular-devkit/build-angular": "16.2.14", "@angular-devkit/build-angular": "17.3.8",
"@angular/cli": "16.2.14", "@angular/cli": "17.3.8",
"@angular/compiler": "16.2.12", "@angular/compiler": "17.3.10",
"@angular/compiler-cli": "16.2.12", "@angular/compiler-cli": "17.3.10",
"@angular/elements": "16.2.12", "@angular/elements": "17.3.10",
"@compodoc/compodoc": "^1.1.19", "@compodoc/compodoc": "^1.1.19",
"@types/chai": "4.3.0", "@types/chai": "4.3.0",
"@types/mocha": "9.1.0", "@types/mocha": "9.1.0",
@ -46,11 +46,11 @@
"karma-mocha-reporter": "2.2.5", "karma-mocha-reporter": "2.2.5",
"karma-notify-reporter": "1.3.0", "karma-notify-reporter": "1.3.0",
"mocha": "9.2.2", "mocha": "9.2.2",
"ng-packagr": "16.2.3", "ng-packagr": "17.3.0",
"selenium-webdriver": "4.5.0", "selenium-webdriver": "4.5.0",
"ts-node": "10.4.0", "ts-node": "10.4.0",
"tslint": "6.1.3", "tslint": "6.1.3",
"typescript": "4.9.3", "typescript": "^5.4.5",
"webpack-bundle-analyzer": "^4.5.0" "webpack-bundle-analyzer": "^4.5.0"
}, },
"name": "openvidu-components-testapp", "name": "openvidu-components-testapp",

View File

@ -1,14 +1,13 @@
/* To learn more about this file see: https://angular.io/config/tsconfig. */ /* To learn more about this file see: https://angular.io/config/tsconfig. */
{ {
"extends": "./tsconfig.lib.json", "extends": "./tsconfig.lib.json",
"compilerOptions": { "compilerOptions": {
"declarationMap": false, "declarationMap": false,
"sourceMap": false, "sourceMap": false,
"removeComments": true, "removeComments": true,
"pretty": false, "pretty": false
"watch": false, },
}, "angularCompilerOptions": {
"angularCompilerOptions": { "compilationMode": "partial"
"compilationMode": "partial" }
}
} }

View File

@ -1,63 +0,0 @@
/**
* This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file.
*
* This file is divided into 2 sections:
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
* file.
*
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
*
* Learn more in https://angular.io/guide/browser-support
*/
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js'; // Run `npm install --save classlist.js`.
/**
* Web Animations `@angular/platform-browser/animations`
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
*/
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/**
* By default, zone.js will patch all possible macroTask and DomEvents
* user can disable parts of macroTask/DomEvents patch by setting following flags
* because those flags need to be set before `zone.js` being loaded, and webpack
* will put import in the top of bundle, so user need to create a separate file
* in this directory (for example: zone-flags.ts), and put the following flags
* into that file, and then add the following code before importing zone.js.
* import './zone-flags';
*
* The flags allowed in zone-flags.ts are listed here.
*
* The following flags will work for all browsers.
*
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
*
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
* with the following flag, it will bypass `zone.js` patch for IE/Edge
*
* (window as any).__Zone_enable_cross_context_check = true;
*
*/
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
/***************************************************************************************************
* APPLICATION IMPORTS
*/

View File

@ -1,109 +1,94 @@
// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '@angular/material' as mat; @use '@angular/material' as mat;
@import '@angular/material/theming';
// Plus imports for other components in your app.
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
// The following line adds:
// 1. Default typography styles for all components
// 2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
// If you specify typography styles for the components you use elsewhere, you should delete this line.
// If you don't need the default component typographies but still want the hierarchy styles,
// you can delete this line and instead use:
// `@include mat.legacy-typography-hierarchy(mat.define-typography-config());`
@include mat.all-component-typographies();
@include mat.core(); @include mat.core();
// Define the palettes for your theme using the Material Design palettes available in palette.scss // Define your custom palettes
// (imported above). For each palette, you can optionally specify a default, lighter, and darker $openvidu-components-primary: mat.define-palette(mat.$blue-grey-palette, 500, 300);
// hue. Available color palettes: https://material.io/design/color/ $openvidu-components-accent: mat.define-palette(mat.$amber-palette, 500, 700, A100);
$openvidu-components-primary: mat-palette($mat-blue-grey, 500, 300);
$openvidu-components-accent: mat-palette($mat-amber, 500, 700, A100);
// The warn palette is optional (defaults to red).
$openvidu-components-warn: mat.define-palette(mat.$red-palette); $openvidu-components-warn: mat.define-palette(mat.$red-palette);
// Create the theme object. A theme consists of configurations for individual // Define the theme
// theming systems such as "color" or "typography". $openvidu-components-theme: mat.define-light-theme(
$openvidu-components-theme: mat.define-light-theme(( (
color: ( color: (
primary: $openvidu-components-primary, primary: $openvidu-components-primary,
accent: $openvidu-components-accent, accent: $openvidu-components-accent,
warn: $openvidu-components-warn, warn: $openvidu-components-warn
) )
)); )
);
// Include theme styles for core and each component used in your app. // Include the non-legacy themes for the components
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include mat.all-component-themes($openvidu-components-theme); @include mat.all-component-themes($openvidu-components-theme);
// If you have custom typography configurations, include them as well
@include mat.all-component-typographies($openvidu-components-theme);
// If you need to adjust density, include it as well
// @include mat.all-component-density-styles($openvidu-components-theme);
// Custom openvidu-components styles // Custom openvidu-components styles
:root { :root {
--ov-primary-color: #303030; --ov-primary-color: #303030;
--ov-secondary-color: #3e3f3f; --ov-secondary-color: #3e3f3f;
--ov-tertiary-color: #598eff; --ov-tertiary-color: #598eff;
--ov-warn-color: #EB5144; --ov-warn-color: #eb5144;
--ov-accent-color: #ffae35; --ov-accent-color: #ffae35;
--ov-light-color: #e6e6e6; --ov-light-color: #e6e6e6;
--ov-logo-background-color: #3a3d3d; --ov-logo-background-color: #3a3d3d;
--ov-text-color: #ffffff; --ov-text-color: #ffffff;
--ov-panel-text-color: #1d1d1d; --ov-panel-text-color: #1d1d1d;
--ov-panel-background: #ffffff; --ov-panel-background: #ffffff;
--ov-buttons-radius: 50%; --ov-buttons-radius: 50%;
--ov-leave-button-radius: 10px; --ov-leave-button-radius: 10px;
--ov-video-radius: 5px; --ov-video-radius: 5px;
--ov-panel-radius: 5px; --ov-panel-radius: 5px;
} }
/* You can add global styles to this file, and also import other style files */ /* You can add global styles to this file, and also import other style files */
html, body { height: 100%; overflow: hidden;} html,
body { margin: 0; font-family: 'Roboto','RobotoDraft',Helvetica,Arial,sans-serif;} body {
height: 100%;
overflow: hidden;
}
body {
margin: 0;
font-family: 'Roboto', 'RobotoDraft', Helvetica, Arial, sans-serif;
}
.spacer { .spacer {
flex: 1; flex: 1;
} }
.toolbar img { .toolbar img {
margin: 0 16px; margin: 0 16px;
} }
.toolbar #twitter-logo { .toolbar #twitter-logo {
height: 40px; height: 40px;
margin: 0 16px; margin: 0 16px;
} }
.toolbar #twitter-logo:hover { .toolbar #twitter-logo:hover {
opacity: 0.8; opacity: 0.8;
} }
.back-button { .back-button {
margin-top: 8px; margin-top: 8px;
display: flex; display: flex;
align-items: center; align-items: center;
line-height: 20px; line-height: 20px;
padding: 10px; padding: 10px;
position: absolute; position: absolute;
top: 70px; top: 70px;
svg { svg {
transform: rotate(180deg); transform: rotate(180deg);
} }
} }
.back-button a { .back-button a {
display: flex; display: flex;
align-items: center; align-items: center;
} }

View File

@ -10,8 +10,7 @@
} }
}, },
"files": [ "files": [
"src/main.ts", "src/main.ts"
"src/polyfills.ts"
], ],
"include": [ "include": [
"src/**/*.d.ts" "src/**/*.d.ts"

View File

@ -8,8 +8,7 @@
] ]
}, },
"files": [ "files": [
"src/test.ts", "src/test.ts"
"src/polyfills.ts"
], ],
"include": [ "include": [
"src/**/*.spec.ts", "src/**/*.spec.ts",