@siemens/element-ng 49.16.0 → 51.0.0-rc.10

package/fesm2022/siemens-element-ng-side-panel.mjs

@@ -10,7 +10,7 @@ import { t, SiTranslatePipe } from '@siemens/element-translate-ng/translate';
 import { debounceTime } from 'rxjs/operators';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { ActivatedRoute, RouterLink } from '@angular/router';
-import { elementZoom, elementPinch, elementExport, elementDoubleRight, elementDoubleLeft, elementCancel } from '@siemens/element-icons';
+import { elementZoom, elementPinch, elementExport, elementDoubleRight, elementDoubleLeft, elementCancel, elementLeft4 } from '@siemens/element-icons';
 import { SiAccordionHCollapseService } from '@siemens/element-ng/accordion';
 import { SiContentActionBarComponent } from '@siemens/element-ng/content-action-bar';
 import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
@@ -34,9 +34,11 @@ class SiSidePanelService {
     tempContent$ = this.tempContentSubject.asObservable();
     tempContentClosed;
     /** @internal */
-    enableMobile = signal(false, ...(ngDevMode ? [{ debugName: "enableMobile" }] : []));
+    enableMobile = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enableMobile" }] : /* istanbul ignore next */ []));
     /** @internal */
-    collapsible = signal(false, ...(ngDevMode ? [{ debugName: "collapsible" }] : []));
+    collapsible = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
     fullscreenSubject = new BehaviorSubject(false);
     /**
      * Emits when fullscreen overlay mode is toggled.
@@ -140,10 +142,10 @@ class SiSidePanelService {
             this.originalBodyOverflow = undefined;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSidePanelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSidePanelService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSidePanelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSidePanelService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSidePanelService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSidePanelService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -162,24 +164,27 @@ class SiSidePanelComponent {
     /**
      * @defaultValue false
      */
-    collapsible = input(false, { ...(ngDevMode ? { debugName: "collapsible" } : {}), transform: booleanAttribute });
+    collapsible = input(false, { ...(ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Default state of navigation
      */
-    collapsed = model(...(ngDevMode ? [undefined, { debugName: "collapsed" }] : []));
+    collapsed = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "collapsed" }] : /* istanbul ignore next */ []));
     /**
      * Mode of side panel
      * (ignored below a certain width)
      *
      * @defaultValue 'over'
      */
