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

File diff suppressed because it is too large Load Diff

View File

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

View File

@ -1,14 +1,13 @@
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.lib.json",
"compilerOptions": {
"declarationMap": false,
"extends": "./tsconfig.lib.json",
"compilerOptions": {
"declarationMap": false,
"sourceMap": false,
"removeComments": true,
"pretty": false,
"watch": false,
},
"angularCompilerOptions": {
"compilationMode": "partial"
}
"pretty": false
},
"angularCompilerOptions": {
"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;
@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();
// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$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).
// Define your custom palettes
$openvidu-components-primary: mat.define-palette(mat.$blue-grey-palette, 500, 300);
$openvidu-components-accent: mat.define-palette(mat.$amber-palette, 500, 700, A100);
$openvidu-components-warn: mat.define-palette(mat.$red-palette);
// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$openvidu-components-theme: mat.define-light-theme((
color: (
primary: $openvidu-components-primary,
accent: $openvidu-components-accent,
warn: $openvidu-components-warn,
)
));
// Define the theme
$openvidu-components-theme: mat.define-light-theme(
(
color: (
primary: $openvidu-components-primary,
accent: $openvidu-components-accent,
warn: $openvidu-components-warn
)
)
);
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
// Include the non-legacy themes for the components
@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
:root {
--ov-primary-color: #303030;
--ov-secondary-color: #3e3f3f;
--ov-tertiary-color: #598eff;
--ov-warn-color: #EB5144;
--ov-accent-color: #ffae35;
--ov-light-color: #e6e6e6;
--ov-primary-color: #303030;
--ov-secondary-color: #3e3f3f;
--ov-tertiary-color: #598eff;
--ov-warn-color: #eb5144;
--ov-accent-color: #ffae35;
--ov-light-color: #e6e6e6;
--ov-logo-background-color: #3a3d3d;
--ov-text-color: #ffffff;
--ov-logo-background-color: #3a3d3d;
--ov-text-color: #ffffff;
--ov-panel-text-color: #1d1d1d;
--ov-panel-background: #ffffff;
--ov-panel-text-color: #1d1d1d;
--ov-panel-background: #ffffff;
--ov-buttons-radius: 50%;
--ov-leave-button-radius: 10px;
--ov-video-radius: 5px;
--ov-panel-radius: 5px;
--ov-buttons-radius: 50%;
--ov-leave-button-radius: 10px;
--ov-video-radius: 5px;
--ov-panel-radius: 5px;
}
/* You can add global styles to this file, and also import other style files */
html, body { height: 100%; overflow: hidden;}
body { margin: 0; font-family: 'Roboto','RobotoDraft',Helvetica,Arial,sans-serif;}
html,
body {
height: 100%;
overflow: hidden;
}
body {
margin: 0;
font-family: 'Roboto', 'RobotoDraft', Helvetica, Arial, sans-serif;
}
.spacer {
flex: 1;
flex: 1;
}
.toolbar img {
margin: 0 16px;
margin: 0 16px;
}
.toolbar #twitter-logo {
height: 40px;
margin: 0 16px;
height: 40px;
margin: 0 16px;
}
.toolbar #twitter-logo:hover {
opacity: 0.8;
opacity: 0.8;
}
.back-button {
margin-top: 8px;
display: flex;
align-items: center;
line-height: 20px;
padding: 10px;
margin-top: 8px;
display: flex;
align-items: center;
line-height: 20px;
padding: 10px;
position: absolute;
top: 70px;
svg {
transform: rotate(180deg);
}
svg {
transform: rotate(180deg);
}
}
.back-button a {
display: flex;
align-items: center;
display: flex;
align-items: center;
}

View File

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

View File

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