npm - @siemens/element-ng - Versions diffs - 48.10.0 → 49.0.0-rc.2 - Mend

@siemens/element-ng 48.10.0 → 49.0.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (396) hide show

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

@@ -1,7 +1,8 @@
-import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { inject, ElementRef, ChangeDetectorRef, input, output, model, booleanAttribute, computed, HostBinding, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { addIcons, elementBack, SiIconComponent } from '@siemens/element-ng/icon';
+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 { t, SiTranslatePipe } from '@siemens/element-translate-ng/translate';
@@ -25,7 +26,7 @@ class SiMainDetailContainerComponent {
      *
      * @defaultValue BOOTSTRAP_BREAKPOINTS.mdMinimum
      */
-    largeLayoutBreakpoint = input(BOOTSTRAP_BREAKPOINTS.mdMinimum);
+    largeLayoutBreakpoint = input(BOOTSTRAP_BREAKPOINTS.mdMinimum, ...(ngDevMode ? [{ debugName: "largeLayoutBreakpoint" }] : []));
     /**
      * Whether the main-detail layout component has a large size or not,
      * `true` if the container´s width matches or exceeds the `largeLayoutBreakpoint`.
@@ -42,26 +43,26 @@ class SiMainDetailContainerComponent {
      *
      * @defaultValue false
      */
-    detailsActive = model(false);
+    detailsActive = model(false, ...(ngDevMode ? [{ debugName: "detailsActive" }] : []));
     /**
      * The heading of the main-detail layout component, usually a page heading.
      *
      * @defaultValue ''
      */
-    heading = input('');
+    heading = input('', ...(ngDevMode ? [{ debugName: "heading" }] : []));
     /**
      * Whether the heading should be truncated (single line) or not.
      * Default value is `false`.
      *
      * @defaultValue false
      */
-    truncateHeading = input(false, { transform: booleanAttribute });
+    truncateHeading = input(false, { ...(ngDevMode ? { debugName: "truncateHeading" } : {}), transform: booleanAttribute });
     /**
      * The heading of the detail area.
      *
      * @defaultValue ''
      */
-    detailsHeading = input('');
+    detailsHeading = input('', ...(ngDevMode ? [{ debugName: "detailsHeading" }] : []));
     /**
      * Whether the main and detail parts should be resizable by a splitter or not.
      * This is only supported in the 'large' scenario (when `hasLargeSize` is `true`).
@@ -69,7 +70,7 @@ class SiMainDetailContainerComponent {
      *
      * @defaultValue false
      */
-    resizableParts = input(false, { transform: booleanAttribute });
+    resizableParts = input(false, { ...(ngDevMode ? { debugName: "resizableParts" } : {}), transform: booleanAttribute });
     /**
      * You can hide the back button in the mobile view by setting true. Required
      * in add, edit workflows on mobile sizes. During add or edit, the back button
@@ -77,7 +78,7 @@ class SiMainDetailContainerComponent {
      *
      * @defaultValue false
      */
-    hideBackButton = input(false, { transform: booleanAttribute });
+    hideBackButton = input(false, { ...(ngDevMode ? { debugName: "hideBackButton" } : {}), transform: booleanAttribute });
     /**
      * Details back button text. Required for a11y.
      *
@@ -86,52 +87,52 @@ class SiMainDetailContainerComponent {
      * t(() => $localize`:@@SI_MAIN_DETAIL_CONTAINER.BACK:Back`)
      * ```
      */
-    detailsBackButtonText = input(t(() => $localize `:@@SI_MAIN_DETAIL_CONTAINER.BACK:Back`));
+    detailsBackButtonText = input(t(() => $localize `:@@SI_MAIN_DETAIL_CONTAINER.BACK:Back`), ...(ngDevMode ? [{ debugName: "detailsBackButtonText" }] : []));
     /**
      * CSS class(es) applied to the outermost container. Per default, Bootstrap classes
      * to handle responsive paddings are applied: `px-6 pt-6 px-md-9`.
      *
      * @defaultValue 'px-6 pt-6 px-md-9'
      */
-    containerClass = input('px-6 pt-6 px-md-9');
+    containerClass = input('px-6 pt-6 px-md-9', ...(ngDevMode ? [{ debugName: "containerClass" }] : []));
     /**
      * CSS class(es) applied to the main container. In combination with `containerClass`,
      * this allows for settings individual padding and margin values on the individual containers.
      *
      * @defaultValue 'pb-6'
      */
-    mainContainerClass = input('pb-6');
+    mainContainerClass = input('pb-6', ...(ngDevMode ? [{ debugName: "mainContainerClass" }] : []));
     /**
      * CSS class(es) applied to the detail container. In combination with `containerClass`,
      * this allows for settings individual padding and margin values on the individual containers.
      *
      * @defaultValue 'pb-6'
      */
-    detailContainerClass = input('pb-6');
+    detailContainerClass = input('pb-6', ...(ngDevMode ? [{ debugName: "detailContainerClass" }] : []));
     /**
      * 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%.
      *
      * @defaultValue 'default'
      */
-    mainContainerWidth = model('default');
+    mainContainerWidth = model('default', ...(ngDevMode ? [{ debugName: "mainContainerWidth" }] : []));
     /**
      * Sets the minimal width of the main container in pixel.
      *
      * @defaultValue 300
      */
-    minMainSize = input(300);
+    minMainSize = input(300, ...(ngDevMode ? [{ debugName: "minMainSize" }] : []));
     /**
      * Sets the minimal width of the detail container in pixel.
      *
      * @defaultValue 300
      */
-    minDetailSize = input(300);
+    minDetailSize = input(300, ...(ngDevMode ? [{ debugName: "minDetailSize" }] : []));
     /**
      * An optional stateId to uniquely identify a component instance.
      * Required for persistence of ui state.
      */
-    stateId = input();
+    stateId = input(...(ngDevMode ? [undefined, { debugName: "stateId" }] : []));
     /**
      * The attribute is set to true when the detail area is not visible to ensure that the user
      * can't tab to details area when it is hidden.
@@ -144,7 +145,7 @@ class SiMainDetailContainerComponent {
                 ? 32
                 : 50
             : mainContainerWidth;
-    });
+    }, ...(ngDevMode ? [{ debugName: "actualMainContainerWidth" }] : []));
     splitSizes = [
         this.actualMainContainerWidth(),
         100 - this.actualMainContainerWidth()
@@ -156,11 +157,11 @@ class SiMainDetailContainerComponent {
     mainStateId = computed(() => {
         const stateId = this.stateId();
         return stateId ? `${stateId}-main` : undefined;
-    });
+    }, ...(ngDevMode ? [{ debugName: "mainStateId" }] : []));
     detailStateId = computed(() => {
         const stateId = this.stateId();
         return stateId ? `${stateId}-detail` : undefined;
-    });
+    }, ...(ngDevMode ? [{ debugName: "detailStateId" }] : []));
     animate = false;
     opacity = '0';
     ngOnChanges(changes) {
@@ -226,20 +227,19 @@ class SiMainDetailContainerComponent {
     updateDetailsFocusable() {
         this.preventFocusDetails = !this.hasLargeSize && !this.detailsActive();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiMainDetailContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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": "this.animate", "style.opacity": "this.opacity" }, classAttribute: "si-layout-inner" }, usesOnChanges: true, ngImport: i0, template: "@if (resizableParts() && hasLargeSize) {\n  <div class=\"main-detail-layout d-flex flex-column\" [ngClass]=\"containerClass()\">\n    <ng-container *ngTemplateOutlet=\"headingTemplate\" />\n    <si-split\n      class=\"w-100 flex-grow-1\"\n      orientation=\"horizontal\"\n      [stateId]=\"stateId()\"\n      [sizes]=\"splitSizes\"\n      (sizesChange)=\"onSplitSizesChange($event)\"\n    >\n      <si-split-part\n        scale=\"none\"\n        [showCollapseButton]=\"false\"\n        [showHeader]=\"false\"\n        [minSize]=\"minMainSize()\"\n        [stateId]=\"mainStateId()\"\n      >\n        <ng-container *ngTemplateOutlet=\"mainTemplate\" />\n      </si-split-part>\n      <si-split-part\n        scale=\"auto\"\n        [showCollapseButton]=\"false\"\n        [showHeader]=\"false\"\n        [minSize]=\"minDetailSize()\"\n        [stateId]=\"detailStateId()\"\n      >\n        <ng-container *ngTemplateOutlet=\"detailTemplate\" />\n      </si-split-part>\n    </si-split>\n  </div>\n} @else {\n  <div\n    class=\"main-detail-layout d-flex flex-column\"\n    [ngClass]=\"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    [ngClass]=\"[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    [ngClass]=\"[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\n          type=\"button\"\n          class=\"btn btn-circle btn-sm btn-secondary\"\n          (click)=\"detailsBackClicked()\"\n        >\n          <si-icon [icon]=\"icons.elementBack\" />\n          <span class=\"visually-hidden\">{{ detailsBackButtonText() | translate }}</span>\n        </button>\n      }\n      @if (detailsHeading()) {\n        <span class=\"detail-heading si-h4 me-auto ms-6 my-auto text-truncate\">{{\n          detailsHeading() | translate\n        }}</span>\n      }\n      <ng-content select=\"[slot=detailActions]\" />\n    </div>\n    <ng-content select=\"[slot=details]\" />\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto}:host ::ng-deep [slot=mainSearch]{flex:1 1 0}:host ::ng-deep [slot=mainSearch]+[slot=mainActions]{margin-inline-start:12px}:host ::ng-deep [slot=mainActions]{margin-inline-start:auto}:host ::ng-deep [slot=mainData],:host ::ng-deep [slot=details]{flex:1 1 0;min-block-size:0}:host ::ng-deep [slot=detailActions]{margin-inline-start:auto}:host ::ng-deep .detail-heading+[slot=detailActions]{margin-inline-start:12px}:host ::ng-deep si-split{--si-split-gutter-background: transparent;min-block-size:0}:host ::ng-deep si-split si-split-part,:host ::ng-deep si-split .si-split-container,:host ::ng-deep si-split .si-split-part-content{overflow:visible}:host.animate{--si-main-detail-animation-duration: calc(.5s * var(--element-animations-enabled, 1))}.main-detail-layout{overflow-x:hidden;position:relative}.main-detail-layout.large-size{--si-main-detail-container-width: 100%;--si-main-detail-container-transition: none;--si-main-detail-container-transform: none;--si-main-detail-transition: none;--si-main-detail-opacity: 1;--si-main-detail-pointer-events: auto}.main-detail-container{--si-main-detail-transition: opacity var(--si-main-detail-animation-duration, 0) ease-in-out;--si-main-detail-detail-opacity: 0;--si-main-detail-detail-pointer-events: none;inline-size:var(--si-main-detail-container-width, 200%);transform:var(--si-main-detail-container-transform, none);transform-origin:top left;transition:var(--si-main-detail-container-transition, transform var(--si-main-detail-animation-duration, 0) ease-in-out)}.main-detail-container.details-active{--si-main-detail-container-transform: translateX(-50%);--si-main-detail-main-opacity: 0;--si-main-detail-detail-opacity: 1;--si-main-detail-main-pointer-events: none;--si-main-detail-detail-pointer-events: auto}.main-detail-layout,.main-detail-container,.main-container,.detail-container,.main-data-container{flex:1 1 0;min-block-size:0}.main-container,.detail-container{transition:var(--si-main-detail-transition, none)}.main-container{opacity:var(--si-main-detail-opacity, var(--si-main-detail-main-opacity, 1));pointer-events:var(--si-main-detail-pointer-events, var(--si-main-detail-main-pointer-events, auto))}.detail-container{opacity:var(--si-main-detail-opacity, var(--si-main-detail-detail-opacity, 1));pointer-events:var(--si-main-detail-pointer-events, var(--si-main-detail-detail-pointer-events, auto))}.main-search-actions:not(:empty){min-block-size:32px;margin-block-end:16px}.detail-heading-actions:not(:empty){min-block-size:32px;margin-block-end:16px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiSplitComponent, selector: "si-split", inputs: ["gutterSize", "orientation", "sizes", "stateId"], outputs: ["sizesChange"] }, { kind: "component", type: SiSplitPartComponent, selector: "si-split-part", inputs: ["actions", "collapseDirection", "collapseIconClass", "collapseToMinSize", "headerTemplate", "heading", "minSize", "removeContentOnCollapse", "scale", "showCollapseButton", "showHeader", "collapseLabel", "stateId", "size", "collapseOthers", "expanded"], outputs: ["collapseChanged", "stateChange"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMainDetailContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiMainDetailContainerComponent, isStandalone: true, selector: "si-main-detail-container", inputs: { largeLayoutBreakpoint: { classPropertyName: "largeLayoutBreakpoint", publicName: "largeLayoutBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, detailsActive: { classPropertyName: "detailsActive", publicName: "detailsActive", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, truncateHeading: { classPropertyName: "truncateHeading", publicName: "truncateHeading", isSignal: true, isRequired: false, transformFunction: null }, detailsHeading: { classPropertyName: "detailsHeading", publicName: "detailsHeading", isSignal: true, isRequired: false, transformFunction: null }, resizableParts: { classPropertyName: "resizableParts", publicName: "resizableParts", isSignal: true, isRequired: false, transformFunction: null }, hideBackButton: { classPropertyName: "hideBackButton", publicName: "hideBackButton", isSignal: true, isRequired: false, transformFunction: null }, detailsBackButtonText: { classPropertyName: "detailsBackButtonText", publicName: "detailsBackButtonText", isSignal: true, isRequired: false, transformFunction: null }, containerClass: { classPropertyName: "containerClass", publicName: "containerClass", isSignal: true, isRequired: false, transformFunction: null }, mainContainerClass: { classPropertyName: "mainContainerClass", publicName: "mainContainerClass", isSignal: true, isRequired: false, transformFunction: null }, detailContainerClass: { classPropertyName: "detailContainerClass", publicName: "detailContainerClass", isSignal: true, isRequired: false, transformFunction: null }, mainContainerWidth: { classPropertyName: "mainContainerWidth", publicName: "mainContainerWidth", isSignal: true, isRequired: false, transformFunction: null }, minMainSize: { classPropertyName: "minMainSize", publicName: "minMainSize", isSignal: true, isRequired: false, transformFunction: null }, minDetailSize: { classPropertyName: "minDetailSize", publicName: "minDetailSize", isSignal: true, isRequired: false, transformFunction: null }, stateId: { classPropertyName: "stateId", publicName: "stateId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hasLargeSizeChange: "hasLargeSizeChange", detailsActive: "detailsActiveChange", mainContainerWidth: "mainContainerWidthChange" }, host: { properties: { "class.animate": "this.animate", "style.opacity": "this.opacity" }, classAttribute: "si-layout-inner" }, usesOnChanges: true, ngImport: i0, template: "@if (resizableParts() && hasLargeSize) {\n  <div class=\"main-detail-layout d-flex flex-column\" [class]=\"containerClass()\">\n    <ng-container *ngTemplateOutlet=\"headingTemplate\" />\n    <si-split\n      class=\"w-100 flex-grow-1\"\n      orientation=\"horizontal\"\n      [stateId]=\"stateId()\"\n      [sizes]=\"splitSizes\"\n      (sizesChange)=\"onSplitSizesChange($event)\"\n    >\n      <si-split-part\n        scale=\"none\"\n        [showCollapseButton]=\"false\"\n        [showHeader]=\"false\"\n        [minSize]=\"minMainSize()\"\n        [stateId]=\"mainStateId()\"\n      >\n        <ng-container *ngTemplateOutlet=\"mainTemplate\" />\n      </si-split-part>\n      <si-split-part\n        scale=\"auto\"\n        [showCollapseButton]=\"false\"\n        [showHeader]=\"false\"\n        [minSize]=\"minDetailSize()\"\n        [stateId]=\"detailStateId()\"\n      >\n        <ng-container *ngTemplateOutlet=\"detailTemplate\" />\n      </si-split-part>\n    </si-split>\n  </div>\n} @else {\n  <div\n    class=\"main-detail-layout d-flex flex-column\"\n    [class]=\"containerClass()\"\n    [class.large-size]=\"hasLargeSize\"\n  >\n    <ng-container *ngTemplateOutlet=\"headingTemplate\" />\n    <div\n      class=\"main-detail-container d-flex flex-grow-1\"\n      [class.details-active]=\"detailsActive() && !hasLargeSize\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          mainTemplate;\n          context: { customClass: hasLargeSize ? 'col-3 ps-0 pe-4' : 'col-6 px-0' }\n        \"\n      />\n      <ng-container\n        *ngTemplateOutlet=\"\n          detailTemplate;\n          context: { customClass: hasLargeSize ? 'col-9 ps-4 pe-0' : 'col-6 px-0' }\n        \"\n      />\n    </div>\n  </div>\n}\n\n<!-- Templates -->\n<ng-template #headingTemplate>\n  @if (heading()) {\n    <div class=\"si-layout-header\">\n      <h2 class=\"si-layout-title si-layout-top-element\" [class.text-truncate]=\"truncateHeading()\">{{\n        heading() | translate\n      }}</h2>\n    </div>\n  }\n</ng-template>\n\n<ng-template #mainTemplate let-customClass=\"customClass\">\n  <div\n    class=\"main-container d-flex flex-column\"\n    [class]=\"[mainContainerClass(), customClass ? customClass : '']\"\n    [style.max-inline-size]=\"maxMainSize\"\n  >\n    <div class=\"main-search-actions d-flex align-items-center\">\n      <ng-content select=\"[slot=mainSearch]\" />\n      <ng-content select=\"[slot=mainActions]\" />\n    </div>\n    <div class=\"main-data-container d-flex\">\n      <ng-content select=\"[slot=mainData]\" />\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #detailTemplate let-customClass=\"customClass\">\n  <div\n    class=\"detail-container d-flex flex-column\"\n    [class]=\"[detailContainerClass(), customClass ? customClass : '']\"\n    [style.max-inline-size]=\"maxDetailSize\"\n    [attr.inert]=\"preventFocusDetails ? '' : null\"\n  >\n    <div class=\"detail-heading-actions d-flex align-items-center\">\n      @if (!this.hasLargeSize && !this.hideBackButton()) {\n        <button type=\"button\" class=\"btn btn-circle btn-secondary\" (click)=\"detailsBackClicked()\">\n          <si-icon [icon]=\"icons.elementBack\" />\n          <span class=\"visually-hidden\">{{ detailsBackButtonText() | translate }}</span>\n        </button>\n      }\n      @if (detailsHeading()) {\n        <span class=\"detail-heading si-h4 me-auto ms-6 my-auto text-truncate\">{{\n          detailsHeading() | translate\n        }}</span>\n      }\n      <ng-content select=\"[slot=detailActions]\" />\n    </div>\n    <ng-content select=\"[slot=details]\" />\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto}:host ::ng-deep [slot=mainSearch]{flex:1 1 0}:host ::ng-deep [slot=mainSearch]+[slot=mainActions]{margin-inline-start:12px}:host ::ng-deep [slot=mainActions]{margin-inline-start:auto}:host ::ng-deep [slot=mainData],:host ::ng-deep [slot=details]{flex:1 1 0;min-block-size:0}:host ::ng-deep [slot=detailActions]{margin-inline-start:auto}:host ::ng-deep .detail-heading+[slot=detailActions]{margin-inline-start:12px}:host ::ng-deep si-split{--si-split-gutter-background: transparent;min-block-size:0}:host ::ng-deep si-split si-split-part,:host ::ng-deep si-split .si-split-container,:host ::ng-deep si-split .si-split-part-content{overflow:visible}:host.animate{--si-main-detail-animation-duration: calc(.5s * var(--element-animations-enabled, 1))}.main-detail-layout{overflow-x:hidden;position:relative}.main-detail-layout.large-size{--si-main-detail-container-width: 100%;--si-main-detail-container-transition: none;--si-main-detail-container-transform: none;--si-main-detail-transition: none;--si-main-detail-opacity: 1;--si-main-detail-pointer-events: auto}.main-detail-container{--si-main-detail-transition: opacity var(--si-main-detail-animation-duration, 0) ease-in-out;--si-main-detail-detail-opacity: 0;--si-main-detail-detail-pointer-events: none;inline-size:var(--si-main-detail-container-width, 200%);transform:var(--si-main-detail-container-transform, none);transform-origin:top left;transition:var(--si-main-detail-container-transition, transform var(--si-main-detail-animation-duration, 0) ease-in-out)}.main-detail-container.details-active{--si-main-detail-container-transform: translateX(-50%);--si-main-detail-main-opacity: 0;--si-main-detail-detail-opacity: 1;--si-main-detail-main-pointer-events: none;--si-main-detail-detail-pointer-events: auto}.main-detail-layout,.main-detail-container,.main-container,.detail-container,.main-data-container{flex:1 1 0;min-block-size:0}.main-container,.detail-container{transition:var(--si-main-detail-transition, none)}.main-container{opacity:var(--si-main-detail-opacity, var(--si-main-detail-main-opacity, 1));pointer-events:var(--si-main-detail-pointer-events, var(--si-main-detail-main-pointer-events, auto))}.detail-container{opacity:var(--si-main-detail-opacity, var(--si-main-detail-detail-opacity, 1));pointer-events:var(--si-main-detail-pointer-events, var(--si-main-detail-detail-pointer-events, auto))}.main-search-actions:not(:empty){min-block-size:32px;margin-block-end:16px}.detail-heading-actions:not(:empty){min-block-size:32px;margin-block-end:16px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiSplitComponent, selector: "si-split", inputs: ["gutterSize", "orientation", "sizes", "stateId"], outputs: ["sizesChange"] }, { kind: "component", type: SiSplitPartComponent, selector: "si-split-part", inputs: ["actions", "collapseDirection", "collapseIconClass", "collapseToMinSize", "headerTemplate", "heading", "minSize", "removeContentOnCollapse", "scale", "showCollapseButton", "showHeader", "collapseLabel", "stateId", "size", "collapseOthers", "expanded"], outputs: ["collapseChanged", "stateChange"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiMainDetailContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMainDetailContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-main-detail-container', imports: [
-                        NgClass,
                         NgTemplateOutlet,
                         SiSplitComponent,
                         SiSplitPartComponent,
                         SiTranslatePipe,
                         SiIconComponent
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'si-layout-inner' }, template: "@if (resizableParts() && hasLargeSize) {\n  <div class=\"main-detail-layout d-flex flex-column\" [ngClass]=\"containerClass()\">\n    <ng-container *ngTemplateOutlet=\"headingTemplate\" />\n    <si-split\n      class=\"w-100 flex-grow-1\"\n      orientation=\"horizontal\"\n      [stateId]=\"stateId()\"\n      [sizes]=\"splitSizes\"\n      (sizesChange)=\"onSplitSizesChange($event)\"\n    >\n      <si-split-part\n        scale=\"none\"\n        [showCollapseButton]=\"false\"\n        [showHeader]=\"false\"\n        [minSize]=\"minMainSize()\"\n        [stateId]=\"mainStateId()\"\n      >\n        <ng-container *ngTemplateOutlet=\"mainTemplate\" />\n      </si-split-part>\n      <si-split-part\n        scale=\"auto\"\n        [showCollapseButton]=\"false\"\n        [showHeader]=\"false\"\n        [minSize]=\"minDetailSize()\"\n        [stateId]=\"detailStateId()\"\n      >\n        <ng-container *ngTemplateOutlet=\"detailTemplate\" />\n      </si-split-part>\n    </si-split>\n  </div>\n} @else {\n  <div\n    class=\"main-detail-layout d-flex flex-column\"\n    [ngClass]=\"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    [ngClass]=\"[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    [ngClass]=\"[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\n          type=\"button\"\n          class=\"btn btn-circle btn-sm btn-secondary\"\n          (click)=\"detailsBackClicked()\"\n        >\n          <si-icon [icon]=\"icons.elementBack\" />\n          <span class=\"visually-hidden\">{{ detailsBackButtonText() | translate }}</span>\n        </button>\n      }\n      @if (detailsHeading()) {\n        <span class=\"detail-heading si-h4 me-auto ms-6 my-auto text-truncate\">{{\n          detailsHeading() | translate\n        }}</span>\n      }\n      <ng-content select=\"[slot=detailActions]\" />\n    </div>\n    <ng-content select=\"[slot=details]\" />\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto}:host ::ng-deep [slot=mainSearch]{flex:1 1 0}:host ::ng-deep [slot=mainSearch]+[slot=mainActions]{margin-inline-start:12px}:host ::ng-deep [slot=mainActions]{margin-inline-start:auto}:host ::ng-deep [slot=mainData],:host ::ng-deep [slot=details]{flex:1 1 0;min-block-size:0}:host ::ng-deep [slot=detailActions]{margin-inline-start:auto}:host ::ng-deep .detail-heading+[slot=detailActions]{margin-inline-start:12px}:host ::ng-deep si-split{--si-split-gutter-background: transparent;min-block-size:0}:host ::ng-deep si-split si-split-part,:host ::ng-deep si-split .si-split-container,:host ::ng-deep si-split .si-split-part-content{overflow:visible}:host.animate{--si-main-detail-animation-duration: calc(.5s * var(--element-animations-enabled, 1))}.main-detail-layout{overflow-x:hidden;position:relative}.main-detail-layout.large-size{--si-main-detail-container-width: 100%;--si-main-detail-container-transition: none;--si-main-detail-container-transform: none;--si-main-detail-transition: none;--si-main-detail-opacity: 1;--si-main-detail-pointer-events: auto}.main-detail-container{--si-main-detail-transition: opacity var(--si-main-detail-animation-duration, 0) ease-in-out;--si-main-detail-detail-opacity: 0;--si-main-detail-detail-pointer-events: none;inline-size:var(--si-main-detail-container-width, 200%);transform:var(--si-main-detail-container-transform, none);transform-origin:top left;transition:var(--si-main-detail-container-transition, transform var(--si-main-detail-animation-duration, 0) ease-in-out)}.main-detail-container.details-active{--si-main-detail-container-transform: translateX(-50%);--si-main-detail-main-opacity: 0;--si-main-detail-detail-opacity: 1;--si-main-detail-main-pointer-events: none;--si-main-detail-detail-pointer-events: auto}.main-detail-layout,.main-detail-container,.main-container,.detail-container,.main-data-container{flex:1 1 0;min-block-size:0}.main-container,.detail-container{transition:var(--si-main-detail-transition, none)}.main-container{opacity:var(--si-main-detail-opacity, var(--si-main-detail-main-opacity, 1));pointer-events:var(--si-main-detail-pointer-events, var(--si-main-detail-main-pointer-events, auto))}.detail-container{opacity:var(--si-main-detail-opacity, var(--si-main-detail-detail-opacity, 1));pointer-events:var(--si-main-detail-pointer-events, var(--si-main-detail-detail-pointer-events, auto))}.main-search-actions:not(:empty){min-block-size:32px;margin-block-end:16px}.detail-heading-actions:not(:empty){min-block-size:32px;margin-block-end:16px}\n"] }]
-        }], propDecorators: { animate: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'si-layout-inner' }, template: "@if (resizableParts() && hasLargeSize) {\n  <div class=\"main-detail-layout d-flex flex-column\" [class]=\"containerClass()\">\n    <ng-container *ngTemplateOutlet=\"headingTemplate\" />\n    <si-split\n      class=\"w-100 flex-grow-1\"\n      orientation=\"horizontal\"\n      [stateId]=\"stateId()\"\n      [sizes]=\"splitSizes\"\n      (sizesChange)=\"onSplitSizesChange($event)\"\n    >\n      <si-split-part\n        scale=\"none\"\n        [showCollapseButton]=\"false\"\n        [showHeader]=\"false\"\n        [minSize]=\"minMainSize()\"\n        [stateId]=\"mainStateId()\"\n      >\n        <ng-container *ngTemplateOutlet=\"mainTemplate\" />\n      </si-split-part>\n      <si-split-part\n        scale=\"auto\"\n        [showCollapseButton]=\"false\"\n        [showHeader]=\"false\"\n        [minSize]=\"minDetailSize()\"\n        [stateId]=\"detailStateId()\"\n      >\n        <ng-container *ngTemplateOutlet=\"detailTemplate\" />\n      </si-split-part>\n    </si-split>\n  </div>\n} @else {\n  <div\n    class=\"main-detail-layout d-flex flex-column\"\n    [class]=\"containerClass()\"\n    [class.large-size]=\"hasLargeSize\"\n  >\n    <ng-container *ngTemplateOutlet=\"headingTemplate\" />\n    <div\n      class=\"main-detail-container d-flex flex-grow-1\"\n      [class.details-active]=\"detailsActive() && !hasLargeSize\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          mainTemplate;\n          context: { customClass: hasLargeSize ? 'col-3 ps-0 pe-4' : 'col-6 px-0' }\n        \"\n      />\n      <ng-container\n        *ngTemplateOutlet=\"\n          detailTemplate;\n          context: { customClass: hasLargeSize ? 'col-9 ps-4 pe-0' : 'col-6 px-0' }\n        \"\n      />\n    </div>\n  </div>\n}\n\n<!-- Templates -->\n<ng-template #headingTemplate>\n  @if (heading()) {\n    <div class=\"si-layout-header\">\n      <h2 class=\"si-layout-title si-layout-top-element\" [class.text-truncate]=\"truncateHeading()\">{{\n        heading() | translate\n      }}</h2>\n    </div>\n  }\n</ng-template>\n\n<ng-template #mainTemplate let-customClass=\"customClass\">\n  <div\n    class=\"main-container d-flex flex-column\"\n    [class]=\"[mainContainerClass(), customClass ? customClass : '']\"\n    [style.max-inline-size]=\"maxMainSize\"\n  >\n    <div class=\"main-search-actions d-flex align-items-center\">\n      <ng-content select=\"[slot=mainSearch]\" />\n      <ng-content select=\"[slot=mainActions]\" />\n    </div>\n    <div class=\"main-data-container d-flex\">\n      <ng-content select=\"[slot=mainData]\" />\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #detailTemplate let-customClass=\"customClass\">\n  <div\n    class=\"detail-container d-flex flex-column\"\n    [class]=\"[detailContainerClass(), customClass ? customClass : '']\"\n    [style.max-inline-size]=\"maxDetailSize\"\n    [attr.inert]=\"preventFocusDetails ? '' : null\"\n  >\n    <div class=\"detail-heading-actions d-flex align-items-center\">\n      @if (!this.hasLargeSize && !this.hideBackButton()) {\n        <button type=\"button\" class=\"btn btn-circle btn-secondary\" (click)=\"detailsBackClicked()\">\n          <si-icon [icon]=\"icons.elementBack\" />\n          <span class=\"visually-hidden\">{{ detailsBackButtonText() | translate }}</span>\n        </button>\n      }\n      @if (detailsHeading()) {\n        <span class=\"detail-heading si-h4 me-auto ms-6 my-auto text-truncate\">{{\n          detailsHeading() | translate\n        }}</span>\n      }\n      <ng-content select=\"[slot=detailActions]\" />\n    </div>\n    <ng-content select=\"[slot=details]\" />\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto}:host ::ng-deep [slot=mainSearch]{flex:1 1 0}:host ::ng-deep [slot=mainSearch]+[slot=mainActions]{margin-inline-start:12px}:host ::ng-deep [slot=mainActions]{margin-inline-start:auto}:host ::ng-deep [slot=mainData],:host ::ng-deep [slot=details]{flex:1 1 0;min-block-size:0}:host ::ng-deep [slot=detailActions]{margin-inline-start:auto}:host ::ng-deep .detail-heading+[slot=detailActions]{margin-inline-start:12px}:host ::ng-deep si-split{--si-split-gutter-background: transparent;min-block-size:0}:host ::ng-deep si-split si-split-part,:host ::ng-deep si-split .si-split-container,:host ::ng-deep si-split .si-split-part-content{overflow:visible}:host.animate{--si-main-detail-animation-duration: calc(.5s * var(--element-animations-enabled, 1))}.main-detail-layout{overflow-x:hidden;position:relative}.main-detail-layout.large-size{--si-main-detail-container-width: 100%;--si-main-detail-container-transition: none;--si-main-detail-container-transform: none;--si-main-detail-transition: none;--si-main-detail-opacity: 1;--si-main-detail-pointer-events: auto}.main-detail-container{--si-main-detail-transition: opacity var(--si-main-detail-animation-duration, 0) ease-in-out;--si-main-detail-detail-opacity: 0;--si-main-detail-detail-pointer-events: none;inline-size:var(--si-main-detail-container-width, 200%);transform:var(--si-main-detail-container-transform, none);transform-origin:top left;transition:var(--si-main-detail-container-transition, transform var(--si-main-detail-animation-duration, 0) ease-in-out)}.main-detail-container.details-active{--si-main-detail-container-transform: translateX(-50%);--si-main-detail-main-opacity: 0;--si-main-detail-detail-opacity: 1;--si-main-detail-main-pointer-events: none;--si-main-detail-detail-pointer-events: auto}.main-detail-layout,.main-detail-container,.main-container,.detail-container,.main-data-container{flex:1 1 0;min-block-size:0}.main-container,.detail-container{transition:var(--si-main-detail-transition, none)}.main-container{opacity:var(--si-main-detail-opacity, var(--si-main-detail-main-opacity, 1));pointer-events:var(--si-main-detail-pointer-events, var(--si-main-detail-main-pointer-events, auto))}.detail-container{opacity:var(--si-main-detail-opacity, var(--si-main-detail-detail-opacity, 1));pointer-events:var(--si-main-detail-pointer-events, var(--si-main-detail-detail-pointer-events, auto))}.main-search-actions:not(:empty){min-block-size:32px;margin-block-end:16px}.detail-heading-actions:not(:empty){min-block-size:32px;margin-block-end:16px}\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 }] }], animate: [{
                 type: HostBinding,
                 args: ['class.animate']
             }], opacity: [{
@@ -252,11 +252,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiMainDetailContainerModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiMainDetailContainerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: SiMainDetailContainerModule, imports: [SiMainDetailContainerComponent], exports: [SiMainDetailContainerComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiMainDetailContainerModule, imports: [SiMainDetailContainerComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMainDetailContainerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: SiMainDetailContainerModule, imports: [SiMainDetailContainerComponent], exports: [SiMainDetailContainerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMainDetailContainerModule, imports: [SiMainDetailContainerComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiMainDetailContainerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMainDetailContainerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SiMainDetailContainerComponent],

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

	@@ -1 +1 @@
1	- {"version":3,"file":"siemens-element-ng-main-detail-container.mjs","sources":["../../../../projects/element-ng/main-detail-container/si-main-detail-container.component.ts","../../../../projects/element-ng/main-detail-container/si-main-detail-container.component.html","../../../../projects/element-ng/main-detail-container/si-main-detail-container.module.ts","../../../../projects/element-ng/main-detail-container/index.ts","../../../../projects/element-ng/main-detail-container/siemens-element-ng-main-detail-container.ts"],"sourcesContent":["/*\n Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n /\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n computed,\n ElementRef,\n HostBinding,\n inject,\n input,\n model,\n OnChanges,\n OnDestroy,\n OnInit,\n output,\n SimpleChanges\n} from '@angular/core';\nimport { addIcons, elementBack, 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 { Subscription } from 'rxjs';\n\n@Component({\n selector: 'si-main-detail-container',\n imports: [\n NgClass,\n NgTemplateOutlet,\n SiSplitComponent,\n SiSplitPartComponent,\n SiTranslatePipe,\n SiIconComponent\n ],\n templateUrl: './si-main-detail-container.component.html',\n styleUrl: './si-main-detail-container.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { class: 'si-layout-inner' }\n})\nexport class SiMainDetailContainerComponent implements OnInit, OnChanges, OnDestroy {\n protected readonly icons = addIcons({ elementBack });\n\n private animationDuration = 500;\n private resizeSubs?: Subscription;\n private elementRef = inject(ElementRef);\n private resizeObserver = inject(ResizeObserverService);\n private changeDetectorRef = inject(ChangeDetectorRef);\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 @HostBinding('class.animate') protected animate = false;\n\n @HostBinding('style.opacity') protected opacity = '0';\n\n ngOnChanges(changes: SimpleChanges): 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.resizeSubs = this.resizeObserver\n .observe(this.elementRef.nativeElement, 100, true)\n .subscribe(dimensions => this.determineLayout(dimensions));\n }\n\n ngOnDestroy(): void {\n this.resizeSubs?.unsubscribe();\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 = '';\n this.changeDetectorRef.markForCheck();\n }\n }\n\n private doAnimation(detailsActive: boolean): void {\n this.animate = true;\n setTimeout(() => {\n this.animate = false;\n this.changeDetectorRef.markForCheck();\n }, this.animationDuration);\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\" [ngClass]=\"containerClass()\">\n <ng-container ngTemplateOutlet=\"headingTemplate\" />\n <si-split\n class=\"w-100 flex-grow-1\"\n orientation=\"horizontal\"\n [stateId]=\"stateId()\"\n [sizes]=\"splitSizes\"\n (sizesChange)=\"onSplitSizesChange($event)\"\n >\n <si-split-part\n scale=\"none\"\n [showCollapseButton]=\"false\"\n [showHeader]=\"false\"\n [minSize]=\"minMainSize()\"\n [stateId]=\"mainStateId()\"\n >\n <ng-container ngTemplateOutlet=\"mainTemplate\" />\n </si-split-part>\n <si-split-part\n scale=\"auto\"\n [showCollapseButton]=\"false\"\n [showHeader]=\"false\"\n [minSize]=\"minDetailSize()\"\n [stateId]=\"detailStateId()\"\n >\n <ng-container ngTemplateOutlet=\"detailTemplate\" />\n </si-split-part>\n </si-split>\n </div>\n} @else {\n <div\n class=\"main-detail-layout d-flex flex-column\"\n [ngClass]=\"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 [ngClass]=\"[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 [ngClass]=\"[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\n type=\"button\"\n class=\"btn btn-circle btn-sm btn-secondary\"\n (click)=\"detailsBackClicked()\"\n >\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 - 2025\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 - 2025\n * SPDX-License-Identifier: MIT\n /\nexport from './si-main-detail-container.component';\nexport * from './si-main-detail-container.module';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"siemens-element-ng-main-detail-container.mjs","sources":["../../../../projects/element-ng/main-detail-container/si-main-detail-container.component.ts","../../../../projects/element-ng/main-detail-container/si-main-detail-container.component.html","../../../../projects/element-ng/main-detail-container/si-main-detail-container.module.ts","../../../../projects/element-ng/main-detail-container/index.ts","../../../../projects/element-ng/main-detail-container/siemens-element-ng-main-detail-container.ts"],"sourcesContent":["/*\n Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n /\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n computed,\n ElementRef,\n HostBinding,\n inject,\n input,\n model,\n OnChanges,\n OnDestroy,\n OnInit,\n output,\n SimpleChanges\n} from '@angular/core';\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 { Subscription } from 'rxjs';\n\n@Component({\n selector: 'si-main-detail-container',\n imports: [\n NgTemplateOutlet,\n SiSplitComponent,\n SiSplitPartComponent,\n SiTranslatePipe,\n SiIconComponent\n ],\n templateUrl: './si-main-detail-container.component.html',\n styleUrl: './si-main-detail-container.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { class: 'si-layout-inner' }\n})\nexport class SiMainDetailContainerComponent implements OnInit, OnChanges, OnDestroy {\n protected readonly icons = addIcons({ elementBack });\n\n private animationDuration = 500;\n private resizeSubs?: Subscription;\n private elementRef = inject(ElementRef);\n private resizeObserver = inject(ResizeObserverService);\n private changeDetectorRef = inject(ChangeDetectorRef);\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 @HostBinding('class.animate') protected animate = false;\n\n @HostBinding('style.opacity') protected opacity = '0';\n\n ngOnChanges(changes: SimpleChanges): 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.resizeSubs = this.resizeObserver\n .observe(this.elementRef.nativeElement, 100, true)\n .subscribe(dimensions => this.determineLayout(dimensions));\n }\n\n ngOnDestroy(): void {\n this.resizeSubs?.unsubscribe();\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 = '';\n this.changeDetectorRef.markForCheck();\n }\n }\n\n private doAnimation(detailsActive: boolean): void {\n this.animate = true;\n setTimeout(() => {\n this.animate = false;\n this.changeDetectorRef.markForCheck();\n }, this.animationDuration);\n this.detailsActive.set(detailsActive);\n }\n\n private updateDetailsFocusable(): void {\n this.preventFocusDetails = !this.hasLargeSize && !this.detailsActive();\n }\n}\n","@if (resizableParts() && hasLargeSize) {\n <div class=\"main-detail-layout d-flex flex-column\" [class]=\"containerClass()\">\n <ng-container ngTemplateOutlet=\"headingTemplate\" />\n <si-split\n class=\"w-100 flex-grow-1\"\n orientation=\"horizontal\"\n [stateId]=\"stateId()\"\n [sizes]=\"splitSizes\"\n (sizesChange)=\"onSplitSizesChange($event)\"\n >\n <si-split-part\n scale=\"none\"\n [showCollapseButton]=\"false\"\n [showHeader]=\"false\"\n [minSize]=\"minMainSize()\"\n [stateId]=\"mainStateId()\"\n >\n <ng-container ngTemplateOutlet=\"mainTemplate\" />\n </si-split-part>\n <si-split-part\n scale=\"auto\"\n [showCollapseButton]=\"false\"\n [showHeader]=\"false\"\n [minSize]=\"minDetailSize()\"\n [stateId]=\"detailStateId()\"\n >\n <ng-container ngTemplateOutlet=\"detailTemplate\" />\n </si-split-part>\n </si-split>\n </div>\n} @else {\n <div\n class=\"main-detail-layout d-flex flex-column\"\n [class]=\"containerClass()\"\n [class.large-size]=\"hasLargeSize\"\n >\n <ng-container ngTemplateOutlet=\"headingTemplate\" />\n <div\n class=\"main-detail-container d-flex flex-grow-1\"\n [class.details-active]=\"detailsActive() && !hasLargeSize\"\n >\n <ng-container\n ngTemplateOutlet=\"\n mainTemplate;\n context: { customClass: hasLargeSize ? 'col-3 ps-0 pe-4' : 'col-6 px-0' }\n \"\n />\n <ng-container\n ngTemplateOutlet=\"\n detailTemplate;\n context: { customClass: hasLargeSize ? 'col-9 ps-4 pe-0' : 'col-6 px-0' }\n \"\n />\n </div>\n </div>\n}\n\n<!-- Templates -->\n<ng-template #headingTemplate>\n @if (heading()) {\n <div class=\"si-layout-header\">\n <h2 class=\"si-layout-title si-layout-top-element\" [class.text-truncate]=\"truncateHeading()\">{{\n heading() \| translate\n }}</h2>\n </div>\n }\n</ng-template>\n\n<ng-template #mainTemplate let-customClass=\"customClass\">\n <div\n class=\"main-container d-flex flex-column\"\n [class]=\"[mainContainerClass(), customClass ? customClass : '']\"\n [style.max-inline-size]=\"maxMainSize\"\n >\n <div class=\"main-search-actions d-flex align-items-center\">\n <ng-content select=\"[slot=mainSearch]\" />\n <ng-content select=\"[slot=mainActions]\" />\n </div>\n <div class=\"main-data-container d-flex\">\n <ng-content select=\"[slot=mainData]\" />\n </div>\n </div>\n</ng-template>\n\n<ng-template #detailTemplate let-customClass=\"customClass\">\n <div\n class=\"detail-container d-flex flex-column\"\n [class]=\"[detailContainerClass(), customClass ? customClass : '']\"\n [style.max-inline-size]=\"maxDetailSize\"\n [attr.inert]=\"preventFocusDetails ? '' : null\"\n >\n <div class=\"detail-heading-actions d-flex align-items-center\">\n @if (!this.hasLargeSize && !this.hideBackButton()) {\n <button type=\"button\" class=\"btn btn-circle btn-secondary\" (click)=\"detailsBackClicked()\">\n <si-icon [icon]=\"icons.elementBack\" />\n <span class=\"visually-hidden\">{{ detailsBackButtonText() \| translate }}</span>\n </button>\n }\n @if (detailsHeading()) {\n <span class=\"detail-heading si-h4 me-auto ms-6 my-auto text-truncate\">{{\n detailsHeading() \| translate\n }}</span>\n }\n <ng-content select=\"[slot=detailActions]\" />\n </div>\n <ng-content select=\"[slot=details]\" />\n </div>\n</ng-template>\n","/\n Copyright (c) Siemens 2016 - 2025\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 - 2025\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":";;;;;;;;;AAAA;;;AAGG;MA4CU,8BAA8B,CAAA;AACtB,IAAA,KAAK,GAAG,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IAE5C,iBAAiB,GAAG,GAAG;AACvB,IAAA,UAAU;AACV,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;AAC/B,IAAA,cAAc,GAAG,MAAM,CAAC,qBAAqB,CAAC;AAC9C,IAAA,iBAAiB,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAErD;;;;;;;AAOG;AACM,IAAA,qBAAqB,GAAG,KAAK,CAAC,qBAAqB,CAAC,SAAS,iEAAC;AAEvE;;;AAGG;AACH,IAAA,YAAY;AAEZ;;;AAGG;IACM,kBAAkB,GAAG,MAAM,EAAW;AAE/C;;;;;AAKG;AACM,IAAA,aAAa,GAAG,KAAK,CAAC,KAAK,yDAAC;AAErC;;;;AAIG;AACM,IAAA,OAAO,GAAG,KAAK,CAAqB,EAAE,mDAAC;AAEhD;;;;;AAKG;IACM,eAAe,GAAG,KAAK,CAAC,KAAK,4DAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAExE;;;;AAIG;AACM,IAAA,cAAc,GAAG,KAAK,CAAqB,EAAE,0DAAC;AAEvD;;;;;;AAMG;IACM,cAAc,GAAG,KAAK,CAAC,KAAK,2DAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAEvE;;;;;;AAMG;IACM,cAAc,GAAG,KAAK,CAAC,KAAK,2DAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAEvE;;;;;;;AAOG;AACM,IAAA,qBAAqB,GAAG,KAAK,CAAC,CAAC,CAAC,MAAM,SAAS,CAAA,CAAA,qCAAA,CAAuC,CAAC,iEAAC;AAEjG;;;;;AAKG;AACM,IAAA,cAAc,GAAG,KAAK,CAAC,mBAAmB,0DAAC;AAEpD;;;;;AAKG;AACM,IAAA,kBAAkB,GAAG,KAAK,CAAC,MAAM,8DAAC;AAE3C;;;;;AAKG;AACM,IAAA,oBAAoB,GAAG,KAAK,CAAC,MAAM,gEAAC;AAE7C;;;;;AAKG;AACM,IAAA,kBAAkB,GAAG,KAAK,CAAqB,SAAS,8DAAC;AAClE;;;;AAIG;AACM,IAAA,WAAW,GAAG,KAAK,CAAC,GAAG,uDAAC;AACjC;;;;AAIG;AACM,IAAA,aAAa,GAAG,KAAK,CAAC,GAAG,yDAAC;AACnC;;;AAGG;IACM,OAAO,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,SAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAU;AAElC;;;AAGG;IACO,mBAAmB,GAAG,KAAK;AAEpB,IAAA,wBAAwB,GAAG,QAAQ,CAAC,MAAK;AACxD,QAAA,MAAM,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,EAAE;QACpD,OAAO,kBAAkB,KAAK;AAC5B,cAAE,IAAI,CAAC,cAAc;AACnB,kBAAE;AACF,kBAAE;cACF,kBAAkB;AACxB,IAAA,CAAC,oEAAC;AAEQ,IAAA,UAAU,GAAqB;QACvC,IAAI,CAAC,wBAAwB,EAAE;AAC/B,QAAA,GAAG,GAAG,IAAI,CAAC,wBAAwB;KACpC;;AAES,IAAA,WAAW,GAAW,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;;AAExC,IAAA,aAAa,GAAW,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;AAEjC,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAK;AAC7C,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE;QAC9B,OAAO,OAAO,GAAG,CAAA,EAAG,OAAO,CAAA,KAAA,CAAO,GAAG,SAAS;AAChD,IAAA,CAAC,uDAAC;AAEiB,IAAA,aAAa,GAAG,QAAQ,CAAC,MAAK;AAC/C,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE;QAC9B,OAAO,OAAO,GAAG,CAAA,EAAG,OAAO,CAAA,OAAA,CAAS,GAAG,SAAS;AAClD,IAAA,CAAC,yDAAC;IAEsC,OAAO,GAAG,KAAK;IAEf,OAAO,GAAG,GAAG;AAErD,IAAA,WAAW,CAAC,OAAsB,EAAA;AAChC,QAAA,IAAI,OAAO,CAAC,aAAa,EAAE;YACzB,IAAI,CAAC,sBAAsB,EAAE;YAC7B,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,aAAa,CAAC,YAAY,CAAC;QACtD;QACA,IAAI,OAAO,CAAC,kBAAkB,IAAI,OAAO,CAAC,cAAc,EAAE;AACxD,YAAA,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,wBAAwB,EAAE,EAAE,GAAG,GAAG,IAAI,CAAC,wBAAwB,EAAE,CAAC;YAC1F,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;YACrC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;QACzC;IACF;IAEA,QAAQ,GAAA;AACN,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;aACpB,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,GAAG,EAAE,IAAI;AAChD,aAAA,SAAS,CAAC,UAAU,IAAI,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;IAC9D;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,UAAU,EAAE,WAAW,EAAE;IAChC;AAEU,IAAA,kBAAkB,CAAC,KAAe,EAAA;QAC1C,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACvC;IAEU,kBAAkB,GAAA;AAC1B,QAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC;AAC7B,QAAA,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;IACzB;AAEA;;AAEG;AACK,IAAA,UAAU,CAAC,IAAW,EAAA;QAC5B,OAAO,IAAI,CAAC,cAAc,EAAE;AAC1B,YAAA,IAAI,CAAC,kBAAkB,EAAE,KAAK,SAAS;YACvC,CAAC,IAAI,CAAC,YAAY;AAClB,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG;AACxB,cAAE;cACA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,GAAG;IACjC;AAEQ,IAAA,eAAe,CAAC,UAA6B,EAAA;QACnD,MAAM,eAAe,GAAG,UAAU,CAAC,KAAK,IAAI,IAAI,CAAC,qBAAqB,EAAE;AACxE,QAAA,IAAI,IAAI,CAAC,YAAY,KAAK,eAAe,EAAE;AACzC,YAAA,IAAI,CAAC,YAAY,GAAG,eAAe;YACnC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;YACrC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;YACvC,IAAI,CAAC,sBAAsB,EAAE;YAC7B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;AAC/C,YAAA,IAAI,CAAC,iBAAiB,CAAC,YAAY,EAAE;QACvC;AACA,QAAA,IAAI,IAAI,CAAC,OAAO,KAAK,GAAG,EAAE;AACxB,YAAA,IAAI,CAAC,OAAO,GAAG,EAAE;AACjB,YAAA,IAAI,CAAC,iBAAiB,CAAC,YAAY,EAAE;QACvC;IACF;AAEQ,IAAA,WAAW,CAAC,aAAsB,EAAA;AACxC,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI;QACnB,UAAU,CAAC,MAAK;AACd,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK;AACpB,YAAA,IAAI,CAAC,iBAAiB,CAAC,YAAY,EAAE;AACvC,QAAA,CAAC,EAAE,IAAI,CAAC,iBAAiB,CAAC;AAC1B,QAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,aAAa,CAAC;IACvC;IAEQ,sBAAsB,GAAA;AAC5B,QAAA,IAAI,CAAC,mBAAmB,GAAG,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;IACxE;uGAtPW,8BAA8B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAA9B,8BAA8B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,0BAAA,EAAA,MAAA,EAAA,EAAA,qBAAA,EAAA,EAAA,iBAAA,EAAA,uBAAA,EAAA,UAAA,EAAA,uBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,eAAA,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,qBAAA,EAAA,EAAA,iBAAA,EAAA,uBAAA,EAAA,UAAA,EAAA,uBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBAAA,EAAA,oBAAA,EAAA,UAAA,EAAA,oBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,oBAAA,EAAA,EAAA,iBAAA,EAAA,sBAAA,EAAA,UAAA,EAAA,sBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBAAA,EAAA,oBAAA,EAAA,UAAA,EAAA,oBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,aAAA,EAAA,qBAAA,EAAA,kBAAA,EAAA,0BAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,eAAA,EAAA,cAAA,EAAA,eAAA,EAAA,cAAA,EAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC/C3C,qjHA4GA,EAAA,MAAA,EAAA,CAAA,0iFAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDxEI,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAChB,gBAAgB,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,aAAA,EAAA,OAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAChB,oBAAoB,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,mBAAA,EAAA,mBAAA,EAAA,mBAAA,EAAA,gBAAA,EAAA,SAAA,EAAA,SAAA,EAAA,yBAAA,EAAA,OAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,eAAA,EAAA,SAAA,EAAA,MAAA,EAAA,gBAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,iBAAA,EAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAEpB,eAAe,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EADf,eAAe,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAQN,8BAA8B,EAAA,UAAA,EAAA,CAAA;kBAd1C,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,0BAA0B,EAAA,OAAA,EAC3B;wBACP,gBAAgB;wBAChB,gBAAgB;wBAChB,oBAAoB;wBACpB,eAAe;wBACf;qBACD,EAAA,eAAA,EAGgB,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC,EAAE,KAAK,EAAE,iBAAiB,EAAE,EAAA,QAAA,EAAA,qjHAAA,EAAA,MAAA,EAAA,CAAA,0iFAAA,CAAA,EAAA;;sBA8KjC,WAAW;uBAAC,eAAe;;sBAE3B,WAAW;uBAAC,eAAe;;;AE7N9B;;;AAGG;MASU,2BAA2B,CAAA;uGAA3B,2BAA2B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;wGAA3B,2BAA2B,EAAA,OAAA,EAAA,CAH5B,8BAA8B,CAAA,EAAA,OAAA,EAAA,CAC9B,8BAA8B,CAAA,EAAA,CAAA;AAE7B,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,2BAA2B,YAH5B,8BAA8B,CAAA,EAAA,CAAA;;2FAG7B,2BAA2B,EAAA,UAAA,EAAA,CAAA;kBAJvC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,8BAA8B,CAAC;oBACzC,OAAO,EAAE,CAAC,8BAA8B;AACzC,iBAAA;;;ACXD;;;AAGG;;ACHH;;AAEG;;;;"}

package/fesm2022/siemens-element-ng-markdown-renderer.mjs CHANGED Viewed

@@ -226,7 +226,7 @@ class SiMarkdownRendererComponent {
      * The markdown text to transform and display
      * @defaultValue ''
      */
-    text = input('');
+    text = input('', ...(ngDevMode ? [{ debugName: "text" }] : []));
     constructor() {
         effect(() => {
             const contentValue = this.text();
@@ -238,16 +238,16 @@ class SiMarkdownRendererComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiMarkdownRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: SiMarkdownRendererComponent, isStandalone: true, selector: "si-markdown-renderer", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: ``, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMarkdownRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: SiMarkdownRendererComponent, isStandalone: true, selector: "si-markdown-renderer", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: ``, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiMarkdownRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMarkdownRendererComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'si-markdown-renderer',
                     template: ``
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }] } });
 /**
  * Copyright (c) Siemens 2016 - 2025

package/fesm2022/siemens-element-ng-markdown-renderer.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"siemens-element-ng-markdown-renderer.mjs","sources":["../../../../projects/element-ng/markdown-renderer/markdown-renderer.ts","../../../../projects/element-ng/markdown-renderer/si-markdown-renderer.component.ts","../../../../projects/element-ng/markdown-renderer/index.ts","../../../../projects/element-ng/markdown-renderer/siemens-element-ng-markdown-renderer.ts"],"sourcesContent":["/*\n Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n /\nimport { SecurityContext } from '@angular/core';\nimport { DomSanitizer } from '@angular/platform-browser';\n\n/\n Returns a markdown renderer function which_\n * - Transforms markdown text into formatted HTML.\n * - Returns a DOM node containing the formatted content.\n \n Warning: The returned Node is inserted without additional sanitization.\n * Input content is sanitized before processing.\n \n @experimental\n * @param sanitizer - Angular DomSanitizer instance\n * @returns A function taking the markdown text to transform and returning a DOM div element containing the formatted HTML\n /\nexport const getMarkdownRenderer = (sanitizer: DomSanitizer): ((text: string) => Node) => {\n return (text: string): Node => {\n const div = document.createElement('div');\n div.className = 'markdown-content text-break';\n\n if (!text) {\n return div;\n }\n\n // Generate a random placeholder for newlines to preserve them during HTML sanitization\n const newlinePlaceholder = `--NEWLINE-${Math.random().toString(36).substring(2, 15)}--`;\n\n // Replace newlines with placeholder before sanitization\n const valueWithPlaceholders = text.replace(/\\n/g, newlinePlaceholder);\n\n // Sanitize the input using Angular's HTML sanitizer\n const sanitizedInput = sanitizer.sanitize(SecurityContext.HTML, valueWithPlaceholders) ?? '';\n\n // Restore newlines from placeholder for markdown processing.\n let html = sanitizedInput.replace(new RegExp(newlinePlaceholder, 'g'), '\\n');\n\n // Process tables first\n html = html\n // Remove table separator lines first\n .replace(/^\\\|\\s[-:]+.\\\|\\s$/gm, '')\n // Process table rows\n .replace(/^\\\|(.+)\\\|\\s$/gm, (_match, htmlContent) => {\n // Handle escaped pipes by temporarily replacing them\n const escapedPipePlaceholder = `--ESCAPED-PIPE-${Math.random().toString(36).substring(2, 15)}--`;\n const contentWithPlaceholders = htmlContent.replace(/\\\\\\\|/g, escapedPipePlaceholder);\n const cells = contentWithPlaceholders.split('\|').map((cell: string) => {\n const trimmedCell = cell.trim();\n // Restore escaped pipes\n const cellWithPipes = trimmedCell.replace(new RegExp(escapedPipePlaceholder, 'g'), '\|');\n\n return cellWithPipes;\n });\n // Make cell ready for markdown processing by replacing code blocks with inline code and <br> with newlines\n const cellsWithNewlines = cells.map((cell: string) => {\n // Replace multiline code blocks with single line code blocks\n const cellWithoutMultilineCode = cell.replace(\n /```([\\s\\S]?)```/g,\n (_innerMatch, inlineCodeContent) => {\n return '`' + inlineCodeContent.replace(/`/g, '') + '`';\n }\n );\n // Temporarily replace single line code blocks to avoid replacing <br> inside them\n const tableInlineCodeBrPlaceholder = `--INLINE-CODE-BR--${Math.random().toString(36).substring(2, 15)}--`;\n const cellWithPlaceholders = cellWithoutMultilineCode.replace(\n /(`[^`]`)/g,\n inlineCodeMatch => {\n return inlineCodeMatch.replace(/<br>/g, tableInlineCodeBrPlaceholder);\n }\n );\n // Replace <br> with newlines\n const cellWithNewlines = cellWithPlaceholders.replace(/<br\\s\\/?>/gi, '\\n');\n // Restore <br> in inline code placeholders\n const preProcessedCell = cellWithNewlines.replace(\n new RegExp(tableInlineCodeBrPlaceholder, 'g'),\n '<br>'\n );\n return preProcessedCell;\n });\n\n // Recursively process cell content for markdown formatting\n const processedCells = cellsWithNewlines.map((cell: string) => {\n return transformMarkdownText(cell, false, sanitizer);\n });\n\n return `<tr>${processedCells.map((cell: string) => `<td>${cell}</td>`).join('')}</tr>`;\n })\n // Wrap table rows in table elements\n .replace(/(<tr>.?<\\/tr>)/gs, '<table class=\"table table-hover\">$1</table>')\n // Remove duplicate table tags\n .replace(/<\\/table>\\s<table class=\"table table-hover\">/g, '');\n\n html = transformMarkdownText(html, true, sanitizer);\n\n div.innerHTML = html;\n return div;\n };\n};\n\nconst transformMarkdownText = (\n html: string,\n keepAdditionalNewlines = true,\n sanitizer: DomSanitizer\n): string => {\n // Generate a random placeholder for inner code blocks to prevent markdown processing inside them\n const innerCodeQuotePlaceholder = `--INNER-CODE-${Math.random().toString(36).substring(2, 15)}--`;\n const codeSectionPlaceholderMap = new Map<string, string>();\n\n const escapedAsteriskPlaceholder = `--ASTERISK-${Math.random().toString(36).substring(2, 15)}--`;\n const escapedUnderscorePlaceholder = `--UNDERSCORE-${Math.random().toString(36).substring(2, 15)}--`;\n\n // Apply markdown transformations to the sanitized content\n html = html\n // Multiline code blocks ```code``` with placeholder\n .replace(/```[^\\n]\\n?([\\s\\S]?)\\n?```/g, (match, content) => {\n // Escape HTML special characters in code blocks (not for security, but for correct display) and preserve inner backticks\n const code = `<pre><code>${content.replace(/</g, '<').replace(/>/g, '>').replace(/`/g, innerCodeQuotePlaceholder)}</code></pre>`;\n const codePlaceholder = `--CODE-BLOCK-${Math.random().toString(36).substring(2, 15)}--`;\n codeSectionPlaceholderMap.set(codePlaceholder, code);\n return codePlaceholder;\n })\n\n // Inline code `text`\n .replace(/`(.?)`/g, (match, content) => {\n // Escape HTML special characters in inline code (not for security, but for correct display)\n const code = `<code>${content.replace(/</g, '<').replace(/>/g, '>')}</code>`;\n const codePlaceholder = `--INLINE-CODE-${Math.random().toString(36).substring(2, 15)}--`;\n codeSectionPlaceholderMap.set(codePlaceholder, code);\n return codePlaceholder;\n })\n\n // Images ![alt](url)\n .replace(/!\\[([^\\]])\\]\$([^)]+)\$/g, (_match, alt, url) => {\n const sanitizedUrl = sanitizeUrl(url, sanitizer);\n const escapedAlt = alt\n .replace(/&/g, '&')\n .replace(/\"/g, '"')\n .replace(/</g, '<')\n .replace(/>/g, '>');\n return `<img src=\"${sanitizedUrl}\" alt=\"${escapedAlt}\">`;\n })\n\n // Links [text](url)\n .replace(/\\[([^\\]]+)\\]\$([^)]+)\$/g, (_match, text, url) => {\n const sanitizedUrl = sanitizeUrl(url, sanitizer);\n return `<a href=\"${sanitizedUrl}\" target=\"_blank\" rel=\"noopener noreferrer\">${text}</a>`;\n })\n\n // Auto-detect URLs and convert to links\n .replace(/(?<![\"'=(])\\b(https?:\\/\\/[^\\s<]+[^\\s<.,;!?\"')\\]])/g, match => {\n const sanitizedUrl = sanitizeUrl(match, sanitizer);\n return `<a href=\"${sanitizedUrl}\" target=\"_blank\" rel=\"noopener noreferrer\">${match}</a>`;\n })\n\n .replace(/(?<!\\\\)\\\\\\/g, escapedAsteriskPlaceholder)\n .replace(/(?<!\\\\)\\\\_/g, escapedUnderscorePlaceholder)\n\n // Bold text* or __text__\n .replace(/\\\\(.?)\\\\/g, '<strong>$1</strong>')\n .replace(/__(.?)__/g, '<strong>$1</strong>')\n\n // Italic text or _text_\n .replace(/\\(.?)\\/g, '<em>$1</em>')\n .replace(/_(.?)_/g, '<em>$1</em>')\n\n .replace(new RegExp(escapedAsteriskPlaceholder, 'g'), '')\n .replace(new RegExp(escapedUnderscorePlaceholder, 'g'), '_')\n\n // Headings #, ##, ###, etc.\n .replace(/^###### (.$)/gm, '<strong>$1</strong>')\n .replace(/^##### (.$)/gm, '<h5>$1</h5>')\n .replace(/^#### (.$)/gm, '<h4>$1</h4>')\n .replace(/^### (.$)/gm, '<h3>$1</h3>')\n .replace(/^## (.$)/gm, '<h2>$1</h2>')\n .replace(/^# (.$)/gm, '<h2><strong>$1</strong></h2>');\n\n html = html\n // Bullet points - handle each type separately (• gets converted to • by sanitizer)\n .replace(/^• (.$)/gm, '<li class=\"unordered\">$1</li>')\n .replace(/^- (.$)/gm, '<li class=\"unordered\">$1</li>')\n .replace(/^\\ (.$)/gm, '<li class=\"unordered\">$1</li>')\n\n // Ordered list items (1., 2., 3., etc.)\n .replace(/^\\d+\\. (.$)/gm, '<li class=\"ordered\">$1</li>');\n\n html = html.replace(/^\\s(?:>\|>)\\s(.)$/gm, '<blockquote>$1</blockquote>');\n\n // Generate a random placeholder for newlines to differentiate them from those used for paragraphs\n const finalNewlinePlaceholder = `--NEWLINE-${Math.random().toString(36).substring(2, 15)}--`;\n\n html = html\n // Wrap ordered lists\n .replace(/(<li class=\"ordered\">.?<\\/li>)/gs, '<ol>$1</ol>')\n\n // Wrap unordered lists\n .replace(/(<li class=\"unordered\">.?<\\/li>)/gs, '<ul>$1</ul>')\n\n // Remove duplicate ol/ul tags\n .replace(/<\\/ol>\\s<ol>/g, '')\n .replace(/<\\/ul>\\s<ul>/g, '')\n\n // Clean up class attributes\n .replace(/ class=\"ordered\"/g, '')\n .replace(/ class=\"unordered\"/g, '');\n\n html = html\n // Convert double newlines to paragraphs (before single line breaks)\n .split(/\\n{2}/g)\n // Wrap non-block elements in <p> tags\n .map(segment => {\n // If the segment starts with a block element, return as is\n if (!segment.trim() \|\| /^\\s<(h[1-6]\|pre\|blockquote\|ul\|ol)/.test(segment.trim())) {\n // Replace newlines inside blocks with the placeholder\n return segment.replace(/\\n/g, finalNewlinePlaceholder);\n }\n // Otherwise, wrap in <p> tags\n return `<p>${segment}</p>`;\n })\n // Use newline placeholder again so as not to replace newlines between blocks\n .join(finalNewlinePlaceholder)\n // Convert remaining newlines to line breaks (do this LAST)\n .replace(/\\n/g, '<br>')\n // Restore newline placeholders\n .replace(new RegExp(finalNewlinePlaceholder, 'g'), keepAdditionalNewlines ? '\\n' : ' ');\n\n // Restore code placeholders\n codeSectionPlaceholderMap.forEach((code, placeholder) => {\n html = html.replace(new RegExp(placeholder, 'g'), code);\n });\n\n // Restore inner code block placeholders\n html = html.replace(new RegExp(innerCodeQuotePlaceholder, 'g'), '`');\n\n return html;\n};\n\n/*\n Sanitizes a URL to prevent XSS attacks\n * @param url - The URL to sanitize\n * @param sanitizer - Angular DomSanitizer instance\n * @returns The sanitized URL or '#' if invalid\n /\nconst sanitizeUrl = (url: string, sanitizer: DomSanitizer): string => {\n // Remove any whitespace\n url = url.trim();\n\n // Allow only http, https, and mailto protocols\n const allowed = /^(https?:\\/\\/\|mailto:\|\\/(?!\\/)\|\\.{1,2}\\/\|#)/i;\n\n // Sanitize the URL using Angular's sanitizer\n if (!allowed.test(url)) {\n return '#';\n }\n\n // Sanitize the URL using Angular's sanitizer\n const sanitized = sanitizer.sanitize(SecurityContext.URL, url);\n\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing\n return sanitized \|\| '#';\n};\n","/\n Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n /\nimport { Component, effect, inject, input, ElementRef } from '@angular/core';\nimport { DomSanitizer } from '@angular/platform-browser';\n\nimport { getMarkdownRenderer } from './markdown-renderer';\n\n/\n Component to display markdown text, uses the {@link getMarkdownRenderer} function internally, relies on `markdown-content` theme class.\n * @experimental\n /\n@Component({\n selector: 'si-markdown-renderer',\n template: ``\n})\nexport class SiMarkdownRendererComponent {\n private sanitizer = inject(DomSanitizer);\n private hostElement = inject(ElementRef<HTMLElement>);\n private markdownRenderer = getMarkdownRenderer(this.sanitizer);\n\n /\n The markdown text to transform and display\n * @defaultValue ''\n /\n readonly text = input<string>('');\n\n constructor() {\n effect(() => {\n const contentValue = this.text();\n const containerEl = this.hostElement.nativeElement;\n\n if (containerEl) {\n const formattedNode = this.markdownRenderer(contentValue);\n containerEl.innerHTML = '';\n containerEl.appendChild(formattedNode);\n }\n });\n }\n}\n","/\n Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n /\nexport from './si-markdown-renderer.component';\nexport * from './markdown-renderer';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"siemens-element-ng-markdown-renderer.mjs","sources":["../../../../projects/element-ng/markdown-renderer/markdown-renderer.ts","../../../../projects/element-ng/markdown-renderer/si-markdown-renderer.component.ts","../../../../projects/element-ng/markdown-renderer/index.ts","../../../../projects/element-ng/markdown-renderer/siemens-element-ng-markdown-renderer.ts"],"sourcesContent":["/*\n Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n /\nimport { SecurityContext } from '@angular/core';\nimport { DomSanitizer } from '@angular/platform-browser';\n\n/\n Returns a markdown renderer function which_\n * - Transforms markdown text into formatted HTML.\n * - Returns a DOM node containing the formatted content.\n \n Warning: The returned Node is inserted without additional sanitization.\n * Input content is sanitized before processing.\n \n @experimental\n * @param sanitizer - Angular DomSanitizer instance\n * @returns A function taking the markdown text to transform and returning a DOM div element containing the formatted HTML\n /\nexport const getMarkdownRenderer = (sanitizer: DomSanitizer): ((text: string) => Node) => {\n return (text: string): Node => {\n const div = document.createElement('div');\n div.className = 'markdown-content text-break';\n\n if (!text) {\n return div;\n }\n\n // Generate a random placeholder for newlines to preserve them during HTML sanitization\n const newlinePlaceholder = `--NEWLINE-${Math.random().toString(36).substring(2, 15)}--`;\n\n // Replace newlines with placeholder before sanitization\n const valueWithPlaceholders = text.replace(/\\n/g, newlinePlaceholder);\n\n // Sanitize the input using Angular's HTML sanitizer\n const sanitizedInput = sanitizer.sanitize(SecurityContext.HTML, valueWithPlaceholders) ?? '';\n\n // Restore newlines from placeholder for markdown processing.\n let html = sanitizedInput.replace(new RegExp(newlinePlaceholder, 'g'), '\\n');\n\n // Process tables first\n html = html\n // Remove table separator lines first\n .replace(/^\\\|\\s[-:]+.\\\|\\s$/gm, '')\n // Process table rows\n .replace(/^\\\|(.+)\\\|\\s$/gm, (_match, htmlContent) => {\n // Handle escaped pipes by temporarily replacing them\n const escapedPipePlaceholder = `--ESCAPED-PIPE-${Math.random().toString(36).substring(2, 15)}--`;\n const contentWithPlaceholders = htmlContent.replace(/\\\\\\\|/g, escapedPipePlaceholder);\n const cells = contentWithPlaceholders.split('\|').map((cell: string) => {\n const trimmedCell = cell.trim();\n // Restore escaped pipes\n const cellWithPipes = trimmedCell.replace(new RegExp(escapedPipePlaceholder, 'g'), '\|');\n\n return cellWithPipes;\n });\n // Make cell ready for markdown processing by replacing code blocks with inline code and <br> with newlines\n const cellsWithNewlines = cells.map((cell: string) => {\n // Replace multiline code blocks with single line code blocks\n const cellWithoutMultilineCode = cell.replace(\n /```([\\s\\S]?)```/g,\n (_innerMatch, inlineCodeContent) => {\n return '`' + inlineCodeContent.replace(/`/g, '') + '`';\n }\n );\n // Temporarily replace single line code blocks to avoid replacing <br> inside them\n const tableInlineCodeBrPlaceholder = `--INLINE-CODE-BR--${Math.random().toString(36).substring(2, 15)}--`;\n const cellWithPlaceholders = cellWithoutMultilineCode.replace(\n /(`[^`]`)/g,\n inlineCodeMatch => {\n return inlineCodeMatch.replace(/<br>/g, tableInlineCodeBrPlaceholder);\n }\n );\n // Replace <br> with newlines\n const cellWithNewlines = cellWithPlaceholders.replace(/<br\\s\\/?>/gi, '\\n');\n // Restore <br> in inline code placeholders\n const preProcessedCell = cellWithNewlines.replace(\n new RegExp(tableInlineCodeBrPlaceholder, 'g'),\n '<br>'\n );\n return preProcessedCell;\n });\n\n // Recursively process cell content for markdown formatting\n const processedCells = cellsWithNewlines.map((cell: string) => {\n return transformMarkdownText(cell, false, sanitizer);\n });\n\n return `<tr>${processedCells.map((cell: string) => `<td>${cell}</td>`).join('')}</tr>`;\n })\n // Wrap table rows in table elements\n .replace(/(<tr>.?<\\/tr>)/gs, '<table class=\"table table-hover\">$1</table>')\n // Remove duplicate table tags\n .replace(/<\\/table>\\s<table class=\"table table-hover\">/g, '');\n\n html = transformMarkdownText(html, true, sanitizer);\n\n div.innerHTML = html;\n return div;\n };\n};\n\nconst transformMarkdownText = (\n html: string,\n keepAdditionalNewlines = true,\n sanitizer: DomSanitizer\n): string => {\n // Generate a random placeholder for inner code blocks to prevent markdown processing inside them\n const innerCodeQuotePlaceholder = `--INNER-CODE-${Math.random().toString(36).substring(2, 15)}--`;\n const codeSectionPlaceholderMap = new Map<string, string>();\n\n const escapedAsteriskPlaceholder = `--ASTERISK-${Math.random().toString(36).substring(2, 15)}--`;\n const escapedUnderscorePlaceholder = `--UNDERSCORE-${Math.random().toString(36).substring(2, 15)}--`;\n\n // Apply markdown transformations to the sanitized content\n html = html\n // Multiline code blocks ```code``` with placeholder\n .replace(/```[^\\n]\\n?([\\s\\S]?)\\n?```/g, (match, content) => {\n // Escape HTML special characters in code blocks (not for security, but for correct display) and preserve inner backticks\n const code = `<pre><code>${content.replace(/</g, '<').replace(/>/g, '>').replace(/`/g, innerCodeQuotePlaceholder)}</code></pre>`;\n const codePlaceholder = `--CODE-BLOCK-${Math.random().toString(36).substring(2, 15)}--`;\n codeSectionPlaceholderMap.set(codePlaceholder, code);\n return codePlaceholder;\n })\n\n // Inline code `text`\n .replace(/`(.?)`/g, (match, content) => {\n // Escape HTML special characters in inline code (not for security, but for correct display)\n const code = `<code>${content.replace(/</g, '<').replace(/>/g, '>')}</code>`;\n const codePlaceholder = `--INLINE-CODE-${Math.random().toString(36).substring(2, 15)}--`;\n codeSectionPlaceholderMap.set(codePlaceholder, code);\n return codePlaceholder;\n })\n\n // Images ![alt](url)\n .replace(/!\\[([^\\]])\\]\$([^)]+)\$/g, (_match, alt, url) => {\n const sanitizedUrl = sanitizeUrl(url, sanitizer);\n const escapedAlt = alt\n .replace(/&/g, '&')\n .replace(/\"/g, '"')\n .replace(/</g, '<')\n .replace(/>/g, '>');\n return `<img src=\"${sanitizedUrl}\" alt=\"${escapedAlt}\">`;\n })\n\n // Links [text](url)\n .replace(/\\[([^\\]]+)\\]\$([^)]+)\$/g, (_match, text, url) => {\n const sanitizedUrl = sanitizeUrl(url, sanitizer);\n return `<a href=\"${sanitizedUrl}\" target=\"_blank\" rel=\"noopener noreferrer\">${text}</a>`;\n })\n\n // Auto-detect URLs and convert to links\n .replace(/(?<![\"'=(])\\b(https?:\\/\\/[^\\s<]+[^\\s<.,;!?\"')\\]])/g, match => {\n const sanitizedUrl = sanitizeUrl(match, sanitizer);\n return `<a href=\"${sanitizedUrl}\" target=\"_blank\" rel=\"noopener noreferrer\">${match}</a>`;\n })\n\n .replace(/(?<!\\\\)\\\\\\/g, escapedAsteriskPlaceholder)\n .replace(/(?<!\\\\)\\\\_/g, escapedUnderscorePlaceholder)\n\n // Bold text* or __text__\n .replace(/\\\\(.?)\\\\/g, '<strong>$1</strong>')\n .replace(/__(.?)__/g, '<strong>$1</strong>')\n\n // Italic text or _text_\n .replace(/\\(.?)\\/g, '<em>$1</em>')\n .replace(/_(.?)_/g, '<em>$1</em>')\n\n .replace(new RegExp(escapedAsteriskPlaceholder, 'g'), '')\n .replace(new RegExp(escapedUnderscorePlaceholder, 'g'), '_')\n\n // Headings #, ##, ###, etc.\n .replace(/^###### (.$)/gm, '<strong>$1</strong>')\n .replace(/^##### (.$)/gm, '<h5>$1</h5>')\n .replace(/^#### (.$)/gm, '<h4>$1</h4>')\n .replace(/^### (.$)/gm, '<h3>$1</h3>')\n .replace(/^## (.$)/gm, '<h2>$1</h2>')\n .replace(/^# (.$)/gm, '<h2><strong>$1</strong></h2>');\n\n html = html\n // Bullet points - handle each type separately (• gets converted to • by sanitizer)\n .replace(/^• (.$)/gm, '<li class=\"unordered\">$1</li>')\n .replace(/^- (.$)/gm, '<li class=\"unordered\">$1</li>')\n .replace(/^\\ (.$)/gm, '<li class=\"unordered\">$1</li>')\n\n // Ordered list items (1., 2., 3., etc.)\n .replace(/^\\d+\\. (.$)/gm, '<li class=\"ordered\">$1</li>');\n\n html = html.replace(/^\\s(?:>\|>)\\s(.)$/gm, '<blockquote>$1</blockquote>');\n\n // Generate a random placeholder for newlines to differentiate them from those used for paragraphs\n const finalNewlinePlaceholder = `--NEWLINE-${Math.random().toString(36).substring(2, 15)}--`;\n\n html = html\n // Wrap ordered lists\n .replace(/(<li class=\"ordered\">.?<\\/li>)/gs, '<ol>$1</ol>')\n\n // Wrap unordered lists\n .replace(/(<li class=\"unordered\">.?<\\/li>)/gs, '<ul>$1</ul>')\n\n // Remove duplicate ol/ul tags\n .replace(/<\\/ol>\\s<ol>/g, '')\n .replace(/<\\/ul>\\s<ul>/g, '')\n\n // Clean up class attributes\n .replace(/ class=\"ordered\"/g, '')\n .replace(/ class=\"unordered\"/g, '');\n\n html = html\n // Convert double newlines to paragraphs (before single line breaks)\n .split(/\\n{2}/g)\n // Wrap non-block elements in <p> tags\n .map(segment => {\n // If the segment starts with a block element, return as is\n if (!segment.trim() \|\| /^\\s<(h[1-6]\|pre\|blockquote\|ul\|ol)/.test(segment.trim())) {\n // Replace newlines inside blocks with the placeholder\n return segment.replace(/\\n/g, finalNewlinePlaceholder);\n }\n // Otherwise, wrap in <p> tags\n return `<p>${segment}</p>`;\n })\n // Use newline placeholder again so as not to replace newlines between blocks\n .join(finalNewlinePlaceholder)\n // Convert remaining newlines to line breaks (do this LAST)\n .replace(/\\n/g, '<br>')\n // Restore newline placeholders\n .replace(new RegExp(finalNewlinePlaceholder, 'g'), keepAdditionalNewlines ? '\\n' : ' ');\n\n // Restore code placeholders\n codeSectionPlaceholderMap.forEach((code, placeholder) => {\n html = html.replace(new RegExp(placeholder, 'g'), code);\n });\n\n // Restore inner code block placeholders\n html = html.replace(new RegExp(innerCodeQuotePlaceholder, 'g'), '`');\n\n return html;\n};\n\n/*\n Sanitizes a URL to prevent XSS attacks\n * @param url - The URL to sanitize\n * @param sanitizer - Angular DomSanitizer instance\n * @returns The sanitized URL or '#' if invalid\n /\nconst sanitizeUrl = (url: string, sanitizer: DomSanitizer): string => {\n // Remove any whitespace\n url = url.trim();\n\n // Allow only http, https, and mailto protocols\n const allowed = /^(https?:\\/\\/\|mailto:\|\\/(?!\\/)\|\\.{1,2}\\/\|#)/i;\n\n // Sanitize the URL using Angular's sanitizer\n if (!allowed.test(url)) {\n return '#';\n }\n\n // Sanitize the URL using Angular's sanitizer\n const sanitized = sanitizer.sanitize(SecurityContext.URL, url);\n\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing\n return sanitized \|\| '#';\n};\n","/\n Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n /\nimport { Component, effect, inject, input, ElementRef } from '@angular/core';\nimport { DomSanitizer } from '@angular/platform-browser';\n\nimport { getMarkdownRenderer } from './markdown-renderer';\n\n/\n Component to display markdown text, uses the {@link getMarkdownRenderer} function internally, relies on `markdown-content` theme class.\n * @experimental\n /\n@Component({\n selector: 'si-markdown-renderer',\n template: ``\n})\nexport class SiMarkdownRendererComponent {\n private sanitizer = inject(DomSanitizer);\n private hostElement = inject(ElementRef<HTMLElement>);\n private markdownRenderer = getMarkdownRenderer(this.sanitizer);\n\n /\n The markdown text to transform and display\n * @defaultValue ''\n /\n readonly text = input<string>('');\n\n constructor() {\n effect(() => {\n const contentValue = this.text();\n const containerEl = this.hostElement.nativeElement;\n\n if (containerEl) {\n const formattedNode = this.markdownRenderer(contentValue);\n containerEl.innerHTML = '';\n containerEl.appendChild(formattedNode);\n }\n });\n }\n}\n","/\n Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n /\nexport from './si-markdown-renderer.component';\nexport * from './markdown-renderer';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}