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, 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';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { ResizeObserverService, BOOTSTRAP_BREAKPOINTS } from '@siemens/element-ng/resize-observer';
import { t, SiTranslatePipe } from '@siemens/element-translate-ng/translate';
import { debounceTime } from 'rxjs/operators';
import { BreakpointObserver } from '@angular/cdk/layout';
import { ActivatedRoute, RouterLink } from '@angular/router';
import { elementZoom, elementPinch, elementExport, elementDoubleRight, elementDoubleLeft, elementCancel } from '@siemens/element-icons';
import { SiAccordionHCollapseService } from '@siemens/element-ng/accordion';
import { SiContentActionBarComponent } from '@siemens/element-ng/content-action-bar';
import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
import { SiLinkDirective } from '@siemens/element-ng/link';
import { SiSearchBarComponent } from '@siemens/element-ng/search-bar';
import { SiTooltipDirective } from '@siemens/element-ng/tooltip';

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, ...(ngDevMode ? [{ debugName: "enableMobile" }] : []));
    /** @internal */
    collapsible = signal(false, ...(ngDevMode ? [{ debugName: "collapsible" }] : []));
    fullscreenSubject = new BehaviorSubject(false);
    /**
     * Emits when fullscreen overlay mode is toggled.
     */
    isFullscreen$ = this.fullscreenSubject.asObservable();
    // Body scroll management
    bodyScrollLocks = 0;
    originalBodyOverflow;
    document = inject(DOCUMENT);
    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
    /** 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;
    }
    /** Toggle fullscreen overlay mode. */
    toggleFullscreen() {
        this.fullscreenSubject.next(!this.fullscreenSubject.value);
    }
    /** Set fullscreen overlay mode. */
    setFullscreen(fullscreen) {
        this.fullscreenSubject.next(fullscreen);
    }
    /** Indicate if side panel is in fullscreen overlay mode. */
    isFullscreen() {
        return this.fullscreenSubject.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;
    }
    /**
     * Request body scroll lock. Uses reference counting to handle multiple panels.
     */
    requestBodyScrollLock() {
        if (!this.isBrowser) {
            return;
        }
        if (this.bodyScrollLocks === 0) {
            this.originalBodyOverflow = this.document.body.style.overflow;
            this.document.body.style.overflow = 'hidden';
        }
        this.bodyScrollLocks++;
    }
    /**
     * Release body scroll lock. Restores scroll when no more locks exist.
     */
    releaseBodyScrollLock() {
        if (!this.isBrowser || this.bodyScrollLocks === 0) {
            return;
        }
        this.bodyScrollLocks--;
        if (this.bodyScrollLocks === 0 && this.originalBodyOverflow !== undefined) {
            this.document.body.style.overflow = this.originalBodyOverflow;
            this.originalBodyOverflow = undefined;
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSidePanelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSidePanelService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSidePanelService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root'
                }]
        }] });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
