@siemens/element-ng 47.3.0 → 47.5.0

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

@@ -0,0 +1,554 @@
+import * as i0 from '@angular/core';
+import { signal, Injectable, input, booleanAttribute, model, output, computed, viewChild, inject, PLATFORM_ID, ElementRef, ChangeDetectorRef, DestroyRef, Component, NgModule } from '@angular/core';
+import { BehaviorSubject, Subject, EMPTY } from 'rxjs';
+import * as i1 from '@angular/cdk/portal';
+import { CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';
+import { isPlatformBrowser, DOCUMENT } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ResizeObserverService, BOOTSTRAP_BREAKPOINTS } from '@siemens/element-ng/resize-observer';
+import { debounceTime } from 'rxjs/operators';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { SiAccordionHCollapseService } from '@siemens/element-ng/accordion';
+import { SiContentActionBarComponent } from '@siemens/element-ng/content-action-bar';
+import { addIcons, elementDoubleRight, elementDoubleLeft, SiIconNextComponent } from '@siemens/element-ng/icon';
+import { SiLinkDirective } from '@siemens/element-ng/link';
+import { SiSearchBarComponent } from '@siemens/element-ng/search-bar';
+import * as i1$1 from '@siemens/element-translate-ng/translate';
+import { SiTranslateModule } from '@siemens/element-translate-ng/translate';
+
+class SiSidePanelService {
+    contentSubject = new BehaviorSubject(undefined);
+    /** @internal */
+    content$ = this.contentSubject.asObservable();
+    openSubject = new BehaviorSubject(false);
+    /**
+     * Emits on side panel is open or close.
+     *
+     * @defaultValue this.openSubject.asObservable()
+     */
+    isOpen$ = this.openSubject.asObservable();
+    tempContentSubject = new BehaviorSubject(undefined);
+    /** @internal */
+    tempContent$ = this.tempContentSubject.asObservable();
+    tempContentClosed;
+    /** @internal */
+    enableMobile = signal(false);
+    /** Set or update displayed content. */
+    setSidePanelContent(portal) {
+        this.contentSubject.next(portal);
+    }
+    /** Open side panel. */
+    open() {
+        this.hideTemporaryContent();
+        this.openSubject.next(true);
+    }
+    /** Close side panel. */
+    close() {
+        if (this.hideTemporaryContent()) {
+            return;
+        }
+        this.openSubject.next(false);
+    }
+    /** Toggle side panel open/close. */
+    toggle() {
+        this.hideTemporaryContent();
+        this.openSubject.next(!this.openSubject.value);
+    }
+    /** Indicate is side panel open. */
+    isOpen() {
+        return this.openSubject.value;
+    }
+    /**
+     * Indicate that the side panel is open with temporary content.
+     */
+    isTemporaryOpen() {
+        return !!this.tempContentSubject.value;
+    }
+    /** Show side panel temporary content, opening the side panel when necessary. */
+    showTemporaryContent(portal) {
+        this.hideTemporaryContent();
+        this.tempContentSubject.next(portal);
+        if (portal) {
+            this.tempContentClosed = new Subject();
+            return this.tempContentClosed.asObservable();
+        }
+        return EMPTY;
+    }
+    /** Hide side panel temporary content, reverting to state before showing temporary content. */
+    hideTemporaryContent() {
+        if (!this.isTemporaryOpen()) {
+            return false;
+        }
+        if (this.tempContentClosed) {
+            const sub = this.tempContentClosed;
+            this.tempContentClosed = undefined;
+            sub.next();
+            sub.complete();
+        }
+        this.tempContentSubject.next(undefined);
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSidePanelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSidePanelService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSidePanelService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiSidePanelComponent {
+    /**
+     * @defaultValue false
+     */
+    collapsible = input(false, { transform: booleanAttribute });
+    /**
+     * Default state of navigation
+     */
+    collapsed = model();
+    /**
+     * Mode of side panel
+     * (ignored below a certain width)
+     *
+     * @defaultValue 'over'
+     */
+    mode = input('over');
+    /**
+     * Size of side-panel
+     *
+     * @defaultValue 'regular'
+     */
+    size = input('regular');
+    /**
+     * Toggle icon aria-label, required for a11y
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_SIDE_PANEL.TOGGLE:Toggle`
+     * ```
+     */
+    toggleItemLabel = input($localize `:@@SI_SIDE_PANEL.TOGGLE:Toggle`);
+    /**
+     * Specifies custom breakpoints to automatically switch mode.
+     * The `smMinimum` specifies the breakpoint for the mobile view.
+     * The `lgMinimum` specifies the breakpoint to allow scroll mode
+     * (below automatically uses over mode).
+     * The `xlMinimum` specifies the breakpoint to allow scroll mode
+     * with wide size (below automatically uses over mode).
+     */
+    breakpoints = input();
+    /**
+     * Enable mobile drawer for small screen sizes. Should not be used in conjunction with the vertical navbar.
+     *
+     * @defaultValue false
+     */
+    enableMobile = input(false, { transform: booleanAttribute });
+    /**
+     * Emits when the panel is closed
+     */
+    closed = output();
+    /**
+     * Emits whenever the content is resized due to opening and closing or parent resize.
+     */
+    contentResize = output();
+    isScrollMode = computed(() => this.mode() === 'scroll');
+    isXs = signal(false);
+    isSm = signal(false);
+    isMd = signal(true);
+    isLg = signal(false);
+    isXl = signal(false);
+    isCollapsed = signal(false);
+    ready = signal(false);
+    isHidden = signal(false);
+    showTempContent = signal(false);
+    panelElement = viewChild.required('sidePanel');
+    contentElement = viewChild.required('content');
+    portalOutlet = viewChild.required('portalOutlet', {
+        read: CdkPortalOutlet
+    });
+    tmpPortalOutlet = viewChild.required('tmpPortalOutlet', {
+        read: CdkPortalOutlet
+    });
+    /**
+     * The $rpanel-transition-duration in the style is 0.5 seconds.
+     * Sending the resize event after resize need to wait until resize is done.
+     */
+    resizeEventDelay = 500;
+    resizeEvent = new Subject();
+    openingOrClosing = false;
+    previousContentDimensions = { width: 0, height: 0 };
+    isCollapsedInternal = false; // same as the other one, except w/o timeout for animation
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    element = inject(ElementRef);
+    resizeObserver = inject(ResizeObserverService);
+    service = inject(SiSidePanelService);
+    cdRef = inject(ChangeDetectorRef);
+    destroyRef = inject(DestroyRef);
+    document = inject(DOCUMENT);
+    constructor() {
+        if (this.isBrowser) {
+            this.resizeEvent
+                .asObservable()
+                .pipe(takeUntilDestroyed(this.destroyRef), debounceTime(this.resizeEventDelay))
+                .subscribe(() => {
+                this.openingOrClosing = false;
+                this.emitResizeOutputs();
+                if (this.isCollapsedInternal && !this.collapsible()) {
+                    this.isHidden.set(true);
+                }
+            });
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes.collapsed) {
+            if (this.collapsed()) {
+                this.service.close();
+            }
+            else {
+                this.service.open();
+            }
+        }
+        else if (changes.enableMobile) {
+            this.service.enableMobile.set(this.enableMobile());
+        }
+    }
+    ngOnInit() {
+        // handle initial state to avoid flicker
+        const collapsed = this.collapsed() ?? !this.service.isOpen();
+        this.isCollapsedInternal = collapsed;
+        this.isHidden.set(collapsed);
+        this.isCollapsed.set(collapsed);
+        this.resizeObserver
+            .observe(this.element.nativeElement, 100, true)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(dim => {
+            this.setBreakpoints(dim.width, dim.height);
+            if (!this.ready()) {
+                // delay because the initial sizing needs to settle
+                setTimeout(() => {
+                    this.ready.set(true);
+                }, 100);
+            }
+            if (!this.openingOrClosing) {
+                this.emitResizeOutputs();
+            }
+        });
+        this.service.content$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(portal => this.attachContent(portal));
+        this.service.tempContent$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(portal => this.attachTempContent(portal));
+        this.service.isOpen$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(state => this.openClose(state));
+    }
+    ngOnDestroy() {
+        this.portalOutlet().detach();
+    }
+    /**
+     * Toggle whether the side panel is expanded or not.
+     */
+    toggleSidePanel() {
+        if (this.collapsible()) {
+            this.service.toggle();
+        }
+        else {
+            this.service.close();
+        }
+    }
+    emitResizeOutputs() {
+        const contentDimensions = this.getContentDimensions();
+        if (contentDimensions.width !== this.previousContentDimensions.width ||
+            contentDimensions.height !== this.previousContentDimensions.height) {
+            this.previousContentDimensions = contentDimensions;
+            this.contentResize.emit(contentDimensions);
+        }
+    }
+    getContentDimensions() {
+        if (!this.isCollapsedInternal && this.isXs()) {
+            return { width: 0, height: 0 };
+        }
+        const rect = this.contentElement().nativeElement.getBoundingClientRect();
+        return { width: rect.width, height: rect.height };
+    }
+    setBreakpoints(width, height) {
+        if (!width && !height) {
+            // element is not visible, no point in changing anything
+            return;
+        }
+        const breakpoints = this.breakpoints() ?? BOOTSTRAP_BREAKPOINTS;
+        this.isXs.set(width < breakpoints.smMinimum);
+        this.isSm.set(width >= breakpoints.smMinimum && width < breakpoints.mdMinimum);
+        this.isMd.set(width >= breakpoints.mdMinimum && width < breakpoints.lgMinimum);
+        this.isLg.set(width >= breakpoints.lgMinimum && width < breakpoints.xlMinimum);
+        this.isXl.set(width >= breakpoints.xlMinimum);
+    }
+    sendResize() {
+        if (this.isScrollMode() || this.element.nativeElement.style.paddingRight !== '0') {
+            this.openingOrClosing = true;
+            this.resizeEvent.next();
+        }
+    }
+    attachContent(portal) {
+        const portalOutlet = this.portalOutlet();
+        portalOutlet.detach();
+        if (portal) {
+            portalOutlet.attach(portal);
+        }
+        this.cdRef.markForCheck();
+    }
+    attachTempContent(portal) {
+        const tmpPortalOutlet = this.tmpPortalOutlet();
+        tmpPortalOutlet.detach();
+        if (portal) {
+            tmpPortalOutlet.attach(portal);
+            this.showTempContent.set(true);
+            this.openClose(true, true);
+        }
+        else if (this.showTempContent) {
+            this.showTempContent.set(false);
+            this.openClose(this.service.isOpen(), true);
+        }
+    }
+    openClose(open, regainFocus = false) {
+        if (open !== this.isCollapsedInternal) {
+            this.moveFocusInside(open && regainFocus);
+            return;
+        }
+        this.isCollapsedInternal = !open;
+        if (open) {
+            this.isHidden.set(false);
+        }
+        setTimeout(() => this.doOpenClose(open));
+    }
+    doOpenClose(open) {
+        this.moveFocusInside(open);
+        this.isCollapsed.set(!open);
+        this.collapsed.set(this.isCollapsed());
+        if (this.isCollapsedInternal) {
+            this.closed.emit();
+        }
+        this.sendResize();
+    }
+    moveFocusInside(open) {
+        if (open &&
+            !this.document.activeElement?.parentElement?.classList.contains('side-panel-collapse-toggle') &&
+            !this.document.activeElement?.classList.contains('side-panel-collapse-toggle')) {
+            // moves the keyboard focus inside the panel so that the next tab is somewhere useful
+            this.panelElement().nativeElement.focus();
+            queueMicrotask(() => this.panelElement().nativeElement.blur());
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.6", type: SiSidePanelComponent, isStandalone: true, selector: "si-side-panel", inputs: { collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, toggleItemLabel: { classPropertyName: "toggleItemLabel", publicName: "toggleItemLabel", isSignal: true, isRequired: false, transformFunction: null }, breakpoints: { classPropertyName: "breakpoints", publicName: "breakpoints", isSignal: true, isRequired: false, transformFunction: null }, enableMobile: { classPropertyName: "enableMobile", publicName: "enableMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", closed: "closed", contentResize: "contentResize" }, host: { properties: { "class.enable-mobile": "enableMobile()", "class.rpanel-size--regular": "this.size() === \"regular\"", "class.rpanel-size--wide": "this.size() === \"wide\"", "class.rpanel-mode--over": "this.mode() === \"over\"", "class.rpanel-mode--scroll": "isScrollMode()", "class.rpanel-collapsed": "isCollapsed()", "class.ready": "ready()", "class.collapsible": "collapsible() && !this.showTempContent()", "class.collapsible-temp": "collapsible() && this.showTempContent()", "class.rpanel-hidden": "isHidden()", "class.rpanel-resize-xs": "isXs()", "class.rpanel-resize-sm": "isSm()", "class.rpanel-resize-md": "isMd()", "class.rpanel-resize-lg": "isLg()", "class.rpanel-resize-xl": "isXl()" }, classAttribute: "si-layout-inner" }, viewQueries: [{ propertyName: "panelElement", first: true, predicate: ["sidePanel"], descendants: true, isSignal: true }, { propertyName: "contentElement", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "portalOutlet", first: true, predicate: ["portalOutlet"], descendants: true, read: CdkPortalOutlet, isSignal: true }, { propertyName: "tmpPortalOutlet", first: true, predicate: ["tmpPortalOutlet"], descendants: true, read: CdkPortalOutlet, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div #sidePanel class=\"side-panel focus-none\" tabindex=\"-1\">\n  <div class=\"inner\" [class.d-none]=\"showTempContent()\">\n    <ng-content select=\"si-side-panel-content, element-side-panel-content\" />\n    <ng-container #portalOutlet cdkPortalOutlet />\n  </div>\n  <div class=\"inner\" [class.d-none]=\"!showTempContent()\">\n    <ng-container #tmpPortalOutlet cdkPortalOutlet />\n  </div>\n</div>\n<div #content class=\"main-content si-layout-inner\">\n  <ng-content />\n</div>\n", styles: [":host{--rpanel-collapsed-padding: 0;--rpanel-size: 390px;display:block;padding-inline-end:var(--rpanel-size)}:host.ready{transition:padding-inline-end calc(.5s * var(--element-animations-enabled, 1))}:host.ready .side-panel{transition:inline-size calc(.5s * var(--element-animations-enabled, 1))}:host .side-panel,:host .side-panel>.inner{inline-size:var(--rpanel-size)}:host.collapsible,:host.collapsible-temp{--rpanel-collapsed-width: 48px}:host.rpanel-size--wide{--rpanel-size: 500px}:host.rpanel-resize-sm.rpanel-mode--over,:host.rpanel-resize-md.rpanel-mode--over,:host.rpanel-resize-lg.rpanel-mode--over,:host.rpanel-resize-xl.rpanel-mode--over{padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-resize-sm.rpanel-mode--over:not(.rpanel-collapsed) .side-panel,:host.rpanel-resize-md.rpanel-mode--over:not(.rpanel-collapsed) .side-panel,:host.rpanel-resize-lg.rpanel-mode--over:not(.rpanel-collapsed) .side-panel,:host.rpanel-resize-xl.rpanel-mode--over:not(.rpanel-collapsed) .side-panel{box-shadow:0 0 8px var(--element-box-shadow-color-1),0 8px 8px var(--element-box-shadow-color-2)}:host.rpanel-resize-lg.rpanel-mode--scroll.rpanel-size--wide{padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-resize-sm.rpanel-mode--scroll,:host.rpanel-resize-md.rpanel-mode--scroll{padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-resize-sm.rpanel-mode--scroll:not(.rpanel-collapsed) .side-panel,:host.rpanel-resize-md.rpanel-mode--scroll:not(.rpanel-collapsed) .side-panel{box-shadow:0 0 8px var(--element-box-shadow-color-1),0 8px 8px var(--element-box-shadow-color-2)}:host.rpanel-resize-xs.rpanel-mode--over,:host.rpanel-resize-xs.rpanel-mode--scroll{padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-resize-xs .side-panel{z-index:1031}:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel,:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel>.inner{inline-size:100%}:host.rpanel-hidden:not(.collapsible) .side-panel{display:none}:host.rpanel-collapsed{padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-collapsed:not(.collapsible) .side-panel{inline-size:0;overflow:hidden}:host.rpanel-collapsed.collapsible .side-panel{inline-size:var(--rpanel-collapsed-width);overflow:hidden}.side-panel{position:fixed;z-index:1029;inset-block-start:calc(48px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px));inset-block-end:0;inset-inline-end:0;overflow-x:hidden;background:var(--element-base-1)}.side-panel>.inner{display:flex;flex-direction:column;position:absolute;inset-block:0;inset-inline-start:0}@media (max-width: 575.98px){:host.enable-mobile{padding-inline-end:0!important;--si-layout-header-first-element-offset-end: 40px}:host.enable-mobile.rpanel-collapsed .side-panel{inline-size:0!important}}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSidePanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-side-panel', host: {
+                        class: 'si-layout-inner',
+                        '[class.enable-mobile]': 'enableMobile()',
+                        '[class.rpanel-size--regular]': 'this.size() === "regular"',
+                        '[class.rpanel-size--wide]': 'this.size() === "wide"',
+                        '[class.rpanel-mode--over]': 'this.mode() === "over"',
+                        '[class.rpanel-mode--scroll]': 'isScrollMode()',
+                        '[class.rpanel-collapsed]': 'isCollapsed()',
+                        '[class.ready]': 'ready()',
+                        '[class.collapsible]': 'collapsible() && !this.showTempContent()',
+                        '[class.collapsible-temp]': 'collapsible() && this.showTempContent()',
+                        '[class.rpanel-hidden]': 'isHidden()',
+                        '[class.rpanel-resize-xs]': 'isXs()',
+                        '[class.rpanel-resize-sm]': 'isSm()',
+                        '[class.rpanel-resize-md]': 'isMd()',
+                        '[class.rpanel-resize-lg]': 'isLg()',
+                        '[class.rpanel-resize-xl]': 'isXl()'
+                    }, imports: [PortalModule], template: "<div #sidePanel class=\"side-panel focus-none\" tabindex=\"-1\">\n  <div class=\"inner\" [class.d-none]=\"showTempContent()\">\n    <ng-content select=\"si-side-panel-content, element-side-panel-content\" />\n    <ng-container #portalOutlet cdkPortalOutlet />\n  </div>\n  <div class=\"inner\" [class.d-none]=\"!showTempContent()\">\n    <ng-container #tmpPortalOutlet cdkPortalOutlet />\n  </div>\n</div>\n<div #content class=\"main-content si-layout-inner\">\n  <ng-content />\n</div>\n", styles: [":host{--rpanel-collapsed-padding: 0;--rpanel-size: 390px;display:block;padding-inline-end:var(--rpanel-size)}:host.ready{transition:padding-inline-end calc(.5s * var(--element-animations-enabled, 1))}:host.ready .side-panel{transition:inline-size calc(.5s * var(--element-animations-enabled, 1))}:host .side-panel,:host .side-panel>.inner{inline-size:var(--rpanel-size)}:host.collapsible,:host.collapsible-temp{--rpanel-collapsed-width: 48px}:host.rpanel-size--wide{--rpanel-size: 500px}:host.rpanel-resize-sm.rpanel-mode--over,:host.rpanel-resize-md.rpanel-mode--over,:host.rpanel-resize-lg.rpanel-mode--over,:host.rpanel-resize-xl.rpanel-mode--over{padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-resize-sm.rpanel-mode--over:not(.rpanel-collapsed) .side-panel,:host.rpanel-resize-md.rpanel-mode--over:not(.rpanel-collapsed) .side-panel,:host.rpanel-resize-lg.rpanel-mode--over:not(.rpanel-collapsed) .side-panel,:host.rpanel-resize-xl.rpanel-mode--over:not(.rpanel-collapsed) .side-panel{box-shadow:0 0 8px var(--element-box-shadow-color-1),0 8px 8px var(--element-box-shadow-color-2)}:host.rpanel-resize-lg.rpanel-mode--scroll.rpanel-size--wide{padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-resize-sm.rpanel-mode--scroll,:host.rpanel-resize-md.rpanel-mode--scroll{padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-resize-sm.rpanel-mode--scroll:not(.rpanel-collapsed) .side-panel,:host.rpanel-resize-md.rpanel-mode--scroll:not(.rpanel-collapsed) .side-panel{box-shadow:0 0 8px var(--element-box-shadow-color-1),0 8px 8px var(--element-box-shadow-color-2)}:host.rpanel-resize-xs.rpanel-mode--over,:host.rpanel-resize-xs.rpanel-mode--scroll{padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-resize-xs .side-panel{z-index:1031}:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel,:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel>.inner{inline-size:100%}:host.rpanel-hidden:not(.collapsible) .side-panel{display:none}:host.rpanel-collapsed{padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-collapsed:not(.collapsible) .side-panel{inline-size:0;overflow:hidden}:host.rpanel-collapsed.collapsible .side-panel{inline-size:var(--rpanel-collapsed-width);overflow:hidden}.side-panel{position:fixed;z-index:1029;inset-block-start:calc(48px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px));inset-block-end:0;inset-inline-end:0;overflow-x:hidden;background:var(--element-base-1)}.side-panel>.inner{display:flex;flex-direction:column;position:absolute;inset-block:0;inset-inline-start:0}@media (max-width: 575.98px){:host.enable-mobile{padding-inline-end:0!important;--si-layout-header-first-element-offset-end: 40px}:host.enable-mobile.rpanel-collapsed .side-panel{inline-size:0!important}}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiSidePanelContentComponent {
+    /**
+     * @defaultValue false
+     */
+    collapsible = input(false, { transform: booleanAttribute });
+    /**
+     * Header of side panel
+     *
+     * @defaultValue ''
+     */
+    heading = input('');
+    /**
+     * Input list of primary action items
+     *
+     * @defaultValue []
+     */
+    primaryActions = input([]);
+    /**
+     * Input list of secondary action items.
+     *
+     * @defaultValue []
+     */
+    secondaryActions = input([]);
+    /**
+     * Status icons/actions
+     *
+     * @defaultValue []
+     */
+    statusActions = input([]);
+    /**
+     * Toggles search bar
+     *
+     * @defaultValue false
+     */
+    searchable = input(false, { transform: booleanAttribute });
+    /**
+     * Placeholder text for search
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_SIDE_PANEL.SEARCH_PLACEHOLDER:Search...`
+     * ```
+     */
+    searchPlaceholder = input($localize `:@@SI_SIDE_PANEL.SEARCH_PLACEHOLDER:Search...`);
+    /**
+     * Aria label for close button. Needed for a11y
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_SIDE_PANEL.CLOSE:Close`
+     * ```
+     */
+    closeButtonLabel = input($localize `:@@SI_SIDE_PANEL.CLOSE:Close`);
+    /**
+     * Toggle icon aria-label, required for a11y
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_SIDE_PANEL.TOGGLE:Toggle`
+     * ```
+     */
+    toggleItemLabel = input($localize `:@@SI_SIDE_PANEL.TOGGLE:Toggle`);
+    /**
+     * Show a badge on the mobile drawer indicating a new alert or notification
+     *
+     * @defaultValue false
+     */
+    showMobileDrawerBadge = input(false, { transform: booleanAttribute });
+    /**
+     * Output for search bar input
+     */
+    searchEvent = output();
+    isCollapsed = signal(false);
+    isExpanded = signal(true);
+    enableMobile = computed(() => this.service?.enableMobile() ?? false);
+    mobileSize = signal(false);
+    focusable = computed(() => !this.mobileSize() || !this.enableMobile() || !this.isCollapsed());
+    icons = addIcons({ elementDoubleLeft, elementDoubleRight });
+    /**
+     * The $rpanel-transition-duration in the style is 0.5 seconds.
+     * For the animation we need to wait until the resize is done.
+     */
+    resizeAnimationDelay = 500;
+    destroyRef = inject(DestroyRef);
+    service = inject(SiSidePanelService);
+    breakpointObserver = inject(BreakpointObserver);
+    expandedTimeout;
+    constructor() {
+        const accordionHcollapse = inject(SiAccordionHCollapseService);
+        this.service.isOpen$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(state => {
+            this.isCollapsed.set(!state);
+            clearTimeout(this.expandedTimeout);
+            this.expandedTimeout = undefined;
+            if (!state) {
+                this.isExpanded.set(false);
+            }
+            else {
+                this.expandedTimeout = setTimeout(() => {
+                    this.isExpanded.set(true);
+                }, this.resizeAnimationDelay / 2);
+            }
+            accordionHcollapse.hcollapsed.set(!state);
+        });
+        accordionHcollapse.open$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.service.open());
+    }
+    ngOnInit() {
+        this.breakpointObserver
+            .observe('(max-width: ' + BOOTSTRAP_BREAKPOINTS.smMinimum + 'px)')
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(({ matches }) => {
+            this.mobileSize.set(matches);
+        });
+    }
+    toggleSidePanel(event) {
+        if (event?.detail !== 0) {
+            // Blur except if triggered by keyboard
+            document?.activeElement?.blur();
+        }
+        if (this.service.isTemporaryOpen()) {
+            this.service.hideTemporaryContent();
+        }
+        else {
+            this.service.toggle();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSidePanelContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiSidePanelContentComponent, isStandalone: true, selector: "si-side-panel-content", inputs: { collapsible: { classPropertyName: "collapsible", 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 }, showMobileDrawerBadge: { classPropertyName: "showMobileDrawerBadge", publicName: "showMobileDrawerBadge", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchEvent: "searchEvent" }, host: { properties: { "class.collapsed": "isCollapsed()", "class.expanded": "isExpanded()", "class.enable-mobile": "enableMobile()" } }, providers: [SiAccordionHCollapseService], ngImport: i0, template: "<div class=\"rpanel-header pt-5\">\n  <p class=\"si-title-2 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  <button\n    type=\"button\"\n    class=\"close-button btn btn-circle btn-sm btn-ghost element-cancel me-4\"\n    [attr.aria-label]=\"closeButtonLabel() | translate\"\n    [tabindex]=\"focusable() ? '0' : '-1'\"\n    (click)=\"toggleSidePanel($event)\"\n  ></button>\n  <div class=\"collapse-toggle\">\n    <button\n      type=\"button\"\n      class=\"side-panel-collapse-toggle btn btn-circle btn-sm btn-ghost mx-4\"\n      [attr.aria-label]=\"toggleItemLabel() | translate\"\n      (click)=\"toggleSidePanel($event)\"\n    >\n      <si-icon-next\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 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            [attr.aria-label]=\"!isCollapsed ? '' : (dp.title | translate)\"\n            [siLink]=\"dp\"\n          >\n            <si-icon-next class=\"icon\" [icon]=\"dp.icon!\" />\n            @if (dp.overlayIcon) {\n              <si-icon-next class=\"icon position-absolute\" [icon]=\"dp.overlayIcon\" />\n            }\n            <span class=\"ms-2 auto-hide\">{{ dp.title | translate }}</span>\n          </a>\n        }\n        @if (dp.disabled) {\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: [":host{--si-accordion-radius: 0;display:flex;flex-direction:column;flex:1;gap:12px}: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{gap:0}:host-context(.collapsible) :host.collapsed .auto-hide{display:none}:host-context(.collapsible) :host.collapsed .rpanel-wrapper{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)}.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,.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:48px}: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: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "directive", type: SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "component", type: SiSearchBarComponent, selector: "si-search-bar", inputs: ["debounceTime", "prohibitedCharacters", "placeholder", "showIcon", "tabbable", "value", "readonly", "colorVariant", "disabled"], outputs: ["searchChange"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1$1.SiTranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSidePanelContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-side-panel-content', providers: [SiAccordionHCollapseService], imports: [
+                        SiContentActionBarComponent,
+                        SiIconNextComponent,
+                        SiLinkDirective,
+                        SiSearchBarComponent,
+                        SiTranslateModule
+                    ], host: {
+                        '[class.collapsed]': 'isCollapsed()',
+                        '[class.expanded]': 'isExpanded()',
+                        '[class.enable-mobile]': 'enableMobile()'
+                    }, template: "<div class=\"rpanel-header pt-5\">\n  <p class=\"si-title-2 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  <button\n    type=\"button\"\n    class=\"close-button btn btn-circle btn-sm btn-ghost element-cancel me-4\"\n    [attr.aria-label]=\"closeButtonLabel() | translate\"\n    [tabindex]=\"focusable() ? '0' : '-1'\"\n    (click)=\"toggleSidePanel($event)\"\n  ></button>\n  <div class=\"collapse-toggle\">\n    <button\n      type=\"button\"\n      class=\"side-panel-collapse-toggle btn btn-circle btn-sm btn-ghost mx-4\"\n      [attr.aria-label]=\"toggleItemLabel() | translate\"\n      (click)=\"toggleSidePanel($event)\"\n    >\n      <si-icon-next\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 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            [attr.aria-label]=\"!isCollapsed ? '' : (dp.title | translate)\"\n            [siLink]=\"dp\"\n          >\n            <si-icon-next class=\"icon\" [icon]=\"dp.icon!\" />\n            @if (dp.overlayIcon) {\n              <si-icon-next class=\"icon position-absolute\" [icon]=\"dp.overlayIcon\" />\n            }\n            <span class=\"ms-2 auto-hide\">{{ dp.title | translate }}</span>\n          </a>\n        }\n        @if (dp.disabled) {\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: [":host{--si-accordion-radius: 0;display:flex;flex-direction:column;flex:1;gap:12px}: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{gap:0}:host-context(.collapsible) :host.collapsed .auto-hide{display:none}:host-context(.collapsible) :host.collapsed .rpanel-wrapper{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)}.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,.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:48px}: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: () => [] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiSidePanelModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSidePanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SiSidePanelModule, imports: [SiSidePanelComponent, SiSidePanelContentComponent], exports: [SiSidePanelComponent, SiSidePanelContentComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSidePanelModule, imports: [SiSidePanelComponent, SiSidePanelContentComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiSidePanelModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [SiSidePanelComponent, SiSidePanelContentComponent],
+                    exports: [SiSidePanelComponent, SiSidePanelContentComponent]
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SiSidePanelComponent, SiSidePanelContentComponent, SiSidePanelModule, SiSidePanelService };
+//# sourceMappingURL=siemens-element-ng-side-panel.mjs.map