@siemens/element-ng 51.0.0-rc.9 → 51.0.0

package/fesm2022/siemens-element-ng-main-detail-container.mjs

@@ -1,11 +1,11 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, ElementRef, ChangeDetectorRef, DestroyRef, input, output, model, booleanAttribute, computed, signal, Component, NgModule } from '@angular/core';
+import { inject, ElementRef, ChangeDetectorRef, DestroyRef, viewChild, input, output, model, booleanAttribute, computed, signal, Component, NgModule } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { elementBack } from '@siemens/element-icons';
 import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
 import { ResizeObserverService, BOOTSTRAP_BREAKPOINTS } from '@siemens/element-ng/resize-observer';
-import { SiSplitComponent, SiSplitPartComponent } from '@siemens/element-ng/split';
+import { SiSplitPartComponent, SiSplitComponent } from '@siemens/element-ng/split';
 import { t, SiTranslatePipe } from '@siemens/element-translate-ng/translate';
 import { timer } from 'rxjs';
 
@@ -20,6 +20,8 @@ class SiMainDetailContainerComponent {
     resizeObserver = inject(ResizeObserverService);
     changeDetectorRef = inject(ChangeDetectorRef);
     destroyRef = inject(DestroyRef);
+    splitElement = viewChild('splitElement', { ...(ngDevMode ? { debugName: "splitElement" } : /* istanbul ignore next */ {}), read: ElementRef });
+    mainSplitPart = viewChild('mainSplitPart', { ...(ngDevMode ? { debugName: "mainSplitPart" } : /* istanbul ignore next */ {}), read: SiSplitPartComponent });
     /**
      * A numeric value defining the minimum width in px, which the container needs
      * to be displayed in its large layout. Whenever smaller than
@@ -120,8 +122,24 @@ class SiMainDetailContainerComponent {
     detailContainerClass = input('pb-6', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "detailContainerClass" }] : /* istanbul ignore next */ []));
     /**
-     * The percentage width of the main container from the overall component width.
-     * Can be a number or `'default'`, which is 32% when {@link resizableParts} is active, otherwise 50%.
+     * Unit used for the main split part when {@link resizableParts} is enabled.
+     *
+     * @defaultValue 'px'
+     */
+    mainContainerWidthUnit = input('px', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mainContainerWidthUnit" }] : /* istanbul ignore next */ []));
+    /**
+     * The size of the main container. When {@link resizableParts} is enabled,
+     * the value is interpreted using {@link mainContainerWidthUnit} and updates as the splitter is moved.
+     * With `mainContainerWidthUnit="fr"`, numeric values must be from `0` to `100` (inclusive).
+     * The main and detail fractional weights are the value and `100 - value`;
+     * out-of-range values fall back to `32` and `68`.
+     * In the static layout, numeric values represent a percentage from `0` to `100`
+     * (inclusive); out-of-range values leave both containers without max-size constraints.
+     * Pixel widths are not limited to the `0` to `100` range.
+     *
+     * With `'default'`, resizable pixel layouts use {@link minMainSize}, resizable fractional
+     * layouts use main and detail weights of `32` and `68`, and static layouts use `50%`.
      *
      * @defaultValue 'default'
      */
@@ -154,17 +172,16 @@ class SiMainDetailContainerComponent {
     preventFocusDetails = false;
     actualMainContainerWidth = computed(() => {
         const mainContainerWidth = this.mainContainerWidth();
-        return mainContainerWidth === 'default'
-            ? this.resizableParts()
-                ? 32
-                : 50
-            : mainContainerWidth;
+        if (mainContainerWidth !== 'default') {
+            return mainContainerWidth;
+        }
+        if (!this.resizableParts()) {
+            return 50;
+        }
+        return this.mainContainerWidthUnit() === 'px' ? this.minMainSize() : 32;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "actualMainContainerWidth" }] : /* istanbul ignore next */ []));
-    splitSizes = [
-        this.actualMainContainerWidth(),
-        100 - this.actualMainContainerWidth()
-    ];
+    splitSizes = this.getSplitSizes();
     // The max size to limit the main container in the static flex layout (if less than 50%), otherwise not set.
     maxMainSize = this.getMaxSize(0);
     // The max size to limit the detail container in the static flex layout (if less than 50%), otherwise not set.
@@ -188,8 +205,11 @@ class SiMainDetailContainerComponent {
             this.updateDetailsFocusable();
             this.doAnimation(changes.detailsActive.currentValue);
         }
