@dontdrinkandroot/ngx-material-extensions 0.5.2 → 0.5.4

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

@@ -1,83 +1,38 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Output, Input, ViewChild, Injectable, Inject, Directive, HostBinding, ContentChildren, HostListener, NgModule } from '@angular/core';
-import * as i6 from '@angular/forms';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import { interval, BehaviorSubject } from 'rxjs';
-import { debounce, map } from 'rxjs/operators';
-import * as i1 from '@angular/material/card';
-import { MatCardModule } from '@angular/material/card';
-import * as i2 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i3 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 * as i5 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i1$1 from '@angular/cdk/layout';
+import { Injectable, Inject, Component, Directive, Input, HostBinding, ContentChildren, HostListener, ViewChild, EventEmitter, Output, InjectionToken, ENVIRONMENT_INITIALIZER, inject, NgModule } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import * as i1 from '@angular/cdk/layout';
 import { Breakpoints } from '@angular/cdk/layout';
-import * as i2$1 from '@angular/router';
+import { BehaviorSubject, interval, fromEvent, distinctUntilChanged } 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 } 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 { 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';
 
-class FilterComponent {
-    constructor() {
-        this.formControl = new FormControl();
-        this.onFilterChanged = new EventEmitter();
-        this.bouncePeriod = 500;
-    }
-    /**
-     * @override
-     */
-    ngOnInit() {
-        this.valueChangesSubscription = this.formControl.valueChanges
-            .pipe(debounce(() => interval(this.bouncePeriod)))
-            .subscribe((value => this.onFilterChanged.emit(value)));
-    }
-    /**
-     * @override
-     */
-    ngOnDestroy() {
-        this.valueChangesSubscription.unsubscribe();
-    }
-    /**
-     * @override
-     */
-    ngAfterContentInit() {
-        this.inputElement.nativeElement.focus();
-    }
-    clear() {
-        this.formControl.setValue(null);
-        this.onFilterChanged.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.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.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: i5.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: [{
-            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: [{
-                type: Output
-            }], bouncePeriod: [{
-                type: Input
-            }], inputElement: [{
-                type: ViewChild,
-                args: ['input', { static: true }]
-            }] } });
-
 class SidenavService {
     constructor(breakpointObserver, router, document) {
         this.breakpointObserver = breakpointObserver;
         this.router = router;
         this.document = document;
-        this.stayOpenOnLargeScreen = false;
+        this.stayOpenOnLargeScreen = true;
         this.largeBreakpoints = [
             Breakpoints.Medium,
             Breakpoints.Large,
@@ -96,13 +51,6 @@ class SidenavService {
     setSidenav(sidenav) {
         this.sidenav = sidenav;
     }
-    setSidenavContent(sidenavContent) {
-        this.sidenavContent = sidenavContent;
-        this.sidenavContent.elementScrolled().pipe(map(() => this.sidenavContent.measureScrollOffset('top') > 0)).subscribe(scrolled => {
-            this.document.body.classList.toggle('scrolled', scrolled);
-            this.sidenavContentScrolled$.next(scrolled);
-        });
-    }
     getStayOpenOnLargeScreen() {
         return this.stayOpenOnLargeScreen;
     }
@@ -135,7 +83,7 @@ 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$1.BreakpointObserver }, { token: i2$1.Router }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    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' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: SidenavService, decorators: [{
@@ -143,53 +91,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$1.BreakpointObserver }, { type: i2$1.Router }, { type: Document, decorators: [{
+        }], ctorParameters: () => [{ type: i1.BreakpointObserver }, { type: i2.Router }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
                 }] }] });
 