-    mode = input('over', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    mode = input('over', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
     /**
      * Size of side-panel
      *
      * @defaultValue 'regular'
      */
-    size = input('regular', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    size = input('regular', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     /**
      * Toggle icon aria-label, required for a11y
      *
@@ -188,7 +193,8 @@ class SiSidePanelComponent {
      * t(() => $localize`:@@SI_SIDE_PANEL.TOGGLE:Toggle`)
      * ```
      */
-    toggleItemLabel = input(t(() => $localize `:@@SI_SIDE_PANEL.TOGGLE:Toggle`), ...(ngDevMode ? [{ debugName: "toggleItemLabel" }] : []));
+    toggleItemLabel = input(t(() => $localize `:@@SI_SIDE_PANEL.TOGGLE:Toggle`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toggleItemLabel" }] : /* istanbul ignore next */ []));
     /**
      * Specifies custom breakpoints to automatically switch mode.
      * The `smMinimum` specifies the breakpoint for the mobile view.
@@ -197,20 +203,21 @@ class SiSidePanelComponent {
      * The `xlMinimum` specifies the breakpoint to allow scroll mode
      * with wide size (below automatically uses over mode).
      */
-    breakpoints = input(...(ngDevMode ? [undefined, { debugName: "breakpoints" }] : []));
+    breakpoints = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "breakpoints" }] : /* istanbul ignore next */ []));
     /**
      * Enable mobile drawer for small screen sizes. Should not be used in conjunction with the vertical navbar.
      *
      * @defaultValue false
      */
-    enableMobile = input(false, { ...(ngDevMode ? { debugName: "enableMobile" } : {}), transform: booleanAttribute });
+    enableMobile = input(false, { ...(ngDevMode ? { debugName: "enableMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Whether to disable backdrop when side panel is open in over mode.
      * When false (default), the backdrop prevents interaction with background content while preserving visual context.
      *
      * @defaultValue false
      */
-    disableBackdrop = input(false, { ...(ngDevMode ? { debugName: "disableBackdrop" } : {}), transform: booleanAttribute });
+    disableBackdrop = input(false, { ...(ngDevMode ? { debugName: "disableBackdrop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Emits when the panel is closed
      */
@@ -219,7 +226,8 @@ class SiSidePanelComponent {
      * Emits whenever the content is resized due to opening and closing or parent resize.
      */
     contentResize = output();
-    isScrollMode = computed(() => this.mode() === 'scroll', ...(ngDevMode ? [{ debugName: "isScrollMode" }] : []));
+    isScrollMode = computed(() => this.mode() === 'scroll', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isScrollMode" }] : /* istanbul ignore next */ []));
     isOverMode = computed(() => {
         if (this.mode() === 'over') {
             return true;
@@ -233,28 +241,40 @@ class SiSidePanelComponent {
             }
         }
         return false;
-    }, ...(ngDevMode ? [{ debugName: "isOverMode" }] : []));
-    showBackdrop = computed(() => !this.disableBackdrop() && this.isOverMode() && !this.isCollapsed(), ...(ngDevMode ? [{ debugName: "showBackdrop" }] : []));
-    isXs = signal(false, ...(ngDevMode ? [{ debugName: "isXs" }] : []));
-    isSm = signal(false, ...(ngDevMode ? [{ debugName: "isSm" }] : []));
-    isMd = signal(true, ...(ngDevMode ? [{ debugName: "isMd" }] : []));
-    isLg = signal(false, ...(ngDevMode ? [{ debugName: "isLg" }] : []));
-    isXl = signal(false, ...(ngDevMode ? [{ debugName: "isXl" }] : []));
-    isXxl = signal(false, ...(ngDevMode ? [{ debugName: "isXxl" }] : []));
-    isXxxl = signal(false, ...(ngDevMode ? [{ debugName: "isXxxl" }] : []));
-    isCollapsed = signal(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : []));
-    ready = signal(false, ...(ngDevMode ? [{ debugName: "ready" }] : []));
-    isHidden = signal(false, ...(ngDevMode ? [{ debugName: "isHidden" }] : []));
-    isFullscreenOverlay = signal(false, ...(ngDevMode ? [{ debugName: "isFullscreenOverlay" }] : []));
-    showTempContent = signal(false, ...(ngDevMode ? [{ debugName: "showTempContent" }] : []));
-    panelElement = viewChild.required('sidePanel');
-    contentElement = viewChild.required('content');
-    portalOutlet = viewChild.required('portalOutlet', {
-        read: CdkPortalOutlet
-    });
-    tmpPortalOutlet = viewChild.required('tmpPortalOutlet', {
-        read: CdkPortalOutlet
-    });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOverMode" }] : /* istanbul ignore next */ []));
+    showBackdrop = computed(() => !this.disableBackdrop() && this.isOverMode() && !this.isCollapsed(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showBackdrop" }] : /* istanbul ignore next */ []));
+    isXs = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isXs" }] : /* istanbul ignore next */ []));
+    isSm = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isSm" }] : /* istanbul ignore next */ []));
+    isMd = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMd" }] : /* istanbul ignore next */ []));
+    isLg = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLg" }] : /* istanbul ignore next */ []));
+    isXl = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isXl" }] : /* istanbul ignore next */ []));
+    isXxl = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isXxl" }] : /* istanbul ignore next */ []));
+    isXxxl = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isXxxl" }] : /* istanbul ignore next */ []));
+    isCollapsed = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
+    ready = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ready" }] : /* istanbul ignore next */ []));
+    isHidden = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isHidden" }] : /* istanbul ignore next */ []));
+    isFullscreenOverlay = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFullscreenOverlay" }] : /* istanbul ignore next */ []));
+    showTempContent = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showTempContent" }] : /* istanbul ignore next */ []));
+    panelElement = viewChild.required('sidePanel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelElement" }] : /* istanbul ignore next */ []));
+    contentElement = viewChild.required('content', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentElement" }] : /* istanbul ignore next */ []));
+    portalOutlet = viewChild.required('portalOutlet', { ...(ngDevMode ? { debugName: "portalOutlet" } : /* istanbul ignore next */ {}), read: CdkPortalOutlet });
+    tmpPortalOutlet = viewChild.required('tmpPortalOutlet', { ...(ngDevMode ? { debugName: "tmpPortalOutlet" } : /* istanbul ignore next */ {}), read: CdkPortalOutlet });
     /**
      * The $rpanel-transition-duration in the style is 0.5 seconds.
      * Sending the resize event after resize need to wait until resize is done.
@@ -445,12 +465,12 @@ class SiSidePanelComponent {
             queueMicrotask(() => this.panelElement().nativeElement.blur());
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiSidePanelComponent, isStandalone: true, selector: "si-side-panel", inputs: { collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, toggleItemLabel: { classPropertyName: "toggleItemLabel", publicName: "toggleItemLabel", isSignal: true, isRequired: false, transformFunction: null }, breakpoints: { classPropertyName: "breakpoints", publicName: "breakpoints", isSignal: true, isRequired: false, transformFunction: null }, enableMobile: { classPropertyName: "enableMobile", publicName: "enableMobile", isSignal: true, isRequired: false, transformFunction: null }, disableBackdrop: { classPropertyName: "disableBackdrop", publicName: "disableBackdrop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", closed: "closed", contentResize: "contentResize" }, host: { properties: { "class.enable-mobile": "enableMobile()", "class.rpanel-size--regular": "this.size() === \"regular\"", "class.rpanel-size--wide": "this.size() === \"wide\"", "class.rpanel-size--extended": "this.size() === \"extended\"", "class.rpanel-mode--over": "isOverMode()", "class.rpanel-mode--scroll": "isScrollMode()", "class.rpanel-collapsed": "isCollapsed()", "class.ready": "ready()", "class.collapsible": "collapsible() && !this.showTempContent()", "class.collapsible-temp": "collapsible() && this.showTempContent()", "class.rpanel-hidden": "isHidden()", "class.rpanel-fullscreen-overlay": "isFullscreenOverlay()", "class.rpanel-resize-xs": "isXs()", "class.rpanel-resize-sm": "isSm()", "class.rpanel-resize-md": "isMd()", "class.rpanel-resize-lg": "isLg()", "class.rpanel-resize-xl": "isXl()", "class.rpanel-resize-xxl": "isXxl()", "class.rpanel-resize-xxxl": "isXxxl()" }, classAttribute: "si-layout-inner" }, viewQueries: [{ propertyName: "panelElement", first: true, predicate: ["sidePanel"], descendants: true, isSignal: true }, { propertyName: "contentElement", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "portalOutlet", first: true, predicate: ["portalOutlet"], descendants: true, read: CdkPortalOutlet, isSignal: true }, { propertyName: "tmpPortalOutlet", first: true, predicate: ["tmpPortalOutlet"], descendants: true, read: CdkPortalOutlet, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@if (showBackdrop()) {\n  <div class=\"modal-backdrop\" animate.leave=\"backdrop-leave\" (click)=\"toggleSidePanel()\"></div>\n}\n<div #sidePanel class=\"side-panel focus-none\" tabindex=\"-1\">\n  <div class=\"inner\" [class.d-none]=\"showTempContent()\">\n    <ng-content select=\"si-side-panel-content, element-side-panel-content\" />\n    <ng-container #portalOutlet cdkPortalOutlet />\n  </div>\n  <div class=\"inner\" [class.d-none]=\"!showTempContent()\">\n    <ng-container #tmpPortalOutlet cdkPortalOutlet />\n  </div>\n</div>\n<div #content class=\"main-content si-layout-inner\">\n  <ng-content />\n</div>\n", styles: [":host{--rpanel-collapsed-padding: 0;--rpanel-size: 390px;display:block;padding-inline-end:var(--rpanel-size)}:host.ready{transition:padding-inline-end calc(.5s * var(--element-animations-enabled, 1))}:host.ready .side-panel,:host.ready .side-panel>.inner{transition:inline-size calc(.5s * var(--element-animations-enabled, 1)),box-shadow calc(.5s * var(--element-animations-enabled, 1))}:host .modal-backdrop{opacity:1;transition:opacity .15s linear;z-index:1029}@starting-style{:host .modal-backdrop{opacity:0}}:host .modal-backdrop.backdrop-leave{opacity:0;transition:opacity .15s linear}:host .side-panel,:host .side-panel>.inner{inline-size:var(--rpanel-width-fullscreen, var(--rpanel-size))}:host.collapsible,:host.collapsible-temp{--rpanel-collapsed-width: calc(1.5rem + 24px) }:host.rpanel-size--wide{--rpanel-size: 500px}:host.rpanel-size--extended{--rpanel-size: 100vi}:host.rpanel-fullscreen-overlay{--rpanel-width-fullscreen: 100vi}:host.rpanel-mode--over{padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-mode--over:not(.rpanel-collapsed) .side-panel{box-shadow:0 0 8px var(--element-box-shadow-color-1),0 8px 8px var(--element-box-shadow-color-2)}:host.rpanel-resize-md.rpanel-size--extended{--rpanel-size: 480px}:host.rpanel-resize-lg.rpanel-size--extended{--rpanel-size: 480px}:host.rpanel-resize-xl.rpanel-size--extended{--rpanel-size: 640px}:host.rpanel-resize-xxl.rpanel-size--extended{--rpanel-size: 720px}:host.rpanel-resize-xxxl.rpanel-size--extended{--rpanel-size: 912px}:host.rpanel-resize-sm.rpanel-size--extended{--fullscreen-button-display: none}:host.rpanel-resize-xs{--fullscreen-button-display: none;padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-resize-xs .side-panel{z-index:1031}:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel{box-shadow:0 0 8px var(--element-box-shadow-color-1),0 8px 8px var(--element-box-shadow-color-2)}:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel,:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel>.inner{inline-size:100vi}:host.rpanel-hidden:not(.collapsible) .side-panel{display:none}:host.rpanel-collapsed{padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-collapsed:not(.collapsible) .side-panel{inline-size:0;overflow:hidden}:host.rpanel-collapsed.collapsible .side-panel{inline-size:var(--rpanel-collapsed-width);overflow:hidden}.side-panel{position:fixed;z-index:1029;inset-block-start:calc(1.5rem + 25px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px));inset-block-end:0;inset-inline-end:0;overflow-x:hidden;background:var(--element-base-1)}.side-panel>.inner{display:flex;flex-direction:column;position:absolute;inset-block:0;inset-inline-start:0}@media(max-width:575.98px){:host.enable-mobile{padding-inline-end:0!important;--si-layout-header-first-element-offset-end: 40px}:host.enable-mobile.rpanel-collapsed .side-panel{inline-size:0!important}}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiSidePanelComponent, isStandalone: true, selector: "si-side-panel", inputs: { collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, toggleItemLabel: { classPropertyName: "toggleItemLabel", publicName: "toggleItemLabel", isSignal: true, isRequired: false, transformFunction: null }, breakpoints: { classPropertyName: "breakpoints", publicName: "breakpoints", isSignal: true, isRequired: false, transformFunction: null }, enableMobile: { classPropertyName: "enableMobile", publicName: "enableMobile", isSignal: true, isRequired: false, transformFunction: null }, disableBackdrop: { classPropertyName: "disableBackdrop", publicName: "disableBackdrop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", closed: "closed", contentResize: "contentResize" }, host: { properties: { "class.enable-mobile": "enableMobile()", "class.rpanel-size--regular": "this.size() === \"regular\"", "class.rpanel-size--wide": "this.size() === \"wide\"", "class.rpanel-size--extended": "this.size() === \"extended\"", "class.rpanel-mode--over": "isOverMode()", "class.rpanel-mode--scroll": "isScrollMode()", "class.rpanel-collapsed": "isCollapsed()", "class.ready": "ready()", "class.collapsible": "collapsible() && !this.showTempContent()", "class.collapsible-temp": "collapsible() && this.showTempContent()", "class.rpanel-hidden": "isHidden()", "class.rpanel-fullscreen-overlay": "isFullscreenOverlay()", "class.rpanel-resize-xs": "isXs()", "class.rpanel-resize-sm": "isSm()", "class.rpanel-resize-md": "isMd()", "class.rpanel-resize-lg": "isLg()", "class.rpanel-resize-xl": "isXl()", "class.rpanel-resize-xxl": "isXxl()", "class.rpanel-resize-xxxl": "isXxxl()" }, classAttribute: "si-layout-inner" }, viewQueries: [{ propertyName: "panelElement", first: true, predicate: ["sidePanel"], descendants: true, isSignal: true }, { propertyName: "contentElement", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "portalOutlet", first: true, predicate: ["portalOutlet"], descendants: true, read: CdkPortalOutlet, isSignal: true }, { propertyName: "tmpPortalOutlet", first: true, predicate: ["tmpPortalOutlet"], descendants: true, read: CdkPortalOutlet, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@if (showBackdrop()) {\n  <div class=\"modal-backdrop\" animate.leave=\"backdrop-leave\" (click)=\"toggleSidePanel()\"></div>\n}\n<div #sidePanel class=\"side-panel focus-none\" tabindex=\"-1\">\n  <div class=\"inner\" [class.d-none]=\"showTempContent()\">\n    <ng-content select=\"si-side-panel-content, element-side-panel-content\" />\n    <ng-container #portalOutlet cdkPortalOutlet />\n  </div>\n  <div class=\"inner\" [class.d-none]=\"!showTempContent()\">\n    <ng-container #tmpPortalOutlet cdkPortalOutlet />\n  </div>\n</div>\n<div #content class=\"main-content si-layout-inner\">\n  <ng-content />\n</div>\n", styles: [":host{--rpanel-collapsed-padding: 0;--rpanel-size: 390px;display:block;padding-inline-end:var(--rpanel-size)}:host.ready{transition:padding-inline-end calc(.5s * var(--element-animations-enabled, 1))}:host.ready .side-panel,:host.ready .side-panel>.inner{transition:inline-size calc(.5s * var(--element-animations-enabled, 1)),box-shadow calc(.5s * var(--element-animations-enabled, 1))}:host .modal-backdrop{opacity:1;transition:opacity .15s linear;z-index:1029}@starting-style{:host .modal-backdrop{opacity:0}}:host .modal-backdrop.backdrop-leave{opacity:0;transition:opacity .15s linear}:host .side-panel,:host .side-panel>.inner{inline-size:var(--rpanel-width-fullscreen, var(--rpanel-size))}:host.collapsible,:host.collapsible-temp{--rpanel-collapsed-width: calc(var(--si-sys-sizing-icon-md) + 2 * (var(--si-sys-sizing-spacing-x-40) + var(--si-sys-sizing-spacing-x-30)))}:host.rpanel-size--wide{--rpanel-size: 500px}:host.rpanel-size--extended{--rpanel-size: 100vi}:host.rpanel-fullscreen-overlay{--rpanel-width-fullscreen: 100vi}:host.rpanel-mode--over{padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-mode--over:not(.rpanel-collapsed) .side-panel{box-shadow:var(--si-sys-effects-shadow-2)}:host.rpanel-resize-md.rpanel-size--extended{--rpanel-size: 480px}:host.rpanel-resize-lg.rpanel-size--extended{--rpanel-size: 480px}:host.rpanel-resize-xl.rpanel-size--extended{--rpanel-size: 640px}:host.rpanel-resize-xxl.rpanel-size--extended{--rpanel-size: 720px}:host.rpanel-resize-xxxl.rpanel-size--extended{--rpanel-size: 912px}:host.rpanel-resize-sm.rpanel-size--extended{--fullscreen-button-display: none}:host.rpanel-resize-xs{--fullscreen-button-display: none;padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-resize-xs .side-panel{z-index:1031}:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel{box-shadow:var(--si-sys-effects-shadow-2)}:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel,:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel>.inner{inline-size:100vi}:host.rpanel-hidden:not(.collapsible) .side-panel{display:none}:host.rpanel-collapsed{padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-collapsed:not(.collapsible) .side-panel{inline-size:0;overflow:hidden}:host.rpanel-collapsed.collapsible .side-panel{inline-size:var(--rpanel-collapsed-width);overflow:hidden}.side-panel{position:fixed;z-index:1029;inset-block-start:calc(var(--si-sys-sizing-sizing-100) + 1px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px));inset-block-end:0;inset-inline-end:0;overflow-x:hidden;background:var(--si-sys-background-1)}.side-panel>.inner{display:flex;flex-direction:column;position:absolute;inset-block:0;inset-inline-start:0}@media(max-width:575.98px){:host.enable-mobile{padding-inline-end:0!important;--si-layout-header-first-element-offset-end: 40px}:host.enable-mobile.rpanel-collapsed .side-panel{inline-size:0!important}}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSidePanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSidePanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-side-panel', imports: [PortalModule], changeDetection: ChangeDetectionStrategy.Default, host: {
+            args: [{ selector: 'si-side-panel', imports: [PortalModule], changeDetection: ChangeDetectionStrategy.Eager, host: {
                         class: 'si-layout-inner',
                         '[class.enable-mobile]': 'enableMobile()',
                         '[class.rpanel-size--regular]': 'this.size() === "regular"',
@@ -471,7 +491,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         '[class.rpanel-resize-xl]': 'isXl()',
                         '[class.rpanel-resize-xxl]': 'isXxl()',
                         '[class.rpanel-resize-xxxl]': 'isXxxl()'
-                    }, template: "@if (showBackdrop()) {\n  <div class=\"modal-backdrop\" animate.leave=\"backdrop-leave\" (click)=\"toggleSidePanel()\"></div>\n}\n<div #sidePanel class=\"side-panel focus-none\" tabindex=\"-1\">\n  <div class=\"inner\" [class.d-none]=\"showTempContent()\">\n    <ng-content select=\"si-side-panel-content, element-side-panel-content\" />\n    <ng-container #portalOutlet cdkPortalOutlet />\n  </div>\n  <div class=\"inner\" [class.d-none]=\"!showTempContent()\">\n    <ng-container #tmpPortalOutlet cdkPortalOutlet />\n  </div>\n</div>\n<div #content class=\"main-content si-layout-inner\">\n  <ng-content />\n</div>\n", styles: [":host{--rpanel-collapsed-padding: 0;--rpanel-size: 390px;display:block;padding-inline-end:var(--rpanel-size)}:host.ready{transition:padding-inline-end calc(.5s * var(--element-animations-enabled, 1))}:host.ready .side-panel,:host.ready .side-panel>.inner{transition:inline-size calc(.5s * var(--element-animations-enabled, 1)),box-shadow calc(.5s * var(--element-animations-enabled, 1))}:host .modal-backdrop{opacity:1;transition:opacity .15s linear;z-index:1029}@starting-style{:host .modal-backdrop{opacity:0}}:host .modal-backdrop.backdrop-leave{opacity:0;transition:opacity .15s linear}:host .side-panel,:host .side-panel>.inner{inline-size:var(--rpanel-width-fullscreen, var(--rpanel-size))}:host.collapsible,:host.collapsible-temp{--rpanel-collapsed-width: calc(1.5rem + 24px) }:host.rpanel-size--wide{--rpanel-size: 500px}:host.rpanel-size--extended{--rpanel-size: 100vi}:host.rpanel-fullscreen-overlay{--rpanel-width-fullscreen: 100vi}:host.rpanel-mode--over{padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-mode--over:not(.rpanel-collapsed) .side-panel{box-shadow:0 0 8px var(--element-box-shadow-color-1),0 8px 8px var(--element-box-shadow-color-2)}:host.rpanel-resize-md.rpanel-size--extended{--rpanel-size: 480px}:host.rpanel-resize-lg.rpanel-size--extended{--rpanel-size: 480px}:host.rpanel-resize-xl.rpanel-size--extended{--rpanel-size: 640px}:host.rpanel-resize-xxl.rpanel-size--extended{--rpanel-size: 720px}:host.rpanel-resize-xxxl.rpanel-size--extended{--rpanel-size: 912px}:host.rpanel-resize-sm.rpanel-size--extended{--fullscreen-button-display: none}:host.rpanel-resize-xs{--fullscreen-button-display: none;padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-resize-xs .side-panel{z-index:1031}:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel{box-shadow:0 0 8px var(--element-box-shadow-color-1),0 8px 8px var(--element-box-shadow-color-2)}:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel,:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel>.inner{inline-size:100vi}:host.rpanel-hidden:not(.collapsible) .side-panel{display:none}:host.rpanel-collapsed{padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-collapsed:not(.collapsible) .side-panel{inline-size:0;overflow:hidden}:host.rpanel-collapsed.collapsible .side-panel{inline-size:var(--rpanel-collapsed-width);overflow:hidden}.side-panel{position:fixed;z-index:1029;inset-block-start:calc(1.5rem + 25px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px));inset-block-end:0;inset-inline-end:0;overflow-x:hidden;background:var(--element-base-1)}.side-panel>.inner{display:flex;flex-direction:column;position:absolute;inset-block:0;inset-inline-start:0}@media(max-width:575.98px){:host.enable-mobile{padding-inline-end:0!important;--si-layout-header-first-element-offset-end: 40px}:host.enable-mobile.rpanel-collapsed .side-panel{inline-size:0!important}}\n"] }]
+                    }, template: "@if (showBackdrop()) {\n  <div class=\"modal-backdrop\" animate.leave=\"backdrop-leave\" (click)=\"toggleSidePanel()\"></div>\n}\n<div #sidePanel class=\"side-panel focus-none\" tabindex=\"-1\">\n  <div class=\"inner\" [class.d-none]=\"showTempContent()\">\n    <ng-content select=\"si-side-panel-content, element-side-panel-content\" />\n    <ng-container #portalOutlet cdkPortalOutlet />\n  </div>\n  <div class=\"inner\" [class.d-none]=\"!showTempContent()\">\n    <ng-container #tmpPortalOutlet cdkPortalOutlet />\n  </div>\n</div>\n<div #content class=\"main-content si-layout-inner\">\n  <ng-content />\n</div>\n", styles: [":host{--rpanel-collapsed-padding: 0;--rpanel-size: 390px;display:block;padding-inline-end:var(--rpanel-size)}:host.ready{transition:padding-inline-end calc(.5s * var(--element-animations-enabled, 1))}:host.ready .side-panel,:host.ready .side-panel>.inner{transition:inline-size calc(.5s * var(--element-animations-enabled, 1)),box-shadow calc(.5s * var(--element-animations-enabled, 1))}:host .modal-backdrop{opacity:1;transition:opacity .15s linear;z-index:1029}@starting-style{:host .modal-backdrop{opacity:0}}:host .modal-backdrop.backdrop-leave{opacity:0;transition:opacity .15s linear}:host .side-panel,:host .side-panel>.inner{inline-size:var(--rpanel-width-fullscreen, var(--rpanel-size))}:host.collapsible,:host.collapsible-temp{--rpanel-collapsed-width: calc(var(--si-sys-sizing-icon-md) + 2 * (var(--si-sys-sizing-spacing-x-40) + var(--si-sys-sizing-spacing-x-30)))}:host.rpanel-size--wide{--rpanel-size: 500px}:host.rpanel-size--extended{--rpanel-size: 100vi}:host.rpanel-fullscreen-overlay{--rpanel-width-fullscreen: 100vi}:host.rpanel-mode--over{padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-mode--over:not(.rpanel-collapsed) .side-panel{box-shadow:var(--si-sys-effects-shadow-2)}:host.rpanel-resize-md.rpanel-size--extended{--rpanel-size: 480px}:host.rpanel-resize-lg.rpanel-size--extended{--rpanel-size: 480px}:host.rpanel-resize-xl.rpanel-size--extended{--rpanel-size: 640px}:host.rpanel-resize-xxl.rpanel-size--extended{--rpanel-size: 720px}:host.rpanel-resize-xxxl.rpanel-size--extended{--rpanel-size: 912px}:host.rpanel-resize-sm.rpanel-size--extended{--fullscreen-button-display: none}:host.rpanel-resize-xs{--fullscreen-button-display: none;padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-resize-xs .side-panel{z-index:1031}:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel{box-shadow:var(--si-sys-effects-shadow-2)}:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel,:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel>.inner{inline-size:100vi}:host.rpanel-hidden:not(.collapsible) .side-panel{display:none}:host.rpanel-collapsed{padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-collapsed:not(.collapsible) .side-panel{inline-size:0;overflow:hidden}:host.rpanel-collapsed.collapsible .side-panel{inline-size:var(--rpanel-collapsed-width);overflow:hidden}.side-panel{position:fixed;z-index:1029;inset-block-start:calc(var(--si-sys-sizing-sizing-100) + 1px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px));inset-block-end:0;inset-inline-end:0;overflow-x:hidden;background:var(--si-sys-background-1)}.side-panel>.inner{display:flex;flex-direction:column;position:absolute;inset-block:0;inset-inline-start:0}@media(max-width:575.98px){:host.enable-mobile{padding-inline-end:0!important;--si-layout-header-first-element-offset-end: 40px}:host.enable-mobile.rpanel-collapsed .side-panel{inline-size:0!important}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], toggleItemLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleItemLabel", required: false }] }], breakpoints: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakpoints", required: false }] }], enableMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableMobile", required: false }] }], disableBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableBackdrop", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], contentResize: [{ type: i0.Output, args: ["contentResize"] }], panelElement: [{ type: i0.ViewChild, args: ['sidePanel', { isSignal: true }] }], contentElement: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], portalOutlet: [{ type: i0.ViewChild, args: ['portalOutlet', { ...{
                             read: CdkPortalOutlet
                         }, isSignal: true }] }], tmpPortalOutlet: [{ type: i0.ViewChild, args: ['tmpPortalOutlet', { ...{
@@ -490,7 +510,7 @@ class SiSidePanelContentComponent {
      * This input will be removed in a future major version.
      * @defaultValue undefined
      */
-    collapsibleInput = input(undefined, { ...(ngDevMode ? { debugName: "collapsibleInput" } : {}), 
+    collapsibleInput = input(undefined, { ...(ngDevMode ? { debugName: "collapsibleInput" } : /* istanbul ignore next */ {}), 
         // eslint-disable-next-line @angular-eslint/no-input-rename
         alias: 'collapsible',
         transform: booleanAttribute });
@@ -499,19 +519,22 @@ class SiSidePanelContentComponent {
      *
      * @defaultValue ''
      */
-    heading = input('', ...(ngDevMode ? [{ debugName: "heading" }] : []));
+    heading = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
     /**
      * Input list of primary action items
      *
      * @defaultValue []
      */
-    primaryActions = input([], ...(ngDevMode ? [{ debugName: "primaryActions" }] : []));
+    primaryActions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "primaryActions" }] : /* istanbul ignore next */ []));
     /**
      * Input list of secondary action items.
      *
      * @defaultValue []
      */
-    secondaryActions = input([], ...(ngDevMode ? [{ debugName: "secondaryActions" }] : []));
+    secondaryActions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "secondaryActions" }] : /* istanbul ignore next */ []));
     /**
      * Status icons/actions
      *
@@ -526,7 +549,7 @@ class SiSidePanelContentComponent {
      *         icon="element-alarm-background-filled"
      *         iconColor="status-danger"
      *         stackedIcon="element-alarm-tick"
-     *         stackedIconColor="text-body"
+     *         stackedIconColor="text-primary"
      *         (click)="action()"
      *       >
      *         Action
@@ -537,22 +560,24 @@ class SiSidePanelContentComponent {
      *
      * @defaultValue []
      */
-    statusActions = input([], ...(ngDevMode ? [{ debugName: "statusActions" }] : []));
+    statusActions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "statusActions" }] : /* istanbul ignore next */ []));
     /**
      * Toggles search bar
      *
      * @defaultValue false
      */
-    searchable = input(false, { ...(ngDevMode ? { debugName: "searchable" } : {}), transform: booleanAttribute });
+    searchable = input(false, { ...(ngDevMode ? { debugName: "searchable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Placeholder text for search
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_SIDE_PANEL.SEARCH_PLACEHOLDER:Search...`)
+     * t(() => $localize`:@@SI_SIDE_PANEL.SEARCH_PLACEHOLDER:Search…`)
      * ```
      */
-    searchPlaceholder = input(t(() => $localize `:@@SI_SIDE_PANEL.SEARCH_PLACEHOLDER:Search...`), ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : []));
+    searchPlaceholder = input(t(() => $localize `:@@SI_SIDE_PANEL.SEARCH_PLACEHOLDER:Search…`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
     /**
      * Aria label for close button. Needed for a11y
      *
@@ -561,7 +586,8 @@ class SiSidePanelContentComponent {
      * t(() => $localize`:@@SI_SIDE_PANEL.CLOSE:Close`)
      * ```
      */
-    closeButtonLabel = input(t(() => $localize `:@@SI_SIDE_PANEL.CLOSE:Close`), ...(ngDevMode ? [{ debugName: "closeButtonLabel" }] : []));
+    closeButtonLabel = input(t(() => $localize `:@@SI_SIDE_PANEL.CLOSE:Close`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeButtonLabel" }] : /* istanbul ignore next */ []));
     /**
      * Toggle icon aria-label, required for a11y
      *
@@ -570,54 +596,66 @@ class SiSidePanelContentComponent {
      * t(() => $localize`:@@SI_SIDE_PANEL.TOGGLE:Toggle`)
      * ```
      */
-    toggleItemLabel = input(t(() => $localize `:@@SI_SIDE_PANEL.TOGGLE:Toggle`), ...(ngDevMode ? [{ debugName: "toggleItemLabel" }] : []));
+    toggleItemLabel = input(t(() => $localize `:@@SI_SIDE_PANEL.TOGGLE:Toggle`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toggleItemLabel" }] : /* istanbul ignore next */ []));
     /**
      * Enter fullscreen aria-label, required for a11y
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_SIDE_PANEL.ENTER_FULLSCREEN:Enter fullscreen`)
+     * t(() => $localize`:@@SI_SIDE_PANEL.ENTER_FULLSCREEN:Full screen`)
      * ```
      */
-    enterFullscreenLabel = input(t(() => $localize `:@@SI_SIDE_PANEL.ENTER_FULLSCREEN:Enter fullscreen`), ...(ngDevMode ? [{ debugName: "enterFullscreenLabel" }] : []));
+    enterFullscreenLabel = input(t(() => $localize `:@@SI_SIDE_PANEL.ENTER_FULLSCREEN:Full screen`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enterFullscreenLabel" }] : /* istanbul ignore next */ []));
     /**
      * Exit fullscreen aria-label, required for a11y
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_SIDE_PANEL.EXIT_FULLSCREEN:Exit fullscreen`)
+     * t(() => $localize`:@@SI_SIDE_PANEL.EXIT_FULLSCREEN:Exit full screen`)
      * ```
      */
-    exitFullscreenLabel = input(t(() => $localize `:@@SI_SIDE_PANEL.EXIT_FULLSCREEN:Exit fullscreen`), ...(ngDevMode ? [{ debugName: "exitFullscreenLabel" }] : []));
+    exitFullscreenLabel = input(t(() => $localize `:@@SI_SIDE_PANEL.EXIT_FULLSCREEN:Exit full screen`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "exitFullscreenLabel" }] : /* istanbul ignore next */ []));
     /**
      * Show a badge on the mobile drawer indicating a new alert or notification
      *
      * @defaultValue false
      */
-    showMobileDrawerBadge = input(false, { ...(ngDevMode ? { debugName: "showMobileDrawerBadge" } : {}), transform: booleanAttribute });
+    showMobileDrawerBadge = input(false, { ...(ngDevMode ? { debugName: "showMobileDrawerBadge" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Display mode for side panel - enables navigate or overlay functionality
      */
-    displayMode = input(...(ngDevMode ? [undefined, { debugName: "displayMode" }] : []));
+    displayMode = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "displayMode" }] : /* istanbul ignore next */ []));
     /**
      * Configuration for navigate mode
      */
-    navigateConfig = input(...(ngDevMode ? [undefined, { debugName: "navigateConfig" }] : []));
+    navigateConfig = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "navigateConfig" }] : /* istanbul ignore next */ []));
     /**
      * Output for search bar input
      */
     searchEvent = output();
     activatedRoute = inject(ActivatedRoute, { optional: true });
     service = inject(SiSidePanelService);
-    isCollapsed = signal(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : []));
-    isExpanded = signal(true, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
-    isFullscreen = signal(false, ...(ngDevMode ? [{ debugName: "isFullscreen" }] : []));
-    enableMobile = computed(() => this.service?.enableMobile() ?? false, ...(ngDevMode ? [{ debugName: "enableMobile" }] : []));
+    isCollapsed = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
+    isExpanded = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
+    isFullscreen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFullscreen" }] : /* istanbul ignore next */ []));
+    enableMobile = computed(() => this.service?.enableMobile() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enableMobile" }] : /* istanbul ignore next */ []));
     collapsible = computed(() => {
         return this.collapsibleInput() ?? this.service?.collapsible() ?? false;
-    }, ...(ngDevMode ? [{ debugName: "collapsible" }] : []));
-    mobileSize = signal(false, ...(ngDevMode ? [{ debugName: "mobileSize" }] : []));
-    focusable = computed(() => !this.mobileSize() || !this.enableMobile() || !this.isCollapsed(), ...(ngDevMode ? [{ debugName: "focusable" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
+    mobileSize = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mobileSize" }] : /* istanbul ignore next */ []));
+    focusable = computed(() => !this.mobileSize() || !this.enableMobile() || !this.isCollapsed(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusable" }] : /* istanbul ignore next */ []));
     icons = addIcons({
         elementCancel,
         elementDoubleLeft,
@@ -697,10 +735,10 @@ class SiSidePanelContentComponent {
             this.service.toggle();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSidePanelContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiSidePanelContentComponent, isStandalone: true, selector: "si-side-panel-content", inputs: { collapsibleInput: { classPropertyName: "collapsibleInput", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, primaryActions: { classPropertyName: "primaryActions", publicName: "primaryActions", isSignal: true, isRequired: false, transformFunction: null }, secondaryActions: { classPropertyName: "secondaryActions", publicName: "secondaryActions", isSignal: true, isRequired: false, transformFunction: null }, statusActions: { classPropertyName: "statusActions", publicName: "statusActions", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, toggleItemLabel: { classPropertyName: "toggleItemLabel", publicName: "toggleItemLabel", isSignal: true, isRequired: false, transformFunction: null }, enterFullscreenLabel: { classPropertyName: "enterFullscreenLabel", publicName: "enterFullscreenLabel", isSignal: true, isRequired: false, transformFunction: null }, exitFullscreenLabel: { classPropertyName: "exitFullscreenLabel", publicName: "exitFullscreenLabel", isSignal: true, isRequired: false, transformFunction: null }, showMobileDrawerBadge: { classPropertyName: "showMobileDrawerBadge", publicName: "showMobileDrawerBadge", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null }, navigateConfig: { classPropertyName: "navigateConfig", publicName: "navigateConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchEvent: "searchEvent" }, host: { properties: { "class.collapsed": "isCollapsed()", "class.expanded": "isExpanded()", "class.enable-mobile": "enableMobile()", "class.rpanel-fullscreen-overlay": "isFullscreen()", "id": "panelContentId" } }, providers: [SiAccordionHCollapseService], ngImport: i0, template: "<div class=\"rpanel-header pt-5\">\n  <p class=\"si-h5 my-0 ms-6 auto-hide text-truncate\">{{ heading() | translate }}</p>\n  @if ((primaryActions().length || secondaryActions().length) && focusable()) {\n    <si-content-action-bar\n      class=\"auto-hide ms-auto\"\n      viewType=\"expanded\"\n      [primaryActions]=\"primaryActions()\"\n      [secondaryActions]=\"secondaryActions()\"\n      [toggleItemLabel]=\"toggleItemLabel()\"\n    />\n  }\n  <div class=\"d-flex\">\n    @let navigateConfig = this.navigateConfig();\n    @if (displayMode() === 'navigate' && navigateConfig) {\n      @if (navigateConfig.type === 'router-link') {\n        <a\n          class=\"btn btn-icon btn-tertiary-ghost auto-hide\"\n          [class.ms-4]=\"collapsible()\"\n          [class.mx-4]=\"!collapsible() || service.isTemporaryOpen()\"\n          [routerLink]=\"navigateConfig.routerLink\"\n          [queryParams]=\"navigateConfig.extras?.queryParams\"\n          [queryParamsHandling]=\"navigateConfig.extras?.queryParamsHandling\"\n          [fragment]=\"navigateConfig.extras?.fragment\"\n          [state]=\"navigateConfig.extras?.state\"\n          [relativeTo]=\"navigateConfig.extras?.relativeTo ?? activatedRoute\"\n          [preserveFragment]=\"navigateConfig.extras?.preserveFragment\"\n          [skipLocationChange]=\"navigateConfig.extras?.skipLocationChange\"\n          [replaceUrl]=\"navigateConfig.extras?.replaceUrl\"\n          [attr.aria-label]=\"navigateConfig.label | translate\"\n        >\n          <si-icon class=\"icon\" [icon]=\"icons.elementExport\" />\n          <span class=\"visually-hidden\">\n            {{ navigateConfig.label | translate }}\n          </span></a\n        >\n      } @else if (navigateConfig.type === 'link') {\n        <a\n          class=\"btn btn-icon btn-tertiary-ghost auto-hide\"\n          [class.ms-4]=\"collapsible()\"\n          [class.mx-4]=\"!collapsible()\"\n          [href]=\"navigateConfig.href\"\n          [target]=\"navigateConfig.target\"\n          [attr.rel]=\"navigateConfig.target === '_blank' ? 'noopener noreferrer' : null\"\n          [attr.aria-label]=\"navigateConfig.label | translate\"\n        >\n          <si-icon class=\"icon\" [icon]=\"icons.elementExport\" />\n          <span class=\"visually-hidden\">\n            {{ navigateConfig.label | translate }}\n          </span></a\n        >\n      }\n    }\n    @if (displayMode() === 'overlay') {\n      <button\n        type=\"button\"\n        class=\"fullscreen-button btn btn-icon btn-tertiary-ghost auto-hide\"\n        [class.ms-4]=\"collapsible()\"\n        [class.mx-4]=\"!collapsible() || service.isTemporaryOpen()\"\n        [attr.aria-label]=\"\n          (isFullscreen() ? exitFullscreenLabel() : enterFullscreenLabel()) | translate\n        \"\n        [tabindex]=\"focusable() ? '0' : '-1'\"\n        (click)=\"toggleFullscreen()\"\n      >\n        <si-icon [icon]=\"isFullscreen() ? icons.elementPinch : icons.elementZoom\" />\n      </button>\n    }\n    <button\n      type=\"button\"\n      class=\"close-button btn btn-icon btn-tertiary-ghost me-4\"\n      [attr.aria-label]=\"closeButtonLabel() | translate\"\n      [tabindex]=\"focusable() ? '0' : '-1'\"\n      (click)=\"toggleSidePanel($event)\"\n    >\n      <si-icon [icon]=\"icons.elementCancel\" />\n    </button>\n    <div class=\"collapse-toggle\">\n      <button\n        type=\"button\"\n        class=\"side-panel-collapse-toggle btn btn-icon btn-tertiary-ghost mx-4\"\n        [attr.aria-label]=\"toggleItemLabel() | translate\"\n        [attr.aria-expanded]=\"!isCollapsed() || service.isTemporaryOpen()\"\n        [attr.aria-controls]=\"panelContentId\"\n        (click)=\"toggleSidePanel($event)\"\n      >\n        <si-icon\n          class=\"flip-rtl\"\n          [class.badge-dot]=\"showMobileDrawerBadge()\"\n          [icon]=\"isCollapsed() ? icons.elementDoubleLeft : icons.elementDoubleRight\"\n        />\n      </button>\n    </div>\n  </div>\n</div>\n<div class=\"rpanel-wrapper d-flex flex-column\">\n  @if (statusActions().length && focusable()) {\n    <div class=\"rpanel-header rpanel-statusactions px-6\">\n      @for (dp of statusActions(); track $index) {\n        @if (!dp.disabled) {\n          <a\n            class=\"rpanel-statusaction position-relative focus-inside\"\n            placement=\"start\"\n            [attr.aria-label]=\"!isCollapsed() ? '' : (dp.title | translate)\"\n            [siTooltip]=\"(dp.title | translate) || ''\"\n            [isDisabled]=\"!isCollapsed()\"\n            [siLink]=\"dp\"\n          >\n            <si-icon class=\"icon\" [icon]=\"dp.icon!\" />\n            @if (dp.overlayIcon) {\n              <si-icon class=\"icon position-absolute\" [icon]=\"dp.overlayIcon\" />\n            }\n            <span class=\"ms-2 auto-hide si-caption\">{{ dp.title | translate }}</span>\n          </a>\n        } @else {\n          <div class=\"rpanel-statusaction dot-outer\" aria-hidden=\"true\">\n            <div class=\"dot text-muted text-center\">&bull;</div>\n          </div>\n        }\n      }\n    </div>\n  }\n  <ng-content select=\"si-side-panel-actions\" />\n  @if (searchable() && focusable()) {\n    <div class=\"nav-search px-6 auto-hide\">\n      <si-search-bar\n        #searchBar\n        class=\"m-0\"\n        colorVariant=\"base-0\"\n        prohibitedCharacters=\"*?\"\n        [placeholder]=\"searchPlaceholder() | translate\"\n        [debounceTime]=\"400\"\n        [showIcon]=\"true\"\n        (searchChange)=\"searchEvent.emit($event)\"\n      />\n    </div>\n  }\n  @if (focusable()) {\n    <div class=\"rpanel-content\">\n      <ng-content />\n    </div>\n  }\n</div>\n", styles: [":host{--si-accordion-radius: 0;display:flex;flex-direction:column;flex:1}:host-context(.collapsible) .close-button{display:none}:host-context(.collapsible) .collapse-toggle{display:block}:host-context(.collapsible) .rpanel-wrapper{gap:12px}:host-context(.collapsible) :host.collapsed .auto-hide{display:none!important}:host-context(.collapsible) :host.collapsed .rpanel-wrapper{padding-block-start:0;gap:0;inline-size:var(--rpanel-collapsed-width)}:host-context(.collapsible) :host.collapsed .rpanel-content{flex:0 0 auto;margin-block-start:8px}:host-context(.collapsible) :host.collapsed .rpanel-statusactions{order:3;flex-direction:column;align-items:flex-start;padding:0!important}:host-context(.collapsible) :host.collapsed .rpanel-statusaction{padding-block:8px;padding-inline:12px}:host-context(.collapsible) :host.collapsed .rpanel-statusaction:not(.dot-outer):hover{background:var(--element-base-1-hover)}:host-context(.collapsible) :host.collapsed .rpanel-statusaction.dot-outer{inline-size:100%;justify-content:center}:host-context(.collapsible) :host.collapsed .rpanel-statusaction .icon{padding:2px}.fullscreen-button{display:var(--fullscreen-button-display, inline-flex)!important}.collapse-toggle{display:none}.collapse-toggle i{vertical-align:bottom}.rpanel-header,.rpanel-statusaction{display:flex;align-items:center}.rpanel-header{justify-content:space-between}.rpanel-wrapper{padding-block-start:12px}.rpanel-wrapper,.rpanel-content{min-block-size:0;flex:1 0 0;overflow-x:hidden;overflow-y:auto}.rpanel-statusaction{text-decoration:none}.rpanel-statusaction .dot{inline-size:24px;line-height:24px}.rpanel-statusaction span{white-space:pre-wrap;color:var(--element-text-primary)}.rpanel-statusaction:hover span{color:var(--element-text-active)}@media(max-width:575.98px){:host.enable-mobile:not(.collapsed):not(.expanded) si-content-action-bar{margin-inline-end:calc(1rem + 32px)}:host.enable-mobile:not(.expanded) .collapse-toggle{position:fixed;border:0;text-align:end;padding-block:4px!important;margin-block-start:8px!important;inset-inline-end:0;inset-block-start:calc(1.5rem + 25px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px));border-start-start-radius:var(--element-radius-2);border-end-start-radius:var(--element-radius-2);border-start-end-radius:0!important;border-end-end-radius:0!important;background:var(--element-base-1);box-shadow:0 0 4px var(--element-box-shadow-color-1),0 4px 4px var(--element-box-shadow-color-2);z-index:2}}\n"], dependencies: [{ kind: "component", type: SiContentActionBarComponent, selector: "si-content-action-bar", inputs: ["primaryActions", "secondaryActions", "actionParam", "viewType", "toggleItemLabel", "preventIconsInDropdownMenus", "disabled"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: SiSearchBarComponent, selector: "si-search-bar", inputs: ["debounceTime", "prohibitedCharacters", "placeholder", "showIcon", "tabbable", "value", "readonly", "colorVariant", "disabled", "maxlength", "clearButtonAriaLabel"], outputs: ["searchChange"] }, { kind: "directive", type: SiTooltipDirective, selector: "[siTooltip]", inputs: ["siTooltip", "placement", "isDisabled", "tooltipScrollStrategy", "tooltipContext"] }, { kind: "directive", type: SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSidePanelContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiSidePanelContentComponent, isStandalone: true, selector: "si-side-panel-content", inputs: { collapsibleInput: { classPropertyName: "collapsibleInput", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, primaryActions: { classPropertyName: "primaryActions", publicName: "primaryActions", isSignal: true, isRequired: false, transformFunction: null }, secondaryActions: { classPropertyName: "secondaryActions", publicName: "secondaryActions", isSignal: true, isRequired: false, transformFunction: null }, statusActions: { classPropertyName: "statusActions", publicName: "statusActions", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, toggleItemLabel: { classPropertyName: "toggleItemLabel", publicName: "toggleItemLabel", isSignal: true, isRequired: false, transformFunction: null }, enterFullscreenLabel: { classPropertyName: "enterFullscreenLabel", publicName: "enterFullscreenLabel", isSignal: true, isRequired: false, transformFunction: null }, exitFullscreenLabel: { classPropertyName: "exitFullscreenLabel", publicName: "exitFullscreenLabel", isSignal: true, isRequired: false, transformFunction: null }, showMobileDrawerBadge: { classPropertyName: "showMobileDrawerBadge", publicName: "showMobileDrawerBadge", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null }, navigateConfig: { classPropertyName: "navigateConfig", publicName: "navigateConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchEvent: "searchEvent" }, host: { properties: { "class.collapsed": "isCollapsed()", "class.expanded": "isExpanded()", "class.enable-mobile": "enableMobile()", "class.rpanel-fullscreen-overlay": "isFullscreen()", "id": "panelContentId" } }, providers: [SiAccordionHCollapseService], ngImport: i0, template: "<div class=\"rpanel-header pt-5\">\n  <div class=\"d-flex align-items-center min-width-0 auto-hide\">\n    <ng-content select=\"[siSidePanelBackButton]\" />\n    <p class=\"si-h5 my-0 auto-hide text-truncate header-title\">\n      {{ heading() | translate }}\n    </p>\n  </div>\n  @if ((primaryActions().length || secondaryActions().length) && focusable()) {\n    <si-content-action-bar\n      class=\"auto-hide ms-auto\"\n      viewType=\"expanded\"\n      [primaryActions]=\"primaryActions()\"\n      [secondaryActions]=\"secondaryActions()\"\n      [toggleItemLabel]=\"toggleItemLabel()\"\n    />\n  }\n  <div class=\"d-flex\">\n    @let navigateConfig = this.navigateConfig();\n    @if (displayMode() === 'navigate' && navigateConfig) {\n      @if (navigateConfig.type === 'router-link') {\n        <a\n          class=\"btn btn-icon btn-tertiary-ghost auto-hide\"\n          [class.ms-4]=\"collapsible()\"\n          [class.mx-4]=\"!collapsible() || service.isTemporaryOpen()\"\n          [routerLink]=\"navigateConfig.routerLink\"\n          [queryParams]=\"navigateConfig.extras?.queryParams\"\n          [queryParamsHandling]=\"navigateConfig.extras?.queryParamsHandling\"\n          [fragment]=\"navigateConfig.extras?.fragment\"\n          [state]=\"navigateConfig.extras?.state\"\n          [relativeTo]=\"navigateConfig.extras?.relativeTo ?? activatedRoute\"\n          [preserveFragment]=\"navigateConfig.extras?.preserveFragment\"\n          [skipLocationChange]=\"navigateConfig.extras?.skipLocationChange\"\n          [replaceUrl]=\"navigateConfig.extras?.replaceUrl\"\n          [attr.aria-label]=\"navigateConfig.label | translate\"\n        >\n          <si-icon class=\"icon\" [icon]=\"icons.elementExport\" />\n          <span class=\"visually-hidden\">\n            {{ navigateConfig.label | translate }}\n          </span></a\n        >\n      } @else if (navigateConfig.type === 'link') {\n        <a\n          class=\"btn btn-icon btn-tertiary-ghost auto-hide\"\n          [class.ms-4]=\"collapsible()\"\n          [class.mx-4]=\"!collapsible()\"\n          [href]=\"navigateConfig.href\"\n          [target]=\"navigateConfig.target\"\n          [attr.rel]=\"navigateConfig.target === '_blank' ? 'noopener noreferrer' : null\"\n          [attr.aria-label]=\"navigateConfig.label | translate\"\n        >\n          <si-icon class=\"icon\" [icon]=\"icons.elementExport\" />\n          <span class=\"visually-hidden\">\n            {{ navigateConfig.label | translate }}\n          </span></a\n        >\n      }\n    }\n    @if (displayMode() === 'overlay') {\n      <button\n        type=\"button\"\n        class=\"fullscreen-button btn btn-icon btn-tertiary-ghost auto-hide\"\n        [class.ms-4]=\"collapsible()\"\n        [class.mx-4]=\"!collapsible() || service.isTemporaryOpen()\"\n        [attr.aria-label]=\"\n          (isFullscreen() ? exitFullscreenLabel() : enterFullscreenLabel()) | translate\n        \"\n        [tabindex]=\"focusable() ? '0' : '-1'\"\n        (click)=\"toggleFullscreen()\"\n      >\n        <si-icon [icon]=\"isFullscreen() ? icons.elementPinch : icons.elementZoom\" />\n      </button>\n    }\n    <button\n      type=\"button\"\n      class=\"close-button btn btn-icon btn-tertiary-ghost me-4\"\n      [attr.aria-label]=\"closeButtonLabel() | translate\"\n      [tabindex]=\"focusable() ? '0' : '-1'\"\n      (click)=\"toggleSidePanel($event)\"\n    >\n      <si-icon [icon]=\"icons.elementCancel\" />\n    </button>\n    <div class=\"collapse-toggle\">\n      <button\n        type=\"button\"\n        class=\"side-panel-collapse-toggle btn btn-icon btn-tertiary-ghost mx-4\"\n        [attr.aria-label]=\"toggleItemLabel() | translate\"\n        [attr.aria-expanded]=\"!isCollapsed() || service.isTemporaryOpen()\"\n        [attr.aria-controls]=\"panelContentId\"\n        (click)=\"toggleSidePanel($event)\"\n      >\n        <si-icon\n          class=\"flip-rtl\"\n          [class.badge-dot]=\"showMobileDrawerBadge()\"\n          [icon]=\"isCollapsed() ? icons.elementDoubleLeft : icons.elementDoubleRight\"\n        />\n      </button>\n    </div>\n  </div>\n</div>\n<div class=\"rpanel-wrapper d-flex flex-column\">\n  @if (statusActions().length && focusable()) {\n    <div class=\"rpanel-header rpanel-statusactions px-6\">\n      @for (dp of statusActions(); track $index) {\n        @if (!dp.disabled) {\n          <a\n            class=\"rpanel-statusaction position-relative focus-inside\"\n            placement=\"start\"\n            [attr.aria-label]=\"!isCollapsed() ? '' : (dp.title | translate)\"\n            [siTooltip]=\"(dp.title | translate) || ''\"\n            [isDisabled]=\"!isCollapsed()\"\n            [siLink]=\"dp\"\n          >\n            <si-icon class=\"icon\" [icon]=\"dp.icon!\" />\n            @if (dp.overlayIcon) {\n              <si-icon class=\"icon position-absolute\" [icon]=\"dp.overlayIcon\" />\n            }\n            <span class=\"ms-2 auto-hide si-body-sm\">{{ dp.title | translate }}</span>\n          </a>\n        } @else {\n          <div class=\"rpanel-statusaction dot-outer\" aria-hidden=\"true\">\n            <div class=\"dot text-disabled text-center\">&bull;</div>\n          </div>\n        }\n      }\n    </div>\n  }\n  <ng-content select=\"si-side-panel-actions\" />\n  @if (searchable() && focusable()) {\n    <div class=\"nav-search px-6 auto-hide\">\n      <si-search-bar\n        #searchBar\n        class=\"m-0\"\n        colorVariant=\"base-0\"\n        prohibitedCharacters=\"*?\"\n        [placeholder]=\"searchPlaceholder() | translate\"\n        [debounceTime]=\"400\"\n        [showIcon]=\"true\"\n        (searchChange)=\"searchEvent.emit($event)\"\n      />\n    </div>\n  }\n  @if (focusable()) {\n    <div class=\"rpanel-content\">\n      <ng-content />\n    </div>\n  }\n</div>\n", styles: [":host{--si-accordion-radius: 0;display:flex;flex-direction:column;flex:1}:host-context(.collapsible) .close-button{display:none}:host-context(.collapsible) .collapse-toggle{display:block}:host-context(.collapsible) .rpanel-wrapper{gap:var(--si-sys-sizing-spacing-y-50) var(--si-sys-sizing-spacing-x-50)}:host-context(.collapsible) :host.collapsed .auto-hide{display:none!important}:host-context(.collapsible) :host.collapsed .rpanel-wrapper{padding-block-start:0;gap:0;inline-size:var(--rpanel-collapsed-width)}:host-context(.collapsible) :host.collapsed .rpanel-content{flex:0 0 auto;margin-block-start:var(--si-sys-sizing-spacing-y-40)}:host-context(.collapsible) :host.collapsed .rpanel-statusactions{order:3;flex-direction:column;align-items:flex-start;padding:0!important}:host-context(.collapsible) :host.collapsed .rpanel-statusaction{padding-block:var(--si-sys-sizing-spacing-y-40);padding-inline:var(--si-sys-sizing-spacing-x-50)}:host-context(.collapsible) :host.collapsed .rpanel-statusaction:not(.dot-outer):hover{background:var(--si-sys-background-hover)}:host-context(.collapsible) :host.collapsed .rpanel-statusaction.dot-outer{inline-size:100%;justify-content:center}:host-context(.collapsible) :host.collapsed .rpanel-statusaction .icon{padding:var(--si-sys-sizing-spacing-y-10) var(--si-sys-sizing-spacing-x-10)}.fullscreen-button{display:var(--fullscreen-button-display, inline-flex)!important}.collapse-toggle{display:none}.collapse-toggle i{vertical-align:bottom}.rpanel-header,.rpanel-statusaction{display:flex;align-items:center}.rpanel-header{justify-content:space-between}.header-title{margin-inline-start:var(--si-sys-sizing-spacing-y-60)}.rpanel-header:has([siSidePanelBackButton]) .header-title{margin-inline-start:var(--si-sys-sizing-spacing-y-20)}.rpanel-wrapper{padding-block-start:var(--si-sys-sizing-spacing-y-50)}.rpanel-wrapper,.rpanel-content{min-block-size:0;flex:1 0 0;overflow-x:hidden;overflow-y:auto}.rpanel-statusaction{text-decoration:none}.rpanel-statusaction .dot{inline-size:24px;line-height:24px}.rpanel-statusaction span{white-space:pre-wrap;color:var(--si-sys-text-primary)}.rpanel-statusaction:hover span{color:var(--si-sys-text-accent)}@media(max-width:575.98px){:host.enable-mobile:not(.collapsed):not(.expanded) si-content-action-bar{margin-inline-end:calc(var(--si-sys-typography-font-size-body) * var(--si-sys-typography-line-height-body) + 2 * var(--si-sys-sizing-spacing-y-40) + 2 * var(--si-sys-sizing-spacing-y-40))}:host.enable-mobile:not(.expanded) .collapse-toggle{position:fixed;border:0;text-align:end;padding-block:4px!important;margin-block-start:8px!important;inset-inline-end:0;inset-block-start:calc(var(--si-sys-sizing-sizing-100) + 1px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px));border-start-start-radius:var(--element-radius-2);border-end-start-radius:var(--element-radius-2);border-start-end-radius:0!important;border-end-end-radius:0!important;background:var(--si-sys-background-1);box-shadow:var(--si-sys-effects-shadow-1);z-index:2}}\n"], dependencies: [{ kind: "component", type: SiContentActionBarComponent, selector: "si-content-action-bar", inputs: ["primaryActions", "secondaryActions", "actionParam", "viewType", "toggleItemLabel", "preventIconsInDropdownMenus", "disabled"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: SiSearchBarComponent, selector: "si-search-bar", inputs: ["debounceTime", "prohibitedCharacters", "placeholder", "showIcon", "value", "readonly", "colorVariant", "disabled", "maxlength", "clearButtonAriaLabel"], outputs: ["searchChange"] }, { kind: "directive", type: SiTooltipDirective, selector: "[siTooltip]", inputs: ["siTooltip", "placement", "isDisabled", "tooltipScrollStrategy", "tooltipContext"] }, { kind: "directive", type: SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSidePanelContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSidePanelContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-side-panel-content', imports: [
                         SiContentActionBarComponent,
@@ -710,13 +748,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         SiTranslatePipe,
                         SiTooltipDirective,
                         SiLinkDirective
-                    ], providers: [SiAccordionHCollapseService], changeDetection: ChangeDetectionStrategy.Default, host: {
+                    ], providers: [SiAccordionHCollapseService], changeDetection: ChangeDetectionStrategy.Eager, host: {
                         '[class.collapsed]': 'isCollapsed()',
                         '[class.expanded]': 'isExpanded()',
                         '[class.enable-mobile]': 'enableMobile()',
                         '[class.rpanel-fullscreen-overlay]': 'isFullscreen()',
                         '[id]': 'panelContentId'
-                    }, template: "<div class=\"rpanel-header pt-5\">\n  <p class=\"si-h5 my-0 ms-6 auto-hide text-truncate\">{{ heading() | translate }}</p>\n  @if ((primaryActions().length || secondaryActions().length) && focusable()) {\n    <si-content-action-bar\n      class=\"auto-hide ms-auto\"\n      viewType=\"expanded\"\n      [primaryActions]=\"primaryActions()\"\n      [secondaryActions]=\"secondaryActions()\"\n      [toggleItemLabel]=\"toggleItemLabel()\"\n    />\n  }\n  <div class=\"d-flex\">\n    @let navigateConfig = this.navigateConfig();\n    @if (displayMode() === 'navigate' && navigateConfig) {\n      @if (navigateConfig.type === 'router-link') {\n        <a\n          class=\"btn btn-icon btn-tertiary-ghost auto-hide\"\n          [class.ms-4]=\"collapsible()\"\n          [class.mx-4]=\"!collapsible() || service.isTemporaryOpen()\"\n          [routerLink]=\"navigateConfig.routerLink\"\n          [queryParams]=\"navigateConfig.extras?.queryParams\"\n          [queryParamsHandling]=\"navigateConfig.extras?.queryParamsHandling\"\n          [fragment]=\"navigateConfig.extras?.fragment\"\n          [state]=\"navigateConfig.extras?.state\"\n          [relativeTo]=\"navigateConfig.extras?.relativeTo ?? activatedRoute\"\n          [preserveFragment]=\"navigateConfig.extras?.preserveFragment\"\n          [skipLocationChange]=\"navigateConfig.extras?.skipLocationChange\"\n          [replaceUrl]=\"navigateConfig.extras?.replaceUrl\"\n          [attr.aria-label]=\"navigateConfig.label | translate\"\n        >\n          <si-icon class=\"icon\" [icon]=\"icons.elementExport\" />\n          <span class=\"visually-hidden\">\n            {{ navigateConfig.label | translate }}\n          </span></a\n        >\n      } @else if (navigateConfig.type === 'link') {\n        <a\n          class=\"btn btn-icon btn-tertiary-ghost auto-hide\"\n          [class.ms-4]=\"collapsible()\"\n          [class.mx-4]=\"!collapsible()\"\n          [href]=\"navigateConfig.href\"\n          [target]=\"navigateConfig.target\"\n          [attr.rel]=\"navigateConfig.target === '_blank' ? 'noopener noreferrer' : null\"\n          [attr.aria-label]=\"navigateConfig.label | translate\"\n        >\n          <si-icon class=\"icon\" [icon]=\"icons.elementExport\" />\n          <span class=\"visually-hidden\">\n            {{ navigateConfig.label | translate }}\n          </span></a\n        >\n      }\n    }\n    @if (displayMode() === 'overlay') {\n      <button\n        type=\"button\"\n        class=\"fullscreen-button btn btn-icon btn-tertiary-ghost auto-hide\"\n        [class.ms-4]=\"collapsible()\"\n        [class.mx-4]=\"!collapsible() || service.isTemporaryOpen()\"\n        [attr.aria-label]=\"\n          (isFullscreen() ? exitFullscreenLabel() : enterFullscreenLabel()) | translate\n        \"\n        [tabindex]=\"focusable() ? '0' : '-1'\"\n        (click)=\"toggleFullscreen()\"\n      >\n        <si-icon [icon]=\"isFullscreen() ? icons.elementPinch : icons.elementZoom\" />\n      </button>\n    }\n    <button\n      type=\"button\"\n      class=\"close-button btn btn-icon btn-tertiary-ghost me-4\"\n      [attr.aria-label]=\"closeButtonLabel() | translate\"\n      [tabindex]=\"focusable() ? '0' : '-1'\"\n      (click)=\"toggleSidePanel($event)\"\n    >\n      <si-icon [icon]=\"icons.elementCancel\" />\n    </button>\n    <div class=\"collapse-toggle\">\n      <button\n        type=\"button\"\n        class=\"side-panel-collapse-toggle btn btn-icon btn-tertiary-ghost mx-4\"\n        [attr.aria-label]=\"toggleItemLabel() | translate\"\n        [attr.aria-expanded]=\"!isCollapsed() || service.isTemporaryOpen()\"\n        [attr.aria-controls]=\"panelContentId\"\n        (click)=\"toggleSidePanel($event)\"\n      >\n        <si-icon\n          class=\"flip-rtl\"\n          [class.badge-dot]=\"showMobileDrawerBadge()\"\n          [icon]=\"isCollapsed() ? icons.elementDoubleLeft : icons.elementDoubleRight\"\n        />\n      </button>\n    </div>\n  </div>\n</div>\n<div class=\"rpanel-wrapper d-flex flex-column\">\n  @if (statusActions().length && focusable()) {\n    <div class=\"rpanel-header rpanel-statusactions px-6\">\n      @for (dp of statusActions(); track $index) {\n        @if (!dp.disabled) {\n          <a\n            class=\"rpanel-statusaction position-relative focus-inside\"\n            placement=\"start\"\n            [attr.aria-label]=\"!isCollapsed() ? '' : (dp.title | translate)\"\n            [siTooltip]=\"(dp.title | translate) || ''\"\n            [isDisabled]=\"!isCollapsed()\"\n            [siLink]=\"dp\"\n          >\n            <si-icon class=\"icon\" [icon]=\"dp.icon!\" />\n            @if (dp.overlayIcon) {\n              <si-icon class=\"icon position-absolute\" [icon]=\"dp.overlayIcon\" />\n            }\n            <span class=\"ms-2 auto-hide si-caption\">{{ dp.title | translate }}</span>\n          </a>\n        } @else {\n          <div class=\"rpanel-statusaction dot-outer\" aria-hidden=\"true\">\n            <div class=\"dot text-muted text-center\">&bull;</div>\n          </div>\n        }\n      }\n    </div>\n  }\n  <ng-content select=\"si-side-panel-actions\" />\n  @if (searchable() && focusable()) {\n    <div class=\"nav-search px-6 auto-hide\">\n      <si-search-bar\n        #searchBar\n        class=\"m-0\"\n        colorVariant=\"base-0\"\n        prohibitedCharacters=\"*?\"\n        [placeholder]=\"searchPlaceholder() | translate\"\n        [debounceTime]=\"400\"\n        [showIcon]=\"true\"\n        (searchChange)=\"searchEvent.emit($event)\"\n      />\n    </div>\n  }\n  @if (focusable()) {\n    <div class=\"rpanel-content\">\n      <ng-content />\n    </div>\n  }\n</div>\n", styles: [":host{--si-accordion-radius: 0;display:flex;flex-direction:column;flex:1}:host-context(.collapsible) .close-button{display:none}:host-context(.collapsible) .collapse-toggle{display:block}:host-context(.collapsible) .rpanel-wrapper{gap:12px}:host-context(.collapsible) :host.collapsed .auto-hide{display:none!important}:host-context(.collapsible) :host.collapsed .rpanel-wrapper{padding-block-start:0;gap:0;inline-size:var(--rpanel-collapsed-width)}:host-context(.collapsible) :host.collapsed .rpanel-content{flex:0 0 auto;margin-block-start:8px}:host-context(.collapsible) :host.collapsed .rpanel-statusactions{order:3;flex-direction:column;align-items:flex-start;padding:0!important}:host-context(.collapsible) :host.collapsed .rpanel-statusaction{padding-block:8px;padding-inline:12px}:host-context(.collapsible) :host.collapsed .rpanel-statusaction:not(.dot-outer):hover{background:var(--element-base-1-hover)}:host-context(.collapsible) :host.collapsed .rpanel-statusaction.dot-outer{inline-size:100%;justify-content:center}:host-context(.collapsible) :host.collapsed .rpanel-statusaction .icon{padding:2px}.fullscreen-button{display:var(--fullscreen-button-display, inline-flex)!important}.collapse-toggle{display:none}.collapse-toggle i{vertical-align:bottom}.rpanel-header,.rpanel-statusaction{display:flex;align-items:center}.rpanel-header{justify-content:space-between}.rpanel-wrapper{padding-block-start:12px}.rpanel-wrapper,.rpanel-content{min-block-size:0;flex:1 0 0;overflow-x:hidden;overflow-y:auto}.rpanel-statusaction{text-decoration:none}.rpanel-statusaction .dot{inline-size:24px;line-height:24px}.rpanel-statusaction span{white-space:pre-wrap;color:var(--element-text-primary)}.rpanel-statusaction:hover span{color:var(--element-text-active)}@media(max-width:575.98px){:host.enable-mobile:not(.collapsed):not(.expanded) si-content-action-bar{margin-inline-end:calc(1rem + 32px)}:host.enable-mobile:not(.expanded) .collapse-toggle{position:fixed;border:0;text-align:end;padding-block:4px!important;margin-block-start:8px!important;inset-inline-end:0;inset-block-start:calc(1.5rem + 25px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px));border-start-start-radius:var(--element-radius-2);border-end-start-radius:var(--element-radius-2);border-start-end-radius:0!important;border-end-end-radius:0!important;background:var(--element-base-1);box-shadow:0 0 4px var(--element-box-shadow-color-1),0 4px 4px var(--element-box-shadow-color-2);z-index:2}}\n"] }]
+                    }, template: "<div class=\"rpanel-header pt-5\">\n  <div class=\"d-flex align-items-center min-width-0 auto-hide\">\n    <ng-content select=\"[siSidePanelBackButton]\" />\n    <p class=\"si-h5 my-0 auto-hide text-truncate header-title\">\n      {{ heading() | translate }}\n    </p>\n  </div>\n  @if ((primaryActions().length || secondaryActions().length) && focusable()) {\n    <si-content-action-bar\n      class=\"auto-hide ms-auto\"\n      viewType=\"expanded\"\n      [primaryActions]=\"primaryActions()\"\n      [secondaryActions]=\"secondaryActions()\"\n      [toggleItemLabel]=\"toggleItemLabel()\"\n    />\n  }\n  <div class=\"d-flex\">\n    @let navigateConfig = this.navigateConfig();\n    @if (displayMode() === 'navigate' && navigateConfig) {\n      @if (navigateConfig.type === 'router-link') {\n        <a\n          class=\"btn btn-icon btn-tertiary-ghost auto-hide\"\n          [class.ms-4]=\"collapsible()\"\n          [class.mx-4]=\"!collapsible() || service.isTemporaryOpen()\"\n          [routerLink]=\"navigateConfig.routerLink\"\n          [queryParams]=\"navigateConfig.extras?.queryParams\"\n          [queryParamsHandling]=\"navigateConfig.extras?.queryParamsHandling\"\n          [fragment]=\"navigateConfig.extras?.fragment\"\n          [state]=\"navigateConfig.extras?.state\"\n          [relativeTo]=\"navigateConfig.extras?.relativeTo ?? activatedRoute\"\n          [preserveFragment]=\"navigateConfig.extras?.preserveFragment\"\n          [skipLocationChange]=\"navigateConfig.extras?.skipLocationChange\"\n          [replaceUrl]=\"navigateConfig.extras?.replaceUrl\"\n          [attr.aria-label]=\"navigateConfig.label | translate\"\n        >\n          <si-icon class=\"icon\" [icon]=\"icons.elementExport\" />\n          <span class=\"visually-hidden\">\n            {{ navigateConfig.label | translate }}\n          </span></a\n        >\n      } @else if (navigateConfig.type === 'link') {\n        <a\n          class=\"btn btn-icon btn-tertiary-ghost auto-hide\"\n          [class.ms-4]=\"collapsible()\"\n          [class.mx-4]=\"!collapsible()\"\n          [href]=\"navigateConfig.href\"\n          [target]=\"navigateConfig.target\"\n          [attr.rel]=\"navigateConfig.target === '_blank' ? 'noopener noreferrer' : null\"\n          [attr.aria-label]=\"navigateConfig.label | translate\"\n        >\n          <si-icon class=\"icon\" [icon]=\"icons.elementExport\" />\n          <span class=\"visually-hidden\">\n            {{ navigateConfig.label | translate }}\n          </span></a\n        >\n      }\n    }\n    @if (displayMode() === 'overlay') {\n      <button\n        type=\"button\"\n        class=\"fullscreen-button btn btn-icon btn-tertiary-ghost auto-hide\"\n        [class.ms-4]=\"collapsible()\"\n        [class.mx-4]=\"!collapsible() || service.isTemporaryOpen()\"\n        [attr.aria-label]=\"\n          (isFullscreen() ? exitFullscreenLabel() : enterFullscreenLabel()) | translate\n        \"\n        [tabindex]=\"focusable() ? '0' : '-1'\"\n        (click)=\"toggleFullscreen()\"\n      >\n        <si-icon [icon]=\"isFullscreen() ? icons.elementPinch : icons.elementZoom\" />\n      </button>\n    }\n    <button\n      type=\"button\"\n      class=\"close-button btn btn-icon btn-tertiary-ghost me-4\"\n      [attr.aria-label]=\"closeButtonLabel() | translate\"\n      [tabindex]=\"focusable() ? '0' : '-1'\"\n      (click)=\"toggleSidePanel($event)\"\n    >\n      <si-icon [icon]=\"icons.elementCancel\" />\n    </button>\n    <div class=\"collapse-toggle\">\n      <button\n        type=\"button\"\n        class=\"side-panel-collapse-toggle btn btn-icon btn-tertiary-ghost mx-4\"\n        [attr.aria-label]=\"toggleItemLabel() | translate\"\n        [attr.aria-expanded]=\"!isCollapsed() || service.isTemporaryOpen()\"\n        [attr.aria-controls]=\"panelContentId\"\n        (click)=\"toggleSidePanel($event)\"\n      >\n        <si-icon\n          class=\"flip-rtl\"\n          [class.badge-dot]=\"showMobileDrawerBadge()\"\n          [icon]=\"isCollapsed() ? icons.elementDoubleLeft : icons.elementDoubleRight\"\n        />\n      </button>\n    </div>\n  </div>\n</div>\n<div class=\"rpanel-wrapper d-flex flex-column\">\n  @if (statusActions().length && focusable()) {\n    <div class=\"rpanel-header rpanel-statusactions px-6\">\n      @for (dp of statusActions(); track $index) {\n        @if (!dp.disabled) {\n          <a\n            class=\"rpanel-statusaction position-relative focus-inside\"\n            placement=\"start\"\n            [attr.aria-label]=\"!isCollapsed() ? '' : (dp.title | translate)\"\n            [siTooltip]=\"(dp.title | translate) || ''\"\n            [isDisabled]=\"!isCollapsed()\"\n            [siLink]=\"dp\"\n          >\n            <si-icon class=\"icon\" [icon]=\"dp.icon!\" />\n            @if (dp.overlayIcon) {\n              <si-icon class=\"icon position-absolute\" [icon]=\"dp.overlayIcon\" />\n            }\n            <span class=\"ms-2 auto-hide si-body-sm\">{{ dp.title | translate }}</span>\n          </a>\n        } @else {\n          <div class=\"rpanel-statusaction dot-outer\" aria-hidden=\"true\">\n            <div class=\"dot text-disabled text-center\">&bull;</div>\n          </div>\n        }\n      }\n    </div>\n  }\n  <ng-content select=\"si-side-panel-actions\" />\n  @if (searchable() && focusable()) {\n    <div class=\"nav-search px-6 auto-hide\">\n      <si-search-bar\n        #searchBar\n        class=\"m-0\"\n        colorVariant=\"base-0\"\n        prohibitedCharacters=\"*?\"\n        [placeholder]=\"searchPlaceholder() | translate\"\n        [debounceTime]=\"400\"\n        [showIcon]=\"true\"\n        (searchChange)=\"searchEvent.emit($event)\"\n      />\n    </div>\n  }\n  @if (focusable()) {\n    <div class=\"rpanel-content\">\n      <ng-content />\n    </div>\n  }\n</div>\n", styles: [":host{--si-accordion-radius: 0;display:flex;flex-direction:column;flex:1}:host-context(.collapsible) .close-button{display:none}:host-context(.collapsible) .collapse-toggle{display:block}:host-context(.collapsible) .rpanel-wrapper{gap:var(--si-sys-sizing-spacing-y-50) var(--si-sys-sizing-spacing-x-50)}:host-context(.collapsible) :host.collapsed .auto-hide{display:none!important}:host-context(.collapsible) :host.collapsed .rpanel-wrapper{padding-block-start:0;gap:0;inline-size:var(--rpanel-collapsed-width)}:host-context(.collapsible) :host.collapsed .rpanel-content{flex:0 0 auto;margin-block-start:var(--si-sys-sizing-spacing-y-40)}:host-context(.collapsible) :host.collapsed .rpanel-statusactions{order:3;flex-direction:column;align-items:flex-start;padding:0!important}:host-context(.collapsible) :host.collapsed .rpanel-statusaction{padding-block:var(--si-sys-sizing-spacing-y-40);padding-inline:var(--si-sys-sizing-spacing-x-50)}:host-context(.collapsible) :host.collapsed .rpanel-statusaction:not(.dot-outer):hover{background:var(--si-sys-background-hover)}:host-context(.collapsible) :host.collapsed .rpanel-statusaction.dot-outer{inline-size:100%;justify-content:center}:host-context(.collapsible) :host.collapsed .rpanel-statusaction .icon{padding:var(--si-sys-sizing-spacing-y-10) var(--si-sys-sizing-spacing-x-10)}.fullscreen-button{display:var(--fullscreen-button-display, inline-flex)!important}.collapse-toggle{display:none}.collapse-toggle i{vertical-align:bottom}.rpanel-header,.rpanel-statusaction{display:flex;align-items:center}.rpanel-header{justify-content:space-between}.header-title{margin-inline-start:var(--si-sys-sizing-spacing-y-60)}.rpanel-header:has([siSidePanelBackButton]) .header-title{margin-inline-start:var(--si-sys-sizing-spacing-y-20)}.rpanel-wrapper{padding-block-start:var(--si-sys-sizing-spacing-y-50)}.rpanel-wrapper,.rpanel-content{min-block-size:0;flex:1 0 0;overflow-x:hidden;overflow-y:auto}.rpanel-statusaction{text-decoration:none}.rpanel-statusaction .dot{inline-size:24px;line-height:24px}.rpanel-statusaction span{white-space:pre-wrap;color:var(--si-sys-text-primary)}.rpanel-statusaction:hover span{color:var(--si-sys-text-accent)}@media(max-width:575.98px){:host.enable-mobile:not(.collapsed):not(.expanded) si-content-action-bar{margin-inline-end:calc(var(--si-sys-typography-font-size-body) * var(--si-sys-typography-line-height-body) + 2 * var(--si-sys-sizing-spacing-y-40) + 2 * var(--si-sys-sizing-spacing-y-40))}:host.enable-mobile:not(.expanded) .collapse-toggle{position:fixed;border:0;text-align:end;padding-block:4px!important;margin-block-start:8px!important;inset-inline-end:0;inset-block-start:calc(var(--si-sys-sizing-sizing-100) + 1px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px));border-start-start-radius:var(--element-radius-2);border-end-start-radius:var(--element-radius-2);border-start-end-radius:0!important;border-end-end-radius:0!important;background:var(--si-sys-background-1);box-shadow:var(--si-sys-effects-shadow-1);z-index:2}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { collapsibleInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], primaryActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryActions", required: false }] }], secondaryActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryActions", required: false }] }], statusActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusActions", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], closeButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonLabel", required: false }] }], toggleItemLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleItemLabel", required: false }] }], enterFullscreenLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "enterFullscreenLabel", required: false }] }], exitFullscreenLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "exitFullscreenLabel", required: false }] }], showMobileDrawerBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMobileDrawerBadge", required: false }] }], displayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMode", required: false }] }], navigateConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateConfig", required: false }] }], searchEvent: [{ type: i0.Output, args: ["searchEvent"] }] } });
 
 /**
@@ -737,7 +775,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  *         icon="element-alarm-background-filled"
  *         iconColor="status-danger"
  *         stackedIcon="element-alarm-tick"
- *         stackedIconColor="text-body"
+ *         stackedIconColor="text-primary"
  *         (click)="action()"
  *       >
  *         Action
@@ -748,23 +786,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  */
 class SiSidePanelActionComponent {
     /** Icon name for the main icon. */
-    icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : []));
+    icon = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     /** CSS color class for the main icon (e.g. `'status-warning'`). */
-    iconColor = input(...(ngDevMode ? [undefined, { debugName: "iconColor" }] : []));
+    iconColor = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "iconColor" }] : /* istanbul ignore next */ []));
     /** Optional stacked icon name displayed on top of the main icon. */
-    stackedIcon = input(...(ngDevMode ? [undefined, { debugName: "stackedIcon" }] : []));
-    /** CSS color class for the stacked icon (e.g. `'text-body'`). */
-    stackedIconColor = input(...(ngDevMode ? [undefined, { debugName: "stackedIconColor" }] : []));
+    stackedIcon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "stackedIcon" }] : /* istanbul ignore next */ []));
+    /** CSS color class for the stacked icon (e.g. `'text-primary'`). */
+    stackedIconColor = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "stackedIconColor" }] : /* istanbul ignore next */ []));
     /**
      * When disabled, renders a dot separator instead of the icon and label.
      *
      * @defaultValue false
      */
