@almoamendev/ngx-md3 0.8.9 → 0.8.11
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.
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, booleanAttribute, effect, Directive, inject, signal, computed, Injectable, untracked, InjectionToken, viewChild, NgZone, ElementRef, Component, ViewChild, isDevMode, ViewContainerRef, Injector, numberAttribute, HostListener, model, contentChild, contentChildren, PLATFORM_ID, afterNextRender, output, HostBinding, TemplateRef } from '@angular/core';
|
|
2
|
+
import { input, booleanAttribute, effect, Directive, inject, signal, computed, Injectable, untracked, InjectionToken, viewChild, NgZone, ElementRef, Component, ViewChild, isDevMode, ViewContainerRef, Injector, numberAttribute, HostListener, model, contentChild, contentChildren, PLATFORM_ID, afterNextRender, output, Optional, HostBinding, TemplateRef } from '@angular/core';
|
|
3
3
|
import { DOCUMENT, isPlatformBrowser, NgClass, NgTemplateOutlet } from '@angular/common';
|
|
4
4
|
import { BreakpointObserver } from '@angular/cdk/layout';
|
|
5
5
|
import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
6
6
|
import { fromEvent, startWith, map, filter, Subscription, Subject, take, takeUntil, merge } from 'rxjs';
|
|
7
|
-
import * as i1 from '@angular/router';
|
|
7
|
+
import * as i1$1 from '@angular/router';
|
|
8
8
|
import { Router, NavigationEnd, RouterLinkActive } from '@angular/router';
|
|
9
9
|
import { CdkPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
|
|
10
10
|
import { CdkDialogContainer, Dialog as Dialog$1 } from '@angular/cdk/dialog';
|
|
@@ -14,6 +14,8 @@ import * as i2 from '@angular/cdk/scrolling';
|
|
|
14
14
|
import { CdkScrollable } from '@angular/cdk/scrolling';
|
|
15
15
|
import { Directionality } from '@angular/cdk/bidi';
|
|
16
16
|
import { FormControlName, NgControl } from '@angular/forms';
|
|
17
|
+
import * as i1 from '@angular/cdk/drag-drop';
|
|
18
|
+
import { CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
|
|
17
19
|
|
|
18
20
|
class TypeDisplay {
|
|
19
21
|
el;
|
|
@@ -4625,12 +4627,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
4625
4627
|
|
|
4626
4628
|
class List {
|
|
4627
4629
|
el;
|
|
4630
|
+
dropList;
|
|
4628
4631
|
variant = input('expressive', /* @ts-ignore */
|
|
4629
4632
|
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
4630
4633
|
type = input('standard', /* @ts-ignore */
|
|
4631
4634
|
...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
4632
|
-
|
|
4635
|
+
draggable = input(false, { ...(ngDevMode ? { debugName: "draggable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
4636
|
+
constructor(el, dropList) {
|
|
4633
4637
|
this.el = el;
|
|
4638
|
+
this.dropList = dropList;
|
|
4639
|
+
this.dropList.lockAxis = 'y';
|
|
4634
4640
|
effect((onCleanup) => {
|
|
4635
4641
|
const variant = 'md3-' + this.variant();
|
|
4636
4642
|
this.element.classList.add(variant);
|
|
@@ -4645,17 +4651,25 @@ class List {
|
|
|
4645
4651
|
this.element.classList.remove(type);
|
|
4646
4652
|
});
|
|
4647
4653
|
});
|
|
4654
|
+
effect(() => {
|
|
4655
|
+
this.dropList.disabled = !this.draggable();
|
|
4656
|
+
});
|
|
4648
4657
|
}
|
|
4649
4658
|
get element() {
|
|
4650
4659
|
return this.el.nativeElement;
|
|
4651
4660
|
}
|
|
4652
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: List, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4653
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: List, isStandalone: true, selector: "md3-list", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{--background-color: rgb(var(--md-scheme-surface));--foreground-color: rgb(var(--md-scheme-on-surface-variant));--state-color: var(--md-scheme-on-surface);--border-radius: var(--md-border-radius-xsmall);--border-size: 0em;--outline-color: rgb(var(--md-scheme-secondary));--outline-width: .1875em;--outline-offset: 0em;--padding-y: .625em;--slots-gap: .75em;font-size:1rem;display:flex;flex-direction:column;gap:0em}:host.md3-expressive{--leading-icon-size: 1.25em;--leading-media-radius: var(--md-border-radius-small)}:host.md3-expressive.md3-standard{gap:0em}:host.md3-expressive.md3-segmented{gap:.125em}:host.md3-expressive ::ng-deep md3-list-item.md3-state-component:first-child,:host.md3-expressive ::ng-deep md3-list-item:first-child [md3-primary-action],:host.md3-expressive ::ng-deep [md3-list-item].md3-state-component:first-child,:host.md3-expressive ::ng-deep [md3-list-item]:first-child [md3-primary-action]{--border-top-start-r: var(--md-border-radius-large);--border-top-end-r: var(--md-border-radius-large)}:host.md3-expressive ::ng-deep md3-list-item.md3-state-component:last-child,:host.md3-expressive ::ng-deep md3-list-item:last-child [md3-primary-action],:host.md3-expressive ::ng-deep [md3-list-item].md3-state-component:last-child,:host.md3-expressive ::ng-deep [md3-list-item]:last-child [md3-primary-action]{--border-bottom-start-r: var(--md-border-radius-large);--border-bottom-end-r: var(--md-border-radius-large)}:host.md3-expressive ::ng-deep md3-list-item.md3-state-component:hover,:host.md3-expressive ::ng-deep md3-list-item [md3-primary-action]:hover,:host.md3-expressive ::ng-deep [md3-list-item].md3-state-component:hover,:host.md3-expressive ::ng-deep [md3-list-item] [md3-primary-action]:hover{--border-radius: var(--md-border-radius-medium);--border-top-start-r: var(--border-radius);--border-top-end-r: var(--border-radius);--border-bottom-start-r: var(--border-radius);--border-bottom-end-r: var(--border-radius)}:host.md3-expressive ::ng-deep md3-list-item.md3-state-component:focus,:host.md3-expressive ::ng-deep md3-list-item [md3-primary-action]:focus,:host.md3-expressive ::ng-deep [md3-list-item].md3-state-component:focus,:host.md3-expressive ::ng-deep [md3-list-item] [md3-primary-action]:focus{--border-radius: var(--md-border-radius-large);--border-top-start-r: var(--border-radius);--border-top-end-r: var(--border-radius);--border-bottom-start-r: var(--border-radius);--border-bottom-end-r: var(--border-radius)}:host.md3-baseline{--border-radius: var(--md-border-radius-none);--padding-y: .5em;--slots-gap: 1em}:host.md3-baseline ::ng-deep md3-list-leading[type=media][size=small-video],:host.md3-baseline ::ng-deep md3-list-leading[type=media][size=large-video]{margin-inline-start:-1em}\n"] });
|
|
4661
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: List, deps: [{ token: i0.ElementRef }, { token: i1.CdkDropList }], target: i0.ɵɵFactoryTarget.Component });
|
|
4662
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: List, isStandalone: true, selector: "md3-list", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.CdkDropList, outputs: ["cdkDropListDropped", "dropped"] }], ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{--background-color: rgb(var(--md-scheme-surface));--foreground-color: rgb(var(--md-scheme-on-surface-variant));--state-color: var(--md-scheme-on-surface);--border-radius: var(--md-border-radius-xsmall);--border-size: 0em;--outline-color: rgb(var(--md-scheme-secondary));--outline-width: .1875em;--outline-offset: 0em;--padding-y: .625em;--slots-gap: .75em;font-size:1rem;display:flex;flex-direction:column;gap:0em}:host.md3-expressive{--leading-icon-size: 1.25em;--leading-media-radius: var(--md-border-radius-small)}:host.md3-expressive.md3-standard{gap:0em}:host.md3-expressive.md3-segmented{gap:.125em}:host.md3-expressive ::ng-deep md3-list-item.md3-state-component:first-child,:host.md3-expressive ::ng-deep md3-list-item:first-child [md3-primary-action],:host.md3-expressive ::ng-deep [md3-list-item].md3-state-component:first-child,:host.md3-expressive ::ng-deep [md3-list-item]:first-child [md3-primary-action]{--border-top-start-r: var(--md-border-radius-large);--border-top-end-r: var(--md-border-radius-large)}:host.md3-expressive ::ng-deep md3-list-item.md3-state-component:last-child,:host.md3-expressive ::ng-deep md3-list-item.md3-state-component:has(+.cdk-drag-preview:last-child),:host.md3-expressive ::ng-deep md3-list-item:last-child [md3-primary-action],:host.md3-expressive ::ng-deep [md3-list-item].md3-state-component:last-child,:host.md3-expressive ::ng-deep [md3-list-item].md3-state-component:has(+.cdk-drag-preview:last-child),:host.md3-expressive ::ng-deep [md3-list-item]:last-child [md3-primary-action]{--border-bottom-start-r: var(--md-border-radius-large);--border-bottom-end-r: var(--md-border-radius-large)}:host.md3-expressive ::ng-deep md3-list-item.md3-state-component:hover,:host.md3-expressive ::ng-deep md3-list-item [md3-primary-action]:hover,:host.md3-expressive ::ng-deep [md3-list-item].md3-state-component:hover,:host.md3-expressive ::ng-deep [md3-list-item] [md3-primary-action]:hover{--border-radius: var(--md-border-radius-medium);--border-top-start-r: var(--border-radius);--border-top-end-r: var(--border-radius);--border-bottom-start-r: var(--border-radius);--border-bottom-end-r: var(--border-radius)}:host.md3-expressive ::ng-deep md3-list-item.md3-state-component:focus,:host.md3-expressive ::ng-deep md3-list-item [md3-primary-action]:focus,:host.md3-expressive ::ng-deep [md3-list-item].md3-state-component:focus,:host.md3-expressive ::ng-deep [md3-list-item] [md3-primary-action]:focus{--border-radius: var(--md-border-radius-large);--border-top-start-r: var(--border-radius);--border-top-end-r: var(--border-radius);--border-bottom-start-r: var(--border-radius);--border-bottom-end-r: var(--border-radius)}:host.md3-expressive ::ng-deep md3-list-item.cdk-drag-preview,:host.md3-expressive ::ng-deep [md3-list-item].cdk-drag-preview{--border-radius: var(--md-border-radius-large);--border-top-start-r: var(--border-radius);--border-top-end-r: var(--border-radius);--border-bottom-start-r: var(--border-radius);--border-bottom-end-r: var(--border-radius)}:host.cdk-drop-list-dragging ::ng-deep .cdk-drag:not(.cdk-drag-placeholder):not(.cdk-drag-preview){transition:all var(--md-motion-expressive-fast-spatial-duration) var(--md-motion-expressive-fast-spatial-easing)}:host.md3-baseline{--border-radius: var(--md-border-radius-none);--padding-y: .5em;--slots-gap: 1em}:host.md3-baseline ::ng-deep md3-list-leading[type=media][size=small-video],:host.md3-baseline ::ng-deep md3-list-leading[type=media][size=large-video]{margin-inline-start:-1em}\n"] });
|
|
4654
4663
|
}
|
|
4655
4664
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: List, decorators: [{
|
|
4656
4665
|
type: Component,
|
|
4657
|
-
args: [{ selector: 'md3-list',
|
|
4658
|
-
|
|
4666
|
+
args: [{ selector: 'md3-list', hostDirectives: [
|
|
4667
|
+
{
|
|
4668
|
+
directive: CdkDropList,
|
|
4669
|
+
outputs: ['cdkDropListDropped: dropped'],
|
|
4670
|
+
},
|
|
4671
|
+
], template: "<ng-content></ng-content>", styles: [":host{--background-color: rgb(var(--md-scheme-surface));--foreground-color: rgb(var(--md-scheme-on-surface-variant));--state-color: var(--md-scheme-on-surface);--border-radius: var(--md-border-radius-xsmall);--border-size: 0em;--outline-color: rgb(var(--md-scheme-secondary));--outline-width: .1875em;--outline-offset: 0em;--padding-y: .625em;--slots-gap: .75em;font-size:1rem;display:flex;flex-direction:column;gap:0em}:host.md3-expressive{--leading-icon-size: 1.25em;--leading-media-radius: var(--md-border-radius-small)}:host.md3-expressive.md3-standard{gap:0em}:host.md3-expressive.md3-segmented{gap:.125em}:host.md3-expressive ::ng-deep md3-list-item.md3-state-component:first-child,:host.md3-expressive ::ng-deep md3-list-item:first-child [md3-primary-action],:host.md3-expressive ::ng-deep [md3-list-item].md3-state-component:first-child,:host.md3-expressive ::ng-deep [md3-list-item]:first-child [md3-primary-action]{--border-top-start-r: var(--md-border-radius-large);--border-top-end-r: var(--md-border-radius-large)}:host.md3-expressive ::ng-deep md3-list-item.md3-state-component:last-child,:host.md3-expressive ::ng-deep md3-list-item.md3-state-component:has(+.cdk-drag-preview:last-child),:host.md3-expressive ::ng-deep md3-list-item:last-child [md3-primary-action],:host.md3-expressive ::ng-deep [md3-list-item].md3-state-component:last-child,:host.md3-expressive ::ng-deep [md3-list-item].md3-state-component:has(+.cdk-drag-preview:last-child),:host.md3-expressive ::ng-deep [md3-list-item]:last-child [md3-primary-action]{--border-bottom-start-r: var(--md-border-radius-large);--border-bottom-end-r: var(--md-border-radius-large)}:host.md3-expressive ::ng-deep md3-list-item.md3-state-component:hover,:host.md3-expressive ::ng-deep md3-list-item [md3-primary-action]:hover,:host.md3-expressive ::ng-deep [md3-list-item].md3-state-component:hover,:host.md3-expressive ::ng-deep [md3-list-item] [md3-primary-action]:hover{--border-radius: var(--md-border-radius-medium);--border-top-start-r: var(--border-radius);--border-top-end-r: var(--border-radius);--border-bottom-start-r: var(--border-radius);--border-bottom-end-r: var(--border-radius)}:host.md3-expressive ::ng-deep md3-list-item.md3-state-component:focus,:host.md3-expressive ::ng-deep md3-list-item [md3-primary-action]:focus,:host.md3-expressive ::ng-deep [md3-list-item].md3-state-component:focus,:host.md3-expressive ::ng-deep [md3-list-item] [md3-primary-action]:focus{--border-radius: var(--md-border-radius-large);--border-top-start-r: var(--border-radius);--border-top-end-r: var(--border-radius);--border-bottom-start-r: var(--border-radius);--border-bottom-end-r: var(--border-radius)}:host.md3-expressive ::ng-deep md3-list-item.cdk-drag-preview,:host.md3-expressive ::ng-deep [md3-list-item].cdk-drag-preview{--border-radius: var(--md-border-radius-large);--border-top-start-r: var(--border-radius);--border-top-end-r: var(--border-radius);--border-bottom-start-r: var(--border-radius);--border-bottom-end-r: var(--border-radius)}:host.cdk-drop-list-dragging ::ng-deep .cdk-drag:not(.cdk-drag-placeholder):not(.cdk-drag-preview){transition:all var(--md-motion-expressive-fast-spatial-duration) var(--md-motion-expressive-fast-spatial-easing)}:host.md3-baseline{--border-radius: var(--md-border-radius-none);--padding-y: .5em;--slots-gap: 1em}:host.md3-baseline ::ng-deep md3-list-leading[type=media][size=small-video],:host.md3-baseline ::ng-deep md3-list-leading[type=media][size=large-video]{margin-inline-start:-1em}\n"] }]
|
|
4672
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.CdkDropList }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }] } });
|
|
4659
4673
|
|
|
4660
4674
|
class ListItemPrimaryAction {
|
|
4661
4675
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ListItemPrimaryAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
@@ -4676,9 +4690,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
4676
4690
|
class ListItem {
|
|
4677
4691
|
el;
|
|
4678
4692
|
state;
|
|
4693
|
+
drag;
|
|
4694
|
+
list;
|
|
4679
4695
|
slotsAlignment = input('center', { ...(ngDevMode ? { debugName: "slotsAlignment" } : /* istanbul ignore next */ {}), alias: 'slots-alignment' });
|
|
4680
4696
|
selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
4681
|
-
|
|
4697
|
+
dragDisabled = input(false, { ...(ngDevMode ? { debugName: "dragDisabled" } : /* istanbul ignore next */ {}), alias: 'drag-disabled',
|
|
4698
|
+
transform: booleanAttribute });
|
|
4699
|
+
isActionTag = signal(false, /* @ts-ignore */
|
|
4700
|
+
...(ngDevMode ? [{ debugName: "isActionTag" }] : /* istanbul ignore next */ []));
|
|
4682
4701
|
isLabelTag = false;
|
|
4683
4702
|
checkbox = contentChild(Checkbox, /* @ts-ignore */
|
|
4684
4703
|
...(ngDevMode ? [{ debugName: "checkbox" }] : /* istanbul ignore next */ []));
|
|
@@ -4699,9 +4718,17 @@ class ListItem {
|
|
|
4699
4718
|
return this.checkbox()?.isDisabled() || this.radioButton()?.isDisabled() || this.switch()?.isDisabled();
|
|
4700
4719
|
}, /* @ts-ignore */
|
|
4701
4720
|
...(ngDevMode ? [{ debugName: "isInputDisabled" }] : /* istanbul ignore next */ []));
|
|
4702
|
-
|
|
4721
|
+
isDraggable = computed(() => {
|
|
4722
|
+
return !!this.list?.draggable() && !this.dragDisabled() && !this.isInputDisabled();
|
|
4723
|
+
}, /* @ts-ignore */
|
|
4724
|
+
...(ngDevMode ? [{ debugName: "isDraggable" }] : /* istanbul ignore next */ []));
|
|
4725
|
+
constructor(el, state, drag, list) {
|
|
4703
4726
|
this.el = el;
|
|
4704
4727
|
this.state = state;
|
|
4728
|
+
this.drag = drag;
|
|
4729
|
+
this.list = list;
|
|
4730
|
+
// Keep the preview inside the list so it inherits the list's tokens.
|
|
4731
|
+
this.drag.previewContainer = 'parent';
|
|
4705
4732
|
effect((onCleanup) => {
|
|
4706
4733
|
const alignment = 'md3-slots-alignment-' + this.slotsAlignment();
|
|
4707
4734
|
this.element.classList.add(alignment);
|
|
@@ -4710,14 +4737,14 @@ class ListItem {
|
|
|
4710
4737
|
});
|
|
4711
4738
|
});
|
|
4712
4739
|
effect(() => {
|
|
4713
|
-
|
|
4714
|
-
|
|
4715
|
-
|
|
4716
|
-
|
|
4717
|
-
|
|
4718
|
-
|
|
4719
|
-
|
|
4720
|
-
|
|
4740
|
+
this.element.classList.toggle('md3-disabled', !!this.isInputDisabled());
|
|
4741
|
+
});
|
|
4742
|
+
// Draggable items always need the state layer for the dragged state.
|
|
4743
|
+
effect(() => {
|
|
4744
|
+
this.state.setStateLayer(this.isDraggable() || (this.isActionTag() && !this.isInputDisabled()));
|
|
4745
|
+
});
|
|
4746
|
+
effect(() => {
|
|
4747
|
+
this.drag.disabled = !this.isDraggable();
|
|
4721
4748
|
});
|
|
4722
4749
|
}
|
|
4723
4750
|
get element() {
|
|
@@ -4730,10 +4757,7 @@ class ListItem {
|
|
|
4730
4757
|
this.element.setAttribute('tabindex', '0');
|
|
4731
4758
|
this.setLabelInputTabIndex();
|
|
4732
4759
|
}
|
|
4733
|
-
this.isActionTag
|
|
4734
|
-
if (!this.isActionTag) {
|
|
4735
|
-
this.state.setStateLayer(false);
|
|
4736
|
-
}
|
|
4760
|
+
this.isActionTag.set(tagName != 'md3-list-item');
|
|
4737
4761
|
}
|
|
4738
4762
|
onFocusIn(event) {
|
|
4739
4763
|
if (!this.isLabelTag || event.target === this.element || !this.isInputElement(event.target)) {
|
|
@@ -4773,17 +4797,21 @@ class ListItem {
|
|
|
4773
4797
|
isInputElement(target) {
|
|
4774
4798
|
return target instanceof HTMLInputElement;
|
|
4775
4799
|
}
|
|
4776
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ListItem, deps: [{ token: i0.ElementRef }, { token: StateComponent }], target: i0.ɵɵFactoryTarget.Component });
|
|
4777
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: ListItem, isStandalone: true, selector: "md3-list-item, label[md3-list-item], button[md3-list-item], a[md3-list-item]", inputs: { slotsAlignment: { classPropertyName: "slotsAlignment", publicName: "slots-alignment", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusin": "onFocusIn($event)", "keydown": "onKeyDown($event)" }, properties: { "class.md3-selected": "isSelected()" } }, queries: [{ propertyName: "checkbox", first: true, predicate: Checkbox, descendants: true, isSignal: true }, { propertyName: "radioButton", first: true, predicate: RadioButton, descendants: true, isSignal: true }, { propertyName: "switch", first: true, predicate: Switch, descendants: true, isSignal: true }], hostDirectives: [{ directive: StateComponent }], ngImport: i0, template: "<ng-content select=\"[md3-item-primary-action]\"></ng-content>\n<ng-content select=\"md3-list-leading\"></ng-content>\n<ng-content select=\"[md3-list-slot=content]\"></ng-content>\n<ng-content select=\"[md3-list-slot=trailing]\"></ng-content>", styles: [":host{border:none;background:none;text-decoration:none;text-align:start;font-size:1em;flex:0 1 auto;display:flex;align-items:center;gap:var(--slots-gap, .75em);padding:var(--padding-y, .625em) 1em;background-color:var(--background-color);color:var(--foreground-color);border-radius:var(--border-radius);transition:all var(--md-motion-expressive-fast-spatial-duration) var(--md-motion-expressive-fast-spatial-easing);position:relative;z-index:1}:host.md3-state-component{cursor:pointer}:host:has(.md3-item-primary-action){background-color:transparent}:host.md3-selected{--background-color: rgb(var(--md-scheme-secondary-container));--foreground-color: rgb(var(--md-scheme-on-secondary-container));--border-radius: var(--md-border-radius-large)}:host:hover,:host:has(.md3-item-primary-action:hover){z-index:2}:host:focus,:host:has(.md3-item-primary-action:focus){z-index:3}:host.md3-slots-alignment-start{align-items:start}:host.md3-slots-alignment-center{align-items:center}:host.md3-slots-alignment-end{align-items:end}:host ::ng-deep [md3-list-slot=content]{flex:1 1 max-content;font-size:1em;line-height:1.5em;letter-spacing:.03125em;font-weight:400;color:rgb(var(--md-scheme-on-surface));pointer-events:none}:host ::ng-deep [md3-list-slot=trailing]{flex:0 1 max-content;display:inline-flex;align-items:center;font-size:.6875em;line-height:1.454545em;letter-spacing:.045455em;font-weight:500;pointer-events:none}:host ::ng-deep [md3-item-primary-action]{cursor:pointer;position:absolute;inset:0;font-size:1rem;border-radius:var(--border-radius);border:none;background-color:var(--background-color);z-index:-1}:host ::ng-deep [md3-item-primary-action].md3-disabled,:host ::ng-deep [md3-item-primary-action]:disabled{--background-color: transparent;--state-color: var(--md-scheme-on-surface);cursor:default!important}:host ::ng-deep [md3-item-primary-action].md3-disabled,:host ::ng-deep [md3-item-primary-action].md3-disabled~*,:host ::ng-deep [md3-item-primary-action]:disabled,:host ::ng-deep [md3-item-primary-action]:disabled~*{--foreground-color: rgb(var(--md-scheme-on-surface));--border-radius: var(--md-border-radius-medium);opacity:.38}:host.md3-disabled,:host:disabled{--background-color: transparent;--foreground-color: rgb(var(--md-scheme-on-surface));--border-radius: var(--md-border-radius-medium);cursor:default!important;opacity:.38}:host ::ng-deep input,:host ::ng-deep button,:host ::ng-deep a{pointer-events:all}\n"] });
|
|
4800
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ListItem, deps: [{ token: i0.ElementRef }, { token: StateComponent }, { token: i1.CdkDrag }, { token: List, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
4801
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: ListItem, isStandalone: true, selector: "md3-list-item, label[md3-list-item], button[md3-list-item], a[md3-list-item]", inputs: { slotsAlignment: { classPropertyName: "slotsAlignment", publicName: "slots-alignment", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, dragDisabled: { classPropertyName: "dragDisabled", publicName: "drag-disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusin": "onFocusIn($event)", "keydown": "onKeyDown($event)" }, properties: { "class.md3-selected": "isSelected()", "class.draggable": "isDraggable()" } }, queries: [{ propertyName: "checkbox", first: true, predicate: Checkbox, descendants: true, isSignal: true }, { propertyName: "radioButton", first: true, predicate: RadioButton, descendants: true, isSignal: true }, { propertyName: "switch", first: true, predicate: Switch, descendants: true, isSignal: true }], hostDirectives: [{ directive: StateComponent }, { directive: i1.CdkDrag }], ngImport: i0, template: "<ng-content select=\"[md3-item-primary-action]\"></ng-content>\n<ng-content select=\"md3-list-leading\"></ng-content>\n<ng-content select=\"[md3-list-slot=content]\"></ng-content>\n<ng-content select=\"[md3-list-slot=trailing]\"></ng-content>", styles: [":host{border:none;background:none;text-decoration:none;text-align:start;font-size:1em;flex:0 1 auto;display:flex;align-items:center;gap:var(--slots-gap, .75em);padding:var(--padding-y, .625em) 1em;background-color:var(--background-color);color:var(--foreground-color);border-radius:var(--border-radius);transition:all var(--md-motion-expressive-fast-spatial-duration) var(--md-motion-expressive-fast-spatial-easing);position:relative;z-index:1}:host.md3-state-component{cursor:pointer}:host.cdk-drag{transition:all var(--md-motion-expressive-fast-spatial-duration) var(--md-motion-expressive-fast-spatial-easing),transform 0s}:host.draggable{cursor:grab}:host.cdk-drag-preview{cursor:grabbing;box-shadow:var(--md-shadow-8dp)}:host.cdk-drag-placeholder{opacity:0}:host.cdk-drag-animating{transition:transform var(--md-motion-expressive-fast-spatial-duration) var(--md-motion-expressive-fast-spatial-easing)}:host:has(.md3-item-primary-action){background-color:transparent}:host.md3-selected{--background-color: rgb(var(--md-scheme-secondary-container));--foreground-color: rgb(var(--md-scheme-on-secondary-container));--border-radius: var(--md-border-radius-large)}:host:hover,:host:has(.md3-item-primary-action:hover){z-index:2}:host:focus,:host:has(.md3-item-primary-action:focus){z-index:3}:host.md3-slots-alignment-start{align-items:start}:host.md3-slots-alignment-center{align-items:center}:host.md3-slots-alignment-end{align-items:end}:host ::ng-deep [md3-list-slot=content]{flex:1 1 max-content;font-size:1em;line-height:1.5em;letter-spacing:.03125em;font-weight:400;color:rgb(var(--md-scheme-on-surface));pointer-events:none}:host ::ng-deep [md3-list-slot=trailing]{flex:0 1 max-content;display:inline-flex;align-items:center;font-size:.6875em;line-height:1.454545em;letter-spacing:.045455em;font-weight:500;pointer-events:none}:host ::ng-deep [md3-item-primary-action]{cursor:pointer;position:absolute;inset:0;font-size:1rem;border-radius:var(--border-radius);border:none;background-color:var(--background-color);z-index:-1}:host ::ng-deep [md3-item-primary-action].md3-disabled,:host ::ng-deep [md3-item-primary-action]:disabled{--background-color: transparent;--state-color: var(--md-scheme-on-surface);cursor:default!important}:host ::ng-deep [md3-item-primary-action].md3-disabled,:host ::ng-deep [md3-item-primary-action].md3-disabled~*,:host ::ng-deep [md3-item-primary-action]:disabled,:host ::ng-deep [md3-item-primary-action]:disabled~*{--foreground-color: rgb(var(--md-scheme-on-surface));--border-radius: var(--md-border-radius-medium);opacity:.38}:host.md3-disabled,:host:disabled{--background-color: transparent;--foreground-color: rgb(var(--md-scheme-on-surface));--border-radius: var(--md-border-radius-medium);cursor:default!important;opacity:.38}:host ::ng-deep input,:host ::ng-deep button,:host ::ng-deep a{pointer-events:all}\n"] });
|
|
4778
4802
|
}
|
|
4779
4803
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ListItem, decorators: [{
|
|
4780
4804
|
type: Component,
|
|
4781
4805
|
args: [{ selector: 'md3-list-item, label[md3-list-item], button[md3-list-item], a[md3-list-item]', host: {
|
|
4782
4806
|
'[class.md3-selected]': 'isSelected()',
|
|
4807
|
+
'[class.draggable]': 'isDraggable()',
|
|
4783
4808
|
}, hostDirectives: [
|
|
4784
|
-
StateComponent
|
|
4785
|
-
|
|
4786
|
-
|
|
4809
|
+
StateComponent,
|
|
4810
|
+
CdkDrag,
|
|
4811
|
+
], template: "<ng-content select=\"[md3-item-primary-action]\"></ng-content>\n<ng-content select=\"md3-list-leading\"></ng-content>\n<ng-content select=\"[md3-list-slot=content]\"></ng-content>\n<ng-content select=\"[md3-list-slot=trailing]\"></ng-content>", styles: [":host{border:none;background:none;text-decoration:none;text-align:start;font-size:1em;flex:0 1 auto;display:flex;align-items:center;gap:var(--slots-gap, .75em);padding:var(--padding-y, .625em) 1em;background-color:var(--background-color);color:var(--foreground-color);border-radius:var(--border-radius);transition:all var(--md-motion-expressive-fast-spatial-duration) var(--md-motion-expressive-fast-spatial-easing);position:relative;z-index:1}:host.md3-state-component{cursor:pointer}:host.cdk-drag{transition:all var(--md-motion-expressive-fast-spatial-duration) var(--md-motion-expressive-fast-spatial-easing),transform 0s}:host.draggable{cursor:grab}:host.cdk-drag-preview{cursor:grabbing;box-shadow:var(--md-shadow-8dp)}:host.cdk-drag-placeholder{opacity:0}:host.cdk-drag-animating{transition:transform var(--md-motion-expressive-fast-spatial-duration) var(--md-motion-expressive-fast-spatial-easing)}:host:has(.md3-item-primary-action){background-color:transparent}:host.md3-selected{--background-color: rgb(var(--md-scheme-secondary-container));--foreground-color: rgb(var(--md-scheme-on-secondary-container));--border-radius: var(--md-border-radius-large)}:host:hover,:host:has(.md3-item-primary-action:hover){z-index:2}:host:focus,:host:has(.md3-item-primary-action:focus){z-index:3}:host.md3-slots-alignment-start{align-items:start}:host.md3-slots-alignment-center{align-items:center}:host.md3-slots-alignment-end{align-items:end}:host ::ng-deep [md3-list-slot=content]{flex:1 1 max-content;font-size:1em;line-height:1.5em;letter-spacing:.03125em;font-weight:400;color:rgb(var(--md-scheme-on-surface));pointer-events:none}:host ::ng-deep [md3-list-slot=trailing]{flex:0 1 max-content;display:inline-flex;align-items:center;font-size:.6875em;line-height:1.454545em;letter-spacing:.045455em;font-weight:500;pointer-events:none}:host ::ng-deep [md3-item-primary-action]{cursor:pointer;position:absolute;inset:0;font-size:1rem;border-radius:var(--border-radius);border:none;background-color:var(--background-color);z-index:-1}:host ::ng-deep [md3-item-primary-action].md3-disabled,:host ::ng-deep [md3-item-primary-action]:disabled{--background-color: transparent;--state-color: var(--md-scheme-on-surface);cursor:default!important}:host ::ng-deep [md3-item-primary-action].md3-disabled,:host ::ng-deep [md3-item-primary-action].md3-disabled~*,:host ::ng-deep [md3-item-primary-action]:disabled,:host ::ng-deep [md3-item-primary-action]:disabled~*{--foreground-color: rgb(var(--md-scheme-on-surface));--border-radius: var(--md-border-radius-medium);opacity:.38}:host.md3-disabled,:host:disabled{--background-color: transparent;--foreground-color: rgb(var(--md-scheme-on-surface));--border-radius: var(--md-border-radius-medium);cursor:default!important;opacity:.38}:host ::ng-deep input,:host ::ng-deep button,:host ::ng-deep a{pointer-events:all}\n"] }]
|
|
4812
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: StateComponent }, { type: i1.CdkDrag }, { type: List, decorators: [{
|
|
4813
|
+
type: Optional
|
|
4814
|
+
}] }], propDecorators: { slotsAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "slots-alignment", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], dragDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "drag-disabled", required: false }] }], checkbox: [{ type: i0.ContentChild, args: [i0.forwardRef(() => Checkbox), { isSignal: true }] }], radioButton: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RadioButton), { isSignal: true }] }], switch: [{ type: i0.ContentChild, args: [i0.forwardRef(() => Switch), { isSignal: true }] }], onFocusIn: [{
|
|
4787
4815
|
type: HostListener,
|
|
4788
4816
|
args: ['focusin', ['$event']]
|
|
4789
4817
|
}], onKeyDown: [{
|
|
@@ -5745,7 +5773,7 @@ class NavigationItem {
|
|
|
5745
5773
|
return this.el.nativeElement;
|
|
5746
5774
|
}
|
|
5747
5775
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: NavigationItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5748
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: NavigationItem, isStandalone: true, selector: "button[md3-nav-item], a[md3-nav-item]", inputs: { collapseMode: { classPropertyName: "collapseMode", publicName: "collapse-mode", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.md3-hide-on-collapse": "hideOnCollapse()", "class.md3-show-on-collapse": "showOnCollapse()", "class.md3-active": "this.active" } }, queries: [{ propertyName: "icons", predicate: IconElement, isSignal: true }, { propertyName: "badge", first: true, predicate: Badge, descendants: true, isSignal: true }], exportAs: ["md3NavItem"], hostDirectives: [{ directive: i1.RouterLinkActive, inputs: ["routerLinkActiveOptions", "routerLinkActiveOptions", "ariaCurrentWhenActive", "ariaCurrentWhenActive"] }], ngImport: i0, template: "<div class=\"md3-item-container\">\n @if (hasIcons()) {\n <div class=\"md3-icon-container\">\n <ng-content select=\"[md3-icon-element=active]\"></ng-content>\n <ng-content select=\"[md3-icon-element]\"></ng-content>\n </div>\n }\n <div class=\"md3-label\">\n <ng-content></ng-content>\n </div>\n @if (hasIcons() && badge()) {\n <div class=\"md3-badge-container\" [class.md3-small]=\"badge()?.isSmall()\">\n <ng-content select=\"md3-badge\"></ng-content>\n </div>\n }\n</div>", styles: [":host{--icon-color: rgb(var(--md-scheme-on-surface-variant));--label-color: rgb(var(--md-scheme-on-surface-variant));--state-color: rgb(var(--md-scheme-on-secondary-container));--active-indicator-color: transparent;font-size:1em;text-decoration:none;border:none;outline:none;cursor:pointer;position:relative;display:inline-flex;align-items:start;text-decoration:none!important;white-space:nowrap;background-color:transparent;padding:0;transform-origin:top;transition:all var(--md-motion-expressive-default-spatial-duration) var(--md-motion-expressive-default-spatial-easing);-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .md3-item-container{display:inline-flex;flex-direction:column;gap:.25em;position:relative;align-items:center;justify-content:center;padding:.375em 0;max-width:100%}:host .md3-item-container:before{content:\"\";position:absolute;top:.375em;height:2em;width:3.5em;border-radius:var(--md-border-radius-large);z-index:0;transition:all var(--md-motion-expressive-default-spatial-duration) var(--md-motion-expressive-default-spatial-easing);transform:scale(0);background-color:var(--active-indicator-color)}:host .md3-item-container:after{content:\"\";position:absolute;top:.375em;height:2em;width:3.5em;border-radius:var(--md-border-radius-large);z-index:1;transition:all var(--md-motion-expressive-default-spatial-duration) var(--md-motion-expressive-default-spatial-easing);transform:scale(0);opacity:0;background-color:var(--state-color)}:host .md3-label{font-size:.75em;font-weight:500;line-height:1.333333em;letter-spacing:.041667em;padding-inline:.666667em;overflow:hidden;z-index:2;max-width:100%;max-height:2.666667em;color:var(--label-color)}:host:hover .md3-item-container:after{transform:scale(1);opacity:.08}:host:focus .md3-item-container:after{transform:scale(1);opacity:.1}:host:active .md3-item-container:after{transform:scale(1);opacity:.1}:host .md3-icon-container{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.25em;z-index:2;color:var(--icon-color)}:host .md3-icon-container ::ng-deep [md3-icon-element]{font-size:1.5em!important;line-height:1;height:1em!important;width:1em!important}:host .md3-icon-container ::ng-deep [md3-icon-element=active]{display:none}:host .md3-badge-container{flex:0 0 auto;position:absolute;top:.5em;inset-inline-start:50%;display:inline-flex;align-items:start;justify-content:end;min-height:.875em;min-width:.875em;z-index:3}:host.md3-active{--icon-color: rgb(var(--md-scheme-secondary));--label-color: rgb(var(--md-scheme-on-secondary-container));--active-indicator-color: rgb(var(--md-scheme-secondary-container))}:host.md3-active .md3-icon-container ::ng-deep [md3-icon-element=active]{display:inline-block}:host.md3-active .md3-icon-container ::ng-deep [md3-icon-element=active]+[md3-icon-element]{display:none}:host.md3-active .md3-item-container:before{transform:scale(1)}\n"] });
|
|
5776
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: NavigationItem, isStandalone: true, selector: "button[md3-nav-item], a[md3-nav-item]", inputs: { collapseMode: { classPropertyName: "collapseMode", publicName: "collapse-mode", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.md3-hide-on-collapse": "hideOnCollapse()", "class.md3-show-on-collapse": "showOnCollapse()", "class.md3-active": "this.active" } }, queries: [{ propertyName: "icons", predicate: IconElement, isSignal: true }, { propertyName: "badge", first: true, predicate: Badge, descendants: true, isSignal: true }], exportAs: ["md3NavItem"], hostDirectives: [{ directive: i1$1.RouterLinkActive, inputs: ["routerLinkActiveOptions", "routerLinkActiveOptions", "ariaCurrentWhenActive", "ariaCurrentWhenActive"] }], ngImport: i0, template: "<div class=\"md3-item-container\">\n @if (hasIcons()) {\n <div class=\"md3-icon-container\">\n <ng-content select=\"[md3-icon-element=active]\"></ng-content>\n <ng-content select=\"[md3-icon-element]\"></ng-content>\n </div>\n }\n <div class=\"md3-label\">\n <ng-content></ng-content>\n </div>\n @if (hasIcons() && badge()) {\n <div class=\"md3-badge-container\" [class.md3-small]=\"badge()?.isSmall()\">\n <ng-content select=\"md3-badge\"></ng-content>\n </div>\n }\n</div>", styles: [":host{--icon-color: rgb(var(--md-scheme-on-surface-variant));--label-color: rgb(var(--md-scheme-on-surface-variant));--state-color: rgb(var(--md-scheme-on-secondary-container));--active-indicator-color: transparent;font-size:1em;text-decoration:none;border:none;outline:none;cursor:pointer;position:relative;display:inline-flex;align-items:start;text-decoration:none!important;white-space:nowrap;background-color:transparent;padding:0;transform-origin:top;transition:all var(--md-motion-expressive-default-spatial-duration) var(--md-motion-expressive-default-spatial-easing);-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .md3-item-container{display:inline-flex;flex-direction:column;gap:.25em;position:relative;align-items:center;justify-content:center;padding:.375em 0;max-width:100%}:host .md3-item-container:before{content:\"\";position:absolute;top:.375em;height:2em;width:3.5em;border-radius:var(--md-border-radius-large);z-index:0;transition:all var(--md-motion-expressive-default-spatial-duration) var(--md-motion-expressive-default-spatial-easing);transform:scale(0);background-color:var(--active-indicator-color)}:host .md3-item-container:after{content:\"\";position:absolute;top:.375em;height:2em;width:3.5em;border-radius:var(--md-border-radius-large);z-index:1;transition:all var(--md-motion-expressive-default-spatial-duration) var(--md-motion-expressive-default-spatial-easing);transform:scale(0);opacity:0;background-color:var(--state-color)}:host .md3-label{font-size:.75em;font-weight:500;line-height:1.333333em;letter-spacing:.041667em;padding-inline:.666667em;overflow:hidden;z-index:2;max-width:100%;max-height:2.666667em;color:var(--label-color)}:host:hover .md3-item-container:after{transform:scale(1);opacity:.08}:host:focus .md3-item-container:after{transform:scale(1);opacity:.1}:host:active .md3-item-container:after{transform:scale(1);opacity:.1}:host .md3-icon-container{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.25em;z-index:2;color:var(--icon-color)}:host .md3-icon-container ::ng-deep [md3-icon-element]{font-size:1.5em!important;line-height:1;height:1em!important;width:1em!important}:host .md3-icon-container ::ng-deep [md3-icon-element=active]{display:none}:host .md3-badge-container{flex:0 0 auto;position:absolute;top:.5em;inset-inline-start:50%;display:inline-flex;align-items:start;justify-content:end;min-height:.875em;min-width:.875em;z-index:3}:host.md3-active{--icon-color: rgb(var(--md-scheme-secondary));--label-color: rgb(var(--md-scheme-on-secondary-container));--active-indicator-color: rgb(var(--md-scheme-secondary-container))}:host.md3-active .md3-icon-container ::ng-deep [md3-icon-element=active]{display:inline-block}:host.md3-active .md3-icon-container ::ng-deep [md3-icon-element=active]+[md3-icon-element]{display:none}:host.md3-active .md3-item-container:before{transform:scale(1)}\n"] });
|
|
5749
5777
|
}
|
|
5750
5778
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: NavigationItem, decorators: [{
|
|
5751
5779
|
type: Component,
|
|
@@ -6119,6 +6147,13 @@ class MenuItem {
|
|
|
6119
6147
|
supportingText = input(null, { ...(ngDevMode ? { debugName: "supportingText" } : /* istanbul ignore next */ {}), alias: 'supporting-text' });
|
|
6120
6148
|
trailingText = input(null, { ...(ngDevMode ? { debugName: "trailingText" } : /* istanbul ignore next */ {}), alias: 'trailing-text' });
|
|
6121
6149
|
selected = model(null, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), alias: 'selected' });
|
|
6150
|
+
/**
|
|
6151
|
+
* When true (default), a click toggles the selected state of the item.
|
|
6152
|
+
* Set it to false when a parent owns the selection, for example md3-select-field.
|
|
6153
|
+
* The item then shows the bound selected value only.
|
|
6154
|
+
*/
|
|
6155
|
+
toggleOnClick = input(true, { ...(ngDevMode ? { debugName: "toggleOnClick" } : /* istanbul ignore next */ {}), alias: 'toggle-on-click',
|
|
6156
|
+
transform: booleanAttribute });
|
|
6122
6157
|
iconElements = contentChildren(IconElement, /* @ts-ignore */
|
|
6123
6158
|
...(ngDevMode ? [{ debugName: "iconElements" }] : /* istanbul ignore next */ []));
|
|
6124
6159
|
get leading() {
|
|
@@ -6132,7 +6167,7 @@ class MenuItem {
|
|
|
6132
6167
|
}
|
|
6133
6168
|
onHostClick() {
|
|
6134
6169
|
const selected = this.selected();
|
|
6135
|
-
if (selected === null) {
|
|
6170
|
+
if (selected === null || !this.toggleOnClick()) {
|
|
6136
6171
|
return;
|
|
6137
6172
|
}
|
|
6138
6173
|
this.selected.set(!selected);
|
|
@@ -6144,7 +6179,7 @@ class MenuItem {
|
|
|
6144
6179
|
return this.el.nativeElement;
|
|
6145
6180
|
}
|
|
6146
6181
|
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"] }] });
|
|
6182
|
+
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
6183
|
}
|
|
6149
6184
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MenuItem, decorators: [{
|
|
6150
6185
|
type: Component,
|
|
@@ -6158,7 +6193,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
6158
6193
|
], host: {
|
|
6159
6194
|
'(click)': 'onHostClick()',
|
|
6160
6195
|
}, 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 }] }] } });
|
|
6196
|
+
}], 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
6197
|
|
|
6163
6198
|
class SelectOptions {
|
|
6164
6199
|
options = input.required(/* @ts-ignore */
|
|
@@ -6190,14 +6225,14 @@ class SelectOptions {
|
|
|
6190
6225
|
this.selectionChange.emit(options.filter((item) => item.selected).map((item) => item.value));
|
|
6191
6226
|
}
|
|
6192
6227
|
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"] }] });
|
|
6228
|
+
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
6229
|
}
|
|
6195
6230
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SelectOptions, decorators: [{
|
|
6196
6231
|
type: Component,
|
|
6197
6232
|
args: [{ selector: 'md3-select-options', imports: [
|
|
6198
6233
|
MenuGroup,
|
|
6199
6234
|
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"] }]
|
|
6235
|
+
], 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
6236
|
}], 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
6237
|
|
|
6203
6238
|
const MENU_DATA = new InjectionToken('MD3_MENU_DATA');
|
|
@@ -7042,6 +7077,9 @@ class SelectField {
|
|
|
7042
7077
|
selectValues(values) {
|
|
7043
7078
|
this.setSelectedValues(this.normalizeValues(values));
|
|
7044
7079
|
this.commitValue();
|
|
7080
|
+
if (!this.multiple()) {
|
|
7081
|
+
this.closeMenu();
|
|
7082
|
+
}
|
|
7045
7083
|
}
|
|
7046
7084
|
setSelectedValues(values) {
|
|
7047
7085
|
const current = untracked(this.selectedValues);
|