@siemens/element-ng 49.8.0 → 49.9.0
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.
- package/fesm2022/siemens-element-ng-application-header.mjs +2 -2
- package/fesm2022/siemens-element-ng-application-header.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-avatar.mjs +2 -2
- package/fesm2022/siemens-element-ng-avatar.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-breadcrumb-router.mjs +6 -2
- package/fesm2022/siemens-element-ng-breadcrumb-router.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-circle-status.mjs +2 -2
- package/fesm2022/siemens-element-ng-circle-status.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-dashboard.mjs +8 -5
- package/fesm2022/siemens-element-ng-dashboard.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-datatable.mjs +10 -19
- package/fesm2022/siemens-element-ng-datatable.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-datepicker.mjs +6 -6
- package/fesm2022/siemens-element-ng-datepicker.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-file-uploader.mjs +2 -2
- package/fesm2022/siemens-element-ng-file-uploader.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-form.mjs +8 -10
- package/fesm2022/siemens-element-ng-form.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-header-dropdown.mjs +19 -55
- package/fesm2022/siemens-element-ng-header-dropdown.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-menu.mjs +5 -7
- package/fesm2022/siemens-element-ng-menu.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-navbar-vertical-next.mjs +90 -49
- package/fesm2022/siemens-element-ng-navbar-vertical-next.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-navbar-vertical.mjs +25 -29
- package/fesm2022/siemens-element-ng-navbar-vertical.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-select.mjs +455 -48
- package/fesm2022/siemens-element-ng-select.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-side-panel.mjs +2 -2
- package/fesm2022/siemens-element-ng-side-panel.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-slider.mjs +2 -2
- package/fesm2022/siemens-element-ng-slider.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-status-toggle.mjs +2 -2
- package/fesm2022/siemens-element-ng-status-toggle.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-translate.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-tree-view.mjs +52 -30
- package/fesm2022/siemens-element-ng-tree-view.mjs.map +1 -1
- package/package.json +3 -3
- package/template-i18n.json +1 -0
- package/types/siemens-element-ng-breadcrumb-router.d.ts +6 -2
- package/types/siemens-element-ng-dashboard.d.ts +2 -1
- package/types/siemens-element-ng-datatable.d.ts +0 -1
- package/types/siemens-element-ng-form.d.ts +1 -1
- package/types/siemens-element-ng-header-dropdown.d.ts +0 -8
- package/types/siemens-element-ng-navbar-vertical-next.d.ts +29 -8
- package/types/siemens-element-ng-navbar-vertical.d.ts +2 -1
- package/types/siemens-element-ng-select.d.ts +241 -2
- package/types/siemens-element-ng-translate.d.ts +1 -0
- package/types/siemens-element-ng-tree-view.d.ts +4 -5
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { ChangeDetectionStrategy, Component, InjectionToken, model, input, booleanAttribute, inject, signal,
|
|
2
|
+
import { ChangeDetectionStrategy, Component, InjectionToken, model, input, booleanAttribute, inject, Injector, signal, afterNextRender, linkedSignal, untracked, computed, ViewContainerRef, effect, Directive, output, viewChild, NgModule } from '@angular/core';
|
|
3
3
|
import { BreakpointObserver } from '@angular/cdk/layout';
|
|
4
4
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
5
|
-
import { elementDoubleRight, elementDoubleLeft, elementDown2, elementSearch } from '@siemens/element-icons';
|
|
5
|
+
import { elementDoubleRight, elementDoubleLeft, elementRight2, elementDown2, elementSearch } from '@siemens/element-icons';
|
|
6
6
|
import { SI_UI_STATE_SERVICE } from '@siemens/element-ng/common';
|
|
7
7
|
import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
|
|
8
8
|
import { BOOTSTRAP_BREAKPOINTS } from '@siemens/element-ng/resize-observer';
|
|
@@ -59,6 +59,14 @@ class SiNavbarVerticalNextComponent {
|
|
|
59
59
|
* @defaultValue false
|
|
60
60
|
*/
|
|
61
61
|
textOnly = input(false, { ...(ngDevMode ? { debugName: "textOnly" } : {}), transform: booleanAttribute });
|
|
62
|
+
/**
|
|
63
|
+
* When `true`, item-groups always open as a transient flyout panel adjacent to the
|
|
64
|
+
* trigger, regardless of whether the navbar is collapsed or expanded.
|
|
65
|
+
* Flyouts open and close on click.
|
|
66
|
+
*
|
|
67
|
+
* @defaultValue false
|
|
68
|
+
*/
|
|
69
|
+
alwaysFlyout = input(false, { ...(ngDevMode ? { debugName: "alwaysFlyout" } : {}), transform: booleanAttribute });
|
|
62
70
|
/**
|
|
63
71
|
* List of vertical navigation items
|
|
64
72
|
*
|
|
@@ -103,6 +111,8 @@ class SiNavbarVerticalNextComponent {
|
|
|
103
111
|
skipLinkMainContentLabel = input(t(() => $localize `:@@SI_NAVBAR_VERTICAL.SKIP_LINK.MAIN_LABEL:Main content`), ...(ngDevMode ? [{ debugName: "skipLinkMainContentLabel" }] : []));
|
|
104
112
|
uiStateService = inject(SI_UI_STATE_SERVICE, { optional: true });
|
|
105
113
|
breakpointObserver = inject(BreakpointObserver);
|
|
114
|
+
injector = inject(Injector);
|
|
115
|
+
ready = signal(false, ...(ngDevMode ? [{ debugName: "ready" }] : []));
|
|
106
116
|
smallScreen = signal(false, ...(ngDevMode ? [{ debugName: "smallScreen" }] : []));
|
|
107
117
|
/**
|
|
108
118
|
* @defaultValue
|
|
@@ -138,8 +148,12 @@ class SiNavbarVerticalNextComponent {
|
|
|
138
148
|
this.uiStateExpandedItems.set(uiState.expandedItems);
|
|
139
149
|
}
|
|
140
150
|
}
|
|
151
|
+
afterNextRender(() => this.ready.set(true), { injector: this.injector });
|
|
141
152
|
});
|
|
142
153
|
}
|
|
154
|
+
else {
|
|
155
|
+
this.ready.set(true);
|
|
156
|
+
}
|
|
143
157
|
}
|
|
144
158
|
toggleCollapse() {
|
|
145
159
|
if (this.collapsed()) {
|
|
@@ -189,7 +203,7 @@ class SiNavbarVerticalNextComponent {
|
|
|
189
203
|
}
|
|
190
204
|
}
|
|
191
205
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
192
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiNavbarVerticalNextComponent, isStandalone: true, selector: "si-navbar-vertical-next", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, textOnly: { classPropertyName: "textOnly", publicName: "textOnly", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, toggleButtonText: { classPropertyName: "toggleButtonText", publicName: "toggleButtonText", isSignal: true, isRequired: false, transformFunction: null }, stateId: { classPropertyName: "stateId", publicName: "stateId", isSignal: true, isRequired: false, transformFunction: null }, skipLinkNavigationLabel: { classPropertyName: "skipLinkNavigationLabel", publicName: "skipLinkNavigationLabel", isSignal: true, isRequired: false, transformFunction: null }, skipLinkMainContentLabel: { classPropertyName: "skipLinkMainContentLabel", publicName: "skipLinkMainContentLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { properties: { "class.nav-collapsed": "collapsed()", "class.nav-text-only": "textOnly()", "class.visible": "visible()" }, classAttribute: "si-layout-inner ready" }, providers: [{ provide: SI_NAVBAR_VERTICAL_NEXT, useExisting: SiNavbarVerticalNextComponent }], usesOnChanges: true, ngImport: i0, template: "@if (visible()) {\n @if (smallScreen() && !collapsed()) {\n <div class=\"modal-backdrop\" animate.leave=\"backdrop-leave\" (click)=\"toggleCollapse()\"></div>\n }\n <nav\n tabindex=\"-1\"\n class=\"bg-base-1 focus-sub-inside\"\n [class.expanded]=\"!collapsed()\"\n [siSkipLinkTarget]=\"skipLinkNavigationLabel()\"\n [class.text-only]=\"textOnly()\"\n >\n <div class=\"collapse-toggle ms-auto\">\n <div class=\"mobile-drawer focus-inside navbar-vertical-no-collapse\">\n <button\n type=\"button\"\n class=\"btn btn-icon btn-tertiary-ghost\"\n [attr.aria-label]=\"toggleButtonText() | translate\"\n [attr.aria-expanded]=\"!collapsed()\"\n (click)=\"toggleCollapse()\"\n >\n <si-icon\n class=\"flip-rtl\"\n [icon]=\"collapsed() ? icons.elementDoubleRight : icons.elementDoubleLeft\"\n />\n </button>\n </div>\n </div>\n <ng-content select=\"si-navbar-vertical-next-search\" />\n <ng-content select=\"si-navbar-vertical-next-items\" />\n <ng-content select=\"si-navbar-vertical-next-footer-items\" />\n </nav>\n}\n<main\n class=\"si-layout-inner focus-none\"\n tabindex=\"-1\"\n [siSkipLinkTarget]=\"skipLinkMainContentLabel()\"\n>\n <ng-content />\n</main>\n", styles: [":host{display:block
|
|
206
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiNavbarVerticalNextComponent, isStandalone: true, selector: "si-navbar-vertical-next", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, textOnly: { classPropertyName: "textOnly", publicName: "textOnly", isSignal: true, isRequired: false, transformFunction: null }, alwaysFlyout: { classPropertyName: "alwaysFlyout", publicName: "alwaysFlyout", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, toggleButtonText: { classPropertyName: "toggleButtonText", publicName: "toggleButtonText", isSignal: true, isRequired: false, transformFunction: null }, stateId: { classPropertyName: "stateId", publicName: "stateId", isSignal: true, isRequired: false, transformFunction: null }, skipLinkNavigationLabel: { classPropertyName: "skipLinkNavigationLabel", publicName: "skipLinkNavigationLabel", isSignal: true, isRequired: false, transformFunction: null }, skipLinkMainContentLabel: { classPropertyName: "skipLinkMainContentLabel", publicName: "skipLinkMainContentLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { properties: { "class.nav-collapsed": "collapsed()", "class.nav-text-only": "textOnly()", "class.visible": "visible()", "class.ready": "ready()" }, classAttribute: "si-layout-inner ready" }, providers: [{ provide: SI_NAVBAR_VERTICAL_NEXT, useExisting: SiNavbarVerticalNextComponent }], usesOnChanges: true, ngImport: i0, template: "@if (visible()) {\n @if (smallScreen() && !collapsed()) {\n <div class=\"modal-backdrop\" animate.leave=\"backdrop-leave\" (click)=\"toggleCollapse()\"></div>\n }\n <nav\n tabindex=\"-1\"\n class=\"bg-base-1 focus-sub-inside\"\n [class.expanded]=\"!collapsed()\"\n [siSkipLinkTarget]=\"skipLinkNavigationLabel()\"\n [class.text-only]=\"textOnly()\"\n >\n <div class=\"collapse-toggle ms-auto\">\n <div class=\"mobile-drawer focus-inside navbar-vertical-no-collapse\">\n <button\n type=\"button\"\n class=\"btn btn-icon btn-tertiary-ghost\"\n [attr.aria-label]=\"toggleButtonText() | translate\"\n [attr.aria-expanded]=\"!collapsed()\"\n (click)=\"toggleCollapse()\"\n >\n <si-icon\n class=\"flip-rtl\"\n [icon]=\"collapsed() ? icons.elementDoubleRight : icons.elementDoubleLeft\"\n />\n </button>\n </div>\n </div>\n <ng-content select=\"si-navbar-vertical-next-search\" />\n <ng-content select=\"si-navbar-vertical-next-items\" />\n <ng-content select=\"si-navbar-vertical-next-footer-items\" />\n </nav>\n}\n<main\n class=\"si-layout-inner focus-none\"\n tabindex=\"-1\"\n [siSkipLinkTarget]=\"skipLinkMainContentLabel()\"\n>\n <ng-content />\n</main>\n", styles: [":host{display:block;--si-layout-header-first-element-offset: 40px}:host.ready:not(.visible){padding-inline-start:0!important}:host.ready{transition:padding-inline-start calc(.5s * var(--element-animations-enabled, 1))}nav{display:flex;flex-direction:column;position:fixed;z-index:1031;inset-block-start:calc(1.5rem + 25px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px));inset-block-end:0;inset-inline-start:0;inline-size:0;transition:inline-size calc(.5s * var(--element-animations-enabled, 1)) ease}:host(.nav-collapsed) nav{z-index:1030}nav.expanded{inline-size:240px}.mobile-drawer{display:block;text-align:end;border:0;inline-size:calc(1.5rem + 24px);color:var(--element-text-primary);padding-block:4px;padding-inline:8px;margin-block-start:8px;border-start-end-radius:var(--element-radius-2);border-end-end-radius:var(--element-radius-2);transition:inline-size calc(.5s * var(--element-animations-enabled, 1)) ease,background-color calc(.5s * var(--element-animations-enabled, 1)) ease,box-shadow calc(.5s * var(--element-animations-enabled, 1)) ease}:host(:not(.nav-collapsed)) .mobile-drawer{inline-size:240px}:host.nav-collapsed .mobile-drawer{border:0;color:var(--element-text-primary);background:var(--element-base-1);text-align:end;box-shadow:0 0 4px var(--element-box-shadow-color-1),0 4px 4px var(--element-box-shadow-color-2)}.modal-backdrop{z-index:1031;transition:opacity calc(.15s * var(--element-animations-enabled, 1)) linear;opacity:1}@starting-style{.modal-backdrop{opacity:0}}.modal-backdrop.backdrop-leave{opacity:0}@media(min-width:576px){:host:not(.nav-text-only),:host:not(.nav-collapsed){--si-layout-header-first-element-offset: 0}:host:not(.nav-text-only){padding-inline-start:calc(1.5rem + 24px)}:host:not(.nav-text-only) .mobile-drawer{background:transparent;box-shadow:none}:host:not(.nav-text-only) nav{inline-size:calc(1.5rem + 24px)}:host:not(.nav-text-only) nav.expanded{inline-size:240px}}@media(min-width:992px){:host:not(.nav-collapsed){padding-inline-start:240px}}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: SiSkipLinkTargetDirective, selector: "[siSkipLinkTarget]", inputs: ["siSkipLinkTarget"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
193
207
|
}
|
|
194
208
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextComponent, decorators: [{
|
|
195
209
|
type: Component,
|
|
@@ -197,9 +211,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
197
211
|
class: 'si-layout-inner ready',
|
|
198
212
|
'[class.nav-collapsed]': 'collapsed()',
|
|
199
213
|
'[class.nav-text-only]': 'textOnly()',
|
|
200
|
-
'[class.visible]': 'visible()'
|
|
201
|
-
|
|
202
|
-
|
|
214
|
+
'[class.visible]': 'visible()',
|
|
215
|
+
'[class.ready]': 'ready()'
|
|
216
|
+
}, template: "@if (visible()) {\n @if (smallScreen() && !collapsed()) {\n <div class=\"modal-backdrop\" animate.leave=\"backdrop-leave\" (click)=\"toggleCollapse()\"></div>\n }\n <nav\n tabindex=\"-1\"\n class=\"bg-base-1 focus-sub-inside\"\n [class.expanded]=\"!collapsed()\"\n [siSkipLinkTarget]=\"skipLinkNavigationLabel()\"\n [class.text-only]=\"textOnly()\"\n >\n <div class=\"collapse-toggle ms-auto\">\n <div class=\"mobile-drawer focus-inside navbar-vertical-no-collapse\">\n <button\n type=\"button\"\n class=\"btn btn-icon btn-tertiary-ghost\"\n [attr.aria-label]=\"toggleButtonText() | translate\"\n [attr.aria-expanded]=\"!collapsed()\"\n (click)=\"toggleCollapse()\"\n >\n <si-icon\n class=\"flip-rtl\"\n [icon]=\"collapsed() ? icons.elementDoubleRight : icons.elementDoubleLeft\"\n />\n </button>\n </div>\n </div>\n <ng-content select=\"si-navbar-vertical-next-search\" />\n <ng-content select=\"si-navbar-vertical-next-items\" />\n <ng-content select=\"si-navbar-vertical-next-footer-items\" />\n </nav>\n}\n<main\n class=\"si-layout-inner focus-none\"\n tabindex=\"-1\"\n [siSkipLinkTarget]=\"skipLinkMainContentLabel()\"\n>\n <ng-content />\n</main>\n", styles: [":host{display:block;--si-layout-header-first-element-offset: 40px}:host.ready:not(.visible){padding-inline-start:0!important}:host.ready{transition:padding-inline-start calc(.5s * var(--element-animations-enabled, 1))}nav{display:flex;flex-direction:column;position:fixed;z-index:1031;inset-block-start:calc(1.5rem + 25px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px));inset-block-end:0;inset-inline-start:0;inline-size:0;transition:inline-size calc(.5s * var(--element-animations-enabled, 1)) ease}:host(.nav-collapsed) nav{z-index:1030}nav.expanded{inline-size:240px}.mobile-drawer{display:block;text-align:end;border:0;inline-size:calc(1.5rem + 24px);color:var(--element-text-primary);padding-block:4px;padding-inline:8px;margin-block-start:8px;border-start-end-radius:var(--element-radius-2);border-end-end-radius:var(--element-radius-2);transition:inline-size calc(.5s * var(--element-animations-enabled, 1)) ease,background-color calc(.5s * var(--element-animations-enabled, 1)) ease,box-shadow calc(.5s * var(--element-animations-enabled, 1)) ease}:host(:not(.nav-collapsed)) .mobile-drawer{inline-size:240px}:host.nav-collapsed .mobile-drawer{border:0;color:var(--element-text-primary);background:var(--element-base-1);text-align:end;box-shadow:0 0 4px var(--element-box-shadow-color-1),0 4px 4px var(--element-box-shadow-color-2)}.modal-backdrop{z-index:1031;transition:opacity calc(.15s * var(--element-animations-enabled, 1)) linear;opacity:1}@starting-style{.modal-backdrop{opacity:0}}.modal-backdrop.backdrop-leave{opacity:0}@media(min-width:576px){:host:not(.nav-text-only),:host:not(.nav-collapsed){--si-layout-header-first-element-offset: 0}:host:not(.nav-text-only){padding-inline-start:calc(1.5rem + 24px)}:host:not(.nav-text-only) .mobile-drawer{background:transparent;box-shadow:none}:host:not(.nav-text-only) nav{inline-size:calc(1.5rem + 24px)}:host:not(.nav-text-only) nav.expanded{inline-size:240px}}@media(min-width:992px){:host:not(.nav-collapsed){padding-inline-start:240px}}\n"] }]
|
|
217
|
+
}], ctorParameters: () => [], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], textOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "textOnly", required: false }] }], alwaysFlyout: [{ type: i0.Input, args: [{ isSignal: true, alias: "alwaysFlyout", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], toggleButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleButtonText", required: false }] }], stateId: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateId", required: false }] }], skipLinkNavigationLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipLinkNavigationLabel", required: false }] }], skipLinkMainContentLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipLinkMainContentLabel", required: false }] }] } });
|
|
203
218
|
|
|
204
219
|
/**
|
|
205
220
|
* Copyright (c) Siemens 2016 - 2026
|
|
@@ -272,17 +287,42 @@ class SiNavbarVerticalNextGroupTriggerDirective {
|
|
|
272
287
|
/** @defaultValue false */
|
|
273
288
|
expanded = linkedSignal({ ...(ngDevMode ? { debugName: "expanded" } : {}), source: () => {
|
|
274
289
|
const stateId = this.stateId();
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
290
|
+
return {
|
|
291
|
+
uiState: stateId ? this.navbar.uiStateExpandedItems()[stateId] : undefined,
|
|
292
|
+
alwaysFlyout: this.navbar.alwaysFlyout()
|
|
293
|
+
};
|
|
279
294
|
},
|
|
280
|
-
computation: source =>
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
295
|
+
computation: (source, previous) => {
|
|
296
|
+
// `alwaysFlyout` toggled: reset expansion. When switching back to inline,
|
|
297
|
+
// surface the group that owns the active route.
|
|
298
|
+
if (previous && source.alwaysFlyout !== previous.source.alwaysFlyout) {
|
|
299
|
+
return !source.alwaysFlyout && untracked(() => this.active());
|
|
300
|
+
}
|
|
301
|
+
// First run or UIState (re)loaded: honor the persisted value when present,
|
|
302
|
+
// otherwise keep the user's current expansion.
|
|
303
|
+
if (source.uiState !== undefined) {
|
|
304
|
+
return source.uiState;
|
|
305
|
+
}
|
|
306
|
+
return previous?.value ?? false;
|
|
307
|
+
} });
|
|
308
|
+
/**
|
|
309
|
+
* Whether the group is currently rendered as a transient flyout overlay
|
|
310
|
+
* (true) or inline within the navbar (false). Automatically resets to
|
|
311
|
+
* `false` whenever the rendering mode changes.
|
|
312
|
+
* @internal
|
|
313
|
+
*/
|
|
314
|
+
flyout = linkedSignal({ ...(ngDevMode ? { debugName: "flyout" } : {}), source: () => this.flyoutMode(),
|
|
315
|
+
computation: () => false });
|
|
316
|
+
/**
|
|
317
|
+
* Whether the open flyout overlay currently contains the active route.
|
|
318
|
+
* Reset together with `flyout` so it never lingers across mode changes.
|
|
319
|
+
* @internal
|
|
320
|
+
*/
|
|
321
|
+
active = linkedSignal({ ...(ngDevMode ? { debugName: "active" } : {}), source: () => this.flyout(),
|
|
322
|
+
computation: (open, previous) => (open ? (previous?.value ?? false) : false) });
|
|
285
323
|
navbar = inject(SI_NAVBAR_VERTICAL_NEXT);
|
|
324
|
+
/** @internal */
|
|
325
|
+
flyoutMode = computed(() => this.navbar.alwaysFlyout() || this.navbar.collapsed(), ...(ngDevMode ? [{ debugName: "flyoutMode" }] : []));
|
|
286
326
|
flyoutOutsideClickSubscription;
|
|
287
327
|
viewContainer = inject(ViewContainerRef);
|
|
288
328
|
overlay = inject(Overlay);
|
|
@@ -300,33 +340,27 @@ class SiNavbarVerticalNextGroupTriggerDirective {
|
|
|
300
340
|
flyoutAnchorComponentRef;
|
|
301
341
|
templatePortal = computed(() => new TemplatePortal(this.groupTemplate(), this.viewContainer, undefined, this.injector), ...(ngDevMode ? [{ debugName: "templatePortal" }] : []));
|
|
302
342
|
constructor() {
|
|
303
|
-
//
|
|
343
|
+
// Manage the rendering of the inline projection / flyout overlay in
|
|
344
|
+
// response to mode changes. Only side effects belong here; the related
|
|
345
|
+
// signal state is propagated by `flyout` / `expanded` linked signals.
|
|
304
346
|
effect(() => {
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
untracked(() => this.expanded.set(state));
|
|
311
|
-
}
|
|
347
|
+
this.flyoutMode();
|
|
348
|
+
untracked(() => {
|
|
349
|
+
this.detachFlyout();
|
|
350
|
+
this.attachInline();
|
|
351
|
+
});
|
|
312
352
|
});
|
|
313
353
|
}
|
|
314
|
-
ngOnInit() {
|
|
315
|
-
this.attachInline();
|
|
316
|
-
}
|
|
317
354
|
/** @internal */
|
|
318
355
|
hideFlyout() {
|
|
319
|
-
if (this.flyout())
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
this.attachInline();
|
|
325
|
-
this.flyoutOutsideClickSubscription?.unsubscribe();
|
|
326
|
-
}
|
|
356
|
+
if (!this.flyout())
|
|
357
|
+
return;
|
|
358
|
+
this.flyout.set(false);
|
|
359
|
+
this.detachFlyout();
|
|
360
|
+
this.attachInline();
|
|
327
361
|
}
|
|
328
362
|
triggered() {
|
|
329
|
-
if (this.
|
|
363
|
+
if (this.flyoutMode()) {
|
|
330
364
|
this.toggleFlyout();
|
|
331
365
|
}
|
|
332
366
|
else {
|
|
@@ -345,13 +379,13 @@ class SiNavbarVerticalNextGroupTriggerDirective {
|
|
|
345
379
|
}
|
|
346
380
|
attachInline() {
|
|
347
381
|
this.overlayRef.detach();
|
|
348
|
-
this.groupView?.destroy();
|
|
382
|
+
this.groupView?.destroy();
|
|
349
383
|
this.groupView = this.viewContainer.createEmbeddedView(this.groupTemplate(), undefined, {
|
|
350
384
|
injector: this.injector
|
|
351
385
|
});
|
|
352
386
|
}
|
|
353
387
|
attachFlyout() {
|
|
354
|
-
this.groupView
|
|
388
|
+
this.groupView?.destroy();
|
|
355
389
|
this.groupView = this.overlayRef.attach(this.templatePortal());
|
|
356
390
|
this.flyoutAnchorComponentRef = this.viewContainer.createComponent(SiNavbarFlyoutAnchorComponent);
|
|
357
391
|
this.flyoutAnchorComponentRef.setInput('groupId', this.groupId);
|
|
@@ -359,6 +393,12 @@ class SiNavbarVerticalNextGroupTriggerDirective {
|
|
|
359
393
|
.outsidePointerEvents()
|
|
360
394
|
.subscribe(() => this.hideFlyout());
|
|
361
395
|
}
|
|
396
|
+
detachFlyout() {
|
|
397
|
+
this.flyoutAnchorComponentRef?.destroy();
|
|
398
|
+
this.flyoutAnchorComponentRef = undefined;
|
|
399
|
+
this.flyoutOutsideClickSubscription?.unsubscribe();
|
|
400
|
+
this.flyoutOutsideClickSubscription = undefined;
|
|
401
|
+
}
|
|
362
402
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextGroupTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
363
403
|
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: SiNavbarVerticalNextGroupTriggerDirective, isStandalone: true, selector: "button[siNavbarVerticalNextGroupTriggerFor]", inputs: { groupTemplate: { classPropertyName: "groupTemplate", publicName: "siNavbarVerticalNextGroupTriggerFor", isSignal: true, isRequired: true, transformFunction: null }, stateId: { classPropertyName: "stateId", publicName: "stateId", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "triggered()" }, properties: { "id": "id", "class.show": "expanded()", "attr.aria-controls": "groupId", "attr.aria-expanded": "expanded()" }, classAttribute: "dropdown-toggle" }, ngImport: i0 });
|
|
364
404
|
}
|
|
@@ -386,10 +426,8 @@ class SiNavbarVerticalNextGroupComponent {
|
|
|
386
426
|
navbar = inject(SI_NAVBAR_VERTICAL_NEXT);
|
|
387
427
|
groupTrigger = inject(SiNavbarVerticalNextGroupTriggerDirective);
|
|
388
428
|
routerLinkActive = inject(RouterLinkActive, { optional: true });
|
|
389
|
-
// Store initial value, as the mode for an instance never changes.
|
|
390
|
-
flyout = this.groupTrigger.flyout();
|
|
391
429
|
visible = computed(() => {
|
|
392
|
-
return this.flyout || (!this.navbar.collapsed() && this.groupTrigger.expanded());
|
|
430
|
+
return this.groupTrigger.flyout() || (!this.navbar.collapsed() && this.groupTrigger.expanded());
|
|
393
431
|
}, ...(ngDevMode ? [{ debugName: "visible" }] : []));
|
|
394
432
|
constructor() {
|
|
395
433
|
this.routerLinkActive?.isActiveChange
|
|
@@ -401,6 +439,7 @@ class SiNavbarVerticalNextGroupComponent {
|
|
|
401
439
|
}
|
|
402
440
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
403
441
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiNavbarVerticalNextGroupComponent, isStandalone: true, selector: "si-navbar-vertical-next-group", host: { attributes: { "role": "group", "animate.enter": "component-enter" }, listeners: { "keydown.escape": "close()" }, properties: { "id": "groupTrigger.groupId", "attr.aria-labelledby": "groupTrigger.id" } }, ngImport: i0, template: `@if (visible()) {
|
|
442
|
+
@let flyout = groupTrigger.flyout();
|
|
404
443
|
<div
|
|
405
444
|
animate.leave="group-leave"
|
|
406
445
|
[class.inline-group]="!flyout"
|
|
@@ -417,6 +456,7 @@ class SiNavbarVerticalNextGroupComponent {
|
|
|
417
456
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextGroupComponent, decorators: [{
|
|
418
457
|
type: Component,
|
|
419
458
|
args: [{ selector: 'si-navbar-vertical-next-group', imports: [CdkTrapFocus], template: `@if (visible()) {
|
|
459
|
+
@let flyout = groupTrigger.flyout();
|
|
420
460
|
<div
|
|
421
461
|
animate.leave="group-leave"
|
|
422
462
|
[class.inline-group]="!flyout"
|
|
@@ -453,7 +493,7 @@ class SiNavbarVerticalNextHeaderComponent {
|
|
|
453
493
|
} @else {
|
|
454
494
|
<si-navbar-vertical-next-divider class="divider" animate.leave="divider-leave" />
|
|
455
495
|
}
|
|
456
|
-
`, isInline: true, styles: [".divider,.title{opacity:1;transition:opacity calc(.25s * var(--element-animations-enabled, 1)) calc(.25s * var(--element-animations-enabled, 1)) ease-out}@starting-style{.divider,.title{opacity:0}}:host{display:flex;align-items:center;block-size:
|
|
496
|
+
`, isInline: true, styles: [".divider,.title{opacity:1;transition:opacity calc(.25s * var(--element-animations-enabled, 1)) calc(.25s * var(--element-animations-enabled, 1)) ease-out}@starting-style{.divider,.title{opacity:0}}:host{display:flex;align-items:center;block-size:calc(1lh + 24px);transition:block-size calc(.5s * var(--element-animations-enabled, 1)) ease-out}:host.collapsed{block-size:13px}:host.component-enter{transition:none}:host.component-enter .title,:host.component-enter .divider{transition:none}.title.title-leave{opacity:0;transition:opacity calc(.25s * var(--element-animations-enabled, 1)) ease-in}.divider{flex:1;margin-block:0}.divider.divider-leave{opacity:0;transition-delay:0s}\n"], dependencies: [{ kind: "component", type: SiNavbarVerticalNextDividerComponent, selector: "si-navbar-vertical-next-divider" }] });
|
|
457
497
|
}
|
|
458
498
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextHeaderComponent, decorators: [{
|
|
459
499
|
type: Component,
|
|
@@ -468,7 +508,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
468
508
|
`, host: {
|
|
469
509
|
'[class.collapsed]': 'navbar.collapsed()',
|
|
470
510
|
'animate.enter': 'component-enter'
|
|
471
|
-
}, styles: [".divider,.title{opacity:1;transition:opacity calc(.25s * var(--element-animations-enabled, 1)) calc(.25s * var(--element-animations-enabled, 1)) ease-out}@starting-style{.divider,.title{opacity:0}}:host{display:flex;align-items:center;block-size:
|
|
511
|
+
}, styles: [".divider,.title{opacity:1;transition:opacity calc(.25s * var(--element-animations-enabled, 1)) calc(.25s * var(--element-animations-enabled, 1)) ease-out}@starting-style{.divider,.title{opacity:0}}:host{display:flex;align-items:center;block-size:calc(1lh + 24px);transition:block-size calc(.5s * var(--element-animations-enabled, 1)) ease-out}:host.collapsed{block-size:13px}:host.component-enter{transition:none}:host.component-enter .title,:host.component-enter .divider{transition:none}.title.title-leave{opacity:0;transition:opacity calc(.25s * var(--element-animations-enabled, 1)) ease-in}.divider{flex:1;margin-block:0}.divider.divider-leave{opacity:0;transition-delay:0s}\n"] }]
|
|
472
512
|
}] });
|
|
473
513
|
|
|
474
514
|
/**
|
|
@@ -477,7 +517,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
477
517
|
*/
|
|
478
518
|
/** @experimental */
|
|
479
519
|
class SiNavbarVerticalNextItemComponent {
|
|
480
|
-
icons = addIcons({ elementDown2 });
|
|
520
|
+
icons = addIcons({ elementDown2, elementRight2 });
|
|
481
521
|
/** Optional icon to render before the label. */
|
|
482
522
|
icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
|
|
483
523
|
/** Badge value to display. */
|
|
@@ -523,6 +563,7 @@ class SiNavbarVerticalNextItemComponent {
|
|
|
523
563
|
}
|
|
524
564
|
return badge.toString();
|
|
525
565
|
}, ...(ngDevMode ? [{ debugName: "formattedBadge" }] : []));
|
|
566
|
+
isDropdownItem = computed(() => !this.navbar.alwaysFlyout() && !!this.parent?.group?.flyout(), ...(ngDevMode ? [{ debugName: "isDropdownItem" }] : []));
|
|
526
567
|
ngOnInit() {
|
|
527
568
|
if (this.group && this.active) {
|
|
528
569
|
this.group.expanded.set(true);
|
|
@@ -542,18 +583,18 @@ class SiNavbarVerticalNextItemComponent {
|
|
|
542
583
|
false);
|
|
543
584
|
}
|
|
544
585
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
545
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiNavbarVerticalNextItemComponent, isStandalone: true, selector: "a[si-navbar-vertical-next-item], button[si-navbar-vertical-next-item]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeColor: { classPropertyName: "badgeColor", publicName: "badgeColor", isSignal: true, isRequired: false, transformFunction: null }, hideBadgeWhenCollapsed: { classPropertyName: "hideBadgeWhenCollapsed", publicName: "hideBadgeWhenCollapsed", isSignal: true, isRequired: false, transformFunction: null }, activeOverride: { classPropertyName: "activeOverride", publicName: "activeOverride", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "triggered()" }, properties: { "class.dropdown-item": "
|
|
586
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiNavbarVerticalNextItemComponent, isStandalone: true, selector: "a[si-navbar-vertical-next-item], button[si-navbar-vertical-next-item]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeColor: { classPropertyName: "badgeColor", publicName: "badgeColor", isSignal: true, isRequired: false, transformFunction: null }, hideBadgeWhenCollapsed: { classPropertyName: "hideBadgeWhenCollapsed", publicName: "hideBadgeWhenCollapsed", isSignal: true, isRequired: false, transformFunction: null }, activeOverride: { classPropertyName: "activeOverride", publicName: "activeOverride", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "triggered()" }, properties: { "class.dropdown-item": "isDropdownItem()", "class.navbar-vertical-item": "!isDropdownItem()", "class.active": "active", "class.hide-badge-collapsed": "hideBadgeWhenCollapsed()" }, classAttribute: "focus-inside" }, ngImport: i0, template: "@let icon = this.icon();\n@if (icon) {\n <si-icon class=\"icon-lg\" [icon]=\"icon\" />\n}\n<div class=\"item-title text-truncate si-h5\">\n <ng-content />\n</div>\n@if (!navbar.textOnly() && formattedBadge()) {\n @let badgeColor = this.badgeColor();\n <span\n [class]=\"[\n 'badge',\n badgeColor ? `bg-${badgeColor}` : 'bg-default',\n textOnlyBadge() ? 'badge-text-only' : '',\n navbar.collapsed() ? 'badge-collapsed' : ''\n ]\"\n >{{ formattedBadge() }}</span\n >\n}\n@if (group) {\n <si-icon\n class=\"dropdown-caret me-0 text-body\"\n [icon]=\"group.flyoutMode() ? icons.elementRight2 : icons.elementDown2\"\n />\n}\n", styles: [":host(.navbar-vertical-item){display:flex;align-items:center;position:relative;color:var(--element-text-primary);background:none;border:0;font-size:.875rem;padding-block:8px;padding-inline:0 12px;min-inline-size:0;min-block-size:calc(1lh + 24px);inline-size:100%;border-radius:0}:host(.navbar-vertical-item) .item-title{margin-inline-start:12px}:host(.navbar-vertical-item) .icon-lg{margin-inline-start:12px}:host(.navbar-vertical-item) .icon-lg+.item-title{margin-inline-start:8px}:host(.navbar-vertical-item).show .badge:not(.badge-collapsed){display:none}:host(.navbar-vertical-item):not(.show) .badge+.dropdown-caret{margin-inline:0;padding-inline:0}:host(.navbar-vertical-item).active{color:var(--element-action-primary-hover);background:var(--element-base-1-selected)}:host(.navbar-vertical-item).active:after{content:\"\";position:absolute;inset-block:0;inset-inline-start:0;inline-size:4px;background:var(--element-action-primary-hover)}:host(.navbar-vertical-item):hover{text-decoration:none;background:var(--element-base-1-hover)}:host-context(si-navbar-vertical-next-items > .navbar-vertical-item)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-items > si-navbar-vertical-next-group)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-items > si-navbar-flyout-anchor)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-footer-items > .navbar-vertical-item)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-footer-items > si-navbar-vertical-next-group)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-footer-items > si-navbar-flyout-anchor)+:host(.navbar-vertical-item){margin-block-start:8px}:host-context(.nav-text-only si-navbar-vertical-next-group) .item-title{margin-inline-start:0}:host-context(si-navbar-vertical-next-group) :host(.navbar-vertical-item){padding-inline-start:32px}:host-context(si-navbar-vertical-next-group) :host(.navbar-vertical-item) .item-title{font-weight:400}:host-context(.dropdown-menu) :host(.navbar-vertical-item){padding-inline-start:0}:host(.dropdown-item) .item-title{font-weight:400}:host-context(.nav-collapsed) .badge{position:absolute;inset-block-start:4px;inset-inline-end:6px;min-inline-size:.875rem;border-radius:.4375rem;font-size:.75rem;line-height:.875rem;padding-block:0;padding-inline:4px;font-family:var(--element-body-font-family);font-weight:600;text-align:center}:host-context(.nav-collapsed) .badge.badge-text-only{color:transparent;font-size:0}:host-context(.nav-collapsed) :is(.item-title,.dropdown-caret){position:absolute!important;inline-size:1px!important;block-size:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}:host-context(.nav-collapsed).hide-badge-collapsed .badge{display:none}.badge{margin-inline:auto 0}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
546
587
|
}
|
|
547
588
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextItemComponent, decorators: [{
|
|
548
589
|
type: Component,
|
|
549
590
|
args: [{ selector: 'a[si-navbar-vertical-next-item], button[si-navbar-vertical-next-item]', imports: [SiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
550
591
|
'class': 'focus-inside',
|
|
551
|
-
'[class.dropdown-item]': '
|
|
552
|
-
'[class.navbar-vertical-item]': '!
|
|
592
|
+
'[class.dropdown-item]': 'isDropdownItem()',
|
|
593
|
+
'[class.navbar-vertical-item]': '!isDropdownItem()',
|
|
553
594
|
'[class.active]': 'active',
|
|
554
595
|
'[class.hide-badge-collapsed]': 'hideBadgeWhenCollapsed()',
|
|
555
596
|
'(click)': 'triggered()'
|
|
556
|
-
}, template: "@let icon = this.icon();\n@if (icon) {\n <si-icon class=\"icon-lg\" [icon]=\"icon\" />\n}\n<div class=\"item-title text-truncate si-h5\">\n <ng-content />\n</div>\n@if (!navbar.textOnly() && formattedBadge()) {\n @let badgeColor = this.badgeColor();\n <span\n [class]=\"[\n 'badge',\n badgeColor ? `bg-${badgeColor}` : 'bg-default',\n textOnlyBadge() ? 'badge-text-only' : '',\n navbar.collapsed() ? 'badge-collapsed' : ''\n ]\"\n >{{ formattedBadge() }}</span\n >\n}\n@if (group) {\n <si-icon
|
|
597
|
+
}, template: "@let icon = this.icon();\n@if (icon) {\n <si-icon class=\"icon-lg\" [icon]=\"icon\" />\n}\n<div class=\"item-title text-truncate si-h5\">\n <ng-content />\n</div>\n@if (!navbar.textOnly() && formattedBadge()) {\n @let badgeColor = this.badgeColor();\n <span\n [class]=\"[\n 'badge',\n badgeColor ? `bg-${badgeColor}` : 'bg-default',\n textOnlyBadge() ? 'badge-text-only' : '',\n navbar.collapsed() ? 'badge-collapsed' : ''\n ]\"\n >{{ formattedBadge() }}</span\n >\n}\n@if (group) {\n <si-icon\n class=\"dropdown-caret me-0 text-body\"\n [icon]=\"group.flyoutMode() ? icons.elementRight2 : icons.elementDown2\"\n />\n}\n", styles: [":host(.navbar-vertical-item){display:flex;align-items:center;position:relative;color:var(--element-text-primary);background:none;border:0;font-size:.875rem;padding-block:8px;padding-inline:0 12px;min-inline-size:0;min-block-size:calc(1lh + 24px);inline-size:100%;border-radius:0}:host(.navbar-vertical-item) .item-title{margin-inline-start:12px}:host(.navbar-vertical-item) .icon-lg{margin-inline-start:12px}:host(.navbar-vertical-item) .icon-lg+.item-title{margin-inline-start:8px}:host(.navbar-vertical-item).show .badge:not(.badge-collapsed){display:none}:host(.navbar-vertical-item):not(.show) .badge+.dropdown-caret{margin-inline:0;padding-inline:0}:host(.navbar-vertical-item).active{color:var(--element-action-primary-hover);background:var(--element-base-1-selected)}:host(.navbar-vertical-item).active:after{content:\"\";position:absolute;inset-block:0;inset-inline-start:0;inline-size:4px;background:var(--element-action-primary-hover)}:host(.navbar-vertical-item):hover{text-decoration:none;background:var(--element-base-1-hover)}:host-context(si-navbar-vertical-next-items > .navbar-vertical-item)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-items > si-navbar-vertical-next-group)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-items > si-navbar-flyout-anchor)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-footer-items > .navbar-vertical-item)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-footer-items > si-navbar-vertical-next-group)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-footer-items > si-navbar-flyout-anchor)+:host(.navbar-vertical-item){margin-block-start:8px}:host-context(.nav-text-only si-navbar-vertical-next-group) .item-title{margin-inline-start:0}:host-context(si-navbar-vertical-next-group) :host(.navbar-vertical-item){padding-inline-start:32px}:host-context(si-navbar-vertical-next-group) :host(.navbar-vertical-item) .item-title{font-weight:400}:host-context(.dropdown-menu) :host(.navbar-vertical-item){padding-inline-start:0}:host(.dropdown-item) .item-title{font-weight:400}:host-context(.nav-collapsed) .badge{position:absolute;inset-block-start:4px;inset-inline-end:6px;min-inline-size:.875rem;border-radius:.4375rem;font-size:.75rem;line-height:.875rem;padding-block:0;padding-inline:4px;font-family:var(--element-body-font-family);font-weight:600;text-align:center}:host-context(.nav-collapsed) .badge.badge-text-only{color:transparent;font-size:0}:host-context(.nav-collapsed) :is(.item-title,.dropdown-caret){position:absolute!important;inline-size:1px!important;block-size:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}:host-context(.nav-collapsed).hide-badge-collapsed .badge{display:none}.badge{margin-inline:auto 0}\n"] }]
|
|
557
598
|
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeColor", required: false }] }], hideBadgeWhenCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideBadgeWhenCollapsed", required: false }] }], activeOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeOverride", required: false }] }] } });
|
|
558
599
|
|
|
559
600
|
/**
|
|
@@ -588,11 +629,11 @@ class SiNavbarVerticalNextSearchComponent {
|
|
|
588
629
|
setTimeout(() => this.searchBar().focus());
|
|
589
630
|
}
|
|
590
631
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
591
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: SiNavbarVerticalNextSearchComponent, isStandalone: true, selector: "si-navbar-vertical-next-search", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchChange: "searchChange" }, viewQueries: [{ propertyName: "searchBar", first: true, predicate: SiSearchBarComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<si-search-bar\n class=\"mx-4\"\n colorVariant=\"base-0\"\n prohibitedCharacters=\"*?\"\n [placeholder]=\"placeholder() | translate\"\n [debounceTime]=\"debounceTime()\"\n [showIcon]=\"true\"\n (searchChange)=\"searchChange.emit($event)\"\n/>\n<button\n type=\"button\"\n class=\"btn-search bg-base-0
|
|
632
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: SiNavbarVerticalNextSearchComponent, isStandalone: true, selector: "si-navbar-vertical-next-search", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchChange: "searchChange" }, viewQueries: [{ propertyName: "searchBar", first: true, predicate: SiSearchBarComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<si-search-bar\n class=\"mx-4\"\n colorVariant=\"base-0\"\n prohibitedCharacters=\"*?\"\n [placeholder]=\"placeholder() | translate\"\n [debounceTime]=\"debounceTime()\"\n [showIcon]=\"true\"\n (searchChange)=\"searchChange.emit($event)\"\n/>\n<button\n type=\"button\"\n class=\"btn-search bg-base-0 px-3 mx-4 mobile navbar-vertical-no-collapse text-secondary\"\n [attr.aria-label]=\"placeholder() | translate\"\n (click)=\"expandForSearch()\"\n>\n <si-icon class=\"icon\" [icon]=\"icons.elementSearch\" />\n</button>\n", styles: [":host{display:flex;align-items:center;margin-block-start:8px;padding-block:4px;overflow-x:hidden}:host-context(.nav-collapsed){display:none}:host-context(.nav-collapsed) si-search-bar{display:none}si-search-bar{inline-size:100%}.btn-search{display:none;border:0;border-radius:var(--element-radius-2);block-size:calc(1lh + 16px);inline-size:calc(1.5rem + 8px);text-align:start}@media(min-width:576px){:host-context(:not(.nav-text-only).nav-collapsed){display:flex}.btn-search{display:none}:host-context(.nav-collapsed) .btn-search{display:block}}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiSearchBarComponent, selector: "si-search-bar", inputs: ["debounceTime", "prohibitedCharacters", "placeholder", "showIcon", "tabbable", "value", "readonly", "colorVariant", "disabled", "maxlength", "clearButtonAriaLabel"], outputs: ["searchChange"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
592
633
|
}
|
|
593
634
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextSearchComponent, decorators: [{
|
|
594
635
|
type: Component,
|
|
595
|
-
args: [{ selector: 'si-navbar-vertical-next-search', imports: [SiIconComponent, SiSearchBarComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<si-search-bar\n class=\"mx-4\"\n colorVariant=\"base-0\"\n prohibitedCharacters=\"*?\"\n [placeholder]=\"placeholder() | translate\"\n [debounceTime]=\"debounceTime()\"\n [showIcon]=\"true\"\n (searchChange)=\"searchChange.emit($event)\"\n/>\n<button\n type=\"button\"\n class=\"btn-search bg-base-0
|
|
636
|
+
args: [{ selector: 'si-navbar-vertical-next-search', imports: [SiIconComponent, SiSearchBarComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<si-search-bar\n class=\"mx-4\"\n colorVariant=\"base-0\"\n prohibitedCharacters=\"*?\"\n [placeholder]=\"placeholder() | translate\"\n [debounceTime]=\"debounceTime()\"\n [showIcon]=\"true\"\n (searchChange)=\"searchChange.emit($event)\"\n/>\n<button\n type=\"button\"\n class=\"btn-search bg-base-0 px-3 mx-4 mobile navbar-vertical-no-collapse text-secondary\"\n [attr.aria-label]=\"placeholder() | translate\"\n (click)=\"expandForSearch()\"\n>\n <si-icon class=\"icon\" [icon]=\"icons.elementSearch\" />\n</button>\n", styles: [":host{display:flex;align-items:center;margin-block-start:8px;padding-block:4px;overflow-x:hidden}:host-context(.nav-collapsed){display:none}:host-context(.nav-collapsed) si-search-bar{display:none}si-search-bar{inline-size:100%}.btn-search{display:none;border:0;border-radius:var(--element-radius-2);block-size:calc(1lh + 16px);inline-size:calc(1.5rem + 8px);text-align:start}@media(min-width:576px){:host-context(:not(.nav-text-only).nav-collapsed){display:flex}.btn-search{display:none}:host-context(.nav-collapsed) .btn-search{display:block}}\n"] }]
|
|
596
637
|
}], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], searchBar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiSearchBarComponent), { isSignal: true }] }] } });
|
|
597
638
|
|
|
598
639
|
/**
|