-    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSidePanelActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiSidePanelActionComponent, isStandalone: true, selector: "button[si-side-panel-action], a[si-side-panel-action]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, stackedIcon: { classPropertyName: "stackedIcon", publicName: "stackedIcon", isSignal: true, isRequired: false, transformFunction: null }, stackedIconColor: { classPropertyName: "stackedIconColor", publicName: "stackedIconColor", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "focus-inside" }, ngImport: i0, template: `
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSidePanelActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiSidePanelActionComponent, isStandalone: true, selector: "button[si-side-panel-action], a[si-side-panel-action]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, stackedIcon: { classPropertyName: "stackedIcon", publicName: "stackedIcon", isSignal: true, isRequired: false, transformFunction: null }, stackedIconColor: { classPropertyName: "stackedIconColor", publicName: "stackedIconColor", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "focus-inside" }, ngImport: i0, template: `
     @if (disabled()) {
-      <div class="icon dot text-muted text-center">&bull;</div>
+      <div class="icon dot text-disabled text-center">&bull;</div>
     } @else {
       <span class="icon icon-stack">
         <si-icon [class]="iconColor()" [icon]="icon()" />
@@ -772,17 +814,17 @@ class SiSidePanelActionComponent {
           <si-icon [class]="stackedIconColor()" [icon]="stackedIcon" />
         }
       </span>
-      <span class="ms-2 auto-hide si-caption text-start">
+      <span class="ms-2 auto-hide si-body-sm text-start">
         <ng-content />
       </span>
     }
