@dontdrinkandroot/ngx-material-extensions 0.7.1 → 0.7.3

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

@@ -1,140 +1,154 @@
 import * as i0 from '@angular/core';
-import { Injectable, Inject, Component, Directive, Input, HostBinding, ContentChildren, HostListener, ViewChild, EventEmitter, Output, InjectionToken, NgModule, makeEnvironmentProviders, provideEnvironmentInitializer, inject } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
-import * as i1 from '@angular/cdk/layout';
-import { Breakpoints } from '@angular/cdk/layout';
-import { BehaviorSubject, interval, fromEvent, distinctUntilChanged } from 'rxjs';
+import { InjectionToken, Injectable, Inject, makeEnvironmentProviders, provideEnvironmentInitializer, inject, Directive, input, Component, ChangeDetectionStrategy, Input, ViewChild, HostBinding, ContentChildren, HostListener, signal, effect } from '@angular/core';
+import { MatIconRegistry, MatIcon } from '@angular/material/icon';
+import { DOCUMENT, NgClass } from '@angular/common';
+import { fromEvent, distinctUntilChanged, interval, BehaviorSubject, combineLatest } from 'rxjs';
 import { map, debounce } from 'rxjs/operators';
-import * as i2 from '@angular/router';
-import { NavigationStart } from '@angular/router';
-import * as i2$2 from '@angular/common';
-import { DOCUMENT, CommonModule } from '@angular/common';
-import * as i2$1 from '@angular/material/icon';
-import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
-import * as i3 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i3$1 from '@angular/material/sidenav';
-import { MatSidenavModule } from '@angular/material/sidenav';
+import * as i1 from '@angular/forms';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { MatCard } from '@angular/material/card';
+import { MatFormField, MatSuffix, MatPrefix } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import { MatIconButton } from '@angular/material/button';
+import { outputFromObservable, toObservable, toSignal } from '@angular/core/rxjs-interop';
 import { __decorate } from 'tslib';
 import { NumberUtils, StringUtils, Debounce, Limit } from '@dontdrinkandroot/ngx-extensions';
-import * as i6 from '@angular/forms';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import * as i1$1 from '@angular/material/card';
-import { MatCardModule } from '@angular/material/card';
-import * as i3$2 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i4 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatSidenav, MatSidenavContainer, MatSidenavContent } from '@angular/material/sidenav';
+import * as i1$1 from '@angular/cdk/layout';
+import { Breakpoints } from '@angular/cdk/layout';
+import * as i2 from '@angular/router';
+import { NavigationStart } from '@angular/router';
 
-class SidenavService {
-    breakpointObserver;
-    router;
+const DDR_MAT_THEME = new InjectionToken('DDR_MAT_THEME');
+
+class DdrMatThemeScrollService {
     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;
+    themeConfig;
+    constructor(document, themeConfig) {
         this.document = document;
-        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));
-        this.router.events.subscribe(event => {
-            if (event instanceof NavigationStart) {
-                this.closeSidebar();
-            }
-        });
-    }
-    setSidenav(sidenav) {
-        this.sidenav = sidenav;
-    }
-    getStayOpenOnLargeScreen() {
-        return this.stayOpenOnLargeScreen;
-    }
-    setStayOpenOnLargeScreen(value) {
-        this.stayOpenOnLargeScreen = value;
+        this.themeConfig = themeConfig;
     }
-    toggle() {
-        if (null == this.sidenav) {
-            return Promise.reject('No MatSidenav found. Use setSidenav() of SidenavService');
-        }
-        if (!(this.stayOpenOnLargeScreen && this.breakpointObserver.isMatched(this.largeBreakpoints))) {
-            return this.sidenav.toggle();
-        }
-        return Promise.resolve(this.sidenav.opened ? 'open' : 'close');
+    init() {
+        const lightMetaElement = this.findOrCreateThemeColorMetaElement('(prefers-color-scheme: light)', this.themeConfig.themeColorLight);
+        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) => {
+            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;
+        });
     }