-        if (changes.mainContainerWidth || changes.resizableParts) {
-            this.splitSizes = [this.actualMainContainerWidth(), 100 - this.actualMainContainerWidth()];
+        if (changes.mainContainerWidth ||
+            changes.resizableParts ||
+            changes.mainContainerWidthUnit ||
+            changes.minMainSize) {
+            this.splitSizes = this.getSplitSizes();
             this.maxMainSize = this.getMaxSize(0);
             this.maxDetailSize = this.getMaxSize(1);
         }
@@ -201,7 +221,12 @@ class SiMainDetailContainerComponent {
             .subscribe(dimensions => this.determineLayout(dimensions));
     }
     onSplitSizesChange(sizes) {
-        this.mainContainerWidth.set(sizes[0]);
+        if (this.mainContainerWidthUnit() === 'px') {
+            this.mainContainerWidth.set(this.getMainSizePx(sizes[0]));
+        }
+        else {
+            this.mainContainerWidth.set(sizes[0]);
+        }
     }
     detailsBackClicked() {
         this.detailsActive.set(false);
@@ -211,12 +236,35 @@ class SiMainDetailContainerComponent {
      * Get the max size to limit in the static flex layout (if less than 50%), otherwise not set
      */
     getMaxSize(part) {
-        return this.resizableParts() ||
-            this.mainContainerWidth() === 'default' ||
+        const mainContainerWidth = this.mainContainerWidth();
+        if (this.resizableParts() ||
+            mainContainerWidth === 'default' ||
             !this.hasLargeSize ||
-            this.splitSizes[part] > 50
-            ? ''
-            : this.splitSizes[part] + '%';
+            mainContainerWidth < 0 ||
+            mainContainerWidth > 100) {
+            return '';
+        }
+        const size = part === 0 ? mainContainerWidth : 100 - mainContainerWidth;
+        return size > 50 ? '' : size + '%';
+    }
+    getSplitSizes() {
+        const mainSize = this.actualMainContainerWidth();
+        if (!this.resizableParts()) {
+            return mainSize >= 0 && mainSize <= 100 ? [mainSize, 100 - mainSize] : [50, 50];
+        }
+        if (this.mainContainerWidthUnit() === 'fr') {
+            return mainSize >= 0 && mainSize <= 100 ? [mainSize, 100 - mainSize] : [32, 68];
+        }
+        // The main size is in pixels; the detail part fills the remaining space with 1fr.
+        return [mainSize, 1];
+    }
+    getMainSizePx(fallbackPercentage) {
+        const mainPartSize = this.mainSplitPart()?.expandedSize();
+        if (mainPartSize !== undefined) {
+            return Math.round(mainPartSize);
+        }
+        const splitWidth = this.splitElement()?.nativeElement.getBoundingClientRect().width;
+        return splitWidth ? Math.round((splitWidth * fallbackPercentage) / 100) : this.minMainSize();
     }
     determineLayout(dimensions) {
         const newHasLargeSize = dimensions.width >= this.largeLayoutBreakpoint();
@@ -243,7 +291,7 @@ class SiMainDetailContainerComponent {
         this.preventFocusDetails = !this.hasLargeSize && !this.detailsActive();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiMainDetailContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.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      (sizesChange)=\"onSplitSizesChange($event)\"\n    >\n      <si-split-part\n        scale=\"none\"\n        unit=\"fr\"\n        [size]=\"splitSizes[0]\"\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        unit=\"fr\"\n        [size]=\"splitSizes[1]\"\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:var(--si-sys-sizing-spacing-x-50)}: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:var(--si-sys-sizing-spacing-x-50)}: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 + 2 * var(--si-sys-sizing-spacing-y-40));margin-block-end:var(--si-sys-sizing-spacing-y-60)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiSplitComponent, selector: "si-split", inputs: ["gutterSize", "orientation", "stateId"], outputs: ["sizesChange"] }, { kind: "component", type: SiSplitPartComponent, selector: "si-split-part", inputs: ["actions", "collapsible", "collapseIconClass", "collapseToMinSize", "headerTemplate", "heading", "minSize", "removeContentOnCollapse", "scale", "showHeader", "collapseLabel", "stateId", "size", "unit", "collapseOthers", "expanded"], outputs: ["collapseChanged", "stateChange"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.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 }, mainContainerWidthUnit: { classPropertyName: "mainContainerWidthUnit", publicName: "mainContainerWidthUnit", 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" }, viewQueries: [{ propertyName: "splitElement", first: true, predicate: ["splitElement"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "mainSplitPart", first: true, predicate: ["mainSplitPart"], descendants: true, read: SiSplitPartComponent, isSignal: true }], 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      #splitElement\n      class=\"w-100 flex-grow-1\"\n      orientation=\"horizontal\"\n      [stateId]=\"stateId()\"\n      (sizesChange)=\"onSplitSizesChange($event)\"\n    >\n      <si-split-part\n        #mainSplitPart\n        [unit]=\"mainContainerWidthUnit()\"\n        [size]=\"splitSizes[0]\"\n        [showHeader]=\"false\"\n        [minSize]=\"minMainSize()\"\n        [stateId]=\"mainStateId()\"\n      >\n        <ng-container *ngTemplateOutlet=\"mainTemplate\" />\n      </si-split-part>\n      <si-split-part\n        unit=\"fr\"\n        [size]=\"splitSizes[1]\"\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:var(--si-sys-sizing-spacing-x-50)}: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:var(--si-sys-sizing-spacing-x-50)}: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 + 2 * var(--si-sys-sizing-spacing-y-40));margin-block-end:var(--si-sys-sizing-spacing-y-60)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiSplitComponent, selector: "si-split", inputs: ["gutterSize", "orientation", "stateId"], outputs: ["sizesChange"] }, { kind: "component", type: SiSplitPartComponent, selector: "si-split-part", inputs: ["actions", "collapsible", "collapseIconClass", "collapseToMinSize", "headerTemplate", "heading", "minSize", "removeContentOnCollapse", "showHeader", "collapseLabel", "stateId", "size", "unit", "collapseOthers", "expanded"], outputs: ["collapseChanged", "stateChange"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiMainDetailContainerComponent, decorators: [{
             type: Component,
@@ -257,8 +305,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         class: 'si-layout-inner',
                         '[class.animate]': 'animate()',
                         '[style.opacity]': 'opacity()'
-                    }, 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      (sizesChange)=\"onSplitSizesChange($event)\"\n    >\n      <si-split-part\n        scale=\"none\"\n        unit=\"fr\"\n        [size]=\"splitSizes[0]\"\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        unit=\"fr\"\n        [size]=\"splitSizes[1]\"\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:var(--si-sys-sizing-spacing-x-50)}: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:var(--si-sys-sizing-spacing-x-50)}: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 + 2 * var(--si-sys-sizing-spacing-y-40));margin-block-end:var(--si-sys-sizing-spacing-y-60)}\n"] }]
-        }], 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 }] }] } });
+                    }, 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      #splitElement\n      class=\"w-100 flex-grow-1\"\n      orientation=\"horizontal\"\n      [stateId]=\"stateId()\"\n      (sizesChange)=\"onSplitSizesChange($event)\"\n    >\n      <si-split-part\n        #mainSplitPart\n        [unit]=\"mainContainerWidthUnit()\"\n        [size]=\"splitSizes[0]\"\n        [showHeader]=\"false\"\n        [minSize]=\"minMainSize()\"\n        [stateId]=\"mainStateId()\"\n      >\n        <ng-container *ngTemplateOutlet=\"mainTemplate\" />\n      </si-split-part>\n      <si-split-part\n        unit=\"fr\"\n        [size]=\"splitSizes[1]\"\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:var(--si-sys-sizing-spacing-x-50)}: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:var(--si-sys-sizing-spacing-x-50)}: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 + 2 * var(--si-sys-sizing-spacing-y-40));margin-block-end:var(--si-sys-sizing-spacing-y-60)}\n"] }]
+        }], propDecorators: { splitElement: [{ type: i0.ViewChild, args: ['splitElement', { ...{ read: ElementRef }, isSignal: true }] }], mainSplitPart: [{ type: i0.ViewChild, args: ['mainSplitPart', { ...{ read: SiSplitPartComponent }, isSignal: true }] }], 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 }] }], mainContainerWidthUnit: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainContainerWidthUnit", 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 }] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2026

