@fundamental-ngx/core 0.35.1-rc.0 → 0.35.1

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

@@ -1,9 +1,12 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ChangeDetectionStrategy, ContentChild, Input, Output, NgModule } from '@angular/core';
+import { InjectionToken, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, ContentChild, Input, Output, NgModule } from '@angular/core';
 import { Subscription, fromEvent } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
-import * as i1 from '@angular/common';
+import * as i1 from '@fundamental-ngx/core/button';
+import { ButtonModule } from '@fundamental-ngx/core/button';
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import { merge, cloneDeep } from 'lodash-es';
 
 const ONE_COLUMN_START_FULL_SCREEN = 'OneColumnStartFullScreen';
 const ONE_COLUMN_MID_FULL_SCREEN = 'OneColumnMidFullScreen';
@@ -18,17 +21,33 @@ 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');
 
 class FlexibleColumnLayoutComponent {
-    constructor() {
+    constructor(_config) {
+        this._config = _config;
         /**
-         * the background design of the component
+         * 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
+         * The layout of the component
          * Options include: 'OneColumnStartFullScreen' | 'OneColumnMidFullScreen' |
          * 'OneColumnEndFullScreen' | 'TwoColumnsStartExpanded' | 'TwoColumnsMidExpanded' |
          * 'TwoColumnsEndExpanded' | 'ThreeColumnsMidExpanded' | 'ThreeColumnsEndExpanded' |
@@ -36,20 +55,25 @@ class FlexibleColumnLayoutComponent {
          */
         this.layout = ONE_COLUMN_START_FULL_SCREEN;
         /**
-         * the event emitted on layout value cchange
+         * Mapping of the layout name and the column layout in %
+         */
+        this.layoutDefinitions = this._config.layouts;
+        /**
+         * The event emitted on layout value change.
          */
         this.layoutChange = new EventEmitter();
         /**
-         * user defined break point for SM screens
-         * the default (Fiori 3) value is 960
+         * User defined break point for SM screens
+         * Default (Fiori 3) value is 960
          */
         this.smBreakPoint = 960;
         /**
-         * user defined break point for LG screens
+         * 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
@@ -57,8 +81,9 @@ class FlexibleColumnLayoutComponent {
          */
         this._leftColumnSeparator = null;
         /**
+         * @hidden
          * right column separator value (between middle and end columns)
-         * that speccifies the direction of the arrow and
+         * that specifies the direction of the arrow and
          * if the separator is visible
          * Options include: 'left', 'right' and null
          */
@@ -75,25 +100,10 @@ class FlexibleColumnLayoutComponent {
         this._subscriptions = new Subscription();
         /**
          * @hidden
-         * mappting of the layout name and the column layout in %
-         */
-        this._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 }
-        };
-        /**
          * the column layout representing the distribution of the width
          * between the first (start), the middle and the last(end) column
          */
-        this._columnLayout = this._layouts[this.layout];
+        this._columnLayout = this.layoutDefinitions[this.layout];
         /**
          * @hidden
          * set to 'true' if the layout is changed to fullscreen on window resize
@@ -103,6 +113,7 @@ class FlexibleColumnLayoutComponent {
         this._responsiveFullscreenLayout = false;
     }
     /**
+     * @hidden
      * function that handles the click events on the left separator
      * and updates the layout
      */
@@ -126,6 +137,7 @@ class FlexibleColumnLayoutComponent {
         }
     }
     /**
+     * @hidden
      * function that handles the click events on the right separator
      * and updates the layout
      */
@@ -299,7 +311,7 @@ class FlexibleColumnLayoutComponent {
      * makes a call to determine the new value of the right separator
      */
     _updateColumnLayoutParameters() {
-        this._columnLayout = this._layouts[this.layout];
+        this._columnLayout = this.layoutDefinitions[this.layout];
         this._leftColumnSeparator = this._getLeftColumnSeparatorValue();
         this._rightColumnSeparator = this._getRightColumnSeparatorValue();
     }
@@ -342,12 +354,17 @@ class FlexibleColumnLayoutComponent {
         this._subscriptions.unsubscribe();
     }
 }
-FlexibleColumnLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: FlexibleColumnLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FlexibleColumnLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: FlexibleColumnLayoutComponent, selector: "fd-flexible-column-layout", inputs: { backgroundDesign: "backgroundDesign", layout: "layout", smBreakPoint: "smBreakPoint", lgBreakPoint: "lgBreakPoint", customOnResizeFunction: "customOnResizeFunction" }, outputs: { layoutChange: "layoutChange" }, 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-container *ngTemplateOutlet=\"startColumn\"></ng-container>\n    </div>\n    <!-- Left Separator -->\n    <div *ngIf=\"_leftColumnSeparator\" class=\"fd-flexible-column-layout__separator\">\n        <button\n            class=\"fd-button fd-button--compact fd-button--transparent fd-flexible-column-layout__button\"\n            aria-label=\"Expand\"\n            (click)=\"_handleLeftColumnSeparatorClick()\"\n        >\n            <i\n                [class]=\"_leftColumnSeparator ? 'sap-icon--slim-arrow-' + _leftColumnSeparator : ''\"\n                role=\"presentation\"\n            ></i>\n        </button>\n    </div>\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-container *ngTemplateOutlet=\"midColumn\"></ng-container>\n    </div>\n    <!-- Right Separator -->\n    <div *ngIf=\"_rightColumnSeparator\" class=\"fd-flexible-column-layout__separator\">\n        <button\n            class=\"fd-button fd-button--compact fd-button--transparent fd-flexible-column-layout__button\"\n            aria-label=\"Expand\"\n            (click)=\"_handleRightColumnSeparatorClick()\"\n        >\n            <i\n                [class]=\"_rightColumnSeparator ? 'sap-icon--slim-arrow-' + _rightColumnSeparator : ''\"\n                role=\"presentation\"\n            ></i>\n        </button>\n    </div>\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-container *ngTemplateOutlet=\"endColumn\"></ng-container>\n    </div>\n</div>\n", styles: [".fd-button{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;background-image:none;display:inline-block;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;background-color:transparent;border-radius:var(--sapButton_BorderCornerRadius);display:inline-flex;justify-content:center;align-items:center;padding-left:calc(.625rem - var(--sapButton_BorderWidth));padding-right:calc(.625rem - var(--sapButton_BorderWidth));height:2.25rem;max-height:2.25rem;min-width:2.25rem;overflow:visible;text-overflow:ellipsis;position:relative;text-align:center;text-shadow:var(--fdButton_Text_Shadow);border-style:solid;border-width:var(--sapButton_BorderWidth);color:var(--sapButton_TextColor);border-color:var(--sapButton_BorderColor);background-color:var(--sapButton_Background)}.fd-button:before,.fd-button:after{box-sizing:inherit;font-size:inherit}.fd-button::-moz-focus-inner{border:0}.fd-button:before{content:\"\";display:block;position:absolute;height:auto;width:100%;top:-.25rem;bottom:-.25rem;left:0;right:0}.fd-button__text{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:inherit;color:inherit}.fd-button__text:before,.fd-button__text:after{box-sizing:inherit;font-size:inherit}.fd-button *:not(:first-child){margin-left:.375rem!important}[dir=rtl] .fd-button *:not(:first-child),.fd-button *:not(:first-child)[dir=rtl]{margin-left:0!important;margin-right:.375rem!important}.fd-button>[class*=sap-icon]{color:inherit;width:1rem;min-width:1rem;height:1rem;font-size:1rem;line-height:1rem;font-style:normal;vertical-align:text-bottom}.fd-button>[class*=sap-icon]:before,.fd-button>[class*=sap-icon]:after{width:inherit;height:inherit;font-size:inherit;line-height:inherit}.fd-button__badge{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:inline-flex;justify-content:center;align-items:center;right:-.25rem;z-index:6;height:1rem;position:absolute;border-style:solid;padding:0 .3125rem;border-radius:.5rem;border-width:.0625rem;top:-.25rem;font-size:var(--sapFontSmallSize);color:var(--sapContent_BadgeTextColor);border-color:var(--fdButton_Badge_Border_Color);background-color:var(--sapContent_BadgeBackground)}.fd-button__badge:before,.fd-button__badge:after{box-sizing:inherit;font-size:inherit}[dir=rtl] .fd-button__badge,.fd-button__badge[dir=rtl]{right:auto;left:-.25rem}.fd-button--compact{padding-left:calc(.5rem - var(--sapButton_BorderWidth));padding-right:calc(.5rem - var(--sapButton_BorderWidth));height:1.625rem;max-height:1.625rem;min-width:2rem}.fd-button--compact:before{top:-.1875rem;bottom:-.1875rem}.fd-button--compact .fd-button__badge{margin-left:.25rem;position:relative;top:0;right:0}[dir=rtl] .fd-button--compact .fd-button__badge,.fd-button--compact .fd-button__badge[dir=rtl]{margin-right:.25rem;margin-left:0}[dir=rtl] .fd-button--compact .fd-button__badge,.fd-button--compact .fd-button__badge[dir=rtl]{left:0}.fd-button--menu{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:12rem;justify-content:flex-start;position:relative}.fd-button--menu .fd-button__text{line-height:1rem}.fd-button--full-width{display:flex;justify-content:center;align-items:center;width:100%;min-width:100%}.fd-button--text-alignment-left{text-align:left;justify-content:flex-start}.fd-button--text-alignment-right{text-align:right;justify-content:flex-end}.fd-button--text-alignment-center{text-align:center;justify-content:center}.fd-button__instructions{position:absolute;clip:rect(0 0 0 0);height:1px;width:1px;border:0;margin:-1px;padding:0;overflow:hidden;white-space:nowrap}.fd-button:focus,.fd-button.is-focus{z-index:5;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);outline-offset:var(--fdButton_Outline_Offset);box-shadow:none}.fd-button:focus.fd-button--toggled,.fd-button:focus.is-selected,.fd-button.is-focus.fd-button--toggled,.fd-button.is-focus.is-selected{outline-color:var(--fdButton_Outline_Contrast)}.fd-button:active,.fd-button.is-active,.fd-button[aria-selected=true],.fd-button.is-selected,.fd-button[aria-pressed=true],.fd-button.is-pressed{box-shadow:none;outline:none}.fd-button[aria-disabled=true],.fd-button.is-disabled,.fd-button:disabled{box-shadow:none;cursor:not-allowed;opacity:var(--sapContent_DisabledOpacity)}.fd-button:hover,.fd-button.is-hover{color:var(--sapButton_Hover_TextColor);border-color:var(--sapButton_Hover_BorderColor);background-color:var(--sapButton_Hover_Background);box-shadow:var(--fdButton_Hover_Shadow)}.fd-button:active,.fd-button.is-active,.fd-button[aria-selected=true],.fd-button.is-selected,.fd-button[aria-pressed=true],.fd-button.is-pressed{color:var(--sapButton_Active_TextColor);border-color:var(--sapButton_Active_BorderColor);background-color:var(--sapButton_Active_Background)}.fd-button[aria-disabled=true],.fd-button.is-disabled,.fd-button:disabled{color:var(--sapButton_TextColor);border-color:var(--sapButton_BorderColor);background-color:var(--sapButton_Background)}.fd-button[aria-disabled=true][aria-selected=true],.fd-button[aria-disabled=true].is-selected,.fd-button.is-disabled[aria-selected=true],.fd-button.is-disabled.is-selected,.fd-button:disabled[aria-selected=true],.fd-button:disabled.is-selected{color:var(--sapButton_Active_TextColor);border-color:var(--sapButton_Active_BorderColor);background-color:var(--sapButton_Active_Background)}.fd-button.fd-button--toggled{color:var(--sapButton_Selected_TextColor);border-color:var(--sapButton_Selected_BorderColor);background-color:var(--sapButton_Selected_Background)}.fd-button.fd-button--toggled:hover,.fd-button.fd-button--toggled.is-hover,.fd-button.fd-button--toggled:active,.fd-button.fd-button--toggled.is-active,.fd-button.fd-button--toggled[aria-selected=true],.fd-button.fd-button--toggled.is-selected,.fd-button.fd-button--toggled[aria-pressed=true],.fd-button.fd-button--toggled.is-pressed{color:var(--sapButton_Selected_TextColor);border-color:var(--sapButton_Selected_Hover_BorderColor);background-color:var(--sapButton_Selected_Hover_Background);box-shadow:var(--fdButton_Hover_Shadow)}.fd-button.fd-button--toggled[aria-disabled=true],.fd-button.fd-button--toggled.is-disabled,.fd-button.fd-button--toggled:disabled{box-shadow:none}.fd-button--attention{color:var(--sapButton_Attention_TextColor);border-color:var(--sapButton_Attention_BorderColor);background-color:var(--sapButton_Attention_Background)}.fd-button--attention:hover,.fd-button--attention.is-hover{color:var(--sapButton_Attention_Hover_TextColor);border-color:var(--sapButton_Attention_Hover_BorderColor);background-color:var(--sapButton_Attention_Hover_Background);box-shadow:var(--fdButton_Attention_Hover_Shadow)}.fd-button--attention:active,.fd-button--attention.is-active,.fd-button--attention[aria-selected=true],.fd-button--attention.is-selected,.fd-button--attention[aria-pressed=true],.fd-button--attention.is-pressed{color:var(--sapButton_Attention_Active_TextColor);border-color:var(--sapButton_Attention_Active_BorderColor);background-color:var(--sapButton_Attention_Active_Background)}.fd-button--attention[aria-disabled=true],.fd-button--attention.is-disabled,.fd-button--attention:disabled{color:var(--sapButton_Attention_TextColor);border-color:var(--sapButton_Attention_BorderColor);background-color:var(--sapButton_Attention_Background)}.fd-button--attention[aria-disabled=true][aria-selected=true],.fd-button--attention[aria-disabled=true].is-selected,.fd-button--attention.is-disabled[aria-selected=true],.fd-button--attention.is-disabled.is-selected,.fd-button--attention:disabled[aria-selected=true],.fd-button--attention:disabled.is-selected{color:var(--sapButton_Attention_Active_TextColor);border-color:var(--sapButton_Attention_Active_BorderColor);background-color:var(--sapButton_Attention_Active_Background)}.fd-button--attention.fd-button--toggled{color:var(--sapButton_Attention_Selected_TextColor);border-color:var(--sapButton_Attention_Selected_BorderColor);background-color:var(--sapButton_Attention_Selected_Background)}.fd-button--attention.fd-button--toggled:hover,.fd-button--attention.fd-button--toggled.is-hover,.fd-button--attention.fd-button--toggled:active,.fd-button--attention.fd-button--toggled.is-active,.fd-button--attention.fd-button--toggled[aria-selected=true],.fd-button--attention.fd-button--toggled.is-selected,.fd-button--attention.fd-button--toggled[aria-pressed=true],.fd-button--attention.fd-button--toggled.is-pressed{color:var(--sapButton_Attention_Selected_TextColor);border-color:var(--sapButton_Attention_Selected_Hover_BorderColor);background-color:var(--sapButton_Attention_Selected_Hover_Background);box-shadow:var(--fdButton_Attention_Hover_Shadow)}.fd-button--attention.fd-button--toggled[aria-disabled=true],.fd-button--attention.fd-button--toggled.is-disabled,.fd-button--attention.fd-button--toggled:disabled{box-shadow:none}.fd-button--emphasized{font-weight:var(--sapButton_Emphasized_FontWeight);border-width:var(--fdButton_Emphasized_Border_Width);color:var(--sapButton_Emphasized_TextColor);border-color:var(--sapButton_Emphasized_BorderColor);background-color:var(--sapButton_Emphasized_Background)}.fd-button--emphasized:hover,.fd-button--emphasized.is-hover{color:var(--sapButton_Emphasized_Hover_TextColor);border-color:var(--sapButton_Emphasized_Hover_BorderColor);background-color:var(--sapButton_Emphasized_Hover_Background);box-shadow:none}.fd-button--emphasized:active,.fd-button--emphasized.is-active,.fd-button--emphasized[aria-selected=true],.fd-button--emphasized.is-selected,.fd-button--emphasized[aria-pressed=true],.fd-button--emphasized.is-pressed{color:var(--sapButton_Emphasized_Active_TextColor);border-color:var(--sapButton_Emphasized_Active_BorderColor);background-color:var(--sapButton_Emphasized_Active_Background)}.fd-button--emphasized[aria-disabled=true],.fd-button--emphasized.is-disabled,.fd-button--emphasized:disabled{color:var(--sapButton_Emphasized_TextColor);border-color:var(--sapButton_Emphasized_BorderColor);background-color:var(--sapButton_Emphasized_Background)}.fd-button--emphasized[aria-disabled=true][aria-selected=true],.fd-button--emphasized[aria-disabled=true].is-selected,.fd-button--emphasized.is-disabled[aria-selected=true],.fd-button--emphasized.is-disabled.is-selected,.fd-button--emphasized:disabled[aria-selected=true],.fd-button--emphasized:disabled.is-selected{color:var(--sapButton_Emphasized_Active_TextColor);border-color:var(--sapButton_Emphasized_Active_BorderColor);background-color:var(--sapButton_Emphasized_Active_Background)}.fd-button--emphasized.fd-button--toggled{color:var(--sapButton_Selected_TextColor);border-color:var(--sapButton_Selected_BorderColor);background-color:var(--sapButton_Selected_Background)}.fd-button--emphasized.fd-button--toggled:hover,.fd-button--emphasized.fd-button--toggled.is-hover,.fd-button--emphasized.fd-button--toggled:active,.fd-button--emphasized.fd-button--toggled.is-active,.fd-button--emphasized.fd-button--toggled[aria-selected=true],.fd-button--emphasized.fd-button--toggled.is-selected,.fd-button--emphasized.fd-button--toggled[aria-pressed=true],.fd-button--emphasized.fd-button--toggled.is-pressed{color:var(--sapButton_Selected_TextColor);border-color:var(--sapButton_Selected_Hover_BorderColor);background-color:var(--sapButton_Selected_Hover_Background);box-shadow:var(--fdButton_Hover_Shadow)}.fd-button--emphasized.fd-button--toggled[aria-disabled=true],.fd-button--emphasized.fd-button--toggled.is-disabled,.fd-button--emphasized.fd-button--toggled:disabled{box-shadow:none}.fd-button--emphasized:focus,.fd-button--emphasized.is-focus{z-index:5;outline-color:var(--sapContent_ContrastFocusColor)}.fd-button--emphasized:active,.fd-button--emphasized.is-active,.fd-button--emphasized[aria-selected=true],.fd-button--emphasized.is-selected,.fd-button--emphasized[aria-pressed=true],.fd-button--emphasized.is-pressed{outline:none}.fd-button--emphasized.fd-button--toggled:focus,.fd-button--emphasized.fd-button--toggled.is-focus{z-index:5;outline-color:var(--fdButton_Emphasized_Active_Outline)}.fd-button--emphasized.fd-button--toggled:active,.fd-button--emphasized.fd-button--toggled.is-active,.fd-button--emphasized.fd-button--toggled[aria-selected=true],.fd-button--emphasized.fd-button--toggled.is-selected,.fd-button--emphasized.fd-button--toggled[aria-pressed=true],.fd-button--emphasized.fd-button--toggled.is-pressed{outline:none}.fd-button--ghost{color:var(--sapButton_TextColor);border-color:var(--sapButton_BorderColor);background-color:var(--fdButton_Ghost_Background)}.fd-button--ghost:hover,.fd-button--ghost.is-hover{color:var(--sapButton_Hover_TextColor);border-color:var(--sapButton_Hover_BorderColor);background-color:var(--sapButton_Hover_Background);box-shadow:var(--fdButton_Hover_Shadow)}.fd-button--ghost:active,.fd-button--ghost.is-active,.fd-button--ghost[aria-selected=true],.fd-button--ghost.is-selected,.fd-button--ghost[aria-pressed=true],.fd-button--ghost.is-pressed{color:var(--sapButton_Active_TextColor);border-color:var(--sapButton_Active_BorderColor);background-color:var(--sapButton_Active_Background)}.fd-button--ghost[aria-disabled=true],.fd-button--ghost.is-disabled,.fd-button--ghost:disabled{color:var(--sapButton_TextColor);border-color:var(--sapButton_BorderColor);background-color:var(--fdButton_Ghost_Background)}.fd-button--ghost[aria-disabled=true][aria-selected=true],.fd-button--ghost[aria-disabled=true].is-selected,.fd-button--ghost.is-disabled[aria-selected=true],.fd-button--ghost.is-disabled.is-selected,.fd-button--ghost:disabled[aria-selected=true],.fd-button--ghost:disabled.is-selected{color:var(--sapButton_Active_TextColor);border-color:var(--sapButton_Active_BorderColor);background-color:var(--sapButton_Active_Background)}.fd-button--ghost.fd-button--toggled{color:var(--sapButton_Selected_TextColor);border-color:var(--sapButton_Selected_BorderColor);background-color:var(--sapButton_Selected_Background)}.fd-button--ghost.fd-button--toggled:hover,.fd-button--ghost.fd-button--toggled.is-hover,.fd-button--ghost.fd-button--toggled:active,.fd-button--ghost.fd-button--toggled.is-active,.fd-button--ghost.fd-button--toggled[aria-selected=true],.fd-button--ghost.fd-button--toggled.is-selected,.fd-button--ghost.fd-button--toggled[aria-pressed=true],.fd-button--ghost.fd-button--toggled.is-pressed{color:var(--sapButton_Selected_TextColor);border-color:var(--sapButton_Selected_Hover_BorderColor);background-color:var(--sapButton_Selected_Hover_Background);box-shadow:var(--fdButton_Hover_Shadow)}.fd-button--ghost.fd-button--toggled[aria-disabled=true],.fd-button--ghost.fd-button--toggled.is-disabled,.fd-button--ghost.fd-button--toggled:disabled{box-shadow:none}.fd-button--negative{color:var(--sapButton_Reject_TextColor);border-color:var(--sapButton_Reject_BorderColor);background-color:var(--sapButton_Reject_Background)}.fd-button--negative:hover,.fd-button--negative.is-hover{color:var(--sapButton_Reject_Hover_TextColor);border-color:var(--sapButton_Reject_Hover_BorderColor);background-color:var(--sapButton_Reject_Hover_Background);box-shadow:var(--fdButton_Negative_Hover_Shadow)}.fd-button--negative:active,.fd-button--negative.is-active,.fd-button--negative[aria-selected=true],.fd-button--negative.is-selected,.fd-button--negative[aria-pressed=true],.fd-button--negative.is-pressed{color:var(--sapButton_Reject_Active_TextColor);border-color:var(--sapButton_Reject_Active_BorderColor);background-color:var(--sapButton_Reject_Active_Background)}.fd-button--negative[aria-disabled=true],.fd-button--negative.is-disabled,.fd-button--negative:disabled{color:var(--sapButton_Reject_TextColor);border-color:var(--sapButton_Reject_BorderColor);background-color:var(--sapButton_Reject_Background)}.fd-button--negative[aria-disabled=true][aria-selected=true],.fd-button--negative[aria-disabled=true].is-selected,.fd-button--negative.is-disabled[aria-selected=true],.fd-button--negative.is-disabled.is-selected,.fd-button--negative:disabled[aria-selected=true],.fd-button--negative:disabled.is-selected{color:var(--sapButton_Reject_Active_TextColor);border-color:var(--sapButton_Reject_Active_BorderColor);background-color:var(--sapButton_Reject_Active_Background)}.fd-button--negative.fd-button--toggled{color:var(--sapButton_Reject_Selected_TextColor);border-color:var(--sapButton_Reject_Selected_BorderColor);background-color:var(--sapButton_Reject_Selected_Background)}.fd-button--negative.fd-button--toggled:hover,.fd-button--negative.fd-button--toggled.is-hover,.fd-button--negative.fd-button--toggled:active,.fd-button--negative.fd-button--toggled.is-active,.fd-button--negative.fd-button--toggled[aria-selected=true],.fd-button--negative.fd-button--toggled.is-selected,.fd-button--negative.fd-button--toggled[aria-pressed=true],.fd-button--negative.fd-button--toggled.is-pressed{color:var(--sapButton_Reject_Selected_TextColor);border-color:var(--sapButton_Reject_Selected_Hover_BorderColor);background-color:var(--sapButton_Reject_Selected_Hover_Background);box-shadow:var(--fdButton_Negative_Hover_Shadow)}.fd-button--negative.fd-button--toggled[aria-disabled=true],.fd-button--negative.fd-button--toggled.is-disabled,.fd-button--negative.fd-button--toggled:disabled{box-shadow:none}.fd-button--positive{color:var(--sapButton_Accept_TextColor);border-color:var(--sapButton_Accept_BorderColor);background-color:var(--sapButton_Accept_Background)}.fd-button--positive:hover,.fd-button--positive.is-hover{color:var(--sapButton_Accept_Hover_TextColor);border-color:var(--sapButton_Accept_Hover_BorderColor);background-color:var(--sapButton_Accept_Hover_Background);box-shadow:var(--fdButton_Positive_Hover_Shadow)}.fd-button--positive:active,.fd-button--positive.is-active,.fd-button--positive[aria-selected=true],.fd-button--positive.is-selected,.fd-button--positive[aria-pressed=true],.fd-button--positive.is-pressed{color:var(--sapButton_Accept_Active_TextColor);border-color:var(--sapButton_Accept_Active_BorderColor);background-color:var(--sapButton_Accept_Active_Background)}.fd-button--positive[aria-disabled=true],.fd-button--positive.is-disabled,.fd-button--positive:disabled{color:var(--sapButton_Accept_TextColor);border-color:var(--sapButton_Accept_BorderColor);background-color:var(--sapButton_Accept_Background)}.fd-button--positive[aria-disabled=true][aria-selected=true],.fd-button--positive[aria-disabled=true].is-selected,.fd-button--positive.is-disabled[aria-selected=true],.fd-button--positive.is-disabled.is-selected,.fd-button--positive:disabled[aria-selected=true],.fd-button--positive:disabled.is-selected{color:var(--sapButton_Accept_Active_TextColor);border-color:var(--sapButton_Accept_Active_BorderColor);background-color:var(--sapButton_Accept_Active_Background)}.fd-button--positive.fd-button--toggled{color:var(--sapButton_Accept_Selected_TextColor);border-color:var(--sapButton_Accept_Selected_BorderColor);background-color:var(--sapButton_Accept_Selected_Background)}.fd-button--positive.fd-button--toggled:hover,.fd-button--positive.fd-button--toggled.is-hover,.fd-button--positive.fd-button--toggled:active,.fd-button--positive.fd-button--toggled.is-active,.fd-button--positive.fd-button--toggled[aria-selected=true],.fd-button--positive.fd-button--toggled.is-selected,.fd-button--positive.fd-button--toggled[aria-pressed=true],.fd-button--positive.fd-button--toggled.is-pressed{color:var(--sapButton_Accept_Selected_TextColor);border-color:var(--sapButton_Accept_Selected_Hover_BorderColor);background-color:var(--sapButton_Accept_Selected_Hover_Background);box-shadow:var(--fdButton_Positive_Hover_Shadow)}.fd-button--positive.fd-button--toggled[aria-disabled=true],.fd-button--positive.fd-button--toggled.is-disabled,.fd-button--positive.fd-button--toggled:disabled{box-shadow:none}.fd-button--transparent{color:var(--sapButton_Lite_TextColor);border-color:var(--sapButton_Lite_BorderColor);background-color:var(--sapButton_Lite_Background)}.fd-button--transparent:hover,.fd-button--transparent.is-hover{color:var(--sapButton_Lite_Hover_TextColor);border-color:var(--sapButton_Lite_Hover_BorderColor);background-color:var(--sapButton_Lite_Hover_Background);box-shadow:var(--fdButton_Hover_Shadow)}.fd-button--transparent:active,.fd-button--transparent.is-active,.fd-button--transparent[aria-selected=true],.fd-button--transparent.is-selected,.fd-button--transparent[aria-pressed=true],.fd-button--transparent.is-pressed{color:var(--sapButton_Active_TextColor);border-color:var(--sapButton_Lite_Active_BorderColor);background-color:var(--sapButton_Lite_Active_Background)}.fd-button--transparent[aria-disabled=true],.fd-button--transparent.is-disabled,.fd-button--transparent:disabled{color:var(--sapButton_Lite_TextColor);border-color:var(--sapButton_Lite_BorderColor);background-color:var(--sapButton_Lite_Background)}.fd-button--transparent[aria-disabled=true][aria-selected=true],.fd-button--transparent[aria-disabled=true].is-selected,.fd-button--transparent.is-disabled[aria-selected=true],.fd-button--transparent.is-disabled.is-selected,.fd-button--transparent:disabled[aria-selected=true],.fd-button--transparent:disabled.is-selected{color:var(--sapButton_Active_TextColor);border-color:var(--sapButton_Lite_Active_BorderColor);background-color:var(--sapButton_Lite_Active_Background)}.fd-button--transparent.fd-button--toggled{color:var(--sapButton_Selected_TextColor);border-color:var(--sapButton_Selected_BorderColor);background-color:var(--sapButton_Selected_Background)}.fd-button--transparent.fd-button--toggled:hover,.fd-button--transparent.fd-button--toggled.is-hover,.fd-button--transparent.fd-button--toggled:active,.fd-button--transparent.fd-button--toggled.is-active,.fd-button--transparent.fd-button--toggled[aria-selected=true],.fd-button--transparent.fd-button--toggled.is-selected,.fd-button--transparent.fd-button--toggled[aria-pressed=true],.fd-button--transparent.fd-button--toggled.is-pressed{color:var(--sapButton_Selected_TextColor);border-color:var(--sapButton_Selected_Hover_BorderColor);background-color:var(--sapButton_Selected_Hover_Background);box-shadow:var(--fdButton_Hover_Shadow)}.fd-button--transparent.fd-button--toggled[aria-disabled=true],.fd-button--transparent.fd-button--toggled.is-disabled,.fd-button--transparent.fd-button--toggled:disabled{box-shadow:none}/*!\n * Fundamental Library Styles v0.24.1-rc.1\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-flexible-column-layout{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;flex-direction:row}.fd-flexible-column-layout:before,.fd-flexible-column-layout:after{box-sizing:inherit;font-size:inherit}.fd-flexible-column-layout__separator{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;justify-content:center;align-items:center;position:relative;width:1rem;min-width:1rem;background-color:var(--fdFlexibleColumnLayout_Background_Solid)}.fd-flexible-column-layout__separator:before,.fd-flexible-column-layout__separator:after{box-sizing:inherit;font-size:inherit}.fd-flexible-column-layout__separator:after,.fd-flexible-column-layout__separator:before{content:\"\";display:block;width:.0625rem;height:4rem;transition:all .1s ease-in;position:absolute;left:50%;transform:translate(-50%)}.fd-flexible-column-layout__separator:before{bottom:calc(50% + 1rem);background-image:linear-gradient(to top,var(--fdFlexibleColumnLayout_Toggle_Image_Color),transparent)}.fd-flexible-column-layout__separator:after{top:calc(50% + 1rem);background-image:linear-gradient(to bottom,var(--fdFlexibleColumnLayout_Toggle_Image_Color),transparent)}.fd-flexible-column-layout__separator:hover:after,.fd-flexible-column-layout__separator:hover:before,.fd-flexible-column-layout__separator.is-hover:after,.fd-flexible-column-layout__separator.is-hover:before{height:7rem}.fd-flexible-column-layout .fd-flexible-column-layout__button{height:2rem;width:1.5rem;min-width:1.5rem;justify-content:center;padding:0;z-index:2;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.fd-flexible-column-layout__column{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;min-width:20rem;border-left:var(--fdFlexibleColumnLayout_Border);border-right:var(--fdFlexibleColumnLayout_Border);transition:width .56s cubic-bezier(.1,0,.05,1),visibility .56s ease-in}.fd-flexible-column-layout__column:before,.fd-flexible-column-layout__column:after{box-sizing:inherit;font-size:inherit}.fd-flexible-column-layout__column:first-child{margin-left:0;border-left:none}.fd-flexible-column-layout__column:last-child{margin-bottom:0;margin-right:0;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"], directives: [{ type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FlexibleColumnLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: FlexibleColumnLayoutComponent, deps: [{ token: FD_FLEXIBLE_LAYOUT_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
+FlexibleColumnLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: FlexibleColumnLayoutComponent, selector: "fd-flexible-column-layout", inputs: { backgroundDesign: "backgroundDesign", layout: "layout", layoutDefinitions: "layoutDefinitions", smBreakPoint: "smBreakPoint", lgBreakPoint: "lgBreakPoint", customOnResizeFunction: "customOnResizeFunction" }, outputs: { layoutChange: "layoutChange" }, 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-container *ngTemplateOutlet=\"startColumn\"></ng-container>\n    </div>\n    <!-- Left Separator -->\n    <div *ngIf=\"_leftColumnSeparator\" class=\"fd-flexible-column-layout__separator\">\n        <button\n            fd-button\n            [compact]=\"true\"\n            fdType=\"transparent\"\n            class=\"fd-flexible-column-layout__button\"\n            ariaLabel=\"Expand\"\n            (click)=\"_handleLeftColumnSeparatorClick()\"\n        >\n            <i\n                [class]=\"_leftColumnSeparator ? 'sap-icon--slim-arrow-' + _leftColumnSeparator : ''\"\n                role=\"presentation\"\n            ></i>\n        </button>\n    </div>\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-container *ngTemplateOutlet=\"midColumn\"></ng-container>\n    </div>\n    <!-- Right Separator -->\n    <div *ngIf=\"_rightColumnSeparator\" class=\"fd-flexible-column-layout__separator\">\n        <button\n            fd-button\n            [compact]=\"true\"\n            fdType=\"transparent\"\n            class=\"fd-flexible-column-layout__button\"\n            ariaLabel=\"Expand\"\n            (click)=\"_handleRightColumnSeparatorClick()\"\n        >\n            <i\n                [class]=\"_rightColumnSeparator ? 'sap-icon--slim-arrow-' + _rightColumnSeparator : ''\"\n                role=\"presentation\"\n            ></i>\n        </button>\n    </div>\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-container *ngTemplateOutlet=\"endColumn\"></ng-container>\n    </div>\n</div>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.1-rc.1\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-flexible-column-layout{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;flex-direction:row}.fd-flexible-column-layout:before,.fd-flexible-column-layout:after{box-sizing:inherit;font-size:inherit}.fd-flexible-column-layout__separator{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;justify-content:center;align-items:center;position:relative;width:1rem;min-width:1rem;background-color:var(--fdFlexibleColumnLayout_Background_Solid)}.fd-flexible-column-layout__separator:before,.fd-flexible-column-layout__separator:after{box-sizing:inherit;font-size:inherit}.fd-flexible-column-layout__separator:after,.fd-flexible-column-layout__separator:before{content:\"\";display:block;width:.0625rem;height:4rem;transition:all .1s ease-in;position:absolute;left:50%;transform:translate(-50%)}.fd-flexible-column-layout__separator:before{bottom:calc(50% + 1rem);background-image:linear-gradient(to top,var(--fdFlexibleColumnLayout_Toggle_Image_Color),transparent)}.fd-flexible-column-layout__separator:after{top:calc(50% + 1rem);background-image:linear-gradient(to bottom,var(--fdFlexibleColumnLayout_Toggle_Image_Color),transparent)}.fd-flexible-column-layout__separator:hover:after,.fd-flexible-column-layout__separator:hover:before,.fd-flexible-column-layout__separator.is-hover:after,.fd-flexible-column-layout__separator.is-hover:before{height:7rem}.fd-flexible-column-layout .fd-flexible-column-layout__button{height:2rem;width:1.5rem;min-width:1.5rem;justify-content:center;padding:0;z-index:2;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.fd-flexible-column-layout__column{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;min-width:20rem;border-left:var(--fdFlexibleColumnLayout_Border);border-right:var(--fdFlexibleColumnLayout_Border);transition:width .56s cubic-bezier(.1,0,.05,1),visibility .56s ease-in}.fd-flexible-column-layout__column:before,.fd-flexible-column-layout__column:after{box-sizing:inherit;font-size:inherit}.fd-flexible-column-layout__column:first-child{margin-left:0;border-left:none}.fd-flexible-column-layout__column:last-child{margin-bottom:0;margin-right:0;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"], components: [{ type: i1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }], directives: [{ type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: FlexibleColumnLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fd-flexible-column-layout', changeDetection: ChangeDetectionStrategy.OnPush, 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-container *ngTemplateOutlet=\"startColumn\"></ng-container>\n    </div>\n    <!-- Left Separator -->\n    <div *ngIf=\"_leftColumnSeparator\" class=\"fd-flexible-column-layout__separator\">\n        <button\n            class=\"fd-button fd-button--compact fd-button--transparent fd-flexible-column-layout__button\"\n            aria-label=\"Expand\"\n            (click)=\"_handleLeftColumnSeparatorClick()\"\n        >\n            <i\n                [class]=\"_leftColumnSeparator ? 'sap-icon--slim-arrow-' + _leftColumnSeparator : ''\"\n                role=\"presentation\"\n            ></i>\n        </button>\n    </div>\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-container *ngTemplateOutlet=\"midColumn\"></ng-container>\n    </div>\n    <!-- Right Separator -->\n    <div *ngIf=\"_rightColumnSeparator\" class=\"fd-flexible-column-layout__separator\">\n        <button\n            class=\"fd-button fd-button--compact fd-button--transparent fd-flexible-column-layout__button\"\n            aria-label=\"Expand\"\n            (click)=\"_handleRightColumnSeparatorClick()\"\n        >\n            <i\n                [class]=\"_rightColumnSeparator ? 'sap-icon--slim-arrow-' + _rightColumnSeparator : ''\"\n                role=\"presentation\"\n            ></i>\n        </button>\n    </div>\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-container *ngTemplateOutlet=\"endColumn\"></ng-container>\n    </div>\n</div>\n", styles: [".fd-button{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;background-image:none;display:inline-block;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;background-color:transparent;border-radius:var(--sapButton_BorderCornerRadius);display:inline-flex;justify-content:center;align-items:center;padding-left:calc(.625rem - var(--sapButton_BorderWidth));padding-right:calc(.625rem - var(--sapButton_BorderWidth));height:2.25rem;max-height:2.25rem;min-width:2.25rem;overflow:visible;text-overflow:ellipsis;position:relative;text-align:center;text-shadow:var(--fdButton_Text_Shadow);border-style:solid;border-width:var(--sapButton_BorderWidth);color:var(--sapButton_TextColor);border-color:var(--sapButton_BorderColor);background-color:var(--sapButton_Background)}.fd-button:before,.fd-button:after{box-sizing:inherit;font-size:inherit}.fd-button::-moz-focus-inner{border:0}.fd-button:before{content:\"\";display:block;position:absolute;height:auto;width:100%;top:-.25rem;bottom:-.25rem;left:0;right:0}.fd-button__text{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:inherit;color:inherit}.fd-button__text:before,.fd-button__text:after{box-sizing:inherit;font-size:inherit}.fd-button *:not(:first-child){margin-left:.375rem!important}[dir=rtl] .fd-button *:not(:first-child),.fd-button *:not(:first-child)[dir=rtl]{margin-left:0!important;margin-right:.375rem!important}.fd-button>[class*=sap-icon]{color:inherit;width:1rem;min-width:1rem;height:1rem;font-size:1rem;line-height:1rem;font-style:normal;vertical-align:text-bottom}.fd-button>[class*=sap-icon]:before,.fd-button>[class*=sap-icon]:after{width:inherit;height:inherit;font-size:inherit;line-height:inherit}.fd-button__badge{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:inline-flex;justify-content:center;align-items:center;right:-.25rem;z-index:6;height:1rem;position:absolute;border-style:solid;padding:0 .3125rem;border-radius:.5rem;border-width:.0625rem;top:-.25rem;font-size:var(--sapFontSmallSize);color:var(--sapContent_BadgeTextColor);border-color:var(--fdButton_Badge_Border_Color);background-color:var(--sapContent_BadgeBackground)}.fd-button__badge:before,.fd-button__badge:after{box-sizing:inherit;font-size:inherit}[dir=rtl] .fd-button__badge,.fd-button__badge[dir=rtl]{right:auto;left:-.25rem}.fd-button--compact{padding-left:calc(.5rem - var(--sapButton_BorderWidth));padding-right:calc(.5rem - var(--sapButton_BorderWidth));height:1.625rem;max-height:1.625rem;min-width:2rem}.fd-button--compact:before{top:-.1875rem;bottom:-.1875rem}.fd-button--compact .fd-button__badge{margin-left:.25rem;position:relative;top:0;right:0}[dir=rtl] .fd-button--compact .fd-button__badge,.fd-button--compact .fd-button__badge[dir=rtl]{margin-right:.25rem;margin-left:0}[dir=rtl] .fd-button--compact .fd-button__badge,.fd-button--compact .fd-button__badge[dir=rtl]{left:0}.fd-button--menu{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:12rem;justify-content:flex-start;position:relative}.fd-button--menu .fd-button__text{line-height:1rem}.fd-button--full-width{display:flex;justify-content:center;align-items:center;width:100%;min-width:100%}.fd-button--text-alignment-left{text-align:left;justify-content:flex-start}.fd-button--text-alignment-right{text-align:right;justify-content:flex-end}.fd-button--text-alignment-center{text-align:center;justify-content:center}.fd-button__instructions{position:absolute;clip:rect(0 0 0 0);height:1px;width:1px;border:0;margin:-1px;padding:0;overflow:hidden;white-space:nowrap}.fd-button:focus,.fd-button.is-focus{z-index:5;outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);outline-offset:var(--fdButton_Outline_Offset);box-shadow:none}.fd-button:focus.fd-button--toggled,.fd-button:focus.is-selected,.fd-button.is-focus.fd-button--toggled,.fd-button.is-focus.is-selected{outline-color:var(--fdButton_Outline_Contrast)}.fd-button:active,.fd-button.is-active,.fd-button[aria-selected=true],.fd-button.is-selected,.fd-button[aria-pressed=true],.fd-button.is-pressed{box-shadow:none;outline:none}.fd-button[aria-disabled=true],.fd-button.is-disabled,.fd-button:disabled{box-shadow:none;cursor:not-allowed;opacity:var(--sapContent_DisabledOpacity)}.fd-button:hover,.fd-button.is-hover{color:var(--sapButton_Hover_TextColor);border-color:var(--sapButton_Hover_BorderColor);background-color:var(--sapButton_Hover_Background);box-shadow:var(--fdButton_Hover_Shadow)}.fd-button:active,.fd-button.is-active,.fd-button[aria-selected=true],.fd-button.is-selected,.fd-button[aria-pressed=true],.fd-button.is-pressed{color:var(--sapButton_Active_TextColor);border-color:var(--sapButton_Active_BorderColor);background-color:var(--sapButton_Active_Background)}.fd-button[aria-disabled=true],.fd-button.is-disabled,.fd-button:disabled{color:var(--sapButton_TextColor);border-color:var(--sapButton_BorderColor);background-color:var(--sapButton_Background)}.fd-button[aria-disabled=true][aria-selected=true],.fd-button[aria-disabled=true].is-selected,.fd-button.is-disabled[aria-selected=true],.fd-button.is-disabled.is-selected,.fd-button:disabled[aria-selected=true],.fd-button:disabled.is-selected{color:var(--sapButton_Active_TextColor);border-color:var(--sapButton_Active_BorderColor);background-color:var(--sapButton_Active_Background)}.fd-button.fd-button--toggled{color:var(--sapButton_Selected_TextColor);border-color:var(--sapButton_Selected_BorderColor);background-color:var(--sapButton_Selected_Background)}.fd-button.fd-button--toggled:hover,.fd-button.fd-button--toggled.is-hover,.fd-button.fd-button--toggled:active,.fd-button.fd-button--toggled.is-active,.fd-button.fd-button--toggled[aria-selected=true],.fd-button.fd-button--toggled.is-selected,.fd-button.fd-button--toggled[aria-pressed=true],.fd-button.fd-button--toggled.is-pressed{color:var(--sapButton_Selected_TextColor);border-color:var(--sapButton_Selected_Hover_BorderColor);background-color:var(--sapButton_Selected_Hover_Background);box-shadow:var(--fdButton_Hover_Shadow)}.fd-button.fd-button--toggled[aria-disabled=true],.fd-button.fd-button--toggled.is-disabled,.fd-button.fd-button--toggled:disabled{box-shadow:none}.fd-button--attention{color:var(--sapButton_Attention_TextColor);border-color:var(--sapButton_Attention_BorderColor);background-color:var(--sapButton_Attention_Background)}.fd-button--attention:hover,.fd-button--attention.is-hover{color:var(--sapButton_Attention_Hover_TextColor);border-color:var(--sapButton_Attention_Hover_BorderColor);background-color:var(--sapButton_Attention_Hover_Background);box-shadow:var(--fdButton_Attention_Hover_Shadow)}.fd-button--attention:active,.fd-button--attention.is-active,.fd-button--attention[aria-selected=true],.fd-button--attention.is-selected,.fd-button--attention[aria-pressed=true],.fd-button--attention.is-pressed{color:var(--sapButton_Attention_Active_TextColor);border-color:var(--sapButton_Attention_Active_BorderColor);background-color:var(--sapButton_Attention_Active_Background)}.fd-button--attention[aria-disabled=true],.fd-button--attention.is-disabled,.fd-button--attention:disabled{color:var(--sapButton_Attention_TextColor);border-color:var(--sapButton_Attention_BorderColor);background-color:var(--sapButton_Attention_Background)}.fd-button--attention[aria-disabled=true][aria-selected=true],.fd-button--attention[aria-disabled=true].is-selected,.fd-button--attention.is-disabled[aria-selected=true],.fd-button--attention.is-disabled.is-selected,.fd-button--attention:disabled[aria-selected=true],.fd-button--attention:disabled.is-selected{color:var(--sapButton_Attention_Active_TextColor);border-color:var(--sapButton_Attention_Active_BorderColor);background-color:var(--sapButton_Attention_Active_Background)}.fd-button--attention.fd-button--toggled{color:var(--sapButton_Attention_Selected_TextColor);border-color:var(--sapButton_Attention_Selected_BorderColor);background-color:var(--sapButton_Attention_Selected_Background)}.fd-button--attention.fd-button--toggled:hover,.fd-button--attention.fd-button--toggled.is-hover,.fd-button--attention.fd-button--toggled:active,.fd-button--attention.fd-button--toggled.is-active,.fd-button--attention.fd-button--toggled[aria-selected=true],.fd-button--attention.fd-button--toggled.is-selected,.fd-button--attention.fd-button--toggled[aria-pressed=true],.fd-button--attention.fd-button--toggled.is-pressed{color:var(--sapButton_Attention_Selected_TextColor);border-color:var(--sapButton_Attention_Selected_Hover_BorderColor);background-color:var(--sapButton_Attention_Selected_Hover_Background);box-shadow:var(--fdButton_Attention_Hover_Shadow)}.fd-button--attention.fd-button--toggled[aria-disabled=true],.fd-button--attention.fd-button--toggled.is-disabled,.fd-button--attention.fd-button--toggled:disabled{box-shadow:none}.fd-button--emphasized{font-weight:var(--sapButton_Emphasized_FontWeight);border-width:var(--fdButton_Emphasized_Border_Width);color:var(--sapButton_Emphasized_TextColor);border-color:var(--sapButton_Emphasized_BorderColor);background-color:var(--sapButton_Emphasized_Background)}.fd-button--emphasized:hover,.fd-button--emphasized.is-hover{color:var(--sapButton_Emphasized_Hover_TextColor);border-color:var(--sapButton_Emphasized_Hover_BorderColor);background-color:var(--sapButton_Emphasized_Hover_Background);box-shadow:none}.fd-button--emphasized:active,.fd-button--emphasized.is-active,.fd-button--emphasized[aria-selected=true],.fd-button--emphasized.is-selected,.fd-button--emphasized[aria-pressed=true],.fd-button--emphasized.is-pressed{color:var(--sapButton_Emphasized_Active_TextColor);border-color:var(--sapButton_Emphasized_Active_BorderColor);background-color:var(--sapButton_Emphasized_Active_Background)}.fd-button--emphasized[aria-disabled=true],.fd-button--emphasized.is-disabled,.fd-button--emphasized:disabled{color:var(--sapButton_Emphasized_TextColor);border-color:var(--sapButton_Emphasized_BorderColor);background-color:var(--sapButton_Emphasized_Background)}.fd-button--emphasized[aria-disabled=true][aria-selected=true],.fd-button--emphasized[aria-disabled=true].is-selected,.fd-button--emphasized.is-disabled[aria-selected=true],.fd-button--emphasized.is-disabled.is-selected,.fd-button--emphasized:disabled[aria-selected=true],.fd-button--emphasized:disabled.is-selected{color:var(--sapButton_Emphasized_Active_TextColor);border-color:var(--sapButton_Emphasized_Active_BorderColor);background-color:var(--sapButton_Emphasized_Active_Background)}.fd-button--emphasized.fd-button--toggled{color:var(--sapButton_Selected_TextColor);border-color:var(--sapButton_Selected_BorderColor);background-color:var(--sapButton_Selected_Background)}.fd-button--emphasized.fd-button--toggled:hover,.fd-button--emphasized.fd-button--toggled.is-hover,.fd-button--emphasized.fd-button--toggled:active,.fd-button--emphasized.fd-button--toggled.is-active,.fd-button--emphasized.fd-button--toggled[aria-selected=true],.fd-button--emphasized.fd-button--toggled.is-selected,.fd-button--emphasized.fd-button--toggled[aria-pressed=true],.fd-button--emphasized.fd-button--toggled.is-pressed{color:var(--sapButton_Selected_TextColor);border-color:var(--sapButton_Selected_Hover_BorderColor);background-color:var(--sapButton_Selected_Hover_Background);box-shadow:var(--fdButton_Hover_Shadow)}.fd-button--emphasized.fd-button--toggled[aria-disabled=true],.fd-button--emphasized.fd-button--toggled.is-disabled,.fd-button--emphasized.fd-button--toggled:disabled{box-shadow:none}.fd-button--emphasized:focus,.fd-button--emphasized.is-focus{z-index:5;outline-color:var(--sapContent_ContrastFocusColor)}.fd-button--emphasized:active,.fd-button--emphasized.is-active,.fd-button--emphasized[aria-selected=true],.fd-button--emphasized.is-selected,.fd-button--emphasized[aria-pressed=true],.fd-button--emphasized.is-pressed{outline:none}.fd-button--emphasized.fd-button--toggled:focus,.fd-button--emphasized.fd-button--toggled.is-focus{z-index:5;outline-color:var(--fdButton_Emphasized_Active_Outline)}.fd-button--emphasized.fd-button--toggled:active,.fd-button--emphasized.fd-button--toggled.is-active,.fd-button--emphasized.fd-button--toggled[aria-selected=true],.fd-button--emphasized.fd-button--toggled.is-selected,.fd-button--emphasized.fd-button--toggled[aria-pressed=true],.fd-button--emphasized.fd-button--toggled.is-pressed{outline:none}.fd-button--ghost{color:var(--sapButton_TextColor);border-color:var(--sapButton_BorderColor);background-color:var(--fdButton_Ghost_Background)}.fd-button--ghost:hover,.fd-button--ghost.is-hover{color:var(--sapButton_Hover_TextColor);border-color:var(--sapButton_Hover_BorderColor);background-color:var(--sapButton_Hover_Background);box-shadow:var(--fdButton_Hover_Shadow)}.fd-button--ghost:active,.fd-button--ghost.is-active,.fd-button--ghost[aria-selected=true],.fd-button--ghost.is-selected,.fd-button--ghost[aria-pressed=true],.fd-button--ghost.is-pressed{color:var(--sapButton_Active_TextColor);border-color:var(--sapButton_Active_BorderColor);background-color:var(--sapButton_Active_Background)}.fd-button--ghost[aria-disabled=true],.fd-button--ghost.is-disabled,.fd-button--ghost:disabled{color:var(--sapButton_TextColor);border-color:var(--sapButton_BorderColor);background-color:var(--fdButton_Ghost_Background)}.fd-button--ghost[aria-disabled=true][aria-selected=true],.fd-button--ghost[aria-disabled=true].is-selected,.fd-button--ghost.is-disabled[aria-selected=true],.fd-button--ghost.is-disabled.is-selected,.fd-button--ghost:disabled[aria-selected=true],.fd-button--ghost:disabled.is-selected{color:var(--sapButton_Active_TextColor);border-color:var(--sapButton_Active_BorderColor);background-color:var(--sapButton_Active_Background)}.fd-button--ghost.fd-button--toggled{color:var(--sapButton_Selected_TextColor);border-color:var(--sapButton_Selected_BorderColor);background-color:var(--sapButton_Selected_Background)}.fd-button--ghost.fd-button--toggled:hover,.fd-button--ghost.fd-button--toggled.is-hover,.fd-button--ghost.fd-button--toggled:active,.fd-button--ghost.fd-button--toggled.is-active,.fd-button--ghost.fd-button--toggled[aria-selected=true],.fd-button--ghost.fd-button--toggled.is-selected,.fd-button--ghost.fd-button--toggled[aria-pressed=true],.fd-button--ghost.fd-button--toggled.is-pressed{color:var(--sapButton_Selected_TextColor);border-color:var(--sapButton_Selected_Hover_BorderColor);background-color:var(--sapButton_Selected_Hover_Background);box-shadow:var(--fdButton_Hover_Shadow)}.fd-button--ghost.fd-button--toggled[aria-disabled=true],.fd-button--ghost.fd-button--toggled.is-disabled,.fd-button--ghost.fd-button--toggled:disabled{box-shadow:none}.fd-button--negative{color:var(--sapButton_Reject_TextColor);border-color:var(--sapButton_Reject_BorderColor);background-color:var(--sapButton_Reject_Background)}.fd-button--negative:hover,.fd-button--negative.is-hover{color:var(--sapButton_Reject_Hover_TextColor);border-color:var(--sapButton_Reject_Hover_BorderColor);background-color:var(--sapButton_Reject_Hover_Background);box-shadow:var(--fdButton_Negative_Hover_Shadow)}.fd-button--negative:active,.fd-button--negative.is-active,.fd-button--negative[aria-selected=true],.fd-button--negative.is-selected,.fd-button--negative[aria-pressed=true],.fd-button--negative.is-pressed{color:var(--sapButton_Reject_Active_TextColor);border-color:var(--sapButton_Reject_Active_BorderColor);background-color:var(--sapButton_Reject_Active_Background)}.fd-button--negative[aria-disabled=true],.fd-button--negative.is-disabled,.fd-button--negative:disabled{color:var(--sapButton_Reject_TextColor);border-color:var(--sapButton_Reject_BorderColor);background-color:var(--sapButton_Reject_Background)}.fd-button--negative[aria-disabled=true][aria-selected=true],.fd-button--negative[aria-disabled=true].is-selected,.fd-button--negative.is-disabled[aria-selected=true],.fd-button--negative.is-disabled.is-selected,.fd-button--negative:disabled[aria-selected=true],.fd-button--negative:disabled.is-selected{color:var(--sapButton_Reject_Active_TextColor);border-color:var(--sapButton_Reject_Active_BorderColor);background-color:var(--sapButton_Reject_Active_Background)}.fd-button--negative.fd-button--toggled{color:var(--sapButton_Reject_Selected_TextColor);border-color:var(--sapButton_Reject_Selected_BorderColor);background-color:var(--sapButton_Reject_Selected_Background)}.fd-button--negative.fd-button--toggled:hover,.fd-button--negative.fd-button--toggled.is-hover,.fd-button--negative.fd-button--toggled:active,.fd-button--negative.fd-button--toggled.is-active,.fd-button--negative.fd-button--toggled[aria-selected=true],.fd-button--negative.fd-button--toggled.is-selected,.fd-button--negative.fd-button--toggled[aria-pressed=true],.fd-button--negative.fd-button--toggled.is-pressed{color:var(--sapButton_Reject_Selected_TextColor);border-color:var(--sapButton_Reject_Selected_Hover_BorderColor);background-color:var(--sapButton_Reject_Selected_Hover_Background);box-shadow:var(--fdButton_Negative_Hover_Shadow)}.fd-button--negative.fd-button--toggled[aria-disabled=true],.fd-button--negative.fd-button--toggled.is-disabled,.fd-button--negative.fd-button--toggled:disabled{box-shadow:none}.fd-button--positive{color:var(--sapButton_Accept_TextColor);border-color:var(--sapButton_Accept_BorderColor);background-color:var(--sapButton_Accept_Background)}.fd-button--positive:hover,.fd-button--positive.is-hover{color:var(--sapButton_Accept_Hover_TextColor);border-color:var(--sapButton_Accept_Hover_BorderColor);background-color:var(--sapButton_Accept_Hover_Background);box-shadow:var(--fdButton_Positive_Hover_Shadow)}.fd-button--positive:active,.fd-button--positive.is-active,.fd-button--positive[aria-selected=true],.fd-button--positive.is-selected,.fd-button--positive[aria-pressed=true],.fd-button--positive.is-pressed{color:var(--sapButton_Accept_Active_TextColor);border-color:var(--sapButton_Accept_Active_BorderColor);background-color:var(--sapButton_Accept_Active_Background)}.fd-button--positive[aria-disabled=true],.fd-button--positive.is-disabled,.fd-button--positive:disabled{color:var(--sapButton_Accept_TextColor);border-color:var(--sapButton_Accept_BorderColor);background-color:var(--sapButton_Accept_Background)}.fd-button--positive[aria-disabled=true][aria-selected=true],.fd-button--positive[aria-disabled=true].is-selected,.fd-button--positive.is-disabled[aria-selected=true],.fd-button--positive.is-disabled.is-selected,.fd-button--positive:disabled[aria-selected=true],.fd-button--positive:disabled.is-selected{color:var(--sapButton_Accept_Active_TextColor);border-color:var(--sapButton_Accept_Active_BorderColor);background-color:var(--sapButton_Accept_Active_Background)}.fd-button--positive.fd-button--toggled{color:var(--sapButton_Accept_Selected_TextColor);border-color:var(--sapButton_Accept_Selected_BorderColor);background-color:var(--sapButton_Accept_Selected_Background)}.fd-button--positive.fd-button--toggled:hover,.fd-button--positive.fd-button--toggled.is-hover,.fd-button--positive.fd-button--toggled:active,.fd-button--positive.fd-button--toggled.is-active,.fd-button--positive.fd-button--toggled[aria-selected=true],.fd-button--positive.fd-button--toggled.is-selected,.fd-button--positive.fd-button--toggled[aria-pressed=true],.fd-button--positive.fd-button--toggled.is-pressed{color:var(--sapButton_Accept_Selected_TextColor);border-color:var(--sapButton_Accept_Selected_Hover_BorderColor);background-color:var(--sapButton_Accept_Selected_Hover_Background);box-shadow:var(--fdButton_Positive_Hover_Shadow)}.fd-button--positive.fd-button--toggled[aria-disabled=true],.fd-button--positive.fd-button--toggled.is-disabled,.fd-button--positive.fd-button--toggled:disabled{box-shadow:none}.fd-button--transparent{color:var(--sapButton_Lite_TextColor);border-color:var(--sapButton_Lite_BorderColor);background-color:var(--sapButton_Lite_Background)}.fd-button--transparent:hover,.fd-button--transparent.is-hover{color:var(--sapButton_Lite_Hover_TextColor);border-color:var(--sapButton_Lite_Hover_BorderColor);background-color:var(--sapButton_Lite_Hover_Background);box-shadow:var(--fdButton_Hover_Shadow)}.fd-button--transparent:active,.fd-button--transparent.is-active,.fd-button--transparent[aria-selected=true],.fd-button--transparent.is-selected,.fd-button--transparent[aria-pressed=true],.fd-button--transparent.is-pressed{color:var(--sapButton_Active_TextColor);border-color:var(--sapButton_Lite_Active_BorderColor);background-color:var(--sapButton_Lite_Active_Background)}.fd-button--transparent[aria-disabled=true],.fd-button--transparent.is-disabled,.fd-button--transparent:disabled{color:var(--sapButton_Lite_TextColor);border-color:var(--sapButton_Lite_BorderColor);background-color:var(--sapButton_Lite_Background)}.fd-button--transparent[aria-disabled=true][aria-selected=true],.fd-button--transparent[aria-disabled=true].is-selected,.fd-button--transparent.is-disabled[aria-selected=true],.fd-button--transparent.is-disabled.is-selected,.fd-button--transparent:disabled[aria-selected=true],.fd-button--transparent:disabled.is-selected{color:var(--sapButton_Active_TextColor);border-color:var(--sapButton_Lite_Active_BorderColor);background-color:var(--sapButton_Lite_Active_Background)}.fd-button--transparent.fd-button--toggled{color:var(--sapButton_Selected_TextColor);border-color:var(--sapButton_Selected_BorderColor);background-color:var(--sapButton_Selected_Background)}.fd-button--transparent.fd-button--toggled:hover,.fd-button--transparent.fd-button--toggled.is-hover,.fd-button--transparent.fd-button--toggled:active,.fd-button--transparent.fd-button--toggled.is-active,.fd-button--transparent.fd-button--toggled[aria-selected=true],.fd-button--transparent.fd-button--toggled.is-selected,.fd-button--transparent.fd-button--toggled[aria-pressed=true],.fd-button--transparent.fd-button--toggled.is-pressed{color:var(--sapButton_Selected_TextColor);border-color:var(--sapButton_Selected_Hover_BorderColor);background-color:var(--sapButton_Selected_Hover_Background);box-shadow:var(--fdButton_Hover_Shadow)}.fd-button--transparent.fd-button--toggled[aria-disabled=true],.fd-button--transparent.fd-button--toggled.is-disabled,.fd-button--transparent.fd-button--toggled:disabled{box-shadow:none}/*!\n * Fundamental Library Styles v0.24.1-rc.1\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-flexible-column-layout{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;flex-direction:row}.fd-flexible-column-layout:before,.fd-flexible-column-layout:after{box-sizing:inherit;font-size:inherit}.fd-flexible-column-layout__separator{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;justify-content:center;align-items:center;position:relative;width:1rem;min-width:1rem;background-color:var(--fdFlexibleColumnLayout_Background_Solid)}.fd-flexible-column-layout__separator:before,.fd-flexible-column-layout__separator:after{box-sizing:inherit;font-size:inherit}.fd-flexible-column-layout__separator:after,.fd-flexible-column-layout__separator:before{content:\"\";display:block;width:.0625rem;height:4rem;transition:all .1s ease-in;position:absolute;left:50%;transform:translate(-50%)}.fd-flexible-column-layout__separator:before{bottom:calc(50% + 1rem);background-image:linear-gradient(to top,var(--fdFlexibleColumnLayout_Toggle_Image_Color),transparent)}.fd-flexible-column-layout__separator:after{top:calc(50% + 1rem);background-image:linear-gradient(to bottom,var(--fdFlexibleColumnLayout_Toggle_Image_Color),transparent)}.fd-flexible-column-layout__separator:hover:after,.fd-flexible-column-layout__separator:hover:before,.fd-flexible-column-layout__separator.is-hover:after,.fd-flexible-column-layout__separator.is-hover:before{height:7rem}.fd-flexible-column-layout .fd-flexible-column-layout__button{height:2rem;width:1.5rem;min-width:1.5rem;justify-content:center;padding:0;z-index:2;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.fd-flexible-column-layout__column{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;min-width:20rem;border-left:var(--fdFlexibleColumnLayout_Border);border-right:var(--fdFlexibleColumnLayout_Border);transition:width .56s cubic-bezier(.1,0,.05,1),visibility .56s ease-in}.fd-flexible-column-layout__column:before,.fd-flexible-column-layout__column:after{box-sizing:inherit;font-size:inherit}.fd-flexible-column-layout__column:first-child{margin-left:0;border-left:none}.fd-flexible-column-layout__column:last-child{margin-bottom:0;margin-right:0;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"] }]
-        }], propDecorators: { startColumn: [{
+            args: [{ selector: 'fd-flexible-column-layout', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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-container *ngTemplateOutlet=\"startColumn\"></ng-container>\n    </div>\n    <!-- Left Separator -->\n    <div *ngIf=\"_leftColumnSeparator\" class=\"fd-flexible-column-layout__separator\">\n        <button\n            fd-button\n            [compact]=\"true\"\n            fdType=\"transparent\"\n            class=\"fd-flexible-column-layout__button\"\n            ariaLabel=\"Expand\"\n            (click)=\"_handleLeftColumnSeparatorClick()\"\n        >\n            <i\n                [class]=\"_leftColumnSeparator ? 'sap-icon--slim-arrow-' + _leftColumnSeparator : ''\"\n                role=\"presentation\"\n            ></i>\n        </button>\n    </div>\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-container *ngTemplateOutlet=\"midColumn\"></ng-container>\n    </div>\n    <!-- Right Separator -->\n    <div *ngIf=\"_rightColumnSeparator\" class=\"fd-flexible-column-layout__separator\">\n        <button\n            fd-button\n            [compact]=\"true\"\n            fdType=\"transparent\"\n            class=\"fd-flexible-column-layout__button\"\n            ariaLabel=\"Expand\"\n            (click)=\"_handleRightColumnSeparatorClick()\"\n        >\n            <i\n                [class]=\"_rightColumnSeparator ? 'sap-icon--slim-arrow-' + _rightColumnSeparator : ''\"\n                role=\"presentation\"\n            ></i>\n        </button>\n    </div>\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-container *ngTemplateOutlet=\"endColumn\"></ng-container>\n    </div>\n</div>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.1-rc.1\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-flexible-column-layout{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;flex-direction:row}.fd-flexible-column-layout:before,.fd-flexible-column-layout:after{box-sizing:inherit;font-size:inherit}.fd-flexible-column-layout__separator{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;justify-content:center;align-items:center;position:relative;width:1rem;min-width:1rem;background-color:var(--fdFlexibleColumnLayout_Background_Solid)}.fd-flexible-column-layout__separator:before,.fd-flexible-column-layout__separator:after{box-sizing:inherit;font-size:inherit}.fd-flexible-column-layout__separator:after,.fd-flexible-column-layout__separator:before{content:\"\";display:block;width:.0625rem;height:4rem;transition:all .1s ease-in;position:absolute;left:50%;transform:translate(-50%)}.fd-flexible-column-layout__separator:before{bottom:calc(50% + 1rem);background-image:linear-gradient(to top,var(--fdFlexibleColumnLayout_Toggle_Image_Color),transparent)}.fd-flexible-column-layout__separator:after{top:calc(50% + 1rem);background-image:linear-gradient(to bottom,var(--fdFlexibleColumnLayout_Toggle_Image_Color),transparent)}.fd-flexible-column-layout__separator:hover:after,.fd-flexible-column-layout__separator:hover:before,.fd-flexible-column-layout__separator.is-hover:after,.fd-flexible-column-layout__separator.is-hover:before{height:7rem}.fd-flexible-column-layout .fd-flexible-column-layout__button{height:2rem;width:1.5rem;min-width:1.5rem;justify-content:center;padding:0;z-index:2;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.fd-flexible-column-layout__column{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;min-width:20rem;border-left:var(--fdFlexibleColumnLayout_Border);border-right:var(--fdFlexibleColumnLayout_Border);transition:width .56s cubic-bezier(.1,0,.05,1),visibility .56s ease-in}.fd-flexible-column-layout__column:before,.fd-flexible-column-layout__column:after{box-sizing:inherit;font-size:inherit}.fd-flexible-column-layout__column:first-child{margin-left:0;border-left:none}.fd-flexible-column-layout__column:last-child{margin-bottom:0;margin-right:0;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"] }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [FD_FLEXIBLE_LAYOUT_CONFIG]
+                    }] }];
+    }, propDecorators: { startColumn: [{
                 type: ContentChild,
                 args: ['startColumn']
             }], midColumn: [{
@@ -360,6 +377,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                 type: Input
             }], layout: [{
                 type: Input
+            }], layoutDefinitions: [{
+                type: Input
             }], layoutChange: [{
                 type: Output
             }], smBreakPoint: [{
@@ -370,17 +389,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                 type: Input
             }] } });
 
