@almoamendev/ngx-md3 0.8.6 → 0.8.7
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.
|
@@ -5713,10 +5713,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
5713
5713
|
class NavigationItem {
|
|
5714
5714
|
el = inject((ElementRef));
|
|
5715
5715
|
routerLinkActive = inject(RouterLinkActive);
|
|
5716
|
-
|
|
5717
|
-
hideOnCollapse = computed(() => this.
|
|
5716
|
+
collapseMode = input('none', { ...(ngDevMode ? { debugName: "collapseMode" } : /* istanbul ignore next */ {}), alias: 'collapse-mode' });
|
|
5717
|
+
hideOnCollapse = computed(() => this.collapseMode() == 'hide', /* @ts-ignore */
|
|
5718
5718
|
...(ngDevMode ? [{ debugName: "hideOnCollapse" }] : /* istanbul ignore next */ []));
|
|
5719
|
-
showOnCollapse = computed(() => this.
|
|
5719
|
+
showOnCollapse = computed(() => this.collapseMode() == 'show', /* @ts-ignore */
|
|
5720
5720
|
...(ngDevMode ? [{ debugName: "showOnCollapse" }] : /* istanbul ignore next */ []));
|
|
5721
5721
|
icons = contentChildren(IconElement, /* @ts-ignore */
|
|
5722
5722
|
...(ngDevMode ? [{ debugName: "icons" }] : /* istanbul ignore next */ []));
|
|
@@ -5734,7 +5734,7 @@ class NavigationItem {
|
|
|
5734
5734
|
return this.el.nativeElement;
|
|
5735
5735
|
}
|
|
5736
5736
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: NavigationItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5737
|
-
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: {
|
|
5737
|
+
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"] });
|
|
5738
5738
|
}
|
|
5739
5739
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: NavigationItem, decorators: [{
|
|
5740
5740
|
type: Component,
|
|
@@ -5747,7 +5747,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
5747
5747
|
inputs: ['routerLinkActiveOptions', 'ariaCurrentWhenActive'],
|
|
5748
5748
|
}
|
|
5749
5749
|
], 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"] }]
|
|
5750
|
-
}], propDecorators: {
|
|
5750
|
+
}], propDecorators: { collapseMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapse-mode", required: false }] }], icons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IconElement), { isSignal: true }] }], badge: [{ type: i0.ContentChild, args: [i0.forwardRef(() => Badge), { isSignal: true }] }], active: [{
|
|
5751
5751
|
type: HostBinding,
|
|
5752
5752
|
args: ['class.md3-active']
|
|
5753
5753
|
}] } });
|
|
@@ -5756,16 +5756,16 @@ class NavigationGroup {
|
|
|
5756
5756
|
el = inject((ElementRef));
|
|
5757
5757
|
label = input(/* @ts-ignore */
|
|
5758
5758
|
...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
5759
|
-
|
|
5760
|
-
hideOnCollapse = computed(() => this.
|
|
5759
|
+
collapseMode = input('none', { ...(ngDevMode ? { debugName: "collapseMode" } : /* istanbul ignore next */ {}), alias: 'collapse-mode' });
|
|
5760
|
+
hideOnCollapse = computed(() => this.collapseMode() == 'hide', /* @ts-ignore */
|
|
5761
5761
|
...(ngDevMode ? [{ debugName: "hideOnCollapse" }] : /* istanbul ignore next */ []));
|
|
5762
|
-
showOnCollapse = computed(() => this.
|
|
5762
|
+
showOnCollapse = computed(() => this.collapseMode() == 'show', /* @ts-ignore */
|
|
5763
5763
|
...(ngDevMode ? [{ debugName: "showOnCollapse" }] : /* istanbul ignore next */ []));
|
|
5764
5764
|
get element() {
|
|
5765
5765
|
return this.el.nativeElement;
|
|
5766
5766
|
}
|
|
5767
5767
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: NavigationGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5768
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: NavigationGroup, isStandalone: true, selector: "md3-nav-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null },
|
|
5768
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: NavigationGroup, isStandalone: true, selector: "md3-nav-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, 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()" } }, ngImport: i0, template: "@if (label()?.length) {\n <div class=\"md3-nav-label\">\n <md3-type-label size=\"large\">{{ label() }}</md3-type-label>\n </div>\n}\n<ng-content select=\"[md3-nav-item]\"></ng-content>", styles: [":host{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:100%;transform-origin:top;transition:all var(--md-motion-expressive-default-spatial-duration) var(--md-motion-expressive-default-spatial-easing)}:host .md3-nav-label{padding-block:1em;padding-inline:2.25em 1.25em;white-space:nowrap;transform-origin:top}\n"], dependencies: [{ kind: "directive", type: TypeLabel, selector: "md3-type-label, [md3-type-label]", inputs: ["size", "color", "emphasized"] }] });
|
|
5769
5769
|
}
|
|
5770
5770
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: NavigationGroup, decorators: [{
|
|
5771
5771
|
type: Component,
|
|
@@ -5775,7 +5775,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
|
|
|
5775
5775
|
'[class.md3-hide-on-collapse]': 'hideOnCollapse()',
|
|
5776
5776
|
'[class.md3-show-on-collapse]': 'showOnCollapse()',
|
|
5777
5777
|
}, template: "@if (label()?.length) {\n <div class=\"md3-nav-label\">\n <md3-type-label size=\"large\">{{ label() }}</md3-type-label>\n </div>\n}\n<ng-content select=\"[md3-nav-item]\"></ng-content>", styles: [":host{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:100%;transform-origin:top;transition:all var(--md-motion-expressive-default-spatial-duration) var(--md-motion-expressive-default-spatial-easing)}:host .md3-nav-label{padding-block:1em;padding-inline:2.25em 1.25em;white-space:nowrap;transform-origin:top}\n"] }]
|
|
5778
|
-
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }],
|
|
5778
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], collapseMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapse-mode", required: false }] }] } });
|
|
5779
5779
|
|
|
5780
5780
|
class NavigationRail {
|
|
5781
5781
|
el = inject((ElementRef));
|