@almoamendev/ngx-md3 0.8.8 → 0.8.10
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;
|
|
@@ -6108,6 +6119,13 @@ class MenuItem {
|
|
|
6108
6119
|
supportingText = input(null, { ...(ngDevMode ? { debugName: "supportingText" } : /* istanbul ignore next */ {}), alias: 'supporting-text' });
|
|
6109
6120
|
trailingText = input(null, { ...(ngDevMode ? { debugName: "trailingText" } : /* istanbul ignore next */ {}), alias: 'trailing-text' });
|
|
6110
6121
|
selected = model(null, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), alias: 'selected' });
|
|
6122
|
+
/**
|
|
6123
|
+
* When true (default), a click toggles the selected state of the item.
|
|
6124
|
+
* Set it to false when a parent owns the selection, for example md3-select-field.
|
|
6125
|
+
* The item then shows the bound selected value only.
|
|
6126
|
+
*/
|
|
6127
|
+
toggleOnClick = input(true, { ...(ngDevMode ? { debugName: "toggleOnClick" } : /* istanbul ignore next */ {}), alias: 'toggle-on-click',
|
|
6128
|
+
transform: booleanAttribute });
|
|
6111
6129
|
iconElements = contentChildren(IconElement, /* @ts-ignore */
|
|
6112
6130
|
...(ngDevMode ? [{ debugName: "iconElements" }] : /* istanbul ignore next */ []));
|
|
6113
6131
|
get leading() {
|
|
@@ -6121,7 +6139,7 @@ class MenuItem {
|
|
|
6121
6139
|
}
|
|
6122
6140
|
onHostClick() {
|
|
6123
6141
|
const selected = this.selected();
|
|
6124
|
-
if (selected === null) {
|
|
6142
|
+
if (selected === null || !this.toggleOnClick()) {
|
|
6125
6143
|
return;
|
|
6126
6144
|
}
|
|
6127
6145
|
this.selected.set(!selected);
|
|
@@ -6133,7 +6151,7 @@ class MenuItem {
|
|
|
6133
6151
|
return this.el.nativeElement;
|
|
6134
6152
|
}
|
|
6135
6153
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MenuItem, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
6136
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: MenuItem, isStandalone: true, selector: "button[md3-menu-item], a[md3-menu-item]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, supportingText: { classPropertyName: "supportingText", publicName: "supporting-text", isSignal: true, isRequired: false, transformFunction: null }, trailingText: { classPropertyName: "trailingText", publicName: "trailing-text", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, host: { listeners: { "click": "onHostClick()" } }, queries: [{ propertyName: "iconElements", predicate: IconElement, isSignal: true }], ngImport: i0, template: "@if (selected() !== null) {\n <input type=\"checkbox\" md3-input-element [checked]=\"selected()\">\n}\n\n<div class=\"md3-menu-item-container\" md3-state-component>\n <div class=\"md3-menu-item-leading\" [class.has-icon]=\"showLeadingIcon\">\n <ng-content select=\"[md3-icon-element=leading]\"></ng-content>\n @if (!leading) {\n <md3-icon>check</md3-icon>\n }\n </div>\n\n <div class=\"md3-menu-item-content\">\n <md3-type-label size=\"large\">{{ label() }}</md3-type-label>\n @if (supportingText()?.length) {\n <md3-type-body size=\"small\">{{ supportingText() }}</md3-type-body>\n }\n </div>\n\n <div class=\"md3-menu-item-trailing\">\n <ng-content select=\"md3-badge\"></ng-content>\n @if (trailingText()?.length) {\n <md3-type-title size=\"small\">{{ trailingText() }}</md3-type-title>\n }\n <ng-content select=\"[md3-icon-element=trailing]\"></ng-content>\n </div>\n</div>", styles: [":host{--state-color: var(--menu-item-state-color);--border-radius: var(--menu-item-border-radius);--outline-color: var(--menu-item-outline-color);--outline-width: var(--menu-item-outline-width);--outline-offset: var(--menu-item-outline-offset);position:relative;display:block;padding:0;border:0;background:transparent;color:var(--menu-item-label-color);font:inherit;text-align:start;text-decoration:none;cursor:pointer;outline:none;appearance:none;-webkit-user-select:none;user-select:none;z-index:0}:host:focus{z-index:1}:host:focus:not(:hover) .md3-menu-item-container:after{opacity:1}:host:active{z-index:2}:host:active .md3-menu-item-container:after{opacity:0}:host .md3-menu-item-container{display:flex;align-items:center;min-height:3em;padding:0 .75em;border-radius:var(--border-radius);transition:background-color var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing),color var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}:host .md3-menu-item-container .md3-menu-item-leading{display:inline-flex;align-items:center;justify-content:center;font-size:inherit;opacity:0;transform:scale(1.2);width:0;height:1.25em;color:var(--menu-item-supporting-color);transition:all var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}:host .md3-menu-item-container .md3-menu-item-leading ::ng-deep [md3-icon-element]{font-size:1.25em!important;height:1em!important;width:1em!important;line-height:1em!important}:host .md3-menu-item-container .md3-menu-item-leading.has-icon{margin-inline-end:.5em;opacity:1;transform:scale(1);height:1.25em;width:1.25em}:host .md3-menu-item-container .md3-menu-item-trailing{flex:0 1 content;display:inline-flex;gap:.5em;align-items:center;justify-content:center;font-size:inherit;margin-inline-start:.5em;color:var(--menu-item-supporting-color)}:host .md3-menu-item-container .md3-menu-item-trailing:empty{margin:0}:host .md3-menu-item-container .md3-menu-item-trailing ::ng-deep md3-badge{background-color:var(--menu-item-badge-background);color:var(--menu-item-badge-foreground)}:host .md3-menu-item-container .md3-menu-item-trailing .md3-text-title.md3-text-small{margin:0;padding:0;white-space:nowrap;letter-spacing:.007143em}:host .md3-menu-item-container .md3-menu-item-trailing ::ng-deep [md3-icon-element]{font-size:1.25em!important;height:1em!important;width:1em!important;line-height:1em!important}:host .md3-menu-item-container .md3-menu-item-content{flex:1 1 auto}:host .md3-menu-item-container .md3-menu-item-content .md3-text-label.md3-text-large{display:block;margin:0;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.007143em;color:var(--menu-item-label-color)}:host .md3-menu-item-container .md3-menu-item-content .md3-text-body.md3-text-small{display:block;margin:0;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.0333334em;color:var(--menu-item-supporting-color)}:host [md3-input-element]{position:absolute;height:0;width:0;opacity:0;pointer-events:none}:host [md3-input-element]+.md3-menu-item-container .md3-menu-item-leading{opacity:0;transform:scale(1.2);width:0}:host [md3-input-element]:checked+.md3-menu-item-container{--menu-item-label-color: var(--menu-item-selected-foreground);--menu-item-supporting-color: var(--menu-item-selected-foreground);--border-radius: var(--md-border-radius-medium);background-color:var(--menu-item-selected-background)}:host [md3-input-element]:checked+.md3-menu-item-container .md3-menu-item-leading{opacity:1;transform:scale(1);width:1.25em}:host:disabled{cursor:default}:host:disabled .md3-menu-item-container{--menu-item-label-color: var(--menu-item-label-color);--menu-item-supporting-color: var(--menu-item-label-color);--menu-item-selected-background: transparent;--menu-item-selected-foreground: var(--menu-item-label-color);pointer-events:none;opacity:.38}:host:disabled .md3-menu-item-container.md3-state-layer,:host:disabled .md3-menu-item-container:after{display:none}\n"], dependencies: [{ kind: "directive", type: InputElement, selector: "[md3-input-element]" }, { kind: "directive", type: StateComponent, selector: "[md3-state-component]" }, { kind: "component", type: MaterialIcon, selector: "md3-icon", inputs: ["icon-version", "filled", "icon-style", "icon-size", "bi-directional"] }, { kind: "directive", type: TypeLabel, selector: "md3-type-label, [md3-type-label]", inputs: ["size", "color", "emphasized"] }, { kind: "directive", type: TypeBody, selector: "md3-type-body, [md3-type-body]", inputs: ["size", "color", "emphasized"] }, { kind: "directive", type: TypeTitle, selector: "md3-type-title, [md3-type-title]", inputs: ["size", "color", "emphasized"] }] });
|
|
6154
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: MenuItem, isStandalone: true, selector: "button[md3-menu-item], a[md3-menu-item]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, supportingText: { classPropertyName: "supportingText", publicName: "supporting-text", isSignal: true, isRequired: false, transformFunction: null }, trailingText: { classPropertyName: "trailingText", publicName: "trailing-text", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, toggleOnClick: { classPropertyName: "toggleOnClick", publicName: "toggle-on-click", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, host: { listeners: { "click": "onHostClick()" } }, queries: [{ propertyName: "iconElements", predicate: IconElement, isSignal: true }], ngImport: i0, template: "@if (selected() !== null) {\n <input type=\"checkbox\" md3-input-element [checked]=\"selected()\">\n}\n\n<div class=\"md3-menu-item-container\" md3-state-component>\n <div class=\"md3-menu-item-leading\" [class.has-icon]=\"showLeadingIcon\">\n <ng-content select=\"[md3-icon-element=leading]\"></ng-content>\n @if (!leading) {\n <md3-icon>check</md3-icon>\n }\n </div>\n\n <div class=\"md3-menu-item-content\">\n <md3-type-label size=\"large\">{{ label() }}</md3-type-label>\n @if (supportingText()?.length) {\n <md3-type-body size=\"small\">{{ supportingText() }}</md3-type-body>\n }\n </div>\n\n <div class=\"md3-menu-item-trailing\">\n <ng-content select=\"md3-badge\"></ng-content>\n @if (trailingText()?.length) {\n <md3-type-title size=\"small\">{{ trailingText() }}</md3-type-title>\n }\n <ng-content select=\"[md3-icon-element=trailing]\"></ng-content>\n </div>\n</div>", styles: [":host{--state-color: var(--menu-item-state-color);--border-radius: var(--menu-item-border-radius);--outline-color: var(--menu-item-outline-color);--outline-width: var(--menu-item-outline-width);--outline-offset: var(--menu-item-outline-offset);position:relative;display:block;padding:0;border:0;background:transparent;color:var(--menu-item-label-color);font:inherit;text-align:start;text-decoration:none;cursor:pointer;outline:none;appearance:none;-webkit-user-select:none;user-select:none;z-index:0}:host:focus{z-index:1}:host:focus:not(:hover) .md3-menu-item-container:after{opacity:1}:host:active{z-index:2}:host:active .md3-menu-item-container:after{opacity:0}:host .md3-menu-item-container{display:flex;align-items:center;min-height:3em;padding:0 .75em;border-radius:var(--border-radius);transition:background-color var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing),color var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}:host .md3-menu-item-container .md3-menu-item-leading{display:inline-flex;align-items:center;justify-content:center;font-size:inherit;opacity:0;transform:scale(1.2);width:0;height:1.25em;color:var(--menu-item-supporting-color);transition:all var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}:host .md3-menu-item-container .md3-menu-item-leading ::ng-deep [md3-icon-element]{font-size:1.25em!important;height:1em!important;width:1em!important;line-height:1em!important}:host .md3-menu-item-container .md3-menu-item-leading.has-icon{margin-inline-end:.5em;opacity:1;transform:scale(1);height:1.25em;width:1.25em}:host .md3-menu-item-container .md3-menu-item-trailing{flex:0 1 content;display:inline-flex;gap:.5em;align-items:center;justify-content:center;font-size:inherit;margin-inline-start:.5em;color:var(--menu-item-supporting-color)}:host .md3-menu-item-container .md3-menu-item-trailing:empty{margin:0}:host .md3-menu-item-container .md3-menu-item-trailing ::ng-deep md3-badge{background-color:var(--menu-item-badge-background);color:var(--menu-item-badge-foreground)}:host .md3-menu-item-container .md3-menu-item-trailing .md3-text-title.md3-text-small{margin:0;padding:0;white-space:nowrap;letter-spacing:.007143em}:host .md3-menu-item-container .md3-menu-item-trailing ::ng-deep [md3-icon-element]{font-size:1.25em!important;height:1em!important;width:1em!important;line-height:1em!important}:host .md3-menu-item-container .md3-menu-item-content{flex:1 1 auto}:host .md3-menu-item-container .md3-menu-item-content .md3-text-label.md3-text-large{display:block;margin:0;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.007143em;color:var(--menu-item-label-color)}:host .md3-menu-item-container .md3-menu-item-content .md3-text-body.md3-text-small{display:block;margin:0;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.0333334em;color:var(--menu-item-supporting-color)}:host [md3-input-element]{position:absolute;height:0;width:0;opacity:0;pointer-events:none}:host [md3-input-element]+.md3-menu-item-container .md3-menu-item-leading{opacity:0;transform:scale(1.2);width:0}:host [md3-input-element]:checked+.md3-menu-item-container{--menu-item-label-color: var(--menu-item-selected-foreground);--menu-item-supporting-color: var(--menu-item-selected-foreground);--border-radius: var(--md-border-radius-medium);background-color:var(--menu-item-selected-background)}:host [md3-input-element]:checked+.md3-menu-item-container .md3-menu-item-leading{opacity:1;transform:scale(1);width:1.25em}:host:disabled{cursor:default}:host:disabled .md3-menu-item-container{--menu-item-label-color: var(--menu-item-label-color);--menu-item-supporting-color: var(--menu-item-label-color);--menu-item-selected-background: transparent;--menu-item-selected-foreground: var(--menu-item-label-color);pointer-events:none;opacity:.38}:host:disabled .md3-menu-item-container.md3-state-layer,:host:disabled .md3-menu-item-container:after{display:none}\n"], dependencies: [{ kind: "directive", type: InputElement, selector: "[md3-input-element]" }, { kind: "directive", type: StateComponent, selector: "[md3-state-component]" }, { kind: "component", type: MaterialIcon, selector: "md3-icon", inputs: ["icon-version", "filled", "icon-style", "icon-size", "bi-directional"] }, { kind: "directive", type: TypeLabel, selector: "md3-type-label, [md3-type-label]", inputs: ["size", "color", "emphasized"] }, { kind: "directive", type: TypeBody, selector: "md3-type-body, [md3-type-body]", inputs: ["size", "color", "emphasized"] }, { kind: "directive", type: TypeTitle, selector: "md3-type-title, [md3-type-title]", inputs: ["size", "color", "emphasized"] }] });
|
|
6137
6155
|
}
|
|
6138
6156
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MenuItem, decorators: [{
|
|
6139
6157
|
type: Component,
|
|
@@ -6147,7 +6165,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
6147
6165
|
], host: {
|
|
6148
6166
|
'(click)': 'onHostClick()',
|
|
6149
6167
|
}, template: "@if (selected() !== null) {\n <input type=\"checkbox\" md3-input-element [checked]=\"selected()\">\n}\n\n<div class=\"md3-menu-item-container\" md3-state-component>\n <div class=\"md3-menu-item-leading\" [class.has-icon]=\"showLeadingIcon\">\n <ng-content select=\"[md3-icon-element=leading]\"></ng-content>\n @if (!leading) {\n <md3-icon>check</md3-icon>\n }\n </div>\n\n <div class=\"md3-menu-item-content\">\n <md3-type-label size=\"large\">{{ label() }}</md3-type-label>\n @if (supportingText()?.length) {\n <md3-type-body size=\"small\">{{ supportingText() }}</md3-type-body>\n }\n </div>\n\n <div class=\"md3-menu-item-trailing\">\n <ng-content select=\"md3-badge\"></ng-content>\n @if (trailingText()?.length) {\n <md3-type-title size=\"small\">{{ trailingText() }}</md3-type-title>\n }\n <ng-content select=\"[md3-icon-element=trailing]\"></ng-content>\n </div>\n</div>", styles: [":host{--state-color: var(--menu-item-state-color);--border-radius: var(--menu-item-border-radius);--outline-color: var(--menu-item-outline-color);--outline-width: var(--menu-item-outline-width);--outline-offset: var(--menu-item-outline-offset);position:relative;display:block;padding:0;border:0;background:transparent;color:var(--menu-item-label-color);font:inherit;text-align:start;text-decoration:none;cursor:pointer;outline:none;appearance:none;-webkit-user-select:none;user-select:none;z-index:0}:host:focus{z-index:1}:host:focus:not(:hover) .md3-menu-item-container:after{opacity:1}:host:active{z-index:2}:host:active .md3-menu-item-container:after{opacity:0}:host .md3-menu-item-container{display:flex;align-items:center;min-height:3em;padding:0 .75em;border-radius:var(--border-radius);transition:background-color var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing),color var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}:host .md3-menu-item-container .md3-menu-item-leading{display:inline-flex;align-items:center;justify-content:center;font-size:inherit;opacity:0;transform:scale(1.2);width:0;height:1.25em;color:var(--menu-item-supporting-color);transition:all var(--md-motion-standard-fast-spatial-duration) var(--md-motion-standard-fast-spatial-easing)}:host .md3-menu-item-container .md3-menu-item-leading ::ng-deep [md3-icon-element]{font-size:1.25em!important;height:1em!important;width:1em!important;line-height:1em!important}:host .md3-menu-item-container .md3-menu-item-leading.has-icon{margin-inline-end:.5em;opacity:1;transform:scale(1);height:1.25em;width:1.25em}:host .md3-menu-item-container .md3-menu-item-trailing{flex:0 1 content;display:inline-flex;gap:.5em;align-items:center;justify-content:center;font-size:inherit;margin-inline-start:.5em;color:var(--menu-item-supporting-color)}:host .md3-menu-item-container .md3-menu-item-trailing:empty{margin:0}:host .md3-menu-item-container .md3-menu-item-trailing ::ng-deep md3-badge{background-color:var(--menu-item-badge-background);color:var(--menu-item-badge-foreground)}:host .md3-menu-item-container .md3-menu-item-trailing .md3-text-title.md3-text-small{margin:0;padding:0;white-space:nowrap;letter-spacing:.007143em}:host .md3-menu-item-container .md3-menu-item-trailing ::ng-deep [md3-icon-element]{font-size:1.25em!important;height:1em!important;width:1em!important;line-height:1em!important}:host .md3-menu-item-container .md3-menu-item-content{flex:1 1 auto}:host .md3-menu-item-container .md3-menu-item-content .md3-text-label.md3-text-large{display:block;margin:0;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.007143em;color:var(--menu-item-label-color)}:host .md3-menu-item-container .md3-menu-item-content .md3-text-body.md3-text-small{display:block;margin:0;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.0333334em;color:var(--menu-item-supporting-color)}:host [md3-input-element]{position:absolute;height:0;width:0;opacity:0;pointer-events:none}:host [md3-input-element]+.md3-menu-item-container .md3-menu-item-leading{opacity:0;transform:scale(1.2);width:0}:host [md3-input-element]:checked+.md3-menu-item-container{--menu-item-label-color: var(--menu-item-selected-foreground);--menu-item-supporting-color: var(--menu-item-selected-foreground);--border-radius: var(--md-border-radius-medium);background-color:var(--menu-item-selected-background)}:host [md3-input-element]:checked+.md3-menu-item-container .md3-menu-item-leading{opacity:1;transform:scale(1);width:1.25em}:host:disabled{cursor:default}:host:disabled .md3-menu-item-container{--menu-item-label-color: var(--menu-item-label-color);--menu-item-supporting-color: var(--menu-item-label-color);--menu-item-selected-background: transparent;--menu-item-selected-foreground: var(--menu-item-label-color);pointer-events:none;opacity:.38}:host:disabled .md3-menu-item-container.md3-state-layer,:host:disabled .md3-menu-item-container:after{display:none}\n"] }]
|
|
6150
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], supportingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "supporting-text", required: false }] }], trailingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailing-text", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], iconElements: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IconElement), { isSignal: true }] }] } });
|
|
6168
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], supportingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "supporting-text", required: false }] }], trailingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailing-text", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], toggleOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggle-on-click", required: false }] }], iconElements: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IconElement), { isSignal: true }] }] } });
|
|
6151
6169
|
|
|
6152
6170
|
class SelectOptions {
|
|
6153
6171
|
options = input.required(/* @ts-ignore */
|
|
@@ -6179,14 +6197,14 @@ class SelectOptions {
|
|
|
6179
6197
|
this.selectionChange.emit(options.filter((item) => item.selected).map((item) => item.value));
|
|
6180
6198
|
}
|
|
6181
6199
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SelectOptions, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6182
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: SelectOptions, isStandalone: true, selector: "md3-select-options", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "<md3-menu-group class=\"md3-scrollable\">\n @for (item of renderedOptions(); track item.value) {\n <button\n md3-menu-item\n [selected]=\"item.selected ?? false\"\n [label]=\"item.label\"\n [supporting-text]=\"item.supportingText ?? null\"\n [trailing-text]=\"item.trailingText ?? null\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"optionClick(item)\"\n >\n </button>\n }\n</md3-menu-group>\n", styles: [":host{max-height:inherit}:host md3-menu-group.md3-scrollable{padding:.5em .375em;max-height:inherit;overflow-y:auto}\n"], dependencies: [{ kind: "component", type: MenuGroup, selector: "md3-menu-group" }, { kind: "component", type: MenuItem, selector: "button[md3-menu-item], a[md3-menu-item]", inputs: ["label", "supporting-text", "trailing-text", "selected"], outputs: ["selectedChange"] }] });
|
|
6200
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: SelectOptions, isStandalone: true, selector: "md3-select-options", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "<md3-menu-group class=\"md3-scrollable\">\n @for (item of renderedOptions(); track item.value) {\n <button\n md3-menu-item\n [selected]=\"item.selected ?? false\"\n [toggle-on-click]=\"false\"\n [label]=\"item.label\"\n [supporting-text]=\"item.supportingText ?? null\"\n [trailing-text]=\"item.trailingText ?? null\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"optionClick(item)\"\n >\n </button>\n }\n</md3-menu-group>\n", styles: [":host{max-height:inherit}:host md3-menu-group.md3-scrollable{padding:.5em .375em;max-height:inherit;overflow-y:auto}\n"], dependencies: [{ kind: "component", type: MenuGroup, selector: "md3-menu-group" }, { kind: "component", type: MenuItem, selector: "button[md3-menu-item], a[md3-menu-item]", inputs: ["label", "supporting-text", "trailing-text", "selected", "toggle-on-click"], outputs: ["selectedChange"] }] });
|
|
6183
6201
|
}
|
|
6184
6202
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SelectOptions, decorators: [{
|
|
6185
6203
|
type: Component,
|
|
6186
6204
|
args: [{ selector: 'md3-select-options', imports: [
|
|
6187
6205
|
MenuGroup,
|
|
6188
6206
|
MenuItem,
|
|
6189
|
-
], template: "<md3-menu-group class=\"md3-scrollable\">\n @for (item of renderedOptions(); track item.value) {\n <button\n md3-menu-item\n [selected]=\"item.selected ?? false\"\n [label]=\"item.label\"\n [supporting-text]=\"item.supportingText ?? null\"\n [trailing-text]=\"item.trailingText ?? null\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"optionClick(item)\"\n >\n </button>\n }\n</md3-menu-group>\n", styles: [":host{max-height:inherit}:host md3-menu-group.md3-scrollable{padding:.5em .375em;max-height:inherit;overflow-y:auto}\n"] }]
|
|
6207
|
+
], template: "<md3-menu-group class=\"md3-scrollable\">\n @for (item of renderedOptions(); track item.value) {\n <button\n md3-menu-item\n [selected]=\"item.selected ?? false\"\n [toggle-on-click]=\"false\"\n [label]=\"item.label\"\n [supporting-text]=\"item.supportingText ?? null\"\n [trailing-text]=\"item.trailingText ?? null\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"optionClick(item)\"\n >\n </button>\n }\n</md3-menu-group>\n", styles: [":host{max-height:inherit}:host md3-menu-group.md3-scrollable{padding:.5em .375em;max-height:inherit;overflow-y:auto}\n"] }]
|
|
6190
6208
|
}], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
|
|
6191
6209
|
|
|
6192
6210
|
const MENU_DATA = new InjectionToken('MD3_MENU_DATA');
|
|
@@ -7031,6 +7049,9 @@ class SelectField {
|
|
|
7031
7049
|
selectValues(values) {
|
|
7032
7050
|
this.setSelectedValues(this.normalizeValues(values));
|
|
7033
7051
|
this.commitValue();
|
|
7052
|
+
if (!this.multiple()) {
|
|
7053
|
+
this.closeMenu();
|
|
7054
|
+
}
|
|
7034
7055
|
}
|
|
7035
7056
|
setSelectedValues(values) {
|
|
7036
7057
|
const current = untracked(this.selectedValues);
|