-class SidenavContainerComponent {
-    constructor(sidenavService) {
-        this.sidenavService = sidenavService;
-        this.stayOpenOnLargeScreen = false;
-        this.mode$ = this.sidenavService.getModeObservable();
-        this.opened$ = this.sidenavService.getOpenedObservable();
-    }
-    /**
-     * @override
-     */
-    ngOnChanges(changes) {
-        this.sidenavService.setStayOpenOnLargeScreen(changes['stayOpenOnLargeScreen'].currentValue);
-    }
-    /**
-     * @override
-     */
-    ngOnInit() {
-        this.sidenavService.setSidenav(this.sidenav);
-        this.sidenavService.setSidenavContent(this.sidenavContent);
-    }
-    /**
-     * @override
-     */
-    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 }, { propertyName: "sidenavContent", first: true, predicate: ["sidenavContent"], 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        <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: [{
-            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        <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 }]
-            }], sidenavContent: [{
-                type: ViewChild,
-                args: ['sidenavContent', { static: true }]
-            }], stayOpenOnLargeScreen: [{
-                type: Input
-            }] } });
-
 class SidenavToggleComponent {
     constructor(sidenavService) {
         this.sidenavService = sidenavService;
@@ -202,7 +108,7 @@ class SidenavToggleComponent {
     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: `
         <button mat-icon-button (click)="toggleSidenav()">
             <mat-icon>menu</mat-icon>
-        </button>`, isInline: true, dependencies: [{ kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.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: [{
             type: Component,
@@ -380,13 +286,195 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                 args: ['window:scroll', ['$event']]
             }] } });
 
+class SidenavContainerComponent {
+    constructor(sidenavService) {
+        this.sidenavService = sidenavService;
+        this.stayOpenOnLargeScreen = true;
+        this.mode$ = this.sidenavService.getModeObservable();
+        this.opened$ = this.sidenavService.getOpenedObservable();
+    }
+    /**
+     * @override
+     */
+    ngOnChanges(changes) {
+        this.sidenavService.setStayOpenOnLargeScreen(changes['stayOpenOnLargeScreen'].currentValue);
+    }
+    /**
+     * @override
+     */
+    ngOnInit() {
+        this.sidenavService.setSidenav(this.sidenav);
+    }
+    /**
+     * @override
+     */
+    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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", 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" }]
+        }], ctorParameters: () => [{ type: SidenavService }], propDecorators: { sidenav: [{
+                type: ViewChild,
+                args: ['sidenav', { static: true }]
+            }], stayOpenOnLargeScreen: [{
+                type: Input
+            }] } });
+
+class FilterComponent {
+    constructor() {
+        this.formControl = new FormControl();
+        this.onFilterChanged = new EventEmitter();
+        this.bouncePeriod = 500;
+    }
+    /**
+     * @override
+     */
+    ngOnInit() {
+        this.valueChangesSubscription = this.formControl.valueChanges
+            .pipe(debounce(() => interval(this.bouncePeriod)))
+            .subscribe((value => this.onFilterChanged.emit(value)));
+    }
+    /**
+     * @override
+     */
+    ngOnDestroy() {
+        this.valueChangesSubscription.unsubscribe();
+    }
+    /**
+     * @override
+     */
+    ngAfterContentInit() {
+        this.inputElement.nativeElement.focus();
+    }
+    clear() {
+        this.formControl.setValue(null);
+        this.onFilterChanged.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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", 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: [{
+                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 {
+    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) => {
+            scrolled ? this.document.body.classList.add('ddr-mat-scrolled') : this.document.body.classList.remove('ddr-mat-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 { 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", 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]
+                }] }] });
+
+class ToolbarFixedTopDirective {
+    constructor(el) {
+        this.el = el;
+        this.ddrMatToolbarFixedTop = undefined;
+    }
+    /**
+     * @override
+     */
+    ngOnInit() {
+        const container = document.createElement('div');
+        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);
+        }
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: ToolbarFixedTopDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ddrMatToolbarFixedTop]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { ddrMatToolbarFixedTop: [{
+                type: Input
+            }] } });
+
+class FabFixedDirective {
+    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 { 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: FabFixedDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ddrMatFabFixed]'
+                }]
+        }], 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: [FilterComponent,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.9", ngImport: i0, type: DdrMaterialExtensionsModule, declarations: [FabFixedDirective,
+            FilterComponent,
             SidenavToggleComponent,
             GridTileLazyImageContainerDirective,
             GridTileLazyImgDirective,
-            SidenavContainerComponent], imports: [CommonModule,
+            SidenavContainerComponent,
+            ToolbarFixedTopDirective], imports: [CommonModule,
             MatCardModule,
             MatSidenavModule,
             MatIconModule,
@@ -394,12 +482,33 @@ class DdrMaterialExtensionsModule {
             MatButtonModule,
             MatFormFieldModule,
             MatToolbarModule,
-            ReactiveFormsModule], exports: [FilterComponent,
+            ReactiveFormsModule], exports: [FabFixedDirective,
+            FilterComponent,
             SidenavToggleComponent,
             GridTileLazyImageContainerDirective,
             GridTileLazyImgDirective,
-            SidenavContainerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: DdrMaterialExtensionsModule, imports: [CommonModule,
+            SidenavContainerComponent,
+            ToolbarFixedTopDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: DdrMaterialExtensionsModule, providers: [
+            ThemeScrollService,
+            {
+                provide: ENVIRONMENT_INITIALIZER,
+                multi: true,
+                useValue() {
+                    inject(ThemeScrollService).init();
+                }
+            },
+            {
+                provide: DDR_MATERIAL_EXTENSIONS_THEME,
+                multi: false,
+                useValue: {
+                    themeColorLight: '#fdfbff',
+                    themeColorDark: '#1a1b1f',
+                    themeColorLightScrolled: '#efedf1',
+                    themeColorDarkScrolled: '#1e1f23',
+                }
+            }
+        ], imports: [CommonModule,
             MatCardModule,
             MatSidenavModule,
             MatIconModule,
@@ -413,11 +522,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
             type: NgModule,
             args: [{
                     declarations: [
+                        FabFixedDirective,
                         FilterComponent,
                         SidenavToggleComponent,
                         GridTileLazyImageContainerDirective,
                         GridTileLazyImgDirective,
                         SidenavContainerComponent,
+                        ToolbarFixedTopDirective
                     ],
                     imports: [
                         CommonModule,
@@ -431,11 +542,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                         ReactiveFormsModule
                     ],
                     exports: [
+                        FabFixedDirective,
                         FilterComponent,
                         SidenavToggleComponent,
                         GridTileLazyImageContainerDirective,
                         GridTileLazyImgDirective,
                         SidenavContainerComponent,
+                        ToolbarFixedTopDirective
+                    ],
+                    providers: [
+                        ThemeScrollService,
+                        {
+                            provide: ENVIRONMENT_INITIALIZER,
+                            multi: true,
+                            useValue() {
+                                inject(ThemeScrollService).init();
+                            }
+                        },
+                        {
+                            provide: DDR_MATERIAL_EXTENSIONS_THEME,
+                            multi: false,
+                            useValue: {
+                                themeColorLight: '#fdfbff',
+                                themeColorDark: '#1a1b1f',
+                                themeColorLightScrolled: '#efedf1',
+                                themeColorDarkScrolled: '#1e1f23',
+                            }
+                        }
                     ]
                 }]
         }] });
@@ -448,5 +581,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DdrMaterialExtensionsModule, FilterComponent, GridTileLazyImageContainerDirective, GridTileLazyImgDirective, SidenavContainerComponent, SidenavService, SidenavToggleComponent };
+export { DDR_MATERIAL_EXTENSIONS_THEME, DdrMaterialExtensionsModule, FabFixedDirective, FilterComponent, GridTileLazyImageContainerDirective, GridTileLazyImgDirective, SidenavContainerComponent, SidenavService, SidenavToggleComponent, ToolbarFixedTopDirective };
 //# sourceMappingURL=dontdrinkandroot-ngx-material-extensions.mjs.map