@siemens/element-ng 49.9.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 +2 -2
- package/fesm2022/siemens-element-ng-application-header.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-color-picker.mjs +9 -4
- package/fesm2022/siemens-element-ng-color-picker.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-dashboard.mjs +459 -8
- package/fesm2022/siemens-element-ng-dashboard.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-main-detail-container.mjs +2 -2
- package/fesm2022/siemens-element-ng-main-detail-container.mjs.map +1 -1
- package/fesm2022/siemens-element-ng-navbar-vertical-next.mjs +32 -14
- package/fesm2022/siemens-element-ng-navbar-vertical-next.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-translate.mjs.map +1 -1
- package/package.json +3 -3
- package/template-i18n.json +4 -0
- 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 +358 -4
- package/types/siemens-element-ng-navbar-vertical-next.d.ts +12 -3
- package/types/siemens-element-ng-translate.d.ts +4 -0
|
@@ -226,7 +226,7 @@ class SiMainDetailContainerComponent {
|
|
|
226
226
|
this.preventFocusDetails = !this.hasLargeSize && !this.detailsActive();
|
|
227
227
|
}
|
|
228
228
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMainDetailContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
229
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiMainDetailContainerComponent, isStandalone: true, selector: "si-main-detail-container", inputs: { largeLayoutBreakpoint: { classPropertyName: "largeLayoutBreakpoint", publicName: "largeLayoutBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, detailsActive: { classPropertyName: "detailsActive", publicName: "detailsActive", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, truncateHeading: { classPropertyName: "truncateHeading", publicName: "truncateHeading", isSignal: true, isRequired: false, transformFunction: null }, detailsHeading: { classPropertyName: "detailsHeading", publicName: "detailsHeading", isSignal: true, isRequired: false, transformFunction: null }, resizableParts: { classPropertyName: "resizableParts", publicName: "resizableParts", isSignal: true, isRequired: false, transformFunction: null }, hideBackButton: { classPropertyName: "hideBackButton", publicName: "hideBackButton", isSignal: true, isRequired: false, transformFunction: null }, detailsBackButtonText: { classPropertyName: "detailsBackButtonText", publicName: "detailsBackButtonText", isSignal: true, isRequired: false, transformFunction: null }, containerClass: { classPropertyName: "containerClass", publicName: "containerClass", isSignal: true, isRequired: false, transformFunction: null }, mainContainerClass: { classPropertyName: "mainContainerClass", publicName: "mainContainerClass", isSignal: true, isRequired: false, transformFunction: null }, detailContainerClass: { classPropertyName: "detailContainerClass", publicName: "detailContainerClass", isSignal: true, isRequired: false, transformFunction: null }, mainContainerWidth: { classPropertyName: "mainContainerWidth", publicName: "mainContainerWidth", isSignal: true, isRequired: false, transformFunction: null }, minMainSize: { classPropertyName: "minMainSize", publicName: "minMainSize", isSignal: true, isRequired: false, transformFunction: null }, minDetailSize: { classPropertyName: "minDetailSize", publicName: "minDetailSize", isSignal: true, isRequired: false, transformFunction: null }, stateId: { classPropertyName: "stateId", publicName: "stateId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hasLargeSizeChange: "hasLargeSizeChange", detailsActive: "detailsActiveChange", mainContainerWidth: "mainContainerWidthChange" }, host: { properties: { "class.animate": "animate()", "style.opacity": "opacity()" }, classAttribute: "si-layout-inner" }, usesOnChanges: true, ngImport: i0, template: "@if (resizableParts() && hasLargeSize) {\n <div class=\"main-detail-layout d-flex flex-column\" [class]=\"containerClass()\">\n <ng-container *ngTemplateOutlet=\"headingTemplate\" />\n <si-split\n class=\"w-100 flex-grow-1\"\n orientation=\"horizontal\"\n [stateId]=\"stateId()\"\n [sizes]=\"splitSizes\"\n (sizesChange)=\"onSplitSizesChange($event)\"\n >\n <si-split-part\n scale=\"none\"\n [showCollapseButton]=\"false\"\n [showHeader]=\"false\"\n [minSize]=\"minMainSize()\"\n [stateId]=\"mainStateId()\"\n >\n <ng-container *ngTemplateOutlet=\"mainTemplate\" />\n </si-split-part>\n <si-split-part\n scale=\"auto\"\n [showCollapseButton]=\"false\"\n [showHeader]=\"false\"\n [minSize]=\"minDetailSize()\"\n [stateId]=\"detailStateId()\"\n >\n <ng-container *ngTemplateOutlet=\"detailTemplate\" />\n </si-split-part>\n </si-split>\n </div>\n} @else {\n <div\n class=\"main-detail-layout d-flex flex-column\"\n [class]=\"containerClass()\"\n [class.large-size]=\"hasLargeSize\"\n >\n <ng-container *ngTemplateOutlet=\"headingTemplate\" />\n <div\n class=\"main-detail-container d-flex flex-grow-1\"\n [class.details-active]=\"detailsActive() && !hasLargeSize\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n mainTemplate;\n context: { customClass: hasLargeSize ? 'col-3 ps-0 pe-4' : 'col-6 px-0' }\n \"\n />\n <ng-container\n *ngTemplateOutlet=\"\n detailTemplate;\n context: { customClass: hasLargeSize ? 'col-9 ps-4 pe-0' : 'col-6 px-0' }\n \"\n />\n </div>\n </div>\n}\n\n<!-- Templates -->\n<ng-template #headingTemplate>\n @if (heading()) {\n <div class=\"si-layout-header\">\n <h2 class=\"si-layout-title si-layout-top-element\" [class.text-truncate]=\"truncateHeading()\">{{\n heading() | translate\n }}</h2>\n </div>\n }\n</ng-template>\n\n<ng-template #mainTemplate let-customClass=\"customClass\">\n <div\n class=\"main-container d-flex flex-column\"\n [class]=\"[mainContainerClass(), customClass ? customClass : '']\"\n [style.max-inline-size]=\"maxMainSize\"\n >\n <div class=\"main-search-actions d-flex align-items-center\">\n <ng-content select=\"[slot=mainSearch]\" />\n <ng-content select=\"[slot=mainActions]\" />\n </div>\n <div class=\"main-data-container d-flex\">\n <ng-content select=\"[slot=mainData]\" />\n </div>\n </div>\n</ng-template>\n\n<ng-template #detailTemplate let-customClass=\"customClass\">\n <div\n class=\"detail-container d-flex flex-column\"\n [class]=\"[detailContainerClass(), customClass ? customClass : '']\"\n [style.max-inline-size]=\"maxDetailSize\"\n [attr.inert]=\"preventFocusDetails ? '' : null\"\n >\n <div class=\"detail-heading-actions d-flex align-items-center\">\n @if (!this.hasLargeSize && !this.hideBackButton()) {\n <button type=\"button\" class=\"btn btn-circle btn-secondary\" (click)=\"detailsBackClicked()\">\n <si-icon [icon]=\"icons.elementBack\" />\n <span class=\"visually-hidden\">{{ detailsBackButtonText() | translate }}</span>\n </button>\n }\n @if (detailsHeading()) {\n <span class=\"detail-heading si-h4 me-auto ms-6 my-auto text-truncate\">{{\n detailsHeading() | translate\n }}</span>\n }\n <ng-content select=\"[slot=detailActions]\" />\n </div>\n <ng-content select=\"[slot=details]\" />\n </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto}:host ::ng-deep [slot=mainSearch]{flex:1 1 0}:host ::ng-deep [slot=mainSearch]+[slot=mainActions]{margin-inline-start:12px}:host ::ng-deep [slot=mainActions]{margin-inline-start:auto}:host ::ng-deep [slot=mainData],:host ::ng-deep [slot=details]{flex:1 1 0;min-block-size:0}:host ::ng-deep [slot=detailActions]{margin-inline-start:auto}:host ::ng-deep .detail-heading+[slot=detailActions]{margin-inline-start:12px}:host ::ng-deep si-split{--si-split-gutter-background: transparent;min-block-size:0}:host ::ng-deep si-split si-split-part,:host ::ng-deep si-split .si-split-container,:host ::ng-deep si-split .si-split-part-content{overflow:visible}:host.animate{--si-main-detail-animation-duration: calc(.5s * var(--element-animations-enabled, 1))}.main-detail-layout{overflow-x:hidden;position:relative}.main-detail-layout.large-size{--si-main-detail-container-width: 100%;--si-main-detail-container-transition: none;--si-main-detail-container-transform: none;--si-main-detail-transition: none;--si-main-detail-opacity: 1;--si-main-detail-pointer-events: auto}.main-detail-container{--si-main-detail-transition: opacity var(--si-main-detail-animation-duration, 0) ease-in-out;--si-main-detail-detail-opacity: 0;--si-main-detail-detail-pointer-events: none;inline-size:var(--si-main-detail-container-width, 200%);transform:var(--si-main-detail-container-transform, none);transform-origin:top left;transition:var(--si-main-detail-container-transition, transform var(--si-main-detail-animation-duration, 0) ease-in-out)}.main-detail-container.details-active{--si-main-detail-container-transform: translateX(-50%);--si-main-detail-main-opacity: 0;--si-main-detail-detail-opacity: 1;--si-main-detail-main-pointer-events: none;--si-main-detail-detail-pointer-events: auto}.main-detail-layout,.main-detail-container,.main-container,.detail-container,.main-data-container{flex:1 1 0;min-block-size:0}.main-container,.detail-container{transition:var(--si-main-detail-transition, none)}.main-container{opacity:var(--si-main-detail-opacity, var(--si-main-detail-main-opacity, 1));pointer-events:var(--si-main-detail-pointer-events, var(--si-main-detail-main-pointer-events, auto))}.detail-container{opacity:var(--si-main-detail-opacity, var(--si-main-detail-detail-opacity, 1));pointer-events:var(--si-main-detail-pointer-events, var(--si-main-detail-detail-pointer-events, auto))}.main-search-actions:not(:empty)
|
|
229
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiMainDetailContainerComponent, isStandalone: true, selector: "si-main-detail-container", inputs: { largeLayoutBreakpoint: { classPropertyName: "largeLayoutBreakpoint", publicName: "largeLayoutBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, detailsActive: { classPropertyName: "detailsActive", publicName: "detailsActive", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, truncateHeading: { classPropertyName: "truncateHeading", publicName: "truncateHeading", isSignal: true, isRequired: false, transformFunction: null }, detailsHeading: { classPropertyName: "detailsHeading", publicName: "detailsHeading", isSignal: true, isRequired: false, transformFunction: null }, resizableParts: { classPropertyName: "resizableParts", publicName: "resizableParts", isSignal: true, isRequired: false, transformFunction: null }, hideBackButton: { classPropertyName: "hideBackButton", publicName: "hideBackButton", isSignal: true, isRequired: false, transformFunction: null }, detailsBackButtonText: { classPropertyName: "detailsBackButtonText", publicName: "detailsBackButtonText", isSignal: true, isRequired: false, transformFunction: null }, containerClass: { classPropertyName: "containerClass", publicName: "containerClass", isSignal: true, isRequired: false, transformFunction: null }, mainContainerClass: { classPropertyName: "mainContainerClass", publicName: "mainContainerClass", isSignal: true, isRequired: false, transformFunction: null }, detailContainerClass: { classPropertyName: "detailContainerClass", publicName: "detailContainerClass", isSignal: true, isRequired: false, transformFunction: null }, mainContainerWidth: { classPropertyName: "mainContainerWidth", publicName: "mainContainerWidth", isSignal: true, isRequired: false, transformFunction: null }, minMainSize: { classPropertyName: "minMainSize", publicName: "minMainSize", isSignal: true, isRequired: false, transformFunction: null }, minDetailSize: { classPropertyName: "minDetailSize", publicName: "minDetailSize", isSignal: true, isRequired: false, transformFunction: null }, stateId: { classPropertyName: "stateId", publicName: "stateId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hasLargeSizeChange: "hasLargeSizeChange", detailsActive: "detailsActiveChange", mainContainerWidth: "mainContainerWidthChange" }, host: { properties: { "class.animate": "animate()", "style.opacity": "opacity()" }, classAttribute: "si-layout-inner" }, usesOnChanges: true, ngImport: i0, template: "@if (resizableParts() && hasLargeSize) {\n <div class=\"main-detail-layout d-flex flex-column\" [class]=\"containerClass()\">\n <ng-container *ngTemplateOutlet=\"headingTemplate\" />\n <si-split\n class=\"w-100 flex-grow-1\"\n orientation=\"horizontal\"\n [stateId]=\"stateId()\"\n [sizes]=\"splitSizes\"\n (sizesChange)=\"onSplitSizesChange($event)\"\n >\n <si-split-part\n scale=\"none\"\n [showCollapseButton]=\"false\"\n [showHeader]=\"false\"\n [minSize]=\"minMainSize()\"\n [stateId]=\"mainStateId()\"\n >\n <ng-container *ngTemplateOutlet=\"mainTemplate\" />\n </si-split-part>\n <si-split-part\n scale=\"auto\"\n [showCollapseButton]=\"false\"\n [showHeader]=\"false\"\n [minSize]=\"minDetailSize()\"\n [stateId]=\"detailStateId()\"\n >\n <ng-container *ngTemplateOutlet=\"detailTemplate\" />\n </si-split-part>\n </si-split>\n </div>\n} @else {\n <div\n class=\"main-detail-layout d-flex flex-column\"\n [class]=\"containerClass()\"\n [class.large-size]=\"hasLargeSize\"\n >\n <ng-container *ngTemplateOutlet=\"headingTemplate\" />\n <div\n class=\"main-detail-container d-flex flex-grow-1\"\n [class.details-active]=\"detailsActive() && !hasLargeSize\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n mainTemplate;\n context: { customClass: hasLargeSize ? 'col-3 ps-0 pe-4' : 'col-6 px-0' }\n \"\n />\n <ng-container\n *ngTemplateOutlet=\"\n detailTemplate;\n context: { customClass: hasLargeSize ? 'col-9 ps-4 pe-0' : 'col-6 px-0' }\n \"\n />\n </div>\n </div>\n}\n\n<!-- Templates -->\n<ng-template #headingTemplate>\n @if (heading()) {\n <div class=\"si-layout-header\">\n <h2 class=\"si-layout-title si-layout-top-element\" [class.text-truncate]=\"truncateHeading()\">{{\n heading() | translate\n }}</h2>\n </div>\n }\n</ng-template>\n\n<ng-template #mainTemplate let-customClass=\"customClass\">\n <div\n class=\"main-container d-flex flex-column\"\n [class]=\"[mainContainerClass(), customClass ? customClass : '']\"\n [style.max-inline-size]=\"maxMainSize\"\n >\n <div class=\"main-search-actions d-flex align-items-center\">\n <ng-content select=\"[slot=mainSearch]\" />\n <ng-content select=\"[slot=mainActions]\" />\n </div>\n <div class=\"main-data-container d-flex\">\n <ng-content select=\"[slot=mainData]\" />\n </div>\n </div>\n</ng-template>\n\n<ng-template #detailTemplate let-customClass=\"customClass\">\n <div\n class=\"detail-container d-flex flex-column\"\n [class]=\"[detailContainerClass(), customClass ? customClass : '']\"\n [style.max-inline-size]=\"maxDetailSize\"\n [attr.inert]=\"preventFocusDetails ? '' : null\"\n >\n <div class=\"detail-heading-actions d-flex align-items-center\">\n @if (!this.hasLargeSize && !this.hideBackButton()) {\n <button type=\"button\" class=\"btn btn-circle btn-secondary\" (click)=\"detailsBackClicked()\">\n <si-icon [icon]=\"icons.elementBack\" />\n <span class=\"visually-hidden\">{{ detailsBackButtonText() | translate }}</span>\n </button>\n }\n @if (detailsHeading()) {\n <span class=\"detail-heading si-h4 me-auto ms-6 my-auto text-truncate\">{{\n detailsHeading() | translate\n }}</span>\n }\n <ng-content select=\"[slot=detailActions]\" />\n </div>\n <ng-content select=\"[slot=details]\" />\n </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto}:host ::ng-deep [slot=mainSearch]{flex:1 1 0}:host ::ng-deep [slot=mainSearch]+[slot=mainActions]{margin-inline-start:12px}:host ::ng-deep [slot=mainActions]{margin-inline-start:auto}:host ::ng-deep [slot=mainData],:host ::ng-deep [slot=details]{flex:1 1 0;min-block-size:0}:host ::ng-deep [slot=detailActions]{margin-inline-start:auto}:host ::ng-deep .detail-heading+[slot=detailActions]{margin-inline-start:12px}:host ::ng-deep si-split{--si-split-gutter-background: transparent;min-block-size:0}:host ::ng-deep si-split si-split-part,:host ::ng-deep si-split .si-split-container,:host ::ng-deep si-split .si-split-part-content{overflow:visible}:host.animate{--si-main-detail-animation-duration: calc(.5s * var(--element-animations-enabled, 1))}.main-detail-layout{overflow-x:hidden;position:relative}.main-detail-layout.large-size{--si-main-detail-container-width: 100%;--si-main-detail-container-transition: none;--si-main-detail-container-transform: none;--si-main-detail-transition: none;--si-main-detail-opacity: 1;--si-main-detail-pointer-events: auto}.main-detail-container{--si-main-detail-transition: opacity var(--si-main-detail-animation-duration, 0) ease-in-out;--si-main-detail-detail-opacity: 0;--si-main-detail-detail-pointer-events: none;inline-size:var(--si-main-detail-container-width, 200%);transform:var(--si-main-detail-container-transform, none);transform-origin:top left;transition:var(--si-main-detail-container-transition, transform var(--si-main-detail-animation-duration, 0) ease-in-out)}.main-detail-container.details-active{--si-main-detail-container-transform: translateX(-50%);--si-main-detail-main-opacity: 0;--si-main-detail-detail-opacity: 1;--si-main-detail-main-pointer-events: none;--si-main-detail-detail-pointer-events: auto}.main-detail-layout,.main-detail-container,.main-container,.detail-container,.main-data-container{flex:1 1 0;min-block-size:0}.main-container,.detail-container{transition:var(--si-main-detail-transition, none)}.main-container{opacity:var(--si-main-detail-opacity, var(--si-main-detail-main-opacity, 1));pointer-events:var(--si-main-detail-pointer-events, var(--si-main-detail-main-pointer-events, auto))}.detail-container{opacity:var(--si-main-detail-opacity, var(--si-main-detail-detail-opacity, 1));pointer-events:var(--si-main-detail-pointer-events, var(--si-main-detail-detail-pointer-events, auto))}.main-search-actions:not(:empty),.detail-heading-actions:not(:empty){min-block-size:calc(1lh + 16px);margin-block-end:16px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiSplitComponent, selector: "si-split", inputs: ["gutterSize", "orientation", "sizes", "stateId"], outputs: ["sizesChange"] }, { kind: "component", type: SiSplitPartComponent, selector: "si-split-part", inputs: ["actions", "collapseDirection", "collapseIconClass", "collapseToMinSize", "headerTemplate", "heading", "minSize", "removeContentOnCollapse", "scale", "showCollapseButton", "showHeader", "collapseLabel", "stateId", "size", "collapseOthers", "expanded"], outputs: ["collapseChanged", "stateChange"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
230
230
|
}
|
|
231
231
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMainDetailContainerComponent, decorators: [{
|
|
232
232
|
type: Component,
|
|
@@ -240,7 +240,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
240
240
|
class: 'si-layout-inner',
|
|
241
241
|
'[class.animate]': 'animate()',
|
|
242
242
|
'[style.opacity]': 'opacity()'
|
|
243
|
-
}, template: "@if (resizableParts() && hasLargeSize) {\n <div class=\"main-detail-layout d-flex flex-column\" [class]=\"containerClass()\">\n <ng-container *ngTemplateOutlet=\"headingTemplate\" />\n <si-split\n class=\"w-100 flex-grow-1\"\n orientation=\"horizontal\"\n [stateId]=\"stateId()\"\n [sizes]=\"splitSizes\"\n (sizesChange)=\"onSplitSizesChange($event)\"\n >\n <si-split-part\n scale=\"none\"\n [showCollapseButton]=\"false\"\n [showHeader]=\"false\"\n [minSize]=\"minMainSize()\"\n [stateId]=\"mainStateId()\"\n >\n <ng-container *ngTemplateOutlet=\"mainTemplate\" />\n </si-split-part>\n <si-split-part\n scale=\"auto\"\n [showCollapseButton]=\"false\"\n [showHeader]=\"false\"\n [minSize]=\"minDetailSize()\"\n [stateId]=\"detailStateId()\"\n >\n <ng-container *ngTemplateOutlet=\"detailTemplate\" />\n </si-split-part>\n </si-split>\n </div>\n} @else {\n <div\n class=\"main-detail-layout d-flex flex-column\"\n [class]=\"containerClass()\"\n [class.large-size]=\"hasLargeSize\"\n >\n <ng-container *ngTemplateOutlet=\"headingTemplate\" />\n <div\n class=\"main-detail-container d-flex flex-grow-1\"\n [class.details-active]=\"detailsActive() && !hasLargeSize\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n mainTemplate;\n context: { customClass: hasLargeSize ? 'col-3 ps-0 pe-4' : 'col-6 px-0' }\n \"\n />\n <ng-container\n *ngTemplateOutlet=\"\n detailTemplate;\n context: { customClass: hasLargeSize ? 'col-9 ps-4 pe-0' : 'col-6 px-0' }\n \"\n />\n </div>\n </div>\n}\n\n<!-- Templates -->\n<ng-template #headingTemplate>\n @if (heading()) {\n <div class=\"si-layout-header\">\n <h2 class=\"si-layout-title si-layout-top-element\" [class.text-truncate]=\"truncateHeading()\">{{\n heading() | translate\n }}</h2>\n </div>\n }\n</ng-template>\n\n<ng-template #mainTemplate let-customClass=\"customClass\">\n <div\n class=\"main-container d-flex flex-column\"\n [class]=\"[mainContainerClass(), customClass ? customClass : '']\"\n [style.max-inline-size]=\"maxMainSize\"\n >\n <div class=\"main-search-actions d-flex align-items-center\">\n <ng-content select=\"[slot=mainSearch]\" />\n <ng-content select=\"[slot=mainActions]\" />\n </div>\n <div class=\"main-data-container d-flex\">\n <ng-content select=\"[slot=mainData]\" />\n </div>\n </div>\n</ng-template>\n\n<ng-template #detailTemplate let-customClass=\"customClass\">\n <div\n class=\"detail-container d-flex flex-column\"\n [class]=\"[detailContainerClass(), customClass ? customClass : '']\"\n [style.max-inline-size]=\"maxDetailSize\"\n [attr.inert]=\"preventFocusDetails ? '' : null\"\n >\n <div class=\"detail-heading-actions d-flex align-items-center\">\n @if (!this.hasLargeSize && !this.hideBackButton()) {\n <button type=\"button\" class=\"btn btn-circle btn-secondary\" (click)=\"detailsBackClicked()\">\n <si-icon [icon]=\"icons.elementBack\" />\n <span class=\"visually-hidden\">{{ detailsBackButtonText() | translate }}</span>\n </button>\n }\n @if (detailsHeading()) {\n <span class=\"detail-heading si-h4 me-auto ms-6 my-auto text-truncate\">{{\n detailsHeading() | translate\n }}</span>\n }\n <ng-content select=\"[slot=detailActions]\" />\n </div>\n <ng-content select=\"[slot=details]\" />\n </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto}:host ::ng-deep [slot=mainSearch]{flex:1 1 0}:host ::ng-deep [slot=mainSearch]+[slot=mainActions]{margin-inline-start:12px}:host ::ng-deep [slot=mainActions]{margin-inline-start:auto}:host ::ng-deep [slot=mainData],:host ::ng-deep [slot=details]{flex:1 1 0;min-block-size:0}:host ::ng-deep [slot=detailActions]{margin-inline-start:auto}:host ::ng-deep .detail-heading+[slot=detailActions]{margin-inline-start:12px}:host ::ng-deep si-split{--si-split-gutter-background: transparent;min-block-size:0}:host ::ng-deep si-split si-split-part,:host ::ng-deep si-split .si-split-container,:host ::ng-deep si-split .si-split-part-content{overflow:visible}:host.animate{--si-main-detail-animation-duration: calc(.5s * var(--element-animations-enabled, 1))}.main-detail-layout{overflow-x:hidden;position:relative}.main-detail-layout.large-size{--si-main-detail-container-width: 100%;--si-main-detail-container-transition: none;--si-main-detail-container-transform: none;--si-main-detail-transition: none;--si-main-detail-opacity: 1;--si-main-detail-pointer-events: auto}.main-detail-container{--si-main-detail-transition: opacity var(--si-main-detail-animation-duration, 0) ease-in-out;--si-main-detail-detail-opacity: 0;--si-main-detail-detail-pointer-events: none;inline-size:var(--si-main-detail-container-width, 200%);transform:var(--si-main-detail-container-transform, none);transform-origin:top left;transition:var(--si-main-detail-container-transition, transform var(--si-main-detail-animation-duration, 0) ease-in-out)}.main-detail-container.details-active{--si-main-detail-container-transform: translateX(-50%);--si-main-detail-main-opacity: 0;--si-main-detail-detail-opacity: 1;--si-main-detail-main-pointer-events: none;--si-main-detail-detail-pointer-events: auto}.main-detail-layout,.main-detail-container,.main-container,.detail-container,.main-data-container{flex:1 1 0;min-block-size:0}.main-container,.detail-container{transition:var(--si-main-detail-transition, none)}.main-container{opacity:var(--si-main-detail-opacity, var(--si-main-detail-main-opacity, 1));pointer-events:var(--si-main-detail-pointer-events, var(--si-main-detail-main-pointer-events, auto))}.detail-container{opacity:var(--si-main-detail-opacity, var(--si-main-detail-detail-opacity, 1));pointer-events:var(--si-main-detail-pointer-events, var(--si-main-detail-detail-pointer-events, auto))}.main-search-actions:not(:empty)
|
|
243
|
+
}, template: "@if (resizableParts() && hasLargeSize) {\n <div class=\"main-detail-layout d-flex flex-column\" [class]=\"containerClass()\">\n <ng-container *ngTemplateOutlet=\"headingTemplate\" />\n <si-split\n class=\"w-100 flex-grow-1\"\n orientation=\"horizontal\"\n [stateId]=\"stateId()\"\n [sizes]=\"splitSizes\"\n (sizesChange)=\"onSplitSizesChange($event)\"\n >\n <si-split-part\n scale=\"none\"\n [showCollapseButton]=\"false\"\n [showHeader]=\"false\"\n [minSize]=\"minMainSize()\"\n [stateId]=\"mainStateId()\"\n >\n <ng-container *ngTemplateOutlet=\"mainTemplate\" />\n </si-split-part>\n <si-split-part\n scale=\"auto\"\n [showCollapseButton]=\"false\"\n [showHeader]=\"false\"\n [minSize]=\"minDetailSize()\"\n [stateId]=\"detailStateId()\"\n >\n <ng-container *ngTemplateOutlet=\"detailTemplate\" />\n </si-split-part>\n </si-split>\n </div>\n} @else {\n <div\n class=\"main-detail-layout d-flex flex-column\"\n [class]=\"containerClass()\"\n [class.large-size]=\"hasLargeSize\"\n >\n <ng-container *ngTemplateOutlet=\"headingTemplate\" />\n <div\n class=\"main-detail-container d-flex flex-grow-1\"\n [class.details-active]=\"detailsActive() && !hasLargeSize\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n mainTemplate;\n context: { customClass: hasLargeSize ? 'col-3 ps-0 pe-4' : 'col-6 px-0' }\n \"\n />\n <ng-container\n *ngTemplateOutlet=\"\n detailTemplate;\n context: { customClass: hasLargeSize ? 'col-9 ps-4 pe-0' : 'col-6 px-0' }\n \"\n />\n </div>\n </div>\n}\n\n<!-- Templates -->\n<ng-template #headingTemplate>\n @if (heading()) {\n <div class=\"si-layout-header\">\n <h2 class=\"si-layout-title si-layout-top-element\" [class.text-truncate]=\"truncateHeading()\">{{\n heading() | translate\n }}</h2>\n </div>\n }\n</ng-template>\n\n<ng-template #mainTemplate let-customClass=\"customClass\">\n <div\n class=\"main-container d-flex flex-column\"\n [class]=\"[mainContainerClass(), customClass ? customClass : '']\"\n [style.max-inline-size]=\"maxMainSize\"\n >\n <div class=\"main-search-actions d-flex align-items-center\">\n <ng-content select=\"[slot=mainSearch]\" />\n <ng-content select=\"[slot=mainActions]\" />\n </div>\n <div class=\"main-data-container d-flex\">\n <ng-content select=\"[slot=mainData]\" />\n </div>\n </div>\n</ng-template>\n\n<ng-template #detailTemplate let-customClass=\"customClass\">\n <div\n class=\"detail-container d-flex flex-column\"\n [class]=\"[detailContainerClass(), customClass ? customClass : '']\"\n [style.max-inline-size]=\"maxDetailSize\"\n [attr.inert]=\"preventFocusDetails ? '' : null\"\n >\n <div class=\"detail-heading-actions d-flex align-items-center\">\n @if (!this.hasLargeSize && !this.hideBackButton()) {\n <button type=\"button\" class=\"btn btn-circle btn-secondary\" (click)=\"detailsBackClicked()\">\n <si-icon [icon]=\"icons.elementBack\" />\n <span class=\"visually-hidden\">{{ detailsBackButtonText() | translate }}</span>\n </button>\n }\n @if (detailsHeading()) {\n <span class=\"detail-heading si-h4 me-auto ms-6 my-auto text-truncate\">{{\n detailsHeading() | translate\n }}</span>\n }\n <ng-content select=\"[slot=detailActions]\" />\n </div>\n <ng-content select=\"[slot=details]\" />\n </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto}:host ::ng-deep [slot=mainSearch]{flex:1 1 0}:host ::ng-deep [slot=mainSearch]+[slot=mainActions]{margin-inline-start:12px}:host ::ng-deep [slot=mainActions]{margin-inline-start:auto}:host ::ng-deep [slot=mainData],:host ::ng-deep [slot=details]{flex:1 1 0;min-block-size:0}:host ::ng-deep [slot=detailActions]{margin-inline-start:auto}:host ::ng-deep .detail-heading+[slot=detailActions]{margin-inline-start:12px}:host ::ng-deep si-split{--si-split-gutter-background: transparent;min-block-size:0}:host ::ng-deep si-split si-split-part,:host ::ng-deep si-split .si-split-container,:host ::ng-deep si-split .si-split-part-content{overflow:visible}:host.animate{--si-main-detail-animation-duration: calc(.5s * var(--element-animations-enabled, 1))}.main-detail-layout{overflow-x:hidden;position:relative}.main-detail-layout.large-size{--si-main-detail-container-width: 100%;--si-main-detail-container-transition: none;--si-main-detail-container-transform: none;--si-main-detail-transition: none;--si-main-detail-opacity: 1;--si-main-detail-pointer-events: auto}.main-detail-container{--si-main-detail-transition: opacity var(--si-main-detail-animation-duration, 0) ease-in-out;--si-main-detail-detail-opacity: 0;--si-main-detail-detail-pointer-events: none;inline-size:var(--si-main-detail-container-width, 200%);transform:var(--si-main-detail-container-transform, none);transform-origin:top left;transition:var(--si-main-detail-container-transition, transform var(--si-main-detail-animation-duration, 0) ease-in-out)}.main-detail-container.details-active{--si-main-detail-container-transform: translateX(-50%);--si-main-detail-main-opacity: 0;--si-main-detail-detail-opacity: 1;--si-main-detail-main-pointer-events: none;--si-main-detail-detail-pointer-events: auto}.main-detail-layout,.main-detail-container,.main-container,.detail-container,.main-data-container{flex:1 1 0;min-block-size:0}.main-container,.detail-container{transition:var(--si-main-detail-transition, none)}.main-container{opacity:var(--si-main-detail-opacity, var(--si-main-detail-main-opacity, 1));pointer-events:var(--si-main-detail-pointer-events, var(--si-main-detail-main-pointer-events, auto))}.detail-container{opacity:var(--si-main-detail-opacity, var(--si-main-detail-detail-opacity, 1));pointer-events:var(--si-main-detail-pointer-events, var(--si-main-detail-detail-pointer-events, auto))}.main-search-actions:not(:empty),.detail-heading-actions:not(:empty){min-block-size:calc(1lh + 16px);margin-block-end:16px}\n"] }]
|
|
244
244
|
}], propDecorators: { largeLayoutBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "largeLayoutBreakpoint", required: false }] }], hasLargeSizeChange: [{ type: i0.Output, args: ["hasLargeSizeChange"] }], detailsActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailsActive", required: false }] }, { type: i0.Output, args: ["detailsActiveChange"] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], truncateHeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncateHeading", required: false }] }], detailsHeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailsHeading", required: false }] }], resizableParts: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizableParts", required: false }] }], hideBackButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideBackButton", required: false }] }], detailsBackButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailsBackButtonText", required: false }] }], containerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerClass", required: false }] }], mainContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainContainerClass", required: false }] }], detailContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailContainerClass", required: false }] }], mainContainerWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainContainerWidth", required: false }] }, { type: i0.Output, args: ["mainContainerWidthChange"] }], minMainSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minMainSize", required: false }] }], minDetailSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDetailSize", required: false }] }], stateId: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateId", required: false }] }] } });
|
|
245
245
|
|
|
246
246
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"siemens-element-ng-main-detail-container.mjs","sources":["../../../../projects/element-ng/main-detail-container/si-main-detail-container.component.ts","../../../../projects/element-ng/main-detail-container/si-main-detail-container.component.html","../../../../projects/element-ng/main-detail-container/si-main-detail-container.module.ts","../../../../projects/element-ng/main-detail-container/index.ts","../../../../projects/element-ng/main-detail-container/siemens-element-ng-main-detail-container.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n computed,\n DestroyRef,\n ElementRef,\n inject,\n input,\n model,\n OnChanges,\n OnInit,\n output,\n signal,\n SimpleChanges\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { elementBack } from '@siemens/element-icons';\nimport { addIcons, SiIconComponent } from '@siemens/element-ng/icon';\nimport {\n BOOTSTRAP_BREAKPOINTS,\n ElementDimensions,\n ResizeObserverService\n} from '@siemens/element-ng/resize-observer';\nimport { SiSplitComponent, SiSplitPartComponent } from '@siemens/element-ng/split';\nimport { SiTranslatePipe, t, TranslatableString } from '@siemens/element-translate-ng/translate';\nimport { timer } from 'rxjs';\n\n@Component({\n selector: 'si-main-detail-container',\n imports: [\n NgTemplateOutlet,\n SiSplitComponent,\n SiSplitPartComponent,\n SiTranslatePipe,\n SiIconComponent\n ],\n templateUrl: './si-main-detail-container.component.html',\n styleUrl: './si-main-detail-container.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'si-layout-inner',\n '[class.animate]': 'animate()',\n '[style.opacity]': 'opacity()'\n }\n})\nexport class SiMainDetailContainerComponent implements OnInit, OnChanges {\n protected readonly icons = addIcons({ elementBack });\n\n private readonly animationDuration = 500;\n private readonly elementRef = inject(ElementRef);\n private readonly resizeObserver = inject(ResizeObserverService);\n private readonly changeDetectorRef = inject(ChangeDetectorRef);\n private readonly destroyRef = inject(DestroyRef);\n\n /**\n * A numeric value defining the minimum width in px, which the container needs\n * to be displayed in its large layout. Whenever smaller than\n * this threshold, the small layout will be used. Default is\n * value is BOOTSTRAP_BREAKPOINTS.mdMinimum.\n *\n * @defaultValue BOOTSTRAP_BREAKPOINTS.mdMinimum\n */\n readonly largeLayoutBreakpoint = input(BOOTSTRAP_BREAKPOINTS.mdMinimum);\n\n /**\n * Whether the main-detail layout component has a large size or not,\n * `true` if the container´s width matches or exceeds the `largeLayoutBreakpoint`.\n */\n hasLargeSize!: boolean;\n\n /**\n * Emits whether the components size is large enough to display\n * main and details views next to each other or not.\n */\n readonly hasLargeSizeChange = output<boolean>();\n\n /**\n * Whether the details are currently active or not, mostly relevant in the\n * responsive scenario when the viewport only shows either the main or the detail.\n *\n * @defaultValue false\n */\n readonly detailsActive = model(false);\n\n /**\n * The heading of the main-detail layout component, usually a page heading.\n *\n * @defaultValue ''\n */\n readonly heading = input<TranslatableString>('');\n\n /**\n * Whether the heading should be truncated (single line) or not.\n * Default value is `false`.\n *\n * @defaultValue false\n */\n readonly truncateHeading = input(false, { transform: booleanAttribute });\n\n /**\n * The heading of the detail area.\n *\n * @defaultValue ''\n */\n readonly detailsHeading = input<TranslatableString>('');\n\n /**\n * Whether the main and detail parts should be resizable by a splitter or not.\n * This is only supported in the 'large' scenario (when `hasLargeSize` is `true`).\n * Default value is `false`.\n *\n * @defaultValue false\n */\n readonly resizableParts = input(false, { transform: booleanAttribute });\n\n /**\n * You can hide the back button in the mobile view by setting true. Required\n * in add, edit workflows on mobile sizes. During add or edit, the back button\n * should be hidden. Default value is `false`.\n *\n * @defaultValue false\n */\n readonly hideBackButton = input(false, { transform: booleanAttribute });\n\n /**\n * Details back button text. Required for a11y.\n *\n * @defaultValue\n * ```\n * t(() => $localize`:@@SI_MAIN_DETAIL_CONTAINER.BACK:Back`)\n * ```\n */\n readonly detailsBackButtonText = input(t(() => $localize`:@@SI_MAIN_DETAIL_CONTAINER.BACK:Back`));\n\n /**\n * CSS class(es) applied to the outermost container. Per default, Bootstrap classes\n * to handle responsive paddings are applied: `px-6 pt-6 px-md-9`.\n *\n * @defaultValue 'px-6 pt-6 px-md-9'\n */\n readonly containerClass = input('px-6 pt-6 px-md-9');\n\n /**\n * CSS class(es) applied to the main container. In combination with `containerClass`,\n * this allows for settings individual padding and margin values on the individual containers.\n *\n * @defaultValue 'pb-6'\n */\n readonly mainContainerClass = input('pb-6');\n\n /**\n * CSS class(es) applied to the detail container. In combination with `containerClass`,\n * this allows for settings individual padding and margin values on the individual containers.\n *\n * @defaultValue 'pb-6'\n */\n readonly detailContainerClass = input('pb-6');\n\n /**\n * The percentage width of the main container from the overall component width.\n * Can be a number or `'default'`, which is 32% when {@link resizableParts} is active, otherwise 50%.\n *\n * @defaultValue 'default'\n */\n readonly mainContainerWidth = model<number | 'default'>('default');\n /**\n * Sets the minimal width of the main container in pixel.\n *\n * @defaultValue 300\n */\n readonly minMainSize = input(300);\n /**\n * Sets the minimal width of the detail container in pixel.\n *\n * @defaultValue 300\n */\n readonly minDetailSize = input(300);\n /**\n * An optional stateId to uniquely identify a component instance.\n * Required for persistence of ui state.\n */\n readonly stateId = input<string>();\n\n /**\n * The attribute is set to true when the detail area is not visible to ensure that the user\n * can't tab to details area when it is hidden.\n */\n protected preventFocusDetails = false;\n\n private readonly actualMainContainerWidth = computed(() => {\n const mainContainerWidth = this.mainContainerWidth();\n return mainContainerWidth === 'default'\n ? this.resizableParts()\n ? 32\n : 50\n : mainContainerWidth;\n });\n\n protected splitSizes: [number, number] = [\n this.actualMainContainerWidth(),\n 100 - this.actualMainContainerWidth()\n ];\n // The max size to limit the main container in the static flex layout (if less than 50%), otherwise not set.\n protected maxMainSize: string = this.getMaxSize(0);\n // The max size to limit the detail container in the static flex layout (if less than 50%), otherwise not set.\n protected maxDetailSize: string = this.getMaxSize(1);\n\n protected readonly mainStateId = computed(() => {\n const stateId = this.stateId();\n return stateId ? `${stateId}-main` : undefined;\n });\n\n protected readonly detailStateId = computed(() => {\n const stateId = this.stateId();\n return stateId ? `${stateId}-detail` : undefined;\n });\n\n protected readonly animate = signal(false);\n\n protected readonly opacity = signal('0');\n\n ngOnChanges(changes: SimpleChanges<this>): void {\n if (changes.detailsActive) {\n this.updateDetailsFocusable();\n this.doAnimation(changes.detailsActive.currentValue);\n }\n if (changes.mainContainerWidth || changes.resizableParts) {\n this.splitSizes = [this.actualMainContainerWidth(), 100 - this.actualMainContainerWidth()];\n this.maxMainSize = this.getMaxSize(0);\n this.maxDetailSize = this.getMaxSize(1);\n }\n }\n\n ngOnInit(): void {\n this.resizeObserver\n .observe(this.elementRef.nativeElement, 100, true)\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(dimensions => this.determineLayout(dimensions));\n }\n\n protected onSplitSizesChange(sizes: number[]): void {\n this.mainContainerWidth.set(sizes[0]);\n }\n\n protected detailsBackClicked(): void {\n this.detailsActive.set(false);\n this.doAnimation(false);\n }\n\n /**\n * Get the max size to limit in the static flex layout (if less than 50%), otherwise not set\n */\n private getMaxSize(part: 0 | 1): string {\n return this.resizableParts() ||\n this.mainContainerWidth() === 'default' ||\n !this.hasLargeSize ||\n this.splitSizes[part] > 50\n ? ''\n : this.splitSizes[part] + '%';\n }\n\n private determineLayout(dimensions: ElementDimensions): void {\n const newHasLargeSize = dimensions.width >= this.largeLayoutBreakpoint();\n if (this.hasLargeSize !== newHasLargeSize) {\n this.hasLargeSize = newHasLargeSize;\n this.maxMainSize = this.getMaxSize(0);\n this.maxDetailSize = this.getMaxSize(1);\n this.updateDetailsFocusable();\n this.hasLargeSizeChange.emit(this.hasLargeSize);\n this.changeDetectorRef.markForCheck();\n }\n if (this.opacity() === '0') {\n this.opacity.set('');\n }\n }\n\n private doAnimation(detailsActive: boolean): void {\n this.animate.set(true);\n timer(this.animationDuration)\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(() => this.animate.set(false));\n this.detailsActive.set(detailsActive);\n }\n\n private updateDetailsFocusable(): void {\n this.preventFocusDetails = !this.hasLargeSize && !this.detailsActive();\n }\n}\n","@if (resizableParts() && hasLargeSize) {\n <div class=\"main-detail-layout d-flex flex-column\" [class]=\"containerClass()\">\n <ng-container *ngTemplateOutlet=\"headingTemplate\" />\n <si-split\n class=\"w-100 flex-grow-1\"\n orientation=\"horizontal\"\n [stateId]=\"stateId()\"\n [sizes]=\"splitSizes\"\n (sizesChange)=\"onSplitSizesChange($event)\"\n >\n <si-split-part\n scale=\"none\"\n [showCollapseButton]=\"false\"\n [showHeader]=\"false\"\n [minSize]=\"minMainSize()\"\n [stateId]=\"mainStateId()\"\n >\n <ng-container *ngTemplateOutlet=\"mainTemplate\" />\n </si-split-part>\n <si-split-part\n scale=\"auto\"\n [showCollapseButton]=\"false\"\n [showHeader]=\"false\"\n [minSize]=\"minDetailSize()\"\n [stateId]=\"detailStateId()\"\n >\n <ng-container *ngTemplateOutlet=\"detailTemplate\" />\n </si-split-part>\n </si-split>\n </div>\n} @else {\n <div\n class=\"main-detail-layout d-flex flex-column\"\n [class]=\"containerClass()\"\n [class.large-size]=\"hasLargeSize\"\n >\n <ng-container *ngTemplateOutlet=\"headingTemplate\" />\n <div\n class=\"main-detail-container d-flex flex-grow-1\"\n [class.details-active]=\"detailsActive() && !hasLargeSize\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n mainTemplate;\n context: { customClass: hasLargeSize ? 'col-3 ps-0 pe-4' : 'col-6 px-0' }\n \"\n />\n <ng-container\n *ngTemplateOutlet=\"\n detailTemplate;\n context: { customClass: hasLargeSize ? 'col-9 ps-4 pe-0' : 'col-6 px-0' }\n \"\n />\n </div>\n </div>\n}\n\n<!-- Templates -->\n<ng-template #headingTemplate>\n @if (heading()) {\n <div class=\"si-layout-header\">\n <h2 class=\"si-layout-title si-layout-top-element\" [class.text-truncate]=\"truncateHeading()\">{{\n heading() | translate\n }}</h2>\n </div>\n }\n</ng-template>\n\n<ng-template #mainTemplate let-customClass=\"customClass\">\n <div\n class=\"main-container d-flex flex-column\"\n [class]=\"[mainContainerClass(), customClass ? customClass : '']\"\n [style.max-inline-size]=\"maxMainSize\"\n >\n <div class=\"main-search-actions d-flex align-items-center\">\n <ng-content select=\"[slot=mainSearch]\" />\n <ng-content select=\"[slot=mainActions]\" />\n </div>\n <div class=\"main-data-container d-flex\">\n <ng-content select=\"[slot=mainData]\" />\n </div>\n </div>\n</ng-template>\n\n<ng-template #detailTemplate let-customClass=\"customClass\">\n <div\n class=\"detail-container d-flex flex-column\"\n [class]=\"[detailContainerClass(), customClass ? customClass : '']\"\n [style.max-inline-size]=\"maxDetailSize\"\n [attr.inert]=\"preventFocusDetails ? '' : null\"\n >\n <div class=\"detail-heading-actions d-flex align-items-center\">\n @if (!this.hasLargeSize && !this.hideBackButton()) {\n <button type=\"button\" class=\"btn btn-circle btn-secondary\" (click)=\"detailsBackClicked()\">\n <si-icon [icon]=\"icons.elementBack\" />\n <span class=\"visually-hidden\">{{ detailsBackButtonText() | translate }}</span>\n </button>\n }\n @if (detailsHeading()) {\n <span class=\"detail-heading si-h4 me-auto ms-6 my-auto text-truncate\">{{\n detailsHeading() | translate\n }}</span>\n }\n <ng-content select=\"[slot=detailActions]\" />\n </div>\n <ng-content select=\"[slot=details]\" />\n </div>\n</ng-template>\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiMainDetailContainerComponent } from './si-main-detail-container.component';\n\n@NgModule({\n imports: [SiMainDetailContainerComponent],\n exports: [SiMainDetailContainerComponent]\n})\nexport class SiMainDetailContainerModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-main-detail-container.component';\nexport * from './si-main-detail-container.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"siemens-element-ng-main-detail-container.mjs","sources":["../../../../projects/element-ng/main-detail-container/si-main-detail-container.component.ts","../../../../projects/element-ng/main-detail-container/si-main-detail-container.component.html","../../../../projects/element-ng/main-detail-container/si-main-detail-container.module.ts","../../../../projects/element-ng/main-detail-container/index.ts","../../../../projects/element-ng/main-detail-container/siemens-element-ng-main-detail-container.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n computed,\n DestroyRef,\n ElementRef,\n inject,\n input,\n model,\n OnChanges,\n OnInit,\n output,\n signal,\n SimpleChanges\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { elementBack } from '@siemens/element-icons';\nimport { addIcons, SiIconComponent } from '@siemens/element-ng/icon';\nimport {\n BOOTSTRAP_BREAKPOINTS,\n ElementDimensions,\n ResizeObserverService\n} from '@siemens/element-ng/resize-observer';\nimport { SiSplitComponent, SiSplitPartComponent } from '@siemens/element-ng/split';\nimport { SiTranslatePipe, t, TranslatableString } from '@siemens/element-translate-ng/translate';\nimport { timer } from 'rxjs';\n\n@Component({\n selector: 'si-main-detail-container',\n imports: [\n NgTemplateOutlet,\n SiSplitComponent,\n SiSplitPartComponent,\n SiTranslatePipe,\n SiIconComponent\n ],\n templateUrl: './si-main-detail-container.component.html',\n styleUrl: './si-main-detail-container.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'si-layout-inner',\n '[class.animate]': 'animate()',\n '[style.opacity]': 'opacity()'\n }\n})\nexport class SiMainDetailContainerComponent implements OnInit, OnChanges {\n protected readonly icons = addIcons({ elementBack });\n\n private readonly animationDuration = 500;\n private readonly elementRef = inject(ElementRef);\n private readonly resizeObserver = inject(ResizeObserverService);\n private readonly changeDetectorRef = inject(ChangeDetectorRef);\n private readonly destroyRef = inject(DestroyRef);\n\n /**\n * A numeric value defining the minimum width in px, which the container needs\n * to be displayed in its large layout. Whenever smaller than\n * this threshold, the small layout will be used. Default is\n * value is BOOTSTRAP_BREAKPOINTS.mdMinimum.\n *\n * @defaultValue BOOTSTRAP_BREAKPOINTS.mdMinimum\n */\n readonly largeLayoutBreakpoint = input(BOOTSTRAP_BREAKPOINTS.mdMinimum);\n\n /**\n * Whether the main-detail layout component has a large size or not,\n * `true` if the container´s width matches or exceeds the `largeLayoutBreakpoint`.\n */\n hasLargeSize!: boolean;\n\n /**\n * Emits whether the components size is large enough to display\n * main and details views next to each other or not.\n */\n readonly hasLargeSizeChange = output<boolean>();\n\n /**\n * Whether the details are currently active or not, mostly relevant in the\n * responsive scenario when the viewport only shows either the main or the detail.\n *\n * @defaultValue false\n */\n readonly detailsActive = model(false);\n\n /**\n * The heading of the main-detail layout component, usually a page heading.\n *\n * @defaultValue ''\n */\n readonly heading = input<TranslatableString>('');\n\n /**\n * Whether the heading should be truncated (single line) or not.\n * Default value is `false`.\n *\n * @defaultValue false\n */\n readonly truncateHeading = input(false, { transform: booleanAttribute });\n\n /**\n * The heading of the detail area.\n *\n * @defaultValue ''\n */\n readonly detailsHeading = input<TranslatableString>('');\n\n /**\n * Whether the main and detail parts should be resizable by a splitter or not.\n * This is only supported in the 'large' scenario (when `hasLargeSize` is `true`).\n * Default value is `false`.\n *\n * @defaultValue false\n */\n readonly resizableParts = input(false, { transform: booleanAttribute });\n\n /**\n * You can hide the back button in the mobile view by setting true. Required\n * in add, edit workflows on mobile sizes. During add or edit, the back button\n * should be hidden. Default value is `false`.\n *\n * @defaultValue false\n */\n readonly hideBackButton = input(false, { transform: booleanAttribute });\n\n /**\n * Details back button text. Required for a11y.\n *\n * @defaultValue\n * ```\n * t(() => $localize`:@@SI_MAIN_DETAIL_CONTAINER.BACK:Back`)\n * ```\n */\n readonly detailsBackButtonText = input(t(() => $localize`:@@SI_MAIN_DETAIL_CONTAINER.BACK:Back`));\n\n /**\n * CSS class(es) applied to the outermost container. Per default, Bootstrap classes\n * to handle responsive paddings are applied: `px-6 pt-6 px-md-9`.\n *\n * @defaultValue 'px-6 pt-6 px-md-9'\n */\n readonly containerClass = input('px-6 pt-6 px-md-9');\n\n /**\n * CSS class(es) applied to the main container. In combination with `containerClass`,\n * this allows for settings individual padding and margin values on the individual containers.\n *\n * @defaultValue 'pb-6'\n */\n readonly mainContainerClass = input('pb-6');\n\n /**\n * CSS class(es) applied to the detail container. In combination with `containerClass`,\n * this allows for settings individual padding and margin values on the individual containers.\n *\n * @defaultValue 'pb-6'\n */\n readonly detailContainerClass = input('pb-6');\n\n /**\n * The percentage width of the main container from the overall component width.\n * Can be a number or `'default'`, which is 32% when {@link resizableParts} is active, otherwise 50%.\n *\n * @defaultValue 'default'\n */\n readonly mainContainerWidth = model<number | 'default'>('default');\n /**\n * Sets the minimal width of the main container in pixel.\n *\n * @defaultValue 300\n */\n readonly minMainSize = input(300);\n /**\n * Sets the minimal width of the detail container in pixel.\n *\n * @defaultValue 300\n */\n readonly minDetailSize = input(300);\n /**\n * An optional stateId to uniquely identify a component instance.\n * Required for persistence of ui state.\n */\n readonly stateId = input<string>();\n\n /**\n * The attribute is set to true when the detail area is not visible to ensure that the user\n * can't tab to details area when it is hidden.\n */\n protected preventFocusDetails = false;\n\n private readonly actualMainContainerWidth = computed(() => {\n const mainContainerWidth = this.mainContainerWidth();\n return mainContainerWidth === 'default'\n ? this.resizableParts()\n ? 32\n : 50\n : mainContainerWidth;\n });\n\n protected splitSizes: [number, number] = [\n this.actualMainContainerWidth(),\n 100 - this.actualMainContainerWidth()\n ];\n // The max size to limit the main container in the static flex layout (if less than 50%), otherwise not set.\n protected maxMainSize: string = this.getMaxSize(0);\n // The max size to limit the detail container in the static flex layout (if less than 50%), otherwise not set.\n protected maxDetailSize: string = this.getMaxSize(1);\n\n protected readonly mainStateId = computed(() => {\n const stateId = this.stateId();\n return stateId ? `${stateId}-main` : undefined;\n });\n\n protected readonly detailStateId = computed(() => {\n const stateId = this.stateId();\n return stateId ? `${stateId}-detail` : undefined;\n });\n\n protected readonly animate = signal(false);\n\n protected readonly opacity = signal('0');\n\n ngOnChanges(changes: SimpleChanges<this>): void {\n if (changes.detailsActive) {\n this.updateDetailsFocusable();\n this.doAnimation(changes.detailsActive.currentValue);\n }\n if (changes.mainContainerWidth || changes.resizableParts) {\n this.splitSizes = [this.actualMainContainerWidth(), 100 - this.actualMainContainerWidth()];\n this.maxMainSize = this.getMaxSize(0);\n this.maxDetailSize = this.getMaxSize(1);\n }\n }\n\n ngOnInit(): void {\n this.resizeObserver\n .observe(this.elementRef.nativeElement, 100, true)\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(dimensions => this.determineLayout(dimensions));\n }\n\n protected onSplitSizesChange(sizes: number[]): void {\n this.mainContainerWidth.set(sizes[0]);\n }\n\n protected detailsBackClicked(): void {\n this.detailsActive.set(false);\n this.doAnimation(false);\n }\n\n /**\n * Get the max size to limit in the static flex layout (if less than 50%), otherwise not set\n */\n private getMaxSize(part: 0 | 1): string {\n return this.resizableParts() ||\n this.mainContainerWidth() === 'default' ||\n !this.hasLargeSize ||\n this.splitSizes[part] > 50\n ? ''\n : this.splitSizes[part] + '%';\n }\n\n private determineLayout(dimensions: ElementDimensions): void {\n const newHasLargeSize = dimensions.width >= this.largeLayoutBreakpoint();\n if (this.hasLargeSize !== newHasLargeSize) {\n this.hasLargeSize = newHasLargeSize;\n this.maxMainSize = this.getMaxSize(0);\n this.maxDetailSize = this.getMaxSize(1);\n this.updateDetailsFocusable();\n this.hasLargeSizeChange.emit(this.hasLargeSize);\n this.changeDetectorRef.markForCheck();\n }\n if (this.opacity() === '0') {\n this.opacity.set('');\n }\n }\n\n private doAnimation(detailsActive: boolean): void {\n this.animate.set(true);\n timer(this.animationDuration)\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(() => this.animate.set(false));\n this.detailsActive.set(detailsActive);\n }\n\n private updateDetailsFocusable(): void {\n this.preventFocusDetails = !this.hasLargeSize && !this.detailsActive();\n }\n}\n","@if (resizableParts() && hasLargeSize) {\n <div class=\"main-detail-layout d-flex flex-column\" [class]=\"containerClass()\">\n <ng-container *ngTemplateOutlet=\"headingTemplate\" />\n <si-split\n class=\"w-100 flex-grow-1\"\n orientation=\"horizontal\"\n [stateId]=\"stateId()\"\n [sizes]=\"splitSizes\"\n (sizesChange)=\"onSplitSizesChange($event)\"\n >\n <si-split-part\n scale=\"none\"\n [showCollapseButton]=\"false\"\n [showHeader]=\"false\"\n [minSize]=\"minMainSize()\"\n [stateId]=\"mainStateId()\"\n >\n <ng-container *ngTemplateOutlet=\"mainTemplate\" />\n </si-split-part>\n <si-split-part\n scale=\"auto\"\n [showCollapseButton]=\"false\"\n [showHeader]=\"false\"\n [minSize]=\"minDetailSize()\"\n [stateId]=\"detailStateId()\"\n >\n <ng-container *ngTemplateOutlet=\"detailTemplate\" />\n </si-split-part>\n </si-split>\n </div>\n} @else {\n <div\n class=\"main-detail-layout d-flex flex-column\"\n [class]=\"containerClass()\"\n [class.large-size]=\"hasLargeSize\"\n >\n <ng-container *ngTemplateOutlet=\"headingTemplate\" />\n <div\n class=\"main-detail-container d-flex flex-grow-1\"\n [class.details-active]=\"detailsActive() && !hasLargeSize\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n mainTemplate;\n context: { customClass: hasLargeSize ? 'col-3 ps-0 pe-4' : 'col-6 px-0' }\n \"\n />\n <ng-container\n *ngTemplateOutlet=\"\n detailTemplate;\n context: { customClass: hasLargeSize ? 'col-9 ps-4 pe-0' : 'col-6 px-0' }\n \"\n />\n </div>\n </div>\n}\n\n<!-- Templates -->\n<ng-template #headingTemplate>\n @if (heading()) {\n <div class=\"si-layout-header\">\n <h2 class=\"si-layout-title si-layout-top-element\" [class.text-truncate]=\"truncateHeading()\">{{\n heading() | translate\n }}</h2>\n </div>\n }\n</ng-template>\n\n<ng-template #mainTemplate let-customClass=\"customClass\">\n <div\n class=\"main-container d-flex flex-column\"\n [class]=\"[mainContainerClass(), customClass ? customClass : '']\"\n [style.max-inline-size]=\"maxMainSize\"\n >\n <div class=\"main-search-actions d-flex align-items-center\">\n <ng-content select=\"[slot=mainSearch]\" />\n <ng-content select=\"[slot=mainActions]\" />\n </div>\n <div class=\"main-data-container d-flex\">\n <ng-content select=\"[slot=mainData]\" />\n </div>\n </div>\n</ng-template>\n\n<ng-template #detailTemplate let-customClass=\"customClass\">\n <div\n class=\"detail-container d-flex flex-column\"\n [class]=\"[detailContainerClass(), customClass ? customClass : '']\"\n [style.max-inline-size]=\"maxDetailSize\"\n [attr.inert]=\"preventFocusDetails ? '' : null\"\n >\n <div class=\"detail-heading-actions d-flex align-items-center\">\n @if (!this.hasLargeSize && !this.hideBackButton()) {\n <button type=\"button\" class=\"btn btn-circle btn-secondary\" (click)=\"detailsBackClicked()\">\n <si-icon [icon]=\"icons.elementBack\" />\n <span class=\"visually-hidden\">{{ detailsBackButtonText() | translate }}</span>\n </button>\n }\n @if (detailsHeading()) {\n <span class=\"detail-heading si-h4 me-auto ms-6 my-auto text-truncate\">{{\n detailsHeading() | translate\n }}</span>\n }\n <ng-content select=\"[slot=detailActions]\" />\n </div>\n <ng-content select=\"[slot=details]\" />\n </div>\n</ng-template>\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiMainDetailContainerComponent } from './si-main-detail-container.component';\n\n@NgModule({\n imports: [SiMainDetailContainerComponent],\n exports: [SiMainDetailContainerComponent]\n})\nexport class SiMainDetailContainerModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-main-detail-container.component';\nexport * from './si-main-detail-container.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { ChangeDetectionStrategy, Component, InjectionToken, model, input, booleanAttribute, inject, Injector, signal, afterNextRender, linkedSignal, untracked,
|
|
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, elementRight2, 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,15 @@ 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 });
|
|
62
76
|
/**
|
|
63
77
|
* When `true`, item-groups always open as a transient flyout panel adjacent to the
|
|
64
78
|
* trigger, regardless of whether the navbar is collapsed or expanded.
|
|
@@ -123,6 +137,12 @@ class SiNavbarVerticalNextComponent {
|
|
|
123
137
|
uiStateExpandedItems = signal({}, ...(ngDevMode ? [{ debugName: "uiStateExpandedItems" }] : []));
|
|
124
138
|
// Indicates if the user prefers a collapsed navbar. Relevant for resizing.
|
|
125
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" }] : []));
|
|
126
146
|
constructor() {
|
|
127
147
|
this.breakpointObserver
|
|
128
148
|
.observe(`(max-width: ${BOOTSTRAP_BREAKPOINTS.lgMinimum}px)`)
|
|
@@ -203,7 +223,7 @@ class SiNavbarVerticalNextComponent {
|
|
|
203
223
|
}
|
|
204
224
|
}
|
|
205
225
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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
|
|
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 });
|
|
207
227
|
}
|
|
208
228
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextComponent, decorators: [{
|
|
209
229
|
type: Component,
|
|
@@ -211,10 +231,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
211
231
|
class: 'si-layout-inner ready',
|
|
212
232
|
'[class.nav-collapsed]': 'collapsed()',
|
|
213
233
|
'[class.nav-text-only]': 'textOnly()',
|
|
234
|
+
'[class.nav-inline-collapse]': 'inlineCollapse()',
|
|
214
235
|
'[class.visible]': 'visible()',
|
|
215
236
|
'[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
|
|
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 }] }] } });
|
|
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 }] }] } });
|
|
218
239
|
|
|
219
240
|
/**
|
|
220
241
|
* Copyright (c) Siemens 2016 - 2026
|
|
@@ -563,7 +584,6 @@ class SiNavbarVerticalNextItemComponent {
|
|
|
563
584
|
}
|
|
564
585
|
return badge.toString();
|
|
565
586
|
}, ...(ngDevMode ? [{ debugName: "formattedBadge" }] : []));
|
|
566
|
-
isDropdownItem = computed(() => !this.navbar.alwaysFlyout() && !!this.parent?.group?.flyout(), ...(ngDevMode ? [{ debugName: "isDropdownItem" }] : []));
|
|
567
587
|
ngOnInit() {
|
|
568
588
|
if (this.group && this.active) {
|
|
569
589
|
this.group.expanded.set(true);
|
|
@@ -583,18 +603,16 @@ class SiNavbarVerticalNextItemComponent {
|
|
|
583
603
|
false);
|
|
584
604
|
}
|
|
585
605
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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.
|
|
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 });
|
|
587
607
|
}
|
|
588
608
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextItemComponent, decorators: [{
|
|
589
609
|
type: Component,
|
|
590
610
|
args: [{ selector: 'a[si-navbar-vertical-next-item], button[si-navbar-vertical-next-item]', imports: [SiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
591
|
-
'class': 'focus-inside',
|
|
592
|
-
'[class.dropdown-item]': 'isDropdownItem()',
|
|
593
|
-
'[class.navbar-vertical-item]': '!isDropdownItem()',
|
|
611
|
+
'class': 'focus-inside navbar-vertical-item',
|
|
594
612
|
'[class.active]': 'active',
|
|
595
613
|
'[class.hide-badge-collapsed]': 'hideBadgeWhenCollapsed()',
|
|
596
614
|
'(click)': 'triggered()'
|
|
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"] }]
|
|
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"] }]
|
|
598
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 }] }] } });
|
|
599
617
|
|
|
600
618
|
/**
|
|
@@ -629,11 +647,11 @@ class SiNavbarVerticalNextSearchComponent {
|
|
|
629
647
|
setTimeout(() => this.searchBar().focus());
|
|
630
648
|
}
|
|
631
649
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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
|
|
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 });
|
|
633
651
|
}
|
|
634
652
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextSearchComponent, decorators: [{
|
|
635
653
|
type: Component,
|
|
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
|
|
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"] }]
|
|
637
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 }] }] } });
|
|
638
656
|
|
|
639
657
|
/**
|