BP-1496: Add Disabled State Support in Theming for Angular Material Components

.vscode/settings.json

@@ -1,8 +1,20 @@
 {
     "cSpell.words": [
+        "Formly",
         "stylelint"
     ],
+    "css.validate": false,
+    "less.validate": false,
+    "scss.validate": false,
+    "stylelint.enable": true,
+    "stylelint.validate": [
+        "css",
+        "scss"
+    ],
+    "editor.formatOnSave": false,
     "editor.codeActionsOnSave": {
+        "source.fixAll.stylelint": "explicit",
         "source.fixAll.eslint": "explicit"
-    }
+    },
+    "files.autoSaveDelay": 500
 }

README.md

@@ -24,6 +24,7 @@ Visit components demo application. [Website](https://entry-demo.enigmatry.com/)
 |17.x| = 17
 |18.x| = 18
 |19.x| = 19
+|20.x| = 20
 
 ## Migrate project to entry
 

angular.json

@@ -23,15 +23,6 @@
             }
           },
           "defaultConfiguration": "production"
-        },
-        "lint": {
-          "builder": "@angular-eslint/builder:lint",
-          "options": {
-            "lintFilePatterns": [
-              "libs/entry-form/**/*.ts",
-              "libs/entry-form/**/*.html"
-            ]
-          }
         }
       }
     },
@@ -55,15 +46,6 @@
             }
           },
           "defaultConfiguration": "production"
-        },
-        "lint": {
-          "builder": "@angular-eslint/builder:lint",
-          "options": {
-            "lintFilePatterns": [
-              "libs/entry-components/**/*.ts",
-              "libs/entry-components/**/*.html"
-            ]
-          }
         }
       }
     },
@@ -169,23 +151,8 @@
           "options": {
             "buildTarget": "@enigmatry/demo-app:build"
           }
-        },
-        "lint": {
-          "builder": "@angular-eslint/builder:lint",
-          "options": {
-            "lintFilePatterns": [
-              "apps/demo-app/**/*.ts",
-              "apps/demo-app/**/*.html"
-            ]
-          }
         }
       }
     }
-  },
-  "cli": {
-    "schematicCollections": [
-      "@angular-eslint/schematics"
-    ],
-    "analytics": false
   }
 }

apps/demo-app/eslint.config.js

@@ -0,0 +1,11 @@
+import defaultEnigmatryConfiguration from '../../libs/eslint-config/index.js';
+
+export default [
+    ...defaultEnigmatryConfiguration,
+        {
+        files: ['src/**/*.ts'],
+        rules: {
+            '@angular-eslint/prefer-standalone': 'off' // TODO: Remove when we get rid of Formly
+        }
+    }
+];

apps/demo-app/src/app/app-routing.module.ts

@@ -1,4 +1,4 @@
-/* eslint-disable max-len */
+
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { RouteSegments } from './features/route-segments';
@@ -51,7 +51,8 @@ const routes: Routes = [
   },
   {
     path: RouteSegments.dateTimePicker,
-    loadComponent: () => import('./features/date-time-picker/date-time-picker-documentation.component').then(m => m.DateTimePickerDocumentationComponent)
+    loadComponent: () => import('./features/date-time-picker/date-time-picker-documentation.component')
+      .then(m => m.DateTimePickerDocumentationComponent)
   }
 ];
 

apps/demo-app/src/app/app.component.ts

