@almoamendev/ngx-md3 0.8.7 → 0.8.9
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.
|
@@ -4481,7 +4481,9 @@ class Slider {
|
|
|
4481
4481
|
el;
|
|
4482
4482
|
control = input(undefined, { ...(ngDevMode ? { debugName: "control" } : /* istanbul ignore next */ {}), alias: 'control' });
|
|
4483
4483
|
sliderSize = input('x-small', { ...(ngDevMode ? { debugName: "sliderSize" } : /* istanbul ignore next */ {}), alias: 'slider-size' });
|
|
4484
|
-
showValueLabel = input(false, { ...(ngDevMode ? { debugName: "showValueLabel" } : /* istanbul ignore next */ {}), alias: 'show-value-label'
|
|
4484
|
+
showValueLabel = input(false, { ...(ngDevMode ? { debugName: "showValueLabel" } : /* istanbul ignore next */ {}), alias: 'show-value-label',
|
|
4485
|
+
transform: booleanAttribute });
|
|
4486
|
+
valueFormatter = input((v) => String(v), { ...(ngDevMode ? { debugName: "valueFormatter" } : /* istanbul ignore next */ {}), alias: 'value-formatter' });
|
|
4485
4487
|
input = contentChild(InputElement, /* @ts-ignore */
|
|
4486
4488
|
...(ngDevMode ? [{ debugName: "input" }] : /* istanbul ignore next */ []));
|
|
4487
4489
|
controlName = contentChild(FormControlName, /* @ts-ignore */
|
|
@@ -4496,6 +4498,8 @@ class Slider {
|
|
|
4496
4498
|
...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
|
|
4497
4499
|
formControl = computed(() => this.control() ?? this.controlName()?.control, /* @ts-ignore */
|
|
4498
4500
|
...(ngDevMode ? [{ debugName: "formControl" }] : /* istanbul ignore next */ []));
|
|
4501
|
+
formattedValue = computed(() => this.valueFormatter()(this.value()), /* @ts-ignore */
|
|
4502
|
+
...(ngDevMode ? [{ debugName: "formattedValue" }] : /* istanbul ignore next */ []));
|
|
4499
4503
|
constructor(el) {
|
|
4500
4504
|
this.el = el;
|
|
4501
4505
|
effect((onCleanup) => {
|
|
@@ -4508,6 +4512,13 @@ class Slider {
|
|
|
4508
4512
|
effect(() => {
|
|
4509
4513
|
this.element.style.setProperty('--slider-progress', `${this.progress()}%`);
|
|
4510
4514
|
});
|
|
4515
|
+
effect(() => {
|
|
4516
|
+
const input = this.input()?.nativeElement;
|
|
4517
|
+
if (!input) {
|
|
4518
|
+
return;
|
|
4519
|
+
}
|
|
4520
|
+
input.setAttribute('aria-valuetext', this.formattedValue());
|
|
4521
|
+
});
|
|
4511
4522
|
effect((onCleanup) => {
|
|
4512
4523
|
const input = this.input()?.nativeElement;
|
|
4513
4524
|
if (!input) {
|
|
@@ -4603,14 +4614,14 @@ class Slider {
|
|
|
4603
4614
|
}
|
|
4604
4615
|
}
|
|
4605
4616
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Slider, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4606
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Slider, isStandalone: true, selector: "md3-slider", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, sliderSize: { classPropertyName: "sliderSize", publicName: "slider-size", isSignal: true, isRequired: false, transformFunction: null }, showValueLabel: { classPropertyName: "showValueLabel", publicName: "show-value-label", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "input", first: true, predicate: InputElement, descendants: true, isSignal: true }, { propertyName: "controlName", first: true, predicate: FormControlName, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[md3-input-element]\"></ng-content>\n<div class=\"md3-slider-container\">\n <div class=\"md3-slider-track\">\n <div class=\"md3-active-track\">\n <div class=\"md3-track-bar\">\n <div class=\"md3-icon-container\">\n <ng-content select=\"[md3-icon-element]\"></ng-content>\n </div>\n </div>\n </div>\n <div class=\"md3-inactive-track\">\n <div class=\"md3-track-bar\"></div>\n </div>\n </div>\n <div class=\"md3-slider-handle\">\n @if (showValueLabel()) {\n <div class=\"md3-value-label\">\n <md3-type-body size=\"medium\">{{
|
|
4617
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Slider, isStandalone: true, selector: "md3-slider", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, sliderSize: { classPropertyName: "sliderSize", publicName: "slider-size", isSignal: true, isRequired: false, transformFunction: null }, showValueLabel: { classPropertyName: "showValueLabel", publicName: "show-value-label", isSignal: true, isRequired: false, transformFunction: null }, valueFormatter: { classPropertyName: "valueFormatter", publicName: "value-formatter", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "input", first: true, predicate: InputElement, descendants: true, isSignal: true }, { propertyName: "controlName", first: true, predicate: FormControlName, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[md3-input-element]\"></ng-content>\n<div class=\"md3-slider-container\">\n <div class=\"md3-slider-track\">\n <div class=\"md3-active-track\">\n <div class=\"md3-track-bar\">\n <div class=\"md3-icon-container\">\n <ng-content select=\"[md3-icon-element]\"></ng-content>\n </div>\n </div>\n </div>\n <div class=\"md3-inactive-track\">\n <div class=\"md3-track-bar\"></div>\n </div>\n </div>\n <div class=\"md3-slider-handle\">\n @if (showValueLabel()) {\n <div class=\"md3-value-label\">\n <md3-type-body size=\"medium\">{{ formattedValue() }}</md3-type-body>\n </div>\n }\n </div>\n</div>\n", styles: [":host{--slider-active-track-color: rgb(var(--md-scheme-primary));--slider-active-track-on-color: rgb(var(--md-scheme-on-primary));--slider-track-color: rgb(var(--md-scheme-secondary-container));--slider-handle-color: rgb(var(--md-scheme-primary));--outline-color: rgb(var(--md-scheme-secondary));--slider-size: 1em;--border-radius: var(--md-border-radius-small);--slider-progress: 0%;position:relative;display:block;width:100%;font-size:1rem;min-width:12.5em;min-height:2.75em;height:calc(var(--slider-size) + 1.125em);border-radius:var(--border-radius)}:host.md3-x-small{--slider-size: 1em;--border-radius: var(--md-border-radius-small)}:host.md3-small{--slider-size: 1.5em;--border-radius: var(--md-border-radius-small)}:host.md3-x-small .md3-slider-container .md3-slider-track .md3-active-track .md3-track-bar .md3-icon-container,:host.md3-small .md3-slider-container .md3-slider-track .md3-active-track .md3-track-bar .md3-icon-container{display:none}:host.md3-medium{--slider-size: 2.5em;--border-radius: var(--md-border-radius-medium)}:host.md3-large{--slider-size: 3.5em;--border-radius: var(--md-border-radius-large)}:host.md3-medium .md3-slider-container .md3-slider-track .md3-active-track .md3-track-bar .md3-icon-container,:host.md3-large .md3-slider-container .md3-slider-track .md3-active-track .md3-track-bar .md3-icon-container{--icon-size: 1.5em;margin-top:-.75em}:host.md3-x-large{--slider-size: 6em;--border-radius: var(--md-border-radius-xlarge)}:host.md3-x-large .md3-slider-container .md3-slider-track .md3-active-track .md3-track-bar .md3-icon-container{--icon-size: 2em;margin-top:-1em}:host .md3-slider-container{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center;height:100%}:host .md3-slider-container .md3-slider-track{display:flex;flex:1 1 100%;position:relative;align-items:center;height:var(--slider-size);border-radius:var(--border-radius);overflow:hidden}:host .md3-slider-container .md3-slider-track .md3-active-track{position:relative;width:var(--slider-progress);overflow:hidden;height:100%;transition:width var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}:host .md3-slider-container .md3-slider-track .md3-active-track .md3-track-bar{position:relative;overflow:hidden;height:100%;border-radius:.125em;background-color:var(--slider-active-track-color);margin-inline-end:.5em}:host .md3-slider-container .md3-slider-track .md3-active-track .md3-track-bar .md3-icon-container{--icon-size: 1.5em;position:absolute;display:flex;align-items:center;justify-content:center;inset-inline-start:.25em;top:50%;font-size:1em!important;margin-top:-.75em;height:var(--icon-size);width:var(--icon-size);color:var(--slider-active-track-on-color)}:host .md3-slider-container .md3-slider-track .md3-active-track .md3-track-bar .md3-icon-container ::ng-deep [md3-icon-element]{font-size:var(--icon-size)!important}:host .md3-slider-container .md3-slider-track .md3-inactive-track{position:relative;flex:1 1 0;overflow:hidden;height:100%;transition:width var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}:host .md3-slider-container .md3-slider-track .md3-inactive-track .md3-track-bar{position:relative;overflow:hidden;height:100%;border-radius:.125em;background-color:var(--slider-track-color);margin-inline-start:.5em}:host .md3-slider-container .md3-slider-track .md3-inactive-track .md3-track-bar:after{content:\"\";position:absolute;inset-inline-end:.25em;top:50%;margin-top:-.125em;display:block;height:.25em;width:.25em;border-radius:var(--md-border-radius-xsmall);background-color:var(--slider-active-track-color)}:host .md3-slider-container .md3-slider-handle{position:absolute;top:0;bottom:0;inset-inline-start:calc(var(--slider-progress) - .5em);width:1em;height:100%;transition:all var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}:host .md3-slider-container .md3-slider-handle:before{content:\"\";display:block;height:100%;width:.25em;border-radius:.125em;margin:auto;background-color:var(--slider-handle-color);transition:width var(--md-motion-expressive-fast-spatial-duration) var(--md-motion-expressive-fast-spatial-easing)}:host .md3-slider-container .md3-slider-handle:after{content:\"\";position:absolute;display:block;inset:-.5625em -.1875em;border-radius:var(--md-border-radius-large);border:.1875em solid var(--outline-color);pointer-events:none;opacity:0;transition:opacity var(--md-motion-expressive-fast-spatial-duration) var(--md-motion-expressive-fast-spatial-easing)}:host .md3-slider-container .md3-slider-handle .md3-value-label{position:absolute;inset-inline-start:50%;bottom:calc(100% + .25em);min-width:3em;height:2.75em;display:inline-flex;align-items:center;justify-content:center;padding:0 1em;border-radius:1.375em;color:rgb(var(--md-scheme-inverse-on-surface));background-color:rgb(var(--md-scheme-inverse-surface));transform:translate(-50%) scale(0);opacity:0;transition:transform var(--md-motion-expressive-fast-spatial-duration) var(--md-motion-expressive-fast-spatial-easing),opacity var(--md-motion-expressive-fast-spatial-duration) var(--md-motion-expressive-fast-spatial-easing)}:host .md3-slider-container .md3-slider-handle .md3-value-label .md3-text-body{font-size:.875em;white-space:nowrap}:host ::ng-deep .md3-input-element{display:block;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer}:host ::ng-deep .md3-input-element:focus~.md3-slider-container .md3-slider-handle .md3-value-label,:host ::ng-deep .md3-input-element:active~.md3-slider-container .md3-slider-handle .md3-value-label{opacity:1!important;transform:translate(-50%) scale(1)!important}:host ::ng-deep .md3-input-element:focus~.md3-slider-container .md3-slider-handle:before{width:.125em}:host ::ng-deep .md3-input-element:focus:not(:hover):not(:active)~.md3-slider-container .md3-slider-handle:after{opacity:1}:host ::ng-deep .md3-input-element:disabled{cursor:default}:host ::ng-deep .md3-input-element:disabled~.md3-slider-container{--slider-active-track-color: rgb(var(--md-scheme-on-surface));--slider-active-track-on-color: rgb(var(--md-scheme-inverse-on-surface));--slider-track-color: rgb(var(--md-scheme-on-surface));--slider-handle-color: rgb(var(--md-scheme-on-surface))}:host ::ng-deep .md3-input-element:disabled~.md3-slider-container .md3-slider-track .md3-active-track{opacity:.38}:host ::ng-deep .md3-input-element:disabled~.md3-slider-container .md3-slider-track .md3-inactive-track{opacity:.12}:host ::ng-deep .md3-input-element:disabled~.md3-slider-container .md3-slider-handle{opacity:.38}:host ::ng-deep .md3-input-element:disabled~.md3-slider-container .md3-slider-handle .md3-value-label{display:none!important}\n"], dependencies: [{ kind: "directive", type: TypeBody, selector: "md3-type-body, [md3-type-body]", inputs: ["size", "color", "emphasized"] }] });
|
|
4607
4618
|
}
|
|
4608
4619
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Slider, decorators: [{
|
|
4609
4620
|
type: Component,
|
|
4610
4621
|
args: [{ selector: 'md3-slider', imports: [
|
|
4611
4622
|
TypeBody,
|
|
4612
|
-
], template: "<ng-content select=\"[md3-input-element]\"></ng-content>\n<div class=\"md3-slider-container\">\n <div class=\"md3-slider-track\">\n <div class=\"md3-active-track\">\n <div class=\"md3-track-bar\">\n <div class=\"md3-icon-container\">\n <ng-content select=\"[md3-icon-element]\"></ng-content>\n </div>\n </div>\n </div>\n <div class=\"md3-inactive-track\">\n <div class=\"md3-track-bar\"></div>\n </div>\n </div>\n <div class=\"md3-slider-handle\">\n @if (showValueLabel()) {\n <div class=\"md3-value-label\">\n <md3-type-body size=\"medium\">{{
|
|
4613
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], sliderSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "slider-size", required: false }] }], showValueLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "show-value-label", required: false }] }], input: [{ type: i0.ContentChild, args: [i0.forwardRef(() => InputElement), { isSignal: true }] }], controlName: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FormControlName), { isSignal: true }] }] } });
|
|
4623
|
+
], template: "<ng-content select=\"[md3-input-element]\"></ng-content>\n<div class=\"md3-slider-container\">\n <div class=\"md3-slider-track\">\n <div class=\"md3-active-track\">\n <div class=\"md3-track-bar\">\n <div class=\"md3-icon-container\">\n <ng-content select=\"[md3-icon-element]\"></ng-content>\n </div>\n </div>\n </div>\n <div class=\"md3-inactive-track\">\n <div class=\"md3-track-bar\"></div>\n </div>\n </div>\n <div class=\"md3-slider-handle\">\n @if (showValueLabel()) {\n <div class=\"md3-value-label\">\n <md3-type-body size=\"medium\">{{ formattedValue() }}</md3-type-body>\n </div>\n }\n </div>\n</div>\n", styles: [":host{--slider-active-track-color: rgb(var(--md-scheme-primary));--slider-active-track-on-color: rgb(var(--md-scheme-on-primary));--slider-track-color: rgb(var(--md-scheme-secondary-container));--slider-handle-color: rgb(var(--md-scheme-primary));--outline-color: rgb(var(--md-scheme-secondary));--slider-size: 1em;--border-radius: var(--md-border-radius-small);--slider-progress: 0%;position:relative;display:block;width:100%;font-size:1rem;min-width:12.5em;min-height:2.75em;height:calc(var(--slider-size) + 1.125em);border-radius:var(--border-radius)}:host.md3-x-small{--slider-size: 1em;--border-radius: var(--md-border-radius-small)}:host.md3-small{--slider-size: 1.5em;--border-radius: var(--md-border-radius-small)}:host.md3-x-small .md3-slider-container .md3-slider-track .md3-active-track .md3-track-bar .md3-icon-container,:host.md3-small .md3-slider-container .md3-slider-track .md3-active-track .md3-track-bar .md3-icon-container{display:none}:host.md3-medium{--slider-size: 2.5em;--border-radius: var(--md-border-radius-medium)}:host.md3-large{--slider-size: 3.5em;--border-radius: var(--md-border-radius-large)}:host.md3-medium .md3-slider-container .md3-slider-track .md3-active-track .md3-track-bar .md3-icon-container,:host.md3-large .md3-slider-container .md3-slider-track .md3-active-track .md3-track-bar .md3-icon-container{--icon-size: 1.5em;margin-top:-.75em}:host.md3-x-large{--slider-size: 6em;--border-radius: var(--md-border-radius-xlarge)}:host.md3-x-large .md3-slider-container .md3-slider-track .md3-active-track .md3-track-bar .md3-icon-container{--icon-size: 2em;margin-top:-1em}:host .md3-slider-container{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center;height:100%}:host .md3-slider-container .md3-slider-track{display:flex;flex:1 1 100%;position:relative;align-items:center;height:var(--slider-size);border-radius:var(--border-radius);overflow:hidden}:host .md3-slider-container .md3-slider-track .md3-active-track{position:relative;width:var(--slider-progress);overflow:hidden;height:100%;transition:width var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}:host .md3-slider-container .md3-slider-track .md3-active-track .md3-track-bar{position:relative;overflow:hidden;height:100%;border-radius:.125em;background-color:var(--slider-active-track-color);margin-inline-end:.5em}:host .md3-slider-container .md3-slider-track .md3-active-track .md3-track-bar .md3-icon-container{--icon-size: 1.5em;position:absolute;display:flex;align-items:center;justify-content:center;inset-inline-start:.25em;top:50%;font-size:1em!important;margin-top:-.75em;height:var(--icon-size);width:var(--icon-size);color:var(--slider-active-track-on-color)}:host .md3-slider-container .md3-slider-track .md3-active-track .md3-track-bar .md3-icon-container ::ng-deep [md3-icon-element]{font-size:var(--icon-size)!important}:host .md3-slider-container .md3-slider-track .md3-inactive-track{position:relative;flex:1 1 0;overflow:hidden;height:100%;transition:width var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}:host .md3-slider-container .md3-slider-track .md3-inactive-track .md3-track-bar{position:relative;overflow:hidden;height:100%;border-radius:.125em;background-color:var(--slider-track-color);margin-inline-start:.5em}:host .md3-slider-container .md3-slider-track .md3-inactive-track .md3-track-bar:after{content:\"\";position:absolute;inset-inline-end:.25em;top:50%;margin-top:-.125em;display:block;height:.25em;width:.25em;border-radius:var(--md-border-radius-xsmall);background-color:var(--slider-active-track-color)}:host .md3-slider-container .md3-slider-handle{position:absolute;top:0;bottom:0;inset-inline-start:calc(var(--slider-progress) - .5em);width:1em;height:100%;transition:all var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}:host .md3-slider-container .md3-slider-handle:before{content:\"\";display:block;height:100%;width:.25em;border-radius:.125em;margin:auto;background-color:var(--slider-handle-color);transition:width var(--md-motion-expressive-fast-spatial-duration) var(--md-motion-expressive-fast-spatial-easing)}:host .md3-slider-container .md3-slider-handle:after{content:\"\";position:absolute;display:block;inset:-.5625em -.1875em;border-radius:var(--md-border-radius-large);border:.1875em solid var(--outline-color);pointer-events:none;opacity:0;transition:opacity var(--md-motion-expressive-fast-spatial-duration) var(--md-motion-expressive-fast-spatial-easing)}:host .md3-slider-container .md3-slider-handle .md3-value-label{position:absolute;inset-inline-start:50%;bottom:calc(100% + .25em);min-width:3em;height:2.75em;display:inline-flex;align-items:center;justify-content:center;padding:0 1em;border-radius:1.375em;color:rgb(var(--md-scheme-inverse-on-surface));background-color:rgb(var(--md-scheme-inverse-surface));transform:translate(-50%) scale(0);opacity:0;transition:transform var(--md-motion-expressive-fast-spatial-duration) var(--md-motion-expressive-fast-spatial-easing),opacity var(--md-motion-expressive-fast-spatial-duration) var(--md-motion-expressive-fast-spatial-easing)}:host .md3-slider-container .md3-slider-handle .md3-value-label .md3-text-body{font-size:.875em;white-space:nowrap}:host ::ng-deep .md3-input-element{display:block;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer}:host ::ng-deep .md3-input-element:focus~.md3-slider-container .md3-slider-handle .md3-value-label,:host ::ng-deep .md3-input-element:active~.md3-slider-container .md3-slider-handle .md3-value-label{opacity:1!important;transform:translate(-50%) scale(1)!important}:host ::ng-deep .md3-input-element:focus~.md3-slider-container .md3-slider-handle:before{width:.125em}:host ::ng-deep .md3-input-element:focus:not(:hover):not(:active)~.md3-slider-container .md3-slider-handle:after{opacity:1}:host ::ng-deep .md3-input-element:disabled{cursor:default}:host ::ng-deep .md3-input-element:disabled~.md3-slider-container{--slider-active-track-color: rgb(var(--md-scheme-on-surface));--slider-active-track-on-color: rgb(var(--md-scheme-inverse-on-surface));--slider-track-color: rgb(var(--md-scheme-on-surface));--slider-handle-color: rgb(var(--md-scheme-on-surface))}:host ::ng-deep .md3-input-element:disabled~.md3-slider-container .md3-slider-track .md3-active-track{opacity:.38}:host ::ng-deep .md3-input-element:disabled~.md3-slider-container .md3-slider-track .md3-inactive-track{opacity:.12}:host ::ng-deep .md3-input-element:disabled~.md3-slider-container .md3-slider-handle{opacity:.38}:host ::ng-deep .md3-input-element:disabled~.md3-slider-container .md3-slider-handle .md3-value-label{display:none!important}\n"] }]
|
|
4624
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], sliderSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "slider-size", required: false }] }], showValueLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "show-value-label", required: false }] }], valueFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "value-formatter", required: false }] }], input: [{ type: i0.ContentChild, args: [i0.forwardRef(() => InputElement), { isSignal: true }] }], controlName: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FormControlName), { isSignal: true }] }] } });
|
|
4614
4625
|
|
|
4615
4626
|
class List {
|
|
4616
4627
|
el;
|
|
@@ -5863,7 +5874,7 @@ class NavigationRail {
|
|
|
5863
5874
|
provide: MD3_BUTTON_CONTEXT,
|
|
5864
5875
|
useExisting: NavigationRail,
|
|
5865
5876
|
},
|
|
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
|
|
5877
|
+
], 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
5878
|
}
|
|
5868
5879
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: NavigationRail, decorators: [{
|
|
5869
5880
|
type: Component,
|
|
@@ -5879,7 +5890,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
5879
5890
|
},
|
|
5880
5891
|
], host: {
|
|
5881
5892
|
'[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
|
|
5893
|
+
}, 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
5894
|
}], 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
5895
|
|
|
5885
5896
|
class NavigationBar {
|