-    closeSidebar() {
-        if (!(this.stayOpenOnLargeScreen && this.breakpointObserver.isMatched(this.largeBreakpoints))) {
-            this.sidenav.close();
+    findOrCreateThemeColorMetaElement(media, content) {
+        let metaElement = this.document.head.querySelector(`meta[name="theme-color"][media="${media}"]`);
+        if (null == metaElement) {
+            metaElement = this.createThemeColorMetaElement(media, content);
         }
+        return metaElement;
     }
-    getModeObservable() {
-        return this.mode$;
-    }
-    getOpenedObservable() {
-        return this.opened$;
-    }
-    watchToggleVisible() {
-        return this.screenLarge$.pipe(map(large => !large || !this.stayOpenOnLargeScreen));
-    }
-    watchContentScrolled() {
-        return this.sidenavContentScrolled$.asObservable();
+    createThemeColorMetaElement(media, content) {
+        const metaElement = this.document.createElement('meta');
+        metaElement.name = 'theme-color';
+        metaElement.media = media;
+        metaElement.content = content;
+        this.document.head.appendChild(metaElement);
+        return metaElement;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", 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.6", ngImport: i0, type: SidenavService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: DdrMatThemeScrollService, deps: [{ token: DOCUMENT }, { token: DDR_MAT_THEME }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: DdrMatThemeScrollService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SidenavService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: i1.BreakpointObserver }, { type: i2.Router }, { type: Document, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: DdrMatThemeScrollService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DDR_MAT_THEME]
                 }] }] });
 
