import { NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, ElementRef, viewChild, input, computed, model, booleanAttribute, signal, ChangeDetectionStrategy, Component, contentChild, DestroyRef, effect } from '@angular/core';
import { areAnimationsDisabled } from '@siemens/element-ng/common';
import { ResizeObserverService, BOOTSTRAP_BREAKPOINTS } from '@siemens/element-ng/resize-observer';
import { SiSplitComponent, SiSplitPartComponent } from '@siemens/element-ng/split';
import { Subject, BehaviorSubject } from 'rxjs';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { RouterOutlet, Router, ActivatedRoute } from '@angular/router';
import { elementBack } from '@siemens/element-icons';
import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
import { t, SiTranslatePipe } from '@siemens/element-translate-ng/translate';

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
class SiListDetailsComponent {
    resizeSubs;
    elementRef = inject(ElementRef);
    resizeObserver = inject(ResizeObserverService);
    listDetailsContainer = viewChild.required('listDetailsContainer');
    animationsGloballyDisabled = areAnimationsDisabled();
    /**
     * A numeric value defining the minimum width in px, which the component needs
     * to be displayed in its large layout. Whenever smaller than
     * this threshold, the small layout will be used. Default is
     * value is BOOTSTRAP_BREAKPOINTS.mdMinimum.
     *
     * @defaultValue BOOTSTRAP_BREAKPOINTS.mdMinimum
     */
    expandBreakpoint = input(BOOTSTRAP_BREAKPOINTS.mdMinimum, ...(ngDevMode ? [{ debugName: "expandBreakpoint" }] : []));
    hasLargeSize = computed(() => {
        const dimensions = this.resizeDimensions();
        return !!dimensions && dimensions.width >= this.expandBreakpoint();
    }, ...(ngDevMode ? [{ debugName: "hasLargeSize" }] : []));
    /**
     * Whether the details are currently active or not, mostly relevant in the
     * responsive scenario when the viewport only shows either the list or the detail.
     *
     * @defaultValue false
     */
    detailsActive = model(false, ...(ngDevMode ? [{ debugName: "detailsActive" }] : []));
    /**
     * Whether the list and detail parts should be resizable by a splitter or not.
     * This is only supported in the 'large' scenario (when `hasLargeSize` is `true`).
     * Default value is `false`.
     *
     * @defaultValue false
     */
    disableResizing = input(false, { ...(ngDevMode ? { debugName: "disableResizing" } : {}), transform: booleanAttribute });
    /**
     * The percentage width of the list view of the overall component width.
     *
     * @defaultValue 32
     */
    listWidth = model(32, ...(ngDevMode ? [{ debugName: "listWidth" }] : []));
    /**
     * Sets the minimal width of the list component in pixel.
     *
     * @defaultValue 300
     */
    minListSize = input(300, ...(ngDevMode ? [{ debugName: "minListSize" }] : []));
    /**
     * Sets the minimal width of the detail component in pixel.
     *
     * @defaultValue 300
     */
    minDetailsSize = input(300, ...(ngDevMode ? [{ debugName: "minDetailsSize" }] : []));
    /**
     * An optional stateId to uniquely identify a component instance.
     * Required for persistence of ui state.
     */
    stateId = input(...(ngDevMode ? [undefined, { debugName: "stateId" }] : []));
    splitSizes = computed(() => [
        this.listWidth(),
        100 - this.listWidth()
    ], ...(ngDevMode ? [{ debugName: "splitSizes" }] : []));
    listStateId = computed(() => {
        const stateId = this.stateId();
        return stateId ? `${stateId}-list` : undefined;
    }, ...(ngDevMode ? [{ debugName: "listStateId" }] : []));
    detailsStateId = computed(() => {
        const stateId = this.stateId();
        return stateId ? `${stateId}-details` : undefined;
    }, ...(ngDevMode ? [{ debugName: "detailsStateId" }] : []));
    opacity = computed(() => (this.resizeDimensions() ? '' : '0'), ...(ngDevMode ? [{ debugName: "opacity" }] : []));
    /** @internal */
    detailsExpandedAnimation = computed(() => {
        if (!this.hasLargeSize()) {
            return this.detailsActive() ? 'details-active expanded' : 'collapsed';
        }
        else {
            return 'disabled';
        }
    }, ...(ngDevMode ? [{ debugName: "detailsExpandedAnimation" }] : []));
    // Used for focus transfer, can not use a focus trap for this.
    hadLargeSizePreviously;
    detailsActivePreviously;
    previouslyFocusedElementInList;
    /** @internal */
    transferFocusToList = new Subject();
    /**
     * A behavior subject because the details component may only be created when details are visible.
     * @internal
     */
    transferFocusToDetails = new BehaviorSubject(false);
    animationDone;
    ngOnChanges(changes) {
        if (changes.detailsActive) {
            this.transferFocus();
        }
    }
    ngOnInit() {
        this.resizeSubs = this.resizeObserver
            .observe(this.elementRef.nativeElement, 100, true)
            .subscribe(dimensions => {
            this.resizeDimensions.set(dimensions);
            this.transferFocus();
        });
    }
    ngOnDestroy() {
        this.resizeSubs?.unsubscribe();
    }
    resizeDimensions = signal(undefined, ...(ngDevMode ? [{ debugName: "resizeDimensions" }] : []));
    onSplitSizesChange(sizes) {
        this.listWidth.set(sizes[0]);
    }
    /** @internal */
    detailsBackClicked(options) {
        this.detailsActive.set(false);
        // Directly call the done callback if animations are disabled.
        if (this.animationsGloballyDisabled) {
            options?.animationDone?.();
        }
        else {
            // This callback is used to route after the animation is done.
            this.animationDone = options?.animationDone;
        }
    }
    detailsExpandedAnimationDone(event) {
        // Since the 'transitionend' event bubbles up from child elements,
        // ensure the event target is the container itself.
        if (this.animationDone && this.listDetailsContainer().nativeElement === event.target) {
            this.animationDone();
            this.animationDone = undefined;
        }
    }
    // Transfer focus onto child panes if they would be inaccesible.
    transferFocus() {
        // Check if dimensions have even been evaluated.
        const hasLargeSize = this.resizeDimensions() ? this.hasLargeSize() : undefined;
        const detailsActive = this.detailsActive();
        if (this.hadLargeSizePreviously !== undefined && this.detailsActivePreviously !== undefined) {
            if (detailsActive &&
                !hasLargeSize &&
                (!this.detailsActivePreviously || this.hadLargeSizePreviously)) {
                if (!this.hadLargeSizePreviously) {
                    this.previouslyFocusedElementInList = document?.activeElement;
                }
                this.transferFocusToDetails.next(true);
            }
            if (!detailsActive && this.detailsActivePreviously) {
                this.transferFocusToList.next(this.previouslyFocusedElementInList);
                this.previouslyFocusedElementInList = undefined;
            }
        }
        this.hadLargeSizePreviously = hasLargeSize;
        this.detailsActivePreviously = detailsActive;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiListDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiListDetailsComponent, isStandalone: true, selector: "si-list-details", inputs: { expandBreakpoint: { classPropertyName: "expandBreakpoint", publicName: "expandBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, detailsActive: { classPropertyName: "detailsActive", publicName: "detailsActive", isSignal: true, isRequired: false, transformFunction: null }, disableResizing: { classPropertyName: "disableResizing", publicName: "disableResizing", isSignal: true, isRequired: false, transformFunction: null }, listWidth: { classPropertyName: "listWidth", publicName: "listWidth", isSignal: true, isRequired: false, transformFunction: null }, minListSize: { classPropertyName: "minListSize", publicName: "minListSize", isSignal: true, isRequired: false, transformFunction: null }, minDetailsSize: { classPropertyName: "minDetailsSize", publicName: "minDetailsSize", isSignal: true, isRequired: false, transformFunction: null }, stateId: { classPropertyName: "stateId", publicName: "stateId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { detailsActive: "detailsActiveChange", listWidth: "listWidthChange" }, host: { properties: { "class.animations-disabled": "animationsGloballyDisabled", "class.expanded": "hasLargeSize()", "style.opacity": "opacity()" }, classAttribute: "si-layout-inner list-details-layout d-flex flex-column" }, viewQueries: [{ propertyName: "listDetailsContainer", first: true, predicate: ["listDetailsContainer"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@if (!disableResizing() && hasLargeSize()) {\n  <si-split\n    class=\"w-100 flex-grow-1\"\n    orientation=\"horizontal\"\n    [stateId]=\"stateId()\"\n    [sizes]=\"splitSizes()\"\n    (sizesChange)=\"onSplitSizesChange($event)\"\n  >\n    <si-split-part\n      scale=\"none\"\n      [showCollapseButton]=\"false\"\n      [showHeader]=\"false\"\n      [minSize]=\"minListSize()\"\n      [stateId]=\"listStateId()\"\n    >\n      <ng-container *ngTemplateOutlet=\"listTemplate\" />\n    </si-split-part>\n    <si-split-part\n      scale=\"auto\"\n      [showCollapseButton]=\"false\"\n      [showHeader]=\"false\"\n      [minSize]=\"minDetailsSize()\"\n      [stateId]=\"detailsStateId()\"\n    >\n      <ng-container *ngTemplateOutlet=\"detailsTemplate\" />\n    </si-split-part>\n  </si-split>\n} @else {\n  <div\n    #listDetailsContainer\n    [class]=\"`list-details d-flex flex-row ${detailsExpandedAnimation()}`\"\n    [class.gap-6]=\"hasLargeSize()\"\n    (transitionend)=\"detailsExpandedAnimationDone($event)\"\n  >\n    <ng-container *ngTemplateOutlet=\"listTemplate\" />\n    <ng-container *ngTemplateOutlet=\"detailsTemplate\" />\n  </div>\n}\n\n<ng-template #listTemplate>\n  <ng-content select=\"si-list-pane\" />\n</ng-template>\n\n<ng-template #detailsTemplate>\n  <ng-content select=\"si-details-pane\" />\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;gap:16px;contain:layout}:host ::ng-deep si-split{min-block-size:0}:host ::ng-deep si-list-pane-header~si-list-pane-header{padding-block-start:0}:host .list-details{flex:1 1 0;min-block-size:0;inline-size:100%;position:relative}:host:not(.expanded) .list-details{inline-size:200%;margin-inline-start:0;transform:translate(0);transition:transform .5s ease-in-out}:host:not(.expanded) .list-details.details-active{transform:translate(-50%)}:host-context([dir=rtl]) :host:not(.expanded) .list-details.details-active{transform:translate(50%)}:host.animations-disabled .list-details{transition:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiSplitComponent, selector: "si-split", inputs: ["gutterSize", "orientation", "sizes", "stateId"], outputs: ["sizesChange"] }, { kind: "component", type: SiSplitPartComponent, selector: "si-split-part", inputs: ["actions", "collapseDirection", "collapseIconClass", "collapseToMinSize", "headerTemplate", "heading", "minSize", "removeContentOnCollapse", "scale", "showCollapseButton", "showHeader", "collapseLabel", "stateId", "size", "collapseOthers", "expanded"], outputs: ["collapseChanged", "stateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiListDetailsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'si-list-details', imports: [NgTemplateOutlet, SiSplitComponent, SiSplitPartComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        class: 'si-layout-inner list-details-layout d-flex flex-column',
                        '[class.animations-disabled]': 'animationsGloballyDisabled',
                        '[class.expanded]': 'hasLargeSize()',
                        '[style.opacity]': 'opacity()'
                    }, template: "@if (!disableResizing() && hasLargeSize()) {\n  <si-split\n    class=\"w-100 flex-grow-1\"\n    orientation=\"horizontal\"\n    [stateId]=\"stateId()\"\n    [sizes]=\"splitSizes()\"\n    (sizesChange)=\"onSplitSizesChange($event)\"\n  >\n    <si-split-part\n      scale=\"none\"\n      [showCollapseButton]=\"false\"\n      [showHeader]=\"false\"\n      [minSize]=\"minListSize()\"\n      [stateId]=\"listStateId()\"\n    >\n      <ng-container *ngTemplateOutlet=\"listTemplate\" />\n    </si-split-part>\n    <si-split-part\n      scale=\"auto\"\n      [showCollapseButton]=\"false\"\n      [showHeader]=\"false\"\n      [minSize]=\"minDetailsSize()\"\n      [stateId]=\"detailsStateId()\"\n    >\n      <ng-container *ngTemplateOutlet=\"detailsTemplate\" />\n    </si-split-part>\n  </si-split>\n} @else {\n  <div\n    #listDetailsContainer\n    [class]=\"`list-details d-flex flex-row ${detailsExpandedAnimation()}`\"\n    [class.gap-6]=\"hasLargeSize()\"\n    (transitionend)=\"detailsExpandedAnimationDone($event)\"\n  >\n    <ng-container *ngTemplateOutlet=\"listTemplate\" />\n    <ng-container *ngTemplateOutlet=\"detailsTemplate\" />\n  </div>\n}\n\n<ng-template #listTemplate>\n  <ng-content select=\"si-list-pane\" />\n</ng-template>\n\n<ng-template #detailsTemplate>\n  <ng-content select=\"si-details-pane\" />\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;gap:16px;contain:layout}:host ::ng-deep si-split{min-block-size:0}:host ::ng-deep si-list-pane-header~si-list-pane-header{padding-block-start:0}:host .list-details{flex:1 1 0;min-block-size:0;inline-size:100%;position:relative}:host:not(.expanded) .list-details{inline-size:200%;margin-inline-start:0;transform:translate(0);transition:transform .5s ease-in-out}:host:not(.expanded) .list-details.details-active{transform:translate(-50%)}:host-context([dir=rtl]) :host:not(.expanded) .list-details.details-active{transform:translate(50%)}:host.animations-disabled .list-details{transition:none}\n"] }]
        }], propDecorators: { listDetailsContainer: [{ type: i0.ViewChild, args: ['listDetailsContainer', { isSignal: true }] }], expandBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandBreakpoint", required: false }] }], detailsActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailsActive", required: false }] }, { type: i0.Output, args: ["detailsActiveChange"] }], disableResizing: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableResizing", required: false }] }], listWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "listWidth", required: false }] }, { type: i0.Output, args: ["listWidthChange"] }], minListSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minListSize", required: false }] }], minDetailsSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDetailsSize", required: false }] }], stateId: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateId", required: false }] }] } });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
