@dontdrinkandroot/ngx-material-extensions 0.5.4 → 0.7.0

package/assets/_extensions.scss

@@ -8,7 +8,7 @@
             max-width: 90vw;
         }
 
-        .mat-mdc-nav-list {
+        .mat-mdc-nav-list.ddr-mat-sidenav-nav-list {
             .mat-mdc-list-item {
                 width: auto;
                 margin-right: .5rem;
@@ -62,7 +62,35 @@
     }
 
     ddr-mat-sidenav-toggle {
-        margin-right: .5rem;
+        margin-right: .25rem;
+    }
+
+    &.ddr-mat-toolbar-icon-start {
+        padding-left: .25rem;
+    }
+
+    &.ddr-mat-toolbar-icon-end {
+        padding-right: .25rem;
+    }
+
+    @include ddr-mat-mobile {
+        &.ddr-mat-toolbar-icon-start-mobile {
+            padding-left: .25rem;
+        }
+
+        &.ddr-mat-toolbar-icon-end-mobile {
+            padding-right: .25rem;
+        }
+    }
+
+    @include ddr-mat-desktop {
+        &.ddr-mat-toolbar-icon-start-desktop {
+            padding-left: .25rem;
+        }
+
+        &.ddr-mat-toolbar-icon-end-desktop {
+            padding-right: .25rem;
+        }
     }
 }
 

package/assets/_mixins.scss

@@ -0,0 +1,11 @@
+@mixin ddr-mat-mobile {
+    @media (max-width: #{$ddr-breakpoint-md - 1}) {
+        @content;
+    }
+}
+
+@mixin ddr-mat-desktop {
+    @media (min-width: #{$ddr-breakpoint-md}) {
+        @content;
+    }
+}

package/assets/_theme.scss

@@ -1,19 +1,18 @@
-@use '@angular/material-experimental' as matx;
 @use '@angular/material' as mat;
 
 @include mat.core();
 
-$ddr-mat-primary: matx.$m3-azure-palette !default;
-$ddr-mat-tertiary: matx.$m3-magenta-palette !default;
+$ddr-mat-primary: mat.$azure-palette !default;
+$ddr-mat-tertiary: mat.$magenta-palette !default;
 
-$ddr-light-theme: matx.define-theme((
+$ddr-light-theme: mat.define-theme((
         color: (
                 primary: $ddr-mat-primary,
                 tertiary: $ddr-mat-tertiary,
         ),
 )) !default;
 
-$ddr-dark-theme: matx.define-theme((
+$ddr-dark-theme: mat.define-theme((
         color: (
                 theme-type: dark,
                 primary: $ddr-mat-primary,
@@ -23,19 +22,6 @@ $ddr-dark-theme: matx.define-theme((
 
 html {
     @include mat.all-component-themes($ddr-light-theme);
-
-    &.mat-secondary {
-        @include mat.button-color($ddr-light-theme, $color-variant: secondary);
-    }
-
-    &.mat-tertiary {
-        @include mat.button-color($ddr-light-theme, $color-variant: tertiary);
-    }
-
-    &.mat-error {
-        @include mat.button-color($ddr-light-theme, $color-variant: error);
-    }
-
     @media (prefers-color-scheme: dark) {
         @include mat.all-component-colors($ddr-dark-theme);
     }

package/assets/_utils.scss

@@ -1,5 +1,6 @@
 @import "./utils/display";
 @import "./utils/spacing";
+@import "./utils/color";
 
 .flex-row {
     flex-direction: row !important;
@@ -26,10 +27,6 @@
     text-align: center !important;
 }
 
-.text-muted {
-    color: #9e9e9e !important;
-}
-
 .text-overflow-ellipsis {
     overflow: hidden !important;
     text-overflow: ellipsis !important;

package/assets/style.scss

@@ -1,4 +1,5 @@
 @import "variables";
+@import "mixins";
 @import "theme";
 @import "utils";
 @import "extensions";

package/assets/utils/_color.scss

@@ -0,0 +1,29 @@
+@use '@angular/material' as mat;
+
+.text-primary {
+    color: mat.get-theme-color($ddr-light-theme, primary) !important;
+    @media (prefers-color-scheme: dark) {
+        color: mat.get-theme-color($ddr-dark-theme, primary) !important;
+    }
+}
+
+.text-secondary {
+    color: mat.get-theme-color($ddr-light-theme, secondary) !important;
+    @media (prefers-color-scheme: dark) {
+        color: mat.get-theme-color($ddr-dark-theme, secondary) !important;
+    }
+}
+
+.text-tertiary {
+    color: mat.get-theme-color($ddr-light-theme, tertiary) !important;
+    @media (prefers-color-scheme: dark) {
+        color: mat.get-theme-color($ddr-dark-theme, tertiary) !important;
+    }
+}
+
+.text-error {
+    color: mat.get-theme-color($ddr-light-theme, error) !important;
+    @media (prefers-color-scheme: dark) {
+        color: mat.get-theme-color($ddr-dark-theme, error) !important;
+    }
+}

package/fesm2022/dontdrinkandroot-ngx-material-extensions.mjs

@@ -28,17 +28,24 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatToolbarModule } from '@angular/material/toolbar';
 
 class SidenavService {
+    breakpointObserver;
+    router;
+    document;
+    sidenav;
+    stayOpenOnLargeScreen = true;
+    largeBreakpoints = [
+        Breakpoints.Medium,
+        Breakpoints.Large,
+        Breakpoints.XLarge
+    ];
+    screenLarge$;
+    mode$;
+    opened$;
+    sidenavContentScrolled$ = new BehaviorSubject(false);
     constructor(breakpointObserver, router, document) {
         this.breakpointObserver = breakpointObserver;
         this.router = router;
         this.document = document;
-        this.stayOpenOnLargeScreen = true;
-        this.largeBreakpoints = [
-            Breakpoints.Medium,
-            Breakpoints.Large,
-            Breakpoints.XLarge
-        ];
-        this.sidenavContentScrolled$ = new BehaviorSubject(false);
         this.screenLarge$ = this.breakpointObserver.observe(this.largeBreakpoints).pipe(map(result => result.matches));
         this.mode$ = this.screenLarge$.pipe(map(large => large && this.stayOpenOnLargeScreen ? 'side' : 'over'));
         this.opened$ = this.screenLarge$.pipe(map(large => large && this.stayOpenOnLargeScreen));
@@ -83,10 +90,10 @@ class SidenavService {
     watchContentScrolled() {
         return this.sidenavContentScrolled$.asObservable();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SidenavService, deps: [{ token: i1.BreakpointObserver }, { token: i2.Router }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SidenavService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SidenavService, deps: [{ token: i1.BreakpointObserver }, { token: i2.Router }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SidenavService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SidenavService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SidenavService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -97,6 +104,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                 }] }] });
 
 class SidenavToggleComponent {
+    sidenavService;
+    visible;
     constructor(sidenavService) {
         this.sidenavService = sidenavService;
         this.visible = toSignal(this.sidenavService.watchToggleVisible(), { initialValue: false });
@@ -104,13 +113,13 @@ class SidenavToggleComponent {
     toggleSidenav() {
         this.sidenavService.toggle();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SidenavToggleComponent, deps: [{ token: SidenavService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: SidenavToggleComponent, selector: "ddr-mat-sidenav-toggle", host: { properties: { "style.display": "visible() ? \"block\" : \"none\"" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SidenavToggleComponent, deps: [{ token: SidenavService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: SidenavToggleComponent, isStandalone: false, selector: "ddr-mat-sidenav-toggle", host: { properties: { "style.display": "visible() ? \"block\" : \"none\"" } }, ngImport: i0, template: `
         <button mat-icon-button (click)="toggleSidenav()">
             <mat-icon>menu</mat-icon>
-        </button>`, isInline: true, dependencies: [{ kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] }); }
+        </button>`, isInline: true, dependencies: [{ kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SidenavToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SidenavToggleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ddr-mat-sidenav-toggle',
@@ -120,21 +129,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
         </button>`,
                     host: {
                         '[style.display]': 'visible() ? "block" : "none"'
-                    }
+                    },
+                    standalone: false
                 }]
         }], ctorParameters: () => [{ type: SidenavService }] });
 
 class GridTileLazyImgDirective {
+    element;
+    cd;
+    src;
+    hostSrc = 'assets/placeholder.gif';
+    hostStyleObjectFit = 'contain';
+    hostStyleWidthPx;
+    hostStyleHeightPx;
+    hostStyleOpacity = 0;
+    offset = 1000;
+    objectFit = 'cover';
+    displayed = false;
+    maxLoadedDimension = null;
     constructor(element, cd) {
         this.element = element;
         this.cd = cd;
-        this.hostSrc = 'assets/placeholder.gif';
-        this.hostStyleObjectFit = 'contain';
-        this.hostStyleOpacity = 0;
-        this.offset = 1000;
-        this.objectFit = 'cover';
-        this.displayed = false;
-        this.maxLoadedDimension = null;
     }
     recheck() {
         this.displayed = false;
@@ -172,7 +187,7 @@ class GridTileLazyImgDirective {
     /**
      * @override
      */
-    ngOnChanges(changes) {
+    ngOnChanges() {
         this.displayed = false;
         this.maxLoadedDimension = null;
         this.hostStyleOpacity = 0;
@@ -206,12 +221,15 @@ class GridTileLazyImgDirective {
         // console.log('isHidden');
         return window.getComputedStyle(nativeElement).display === 'none';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: GridTileLazyImgDirective, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: GridTileLazyImgDirective, selector: "[ddrGridTileLazyImg]", inputs: { src: ["ddrGridTileLazyImg", "src"], offset: "offset", objectFit: "objectFit" }, host: { properties: { "src": "this.hostSrc", "style.object-fit": "this.hostStyleObjectFit", "style.width.px": "this.hostStyleWidthPx", "style.height.px": "this.hostStyleHeightPx", "style.opacity": "this.hostStyleOpacity" } }, usesOnChanges: true, ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GridTileLazyImgDirective, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: GridTileLazyImgDirective, isStandalone: false, selector: "[ddrGridTileLazyImg]", inputs: { src: ["ddrGridTileLazyImg", "src"], offset: "offset", objectFit: "objectFit" }, host: { properties: { "src": "this.hostSrc", "style.object-fit": "this.hostStyleObjectFit", "style.width.px": "this.hostStyleWidthPx", "style.height.px": "this.hostStyleHeightPx", "style.opacity": "this.hostStyleOpacity" } }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: GridTileLazyImgDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GridTileLazyImgDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[ddrGridTileLazyImg]' }]
+            args: [{
+                    selector: '[ddrGridTileLazyImg]',
+                    standalone: false
+                }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { src: [{
                 type: Input,
                 args: ['ddrGridTileLazyImg']
@@ -237,24 +255,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
             }] } });
 
 class GridTileLazyImageContainerDirective {
-    windowResized($event) {
+    lazyImages;
+    changeSubscription;
+    windowResized() {
         if (null != this.lazyImages) {
-            this.lazyImages.forEach((lazyImage, index) => lazyImage.recheck());
+            this.lazyImages.forEach((lazyImage) => lazyImage.recheck());
         }
     }
-    windowScroll($event) {
+    windowScroll() {
         if (null != this.lazyImages) {
-            this.lazyImages.forEach((lazyImage, index) => lazyImage.check());
+            this.lazyImages.forEach((lazyImage) => lazyImage.check());
         }
     }
     /**
      * @override
      */
     ngAfterContentInit() {
-        this.lazyImages.forEach((lazyImage, index) => lazyImage.check());
+        this.lazyImages.forEach((lazyImage) => lazyImage.check());
         this.changeSubscription = this.lazyImages.changes.subscribe(() => {
             /* Wait one tick until layout is ready */
-            setTimeout(() => this.lazyImages.forEach((lazyImage, index) => lazyImage.recheck()), 1);
+            setTimeout(() => this.lazyImages.forEach((lazyImage) => lazyImage.recheck()), 1);
         });
     }
     /**
@@ -263,8 +283,8 @@ class GridTileLazyImageContainerDirective {
     ngOnDestroy() {
         this.changeSubscription.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: GridTileLazyImageContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: GridTileLazyImageContainerDirective, selector: "[ddrGridTileLazyImgContainer]", host: { listeners: { "window:resize": "windowResized($event)", "window:scroll": "windowScroll($event)" } }, queries: [{ propertyName: "lazyImages", predicate: GridTileLazyImgDirective, descendants: true }], ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GridTileLazyImageContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: GridTileLazyImageContainerDirective, isStandalone: false, selector: "[ddrGridTileLazyImgContainer]", host: { listeners: { "window:resize": "windowResized($event)", "window:scroll": "windowScroll($event)" } }, queries: [{ propertyName: "lazyImages", predicate: GridTileLazyImgDirective, descendants: true }], ngImport: i0 });
 }
 __decorate([
     Debounce()
@@ -272,9 +292,12 @@ __decorate([
 __decorate([
     Limit()
 ], GridTileLazyImageContainerDirective.prototype, "windowScroll", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: GridTileLazyImageContainerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GridTileLazyImageContainerDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[ddrGridTileLazyImgContainer]' }]
+            args: [{
+                    selector: '[ddrGridTileLazyImgContainer]',
+                    standalone: false
+                }]
         }], propDecorators: { lazyImages: [{
                 type: ContentChildren,
                 args: [GridTileLazyImgDirective, { descendants: true }]
@@ -287,9 +310,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
             }] } });
 
 class SidenavContainerComponent {
+    sidenavService;
+    sidenav;
+    stayOpenOnLargeScreen = true;
+    mode$;
+    opened$;
+    scrollSubscription;
     constructor(sidenavService) {
         this.sidenavService = sidenavService;
-        this.stayOpenOnLargeScreen = true;
         this.mode$ = this.sidenavService.getModeObservable();
         this.opened$ = this.sidenavService.getOpenedObservable();
     }
@@ -311,12 +339,12 @@ class SidenavContainerComponent {
     ngOnDestroy() {
         this.scrollSubscription.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SidenavContainerComponent, deps: [{ token: SidenavService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: SidenavContainerComponent, selector: "ddr-mat-sidenav-container", inputs: { stayOpenOnLargeScreen: "stayOpenOnLargeScreen" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["sidenav"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<mat-sidenav-container [ngClass]=\"(mode$|async)\">\n    <mat-sidenav\n        #sidenav\n        [mode]=\"(mode$|async) ?? 'over'\"\n        [opened]=\"(opened$|async)\"\n        [fixedInViewport]=\"true\"\n    >\n        <ng-content select=\"[slot=mat-sidenav]\"></ng-content>\n    </mat-sidenav>\n    <mat-sidenav-content #sidenavContent>\n        <ng-content select=\"[slot=mat-sidenav-content]\"></ng-content>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3$1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i3$1.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SidenavContainerComponent, deps: [{ token: SidenavService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: SidenavContainerComponent, isStandalone: false, selector: "ddr-mat-sidenav-container", inputs: { stayOpenOnLargeScreen: "stayOpenOnLargeScreen" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["sidenav"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<mat-sidenav-container [ngClass]=\"(mode$|async)\">\n    <mat-sidenav\n        #sidenav\n        [mode]=\"(mode$|async) ?? 'over'\"\n        [opened]=\"(opened$|async)\"\n        [fixedInViewport]=\"true\"\n    >\n        <ng-content select=\"[slot=mat-sidenav]\"></ng-content>\n    </mat-sidenav>\n    <mat-sidenav-content #sidenavContent>\n        <ng-content select=\"[slot=mat-sidenav-content]\"></ng-content>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3$1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i3$1.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SidenavContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SidenavContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ddr-mat-sidenav-container', template: "<mat-sidenav-container [ngClass]=\"(mode$|async)\">\n    <mat-sidenav\n        #sidenav\n        [mode]=\"(mode$|async) ?? 'over'\"\n        [opened]=\"(opened$|async)\"\n        [fixedInViewport]=\"true\"\n    >\n        <ng-content select=\"[slot=mat-sidenav]\"></ng-content>\n    </mat-sidenav>\n    <mat-sidenav-content #sidenavContent>\n        <ng-content select=\"[slot=mat-sidenav-content]\"></ng-content>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n" }]
+            args: [{ selector: 'ddr-mat-sidenav-container', standalone: false, template: "<mat-sidenav-container [ngClass]=\"(mode$|async)\">\n    <mat-sidenav\n        #sidenav\n        [mode]=\"(mode$|async) ?? 'over'\"\n        [opened]=\"(opened$|async)\"\n        [fixedInViewport]=\"true\"\n    >\n        <ng-content select=\"[slot=mat-sidenav]\"></ng-content>\n    </mat-sidenav>\n    <mat-sidenav-content #sidenavContent>\n        <ng-content select=\"[slot=mat-sidenav-content]\"></ng-content>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n" }]
         }], ctorParameters: () => [{ type: SidenavService }], propDecorators: { sidenav: [{
                 type: ViewChild,
                 args: ['sidenav', { static: true }]
@@ -325,18 +353,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
             }] } });
 
 class FilterComponent {
-    constructor() {
-        this.formControl = new FormControl();
-        this.onFilterChanged = new EventEmitter();
-        this.bouncePeriod = 500;
-    }
+    formControl = new FormControl();
+    filterChanged = new EventEmitter();
+    bouncePeriod = 500;
+    inputElement;
+    valueChangesSubscription;
     /**
      * @override
      */
     ngOnInit() {
         this.valueChangesSubscription = this.formControl.valueChanges
             .pipe(debounce(() => interval(this.bouncePeriod)))
-            .subscribe((value => this.onFilterChanged.emit(value)));
+            .subscribe((value => this.filterChanged.emit(value)));
     }
     /**
      * @override
@@ -352,15 +380,15 @@ class FilterComponent {
     }
     clear() {
         this.formControl.setValue(null);
-        this.onFilterChanged.emit(undefined);
+        this.filterChanged.emit(undefined);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: FilterComponent, selector: "ddr-filter", inputs: { bouncePeriod: "bouncePeriod" }, outputs: { onFilterChanged: "onFilterChanged" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: "<mat-card appearance=\"outlined\">\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <input matInput type=\"text\" [formControl]=\"formControl\" #input />\n        <button mat-icon-button matSuffix (click)=\"clear()\">\n            <mat-icon>close</mat-icon>\n        </button>\n    </mat-form-field>\n</mat-card>\n", dependencies: [{ kind: "component", type: i1$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: FilterComponent, isStandalone: false, selector: "ddr-filter", inputs: { bouncePeriod: "bouncePeriod" }, outputs: { filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: "<mat-card appearance=\"outlined\">\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <input matInput type=\"text\" [formControl]=\"formControl\" #input />\n        <button mat-icon-button matSuffix (click)=\"clear()\">\n            <mat-icon>close</mat-icon>\n        </button>\n    </mat-form-field>\n</mat-card>\n", dependencies: [{ kind: "component", type: i1$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: FilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ddr-filter', template: "<mat-card appearance=\"outlined\">\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <input matInput type=\"text\" [formControl]=\"formControl\" #input />\n        <button mat-icon-button matSuffix (click)=\"clear()\">\n            <mat-icon>close</mat-icon>\n        </button>\n    </mat-form-field>\n</mat-card>\n" }]
-        }], propDecorators: { onFilterChanged: [{
+            args: [{ selector: 'ddr-filter', standalone: false, template: "<mat-card appearance=\"outlined\">\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <input matInput type=\"text\" [formControl]=\"formControl\" #input />\n        <button mat-icon-button matSuffix (click)=\"clear()\">\n            <mat-icon>close</mat-icon>\n        </button>\n    </mat-form-field>\n</mat-card>\n" }]
+        }], propDecorators: { filterChanged: [{
                 type: Output
             }], bouncePeriod: [{
                 type: Input
@@ -372,6 +400,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
 const DDR_MATERIAL_EXTENSIONS_THEME = new InjectionToken('DDR_MATERIAL_EXTENSIONS_THEME');
 
 class ThemeScrollService {
+    document;
+    themeConfig;
     constructor(document, themeConfig) {
         this.document = document;
         this.themeConfig = themeConfig;
@@ -381,7 +411,7 @@ class ThemeScrollService {
         const darkMetaElement = this.findOrCreateThemeColorMetaElement('(prefers-color-scheme: dark)', this.themeConfig.themeColorDark);
         fromEvent(this.document, 'scroll')
             .pipe(map(() => this.document.documentElement.scrollTop > 0), distinctUntilChanged()).subscribe((scrolled) => {
-            scrolled ? this.document.body.classList.add('ddr-mat-scrolled') : this.document.body.classList.remove('ddr-mat-scrolled');
+            this.document.body.classList.toggle('ddr-mat-scrolled', scrolled);
             lightMetaElement.content = scrolled ? this.themeConfig.themeColorLightScrolled : this.themeConfig.themeColorLight;
             darkMetaElement.content = scrolled ? this.themeConfig.themeColorDarkScrolled : this.themeConfig.themeColorDark;
         });
@@ -401,10 +431,10 @@ class ThemeScrollService {
         this.document.head.appendChild(metaElement);
         return metaElement;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ThemeScrollService, deps: [{ token: DOCUMENT }, { token: DDR_MATERIAL_EXTENSIONS_THEME }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ThemeScrollService }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ThemeScrollService, deps: [{ token: DOCUMENT }, { token: DDR_MATERIAL_EXTENSIONS_THEME }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ThemeScrollService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ThemeScrollService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ThemeScrollService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
@@ -415,9 +445,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                 }] }] });
 
 class ToolbarFixedTopDirective {
+    el;
+    ddrMatToolbarFixedTop = '';
     constructor(el) {
         this.el = el;
-        this.ddrMatToolbarFixedTop = undefined;
     }
     /**
      * @override
@@ -427,23 +458,27 @@ class ToolbarFixedTopDirective {
         container.classList.add('ddr-mat-toolbar-fixed-top-container');
         this.el.nativeElement.parentElement.insertBefore(container, this.el.nativeElement);
         container.appendChild(this.el.nativeElement);
-        if (this.ddrMatToolbarFixedTop != null && '' !== this.ddrMatToolbarFixedTop) {
-            container.classList.add(this.ddrMatToolbarFixedTop);
+        if ('' !== this.ddrMatToolbarFixedTop) {
+            this.ddrMatToolbarFixedTop.forEach((className) => {
+                container.classList.add(className);
+            });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ToolbarFixedTopDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: ToolbarFixedTopDirective, selector: "[ddrMatToolbarFixedTop]", inputs: { ddrMatToolbarFixedTop: "ddrMatToolbarFixedTop" }, ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ToolbarFixedTopDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: ToolbarFixedTopDirective, isStandalone: false, selector: "[ddrMatToolbarFixedTop]", inputs: { ddrMatToolbarFixedTop: "ddrMatToolbarFixedTop" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ToolbarFixedTopDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ToolbarFixedTopDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ddrMatToolbarFixedTop]'
+                    selector: '[ddrMatToolbarFixedTop]',
+                    standalone: false
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { ddrMatToolbarFixedTop: [{
                 type: Input
             }] } });
 
 class FabFixedDirective {
+    el;
     constructor(el) {
         this.el = el;
     }
@@ -456,19 +491,20 @@ class FabFixedDirective {
         this.el.nativeElement.parentElement.insertBefore(container, this.el.nativeElement);
         container.appendChild(this.el.nativeElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: FabFixedDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: FabFixedDirective, selector: "[ddrMatFabFixed]", ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FabFixedDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: FabFixedDirective, isStandalone: false, selector: "[ddrMatFabFixed]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: FabFixedDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FabFixedDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ddrMatFabFixed]'
+                    selector: '[ddrMatFabFixed]',
+                    standalone: false
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }] });
 
 class DdrMaterialExtensionsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: DdrMaterialExtensionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: DdrMaterialExtensionsModule, declarations: [FabFixedDirective,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DdrMaterialExtensionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: DdrMaterialExtensionsModule, declarations: [FabFixedDirective,
             FilterComponent,
             SidenavToggleComponent,
             GridTileLazyImageContainerDirective,
@@ -488,8 +524,8 @@ class DdrMaterialExtensionsModule {
             GridTileLazyImageContainerDirective,
             GridTileLazyImgDirective,
             SidenavContainerComponent,
-            ToolbarFixedTopDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: DdrMaterialExtensionsModule, providers: [
+            ToolbarFixedTopDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DdrMaterialExtensionsModule, providers: [
             ThemeScrollService,
             {
                 provide: ENVIRONMENT_INITIALIZER,
@@ -516,9 +552,9 @@ class DdrMaterialExtensionsModule {
             MatButtonModule,
             MatFormFieldModule,
             MatToolbarModule,
-            ReactiveFormsModule] }); }
+            ReactiveFormsModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: DdrMaterialExtensionsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DdrMaterialExtensionsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [