@almoamendev/ngx-md3 0.8.9 → 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.
|
@@ -6119,6 +6119,13 @@ class MenuItem {
|
|
|
6119
6119
|
supportingText = input(null, { ...(ngDevMode ? { debugName: "supportingText" } : /* istanbul ignore next */ {}), alias: 'supporting-text' });
|
|
6120
6120
|
trailingText = input(null, { ...(ngDevMode ? { debugName: "trailingText" } : /* istanbul ignore next */ {}), alias: 'trailing-text' });
|
|
6121
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 });
|
|
6122
6129
|
iconElements = contentChildren(IconElement, /* @ts-ignore */
|
|
6123
6130
|
...(ngDevMode ? [{ debugName: "iconElements" }] : /* istanbul ignore next */ []));
|
|
6124
6131
|
get leading() {
|
|
@@ -6132,7 +6139,7 @@ class MenuItem {
|
|
|
6132
6139
|
}
|
|
6133
6140
|
onHostClick() {
|
|
6134
6141
|
const selected = this.selected();
|
|
6135
|
-
if (selected === null) {
|
|
6142
|
+
if (selected === null || !this.toggleOnClick()) {
|
|
6136
6143
|
return;
|
|
6137
6144
|
}
|
|
6138
6145
|
this.selected.set(!selected);
|
|
@@ -6144,7 +6151,7 @@ class MenuItem {
|
|
|
6144
6151
|
return this.el.nativeElement;
|
|
6145
6152
|
}
|
|
6146
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 });
|
|
6147
|
-
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"] }] });
|
|
6148
6155
|
}
|
|
6149
6156
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MenuItem, decorators: [{
|
|
6150
6157
|
type: Component,
|
|
@@ -6158,7 +6165,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
6158
6165
|
], host: {
|
|
6159
6166
|
'(click)': 'onHostClick()',
|
|
6160
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"] }]
|
|
6161
|
-
}], 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 }] }] } });
|
|
6162
6169
|
|
|
6163
6170
|
class SelectOptions {
|
|
6164
6171
|
options = input.required(/* @ts-ignore */
|
|
@@ -6190,14 +6197,14 @@ class SelectOptions {
|
|
|
6190
6197
|
this.selectionChange.emit(options.filter((item) => item.selected).map((item) => item.value));
|
|
6191
6198
|
}
|
|
6192
6199
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SelectOptions, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6193
|
-
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"] }] });
|
|
6194
6201
|
}
|
|
6195
6202
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SelectOptions, decorators: [{
|
|
6196
6203
|
type: Component,
|
|
6197
6204
|
args: [{ selector: 'md3-select-options', imports: [
|
|
6198
6205
|
MenuGroup,
|
|
6199
6206
|
MenuItem,
|
|
6200
|
-
], 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"] }]
|
|
6201
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"] }] } });
|
|
6202
6209
|
|
|
6203
6210
|
const MENU_DATA = new InjectionToken('MD3_MENU_DATA');
|
|
@@ -7042,6 +7049,9 @@ class SelectField {
|
|
|
7042
7049
|
selectValues(values) {
|
|
7043
7050
|
this.setSelectedValues(this.normalizeValues(values));
|
|
7044
7051
|
this.commitValue();
|
|
7052
|
+
if (!this.multiple()) {
|
|
7053
|
+
this.closeMenu();
|
|
7054
|
+
}
|
|
7045
7055
|
}
|
|
7046
7056
|
setSelectedValues(values) {
|
|
7047
7057
|
const current = untracked(this.selectedValues);
|