class SiSidePanelComponent {
    /**
     * Custom breakpoint for ultra-wide screens (≥1920px)
     */
    static xxxlMinimum = 1920;
    /**
     * @defaultValue false
     */
    collapsible = input(false, { ...(ngDevMode ? { debugName: "collapsible" } : {}), transform: booleanAttribute });
    /**
     * Default state of navigation
     */
    collapsed = model(...(ngDevMode ? [undefined, { debugName: "collapsed" }] : []));
    /**
     * Mode of side panel
     * (ignored below a certain width)
     *
     * @defaultValue 'over'
     */
    mode = input('over', ...(ngDevMode ? [{ debugName: "mode" }] : []));
    /**
     * Size of side-panel
     *
     * @defaultValue 'regular'
     */
    size = input('regular', ...(ngDevMode ? [{ debugName: "size" }] : []));
    /**
     * Toggle icon aria-label, required for a11y
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_SIDE_PANEL.TOGGLE:Toggle`)
     * ```
     */
    toggleItemLabel = input(t(() => $localize `:@@SI_SIDE_PANEL.TOGGLE:Toggle`), ...(ngDevMode ? [{ debugName: "toggleItemLabel" }] : []));
    /**
     * 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(...(ngDevMode ? [undefined, { debugName: "breakpoints" }] : []));
    /**
     * Enable mobile drawer for small screen sizes. Should not be used in conjunction with the vertical navbar.
     *
     * @defaultValue false
     */
    enableMobile = input(false, { ...(ngDevMode ? { debugName: "enableMobile" } : {}), transform: booleanAttribute });
    /**
     * Whether to disable backdrop when side panel is open in over mode.
     * When false (default), the backdrop prevents interaction with background content while preserving visual context.
     *
     * @defaultValue false
     */
    disableBackdrop = input(false, { ...(ngDevMode ? { debugName: "disableBackdrop" } : {}), transform: booleanAttribute });
    /**
     * 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', ...(ngDevMode ? [{ debugName: "isScrollMode" }] : []));
    isOverMode = computed(() => {
        if (this.mode() === 'over') {
            return true;
        }
        if (this.mode() === 'scroll') {
            if (this.isXs() || this.isSm() || this.isMd()) {
                return true;
            }
            if (this.isLg() && (this.size() === 'wide' || this.size() === 'extended')) {
                return true;
            }
        }
        return false;
    }, ...(ngDevMode ? [{ debugName: "isOverMode" }] : []));
    showBackdrop = computed(() => !this.disableBackdrop() && this.isOverMode() && !this.isCollapsed(), ...(ngDevMode ? [{ debugName: "showBackdrop" }] : []));
    isXs = signal(false, ...(ngDevMode ? [{ debugName: "isXs" }] : []));
    isSm = signal(false, ...(ngDevMode ? [{ debugName: "isSm" }] : []));
    isMd = signal(true, ...(ngDevMode ? [{ debugName: "isMd" }] : []));
    isLg = signal(false, ...(ngDevMode ? [{ debugName: "isLg" }] : []));
    isXl = signal(false, ...(ngDevMode ? [{ debugName: "isXl" }] : []));
    isXxl = signal(false, ...(ngDevMode ? [{ debugName: "isXxl" }] : []));
    isXxxl = signal(false, ...(ngDevMode ? [{ debugName: "isXxxl" }] : []));
    isCollapsed = signal(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : []));
    ready = signal(false, ...(ngDevMode ? [{ debugName: "ready" }] : []));
    isHidden = signal(false, ...(ngDevMode ? [{ debugName: "isHidden" }] : []));
    isFullscreenOverlay = signal(false, ...(ngDevMode ? [{ debugName: "isFullscreenOverlay" }] : []));
    showTempContent = signal(false, ...(ngDevMode ? [{ debugName: "showTempContent" }] : []));
    panelElement = viewChild.required('sidePanel');
    contentElement = viewChild.required('content');
    portalOutlet = viewChild.required('portalOutlet', {
        read: CdkPortalOutlet
    });
    tmpPortalOutlet = viewChild.required('tmpPortalOutlet', {
        read: CdkPortalOutlet
    });
    /**
     * 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$1);
    constructor() {
        this.service.isFullscreen$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(fullscreen => {
            this.isFullscreenOverlay.set(fullscreen);
        });
        if (this.isBrowser) {
            this.resizeEvent
                .asObservable()
                .pipe(takeUntilDestroyed(), debounceTime(this.resizeEventDelay))
                .subscribe(() => {
                this.openingOrClosing = false;
                this.emitResizeOutputs();
                this.service.setFullscreen(false);
                if (this.isCollapsedInternal && !this.collapsible()) {
                    this.isHidden.set(true);
                }
            });
        }
        effect(() => {
            if (this.showBackdrop()) {
                this.service.requestBodyScrollLock();
            }
            else {
                this.service.releaseBodyScrollLock();
            }
        });
    }
    ngOnChanges(changes) {
        if (changes.collapsed) {
            if (this.collapsed()) {
                this.service.close();
            }
            else {
                this.service.open();
            }
        }
        if (changes.enableMobile) {
            this.service.enableMobile.set(this.enableMobile());
        }
        if (changes.collapsible) {
            this.service.collapsible.set(this.collapsible());
        }
    }
    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.service.collapsible.set(this.collapsible());
        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(isOpen => this.openClose(isOpen));
    }
    ngOnDestroy() {
        this.portalOutlet().detach();
        this.service.releaseBodyScrollLock();
    }
    /**
     * 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 && width < breakpoints.xxlMinimum);
        this.isXxl.set(width >= breakpoints.xxlMinimum && width < SiSidePanelComponent.xxxlMinimum);
        this.isXxxl.set(width >= SiSidePanelComponent.xxxlMinimum);
    }
    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: "21.0.8", ngImport: i0, type: SiSidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiSidePanelComponent, isStandalone: true, selector: "si-side-panel", inputs: { collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, toggleItemLabel: { classPropertyName: "toggleItemLabel", publicName: "toggleItemLabel", isSignal: true, isRequired: false, transformFunction: null }, breakpoints: { classPropertyName: "breakpoints", publicName: "breakpoints", isSignal: true, isRequired: false, transformFunction: null }, enableMobile: { classPropertyName: "enableMobile", publicName: "enableMobile", isSignal: true, isRequired: false, transformFunction: null }, disableBackdrop: { classPropertyName: "disableBackdrop", publicName: "disableBackdrop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", closed: "closed", contentResize: "contentResize" }, host: { properties: { "class.enable-mobile": "enableMobile()", "class.rpanel-size--regular": "this.size() === \"regular\"", "class.rpanel-size--wide": "this.size() === \"wide\"", "class.rpanel-size--extended": "this.size() === \"extended\"", "class.rpanel-mode--over": "isOverMode()", "class.rpanel-mode--scroll": "isScrollMode()", "class.rpanel-collapsed": "isCollapsed()", "class.ready": "ready()", "class.collapsible": "collapsible() && !this.showTempContent()", "class.collapsible-temp": "collapsible() && this.showTempContent()", "class.rpanel-hidden": "isHidden()", "class.rpanel-fullscreen-overlay": "isFullscreenOverlay()", "class.rpanel-resize-xs": "isXs()", "class.rpanel-resize-sm": "isSm()", "class.rpanel-resize-md": "isMd()", "class.rpanel-resize-lg": "isLg()", "class.rpanel-resize-xl": "isXl()", "class.rpanel-resize-xxl": "isXxl()", "class.rpanel-resize-xxxl": "isXxxl()" }, classAttribute: "si-layout-inner" }, viewQueries: [{ propertyName: "panelElement", first: true, predicate: ["sidePanel"], descendants: true, isSignal: true }, { propertyName: "contentElement", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "portalOutlet", first: true, predicate: ["portalOutlet"], descendants: true, read: CdkPortalOutlet, isSignal: true }, { propertyName: "tmpPortalOutlet", first: true, predicate: ["tmpPortalOutlet"], descendants: true, read: CdkPortalOutlet, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@if (showBackdrop()) {\n  <div class=\"modal-backdrop\" animate.leave=\"backdrop-leave\" (click)=\"toggleSidePanel()\"></div>\n}\n<div #sidePanel class=\"side-panel focus-none\" tabindex=\"-1\">\n  <div class=\"inner\" [class.d-none]=\"showTempContent()\">\n    <ng-content select=\"si-side-panel-content, element-side-panel-content\" />\n    <ng-container #portalOutlet cdkPortalOutlet />\n  </div>\n  <div class=\"inner\" [class.d-none]=\"!showTempContent()\">\n    <ng-container #tmpPortalOutlet cdkPortalOutlet />\n  </div>\n</div>\n<div #content class=\"main-content si-layout-inner\">\n  <ng-content />\n</div>\n", styles: [":host{--rpanel-collapsed-padding: 0;--rpanel-size: 390px;display:block;padding-inline-end:var(--rpanel-size)}:host.ready{transition:padding-inline-end calc(.5s * var(--element-animations-enabled, 1))}:host.ready .side-panel,:host.ready .side-panel>.inner{transition:inline-size calc(.5s * var(--element-animations-enabled, 1)),box-shadow calc(.5s * var(--element-animations-enabled, 1))}:host .modal-backdrop{opacity:1;transition:opacity .15s linear;z-index:1029}@starting-style{:host .modal-backdrop{opacity:0}}:host .modal-backdrop.backdrop-leave{opacity:0;transition:opacity .15s linear}:host .side-panel,:host .side-panel>.inner{inline-size:var(--rpanel-width-fullscreen, var(--rpanel-size))}:host.collapsible,:host.collapsible-temp{--rpanel-collapsed-width: 48px}:host.rpanel-size--wide{--rpanel-size: 500px}:host.rpanel-size--extended{--rpanel-size: 100vw}:host.rpanel-fullscreen-overlay{--rpanel-width-fullscreen: 100vw}:host.rpanel-mode--over{padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-mode--over:not(.rpanel-collapsed) .side-panel{box-shadow:0 0 8px var(--element-box-shadow-color-1),0 8px 8px var(--element-box-shadow-color-2)}:host.rpanel-resize-md.rpanel-size--extended{--rpanel-size: 480px}:host.rpanel-resize-lg.rpanel-size--extended{--rpanel-size: 480px}:host.rpanel-resize-xl.rpanel-size--extended{--rpanel-size: 640px}:host.rpanel-resize-xxl.rpanel-size--extended{--rpanel-size: 720px}:host.rpanel-resize-xxxl.rpanel-size--extended{--rpanel-size: 912px}:host.rpanel-resize-sm.rpanel-size--extended{--fullscreen-button-display: none}:host.rpanel-resize-xs{--fullscreen-button-display: none;padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-resize-xs .side-panel{z-index:1031}:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel{box-shadow:0 0 8px var(--element-box-shadow-color-1),0 8px 8px var(--element-box-shadow-color-2)}:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel,:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel>.inner{inline-size:100vw}: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: "21.0.8", ngImport: i0, type: SiSidePanelComponent, decorators: [{
            type: Component,
            args: [{ selector: 'si-side-panel', imports: [PortalModule], 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-size--extended]': 'this.size() === "extended"',
                        '[class.rpanel-mode--over]': 'isOverMode()',
                        '[class.rpanel-mode--scroll]': 'isScrollMode()',
                        '[class.rpanel-collapsed]': 'isCollapsed()',
                        '[class.ready]': 'ready()',
                        '[class.collapsible]': 'collapsible() && !this.showTempContent()',
                        '[class.collapsible-temp]': 'collapsible() && this.showTempContent()',
                        '[class.rpanel-hidden]': 'isHidden()',
                        '[class.rpanel-fullscreen-overlay]': 'isFullscreenOverlay()',
                        '[class.rpanel-resize-xs]': 'isXs()',
                        '[class.rpanel-resize-sm]': 'isSm()',
                        '[class.rpanel-resize-md]': 'isMd()',
                        '[class.rpanel-resize-lg]': 'isLg()',
                        '[class.rpanel-resize-xl]': 'isXl()',
                        '[class.rpanel-resize-xxl]': 'isXxl()',
                        '[class.rpanel-resize-xxxl]': 'isXxxl()'
                    }, template: "@if (showBackdrop()) {\n  <div class=\"modal-backdrop\" animate.leave=\"backdrop-leave\" (click)=\"toggleSidePanel()\"></div>\n}\n<div #sidePanel class=\"side-panel focus-none\" tabindex=\"-1\">\n  <div class=\"inner\" [class.d-none]=\"showTempContent()\">\n    <ng-content select=\"si-side-panel-content, element-side-panel-content\" />\n    <ng-container #portalOutlet cdkPortalOutlet />\n  </div>\n  <div class=\"inner\" [class.d-none]=\"!showTempContent()\">\n    <ng-container #tmpPortalOutlet cdkPortalOutlet />\n  </div>\n</div>\n<div #content class=\"main-content si-layout-inner\">\n  <ng-content />\n</div>\n", styles: [":host{--rpanel-collapsed-padding: 0;--rpanel-size: 390px;display:block;padding-inline-end:var(--rpanel-size)}:host.ready{transition:padding-inline-end calc(.5s * var(--element-animations-enabled, 1))}:host.ready .side-panel,:host.ready .side-panel>.inner{transition:inline-size calc(.5s * var(--element-animations-enabled, 1)),box-shadow calc(.5s * var(--element-animations-enabled, 1))}:host .modal-backdrop{opacity:1;transition:opacity .15s linear;z-index:1029}@starting-style{:host .modal-backdrop{opacity:0}}:host .modal-backdrop.backdrop-leave{opacity:0;transition:opacity .15s linear}:host .side-panel,:host .side-panel>.inner{inline-size:var(--rpanel-width-fullscreen, var(--rpanel-size))}:host.collapsible,:host.collapsible-temp{--rpanel-collapsed-width: 48px}:host.rpanel-size--wide{--rpanel-size: 500px}:host.rpanel-size--extended{--rpanel-size: 100vw}:host.rpanel-fullscreen-overlay{--rpanel-width-fullscreen: 100vw}:host.rpanel-mode--over{padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-mode--over:not(.rpanel-collapsed) .side-panel{box-shadow:0 0 8px var(--element-box-shadow-color-1),0 8px 8px var(--element-box-shadow-color-2)}:host.rpanel-resize-md.rpanel-size--extended{--rpanel-size: 480px}:host.rpanel-resize-lg.rpanel-size--extended{--rpanel-size: 480px}:host.rpanel-resize-xl.rpanel-size--extended{--rpanel-size: 640px}:host.rpanel-resize-xxl.rpanel-size--extended{--rpanel-size: 720px}:host.rpanel-resize-xxxl.rpanel-size--extended{--rpanel-size: 912px}:host.rpanel-resize-sm.rpanel-size--extended{--fullscreen-button-display: none}:host.rpanel-resize-xs{--fullscreen-button-display: none;padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-resize-xs .side-panel{z-index:1031}:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel{box-shadow:0 0 8px var(--element-box-shadow-color-1),0 8px 8px var(--element-box-shadow-color-2)}:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel,:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel>.inner{inline-size:100vw}: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: () => [], propDecorators: { collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], toggleItemLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleItemLabel", required: false }] }], breakpoints: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakpoints", required: false }] }], enableMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableMobile", required: false }] }], disableBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableBackdrop", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], contentResize: [{ type: i0.Output, args: ["contentResize"] }], panelElement: [{ type: i0.ViewChild, args: ['sidePanel', { isSignal: true }] }], contentElement: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], portalOutlet: [{ type: i0.ViewChild, args: ['portalOutlet', { ...{
                            read: CdkPortalOutlet
                        }, isSignal: true }] }], tmpPortalOutlet: [{ type: i0.ViewChild, args: ['tmpPortalOutlet', { ...{
                            read: CdkPortalOutlet
                        }, isSignal: true }] }] } });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
class SiSidePanelContentComponent {
    /**
     * @deprecated This input is no longer used. The collapsible state is managed by the SiSidePanelService.
     * This input will be removed in a future major version.
     * @defaultValue undefined
     */
    collapsibleInput = input(undefined, { ...(ngDevMode ? { debugName: "collapsibleInput" } : {}), 
        // eslint-disable-next-line @angular-eslint/no-input-rename
        alias: 'collapsible',
        transform: booleanAttribute });
    /**
     * Header of side panel
     *
     * @defaultValue ''
     */
    heading = input('', ...(ngDevMode ? [{ debugName: "heading" }] : []));
    /**
     * Input list of primary action items
     *
     * @defaultValue []
     */
    primaryActions = input([], ...(ngDevMode ? [{ debugName: "primaryActions" }] : []));
    /**
     * Input list of secondary action items.
     *
     * @defaultValue []
     */
    secondaryActions = input([], ...(ngDevMode ? [{ debugName: "secondaryActions" }] : []));
    /**
     * 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" }] : []));
    /**
     * Toggles search bar
     *
     * @defaultValue false
     */
    searchable = input(false, { ...(ngDevMode ? { debugName: "searchable" } : {}), transform: booleanAttribute });
    /**
     * Placeholder text for search
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_SIDE_PANEL.SEARCH_PLACEHOLDER:Search...`)
     * ```
     */
    searchPlaceholder = input(t(() => $localize `:@@SI_SIDE_PANEL.SEARCH_PLACEHOLDER:Search...`), ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : []));
    /**
     * Aria label for close button. Needed for a11y
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_SIDE_PANEL.CLOSE:Close`)
     * ```
     */
    closeButtonLabel = input(t(() => $localize `:@@SI_SIDE_PANEL.CLOSE:Close`), ...(ngDevMode ? [{ debugName: "closeButtonLabel" }] : []));
    /**
     * Toggle icon aria-label, required for a11y
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_SIDE_PANEL.TOGGLE:Toggle`)
     * ```
     */
    toggleItemLabel = input(t(() => $localize `:@@SI_SIDE_PANEL.TOGGLE:Toggle`), ...(ngDevMode ? [{ debugName: "toggleItemLabel" }] : []));
    /**
     * Enter fullscreen aria-label, required for a11y
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_SIDE_PANEL.ENTER_FULLSCREEN:Enter fullscreen`)
     * ```
     */
    enterFullscreenLabel = input(t(() => $localize `:@@SI_SIDE_PANEL.ENTER_FULLSCREEN:Enter fullscreen`), ...(ngDevMode ? [{ debugName: "enterFullscreenLabel" }] : []));
    /**
     * Exit fullscreen aria-label, required for a11y
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_SIDE_PANEL.EXIT_FULLSCREEN:Exit fullscreen`)
     * ```
     */
    exitFullscreenLabel = input(t(() => $localize `:@@SI_SIDE_PANEL.EXIT_FULLSCREEN:Exit fullscreen`), ...(ngDevMode ? [{ debugName: "exitFullscreenLabel" }] : []));
    /**
     * Show a badge on the mobile drawer indicating a new alert or notification
     *
     * @defaultValue false
     */
    showMobileDrawerBadge = input(false, { ...(ngDevMode ? { debugName: "showMobileDrawerBadge" } : {}), transform: booleanAttribute });
    /**
     * Display mode for side panel - enables navigate or overlay functionality
     */
    displayMode = input(...(ngDevMode ? [undefined, { debugName: "displayMode" }] : []));
    /**
     * Configuration for navigate mode
     */
    navigateConfig = input(...(ngDevMode ? [undefined, { debugName: "navigateConfig" }] : []));
    /**
     * Output for search bar input
     */
    searchEvent = output();
    activatedRoute = inject(ActivatedRoute, { optional: true });
    service = inject(SiSidePanelService);
    isCollapsed = signal(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : []));
    isExpanded = signal(true, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
    isFullscreen = signal(false, ...(ngDevMode ? [{ debugName: "isFullscreen" }] : []));
    enableMobile = computed(() => this.service?.enableMobile() ?? false, ...(ngDevMode ? [{ debugName: "enableMobile" }] : []));
    collapsible = computed(() => {
        return this.collapsibleInput() ?? this.service?.collapsible() ?? false;
    }, ...(ngDevMode ? [{ debugName: "collapsible" }] : []));
    mobileSize = signal(false, ...(ngDevMode ? [{ debugName: "mobileSize" }] : []));
    focusable = computed(() => !this.mobileSize() || !this.enableMobile() || !this.isCollapsed(), ...(ngDevMode ? [{ debugName: "focusable" }] : []));
    icons = addIcons({
        elementCancel,
        elementDoubleLeft,
        elementDoubleRight,
        elementExport,
        elementPinch,
        elementZoom
    });
    /**
     * 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);
    breakpointObserver = inject(BreakpointObserver);
    expandedTimeout;
    constructor() {
        const accordionHcollapse = inject(SiAccordionHCollapseService);
        this.service.isFullscreen$.pipe(takeUntilDestroyed()).subscribe(fullscreen => {
            this.isFullscreen.set(fullscreen);
        });
        this.service.isOpen$.pipe(takeUntilDestroyed()).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);
            }
        });
        effect(() => {
            if (this.collapsible()) {
                accordionHcollapse.hcollapsed.set(this.isCollapsed());
            }
        });
        effect(() => {
            if (this.isCollapsed() && !this.service.isTemporaryOpen() && this.isFullscreen()) {
                timer(this.resizeAnimationDelay)
                    .pipe(takeUntilDestroyed(this.destroyRef))
                    .subscribe(() => {
                    this.service.setFullscreen(false);
                });
            }
        });
        accordionHcollapse.open$.pipe(takeUntilDestroyed()).subscribe(() => this.service.open());
    }
    ngOnInit() {
        this.breakpointObserver
            .observe('(max-width: ' + BOOTSTRAP_BREAKPOINTS.smMinimum + 'px)')
            .pipe(takeUntilDestroyed(this.destroyRef))
            .subscribe(({ matches }) => {
            this.mobileSize.set(matches);
        });
    }
    /**
     * Toggle fullscreen overlay mode
     */
    toggleFullscreen() {
        if (this.isCollapsed() && !this.service.isTemporaryOpen()) {
            return;
        }
        this.service.toggleFullscreen();
    }
    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: "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 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,
                        RouterLink,
                        SiSearchBarComponent,
                        SiTranslatePipe,
                        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 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,
            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,
                        SiSidePanelActionsComponent,
                        SiSidePanelActionComponent
                    ],
                    exports: [
                        SiSidePanelComponent,
                        SiSidePanelContentComponent,
                        SiSidePanelActionsComponent,
                        SiSidePanelActionComponent
                    ]
                }]
        }] });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */

/**
 * Generated bundle index. Do not edit.
 */

export { SiSidePanelActionComponent, SiSidePanelActionsComponent, SiSidePanelComponent, SiSidePanelContentComponent, SiSidePanelModule, SiSidePanelService };
//# sourceMappingURL=siemens-element-ng-side-panel.mjs.map