package/fesm2022/siemens-element-ng-main-detail-container.mjs.map

@@ -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  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  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      (sizesChange)=\"onSplitSizesChange($event)\"\n    >\n      <si-split-part\n        scale=\"none\"\n        unit=\"fr\"\n        [size]=\"splitSizes[0]\"\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        unit=\"fr\"\n        [size]=\"splitSizes[1]\"\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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"}
+{"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  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  viewChild\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, SplitUnit } 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  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<HTMLElement>>(ElementRef);\n  private readonly resizeObserver = inject(ResizeObserverService);\n  private readonly changeDetectorRef = inject(ChangeDetectorRef);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly splitElement = viewChild('splitElement', { read: ElementRef });\n  private readonly mainSplitPart = viewChild('mainSplitPart', { read: SiSplitPartComponent });\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   * Unit used for the main split part when {@link resizableParts} is enabled.\n   *\n   * @defaultValue 'px'\n   */\n  readonly mainContainerWidthUnit = input<SplitUnit>('px');\n\n  /**\n   * The size of the main container. When {@link resizableParts} is enabled,\n   * the value is interpreted using {@link mainContainerWidthUnit} and updates as the splitter is moved.\n   * With `mainContainerWidthUnit=\"fr\"`, numeric values must be from `0` to `100` (inclusive).\n   * The main and detail fractional weights are the value and `100 - value`;\n   * out-of-range values fall back to `32` and `68`.\n   * In the static layout, numeric values represent a percentage from `0` to `100`\n   * (inclusive); out-of-range values leave both containers without max-size constraints.\n   * Pixel widths are not limited to the `0` to `100` range.\n   *\n   * With `'default'`, resizable pixel layouts use {@link minMainSize}, resizable fractional\n   * layouts use main and detail weights of `32` and `68`, and static layouts use `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    if (mainContainerWidth !== 'default') {\n      return mainContainerWidth;\n    }\n\n    if (!this.resizableParts()) {\n      return 50;\n    }\n\n    return this.mainContainerWidthUnit() === 'px' ? this.minMainSize() : 32;\n  });\n\n  protected splitSizes: [number, number] = this.getSplitSizes();\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 (\n      changes.mainContainerWidth ||\n      changes.resizableParts ||\n      changes.mainContainerWidthUnit ||\n      changes.minMainSize\n    ) {\n      this.splitSizes = this.getSplitSizes();\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    if (this.mainContainerWidthUnit() === 'px') {\n      this.mainContainerWidth.set(this.getMainSizePx(sizes[0]));\n    } else {\n      this.mainContainerWidth.set(sizes[0]);\n    }\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    const mainContainerWidth = this.mainContainerWidth();\n    if (\n      this.resizableParts() ||\n      mainContainerWidth === 'default' ||\n      !this.hasLargeSize ||\n      mainContainerWidth < 0 ||\n      mainContainerWidth > 100\n    ) {\n      return '';\n    }\n\n    const size = part === 0 ? mainContainerWidth : 100 - mainContainerWidth;\n    return size > 50 ? '' : size + '%';\n  }\n\n  private getSplitSizes(): [number, number] {\n    const mainSize = this.actualMainContainerWidth();\n    if (!this.resizableParts()) {\n      return mainSize >= 0 && mainSize <= 100 ? [mainSize, 100 - mainSize] : [50, 50];\n    }\n\n    if (this.mainContainerWidthUnit() === 'fr') {\n      return mainSize >= 0 && mainSize <= 100 ? [mainSize, 100 - mainSize] : [32, 68];\n    }\n\n    // The main size is in pixels; the detail part fills the remaining space with 1fr.\n    return [mainSize, 1];\n  }\n\n  private getMainSizePx(fallbackPercentage: number): number {\n    const mainPartSize = this.mainSplitPart()?.expandedSize();\n    if (mainPartSize !== undefined) {\n      return Math.round(mainPartSize);\n    }\n\n    const splitWidth = this.splitElement()?.nativeElement.getBoundingClientRect().width;\n    return splitWidth ? Math.round((splitWidth * fallbackPercentage) / 100) : this.minMainSize();\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      #splitElement\n      class=\"w-100 flex-grow-1\"\n      orientation=\"horizontal\"\n      [stateId]=\"stateId()\"\n      (sizesChange)=\"onSplitSizesChange($event)\"\n    >\n      <si-split-part\n        #mainSplitPart\n        [unit]=\"mainContainerWidthUnit()\"\n        [size]=\"splitSizes[0]\"\n        [showHeader]=\"false\"\n        [minSize]=\"minMainSize()\"\n        [stateId]=\"mainStateId()\"\n      >\n        <ng-container *ngTemplateOutlet=\"mainTemplate\" />\n      </si-split-part>\n      <si-split-part\n        unit=\"fr\"\n        [size]=\"splitSizes[1]\"\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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"}