+/**
+ * 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.
+ */
 class FlexibleColumnLayoutModule {
+    /**
+     * Allows configuring module on a global level with custom configuration.
+     * @param config User's custom configuration.
+     */
+    static withConfig(config) {
+        config = merge(cloneDeep(DEFAULT_FLEXIBLE_LAYOUT_CONFIG), cloneDeep(config));
+        return {
+            ngModule: FlexibleColumnLayoutModule,
+            providers: [
+                {
+                    provide: FD_FLEXIBLE_LAYOUT_CONFIG,
+                    useValue: config
+                }
+            ]
+        };
+    }
 }
 FlexibleColumnLayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: FlexibleColumnLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FlexibleColumnLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: FlexibleColumnLayoutModule, declarations: [FlexibleColumnLayoutComponent], imports: [CommonModule], exports: [FlexibleColumnLayoutComponent] });
-FlexibleColumnLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: FlexibleColumnLayoutModule, imports: [[CommonModule]] });
+FlexibleColumnLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: FlexibleColumnLayoutModule, declarations: [FlexibleColumnLayoutComponent], imports: [CommonModule, ButtonModule], exports: [FlexibleColumnLayoutComponent] });
+FlexibleColumnLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: FlexibleColumnLayoutModule, providers: [
+        {
+            provide: FD_FLEXIBLE_LAYOUT_CONFIG,
+            useValue: DEFAULT_FLEXIBLE_LAYOUT_CONFIG
+        }
+    ], imports: [[CommonModule, ButtonModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: FlexibleColumnLayoutModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [FlexibleColumnLayoutComponent],
-                    imports: [CommonModule],
-                    exports: [FlexibleColumnLayoutComponent]
+                    imports: [CommonModule, ButtonModule],
+                    exports: [FlexibleColumnLayoutComponent],
+                    providers: [
+                        {
+                            provide: FD_FLEXIBLE_LAYOUT_CONFIG,
+                            useValue: DEFAULT_FLEXIBLE_LAYOUT_CONFIG
+                        }
+                    ]
                 }]
         }] });
 