-class SidenavToggleComponent {
-    sidenavService;
-    visible;
-    constructor(sidenavService) {
-        this.sidenavService = sidenavService;
-        this.visible = toSignal(this.sidenavService.watchToggleVisible(), { initialValue: false });
+function provideDdrMaterialExtensions() {
+    return makeEnvironmentProviders([
+        DdrMatThemeScrollService,
+        {
+            provide: DDR_MAT_THEME,
+            multi: false,
+            useValue: {
+                themeColorLight: '#fdfbff',
+                themeColorDark: '#1a1b1f',
+                themeColorLightScrolled: '#efedf1',
+                themeColorDarkScrolled: '#1e1f23',
+            }
+        },
+        provideEnvironmentInitializer(() => {
+            inject(DdrMatThemeScrollService).init();
+            inject(MatIconRegistry).setDefaultFontSetClass('material-symbols-rounded');
+        })
+    ]);
+}
+
+class DdrMatFabFixedDirective {
+    el;
+    constructor(el) {
+        this.el = el;
     }
-    toggleSidenav() {
-        this.sidenavService.toggle();
+    /**
+     * @override
+     */
+    ngOnInit() {
+        const container = document.createElement('div');
+        container.classList.add('ddr-mat-fab-fixed-container');
+        this.el.nativeElement.parentElement.insertBefore(container, this.el.nativeElement);
+        container.appendChild(this.el.nativeElement);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SidenavToggleComponent, deps: [{ token: SidenavService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: DdrMatFabFixedDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.2", type: DdrMatFabFixedDirective, isStandalone: true, selector: "[ddrMatFabFixed]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SidenavToggleComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: DdrMatFabFixedDirective, decorators: [{
+            type: Directive,
             args: [{
-                    selector: 'ddr-mat-sidenav-toggle',
-                    template: `
-        <button mat-icon-button (click)="toggleSidenav()">
-            <mat-icon>menu</mat-icon>
-        </button>`,
-                    host: {
-                        '[style.display]': 'visible() ? "block" : "none"'
-                    },
-                    standalone: false
+                    selector: '[ddrMatFabFixed]',
                 }]
-        }], ctorParameters: () => [{ type: SidenavService }] });
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+
+class DdrMatFilterComponent {
+    formControl = new FormControl(null);
+    filterChanged = outputFromObservable(this.formControl.valueChanges
+        .pipe(debounce(() => interval(this.bouncePeriod))));
+    bouncePeriod = 500;
+    ddrMatPrefixIcon = input(null);
+    inputElement;
+    /**
+     * @override
+     */
+    ngAfterContentInit() {
+        this.inputElement.nativeElement.focus();
+    }
+    clear() {
+        this.formControl.setValue(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: DdrMatFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.2", type: DdrMatFilterComponent, isStandalone: true, selector: "ddr-mat-filter", inputs: { bouncePeriod: { classPropertyName: "bouncePeriod", publicName: "bouncePeriod", isSignal: false, isRequired: false, transformFunction: null }, ddrMatPrefixIcon: { classPropertyName: "ddrMatPrefixIcon", publicName: "ddrMatPrefixIcon", isSignal: true, isRequired: false, transformFunction: null } }, 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        @if (ddrMatPrefixIcon()) {\n            <mat-icon matPrefix>{{ ddrMatPrefixIcon() }}</mat-icon>\n        }\n        <button mat-icon-button matSuffix (click)=\"clear()\">\n            <mat-icon>close</mat-icon>\n        </button>\n    </mat-form-field>\n</mat-card>\n", styles: [""], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: 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: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: DdrMatFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ddr-mat-filter', imports: [
+                        MatIconButton,
+                        MatCard,
+                        MatFormField,
+                        MatIcon,
+                        MatInput,
+                        MatSuffix,
+                        ReactiveFormsModule,
+                        MatPrefix
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-card appearance=\"outlined\">\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\">\n        <input matInput type=\"text\" [formControl]=\"formControl\" #input/>\n        @if (ddrMatPrefixIcon()) {\n            <mat-icon matPrefix>{{ ddrMatPrefixIcon() }}</mat-icon>\n        }\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: { bouncePeriod: [{
+                type: Input
+            }], inputElement: [{
+                type: ViewChild,
+                args: ['input', { static: true }]
+            }] } });
 
-class GridTileLazyImgDirective {
+class DdrMatGridTileLazyImgDirective {
     element;
     cd;
     src;
@@ -221,18 +235,17 @@ class GridTileLazyImgDirective {
         // console.log('isHidden');
         return window.getComputedStyle(nativeElement).display === 'none';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", 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.6", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: DdrMatGridTileLazyImgDirective, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.2", type: DdrMatGridTileLazyImgDirective, isStandalone: true, selector: "[ddrMatGridTileLazyImg]", inputs: { src: ["ddrMatGridTileLazyImg", "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: "19.0.6", ngImport: i0, type: GridTileLazyImgDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: DdrMatGridTileLazyImgDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ddrGridTileLazyImg]',
-                    standalone: false
+                    selector: '[ddrMatGridTileLazyImg]'
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { src: [{
                 type: Input,
-                args: ['ddrGridTileLazyImg']
+                args: ['ddrMatGridTileLazyImg']
             }], hostSrc: [{
                 type: HostBinding,
                 args: ['src']
@@ -254,7 +267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                 type: Input
             }] } });
 
-class GridTileLazyImageContainerDirective {
+class DdrMatGridTileLazyImageContainerDirective {
     lazyImages;
     changeSubscription;
     windowResized() {
@@ -283,24 +296,23 @@ class GridTileLazyImageContainerDirective {
     ngOnDestroy() {
         this.changeSubscription.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: GridTileLazyImageContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: DdrMatGridTileLazyImageContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.2", type: DdrMatGridTileLazyImageContainerDirective, isStandalone: true, selector: "[ddrMatGridTileLazyImgContainer]", host: { listeners: { "window:resize": "windowResized($event)", "window:scroll": "windowScroll($event)" } }, queries: [{ propertyName: "lazyImages", predicate: DdrMatGridTileLazyImgDirective, descendants: true }], ngImport: i0 });
 }
 __decorate([
     Debounce()
-], GridTileLazyImageContainerDirective.prototype, "windowResized", null);
+], DdrMatGridTileLazyImageContainerDirective.prototype, "windowResized", null);
 __decorate([
     Limit()
-], GridTileLazyImageContainerDirective.prototype, "windowScroll", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: GridTileLazyImageContainerDirective, decorators: [{
+], DdrMatGridTileLazyImageContainerDirective.prototype, "windowScroll", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: DdrMatGridTileLazyImageContainerDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ddrGridTileLazyImgContainer]',
-                    standalone: false
+                    selector: '[ddrMatGridTileLazyImgContainer]'
                 }]
         }], propDecorators: { lazyImages: [{
                 type: ContentChildren,
-                args: [GridTileLazyImgDirective, { descendants: true }]
+                args: [DdrMatGridTileLazyImgDirective, { descendants: true }]
             }], windowResized: [{
                 type: HostListener,
                 args: ['window:resize', ['$event']]
@@ -309,23 +321,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                 args: ['window:scroll', ['$event']]
             }] } });
 
