@almoamendev/ngx-md3 0.8.10 → 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,
|