class SiListPaneComponent {
    parent = inject(SiListDetailsComponent);
    element = inject(ElementRef);
    constructor() {
        this.parent.transferFocusToList
            .pipe(takeUntilDestroyed())
            .subscribe(previouslyFocusedElement => {
            // Needed so it's no longer "inert".
            setTimeout(() => {
                const currentlyFocused = document?.activeElement;
                previouslyFocusedElement?.focus();
                // If there was no previously focused element or if it couldn't be focused anymore, fall back to the focusing the list.
                if (currentlyFocused === document?.activeElement) {
                    this.element?.nativeElement?.focus();
                }
            });
        });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiListPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SiListPaneComponent, isStandalone: true, selector: "si-list-pane", host: { properties: { "class.expanded": "parent.hasLargeSize()", "class.details-active": "parent.detailsActive() && !parent.hasLargeSize()", "attr.inert": "!parent.hasLargeSize() && parent.detailsActive() ? \"\" : null", "attr.tabindex": "-1", "style.flex-basis.%": "parent.hasLargeSize() && parent.disableResizing() ? parent.listWidth() : undefined" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{flex:1;display:flex;flex-direction:column;block-size:100%;max-inline-size:100%;opacity:1;transition:opacity calc(.5s * var(--element-animations-enabled, 1)) ease-in-out}:host:not(.expanded){inline-size:100%}:host.details-active{pointer-events:none;opacity:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiListPaneComponent, decorators: [{
            type: Component,
            args: [{ selector: 'si-list-pane', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        '[class.expanded]': 'parent.hasLargeSize()',
                        '[class.details-active]': 'parent.detailsActive() && !parent.hasLargeSize()',
                        '[attr.inert]': '!parent.hasLargeSize() && parent.detailsActive() ? "" : null',
                        '[attr.tabindex]': '-1',
                        '[style.flex-basis.%]': 'parent.hasLargeSize() && parent.disableResizing() ? parent.listWidth() : undefined'
                    }, template: "<ng-content />\n", styles: [":host{flex:1;display:flex;flex-direction:column;block-size:100%;max-inline-size:100%;opacity:1;transition:opacity calc(.5s * var(--element-animations-enabled, 1)) ease-in-out}:host:not(.expanded){inline-size:100%}:host.details-active{pointer-events:none;opacity:0}\n"] }]
        }], ctorParameters: () => [] });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
class SiListPaneHeaderComponent {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiListPaneHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SiListPaneHeaderComponent, isStandalone: true, selector: "si-list-pane-header", ngImport: i0, template: "<ng-content />\n", styles: [":host{display:flex;flex-direction:row;justify-content:space-between;inline-size:100%;flex:none;gap:6px;padding-block:12px;padding-inline:16px}:host ::ng-deep si-menu-bar si-menu-item{block-size:auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiListPaneHeaderComponent, decorators: [{
            type: Component,
            args: [{ selector: 'si-list-pane-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [":host{display:flex;flex-direction:row;justify-content:space-between;inline-size:100%;flex:none;gap:6px;padding-block:12px;padding-inline:16px}:host ::ng-deep si-menu-bar si-menu-item{block-size:auto}\n"] }]
        }] });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
class SiListPaneBodyComponent {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiListPaneBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SiListPaneBodyComponent, isStandalone: true, selector: "si-list-pane-body", ngImport: i0, template: "<ng-content />\n", styles: [":host{flex:1;display:flex;flex-direction:column;justify-content:space-between;max-inline-size:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiListPaneBodyComponent, decorators: [{
            type: Component,
            args: [{ selector: 'si-list-pane-body', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [":host{flex:1;display:flex;flex-direction:column;justify-content:space-between;max-inline-size:100%}\n"] }]
        }] });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
