import * as _angular_core from '@angular/core';
import { OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { TranslatableString } from '@siemens/element-translate-ng/translate';

declare class SiMainDetailContainerComponent implements OnInit, OnChanges {
    protected readonly icons: Record<"elementBack", string>;
    private readonly animationDuration;
    private readonly elementRef;
    private readonly resizeObserver;
    private readonly changeDetectorRef;
    private readonly 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
     */
    readonly largeLayoutBreakpoint: _angular_core.InputSignal<number>;
    /**
     * Whether the main-detail layout component has a large size or not,
     * `true` if the container´s width matches or exceeds the `largeLayoutBreakpoint`.
     */
    hasLargeSize: boolean;
    /**
     * Emits whether the components size is large enough to display
     * main and details views next to each other or not.
     */
    readonly hasLargeSizeChange: _angular_core.OutputEmitterRef<boolean>;
    /**
     * 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
     */
    readonly detailsActive: _angular_core.ModelSignal<boolean>;
    /**
     * The heading of the main-detail layout component, usually a page heading.
     *
     * @defaultValue ''
     */
    readonly heading: _angular_core.InputSignal<TranslatableString>;
    /**
     * Whether the heading should be truncated (single line) or not.
     * Default value is `false`.
     *
     * @defaultValue false
     */
    readonly truncateHeading: _angular_core.InputSignalWithTransform<boolean, unknown>;
    /**
     * The heading of the detail area.
     *
     * @defaultValue ''
     */
    readonly detailsHeading: _angular_core.InputSignal<TranslatableString>;
    /**
     * 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
     */
    readonly resizableParts: _angular_core.InputSignalWithTransform<boolean, unknown>;
    /**
     * 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
     */
    readonly hideBackButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
    /**
     * Details back button text. Required for a11y.
     *
     * @defaultValue
     * ```
     * t(() => $localize`:@@SI_MAIN_DETAIL_CONTAINER.BACK:Back`)
     * ```
     */
    readonly detailsBackButtonText: _angular_core.InputSignal<TranslatableString>;
    /**
     * 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'
     */
    readonly containerClass: _angular_core.InputSignal<string>;
    /**
     * 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'
     */
    readonly mainContainerClass: _angular_core.InputSignal<string>;
    /**
     * 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'
     */
    readonly detailContainerClass: _angular_core.InputSignal<string>;
    /**
     * 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'
     */
    readonly mainContainerWidth: _angular_core.ModelSignal<number | "default">;
    /**
     * Sets the minimal width of the main container in pixel.
     *
     * @defaultValue 300
     */
    readonly minMainSize: _angular_core.InputSignal<number>;
    /**
     * Sets the minimal width of the detail container in pixel.
     *
     * @defaultValue 300
     */
    readonly minDetailSize: _angular_core.InputSignal<number>;
    /**
     * An optional stateId to uniquely identify a component instance.
     * Required for persistence of ui state.
     */
    readonly stateId: _angular_core.InputSignal<string | undefined>;
    /**
     * 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.
     */
    protected preventFocusDetails: boolean;
    private readonly actualMainContainerWidth;
    protected splitSizes: [number, number];
    protected maxMainSize: string;
    protected maxDetailSize: string;
    protected readonly mainStateId: _angular_core.Signal<string | undefined>;
    protected readonly detailStateId: _angular_core.Signal<string | undefined>;
    protected readonly animate: _angular_core.WritableSignal<boolean>;
    protected readonly opacity: _angular_core.WritableSignal<string>;
    ngOnChanges(changes: SimpleChanges<this>): void;
    ngOnInit(): void;
    protected onSplitSizesChange(sizes: number[]): void;
    protected detailsBackClicked(): void;
    /**
     * Get the max size to limit in the static flex layout (if less than 50%), otherwise not set
     */
    private getMaxSize;
    private determineLayout;
    private doAnimation;
    private updateDetailsFocusable;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiMainDetailContainerComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiMainDetailContainerComponent, "si-main-detail-container", never, { "largeLayoutBreakpoint": { "alias": "largeLayoutBreakpoint"; "required": false; "isSignal": true; }; "detailsActive": { "alias": "detailsActive"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "truncateHeading": { "alias": "truncateHeading"; "required": false; "isSignal": true; }; "detailsHeading": { "alias": "detailsHeading"; "required": false; "isSignal": true; }; "resizableParts": { "alias": "resizableParts"; "required": false; "isSignal": true; }; "hideBackButton": { "alias": "hideBackButton"; "required": false; "isSignal": true; }; "detailsBackButtonText": { "alias": "detailsBackButtonText"; "required": false; "isSignal": true; }; "containerClass": { "alias": "containerClass"; "required": false; "isSignal": true; }; "mainContainerClass": { "alias": "mainContainerClass"; "required": false; "isSignal": true; }; "detailContainerClass": { "alias": "detailContainerClass"; "required": false; "isSignal": true; }; "mainContainerWidth": { "alias": "mainContainerWidth"; "required": false; "isSignal": true; }; "minMainSize": { "alias": "minMainSize"; "required": false; "isSignal": true; }; "minDetailSize": { "alias": "minDetailSize"; "required": false; "isSignal": true; }; "stateId": { "alias": "stateId"; "required": false; "isSignal": true; }; }, { "hasLargeSizeChange": "hasLargeSizeChange"; "detailsActive": "detailsActiveChange"; "mainContainerWidth": "mainContainerWidthChange"; }, never, ["[slot=mainSearch]", "[slot=mainActions]", "[slot=mainData]", "[slot=detailActions]", "[slot=details]"], true, never>;
}

declare class SiMainDetailContainerModule {
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiMainDetailContainerModule, never>;
    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<SiMainDetailContainerModule, never, [typeof SiMainDetailContainerComponent], [typeof SiMainDetailContainerComponent]>;
    static ɵinj: _angular_core.ɵɵInjectorDeclaration<SiMainDetailContainerModule>;
}

export { SiMainDetailContainerComponent, SiMainDetailContainerModule };
