@fundamental-ngx/core 0.63.0-rc.2 → 0.63.0-rc.21

package/fesm2022/fundamental-ngx-core-flexible-column-layout.mjs

@@ -360,7 +360,7 @@ class FlexibleColumnLayoutComponent {
                 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.6\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 }); }
+        ], 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,
@@ -369,7 +369,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                             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.6\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"] }]
+                    ], 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']