class SiDetailsPaneComponent {
    parent = inject(SiListDetailsComponent);
    routerOutlet = contentChild(RouterOutlet, ...(ngDevMode ? [{ debugName: "routerOutlet" }] : []));
    subscription;
    destroyer = inject(DestroyRef);
    /** @internal */
    isRouterBased = computed(() => !!this.routerOutlet(), ...(ngDevMode ? [{ debugName: "isRouterBased" }] : []));
    constructor() {
        effect(() => {
            const outlet = this.routerOutlet();
            if (outlet) {
                this.parent.detailsActive.set(!outlet.activatedRouteData.SI_EMPTY_DETAILS);
                this.subscription?.unsubscribe();
                this.subscription = outlet.activateEvents
                    .pipe(takeUntilDestroyed(this.destroyer))
                    .subscribe(() => this.parent.detailsActive.set(!outlet.activatedRouteData.SI_EMPTY_DETAILS));
            }
        });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDetailsPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: SiDetailsPaneComponent, isStandalone: true, selector: "si-details-pane", host: { properties: { "class.expanded": "parent.hasLargeSize()", "class.details-active": "parent.detailsActive() && !parent.hasLargeSize()", "attr.inert": "!parent.hasLargeSize() && !parent.detailsActive() ? \"\" : null", "style.flex-basis.%": "parent.hasLargeSize() && parent.disableResizing() ?  100 - parent.listWidth() : undefined" } }, queries: [{ propertyName: "routerOutlet", first: true, predicate: RouterOutlet, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content />\n", styles: [":host{flex:1;display:flex;flex-direction:column;block-size:100%;max-inline-size:100%;pointer-events:none;opacity:0;transition:opacity calc(.5s * var(--element-animations-enabled, 1)) ease-in-out}:host:not(.expanded){inline-size:100%}:host.details-active,:host.expanded{pointer-events:auto;opacity:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDetailsPaneComponent, decorators: [{
            type: Component,
            args: [{ selector: 'si-details-pane', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        '[class.expanded]': 'parent.hasLargeSize()',
                        '[class.details-active]': 'parent.detailsActive() && !parent.hasLargeSize()',
                        '[attr.inert]': '!parent.hasLargeSize() && !parent.detailsActive() ? "" : null',
                        '[style.flex-basis.%]': 'parent.hasLargeSize() && parent.disableResizing() ?  100 - parent.listWidth() : undefined'
                    }, template: "<ng-content />\n", styles: [":host{flex:1;display:flex;flex-direction:column;block-size:100%;max-inline-size:100%;pointer-events:none;opacity:0;transition:opacity calc(.5s * var(--element-animations-enabled, 1)) ease-in-out}:host:not(.expanded){inline-size:100%}:host.details-active,:host.expanded{pointer-events:auto;opacity:1}\n"] }]
        }], ctorParameters: () => [], propDecorators: { routerOutlet: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RouterOutlet), { isSignal: true }] }] } });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
