@siemens/element-ng 49.8.0 → 49.10.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 +4 -4
- 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-chat-messages.mjs +43 -19
- package/fesm2022/siemens-element-ng-chat-messages.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-color-picker.mjs +9 -4
- package/fesm2022/siemens-element-ng-color-picker.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-dashboard.mjs +467 -13
- 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-date-range-filter.mjs +2 -2
- package/fesm2022/siemens-element-ng-date-range-filter.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-main-detail-container.mjs +2 -2
- package/fesm2022/siemens-element-ng-main-detail-container.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 +110 -51
- 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-notification-item.mjs +2 -2
- package/fesm2022/siemens-element-ng-notification-item.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 +5 -0
- package/types/siemens-element-ng-breadcrumb-router.d.ts +6 -2
- package/types/siemens-element-ng-chat-messages.d.ts +6 -3
- package/types/siemens-element-ng-color-picker.d.ts +7 -2
- package/types/siemens-element-ng-dashboard.d.ts +360 -5
- 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 +39 -9
- 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 +5 -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, computed, afterNextRender, linkedSignal, untracked, 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 { elementLayoutPane2Right, elementLayoutPane2, 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';
|
|
@@ -46,7 +46,12 @@ const SI_NAVBAR_VERTICAL_NEXT = new InjectionToken('SI_NAVBAR_VERTICAL_NEXT');
|
|
|
46
46
|
*/
|
|
47
47
|
/** @experimental */
|
|
48
48
|
class SiNavbarVerticalNextComponent {
|
|
49
|
-
icons = addIcons({
|
|
49
|
+
icons = addIcons({
|
|
50
|
+
elementDoubleLeft,
|
|
51
|
+
elementDoubleRight,
|
|
52
|
+
elementLayoutPane2,
|
|
53
|
+
elementLayoutPane2Right
|
|
54
|
+
});
|
|
50
55
|
/**
|
|
51
56
|
* Whether the navbar-vertical is collapsed.
|
|
52
57
|
*
|
|
@@ -59,6 +64,23 @@ class SiNavbarVerticalNextComponent {
|
|
|
59
64
|
* @defaultValue false
|
|
60
65
|
*/
|
|
61
66
|
textOnly = input(false, { ...(ngDevMode ? { debugName: "textOnly" } : {}), transform: booleanAttribute });
|
|
67
|
+
/**
|
|
68
|
+
* Enables an alternative inline-collapse behavior.
|
|
69
|
+
*
|
|
70
|
+
* When collapsed, nav content becomes inert while the toggle remains
|
|
71
|
+
* available in the page flow.
|
|
72
|
+
*
|
|
73
|
+
* @defaultValue false
|
|
74
|
+
*/
|
|
75
|
+
inlineCollapse = input(false, { ...(ngDevMode ? { debugName: "inlineCollapse" } : {}), transform: booleanAttribute });
|
|
76
|
+
/**
|
|
77
|
+
* When `true`, item-groups always open as a transient flyout panel adjacent to the
|
|
78
|
+
* trigger, regardless of whether the navbar is collapsed or expanded.
|
|
79
|
+
* Flyouts open and close on click.
|
|
80
|
+
*
|
|
81
|
+
* @defaultValue false
|
|
82
|
+
*/
|
|
83
|
+
alwaysFlyout = input(false, { ...(ngDevMode ? { debugName: "alwaysFlyout" } : {}), transform: booleanAttribute });
|
|
62
84
|
/**
|
|
63
85
|
* List of vertical navigation items
|
|
64
86
|
*
|
|
@@ -103,6 +125,8 @@ class SiNavbarVerticalNextComponent {
|
|
|
103
125
|
skipLinkMainContentLabel = input(t(() => $localize `:@@SI_NAVBAR_VERTICAL.SKIP_LINK.MAIN_LABEL:Main content`), ...(ngDevMode ? [{ debugName: "skipLinkMainContentLabel" }] : []));
|
|
104
126
|
uiStateService = inject(SI_UI_STATE_SERVICE, { optional: true });
|
|
105
127
|
breakpointObserver = inject(BreakpointObserver);
|
|
128
|
+
injector = inject(Injector);
|
|
129
|
+
ready = signal(false, ...(ngDevMode ? [{ debugName: "ready" }] : []));
|
|
106
130
|
smallScreen = signal(false, ...(ngDevMode ? [{ debugName: "smallScreen" }] : []));
|
|
107
131
|
/**
|
|
108
132
|
* @defaultValue
|
|
@@ -113,6 +137,12 @@ class SiNavbarVerticalNextComponent {
|
|
|
113
137
|
uiStateExpandedItems = signal({}, ...(ngDevMode ? [{ debugName: "uiStateExpandedItems" }] : []));
|
|
114
138
|
// Indicates if the user prefers a collapsed navbar. Relevant for resizing.
|
|
115
139
|
preferCollapse = false;
|
|
140
|
+
toggleIcon = computed(() => {
|
|
141
|
+
if (this.inlineCollapse()) {
|
|
142
|
+
return this.collapsed() ? this.icons.elementLayoutPane2 : this.icons.elementLayoutPane2Right;
|
|
143
|
+
}
|
|
144
|
+
return this.collapsed() ? this.icons.elementDoubleRight : this.icons.elementDoubleLeft;
|
|
145
|
+
}, ...(ngDevMode ? [{ debugName: "toggleIcon" }] : []));
|
|
116
146
|
constructor() {
|
|
117
147
|
this.breakpointObserver
|
|
118
148
|
.observe(`(max-width: ${BOOTSTRAP_BREAKPOINTS.lgMinimum}px)`)
|
|
@@ -138,8 +168,12 @@ class SiNavbarVerticalNextComponent {
|
|
|
138
168
|
this.uiStateExpandedItems.set(uiState.expandedItems);
|
|
139
169
|
}
|
|
140
170
|
}
|
|
171
|
+
afterNextRender(() => this.ready.set(true), { injector: this.injector });
|
|
141
172
|
});
|
|
142
173
|
}
|
|
174
|
+
else {
|
|
175
|
+
this.ready.set(true);
|
|
176
|
+
}
|
|
143
177
|
}
|
|
144
178
|
toggleCollapse() {
|
|
145
179
|
if (this.collapsed()) {
|
|
@@ -189,7 +223,7 @@ class SiNavbarVerticalNextComponent {
|
|
|
189
223
|
}
|
|
190
224
|
}
|
|
191
225
|
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
|
|
226
|
+
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 }, inlineCollapse: { classPropertyName: "inlineCollapse", publicName: "inlineCollapse", 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.nav-inline-collapse": "inlineCollapse()", "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 @let inlineCollapsed = inlineCollapse() && collapsed();\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\">\n <button\n type=\"button\"\n class=\"btn btn-icon toggle-button\"\n [class.btn-primary-ghost]=\"inlineCollapsed\"\n [class.btn-tertiary-ghost]=\"!inlineCollapsed\"\n [attr.aria-label]=\"toggleButtonText() | translate\"\n [attr.aria-expanded]=\"!collapsed()\"\n (click)=\"toggleCollapse()\"\n >\n <si-icon class=\"flip-rtl\" [icon]=\"toggleIcon()\" />\n </button>\n </div>\n </div>\n <div\n class=\"nav-content\"\n [attr.inert]=\"inlineCollapsed ? '' : null\"\n [attr.aria-hidden]=\"inlineCollapsed ? 'true' : null\"\n >\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 </div>\n </nav>\n @if (inlineCollapse()) {\n <div class=\"toggle-placeholder\" aria-hidden=\"true\"></div>\n }\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}.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}:host(.nav-text-only:not(.nav-inline-collapse)).nav-collapsed .mobile-drawer{background:var(--element-base-1);box-shadow:0 0 4px var(--element-box-shadow-color-1),0 4px 4px var(--element-box-shadow-color-2)}@media(max-width:575.98px){:host.nav-collapsed .mobile-drawer{background:var(--element-base-1);box-shadow:0 0 4px var(--element-box-shadow-color-1),0 4px 4px var(--element-box-shadow-color-2)}}@media(min-width:576px){:host:not(.nav-text-only),:host:not(.nav-collapsed),:host(.nav-inline-collapse){--si-layout-header-first-element-offset: 0}:host:where(:not(.nav-text-only):not(.nav-inline-collapse)){padding-inline-start:calc(1.5rem + 24px)}:host:where(:not(.nav-text-only):not(.nav-inline-collapse)) nav{inline-size:calc(1.5rem + 24px)}:host:where(:not(.nav-text-only):not(.nav-inline-collapse)) nav.expanded{inline-size:240px}}@media(min-width:992px){:host:not(.nav-collapsed){padding-inline-start:240px}}.nav-content{display:flex;flex-direction:column;flex:1 1 auto;min-block-size:0}:host(.nav-inline-collapse) nav{overflow:hidden}:host(.nav-inline-collapse) .mobile-drawer:before{content:\"\";display:block;block-size:calc(1lh + 16px)}:host(.nav-inline-collapse) .toggle-placeholder{block-size:0;margin-block-start:0;transition:block-size calc(.5s * var(--element-animations-enabled, 1)) ease,margin-block-start calc(.5s * var(--element-animations-enabled, 1)) ease}:host(.nav-inline-collapse) .toggle-button{position:fixed;z-index:1031;inset-block-start:calc(calc(1.5rem + 25px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px)) + 8px + 4px);inset-inline-start:calc(232px - (1lh + 16px));transition:inset-inline-start calc(.5s * var(--element-animations-enabled, 1)) ease,inset-block-start calc(.5s * var(--element-animations-enabled, 1)) ease}:host(.nav-inline-collapse).nav-collapsed .toggle-placeholder{block-size:calc(1lh + 16px);margin-block-start:16px}:host(.nav-inline-collapse).nav-collapsed .toggle-button{inset-block-start:calc(calc(1.5rem + 25px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px)) + 16px);inset-inline-start:32px}\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
227
|
}
|
|
194
228
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextComponent, decorators: [{
|
|
195
229
|
type: Component,
|
|
@@ -197,9 +231,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
197
231
|
class: 'si-layout-inner ready',
|
|
198
232
|
'[class.nav-collapsed]': 'collapsed()',
|
|
199
233
|
'[class.nav-text-only]': 'textOnly()',
|
|
200
|
-
'[class.
|
|
201
|
-
|
|
202
|
-
|
|
234
|
+
'[class.nav-inline-collapse]': 'inlineCollapse()',
|
|
235
|
+
'[class.visible]': 'visible()',
|
|
236
|
+
'[class.ready]': 'ready()'
|
|
237
|
+
}, template: "@if (visible()) {\n @if (smallScreen() && !collapsed()) {\n <div class=\"modal-backdrop\" animate.leave=\"backdrop-leave\" (click)=\"toggleCollapse()\"></div>\n }\n @let inlineCollapsed = inlineCollapse() && collapsed();\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\">\n <button\n type=\"button\"\n class=\"btn btn-icon toggle-button\"\n [class.btn-primary-ghost]=\"inlineCollapsed\"\n [class.btn-tertiary-ghost]=\"!inlineCollapsed\"\n [attr.aria-label]=\"toggleButtonText() | translate\"\n [attr.aria-expanded]=\"!collapsed()\"\n (click)=\"toggleCollapse()\"\n >\n <si-icon class=\"flip-rtl\" [icon]=\"toggleIcon()\" />\n </button>\n </div>\n </div>\n <div\n class=\"nav-content\"\n [attr.inert]=\"inlineCollapsed ? '' : null\"\n [attr.aria-hidden]=\"inlineCollapsed ? 'true' : null\"\n >\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 </div>\n </nav>\n @if (inlineCollapse()) {\n <div class=\"toggle-placeholder\" aria-hidden=\"true\"></div>\n }\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}.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}:host(.nav-text-only:not(.nav-inline-collapse)).nav-collapsed .mobile-drawer{background:var(--element-base-1);box-shadow:0 0 4px var(--element-box-shadow-color-1),0 4px 4px var(--element-box-shadow-color-2)}@media(max-width:575.98px){:host.nav-collapsed .mobile-drawer{background:var(--element-base-1);box-shadow:0 0 4px var(--element-box-shadow-color-1),0 4px 4px var(--element-box-shadow-color-2)}}@media(min-width:576px){:host:not(.nav-text-only),:host:not(.nav-collapsed),:host(.nav-inline-collapse){--si-layout-header-first-element-offset: 0}:host:where(:not(.nav-text-only):not(.nav-inline-collapse)){padding-inline-start:calc(1.5rem + 24px)}:host:where(:not(.nav-text-only):not(.nav-inline-collapse)) nav{inline-size:calc(1.5rem + 24px)}:host:where(:not(.nav-text-only):not(.nav-inline-collapse)) nav.expanded{inline-size:240px}}@media(min-width:992px){:host:not(.nav-collapsed){padding-inline-start:240px}}.nav-content{display:flex;flex-direction:column;flex:1 1 auto;min-block-size:0}:host(.nav-inline-collapse) nav{overflow:hidden}:host(.nav-inline-collapse) .mobile-drawer:before{content:\"\";display:block;block-size:calc(1lh + 16px)}:host(.nav-inline-collapse) .toggle-placeholder{block-size:0;margin-block-start:0;transition:block-size calc(.5s * var(--element-animations-enabled, 1)) ease,margin-block-start calc(.5s * var(--element-animations-enabled, 1)) ease}:host(.nav-inline-collapse) .toggle-button{position:fixed;z-index:1031;inset-block-start:calc(calc(1.5rem + 25px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px)) + 8px + 4px);inset-inline-start:calc(232px - (1lh + 16px));transition:inset-inline-start calc(.5s * var(--element-animations-enabled, 1)) ease,inset-block-start calc(.5s * var(--element-animations-enabled, 1)) ease}:host(.nav-inline-collapse).nav-collapsed .toggle-placeholder{block-size:calc(1lh + 16px);margin-block-start:16px}:host(.nav-inline-collapse).nav-collapsed .toggle-button{inset-block-start:calc(calc(1.5rem + 25px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px)) + 16px);inset-inline-start:32px}\n"] }]
|
|
238
|
+
}], 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 }] }], inlineCollapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "inlineCollapse", 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
239
|
|
|
204
240
|
/**
|
|
205
241
|
* Copyright (c) Siemens 2016 - 2026
|
|
@@ -272,17 +308,42 @@ class SiNavbarVerticalNextGroupTriggerDirective {
|
|
|
272
308
|
/** @defaultValue false */
|
|
273
309
|
expanded = linkedSignal({ ...(ngDevMode ? { debugName: "expanded" } : {}), source: () => {
|
|
274
310
|
const stateId = this.stateId();
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
311
|
+
return {
|
|
312
|
+
uiState: stateId ? this.navbar.uiStateExpandedItems()[stateId] : undefined,
|
|
313
|
+
alwaysFlyout: this.navbar.alwaysFlyout()
|
|
314
|
+
};
|
|
279
315
|
},
|
|
280
|
-
computation: source =>
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
316
|
+
computation: (source, previous) => {
|
|
317
|
+
// `alwaysFlyout` toggled: reset expansion. When switching back to inline,
|
|
318
|
+
// surface the group that owns the active route.
|
|
319
|
+
if (previous && source.alwaysFlyout !== previous.source.alwaysFlyout) {
|
|
320
|
+
return !source.alwaysFlyout && untracked(() => this.active());
|
|
321
|
+
}
|
|
322
|
+
// First run or UIState (re)loaded: honor the persisted value when present,
|
|
323
|
+
// otherwise keep the user's current expansion.
|
|
324
|
+
if (source.uiState !== undefined) {
|
|
325
|
+
return source.uiState;
|
|
326
|
+
}
|
|
327
|
+
return previous?.value ?? false;
|
|
328
|
+
} });
|
|
329
|
+
/**
|
|
330
|
+
* Whether the group is currently rendered as a transient flyout overlay
|
|
331
|
+
* (true) or inline within the navbar (false). Automatically resets to
|
|
332
|
+
* `false` whenever the rendering mode changes.
|
|
333
|
+
* @internal
|
|
334
|
+
*/
|
|
335
|
+
flyout = linkedSignal({ ...(ngDevMode ? { debugName: "flyout" } : {}), source: () => this.flyoutMode(),
|
|
336
|
+
computation: () => false });
|
|
337
|
+
/**
|
|
338
|
+
* Whether the open flyout overlay currently contains the active route.
|
|
339
|
+
* Reset together with `flyout` so it never lingers across mode changes.
|
|
340
|
+
* @internal
|
|
341
|
+
*/
|
|
342
|
+
active = linkedSignal({ ...(ngDevMode ? { debugName: "active" } : {}), source: () => this.flyout(),
|
|
343
|
+
computation: (open, previous) => (open ? (previous?.value ?? false) : false) });
|
|
285
344
|
navbar = inject(SI_NAVBAR_VERTICAL_NEXT);
|
|
345
|
+
/** @internal */
|
|
346
|
+
flyoutMode = computed(() => this.navbar.alwaysFlyout() || this.navbar.collapsed(), ...(ngDevMode ? [{ debugName: "flyoutMode" }] : []));
|
|
286
347
|
flyoutOutsideClickSubscription;
|
|
287
348
|
viewContainer = inject(ViewContainerRef);
|
|
288
349
|
overlay = inject(Overlay);
|
|
@@ -300,33 +361,27 @@ class SiNavbarVerticalNextGroupTriggerDirective {
|
|
|
300
361
|
flyoutAnchorComponentRef;
|
|
301
362
|
templatePortal = computed(() => new TemplatePortal(this.groupTemplate(), this.viewContainer, undefined, this.injector), ...(ngDevMode ? [{ debugName: "templatePortal" }] : []));
|
|
302
363
|
constructor() {
|
|
303
|
-
//
|
|
364
|
+
// Manage the rendering of the inline projection / flyout overlay in
|
|
365
|
+
// response to mode changes. Only side effects belong here; the related
|
|
366
|
+
// signal state is propagated by `flyout` / `expanded` linked signals.
|
|
304
367
|
effect(() => {
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
untracked(() => this.expanded.set(state));
|
|
311
|
-
}
|
|
368
|
+
this.flyoutMode();
|
|
369
|
+
untracked(() => {
|
|
370
|
+
this.detachFlyout();
|
|
371
|
+
this.attachInline();
|
|
372
|
+
});
|
|
312
373
|
});
|
|
313
374
|
}
|
|
314
|
-
ngOnInit() {
|
|
315
|
-
this.attachInline();
|
|
316
|
-
}
|
|
317
375
|
/** @internal */
|
|
318
376
|
hideFlyout() {
|
|
319
|
-
if (this.flyout())
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
this.attachInline();
|
|
325
|
-
this.flyoutOutsideClickSubscription?.unsubscribe();
|
|
326
|
-
}
|
|
377
|
+
if (!this.flyout())
|
|
378
|
+
return;
|
|
379
|
+
this.flyout.set(false);
|
|
380
|
+
this.detachFlyout();
|
|
381
|
+
this.attachInline();
|
|
327
382
|
}
|
|
328
383
|
triggered() {
|
|
329
|
-
if (this.
|
|
384
|
+
if (this.flyoutMode()) {
|
|
330
385
|
this.toggleFlyout();
|
|
331
386
|
}
|
|
332
387
|
else {
|
|
@@ -345,13 +400,13 @@ class SiNavbarVerticalNextGroupTriggerDirective {
|
|
|
345
400
|
}
|
|
346
401
|
attachInline() {
|
|
347
402
|
this.overlayRef.detach();
|
|
348
|
-
this.groupView?.destroy();
|
|
403
|
+
this.groupView?.destroy();
|
|
349
404
|
this.groupView = this.viewContainer.createEmbeddedView(this.groupTemplate(), undefined, {
|
|
350
405
|
injector: this.injector
|
|
351
406
|
});
|
|
352
407
|
}
|
|
353
408
|
attachFlyout() {
|
|
354
|
-
this.groupView
|
|
409
|
+
this.groupView?.destroy();
|
|
355
410
|
this.groupView = this.overlayRef.attach(this.templatePortal());
|
|
356
411
|
this.flyoutAnchorComponentRef = this.viewContainer.createComponent(SiNavbarFlyoutAnchorComponent);
|
|
357
412
|
this.flyoutAnchorComponentRef.setInput('groupId', this.groupId);
|
|
@@ -359,6 +414,12 @@ class SiNavbarVerticalNextGroupTriggerDirective {
|
|
|
359
414
|
.outsidePointerEvents()
|
|
360
415
|
.subscribe(() => this.hideFlyout());
|
|
361
416
|
}
|
|
417
|
+
detachFlyout() {
|
|
418
|
+
this.flyoutAnchorComponentRef?.destroy();
|
|
419
|
+
this.flyoutAnchorComponentRef = undefined;
|
|
420
|
+
this.flyoutOutsideClickSubscription?.unsubscribe();
|
|
421
|
+
this.flyoutOutsideClickSubscription = undefined;
|
|
422
|
+
}
|
|
362
423
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextGroupTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
363
424
|
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
425
|
}
|
|
@@ -386,10 +447,8 @@ class SiNavbarVerticalNextGroupComponent {
|
|
|
386
447
|
navbar = inject(SI_NAVBAR_VERTICAL_NEXT);
|
|
387
448
|
groupTrigger = inject(SiNavbarVerticalNextGroupTriggerDirective);
|
|
388
449
|
routerLinkActive = inject(RouterLinkActive, { optional: true });
|
|
389
|
-
// Store initial value, as the mode for an instance never changes.
|
|
390
|
-
flyout = this.groupTrigger.flyout();
|
|
391
450
|
visible = computed(() => {
|
|
392
|
-
return this.flyout || (!this.navbar.collapsed() && this.groupTrigger.expanded());
|
|
451
|
+
return this.groupTrigger.flyout() || (!this.navbar.collapsed() && this.groupTrigger.expanded());
|
|
393
452
|
}, ...(ngDevMode ? [{ debugName: "visible" }] : []));
|
|
394
453
|
constructor() {
|
|
395
454
|
this.routerLinkActive?.isActiveChange
|
|
@@ -401,6 +460,7 @@ class SiNavbarVerticalNextGroupComponent {
|
|
|
401
460
|
}
|
|
402
461
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
403
462
|
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()) {
|
|
463
|
+
@let flyout = groupTrigger.flyout();
|
|
404
464
|
<div
|
|
405
465
|
animate.leave="group-leave"
|
|
406
466
|
[class.inline-group]="!flyout"
|
|
@@ -417,6 +477,7 @@ class SiNavbarVerticalNextGroupComponent {
|
|
|
417
477
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextGroupComponent, decorators: [{
|
|
418
478
|
type: Component,
|
|
419
479
|
args: [{ selector: 'si-navbar-vertical-next-group', imports: [CdkTrapFocus], template: `@if (visible()) {
|
|
480
|
+
@let flyout = groupTrigger.flyout();
|
|
420
481
|
<div
|
|
421
482
|
animate.leave="group-leave"
|
|
422
483
|
[class.inline-group]="!flyout"
|
|
@@ -453,7 +514,7 @@ class SiNavbarVerticalNextHeaderComponent {
|
|
|
453
514
|
} @else {
|
|
454
515
|
<si-navbar-vertical-next-divider class="divider" animate.leave="divider-leave" />
|
|
455
516
|
}
|
|
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:
|
|
517
|
+
`, 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
518
|
}
|
|
458
519
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextHeaderComponent, decorators: [{
|
|
459
520
|
type: Component,
|
|
@@ -468,7 +529,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
468
529
|
`, host: {
|
|
469
530
|
'[class.collapsed]': 'navbar.collapsed()',
|
|
470
531
|
'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:
|
|
532
|
+
}, 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
533
|
}] });
|
|
473
534
|
|
|
474
535
|
/**
|
|
@@ -477,7 +538,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
477
538
|
*/
|
|
478
539
|
/** @experimental */
|
|
479
540
|
class SiNavbarVerticalNextItemComponent {
|
|
480
|
-
icons = addIcons({ elementDown2 });
|
|
541
|
+
icons = addIcons({ elementDown2, elementRight2 });
|
|
481
542
|
/** Optional icon to render before the label. */
|
|
482
543
|
icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
|
|
483
544
|
/** Badge value to display. */
|
|
@@ -542,18 +603,16 @@ class SiNavbarVerticalNextItemComponent {
|
|
|
542
603
|
false);
|
|
543
604
|
}
|
|
544
605
|
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.
|
|
606
|
+
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.active": "active", "class.hide-badge-collapsed": "hideBadgeWhenCollapsed()" }, classAttribute: "focus-inside navbar-vertical-item" }, 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-context(.dropdown-menu) :host(.navbar-vertical-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
607
|
}
|
|
547
608
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextItemComponent, decorators: [{
|
|
548
609
|
type: Component,
|
|
549
610
|
args: [{ selector: 'a[si-navbar-vertical-next-item], button[si-navbar-vertical-next-item]', imports: [SiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
550
|
-
'class': 'focus-inside',
|
|
551
|
-
'[class.dropdown-item]': 'this.parent?.group?.flyout()',
|
|
552
|
-
'[class.navbar-vertical-item]': '!this.parent?.group?.flyout()',
|
|
611
|
+
'class': 'focus-inside navbar-vertical-item',
|
|
553
612
|
'[class.active]': 'active',
|
|
554
613
|
'[class.hide-badge-collapsed]': 'hideBadgeWhenCollapsed()',
|
|
555
614
|
'(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
|
|
615
|
+
}, 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-context(.dropdown-menu) :host(.navbar-vertical-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
616
|
}], 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
617
|
|
|
559
618
|
/**
|
|
@@ -588,11 +647,11 @@ class SiNavbarVerticalNextSearchComponent {
|
|
|
588
647
|
setTimeout(() => this.searchBar().focus());
|
|
589
648
|
}
|
|
590
649
|
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
|
|
650
|
+
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 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
651
|
}
|
|
593
652
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextSearchComponent, decorators: [{
|
|
594
653
|
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
|
|
654
|
+
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 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
655
|
}], 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
656
|
|
|
598
657
|
/**
|