-  `, isInline: true, styles: [":host{display:flex;align-items:center;text-decoration:none;border:0;background:transparent;padding:0}:host .dot{inline-size:1.25rem;line-height:1.25rem}:host span{color:var(--element-text-primary)}:host:hover span{color:var(--element-text-active)}:host-context(.collapsible .collapsed){padding-block:8px;padding-inline:12px}:host-context(.collapsible .collapsed):not(:disabled):hover{background:var(--element-base-1-hover)}:host-context(.collapsible .collapsed) .dot,:host-context(.collapsible .collapsed) .icon{margin:2px}:host-context(si-side-panel-content.collapsed) .auto-hide{position:absolute!important;inline-size:1px!important;block-size:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:flex;align-items:center;text-decoration:none;border:0;background:transparent;padding:0}:host .dot{inline-size:var(--si-sys-sizing-icon-md);line-height:var(--si-sys-sizing-icon-md)}:host span{color:var(--si-sys-text-primary)}:host:hover span{color:var(--si-sys-text-accent)}:host-context(.collapsible .collapsed){padding-block:var(--si-sys-sizing-spacing-y-40);padding-inline:var(--si-sys-sizing-spacing-x-50)}:host-context(.collapsible .collapsed):not(:disabled):hover{background:var(--si-sys-background-hover)}:host-context(.collapsible .collapsed) .dot,:host-context(.collapsible .collapsed) .icon{margin:var(--si-sys-sizing-spacing-y-10) var(--si-sys-sizing-spacing-x-10)}:host-context(si-side-panel-content.collapsed) .auto-hide{position:absolute!important;inline-size:1px!important;block-size:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSidePanelActionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSidePanelActionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'button[si-side-panel-action], a[si-side-panel-action]', imports: [SiIconComponent], template: `
     @if (disabled()) {
-      <div class="icon dot text-muted text-center">&bull;</div>
+      <div class="icon dot text-disabled text-center">&bull;</div>
     } @else {
       <span class="icon icon-stack">
         <si-icon [class]="iconColor()" [icon]="icon()" />
@@ -790,13 +832,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
           <si-icon [class]="stackedIconColor()" [icon]="stackedIcon" />
         }
       </span>
