@siemens/element-ng 51.3.0 → 51.5.0

package/fesm2022/siemens-element-ng-shadow-root.mjs

@@ -1,6 +1,7 @@
 import { OverlayContainer, Overlay } from '@angular/cdk/overlay';
 import * as i0 from '@angular/core';
 import { inject, ElementRef, DOCUMENT, DestroyRef, Directive } from '@angular/core';
+import { SI_THEME_DOM_TARGET, SiThemeService } from '@siemens/element-ng/theme';
 
 /**
  * Copyright (c) Siemens 2016 - 2026
@@ -36,10 +37,12 @@ class SiShadowRootDirective extends OverlayContainer {
     elementRef = inject(ElementRef);
     document = inject(DOCUMENT);
     destroyRef = inject(DestroyRef);
+    themeTarget = inject(SI_THEME_DOM_TARGET);
     // eslint-disable-next-line @typescript-eslint/naming-convention
     _createContainer() {
         const sourceShadow = this.elementRef.nativeElement.shadowRoot;
         const root = this.document.createElement('element-overlay-root');
+        const unregisterThemeTarget = this.themeTarget.registerElement?.(root);
         this.document.body.append(root);
         const shadow = root.attachShadow({ mode: 'open' });
         const shadowElement = this.document.createElement('div');
@@ -68,6 +71,7 @@ class SiShadowRootDirective extends OverlayContainer {
         observer.observe(sourceShadow, { childList: true });
         this.destroyRef.onDestroy(() => {
             observer.disconnect();
+            unregisterThemeTarget?.();
             root.remove();
         });
         this._containerElement = shadowElement;
@@ -83,6 +87,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 }]
         }] });
 
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+const createShadowRootThemeTarget = () => {
+    const element = inject(ElementRef).nativeElement;
+    const elements = new Set([element]);
+    const getShadowRoot = () => {
+        if (!element.shadowRoot) {
+            throw new Error('createShadowRootThemeTarget requires a component with Shadow DOM encapsulation.');
+        }
+        return element.shadowRoot;
+    };
+    return {
+        element,
+        rootSelector: ':host',
+        forEachElement: callback => elements.forEach(callback),
+        registerElement: registeredElement => {
+            elements.add(registeredElement);
+            registeredElement.classList.toggle('app--dark', element.classList.contains('app--dark'));
+            element.classList.forEach(className => {
+                if (className.startsWith('theme-')) {
+                    registeredElement.classList.add(className);
+                }
+            });
+            registeredElement.style.colorScheme = element.style.colorScheme;
+            return () => elements.delete(registeredElement);
+        },
+        getStyleElement: id => getShadowRoot().getElementById(id),
+        appendStyleElement: style => getShadowRoot().append(style),
+        updateColorScheme: colorScheme => elements.forEach(themeElement => themeElement.style.setProperty('color-scheme', colorScheme))
+    };
+};
+/**
+ * Provides the shadow root specific theme service with a dedicated theme target
+ * for components using Shadow DOM encapsulation.
+ * Use this when the component defines and loads the Element theme in its own shadow root instead
+ * of reusing the theme defined on `:root`.
+ */
+const provideShadowRootThemeTarget = () => {
+    return [
+        SiThemeService,
+        {
+            provide: SI_THEME_DOM_TARGET,
+            useFactory: createShadowRootThemeTarget
+        }
+    ];
+};
+
 /**
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
@@ -92,5 +145,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SiShadowRootDirective };
+export { SiShadowRootDirective, provideShadowRootThemeTarget };
 //# sourceMappingURL=siemens-element-ng-shadow-root.mjs.map

package/fesm2022/siemens-element-ng-shadow-root.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"siemens-element-ng-shadow-root.mjs","sources":["../../../../projects/element-ng/shadow-root/si-shadow-root.directive.ts","../../../../projects/element-ng/shadow-root/index.ts","../../../../projects/element-ng/shadow-root/siemens-element-ng-shadow-root.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { Overlay, OverlayContainer } from '@angular/cdk/overlay';\nimport { Directive, ElementRef, inject, DOCUMENT, DestroyRef } from '@angular/core';\n\n/**\n * This directive is intended to be used in applications that do NOT load element styles in the root HTML element.\n * So typically module federation, single SPA apps or apps that bootstrap element manually in a shadow root.\n *\n * This directive will ensure that overlays created within this shadow root will have the correct styles applied.\n * It does this by creating a new shadow root in the document body\n * and copying the styles from this shadow root to new one.\n *\n * With that approach, we can ensure that overlay can span the entire screen without being limited to the current shadow root.\n *\n * To use this directive, add it to the component / element which creates the shadow root which holds the element styles.\n *\n * @example\n * ```ts\n * @Component({\n *   selector: 'app-root',\n *   encapsulation: ViewEncapsulation.ShadowDom,\n *   hostDirectives: [SiShadowRootDirective],\n *   stylesUrls: ['element-styles.scss'],\n *   template: `<si-element-component />`\n * })\n * export class AppComponent { }\n *\n * ```\n *\n */\n@Directive({\n  selector: '[siShadowRoot]',\n  providers: [{ provide: OverlayContainer, useExisting: SiShadowRootDirective }, Overlay]\n})\nexport class SiShadowRootDirective extends OverlayContainer {\n  private elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  private document = inject(DOCUMENT);\n  private destroyRef = inject(DestroyRef);\n\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  protected override _createContainer(): void {\n    const sourceShadow = this.elementRef.nativeElement.shadowRoot!;\n    const root = this.document.createElement('element-overlay-root');\n    this.document.body.append(root);\n    const shadow = root.attachShadow({ mode: 'open' });\n    const shadowElement = this.document.createElement('div');\n    shadowElement.classList.add('cdk-overlay-container');\n    shadow.append(shadowElement);\n\n    const styleCopies = new Map<CSSStyleSheet, Node>();\n    const syncStyleElements = (): void => {\n      const sourceStyleSheets = new Set(sourceShadow.styleSheets);\n\n      styleCopies.forEach((copy, source) => {\n        if (!sourceStyleSheets.has(source)) {\n          copy.parentNode?.removeChild(copy);\n          styleCopies.delete(source);\n        }\n      });\n\n      sourceStyleSheets.forEach(source => {\n        let copy = styleCopies.get(source);\n        if (!copy) {\n          copy = source.ownerNode!.cloneNode(true);\n          styleCopies.set(source, copy);\n        }\n        shadow.insertBefore(copy, shadowElement);\n      });\n    };\n\n    syncStyleElements();\n    const observer = new MutationObserver(syncStyleElements);\n    observer.observe(sourceShadow, { childList: true });\n    this.destroyRef.onDestroy(() => {\n      observer.disconnect();\n      root.remove();\n    });\n\n    this._containerElement = shadowElement;\n  }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-shadow-root.directive';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"siemens-element-ng-shadow-root.mjs","sources":["../../../../projects/element-ng/shadow-root/si-shadow-root.directive.ts","../../../../projects/element-ng/shadow-root/si-shadow-root-theme-target.ts","../../../../projects/element-ng/shadow-root/index.ts","../../../../projects/element-ng/shadow-root/siemens-element-ng-shadow-root.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { Overlay, OverlayContainer } from '@angular/cdk/overlay';\nimport { Directive, ElementRef, inject, DOCUMENT, DestroyRef } from '@angular/core';\nimport { SI_THEME_DOM_TARGET } from '@siemens/element-ng/theme';\n\n/**\n * This directive is intended to be used in applications that do NOT load element styles in the root HTML element.\n * So typically module federation, single SPA apps or apps that bootstrap element manually in a shadow root.\n *\n * This directive will ensure that overlays created within this shadow root will have the correct styles applied.\n * It does this by creating a new shadow root in the document body\n * and copying the styles from this shadow root to new one.\n *\n * With that approach, we can ensure that overlay can span the entire screen without being limited to the current shadow root.\n *\n * To use this directive, add it to the component / element which creates the shadow root which holds the element styles.\n *\n * @example\n * ```ts\n * @Component({\n *   selector: 'app-root',\n *   encapsulation: ViewEncapsulation.ShadowDom,\n *   hostDirectives: [SiShadowRootDirective],\n *   stylesUrls: ['element-styles.scss'],\n *   template: `<si-element-component />`\n * })\n * export class AppComponent { }\n *\n * ```\n *\n */\n@Directive({\n  selector: '[siShadowRoot]',\n  providers: [{ provide: OverlayContainer, useExisting: SiShadowRootDirective }, Overlay]\n})\nexport class SiShadowRootDirective extends OverlayContainer {\n  private elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  private document = inject(DOCUMENT);\n  private destroyRef = inject(DestroyRef);\n  private themeTarget = inject(SI_THEME_DOM_TARGET);\n\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  protected override _createContainer(): void {\n    const sourceShadow = this.elementRef.nativeElement.shadowRoot!;\n    const root = this.document.createElement('element-overlay-root');\n    const unregisterThemeTarget = this.themeTarget.registerElement?.(root);\n    this.document.body.append(root);\n    const shadow = root.attachShadow({ mode: 'open' });\n    const shadowElement = this.document.createElement('div');\n    shadowElement.classList.add('cdk-overlay-container');\n    shadow.append(shadowElement);\n\n    const styleCopies = new Map<CSSStyleSheet, Node>();\n    const syncStyleElements = (): void => {\n      const sourceStyleSheets = new Set(sourceShadow.styleSheets);\n\n      styleCopies.forEach((copy, source) => {\n        if (!sourceStyleSheets.has(source)) {\n          copy.parentNode?.removeChild(copy);\n          styleCopies.delete(source);\n        }\n      });\n\n      sourceStyleSheets.forEach(source => {\n        let copy = styleCopies.get(source);\n        if (!copy) {\n          copy = source.ownerNode!.cloneNode(true);\n          styleCopies.set(source, copy);\n        }\n        shadow.insertBefore(copy, shadowElement);\n      });\n    };\n\n    syncStyleElements();\n    const observer = new MutationObserver(syncStyleElements);\n    observer.observe(sourceShadow, { childList: true });\n    this.destroyRef.onDestroy(() => {\n      observer.disconnect();\n      unregisterThemeTarget?.();\n      root.remove();\n    });\n\n    this._containerElement = shadowElement;\n  }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { ElementRef, inject, Provider } from '@angular/core';\nimport { SI_THEME_DOM_TARGET, SiThemeDomTarget, SiThemeService } from '@siemens/element-ng/theme';\n\nconst createShadowRootThemeTarget = (): SiThemeDomTarget => {\n  const element = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n  const elements = new Set([element]);\n  const getShadowRoot = (): ShadowRoot => {\n    if (!element.shadowRoot) {\n      throw new Error(\n        'createShadowRootThemeTarget requires a component with Shadow DOM encapsulation.'\n      );\n    }\n    return element.shadowRoot;\n  };\n\n  return {\n    element,\n    rootSelector: ':host',\n    forEachElement: callback => elements.forEach(callback),\n    registerElement: registeredElement => {\n      elements.add(registeredElement);\n      registeredElement.classList.toggle('app--dark', element.classList.contains('app--dark'));\n      element.classList.forEach(className => {\n        if (className.startsWith('theme-')) {\n          registeredElement.classList.add(className);\n        }\n      });\n      registeredElement.style.colorScheme = element.style.colorScheme;\n      return () => elements.delete(registeredElement);\n    },\n    getStyleElement: id => getShadowRoot().getElementById(id) as HTMLStyleElement | null,\n    appendStyleElement: style => getShadowRoot().append(style),\n    updateColorScheme: colorScheme =>\n      elements.forEach(themeElement => themeElement.style.setProperty('color-scheme', colorScheme))\n  };\n};\n\n/**\n * Provides the shadow root specific theme service with a dedicated theme target\n * for components using Shadow DOM encapsulation.\n * Use this when the component defines and loads the Element theme in its own shadow root instead\n * of reusing the theme defined on `:root`.\n */\nexport const provideShadowRootThemeTarget = (): Provider => {\n  return [\n    SiThemeService,\n    {\n      provide: SI_THEME_DOM_TARGET,\n      useFactory: createShadowRootThemeTarget\n    }\n  ];\n};\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-shadow-root.directive';\nexport * from './si-shadow-root-theme-target';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -1,10 +1,11 @@
 import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, inject, PLATFORM_ID, Injectable, input, booleanAttribute, model, output, computed, viewChild, ElementRef, ChangeDetectorRef, DestroyRef, DOCUMENT as DOCUMENT$1, effect, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { signal, inject, PLATFORM_ID, Injectable, input, booleanAttribute, model, output, computed, contentChild, viewChild, ElementRef, ChangeDetectorRef, DestroyRef, DOCUMENT as DOCUMENT$1, effect, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { BehaviorSubject, Subject, EMPTY, timer } from 'rxjs';
 import * as i1 from '@angular/cdk/portal';
 import { CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { SI_NAVBAR_VERTICAL_LAYOUT } from '@siemens/element-ng/common';
 import { ResizeObserverService, BOOTSTRAP_BREAKPOINTS } from '@siemens/element-ng/resize-observer';
 import { t, SiTranslatePipe } from '@siemens/element-translate-ng/translate';
 import { debounceTime } from 'rxjs/operators';
@@ -269,6 +270,11 @@ class SiSidePanelComponent {
     ...(ngDevMode ? [{ debugName: "isFullscreenOverlay" }] : /* istanbul ignore next */ []));
     showTempContent = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showTempContent" }] : /* istanbul ignore next */ []));
+    navbarLayout = computed(() => this.enclosingNavbar ?? this.projectedNavbar(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navbarLayout" }] : /* istanbul ignore next */ []));
+    enclosingNavbar = inject(SI_NAVBAR_VERTICAL_LAYOUT, { optional: true });
+    projectedNavbar = contentChild(SI_NAVBAR_VERTICAL_LAYOUT, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "projectedNavbar" }] : /* istanbul ignore next */ []));
     panelElement = viewChild.required('sidePanel', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelElement" }] : /* istanbul ignore next */ []));
     contentElement = viewChild.required('content', /* @ts-ignore */
@@ -466,7 +472,7 @@ class SiSidePanelComponent {
         }
     }
     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-color-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-color-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-color-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 });
+    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-navbar-collapsed": "navbarLayout()?.collapsed()", "class.rpanel-navbar-text-only": "navbarLayout()?.textOnly()", "class.rpanel-navbar-hidden": "!navbarLayout()?.visible()", "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" }, queries: [{ propertyName: "projectedNavbar", first: true, predicate: SI_NAVBAR_VERTICAL_LAYOUT, descendants: true, isSignal: true }], 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{--element-navbar-vertical-spacing: 0}@media(min-width:576px){:host.rpanel-fullscreen-overlay:not(.rpanel-navbar-text-only){--element-navbar-vertical-spacing: calc(1.5rem + 2 * var(--si-sys-sizing-spacing-x-50))}}@media(min-width:992px){:host.rpanel-fullscreen-overlay:not(.rpanel-navbar-collapsed){--element-navbar-vertical-spacing: 240px}}:host.rpanel-fullscreen-overlay.rpanel-navbar-hidden{--element-navbar-vertical-spacing: 0}:host.rpanel-fullscreen-overlay{--rpanel-width-fullscreen: calc(100vi - var(--element-navbar-vertical-spacing, 0px))}: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-color-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-color-effects-shadow-2)}:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel,:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel>.inner{inline-size:var(--rpanel-width-fullscreen, 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-color-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: "22.0.8", ngImport: i0, type: SiSidePanelComponent, decorators: [{
             type: Component,
@@ -484,6 +490,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         '[class.collapsible-temp]': 'collapsible() && this.showTempContent()',
                         '[class.rpanel-hidden]': 'isHidden()',
                         '[class.rpanel-fullscreen-overlay]': 'isFullscreenOverlay()',
+                        '[class.rpanel-navbar-collapsed]': 'navbarLayout()?.collapsed()',
+                        '[class.rpanel-navbar-text-only]': 'navbarLayout()?.textOnly()',
+                        '[class.rpanel-navbar-hidden]': '!navbarLayout()?.visible()',
                         '[class.rpanel-resize-xs]': 'isXs()',
                         '[class.rpanel-resize-sm]': 'isSm()',
                         '[class.rpanel-resize-md]': 'isMd()',
@@ -491,8 +500,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.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(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-color-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-color-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-color-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', { ...{
+                    }, 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{--element-navbar-vertical-spacing: 0}@media(min-width:576px){:host.rpanel-fullscreen-overlay:not(.rpanel-navbar-text-only){--element-navbar-vertical-spacing: calc(1.5rem + 2 * var(--si-sys-sizing-spacing-x-50))}}@media(min-width:992px){:host.rpanel-fullscreen-overlay:not(.rpanel-navbar-collapsed){--element-navbar-vertical-spacing: 240px}}:host.rpanel-fullscreen-overlay.rpanel-navbar-hidden{--element-navbar-vertical-spacing: 0}:host.rpanel-fullscreen-overlay{--rpanel-width-fullscreen: calc(100vi - var(--element-navbar-vertical-spacing, 0px))}: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-color-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-color-effects-shadow-2)}:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel,:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel>.inner{inline-size:var(--rpanel-width-fullscreen, 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-color-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"] }], projectedNavbar: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SI_NAVBAR_VERTICAL_LAYOUT), { isSignal: true }] }], 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', { ...{
                             read: CdkPortalOutlet
@@ -669,6 +678,7 @@ class SiSidePanelContentComponent {
      * For the animation we need to wait until the resize is done.
      */
     resizeAnimationDelay = 500;
+    document = inject(DOCUMENT$1);
     destroyRef = inject(DestroyRef);
     breakpointObserver = inject(BreakpointObserver);
     expandedTimeout;
@@ -726,7 +736,7 @@ class SiSidePanelContentComponent {
     toggleSidePanel(event) {
         if (event?.detail !== 0) {
             // Blur except if triggered by keyboard
-            document?.activeElement?.blur();
+            this.document.activeElement?.blur();
         }
         if (this.service.isTemporaryOpen()) {
             this.service.hideTemporaryContent();
@@ -736,7 +746,7 @@ class SiSidePanelContentComponent {
         }
     }
     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-color-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-color-text-primary)}.rpanel-statusaction:hover span{color:var(--si-sys-color-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-color-background-1);box-shadow:var(--si-sys-color-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 });
+    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.rpanel-fullscreen-overlay{border-inline-start:1px solid var(--si-sys-color-border-4)}: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-color-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-color-text-primary)}.rpanel-statusaction:hover span{color:var(--si-sys-color-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-color-background-1);box-shadow:var(--si-sys-color-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: "22.0.8", ngImport: i0, type: SiSidePanelContentComponent, decorators: [{
             type: Component,
@@ -754,7 +764,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         '[class.enable-mobile]': 'enableMobile()',
                         '[class.rpanel-fullscreen-overlay]': 'isFullscreen()',
                         '[id]': 'panelContentId'
-                    }, 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-color-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-color-text-primary)}.rpanel-statusaction:hover span{color:var(--si-sys-color-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-color-background-1);box-shadow:var(--si-sys-color-effects-shadow-1);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.rpanel-fullscreen-overlay{border-inline-start:1px solid var(--si-sys-color-border-4)}: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-color-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-color-text-primary)}.rpanel-statusaction:hover span{color:var(--si-sys-color-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-color-background-1);box-shadow:var(--si-sys-color-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"] }] } });
 
 /**