@siemens/element-ng 49.2.0 → 49.4.0

package/fesm2022/siemens-element-ng-search-bar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"siemens-element-ng-search-bar.mjs","sources":["../../../../projects/element-ng/search-bar/si-search-bar.component.ts","../../../../projects/element-ng/search-bar/si-search-bar.component.html","../../../../projects/element-ng/search-bar/si-search-bar.module.ts","../../../../projects/element-ng/search-bar/index.ts","../../../../projects/element-ng/search-bar/siemens-element-ng-search-bar.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  HostListener,\n  input,\n  numberAttribute,\n  OnChanges,\n  OnDestroy,\n  OnInit,\n  output,\n  signal,\n  SimpleChanges,\n  viewChild\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { elementCancel, elementSearch } from '@siemens/element-icons';\nimport { BackgroundColorVariant } from '@siemens/element-ng/common';\nimport { addIcons, SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';\nimport { Subject } from 'rxjs';\nimport { debounceTime } from 'rxjs/operators';\n\n@Component({\n  selector: 'si-search-bar',\n  imports: [SiIconComponent, SiTranslatePipe],\n  templateUrl: './si-search-bar.component.html',\n  styleUrl: './si-search-bar.component.scss',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: SiSearchBarComponent,\n      multi: true\n    }\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class.readonly]': 'readonly()'\n  }\n})\nexport class SiSearchBarComponent implements OnInit, OnDestroy, ControlValueAccessor, OnChanges {\n  private readonly inputRef = viewChild.required<ElementRef<HTMLInputElement>>('inputRef');\n  private debouncer = new Subject<string>();\n  private readonly disabledNgControl = signal(false);\n\n  /**\n   * Time unit change of search input takes effect.\n   *\n   * @defaultValue 400\n   */\n  readonly debounceTime = input(400, { transform: numberAttribute });\n  /**\n   * Prohibited characters restricting search.\n   */\n  readonly prohibitedCharacters = input<string>();\n  /**\n   * Define search input placeholder.\n   *\n   * @defaultValue ''\n   */\n  readonly placeholder = input('');\n  /**\n   * Display search icon before search input.\n   *\n   * @defaultValue false\n   */\n  readonly showIcon = input(false, { transform: booleanAttribute });\n  /**\n   * Whether the search is tabbable or not.\n   *\n   * @defaultValue true\n   */\n  readonly tabbable = input(true, { transform: booleanAttribute });\n\n  /**\n   * Define search input content.\n   */\n  readonly value = input<string>();\n\n  /** @defaultValue false */\n  readonly readonly = input(false, { transform: booleanAttribute });\n  /**\n   * Color to use for component background\n   *\n   * @defaultValue 'base-1'\n   */\n  readonly colorVariant = input<BackgroundColorVariant>('base-1');\n\n  /** @defaultValue false */\n  // eslint-disable-next-line @angular-eslint/no-input-rename\n  readonly disabledInput = input(false, { alias: 'disabled', transform: booleanAttribute });\n\n  /**\n   * Aria label for the clear button.\n   *\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_SEARCH_BAR.CLEAR_BUTTON:clear`)\n   * ```\n   */\n  readonly clearButtonAriaLabel = input(t(() => $localize`:@@SI_SEARCH_BAR.CLEAR_BUTTON:clear`));\n\n  /**\n   * Output callback event will provide you with search term if search input changes.\n   */\n  readonly searchChange = output<string>();\n\n  protected isInvalid = false;\n  protected inFocus = false;\n\n  protected onChange = (val: any): void => {};\n  protected onTouch = (): void => {};\n\n  protected readonly disabled = computed(() => this.disabledInput() || this.disabledNgControl());\n\n  protected readonly searchValue = signal('');\n  protected readonly icons = addIcons({ elementCancel, elementSearch });\n\n  /** @internal */\n  writeValue(value: string): void {\n    this.writeSearchValue(value ?? '');\n  }\n\n  /** @internal */\n  registerOnChange(fn: any): void {\n    this.onChange = fn;\n  }\n\n  /** @internal */\n  registerOnTouched(fn: () => void): void {\n    this.onTouch = fn;\n  }\n\n  /** @internal */\n  setDisabledState(disabled: boolean): void {\n    this.disabledNgControl.set(disabled);\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes.value) {\n      this.writeSearchValue(changes.value.currentValue);\n    }\n  }\n\n  ngOnInit(): void {\n    this.debouncer.pipe(debounceTime(this.debounceTime())).subscribe(value => {\n      this.setSearch(value);\n    });\n  }\n\n  ngOnDestroy(): void {\n    this.debouncer.complete();\n  }\n\n  private setSearch(value?: string): void {\n    value ??= '';\n    if (value !== this.searchValue()) {\n      this.searchValue.set(value);\n      this.inputRef().nativeElement.value = value;\n      this.onChange(value);\n      this.searchChange.emit(value);\n    }\n  }\n\n  private isProhibitedCharactersUsed(searchString: string | null): boolean {\n    const prohibitedCharacters = this.prohibitedCharacters();\n    if (!prohibitedCharacters || !searchString) {\n      return false;\n    }\n\n    for (const prohibitedCharacter of prohibitedCharacters) {\n      if (searchString.includes(prohibitedCharacter)) {\n        return true;\n      }\n    }\n\n    return false;\n  }\n\n  /** @internal */\n  @HostListener('focus')\n  focus(): void {\n    this.inputRef().nativeElement.focus();\n  }\n\n  protected onCancelFocus(event: Event): void {\n    event.stopPropagation();\n  }\n\n  protected input(event: Event): void {\n    const value = (event.target as HTMLInputElement).value;\n    if (!this.isProhibitedCharactersUsed(value)) {\n      this.debouncer.next(value);\n    }\n  }\n\n  protected onBlur(): void {\n    this.inFocus = false;\n    this.onTouch();\n  }\n\n  protected resetForm(): void {\n    this.setSearch('');\n  }\n\n  protected writeSearchValue(value: string): void {\n    this.searchValue.set(value);\n    this.inputRef().nativeElement.value = value;\n  }\n}\n","<div class=\"position-relative\" [class.disabled]=\"disabled()\" [class.focus]=\"inFocus\">\n  @if (showIcon()) {\n    <si-icon class=\"search-bar-icon icon text-secondary\" [icon]=\"icons.elementSearch\" />\n  }\n  <input\n    #inputRef\n    type=\"text\"\n    class=\"form-control\"\n    [disabled]=\"disabled()\"\n    [placeholder]=\"placeholder()\"\n    [class.dark-background]=\"colorVariant() === 'base-0'\"\n    [class.ps-9]=\"showIcon()\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.icon-end]=\"searchValue()\"\n    [attr.tabindex]=\"tabbable() ? '' : '-1'\"\n    [readonly]=\"readonly()\"\n    (focus)=\"inFocus = true\"\n    (blur)=\"onBlur()\"\n    (input)=\"input($event)\"\n  />\n  @if (searchValue()) {\n    <button\n      type=\"button\"\n      class=\"btn btn-icon btn-sm btn-ghost cancel-button\"\n      [attr.aria-label]=\"clearButtonAriaLabel() | translate\"\n      [disabled]=\"disabled() || readonly()\"\n      (click)=\"resetForm()\"\n      (focusin)=\"onCancelFocus($event)\"\n    >\n      <si-icon [icon]=\"icons.elementCancel\" />\n    </button>\n  }\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiSearchBarComponent } from './si-search-bar.component';\n\n@NgModule({\n  imports: [SiSearchBarComponent],\n  exports: [SiSearchBarComponent]\n})\nexport class SiSearchBarModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-search-bar.component';\nexport * from './si-search-bar.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"siemens-element-ng-search-bar.mjs","sources":["../../../../projects/element-ng/search-bar/si-search-bar.component.ts","../../../../projects/element-ng/search-bar/si-search-bar.component.html","../../../../projects/element-ng/search-bar/si-search-bar.module.ts","../../../../projects/element-ng/search-bar/index.ts","../../../../projects/element-ng/search-bar/siemens-element-ng-search-bar.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  HostListener,\n  input,\n  numberAttribute,\n  OnChanges,\n  OnDestroy,\n  OnInit,\n  output,\n  signal,\n  SimpleChanges,\n  viewChild\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { elementCancel, elementSearch } from '@siemens/element-icons';\nimport { BackgroundColorVariant } from '@siemens/element-ng/common';\nimport { addIcons, SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';\nimport { Subject } from 'rxjs';\nimport { debounceTime } from 'rxjs/operators';\n\n@Component({\n  selector: 'si-search-bar',\n  imports: [SiIconComponent, SiTranslatePipe],\n  templateUrl: './si-search-bar.component.html',\n  styleUrl: './si-search-bar.component.scss',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: SiSearchBarComponent,\n      multi: true\n    }\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class.readonly]': 'readonly()'\n  }\n})\nexport class SiSearchBarComponent implements OnInit, OnDestroy, ControlValueAccessor, OnChanges {\n  private readonly inputRef = viewChild.required<ElementRef<HTMLInputElement>>('inputRef');\n  private debouncer = new Subject<string>();\n  private readonly disabledNgControl = signal(false);\n\n  /**\n   * Time unit change of search input takes effect.\n   *\n   * @defaultValue 400\n   */\n  readonly debounceTime = input(400, { transform: numberAttribute });\n  /**\n   * Prohibited characters restricting search.\n   */\n  readonly prohibitedCharacters = input<string>();\n  /**\n   * Define search input placeholder.\n   *\n   * @defaultValue ''\n   */\n  readonly placeholder = input('');\n  /**\n   * Display search icon before search input.\n   *\n   * @defaultValue false\n   */\n  readonly showIcon = input(false, { transform: booleanAttribute });\n  /**\n   * Whether the search is tabbable or not.\n   *\n   * @defaultValue true\n   */\n  readonly tabbable = input(true, { transform: booleanAttribute });\n\n  /**\n   * Define search input content.\n   */\n  readonly value = input<string>();\n\n  /** @defaultValue false */\n  readonly readonly = input(false, { transform: booleanAttribute });\n  /**\n   * Color to use for component background\n   *\n   * @defaultValue 'base-1'\n   */\n  readonly colorVariant = input<BackgroundColorVariant>('base-1');\n\n  /** @defaultValue false */\n  // eslint-disable-next-line @angular-eslint/no-input-rename\n  readonly disabledInput = input(false, { alias: 'disabled', transform: booleanAttribute });\n\n  /**\n   * Aria label for the clear button.\n   *\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_SEARCH_BAR.CLEAR_BUTTON:clear`)\n   * ```\n   */\n  readonly clearButtonAriaLabel = input(t(() => $localize`:@@SI_SEARCH_BAR.CLEAR_BUTTON:clear`));\n\n  /**\n   * Output callback event will provide you with search term if search input changes.\n   */\n  readonly searchChange = output<string>();\n\n  protected isInvalid = false;\n  protected inFocus = false;\n\n  protected onChange = (val: any): void => {};\n  protected onTouch = (): void => {};\n\n  protected readonly disabled = computed(() => this.disabledInput() || this.disabledNgControl());\n\n  protected readonly searchValue = signal('');\n  protected readonly icons = addIcons({ elementCancel, elementSearch });\n\n  /** @internal */\n  writeValue(value: string): void {\n    this.writeSearchValue(value ?? '');\n  }\n\n  /** @internal */\n  registerOnChange(fn: any): void {\n    this.onChange = fn;\n  }\n\n  /** @internal */\n  registerOnTouched(fn: () => void): void {\n    this.onTouch = fn;\n  }\n\n  /** @internal */\n  setDisabledState(disabled: boolean): void {\n    this.disabledNgControl.set(disabled);\n  }\n\n  ngOnChanges(changes: SimpleChanges<this>): void {\n    if (changes.value) {\n      this.writeSearchValue(changes.value.currentValue ?? '');\n    }\n  }\n\n  ngOnInit(): void {\n    this.debouncer.pipe(debounceTime(this.debounceTime())).subscribe(value => {\n      this.setSearch(value);\n    });\n  }\n\n  ngOnDestroy(): void {\n    this.debouncer.complete();\n  }\n\n  private setSearch(value?: string): void {\n    value ??= '';\n    if (value !== this.searchValue()) {\n      this.searchValue.set(value);\n      this.inputRef().nativeElement.value = value;\n      this.onChange(value);\n      this.searchChange.emit(value);\n    }\n  }\n\n  private isProhibitedCharactersUsed(searchString: string | null): boolean {\n    const prohibitedCharacters = this.prohibitedCharacters();\n    if (!prohibitedCharacters || !searchString) {\n      return false;\n    }\n\n    for (const prohibitedCharacter of prohibitedCharacters) {\n      if (searchString.includes(prohibitedCharacter)) {\n        return true;\n      }\n    }\n\n    return false;\n  }\n\n  /** @internal */\n  @HostListener('focus')\n  focus(): void {\n    this.inputRef().nativeElement.focus();\n  }\n\n  protected onCancelFocus(event: Event): void {\n    event.stopPropagation();\n  }\n\n  protected input(event: Event): void {\n    const value = (event.target as HTMLInputElement).value;\n    if (!this.isProhibitedCharactersUsed(value)) {\n      if (this.debounceTime() > 0) {\n        this.debouncer.next(value);\n      } else {\n        this.setSearch(value);\n      }\n    }\n  }\n\n  protected onBlur(): void {\n    this.inFocus = false;\n    this.onTouch();\n  }\n\n  protected resetForm(): void {\n    this.setSearch('');\n  }\n\n  protected writeSearchValue(value: string): void {\n    this.searchValue.set(value);\n    this.inputRef().nativeElement.value = value;\n  }\n}\n","<div class=\"position-relative\" [class.disabled]=\"disabled()\" [class.focus]=\"inFocus\">\n  @if (showIcon()) {\n    <si-icon class=\"search-bar-icon icon text-secondary\" [icon]=\"icons.elementSearch\" />\n  }\n  <input\n    #inputRef\n    type=\"text\"\n    class=\"form-control\"\n    [disabled]=\"disabled()\"\n    [placeholder]=\"placeholder()\"\n    [class.dark-background]=\"colorVariant() === 'base-0'\"\n    [class.icon-start]=\"showIcon()\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.icon-end]=\"searchValue()\"\n    [attr.tabindex]=\"tabbable() ? '' : '-1'\"\n    [readonly]=\"readonly()\"\n    (focus)=\"inFocus = true\"\n    (blur)=\"onBlur()\"\n    (input)=\"input($event)\"\n  />\n  @if (searchValue()) {\n    <button\n      type=\"button\"\n      class=\"btn btn-icon btn-sm btn-ghost cancel-button\"\n      [attr.aria-label]=\"clearButtonAriaLabel() | translate\"\n      [disabled]=\"disabled() || readonly()\"\n      (click)=\"resetForm()\"\n      (focusin)=\"onCancelFocus($event)\"\n    >\n      <si-icon [icon]=\"icons.elementCancel\" />\n    </button>\n  }\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiSearchBarComponent } from './si-search-bar.component';\n\n@NgModule({\n  imports: [SiSearchBarComponent],\n  exports: [SiSearchBarComponent]\n})\nexport class SiSearchBarModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-search-bar.component';\nexport * from './si-search-bar.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 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, Component, NgModule } from '@angular/core';
+import { signal, inject, PLATFORM_ID, Injectable, input, booleanAttribute, model, output, computed, viewChild, ElementRef, ChangeDetectorRef, DestroyRef, DOCUMENT as DOCUMENT$1, effect, Component, ChangeDetectionStrategy, 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';
@@ -513,6 +513,26 @@ class SiSidePanelContentComponent {
     /**
      * Status icons/actions
      *
+     * @deprecated Use the {@link SiSidePanelActionsComponent} instead:
+     *
+     * ```html
+     * <si-side-panel-content>
+     *   <si-side-panel-actions>
+     *       <button
+     *         type="button"
+     *         si-side-panel-action
+     *         icon="element-alarm-background-filled"
+     *         iconColor="status-danger"
+     *         stackedIcon="element-alarm-tick"
+     *         stackedIconColor="text-body"
+     *         (click)="action()"
+     *       >
+     *         Action
+     *       </button>
+     *   </si-side-panel-actions>
+     * </si-side-panel-content>
+     * ```
+     *
      * @defaultValue []
      */
     statusActions = input([], ...(ngDevMode ? [{ debugName: "statusActions" }] : []));
@@ -676,40 +696,174 @@ class SiSidePanelContentComponent {
         }
     }
     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()" } }, 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-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-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-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-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-ghost mx-4\"\n        [attr.aria-label]=\"toggleItemLabel() | translate\"\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\">{{ 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  @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: ["@charset \"UTF-8\";button{color:var(--element-text-primary)}:is(.btn,.btn-close){line-height:1.1428571429;font-weight:600;padding-block:calc(8px - var(--btn-border-width, 0px));padding-inline:calc(16px - var(--btn-border-width, 0px));font-size:.875rem;display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;vertical-align:middle;background-color:var(--btn-bg, transparent);color:var(--btn-color, inherit);border:var(--btn-border-width, 0) solid var(--btn-border-color, transparent);border-radius:var(--element-button-radius);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){:is(.btn,.btn-close){transition:none}}:is(.btn,.btn-close):is(:disabled,.disabled),fieldset:disabled :is(.btn,.btn-close){pointer-events:none;opacity:var(--element-action-disabled-opacity)}:is(.btn,.btn-close):is(:hover,:active){text-decoration:none}:is(.btn,.btn-close):not(:is(:disabled,.disabled)):is(:hover,.hover){color:var(--btn-color-hover, inherit);background:var(--btn-bg-hover, inherit);border-color:var(--btn-border-color-hover)}:is(.btn,.btn-close):not(:is(:disabled,.disabled)):is(:active,.active){color:var(--btn-color-active, inherit);background:var(--btn-bg-active, inherit);border-color:var(--btn-border-color-active)}:is(.btn,.btn-close) .icon{margin-block:-4px;margin-inline:-4px 4px}.btn:not(:is(.btn-circle,.btn-link,.btn-close,.btn-icon)){min-inline-size:80px}.btn-primary{--btn-bg: var(--element-action-primary);--btn-bg-hover: var(--element-action-primary-hover);--btn-bg-active: var(--element-action-primary-active);--btn-color: var(--element-action-primary-text);--btn-color-hover: var(--element-action-primary-text);--btn-color-active: var(--element-action-primary-text)}.btn-danger{--btn-bg: var(--element-action-danger);--btn-bg-hover: var(--element-action-danger-hover);--btn-bg-active: var(--element-action-danger-active);--btn-color: var(--element-action-danger-text);--btn-color-hover: var(--element-action-danger-text);--btn-color-active: var(--element-action-danger-text)}.btn-warning{--btn-bg: var(--element-action-warning);--btn-bg-hover: var(--element-action-warning-hover);--btn-bg-active: var(--element-action-warning-active);--btn-color: var(--element-action-warning-text);--btn-color-hover: var(--element-action-warning-text);--btn-color-active: var(--element-action-warning-text)}.btn-secondary,.btn-secondary-warning,.btn-secondary-danger{--btn-bg: var(--element-action-secondary);--btn-bg-hover: var(--element-action-secondary-hover);--btn-bg-active: var(--element-action-secondary-active);--btn-color: var(--element-action-secondary-text);--btn-color-hover: var(--element-action-secondary-text-hover);--btn-color-active: var(--element-action-primary-active);--btn-border-width: 1px;--btn-border-color: var(--element-action-secondary-border);--btn-border-color-hover: var(--element-action-secondary-border-hover);--btn-border-color-active: var(--element-action-secondary-border-active)}.btn-tertiary,.btn-tertiary-warning,.btn-tertiary-danger{--btn-bg: transparent;--btn-bg-hover: var(--element-action-secondary-hover);--btn-bg-active: var(--element-action-secondary-active);--btn-color: var(--element-action-secondary-text);--btn-color-hover: var(--element-action-secondary-text-hover);--btn-color-active: var(--element-action-primary-active)}.btn-secondary-warning,.btn-tertiary-warning{--btn-bg-hover: var(--element-action-warning-hover);--btn-bg-active: var(--element-action-warning-active);--btn-color: var(--element-action-secondary-warning);--btn-color-hover: var(--element-action-warning-text);--btn-color-active: var(--element-action-warning-text);--btn-border-color: var(--element-action-secondary-warning);--btn-border-color-hover: var(--element-action-warning-hover);--btn-border-color-active: var(--element-action-warning-active)}.btn-secondary-danger,.btn-tertiary-danger{--btn-bg-hover: var(--element-action-danger-hover);--btn-bg-active: var(--element-action-danger-active);--btn-color: var(--element-action-secondary-danger);--btn-color-hover: var(--element-action-danger-text);--btn-color-active: var(--element-action-danger-text);--btn-border-color: var(--element-action-secondary-danger);--btn-border-color-hover: var(--element-action-danger-hover);--btn-border-color-active: var(--element-action-danger-active)}.btn-link{--btn-color: var(--element-ui-0);--btn-color-hover: var(--element-ui-0-hover);--btn-color-active: var(--element-action-primary-active);font-weight:400;justify-content:flex-start;text-decoration:none;padding:0}.btn-link:is(:hover,:active){text-decoration:underline}.btn-link:is(:disabled,.disabled){--btn-color: var(--element-text-disabled);opacity:1}.btn:is(.btn-circle,.btn-icon,.btn-close){display:inline-flex;padding:0;flex-shrink:0}.btn:is(.btn-circle,.btn-icon,.btn-close) .icon{margin-inline:0}.btn-icon{border-radius:var(--element-button-radius)}.btn-circle{border-radius:50%}.btn-circle,.btn-icon{inline-size:32px;block-size:32px;font-size:1.25rem}.btn-circle.btn-lg,.btn-icon.btn-lg{inline-size:40px;block-size:40px;font-size:1.5rem}.btn-circle.btn-sm,.btn-icon.btn-sm{inline-size:24px;block-size:24px;font-size:1.25rem}.btn-circle .icon,.btn-icon .icon{margin-block:0;margin-inline:0}.btn-circle.btn-ghost,.btn-icon.btn-ghost,.btn-close{--btn-bg: transparent;--btn-bg-hover: var(--element-base-1-hover);--btn-bg-active: var(--element-base-1-selected);--btn-color: var(--element-ui-1);--btn-color-active: var(--element-ui-1)}.btn-close.btn-tertiary{--btn-bg-hover: var(--element-action-secondary-hover);--btn-bg-active: var(--element-action-secondary-active);--btn-color: var(--element-action-secondary-text);--btn-color-hover: var(--element-action-secondary-text-hover);--btn-color-active: var(--element-action-primary-active)}.btn-lg{font-size:1rem;line-height:1.5}.btn-sm{font-size:.75rem;line-height:8px}.btn-close{inline-size:32px;block-size:32px;font-size:1.25rem;font-weight:400}.btn-close:before{content:\"\\2715\";font-size:1rem}.btn-close>*{display:none!important}.btn-input{--btn-bg: var(--element-base-1);--btn-bg-hover: var(--element-base-1);--btn-bg-active: var(--element-base-1);--btn-color: var(--element-text-primary);--btn-color-hover: var(--element-text-primary);--btn-color-active: var(--element-text-primary);--btn-border-width: 1px;--btn-border-color: var(--element-ui-2);--btn-border-color-hover: var(--element-ui-1);--btn-border-color-active: var(--element-ui-1);font-size:.875rem;font-weight:400;line-height:1.1428571429;padding-block:7px;padding-inline:7px;border-radius:var(--element-input-radius);justify-content:flex-start}.btn-input:is(:disabled,.disabled){--btn-border-color: var(--element-ui-3);--btn-color: var(--element-text-disabled);opacity:unset}.btn-input:focus{--btn-border-color: var(--element-ui-1)}: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)}.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{font-size:12px;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:40px}: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(48px + 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: SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { 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", "clearButtonAriaLabel"], outputs: ["searchChange"] }, { kind: "directive", type: SiTooltipDirective, selector: "[siTooltip]", inputs: ["siTooltip", "placement", "isDisabled", "tooltipContext"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+    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()" } }, 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-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-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-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-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-ghost mx-4\"\n        [attr.aria-label]=\"toggleItemLabel() | translate\"\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: ["@charset \"UTF-8\";button{color:var(--element-text-primary)}:is(.btn,.btn-close){line-height:1.1428571429;font-weight:600;padding-block:calc(8px - var(--btn-border-width, 0px));padding-inline:calc(16px - var(--btn-border-width, 0px));font-size:.875rem;display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;vertical-align:middle;background-color:var(--btn-bg, transparent);color:var(--btn-color, inherit);border:var(--btn-border-width, 0) solid var(--btn-border-color, transparent);border-radius:var(--element-button-radius);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){:is(.btn,.btn-close){transition:none}}:is(.btn,.btn-close):is(:disabled,.disabled),fieldset:disabled :is(.btn,.btn-close){pointer-events:none;opacity:var(--element-action-disabled-opacity)}:is(.btn,.btn-close):is(:hover,:active){text-decoration:none}:is(.btn,.btn-close):not(:is(:disabled,.disabled)):is(:hover,.hover){color:var(--btn-color-hover, inherit);background:var(--btn-bg-hover, inherit);border-color:var(--btn-border-color-hover)}:is(.btn,.btn-close):not(:is(:disabled,.disabled)):is(:active,.active){color:var(--btn-color-active, inherit);background:var(--btn-bg-active, inherit);border-color:var(--btn-border-color-active)}:is(.btn,.btn-close) .icon{margin-block:-4px;margin-inline:-4px 4px}.btn:not(:is(.btn-circle,.btn-link,.btn-close,.btn-icon)){min-inline-size:80px}.btn-primary{--btn-bg: var(--element-action-primary);--btn-bg-hover: var(--element-action-primary-hover);--btn-bg-active: var(--element-action-primary-active);--btn-color: var(--element-action-primary-text);--btn-color-hover: var(--element-action-primary-text);--btn-color-active: var(--element-action-primary-text)}.btn-danger{--btn-bg: var(--element-action-danger);--btn-bg-hover: var(--element-action-danger-hover);--btn-bg-active: var(--element-action-danger-active);--btn-color: var(--element-action-danger-text);--btn-color-hover: var(--element-action-danger-text);--btn-color-active: var(--element-action-danger-text)}.btn-warning{--btn-bg: var(--element-action-warning);--btn-bg-hover: var(--element-action-warning-hover);--btn-bg-active: var(--element-action-warning-active);--btn-color: var(--element-action-warning-text);--btn-color-hover: var(--element-action-warning-text);--btn-color-active: var(--element-action-warning-text)}.btn-secondary,.btn-secondary-warning,.btn-secondary-danger{--btn-bg: var(--element-action-secondary);--btn-bg-hover: var(--element-action-secondary-hover);--btn-bg-active: var(--element-action-secondary-active);--btn-color: var(--element-action-secondary-text);--btn-color-hover: var(--element-action-secondary-text-hover);--btn-color-active: var(--element-action-primary-active);--btn-border-width: 1px;--btn-border-color: var(--element-action-secondary-border);--btn-border-color-hover: var(--element-action-secondary-border-hover);--btn-border-color-active: var(--element-action-secondary-border-active)}.btn-tertiary,.btn-tertiary-warning,.btn-tertiary-danger{--btn-bg: transparent;--btn-bg-hover: var(--element-action-secondary-hover);--btn-bg-active: var(--element-action-secondary-active);--btn-color: var(--element-action-secondary-text);--btn-color-hover: var(--element-action-secondary-text-hover);--btn-color-active: var(--element-action-primary-active)}.btn-secondary-warning,.btn-tertiary-warning{--btn-bg-hover: var(--element-action-warning-hover);--btn-bg-active: var(--element-action-warning-active);--btn-color: var(--element-action-secondary-warning);--btn-color-hover: var(--element-action-warning-text);--btn-color-active: var(--element-action-warning-text);--btn-border-color: var(--element-action-secondary-warning);--btn-border-color-hover: var(--element-action-warning-hover);--btn-border-color-active: var(--element-action-warning-active)}.btn-secondary-danger,.btn-tertiary-danger{--btn-bg-hover: var(--element-action-danger-hover);--btn-bg-active: var(--element-action-danger-active);--btn-color: var(--element-action-secondary-danger);--btn-color-hover: var(--element-action-danger-text);--btn-color-active: var(--element-action-danger-text);--btn-border-color: var(--element-action-secondary-danger);--btn-border-color-hover: var(--element-action-danger-hover);--btn-border-color-active: var(--element-action-danger-active)}.btn-link{--btn-color: var(--element-ui-0);--btn-color-hover: var(--element-ui-0-hover);--btn-color-active: var(--element-action-primary-active);font-weight:400;justify-content:flex-start;text-decoration:none;padding:0}.btn-link:is(:hover,:active){text-decoration:underline}.btn-link:is(:disabled,.disabled){--btn-color: var(--element-text-disabled);opacity:1}.btn:is(.btn-circle,.btn-icon,.btn-close){display:inline-flex;padding:0;flex-shrink:0}.btn:is(.btn-circle,.btn-icon,.btn-close) .icon{margin-inline:0}.btn-icon{border-radius:var(--element-button-radius)}.btn-circle{border-radius:50%}.btn-circle,.btn-icon{inline-size:2rem;block-size:2rem;font-size:1.25rem}.btn-circle.btn-lg,.btn-icon.btn-lg{inline-size:2.5rem;block-size:2.5rem;font-size:1.5rem}.btn-circle.btn-sm,.btn-icon.btn-sm{inline-size:1.5rem;block-size:1.5rem;font-size:1.25rem}.btn-circle .icon,.btn-icon .icon{margin-block:0;margin-inline:0}.btn-circle.btn-ghost,.btn-icon.btn-ghost,.btn-close{--btn-bg: transparent;--btn-bg-hover: var(--element-base-1-hover);--btn-bg-active: var(--element-base-1-selected);--btn-color: var(--element-ui-1);--btn-color-active: var(--element-ui-1)}.btn-close.btn-tertiary{--btn-bg-hover: var(--element-action-secondary-hover);--btn-bg-active: var(--element-action-secondary-active);--btn-color: var(--element-action-secondary-text);--btn-color-hover: var(--element-action-secondary-text-hover);--btn-color-active: var(--element-action-primary-active)}.btn-lg{font-size:1rem;line-height:1.5}.btn-sm{font-size:.75rem;line-height:8px}.btn-close{inline-size:2rem;block-size:2rem;font-size:1.25rem;font-weight:400}.btn-close:before{content:\"\\2715\";font-size:1rem}.btn-close>*{display:none!important}.btn-input{--btn-bg: var(--element-base-1);--btn-bg-hover: var(--element-base-1);--btn-bg-active: var(--element-base-1);--btn-color: var(--element-text-primary);--btn-color-hover: var(--element-text-primary);--btn-color-active: var(--element-text-primary);--btn-border-width: 1px;--btn-border-color: var(--element-ui-2);--btn-border-color-hover: var(--element-ui-1);--btn-border-color-active: var(--element-ui-1);font-size:.875rem;font-weight:400;line-height:1.1428571429;padding-block:7px;padding-inline:7px;border-radius:var(--element-input-radius);justify-content:flex-start}.btn-input:is(:disabled,.disabled){--btn-border-color: var(--element-ui-3);--btn-color: var(--element-text-disabled);opacity:unset}.btn-input:focus{--btn-border-color: var(--element-ui-1)}: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 .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(1.5rem + 16px)}: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(48px + 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", "clearButtonAriaLabel"], outputs: ["searchChange"] }, { kind: "directive", type: SiTooltipDirective, selector: "[siTooltip]", inputs: ["siTooltip", "placement", "isDisabled", "tooltipContext"] }, { kind: "directive", type: SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSidePanelContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-side-panel-content', imports: [
                         SiContentActionBarComponent,
                         SiIconComponent,
-                        SiLinkDirective,
                         RouterLink,
                         SiSearchBarComponent,
                         SiTranslatePipe,
-                        SiTooltipDirective
+                        SiTooltipDirective,
+                        SiLinkDirective
                     ], providers: [SiAccordionHCollapseService], host: {
                         '[class.collapsed]': 'isCollapsed()',
                         '[class.expanded]': 'isExpanded()',
                         '[class.enable-mobile]': 'enableMobile()',
                         '[class.rpanel-fullscreen-overlay]': 'isFullscreen()'
-                    }, 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-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-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-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-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-ghost mx-4\"\n        [attr.aria-label]=\"toggleItemLabel() | translate\"\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\">{{ 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  @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: ["@charset \"UTF-8\";button{color:var(--element-text-primary)}:is(.btn,.btn-close){line-height:1.1428571429;font-weight:600;padding-block:calc(8px - var(--btn-border-width, 0px));padding-inline:calc(16px - var(--btn-border-width, 0px));font-size:.875rem;display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;vertical-align:middle;background-color:var(--btn-bg, transparent);color:var(--btn-color, inherit);border:var(--btn-border-width, 0) solid var(--btn-border-color, transparent);border-radius:var(--element-button-radius);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){:is(.btn,.btn-close){transition:none}}:is(.btn,.btn-close):is(:disabled,.disabled),fieldset:disabled :is(.btn,.btn-close){pointer-events:none;opacity:var(--element-action-disabled-opacity)}:is(.btn,.btn-close):is(:hover,:active){text-decoration:none}:is(.btn,.btn-close):not(:is(:disabled,.disabled)):is(:hover,.hover){color:var(--btn-color-hover, inherit);background:var(--btn-bg-hover, inherit);border-color:var(--btn-border-color-hover)}:is(.btn,.btn-close):not(:is(:disabled,.disabled)):is(:active,.active){color:var(--btn-color-active, inherit);background:var(--btn-bg-active, inherit);border-color:var(--btn-border-color-active)}:is(.btn,.btn-close) .icon{margin-block:-4px;margin-inline:-4px 4px}.btn:not(:is(.btn-circle,.btn-link,.btn-close,.btn-icon)){min-inline-size:80px}.btn-primary{--btn-bg: var(--element-action-primary);--btn-bg-hover: var(--element-action-primary-hover);--btn-bg-active: var(--element-action-primary-active);--btn-color: var(--element-action-primary-text);--btn-color-hover: var(--element-action-primary-text);--btn-color-active: var(--element-action-primary-text)}.btn-danger{--btn-bg: var(--element-action-danger);--btn-bg-hover: var(--element-action-danger-hover);--btn-bg-active: var(--element-action-danger-active);--btn-color: var(--element-action-danger-text);--btn-color-hover: var(--element-action-danger-text);--btn-color-active: var(--element-action-danger-text)}.btn-warning{--btn-bg: var(--element-action-warning);--btn-bg-hover: var(--element-action-warning-hover);--btn-bg-active: var(--element-action-warning-active);--btn-color: var(--element-action-warning-text);--btn-color-hover: var(--element-action-warning-text);--btn-color-active: var(--element-action-warning-text)}.btn-secondary,.btn-secondary-warning,.btn-secondary-danger{--btn-bg: var(--element-action-secondary);--btn-bg-hover: var(--element-action-secondary-hover);--btn-bg-active: var(--element-action-secondary-active);--btn-color: var(--element-action-secondary-text);--btn-color-hover: var(--element-action-secondary-text-hover);--btn-color-active: var(--element-action-primary-active);--btn-border-width: 1px;--btn-border-color: var(--element-action-secondary-border);--btn-border-color-hover: var(--element-action-secondary-border-hover);--btn-border-color-active: var(--element-action-secondary-border-active)}.btn-tertiary,.btn-tertiary-warning,.btn-tertiary-danger{--btn-bg: transparent;--btn-bg-hover: var(--element-action-secondary-hover);--btn-bg-active: var(--element-action-secondary-active);--btn-color: var(--element-action-secondary-text);--btn-color-hover: var(--element-action-secondary-text-hover);--btn-color-active: var(--element-action-primary-active)}.btn-secondary-warning,.btn-tertiary-warning{--btn-bg-hover: var(--element-action-warning-hover);--btn-bg-active: var(--element-action-warning-active);--btn-color: var(--element-action-secondary-warning);--btn-color-hover: var(--element-action-warning-text);--btn-color-active: var(--element-action-warning-text);--btn-border-color: var(--element-action-secondary-warning);--btn-border-color-hover: var(--element-action-warning-hover);--btn-border-color-active: var(--element-action-warning-active)}.btn-secondary-danger,.btn-tertiary-danger{--btn-bg-hover: var(--element-action-danger-hover);--btn-bg-active: var(--element-action-danger-active);--btn-color: var(--element-action-secondary-danger);--btn-color-hover: var(--element-action-danger-text);--btn-color-active: var(--element-action-danger-text);--btn-border-color: var(--element-action-secondary-danger);--btn-border-color-hover: var(--element-action-danger-hover);--btn-border-color-active: var(--element-action-danger-active)}.btn-link{--btn-color: var(--element-ui-0);--btn-color-hover: var(--element-ui-0-hover);--btn-color-active: var(--element-action-primary-active);font-weight:400;justify-content:flex-start;text-decoration:none;padding:0}.btn-link:is(:hover,:active){text-decoration:underline}.btn-link:is(:disabled,.disabled){--btn-color: var(--element-text-disabled);opacity:1}.btn:is(.btn-circle,.btn-icon,.btn-close){display:inline-flex;padding:0;flex-shrink:0}.btn:is(.btn-circle,.btn-icon,.btn-close) .icon{margin-inline:0}.btn-icon{border-radius:var(--element-button-radius)}.btn-circle{border-radius:50%}.btn-circle,.btn-icon{inline-size:32px;block-size:32px;font-size:1.25rem}.btn-circle.btn-lg,.btn-icon.btn-lg{inline-size:40px;block-size:40px;font-size:1.5rem}.btn-circle.btn-sm,.btn-icon.btn-sm{inline-size:24px;block-size:24px;font-size:1.25rem}.btn-circle .icon,.btn-icon .icon{margin-block:0;margin-inline:0}.btn-circle.btn-ghost,.btn-icon.btn-ghost,.btn-close{--btn-bg: transparent;--btn-bg-hover: var(--element-base-1-hover);--btn-bg-active: var(--element-base-1-selected);--btn-color: var(--element-ui-1);--btn-color-active: var(--element-ui-1)}.btn-close.btn-tertiary{--btn-bg-hover: var(--element-action-secondary-hover);--btn-bg-active: var(--element-action-secondary-active);--btn-color: var(--element-action-secondary-text);--btn-color-hover: var(--element-action-secondary-text-hover);--btn-color-active: var(--element-action-primary-active)}.btn-lg{font-size:1rem;line-height:1.5}.btn-sm{font-size:.75rem;line-height:8px}.btn-close{inline-size:32px;block-size:32px;font-size:1.25rem;font-weight:400}.btn-close:before{content:\"\\2715\";font-size:1rem}.btn-close>*{display:none!important}.btn-input{--btn-bg: var(--element-base-1);--btn-bg-hover: var(--element-base-1);--btn-bg-active: var(--element-base-1);--btn-color: var(--element-text-primary);--btn-color-hover: var(--element-text-primary);--btn-color-active: var(--element-text-primary);--btn-border-width: 1px;--btn-border-color: var(--element-ui-2);--btn-border-color-hover: var(--element-ui-1);--btn-border-color-active: var(--element-ui-1);font-size:.875rem;font-weight:400;line-height:1.1428571429;padding-block:7px;padding-inline:7px;border-radius:var(--element-input-radius);justify-content:flex-start}.btn-input:is(:disabled,.disabled){--btn-border-color: var(--element-ui-3);--btn-color: var(--element-text-disabled);opacity:unset}.btn-input:focus{--btn-border-color: var(--element-ui-1)}: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)}.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{font-size:12px;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:40px}: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(48px + 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  <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-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-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-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-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-ghost mx-4\"\n        [attr.aria-label]=\"toggleItemLabel() | translate\"\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: ["@charset \"UTF-8\";button{color:var(--element-text-primary)}:is(.btn,.btn-close){line-height:1.1428571429;font-weight:600;padding-block:calc(8px - var(--btn-border-width, 0px));padding-inline:calc(16px - var(--btn-border-width, 0px));font-size:.875rem;display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;vertical-align:middle;background-color:var(--btn-bg, transparent);color:var(--btn-color, inherit);border:var(--btn-border-width, 0) solid var(--btn-border-color, transparent);border-radius:var(--element-button-radius);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){:is(.btn,.btn-close){transition:none}}:is(.btn,.btn-close):is(:disabled,.disabled),fieldset:disabled :is(.btn,.btn-close){pointer-events:none;opacity:var(--element-action-disabled-opacity)}:is(.btn,.btn-close):is(:hover,:active){text-decoration:none}:is(.btn,.btn-close):not(:is(:disabled,.disabled)):is(:hover,.hover){color:var(--btn-color-hover, inherit);background:var(--btn-bg-hover, inherit);border-color:var(--btn-border-color-hover)}:is(.btn,.btn-close):not(:is(:disabled,.disabled)):is(:active,.active){color:var(--btn-color-active, inherit);background:var(--btn-bg-active, inherit);border-color:var(--btn-border-color-active)}:is(.btn,.btn-close) .icon{margin-block:-4px;margin-inline:-4px 4px}.btn:not(:is(.btn-circle,.btn-link,.btn-close,.btn-icon)){min-inline-size:80px}.btn-primary{--btn-bg: var(--element-action-primary);--btn-bg-hover: var(--element-action-primary-hover);--btn-bg-active: var(--element-action-primary-active);--btn-color: var(--element-action-primary-text);--btn-color-hover: var(--element-action-primary-text);--btn-color-active: var(--element-action-primary-text)}.btn-danger{--btn-bg: var(--element-action-danger);--btn-bg-hover: var(--element-action-danger-hover);--btn-bg-active: var(--element-action-danger-active);--btn-color: var(--element-action-danger-text);--btn-color-hover: var(--element-action-danger-text);--btn-color-active: var(--element-action-danger-text)}.btn-warning{--btn-bg: var(--element-action-warning);--btn-bg-hover: var(--element-action-warning-hover);--btn-bg-active: var(--element-action-warning-active);--btn-color: var(--element-action-warning-text);--btn-color-hover: var(--element-action-warning-text);--btn-color-active: var(--element-action-warning-text)}.btn-secondary,.btn-secondary-warning,.btn-secondary-danger{--btn-bg: var(--element-action-secondary);--btn-bg-hover: var(--element-action-secondary-hover);--btn-bg-active: var(--element-action-secondary-active);--btn-color: var(--element-action-secondary-text);--btn-color-hover: var(--element-action-secondary-text-hover);--btn-color-active: var(--element-action-primary-active);--btn-border-width: 1px;--btn-border-color: var(--element-action-secondary-border);--btn-border-color-hover: var(--element-action-secondary-border-hover);--btn-border-color-active: var(--element-action-secondary-border-active)}.btn-tertiary,.btn-tertiary-warning,.btn-tertiary-danger{--btn-bg: transparent;--btn-bg-hover: var(--element-action-secondary-hover);--btn-bg-active: var(--element-action-secondary-active);--btn-color: var(--element-action-secondary-text);--btn-color-hover: var(--element-action-secondary-text-hover);--btn-color-active: var(--element-action-primary-active)}.btn-secondary-warning,.btn-tertiary-warning{--btn-bg-hover: var(--element-action-warning-hover);--btn-bg-active: var(--element-action-warning-active);--btn-color: var(--element-action-secondary-warning);--btn-color-hover: var(--element-action-warning-text);--btn-color-active: var(--element-action-warning-text);--btn-border-color: var(--element-action-secondary-warning);--btn-border-color-hover: var(--element-action-warning-hover);--btn-border-color-active: var(--element-action-warning-active)}.btn-secondary-danger,.btn-tertiary-danger{--btn-bg-hover: var(--element-action-danger-hover);--btn-bg-active: var(--element-action-danger-active);--btn-color: var(--element-action-secondary-danger);--btn-color-hover: var(--element-action-danger-text);--btn-color-active: var(--element-action-danger-text);--btn-border-color: var(--element-action-secondary-danger);--btn-border-color-hover: var(--element-action-danger-hover);--btn-border-color-active: var(--element-action-danger-active)}.btn-link{--btn-color: var(--element-ui-0);--btn-color-hover: var(--element-ui-0-hover);--btn-color-active: var(--element-action-primary-active);font-weight:400;justify-content:flex-start;text-decoration:none;padding:0}.btn-link:is(:hover,:active){text-decoration:underline}.btn-link:is(:disabled,.disabled){--btn-color: var(--element-text-disabled);opacity:1}.btn:is(.btn-circle,.btn-icon,.btn-close){display:inline-flex;padding:0;flex-shrink:0}.btn:is(.btn-circle,.btn-icon,.btn-close) .icon{margin-inline:0}.btn-icon{border-radius:var(--element-button-radius)}.btn-circle{border-radius:50%}.btn-circle,.btn-icon{inline-size:2rem;block-size:2rem;font-size:1.25rem}.btn-circle.btn-lg,.btn-icon.btn-lg{inline-size:2.5rem;block-size:2.5rem;font-size:1.5rem}.btn-circle.btn-sm,.btn-icon.btn-sm{inline-size:1.5rem;block-size:1.5rem;font-size:1.25rem}.btn-circle .icon,.btn-icon .icon{margin-block:0;margin-inline:0}.btn-circle.btn-ghost,.btn-icon.btn-ghost,.btn-close{--btn-bg: transparent;--btn-bg-hover: var(--element-base-1-hover);--btn-bg-active: var(--element-base-1-selected);--btn-color: var(--element-ui-1);--btn-color-active: var(--element-ui-1)}.btn-close.btn-tertiary{--btn-bg-hover: var(--element-action-secondary-hover);--btn-bg-active: var(--element-action-secondary-active);--btn-color: var(--element-action-secondary-text);--btn-color-hover: var(--element-action-secondary-text-hover);--btn-color-active: var(--element-action-primary-active)}.btn-lg{font-size:1rem;line-height:1.5}.btn-sm{font-size:.75rem;line-height:8px}.btn-close{inline-size:2rem;block-size:2rem;font-size:1.25rem;font-weight:400}.btn-close:before{content:\"\\2715\";font-size:1rem}.btn-close>*{display:none!important}.btn-input{--btn-bg: var(--element-base-1);--btn-bg-hover: var(--element-base-1);--btn-bg-active: var(--element-base-1);--btn-color: var(--element-text-primary);--btn-color-hover: var(--element-text-primary);--btn-color-active: var(--element-text-primary);--btn-border-width: 1px;--btn-border-color: var(--element-ui-2);--btn-border-color-hover: var(--element-ui-1);--btn-border-color-active: var(--element-ui-1);font-size:.875rem;font-weight:400;line-height:1.1428571429;padding-block:7px;padding-inline:7px;border-radius:var(--element-input-radius);justify-content:flex-start}.btn-input:is(:disabled,.disabled){--btn-border-color: var(--element-ui-3);--btn-color: var(--element-text-disabled);opacity:unset}.btn-input:focus{--btn-border-color: var(--element-ui-1)}: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 .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(1.5rem + 16px)}: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(48px + 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"] }]
         }], 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"] }] } });
 
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Creates an action for the side-panel.
+ * This action will remain visible if the side-panel is collapsed.
+ *
+ * @example
+ * ```html
+ * <si-side-panel-content>
+ *   <si-side-panel-actions>
+ *       <button
+ *         type="button"
+ *         si-side-panel-action
+ *         icon="element-alarm-background-filled"
+ *         iconColor="status-danger"
+ *         stackedIcon="element-alarm-tick"
+ *         stackedIconColor="text-body"
+ *         (click)="action()"
+ *       >
+ *         Action
+ *       </button>
+ *   </si-side-panel-actions>
+ * </si-side-panel-content>
+ * ```
+ */
+class SiSidePanelActionComponent {
+    /** Icon name for the main icon. */
+    icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : []));
+    /** CSS color class for the main icon (e.g. `'status-warning'`). */
+    iconColor = input(...(ngDevMode ? [undefined, { debugName: "iconColor" }] : []));
+    /** 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" }] : []));
+    /**
+     * 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: `
+    @if (disabled()) {
+      <div class="icon dot text-muted text-center">&bull;</div>
+    } @else {
+      <span class="icon icon-stack">
+        <si-icon [class]="iconColor()" [icon]="icon()" />
+        @if (stackedIcon(); as stackedIcon) {
+          <si-icon [class]="stackedIconColor()" [icon]="stackedIcon" />
+        }
+      </span>
+      <span class="ms-2 auto-hide si-caption 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.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>
+    } @else {
+      <span class="icon icon-stack">
+        <si-icon [class]="iconColor()" [icon]="icon()" />
+        @if (stackedIcon(); as stackedIcon) {
+          <si-icon [class]="stackedIconColor()" [icon]="stackedIcon" />
+        }
+      </span>
+      <span class="ms-2 auto-hide si-caption text-start">
+        <ng-content />
+      </span>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+        }], 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 }] }] } });
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Creates an actions container for the side-panel.
+ * This action will remain visible if the side-panel is collapsed.
+ *
+ * @example
+ * ```html
+ * <si-side-panel-content>
+ *   <si-side-panel-actions>
+ *       <button
+ *         type="button"
+ *         si-side-panel-action
+ *         icon="element-alarm-background-filled"
+ *         iconColor="status-danger"
+ *         stackedIcon="element-alarm-tick"
+ *         stackedIconColor="text-body"
+ *         (click)="action()"
+ *       >
+ *         Action
+ *       </button>
+ *   </si-side-panel-actions>
+ * </si-side-panel-content>
+ * ```
+ */
+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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSidePanelActionsComponent, 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"] }]
+        }] });
+
 /**
  * Copyright (c) Siemens 2016 - 2026
  * 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, SiSidePanelContentComponent], exports: [SiSidePanelComponent, SiSidePanelContentComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSidePanelModule, imports: [SiSidePanelComponent, SiSidePanelContentComponent] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: SiSidePanelModule, imports: [SiSidePanelComponent,
+            SiSidePanelContentComponent,
+            SiSidePanelActionsComponent,
+            SiSidePanelActionComponent], exports: [SiSidePanelComponent,
+            SiSidePanelContentComponent,
+            SiSidePanelActionsComponent,
+            SiSidePanelActionComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSidePanelModule, imports: [SiSidePanelComponent,
+            SiSidePanelContentComponent,
+            SiSidePanelActionComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSidePanelModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [SiSidePanelComponent, SiSidePanelContentComponent],
-                    exports: [SiSidePanelComponent, SiSidePanelContentComponent]
+                    imports: [
+                        SiSidePanelComponent,
+                        SiSidePanelContentComponent,
+                        SiSidePanelActionsComponent,
+                        SiSidePanelActionComponent
+                    ],
+                    exports: [
+                        SiSidePanelComponent,
+                        SiSidePanelContentComponent,
+                        SiSidePanelActionsComponent,
+                        SiSidePanelActionComponent
+                    ]
                 }]
         }] });
 
@@ -727,5 +881,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SiSidePanelComponent, SiSidePanelContentComponent, SiSidePanelModule, SiSidePanelService };
+export { SiSidePanelActionComponent, SiSidePanelActionsComponent, SiSidePanelComponent, SiSidePanelContentComponent, SiSidePanelModule, SiSidePanelService };
 //# sourceMappingURL=siemens-element-ng-side-panel.mjs.map