-      <span class="ms-2 auto-hide si-caption text-start">
+      <span class="ms-2 auto-hide si-body-sm text-start">
         <ng-content />
       </span>
     }
-  `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+  `, host: {
                         class: 'focus-inside'
-                    }, styles: [":host{display:flex;align-items:center;text-decoration:none;border:0;background:transparent;padding:0}:host .dot{inline-size:1.25rem;line-height:1.25rem}:host span{color:var(--element-text-primary)}:host:hover span{color:var(--element-text-active)}:host-context(.collapsible .collapsed){padding-block:8px;padding-inline:12px}:host-context(.collapsible .collapsed):not(:disabled):hover{background:var(--element-base-1-hover)}:host-context(.collapsible .collapsed) .dot,:host-context(.collapsible .collapsed) .icon{margin:2px}:host-context(si-side-panel-content.collapsed) .auto-hide{position:absolute!important;inline-size:1px!important;block-size:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}\n"] }]
+                    }, styles: [":host{display:flex;align-items:center;text-decoration:none;border:0;background:transparent;padding:0}:host .dot{inline-size:var(--si-sys-sizing-icon-md);line-height:var(--si-sys-sizing-icon-md)}:host span{color:var(--si-sys-text-primary)}:host:hover span{color:var(--si-sys-text-accent)}:host-context(.collapsible .collapsed){padding-block:var(--si-sys-sizing-spacing-y-40);padding-inline:var(--si-sys-sizing-spacing-x-50)}:host-context(.collapsible .collapsed):not(:disabled):hover{background:var(--si-sys-background-hover)}:host-context(.collapsible .collapsed) .dot,:host-context(.collapsible .collapsed) .icon{margin:var(--si-sys-sizing-spacing-y-10) var(--si-sys-sizing-spacing-x-10)}:host-context(si-side-panel-content.collapsed) .auto-hide{position:absolute!important;inline-size:1px!important;block-size:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}\n"] }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], stackedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "stackedIcon", required: false }] }], stackedIconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "stackedIconColor", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 /**
@@ -817,7 +859,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  *         icon="element-alarm-background-filled"
  *         iconColor="status-danger"
  *         stackedIcon="element-alarm-tick"
- *         stackedIconColor="text-body"
+ *         stackedIconColor="text-primary"
  *         (click)="action()"
  *       >
  *         Action
@@ -827,12 +869,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * ```
  */
 class SiSidePanelActionsComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSidePanelActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SiSidePanelActionsComponent, isStandalone: true, selector: "si-side-panel-actions", ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:flex;align-items:center;justify-content:space-between;padding-inline:16px}:host-context(.collapsible .collapsed){order:3;flex-direction:column;align-items:flex-start;padding:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSidePanelActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: SiSidePanelActionsComponent, isStandalone: true, selector: "si-side-panel-actions", ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:flex;align-items:center;justify-content:space-between;padding-inline:var(--si-sys-sizing-spacing-x-60)}:host-context(.collapsible .collapsed){order:3;flex-direction:column;align-items:flex-start;padding:0}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSidePanelActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-side-panel-actions', template: '<ng-content />', styles: [":host{display:flex;align-items:center;justify-content:space-between;padding-inline:var(--si-sys-sizing-spacing-x-60)}:host-context(.collapsible .collapsed){order:3;flex-direction:column;align-items:flex-start;padding:0}\n"] }]
