dev #14384 Правка ошибок отображения WPA КофеЛайк: upgrade angular to 15

angular/.browserslistrc

@@ -1,16 +0,0 @@
-# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
-# For additional information regarding the format and rule options, please see:
-# https://github.com/browserslist/browserslist#queries
-
-# For the full list of supported browsers by the Angular framework, please see:
-# https://angular.io/guide/browser-support
-
-# You can see what browsers were selected by your queries by running:
-#   npx browserslist
-
-last 1 Chrome version
-last 1 Firefox version
-last 2 Edge major versions
-last 2 Safari major versions
-last 2 iOS major versions
-Firefox ESR

angular/angular.json

@@ -35,7 +35,7 @@
               "src/sw-custom.js"
             ],
             "styles": [
-              "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "node_modules/primeng/resources/themes/bootstrap4-light-blue/theme.css",
               "node_modules/primeicons/primeicons.css",
               "node_modules/primeng/resources/primeng.min.css",

angular/package.json

@@ -10,18 +10,18 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^14.0.0",
+    "@angular/animations": "^15.2.9",
-    "@angular/cdk": "^14.2.1",
+    "@angular/cdk": "^15.2.9",
-    "@angular/common": "^14.0.0",
+    "@angular/common": "^15.2.9",
-    "@angular/compiler": "^14.0.0",
+    "@angular/compiler": "^15.2.9",
-    "@angular/core": "^14.0.0",
+    "@angular/core": "^15.2.9",
     "@angular/fire": "^7.4.1",
-    "@angular/forms": "^14.0.0",
+    "@angular/forms": "^15.2.9",
-    "@angular/material": "^14.2.1",
+    "@angular/material": "^15.2.9",
-    "@angular/platform-browser": "^14.0.0",
+    "@angular/platform-browser": "^15.2.9",
-    "@angular/platform-browser-dynamic": "^14.0.0",
+    "@angular/platform-browser-dynamic": "^15.2.9",
-    "@angular/router": "^14.0.0",
+    "@angular/router": "^15.2.9",
-    "@angular/service-worker": "^14.0.0",
+    "@angular/service-worker": "^15.2.9",
     "@fortawesome/angular-fontawesome": "^0.11.1",
     "@fortawesome/fontawesome-svg-core": "^6.2.0",
     "@fortawesome/free-brands-svg-icons": "^6.2.0",
@@ -44,9 +44,9 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^14.0.6",
+    "@angular-devkit/build-angular": "^15.2.8",
-    "@angular/cli": "~14.0.6",
+    "@angular/cli": "~15.2.8",
-    "@angular/compiler-cli": "^14.0.0",
+    "@angular/compiler-cli": "^15.2.9",
     "@types/google-libphonenumber": "^7.4.23",
     "@types/jasmine": "~4.0.0",
     "jasmine-core": "~4.1.0",
@@ -55,6 +55,6 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.0.0",
     "karma-jasmine-html-reporter": "~1.7.0",
-    "typescript": "~4.7.2"
+    "typescript": "4.8"
   }
-}
+}

angular/src/app/directives/directives.module.ts

@@ -2,13 +2,12 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FocusNextInputDirective } from './focus-next-input.directive';
 import { DownloadAppDirective } from './download-app.directive';
-import { UpdateOutlineGapDirective } from './update-outline-gap.directive';
 
 @NgModule({
   imports: [
     CommonModule
   ],
-  declarations: [FocusNextInputDirective, DownloadAppDirective, UpdateOutlineGapDirective],
+  declarations: [FocusNextInputDirective, DownloadAppDirective],
-  exports: [FocusNextInputDirective, DownloadAppDirective, UpdateOutlineGapDirective]
+  exports: [FocusNextInputDirective, DownloadAppDirective]
 })
 export class DirectivesModule { }

angular/src/app/directives/update-outline-gap.directive.ts

@@ -1,17 +0,0 @@
-import { AfterViewInit, Directive } from '@angular/core';
-import { MatFormField } from '@angular/material/form-field';
-
-// TODO: this is temporary workaround, upgrade angular to 15+, where input labels fork fine
-@Directive({
-  selector: 'mat-form-field[appearance=outline]',
-})
-export class UpdateOutlineGapDirective implements AfterViewInit {
-  constructor(private formField: MatFormField) {
-  }
-
-  ngAfterViewInit() {
-    document.fonts.ready.then(() => {
-      this.formField.updateOutlineGap();
-    });
-  }
-}

angular/src/app/presentation-options/first-option/first-option.module.ts

@@ -9,14 +9,14 @@ import { MatIconModule } from '@angular/material/icon';
 import { GuestCardComponent } from './pages/guest-card/guest-card.component';
 import { QrCodeModule } from 'ng-qrcode';
 import { AccordionComponent } from './components/accordion/accordion.component';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
 import { LastOrderComponent } from './components/last-order/last-order.component';
 import { InviteFriendsComponent } from './components/invite-friends/invite-friends.component';
 import { LoginComponent } from './pages/login/login.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
 import { NgxMatIntlTelInputComponent } from 'ngx-mat-intl-tel-input';
-import { MatInputModule } from '@angular/material/input';
+import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { DirectivesModule } from 'src/app/directives/directives.module';
 
 

angular/src/app/presentation-options/first-option/pages/login/login.component.ts