@@ -1,7 +1,7 @@
-import { Component, OnInit } from '@angular/core';
-import { IComponentDefinition, COMPONENT_DEFINITIONS } from './features/component-definitions';
+import { Component, inject, OnInit } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { filter } from 'rxjs/operators';
+import { IComponentDefinition, COMPONENT_DEFINITIONS } from './features/component-definitions';
 
 @Component({
     selector: 'app-root',
@@ -12,8 +12,7 @@ import { filter } from 'rxjs/operators';
 export class AppComponent implements OnInit {
   menuItems = COMPONENT_DEFINITIONS;
   selectedMenuItem: IComponentDefinition | undefined = undefined;
-
-  constructor(private router: Router) { }
+  private readonly router: Router = inject(Router);
 
   ngOnInit(): void {
     this.router.events

apps/demo-app/src/app/app.module.ts

@@ -1,12 +1,12 @@
+import { provideHttpClient } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { provideHttpClient } from '@angular/common/http';
 
+import { EntryCommonModule } from '@enigmatry/entry-components/common';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { SharedModule } from './shared/shared.module';
-import { EntryCommonModule } from '@enigmatry/entry-components/common';
 
 
 @NgModule({

apps/demo-app/src/app/examples/button/button-example.module.ts

@@ -1,8 +1,8 @@
-import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ButtonExampleComponent } from './button-example/button-example.component';
-import { SharedModule } from '../../shared/shared.module';
+import { NgModule } from '@angular/core';
 import { EntryButtonModule, provideEntryButtonConfig } from '@enigmatry/entry-components/button';
+import { SharedModule } from '../../shared/shared.module';
+import { ButtonExampleComponent } from './button-example/button-example.component';
 
 @NgModule({
   declarations: [

apps/demo-app/src/app/examples/common/common-example.module.ts

@@ -1,12 +1,12 @@
-import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { EventPluginExampleComponent } from './event-plugin-example/event-plugin-example.component';
-import { MatInputModule } from '@angular/material/input';
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
-import { MatButtonModule } from '@angular/material/button';
+import { MatInputModule } from '@angular/material/input';
 import { SharedModule } from '../../shared/shared.module';
 import { AutoDisableButtonExampleComponent } from './directives/auto-disable-button-example/auto-disable-button-example.component';
+import { EventPluginExampleComponent } from './event-plugin-example/event-plugin-example.component';
 
 @NgModule({
   declarations: [

apps/demo-app/src/app/examples/common/event-plugin-example/event-plugin-example.component.ts

@@ -6,7 +6,6 @@ import { Component, ElementRef, ViewChild } from '@angular/core';
     standalone: false
 })
 export class EventPluginExampleComponent {
-
   @ViewChild('events', { static: true }) events: ElementRef<HTMLTextAreaElement>;
 
   log(eventName: string) {

apps/demo-app/src/app/examples/date-time-picker/date-time-picker-example.module.ts

@@ -1,22 +1,22 @@
-import { NgModule } from "@angular/core";
-import { CommonModule } from "@angular/common";
-import { EntryDateTimePickerModule } from "@enigmatry/entry-components/date-time-picker";
-import { MinMaxComponent } from './min-max/min-max.component';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { DateFnsAdapter, MAT_DATE_FNS_FORMATS } from '@angular/material-date-fns-adapter';
+import { provideEntryNativeTimeAdapter } from '@enigmatry/entry-components/common';
+import { EntryDateTimePickerModule } from '@enigmatry/entry-components/date-time-picker';
+import { provideEntryValidationConfig } from '@enigmatry/entry-components/validation';
 import { BasicComponent } from './basic/basic.component';
+import { DefaultTimeComponent } from './default-time/default-time.component';
 import { DisableComponent } from './disable/disable.component';
 import { MeridiemComponent } from './meridiem/meridiem.component';
-import { provideEntryNativeTimeAdapter } from "@enigmatry/entry-components/common";
-import { FormsModule, ReactiveFormsModule } from "@angular/forms";
-import { DateFnsAdapter, MAT_DATE_FNS_FORMATS } from "@angular/material-date-fns-adapter";
-import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from "@angular/material/core";
-import { MatCheckboxModule } from "@angular/material/checkbox";
-import { MatDatepickerModule } from "@angular/material/datepicker";
-import { MatFormFieldModule } from "@angular/material/form-field";
-import { MatInputModule } from "@angular/material/input";
-import { provideEntryValidationConfig } from "@enigmatry/entry-components/validation";
+import { MinMaxComponent } from './min-max/min-max.component';
 import { SecondsComponent } from './seconds/seconds.component';
-import { DefaultTimeComponent } from './default-time/default-time.component';
-import { WithValidationComponent } from "./with-validation/with-validation.component";
+import { WithValidationComponent } from './with-validation/with-validation.component';
 
 @NgModule({
   declarations: [
@@ -55,17 +55,17 @@ import { WithValidationComponent } from "./with-validation/with-validation.compo
     {
       provide: DateAdapter,
       useClass: DateFnsAdapter,
-      deps: [MAT_DATE_LOCALE],
+      deps: [MAT_DATE_LOCALE]
     },
     provideEntryNativeTimeAdapter({
       parse: {
-        dateInput: ['dd-MM-yyyy', 'dd-MM-yyyy HH', 'dd-MM-yyyy HH:mm'],
+        dateInput: ['dd-MM-yyyy', 'dd-MM-yyyy HH', 'dd-MM-yyyy HH:mm']
       },
       display: {
         dateInput: 'dd-MM-yyyy HH:mm',
         monthYearLabel: 'LLL uuuu',
         dateA11yLabel: 'PP',
-        monthYearA11yLabel: 'LLLL uuuu',
+        monthYearA11yLabel: 'LLLL uuuu'
       }
     }),
     provideEntryValidationConfig({

apps/demo-app/src/app/examples/date-time-picker/default-time/default-time.component.ts

@@ -8,5 +8,6 @@ import { FormControl } from '@angular/forms';
 })
 export class DefaultTimeComponent {
   dateTime = new FormControl();
+  // eslint-disable-next-line @typescript-eslint/no-magic-numbers
   defaultTime = new Date(0, 0, 0, 12, 0, 0);
 }

apps/demo-app/src/app/examples/date-time-picker/meridiem/meridiem.component.ts

@@ -8,13 +8,13 @@ import { provideEntryNativeTimeAdapter } from '@enigmatry/entry-components';
     providers: [
         provideEntryNativeTimeAdapter({
             parse: {
-                dateInput: ['dd-MM-yyyy', 'dd-MM-yyyy HH', 'dd-MM-yyyy hh:mm aaa'],
+                dateInput: ['dd-MM-yyyy', 'dd-MM-yyyy HH', 'dd-MM-yyyy hh:mm aaa']
             },
             display: {
                 dateInput: 'dd-MM-yyyy hh:mm aaa',
                 monthYearLabel: 'LLL uuuu',
                 dateA11yLabel: 'PP',
-                monthYearA11yLabel: 'LLLL uuuu',
+                monthYearA11yLabel: 'LLLL uuuu'
             }
         })
     ],

apps/demo-app/src/app/examples/date-time-picker/min-max/min-max.component.ts

@@ -7,6 +7,7 @@ import { FormControl } from '@angular/forms';
     standalone: false
 })
 export class MinMaxComponent {
+  // eslint-disable-next-line @typescript-eslint/no-magic-numbers
   tenDays = 10 * 24 * 60 * 60 * 1000;
   minDate = new Date(new Date().getTime() - this.tenDays);
   maxDate = new Date(new Date().getTime() + this.tenDays);