@almoamendev/ngx-md3 0.8.6 → 0.8.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -5713,10 +5713,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
5713
5713
|
class NavigationItem {
|
|
5714
5714
|
el = inject((ElementRef));
|
|
5715
5715
|
routerLinkActive = inject(RouterLinkActive);
|
|
5716
|
-
|
|
5717
|
-
hideOnCollapse = computed(() => this.
|
|
5716
|
+
collapseMode = input('none', { ...(ngDevMode ? { debugName: "collapseMode" } : /* istanbul ignore next */ {}), alias: 'collapse-mode' });
|
|
5717
|
+
hideOnCollapse = computed(() => this.collapseMode() == 'hide', /* @ts-ignore */
|
|
5718
5718
|
...(ngDevMode ? [{ debugName: "hideOnCollapse" }] : /* istanbul ignore next */ []));
|
|
5719
|
-
showOnCollapse = computed(() => this.
|
|
5719
|
+
showOnCollapse = computed(() => this.collapseMode() == 'show', /* @ts-ignore */
|
|
5720
5720
|
...(ngDevMode ? [{ debugName: "showOnCollapse" }] : /* istanbul ignore next */ []));
|
|
5721
5721
|
icons = contentChildren(IconElement, /* @ts-ignore */
|
|
5722
5722
|
...(ngDevMode ? [{ debugName: "icons" }] : /* istanbul ignore next */ []));
|
|
@@ -5734,7 +5734,7 @@ class NavigationItem {
|
|
|
5734
5734
|
return this.el.nativeElement;
|
|
5735
5735
|
}
|
|
5736
5736
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: NavigationItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5737
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: NavigationItem, isStandalone: true, selector: "button[md3-nav-item], a[md3-nav-item]", inputs: {
|
|
5737
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: NavigationItem, isStandalone: true, selector: "button[md3-nav-item], a[md3-nav-item]", inputs: { collapseMode: { classPropertyName: "collapseMode", publicName: "collapse-mode", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.md3-hide-on-collapse": "hideOnCollapse()", "class.md3-show-on-collapse": "showOnCollapse()", "class.md3-active": "this.active" } }, queries: [{ propertyName: "icons", predicate: IconElement, isSignal: true }, { propertyName: "badge", first: true, predicate: Badge, descendants: true, isSignal: true }], exportAs: ["md3NavItem"], hostDirectives: [{ directive: i1.RouterLinkActive, inputs: ["routerLinkActiveOptions", "routerLinkActiveOptions", "ariaCurrentWhenActive", "ariaCurrentWhenActive"] }], ngImport: i0, template: "<div class=\"md3-item-container\">\n @if (hasIcons()) {\n <div class=\"md3-icon-container\">\n <ng-content select=\"[md3-icon-element=active]\"></ng-content>\n <ng-content select=\"[md3-icon-element]\"></ng-content>\n </div>\n }\n <div class=\"md3-label\">\n <ng-content></ng-content>\n </div>\n @if (hasIcons() && badge()) {\n <div class=\"md3-badge-container\" [class.md3-small]=\"badge()?.isSmall()\">\n <ng-content select=\"md3-badge\"></ng-content>\n </div>\n }\n</div>", styles: [":host{--icon-color: rgb(var(--md-scheme-on-surface-variant));--label-color: rgb(var(--md-scheme-on-surface-variant));--state-color: rgb(var(--md-scheme-on-secondary-container));--active-indicator-color: transparent;font-size:1em;text-decoration:none;border:none;outline:none;cursor:pointer;position:relative;display:inline-flex;align-items:start;text-decoration:none!important;white-space:nowrap;background-color:transparent;padding:0;transform-origin:top;transition:all var(--md-motion-expressive-default-spatial-duration) var(--md-motion-expressive-default-spatial-easing);-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .md3-item-container{display:inline-flex;flex-direction:column;gap:.25em;position:relative;align-items:center;justify-content:center;padding:.375em 0;max-width:100%}:host .md3-item-container:before{content:\"\";position:absolute;top:.375em;height:2em;width:3.5em;border-radius:var(--md-border-radius-large);z-index:0;transition:all var(--md-motion-expressive-default-spatial-duration) var(--md-motion-expressive-default-spatial-easing);transform:scale(0);background-color:var(--active-indicator-color)}:host .md3-item-container:after{content:\"\";position:absolute;top:.375em;height:2em;width:3.5em;border-radius:var(--md-border-radius-large);z-index:1;transition:all var(--md-motion-expressive-default-spatial-duration) var(--md-motion-expressive-default-spatial-easing);transform:scale(0);opacity:0;background-color:var(--state-color)}:host .md3-label{font-size:.75em;font-weight:500;line-height:1.333333em;letter-spacing:.041667em;padding-inline:.666667em;overflow:hidden;z-index:2;max-width:100%;max-height:2.666667em;color:var(--label-color)}:host:hover .md3-item-container:after{transform:scale(1);opacity:.08}:host:focus .md3-item-container:after{transform:scale(1);opacity:.1}:host:active .md3-item-container:after{transform:scale(1);opacity:.1}:host .md3-icon-container{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.25em;z-index:2;color:var(--icon-color)}:host .md3-icon-container ::ng-deep [md3-icon-element]{font-size:1.5em!important;line-height:1;height:1em!important;width:1em!important}:host .md3-icon-container ::ng-deep [md3-icon-element=active]{display:none}:host .md3-badge-container{flex:0 0 auto;position:absolute;top:.5em;inset-inline-start:50%;display:inline-flex;align-items:start;justify-content:end;min-height:.875em;min-width:.875em;z-index:3}:host.md3-active{--icon-color: rgb(var(--md-scheme-secondary));--label-color: rgb(var(--md-scheme-on-secondary-container));--active-indicator-color: rgb(var(--md-scheme-secondary-container))}:host.md3-active .md3-icon-container ::ng-deep [md3-icon-element=active]{display:inline-block}:host.md3-active .md3-icon-container ::ng-deep [md3-icon-element=active]+[md3-icon-element]{display:none}:host.md3-active .md3-item-container:before{transform:scale(1)}\n"] });
|
|
5738
5738
|
}
|
|
5739
5739
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: NavigationItem, decorators: [{
|
|
5740
5740
|
type: Component,
|
|
@@ -5747,7 +5747,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
5747
5747
|
inputs: ['routerLinkActiveOptions', 'ariaCurrentWhenActive'],
|
|
5748
5748
|
}
|
|
5749
5749
|
], template: "<div class=\"md3-item-container\">\n @if (hasIcons()) {\n <div class=\"md3-icon-container\">\n <ng-content select=\"[md3-icon-element=active]\"></ng-content>\n <ng-content select=\"[md3-icon-element]\"></ng-content>\n </div>\n }\n <div class=\"md3-label\">\n <ng-content></ng-content>\n </div>\n @if (hasIcons() && badge()) {\n <div class=\"md3-badge-container\" [class.md3-small]=\"badge()?.isSmall()\">\n <ng-content select=\"md3-badge\"></ng-content>\n </div>\n }\n</div>", styles: [":host{--icon-color: rgb(var(--md-scheme-on-surface-variant));--label-color: rgb(var(--md-scheme-on-surface-variant));--state-color: rgb(var(--md-scheme-on-secondary-container));--active-indicator-color: transparent;font-size:1em;text-decoration:none;border:none;outline:none;cursor:pointer;position:relative;display:inline-flex;align-items:start;text-decoration:none!important;white-space:nowrap;background-color:transparent;padding:0;transform-origin:top;transition:all var(--md-motion-expressive-default-spatial-duration) var(--md-motion-expressive-default-spatial-easing);-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .md3-item-container{display:inline-flex;flex-direction:column;gap:.25em;position:relative;align-items:center;justify-content:center;padding:.375em 0;max-width:100%}:host .md3-item-container:before{content:\"\";position:absolute;top:.375em;height:2em;width:3.5em;border-radius:var(--md-border-radius-large);z-index:0;transition:all var(--md-motion-expressive-default-spatial-duration) var(--md-motion-expressive-default-spatial-easing);transform:scale(0);background-color:var(--active-indicator-color)}:host .md3-item-container:after{content:\"\";position:absolute;top:.375em;height:2em;width:3.5em;border-radius:var(--md-border-radius-large);z-index:1;transition:all var(--md-motion-expressive-default-spatial-duration) var(--md-motion-expressive-default-spatial-easing);transform:scale(0);opacity:0;background-color:var(--state-color)}:host .md3-label{font-size:.75em;font-weight:500;line-height:1.333333em;letter-spacing:.041667em;padding-inline:.666667em;overflow:hidden;z-index:2;max-width:100%;max-height:2.666667em;color:var(--label-color)}:host:hover .md3-item-container:after{transform:scale(1);opacity:.08}:host:focus .md3-item-container:after{transform:scale(1);opacity:.1}:host:active .md3-item-container:after{transform:scale(1);opacity:.1}:host .md3-icon-container{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.25em;z-index:2;color:var(--icon-color)}:host .md3-icon-container ::ng-deep [md3-icon-element]{font-size:1.5em!important;line-height:1;height:1em!important;width:1em!important}:host .md3-icon-container ::ng-deep [md3-icon-element=active]{display:none}:host .md3-badge-container{flex:0 0 auto;position:absolute;top:.5em;inset-inline-start:50%;display:inline-flex;align-items:start;justify-content:end;min-height:.875em;min-width:.875em;z-index:3}:host.md3-active{--icon-color: rgb(var(--md-scheme-secondary));--label-color: rgb(var(--md-scheme-on-secondary-container));--active-indicator-color: rgb(var(--md-scheme-secondary-container))}:host.md3-active .md3-icon-container ::ng-deep [md3-icon-element=active]{display:inline-block}:host.md3-active .md3-icon-container ::ng-deep [md3-icon-element=active]+[md3-icon-element]{display:none}:host.md3-active .md3-item-container:before{transform:scale(1)}\n"] }]
|
|
5750
|
-
}], propDecorators: {
|
|
5750
|
+
}], propDecorators: { collapseMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapse-mode", required: false }] }], icons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IconElement), { isSignal: true }] }], badge: [{ type: i0.ContentChild, args: [i0.forwardRef(() => Badge), { isSignal: true }] }], active: [{
|
|
5751
5751
|
type: HostBinding,
|
|
5752
5752
|
args: ['class.md3-active']
|
|
5753
5753
|
}] } });
|
|
@@ -5756,16 +5756,16 @@ class NavigationGroup {
|
|
|
5756
5756
|
el = inject((ElementRef));
|
|
5757
5757
|
label = input(/* @ts-ignore */
|
|
5758
5758
|
...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
5759
|
-
|
|
5760
|
-
hideOnCollapse = computed(() => this.
|
|
5759
|
+
collapseMode = input('none', { ...(ngDevMode ? { debugName: "collapseMode" } : /* istanbul ignore next */ {}), alias: 'collapse-mode' });
|
|
5760
|
+
hideOnCollapse = computed(() => this.collapseMode() == 'hide', /* @ts-ignore */
|
|
5761
5761
|
...(ngDevMode ? [{ debugName: "hideOnCollapse" }] : /* istanbul ignore next */ []));
|
|
5762
|
-
showOnCollapse = computed(() => this.
|
|
5762
|
+
showOnCollapse = computed(() => this.collapseMode() == 'show', /* @ts-ignore */
|
|
5763
5763
|
...(ngDevMode ? [{ debugName: "showOnCollapse" }] : /* istanbul ignore next */ []));
|
|
5764
5764
|
get element() {
|
|
5765
5765
|
return this.el.nativeElement;
|
|
5766
5766
|
}
|
|
5767
5767
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: NavigationGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5768
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: NavigationGroup, isStandalone: true, selector: "md3-nav-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null },
|
|
5768
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: NavigationGroup, isStandalone: true, selector: "md3-nav-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, collapseMode: { classPropertyName: "collapseMode", publicName: "collapse-mode", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.md3-hide-on-collapse": "hideOnCollapse()", "class.md3-show-on-collapse": "showOnCollapse()" } }, ngImport: i0, template: "@if (label()?.length) {\n <div class=\"md3-nav-label\">\n <md3-type-label size=\"large\">{{ label() }}</md3-type-label>\n </div>\n}\n<ng-content select=\"[md3-nav-item]\"></ng-content>", styles: [":host{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:100%;transform-origin:top;transition:all var(--md-motion-expressive-default-spatial-duration) var(--md-motion-expressive-default-spatial-easing)}:host .md3-nav-label{padding-block:1em;padding-inline:2.25em 1.25em;white-space:nowrap;transform-origin:top}\n"], dependencies: [{ kind: "directive", type: TypeLabel, selector: "md3-type-label, [md3-type-label]", inputs: ["size", "color", "emphasized"] }] });
|
|
5769
5769
|
}
|
|
5770
5770
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: NavigationGroup, decorators: [{
|
|
5771
5771
|
type: Component,
|
|
@@ -5775,7 +5775,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
5775
5775
|
'[class.md3-hide-on-collapse]': 'hideOnCollapse()',
|
|
5776
5776
|
'[class.md3-show-on-collapse]': 'showOnCollapse()',
|
|
5777
5777
|
}, template: "@if (label()?.length) {\n <div class=\"md3-nav-label\">\n <md3-type-label size=\"large\">{{ label() }}</md3-type-label>\n </div>\n}\n<ng-content select=\"[md3-nav-item]\"></ng-content>", styles: [":host{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:100%;transform-origin:top;transition:all var(--md-motion-expressive-default-spatial-duration) var(--md-motion-expressive-default-spatial-easing)}:host .md3-nav-label{padding-block:1em;padding-inline:2.25em 1.25em;white-space:nowrap;transform-origin:top}\n"] }]
|
|
5778
|
-
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }],
|
|
5778
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], collapseMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapse-mode", required: false }] }] } });
|
|
5779
5779
|
|
|
5780
5780
|
class NavigationRail {
|
|
5781
5781
|
el = inject((ElementRef));
|
|
@@ -5863,7 +5863,7 @@ class NavigationRail {
|
|
|
5863
5863
|
provide: MD3_BUTTON_CONTEXT,
|
|
5864
5864
|
useExisting: NavigationRail,
|
|
5865
5865
|
},
|
|
5866
|
-
], queries: [{ propertyName: "menuIcons", predicate: IconElement, isSignal: true }, { propertyName: "floatingActionButton", first: true, predicate: FloatingActionButton, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"md3-nav-scrim\" (click)=\"collapse()\"></div>\n<div class=\"md3-nav-container\">\n <div class=\"md3-nav-header\" [class.md3-hidden]=\"hideMenuButton() && !hasFab()\">\n @if (!hideMenuButton()) {\n <button md3-icon-button button-type=\"standard\" class=\"md3-menu-button\" (click)=\"toggle()\">\n <ng-content select=\"[md3-icon-element=expand]\"></ng-content>\n @if (!menuExpandIcon()) {\n <md3-icon md3-icon-element md3-menu-expand>menu</md3-icon>\n }\n <ng-content select=\"[md3-icon-element=collapse]\"></ng-content>\n @if (!menuCollapseIcon()) {\n <md3-icon md3-icon-element md3-menu-collapse bi-directional>menu_open</md3-icon>\n }\n </button>\n }\n\n <ng-content select=\"[md3-fab]\"></ng-content>\n </div>\n <div class=\"md3-menu-container\" [class.md3-full-width-indicator]=\"fullWidthIndicator()\" [ngClass]=\"'md3-' + menuAlignment()\">\n <div class=\"md3-menu-list md3-scrollable\">\n <ng-content select=\"[md3-nav-item], md3-nav-group\"></ng-content>\n </div>\n </div>\n</div>", styles: [":host{display:flex;width:6em;transition:all var(--md-motion-standard-default-spatial-duration) var(--md-motion-standard-default-spatial-easing)}:host .md3-nav-scrim{position:fixed;inset:0;z-index:399;pointer-events:none;display:none;background-color:rgb(var(--md-scheme-scrim));opacity:0;transition:all var(--md-motion-standard-default-spatial-duration) var(--md-motion-standard-default-spatial-easing)}:host .md3-nav-container{flex:1 1 auto;display:flex;flex-direction:column;align-items:start;position:relative;background-color:rgb(var(--md-scheme-surface));color:rgb(var(--md-scheme-on-surface));height:100%;max-width:6em}:host .md3-nav-container .md3-nav-header{display:flex;flex-direction:column;align-items:start;gap:.25em;padding:2.75em 1.25em 1.5em;width:100%;min-width:fit-content}:host .md3-nav-container .md3-nav-header.md3-hidden{display:none}:host .md3-nav-container .md3-nav-header .md3-menu-button{margin:.5em}:host .md3-nav-container .md3-nav-header .md3-menu-button ::ng-deep [md3-menu-expand]{display:inline-block}:host .md3-nav-container .md3-nav-header .md3-menu-button ::ng-deep [md3-menu-collapse]{display:none}:host .md3-nav-container .md3-nav-header ::ng-deep [md3-fab]{box-shadow:var(--md-shadow-0dp)}:host .md3-nav-container .md3-menu-container{flex:1 1
|
|
5866
|
+
], queries: [{ propertyName: "menuIcons", predicate: IconElement, isSignal: true }, { propertyName: "floatingActionButton", first: true, predicate: FloatingActionButton, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"md3-nav-scrim\" (click)=\"collapse()\"></div>\n<div class=\"md3-nav-container\">\n <div class=\"md3-nav-header\" [class.md3-hidden]=\"hideMenuButton() && !hasFab()\">\n @if (!hideMenuButton()) {\n <button md3-icon-button button-type=\"standard\" class=\"md3-menu-button\" (click)=\"toggle()\">\n <ng-content select=\"[md3-icon-element=expand]\"></ng-content>\n @if (!menuExpandIcon()) {\n <md3-icon md3-icon-element md3-menu-expand>menu</md3-icon>\n }\n <ng-content select=\"[md3-icon-element=collapse]\"></ng-content>\n @if (!menuCollapseIcon()) {\n <md3-icon md3-icon-element md3-menu-collapse bi-directional>menu_open</md3-icon>\n }\n </button>\n }\n\n <ng-content select=\"[md3-fab]\"></ng-content>\n </div>\n <div class=\"md3-menu-container\" [class.md3-full-width-indicator]=\"fullWidthIndicator()\" [ngClass]=\"'md3-' + menuAlignment()\">\n <div class=\"md3-menu-list md3-scrollable\">\n <ng-content select=\"[md3-nav-item], md3-nav-group\"></ng-content>\n </div>\n </div>\n <div class=\"md3-nav-footer\" [class.md3-full-width-indicator]=\"fullWidthIndicator()\">\n <ng-content select=\"[md3-nav-footer]\"></ng-content>\n </div>\n</div>", styles: [":host{display:flex;width:6em;transition:all var(--md-motion-standard-default-spatial-duration) var(--md-motion-standard-default-spatial-easing)}:host .md3-nav-scrim{position:fixed;inset:0;z-index:399;pointer-events:none;display:none;background-color:rgb(var(--md-scheme-scrim));opacity:0;transition:all var(--md-motion-standard-default-spatial-duration) var(--md-motion-standard-default-spatial-easing)}:host .md3-nav-container{flex:1 1 auto;display:flex;flex-direction:column;align-items:start;position:relative;background-color:rgb(var(--md-scheme-surface));color:rgb(var(--md-scheme-on-surface));height:100%;max-width:6em}:host .md3-nav-container .md3-nav-header{display:flex;flex-direction:column;align-items:start;gap:.25em;padding:2.75em 1.25em 1.5em;width:100%;min-width:fit-content}:host .md3-nav-container .md3-nav-header.md3-hidden{display:none}:host .md3-nav-container .md3-nav-header .md3-menu-button{margin:.5em}:host .md3-nav-container .md3-nav-header .md3-menu-button ::ng-deep [md3-menu-expand]{display:inline-block}:host .md3-nav-container .md3-nav-header .md3-menu-button ::ng-deep [md3-menu-collapse]{display:none}:host .md3-nav-container .md3-nav-header ::ng-deep [md3-fab]{box-shadow:var(--md-shadow-0dp)}:host .md3-nav-container .md3-menu-container{flex:1 1 max-content;display:flex;flex-direction:column;align-items:stretch;overflow:hidden;width:100%;transition:opacity var(--md-motion-standard-default-spatial-duration) var(--md-motion-standard-default-spatial-easing)}:host .md3-nav-container .md3-menu-container.md3-start{justify-content:start}:host .md3-nav-container .md3-menu-container.md3-center{justify-content:center}:host .md3-nav-container .md3-menu-container.md3-end{justify-content:end}:host .md3-nav-container .md3-menu-container .md3-menu-list{display:flex;flex-direction:column;align-items:stretch;width:100%;max-height:100%;padding-top:1.25em}:host .md3-nav-container .md3-nav-footer{flex:0 1 fit-content;display:flex;flex-direction:column;align-items:stretch;overflow:hidden;width:100%;transition:opacity var(--md-motion-standard-default-spatial-duration) var(--md-motion-standard-default-spatial-easing)}:host .md3-nav-container .md3-nav-footer:empty{display:none}:host .md3-nav-container ::ng-deep md3-nav-group .md3-nav-label{max-height:3.25em}:host .md3-nav-container ::ng-deep [md3-nav-item]{margin-bottom:.25em}:host .md3-nav-container ::ng-deep [md3-nav-item].md3-hide-on-collapse{margin-bottom:0;transform:scaleY(0);opacity:0;max-height:0em;max-width:0em}:host .md3-nav-container ::ng-deep [md3-nav-item].md3-show-on-collapse{margin-bottom:.25em;transform:scaleY(1);opacity:1;max-height:4em;max-width:100%}:host .md3-nav-container ::ng-deep [md3-nav-item] .md3-item-container{width:100%}:host.md3-style-elevated{box-shadow:var(--md-shadow-1dp)}:host.md3-style-divider .md3-nav-container:after{content:\"\";position:absolute;height:100%;width:.0625em;top:0;bottom:0;inset-inline-end:0;background-color:rgb(var(--md-scheme-outline-variant));pointer-events:none;opacity:1;transition:opacity var(--md-motion-standard-default-spatial-duration) var(--md-motion-standard-default-spatial-easing)}:host.md3-collapsed-narrow{width:5em}:host.md3-collapsed-narrow .md3-nav-container{max-width:5em}:host.md3-collapsed-narrow .md3-nav-container .md3-nav-header{padding-inline:.75em}:host.md3-collapsed-hidden{width:0}:host.md3-collapsed-hidden .md3-nav-container{max-width:0em}:host.md3-collapsed-hidden .md3-nav-container .md3-nav-header ::ng-deep [md3-fab]{opacity:0}:host.md3-collapsed-hidden .md3-nav-container .md3-menu-container,:host.md3-collapsed-hidden .md3-nav-container .md3-nav-footer{opacity:0}:host.md3-collapsed-hidden .md3-nav-container:after{opacity:0}:host.md3-expanded-modal .md3-nav-scrim{display:block}:host.md3-expanded-modal .md3-nav-container{position:fixed;z-index:400;inset-inline-start:0;top:0;bottom:0}:host:not(.md3-expanded) ::ng-deep md3-nav-group.md3-hide-on-collapse{transform:scaleY(0);opacity:0;max-height:0em;max-width:0em}:host:not(.md3-expanded) ::ng-deep md3-nav-group .md3-nav-label{display:none}:host.md3-expanded ::ng-deep md3-nav-group.md3-show-on-collapse{transform:scaleY(0);opacity:0;max-height:0em;max-width:0em}:host.md3-expanded .md3-nav-container{min-width:13.75em;max-width:22.5em;width:fit-content}:host.md3-expanded .md3-nav-container .md3-nav-header{padding-inline:1.25em}:host.md3-expanded .md3-nav-container .md3-nav-header .md3-menu-button ::ng-deep [md3-menu-expand]{display:none}:host.md3-expanded .md3-nav-container .md3-nav-header .md3-menu-button ::ng-deep [md3-menu-collapse]{display:inline-block}:host.md3-expanded .md3-nav-container .md3-nav-header ::ng-deep [md3-fab]{opacity:1}:host.md3-expanded .md3-nav-container .md3-menu-container{opacity:1}:host.md3-expanded .md3-nav-container .md3-menu-container .md3-menu-list{padding-bottom:2.5em;overflow-y:auto}:host.md3-expanded .md3-nav-container .md3-nav-footer{opacity:1}:host.md3-expanded .md3-nav-container ::ng-deep [md3-nav-item]{padding-inline:1.25em;margin-bottom:.5em}:host.md3-expanded .md3-nav-container ::ng-deep [md3-nav-item].md3-hide-on-collapse{margin-bottom:.5em;transform:scaleY(1);opacity:1;max-height:5em;max-width:100%}:host.md3-expanded .md3-nav-container ::ng-deep [md3-nav-item].md3-show-on-collapse{margin-bottom:0;transform:scaleY(0);opacity:0;max-height:0em;max-width:0em}:host.md3-expanded .md3-nav-container ::ng-deep [md3-nav-item] .md3-item-container{padding:0 1em;flex-direction:row;align-items:center;justify-content:start;width:fit-content;height:3.5em}:host.md3-expanded .md3-nav-container ::ng-deep [md3-nav-item] .md3-item-container:before,:host.md3-expanded .md3-nav-container ::ng-deep [md3-nav-item] .md3-item-container:after{inset:0;height:auto;width:auto;border-radius:var(--md-border-radius-xlarge)}:host.md3-expanded .md3-nav-container ::ng-deep [md3-nav-item] .md3-item-container .md3-icon-container{padding:0}:host.md3-expanded .md3-nav-container ::ng-deep [md3-nav-item] .md3-item-container .md3-label{font-size:.875em;line-height:1.428571em;letter-spacing:.007143em;max-height:2.857143em;padding-inline:0}:host.md3-expanded .md3-nav-container ::ng-deep [md3-nav-item] .md3-item-container .md3-badge-container{position:relative;inset:auto}:host.md3-expanded .md3-nav-container ::ng-deep [md3-nav-item] .md3-item-container .md3-badge-container.md3-small{position:absolute;height:1.875em;width:1.625em}:host.md3-expanded .md3-nav-container .md3-full-width-indicator ::ng-deep [md3-nav-item] .md3-item-container{width:100%}:host.md3-expanded.md3-expanded-standard{width:auto}:host.md3-expanded.md3-expanded-modal .md3-nav-scrim{pointer-events:all;opacity:.32}:host.md3-expanded.md3-expanded-modal .md3-nav-container{background-color:rgb(var(--md-scheme-surface-container));border-start-end-radius:var(--md-border-radius-large);border-end-end-radius:var(--md-border-radius-large);box-shadow:var(--md-shadow-3dp);width:fit-content;max-width:22.5em}:host.md3-expanded.md3-expanded-modal .md3-nav-container:after{opacity:0}\n"], dependencies: [{ 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: IconElement, selector: "[md3-icon-element]", inputs: ["md3-icon-element"] }, { kind: "component", type: MaterialIcon, selector: "md3-icon", inputs: ["icon-version", "filled", "icon-style", "icon-size", "bi-directional"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
5867
5867
|
}
|
|
5868
5868
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: NavigationRail, decorators: [{
|
|
5869
5869
|
type: Component,
|
|
@@ -5879,7 +5879,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
5879
5879
|
},
|
|
5880
5880
|
], host: {
|
|
5881
5881
|
'[class.md3-expanded]': 'this.expanded()',
|
|
5882
|
-
}, template: "<div class=\"md3-nav-scrim\" (click)=\"collapse()\"></div>\n<div class=\"md3-nav-container\">\n <div class=\"md3-nav-header\" [class.md3-hidden]=\"hideMenuButton() && !hasFab()\">\n @if (!hideMenuButton()) {\n <button md3-icon-button button-type=\"standard\" class=\"md3-menu-button\" (click)=\"toggle()\">\n <ng-content select=\"[md3-icon-element=expand]\"></ng-content>\n @if (!menuExpandIcon()) {\n <md3-icon md3-icon-element md3-menu-expand>menu</md3-icon>\n }\n <ng-content select=\"[md3-icon-element=collapse]\"></ng-content>\n @if (!menuCollapseIcon()) {\n <md3-icon md3-icon-element md3-menu-collapse bi-directional>menu_open</md3-icon>\n }\n </button>\n }\n\n <ng-content select=\"[md3-fab]\"></ng-content>\n </div>\n <div class=\"md3-menu-container\" [class.md3-full-width-indicator]=\"fullWidthIndicator()\" [ngClass]=\"'md3-' + menuAlignment()\">\n <div class=\"md3-menu-list md3-scrollable\">\n <ng-content select=\"[md3-nav-item], md3-nav-group\"></ng-content>\n </div>\n </div>\n</div>", styles: [":host{display:flex;width:6em;transition:all var(--md-motion-standard-default-spatial-duration) var(--md-motion-standard-default-spatial-easing)}:host .md3-nav-scrim{position:fixed;inset:0;z-index:399;pointer-events:none;display:none;background-color:rgb(var(--md-scheme-scrim));opacity:0;transition:all var(--md-motion-standard-default-spatial-duration) var(--md-motion-standard-default-spatial-easing)}:host .md3-nav-container{flex:1 1 auto;display:flex;flex-direction:column;align-items:start;position:relative;background-color:rgb(var(--md-scheme-surface));color:rgb(var(--md-scheme-on-surface));height:100%;max-width:6em}:host .md3-nav-container .md3-nav-header{display:flex;flex-direction:column;align-items:start;gap:.25em;padding:2.75em 1.25em 1.5em;width:100%;min-width:fit-content}:host .md3-nav-container .md3-nav-header.md3-hidden{display:none}:host .md3-nav-container .md3-nav-header .md3-menu-button{margin:.5em}:host .md3-nav-container .md3-nav-header .md3-menu-button ::ng-deep [md3-menu-expand]{display:inline-block}:host .md3-nav-container .md3-nav-header .md3-menu-button ::ng-deep [md3-menu-collapse]{display:none}:host .md3-nav-container .md3-nav-header ::ng-deep [md3-fab]{box-shadow:var(--md-shadow-0dp)}:host .md3-nav-container .md3-menu-container{flex:1 1
|
|
5882
|
+
}, template: "<div class=\"md3-nav-scrim\" (click)=\"collapse()\"></div>\n<div class=\"md3-nav-container\">\n <div class=\"md3-nav-header\" [class.md3-hidden]=\"hideMenuButton() && !hasFab()\">\n @if (!hideMenuButton()) {\n <button md3-icon-button button-type=\"standard\" class=\"md3-menu-button\" (click)=\"toggle()\">\n <ng-content select=\"[md3-icon-element=expand]\"></ng-content>\n @if (!menuExpandIcon()) {\n <md3-icon md3-icon-element md3-menu-expand>menu</md3-icon>\n }\n <ng-content select=\"[md3-icon-element=collapse]\"></ng-content>\n @if (!menuCollapseIcon()) {\n <md3-icon md3-icon-element md3-menu-collapse bi-directional>menu_open</md3-icon>\n }\n </button>\n }\n\n <ng-content select=\"[md3-fab]\"></ng-content>\n </div>\n <div class=\"md3-menu-container\" [class.md3-full-width-indicator]=\"fullWidthIndicator()\" [ngClass]=\"'md3-' + menuAlignment()\">\n <div class=\"md3-menu-list md3-scrollable\">\n <ng-content select=\"[md3-nav-item], md3-nav-group\"></ng-content>\n </div>\n </div>\n <div class=\"md3-nav-footer\" [class.md3-full-width-indicator]=\"fullWidthIndicator()\">\n <ng-content select=\"[md3-nav-footer]\"></ng-content>\n </div>\n</div>", styles: [":host{display:flex;width:6em;transition:all var(--md-motion-standard-default-spatial-duration) var(--md-motion-standard-default-spatial-easing)}:host .md3-nav-scrim{position:fixed;inset:0;z-index:399;pointer-events:none;display:none;background-color:rgb(var(--md-scheme-scrim));opacity:0;transition:all var(--md-motion-standard-default-spatial-duration) var(--md-motion-standard-default-spatial-easing)}:host .md3-nav-container{flex:1 1 auto;display:flex;flex-direction:column;align-items:start;position:relative;background-color:rgb(var(--md-scheme-surface));color:rgb(var(--md-scheme-on-surface));height:100%;max-width:6em}:host .md3-nav-container .md3-nav-header{display:flex;flex-direction:column;align-items:start;gap:.25em;padding:2.75em 1.25em 1.5em;width:100%;min-width:fit-content}:host .md3-nav-container .md3-nav-header.md3-hidden{display:none}:host .md3-nav-container .md3-nav-header .md3-menu-button{margin:.5em}:host .md3-nav-container .md3-nav-header .md3-menu-button ::ng-deep [md3-menu-expand]{display:inline-block}:host .md3-nav-container .md3-nav-header .md3-menu-button ::ng-deep [md3-menu-collapse]{display:none}:host .md3-nav-container .md3-nav-header ::ng-deep [md3-fab]{box-shadow:var(--md-shadow-0dp)}:host .md3-nav-container .md3-menu-container{flex:1 1 max-content;display:flex;flex-direction:column;align-items:stretch;overflow:hidden;width:100%;transition:opacity var(--md-motion-standard-default-spatial-duration) var(--md-motion-standard-default-spatial-easing)}:host .md3-nav-container .md3-menu-container.md3-start{justify-content:start}:host .md3-nav-container .md3-menu-container.md3-center{justify-content:center}:host .md3-nav-container .md3-menu-container.md3-end{justify-content:end}:host .md3-nav-container .md3-menu-container .md3-menu-list{display:flex;flex-direction:column;align-items:stretch;width:100%;max-height:100%;padding-top:1.25em}:host .md3-nav-container .md3-nav-footer{flex:0 1 fit-content;display:flex;flex-direction:column;align-items:stretch;overflow:hidden;width:100%;transition:opacity var(--md-motion-standard-default-spatial-duration) var(--md-motion-standard-default-spatial-easing)}:host .md3-nav-container .md3-nav-footer:empty{display:none}:host .md3-nav-container ::ng-deep md3-nav-group .md3-nav-label{max-height:3.25em}:host .md3-nav-container ::ng-deep [md3-nav-item]{margin-bottom:.25em}:host .md3-nav-container ::ng-deep [md3-nav-item].md3-hide-on-collapse{margin-bottom:0;transform:scaleY(0);opacity:0;max-height:0em;max-width:0em}:host .md3-nav-container ::ng-deep [md3-nav-item].md3-show-on-collapse{margin-bottom:.25em;transform:scaleY(1);opacity:1;max-height:4em;max-width:100%}:host .md3-nav-container ::ng-deep [md3-nav-item] .md3-item-container{width:100%}:host.md3-style-elevated{box-shadow:var(--md-shadow-1dp)}:host.md3-style-divider .md3-nav-container:after{content:\"\";position:absolute;height:100%;width:.0625em;top:0;bottom:0;inset-inline-end:0;background-color:rgb(var(--md-scheme-outline-variant));pointer-events:none;opacity:1;transition:opacity var(--md-motion-standard-default-spatial-duration) var(--md-motion-standard-default-spatial-easing)}:host.md3-collapsed-narrow{width:5em}:host.md3-collapsed-narrow .md3-nav-container{max-width:5em}:host.md3-collapsed-narrow .md3-nav-container .md3-nav-header{padding-inline:.75em}:host.md3-collapsed-hidden{width:0}:host.md3-collapsed-hidden .md3-nav-container{max-width:0em}:host.md3-collapsed-hidden .md3-nav-container .md3-nav-header ::ng-deep [md3-fab]{opacity:0}:host.md3-collapsed-hidden .md3-nav-container .md3-menu-container,:host.md3-collapsed-hidden .md3-nav-container .md3-nav-footer{opacity:0}:host.md3-collapsed-hidden .md3-nav-container:after{opacity:0}:host.md3-expanded-modal .md3-nav-scrim{display:block}:host.md3-expanded-modal .md3-nav-container{position:fixed;z-index:400;inset-inline-start:0;top:0;bottom:0}:host:not(.md3-expanded) ::ng-deep md3-nav-group.md3-hide-on-collapse{transform:scaleY(0);opacity:0;max-height:0em;max-width:0em}:host:not(.md3-expanded) ::ng-deep md3-nav-group .md3-nav-label{display:none}:host.md3-expanded ::ng-deep md3-nav-group.md3-show-on-collapse{transform:scaleY(0);opacity:0;max-height:0em;max-width:0em}:host.md3-expanded .md3-nav-container{min-width:13.75em;max-width:22.5em;width:fit-content}:host.md3-expanded .md3-nav-container .md3-nav-header{padding-inline:1.25em}:host.md3-expanded .md3-nav-container .md3-nav-header .md3-menu-button ::ng-deep [md3-menu-expand]{display:none}:host.md3-expanded .md3-nav-container .md3-nav-header .md3-menu-button ::ng-deep [md3-menu-collapse]{display:inline-block}:host.md3-expanded .md3-nav-container .md3-nav-header ::ng-deep [md3-fab]{opacity:1}:host.md3-expanded .md3-nav-container .md3-menu-container{opacity:1}:host.md3-expanded .md3-nav-container .md3-menu-container .md3-menu-list{padding-bottom:2.5em;overflow-y:auto}:host.md3-expanded .md3-nav-container .md3-nav-footer{opacity:1}:host.md3-expanded .md3-nav-container ::ng-deep [md3-nav-item]{padding-inline:1.25em;margin-bottom:.5em}:host.md3-expanded .md3-nav-container ::ng-deep [md3-nav-item].md3-hide-on-collapse{margin-bottom:.5em;transform:scaleY(1);opacity:1;max-height:5em;max-width:100%}:host.md3-expanded .md3-nav-container ::ng-deep [md3-nav-item].md3-show-on-collapse{margin-bottom:0;transform:scaleY(0);opacity:0;max-height:0em;max-width:0em}:host.md3-expanded .md3-nav-container ::ng-deep [md3-nav-item] .md3-item-container{padding:0 1em;flex-direction:row;align-items:center;justify-content:start;width:fit-content;height:3.5em}:host.md3-expanded .md3-nav-container ::ng-deep [md3-nav-item] .md3-item-container:before,:host.md3-expanded .md3-nav-container ::ng-deep [md3-nav-item] .md3-item-container:after{inset:0;height:auto;width:auto;border-radius:var(--md-border-radius-xlarge)}:host.md3-expanded .md3-nav-container ::ng-deep [md3-nav-item] .md3-item-container .md3-icon-container{padding:0}:host.md3-expanded .md3-nav-container ::ng-deep [md3-nav-item] .md3-item-container .md3-label{font-size:.875em;line-height:1.428571em;letter-spacing:.007143em;max-height:2.857143em;padding-inline:0}:host.md3-expanded .md3-nav-container ::ng-deep [md3-nav-item] .md3-item-container .md3-badge-container{position:relative;inset:auto}:host.md3-expanded .md3-nav-container ::ng-deep [md3-nav-item] .md3-item-container .md3-badge-container.md3-small{position:absolute;height:1.875em;width:1.625em}:host.md3-expanded .md3-nav-container .md3-full-width-indicator ::ng-deep [md3-nav-item] .md3-item-container{width:100%}:host.md3-expanded.md3-expanded-standard{width:auto}:host.md3-expanded.md3-expanded-modal .md3-nav-scrim{pointer-events:all;opacity:.32}:host.md3-expanded.md3-expanded-modal .md3-nav-container{background-color:rgb(var(--md-scheme-surface-container));border-start-end-radius:var(--md-border-radius-large);border-end-end-radius:var(--md-border-radius-large);box-shadow:var(--md-shadow-3dp);width:fit-content;max-width:22.5em}:host.md3-expanded.md3-expanded-modal .md3-nav-container:after{opacity:0}\n"] }]
|
|
5883
5883
|
}], ctorParameters: () => [], propDecorators: { expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], hideMenuButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hide-menu-button", required: false }] }], fullWidthIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "full-width-indicator", required: false }] }], menuAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu-alignment", required: false }] }], containerStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "container-style", required: false }] }], collapsedMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed-layout", required: false }] }], expandedMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded-layout", required: false }] }], menuIcons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IconElement), { isSignal: true }] }], floatingActionButton: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FloatingActionButton), { isSignal: true }] }] } });
|
|
5884
5884
|
|
|
5885
5885
|
class NavigationBar {
|