@almoamendev/ngx-md3 0.8.1 → 0.8.3

package/fesm2022/almoamendev-ngx-md3.mjs

@@ -5110,14 +5110,14 @@ class DialogRef {
     }
 }
 
-class AppBarLogo {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AppBarLogo, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: AppBarLogo, isStandalone: true, selector: "[md3-app-bar-logo]", ngImport: i0 });
+class AppBarHeader {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AppBarHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: AppBarHeader, isStandalone: true, selector: "[md3-app-bar-header]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AppBarLogo, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AppBarHeader, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[md3-app-bar-logo]',
+                    selector: '[md3-app-bar-header]',
                 }]
         }] });
 
@@ -5151,12 +5151,12 @@ class AppBar {
         transform: booleanAttribute });
     centerAligned = input(false, { ...(ngDevMode ? { debugName: "centerAligned" } : /* istanbul ignore next */ {}), alias: 'center-aligned',
         transform: booleanAttribute });
-    logo = contentChild(AppBarLogo, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "logo" }] : /* istanbul ignore next */ []));
+    customHeader = contentChild(AppBarHeader, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "customHeader" }] : /* istanbul ignore next */ []));
     avatar = contentChild(Avatar, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "avatar" }] : /* istanbul ignore next */ []));
-    hasLogo = computed(() => !!this.logo(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hasLogo" }] : /* istanbul ignore next */ []));
+    hasCustomHeader = computed(() => !!this.customHeader(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasCustomHeader" }] : /* istanbul ignore next */ []));
     hasAvatar = computed(() => !!this.avatar(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasAvatar" }] : /* istanbul ignore next */ []));
     mainIsScrolled = computed(() => this.layoutService.mainIsScrolled(), /* @ts-ignore */
@@ -5250,7 +5250,7 @@ class AppBar {
                 provide: MD3_BUTTON_CONTEXT,
                 useExisting: AppBar,
             },
-        ], queries: [{ propertyName: "logo", first: true, predicate: AppBarLogo, descendants: true, isSignal: true }, { propertyName: "avatar", first: true, predicate: Avatar, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"md3-app-bar-container\">\n    <div class=\"md3-app-bar-leading\">\n        <ng-content select=\"[md3-app-bar-leading]\"></ng-content>\n    </div>\n\n    @if (appBarType() == 'search') {\n        <div class=\"md3-app-bar-search\" [class.md3-center]=\"centerAligned()\">\n            <div class=\"md3-search-container\">\n                <div class=\"md3-leading-buttons\">\n                    <ng-content select=\"[md3-search-leading]\"></ng-content>\n                </div>\n                <ng-content select=\"[md3-input-element]\"></ng-content>\n                <div class=\"md3-trailing-buttons\">\n                    <ng-content select=\"[md3-search-trailing]\"></ng-content>\n                </div>\n            </div>\n        </div>\n    } @else if (hasLogo()) {\n        <div class=\"md3-app-bar-logo\" [class.md3-center]=\"centerAligned()\">\n            <ng-content select=\"[md3-app-bar-logo]\"></ng-content>\n        </div>\n    } @else if (title() || subtitle()) {\n        <div class=\"md3-app-bar-title\" [class.md3-center]=\"centerAligned()\">\n            @if (title()?.length) {\n                <div md3-type-title size=\"large\">{{ title() }}</div>\n            }\n            @if (subtitle()?.length) {\n                <div md3-type-body size=\"small\" emphasized color=\"on-surface-variant\">{{ subtitle() }}</div>\n            }\n        </div>\n    }\n\n    <div class=\"md3-app-bar-trailing\">\n        <ng-content select=\"[md3-app-bar-trailing]\"></ng-content>\n        @if (hasAvatar()) {\n            <div class=\"md3-app-bar-avatar\">\n                <ng-content select=\"[md3-avatar]\"></ng-content>\n            </div>\n        }\n    </div>\n\n    @if ((appBarType() == 'medium' || appBarType() == 'large') && (title() || subtitle())) {\n        <div class=\"md3-app-bar-bottom\" [class.md3-center]=\"centerAligned()\">\n            <div class=\"md3-app-bar-bottom-content\">\n                @if (appBarType() == 'medium') {\n                    @if (title()?.length) {\n                        <div md3-type-headline size=\"medium\">{{ title() }}</div>\n                    }\n                    @if (subtitle()?.length) {\n                        <div md3-type-title size=\"small\" color=\"on-surface-variant\">{{ subtitle() }}</div>\n                    }\n                }\n                @if (appBarType() == 'large') {\n                    @if (title()?.length) {\n                        <div md3-type-display size=\"small\">{{ title() }}</div>\n                    }\n                    @if (subtitle()?.length) {\n                        <div md3-type-title size=\"medium\" color=\"on-surface-variant\">{{ subtitle() }}</div>\n                    }\n                }\n            </div>\n        </div>\n    }\n</div>\n", styles: [":host{--background-color: rgb(var(--md-scheme-surface));--foreground-color: rgb(var(--md-scheme-on-surface));--search-background-color: rgb(var(--md-scheme-surface-container));--search-foreground-color: rgb(var(--md-scheme-on-surface));--foreground-secondary: rgb(var(--md-scheme-on-surface-variant));--elevation: var(--md-shadow-0dp);--app-bar-bottom-collapse: 0px;--app-bar-bottom-opacity: 1;display:block;min-height:0em;max-height:9.5em;overflow:hidden;background-color:var(--background-color);color:var(--foreground-color);box-shadow:var(--elevation);transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:4em auto auto;min-height:4em;width:100%;background-color:inherit;color:inherit;transition:opacity var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container .md3-app-bar-leading,:host .md3-app-bar-container .md3-app-bar-trailing{grid-row:1;z-index:1;display:inline-flex;align-items:center;gap:.25em;min-inline-size:0;block-size:4em}:host .md3-app-bar-container .md3-app-bar-leading:empty,:host .md3-app-bar-container .md3-app-bar-trailing:empty{display:none}:host .md3-app-bar-container .md3-app-bar-leading .md3-app-bar-avatar,:host .md3-app-bar-container .md3-app-bar-leading ::ng-deep [md3-app-bar-leading],:host .md3-app-bar-container .md3-app-bar-leading ::ng-deep [md3-app-bar-trailing],:host .md3-app-bar-container .md3-app-bar-trailing .md3-app-bar-avatar,:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-app-bar-leading],:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-app-bar-trailing]{flex:0 0 auto;height:3em;min-width:3em;display:inline-flex;align-items:center;justify-content:center}:host .md3-app-bar-container .md3-app-bar-leading{grid-column:1;justify-self:start;padding-inline-start:.25em;padding-inline-end:.5em;min-width:1em}:host .md3-app-bar-container .md3-app-bar-leading:empty{display:inline-flex}:host .md3-app-bar-container .md3-app-bar-leading ::ng-deep [md3-app-bar-leading]{color:var(--foreground-color)}:host .md3-app-bar-container .md3-app-bar-leading ::ng-deep [md3-app-bar-leading] .md3-standard[md3-icon-button]{--foreground-color: var(--foreground-color)}:host .md3-app-bar-container .md3-app-bar-trailing{grid-column:3;justify-self:end;padding-inline-end:.25em}:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-app-bar-trailing]{color:var(--foreground-secondary)}:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-app-bar-trailing] .md3-standard[md3-icon-button]{--foreground-color: var(--foreground-secondary)}:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep .md3-avatar{flex:0 0 2em}:host .md3-app-bar-container .md3-app-bar-search{grid-column:1/-1;grid-row:1;align-self:center;display:flex;justify-content:center;min-inline-size:0;height:3em;padding:0 .5em}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container{display:inline-flex;align-items:center;justify-content:center;width:50%;max-width:100%;border-radius:1.5em;background-color:var(--search-background-color);color:var(--search-foreground-color);transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-leading-buttons,:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-trailing-buttons{flex:0 0 1.5em;pointer-events:none;display:inline-flex;gap:.25em;padding:0 .25em}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-leading-buttons:empty,:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-trailing-buttons:empty{padding:0}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-leading-buttons ::ng-deep [md3-search-leading],:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-leading-buttons ::ng-deep [md3-search-trailing],:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-trailing-buttons ::ng-deep [md3-search-leading],:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-trailing-buttons ::ng-deep [md3-search-trailing]{pointer-events:all}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container ::ng-deep [md3-input-element]{flex:1 1 auto;background-color:transparent;color:var(--search-foreground-color);font-size:1em;height:100%;min-width:0em;border:none;padding:0 1.5em;margin:0 -1.5em}:host .md3-app-bar-container .md3-app-bar-search.md3-center .md3-search-container ::ng-deep [md3-input-element]{text-align:center}:host .md3-app-bar-container .md3-app-bar-logo{grid-column:2;grid-row:1;align-self:center;display:flex;justify-content:start;min-inline-size:0;overflow:hidden;height:3em}:host .md3-app-bar-container .md3-app-bar-logo.md3-center{grid-column:1/-1;justify-self:stretch;text-align:center;justify-content:center}:host .md3-app-bar-container .md3-app-bar-logo ::ng-deep a[md3-app-bar-logo],:host .md3-app-bar-container .md3-app-bar-logo ::ng-deep button[md3-app-bar-logo]{cursor:pointer}:host .md3-app-bar-container .md3-app-bar-logo ::ng-deep [md3-app-bar-logo]{flex:0 1 auto;max-height:100%;max-width:100%;display:block;border:none;background:transparent;font-size:1em;text-decoration:none;padding:0;margin:0}:host .md3-app-bar-container .md3-app-bar-logo ::ng-deep [md3-app-bar-logo]>*{display:inline-block;max-height:100%;max-width:100%;width:100%;height:100%;object-fit:contain}:host .md3-app-bar-container .md3-app-bar-title{grid-column:2;grid-row:1;align-self:center;min-inline-size:0;color:inherit;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing);transform:scale(0);opacity:0}:host .md3-app-bar-container .md3-app-bar-title:dir(ltr){transform-origin:bottom left}:host .md3-app-bar-container .md3-app-bar-title:dir(rtl){transform-origin:bottom right}:host .md3-app-bar-container .md3-app-bar-title.md3-center{grid-column:1/-1;justify-self:stretch;text-align:center;transform-origin:bottom center}:host .md3-app-bar-container .md3-app-bar-title ::ng-deep [md3-app-bar-title]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:all}:host .md3-app-bar-container .md3-app-bar-bottom{--app-bar-bottom-expanded-block-size: auto;grid-column:1/-1;grid-row:2;min-inline-size:0;min-block-size:0;overflow:hidden;transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container .md3-app-bar-bottom:empty{display:none}:host .md3-app-bar-container .md3-app-bar-bottom .md3-app-bar-bottom-content{padding-bottom:.75em;padding-inline-start:1em;padding-inline-end:.25em;opacity:var(--app-bar-bottom-opacity);transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container .md3-app-bar-bottom.md3-center .md3-app-bar-bottom-content{text-align:center;padding-inline:1em}:host.md3-scrolled.md3-scroll-style-elevate{--background-color: rgb(var(--md-scheme-surface-container));--search-background-color: rgb(var(--md-scheme-surface-container-highest));--elevation: var(--md-shadow-3dp)}:host.md3-scrolled.md3-scroll-style-transparent{--background-color: transparent}:host.md3-layout-medium .md3-app-bar-container .md3-app-bar-search{grid-column:2}:host.md3-layout-medium .md3-app-bar-container .md3-app-bar-search .md3-search-container{width:19.5em}:host.md3-layout-compact .md3-app-bar-container .md3-app-bar-search{grid-column:2}:host.md3-layout-compact .md3-app-bar-container .md3-app-bar-search .md3-search-container{width:100%}:host.md3-small .md3-app-bar-container .md3-app-bar-title,:host.md3-collapsed .md3-app-bar-container .md3-app-bar-title{transform:scale(1);opacity:1}:host.md3-medium .md3-app-bar-container .md3-app-bar-bottom{--app-bar-bottom-expanded-block-size: 3em;block-size:max(0px,var(--app-bar-bottom-expanded-block-size) - var(--app-bar-bottom-collapse))}:host.md3-medium .md3-app-bar-container .md3-app-bar-bottom:has(.md3-text-title.md3-text-small){--app-bar-bottom-expanded-block-size: 4.5em}:host.md3-medium .md3-app-bar-container .md3-app-bar-bottom .md3-app-bar-bottom-content .md3-text-title.md3-text-small{margin-top:.285715em}:host.md3-large .md3-app-bar-container .md3-app-bar-bottom{--app-bar-bottom-expanded-block-size: 3.5em;block-size:max(0px,var(--app-bar-bottom-expanded-block-size) - var(--app-bar-bottom-collapse))}:host.md3-large .md3-app-bar-container .md3-app-bar-bottom:has(.md3-text-title.md3-text-medium){--app-bar-bottom-expanded-block-size: 5.5em}:host.md3-large .md3-app-bar-container .md3-app-bar-bottom .md3-app-bar-bottom-content .md3-text-title.md3-text-medium{margin-top:.5em}:host.md3-scrolling-down.md3-auto-hide{max-height:0}:host.md3-scrolling-down.md3-auto-hide .md3-app-bar-container{opacity:0}\n"], dependencies: [{ kind: "directive", type: TypeHeadline, selector: "md3-type-headline, [md3-type-headline]", inputs: ["size", "color", "emphasized"] }, { kind: "directive", type: TypeTitle, selector: "md3-type-title, [md3-type-title]", inputs: ["size", "color", "emphasized"] }, { kind: "directive", type: TypeBody, selector: "md3-type-body, [md3-type-body]", inputs: ["size", "color", "emphasized"] }, { kind: "directive", type: TypeDisplay, selector: "md3-type-display, [md3-type-display]", inputs: ["size", "color", "emphasized"] }] });
+        ], queries: [{ propertyName: "customHeader", first: true, predicate: AppBarHeader, descendants: true, isSignal: true }, { propertyName: "avatar", first: true, predicate: Avatar, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"md3-app-bar-container\">\n    <div class=\"md3-app-bar-leading\">\n        <ng-content select=\"[md3-app-bar-leading]\"></ng-content>\n    </div>\n\n    @if (appBarType() == 'search') {\n        <div class=\"md3-app-bar-search\" [class.md3-center]=\"centerAligned()\">\n            <div class=\"md3-search-container\">\n                <div class=\"md3-leading-buttons\">\n                    <ng-content select=\"[md3-search-leading]\"></ng-content>\n                </div>\n                <ng-content select=\"[md3-input-element]\"></ng-content>\n                <div class=\"md3-trailing-buttons\">\n                    <ng-content select=\"[md3-search-trailing]\"></ng-content>\n                </div>\n            </div>\n        </div>\n    } @else if (hasCustomHeader()) {\n        <div class=\"md3-app-bar-header\" [class.md3-center]=\"centerAligned()\">\n            <ng-content select=\"[md3-app-bar-header]\"></ng-content>\n        </div>\n    } @else if (title() || subtitle()) {\n        <div class=\"md3-app-bar-title\" [class.md3-center]=\"centerAligned()\">\n            @if (title()?.length) {\n                <div md3-type-title size=\"large\">{{ title() }}</div>\n            }\n            @if (subtitle()?.length) {\n                <div md3-type-body size=\"small\" emphasized color=\"on-surface-variant\">{{ subtitle() }}</div>\n            }\n        </div>\n    }\n\n    <div class=\"md3-app-bar-trailing\">\n        <ng-content select=\"[md3-app-bar-trailing]\"></ng-content>\n        @if (hasAvatar()) {\n            <div class=\"md3-app-bar-avatar\">\n                <ng-content select=\"[md3-avatar]\"></ng-content>\n            </div>\n        }\n    </div>\n\n    @if ((appBarType() == 'medium' || appBarType() == 'large') && (title() || subtitle())) {\n        <div class=\"md3-app-bar-bottom\" [class.md3-center]=\"centerAligned()\">\n            <div class=\"md3-app-bar-bottom-content\">\n                @if (appBarType() == 'medium') {\n                    @if (title()?.length) {\n                        <div md3-type-headline size=\"medium\">{{ title() }}</div>\n                    }\n                    @if (subtitle()?.length) {\n                        <div md3-type-title size=\"small\" color=\"on-surface-variant\">{{ subtitle() }}</div>\n                    }\n                }\n                @if (appBarType() == 'large') {\n                    @if (title()?.length) {\n                        <div md3-type-display size=\"small\">{{ title() }}</div>\n                    }\n                    @if (subtitle()?.length) {\n                        <div md3-type-title size=\"medium\" color=\"on-surface-variant\">{{ subtitle() }}</div>\n                    }\n                }\n            </div>\n        </div>\n    }\n</div>\n", styles: [":host{--background-color: rgb(var(--md-scheme-surface));--foreground-color: rgb(var(--md-scheme-on-surface));--search-background-color: rgb(var(--md-scheme-surface-container));--search-foreground-color: rgb(var(--md-scheme-on-surface));--foreground-secondary: rgb(var(--md-scheme-on-surface-variant));--elevation: var(--md-shadow-0dp);--app-bar-bottom-collapse: 0px;--app-bar-bottom-opacity: 1;display:block;min-height:0em;max-height:9.5em;overflow:hidden;background-color:var(--background-color);color:var(--foreground-color);box-shadow:var(--elevation);transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:4em auto auto;min-height:4em;width:100%;background-color:inherit;color:inherit;transition:opacity var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container .md3-app-bar-leading,:host .md3-app-bar-container .md3-app-bar-trailing{grid-row:1;z-index:1;display:inline-flex;align-items:center;gap:.25em;min-inline-size:0;block-size:4em}:host .md3-app-bar-container .md3-app-bar-leading:empty,:host .md3-app-bar-container .md3-app-bar-trailing:empty{display:none}:host .md3-app-bar-container .md3-app-bar-leading .md3-app-bar-avatar,:host .md3-app-bar-container .md3-app-bar-leading ::ng-deep [md3-app-bar-leading],:host .md3-app-bar-container .md3-app-bar-leading ::ng-deep [md3-app-bar-trailing],:host .md3-app-bar-container .md3-app-bar-trailing .md3-app-bar-avatar,:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-app-bar-leading],:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-app-bar-trailing]{flex:0 0 auto;height:3em;min-width:3em;display:inline-flex;align-items:center;justify-content:center}:host .md3-app-bar-container .md3-app-bar-leading{grid-column:1;justify-self:start;padding-inline-start:.25em;padding-inline-end:.5em;min-width:1em}:host .md3-app-bar-container .md3-app-bar-leading:empty{display:inline-flex}:host .md3-app-bar-container .md3-app-bar-leading ::ng-deep [md3-app-bar-leading]{color:var(--foreground-color)}:host .md3-app-bar-container .md3-app-bar-leading ::ng-deep [md3-app-bar-leading] .md3-standard[md3-icon-button]{--foreground-color: var(--foreground-color)}:host .md3-app-bar-container .md3-app-bar-trailing{grid-column:3;justify-self:end;padding-inline-end:.25em}:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-app-bar-trailing]{color:var(--foreground-secondary)}:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-app-bar-trailing] .md3-standard[md3-icon-button]{--foreground-color: var(--foreground-secondary)}:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep .md3-avatar{flex:0 0 2em}:host .md3-app-bar-container .md3-app-bar-search{grid-column:1/-1;grid-row:1;align-self:center;display:flex;justify-content:center;min-inline-size:0;height:3em;padding:0 .5em}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container{display:inline-flex;align-items:center;justify-content:center;width:50%;max-width:100%;border-radius:1.5em;background-color:var(--search-background-color);color:var(--search-foreground-color);transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-leading-buttons,:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-trailing-buttons{flex:0 0 1.5em;pointer-events:none;display:inline-flex;gap:.25em;padding:0 .25em}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-leading-buttons:empty,:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-trailing-buttons:empty{padding:0}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-leading-buttons ::ng-deep [md3-search-leading],:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-leading-buttons ::ng-deep [md3-search-trailing],:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-trailing-buttons ::ng-deep [md3-search-leading],:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-trailing-buttons ::ng-deep [md3-search-trailing]{pointer-events:all}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container ::ng-deep [md3-input-element]{flex:1 1 auto;background-color:transparent;color:var(--search-foreground-color);font-size:1em;height:100%;min-width:0em;border:none;padding:0 1.5em;margin:0 -1.5em}:host .md3-app-bar-container .md3-app-bar-search.md3-center .md3-search-container ::ng-deep [md3-input-element]{text-align:center}:host .md3-app-bar-container .md3-app-bar-header{grid-column:2;grid-row:1;align-self:center;display:flex;justify-content:start;min-inline-size:0;overflow:hidden;height:3em}:host .md3-app-bar-container .md3-app-bar-header.md3-center{grid-column:1/-1;justify-self:stretch;text-align:center;justify-content:center}:host .md3-app-bar-container .md3-app-bar-header ::ng-deep a[md3-app-bar-header],:host .md3-app-bar-container .md3-app-bar-header ::ng-deep button[md3-app-bar-header]{cursor:pointer}:host .md3-app-bar-container .md3-app-bar-header ::ng-deep [md3-app-bar-header]{flex:0 1 auto;max-height:100%;max-width:100%;display:block;border:none;background:transparent;font-size:1em;text-decoration:none;padding:0;margin:0}:host .md3-app-bar-container .md3-app-bar-header ::ng-deep [md3-app-bar-header]>*{max-height:100%;max-width:100%}:host .md3-app-bar-container .md3-app-bar-header ::ng-deep [md3-app-bar-header]>img,:host .md3-app-bar-container .md3-app-bar-header ::ng-deep [md3-app-bar-header]>svg{display:inline-block;max-height:100%;max-width:100%;width:100%;height:100%;object-fit:contain}:host .md3-app-bar-container .md3-app-bar-title{grid-column:2;grid-row:1;align-self:center;min-inline-size:0;color:inherit;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing);transform:scale(0);opacity:0}:host .md3-app-bar-container .md3-app-bar-title:dir(ltr){transform-origin:bottom left}:host .md3-app-bar-container .md3-app-bar-title:dir(rtl){transform-origin:bottom right}:host .md3-app-bar-container .md3-app-bar-title.md3-center{grid-column:1/-1;justify-self:stretch;text-align:center;transform-origin:bottom center}:host .md3-app-bar-container .md3-app-bar-title ::ng-deep [md3-app-bar-title]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:all}:host .md3-app-bar-container .md3-app-bar-bottom{--app-bar-bottom-expanded-block-size: auto;grid-column:1/-1;grid-row:2;min-inline-size:0;min-block-size:0;overflow:hidden;transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container .md3-app-bar-bottom:empty{display:none}:host .md3-app-bar-container .md3-app-bar-bottom .md3-app-bar-bottom-content{padding-bottom:.75em;padding-inline-start:1em;padding-inline-end:.25em;opacity:var(--app-bar-bottom-opacity);transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container .md3-app-bar-bottom.md3-center .md3-app-bar-bottom-content{text-align:center;padding-inline:1em}:host.md3-scrolled.md3-scroll-style-elevate{--background-color: rgb(var(--md-scheme-surface-container));--search-background-color: rgb(var(--md-scheme-surface-container-highest));--elevation: var(--md-shadow-3dp)}:host.md3-scrolled.md3-scroll-style-transparent{--background-color: transparent}:host.md3-layout-medium .md3-app-bar-container .md3-app-bar-search{grid-column:2}:host.md3-layout-medium .md3-app-bar-container .md3-app-bar-search .md3-search-container{width:19.5em}:host.md3-layout-compact .md3-app-bar-container .md3-app-bar-search{grid-column:2}:host.md3-layout-compact .md3-app-bar-container .md3-app-bar-search .md3-search-container{width:100%}:host.md3-small .md3-app-bar-container .md3-app-bar-title,:host.md3-collapsed .md3-app-bar-container .md3-app-bar-title{transform:scale(1);opacity:1}:host.md3-medium .md3-app-bar-container .md3-app-bar-bottom{--app-bar-bottom-expanded-block-size: 3em;block-size:max(0px,var(--app-bar-bottom-expanded-block-size) - var(--app-bar-bottom-collapse))}:host.md3-medium .md3-app-bar-container .md3-app-bar-bottom:has(.md3-text-title.md3-text-small){--app-bar-bottom-expanded-block-size: 4.5em}:host.md3-medium .md3-app-bar-container .md3-app-bar-bottom .md3-app-bar-bottom-content .md3-text-title.md3-text-small{margin-top:.285715em}:host.md3-large .md3-app-bar-container .md3-app-bar-bottom{--app-bar-bottom-expanded-block-size: 3.5em;block-size:max(0px,var(--app-bar-bottom-expanded-block-size) - var(--app-bar-bottom-collapse))}:host.md3-large .md3-app-bar-container .md3-app-bar-bottom:has(.md3-text-title.md3-text-medium){--app-bar-bottom-expanded-block-size: 5.5em}:host.md3-large .md3-app-bar-container .md3-app-bar-bottom .md3-app-bar-bottom-content .md3-text-title.md3-text-medium{margin-top:.5em}:host.md3-scrolling-down.md3-auto-hide{max-height:0}:host.md3-scrolling-down.md3-auto-hide .md3-app-bar-container{opacity:0}\n"], dependencies: [{ kind: "directive", type: TypeHeadline, selector: "md3-type-headline, [md3-type-headline]", inputs: ["size", "color", "emphasized"] }, { kind: "directive", type: TypeTitle, selector: "md3-type-title, [md3-type-title]", inputs: ["size", "color", "emphasized"] }, { kind: "directive", type: TypeBody, selector: "md3-type-body, [md3-type-body]", inputs: ["size", "color", "emphasized"] }, { kind: "directive", type: TypeDisplay, selector: "md3-type-display, [md3-type-display]", inputs: ["size", "color", "emphasized"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AppBar, decorators: [{
             type: Component,
@@ -5269,8 +5269,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         '[class.md3-scrolled]': 'mainIsScrolled()',
                         '[class.md3-auto-hide]': 'autoHide()',
                         '[class.md3-scrolling-down]': 'isScrollingDown()',
-                    }, template: "<div class=\"md3-app-bar-container\">\n    <div class=\"md3-app-bar-leading\">\n        <ng-content select=\"[md3-app-bar-leading]\"></ng-content>\n    </div>\n\n    @if (appBarType() == 'search') {\n        <div class=\"md3-app-bar-search\" [class.md3-center]=\"centerAligned()\">\n            <div class=\"md3-search-container\">\n                <div class=\"md3-leading-buttons\">\n                    <ng-content select=\"[md3-search-leading]\"></ng-content>\n                </div>\n                <ng-content select=\"[md3-input-element]\"></ng-content>\n                <div class=\"md3-trailing-buttons\">\n                    <ng-content select=\"[md3-search-trailing]\"></ng-content>\n                </div>\n            </div>\n        </div>\n    } @else if (hasLogo()) {\n        <div class=\"md3-app-bar-logo\" [class.md3-center]=\"centerAligned()\">\n            <ng-content select=\"[md3-app-bar-logo]\"></ng-content>\n        </div>\n    } @else if (title() || subtitle()) {\n        <div class=\"md3-app-bar-title\" [class.md3-center]=\"centerAligned()\">\n            @if (title()?.length) {\n                <div md3-type-title size=\"large\">{{ title() }}</div>\n            }\n            @if (subtitle()?.length) {\n                <div md3-type-body size=\"small\" emphasized color=\"on-surface-variant\">{{ subtitle() }}</div>\n            }\n        </div>\n    }\n\n    <div class=\"md3-app-bar-trailing\">\n        <ng-content select=\"[md3-app-bar-trailing]\"></ng-content>\n        @if (hasAvatar()) {\n            <div class=\"md3-app-bar-avatar\">\n                <ng-content select=\"[md3-avatar]\"></ng-content>\n            </div>\n        }\n    </div>\n\n    @if ((appBarType() == 'medium' || appBarType() == 'large') && (title() || subtitle())) {\n        <div class=\"md3-app-bar-bottom\" [class.md3-center]=\"centerAligned()\">\n            <div class=\"md3-app-bar-bottom-content\">\n                @if (appBarType() == 'medium') {\n                    @if (title()?.length) {\n                        <div md3-type-headline size=\"medium\">{{ title() }}</div>\n                    }\n                    @if (subtitle()?.length) {\n                        <div md3-type-title size=\"small\" color=\"on-surface-variant\">{{ subtitle() }}</div>\n                    }\n                }\n                @if (appBarType() == 'large') {\n                    @if (title()?.length) {\n                        <div md3-type-display size=\"small\">{{ title() }}</div>\n                    }\n                    @if (subtitle()?.length) {\n                        <div md3-type-title size=\"medium\" color=\"on-surface-variant\">{{ subtitle() }}</div>\n                    }\n                }\n            </div>\n        </div>\n    }\n</div>\n", styles: [":host{--background-color: rgb(var(--md-scheme-surface));--foreground-color: rgb(var(--md-scheme-on-surface));--search-background-color: rgb(var(--md-scheme-surface-container));--search-foreground-color: rgb(var(--md-scheme-on-surface));--foreground-secondary: rgb(var(--md-scheme-on-surface-variant));--elevation: var(--md-shadow-0dp);--app-bar-bottom-collapse: 0px;--app-bar-bottom-opacity: 1;display:block;min-height:0em;max-height:9.5em;overflow:hidden;background-color:var(--background-color);color:var(--foreground-color);box-shadow:var(--elevation);transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:4em auto auto;min-height:4em;width:100%;background-color:inherit;color:inherit;transition:opacity var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container .md3-app-bar-leading,:host .md3-app-bar-container .md3-app-bar-trailing{grid-row:1;z-index:1;display:inline-flex;align-items:center;gap:.25em;min-inline-size:0;block-size:4em}:host .md3-app-bar-container .md3-app-bar-leading:empty,:host .md3-app-bar-container .md3-app-bar-trailing:empty{display:none}:host .md3-app-bar-container .md3-app-bar-leading .md3-app-bar-avatar,:host .md3-app-bar-container .md3-app-bar-leading ::ng-deep [md3-app-bar-leading],:host .md3-app-bar-container .md3-app-bar-leading ::ng-deep [md3-app-bar-trailing],:host .md3-app-bar-container .md3-app-bar-trailing .md3-app-bar-avatar,:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-app-bar-leading],:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-app-bar-trailing]{flex:0 0 auto;height:3em;min-width:3em;display:inline-flex;align-items:center;justify-content:center}:host .md3-app-bar-container .md3-app-bar-leading{grid-column:1;justify-self:start;padding-inline-start:.25em;padding-inline-end:.5em;min-width:1em}:host .md3-app-bar-container .md3-app-bar-leading:empty{display:inline-flex}:host .md3-app-bar-container .md3-app-bar-leading ::ng-deep [md3-app-bar-leading]{color:var(--foreground-color)}:host .md3-app-bar-container .md3-app-bar-leading ::ng-deep [md3-app-bar-leading] .md3-standard[md3-icon-button]{--foreground-color: var(--foreground-color)}:host .md3-app-bar-container .md3-app-bar-trailing{grid-column:3;justify-self:end;padding-inline-end:.25em}:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-app-bar-trailing]{color:var(--foreground-secondary)}:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-app-bar-trailing] .md3-standard[md3-icon-button]{--foreground-color: var(--foreground-secondary)}:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep .md3-avatar{flex:0 0 2em}:host .md3-app-bar-container .md3-app-bar-search{grid-column:1/-1;grid-row:1;align-self:center;display:flex;justify-content:center;min-inline-size:0;height:3em;padding:0 .5em}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container{display:inline-flex;align-items:center;justify-content:center;width:50%;max-width:100%;border-radius:1.5em;background-color:var(--search-background-color);color:var(--search-foreground-color);transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-leading-buttons,:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-trailing-buttons{flex:0 0 1.5em;pointer-events:none;display:inline-flex;gap:.25em;padding:0 .25em}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-leading-buttons:empty,:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-trailing-buttons:empty{padding:0}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-leading-buttons ::ng-deep [md3-search-leading],:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-leading-buttons ::ng-deep [md3-search-trailing],:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-trailing-buttons ::ng-deep [md3-search-leading],:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-trailing-buttons ::ng-deep [md3-search-trailing]{pointer-events:all}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container ::ng-deep [md3-input-element]{flex:1 1 auto;background-color:transparent;color:var(--search-foreground-color);font-size:1em;height:100%;min-width:0em;border:none;padding:0 1.5em;margin:0 -1.5em}:host .md3-app-bar-container .md3-app-bar-search.md3-center .md3-search-container ::ng-deep [md3-input-element]{text-align:center}:host .md3-app-bar-container .md3-app-bar-logo{grid-column:2;grid-row:1;align-self:center;display:flex;justify-content:start;min-inline-size:0;overflow:hidden;height:3em}:host .md3-app-bar-container .md3-app-bar-logo.md3-center{grid-column:1/-1;justify-self:stretch;text-align:center;justify-content:center}:host .md3-app-bar-container .md3-app-bar-logo ::ng-deep a[md3-app-bar-logo],:host .md3-app-bar-container .md3-app-bar-logo ::ng-deep button[md3-app-bar-logo]{cursor:pointer}:host .md3-app-bar-container .md3-app-bar-logo ::ng-deep [md3-app-bar-logo]{flex:0 1 auto;max-height:100%;max-width:100%;display:block;border:none;background:transparent;font-size:1em;text-decoration:none;padding:0;margin:0}:host .md3-app-bar-container .md3-app-bar-logo ::ng-deep [md3-app-bar-logo]>*{display:inline-block;max-height:100%;max-width:100%;width:100%;height:100%;object-fit:contain}:host .md3-app-bar-container .md3-app-bar-title{grid-column:2;grid-row:1;align-self:center;min-inline-size:0;color:inherit;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing);transform:scale(0);opacity:0}:host .md3-app-bar-container .md3-app-bar-title:dir(ltr){transform-origin:bottom left}:host .md3-app-bar-container .md3-app-bar-title:dir(rtl){transform-origin:bottom right}:host .md3-app-bar-container .md3-app-bar-title.md3-center{grid-column:1/-1;justify-self:stretch;text-align:center;transform-origin:bottom center}:host .md3-app-bar-container .md3-app-bar-title ::ng-deep [md3-app-bar-title]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:all}:host .md3-app-bar-container .md3-app-bar-bottom{--app-bar-bottom-expanded-block-size: auto;grid-column:1/-1;grid-row:2;min-inline-size:0;min-block-size:0;overflow:hidden;transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container .md3-app-bar-bottom:empty{display:none}:host .md3-app-bar-container .md3-app-bar-bottom .md3-app-bar-bottom-content{padding-bottom:.75em;padding-inline-start:1em;padding-inline-end:.25em;opacity:var(--app-bar-bottom-opacity);transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container .md3-app-bar-bottom.md3-center .md3-app-bar-bottom-content{text-align:center;padding-inline:1em}:host.md3-scrolled.md3-scroll-style-elevate{--background-color: rgb(var(--md-scheme-surface-container));--search-background-color: rgb(var(--md-scheme-surface-container-highest));--elevation: var(--md-shadow-3dp)}:host.md3-scrolled.md3-scroll-style-transparent{--background-color: transparent}:host.md3-layout-medium .md3-app-bar-container .md3-app-bar-search{grid-column:2}:host.md3-layout-medium .md3-app-bar-container .md3-app-bar-search .md3-search-container{width:19.5em}:host.md3-layout-compact .md3-app-bar-container .md3-app-bar-search{grid-column:2}:host.md3-layout-compact .md3-app-bar-container .md3-app-bar-search .md3-search-container{width:100%}:host.md3-small .md3-app-bar-container .md3-app-bar-title,:host.md3-collapsed .md3-app-bar-container .md3-app-bar-title{transform:scale(1);opacity:1}:host.md3-medium .md3-app-bar-container .md3-app-bar-bottom{--app-bar-bottom-expanded-block-size: 3em;block-size:max(0px,var(--app-bar-bottom-expanded-block-size) - var(--app-bar-bottom-collapse))}:host.md3-medium .md3-app-bar-container .md3-app-bar-bottom:has(.md3-text-title.md3-text-small){--app-bar-bottom-expanded-block-size: 4.5em}:host.md3-medium .md3-app-bar-container .md3-app-bar-bottom .md3-app-bar-bottom-content .md3-text-title.md3-text-small{margin-top:.285715em}:host.md3-large .md3-app-bar-container .md3-app-bar-bottom{--app-bar-bottom-expanded-block-size: 3.5em;block-size:max(0px,var(--app-bar-bottom-expanded-block-size) - var(--app-bar-bottom-collapse))}:host.md3-large .md3-app-bar-container .md3-app-bar-bottom:has(.md3-text-title.md3-text-medium){--app-bar-bottom-expanded-block-size: 5.5em}:host.md3-large .md3-app-bar-container .md3-app-bar-bottom .md3-app-bar-bottom-content .md3-text-title.md3-text-medium{margin-top:.5em}:host.md3-scrolling-down.md3-auto-hide{max-height:0}:host.md3-scrolling-down.md3-auto-hide .md3-app-bar-container{opacity:0}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: LayoutService }], propDecorators: { barRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "bar-role", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "bar-title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "bar-subtitle", required: false }] }], appBarType: [{ type: i0.Input, args: [{ isSignal: true, alias: "bar-type", required: false }] }], appBarScrollingStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll-style", required: false }] }], autoHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "auto-hide", required: false }] }], centerAligned: [{ type: i0.Input, args: [{ isSignal: true, alias: "center-aligned", required: false }] }], logo: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AppBarLogo), { isSignal: true }] }], avatar: [{ type: i0.ContentChild, args: [i0.forwardRef(() => Avatar), { isSignal: true }] }] } });
+                    }, template: "<div class=\"md3-app-bar-container\">\n    <div class=\"md3-app-bar-leading\">\n        <ng-content select=\"[md3-app-bar-leading]\"></ng-content>\n    </div>\n\n    @if (appBarType() == 'search') {\n        <div class=\"md3-app-bar-search\" [class.md3-center]=\"centerAligned()\">\n            <div class=\"md3-search-container\">\n                <div class=\"md3-leading-buttons\">\n                    <ng-content select=\"[md3-search-leading]\"></ng-content>\n                </div>\n                <ng-content select=\"[md3-input-element]\"></ng-content>\n                <div class=\"md3-trailing-buttons\">\n                    <ng-content select=\"[md3-search-trailing]\"></ng-content>\n                </div>\n            </div>\n        </div>\n    } @else if (hasCustomHeader()) {\n        <div class=\"md3-app-bar-header\" [class.md3-center]=\"centerAligned()\">\n            <ng-content select=\"[md3-app-bar-header]\"></ng-content>\n        </div>\n    } @else if (title() || subtitle()) {\n        <div class=\"md3-app-bar-title\" [class.md3-center]=\"centerAligned()\">\n            @if (title()?.length) {\n                <div md3-type-title size=\"large\">{{ title() }}</div>\n            }\n            @if (subtitle()?.length) {\n                <div md3-type-body size=\"small\" emphasized color=\"on-surface-variant\">{{ subtitle() }}</div>\n            }\n        </div>\n    }\n\n    <div class=\"md3-app-bar-trailing\">\n        <ng-content select=\"[md3-app-bar-trailing]\"></ng-content>\n        @if (hasAvatar()) {\n            <div class=\"md3-app-bar-avatar\">\n                <ng-content select=\"[md3-avatar]\"></ng-content>\n            </div>\n        }\n    </div>\n\n    @if ((appBarType() == 'medium' || appBarType() == 'large') && (title() || subtitle())) {\n        <div class=\"md3-app-bar-bottom\" [class.md3-center]=\"centerAligned()\">\n            <div class=\"md3-app-bar-bottom-content\">\n                @if (appBarType() == 'medium') {\n                    @if (title()?.length) {\n                        <div md3-type-headline size=\"medium\">{{ title() }}</div>\n                    }\n                    @if (subtitle()?.length) {\n                        <div md3-type-title size=\"small\" color=\"on-surface-variant\">{{ subtitle() }}</div>\n                    }\n                }\n                @if (appBarType() == 'large') {\n                    @if (title()?.length) {\n                        <div md3-type-display size=\"small\">{{ title() }}</div>\n                    }\n                    @if (subtitle()?.length) {\n                        <div md3-type-title size=\"medium\" color=\"on-surface-variant\">{{ subtitle() }}</div>\n                    }\n                }\n            </div>\n        </div>\n    }\n</div>\n", styles: [":host{--background-color: rgb(var(--md-scheme-surface));--foreground-color: rgb(var(--md-scheme-on-surface));--search-background-color: rgb(var(--md-scheme-surface-container));--search-foreground-color: rgb(var(--md-scheme-on-surface));--foreground-secondary: rgb(var(--md-scheme-on-surface-variant));--elevation: var(--md-shadow-0dp);--app-bar-bottom-collapse: 0px;--app-bar-bottom-opacity: 1;display:block;min-height:0em;max-height:9.5em;overflow:hidden;background-color:var(--background-color);color:var(--foreground-color);box-shadow:var(--elevation);transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:4em auto auto;min-height:4em;width:100%;background-color:inherit;color:inherit;transition:opacity var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container .md3-app-bar-leading,:host .md3-app-bar-container .md3-app-bar-trailing{grid-row:1;z-index:1;display:inline-flex;align-items:center;gap:.25em;min-inline-size:0;block-size:4em}:host .md3-app-bar-container .md3-app-bar-leading:empty,:host .md3-app-bar-container .md3-app-bar-trailing:empty{display:none}:host .md3-app-bar-container .md3-app-bar-leading .md3-app-bar-avatar,:host .md3-app-bar-container .md3-app-bar-leading ::ng-deep [md3-app-bar-leading],:host .md3-app-bar-container .md3-app-bar-leading ::ng-deep [md3-app-bar-trailing],:host .md3-app-bar-container .md3-app-bar-trailing .md3-app-bar-avatar,:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-app-bar-leading],:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-app-bar-trailing]{flex:0 0 auto;height:3em;min-width:3em;display:inline-flex;align-items:center;justify-content:center}:host .md3-app-bar-container .md3-app-bar-leading{grid-column:1;justify-self:start;padding-inline-start:.25em;padding-inline-end:.5em;min-width:1em}:host .md3-app-bar-container .md3-app-bar-leading:empty{display:inline-flex}:host .md3-app-bar-container .md3-app-bar-leading ::ng-deep [md3-app-bar-leading]{color:var(--foreground-color)}:host .md3-app-bar-container .md3-app-bar-leading ::ng-deep [md3-app-bar-leading] .md3-standard[md3-icon-button]{--foreground-color: var(--foreground-color)}:host .md3-app-bar-container .md3-app-bar-trailing{grid-column:3;justify-self:end;padding-inline-end:.25em}:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-app-bar-trailing]{color:var(--foreground-secondary)}:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep [md3-app-bar-trailing] .md3-standard[md3-icon-button]{--foreground-color: var(--foreground-secondary)}:host .md3-app-bar-container .md3-app-bar-trailing ::ng-deep .md3-avatar{flex:0 0 2em}:host .md3-app-bar-container .md3-app-bar-search{grid-column:1/-1;grid-row:1;align-self:center;display:flex;justify-content:center;min-inline-size:0;height:3em;padding:0 .5em}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container{display:inline-flex;align-items:center;justify-content:center;width:50%;max-width:100%;border-radius:1.5em;background-color:var(--search-background-color);color:var(--search-foreground-color);transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-leading-buttons,:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-trailing-buttons{flex:0 0 1.5em;pointer-events:none;display:inline-flex;gap:.25em;padding:0 .25em}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-leading-buttons:empty,:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-trailing-buttons:empty{padding:0}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-leading-buttons ::ng-deep [md3-search-leading],:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-leading-buttons ::ng-deep [md3-search-trailing],:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-trailing-buttons ::ng-deep [md3-search-leading],:host .md3-app-bar-container .md3-app-bar-search .md3-search-container .md3-trailing-buttons ::ng-deep [md3-search-trailing]{pointer-events:all}:host .md3-app-bar-container .md3-app-bar-search .md3-search-container ::ng-deep [md3-input-element]{flex:1 1 auto;background-color:transparent;color:var(--search-foreground-color);font-size:1em;height:100%;min-width:0em;border:none;padding:0 1.5em;margin:0 -1.5em}:host .md3-app-bar-container .md3-app-bar-search.md3-center .md3-search-container ::ng-deep [md3-input-element]{text-align:center}:host .md3-app-bar-container .md3-app-bar-header{grid-column:2;grid-row:1;align-self:center;display:flex;justify-content:start;min-inline-size:0;overflow:hidden;height:3em}:host .md3-app-bar-container .md3-app-bar-header.md3-center{grid-column:1/-1;justify-self:stretch;text-align:center;justify-content:center}:host .md3-app-bar-container .md3-app-bar-header ::ng-deep a[md3-app-bar-header],:host .md3-app-bar-container .md3-app-bar-header ::ng-deep button[md3-app-bar-header]{cursor:pointer}:host .md3-app-bar-container .md3-app-bar-header ::ng-deep [md3-app-bar-header]{flex:0 1 auto;max-height:100%;max-width:100%;display:block;border:none;background:transparent;font-size:1em;text-decoration:none;padding:0;margin:0}:host .md3-app-bar-container .md3-app-bar-header ::ng-deep [md3-app-bar-header]>*{max-height:100%;max-width:100%}:host .md3-app-bar-container .md3-app-bar-header ::ng-deep [md3-app-bar-header]>img,:host .md3-app-bar-container .md3-app-bar-header ::ng-deep [md3-app-bar-header]>svg{display:inline-block;max-height:100%;max-width:100%;width:100%;height:100%;object-fit:contain}:host .md3-app-bar-container .md3-app-bar-title{grid-column:2;grid-row:1;align-self:center;min-inline-size:0;color:inherit;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing);transform:scale(0);opacity:0}:host .md3-app-bar-container .md3-app-bar-title:dir(ltr){transform-origin:bottom left}:host .md3-app-bar-container .md3-app-bar-title:dir(rtl){transform-origin:bottom right}:host .md3-app-bar-container .md3-app-bar-title.md3-center{grid-column:1/-1;justify-self:stretch;text-align:center;transform-origin:bottom center}:host .md3-app-bar-container .md3-app-bar-title ::ng-deep [md3-app-bar-title]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:all}:host .md3-app-bar-container .md3-app-bar-bottom{--app-bar-bottom-expanded-block-size: auto;grid-column:1/-1;grid-row:2;min-inline-size:0;min-block-size:0;overflow:hidden;transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container .md3-app-bar-bottom:empty{display:none}:host .md3-app-bar-container .md3-app-bar-bottom .md3-app-bar-bottom-content{padding-bottom:.75em;padding-inline-start:1em;padding-inline-end:.25em;opacity:var(--app-bar-bottom-opacity);transition:all var(--md-motion-standard-default-effects-duration) var(--md-motion-standard-default-effects-easing)}:host .md3-app-bar-container .md3-app-bar-bottom.md3-center .md3-app-bar-bottom-content{text-align:center;padding-inline:1em}:host.md3-scrolled.md3-scroll-style-elevate{--background-color: rgb(var(--md-scheme-surface-container));--search-background-color: rgb(var(--md-scheme-surface-container-highest));--elevation: var(--md-shadow-3dp)}:host.md3-scrolled.md3-scroll-style-transparent{--background-color: transparent}:host.md3-layout-medium .md3-app-bar-container .md3-app-bar-search{grid-column:2}:host.md3-layout-medium .md3-app-bar-container .md3-app-bar-search .md3-search-container{width:19.5em}:host.md3-layout-compact .md3-app-bar-container .md3-app-bar-search{grid-column:2}:host.md3-layout-compact .md3-app-bar-container .md3-app-bar-search .md3-search-container{width:100%}:host.md3-small .md3-app-bar-container .md3-app-bar-title,:host.md3-collapsed .md3-app-bar-container .md3-app-bar-title{transform:scale(1);opacity:1}:host.md3-medium .md3-app-bar-container .md3-app-bar-bottom{--app-bar-bottom-expanded-block-size: 3em;block-size:max(0px,var(--app-bar-bottom-expanded-block-size) - var(--app-bar-bottom-collapse))}:host.md3-medium .md3-app-bar-container .md3-app-bar-bottom:has(.md3-text-title.md3-text-small){--app-bar-bottom-expanded-block-size: 4.5em}:host.md3-medium .md3-app-bar-container .md3-app-bar-bottom .md3-app-bar-bottom-content .md3-text-title.md3-text-small{margin-top:.285715em}:host.md3-large .md3-app-bar-container .md3-app-bar-bottom{--app-bar-bottom-expanded-block-size: 3.5em;block-size:max(0px,var(--app-bar-bottom-expanded-block-size) - var(--app-bar-bottom-collapse))}:host.md3-large .md3-app-bar-container .md3-app-bar-bottom:has(.md3-text-title.md3-text-medium){--app-bar-bottom-expanded-block-size: 5.5em}:host.md3-large .md3-app-bar-container .md3-app-bar-bottom .md3-app-bar-bottom-content .md3-text-title.md3-text-medium{margin-top:.5em}:host.md3-scrolling-down.md3-auto-hide{max-height:0}:host.md3-scrolling-down.md3-auto-hide .md3-app-bar-container{opacity:0}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: LayoutService }], propDecorators: { barRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "bar-role", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "bar-title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "bar-subtitle", required: false }] }], appBarType: [{ type: i0.Input, args: [{ isSignal: true, alias: "bar-type", required: false }] }], appBarScrollingStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll-style", required: false }] }], autoHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "auto-hide", required: false }] }], centerAligned: [{ type: i0.Input, args: [{ isSignal: true, alias: "center-aligned", required: false }] }], customHeader: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AppBarHeader), { isSignal: true }] }], avatar: [{ type: i0.ContentChild, args: [i0.forwardRef(() => Avatar), { isSignal: true }] }] } });
 
 /**
  * Material 3 toolbar.
@@ -6764,6 +6764,7 @@ class SelectField {
      */
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     menuColors = input('standard', { ...(ngDevMode ? { debugName: "menuColors" } : /* istanbul ignore next */ {}), alias: 'menu-colors' });
+    scrollStrategy = input(undefined, { ...(ngDevMode ? { debugName: "scrollStrategy" } : /* istanbul ignore next */ {}), alias: 'menu-scroll-strategy' });
     fieldType = input('filled', { ...(ngDevMode ? { debugName: "fieldType" } : /* istanbul ignore next */ {}), alias: 'field-type' });
     /**
      * Control passed explicitly, mirroring md3-text-field. Takes precedence over a form
@@ -6971,7 +6972,7 @@ class SelectField {
             xPosition: 'start',
             yPosition: 'below',
             overlapTrigger: false,
-            // scrollStrategy: 'close',
+            scrollStrategy: this.scrollStrategy(),
             viewContainerRef: this.viewContainerRef,
         });
         this.menuRef.componentInstance?.visibleOptions.set(this.filteredOptions());
@@ -7045,7 +7046,7 @@ class SelectField {
         return current === next;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SelectField, deps: [{ token: MenuService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: SelectField, isStandalone: true, selector: "md3-select-field", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "display-with", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, menuColors: { classPropertyName: "menuColors", publicName: "menu-colors", isSignal: true, isRequired: false, transformFunction: null }, fieldType: { classPropertyName: "fieldType", publicName: "field-type", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "iconElements", predicate: IconElement, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: InputElement, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<md3-text-field [label]=\"label()\" [field-type]=\"fieldType()\" [control]=\"formControl()\">\n    <!-- <md3-icon md3-icon-element=\"leading\">search</md3-icon> -->\n    @if (hasLeadingIcon()) {\n        <div md3-icon-element=\"leading\">\n            <ng-content select=\"[md3-icon-element=leading]\"></ng-content>\n        </div>\n    }\n\n    <input md3-input-element type=\"text\" [readonly]=\"!searchable()\" [disabled]=\"isDisabled()\" (click)=\"openMenu()\"\n        (focus)=\"onSearchFocus()\" (blur)=\"onSearchBlur()\" (input)=\"onSearchInput($event)\"\n        class=\"md3-select-input\" [value]=\"displayText()\">\n\n    <button md3-icon-button button-type=\"standard\" [disabled]=\"isDisabled()\" (click)=\"toggleMenu()\" class=\"md3-select-arrow\">\n        @if (hasArrowIcon()) {\n            <ng-content select=\"[md3-icon-element=arrow]\"></ng-content>\n        } @else {\n            <md3-icon md3-icon-element>arrow_drop_down</md3-icon>\n        }\n    </button>\n\n    <ng-content select=\"[md3-supporting-text]\" ngProjectAs=\"[md3-supporting-text]\"></ng-content>\n</md3-text-field>\n", styles: [".md3-select-input{text-overflow:ellipsis}.md3-select-input:read-only{cursor:default;-webkit-user-select:none;user-select:none}.md3-select-input~.md3-select-arrow{transition:transform var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}.md3-select-input.md3-menu-active:dir(ltr)~.md3-select-arrow{transform:rotate(180deg)}.md3-select-input.md3-menu-active:dir(rtl)~.md3-select-arrow{transform:rotate(-180deg)}\n"], dependencies: [{ kind: "component", type: TextField, selector: "md3-text-field", inputs: ["label", "field-type", "input-counter", "control"] }, { kind: "directive", type: IconElement, selector: "[md3-icon-element]", inputs: ["md3-icon-element"] }, { kind: "component", type: IconButton, selector: "button[md3-icon-button], a[md3-icon-button]", inputs: ["button-size", "button-type", "button-width", "button-squared", "selected"], outputs: ["selectedChange"] }, { kind: "directive", type: InputElement, selector: "[md3-input-element]" }, { kind: "component", type: MaterialIcon, selector: "md3-icon", inputs: ["icon-version", "filled", "icon-style", "icon-size", "bi-directional"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: SelectField, isStandalone: true, selector: "md3-select-field", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "display-with", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, menuColors: { classPropertyName: "menuColors", publicName: "menu-colors", isSignal: true, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "menu-scroll-strategy", isSignal: true, isRequired: false, transformFunction: null }, fieldType: { classPropertyName: "fieldType", publicName: "field-type", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "iconElements", predicate: IconElement, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: InputElement, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<md3-text-field [label]=\"label()\" [field-type]=\"fieldType()\" [control]=\"formControl()\">\n    <!-- <md3-icon md3-icon-element=\"leading\">search</md3-icon> -->\n    @if (hasLeadingIcon()) {\n        <div md3-icon-element=\"leading\">\n            <ng-content select=\"[md3-icon-element=leading]\"></ng-content>\n        </div>\n    }\n\n    <input md3-input-element type=\"text\" [readonly]=\"!searchable()\" [disabled]=\"isDisabled()\" (click)=\"openMenu()\"\n        (focus)=\"onSearchFocus()\" (blur)=\"onSearchBlur()\" (input)=\"onSearchInput($event)\"\n        class=\"md3-select-input\" [value]=\"displayText()\">\n\n    <button md3-icon-button button-type=\"standard\" [disabled]=\"isDisabled()\" (click)=\"toggleMenu()\" class=\"md3-select-arrow\">\n        @if (hasArrowIcon()) {\n            <ng-content select=\"[md3-icon-element=arrow]\"></ng-content>\n        } @else {\n            <md3-icon md3-icon-element>arrow_drop_down</md3-icon>\n        }\n    </button>\n\n    <ng-content select=\"[md3-supporting-text]\" ngProjectAs=\"[md3-supporting-text]\"></ng-content>\n</md3-text-field>\n", styles: [".md3-select-input{text-overflow:ellipsis}.md3-select-input:read-only{cursor:default;-webkit-user-select:none;user-select:none}.md3-select-input~.md3-select-arrow{transition:transform var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}.md3-select-input.md3-menu-active:dir(ltr)~.md3-select-arrow{transform:rotate(180deg)}.md3-select-input.md3-menu-active:dir(rtl)~.md3-select-arrow{transform:rotate(-180deg)}\n"], dependencies: [{ kind: "component", type: TextField, selector: "md3-text-field", inputs: ["label", "field-type", "input-counter", "control"] }, { kind: "directive", type: IconElement, selector: "[md3-icon-element]", inputs: ["md3-icon-element"] }, { kind: "component", type: IconButton, selector: "button[md3-icon-button], a[md3-icon-button]", inputs: ["button-size", "button-type", "button-width", "button-squared", "selected"], outputs: ["selectedChange"] }, { kind: "directive", type: InputElement, selector: "[md3-input-element]" }, { kind: "component", type: MaterialIcon, selector: "md3-icon", inputs: ["icon-version", "filled", "icon-style", "icon-size", "bi-directional"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SelectField, decorators: [{
             type: Component,
@@ -7056,7 +7057,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         InputElement,
                         MaterialIcon,
                     ], template: "<md3-text-field [label]=\"label()\" [field-type]=\"fieldType()\" [control]=\"formControl()\">\n    <!-- <md3-icon md3-icon-element=\"leading\">search</md3-icon> -->\n    @if (hasLeadingIcon()) {\n        <div md3-icon-element=\"leading\">\n            <ng-content select=\"[md3-icon-element=leading]\"></ng-content>\n        </div>\n    }\n\n    <input md3-input-element type=\"text\" [readonly]=\"!searchable()\" [disabled]=\"isDisabled()\" (click)=\"openMenu()\"\n        (focus)=\"onSearchFocus()\" (blur)=\"onSearchBlur()\" (input)=\"onSearchInput($event)\"\n        class=\"md3-select-input\" [value]=\"displayText()\">\n\n    <button md3-icon-button button-type=\"standard\" [disabled]=\"isDisabled()\" (click)=\"toggleMenu()\" class=\"md3-select-arrow\">\n        @if (hasArrowIcon()) {\n            <ng-content select=\"[md3-icon-element=arrow]\"></ng-content>\n        } @else {\n            <md3-icon md3-icon-element>arrow_drop_down</md3-icon>\n        }\n    </button>\n\n    <ng-content select=\"[md3-supporting-text]\" ngProjectAs=\"[md3-supporting-text]\"></ng-content>\n</md3-text-field>\n", styles: [".md3-select-input{text-overflow:ellipsis}.md3-select-input:read-only{cursor:default;-webkit-user-select:none;user-select:none}.md3-select-input~.md3-select-arrow{transition:transform var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}.md3-select-input.md3-menu-active:dir(ltr)~.md3-select-arrow{transform:rotate(180deg)}.md3-select-input.md3-menu-active:dir(rtl)~.md3-select-arrow{transform:rotate(-180deg)}\n"] }]
-        }], ctorParameters: () => [{ type: MenuService }, { type: i0.ViewContainerRef }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "display-with", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], menuColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu-colors", required: false }] }], fieldType: [{ type: i0.Input, args: [{ isSignal: true, alias: "field-type", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], iconElements: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IconElement), { ...{ descendants: true }, isSignal: true }] }], inputElement: [{ type: i0.ViewChild, args: [i0.forwardRef(() => InputElement), { ...{ read: ElementRef }, isSignal: true }] }] } });
+        }], ctorParameters: () => [{ type: MenuService }, { type: i0.ViewContainerRef }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "display-with", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], menuColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu-colors", required: false }] }], scrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu-scroll-strategy", required: false }] }], fieldType: [{ type: i0.Input, args: [{ isSignal: true, alias: "field-type", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], iconElements: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IconElement), { ...{ descendants: true }, isSignal: true }] }], inputElement: [{ type: i0.ViewChild, args: [i0.forwardRef(() => InputElement), { ...{ read: ElementRef }, isSignal: true }] }] } });
 
 /**
  * Material 3 dialog shell. It extends the CDK dialog container, so focus
@@ -8146,5 +8147,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AppBar, AppBarLogo, Avatar, BOTTOM_SHEET_COMPONENT, BOTTOM_SHEET_CONFIG, BOTTOM_SHEET_DATA, Badge, BottomSheetRef, BottomSheetService, Button, ButtonGroup, CAROUSEL_STRATEGIES, Card, Carousel, CarouselItem, Checkbox, ChipAvatar, Chips, CircularProgressIndicator, DIALOG_COMPONENT, DIALOG_CONFIG, DIALOG_DATA, Dialog, DialogActions, DialogBody, DialogHeader, DialogRef, DialogService, Divider, FloatingActionButton, FullScreenDialog, Grid, GridItem, IconButton, IconElement, InputElement, Layout, LayoutService, LinearProgressIndicator, List, ListItem, ListItemPrimaryAction, ListLeading, ListSlot, LoadingIndicator, MENU_COMPONENT, MENU_CONFIG, MENU_DATA, MaterialIcon, Menu, MenuGroup, MenuItem, MenuRef, MenuService, ModalBottomSheetRef, NavigationBar, NavigationGroup, NavigationItem, NavigationRail, RadioButton, SIDE_SHEET_COMPONENT, SIDE_SHEET_CONFIG, SIDE_SHEET_DATA, SNACKBAR_ACTION_LABEL, SNACKBAR_CONFIG, SNACKBAR_MESSAGE, Scaffold, ScaffoldBar, ScaffoldPane, ScaffoldRail, SelectField, SheetsService, SideSheetActions, SideSheetBody, SideSheetHeader, SideSheetRef, Slider, Snackbar, SnackbarRef, SnackbarService, SplitButton, StandardBottomSheetRef, StateComponent, SupportingText, Switch, TextField, Toolbar, ToolbarItem, TypeBody, TypeDisplay, TypeHeadline, TypeLabel, TypeTitle, ViewportService, buildGeometry, clampIndex, indexForScrollOffset, multiBrowseStrategy, parseCarouselAspectRatio, resolveItemGeometry, resolveState, scrollOffsetForIndex, sizeBandFor };
+export { AppBar, AppBarHeader, Avatar, BOTTOM_SHEET_COMPONENT, BOTTOM_SHEET_CONFIG, BOTTOM_SHEET_DATA, Badge, BottomSheetRef, BottomSheetService, Button, ButtonGroup, CAROUSEL_STRATEGIES, Card, Carousel, CarouselItem, Checkbox, ChipAvatar, Chips, CircularProgressIndicator, DIALOG_COMPONENT, DIALOG_CONFIG, DIALOG_DATA, Dialog, DialogActions, DialogBody, DialogHeader, DialogRef, DialogService, Divider, FloatingActionButton, FullScreenDialog, Grid, GridItem, IconButton, IconElement, InputElement, Layout, LayoutService, LinearProgressIndicator, List, ListItem, ListItemPrimaryAction, ListLeading, ListSlot, LoadingIndicator, MENU_COMPONENT, MENU_CONFIG, MENU_DATA, MaterialIcon, Menu, MenuGroup, MenuItem, MenuRef, MenuService, ModalBottomSheetRef, NavigationBar, NavigationGroup, NavigationItem, NavigationRail, RadioButton, SIDE_SHEET_COMPONENT, SIDE_SHEET_CONFIG, SIDE_SHEET_DATA, SNACKBAR_ACTION_LABEL, SNACKBAR_CONFIG, SNACKBAR_MESSAGE, Scaffold, ScaffoldBar, ScaffoldPane, ScaffoldRail, SelectField, SheetsService, SideSheetActions, SideSheetBody, SideSheetHeader, SideSheetRef, Slider, Snackbar, SnackbarRef, SnackbarService, SplitButton, StandardBottomSheetRef, StateComponent, SupportingText, Switch, TextField, Toolbar, ToolbarItem, TypeBody, TypeDisplay, TypeHeadline, TypeLabel, TypeTitle, ViewportService, buildGeometry, clampIndex, indexForScrollOffset, multiBrowseStrategy, parseCarouselAspectRatio, resolveItemGeometry, resolveState, scrollOffsetForIndex, sizeBandFor };
 //# sourceMappingURL=almoamendev-ngx-md3.mjs.map