import * as i0 from '@angular/core';
import { InjectionToken, inject, EventEmitter, Input, Output, ContentChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { NgTemplateOutlet } from '@angular/common';
import { ButtonComponent } from '@fundamental-ngx/core/button';
import { ContentDensityDirective } from '@fundamental-ngx/core/content-density';
import { IconComponent } from '@fundamental-ngx/core/icon';
import { Subscription, fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { merge } from '@fundamental-ngx/cdk/utils';

const ONE_COLUMN_START_FULL_SCREEN = 'OneColumnStartFullScreen';
const ONE_COLUMN_MID_FULL_SCREEN = 'OneColumnMidFullScreen';
const ONE_COLUMN_END_FULL_SCREEN = 'OneColumnEndFullScreen';
const TWO_COLUMNS_START_EXPANDED = 'TwoColumnsStartExpanded';
const TWO_COLUMNS_MID_EXPANDED = 'TwoColumnsMidExpanded';
const TWO_COLUMNS_END_EXPANDED = 'TwoColumnsEndExpanded';
const THREE_COLUMNS_MID_EXPANDED = 'ThreeColumnsMidExpanded';
const THREE_COLUMNS_END_EXPANDED = 'ThreeColumnsEndExpanded';
const THREE_COLUMNS_START_MINIMIZED = 'ThreeColumnsStartMinimized';
const THREE_COLUMNS_END_MINIMIZED = 'ThreeColumnsEndMinimized';
const SM_SCREEN_SIZE = 'sm';
const MD_SCREEN_SIZE = 'md';
const LG_SCREEN_SIZE = 'lg';
const DEFAULT_FLEXIBLE_LAYOUT_CONFIG = {
    layouts: {
        OneColumnStartFullScreen: { start: 100, mid: 0, end: 0 },
        OneColumnMidFullScreen: { start: 0, mid: 100, end: 0 },
        OneColumnEndFullScreen: { start: 0, mid: 0, end: 100 },
        TwoColumnsStartExpanded: { start: 67, mid: 33, end: 0 },
        TwoColumnsMidExpanded: { start: 33, mid: 67, end: 0 },
        TwoColumnsEndExpanded: { start: 0, mid: 33, end: 67 },
        ThreeColumnsMidExpanded: { start: 25, mid: 50, end: 25 },
        ThreeColumnsEndExpanded: { start: 25, mid: 25, end: 50 },
        ThreeColumnsStartMinimized: { start: 0, mid: 67, end: 33 },
        ThreeColumnsEndMinimized: { start: 33, mid: 67, end: 0 }
    }
};
const FD_FLEXIBLE_LAYOUT_CONFIG = new InjectionToken('FdFlexibleLayoutConfig');

const FD_FLEXIBLE_COLUMN_LAYOUT_COMPONENT = new InjectionToken('FdFlexibleColumnLayoutComponent');

class FlexibleColumnLayoutComponent {
    constructor() {
        /**
         * The background design of the component
         * Options include: 'solid' | 'translucent' | 'transparent'
         * The default is set to 'solid'
         */
        this.backgroundDesign = 'solid';
        /**
         * The layout of the component
         * Options include: 'OneColumnStartFullScreen' | 'OneColumnMidFullScreen' |
         * 'OneColumnEndFullScreen' | 'TwoColumnsStartExpanded' | 'TwoColumnsMidExpanded' |
         * 'TwoColumnsEndExpanded' | 'ThreeColumnsMidExpanded' | 'ThreeColumnsEndExpanded' |
         * 'ThreeColumnsStartMinimized' | 'ThreeColumnsEndMinimized'
         */
        this.layout = ONE_COLUMN_START_FULL_SCREEN;
        /**
         * Mapping of the layout name and the column layout in %
         */
        this.layoutDefinitions = inject(FD_FLEXIBLE_LAYOUT_CONFIG).layouts;
        /**
         * The event emitted on layout value change.
         */
        this.layoutChange = new EventEmitter();
        /**
         * User defined break point for SM screens
         * Default (Fiori 3) value is 960
         */
        this.smBreakPoint = 960;
        /**
         * User-defined break point for LG screens
         * the default (Fiori 3) value is 1280
         */
        this.lgBreakPoint = 1280;
        /**
         * @hidden
         * left column separator value (between start and middle columns)
         * that specifies the direction of the arrow and
         * if the separator is visible
         * Options include: 'left', 'right' and null
         */
        this._leftColumnSeparator = null;
        /**
         * @hidden
         * right column separator value (between middle and end columns)
         * that specifies the direction of the arrow and
         * if the separator is visible
         * Options include: 'left', 'right' and null
         */
        this._rightColumnSeparator = null;
        /**
         * @hidden
         * the column layout representing the distribution of the width
         * between the first (start), the middle and the last(end) column
         */
        this._columnLayout = this.layoutDefinitions[this.layout];
        /**
         * @hidden
         * allows to keep track of the previos layout
         * so we can go back to it on window resize
         */
        this._previousLayout = this.layout;
        /** @hidden */
        this._screenSize = LG_SCREEN_SIZE;
        /** @hidden */
        this._subscriptions = new Subscription();
        /**
         * @hidden
         * set to 'true' if the layout is changed to fullscreen on window resize
         * this will allow the layout to switch to previous mode on SM->MD transition
         * if a layout is set by the user to fullscreen, it should persist on window resize
         */
        this._responsiveFullscreenLayout = false;
    }
    /**
     * @hidden
     * function that handles the click events on the left separator
     * and updates the layout
     */
    _handleLeftColumnSeparatorClick() {
        switch (this.layout) {
            case TWO_COLUMNS_START_EXPANDED:
                this._updateCurrentLayout(TWO_COLUMNS_MID_EXPANDED);
                break;
            case TWO_COLUMNS_MID_EXPANDED:
                this._updateCurrentLayout(TWO_COLUMNS_START_EXPANDED);
                break;
            case THREE_COLUMNS_MID_EXPANDED:
                this._updateCurrentLayout(THREE_COLUMNS_END_MINIMIZED);
                break;
            case THREE_COLUMNS_END_MINIMIZED:
                this._updateCurrentLayout(TWO_COLUMNS_START_EXPANDED);
                break;
            case THREE_COLUMNS_START_MINIMIZED:
                this._updateCurrentLayout(THREE_COLUMNS_END_MINIMIZED);
                break;
        }
    }
    /**
     * @hidden
     * function that handles the click events on the right separator
     * and updates the layout
     */
    _handleRightColumnSeparatorClick() {
        switch (this.layout) {
            case TWO_COLUMNS_END_EXPANDED:
                this._updateCurrentLayout(THREE_COLUMNS_START_MINIMIZED);
                break;
            case THREE_COLUMNS_MID_EXPANDED:
                this._updateCurrentLayout(THREE_COLUMNS_END_EXPANDED);
                break;
            case THREE_COLUMNS_END_EXPANDED:
                this._updateCurrentLayout(THREE_COLUMNS_MID_EXPANDED);
                break;
            case THREE_COLUMNS_END_MINIMIZED:
                this._updateCurrentLayout(THREE_COLUMNS_MID_EXPANDED);
                break;
            case THREE_COLUMNS_START_MINIMIZED:
                this._updateCurrentLayout(TWO_COLUMNS_END_EXPANDED);
                break;
        }
    }
    /** @hidden */
    ngOnInit() {
        this._updateColumnLayoutParameters();
        this._previousLayout = this.layout;
    }
    /** @hidden */
    ngAfterViewInit() {
        this._screenSize = this._getScreenSize(window.innerWidth);
        this._listenOnWindowResize();
    }
    /** @hidden */
    ngOnChanges(changes) {
        this._updateColumnLayoutParameters();
        if (changes && changes.layout.previousValue) {
            this._previousLayout = changes.layout.previousValue;
        }
        if (changes && changes.layout) {
            this._responsiveLayoutChangeHandler();
        }
    }
    /** @hidden */
    ngOnDestroy() {
        this._subscriptions.unsubscribe();
    }
    /**
     * @hidden
     * function to determine the screen size in 'sm' | 'md' | 'lg' | 'xl'
     * format depending on the window size in px
     */
    _getScreenSize(size) {
        if (size > this.lgBreakPoint) {
            return LG_SCREEN_SIZE;
        }
        else if (size > this.smBreakPoint && size <= this.lgBreakPoint) {
            return MD_SCREEN_SIZE;
        }
        else {
            return SM_SCREEN_SIZE;
        }
    }
    /**
     * @hidden
     * handles the change of the layouts on reaching a break point
     */
    _responsiveLayoutChangeHandler() {
        this._screenSize = this._getScreenSize(window.innerWidth);
        switch (this.layout) {
            case ONE_COLUMN_MID_FULL_SCREEN:
            case ONE_COLUMN_END_FULL_SCREEN: {
                if (this._screenSize !== SM_SCREEN_SIZE &&
                    this.layout !== this._previousLayout &&
                    this._responsiveFullscreenLayout) {
                    this._responsiveFullscreenLayout = false;
                    this._updateCurrentLayout(this._previousLayout);
                }
                break;
            }
            case TWO_COLUMNS_START_EXPANDED:
            case TWO_COLUMNS_MID_EXPANDED: {
                if (this._screenSize === SM_SCREEN_SIZE) {
                    this._responsiveFullscreenLayout = true;
                    this._updateCurrentLayout(ONE_COLUMN_MID_FULL_SCREEN);
                }
                break;
            }
            case TWO_COLUMNS_END_EXPANDED: {
                if (this._screenSize === SM_SCREEN_SIZE) {
                    this._responsiveFullscreenLayout = true;
                    this._updateCurrentLayout(ONE_COLUMN_END_FULL_SCREEN);
                }
                if (this._screenSize === LG_SCREEN_SIZE) {
                    this._updateCurrentLayout(THREE_COLUMNS_END_EXPANDED);
                }
                break;
            }
            case THREE_COLUMNS_START_MINIMIZED: {
                if (this._screenSize === SM_SCREEN_SIZE) {
                    this._responsiveFullscreenLayout = true;
                    this._updateCurrentLayout(ONE_COLUMN_END_FULL_SCREEN);
                }
                if (this._screenSize === LG_SCREEN_SIZE) {
                    this._updateCurrentLayout(THREE_COLUMNS_MID_EXPANDED);
                }
                break;
            }
            case THREE_COLUMNS_END_MINIMIZED: {
                if (this._screenSize === SM_SCREEN_SIZE) {
                    this._responsiveFullscreenLayout = true;
                    this._updateCurrentLayout(ONE_COLUMN_END_FULL_SCREEN);
                }
                if (this._screenSize === LG_SCREEN_SIZE) {
                    this._updateCurrentLayout(THREE_COLUMNS_END_MINIMIZED);
                }
                break;
            }
            case THREE_COLUMNS_MID_EXPANDED: {
                if (this._screenSize === SM_SCREEN_SIZE) {
                    this._responsiveFullscreenLayout = true;
                    this._updateCurrentLayout(ONE_COLUMN_END_FULL_SCREEN);
                }
                if (this._screenSize === MD_SCREEN_SIZE) {
                    this._updateCurrentLayout(THREE_COLUMNS_START_MINIMIZED);
                }
                break;
            }
            case THREE_COLUMNS_END_EXPANDED: {
                if (this._screenSize === SM_SCREEN_SIZE) {
                    this._responsiveFullscreenLayout = true;
                    this._updateCurrentLayout(ONE_COLUMN_END_FULL_SCREEN);
                }
                if (this._screenSize === MD_SCREEN_SIZE) {
                    this._updateCurrentLayout(TWO_COLUMNS_END_EXPANDED);
                }
                break;
            }
        }
    }
    /**
     * @hidden
     * Listen on window resize and update the layout
     * call user defined custom function if provided
     */
    _listenOnWindowResize() {
        if (this.customOnResizeFunction) {
            this.customOnResizeFunction();
        }
        else {
            this._subscriptions.add(fromEvent(window, 'resize')
                .pipe(debounceTime(100))
                .subscribe(() => this._responsiveLayoutChangeHandler()));
        }
    }
    /**
     * @hidden
     * determines if the left separator should be visible
     * and the value that will specify the direction of the arrow
     */
    _getLeftColumnSeparatorValue() {
        switch (this.layout) {
            case TWO_COLUMNS_START_EXPANDED:
                return 'left';
            case TWO_COLUMNS_MID_EXPANDED:
            case THREE_COLUMNS_MID_EXPANDED:
            case THREE_COLUMNS_END_MINIMIZED:
            case THREE_COLUMNS_START_MINIMIZED:
                return 'right';
            default:
                return null;
        }
    }
    /**
     * @hidden
     * determines if the right separator should be visible
     * and the value that will specify the direction of the arrow
     */
    _getRightColumnSeparatorValue() {
        switch (this.layout) {
            case TWO_COLUMNS_END_EXPANDED:
            case THREE_COLUMNS_END_EXPANDED:
                return 'right';
            case THREE_COLUMNS_MID_EXPANDED:
            case THREE_COLUMNS_END_MINIMIZED:
            case THREE_COLUMNS_START_MINIMIZED:
                return 'left';
            default:
                return null;
        }
    }
    /**
     * @hidden
     * updates the column layout based on the layout name
     * makes a call to determine the new value of the left separator
     * makes a call to determine the new value of the right separator
     */
    _updateColumnLayoutParameters() {
        this._columnLayout = this.layoutDefinitions[this.layout];
        this._leftColumnSeparator = this._getLeftColumnSeparatorValue();
        this._rightColumnSeparator = this._getRightColumnSeparatorValue();
    }
    /**
     * @hidden
     * updates the layout
     * emits an event
     * makes a call to the helper function that will update the column layout and the separators
     */
    _updateCurrentLayout(newLayout) {
        this.layout = newLayout;
        this._updateColumnLayoutParameters();
        // setTimeout fixes "ExpressionChangedAfterItHasBeenCheckedError"
        setTimeout(() => {
            this.layoutChange.emit(this.layout);
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FlexibleColumnLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: FlexibleColumnLayoutComponent, isStandalone: true, selector: "fd-flexible-column-layout", inputs: { backgroundDesign: "backgroundDesign", layout: "layout", layoutDefinitions: "layoutDefinitions", smBreakPoint: "smBreakPoint", lgBreakPoint: "lgBreakPoint", customOnResizeFunction: "customOnResizeFunction", separatorAriaLabel: "separatorAriaLabel", expandTitle: "expandTitle", collapseTitle: "collapseTitle", expandTitleStartBtn: "expandTitleStartBtn", collapseTitleStartBtn: "collapseTitleStartBtn", expandTitleEndBtn: "expandTitleEndBtn", collapseTitleEndBtn: "collapseTitleEndBtn" }, outputs: { layoutChange: "layoutChange" }, providers: [
            {
                provide: FD_FLEXIBLE_COLUMN_LAYOUT_COMPONENT,
                useExisting: FlexibleColumnLayoutComponent
            }
        ], queries: [{ propertyName: "startColumn", first: true, predicate: ["startColumn"], descendants: true }, { propertyName: "midColumn", first: true, predicate: ["midColumn"], descendants: true }, { propertyName: "endColumn", first: true, predicate: ["endColumn"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"fd-flexible-column-layout\"\n    [class.fd-flexible-column-layout--translucent]=\"backgroundDesign === 'translucent'\"\n    [class.fd-flexible-column-layout--transparent]=\"backgroundDesign === 'transparent'\"\n>\n    <!-- Start/Left/First Column -->\n    <div\n        class=\"fd-flexible-column-layout__column\"\n        [style.width.%]=\"_columnLayout.start\"\n        [style.visibility]=\"_columnLayout.start === 0 ? 'hidden' : 'visible'\"\n        [style.height]=\"_columnLayout.start === 0 ? '0' : 'auto'\"\n        [attr.aria-hidden]=\"_columnLayout.start === 0\"\n    >\n        <ng-template [ngTemplateOutlet]=\"startColumn\"></ng-template>\n    </div>\n    <!-- Left Separator -->\n    @if (_leftColumnSeparator) {\n        <div\n            class=\"fd-flexible-column-layout__separator\"\n            [attr.aria-label]=\"separatorAriaLabel\"\n            (click)=\"_handleLeftColumnSeparatorClick()\"\n        >\n            <button\n                fd-button\n                fdCompact\n                fdType=\"transparent\"\n                class=\"fd-flexible-column-layout__button\"\n                [title]=\"\n                    _leftColumnSeparator === 'left'\n                        ? expandTitleStartBtn || expandTitle\n                        : collapseTitleStartBtn || collapseTitle\n                \"\n            >\n                <fd-icon\n                    [glyph]=\"_leftColumnSeparator ? 'slim-arrow-' + _leftColumnSeparator : ''\"\n                    role=\"presentation\"\n                ></fd-icon>\n            </button>\n        </div>\n    }\n    <!-- Middle/Second Column -->\n    <div\n        class=\"fd-flexible-column-layout__column\"\n        [style.width.%]=\"_columnLayout.mid\"\n        [style.visibility]=\"_columnLayout.mid === 0 ? 'hidden' : 'visible'\"\n        [style.height]=\"_columnLayout.mid === 0 ? '0' : 'auto'\"\n        [attr.aria-hidden]=\"_columnLayout.mid === 0\"\n    >\n        <ng-template [ngTemplateOutlet]=\"midColumn\"></ng-template>\n    </div>\n    <!-- Right Separator -->\n    @if (_rightColumnSeparator) {\n        <div\n            class=\"fd-flexible-column-layout__separator\"\n            [attr.aria-label]=\"separatorAriaLabel\"\n            (click)=\"_handleRightColumnSeparatorClick()\"\n        >\n            <button\n                fd-button\n                fdCompact\n                fdType=\"transparent\"\n                class=\"fd-flexible-column-layout__button\"\n                [title]=\"\n                    _rightColumnSeparator === 'left'\n                        ? expandTitleEndBtn || expandTitle\n                        : collapseTitleEndBtn || collapseTitle\n                \"\n            >\n                <fd-icon\n                    [glyph]=\"_rightColumnSeparator ? 'slim-arrow-' + _rightColumnSeparator : ''\"\n                    role=\"presentation\"\n                ></fd-icon>\n            </button>\n        </div>\n    }\n    <!-- End/Right/Third Column -->\n    <div\n        class=\"fd-flexible-column-layout__column\"\n        [style.width.%]=\"_columnLayout.end\"\n        [style.visibility]=\"_columnLayout.end === 0 ? 'hidden' : 'visible'\"\n        [style.height]=\"_columnLayout.end === 0 ? '0' : 'auto'\"\n        [attr.aria-hidden]=\"_columnLayout.end === 0\"\n    >\n        <ng-template [ngTemplateOutlet]=\"endColumn\"></ng-template>\n    </div>\n</div>\n", styles: [".fd-flexible-column-layout{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.fd-flexible-column-layout:after,.fd-flexible-column-layout:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-flexible-column-layout__separator{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--fdFlexibleColumnLayout_Background_Solid);min-width:1rem;position:relative;width:1rem}.fd-flexible-column-layout__separator:after,.fd-flexible-column-layout__separator:before{-webkit-box-sizing:inherit;box-sizing:inherit;content:\"\";display:block;font-size:inherit;height:4rem;left:50%;position:absolute;-webkit-transform:translateX(-50%);transform:translate(-50%);-webkit-transition:all .1s ease-in;transition:all .1s ease-in;width:.0625rem}.fd-flexible-column-layout__separator:before{background-image:-webkit-gradient(linear,left bottom,left top,from(var(--fdFlexibleColumnLayout_Toggle_Image_Color)),to(transparent));background-image:linear-gradient(to top,var(--fdFlexibleColumnLayout_Toggle_Image_Color),transparent);bottom:calc(50% + 1rem)}.fd-flexible-column-layout__separator:after{background-image:-webkit-gradient(linear,left top,left bottom,from(var(--fdFlexibleColumnLayout_Toggle_Image_Color)),to(transparent));background-image:linear-gradient(to bottom,var(--fdFlexibleColumnLayout_Toggle_Image_Color),transparent);top:calc(50% + 1rem)}.fd-flexible-column-layout__separator.is-hover:after,.fd-flexible-column-layout__separator.is-hover:before,.fd-flexible-column-layout__separator:hover:after,.fd-flexible-column-layout__separator:hover:before{height:7rem}.fd-flexible-column-layout .fd-flexible-column-layout__button{height:2rem;min-width:1.5rem;width:1.5rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;left:50%;padding-block:0;padding-inline:0;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:2}.fd-flexible-column-layout__column{border:0;border-left:var(--fdFlexibleColumnLayout_Border);border-right:var(--fdFlexibleColumnLayout_Border);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;min-width:20rem;padding-block:0;padding-inline:0;-webkit-transition:width .56s cubic-bezier(.1,0,.05,1),visibility .56s ease-in;transition:width .56s cubic-bezier(.1,0,.05,1),visibility .56s ease-in}.fd-flexible-column-layout__column:after,.fd-flexible-column-layout__column:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-flexible-column-layout__column.is-first-child,.fd-flexible-column-layout__column:first-child{border-left:none}.fd-flexible-column-layout__column.is-last-child,.fd-flexible-column-layout__column:last-child{border-right:none}.fd-flexible-column-layout__column--hidden{border:none;min-width:0}.fd-flexible-column-layout--translucent .fd-flexible-column-layout__separator{background-color:var(--fdFlexibleColumnLayout_Background_Translucent)}.fd-flexible-column-layout--transparent .fd-flexible-column-layout__separator{background-color:var(--fdFlexibleColumnLayout_Background_Transparent)}.fd-button.fd-flexible-column-layout__button{z-index:1}.fd-flexible-column-layout__column{transition:width .56s cubic-bezier(.1,0,.05,1),visibility .1s ease-in;overflow:hidden}.fd-flexible-column-layout__column{min-width:0}\n/*! Bundled license information:\n\nfundamental-styles/dist/flexible-column-layout.css:\n  (*!\n   * Fundamental Library Styles v0.41.7\n   * Copyright (c) 2026 SAP SE or an SAP affiliate company.\n   * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n   *)\n*/\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "directive", type: ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "size", "class", "ariaLabel", "ariaHidden"], outputs: ["ariaHiddenChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FlexibleColumnLayoutComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fd-flexible-column-layout', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                        {
                            provide: FD_FLEXIBLE_COLUMN_LAYOUT_COMPONENT,
                            useExisting: FlexibleColumnLayoutComponent
                        }
                    ], imports: [NgTemplateOutlet, ButtonComponent, ContentDensityDirective, IconComponent], template: "<div\n    class=\"fd-flexible-column-layout\"\n    [class.fd-flexible-column-layout--translucent]=\"backgroundDesign === 'translucent'\"\n    [class.fd-flexible-column-layout--transparent]=\"backgroundDesign === 'transparent'\"\n>\n    <!-- Start/Left/First Column -->\n    <div\n        class=\"fd-flexible-column-layout__column\"\n        [style.width.%]=\"_columnLayout.start\"\n        [style.visibility]=\"_columnLayout.start === 0 ? 'hidden' : 'visible'\"\n        [style.height]=\"_columnLayout.start === 0 ? '0' : 'auto'\"\n        [attr.aria-hidden]=\"_columnLayout.start === 0\"\n    >\n        <ng-template [ngTemplateOutlet]=\"startColumn\"></ng-template>\n    </div>\n    <!-- Left Separator -->\n    @if (_leftColumnSeparator) {\n        <div\n            class=\"fd-flexible-column-layout__separator\"\n            [attr.aria-label]=\"separatorAriaLabel\"\n            (click)=\"_handleLeftColumnSeparatorClick()\"\n        >\n            <button\n                fd-button\n                fdCompact\n                fdType=\"transparent\"\n                class=\"fd-flexible-column-layout__button\"\n                [title]=\"\n                    _leftColumnSeparator === 'left'\n                        ? expandTitleStartBtn || expandTitle\n                        : collapseTitleStartBtn || collapseTitle\n                \"\n            >\n                <fd-icon\n                    [glyph]=\"_leftColumnSeparator ? 'slim-arrow-' + _leftColumnSeparator : ''\"\n                    role=\"presentation\"\n                ></fd-icon>\n            </button>\n        </div>\n    }\n    <!-- Middle/Second Column -->\n    <div\n        class=\"fd-flexible-column-layout__column\"\n        [style.width.%]=\"_columnLayout.mid\"\n        [style.visibility]=\"_columnLayout.mid === 0 ? 'hidden' : 'visible'\"\n        [style.height]=\"_columnLayout.mid === 0 ? '0' : 'auto'\"\n        [attr.aria-hidden]=\"_columnLayout.mid === 0\"\n    >\n        <ng-template [ngTemplateOutlet]=\"midColumn\"></ng-template>\n    </div>\n    <!-- Right Separator -->\n    @if (_rightColumnSeparator) {\n        <div\n            class=\"fd-flexible-column-layout__separator\"\n            [attr.aria-label]=\"separatorAriaLabel\"\n            (click)=\"_handleRightColumnSeparatorClick()\"\n        >\n            <button\n                fd-button\n                fdCompact\n                fdType=\"transparent\"\n                class=\"fd-flexible-column-layout__button\"\n                [title]=\"\n                    _rightColumnSeparator === 'left'\n                        ? expandTitleEndBtn || expandTitle\n                        : collapseTitleEndBtn || collapseTitle\n                \"\n            >\n                <fd-icon\n                    [glyph]=\"_rightColumnSeparator ? 'slim-arrow-' + _rightColumnSeparator : ''\"\n                    role=\"presentation\"\n                ></fd-icon>\n            </button>\n        </div>\n    }\n    <!-- End/Right/Third Column -->\n    <div\n        class=\"fd-flexible-column-layout__column\"\n        [style.width.%]=\"_columnLayout.end\"\n        [style.visibility]=\"_columnLayout.end === 0 ? 'hidden' : 'visible'\"\n        [style.height]=\"_columnLayout.end === 0 ? '0' : 'auto'\"\n        [attr.aria-hidden]=\"_columnLayout.end === 0\"\n    >\n        <ng-template [ngTemplateOutlet]=\"endColumn\"></ng-template>\n    </div>\n</div>\n", styles: [".fd-flexible-column-layout{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.fd-flexible-column-layout:after,.fd-flexible-column-layout:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-flexible-column-layout__separator{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--fdFlexibleColumnLayout_Background_Solid);min-width:1rem;position:relative;width:1rem}.fd-flexible-column-layout__separator:after,.fd-flexible-column-layout__separator:before{-webkit-box-sizing:inherit;box-sizing:inherit;content:\"\";display:block;font-size:inherit;height:4rem;left:50%;position:absolute;-webkit-transform:translateX(-50%);transform:translate(-50%);-webkit-transition:all .1s ease-in;transition:all .1s ease-in;width:.0625rem}.fd-flexible-column-layout__separator:before{background-image:-webkit-gradient(linear,left bottom,left top,from(var(--fdFlexibleColumnLayout_Toggle_Image_Color)),to(transparent));background-image:linear-gradient(to top,var(--fdFlexibleColumnLayout_Toggle_Image_Color),transparent);bottom:calc(50% + 1rem)}.fd-flexible-column-layout__separator:after{background-image:-webkit-gradient(linear,left top,left bottom,from(var(--fdFlexibleColumnLayout_Toggle_Image_Color)),to(transparent));background-image:linear-gradient(to bottom,var(--fdFlexibleColumnLayout_Toggle_Image_Color),transparent);top:calc(50% + 1rem)}.fd-flexible-column-layout__separator.is-hover:after,.fd-flexible-column-layout__separator.is-hover:before,.fd-flexible-column-layout__separator:hover:after,.fd-flexible-column-layout__separator:hover:before{height:7rem}.fd-flexible-column-layout .fd-flexible-column-layout__button{height:2rem;min-width:1.5rem;width:1.5rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;left:50%;padding-block:0;padding-inline:0;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:2}.fd-flexible-column-layout__column{border:0;border-left:var(--fdFlexibleColumnLayout_Border);border-right:var(--fdFlexibleColumnLayout_Border);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;min-width:20rem;padding-block:0;padding-inline:0;-webkit-transition:width .56s cubic-bezier(.1,0,.05,1),visibility .56s ease-in;transition:width .56s cubic-bezier(.1,0,.05,1),visibility .56s ease-in}.fd-flexible-column-layout__column:after,.fd-flexible-column-layout__column:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-flexible-column-layout__column.is-first-child,.fd-flexible-column-layout__column:first-child{border-left:none}.fd-flexible-column-layout__column.is-last-child,.fd-flexible-column-layout__column:last-child{border-right:none}.fd-flexible-column-layout__column--hidden{border:none;min-width:0}.fd-flexible-column-layout--translucent .fd-flexible-column-layout__separator{background-color:var(--fdFlexibleColumnLayout_Background_Translucent)}.fd-flexible-column-layout--transparent .fd-flexible-column-layout__separator{background-color:var(--fdFlexibleColumnLayout_Background_Transparent)}.fd-button.fd-flexible-column-layout__button{z-index:1}.fd-flexible-column-layout__column{transition:width .56s cubic-bezier(.1,0,.05,1),visibility .1s ease-in;overflow:hidden}.fd-flexible-column-layout__column{min-width:0}\n/*! Bundled license information:\n\nfundamental-styles/dist/flexible-column-layout.css:\n  (*!\n   * Fundamental Library Styles v0.41.7\n   * Copyright (c) 2026 SAP SE or an SAP affiliate company.\n   * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n   *)\n*/\n"] }]
        }], propDecorators: { startColumn: [{
                type: ContentChild,
                args: ['startColumn']
            }], midColumn: [{
                type: ContentChild,
                args: ['midColumn']
            }], endColumn: [{
                type: ContentChild,
                args: ['endColumn']
            }], backgroundDesign: [{
                type: Input
            }], layout: [{
                type: Input
            }], layoutDefinitions: [{
                type: Input
            }], layoutChange: [{
                type: Output
            }], smBreakPoint: [{
                type: Input
            }], lgBreakPoint: [{
                type: Input
            }], customOnResizeFunction: [{
                type: Input
            }], separatorAriaLabel: [{
                type: Input
            }], expandTitle: [{
                type: Input
            }], collapseTitle: [{
                type: Input
            }], expandTitleStartBtn: [{
                type: Input
            }], collapseTitleStartBtn: [{
                type: Input
            }], expandTitleEndBtn: [{
                type: Input
            }], collapseTitleEndBtn: [{
                type: Input
            }] } });

/**
 * Helper function to provide custom configuration for Flexible Column Layout component.
 * @param config
 * @returns
 */
function provideFlexibleColumnLayoutConfig(config) {
    config = merge(structuredClone(DEFAULT_FLEXIBLE_LAYOUT_CONFIG), structuredClone(config));
    return [
        {
            provide: FD_FLEXIBLE_LAYOUT_CONFIG,
            useValue: config
        }
    ];
}

/**
 * Adds Flexible Column Layout functionality to your application.
 *
 * Can be imported in two ways:
 * * Plain `FlexibleColumnLayoutModule` with default configuration
 * * With `withConfig()` method which allows passing custom default configuration.
 */
/**
 * @deprecated
 * Use direct imports of components and directives.
 */
class FlexibleColumnLayoutModule {
    /**
     * Allows configuring module on a global level with custom configuration.
     * @param config User's custom configuration.
     */
    static withConfig(config) {
        return {
            ngModule: FlexibleColumnLayoutModule,
            providers: provideFlexibleColumnLayoutConfig(config)
        };
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FlexibleColumnLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: FlexibleColumnLayoutModule, imports: [FlexibleColumnLayoutComponent], exports: [FlexibleColumnLayoutComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FlexibleColumnLayoutModule, providers: [
            {
                provide: FD_FLEXIBLE_LAYOUT_CONFIG,
                useValue: DEFAULT_FLEXIBLE_LAYOUT_CONFIG
            }
        ], imports: [FlexibleColumnLayoutComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FlexibleColumnLayoutModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [FlexibleColumnLayoutComponent],
                    exports: [FlexibleColumnLayoutComponent],
                    providers: [
                        {
                            provide: FD_FLEXIBLE_LAYOUT_CONFIG,
                            useValue: DEFAULT_FLEXIBLE_LAYOUT_CONFIG
                        }
                    ]
                }]
        }] });

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

export { DEFAULT_FLEXIBLE_LAYOUT_CONFIG, FD_FLEXIBLE_COLUMN_LAYOUT_COMPONENT, FD_FLEXIBLE_LAYOUT_CONFIG, FlexibleColumnLayoutComponent, FlexibleColumnLayoutModule, LG_SCREEN_SIZE, MD_SCREEN_SIZE, ONE_COLUMN_END_FULL_SCREEN, ONE_COLUMN_MID_FULL_SCREEN, ONE_COLUMN_START_FULL_SCREEN, SM_SCREEN_SIZE, THREE_COLUMNS_END_EXPANDED, THREE_COLUMNS_END_MINIMIZED, THREE_COLUMNS_MID_EXPANDED, THREE_COLUMNS_START_MINIMIZED, TWO_COLUMNS_END_EXPANDED, TWO_COLUMNS_MID_EXPANDED, TWO_COLUMNS_START_EXPANDED, provideFlexibleColumnLayoutConfig };
//# sourceMappingURL=fundamental-ngx-core-flexible-column-layout.mjs.map