@@ -388,5 +441,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { FlexibleColumnLayoutComponent, FlexibleColumnLayoutModule };
+export { DEFAULT_FLEXIBLE_LAYOUT_CONFIG, 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 };
 //# sourceMappingURL=fundamental-ngx-core-flexible-column-layout.mjs.map

package/flexible-column-layout/fesm2015/fundamental-ngx-core-flexible-column-layout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"fundamental-ngx-core-flexible-column-layout.mjs","sources":["../../../../../libs/core/src/lib/flexible-column-layout/constants.ts","../../../../../libs/core/src/lib/flexible-column-layout/flexible-column-layout.component.ts","../../../../../libs/core/src/lib/flexible-column-layout/flexible-column-layout.component.html","../../../../../libs/core/src/lib/flexible-column-layout/flexible-column-layout.module.ts","../../../../../libs/core/src/lib/flexible-column-layout/fundamental-ngx-core-flexible-column-layout.ts"],"sourcesContent":["export const ONE_COLUMN_START_FULL_SCREEN = 'OneColumnStartFullScreen';\nexport const ONE_COLUMN_MID_FULL_SCREEN = 'OneColumnMidFullScreen';\nexport const ONE_COLUMN_END_FULL_SCREEN = 'OneColumnEndFullScreen';\nexport const TWO_COLUMNS_START_EXPANDED = 'TwoColumnsStartExpanded';\nexport const TWO_COLUMNS_MID_EXPANDED = 'TwoColumnsMidExpanded';\nexport const TWO_COLUMNS_END_EXPANDED = 'TwoColumnsEndExpanded';\nexport const THREE_COLUMNS_MID_EXPANDED = 'ThreeColumnsMidExpanded';\nexport const THREE_COLUMNS_END_EXPANDED = 'ThreeColumnsEndExpanded';\nexport const THREE_COLUMNS_START_MINIMIZED = 'ThreeColumnsStartMinimized';\nexport const THREE_COLUMNS_END_MINIMIZED = 'ThreeColumnsEndMinimized';\n\nexport const SM_SCREEN_SIZE = 'sm';\nexport const MD_SCREEN_SIZE = 'md';\nexport const LG_SCREEN_SIZE = 'lg';\n\nexport type ScreenSize = 'sm' | 'md' | 'lg';\n\nexport type FlexibleColumnLayout =\n    | 'OneColumnStartFullScreen'\n    | 'OneColumnMidFullScreen'\n    | 'OneColumnEndFullScreen'\n    | 'TwoColumnsStartExpanded'\n    | 'TwoColumnsMidExpanded'\n    | 'TwoColumnsEndExpanded'\n    | 'ThreeColumnsMidExpanded'\n    | 'ThreeColumnsEndExpanded'\n    | 'ThreeColumnsStartMinimized'\n    | 'ThreeColumnsEndMinimized';\n\nexport type ColumnSeparatorValue = 'right' | 'left' | null;\n\nexport interface FlexibleColumnSettings {\n    start: number;\n    mid: number;\n    end: number;\n}\n","import {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    ContentChild,\n    Component,\n    EventEmitter,\n    Input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    Output,\n    SimpleChanges,\n    TemplateRef\n} from '@angular/core';\nimport { fromEvent, Subscription } from 'rxjs';\nimport { debounceTime } from 'rxjs/operators';\nimport {\n    ONE_COLUMN_START_FULL_SCREEN,\n    ONE_COLUMN_MID_FULL_SCREEN,\n    ONE_COLUMN_END_FULL_SCREEN,\n    TWO_COLUMNS_START_EXPANDED,\n    TWO_COLUMNS_MID_EXPANDED,\n    TWO_COLUMNS_END_EXPANDED,\n    THREE_COLUMNS_MID_EXPANDED,\n    THREE_COLUMNS_END_EXPANDED,\n    THREE_COLUMNS_START_MINIMIZED,\n    THREE_COLUMNS_END_MINIMIZED,\n    SM_SCREEN_SIZE,\n    MD_SCREEN_SIZE,\n    LG_SCREEN_SIZE,\n    ScreenSize,\n    FlexibleColumnLayout,\n    FlexibleColumnSettings,\n    ColumnSeparatorValue\n} from './constants';\n\n@Component({\n    selector: 'fd-flexible-column-layout',\n    templateUrl: './flexible-column-layout.component.html',\n    styleUrls: ['./flexible-column-layout.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class FlexibleColumnLayoutComponent implements AfterViewInit, OnChanges, OnDestroy, OnInit {\n    /**\n     * the template that provides the content of the first/start/left column\n     */\n    @ContentChild('startColumn')\n    startColumn: TemplateRef<any>;\n\n    /**\n     * the template that provides the content of the middle column\n     */\n    @ContentChild('midColumn')\n    midColumn: TemplateRef<any>;\n\n    /**\n     * the template that provides the content of the last/end/right column\n     */\n    @ContentChild('endColumn')\n    endColumn: TemplateRef<any>;\n\n    /**\n     * the background design of the component\n     * Options include: 'solid' | 'translucent' | 'transparent'\n     * The default is set to 'solid'\n     */\n    @Input()\n    backgroundDesign: 'solid' | 'translucent' | 'transparent' = 'solid';\n\n    /**\n     * the layout of the component\n     * Options include: 'OneColumnStartFullScreen' | 'OneColumnMidFullScreen' |\n     * 'OneColumnEndFullScreen' | 'TwoColumnsStartExpanded' | 'TwoColumnsMidExpanded' |\n     * 'TwoColumnsEndExpanded' | 'ThreeColumnsMidExpanded' | 'ThreeColumnsEndExpanded' |\n     * 'ThreeColumnsStartMinimized' | 'ThreeColumnsEndMinimized'\n     */\n    @Input()\n    layout: FlexibleColumnLayout = ONE_COLUMN_START_FULL_SCREEN;\n\n    /**\n     * the event emitted on layout value cchange\n     */\n    @Output()\n    layoutChange: EventEmitter<FlexibleColumnLayout> = new EventEmitter<FlexibleColumnLayout>();\n\n    /**\n     * user defined break point for SM screens\n     * the default (Fiori 3) value is 960\n     */\n    @Input()\n    smBreakPoint = 960;\n\n    /**\n     * user defined break point for LG screens\n     * the default (Fiori 3) value is 1280\n     */\n    @Input()\n    lgBreakPoint = 1280;\n\n    /**\n     * user defined onResize function\n     */\n    @Input()\n    customOnResizeFunction: () => void;\n\n    /**\n     * left column separator value (between start and middle columns)\n     * that specifies the direction of the arrow and\n     * if the separator is visible\n     * Options include: 'left', 'right' and null\n     */\n    _leftColumnSeparator: ColumnSeparatorValue = null;\n\n    /**\n     * right column separator value (between middle and end columns)\n     * that speccifies the direction of the arrow and\n     * if the separator is visible\n     * Options include: 'left', 'right' and null\n     */\n    _rightColumnSeparator: ColumnSeparatorValue = null;\n\n    /**\n     * @hidden\n     * allows to keep track of the previos layout\n     * so we can go back to it on window resize\n     */\n    private _previousLayout: FlexibleColumnLayout = this.layout;\n\n    /** @hidden */\n    private _screenSize: ScreenSize = LG_SCREEN_SIZE;\n\n    /** @hidden */\n    private _subscriptions = new Subscription();\n\n    /**\n     * @hidden\n     * mappting of the layout name and the column layout in %\n     */\n    private _layouts: { [key: string]: FlexibleColumnSettings } = {\n        OneColumnStartFullScreen: { start: 100, mid: 0, end: 0 },\n        OneColumnMidFullScreen: { start: 0, mid: 100, end: 0 },\n        OneColumnEndFullScreen: { start: 0, mid: 0, end: 100 },\n        TwoColumnsStartExpanded: { start: 67, mid: 33, end: 0 },\n        TwoColumnsMidExpanded: { start: 33, mid: 67, end: 0 },\n        TwoColumnsEndExpanded: { start: 0, mid: 33, end: 67 },\n        ThreeColumnsMidExpanded: { start: 25, mid: 50, end: 25 },\n        ThreeColumnsEndExpanded: { start: 25, mid: 25, end: 50 },\n        ThreeColumnsStartMinimized: { start: 0, mid: 67, end: 33 },\n        ThreeColumnsEndMinimized: { start: 33, mid: 67, end: 0 }\n    };\n\n    /**\n     * the column layout representing the distribution of the width\n     * between the first (start), the middle and the last(end) column\n     */\n    _columnLayout: { start: number; mid: number; end: number } = this._layouts[this.layout];\n\n    /**\n     * @hidden\n     * set to 'true' if the layout is changed to fullscreen on window resize\n     * this will allow the layout to switch to previous mode on SM->MD transition\n     * if a layout is set by the user to fullscreen, it should persist on window resize\n     */\n    private _responsiveFullscreenLayout = false;\n\n    /**\n     * function that handles the click events on the left separator\n     * and updates the layout\n     */\n    _handleLeftColumnSeparatorClick(): void {\n        switch (this.layout) {\n            case TWO_COLUMNS_START_EXPANDED:\n                this._updateCurrentLayout(TWO_COLUMNS_MID_EXPANDED);\n                break;\n            case TWO_COLUMNS_MID_EXPANDED:\n                this._updateCurrentLayout(TWO_COLUMNS_START_EXPANDED);\n                break;\n            case THREE_COLUMNS_MID_EXPANDED:\n                this._updateCurrentLayout(THREE_COLUMNS_END_MINIMIZED);\n                break;\n            case THREE_COLUMNS_END_MINIMIZED:\n                this._updateCurrentLayout(TWO_COLUMNS_START_EXPANDED);\n                break;\n            case THREE_COLUMNS_START_MINIMIZED:\n                this._updateCurrentLayout(THREE_COLUMNS_END_MINIMIZED);\n                break;\n        }\n    }\n\n    /**\n     * function that handles the click events on the right separator\n     * and updates the layout\n     */\n    _handleRightColumnSeparatorClick(): void {\n        switch (this.layout) {\n            case TWO_COLUMNS_END_EXPANDED:\n                this._updateCurrentLayout(THREE_COLUMNS_START_MINIMIZED);\n                break;\n            case THREE_COLUMNS_MID_EXPANDED:\n                this._updateCurrentLayout(THREE_COLUMNS_END_EXPANDED);\n                break;\n            case THREE_COLUMNS_END_EXPANDED:\n                this._updateCurrentLayout(THREE_COLUMNS_MID_EXPANDED);\n                break;\n            case THREE_COLUMNS_END_MINIMIZED:\n                this._updateCurrentLayout(THREE_COLUMNS_MID_EXPANDED);\n                break;\n            case THREE_COLUMNS_START_MINIMIZED:\n                this._updateCurrentLayout(TWO_COLUMNS_END_EXPANDED);\n                break;\n        }\n    }\n\n    /**\n     * @hidden\n     * function to determine the screen size in 'sm' | 'md' | 'lg' | 'xl'\n     * format depending on the window size in px\n     */\n    private _getScreenSize(size: number): ScreenSize {\n        if (size > this.lgBreakPoint) {\n            return LG_SCREEN_SIZE;\n        } else if (size > this.smBreakPoint && size <= this.lgBreakPoint) {\n            return MD_SCREEN_SIZE;\n        } else {\n            return SM_SCREEN_SIZE;\n        }\n    }\n\n    /**\n     * @hidden\n     * handles the change of the layouts on reaching a break point\n     */\n    private _responsiveLayoutChangeHandler(): void {\n        this._screenSize = this._getScreenSize(window.innerWidth);\n\n        switch (this.layout) {\n            case ONE_COLUMN_MID_FULL_SCREEN:\n            case ONE_COLUMN_END_FULL_SCREEN: {\n                if (\n                    this._screenSize !== SM_SCREEN_SIZE &&\n                    this.layout !== this._previousLayout &&\n                    this._responsiveFullscreenLayout\n                ) {\n                    this._responsiveFullscreenLayout = false;\n                    this._updateCurrentLayout(this._previousLayout);\n                }\n                break;\n            }\n\n            case TWO_COLUMNS_START_EXPANDED:\n            case TWO_COLUMNS_MID_EXPANDED: {\n                if (this._screenSize === SM_SCREEN_SIZE) {\n                    this._responsiveFullscreenLayout = true;\n                    this._updateCurrentLayout(ONE_COLUMN_MID_FULL_SCREEN);\n                }\n                break;\n            }\n\n            case TWO_COLUMNS_END_EXPANDED: {\n                if (this._screenSize === SM_SCREEN_SIZE) {\n                    this._responsiveFullscreenLayout = true;\n                    this._updateCurrentLayout(ONE_COLUMN_END_FULL_SCREEN);\n                }\n\n                if (this._screenSize === LG_SCREEN_SIZE) {\n                    this._updateCurrentLayout(THREE_COLUMNS_END_EXPANDED);\n                }\n                break;\n            }\n\n            case THREE_COLUMNS_START_MINIMIZED: {\n                if (this._screenSize === SM_SCREEN_SIZE) {\n                    this._responsiveFullscreenLayout = true;\n                    this._updateCurrentLayout(ONE_COLUMN_END_FULL_SCREEN);\n                }\n\n                if (this._screenSize === LG_SCREEN_SIZE) {\n                    this._updateCurrentLayout(THREE_COLUMNS_MID_EXPANDED);\n                }\n                break;\n            }\n\n            case THREE_COLUMNS_END_MINIMIZED: {\n                if (this._screenSize === SM_SCREEN_SIZE) {\n                    this._responsiveFullscreenLayout = true;\n                    this._updateCurrentLayout(ONE_COLUMN_END_FULL_SCREEN);\n                }\n\n                if (this._screenSize === LG_SCREEN_SIZE) {\n                    this._updateCurrentLayout(THREE_COLUMNS_END_MINIMIZED);\n                }\n                break;\n            }\n\n            case THREE_COLUMNS_MID_EXPANDED: {\n                if (this._screenSize === SM_SCREEN_SIZE) {\n                    this._responsiveFullscreenLayout = true;\n                    this._updateCurrentLayout(ONE_COLUMN_END_FULL_SCREEN);\n                }\n\n                if (this._screenSize === MD_SCREEN_SIZE) {\n                    this._updateCurrentLayout(THREE_COLUMNS_START_MINIMIZED);\n                }\n                break;\n            }\n\n            case THREE_COLUMNS_END_EXPANDED: {\n                if (this._screenSize === SM_SCREEN_SIZE) {\n                    this._responsiveFullscreenLayout = true;\n                    this._updateCurrentLayout(ONE_COLUMN_END_FULL_SCREEN);\n                }\n\n                if (this._screenSize === MD_SCREEN_SIZE) {\n                    this._updateCurrentLayout(TWO_COLUMNS_END_EXPANDED);\n                }\n                break;\n            }\n        }\n    }\n\n    /**\n     * @hidden\n     * Listen on window resize and update the layout\n     * call user defined custom function if provided\n     */\n    private _listenOnWindowResize(): void {\n        if (this.customOnResizeFunction) {\n            this.customOnResizeFunction();\n        } else {\n            this._subscriptions.add(\n                fromEvent(window, 'resize')\n                    .pipe(debounceTime(100))\n                    .subscribe(() => this._responsiveLayoutChangeHandler())\n            );\n        }\n    }\n\n    /**\n     * @hidden\n     * determines if the left separator should be visible\n     * and the value that will specify the direction of the arrow\n     */\n    private _getLeftColumnSeparatorValue(): ColumnSeparatorValue {\n        switch (this.layout) {\n            case TWO_COLUMNS_START_EXPANDED:\n                return 'left';\n            case TWO_COLUMNS_MID_EXPANDED:\n            case THREE_COLUMNS_MID_EXPANDED:\n            case THREE_COLUMNS_END_MINIMIZED:\n            case THREE_COLUMNS_START_MINIMIZED:\n                return 'right';\n            default:\n                return null;\n        }\n    }\n\n    /**\n     * @hidden\n     * determines if the right separator should be visible\n     * and the value that will specify the direction of the arrow\n     */\n    private _getRightColumnSeparatorValue(): ColumnSeparatorValue {\n        switch (this.layout) {\n            case TWO_COLUMNS_END_EXPANDED:\n            case THREE_COLUMNS_END_EXPANDED:\n                return 'right';\n            case THREE_COLUMNS_MID_EXPANDED:\n            case THREE_COLUMNS_END_MINIMIZED:\n            case THREE_COLUMNS_START_MINIMIZED:\n                return 'left';\n            default:\n                return null;\n        }\n    }\n\n    /**\n     * @hidden\n     * updates the column layout based on the layout name\n     * makes a call to determine the new value of the left separator\n     * makes a call to determine the new value of the right separator\n     */\n    private _updateColumnLayoutParameters(): void {\n        this._columnLayout = this._layouts[this.layout];\n        this._leftColumnSeparator = this._getLeftColumnSeparatorValue();\n        this._rightColumnSeparator = this._getRightColumnSeparatorValue();\n    }\n\n    /**\n     * @hidden\n     * updates the layout\n     * emits an event\n     * makes a call to the helper function that will update the column layout and the separators\n     */\n    private _updateCurrentLayout(newLayout: FlexibleColumnLayout): void {\n        this.layout = newLayout;\n        this._updateColumnLayoutParameters();\n\n        // setTimeout fixes \"ExpressionChangedAfterItHasBeenCheckedError\"\n        setTimeout(() => {\n            this.layoutChange.emit(this.layout);\n        });\n    }\n\n    /** @hidden */\n    ngOnInit(): void {\n        this._updateColumnLayoutParameters();\n        this._previousLayout = this.layout;\n    }\n\n    /** @hidden */\n    ngAfterViewInit(): void {\n        this._screenSize = this._getScreenSize(window.innerWidth);\n        this._listenOnWindowResize();\n    }\n\n    /** @hidden */\n    ngOnChanges(changes: SimpleChanges): void {\n        this._updateColumnLayoutParameters();\n\n        if (changes && changes.layout.previousValue) {\n            this._previousLayout = changes.layout.previousValue;\n        }\n\n        if (changes && changes.layout) {\n            this._responsiveLayoutChangeHandler();\n        }\n    }\n\n    /** @hidden */\n    ngOnDestroy(): void {\n        this._subscriptions.unsubscribe();\n    }\n}\n","<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-container *ngTemplateOutlet=\"startColumn\"></ng-container>\n    </div>\n    <!-- Left Separator -->\n    <div *ngIf=\"_leftColumnSeparator\" class=\"fd-flexible-column-layout__separator\">\n        <button\n            class=\"fd-button fd-button--compact fd-button--transparent fd-flexible-column-layout__button\"\n            aria-label=\"Expand\"\n            (click)=\"_handleLeftColumnSeparatorClick()\"\n        >\n            <i\n                [class]=\"_leftColumnSeparator ? 'sap-icon--slim-arrow-' + _leftColumnSeparator : ''\"\n                role=\"presentation\"\n            ></i>\n        </button>\n    </div>\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-container *ngTemplateOutlet=\"midColumn\"></ng-container>\n    </div>\n    <!-- Right Separator -->\n    <div *ngIf=\"_rightColumnSeparator\" class=\"fd-flexible-column-layout__separator\">\n        <button\n            class=\"fd-button fd-button--compact fd-button--transparent fd-flexible-column-layout__button\"\n            aria-label=\"Expand\"\n            (click)=\"_handleRightColumnSeparatorClick()\"\n        >\n            <i\n                [class]=\"_rightColumnSeparator ? 'sap-icon--slim-arrow-' + _rightColumnSeparator : ''\"\n                role=\"presentation\"\n            ></i>\n        </button>\n    </div>\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-container *ngTemplateOutlet=\"endColumn\"></ng-container>\n    </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FlexibleColumnLayoutComponent } from './flexible-column-layout.component';\n\n@NgModule({\n    declarations: [FlexibleColumnLayoutComponent],\n    imports: [CommonModule],\n    exports: [FlexibleColumnLayoutComponent]\n})\nexport class FlexibleColumnLayoutModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"fundamental-ngx-core-flexible-column-layout.mjs","sources":["../../../../../libs/core/src/lib/flexible-column-layout/constants.ts","../../../../../libs/core/src/lib/flexible-column-layout/flexible-column-layout.component.ts","../../../../../libs/core/src/lib/flexible-column-layout/flexible-column-layout.component.html","../../../../../libs/core/src/lib/flexible-column-layout/flexible-column-layout.module.ts","../../../../../libs/core/src/lib/flexible-column-layout/fundamental-ngx-core-flexible-column-layout.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\n\nexport const ONE_COLUMN_START_FULL_SCREEN = 'OneColumnStartFullScreen';\nexport const ONE_COLUMN_MID_FULL_SCREEN = 'OneColumnMidFullScreen';\nexport const ONE_COLUMN_END_FULL_SCREEN = 'OneColumnEndFullScreen';\nexport const TWO_COLUMNS_START_EXPANDED = 'TwoColumnsStartExpanded';\nexport const TWO_COLUMNS_MID_EXPANDED = 'TwoColumnsMidExpanded';\nexport const TWO_COLUMNS_END_EXPANDED = 'TwoColumnsEndExpanded';\nexport const THREE_COLUMNS_MID_EXPANDED = 'ThreeColumnsMidExpanded';\nexport const THREE_COLUMNS_END_EXPANDED = 'ThreeColumnsEndExpanded';\nexport const THREE_COLUMNS_START_MINIMIZED = 'ThreeColumnsStartMinimized';\nexport const THREE_COLUMNS_END_MINIMIZED = 'ThreeColumnsEndMinimized';\n\nexport const SM_SCREEN_SIZE = 'sm';\nexport const MD_SCREEN_SIZE = 'md';\nexport const LG_SCREEN_SIZE = 'lg';\n\nexport type ScreenSize = 'sm' | 'md' | 'lg';\n\nexport type FlexibleColumnLayout =\n    | 'OneColumnStartFullScreen'\n    | 'OneColumnMidFullScreen'\n    | 'OneColumnEndFullScreen'\n    | 'TwoColumnsStartExpanded'\n    | 'TwoColumnsMidExpanded'\n    | 'TwoColumnsEndExpanded'\n    | 'ThreeColumnsMidExpanded'\n    | 'ThreeColumnsEndExpanded'\n    | 'ThreeColumnsStartMinimized'\n    | 'ThreeColumnsEndMinimized';\n\nexport type ColumnSeparatorValue = 'right' | 'left' | null;\n\nexport interface FlexibleColumnSettings {\n    start: number;\n    mid: number;\n    end: number;\n}\n\nexport type FlexibleColumnLayoutDefinition = { [key in FlexibleColumnLayout]: FlexibleColumnSettings };\n\nexport interface FlexibleLayoutConfig {\n    layouts: FlexibleColumnLayoutDefinition;\n}\n\nexport const DEFAULT_FLEXIBLE_LAYOUT_CONFIG: FlexibleLayoutConfig = {\n    layouts: {\n        OneColumnStartFullScreen: { start: 100, mid: 0, end: 0 },\n        OneColumnMidFullScreen: { start: 0, mid: 100, end: 0 },\n        OneColumnEndFullScreen: { start: 0, mid: 0, end: 100 },\n        TwoColumnsStartExpanded: { start: 67, mid: 33, end: 0 },\n        TwoColumnsMidExpanded: { start: 33, mid: 67, end: 0 },\n        TwoColumnsEndExpanded: { start: 0, mid: 33, end: 67 },\n        ThreeColumnsMidExpanded: { start: 25, mid: 50, end: 25 },\n        ThreeColumnsEndExpanded: { start: 25, mid: 25, end: 50 },\n        ThreeColumnsStartMinimized: { start: 0, mid: 67, end: 33 },\n        ThreeColumnsEndMinimized: { start: 33, mid: 67, end: 0 }\n    }\n};\n\nexport const FD_FLEXIBLE_LAYOUT_CONFIG = new InjectionToken<FlexibleLayoutConfig>('FdFlexibleLayoutConfig');\n","import {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    Component,\n    ContentChild,\n    EventEmitter,\n    Inject,\n    Input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    Output,\n    SimpleChanges,\n    TemplateRef,\n    ViewEncapsulation\n} from '@angular/core';\nimport { fromEvent, Subscription } from 'rxjs';\nimport { debounceTime } from 'rxjs/operators';\nimport {\n    ColumnSeparatorValue,\n    FD_FLEXIBLE_LAYOUT_CONFIG,\n    FlexibleLayoutConfig,\n    FlexibleColumnLayout,\n    FlexibleColumnLayoutDefinition,\n    LG_SCREEN_SIZE,\n    MD_SCREEN_SIZE,\n    ONE_COLUMN_END_FULL_SCREEN,\n    ONE_COLUMN_MID_FULL_SCREEN,\n    ONE_COLUMN_START_FULL_SCREEN,\n    ScreenSize,\n    SM_SCREEN_SIZE,\n    THREE_COLUMNS_END_EXPANDED,\n    THREE_COLUMNS_END_MINIMIZED,\n    THREE_COLUMNS_MID_EXPANDED,\n    THREE_COLUMNS_START_MINIMIZED,\n    TWO_COLUMNS_END_EXPANDED,\n    TWO_COLUMNS_MID_EXPANDED,\n    TWO_COLUMNS_START_EXPANDED\n} from './constants';\n\n@Component({\n    selector: 'fd-flexible-column-layout',\n    templateUrl: './flexible-column-layout.component.html',\n    styleUrls: ['./flexible-column-layout.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None\n})\nexport class FlexibleColumnLayoutComponent implements AfterViewInit, OnChanges, OnDestroy, OnInit {\n    /**\n     * The template that provides the content of the first/start/left column\n     */\n    @ContentChild('startColumn')\n    startColumn: TemplateRef<any>;\n\n    /**\n     * The template that provides the content of the middle column\n     */\n    @ContentChild('midColumn')\n    midColumn: TemplateRef<any>;\n\n    /**\n     * The template that provides the content of the last/end/right column\n     */\n    @ContentChild('endColumn')\n    endColumn: TemplateRef<any>;\n\n    /**\n     * The background design of the component\n     * Options include: 'solid' | 'translucent' | 'transparent'\n     * The default is set to 'solid'\n     */\n    @Input()\n    backgroundDesign: 'solid' | 'translucent' | 'transparent' = 'solid';\n\n    /**\n     * The layout of the component\n     * Options include: 'OneColumnStartFullScreen' | 'OneColumnMidFullScreen' |\n     * 'OneColumnEndFullScreen' | 'TwoColumnsStartExpanded' | 'TwoColumnsMidExpanded' |\n     * 'TwoColumnsEndExpanded' | 'ThreeColumnsMidExpanded' | 'ThreeColumnsEndExpanded' |\n     * 'ThreeColumnsStartMinimized' | 'ThreeColumnsEndMinimized'\n     */\n    @Input()\n    layout: FlexibleColumnLayout = ONE_COLUMN_START_FULL_SCREEN;\n\n    /**\n     * Mapping of the layout name and the column layout in %\n     */\n    @Input()\n    layoutDefinitions: FlexibleColumnLayoutDefinition = this._config.layouts;\n\n    /**\n     * The event emitted on layout value change.\n     */\n    @Output()\n    layoutChange: EventEmitter<FlexibleColumnLayout> = new EventEmitter<FlexibleColumnLayout>();\n\n    /**\n     * User defined break point for SM screens\n     * Default (Fiori 3) value is 960\n     */\n    @Input()\n    smBreakPoint = 960;\n\n    /**\n     * User-defined break point for LG screens\n     * the default (Fiori 3) value is 1280\n     */\n    @Input()\n    lgBreakPoint = 1280;\n\n    /**\n     * User-defined onResize function\n     */\n    @Input()\n    customOnResizeFunction: () => void;\n\n    /**\n     * @hidden\n     * left column separator value (between start and middle columns)\n     * that specifies the direction of the arrow and\n     * if the separator is visible\n     * Options include: 'left', 'right' and null\n     */\n    _leftColumnSeparator: ColumnSeparatorValue = null;\n\n    /**\n     * @hidden\n     * right column separator value (between middle and end columns)\n     * that specifies the direction of the arrow and\n     * if the separator is visible\n     * Options include: 'left', 'right' and null\n     */\n    _rightColumnSeparator: ColumnSeparatorValue = null;\n\n    /**\n     * @hidden\n     * allows to keep track of the previos layout\n     * so we can go back to it on window resize\n     */\n    private _previousLayout: FlexibleColumnLayout = this.layout;\n\n    /** @hidden */\n    private _screenSize: ScreenSize = LG_SCREEN_SIZE;\n\n    /** @hidden */\n    private _subscriptions = new Subscription();\n\n    /**\n     * @hidden\n     * the column layout representing the distribution of the width\n     * between the first (start), the middle and the last(end) column\n     */\n    _columnLayout: { start: number; mid: number; end: number } = this.layoutDefinitions[this.layout];\n\n    /**\n     * @hidden\n     * set to 'true' if the layout is changed to fullscreen on window resize\n     * this will allow the layout to switch to previous mode on SM->MD transition\n     * if a layout is set by the user to fullscreen, it should persist on window resize\n     */\n    private _responsiveFullscreenLayout = false;\n\n    constructor(@Inject(FD_FLEXIBLE_LAYOUT_CONFIG) private readonly _config: FlexibleLayoutConfig) {}\n\n    /**\n     * @hidden\n     * function that handles the click events on the left separator\n     * and updates the layout\n     */\n    _handleLeftColumnSeparatorClick(): void {\n        switch (this.layout) {\n            case TWO_COLUMNS_START_EXPANDED:\n                this._updateCurrentLayout(TWO_COLUMNS_MID_EXPANDED);\n                break;\n            case TWO_COLUMNS_MID_EXPANDED:\n                this._updateCurrentLayout(TWO_COLUMNS_START_EXPANDED);\n                break;\n            case THREE_COLUMNS_MID_EXPANDED:\n                this._updateCurrentLayout(THREE_COLUMNS_END_MINIMIZED);\n                break;\n            case THREE_COLUMNS_END_MINIMIZED:\n                this._updateCurrentLayout(TWO_COLUMNS_START_EXPANDED);\n                break;\n            case THREE_COLUMNS_START_MINIMIZED:\n                this._updateCurrentLayout(THREE_COLUMNS_END_MINIMIZED);\n                break;\n        }\n    }\n\n    /**\n     * @hidden\n     * function that handles the click events on the right separator\n     * and updates the layout\n     */\n    _handleRightColumnSeparatorClick(): void {\n        switch (this.layout) {\n            case TWO_COLUMNS_END_EXPANDED:\n                this._updateCurrentLayout(THREE_COLUMNS_START_MINIMIZED);\n                break;\n            case THREE_COLUMNS_MID_EXPANDED:\n                this._updateCurrentLayout(THREE_COLUMNS_END_EXPANDED);\n                break;\n            case THREE_COLUMNS_END_EXPANDED:\n                this._updateCurrentLayout(THREE_COLUMNS_MID_EXPANDED);\n                break;\n            case THREE_COLUMNS_END_MINIMIZED:\n                this._updateCurrentLayout(THREE_COLUMNS_MID_EXPANDED);\n                break;\n            case THREE_COLUMNS_START_MINIMIZED:\n                this._updateCurrentLayout(TWO_COLUMNS_END_EXPANDED);\n                break;\n        }\n    }\n\n    /**\n     * @hidden\n     * function to determine the screen size in 'sm' | 'md' | 'lg' | 'xl'\n     * format depending on the window size in px\n     */\n    private _getScreenSize(size: number): ScreenSize {\n        if (size > this.lgBreakPoint) {\n            return LG_SCREEN_SIZE;\n        } else if (size > this.smBreakPoint && size <= this.lgBreakPoint) {\n            return MD_SCREEN_SIZE;\n        } else {\n            return SM_SCREEN_SIZE;\n        }\n    }\n\n    /**\n     * @hidden\n     * handles the change of the layouts on reaching a break point\n     */\n    private _responsiveLayoutChangeHandler(): void {\n        this._screenSize = this._getScreenSize(window.innerWidth);\n\n        switch (this.layout) {\n            case ONE_COLUMN_MID_FULL_SCREEN:\n            case ONE_COLUMN_END_FULL_SCREEN: {\n                if (\n                    this._screenSize !== SM_SCREEN_SIZE &&\n                    this.layout !== this._previousLayout &&\n                    this._responsiveFullscreenLayout\n                ) {\n                    this._responsiveFullscreenLayout = false;\n                    this._updateCurrentLayout(this._previousLayout);\n                }\n                break;\n            }\n\n            case TWO_COLUMNS_START_EXPANDED:\n            case TWO_COLUMNS_MID_EXPANDED: {\n                if (this._screenSize === SM_SCREEN_SIZE) {\n                    this._responsiveFullscreenLayout = true;\n                    this._updateCurrentLayout(ONE_COLUMN_MID_FULL_SCREEN);\n                }\n                break;\n            }\n\n            case TWO_COLUMNS_END_EXPANDED: {\n                if (this._screenSize === SM_SCREEN_SIZE) {\n                    this._responsiveFullscreenLayout = true;\n                    this._updateCurrentLayout(ONE_COLUMN_END_FULL_SCREEN);\n                }\n\n                if (this._screenSize === LG_SCREEN_SIZE) {\n                    this._updateCurrentLayout(THREE_COLUMNS_END_EXPANDED);\n                }\n                break;\n            }\n\n            case THREE_COLUMNS_START_MINIMIZED: {\n                if (this._screenSize === SM_SCREEN_SIZE) {\n                    this._responsiveFullscreenLayout = true;\n                    this._updateCurrentLayout(ONE_COLUMN_END_FULL_SCREEN);\n                }\n\n                if (this._screenSize === LG_SCREEN_SIZE) {\n                    this._updateCurrentLayout(THREE_COLUMNS_MID_EXPANDED);\n                }\n                break;\n            }\n\n            case THREE_COLUMNS_END_MINIMIZED: {\n                if (this._screenSize === SM_SCREEN_SIZE) {\n                    this._responsiveFullscreenLayout = true;\n                    this._updateCurrentLayout(ONE_COLUMN_END_FULL_SCREEN);\n                }\n\n                if (this._screenSize === LG_SCREEN_SIZE) {\n                    this._updateCurrentLayout(THREE_COLUMNS_END_MINIMIZED);\n                }\n                break;\n            }\n\n            case THREE_COLUMNS_MID_EXPANDED: {\n                if (this._screenSize === SM_SCREEN_SIZE) {\n                    this._responsiveFullscreenLayout = true;\n                    this._updateCurrentLayout(ONE_COLUMN_END_FULL_SCREEN);\n                }\n\n                if (this._screenSize === MD_SCREEN_SIZE) {\n                    this._updateCurrentLayout(THREE_COLUMNS_START_MINIMIZED);\n                }\n                break;\n            }\n\n            case THREE_COLUMNS_END_EXPANDED: {\n                if (this._screenSize === SM_SCREEN_SIZE) {\n                    this._responsiveFullscreenLayout = true;\n                    this._updateCurrentLayout(ONE_COLUMN_END_FULL_SCREEN);\n                }\n\n                if (this._screenSize === MD_SCREEN_SIZE) {\n                    this._updateCurrentLayout(TWO_COLUMNS_END_EXPANDED);\n                }\n                break;\n            }\n        }\n    }\n\n    /**\n     * @hidden\n     * Listen on window resize and update the layout\n     * call user defined custom function if provided\n     */\n    private _listenOnWindowResize(): void {\n        if (this.customOnResizeFunction) {\n            this.customOnResizeFunction();\n        } else {\n            this._subscriptions.add(\n                fromEvent(window, 'resize')\n                    .pipe(debounceTime(100))\n                    .subscribe(() => this._responsiveLayoutChangeHandler())\n            );\n        }\n    }\n\n    /**\n     * @hidden\n     * determines if the left separator should be visible\n     * and the value that will specify the direction of the arrow\n     */\n    private _getLeftColumnSeparatorValue(): ColumnSeparatorValue {\n        switch (this.layout) {\n            case TWO_COLUMNS_START_EXPANDED:\n                return 'left';\n            case TWO_COLUMNS_MID_EXPANDED:\n            case THREE_COLUMNS_MID_EXPANDED:\n            case THREE_COLUMNS_END_MINIMIZED:\n            case THREE_COLUMNS_START_MINIMIZED:\n                return 'right';\n            default:\n                return null;\n        }\n    }\n\n    /**\n     * @hidden\n     * determines if the right separator should be visible\n     * and the value that will specify the direction of the arrow\n     */\n    private _getRightColumnSeparatorValue(): ColumnSeparatorValue {\n        switch (this.layout) {\n            case TWO_COLUMNS_END_EXPANDED:\n            case THREE_COLUMNS_END_EXPANDED:\n                return 'right';\n            case THREE_COLUMNS_MID_EXPANDED:\n            case THREE_COLUMNS_END_MINIMIZED:\n            case THREE_COLUMNS_START_MINIMIZED:\n                return 'left';\n            default:\n                return null;\n        }\n    }\n\n    /**\n     * @hidden\n     * updates the column layout based on the layout name\n     * makes a call to determine the new value of the left separator\n     * makes a call to determine the new value of the right separator\n     */\n    private _updateColumnLayoutParameters(): void {\n        this._columnLayout = this.layoutDefinitions[this.layout];\n        this._leftColumnSeparator = this._getLeftColumnSeparatorValue();\n        this._rightColumnSeparator = this._getRightColumnSeparatorValue();\n    }\n\n    /**\n     * @hidden\n     * updates the layout\n     * emits an event\n     * makes a call to the helper function that will update the column layout and the separators\n     */\n    private _updateCurrentLayout(newLayout: FlexibleColumnLayout): void {\n        this.layout = newLayout;\n        this._updateColumnLayoutParameters();\n\n        // setTimeout fixes \"ExpressionChangedAfterItHasBeenCheckedError\"\n        setTimeout(() => {\n            this.layoutChange.emit(this.layout);\n        });\n    }\n\n    /** @hidden */\n    ngOnInit(): void {\n        this._updateColumnLayoutParameters();\n        this._previousLayout = this.layout;\n    }\n\n    /** @hidden */\n    ngAfterViewInit(): void {\n        this._screenSize = this._getScreenSize(window.innerWidth);\n        this._listenOnWindowResize();\n    }\n\n    /** @hidden */\n    ngOnChanges(changes: SimpleChanges): void {\n        this._updateColumnLayoutParameters();\n\n        if (changes && changes.layout.previousValue) {\n            this._previousLayout = changes.layout.previousValue;\n        }\n\n        if (changes && changes.layout) {\n            this._responsiveLayoutChangeHandler();\n        }\n    }\n\n    /** @hidden */\n    ngOnDestroy(): void {\n        this._subscriptions.unsubscribe();\n    }\n}\n","<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-container *ngTemplateOutlet=\"startColumn\"></ng-container>\n    </div>\n    <!-- Left Separator -->\n    <div *ngIf=\"_leftColumnSeparator\" class=\"fd-flexible-column-layout__separator\">\n        <button\n            fd-button\n            [compact]=\"true\"\n            fdType=\"transparent\"\n            class=\"fd-flexible-column-layout__button\"\n            ariaLabel=\"Expand\"\n            (click)=\"_handleLeftColumnSeparatorClick()\"\n        >\n            <i\n                [class]=\"_leftColumnSeparator ? 'sap-icon--slim-arrow-' + _leftColumnSeparator : ''\"\n                role=\"presentation\"\n            ></i>\n        </button>\n    </div>\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-container *ngTemplateOutlet=\"midColumn\"></ng-container>\n    </div>\n    <!-- Right Separator -->\n    <div *ngIf=\"_rightColumnSeparator\" class=\"fd-flexible-column-layout__separator\">\n        <button\n            fd-button\n            [compact]=\"true\"\n            fdType=\"transparent\"\n            class=\"fd-flexible-column-layout__button\"\n            ariaLabel=\"Expand\"\n            (click)=\"_handleRightColumnSeparatorClick()\"\n        >\n            <i\n                [class]=\"_rightColumnSeparator ? 'sap-icon--slim-arrow-' + _rightColumnSeparator : ''\"\n                role=\"presentation\"\n            ></i>\n        </button>\n    </div>\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-container *ngTemplateOutlet=\"endColumn\"></ng-container>\n    </div>\n</div>\n","import { ModuleWithProviders, NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ButtonModule } from '@fundamental-ngx/core/button';\nimport { cloneDeep, merge } from 'lodash-es';\nimport { DEFAULT_FLEXIBLE_LAYOUT_CONFIG, FD_FLEXIBLE_LAYOUT_CONFIG, FlexibleLayoutConfig } from './constants';\nimport { FlexibleColumnLayoutComponent } from './flexible-column-layout.component';\n\n/**\n * Adds Flexible Column Layout functionality to your application.\n *\n * Can be imported in two ways:\n * * Plain `FlexibleColumnLayoutModule` with default configuration\n * * With `withConfig()` method which allows passing custom default configuration.\n */\n@NgModule({\n    declarations: [FlexibleColumnLayoutComponent],\n    imports: [CommonModule, ButtonModule],\n    exports: [FlexibleColumnLayoutComponent],\n    providers: [\n        {\n            provide: FD_FLEXIBLE_LAYOUT_CONFIG,\n            useValue: DEFAULT_FLEXIBLE_LAYOUT_CONFIG\n        }\n    ]\n})\nexport class FlexibleColumnLayoutModule {\n    /**\n     * Allows configuring module on a global level with custom configuration.\n     * @param config User's custom configuration.\n     */\n    static withConfig(config: Partial<FlexibleLayoutConfig>): ModuleWithProviders<FlexibleColumnLayoutModule> {\n        config = merge(cloneDeep(DEFAULT_FLEXIBLE_LAYOUT_CONFIG), cloneDeep(config));\n        return {\n            ngModule: FlexibleColumnLayoutModule,\n            providers: [\n                {\n                    provide: FD_FLEXIBLE_LAYOUT_CONFIG,\n                    useValue: config\n                }\n            ]\n        };\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}