+        }] });
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Back button for navigating from side-panel details to the previous view.
+ *
+ * @example
+ * ```html
+ * <button type="button" siSidePanelBackButton aria-label="Back" (click)="back()"></button>
+ * ```
+ */
+class SiSidePanelBackButtonComponent {
+    icons = addIcons({ elementLeft4 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSidePanelBackButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: SiSidePanelBackButtonComponent, isStandalone: true, selector: "button[siSidePanelBackButton], a[siSidePanelBackButton]", host: { classAttribute: "btn btn-icon btn-tertiary ms-4 auto-hide" }, ngImport: i0, template: '<si-icon class="flip-rtl" [icon]="icons.elementLeft4" /><ng-content />', isInline: true, dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSidePanelActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSidePanelBackButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-side-panel-actions', template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex;align-items:center;justify-content:space-between;padding-inline:16px}:host-context(.collapsible .collapsed){order:3;flex-direction:column;align-items:flex-start;padding:0}\n"] }]
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: 'button[siSidePanelBackButton], a[siSidePanelBackButton]',
+                    imports: [SiIconComponent],
+                    template: '<si-icon class="flip-rtl" [icon]="icons.elementLeft4" /><ng-content />',
+                    host: {
+                        class: 'btn btn-icon btn-tertiary ms-4 auto-hide'
+                    }
+                }]
         }] });
 
 /**
@@ -840,32 +912,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiSidePanelModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSidePanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: SiSidePanelModule, imports: [SiSidePanelComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSidePanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: SiSidePanelModule, imports: [SiSidePanelComponent,
             SiSidePanelContentComponent,
             SiSidePanelActionsComponent,
-            SiSidePanelActionComponent], exports: [SiSidePanelComponent,
+            SiSidePanelActionComponent,
+            SiSidePanelBackButtonComponent], exports: [SiSidePanelComponent,
             SiSidePanelContentComponent,
             SiSidePanelActionsComponent,
-            SiSidePanelActionComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSidePanelModule, imports: [SiSidePanelComponent,
+            SiSidePanelActionComponent,
+            SiSidePanelBackButtonComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSidePanelModule, imports: [SiSidePanelComponent,
             SiSidePanelContentComponent,
-            SiSidePanelActionComponent] });
+            SiSidePanelActionComponent,
+            SiSidePanelBackButtonComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSidePanelModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiSidePanelModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         SiSidePanelComponent,
                         SiSidePanelContentComponent,
                         SiSidePanelActionsComponent,
-                        SiSidePanelActionComponent
+                        SiSidePanelActionComponent,
+                        SiSidePanelBackButtonComponent
                     ],
                     exports: [
                         SiSidePanelComponent,
                         SiSidePanelContentComponent,
                         SiSidePanelActionsComponent,
-                        SiSidePanelActionComponent
+                        SiSidePanelActionComponent,
+                        SiSidePanelBackButtonComponent
                     ]
                 }]
         }] });
@@ -884,5 +961,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SiSidePanelActionComponent, SiSidePanelActionsComponent, SiSidePanelComponent, SiSidePanelContentComponent, SiSidePanelModule, SiSidePanelService };
+export { SiSidePanelActionComponent, SiSidePanelActionsComponent, SiSidePanelBackButtonComponent, SiSidePanelComponent, SiSidePanelContentComponent, SiSidePanelModule, SiSidePanelService };
 //# sourceMappingURL=siemens-element-ng-side-panel.mjs.map