package/fesm2022/siemens-element-ng-markdown-hightlighter-highlightjs.mjs

@@ -92,13 +92,13 @@ class SiMarkdownHightlightJsComponent {
         return highlighted ? this.sanitizer.bypassSecurityTrustHtml(highlighted) : '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiMarkdownHightlightJsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiMarkdownHightlightJsComponent, isStandalone: true, selector: "si-markdown-highlightjs", inputs: { code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: true, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: true, transformFunction: null }, updateLanguage: { classPropertyName: "updateLanguage", publicName: "updateLanguage", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "d-block" }, ngImport: i0, template: "@let html = highlighted();\n@if (html) {\n  <pre class=\"border-0 m-0 p-0\"><code [innerHTML]=\"html\"></code></pre>\n} @else {\n  <pre class=\"border-0 m-0 p-0\"><code>{{ code() }} </code></pre>\n}\n", styles: [":host ::ng-deep .hljs{color:var(--element-text-primary)}:host ::ng-deep :is(.hljs-keyword,.hljs-literal){color:var(--element-data-purple-3)}:host ::ng-deep .hljs-operator{color:var(--element-data-plum-2)}:host ::ng-deep :is(.hljs-variable,.hljs-variable.language_,.hljs-variable.constant_,.hljs-params,.hljs-property){color:var(--element-data-6)}:host ::ng-deep :is(.hljs-title,.hljs-title.function_,.hljs-title.function_.invoke__,.hljs-built_in){color:var(--element-text-caution)}:host ::ng-deep :is(.hljs-string,.hljs-regexp,.hljs-char.escape_,.hljs-subst,.hljs-doctag){color:var(--element-text-warning)}:host ::ng-deep .hljs-number{color:var(--element-text-success)}:host ::ng-deep :is(.hljs-symbol,.hljs-bullet){color:var(--element-data-13)}:host ::ng-deep :is(.hljs-comment,.hljs-quote){color:var(--element-data-green-3)}:host ::ng-deep .hljs-punctuation{color:var(--element-data-17)}:host ::ng-deep :is(.hljs-tag,.hljs-name,.hljs-attr,.hljs-attribute,.hljs-selector-tag,.hljs-selector-id,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-meta,.hljs-meta.keyword_,.hljs-template-tag,.hljs-template-variable){color:var(--element-data-5)}:host ::ng-deep :is(.hljs-type,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-section){color:var(--element-data-4)}:host ::ng-deep .hljs-deletion{color:var(--element-data-10)}:host ::ng-deep .hljs-addition{color:var(--element-data-green-3)}:host ::ng-deep .hljs-emphasis{font-style:italic}:host ::ng-deep .hljs-strong{font-weight:600}:host ::ng-deep .hljs-code,:host ::ng-deep .hljs-formula{color:var(--element-text-primary)}:host ::ng-deep .hljs-link{color:var(--element-text-warning)}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiMarkdownHightlightJsComponent, isStandalone: true, selector: "si-markdown-highlightjs", inputs: { code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: true, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: true, transformFunction: null }, updateLanguage: { classPropertyName: "updateLanguage", publicName: "updateLanguage", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "d-block" }, ngImport: i0, template: "@let html = highlighted();\n@if (html) {\n  <pre class=\"border-0 m-0 p-0\"><code [innerHTML]=\"html\"></code></pre>\n} @else {\n  <pre class=\"border-0 m-0 p-0\"><code>{{ code() }} </code></pre>\n}\n", styles: [":host ::ng-deep .hljs{color:var(--si-sys-code-1)}:host ::ng-deep :is(.hljs-keyword,.hljs-literal,.hljs-operator){color:var(--si-sys-code-2)}:host ::ng-deep :is(.hljs-variable,.hljs-variable.language_,.hljs-params,.hljs-property){color:var(--si-sys-code-4)}:host ::ng-deep :is(.hljs-variable.constant_){color:var(--si-sys-code-3)}:host ::ng-deep :is(.hljs-title,.hljs-title.function_,.hljs-title.function_.invoke__,.hljs-built_in){color:var(--si-sys-code-5)}:host ::ng-deep :is(.hljs-string,.hljs-regexp,.hljs-char.escape_,.hljs-subst,.hljs-doctag){color:var(--si-sys-code-6)}:host ::ng-deep .hljs-number{color:var(--si-sys-code-7)}:host ::ng-deep :is(.hljs-symbol,.hljs-bullet){color:var(--si-sys-code-2)}:host ::ng-deep :is(.hljs-comment,.hljs-quote){color:var(--si-sys-code-8)}:host ::ng-deep .hljs-punctuation{color:var(--si-sys-code-9)}:host ::ng-deep :is(.hljs-tag,.hljs-name,.hljs-selector-tag,.hljs-selector-id,.hljs-selector-class,.hljs-selector-pseudo,.hljs-meta,.hljs-meta.keyword_,.hljs-template-tag,.hljs-template-variable){color:var(--si-sys-code-10)}:host ::ng-deep :is(.hljs-attr,.hljs-attribute,.hljs-selector-attr){color:var(--si-sys-code-3)}:host ::ng-deep :is(.hljs-type,.hljs-title.class_,.hljs-title.class_.inherited__){color:var(--si-sys-code-11)}:host ::ng-deep .hljs-deletion{color:var(--si-sys-code-11)}:host ::ng-deep .hljs-addition{color:var(--si-sys-code-12)}:host ::ng-deep .hljs-emphasis{font-style:italic}:host ::ng-deep .hljs-strong{font-weight:600}:host ::ng-deep :is(.hljs-code,.hljs-formula){color:var(--si-sys-code-1)}:host ::ng-deep :is(.hljs-section){color:var(--si-sys-code-1);font-weight:600}:host ::ng-deep .hljs-link{color:var(--si-sys-text-accent)}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiMarkdownHightlightJsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-markdown-highlightjs', host: {
                         class: 'd-block'
-                    }, template: "@let html = highlighted();\n@if (html) {\n  <pre class=\"border-0 m-0 p-0\"><code [innerHTML]=\"html\"></code></pre>\n} @else {\n  <pre class=\"border-0 m-0 p-0\"><code>{{ code() }} </code></pre>\n}\n", styles: [":host ::ng-deep .hljs{color:var(--element-text-primary)}:host ::ng-deep :is(.hljs-keyword,.hljs-literal){color:var(--element-data-purple-3)}:host ::ng-deep .hljs-operator{color:var(--element-data-plum-2)}:host ::ng-deep :is(.hljs-variable,.hljs-variable.language_,.hljs-variable.constant_,.hljs-params,.hljs-property){color:var(--element-data-6)}:host ::ng-deep :is(.hljs-title,.hljs-title.function_,.hljs-title.function_.invoke__,.hljs-built_in){color:var(--element-text-caution)}:host ::ng-deep :is(.hljs-string,.hljs-regexp,.hljs-char.escape_,.hljs-subst,.hljs-doctag){color:var(--element-text-warning)}:host ::ng-deep .hljs-number{color:var(--element-text-success)}:host ::ng-deep :is(.hljs-symbol,.hljs-bullet){color:var(--element-data-13)}:host ::ng-deep :is(.hljs-comment,.hljs-quote){color:var(--element-data-green-3)}:host ::ng-deep .hljs-punctuation{color:var(--element-data-17)}:host ::ng-deep :is(.hljs-tag,.hljs-name,.hljs-attr,.hljs-attribute,.hljs-selector-tag,.hljs-selector-id,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-meta,.hljs-meta.keyword_,.hljs-template-tag,.hljs-template-variable){color:var(--element-data-5)}:host ::ng-deep :is(.hljs-type,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-section){color:var(--element-data-4)}:host ::ng-deep .hljs-deletion{color:var(--element-data-10)}:host ::ng-deep .hljs-addition{color:var(--element-data-green-3)}:host ::ng-deep .hljs-emphasis{font-style:italic}:host ::ng-deep .hljs-strong{font-weight:600}:host ::ng-deep .hljs-code,:host ::ng-deep .hljs-formula{color:var(--element-text-primary)}:host ::ng-deep .hljs-link{color:var(--element-text-warning)}\n"] }]
+                    }, template: "@let html = highlighted();\n@if (html) {\n  <pre class=\"border-0 m-0 p-0\"><code [innerHTML]=\"html\"></code></pre>\n} @else {\n  <pre class=\"border-0 m-0 p-0\"><code>{{ code() }} </code></pre>\n}\n", styles: [":host ::ng-deep .hljs{color:var(--si-sys-code-1)}:host ::ng-deep :is(.hljs-keyword,.hljs-literal,.hljs-operator){color:var(--si-sys-code-2)}:host ::ng-deep :is(.hljs-variable,.hljs-variable.language_,.hljs-params,.hljs-property){color:var(--si-sys-code-4)}:host ::ng-deep :is(.hljs-variable.constant_){color:var(--si-sys-code-3)}:host ::ng-deep :is(.hljs-title,.hljs-title.function_,.hljs-title.function_.invoke__,.hljs-built_in){color:var(--si-sys-code-5)}:host ::ng-deep :is(.hljs-string,.hljs-regexp,.hljs-char.escape_,.hljs-subst,.hljs-doctag){color:var(--si-sys-code-6)}:host ::ng-deep .hljs-number{color:var(--si-sys-code-7)}:host ::ng-deep :is(.hljs-symbol,.hljs-bullet){color:var(--si-sys-code-2)}:host ::ng-deep :is(.hljs-comment,.hljs-quote){color:var(--si-sys-code-8)}:host ::ng-deep .hljs-punctuation{color:var(--si-sys-code-9)}:host ::ng-deep :is(.hljs-tag,.hljs-name,.hljs-selector-tag,.hljs-selector-id,.hljs-selector-class,.hljs-selector-pseudo,.hljs-meta,.hljs-meta.keyword_,.hljs-template-tag,.hljs-template-variable){color:var(--si-sys-code-10)}:host ::ng-deep :is(.hljs-attr,.hljs-attribute,.hljs-selector-attr){color:var(--si-sys-code-3)}:host ::ng-deep :is(.hljs-type,.hljs-title.class_,.hljs-title.class_.inherited__){color:var(--si-sys-code-11)}:host ::ng-deep .hljs-deletion{color:var(--si-sys-code-11)}:host ::ng-deep .hljs-addition{color:var(--si-sys-code-12)}:host ::ng-deep .hljs-emphasis{font-style:italic}:host ::ng-deep .hljs-strong{font-weight:600}:host ::ng-deep :is(.hljs-code,.hljs-formula){color:var(--si-sys-code-1)}:host ::ng-deep :is(.hljs-section){color:var(--si-sys-code-1);font-weight:600}:host ::ng-deep .hljs-link{color:var(--si-sys-text-accent)}\n"] }]
         }], propDecorators: { code: [{ type: i0.Input, args: [{ isSignal: true, alias: "code", required: true }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: true }] }], updateLanguage: [{ type: i0.Input, args: [{ isSignal: true, alias: "updateLanguage", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
 /**

package/fesm2022/siemens-element-ng-markdown-hightlighter-highlightjs.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"siemens-element-ng-markdown-hightlighter-highlightjs.mjs","sources":["../../../../projects/element-ng/markdown/hightlighter/highlightjs/si-markdown-highlightjs.component.ts","../../../../projects/element-ng/markdown/hightlighter/highlightjs/si-markdown-highlightjs.component.html","../../../../projects/element-ng/markdown/hightlighter/highlightjs/si-markdown-highlightjs.highlighter.ts","../../../../projects/element-ng/markdown/hightlighter/highlightjs/index.ts","../../../../projects/element-ng/markdown/hightlighter/highlightjs/siemens-element-ng-markdown-hightlighter-highlightjs.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { Component, inject, input } from '@angular/core';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport { computedAsync, type SiMarkdownHighlighterComponent } from '@siemens/element-ng/markdown';\nimport { type Language } from 'highlight.js';\nimport hljs from 'highlight.js/lib/core';\nimport langBash from 'highlight.js/lib/languages/bash';\nimport langCss from 'highlight.js/lib/languages/css';\nimport langJs from 'highlight.js/lib/languages/javascript';\nimport langJson from 'highlight.js/lib/languages/json';\nimport langMarkdown from 'highlight.js/lib/languages/markdown';\nimport langPython from 'highlight.js/lib/languages/python';\nimport langScss from 'highlight.js/lib/languages/scss';\nimport langTs from 'highlight.js/lib/languages/typescript';\nimport langXml from 'highlight.js/lib/languages/xml';\n\nimport {\n  HighlightJSLanguageLoader,\n  SiMarkdownHighlightJsOptions\n} from './si-markdown-highlightjs.types';\n\n// some common languages are built-in for initial loading speed\nhljs.registerLanguage('javascript', langJs);\nhljs.registerLanguage('typescript', langTs);\nhljs.registerLanguage('json', langJson);\nhljs.registerLanguage('css', langCss);\nhljs.registerLanguage('scss', langScss);\nhljs.registerLanguage('bash', langBash);\nhljs.registerLanguage('python', langPython);\nhljs.registerLanguage('xml', langXml);\nhljs.registerLanguage('markdown', langMarkdown);\n\nconst getHljsLang = async (\n  lang: string,\n  loader?: HighlightJSLanguageLoader\n): Promise<Language | undefined> => {\n  const loadedLang = hljs.getLanguage(lang);\n  if (loadedLang) {\n    return loadedLang;\n  }\n\n  if (loader) {\n    const importLang = await loader(lang);\n    if (importLang) {\n      hljs.registerLanguage(lang, importLang.default);\n      return hljs.getLanguage(lang);\n    }\n  }\n  return undefined;\n};\n\n@Component({\n  selector: 'si-markdown-highlightjs',\n  templateUrl: './si-markdown-highlightjs.component.html',\n  styleUrl: './si-markdown-highlightjs.component.scss',\n  host: {\n    class: 'd-block'\n  }\n})\nexport class SiMarkdownHightlightJsComponent implements SiMarkdownHighlighterComponent {\n  private readonly sanitizer = inject(DomSanitizer);\n  readonly code = input.required<string>();\n  readonly language = input.required<string>();\n  readonly updateLanguage = input.required<(lang?: string) => void>();\n  readonly options = input<SiMarkdownHighlightJsOptions>();\n\n  protected readonly highlighted = computedAsync({\n    params: () => ({ code: this.code(), language: this.language(), options: this.options() }),\n    computation: params => this.highlight(params.code, params.language, params.options),\n    initial: undefined\n  });\n\n  private async highlight(\n    code: string,\n    language: string,\n    options: SiMarkdownHighlightJsOptions = {}\n  ): Promise<SafeHtml> {\n    let highlighted = '';\n    if (!language && options?.autoDetectLanguage) {\n      try {\n        const res = hljs.highlightAuto(code, undefined);\n        highlighted = res.value;\n        if (res.language) {\n          const lang = hljs.getLanguage(res.language);\n          this.updateLanguage()(lang?.name);\n        } else {\n          this.updateLanguage()(language);\n        }\n      } catch {\n        // ignored\n      }\n    } else {\n      const hljsLang = await getHljsLang(language, options.languageLoader);\n      if (hljsLang) {\n        this.updateLanguage()(hljsLang.name);\n        try {\n          highlighted = hljs.highlight(code, { ...options, language }).value;\n        } catch {\n          // ignored\n        }\n      } else {\n        this.updateLanguage()(language);\n      }\n    }\n    return highlighted ? this.sanitizer.bypassSecurityTrustHtml(highlighted) : '';\n  }\n}\n","@let html = highlighted();\n@if (html) {\n  <pre class=\"border-0 m-0 p-0\"><code [innerHTML]=\"html\"></code></pre>\n} @else {\n  <pre class=\"border-0 m-0 p-0\"><code>{{ code() }} </code></pre>\n}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\n\nimport { type SiMarkdownHighlighter } from '@siemens/element-ng/markdown';\n\nimport { SiMarkdownHightlightJsComponent } from './si-markdown-highlightjs.component';\nimport { SiMarkdownHighlightJsOptions } from './si-markdown-highlightjs.types';\n\n/**\n * Code highlighter using Highlight.js\n * @param options - Options passed to highlight.js\n * @returns highlighter configuration for `SiMarkdownOptions.setCodeHighlighter()`\n */\nexport const siMarkdownHighlightJs = (\n  options?: SiMarkdownHighlightJsOptions\n): SiMarkdownHighlighter => {\n  return {\n    component: SiMarkdownHightlightJsComponent,\n    options\n  };\n};\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-markdown-highlightjs.types';\nexport * from './si-markdown-highlightjs.highlighter';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"siemens-element-ng-markdown-hightlighter-highlightjs.mjs","sources":["../../../../projects/element-ng/markdown/hightlighter/highlightjs/si-markdown-highlightjs.component.ts","../../../../projects/element-ng/markdown/hightlighter/highlightjs/si-markdown-highlightjs.component.html","../../../../projects/element-ng/markdown/hightlighter/highlightjs/si-markdown-highlightjs.highlighter.ts","../../../../projects/element-ng/markdown/hightlighter/highlightjs/index.ts","../../../../projects/element-ng/markdown/hightlighter/highlightjs/siemens-element-ng-markdown-hightlighter-highlightjs.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { Component, inject, input } from '@angular/core';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport { computedAsync, type SiMarkdownHighlighterComponent } from '@siemens/element-ng/markdown';\nimport { type Language } from 'highlight.js';\nimport hljs from 'highlight.js/lib/core';\nimport langBash from 'highlight.js/lib/languages/bash';\nimport langCss from 'highlight.js/lib/languages/css';\nimport langJs from 'highlight.js/lib/languages/javascript';\nimport langJson from 'highlight.js/lib/languages/json';\nimport langMarkdown from 'highlight.js/lib/languages/markdown';\nimport langPython from 'highlight.js/lib/languages/python';\nimport langScss from 'highlight.js/lib/languages/scss';\nimport langTs from 'highlight.js/lib/languages/typescript';\nimport langXml from 'highlight.js/lib/languages/xml';\n\nimport {\n  HighlightJSLanguageLoader,\n  SiMarkdownHighlightJsOptions\n} from './si-markdown-highlightjs.types';\n\n// some common languages are built-in for initial loading speed\nhljs.registerLanguage('javascript', langJs);\nhljs.registerLanguage('typescript', langTs);\nhljs.registerLanguage('json', langJson);\nhljs.registerLanguage('css', langCss);\nhljs.registerLanguage('scss', langScss);\nhljs.registerLanguage('bash', langBash);\nhljs.registerLanguage('python', langPython);\nhljs.registerLanguage('xml', langXml);\nhljs.registerLanguage('markdown', langMarkdown);\n\nconst getHljsLang = async (\n  lang: string,\n  loader?: HighlightJSLanguageLoader\n): Promise<Language | undefined> => {\n  const loadedLang = hljs.getLanguage(lang);\n  if (loadedLang) {\n    return loadedLang;\n  }\n\n  if (loader) {\n    const importLang = await loader(lang);\n    if (importLang) {\n      hljs.registerLanguage(lang, importLang.default);\n      return hljs.getLanguage(lang);\n    }\n  }\n  return undefined;\n};\n\n@Component({\n  selector: 'si-markdown-highlightjs',\n  templateUrl: './si-markdown-highlightjs.component.html',\n  styleUrl: './si-markdown-highlightjs.component.scss',\n  host: {\n    class: 'd-block'\n  }\n})\nexport class SiMarkdownHightlightJsComponent implements SiMarkdownHighlighterComponent {\n  private readonly sanitizer = inject(DomSanitizer);\n  readonly code = input.required<string>();\n  readonly language = input.required<string>();\n  readonly updateLanguage = input.required<(lang?: string) => void>();\n  readonly options = input<SiMarkdownHighlightJsOptions>();\n\n  protected readonly highlighted = computedAsync({\n    params: () => ({ code: this.code(), language: this.language(), options: this.options() }),\n    computation: params => this.highlight(params.code, params.language, params.options),\n    initial: undefined\n  });\n\n  private async highlight(\n    code: string,\n    language: string,\n    options: SiMarkdownHighlightJsOptions = {}\n  ): Promise<SafeHtml> {\n    let highlighted = '';\n    if (!language && options?.autoDetectLanguage) {\n      try {\n        const res = hljs.highlightAuto(code, undefined);\n        highlighted = res.value;\n        if (res.language) {\n          const lang = hljs.getLanguage(res.language);\n          this.updateLanguage()(lang?.name);\n        } else {\n          this.updateLanguage()(language);\n        }\n      } catch {\n        // ignored\n      }\n    } else {\n      const hljsLang = await getHljsLang(language, options.languageLoader);\n      if (hljsLang) {\n        this.updateLanguage()(hljsLang.name);\n        try {\n          highlighted = hljs.highlight(code, { ...options, language }).value;\n        } catch {\n          // ignored\n        }\n      } else {\n        this.updateLanguage()(language);\n      }\n    }\n    return highlighted ? this.sanitizer.bypassSecurityTrustHtml(highlighted) : '';\n  }\n}\n","@let html = highlighted();\n@if (html) {\n  <pre class=\"border-0 m-0 p-0\"><code [innerHTML]=\"html\"></code></pre>\n} @else {\n  <pre class=\"border-0 m-0 p-0\"><code>{{ code() }} </code></pre>\n}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\n\nimport { type SiMarkdownHighlighter } from '@siemens/element-ng/markdown';\n\nimport { SiMarkdownHightlightJsComponent } from './si-markdown-highlightjs.component';\nimport { SiMarkdownHighlightJsOptions } from './si-markdown-highlightjs.types';\n\n/**\n * Code highlighter using Highlight.js\n * @param options - Options passed to highlight.js\n * @returns highlighter configuration for `SiMarkdownOptions.setCodeHighlighter()`\n */\nexport const siMarkdownHighlightJs = (\n  options?: SiMarkdownHighlightJsOptions\n): SiMarkdownHighlighter => {\n  return {\n    component: SiMarkdownHightlightJsComponent,\n    options\n  };\n};\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-markdown-highlightjs.types';\nexport * from './si-markdown-highlightjs.highlighter';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/siemens-element-ng-navbar-vertical-next.mjs

@@ -849,11 +849,11 @@ class SiNavbarVerticalNextSearchComponent {
         setTimeout(() => this.searchBar().focus());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiNavbarVerticalNextSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.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 background-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:var(--si-sys-sizing-spacing-y-40);padding-block:var(--si-sys-sizing-spacing-y-20);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 + var(--si-sys-sizing-spacing-y-40) * 2);inline-size:calc(1.5rem + 2 * var(--si-sys-sizing-spacing-x-20));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", "value", "readonly", "colorVariant", "disabled", "maxlength", "clearButtonAriaLabel"], outputs: ["searchChange"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.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 background-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:var(--si-sys-sizing-spacing-y-40);padding-block:var(--si-sys-sizing-spacing-y-20);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:var(--si-sys-sizing-sizing-80);inline-size:calc(1.5rem + 2 * var(--si-sys-sizing-spacing-x-20));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", "value", "readonly", "colorVariant", "disabled", "maxlength", "clearButtonAriaLabel"], outputs: ["searchChange"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiNavbarVerticalNextSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-navbar-vertical-next-search', imports: [SiIconComponent, SiSearchBarComponent, SiTranslatePipe], 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 background-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:var(--si-sys-sizing-spacing-y-40);padding-block:var(--si-sys-sizing-spacing-y-20);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 + var(--si-sys-sizing-spacing-y-40) * 2);inline-size:calc(1.5rem + 2 * var(--si-sys-sizing-spacing-x-20));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"] }]
+            args: [{ selector: 'si-navbar-vertical-next-search', imports: [SiIconComponent, SiSearchBarComponent, SiTranslatePipe], 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 background-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:var(--si-sys-sizing-spacing-y-40);padding-block:var(--si-sys-sizing-spacing-y-20);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:var(--si-sys-sizing-sizing-80);inline-size:calc(1.5rem + 2 * var(--si-sys-sizing-spacing-x-20));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"] }]
         }], 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 }] }] } });
 
 /**