import { NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, ElementRef, ChangeDetectorRef, DestroyRef, input, output, model, booleanAttribute, computed, signal, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { elementBack } from '@siemens/element-icons';
import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
import { ResizeObserverService, BOOTSTRAP_BREAKPOINTS } from '@siemens/element-ng/resize-observer';
import { SiSplitComponent, SiSplitPartComponent } from '@siemens/element-ng/split';
import { t, SiTranslatePipe } from '@siemens/element-translate-ng/translate';
import { timer } from 'rxjs';

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
class SiMainDetailContainerComponent {
    icons = addIcons({ elementBack });
    animationDuration = 500;
    elementRef = inject(ElementRef);
    resizeObserver = inject(ResizeObserverService);
    changeDetectorRef = inject(ChangeDetectorRef);
    destroyRef = inject(DestroyRef);
    /**
     * A numeric value defining the minimum width in px, which the container 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
     */
    largeLayoutBreakpoint = input(BOOTSTRAP_BREAKPOINTS.mdMinimum, ...(ngDevMode ? [{ debugName: "largeLayoutBreakpoint" }] : []));
    /**
     * Whether the main-detail layout component has a large size or not,
     * `true` if the container´s width matches or exceeds the `largeLayoutBreakpoint`.
     */
    hasLargeSize;
    /**
     * Emits whether the components size is large enough to display
     * main and details views next to each other or not.
     */
    hasLargeSizeChange = output();
    /**
     * Whether the details are currently active or not, mostly relevant in the
     * responsive scenario when the viewport only shows either the main or the detail.
     *
     * @defaultValue false
     */
    detailsActive = model(false, ...(ngDevMode ? [{ debugName: "detailsActive" }] : []));
    /**
     * The heading of the main-detail layout component, usually a page heading.
     *
     * @defaultValue ''
     */
    heading = input('', ...(ngDevMode ? [{ debugName: "heading" }] : []));
    /**
     * Whether the heading should be truncated (single line) or not.
     * Default value is `false`.
     *
     * @defaultValue false
     */
    truncateHeading = input(false, { ...(ngDevMode ? { debugName: "truncateHeading" } : {}), transform: booleanAttribute });
    /**
     * The heading of the detail area.
     *
     * @defaultValue ''
     */
    detailsHeading = input('', ...(ngDevMode ? [{ debugName: "detailsHeading" }] : []));
    /**
     * Whether the main 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
     */
    resizableParts = input(false, { ...(ngDevMode ? { debugName: "resizableParts" } : {}), transform: booleanAttribute });
    /**
     * 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_MAIN_DETAIL_CONTAINER.BACK:Back`)
     * ```
     */
    detailsBackButtonText = input(t(() => $localize `:@@SI_MAIN_DETAIL_CONTAINER.BACK:Back`), ...(ngDevMode ? [{ debugName: "detailsBackButtonText" }] : []));
    /**
     * CSS class(es) applied to the outermost container. Per default, Bootstrap classes
     * to handle responsive paddings are applied: `px-6 pt-6 px-md-9`.
     *
     * @defaultValue 'px-6 pt-6 px-md-9'
     */
    containerClass = input('px-6 pt-6 px-md-9', ...(ngDevMode ? [{ debugName: "containerClass" }] : []));
    /**
     * CSS class(es) applied to the main container. In combination with `containerClass`,
     * this allows for settings individual padding and margin values on the individual containers.
     *
     * @defaultValue 'pb-6'
     */
    mainContainerClass = input('pb-6', ...(ngDevMode ? [{ debugName: "mainContainerClass" }] : []));
    /**
     * CSS class(es) applied to the detail container. In combination with `containerClass`,
     * this allows for settings individual padding and margin values on the individual containers.
     *
     * @defaultValue 'pb-6'
     */
    detailContainerClass = input('pb-6', ...(ngDevMode ? [{ debugName: "detailContainerClass" }] : []));
    /**
     * The percentage width of the main container from the overall component width.
     * Can be a number or `'default'`, which is 32% when {@link resizableParts} is active, otherwise 50%.
     *
     * @defaultValue 'default'
     */
    mainContainerWidth = model('default', ...(ngDevMode ? [{ debugName: "mainContainerWidth" }] : []));
    /**
     * Sets the minimal width of the main container in pixel.
     *
     * @defaultValue 300
     */
    minMainSize = input(300, ...(ngDevMode ? [{ debugName: "minMainSize" }] : []));
    /**
     * Sets the minimal width of the detail container in pixel.
     *
     * @defaultValue 300
     */
    minDetailSize = input(300, ...(ngDevMode ? [{ debugName: "minDetailSize" }] : []));
    /**
     * An optional stateId to uniquely identify a component instance.
     * Required for persistence of ui state.
     */
    stateId = input(...(ngDevMode ? [undefined, { debugName: "stateId" }] : []));
    /**
     * The attribute is set to true when the detail area is not visible to ensure that the user
     * can't tab to details area when it is hidden.
     */
    preventFocusDetails = false;
    actualMainContainerWidth = computed(() => {
        const mainContainerWidth = this.mainContainerWidth();
        return mainContainerWidth === 'default'
            ? this.resizableParts()
                ? 32
                : 50
            : mainContainerWidth;
    }, ...(ngDevMode ? [{ debugName: "actualMainContainerWidth" }] : []));
    splitSizes = [
        this.actualMainContainerWidth(),
        100 - this.actualMainContainerWidth()
    ];
    // The max size to limit the main container in the static flex layout (if less than 50%), otherwise not set.
    maxMainSize = this.getMaxSize(0);
    // The max size to limit the detail container in the static flex layout (if less than 50%), otherwise not set.
    maxDetailSize = this.getMaxSize(1);
    mainStateId = computed(() => {
        const stateId = this.stateId();
        return stateId ? `${stateId}-main` : undefined;
    }, ...(ngDevMode ? [{ debugName: "mainStateId" }] : []));
    detailStateId = computed(() => {
        const stateId = this.stateId();
        return stateId ? `${stateId}-detail` : undefined;
    }, ...(ngDevMode ? [{ debugName: "detailStateId" }] : []));
    animate = signal(false, ...(ngDevMode ? [{ debugName: "animate" }] : []));
    opacity = signal('0', ...(ngDevMode ? [{ debugName: "opacity" }] : []));
    ngOnChanges(changes) {
        if (changes.detailsActive) {
            this.updateDetailsFocusable();
            this.doAnimation(changes.detailsActive.currentValue);
        }
        if (changes.mainContainerWidth || changes.resizableParts) {
            this.splitSizes = [this.actualMainContainerWidth(), 100 - this.actualMainContainerWidth()];
            this.maxMainSize = this.getMaxSize(0);
            this.maxDetailSize = this.getMaxSize(1);
        }
    }
    ngOnInit() {
        this.resizeObserver
            .observe(this.elementRef.nativeElement, 100, true)
            .pipe(takeUntilDestroyed(this.destroyRef))
            .subscribe(dimensions => this.determineLayout(dimensions));
    }
    onSplitSizesChange(sizes) {
        this.mainContainerWidth.set(sizes[0]);
    }
    detailsBackClicked() {
        this.detailsActive.set(false);
        this.doAnimation(false);
    }
    /**
     * Get the max size to limit in the static flex layout (if less than 50%), otherwise not set
     */
    getMaxSize(part) {
        return this.resizableParts() ||
            this.mainContainerWidth() === 'default' ||
            !this.hasLargeSize ||
            this.splitSizes[part] > 50
            ? ''
            : this.splitSizes[part] + '%';
    }
    determineLayout(dimensions) {
        const newHasLargeSize = dimensions.width >= this.largeLayoutBreakpoint();
        if (this.hasLargeSize !== newHasLargeSize) {
            this.hasLargeSize = newHasLargeSize;
            this.maxMainSize = this.getMaxSize(0);
            this.maxDetailSize = this.getMaxSize(1);
            this.updateDetailsFocusable();
            this.hasLargeSizeChange.emit(this.hasLargeSize);
            this.changeDetectorRef.markForCheck();
        }
        if (this.opacity() === '0') {
            this.opacity.set('');
        }
    }
    doAnimation(detailsActive) {
        this.animate.set(true);
        timer(this.animationDuration)
            .pipe(takeUntilDestroyed(this.destroyRef))
            .subscribe(() => this.animate.set(false));
        this.detailsActive.set(detailsActive);
    }
    updateDetailsFocusable() {
        this.preventFocusDetails = !this.hasLargeSize && !this.detailsActive();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMainDetailContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiMainDetailContainerComponent, isStandalone: true, selector: "si-main-detail-container", inputs: { largeLayoutBreakpoint: { classPropertyName: "largeLayoutBreakpoint", publicName: "largeLayoutBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, detailsActive: { classPropertyName: "detailsActive", publicName: "detailsActive", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, truncateHeading: { classPropertyName: "truncateHeading", publicName: "truncateHeading", isSignal: true, isRequired: false, transformFunction: null }, detailsHeading: { classPropertyName: "detailsHeading", publicName: "detailsHeading", isSignal: true, isRequired: false, transformFunction: null }, resizableParts: { classPropertyName: "resizableParts", publicName: "resizableParts", isSignal: true, isRequired: false, transformFunction: null }, hideBackButton: { classPropertyName: "hideBackButton", publicName: "hideBackButton", isSignal: true, isRequired: false, transformFunction: null }, detailsBackButtonText: { classPropertyName: "detailsBackButtonText", publicName: "detailsBackButtonText", isSignal: true, isRequired: false, transformFunction: null }, containerClass: { classPropertyName: "containerClass", publicName: "containerClass", isSignal: true, isRequired: false, transformFunction: null }, mainContainerClass: { classPropertyName: "mainContainerClass", publicName: "mainContainerClass", isSignal: true, isRequired: false, transformFunction: null }, detailContainerClass: { classPropertyName: "detailContainerClass", publicName: "detailContainerClass", isSignal: true, isRequired: false, transformFunction: null }, mainContainerWidth: { classPropertyName: "mainContainerWidth", publicName: "mainContainerWidth", isSignal: true, isRequired: false, transformFunction: null }, minMainSize: { classPropertyName: "minMainSize", publicName: "minMainSize", isSignal: true, isRequired: false, transformFunction: null }, minDetailSize: { classPropertyName: "minDetailSize", publicName: "minDetailSize", isSignal: true, isRequired: false, transformFunction: null }, stateId: { classPropertyName: "stateId", publicName: "stateId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hasLargeSizeChange: "hasLargeSizeChange", detailsActive: "detailsActiveChange", mainContainerWidth: "mainContainerWidthChange" }, host: { properties: { "class.animate": "animate()", "style.opacity": "opacity()" }, classAttribute: "si-layout-inner" }, usesOnChanges: true, ngImport: i0, template: "@if (resizableParts() && hasLargeSize) {\n  <div class=\"main-detail-layout d-flex flex-column\" [class]=\"containerClass()\">\n    <ng-container *ngTemplateOutlet=\"headingTemplate\" />\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]=\"minMainSize()\"\n        [stateId]=\"mainStateId()\"\n      >\n        <ng-container *ngTemplateOutlet=\"mainTemplate\" />\n      </si-split-part>\n      <si-split-part\n        scale=\"auto\"\n        [showCollapseButton]=\"false\"\n        [showHeader]=\"false\"\n        [minSize]=\"minDetailSize()\"\n        [stateId]=\"detailStateId()\"\n      >\n        <ng-container *ngTemplateOutlet=\"detailTemplate\" />\n      </si-split-part>\n    </si-split>\n  </div>\n} @else {\n  <div\n    class=\"main-detail-layout d-flex flex-column\"\n    [class]=\"containerClass()\"\n    [class.large-size]=\"hasLargeSize\"\n  >\n    <ng-container *ngTemplateOutlet=\"headingTemplate\" />\n    <div\n      class=\"main-detail-container d-flex flex-grow-1\"\n      [class.details-active]=\"detailsActive() && !hasLargeSize\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          mainTemplate;\n          context: { customClass: hasLargeSize ? 'col-3 ps-0 pe-4' : 'col-6 px-0' }\n        \"\n      />\n      <ng-container\n        *ngTemplateOutlet=\"\n          detailTemplate;\n          context: { customClass: hasLargeSize ? 'col-9 ps-4 pe-0' : 'col-6 px-0' }\n        \"\n      />\n    </div>\n  </div>\n}\n\n<!-- Templates -->\n<ng-template #headingTemplate>\n  @if (heading()) {\n    <div class=\"si-layout-header\">\n      <h2 class=\"si-layout-title si-layout-top-element\" [class.text-truncate]=\"truncateHeading()\">{{\n        heading() | translate\n      }}</h2>\n    </div>\n  }\n</ng-template>\n\n<ng-template #mainTemplate let-customClass=\"customClass\">\n  <div\n    class=\"main-container d-flex flex-column\"\n    [class]=\"[mainContainerClass(), customClass ? customClass : '']\"\n    [style.max-inline-size]=\"maxMainSize\"\n  >\n    <div class=\"main-search-actions d-flex align-items-center\">\n      <ng-content select=\"[slot=mainSearch]\" />\n      <ng-content select=\"[slot=mainActions]\" />\n    </div>\n    <div class=\"main-data-container d-flex\">\n      <ng-content select=\"[slot=mainData]\" />\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #detailTemplate let-customClass=\"customClass\">\n  <div\n    class=\"detail-container d-flex flex-column\"\n    [class]=\"[detailContainerClass(), customClass ? customClass : '']\"\n    [style.max-inline-size]=\"maxDetailSize\"\n    [attr.inert]=\"preventFocusDetails ? '' : null\"\n  >\n    <div class=\"detail-heading-actions d-flex align-items-center\">\n      @if (!this.hasLargeSize && !this.hideBackButton()) {\n        <button type=\"button\" class=\"btn btn-circle btn-secondary\" (click)=\"detailsBackClicked()\">\n          <si-icon [icon]=\"icons.elementBack\" />\n          <span class=\"visually-hidden\">{{ detailsBackButtonText() | translate }}</span>\n        </button>\n      }\n      @if (detailsHeading()) {\n        <span class=\"detail-heading si-h4 me-auto ms-6 my-auto text-truncate\">{{\n          detailsHeading() | translate\n        }}</span>\n      }\n      <ng-content select=\"[slot=detailActions]\" />\n    </div>\n    <ng-content select=\"[slot=details]\" />\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto}:host ::ng-deep [slot=mainSearch]{flex:1 1 0}:host ::ng-deep [slot=mainSearch]+[slot=mainActions]{margin-inline-start:12px}:host ::ng-deep [slot=mainActions]{margin-inline-start:auto}:host ::ng-deep [slot=mainData],:host ::ng-deep [slot=details]{flex:1 1 0;min-block-size:0}:host ::ng-deep [slot=detailActions]{margin-inline-start:auto}:host ::ng-deep .detail-heading+[slot=detailActions]{margin-inline-start:12px}:host ::ng-deep si-split{--si-split-gutter-background: transparent;min-block-size:0}:host ::ng-deep si-split si-split-part,:host ::ng-deep si-split .si-split-container,:host ::ng-deep si-split .si-split-part-content{overflow:visible}:host.animate{--si-main-detail-animation-duration: calc(.5s * var(--element-animations-enabled, 1))}.main-detail-layout{overflow-x:hidden;position:relative}.main-detail-layout.large-size{--si-main-detail-container-width: 100%;--si-main-detail-container-transition: none;--si-main-detail-container-transform: none;--si-main-detail-transition: none;--si-main-detail-opacity: 1;--si-main-detail-pointer-events: auto}.main-detail-container{--si-main-detail-transition: opacity var(--si-main-detail-animation-duration, 0) ease-in-out;--si-main-detail-detail-opacity: 0;--si-main-detail-detail-pointer-events: none;inline-size:var(--si-main-detail-container-width, 200%);transform:var(--si-main-detail-container-transform, none);transform-origin:top left;transition:var(--si-main-detail-container-transition, transform var(--si-main-detail-animation-duration, 0) ease-in-out)}.main-detail-container.details-active{--si-main-detail-container-transform: translateX(-50%);--si-main-detail-main-opacity: 0;--si-main-detail-detail-opacity: 1;--si-main-detail-main-pointer-events: none;--si-main-detail-detail-pointer-events: auto}.main-detail-layout,.main-detail-container,.main-container,.detail-container,.main-data-container{flex:1 1 0;min-block-size:0}.main-container,.detail-container{transition:var(--si-main-detail-transition, none)}.main-container{opacity:var(--si-main-detail-opacity, var(--si-main-detail-main-opacity, 1));pointer-events:var(--si-main-detail-pointer-events, var(--si-main-detail-main-pointer-events, auto))}.detail-container{opacity:var(--si-main-detail-opacity, var(--si-main-detail-detail-opacity, 1));pointer-events:var(--si-main-detail-pointer-events, var(--si-main-detail-detail-pointer-events, auto))}.main-search-actions:not(:empty){min-block-size:32px;margin-block-end:16px}.detail-heading-actions:not(:empty){min-block-size:32px;margin-block-end:16px}\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"] }, { 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: SiMainDetailContainerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'si-main-detail-container', imports: [
                        NgTemplateOutlet,
                        SiSplitComponent,
                        SiSplitPartComponent,
                        SiTranslatePipe,
                        SiIconComponent
                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        class: 'si-layout-inner',
                        '[class.animate]': 'animate()',
                        '[style.opacity]': 'opacity()'
                    }, template: "@if (resizableParts() && hasLargeSize) {\n  <div class=\"main-detail-layout d-flex flex-column\" [class]=\"containerClass()\">\n    <ng-container *ngTemplateOutlet=\"headingTemplate\" />\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]=\"minMainSize()\"\n        [stateId]=\"mainStateId()\"\n      >\n        <ng-container *ngTemplateOutlet=\"mainTemplate\" />\n      </si-split-part>\n      <si-split-part\n        scale=\"auto\"\n        [showCollapseButton]=\"false\"\n        [showHeader]=\"false\"\n        [minSize]=\"minDetailSize()\"\n        [stateId]=\"detailStateId()\"\n      >\n        <ng-container *ngTemplateOutlet=\"detailTemplate\" />\n      </si-split-part>\n    </si-split>\n  </div>\n} @else {\n  <div\n    class=\"main-detail-layout d-flex flex-column\"\n    [class]=\"containerClass()\"\n    [class.large-size]=\"hasLargeSize\"\n  >\n    <ng-container *ngTemplateOutlet=\"headingTemplate\" />\n    <div\n      class=\"main-detail-container d-flex flex-grow-1\"\n      [class.details-active]=\"detailsActive() && !hasLargeSize\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          mainTemplate;\n          context: { customClass: hasLargeSize ? 'col-3 ps-0 pe-4' : 'col-6 px-0' }\n        \"\n      />\n      <ng-container\n        *ngTemplateOutlet=\"\n          detailTemplate;\n          context: { customClass: hasLargeSize ? 'col-9 ps-4 pe-0' : 'col-6 px-0' }\n        \"\n      />\n    </div>\n  </div>\n}\n\n<!-- Templates -->\n<ng-template #headingTemplate>\n  @if (heading()) {\n    <div class=\"si-layout-header\">\n      <h2 class=\"si-layout-title si-layout-top-element\" [class.text-truncate]=\"truncateHeading()\">{{\n        heading() | translate\n      }}</h2>\n    </div>\n  }\n</ng-template>\n\n<ng-template #mainTemplate let-customClass=\"customClass\">\n  <div\n    class=\"main-container d-flex flex-column\"\n    [class]=\"[mainContainerClass(), customClass ? customClass : '']\"\n    [style.max-inline-size]=\"maxMainSize\"\n  >\n    <div class=\"main-search-actions d-flex align-items-center\">\n      <ng-content select=\"[slot=mainSearch]\" />\n      <ng-content select=\"[slot=mainActions]\" />\n    </div>\n    <div class=\"main-data-container d-flex\">\n      <ng-content select=\"[slot=mainData]\" />\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #detailTemplate let-customClass=\"customClass\">\n  <div\n    class=\"detail-container d-flex flex-column\"\n    [class]=\"[detailContainerClass(), customClass ? customClass : '']\"\n    [style.max-inline-size]=\"maxDetailSize\"\n    [attr.inert]=\"preventFocusDetails ? '' : null\"\n  >\n    <div class=\"detail-heading-actions d-flex align-items-center\">\n      @if (!this.hasLargeSize && !this.hideBackButton()) {\n        <button type=\"button\" class=\"btn btn-circle btn-secondary\" (click)=\"detailsBackClicked()\">\n          <si-icon [icon]=\"icons.elementBack\" />\n          <span class=\"visually-hidden\">{{ detailsBackButtonText() | translate }}</span>\n        </button>\n      }\n      @if (detailsHeading()) {\n        <span class=\"detail-heading si-h4 me-auto ms-6 my-auto text-truncate\">{{\n          detailsHeading() | translate\n        }}</span>\n      }\n      <ng-content select=\"[slot=detailActions]\" />\n    </div>\n    <ng-content select=\"[slot=details]\" />\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto}:host ::ng-deep [slot=mainSearch]{flex:1 1 0}:host ::ng-deep [slot=mainSearch]+[slot=mainActions]{margin-inline-start:12px}:host ::ng-deep [slot=mainActions]{margin-inline-start:auto}:host ::ng-deep [slot=mainData],:host ::ng-deep [slot=details]{flex:1 1 0;min-block-size:0}:host ::ng-deep [slot=detailActions]{margin-inline-start:auto}:host ::ng-deep .detail-heading+[slot=detailActions]{margin-inline-start:12px}:host ::ng-deep si-split{--si-split-gutter-background: transparent;min-block-size:0}:host ::ng-deep si-split si-split-part,:host ::ng-deep si-split .si-split-container,:host ::ng-deep si-split .si-split-part-content{overflow:visible}:host.animate{--si-main-detail-animation-duration: calc(.5s * var(--element-animations-enabled, 1))}.main-detail-layout{overflow-x:hidden;position:relative}.main-detail-layout.large-size{--si-main-detail-container-width: 100%;--si-main-detail-container-transition: none;--si-main-detail-container-transform: none;--si-main-detail-transition: none;--si-main-detail-opacity: 1;--si-main-detail-pointer-events: auto}.main-detail-container{--si-main-detail-transition: opacity var(--si-main-detail-animation-duration, 0) ease-in-out;--si-main-detail-detail-opacity: 0;--si-main-detail-detail-pointer-events: none;inline-size:var(--si-main-detail-container-width, 200%);transform:var(--si-main-detail-container-transform, none);transform-origin:top left;transition:var(--si-main-detail-container-transition, transform var(--si-main-detail-animation-duration, 0) ease-in-out)}.main-detail-container.details-active{--si-main-detail-container-transform: translateX(-50%);--si-main-detail-main-opacity: 0;--si-main-detail-detail-opacity: 1;--si-main-detail-main-pointer-events: none;--si-main-detail-detail-pointer-events: auto}.main-detail-layout,.main-detail-container,.main-container,.detail-container,.main-data-container{flex:1 1 0;min-block-size:0}.main-container,.detail-container{transition:var(--si-main-detail-transition, none)}.main-container{opacity:var(--si-main-detail-opacity, var(--si-main-detail-main-opacity, 1));pointer-events:var(--si-main-detail-pointer-events, var(--si-main-detail-main-pointer-events, auto))}.detail-container{opacity:var(--si-main-detail-opacity, var(--si-main-detail-detail-opacity, 1));pointer-events:var(--si-main-detail-pointer-events, var(--si-main-detail-detail-pointer-events, auto))}.main-search-actions:not(:empty){min-block-size:32px;margin-block-end:16px}.detail-heading-actions:not(:empty){min-block-size:32px;margin-block-end:16px}\n"] }]
        }], propDecorators: { largeLayoutBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "largeLayoutBreakpoint", required: false }] }], hasLargeSizeChange: [{ type: i0.Output, args: ["hasLargeSizeChange"] }], detailsActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailsActive", required: false }] }, { type: i0.Output, args: ["detailsActiveChange"] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], truncateHeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncateHeading", required: false }] }], detailsHeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailsHeading", required: false }] }], resizableParts: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizableParts", required: false }] }], hideBackButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideBackButton", required: false }] }], detailsBackButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailsBackButtonText", required: false }] }], containerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerClass", required: false }] }], mainContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainContainerClass", required: false }] }], detailContainerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailContainerClass", required: false }] }], mainContainerWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainContainerWidth", required: false }] }, { type: i0.Output, args: ["mainContainerWidthChange"] }], minMainSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minMainSize", required: false }] }], minDetailSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDetailSize", required: false }] }], stateId: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateId", required: false }] }] } });

/**
 * Copyright (c) Siemens 2016 - 2026
 * SPDX-License-Identifier: MIT
 */
class SiMainDetailContainerModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMainDetailContainerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: SiMainDetailContainerModule, imports: [SiMainDetailContainerComponent], exports: [SiMainDetailContainerComponent] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMainDetailContainerModule, imports: [SiMainDetailContainerComponent] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMainDetailContainerModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [SiMainDetailContainerComponent],
                    exports: [SiMainDetailContainerComponent]
                }]
        }] });

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

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

export { SiMainDetailContainerComponent, SiMainDetailContainerModule };
//# sourceMappingURL=siemens-element-ng-main-detail-container.mjs.map