@@ -6,7 +6,7 @@ import {
   OnInit
 } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import { Router } from '@angular/router';
 import { MessageService } from 'primeng/api';
 import { CookiesService } from 'src/app/services/cookies.service';

angular/src/styles.scss

@@ -1,5 +1,89 @@
+@use '@angular/material' as mat;
+
+@include mat.core();
+
+$primary: (
+    50 : #f0e4ec,
+    100 : #d9bcd0,
+    200 : #bf90b0,
+    300 : #a56390,
+    400 : #924179,
+    500 : #7f2061,
+    600 : #771c59,
+    700 : #6c184f,
+    800 : #621345,
+    900 : #4f0b33,
+    A100 : #ff85c7,
+    A200 : #ff52b0,
+    A400 : #ff1f99,
+    A700 : #ff068d,
+    contrast: (
+        50 : #000000,
+        100 : #000000,
+        200 : #000000,
+        300 : #ffffff,
+        400 : #ffffff,
+        500 : #ffffff,
+        600 : #ffffff,
+        700 : #ffffff,
+        800 : #ffffff,
+        900 : #ffffff,
+        A100 : #000000,
+        A200 : #000000,
+        A400 : #ffffff,
+        A700 : #ffffff,
+    )
+);
+
+$accent: (
+    50 : #ffffff,
+    100 : #ffffff,
+    200 : #ffffff,
+    300 : #ffffff,
+    400 : #ffffff,
+    500 : #ffffff,
+    600 : #ffffff,
+    700 : #ffffff,
+    800 : #ffffff,
+    900 : #ffffff,
+    A100 : #ffffff,
+    A200 : #ffffff,
+    A400 : #ffffff,
+    A700 : #ffffff,
+    contrast: (
+        50 : #000000,
+        100 : #000000,
+        200 : #000000,
+        300 : #000000,
+        400 : #000000,
+        500 : #000000,
+        600 : #000000,
+        700 : #000000,
+        800 : #000000,
+        900 : #000000,
+        A100 : #000000,
+        A200 : #000000,
+        A400 : #000000,
+        A700 : #000000,
+    )
+);
+
+$primary-palette: mat.define-palette($primary);
+$accent-palette: mat.define-palette($accent);
+
+$theme: mat.define-light-theme((
+ color: (
+   primary: $primary-palette,
+   accent: $accent-palette,   
+ ),
+ typography: mat.define-typography-config(),
+ density: 0,
+));
+
+@include mat.all-component-themes($theme);
+
 // Сброс стилей
-html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:middle}
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;}
 article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
 html{height:100%;}
 body{line-height:1}
@@ -41,69 +125,19 @@ body {
     --button-text-color_disabled: #cccccc;
 }
 
+.mdc-button__label {
+    color: var(--button-text-color) !important;
+}
+
+.mat-mdc-outlined-button:not(:disabled) {
+    border-color: var(--button-text-color) !important;
+}
+
 hr {
     width: 100%;
     border-top: 1px solid #BDBDBD;
 }
 
-.mat-bottom-sheet-container {
-    box-shadow: 0px 8px 10px -5px rgba(255, 255, 255, 0.2), 0px 16px 24px 2px rgba(255, 255, 255, 0.14), 0px 6px 30px 5px rgba(255, 255, 255, 0.12);
-    background: var(--background-color);
-    color: var(--text-color);
-}
-
-
-.mat-form-field-appearance-outline .mat-form-field-outline {
-    color: var(--button-color_disabled) !important;
-}
-
-.mat-form-field-appearance-outline .mat-form-field-outline {
-    color: var(--button-color) !important;
-}
-
-.mat-form-field-wrapper {
-    padding: 0;
-}
-
-.mat-progress-spinner circle, .mat-spinner circle {
-    stroke: var(--button-color);
-}
-
-.mat-form-field-outline-start, .mat-form-field-outline-end {
-    border-radius: 0 !important;
-}
-.mat-form-field-outline-start {
-    border-left: none !important;
-}
-.mat-form-field-outline-end {
-    border-right: none !important;
-}
-
-.mat-focused .mat-form-field-outline > div {
-    border-color: var(--button-color);
-}
-
-.mat-form-field-label {
-    color: var(--text-color_1) !important;
-}
-
-.mat-focused .mat-form-field-label {
-    color: var(--text-color) !important;
-}
-
-.mat-form-field-invalid .mat-form-field-outline > div {
-    border-color: red;
-}
-
-.country-list-button {
-    color: var(--text-color) !important;
-}
-
-.mat-menu-panel {
-    background: var(--background-color);
-    border-radius: 0;
-}
-
 .country-selector {
     opacity: 1 !important;
     display: none !important;
@@ -117,7 +151,6 @@ hr {
     color: var(--text-color);
 }
 
-
 qr-code canvas {
     transition: all 0.3s ease 0s;
 }

angular/src/test.ts

@@ -7,20 +7,8 @@ import {
   platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: {
-  context(path: string, deep?: boolean, filter?: RegExp): {
-    <T>(id: string): T;
-    keys(): string[];
-  };
-};
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting(),
 );
-
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().forEach(context);

angular/tsconfig.json

@@ -16,7 +16,7 @@
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2020",
+    "target": "ES2022",
     "module": "es2020",
     "lib": [
       "es2020",
@@ -24,6 +24,7 @@
     ],
     "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true,
+    "useDefineForClassFields": false
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,