class SiDetailsPaneHeaderComponent {
    icons = addIcons({ elementBack });
    parent = inject(SiListDetailsComponent);
    /**
     * Optional title to be displayed.
     */
    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
    /**
     * You can hide the back button in the mobile view by setting true. Required
     * in add, edit workflows on mobile sizes. During add or edit, the back button
     * should be hidden. Default value is `false`.
     *
     * @defaultValue false
     */
    hideBackButton = input(false, { ...(ngDevMode ? { debugName: "hideBackButton" } : {}), transform: booleanAttribute });
    /**
     * Details back button text. Required for a11y.
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_LIST_DETAILS.BACK:Back`)
     * ```
     */
    backButtonText = input(t(() => $localize `:@@SI_LIST_DETAILS.BACK:Back`), ...(ngDevMode ? [{ debugName: "backButtonText" }] : []));
    /**
     * The URL to navigate to when the back buttons is clicked.
     * This is only used when the `si-details-pane` is used with a router-outlet.
     *
     * @defaultValue '../'
     */
    backButtonUrl = input('../', ...(ngDevMode ? [{ debugName: "backButtonUrl" }] : []));
    isRouterBased = inject(SiDetailsPaneComponent).isRouterBased;
    router = inject(Router, { optional: true });
    activatedRoute = inject(ActivatedRoute, { optional: true });
    backButton = viewChild('backButton', ...(ngDevMode ? [{ debugName: "backButton" }] : []));
    constructor() {
        this.parent.transferFocusToDetails.pipe(takeUntilDestroyed()).subscribe(shouldFocus => {
            if (shouldFocus) {
                const backButton = this.backButton();
                if (backButton) {
                    // Needed so it's no longer "inert" and loaded.
                    setTimeout(() => backButton?.nativeElement?.focus());
                }
            }
        });
    }
    get hasLargeSize() {
        return this.parent.hasLargeSize;
    }
    backClicked() {
        this.parent.detailsBackClicked({
            animationDone: this.isRouterBased()
                ? // We navigate back after the animation is done.
                    // This ensures, that the details pane visible while animating.
                    () => this.router.navigate([this.backButtonUrl()], { relativeTo: this.activatedRoute })
                : undefined
        });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDetailsPaneHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiDetailsPaneHeaderComponent, isStandalone: true, selector: "si-details-pane-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, hideBackButton: { classPropertyName: "hideBackButton", publicName: "hideBackButton", isSignal: true, isRequired: false, transformFunction: null }, backButtonText: { classPropertyName: "backButtonText", publicName: "backButtonText", isSignal: true, isRequired: false, transformFunction: null }, backButtonUrl: { classPropertyName: "backButtonUrl", publicName: "backButtonUrl", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "nav nav-tabs" }, viewQueries: [{ propertyName: "backButton", first: true, predicate: ["backButton"], descendants: true, isSignal: true }], ngImport: i0, template: "@if ((!hasLargeSize() && !hideBackButton()) || title()) {\n  <div class=\"title-subgroup\">\n    @if (!hasLargeSize() && !hideBackButton()) {\n      <button\n        #backButton\n        type=\"button\"\n        class=\"si-details-header-back nav-link focus-inside px-6\"\n        (click)=\"backClicked()\"\n      >\n        <si-icon class=\"pe-2 d-inline-block position-relative icon\" [icon]=\"icons.elementBack\" />\n        {{ backButtonText() | translate }}\n      </button>\n    }\n    @if (title()) {\n      <span class=\"si-details-header-title si-body px-6\">{{ title() | translate }}</span>\n    }\n  </div>\n}\n<ng-content />\n", styles: [":host{flex:none;inline-size:100%;overflow:hidden}:host:empty{display:none}:host,:host .title-subgroup{display:flex;flex-direction:row;justify-content:space-between}:host>.nav-link,:host .title-subgroup>.nav-link{min-inline-size:auto}:host .si-details-header-title{display:flex;align-items:center;padding-block:10px}:host .si-details-header-back{isolation:isolate}:host ::ng-deep si-menu-bar si-menu-item{block-size:auto;margin-block-end:2px}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDetailsPaneHeaderComponent, decorators: [{
            type: Component,
            args: [{ selector: 'si-details-pane-header', imports: [SiTranslatePipe, SiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        class: 'nav nav-tabs' // To allow nav-link styling.
                    }, template: "@if ((!hasLargeSize() && !hideBackButton()) || title()) {\n  <div class=\"title-subgroup\">\n    @if (!hasLargeSize() && !hideBackButton()) {\n      <button\n        #backButton\n        type=\"button\"\n        class=\"si-details-header-back nav-link focus-inside px-6\"\n        (click)=\"backClicked()\"\n      >\n        <si-icon class=\"pe-2 d-inline-block position-relative icon\" [icon]=\"icons.elementBack\" />\n        {{ backButtonText() | translate }}\n      </button>\n    }\n    @if (title()) {\n      <span class=\"si-details-header-title si-body px-6\">{{ title() | translate }}</span>\n    }\n  </div>\n}\n<ng-content />\n", styles: [":host{flex:none;inline-size:100%;overflow:hidden}:host:empty{display:none}:host,:host .title-subgroup{display:flex;flex-direction:row;justify-content:space-between}:host>.nav-link,:host .title-subgroup>.nav-link{min-inline-size:auto}:host .si-details-header-title{display:flex;align-items:center;padding-block:10px}:host .si-details-header-back{isolation:isolate}:host ::ng-deep si-menu-bar si-menu-item{block-size:auto;margin-block-end:2px}\n"] }]
        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], hideBackButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideBackButton", required: false }] }], backButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "backButtonText", required: false }] }], backButtonUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "backButtonUrl", required: false }] }], backButton: [{ type: i0.ViewChild, args: ['backButton', { isSignal: true }] }] } });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
class SiDetailsPaneBodyComponent {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDetailsPaneBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SiDetailsPaneBodyComponent, isStandalone: true, selector: "si-details-pane-body", ngImport: i0, template: "<ng-content />\n", styles: [":host{flex:1;display:flex;flex-direction:column;justify-content:space-between;max-inline-size:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDetailsPaneBodyComponent, decorators: [{
            type: Component,
            args: [{ selector: 'si-details-pane-body', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [":host{flex:1;display:flex;flex-direction:column;justify-content:space-between;max-inline-size:100%}\n"] }]
        }] });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
class SiDetailsPaneFooterComponent {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDetailsPaneFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SiDetailsPaneFooterComponent, isStandalone: true, selector: "si-details-pane-footer", ngImport: i0, template: "<ng-content />\n", styles: [":host{display:flex;flex-direction:row;flex:none;border-block-start:1px solid var(--element-ui-4);gap:16px;padding:16px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDetailsPaneFooterComponent, decorators: [{
            type: Component,
            args: [{ selector: 'si-details-pane-footer', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [":host{display:flex;flex-direction:row;flex:none;border-block-start:1px solid var(--element-ui-4);gap:16px;padding:16px}\n"] }]
        }] });

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

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

export { SiDetailsPaneBodyComponent, SiDetailsPaneComponent, SiDetailsPaneFooterComponent, SiDetailsPaneHeaderComponent, SiListDetailsComponent, SiListPaneBodyComponent, SiListPaneComponent, SiListPaneHeaderComponent };
//# sourceMappingURL=siemens-element-ng-list-details.mjs.map