-class SidenavContainerComponent {
+class DdrMatSidenavService {
+    breakpointObserver;
+    router;
+    sidenav;
+    largeBreakpoints = [
+        Breakpoints.Medium,
+        Breakpoints.Large,
+        Breakpoints.XLarge
+    ];
+    stayOpenOnLargeScreen = signal(true);
+    stayOpenOnLargeScreen$ = toObservable(this.stayOpenOnLargeScreen);
+    sidenavContentScrolled$ = new BehaviorSubject(false);
+    mode;
+    opened;
+    toggleVisible;
+    constructor(breakpointObserver, router) {
+        this.breakpointObserver = breakpointObserver;
+        this.router = router;
+        const screenLarge$ = this.breakpointObserver.observe(this.largeBreakpoints).pipe(map(result => result.matches));
+        const mode$ = combineLatest([
+            screenLarge$,
+            this.stayOpenOnLargeScreen$
+        ]).pipe(map(([large, stayOpenOnLargeScreen]) => large && stayOpenOnLargeScreen ? 'side' : 'over'));
+        const opened$ = combineLatest([
+            screenLarge$,
+            this.stayOpenOnLargeScreen$
+        ]).pipe(map(([large, stayOpenOnLargeScreen]) => large && stayOpenOnLargeScreen));
+        const toggleVisible$ = combineLatest([
+            screenLarge$,
+            this.stayOpenOnLargeScreen$
+        ]).pipe(map(([large, stayOpenOnLargeScreen]) => !large || !stayOpenOnLargeScreen));
+        this.router.events.subscribe(event => {
+            if (event instanceof NavigationStart) {
+                this.closeSidebar();
+            }
+        });
+        this.mode = toSignal(mode$, { initialValue: 'over' });
+        this.opened = toSignal(opened$, { initialValue: false });
+        this.toggleVisible = toSignal(toggleVisible$, { initialValue: true });
+    }
+    setSidenav(sidenav) {
+        this.sidenav = sidenav;
+    }
+    toggle() {
+        if (null == this.sidenav) {
+            return Promise.reject('No MatSidenav found. Use setSidenav() of SidenavService');
+        }
+        if (!(this.stayOpenOnLargeScreen() && this.breakpointObserver.isMatched(this.largeBreakpoints))) {
+            return this.sidenav.toggle();
+        }
+        return Promise.resolve(this.sidenav.opened ? 'open' : 'close');
+    }
+    closeSidebar() {
+        if (!(this.stayOpenOnLargeScreen() && this.breakpointObserver.isMatched(this.largeBreakpoints))) {
+            this.sidenav.close();
+        }
+    }
+    watchContentScrolled() {
+        return this.sidenavContentScrolled$.asObservable();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: DdrMatSidenavService, deps: [{ token: i1$1.BreakpointObserver }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: DdrMatSidenavService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: DdrMatSidenavService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1$1.BreakpointObserver }, { type: i2.Router }] });
+
+class DdrMatSidenavContainerComponent {
     sidenavService;
     sidenav;
-    stayOpenOnLargeScreen = true;
-    mode$;
-    opened$;
-    scrollSubscription;
+    stayOpenOnLargeScreen = input(true);
+    mode;
+    opened;
     constructor(sidenavService) {
         this.sidenavService = sidenavService;
-        this.mode$ = this.sidenavService.getModeObservable();
-        this.opened$ = this.sidenavService.getOpenedObservable();
-    }
-    /**
-     * @override
-     */
-    ngOnChanges(changes) {
-        this.sidenavService.setStayOpenOnLargeScreen(changes['stayOpenOnLargeScreen'].currentValue);
+        this.mode = this.sidenavService.mode;
+        this.opened = this.sidenavService.opened;
+        effect(() => {
+            this.sidenavService.stayOpenOnLargeScreen.set(this.stayOpenOnLargeScreen());
+        });
     }
     /**
      * @override
@@ -333,118 +411,58 @@ class SidenavContainerComponent {
     ngOnInit() {
         this.sidenavService.setSidenav(this.sidenav);
     }
-    /**
-     * @override
-     */
-    ngOnDestroy() {
-        this.scrollSubscription.unsubscribe();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SidenavContainerComponent, deps: [{ token: SidenavService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", 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" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: DdrMatSidenavContainerComponent, deps: [{ token: DdrMatSidenavService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.2", type: DdrMatSidenavContainerComponent, isStandalone: true, selector: "ddr-mat-sidenav-container", inputs: { stayOpenOnLargeScreen: { classPropertyName: "stayOpenOnLargeScreen", publicName: "stayOpenOnLargeScreen", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["sidenav"], descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container [ngClass]=\"mode()\">\n    <mat-sidenav\n        #sidenav\n        [mode]=\"mode()\"\n        [opened]=\"opened()\"\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", styles: [""], dependencies: [{ kind: "component", type: MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SidenavContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: DdrMatSidenavContainerComponent, decorators: [{
             type: Component,
-            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: [{
+            args: [{ selector: 'ddr-mat-sidenav-container', imports: [
+                        MatSidenav,
+                        MatSidenavContainer,
+                        MatSidenavContent,
+                        NgClass
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-sidenav-container [ngClass]=\"mode()\">\n    <mat-sidenav\n        #sidenav\n        [mode]=\"mode()\"\n        [opened]=\"opened()\"\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: DdrMatSidenavService }], propDecorators: { sidenav: [{
                 type: ViewChild,
                 args: ['sidenav', { static: true }]
-            }], stayOpenOnLargeScreen: [{
-                type: Input
             }] } });
 
-class FilterComponent {
-    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.filterChanged.emit(value)));
-    }
-    /**
-     * @override
-     */
-    ngOnDestroy() {
-        this.valueChangesSubscription.unsubscribe();
-    }
-    /**
-     * @override
-     */
-    ngAfterContentInit() {
-        this.inputElement.nativeElement.focus();
+class DdrMatSidenavToggleComponent {
+    sidenavService;
+    visible;
+    constructor(sidenavService) {
+        this.sidenavService = sidenavService;
+        this.visible = this.sidenavService.toggleVisible;
     }
-    clear() {
-        this.formControl.setValue(null);
-        this.filterChanged.emit(undefined);
+    toggleSidenav() {
+        this.sidenavService.toggle();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: DdrMatSidenavToggleComponent, deps: [{ token: DdrMatSidenavService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.2", type: DdrMatSidenavToggleComponent, isStandalone: true, 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: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: DdrMatSidenavToggleComponent, decorators: [{
             type: Component,
-            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
-            }], inputElement: [{
-                type: ViewChild,
-                args: ['input', { static: true }]
-            }] } });
-
-const DDR_MATERIAL_EXTENSIONS_THEME = new InjectionToken('DDR_MATERIAL_EXTENSIONS_THEME');
-
-class ThemeScrollService {
-    document;
-    themeConfig;
-    constructor(document, themeConfig) {
-        this.document = document;
-        this.themeConfig = themeConfig;
-    }
-    init() {
-        const lightMetaElement = this.findOrCreateThemeColorMetaElement('(prefers-color-scheme: light)', this.themeConfig.themeColorLight);
-        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) => {
-            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;
-        });
-    }
-    findOrCreateThemeColorMetaElement(media, content) {
-        let metaElement = this.document.head.querySelector(`meta[name="theme-color"][media="${media}"]`);
-        if (null == metaElement) {
-            metaElement = this.createThemeColorMetaElement(media, content);
-        }
-        return metaElement;
-    }
-    createThemeColorMetaElement(media, content) {
-        const metaElement = this.document.createElement('meta');
-        metaElement.name = 'theme-color';
-        metaElement.media = media;
-        metaElement.content = content;
-        this.document.head.appendChild(metaElement);
-        return metaElement;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", 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.6", ngImport: i0, type: ThemeScrollService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ThemeScrollService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DDR_MATERIAL_EXTENSIONS_THEME]
-                }] }] });
+            args: [{
+                    selector: 'ddr-mat-sidenav-toggle',
+                    template: `
+        <button mat-icon-button (click)="toggleSidenav()">
+            <mat-icon>menu</mat-icon>
+        </button>`,
+                    imports: [
+                        MatIcon,
+                        MatIconButton
+                    ],
+                    host: {
+                        '[style.display]': 'visible() ? "block" : "none"'
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: () => [{ type: DdrMatSidenavService }] });
 
-class ToolbarFixedTopDirective {
+class DdrMatToolbarFixedTopDirective {
     el;
     ddrMatToolbarFixedTop = '';
     constructor(el) {
@@ -464,133 +482,18 @@ class ToolbarFixedTopDirective {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ToolbarFixedTopDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: ToolbarFixedTopDirective, isStandalone: false, selector: "[ddrMatToolbarFixedTop]", inputs: { ddrMatToolbarFixedTop: "ddrMatToolbarFixedTop" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: DdrMatToolbarFixedTopDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.2", type: DdrMatToolbarFixedTopDirective, isStandalone: true, selector: "[ddrMatToolbarFixedTop]", inputs: { ddrMatToolbarFixedTop: "ddrMatToolbarFixedTop" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ToolbarFixedTopDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.2", ngImport: i0, type: DdrMatToolbarFixedTopDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ddrMatToolbarFixedTop]',
-                    standalone: false
+                    selector: '[ddrMatToolbarFixedTop]'
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { ddrMatToolbarFixedTop: [{
                 type: Input
             }] } });
 
-class FabFixedDirective {
-    el;
-    constructor(el) {
-        this.el = el;
-    }
-    /**
-     * @override
-     */
-    ngOnInit() {
-        const container = document.createElement('div');
-        container.classList.add('ddr-mat-fab-fixed-container');
-        this.el.nativeElement.parentElement.insertBefore(container, this.el.nativeElement);
-        container.appendChild(this.el.nativeElement);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FabFixedDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: FabFixedDirective, isStandalone: false, selector: "[ddrMatFabFixed]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FabFixedDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ddrMatFabFixed]',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }] });
-
-class DdrMaterialExtensionsModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: DdrMaterialExtensionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: DdrMaterialExtensionsModule, declarations: [FabFixedDirective,
-            FilterComponent,
-            SidenavToggleComponent,
-            GridTileLazyImageContainerDirective,
-            GridTileLazyImgDirective,
-            SidenavContainerComponent,
-            ToolbarFixedTopDirective], imports: [CommonModule,
-            MatCardModule,
-            MatSidenavModule,
-            MatIconModule,
-            MatInputModule,
-            MatButtonModule,
-            MatFormFieldModule,
-            MatToolbarModule,
-            ReactiveFormsModule], exports: [FabFixedDirective,
-            FilterComponent,
-            SidenavToggleComponent,
-            GridTileLazyImageContainerDirective,
-            GridTileLazyImgDirective,
-            SidenavContainerComponent,
-            ToolbarFixedTopDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: DdrMaterialExtensionsModule, imports: [CommonModule,
-            MatCardModule,
-            MatSidenavModule,
-            MatIconModule,
-            MatInputModule,
-            MatButtonModule,
-            MatFormFieldModule,
-            MatToolbarModule,
-            ReactiveFormsModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: DdrMaterialExtensionsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        FabFixedDirective,
-                        FilterComponent,
-                        SidenavToggleComponent,
-                        GridTileLazyImageContainerDirective,
-                        GridTileLazyImgDirective,
-                        SidenavContainerComponent,
-                        ToolbarFixedTopDirective
-                    ],
-                    imports: [
-                        CommonModule,
-                        MatCardModule,
-                        MatSidenavModule,
-                        MatIconModule,
-                        MatInputModule,
-                        MatButtonModule,
-                        MatFormFieldModule,
-                        MatToolbarModule,
-                        ReactiveFormsModule
-                    ],
-                    exports: [
-                        FabFixedDirective,
-                        FilterComponent,
-                        SidenavToggleComponent,
-                        GridTileLazyImageContainerDirective,
-                        GridTileLazyImgDirective,
-                        SidenavContainerComponent,
-                        ToolbarFixedTopDirective
-                    ],
-                    providers: []
-                }]
-        }] });
-// TODO: I actually want to run this when the module is loaded, but haven't figured out the correct way for Angular 19 yet as the ENVIRONMENT_INITIALIZER Token is deprecated
-function provideDdrMaterialExtensions() {
-    return makeEnvironmentProviders([
-        ThemeScrollService,
-        {
-            provide: DDR_MATERIAL_EXTENSIONS_THEME,
-            multi: false,
-            useValue: {
-                themeColorLight: '#fdfbff',
-                themeColorDark: '#1a1b1f',
-                themeColorLightScrolled: '#efedf1',
-                themeColorDarkScrolled: '#1e1f23',
-            }
-        },
-        provideEnvironmentInitializer(() => {
-            inject(ThemeScrollService).init();
-            inject(MatIconRegistry).setDefaultFontSetClass('material-symbols-rounded');
-        })
-    ]);
-}
-
 /*
  * Public API Surface of ngx-material-extensions
  */
@@ -599,5 +502,5 @@ function provideDdrMaterialExtensions() {
  * Generated bundle index. Do not edit.
  */
 
-export { DDR_MATERIAL_EXTENSIONS_THEME, DdrMaterialExtensionsModule, FabFixedDirective, FilterComponent, GridTileLazyImageContainerDirective, GridTileLazyImgDirective, SidenavContainerComponent, SidenavService, SidenavToggleComponent, ToolbarFixedTopDirective, provideDdrMaterialExtensions };
+export { DDR_MAT_THEME, DdrMatFabFixedDirective, DdrMatFilterComponent, DdrMatGridTileLazyImageContainerDirective, DdrMatGridTileLazyImgDirective, DdrMatSidenavContainerComponent, DdrMatSidenavService, DdrMatSidenavToggleComponent, DdrMatToolbarFixedTopDirective, provideDdrMaterialExtensions };
 //# sourceMappingURL=dontdrinkandroot-ngx-material-extensions.mjs.map