npm - @ui5/webcomponents-fiori - Versions diffs - 1.13.1 → 1.14.0-rc.0 - Mend

@ui5/webcomponents-fiori 1.13.1 → 1.14.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (333) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [1.14.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.13.2...v1.14.0-rc.0) (2023-05-18)
+### Bug Fixes
+* **ui5-shellbar:** badge visual alignment ([#7004](https://github.com/SAP/ui5-webcomponents/issues/7004)) ([45a176d](https://github.com/SAP/ui5-webcomponents/commit/45a176da6dd5413617a25a92c1f7ba2e194790b6))
+* **ui5-shellbar:** remove double box-shadow effect on hover ([#7033](https://github.com/SAP/ui5-webcomponents/issues/7033)) ([fde8b69](https://github.com/SAP/ui5-webcomponents/commit/fde8b69b99175b91cf1a6c3b5018c044c07c8bd7))
+### Features
+* **framework:** use `template literal notation` for enum types ([#6856](https://github.com/SAP/ui5-webcomponents/issues/6856)) ([0de21e8](https://github.com/SAP/ui5-webcomponents/commit/0de21e8ba37c6a75fd3d2a29a16cc82661619cb1)), closes [#6636](https://github.com/SAP/ui5-webcomponents/issues/6636)
+## [1.13.2](https://github.com/SAP/ui5-webcomponents/compare/v1.13.1...v1.13.2) (2023-05-15)
+### Bug Fixes
+* **ui5-shellbar:** containers shrink factor reduced ([#6982](https://github.com/SAP/ui5-webcomponents/issues/6982)) ([e82744b](https://github.com/SAP/ui5-webcomponents/commit/e82744bd715bae744a7e41849f1fafc5ccc389ee))
 ## [1.13.1](https://github.com/SAP/ui5-webcomponents/compare/v1.13.0-rc.5...v1.13.1) (2023-05-11)
 **Note:** Version bump only for package @ui5/webcomponents-fiori

package/dist/Bar.d.ts CHANGED Viewed

@@ -67,7 +67,7 @@ declare class Bar extends UI5Element {
      * @defaultvalue "Header"
      * @public
      */
-    design: BarDesign;
+    design: `${BarDesign}`;
     /**
     * Defines the content at the start of the bar
     * @type {HTMLElement[]}
@@ -94,7 +94,7 @@ declare class Bar extends UI5Element {
     endContent: Array<HTMLElement>;
     _handleResizeBound: () => void;
     get accInfo(): {
-        label: BarDesign;
+        label: "Header" | "Subheader" | "Footer" | "FloatingFooter";
     };
     constructor();
     handleResize(): void;

package/dist/Bar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Bar.js","sourceRoot":"","sources":["../src/Bar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,aAAa,MAAM,wDAAwD,CAAC;AACnF,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAE7C,WAAW;AACX,OAAO,WAAW,MAAM,0CAA0C,CAAC;AAEnE,SAAS;AACT,OAAO,MAAM,MAAM,+BAA+B,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AAQH,IAAM,GAAG,GAAT,MAAM,GAAI,SAAQ,UAAU;IAsD3B,IAAI,OAAO;QACV,OAAO;YACN,OAAO,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC;IACH,CAAC;IAED;QACC,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACxD,CAAC;IAED,YAAY;QACX,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,EAAG,CAAC;QAC9B,MAAM,QAAQ,GAAG,GAAG,CAAC,WAAW,CAAC;QACjC,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;YAC1D,OAAQ,KAAqB,CAAC,WAAW,GAAG,QAAQ,GAAG,CAAC,CAAC;QAC1D,CAAC,CAAC,CAAC;QAEH,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,uBAAuB,EAAE,YAAY,CAAC,CAAC;IAC7D,CAAC;IAED,IAAI,OAAO;QACV,OAAO;YACN,IAAI,EAAE;gBACL,cAAc,EAAE,IAAI;aACpB;SACD,CAAC;IACH,CAAC;IAED,iBAAiB;QAChB,oFAAoF;QACpF,CAAC,GAAG,IAAI,CAAC,YAAY,EAAE,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAChI,CAAC;IAED,UAAU;QACT,aAAa,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAEtD,IAAI,CAAC,SAAS,EAAG,CAAC,gBAAgB,CAAC,4BAA4B,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YAChF,aAAa,CAAC,QAAQ,CAAC,KAAoB,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QACvE,CAAC,EAAE,IAAI,CAAC,CAAC;IACV,CAAC;IAED,SAAS;QACR,aAAa,CAAC,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAExD,IAAI,CAAC,SAAS,EAAG,CAAC,gBAAgB,CAAC,4BAA4B,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YAChF,aAAa,CAAC,UAAU,CAAC,KAAoB,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QACzE,CAAC,EAAE,IAAI,CAAC,CAAC;IACT,CAAC;CACF,CAAA;AApFA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,CAAC,MAAM,EAAE,CAAC;~~mCAC5C~~;~~AAUlB~~;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;yCACM;AAUlC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;0CACX;AAUlC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;uCACG;AAlD1B,GAAG;IAPR,aAAa,CAAC;QACd,GAAG,EAAE,SAAS;QACd,cAAc,EAAE,IAAI;QACpB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,WAAW;KACrB,CAAC;GACI,GAAG,CAwGR;AAED,GAAG,CAAC,MAAM,EAAE,CAAC;AAEb,eAAe,GAAG,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport BarDesign from \"./types/BarDesign.js\";\n\n// Template\nimport BarTemplate from \"./generated/templates/BarTemplate.lit.js\";\n\n// Styles\nimport BarCss from \"./generated/themes/Bar.css.js\";\n\n/*\n @class\n \n <h3 class=\"comment-api-title\">Overview</h3>\n * The Bar is a container which is primarily used to hold titles, buttons and input elements\n * and its design and functionality is the basis for page headers and footers.\n * The component consists of three areas to hold its content - startContent slot, default slot and endContent slot.\n * It has the capability to center content, such as a title, while having other components on the left and right side.\n \n <h3>Usage</h3>\n * With the use of the design property, you can set the style of the Bar to appear designed like a Header, Subheader, Footer and FloatingFooter.\n * <br>\n * <b>Note:</b> Do not place a Bar inside another Bar or inside any bar-like component. Doing so may cause unpredictable behavior.\n \n <h3>Responsive Behavior</h3>\n * The default slot will be centered in the available space between the startContent and the endContent areas,\n * therefore it might not always be centered in the entire bar.\n \n <h3>CSS Shadow Parts</h3>\n \n <ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.\n * <br>\n * The <code>ui5-bar</code> exposes the following CSS Shadow Parts:\n * <ul>\n * <li>bar - Used to style the wrapper of the content of the component</li>\n * </ul>\n \n <h3>Keyboard Handling</h3>\n \n <h4>Fast Navigation</h4>\n * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up</code>.\n * In order to use this functionality, you need to import the following module:\n * <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code>\n * <br><br>\n \n <h3>ES6 Module Import</h3>\n \n <code>import \"@ui5/webcomponents-fiori/dist/Bar.js\";</code>\n \n @constructor\n * @author SAP SE\n * @alias sap.ui.webc.fiori.Bar\n * @implements sap.ui.webc.fiori.IBar\n * @extends sap.ui.webc.base.UI5Element\n * @tagname ui5-bar\n * @public\n * @since 1.0.0-rc.11\n /\n@customElement({\n\ttag: \"ui5-bar\",\n\tfastNavigation: true,\n\trenderer: litRender,\n\tstyles: BarCss,\n\ttemplate: BarTemplate,\n})\nclass Bar extends UI5Element {\n\t/\n\t Defines the component's design.\n\t \n\t <br><br>\n\t * <b>Note:</b>\n\t * Available options are:\n\t * <ul>\n\t * <li><code>Header</code></li>\n\t * <li><code>Subheader</code></li>\n\t * <li><code>Footer</code></li>\n\t * <li><code>FloatingFooter</code></li>\n\t * </ul>\n\t \n\t @type {sap.ui.webc.fiori.types.BarDesign}\n\t * @name sap.ui.webc.fiori.Bar.prototype.design\n\t * @defaultvalue \"Header\"\n\t * @public\n\t /\n\t@property({ type: BarDesign, defaultValue: BarDesign.Header })\n\tdesign!: BarDesign\n\n\t/\n\t Defines the content at the start of the bar\n\t* @type {HTMLElement[]}\n\t* @name sap.ui.webc.fiori.Bar.prototype.startContent\n\t* @slot\n\t* @public\n\t/\n\t@slot({ type: HTMLElement })\n\tstartContent!: Array<HTMLElement>;\n\n\t/\n\t Defines the content in the middle of the bar\n\t* @type {HTMLElement[]}\n\t* @name sap.ui.webc.fiori.Bar.prototype.default\n\t* @slot middleContent\n\t* @public\n\t/\n\t@slot({ type: HTMLElement, \"default\": true })\n\tmiddleContent!: Array<HTMLElement>\n\n\t/\n\t Defines the content at the end of the bar\n\t* @type {HTMLElement[]}\n\t* @name sap.ui.webc.fiori.Bar.prototype.endContent\n\t* @slot\n\t* @public\n\t*/\n\t@slot({ type: HTMLElement })\n\tendContent!: Array<HTMLElement>\n\n\t_handleResizeBound: () => void;\n\n\tget accInfo() {\n\t\treturn {\n\t\t\t\"label\": this.design,\n\t\t};\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._handleResizeBound = this.handleResize.bind(this);\n\t}\n\n\thandleResize() {\n\t\tconst bar = this.getDomRef()!;\n\t\tconst barWidth = bar.offsetWidth;\n\t\tconst needShrinked = Array.from(bar.children).some(child => {\n\t\t\treturn (child as HTMLElement).offsetWidth > barWidth / 3;\n\t\t});\n\n\t\tbar.classList.toggle(\"ui5-bar-root-shrinked\", needShrinked);\n\t}\n\n\tget classes() {\n\t\treturn {\n\t\t\troot: {\n\t\t\t\t\"ui5-bar-root\": true,\n\t\t\t},\n\t\t};\n\t}\n\n\tonBeforeRendering() {\n\t\t// Next row is specific for IE11. Please remove after stop support and edit css file\n\t\t[...this.startContent, ...this.middleContent, ...this.endContent].forEach(element => element.classList.add(\"ui5-bar-content\"));\n\t}\n\n\tonEnterDOM() {\n\t\tResizeHandler.register(this, this._handleResizeBound);\n\n\t\tthis.getDomRef()!.querySelectorAll(\".ui5-bar-content-container\").forEach(child => {\n\t\t\tResizeHandler.register(child as HTMLElement, this._handleResizeBound);\n\t\t}, this);\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._handleResizeBound);\n\n\t\tthis.getDomRef()!.querySelectorAll(\".ui5-bar-content-container\").forEach(child => {\n\t\t\tResizeHandler.deregister(child as HTMLElement, this._handleResizeBound);\n\t\t}, this);\n\t }\n}\n\nBar.define();\n\nexport default Bar;\n"]}
1	+ {"version":3,"file":"Bar.js","sourceRoot":"","sources":["../src/Bar.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport BarDesign from \"./types/BarDesign.js\";\n\n// Template\nimport BarTemplate from \"./generated/templates/BarTemplate.lit.js\";\n\n// Styles\nimport BarCss from \"./generated/themes/Bar.css.js\";\n\n/*\n @class\n \n <h3 class=\"comment-api-title\">Overview</h3>\n * The Bar is a container which is primarily used to hold titles, buttons and input elements\n * and its design and functionality is the basis for page headers and footers.\n * The component consists of three areas to hold its content - startContent slot, default slot and endContent slot.\n * It has the capability to center content, such as a title, while having other components on the left and right side.\n \n <h3>Usage</h3>\n * With the use of the design property, you can set the style of the Bar to appear designed like a Header, Subheader, Footer and FloatingFooter.\n * <br>\n * <b>Note:</b> Do not place a Bar inside another Bar or inside any bar-like component. Doing so may cause unpredictable behavior.\n \n <h3>Responsive Behavior</h3>\n * The default slot will be centered in the available space between the startContent and the endContent areas,\n * therefore it might not always be centered in the entire bar.\n \n <h3>CSS Shadow Parts</h3>\n \n <ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.\n * <br>\n * The <code>ui5-bar</code> exposes the following CSS Shadow Parts:\n * <ul>\n * <li>bar - Used to style the wrapper of the content of the component</li>\n * </ul>\n \n <h3>Keyboard Handling</h3>\n \n <h4>Fast Navigation</h4>\n * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up</code>.\n * In order to use this functionality, you need to import the following module:\n * <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code>\n * <br><br>\n \n <h3>ES6 Module Import</h3>\n \n <code>import \"@ui5/webcomponents-fiori/dist/Bar.js\";</code>\n \n @constructor\n * @author SAP SE\n * @alias sap.ui.webc.fiori.Bar\n * @implements sap.ui.webc.fiori.IBar\n * @extends sap.ui.webc.base.UI5Element\n * @tagname ui5-bar\n * @public\n * @since 1.0.0-rc.11\n /\n@customElement({\n\ttag: \"ui5-bar\",\n\tfastNavigation: true,\n\trenderer: litRender,\n\tstyles: BarCss,\n\ttemplate: BarTemplate,\n})\nclass Bar extends UI5Element {\n\t/\n\t Defines the component's design.\n\t \n\t <br><br>\n\t * <b>Note:</b>\n\t * Available options are:\n\t * <ul>\n\t * <li><code>Header</code></li>\n\t * <li><code>Subheader</code></li>\n\t * <li><code>Footer</code></li>\n\t * <li><code>FloatingFooter</code></li>\n\t * </ul>\n\t \n\t @type {sap.ui.webc.fiori.types.BarDesign}\n\t * @name sap.ui.webc.fiori.Bar.prototype.design\n\t * @defaultvalue \"Header\"\n\t * @public\n\t /\n\t@property({ type: BarDesign, defaultValue: BarDesign.Header })\n\tdesign!: `${BarDesign}`\n\n\t/\n\t Defines the content at the start of the bar\n\t* @type {HTMLElement[]}\n\t* @name sap.ui.webc.fiori.Bar.prototype.startContent\n\t* @slot\n\t* @public\n\t/\n\t@slot({ type: HTMLElement })\n\tstartContent!: Array<HTMLElement>;\n\n\t/\n\t Defines the content in the middle of the bar\n\t* @type {HTMLElement[]}\n\t* @name sap.ui.webc.fiori.Bar.prototype.default\n\t* @slot middleContent\n\t* @public\n\t/\n\t@slot({ type: HTMLElement, \"default\": true })\n\tmiddleContent!: Array<HTMLElement>\n\n\t/\n\t Defines the content at the end of the bar\n\t* @type {HTMLElement[]}\n\t* @name sap.ui.webc.fiori.Bar.prototype.endContent\n\t* @slot\n\t* @public\n\t*/\n\t@slot({ type: HTMLElement })\n\tendContent!: Array<HTMLElement>\n\n\t_handleResizeBound: () => void;\n\n\tget accInfo() {\n\t\treturn {\n\t\t\t\"label\": this.design,\n\t\t};\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._handleResizeBound = this.handleResize.bind(this);\n\t}\n\n\thandleResize() {\n\t\tconst bar = this.getDomRef()!;\n\t\tconst barWidth = bar.offsetWidth;\n\t\tconst needShrinked = Array.from(bar.children).some(child => {\n\t\t\treturn (child as HTMLElement).offsetWidth > barWidth / 3;\n\t\t});\n\n\t\tbar.classList.toggle(\"ui5-bar-root-shrinked\", needShrinked);\n\t}\n\n\tget classes() {\n\t\treturn {\n\t\t\troot: {\n\t\t\t\t\"ui5-bar-root\": true,\n\t\t\t},\n\t\t};\n\t}\n\n\tonBeforeRendering() {\n\t\t// Next row is specific for IE11. Please remove after stop support and edit css file\n\t\t[...this.startContent, ...this.middleContent, ...this.endContent].forEach(element => element.classList.add(\"ui5-bar-content\"));\n\t}\n\n\tonEnterDOM() {\n\t\tResizeHandler.register(this, this._handleResizeBound);\n\n\t\tthis.getDomRef()!.querySelectorAll(\".ui5-bar-content-container\").forEach(child => {\n\t\t\tResizeHandler.register(child as HTMLElement, this._handleResizeBound);\n\t\t}, this);\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._handleResizeBound);\n\n\t\tthis.getDomRef()!.querySelectorAll(\".ui5-bar-content-container\").forEach(child => {\n\t\t\tResizeHandler.deregister(child as HTMLElement, this._handleResizeBound);\n\t\t}, this);\n\t }\n}\n\nBar.define();\n\nexport default Bar;\n"]}

package/dist/DynamicSideContent.d.ts CHANGED Viewed

@@ -120,7 +120,7 @@ declare class DynamicSideContent extends UI5Element {
      * @public
      *
      */
-    sideContentPosition: SideContentPosition;
+    sideContentPosition: `${SideContentPosition}`;
     /**
      * Defines on which breakpoints the side content is visible.
      *
@@ -141,7 +141,7 @@ declare class DynamicSideContent extends UI5Element {
      * @public
      *
      */
-    sideContentVisibility: SideContentVisibility;
+    sideContentVisibility: `${SideContentVisibility}`;
     /**
      * Defines on which breakpoints the side content falls down below the main content.
      *
@@ -161,7 +161,7 @@ declare class DynamicSideContent extends UI5Element {
      * @public
      *
      */
-    sideContentFallDown: SideContentFallDown;
+    sideContentFallDown: `${SideContentFallDown}`;
     /**
      * Defines whether the component is in equal split mode. In this mode, the side and
      * the main content take 50:50 percent of the container on all screen sizes

package/dist/DynamicSideContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DynamicSideContent.js","sourceRoot":"","sources":["../src/DynamicSideContent.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport type { ClassMap } from \"@ui5/webcomponents-base/dist/types.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport SideContentPosition from \"./types/SideContentPosition.js\";\nimport SideContentVisibility from \"./types/SideContentVisibility.js\";\nimport SideContentFallDown from \"./types/SideContentFallDown.js\";\nimport DynamicSideContentTemplate from \"./generated/templates/DynamicSideContentTemplate.lit.js\";\n\n// Styles\nimport DynamicSideContentCss from \"./generated/themes/DynamicSideContent.css.js\";\n\n// Texts\nimport {\n\tDSC_SIDE_ARIA_LABEL,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Breakpoint-related constants\nconst S_M_BREAKPOINT = 720,\t// Breakpoint between S and M screen sizes\n\tM_L_BREAKPOINT = 1024, // Breakpoint between M and L screen sizes\n\tL_XL_BREAKPOINT = 1440, // Breakpoint between L and XL screen sizes\n\tMINIMUM_WIDTH_BREAKPOINT = 960; // Minimum width of the control where main and side contents are side by side\n\n/*\n @class\n \n <h3 class=\"comment-api-title\">Overview</h3>\n \n The DynamicSideContent (<code>ui5-dynamic-side-content</code>) is a layout component that allows additional content\n * to be displayed in a way that flexibly adapts to different screen sizes. The side\n * content appears in a container next to or directly below the main content\n * (it doesn't overlay). When the side content is triggered, the main content becomes\n * narrower (if appearing side-by-side). The side content contains a separate scrollbar\n * when appearing next to the main content.\n \n \n * <h3>Usage</h3>\n \n <i>When to use?</i>\n \n Use this component if you want to display relevant information that is not critical\n * for users to complete a task. Users should have access to all the key functions and\n * critical information in the app even if they do not see the side content. This is\n * important because on smaller screen sizes it may be difficult to display the side\n * content in a way that is easily accessible for the user.\n \n <i>When not to use?</i>\n \n Don't use it if you want to display navigation or critical information that prevents\n * users from completing a task when they have no access to the side content.\n \n \n * <h3>Responsive Behavior</h3>\n \n Screen width > 1440px\n \n <ul><li>Main vs. side content ratio is 75 vs. 25 percent (with a minimum of 320px\n * each).</li>\n * <li>If the application defines a trigger, the side content can be hidden.</li></ul>\n \n Screen width <= 1440px and > 1024px\n \n <ul><li>Main vs. side content ratio is 66.666 vs. 33.333 percent (with a minimum of\n * 320px each). If the side content width falls below 320 px, it automatically slides\n * under the main content, unless the app development team specifies that it should\n * disappear.</li></ul>\n \n Screen width <= 1024px and > 720px\n \n <ul><li>The side content ratio is fixed to 340px, and the main content takes the rest\n * of the width. Only if the <code>sideContentFallDown</code> is set to <code>OnMinimumWidth</code>\n * and screen width is <= 960px and > 720px the side content falls below the main content.</li></ul>\n \n Screen width <= 720px (for example on a mobile device)\n \n <ul><li>In this case, the side content automatically disappears from the screen (unless\n * specified to stay under the content by setting of <code>sideContentVisibility</code>\n * property to <code>AlwaysShow</code>) and can be triggered from a pre-set trigger\n * (specified within the app). When the side content is triggered, it replaces the main\n * content. We recommend that you always place the trigger for the side content in the\n * same location, such as in the app footer.</li></ul>\n \n A special case allows switching the comparison mode between the main and side content.\n * In this case, the screen is split into 50:50 percent for main vs. side content. The\n * responsive behavior of the equal split is the same as in the standard view - the\n * side content disappears on screen widths of less than 720 px and can only be\n * viewed by triggering it.\n \n <h3>ES6 Module Import</h3>\n \n <code>import \"@ui5/webcomponents-fiori/dist/DynamicSideContent\";</code>\n \n @constructor\n * @author SAP SE\n * @alias sap.ui.webc.fiori.DynamicSideContent\n * @extends sap.ui.webc.base.UI5Element\n * @tagname ui5-dynamic-side-content\n * @public\n * @since 1.1.0\n /\n@customElement({\n\ttag: \"ui5-dynamic-side-content\",\n\trenderer: litRender,\n\tstyles: DynamicSideContentCss,\n\ttemplate: DynamicSideContentTemplate,\n})\n/\n Fires when the current breakpoint has been changed.\n * @event sap.ui.webc.fiori.DynamicSideContent#layout-change\n * @param {string} currentBreakpoint the current breakpoint.\n * @param {string} previousBreakpoint the breakpoint that was active before change to current breakpoint.\n * @param {boolean} mainContentVisible visibility of the main content.\n * @param {boolean} sideContentVisible visibility of the side content.\n * @public\n /\n@event(\"layout-change\", {\n\tdetail: {\n\t\tcurrentBreakpoint: {\n\t\t\ttype: String,\n\t\t},\n\t\tpreviousBreakpoint: {\n\t\t\ttype: String,\n\t\t},\n\t\tmainContentVisible: {\n\t\t\ttype: Boolean,\n\t\t},\n\t\tsideContentVisible: {\n\t\t\ttype: Boolean,\n\t\t},\n\t},\n})\nclass DynamicSideContent extends UI5Element {\n\t/\n\t Defines the visibility of the main content.\n\t \n\t @type {boolean}\n\t * @name sap.ui.webc.fiori.DynamicSideContent.prototype.hideMainContent\n\t * @defaultvalue false\n\t * @public\n\t \n\t /\n\t@property({ type: Boolean })\n\thideMainContent!: boolean;\n\n\t/*\n\t Defines the visibility of the side content.\n\t \n\t @type {boolean}\n\t * @name sap.ui.webc.fiori.DynamicSideContent.prototype.hideSideContent\n\t * @defaultvalue false\n\t * @public\n\t \n\t /\n\t@property({ type: Boolean })\n\thideSideContent!: boolean;\n\n\t/*\n\t Defines whether the side content is positioned before the main content (left side\n\t * in LTR mode), or after the the main content (right side in LTR mode).\n\t \n\t <br><br>\n\t * <b>The available values are:</b>\n\t \n\t <ul>\n\t * <li><code>Start</code></li>\n\t * <li><code>End</code></li>\n\t * </ul>\n\t \n\t @type {sap.ui.webc.fiori.types.SideContentPosition}\n\t * @name sap.ui.webc.fiori.DynamicSideContent.prototype.sideContentPosition\n\t * @defaultvalue \"End\"\n\t * @public\n\t \n\t /\n\t@property({ type: SideContentPosition, defaultValue: SideContentPosition.End })\n\tsideContentPosition!: SideContentPosition;\n\n\t/*\n\t Defines on which breakpoints the side content is visible.\n\t \n\t <br><br>\n\t * <b>The available values are:</b>\n\t \n\t <ul>\n\t * <li><code>AlwaysShow</code></li>\n\t * <li><code>ShowAboveL</code></li>\n\t * <li><code>ShowAboveM</code></li>\n\t * <li><code>ShowAboveS</code></li>\n\t * <li><code>NeverShow</code></li>\n\t * </ul>\n\t \n\t @type {sap.ui.webc.fiori.types.SideContentVisibility}\n\t * @name sap.ui.webc.fiori.DynamicSideContent.prototype.sideContentVisibility\n\t * @defaultvalue \"ShowAboveS\"\n\t * @public\n\t \n\t /\n\t@property({ type: SideContentVisibility, defaultValue: SideContentVisibility.ShowAboveS })\n\tsideContentVisibility!: SideContentVisibility;\n\n\t/*\n\t Defines on which breakpoints the side content falls down below the main content.\n\t \n\t <br><br>\n\t * <b>The available values are:</b>\n\t \n\t <ul>\n\t * <li><code>BelowXL</code></li>\n\t * <li><code>BelowL</code></li>\n\t * <li><code>BelowM</code></li>\n\t * <li><code>OnMinimumWidth</code></li>\n\t * </ul>\n\t \n\t @type {sap.ui.webc.fiori.types.SideContentFallDown}\n\t * @name sap.ui.webc.fiori.DynamicSideContent.prototype.sideContentFallDown\n\t * @defaultvalue \"OnMinimumWidth\"\n\t * @public\n\t \n\t /\n\t@property({ type: SideContentFallDown, defaultValue: SideContentFallDown.OnMinimumWidth })\n\tsideContentFallDown!: SideContentFallDown;\n\n\t/*\n\t Defines whether the component is in equal split mode. In this mode, the side and\n\t * the main content take 50:50 percent of the container on all screen sizes\n\t * except for phone, where the main and side contents are switching visibility\n\t * using the toggle method.\n\t \n\t @type {boolean}]\n\t * @name sap.ui.webc.fiori.DynamicSideContent.prototype.equalSplit\n\t * @defaultvalue false\n\t * @public\n\t \n\t /\n\t@property({ type: Boolean })\n\tequalSplit!: boolean;\n\n\t/*\n\t @private\n\t /\n\t@property({ defaultValue: \"0\", noAttribute: true })\n\t_mcSpan!: string;\n\n\t/\n\t @private\n\t /\n\t@property({ defaultValue: \"0\", noAttribute: true })\n\t_scSpan!: string;\n\n\t/\n\t @private\n\t /\n\t@property({ type: Boolean, noAttribute: true })\n\t_toggled!: boolean;\n\n\t/\n\t @private\n\t /\n\t@property({ noAttribute: true })\n\t_currentBreakpoint!: string;\n\n\t/\n\t Defines the main content.\n\t \n\t @type {HTMLElement[]}\n\t * @name sap.ui.webc.fiori.DynamicSideContent.prototype.default\n\t * @slot\n\t * @public\n\t /\n\n\t/\n\t Defines the side content.\n\t \n\t @type {HTMLElement[]}\n\t * @name sap.ui.webc.fiori.DynamicSideContent.prototype.sideContent\n\t * @slot\n\t * @public\n\t /\n\t@slot()\n\tsideContent!: Array<HTMLElement>;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._handleResizeBound = this.handleResize.bind(this);\n\t}\n\n\t_handleResizeBound: () => void;\n\n\tstatic i18nBundle: I18nBundle;\n\n\tstatic async onDefine() {\n\t\tDynamicSideContent.i18nBundle = await getI18nBundle(\"@ui5/webcomponents-fiori\");\n\t}\n\n\tonAfterRendering() {\n\t\tthis._resizeContents();\n\t}\n\n\tonEnterDOM() {\n\t\tResizeHandler.register(this, this._handleResizeBound);\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._handleResizeBound);\n\t}\n\n\t/\n\t Toggles visibility of main and side contents on S screen size (mobile device).\n\t * @public\n\t * @method\n\t * @name sap.ui.webc.fiori.DynamicSideContent#toggleContents\n\t */\n\ttoggleContents() {\n\t\tif (this.breakpoint === this.sizeS && this.sideContentVisibility !== SideContentVisibility.AlwaysShow) {\n\t\t\tthis._toggled = !this._toggled;\n\t\t}\n\t}\n\n\tget classes(): ClassMap {\n\t\tconst gridPrefix = \"ui5-dsc-span\",\n\t\t\tmcSpan = this._toggled ? this._scSpan : this._mcSpan,\n\t\t\tscSpan = this._toggled ? this._mcSpan : this._scSpan,\n\t\t\tclasses: ClassMap = {\n\t\t\t\tmain: {\n\t\t\t\t\t\"ui5-dsc-main\": true,\n\t\t\t\t},\n\t\t\t\tside: {\n\t\t\t\t\t\"ui5-dsc-side\": true,\n\t\t\t\t},\n\t\t\t};\n\n\t\tclasses.main[`${gridPrefix}-${mcSpan}`] = true;\n\t\tclasses.side[`${gridPrefix}-${scSpan}`] = true;\n\n\t\treturn classes;\n\t}\n\n\tget styles() {\n\t\tconst isToggled = this.breakpoint === this.sizeS && this._toggled,\n\t\t\tmcSpan = isToggled ? this._scSpan : this._mcSpan,\n\t\t\tscSpan = isToggled ? this._mcSpan : this._scSpan,\n\t\t\tcontentHeight = this.breakpoint === this.sizeS && this.sideContentVisibility !== SideContentVisibility.AlwaysShow ? \"100%\" : \"auto\";\n\n\t\treturn {\n\t\t\troot: {\n\t\t\t\t\"flex-wrap\": this._mcSpan === \"12\" ? \"wrap\" : \"nowrap\",\n\t\t\t},\n\t\t\tmain: {\n\t\t\t\t\"height\": mcSpan === this.span12 ? contentHeight : \"100%\",\n\t\t\t},\n\t\t\tside: {\n\t\t\t\t\"height\": scSpan === this.span12 ? contentHeight : \"100%\",\n\t\t\t},\n\t\t};\n\t}\n\n\tget accInfo() {\n\t\treturn {\n\t\t\t\"label\": DynamicSideContent.i18nBundle.getText(DSC_SIDE_ARIA_LABEL),\n\t\t};\n\t}\n\n\tget sizeS() {\n\t\treturn \"S\";\n\t}\n\n\tget sizeM() {\n\t\treturn \"M\";\n\t}\n\n\tget sizeL() {\n\t\treturn \"L\";\n\t}\n\n\tget sizeXL() {\n\t\treturn \"XL\";\n\t}\n\n\tget span0() {\n\t\treturn \"0\";\n\t}\n\n\tget span3() {\n\t\treturn \"3\";\n\t}\n\n\tget span4() {\n\t\treturn \"4\";\n\t}\n\n\tget span6() {\n\t\treturn \"6\";\n\t}\n\n\tget span8() {\n\t\treturn \"8\";\n\t}\n\n\tget span9() {\n\t\treturn \"9\";\n\t}\n\n\tget span12() {\n\t\treturn \"12\";\n\t}\n\n\tget spanFixed() {\n\t\treturn \"fixed\";\n\t}\n\n\tget containerWidth() {\n\t\treturn (this.parentElement as HTMLElement).clientWidth;\n\t}\n\n\tget breakpoint() {\n\t\tlet size;\n\n\t\tif (this.containerWidth <= S_M_BREAKPOINT) {\n\t\t\tsize = this.sizeS;\n\t\t} else if (this.containerWidth > S_M_BREAKPOINT && this.containerWidth <= M_L_BREAKPOINT) {\n\t\t\tsize = this.sizeM;\n\t\t} else if (this.containerWidth > M_L_BREAKPOINT && this.containerWidth <= L_XL_BREAKPOINT) {\n\t\t\tsize = this.sizeL;\n\t\t} else {\n\t\t\tsize = this.sizeXL;\n\t\t}\n\n\t\treturn size;\n\t}\n\n\tget _isSideContentFirst() {\n\t\treturn this.sideContentPosition === SideContentPosition.Start;\n\t}\n\n\thandleResize() {\n\t\tthis._resizeContents();\n\t}\n\n\t_resizeContents() {\n\t\tlet mainSize!: string,\n\t\t\tsideSize!: string,\n\t\t\tsideVisible!: boolean;\n\n\t\t// initial set contents sizes\n\t\tswitch (this.breakpoint) {\n\t\tcase this.sizeS:\n\t\t\tmainSize = this.span12;\n\t\t\tsideSize = this.span12;\n\t\t\tbreak;\n\t\tcase this.sizeM:\n\t\t\tif (this.sideContentFallDown === SideContentFallDown.BelowXL\n\t\t\t\t\|\| this.sideContentFallDown === SideContentFallDown.BelowL\n\t\t\t\t\|\| (this.containerWidth <= MINIMUM_WIDTH_BREAKPOINT && this.sideContentFallDown === SideContentFallDown.OnMinimumWidth)) {\n\t\t\t\tmainSize = this.span12;\n\t\t\t\tsideSize = this.span12;\n\t\t\t} else {\n\t\t\t\tmainSize = this.equalSplit ? this.span6 : this.spanFixed;\n\t\t\t\tsideSize = this.equalSplit ? this.span6 : this.spanFixed;\n\t\t\t}\n\t\t\tsideVisible = this.sideContentVisibility === SideContentVisibility.ShowAboveS\n\t\t\t\t\|\| this.sideContentVisibility === SideContentVisibility.AlwaysShow;\n\t\t\tbreak;\n\t\tcase this.sizeL:\n\t\t\tif (this.sideContentFallDown === SideContentFallDown.BelowXL) {\n\t\t\t\tmainSize = this.span12;\n\t\t\t\tsideSize = this.span12;\n\t\t\t} else {\n\t\t\t\tmainSize = this.equalSplit ? this.span6 : this.span8;\n\t\t\t\tsideSize = this.equalSplit ? this.span6 : this.span4;\n\t\t\t}\n\t\t\tsideVisible = this.sideContentVisibility === SideContentVisibility.ShowAboveS\n\t\t\t\t\|\| this.sideContentVisibility === SideContentVisibility.ShowAboveM\n\t\t\t\t\|\| this.sideContentVisibility === SideContentVisibility.AlwaysShow;\n\t\t\tbreak;\n\t\tcase this.sizeXL:\n\t\t\tmainSize = this.equalSplit ? this.span6 : this.span9;\n\t\t\tsideSize = this.equalSplit ? this.span6 : this.span3;\n\t\t\tsideVisible = this.sideContentVisibility !== SideContentVisibility.NeverShow;\n\t\t}\n\n\t\tif (this.sideContentVisibility === SideContentVisibility.AlwaysShow) {\n\t\t\tsideVisible = true;\n\t\t}\n\n\t\t// modify sizes of the contents depending on hideMainContent and hideSideContent properties\n\t\tif (this.hideSideContent) {\n\t\t\tmainSize = this.hideMainContent ? this.span0 : this.span12;\n\t\t\tsideSize = this.span0;\n\t\t\tsideVisible = false;\n\t\t}\n\n\t\tif (this.hideMainContent) {\n\t\t\tmainSize = this.span0;\n\t\t\tsideSize = this.hideSideContent ? this.span0 : this.span12;\n\t\t\tsideVisible = true;\n\t\t}\n\n\t\t// set final sizes of the contents\n\t\tif (!sideVisible) {\n\t\t\tmainSize = this.span12;\n\t\t\tsideSize = this.span0;\n\t\t}\n\n\t\t// fire \"layout-change\" event\n\t\tif (this._currentBreakpoint !== this.breakpoint) {\n\t\t\tconst eventParams = {\n\t\t\t\tcurrentBreakpoint: this.breakpoint,\n\t\t\t\tpreviousBreakpoint: this._currentBreakpoint,\n\t\t\t\tmainContentVisible: mainSize !== this.span0,\n\t\t\t\tsideContentVisible: sideSize !== this.span0,\n\t\t\t};\n\t\t\tthis.fireEvent(\"layout-change\", eventParams);\n\t\t\tthis._currentBreakpoint = this.breakpoint;\n\t\t}\n\n\t\t// update contents sizes\n\t\tthis._setSpanSizes(mainSize, sideSize);\n\t}\n\n\t_setSpanSizes(mainSize: string, sideSize: string) {\n\t\tthis._mcSpan = mainSize;\n\t\tthis._scSpan = sideSize;\n\t\tif (this.breakpoint !== this.sizeS) {\n\t\t\tthis._toggled = false;\n\t\t}\n\t}\n}\n\nDynamicSideContent.define();\n\nexport default DynamicSideContent;\n"]}
1	+ {"version":3,"file":"DynamicSideContent.js","sourceRoot":"","sources":["../src/DynamicSideContent.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,KAAK,MAAM,kDAAkD,CAAC;AACrE,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAGnE,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAC3E,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,aAAa,MAAM,wDAAwD,CAAC;AACnF,OAAO,mBAAmB,MAAM,gCAAgC,CAAC;AACjE,OAAO,qBAAqB,MAAM,kCAAkC,CAAC;AACrE,OAAO,mBAAmB,MAAM,gCAAgC,CAAC;AACjE,OAAO,0BAA0B,MAAM,yDAAyD,CAAC;AAEjG,SAAS;AACT,OAAO,qBAAqB,MAAM,8CAA8C,CAAC;AAEjF,QAAQ;AACR,OAAO,EACN,mBAAmB,GACnB,MAAM,mCAAmC,CAAC;AAE3C,+BAA+B;AAC/B,MAAM,cAAc,GAAG,GAAG,EAAE,0CAA0C;AACrE,cAAc,GAAG,IAAI,EAAE,0CAA0C;AACjE,eAAe,GAAG,IAAI,EAAE,2CAA2C;AACnE,wBAAwB,GAAG,GAAG,CAAC,CAAC,6EAA6E;AAE9G;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AAgCH,IAAM,kBAAkB,0BAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAsJ1C;QACC,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACxD,CAAC;IAMD,MAAM,CAAC,KAAK,CAAC,QAAQ;QACpB,oBAAkB,CAAC,UAAU,GAAG,MAAM,aAAa,CAAC,0BAA0B,CAAC,CAAC;IACjF,CAAC;IAED,gBAAgB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;IACxB,CAAC;IAED,UAAU;QACT,aAAa,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IACvD,CAAC;IAED,SAAS;QACR,aAAa,CAAC,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IACzD,CAAC;IAED;;;;;OAKG;IACH,cAAc;QACb,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,qBAAqB,KAAK,qBAAqB,CAAC,UAAU,EAAE;YACtG,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;SAC/B;IACF,CAAC;IAED,IAAI,OAAO;QACV,MAAM,UAAU,GAAG,cAAc,EAChC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,EACpD,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,EACpD,OAAO,GAAa;YACnB,IAAI,EAAE;gBACL,cAAc,EAAE,IAAI;aACpB;YACD,IAAI,EAAE;gBACL,cAAc,EAAE,IAAI;aACpB;SACD,CAAC;QAEH,OAAO,CAAC,IAAI,CAAC,GAAG,UAAU,IAAI,MAAM,EAAE,CAAC,GAAG,IAAI,CAAC;QAC/C,OAAO,CAAC,IAAI,CAAC,GAAG,UAAU,IAAI,MAAM,EAAE,CAAC,GAAG,IAAI,CAAC;QAE/C,OAAO,OAAO,CAAC;IAChB,CAAC;IAED,IAAI,MAAM;QACT,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,EAChE,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,EAChD,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,EAChD,aAAa,GAAG,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,qBAAqB,KAAK,qBAAqB,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;QAErI,OAAO;YACN,IAAI,EAAE;gBACL,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;aACtD;YACD,IAAI,EAAE;gBACL,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM;aACzD;YACD,IAAI,EAAE;gBACL,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM;aACzD;SACD,CAAC;IACH,CAAC;IAED,IAAI,OAAO;QACV,OAAO;YACN,OAAO,EAAE,oBAAkB,CAAC,UAAU,CAAC,OAAO,CAAC,mBAAmB,CAAC;SACnE,CAAC;IACH,CAAC;IAED,IAAI,KAAK;QACR,OAAO,GAAG,CAAC;IACZ,CAAC;IAED,IAAI,KAAK;QACR,OAAO,GAAG,CAAC;IACZ,CAAC;IAED,IAAI,KAAK;QACR,OAAO,GAAG,CAAC;IACZ,CAAC;IAED,IAAI,MAAM;QACT,OAAO,IAAI,CAAC;IACb,CAAC;IAED,IAAI,KAAK;QACR,OAAO,GAAG,CAAC;IACZ,CAAC;IAED,IAAI,KAAK;QACR,OAAO,GAAG,CAAC;IACZ,CAAC;IAED,IAAI,KAAK;QACR,OAAO,GAAG,CAAC;IACZ,CAAC;IAED,IAAI,KAAK;QACR,OAAO,GAAG,CAAC;IACZ,CAAC;IAED,IAAI,KAAK;QACR,OAAO,GAAG,CAAC;IACZ,CAAC;IAED,IAAI,KAAK;QACR,OAAO,GAAG,CAAC;IACZ,CAAC;IAED,IAAI,MAAM;QACT,OAAO,IAAI,CAAC;IACb,CAAC;IAED,IAAI,SAAS;QACZ,OAAO,OAAO,CAAC;IAChB,CAAC;IAED,IAAI,cAAc;QACjB,OAAQ,IAAI,CAAC,aAA6B,CAAC,WAAW,CAAC;IACxD,CAAC;IAED,IAAI,UAAU;QACb,IAAI,IAAI,CAAC;QAET,IAAI,IAAI,CAAC,cAAc,IAAI,cAAc,EAAE;YAC1C,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC;SAClB;aAAM,IAAI,IAAI,CAAC,cAAc,GAAG,cAAc,IAAI,IAAI,CAAC,cAAc,IAAI,cAAc,EAAE;YACzF,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC;SAClB;aAAM,IAAI,IAAI,CAAC,cAAc,GAAG,cAAc,IAAI,IAAI,CAAC,cAAc,IAAI,eAAe,EAAE;YAC1F,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC;SAClB;aAAM;YACN,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC;SACnB;QAED,OAAO,IAAI,CAAC;IACb,CAAC;IAED,IAAI,mBAAmB;QACtB,OAAO,IAAI,CAAC,mBAAmB,KAAK,mBAAmB,CAAC,KAAK,CAAC;IAC/D,CAAC;IAED,YAAY;QACX,IAAI,CAAC,eAAe,EAAE,CAAC;IACxB,CAAC;IAED,eAAe;QACd,IAAI,QAAiB,EACpB,QAAiB,EACjB,WAAqB,CAAC;QAEvB,6BAA6B;QAC7B,QAAQ,IAAI,CAAC,UAAU,EAAE;YACzB,KAAK,IAAI,CAAC,KAAK;gBACd,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC;gBACvB,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC;gBACvB,MAAM;YACP,KAAK,IAAI,CAAC,KAAK;gBACd,IAAI,IAAI,CAAC,mBAAmB,KAAK,mBAAmB,CAAC,OAAO;uBACxD,IAAI,CAAC,mBAAmB,KAAK,mBAAmB,CAAC,MAAM;uBACvD,CAAC,IAAI,CAAC,cAAc,IAAI,wBAAwB,IAAI,IAAI,CAAC,mBAAmB,KAAK,mBAAmB,CAAC,cAAc,CAAC,EAAE;oBACzH,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC;oBACvB,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC;iBACvB;qBAAM;oBACN,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;oBACzD,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;iBACzD;gBACD,WAAW,GAAG,IAAI,CAAC,qBAAqB,KAAK,qBAAqB,CAAC,UAAU;uBACzE,IAAI,CAAC,qBAAqB,KAAK,qBAAqB,CAAC,UAAU,CAAC;gBACpE,MAAM;YACP,KAAK,IAAI,CAAC,KAAK;gBACd,IAAI,IAAI,CAAC,mBAAmB,KAAK,mBAAmB,CAAC,OAAO,EAAE;oBAC7D,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC;oBACvB,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC;iBACvB;qBAAM;oBACN,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;oBACrD,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;iBACrD;gBACD,WAAW,GAAG,IAAI,CAAC,qBAAqB,KAAK,qBAAqB,CAAC,UAAU;uBACzE,IAAI,CAAC,qBAAqB,KAAK,qBAAqB,CAAC,UAAU;uBAC/D,IAAI,CAAC,qBAAqB,KAAK,qBAAqB,CAAC,UAAU,CAAC;gBACpE,MAAM;YACP,KAAK,IAAI,CAAC,MAAM;gBACf,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;gBACrD,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;gBACrD,WAAW,GAAG,IAAI,CAAC,qBAAqB,KAAK,qBAAqB,CAAC,SAAS,CAAC;SAC7E;QAED,IAAI,IAAI,CAAC,qBAAqB,KAAK,qBAAqB,CAAC,UAAU,EAAE;YACpE,WAAW,GAAG,IAAI,CAAC;SACnB;QAED,2FAA2F;QAC3F,IAAI,IAAI,CAAC,eAAe,EAAE;YACzB,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;YAC3D,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC;YACtB,WAAW,GAAG,KAAK,CAAC;SACpB;QAED,IAAI,IAAI,CAAC,eAAe,EAAE;YACzB,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC;YACtB,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;YAC3D,WAAW,GAAG,IAAI,CAAC;SACnB;QAED,kCAAkC;QAClC,IAAI,CAAC,WAAW,EAAE;YACjB,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC;YACvB,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC;SACtB;QAED,6BAA6B;QAC7B,IAAI,IAAI,CAAC,kBAAkB,KAAK,IAAI,CAAC,UAAU,EAAE;YAChD,MAAM,WAAW,GAAG;gBACnB,iBAAiB,EAAE,IAAI,CAAC,UAAU;gBAClC,kBAAkB,EAAE,IAAI,CAAC,kBAAkB;gBAC3C,kBAAkB,EAAE,QAAQ,KAAK,IAAI,CAAC,KAAK;gBAC3C,kBAAkB,EAAE,QAAQ,KAAK,IAAI,CAAC,KAAK;aAC3C,CAAC;YACF,IAAI,CAAC,SAAS,CAAC,eAAe,EAAE,WAAW,CAAC,CAAC;YAC7C,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,UAAU,CAAC;SAC1C;QAED,wBAAwB;QACxB,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IACxC,CAAC;IAED,aAAa,CAAC,QAAgB,EAAE,QAAgB;QAC/C,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC;QACxB,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC;QACxB,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,KAAK,EAAE;YACnC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;SACtB;IACF,CAAC;CACD,CAAA;AAhYA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2DACF;AAY1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2DACF;AAqB1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,mBAAmB,EAAE,YAAY,EAAE,mBAAmB,CAAC,GAAG,EAAE,CAAC;+DAChC;AAuB/C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,qBAAqB,EAAE,YAAY,EAAE,qBAAqB,CAAC,UAAU,EAAE,CAAC;iEACvC;AAsBnD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,mBAAmB,EAAE,YAAY,EAAE,mBAAmB,CAAC,cAAc,EAAE,CAAC;+DAC3C;AAe/C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sDACP;AAMrB;IADC,QAAQ,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;mDAClC;AAMjB;IADC,QAAQ,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;mDAClC;AAMjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;oDAC5B;AAMnB;IADC,QAAQ,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;8DACJ;AAoB5B;IADC,IAAI,EAAE;uDAC0B;AApJ5B,kBAAkB;IA/BvB,aAAa,CAAC;QACd,GAAG,EAAE,0BAA0B;QAC/B,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,qBAAqB;QAC7B,QAAQ,EAAE,0BAA0B;KACpC,CAAC;IACF;;;;;;;;OAQG;;IACF,KAAK,CAAC,eAAe,EAAE;QACvB,MAAM,EAAE;YACP,iBAAiB,EAAE;gBAClB,IAAI,EAAE,MAAM;aACZ;YACD,kBAAkB,EAAE;gBACnB,IAAI,EAAE,MAAM;aACZ;YACD,kBAAkB,EAAE;gBACnB,IAAI,EAAE,OAAO;aACb;YACD,kBAAkB,EAAE;gBACnB,IAAI,EAAE,OAAO;aACb;SACD;KACD,CAAC;GACI,kBAAkB,CA2YvB;AAED,kBAAkB,CAAC,MAAM,EAAE,CAAC;AAE5B,eAAe,kBAAkB,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport type { ClassMap } from \"@ui5/webcomponents-base/dist/types.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport SideContentPosition from \"./types/SideContentPosition.js\";\nimport SideContentVisibility from \"./types/SideContentVisibility.js\";\nimport SideContentFallDown from \"./types/SideContentFallDown.js\";\nimport DynamicSideContentTemplate from \"./generated/templates/DynamicSideContentTemplate.lit.js\";\n\n// Styles\nimport DynamicSideContentCss from \"./generated/themes/DynamicSideContent.css.js\";\n\n// Texts\nimport {\n\tDSC_SIDE_ARIA_LABEL,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Breakpoint-related constants\nconst S_M_BREAKPOINT = 720,\t// Breakpoint between S and M screen sizes\n\tM_L_BREAKPOINT = 1024, // Breakpoint between M and L screen sizes\n\tL_XL_BREAKPOINT = 1440, // Breakpoint between L and XL screen sizes\n\tMINIMUM_WIDTH_BREAKPOINT = 960; // Minimum width of the control where main and side contents are side by side\n\n/*\n @class\n \n <h3 class=\"comment-api-title\">Overview</h3>\n \n The DynamicSideContent (<code>ui5-dynamic-side-content</code>) is a layout component that allows additional content\n * to be displayed in a way that flexibly adapts to different screen sizes. The side\n * content appears in a container next to or directly below the main content\n * (it doesn't overlay). When the side content is triggered, the main content becomes\n * narrower (if appearing side-by-side). The side content contains a separate scrollbar\n * when appearing next to the main content.\n \n \n * <h3>Usage</h3>\n \n <i>When to use?</i>\n \n Use this component if you want to display relevant information that is not critical\n * for users to complete a task. Users should have access to all the key functions and\n * critical information in the app even if they do not see the side content. This is\n * important because on smaller screen sizes it may be difficult to display the side\n * content in a way that is easily accessible for the user.\n \n <i>When not to use?</i>\n \n Don't use it if you want to display navigation or critical information that prevents\n * users from completing a task when they have no access to the side content.\n \n \n * <h3>Responsive Behavior</h3>\n \n Screen width > 1440px\n \n <ul><li>Main vs. side content ratio is 75 vs. 25 percent (with a minimum of 320px\n * each).</li>\n * <li>If the application defines a trigger, the side content can be hidden.</li></ul>\n \n Screen width <= 1440px and > 1024px\n \n <ul><li>Main vs. side content ratio is 66.666 vs. 33.333 percent (with a minimum of\n * 320px each). If the side content width falls below 320 px, it automatically slides\n * under the main content, unless the app development team specifies that it should\n * disappear.</li></ul>\n \n Screen width <= 1024px and > 720px\n \n <ul><li>The side content ratio is fixed to 340px, and the main content takes the rest\n * of the width. Only if the <code>sideContentFallDown</code> is set to <code>OnMinimumWidth</code>\n * and screen width is <= 960px and > 720px the side content falls below the main content.</li></ul>\n \n Screen width <= 720px (for example on a mobile device)\n \n <ul><li>In this case, the side content automatically disappears from the screen (unless\n * specified to stay under the content by setting of <code>sideContentVisibility</code>\n * property to <code>AlwaysShow</code>) and can be triggered from a pre-set trigger\n * (specified within the app). When the side content is triggered, it replaces the main\n * content. We recommend that you always place the trigger for the side content in the\n * same location, such as in the app footer.</li></ul>\n \n A special case allows switching the comparison mode between the main and side content.\n * In this case, the screen is split into 50:50 percent for main vs. side content. The\n * responsive behavior of the equal split is the same as in the standard view - the\n * side content disappears on screen widths of less than 720 px and can only be\n * viewed by triggering it.\n \n <h3>ES6 Module Import</h3>\n \n <code>import \"@ui5/webcomponents-fiori/dist/DynamicSideContent\";</code>\n \n @constructor\n * @author SAP SE\n * @alias sap.ui.webc.fiori.DynamicSideContent\n * @extends sap.ui.webc.base.UI5Element\n * @tagname ui5-dynamic-side-content\n * @public\n * @since 1.1.0\n /\n@customElement({\n\ttag: \"ui5-dynamic-side-content\",\n\trenderer: litRender,\n\tstyles: DynamicSideContentCss,\n\ttemplate: DynamicSideContentTemplate,\n})\n/\n Fires when the current breakpoint has been changed.\n * @event sap.ui.webc.fiori.DynamicSideContent#layout-change\n * @param {string} currentBreakpoint the current breakpoint.\n * @param {string} previousBreakpoint the breakpoint that was active before change to current breakpoint.\n * @param {boolean} mainContentVisible visibility of the main content.\n * @param {boolean} sideContentVisible visibility of the side content.\n * @public\n /\n@event(\"layout-change\", {\n\tdetail: {\n\t\tcurrentBreakpoint: {\n\t\t\ttype: String,\n\t\t},\n\t\tpreviousBreakpoint: {\n\t\t\ttype: String,\n\t\t},\n\t\tmainContentVisible: {\n\t\t\ttype: Boolean,\n\t\t},\n\t\tsideContentVisible: {\n\t\t\ttype: Boolean,\n\t\t},\n\t},\n})\nclass DynamicSideContent extends UI5Element {\n\t/\n\t Defines the visibility of the main content.\n\t \n\t @type {boolean}\n\t * @name sap.ui.webc.fiori.DynamicSideContent.prototype.hideMainContent\n\t * @defaultvalue false\n\t * @public\n\t \n\t /\n\t@property({ type: Boolean })\n\thideMainContent!: boolean;\n\n\t/*\n\t Defines the visibility of the side content.\n\t \n\t @type {boolean}\n\t * @name sap.ui.webc.fiori.DynamicSideContent.prototype.hideSideContent\n\t * @defaultvalue false\n\t * @public\n\t \n\t /\n\t@property({ type: Boolean })\n\thideSideContent!: boolean;\n\n\t/*\n\t Defines whether the side content is positioned before the main content (left side\n\t * in LTR mode), or after the the main content (right side in LTR mode).\n\t \n\t <br><br>\n\t * <b>The available values are:</b>\n\t \n\t <ul>\n\t * <li><code>Start</code></li>\n\t * <li><code>End</code></li>\n\t * </ul>\n\t \n\t @type {sap.ui.webc.fiori.types.SideContentPosition}\n\t * @name sap.ui.webc.fiori.DynamicSideContent.prototype.sideContentPosition\n\t * @defaultvalue \"End\"\n\t * @public\n\t \n\t /\n\t@property({ type: SideContentPosition, defaultValue: SideContentPosition.End })\n\tsideContentPosition!: `${SideContentPosition}`;\n\n\t/*\n\t Defines on which breakpoints the side content is visible.\n\t \n\t <br><br>\n\t * <b>The available values are:</b>\n\t \n\t <ul>\n\t * <li><code>AlwaysShow</code></li>\n\t * <li><code>ShowAboveL</code></li>\n\t * <li><code>ShowAboveM</code></li>\n\t * <li><code>ShowAboveS</code></li>\n\t * <li><code>NeverShow</code></li>\n\t * </ul>\n\t \n\t @type {sap.ui.webc.fiori.types.SideContentVisibility}\n\t * @name sap.ui.webc.fiori.DynamicSideContent.prototype.sideContentVisibility\n\t * @defaultvalue \"ShowAboveS\"\n\t * @public\n\t \n\t /\n\t@property({ type: SideContentVisibility, defaultValue: SideContentVisibility.ShowAboveS })\n\tsideContentVisibility!: `${SideContentVisibility}`;\n\n\t/*\n\t Defines on which breakpoints the side content falls down below the main content.\n\t \n\t <br><br>\n\t * <b>The available values are:</b>\n\t \n\t <ul>\n\t * <li><code>BelowXL</code></li>\n\t * <li><code>BelowL</code></li>\n\t * <li><code>BelowM</code></li>\n\t * <li><code>OnMinimumWidth</code></li>\n\t * </ul>\n\t \n\t @type {sap.ui.webc.fiori.types.SideContentFallDown}\n\t * @name sap.ui.webc.fiori.DynamicSideContent.prototype.sideContentFallDown\n\t * @defaultvalue \"OnMinimumWidth\"\n\t * @public\n\t \n\t /\n\t@property({ type: SideContentFallDown, defaultValue: SideContentFallDown.OnMinimumWidth })\n\tsideContentFallDown!: `${SideContentFallDown}`;\n\n\t/*\n\t Defines whether the component is in equal split mode. In this mode, the side and\n\t * the main content take 50:50 percent of the container on all screen sizes\n\t * except for phone, where the main and side contents are switching visibility\n\t * using the toggle method.\n\t \n\t @type {boolean}]\n\t * @name sap.ui.webc.fiori.DynamicSideContent.prototype.equalSplit\n\t * @defaultvalue false\n\t * @public\n\t \n\t /\n\t@property({ type: Boolean })\n\tequalSplit!: boolean;\n\n\t/*\n\t @private\n\t /\n\t@property({ defaultValue: \"0\", noAttribute: true })\n\t_mcSpan!: string;\n\n\t/\n\t @private\n\t /\n\t@property({ defaultValue: \"0\", noAttribute: true })\n\t_scSpan!: string;\n\n\t/\n\t @private\n\t /\n\t@property({ type: Boolean, noAttribute: true })\n\t_toggled!: boolean;\n\n\t/\n\t @private\n\t /\n\t@property({ noAttribute: true })\n\t_currentBreakpoint!: string;\n\n\t/\n\t Defines the main content.\n\t \n\t @type {HTMLElement[]}\n\t * @name sap.ui.webc.fiori.DynamicSideContent.prototype.default\n\t * @slot\n\t * @public\n\t /\n\n\t/\n\t Defines the side content.\n\t \n\t @type {HTMLElement[]}\n\t * @name sap.ui.webc.fiori.DynamicSideContent.prototype.sideContent\n\t * @slot\n\t * @public\n\t /\n\t@slot()\n\tsideContent!: Array<HTMLElement>;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._handleResizeBound = this.handleResize.bind(this);\n\t}\n\n\t_handleResizeBound: () => void;\n\n\tstatic i18nBundle: I18nBundle;\n\n\tstatic async onDefine() {\n\t\tDynamicSideContent.i18nBundle = await getI18nBundle(\"@ui5/webcomponents-fiori\");\n\t}\n\n\tonAfterRendering() {\n\t\tthis._resizeContents();\n\t}\n\n\tonEnterDOM() {\n\t\tResizeHandler.register(this, this._handleResizeBound);\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._handleResizeBound);\n\t}\n\n\t/\n\t Toggles visibility of main and side contents on S screen size (mobile device).\n\t * @public\n\t * @method\n\t * @name sap.ui.webc.fiori.DynamicSideContent#toggleContents\n\t */\n\ttoggleContents() {\n\t\tif (this.breakpoint === this.sizeS && this.sideContentVisibility !== SideContentVisibility.AlwaysShow) {\n\t\t\tthis._toggled = !this._toggled;\n\t\t}\n\t}\n\n\tget classes(): ClassMap {\n\t\tconst gridPrefix = \"ui5-dsc-span\",\n\t\t\tmcSpan = this._toggled ? this._scSpan : this._mcSpan,\n\t\t\tscSpan = this._toggled ? this._mcSpan : this._scSpan,\n\t\t\tclasses: ClassMap = {\n\t\t\t\tmain: {\n\t\t\t\t\t\"ui5-dsc-main\": true,\n\t\t\t\t},\n\t\t\t\tside: {\n\t\t\t\t\t\"ui5-dsc-side\": true,\n\t\t\t\t},\n\t\t\t};\n\n\t\tclasses.main[`${gridPrefix}-${mcSpan}`] = true;\n\t\tclasses.side[`${gridPrefix}-${scSpan}`] = true;\n\n\t\treturn classes;\n\t}\n\n\tget styles() {\n\t\tconst isToggled = this.breakpoint === this.sizeS && this._toggled,\n\t\t\tmcSpan = isToggled ? this._scSpan : this._mcSpan,\n\t\t\tscSpan = isToggled ? this._mcSpan : this._scSpan,\n\t\t\tcontentHeight = this.breakpoint === this.sizeS && this.sideContentVisibility !== SideContentVisibility.AlwaysShow ? \"100%\" : \"auto\";\n\n\t\treturn {\n\t\t\troot: {\n\t\t\t\t\"flex-wrap\": this._mcSpan === \"12\" ? \"wrap\" : \"nowrap\",\n\t\t\t},\n\t\t\tmain: {\n\t\t\t\t\"height\": mcSpan === this.span12 ? contentHeight : \"100%\",\n\t\t\t},\n\t\t\tside: {\n\t\t\t\t\"height\": scSpan === this.span12 ? contentHeight : \"100%\",\n\t\t\t},\n\t\t};\n\t}\n\n\tget accInfo() {\n\t\treturn {\n\t\t\t\"label\": DynamicSideContent.i18nBundle.getText(DSC_SIDE_ARIA_LABEL),\n\t\t};\n\t}\n\n\tget sizeS() {\n\t\treturn \"S\";\n\t}\n\n\tget sizeM() {\n\t\treturn \"M\";\n\t}\n\n\tget sizeL() {\n\t\treturn \"L\";\n\t}\n\n\tget sizeXL() {\n\t\treturn \"XL\";\n\t}\n\n\tget span0() {\n\t\treturn \"0\";\n\t}\n\n\tget span3() {\n\t\treturn \"3\";\n\t}\n\n\tget span4() {\n\t\treturn \"4\";\n\t}\n\n\tget span6() {\n\t\treturn \"6\";\n\t}\n\n\tget span8() {\n\t\treturn \"8\";\n\t}\n\n\tget span9() {\n\t\treturn \"9\";\n\t}\n\n\tget span12() {\n\t\treturn \"12\";\n\t}\n\n\tget spanFixed() {\n\t\treturn \"fixed\";\n\t}\n\n\tget containerWidth() {\n\t\treturn (this.parentElement as HTMLElement).clientWidth;\n\t}\n\n\tget breakpoint() {\n\t\tlet size;\n\n\t\tif (this.containerWidth <= S_M_BREAKPOINT) {\n\t\t\tsize = this.sizeS;\n\t\t} else if (this.containerWidth > S_M_BREAKPOINT && this.containerWidth <= M_L_BREAKPOINT) {\n\t\t\tsize = this.sizeM;\n\t\t} else if (this.containerWidth > M_L_BREAKPOINT && this.containerWidth <= L_XL_BREAKPOINT) {\n\t\t\tsize = this.sizeL;\n\t\t} else {\n\t\t\tsize = this.sizeXL;\n\t\t}\n\n\t\treturn size;\n\t}\n\n\tget _isSideContentFirst() {\n\t\treturn this.sideContentPosition === SideContentPosition.Start;\n\t}\n\n\thandleResize() {\n\t\tthis._resizeContents();\n\t}\n\n\t_resizeContents() {\n\t\tlet mainSize!: string,\n\t\t\tsideSize!: string,\n\t\t\tsideVisible!: boolean;\n\n\t\t// initial set contents sizes\n\t\tswitch (this.breakpoint) {\n\t\tcase this.sizeS:\n\t\t\tmainSize = this.span12;\n\t\t\tsideSize = this.span12;\n\t\t\tbreak;\n\t\tcase this.sizeM:\n\t\t\tif (this.sideContentFallDown === SideContentFallDown.BelowXL\n\t\t\t\t\|\| this.sideContentFallDown === SideContentFallDown.BelowL\n\t\t\t\t\|\| (this.containerWidth <= MINIMUM_WIDTH_BREAKPOINT && this.sideContentFallDown === SideContentFallDown.OnMinimumWidth)) {\n\t\t\t\tmainSize = this.span12;\n\t\t\t\tsideSize = this.span12;\n\t\t\t} else {\n\t\t\t\tmainSize = this.equalSplit ? this.span6 : this.spanFixed;\n\t\t\t\tsideSize = this.equalSplit ? this.span6 : this.spanFixed;\n\t\t\t}\n\t\t\tsideVisible = this.sideContentVisibility === SideContentVisibility.ShowAboveS\n\t\t\t\t\|\| this.sideContentVisibility === SideContentVisibility.AlwaysShow;\n\t\t\tbreak;\n\t\tcase this.sizeL:\n\t\t\tif (this.sideContentFallDown === SideContentFallDown.BelowXL) {\n\t\t\t\tmainSize = this.span12;\n\t\t\t\tsideSize = this.span12;\n\t\t\t} else {\n\t\t\t\tmainSize = this.equalSplit ? this.span6 : this.span8;\n\t\t\t\tsideSize = this.equalSplit ? this.span6 : this.span4;\n\t\t\t}\n\t\t\tsideVisible = this.sideContentVisibility === SideContentVisibility.ShowAboveS\n\t\t\t\t\|\| this.sideContentVisibility === SideContentVisibility.ShowAboveM\n\t\t\t\t\|\| this.sideContentVisibility === SideContentVisibility.AlwaysShow;\n\t\t\tbreak;\n\t\tcase this.sizeXL:\n\t\t\tmainSize = this.equalSplit ? this.span6 : this.span9;\n\t\t\tsideSize = this.equalSplit ? this.span6 : this.span3;\n\t\t\tsideVisible = this.sideContentVisibility !== SideContentVisibility.NeverShow;\n\t\t}\n\n\t\tif (this.sideContentVisibility === SideContentVisibility.AlwaysShow) {\n\t\t\tsideVisible = true;\n\t\t}\n\n\t\t// modify sizes of the contents depending on hideMainContent and hideSideContent properties\n\t\tif (this.hideSideContent) {\n\t\t\tmainSize = this.hideMainContent ? this.span0 : this.span12;\n\t\t\tsideSize = this.span0;\n\t\t\tsideVisible = false;\n\t\t}\n\n\t\tif (this.hideMainContent) {\n\t\t\tmainSize = this.span0;\n\t\t\tsideSize = this.hideSideContent ? this.span0 : this.span12;\n\t\t\tsideVisible = true;\n\t\t}\n\n\t\t// set final sizes of the contents\n\t\tif (!sideVisible) {\n\t\t\tmainSize = this.span12;\n\t\t\tsideSize = this.span0;\n\t\t}\n\n\t\t// fire \"layout-change\" event\n\t\tif (this._currentBreakpoint !== this.breakpoint) {\n\t\t\tconst eventParams = {\n\t\t\t\tcurrentBreakpoint: this.breakpoint,\n\t\t\t\tpreviousBreakpoint: this._currentBreakpoint,\n\t\t\t\tmainContentVisible: mainSize !== this.span0,\n\t\t\t\tsideContentVisible: sideSize !== this.span0,\n\t\t\t};\n\t\t\tthis.fireEvent(\"layout-change\", eventParams);\n\t\t\tthis._currentBreakpoint = this.breakpoint;\n\t\t}\n\n\t\t// update contents sizes\n\t\tthis._setSpanSizes(mainSize, sideSize);\n\t}\n\n\t_setSpanSizes(mainSize: string, sideSize: string) {\n\t\tthis._mcSpan = mainSize;\n\t\tthis._scSpan = sideSize;\n\t\tif (this.breakpoint !== this.sizeS) {\n\t\t\tthis._toggled = false;\n\t\t}\n\t}\n}\n\nDynamicSideContent.define();\n\nexport default DynamicSideContent;\n"]}

package/dist/FlexibleColumnLayout.d.ts CHANGED Viewed

@@ -104,7 +104,7 @@ declare class FlexibleColumnLayout extends UI5Element {
     * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.layout
     * @public
     */
-    layout: FCLLayout;
+    layout: `${FCLLayout}`;
     /**
     * Defines the visibility of the arrows,
     * used for expanding and shrinking the columns.
@@ -213,7 +213,7 @@ declare class FlexibleColumnLayout extends UI5Element {
     initialRendering: boolean;
     _handleResize: () => void;
     static i18nBundle: I18nBundle;
-    _prevLayout: FCLLayout | null;
+    _prevLayout: `${FCLLayout}` | null;
     constructor();
     static onDefine(): Promise<void>;
     static get ANIMATION_DURATION(): 0 | 560;
@@ -233,11 +233,11 @@ declare class FlexibleColumnLayout extends UI5Element {
     toggleColumns(): void;
     toggleColumn(column: string): void;
     columnResizeHandler: (e: Event) => void;
-    nextLayout(layout: FCLLayout, arrowsInfo: {
+    nextLayout(layout: `${FCLLayout}`, arrowsInfo: {
         start: boolean;
         end: boolean;
     }): undefined;
-    nextColumnLayout(layout: FCLLayout): string[];
+    nextColumnLayout(layout: `${FCLLayout}`): string[];
     calcVisibleColumns(colLayout: ColumnLayout): number;
     fireLayoutChange(arrowUsed: boolean, resize: boolean): void;
     /**

package/dist/FlexibleColumnLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FlexibleColumnLayout.js","sourceRoot":"","sources":["../src/FlexibleColumnLayout.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport Float from \"@ui5/webcomponents-base/dist/types/Float.js\";\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { I18nText } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport AnimationMode from \"@ui5/webcomponents-base/dist/types/AnimationMode.js\";\nimport { getAnimationMode } from \"@ui5/webcomponents-base/dist/config/AnimationMode.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-left.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\nimport FCLLayout from \"./types/FCLLayout.js\";\nimport type { LayoutConfiguration } from \"./fcl-utils/FCLLayout.js\";\nimport {\n\tgetLayoutsByMedia,\n\tgetNextLayoutByStartArrow,\n\tgetNextLayoutByEndArrow,\n} from \"./fcl-utils/FCLLayout.js\";\n\n// Texts\nimport {\n\tFCL_START_COLUMN_TXT,\n\tFCL_MIDDLE_COLUMN_TXT,\n\tFCL_END_COLUMN_TXT,\n\tFCL_START_COLUMN_EXPAND_BUTTON_TOOLTIP,\n\tFCL_START_COLUMN_COLLAPSE_BUTTON_TOOLTIP,\n\tFCL_END_COLUMN_EXPAND_BUTTON_TOOLTIP,\n\tFCL_END_COLUMN_COLLAPSE_BUTTON_TOOLTIP,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Template\nimport FlexibleColumnLayoutTemplate from \"./generated/templates/FlexibleColumnLayoutTemplate.lit.js\";\n\n// Styles\nimport FlexibleColumnLayoutCss from \"./generated/themes/FlexibleColumnLayout.css.js\";\n\nenum MEDIA {\n\tPHONE = \"phone\",\n\tTABLET = \"tablet\",\n\tDESKTOP = \"desktop\",\n}\n\nenum BREAKPOINTS {\n\t\"PHONE\" = 599,\n\t\"TABLET\" = 1023,\n}\n\ntype ColumnLayout = Array<string \| number>;\n\ntype FCLLayoutChangeEventDetail = {\n\tlayout: FCLLayout,\n\tcolumnLayout: ColumnLayout,\n\tstartColumnVisible: boolean,\n\tmidColumnVisible: boolean,\n\tendColumnVisible: boolean,\n\tarrowUsed: boolean,\n\tarrowsUsed: boolean,\n\tresize: boolean,\n};\n\ntype AccessiblilityTexts = {\n\tstartColumnAccessibleName?: I18nText;\n\tstartArrowContainerAccessibleName?: I18nText;\n\tstartArrowLeftText?: I18nText;\n\tstartArrowRightText?: I18nText;\n\tmidColumnAccessibleName?: I18nText;\n\tendColumnAccessibleName?: I18nText;\n\tendArrowContainerAccessibleName?: I18nText;\n\tendArrowRightText?: I18nText;\n\tendArrowLeftText?: I18nText;\n};\n\ntype AccessibilityRoles = {\n\tstartColumnRole?: I18nText;\n\tmidColumnRole?: I18nText;\n\tendColumnRole?: I18nText;\n\tstartArrowContainerRole?: I18nText;\n\tendArrowContainerRole?: I18nText;\n};\n\n/*\n @class\n \n <h3 class=\"comment-api-title\">Overview</h3>\n \n The <code>FlexibleColumnLayout</code> implements the list-detail-detail paradigm by displaying up to three pages in separate columns.\n * There are several possible layouts that can be changed either with the component API, or by pressing the arrows, displayed between the columns.\n \n <h3>Usage</h3>\n \n Use this component for applications that need to display several logical levels of related information side by side (e.g. list of items, item, sub-item, etc.).\n * The Component is flexible in a sense that the application can focus the user's attention on one particular column.\n \n <h3>Responsive Behavior</h3>\n \n The <code>FlexibleColumnLayout</code> automatically displays the maximum possible number of columns based on <code>layout</code> property and the window size.\n * The component would display 1 column for window size smaller than 599px, up to two columns between 599px and 1023px,\n * and 3 columns for sizes bigger than 1023px.\n \n <br><br>\n * <h3>Keyboard Handling</h3>\n \n <h4>Basic Navigation</h4>\n * <ul>\n * <li>[SPACE, ENTER, RETURN] - If focus is on the layout toggle button (arrow button), once activated, it triggers the associated action (such as expand/collapse the column).</li>\n * <li>This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up</code>.\n * In order to use this functionality, you need to import the following module:\n * <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code></li>\n * </ul>\n \n <h4>Fast Navigation</h4>\n * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up</code>.\n * In order to use this functionality, you need to import the following module:\n * <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code>\n * <br><br>\n \n <h3>ES6 Module Import</h3>\n \n <code>import \"@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js\";</code>\n \n @constructor\n * @author SAP SE\n * @alias sap.ui.webc.fiori.FlexibleColumnLayout\n * @extends sap.ui.webc.base.UI5Element\n * @tagname ui5-flexible-column-layout\n * @public\n * @since 1.0.0-rc.8\n /\n@customElement({\n\ttag: \"ui5-flexible-column-layout\",\n\tfastNavigation: true,\n\trenderer: litRender,\n\tstyles: FlexibleColumnLayoutCss,\n\ttemplate: FlexibleColumnLayoutTemplate,\n\tdependencies: [Button],\n})\n\n/\n Fired when the layout changes via user interaction by clicking the arrows\n * or by changing the component size due to resizing.\n \n @param {sap.ui.webc.fiori.types.FCLLayout} layout The current layout\n * @param {array} columnLayout The effective column layout, f.e [67%, 33%, 0]\n * @param {boolean} startColumnVisible Indicates if the start column is currently visible\n * @param {boolean} midColumnVisible Indicates if the middle column is currently visible\n * @param {boolean} endColumnVisible Indicates if the end column is currently visible\n * @param {boolean} arrowsUsed Indicates if the layout is changed via the arrows\n * @param {boolean} resize Indicates if the layout is changed via resizing\n * @event sap.ui.webc.fiori.FlexibleColumnLayout#layout-change\n * @public\n /\n@event(\"layout-change\", {\n\tdetail: {\n\t\tlayout: { type: FCLLayout },\n\t\tcolumnLayout: { type: Array },\n\t\tstartColumnVisible: { type: Boolean },\n\t\tmidColumnVisible: { type: Boolean },\n\t\tendColumnVisible: { type: Boolean },\n\t\tarrowsUsed: { type: Boolean },\n\t\tresize: { type: Boolean },\n\t},\n})\nclass FlexibleColumnLayout extends UI5Element {\n\t/\n\t Defines the columns layout and their proportion.\n\t* <br><br>\n\t* <b>Note:</b> The layout also depends on the screen size - one column for screens smaller than 599px,\n\t* two columns between 599px and 1023px and three columns for sizes bigger than 1023px.\n\t* <br><br>\n\t* Available options are:\n\t* <ul>\n\t* <li><code>OneColumn</code></li>\n\t* <li><code>TwoColumnsStartExpanded</code></li>\n\t* <li><code>TwoColumnsMidExpanded</code></li>\n\t* <li><code>ThreeColumnsMidExpanded</code></li>\n\t* <li><code>ThreeColumnsEndExpanded</code></li>\n\t* <li><code>ThreeColumnsStartExpandedEndHidden</code></li>\n\t* <li><code>ThreeColumnsMidExpandedEndHidden</code></li>\n\t* <li><code>MidColumnFullScreen</code></li>\n\t* <li><code>EndColumnFullScreen</code></li>\n\t* </ul>\n\t* <br><br>\n\t* <b>For example:</b> layout=<code>TwoColumnsStartExpanded</code> means the layout will display up to two columns\n\t* in 67%/33% proportion.\n\t* @type {sap.ui.webc.fiori.types.FCLLayout}\n\t* @defaultvalue \"OneColumn\"\n\t* @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.layout\n\t* @public\n\t/\n\t@property({ type: FCLLayout, defaultValue: FCLLayout.OneColumn })\n\tlayout!: FCLLayout;\n\n\t/\n\t Defines the visibility of the arrows,\n\t* used for expanding and shrinking the columns.\n\t\n\t @type {boolean}\n\t* @defaultvalue false\n\t* @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.hideArrows\n\t* @public\n\t* @since 1.0.0-rc.15\n\t/\n\t@property({ type: Boolean })\n\thideArrows!: boolean;\n\n\t/\n\t An object of strings that defines several additional accessibility texts for even further customization.\n\t\n\t It supports the following fields:\n\t* - <code>startColumnAccessibleName</code>: the accessibility name for the <code>startColumn</code> region\n\t* - <code>midColumnAccessibleName</code>: the accessibility name for the <code>midColumn</code> region\n\t* - <code>endColumnAccessibleName</code>: the accessibility name for the <code>endColumn</code> region\n\t* - <code>startArrowLeftText</code>: the text that the first arrow (between the <code>begin</code> and <code>mid</code> columns) will have when pointing to the left\n\t* - <code>startArrowRightText</code>: the text that the first arrow (between the <code>begin</code> and <code>mid</code> columns) will have when pointing to the right\n\t* - <code>endArrowLeftText</code>: the text that the second arrow (between the <code>mid</code> and <code>end</code> columns) will have when pointing to the left\n\t* - <code>endArrowRightText</code>: the text that the second arrow (between the <code>mid</code> and <code>end</code> columns) will have when pointing to the right\n\t* - <code>startArrowContainerAccessibleName</code>: the text that the first arrow container (between the <code>begin</code> and <code>mid</code> columns) will have as <code>aria-label</code>\n\t* - <code>endArrowContainerAccessibleName</code>: the text that the second arrow container (between the <code>mid</code> and <code>end</code> columns) will have as <code>aria-label</code>\n\t\n\t @type {object}\n\t* @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.accessibilityTexts\n\t* @public\n\t* @since 1.0.0-rc.11\n\t/\n\t@property({ type: Object })\n\taccessibilityTexts!: AccessiblilityTexts;\n\n\t/\n\t An object of strings that defines additional accessibility roles for further customization.\n\t\n\t It supports the following fields:\n\t* - <code>startColumnRole</code>: the accessibility role for the <code>startColumn</code>\n\t* - <code>startArrowContainerRole</code>: the accessibility role for the first arrow container (between the <code>begin</code> and <code>mid</code> columns)\n\t* - <code>midColumnRole</code>: the accessibility role for the <code>midColumn</code>\n\t* - <code>endArrowContainerRole</code>: the accessibility role for the second arrow container (between the <code>mid</code> and <code>end</code> columns)\n\t* - <code>endColumnRole</code>: the accessibility role for the <code>endColumn</code>\n\t\n\t @type {object}\n\t* @public\n\t* @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.accessibilityRoles\n\t* @since 1.1.0\n\t/\n\t@property({ type: Object })\n\taccessibilityRoles!: AccessibilityRoles;\n\n\t/\n\t Defines the component width in px.\n\t\n\t @type {sap.ui.webc.base.types.Float}\n\t* @defaultvalue 0\n\t* @private\n\t/\n\t@property({ validator: Float, defaultValue: 0 })\n\t_width!: number;\n\n\t/\n\t Defines the effective columns layout,\n\t* based on both the <code>layout</code> property and the screen size.\n\t* Example: [67%, 33%, 0], [25%, 50%, 25%], etc.\n\t\n\t @type {object}\n\t* @defaultvalue undefined\n\t* @private\n\t/\n\t@property({ type: Object, defaultValue: undefined })\n\t_columnLayout?: ColumnLayout;\n\n\t/\n\t Defines the visible columns count - 1, 2 or 3.\n\t\n\t @type {sap.ui.webc.base.types.Integer}\n\t* @defaultvalue 1\n\t* @private\n\t/\n\t@property({ validator: Integer, defaultValue: 0 })\n\t_visibleColumns!: number;\n\n\t/\n\t Allows the user to replace the whole layouts configuration\n\t\n\t @type {object}\n\t* @private\n\t* @sap-restricted\n\t/\n\t@property({ type: Object, defaultValue: undefined })\n\t_layoutsConfiguration?: LayoutConfiguration;\n\n\t/\n\t Defines the content in the start column.\n\t* @type {HTMLElement}\n\t* @slot\n\t* @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.startColumn\n\t* @public\n\t/\n\t@slot()\n\tstartColumn!: Array<HTMLElement>;\n\n\t/\n\t Defines the content in the middle column.\n\t* @type {HTMLElement}\n\t* @slot\n\t* @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.midColumn\n\t* @public\n\t/\n\t@slot()\n\tmidColumn!: Array<HTMLElement>;\n\n\t/\n\t Defines the content in the end column.\n\t* @type {HTMLElement}\n\t* @slot\n\t* @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.endColumn\n\t* @public\n\t/\n\t@slot()\n\tendColumn!: Array<HTMLElement>;\n\n\tinitialRendering: boolean;\n\t_handleResize: () => void;\n\tstatic i18nBundle: I18nBundle;\n\t_prevLayout: FCLLayout \| null;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._prevLayout = null;\n\t\tthis.initialRendering = true;\n\t\tthis._handleResize = this.handleResize.bind(this);\n\t}\n\n\tstatic async onDefine() {\n\t\tFlexibleColumnLayout.i18nBundle = await getI18nBundle(\"@ui5/webcomponents-fiori\");\n\t}\n\n\tstatic get ANIMATION_DURATION() {\n\t\treturn getAnimationMode() !== AnimationMode.None ? 560 : 0;\n\t}\n\n\tonEnterDOM() {\n\t\tResizeHandler.register(this, this._handleResize.bind(this));\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._handleResize);\n\t}\n\n\tonAfterRendering() {\n\t\tif (this.initialRendering) {\n\t\t\tthis.handleInitialRendering();\n\t\t\treturn;\n\t\t}\n\n\t\tthis.syncLayout();\n\t}\n\n\thandleInitialRendering() {\n\t\tthis._prevLayout = this.layout;\n\t\tthis.updateLayout();\n\t\tthis.initialRendering = false;\n\t}\n\n\thandleResize() {\n\t\tif (this.initialRendering) {\n\t\t\treturn;\n\t\t}\n\n\t\t// store the previous layout\n\t\tconst prevLayoutHash = this.columnLayout!.join();\n\n\t\t// update the column layout, based on the current width\n\t\tthis.updateLayout();\n\n\t\t// fire layout-change if the column layout changed\n\t\tif (prevLayoutHash !== this.columnLayout!.join()) {\n\t\t\tthis.fireLayoutChange(false, true);\n\t\t}\n\t}\n\n\tstartArrowClick() {\n\t\tthis.arrowClick({ start: true, end: false });\n\t}\n\n\tendArrowClick() {\n\t\tthis.arrowClick({ start: false, end: true });\n\t}\n\n\tarrowClick(options: { start: boolean, end: boolean }) {\n\t\t// update public property\n\t\tthis.layout = this.nextLayout(this.layout, { start: options.start, end: options.end })!;\n\n\t\t// update layout\n\t\tthis.updateLayout();\n\n\t\t// fire layout-change\n\t\tthis.fireLayoutChange(true, false);\n\t}\n\n\tupdateLayout() {\n\t\tthis._width = this.widthDOM;\n\t\tthis._columnLayout = this.nextColumnLayout(this.layout);\n\t\tthis._visibleColumns = this.calcVisibleColumns(this._columnLayout);\n\t\tthis.toggleColumns();\n\t}\n\n\tsyncLayout() {\n\t\tif (this._prevLayout !== this.layout) {\n\t\t\tthis.updateLayout();\n\t\t\tthis._prevLayout = this.layout;\n\t\t}\n\t}\n\n\ttoggleColumns() {\n\t\tthis.toggleColumn(\"start\");\n\t\tthis.toggleColumn(\"mid\");\n\t\tthis.toggleColumn(\"end\");\n\t}\n\n\ttoggleColumn(column: string) {\n\t\tlet columnWidth;\n\t\tlet columnDOM;\n\n\t\tif (column === \"start\") {\n\t\t\tcolumnWidth = this.startColumnWidth;\n\t\t\tcolumnDOM = this.startColumnDOM;\n\t\t} else if (column === \"mid\") {\n\t\t\tcolumnWidth = this.midColumnWidth;\n\t\t\tcolumnDOM = this.midColumnDOM;\n\t\t} else {\n\t\t\tcolumnWidth = this.endColumnWidth;\n\t\t\tcolumnDOM = this.endColumnDOM;\n\t\t}\n\n\t\tconst currentlyHidden = this._isColumnHidden(columnWidth);\n\t\tconst previouslyHidden = this._isColumnHidden(columnDOM.style.width);\n\n\t\t// no change\n\t\tif (currentlyHidden && previouslyHidden) {\n\t\t\treturn;\n\t\t}\n\n\t\t// column resizing: from 33% to 67%, from 25% to 50%, etc.\n\t\tif (!currentlyHidden && !previouslyHidden) {\n\t\t\tcolumnDOM.style.width = typeof columnWidth === \"number\" ? `${columnWidth}px` : columnWidth;\n\t\t\treturn;\n\t\t}\n\n\t\t// hide column: 33% to 0, 25% to 0, etc .\n\t\tif (currentlyHidden) {\n\t\t\t// animate the width\n\t\t\tcolumnDOM.style.width = typeof columnWidth === \"number\" ? `${columnWidth}px` : columnWidth;\n\n\t\t\t// hide column with delay to allow the animation runs entirely\n\t\t\tcolumnDOM.addEventListener(\"transitionend\", this.columnResizeHandler);\n\n\t\t\treturn;\n\t\t}\n\n\t\t// show column: from 0 to 33%, from 0 to 25%, etc.\n\t\tif (previouslyHidden) {\n\t\t\tcolumnDOM.removeEventListener(\"transitionend\", this.columnResizeHandler);\n\t\t\tcolumnDOM.classList.remove(\"ui5-fcl-column--hidden\");\n\t\t\tcolumnDOM.style.width = typeof columnWidth === \"number\" ? `${columnWidth}px` : columnWidth;\n\t\t}\n\t}\n\n\tcolumnResizeHandler = (e: Event) => {\n\t\t(e.target as HTMLElement).classList.add(\"ui5-fcl-column--hidden\");\n\t}\n\n\tnextLayout(layout: FCLLayout, arrowsInfo: { start: boolean, end: boolean }) {\n\t\tif (!arrowsInfo) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (arrowsInfo.start) {\n\t\t\treturn getNextLayoutByStartArrow()[layout as keyof typeof getNextLayoutByStartArrow];\n\t\t}\n\n\t\tif (arrowsInfo.end) {\n\t\t\treturn getNextLayoutByEndArrow()[layout as keyof typeof getNextLayoutByEndArrow];\n\t\t}\n\t}\n\n\tnextColumnLayout(layout: FCLLayout) {\n\t\treturn this._effectiveLayoutsByMedia[this.media][layout].layout;\n\t}\n\n\tcalcVisibleColumns(colLayout: ColumnLayout) {\n\t\treturn colLayout.filter(colWidth => !this._isColumnHidden(colWidth)).length;\n\t}\n\n\tfireLayoutChange(arrowUsed: boolean, resize: boolean) {\n\t\tthis.fireEvent<FCLLayoutChangeEventDetail>(\"layout-change\", {\n\t\t\tlayout: this.layout,\n\t\t\tcolumnLayout: this._columnLayout!,\n\t\t\tstartColumnVisible: this.startColumnVisible,\n\t\t\tmidColumnVisible: this.midColumnVisible,\n\t\t\tendColumnVisible: this.endColumnVisible,\n\t\t\tarrowUsed, // for backwards compatibility\n\t\t\tarrowsUsed: arrowUsed, // as documented\n\t\t\tresize,\n\t\t});\n\t}\n\n\t/\n\t Checks if a column is hidden based on its width.\n\t /\n\tprivate _isColumnHidden(columnWidth: number \| string): boolean {\n\t\treturn columnWidth === 0 \|\| columnWidth === \"0px\";\n\t}\n\n\t/\n\t Returns the current column layout, based on both the <code>layout</code> property and the screen size.\n\t* <br><br>\n\t* <b>For example:</b> [\"67%\", \"33%\", 0], [\"100%\", 0, 0], [\"25%\", \"50%\", \"25%\"], etc,\n\t* where the numbers represents the width of the start, middle and end columns.\n\t* @readonly\n\t* @type {array}\n\t* @defaultvalue [\"100%\", 0, 0]\n\t* @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.columnLayout\n\t* @public\n\t/\n\tget columnLayout(): ColumnLayout \| undefined {\n\t\treturn this._columnLayout;\n\t}\n\n\t/\n\t Returns if the <code>start</code> column is visible.\n\t* @readonly\n\t* @defaultvalue true\n\t* @type {boolean}\n\t* @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.startColumnVisible\n\t* @public\n\t/\n\tget startColumnVisible(): boolean {\n\t\tif (this._columnLayout) {\n\t\t\treturn !this._isColumnHidden(this._columnLayout[0]);\n\t\t}\n\n\t\treturn false;\n\t}\n\n\t/\n\t Returns if the <code>middle</code> column is visible.\n\t* @readonly\n\t* @type {boolean}\n\t* @defaultvalue false\n\t* @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.midColumnVisible\n\t* @public\n\t/\n\tget midColumnVisible(): boolean {\n\t\tif (this._columnLayout) {\n\t\t\treturn !this._isColumnHidden(this._columnLayout[1]);\n\t\t}\n\n\t\treturn false;\n\t}\n\n\t/\n\t Returns if the <code>end</code> column is visible.\n\t* @readonly\n\t* @type {boolean}\n\t* @defaultvalue false\n\t* @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.endColumnVisible\n\t* @public\n\t/\n\tget endColumnVisible(): boolean {\n\t\tif (this._columnLayout) {\n\t\t\treturn !this._isColumnHidden(this._columnLayout[2]);\n\t\t}\n\n\t\treturn false;\n\t}\n\n\t/\n\t Returns the number of currently visible columns.\n\t* @readonly\n\t* @type {sap.ui.webc.base.types.Integer}\n\t* @defaultvalue 1\n\t* @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.visibleColumns\n\t* @public\n\t*/\n\tget visibleColumns(): number {\n\t\treturn this._visibleColumns;\n\t}\n\n\tget classes() {\n\t\tconst hasAnimation = getAnimationMode() !== AnimationMode.None;\n\n\t\treturn {\n\t\t\troot: {\n\t\t\t\t\"ui5-fcl-root\": true,\n\t\t\t},\n\t\t\tcolumns: {\n\t\t\t\tstart: {\n\t\t\t\t\t\"ui5-fcl-column\": true,\n\t\t\t\t\t\"ui5-fcl-column-animation\": hasAnimation,\n\t\t\t\t\t\"ui5-fcl-column--start\": true,\n\t\t\t\t},\n\t\t\t\tmiddle: {\n\t\t\t\t\t\"ui5-fcl-column\": true,\n\t\t\t\t\t\"ui5-fcl-column-animation\": hasAnimation,\n\t\t\t\t\t\"ui5-fcl-column--middle\": true,\n\t\t\t\t},\n\t\t\t\tend: {\n\t\t\t\t\t\"ui5-fcl-column\": true,\n\t\t\t\t\t\"ui5-fcl-column-animation\": hasAnimation,\n\t\t\t\t\t\"ui5-fcl-column--end\": true,\n\t\t\t\t},\n\t\t\t},\n\t\t};\n\t}\n\n\tget styles() {\n\t\treturn {\n\t\t\tarrowsContainer: {\n\t\t\t\tstart: {\n\t\t\t\t\tdisplay: this.showStartSeparator ? \"flex\" : \"none\",\n\t\t\t\t},\n\t\t\t\tend: {\n\t\t\t\t\tdisplay: this.showEndSeparator ? \"flex\" : \"none\",\n\t\t\t\t},\n\t\t\t},\n\t\t\tarrows: {\n\t\t\t\tstart: {\n\t\t\t\t\tdisplay: this.showStartArrow ? \"inline-block\" : \"none\",\n\t\t\t\t\ttransform: this.startArrowDirection === \"mirror\" ? \"rotate(180deg)\" : \"\",\n\t\t\t\t},\n\t\t\t\tend: {\n\t\t\t\t\tdisplay: this.showEndArrow ? \"inline-block\" : \"none\",\n\t\t\t\t\ttransform: this.endArrowDirection === \"mirror\" ? \"rotate(180deg)\" : \"\",\n\t\t\t\t},\n\t\t\t},\n\t\t};\n\t}\n\n\tget startColumnWidth() {\n\t\treturn this._columnLayout ? this._columnLayout[0] : \"100%\";\n\t}\n\n\tget midColumnWidth() {\n\t\treturn this._columnLayout ? this._columnLayout[1] : \"0px\";\n\t}\n\n\tget endColumnWidth() {\n\t\treturn this._columnLayout ? this._columnLayout[2] : \"0px\";\n\t}\n\n\tget showStartSeparator() {\n\t\treturn this.effectiveArrowsInfo[0].separator \|\| this.startArrowVisibility;\n\t}\n\n\tget showEndSeparator() {\n\t\treturn this.effectiveArrowsInfo[1].separator \|\| this.endArrowVisibility;\n\t}\n\n\tget showStartArrow() {\n\t\treturn this.hideArrows ? false : this.startArrowVisibility;\n\t}\n\n\tget showEndArrow() {\n\t\treturn this.hideArrows ? false : this.endArrowVisibility;\n\t}\n\n\tget startArrowVisibility() {\n\t\treturn this.effectiveArrowsInfo[0].visible;\n\t}\n\n\tget endArrowVisibility() {\n\t\treturn this.effectiveArrowsInfo[1].visible;\n\t}\n\n\tget startArrowDirection() {\n\t\treturn this.effectiveArrowsInfo[0].dir;\n\t}\n\n\tget endArrowDirection() {\n\t\treturn this.effectiveArrowsInfo[1].dir;\n\t}\n\n\tget effectiveArrowsInfo() {\n\t\treturn this._effectiveLayoutsByMedia[this.media][this.layout].arrows;\n\t}\n\n\tget media() {\n\t\tif (this._width <= BREAKPOINTS.PHONE) {\n\t\t\treturn MEDIA.PHONE;\n\t\t}\n\n\t\tif (this._width <= BREAKPOINTS.TABLET) {\n\t\t\treturn MEDIA.TABLET;\n\t\t}\n\n\t\treturn MEDIA.DESKTOP;\n\t}\n\n\tget widthDOM() {\n\t\treturn this.getBoundingClientRect().width;\n\t}\n\n\tget startColumnDOM() {\n\t\treturn this.shadowRoot!.querySelector<HTMLElement>(\".ui5-fcl-column--start\")!;\n\t}\n\n\tget midColumnDOM() {\n\t\treturn this.shadowRoot!.querySelector<HTMLElement>(\".ui5-fcl-column--middle\")!;\n\t}\n\n\tget endColumnDOM() {\n\t\treturn this.shadowRoot!.querySelector<HTMLElement>(\".ui5-fcl-column--end\")!;\n\t}\n\n\tget accStartColumnText() {\n\t\treturn this.accessibilityTexts.startColumnAccessibleName \|\| FlexibleColumnLayout.i18nBundle.getText(FCL_START_COLUMN_TXT);\n\t}\n\n\tget accMiddleColumnText() {\n\t\treturn this.accessibilityTexts.midColumnAccessibleName \|\| FlexibleColumnLayout.i18nBundle.getText(FCL_MIDDLE_COLUMN_TXT);\n\t}\n\n\tget accEndColumnText() {\n\t\treturn this.accessibilityTexts.endColumnAccessibleName \|\| FlexibleColumnLayout.i18nBundle.getText(FCL_END_COLUMN_TXT);\n\t}\n\n\tget accStartArrowContainerText() {\n\t\treturn this.accessibilityTexts.startArrowContainerAccessibleName \|\| undefined;\n\t}\n\n\tget accEndArrowContainerText() {\n\t\treturn this.accessibilityTexts.endArrowContainerAccessibleName \|\| undefined;\n\t}\n\n\tget accStartColumnRole() {\n\t\tif (this.startColumnVisible) {\n\t\t\treturn this.accessibilityRoles.startColumnRole \|\| \"region\";\n\t\t}\n\t\treturn undefined;\n\t}\n\n\tget accMiddleColumnRole() {\n\t\tif (this.midColumnVisible) {\n\t\t\treturn this.accessibilityRoles.midColumnRole \|\| \"region\";\n\t\t}\n\t\treturn undefined;\n\t}\n\n\tget accEndColumnRole() {\n\t\tif (this.endColumnVisible) {\n\t\t\treturn this.accessibilityRoles.endColumnRole \|\| \"region\";\n\t\t}\n\t\treturn undefined;\n\t}\n\n\tget accStartArrowContainerRole() {\n\t\treturn this.accessibilityRoles.startArrowContainerRole \|\| undefined;\n\t}\n\n\tget accEndArrowContainerRole() {\n\t\treturn this.accessibilityRoles.endArrowContainerRole \|\| undefined;\n\t}\n\n\tget _effectiveLayoutsByMedia() {\n\t\treturn this._layoutsConfiguration \|\| getLayoutsByMedia();\n\t}\n\n\tget _accAttributes() {\n\t\treturn {\n\t\t\tcolumns: {\n\t\t\t\tstart: {\n\t\t\t\t\trole: this.accStartColumnRole,\n\t\t\t\t\tariaHidden: !this.startColumnVisible \|\| undefined,\n\t\t\t\t},\n\t\t\t\tmiddle: {\n\t\t\t\t\trole: this.accMiddleColumnRole,\n\t\t\t\t\tariaHidden: !this.midColumnVisible \|\| undefined,\n\t\t\t\t},\n\t\t\t\tend: {\n\t\t\t\t\trole: this.accEndColumnRole,\n\t\t\t\t\tariaHidden: !this.endColumnVisible \|\| undefined,\n\t\t\t\t},\n\t\t\t},\n\t\t};\n\t}\n\n\tget accStartArrowText() {\n\t\tconst customTexts = this.accessibilityTexts;\n\n\t\tif (this.startArrowDirection === \"mirror\") {\n\t\t\treturn customTexts.startArrowLeftText \|\| FlexibleColumnLayout.i18nBundle.getText(FCL_START_COLUMN_COLLAPSE_BUTTON_TOOLTIP);\n\t\t}\n\n\t\treturn customTexts.startArrowRightText \|\| FlexibleColumnLayout.i18nBundle.getText(FCL_START_COLUMN_EXPAND_BUTTON_TOOLTIP);\n\t}\n\n\tget accEndArrowText() {\n\t\tconst customTexts = this.accessibilityTexts;\n\n\t\tif (this.endArrowDirection === \"mirror\") {\n\t\t\treturn customTexts.endArrowRightText \|\| FlexibleColumnLayout.i18nBundle.getText(FCL_END_COLUMN_COLLAPSE_BUTTON_TOOLTIP);\n\t\t}\n\n\t\treturn customTexts.endArrowLeftText \|\| FlexibleColumnLayout.i18nBundle.getText(FCL_END_COLUMN_EXPAND_BUTTON_TOOLTIP);\n\t}\n}\n\nFlexibleColumnLayout.define();\n\nexport default FlexibleColumnLayout;\n\nexport type { MEDIA };\n"]}
1	+ {"version":3,"file":"FlexibleColumnLayout.js","sourceRoot":"","sources":["../src/FlexibleColumnLayout.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport Float from \"@ui5/webcomponents-base/dist/types/Float.js\";\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { I18nText } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport AnimationMode from \"@ui5/webcomponents-base/dist/types/AnimationMode.js\";\nimport { getAnimationMode } from \"@ui5/webcomponents-base/dist/config/AnimationMode.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-left.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\nimport FCLLayout from \"./types/FCLLayout.js\";\nimport type { LayoutConfiguration } from \"./fcl-utils/FCLLayout.js\";\nimport {\n\tgetLayoutsByMedia,\n\tgetNextLayoutByStartArrow,\n\tgetNextLayoutByEndArrow,\n} from \"./fcl-utils/FCLLayout.js\";\n\n// Texts\nimport {\n\tFCL_START_COLUMN_TXT,\n\tFCL_MIDDLE_COLUMN_TXT,\n\tFCL_END_COLUMN_TXT,\n\tFCL_START_COLUMN_EXPAND_BUTTON_TOOLTIP,\n\tFCL_START_COLUMN_COLLAPSE_BUTTON_TOOLTIP,\n\tFCL_END_COLUMN_EXPAND_BUTTON_TOOLTIP,\n\tFCL_END_COLUMN_COLLAPSE_BUTTON_TOOLTIP,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Template\nimport FlexibleColumnLayoutTemplate from \"./generated/templates/FlexibleColumnLayoutTemplate.lit.js\";\n\n// Styles\nimport FlexibleColumnLayoutCss from \"./generated/themes/FlexibleColumnLayout.css.js\";\n\nenum MEDIA {\n\tPHONE = \"phone\",\n\tTABLET = \"tablet\",\n\tDESKTOP = \"desktop\",\n}\n\nenum BREAKPOINTS {\n\t\"PHONE\" = 599,\n\t\"TABLET\" = 1023,\n}\n\ntype ColumnLayout = Array<string \| number>;\n\ntype FCLLayoutChangeEventDetail = {\n\tlayout: `${FCLLayout}`,\n\tcolumnLayout: ColumnLayout,\n\tstartColumnVisible: boolean,\n\tmidColumnVisible: boolean,\n\tendColumnVisible: boolean,\n\tarrowUsed: boolean,\n\tarrowsUsed: boolean,\n\tresize: boolean,\n};\n\ntype AccessiblilityTexts = {\n\tstartColumnAccessibleName?: I18nText;\n\tstartArrowContainerAccessibleName?: I18nText;\n\tstartArrowLeftText?: I18nText;\n\tstartArrowRightText?: I18nText;\n\tmidColumnAccessibleName?: I18nText;\n\tendColumnAccessibleName?: I18nText;\n\tendArrowContainerAccessibleName?: I18nText;\n\tendArrowRightText?: I18nText;\n\tendArrowLeftText?: I18nText;\n};\n\ntype AccessibilityRoles = {\n\tstartColumnRole?: I18nText;\n\tmidColumnRole?: I18nText;\n\tendColumnRole?: I18nText;\n\tstartArrowContainerRole?: I18nText;\n\tendArrowContainerRole?: I18nText;\n};\n\n/*\n @class\n \n <h3 class=\"comment-api-title\">Overview</h3>\n \n The <code>FlexibleColumnLayout</code> implements the list-detail-detail paradigm by displaying up to three pages in separate columns.\n * There are several possible layouts that can be changed either with the component API, or by pressing the arrows, displayed between the columns.\n \n <h3>Usage</h3>\n \n Use this component for applications that need to display several logical levels of related information side by side (e.g. list of items, item, sub-item, etc.).\n * The Component is flexible in a sense that the application can focus the user's attention on one particular column.\n \n <h3>Responsive Behavior</h3>\n \n The <code>FlexibleColumnLayout</code> automatically displays the maximum possible number of columns based on <code>layout</code> property and the window size.\n * The component would display 1 column for window size smaller than 599px, up to two columns between 599px and 1023px,\n * and 3 columns for sizes bigger than 1023px.\n \n <br><br>\n * <h3>Keyboard Handling</h3>\n \n <h4>Basic Navigation</h4>\n * <ul>\n * <li>[SPACE, ENTER, RETURN] - If focus is on the layout toggle button (arrow button), once activated, it triggers the associated action (such as expand/collapse the column).</li>\n * <li>This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up</code>.\n * In order to use this functionality, you need to import the following module:\n * <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code></li>\n * </ul>\n \n <h4>Fast Navigation</h4>\n * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up</code>.\n * In order to use this functionality, you need to import the following module:\n * <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code>\n * <br><br>\n \n <h3>ES6 Module Import</h3>\n \n <code>import \"@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js\";</code>\n \n @constructor\n * @author SAP SE\n * @alias sap.ui.webc.fiori.FlexibleColumnLayout\n * @extends sap.ui.webc.base.UI5Element\n * @tagname ui5-flexible-column-layout\n * @public\n * @since 1.0.0-rc.8\n /\n@customElement({\n\ttag: \"ui5-flexible-column-layout\",\n\tfastNavigation: true,\n\trenderer: litRender,\n\tstyles: FlexibleColumnLayoutCss,\n\ttemplate: FlexibleColumnLayoutTemplate,\n\tdependencies: [Button],\n})\n\n/\n Fired when the layout changes via user interaction by clicking the arrows\n * or by changing the component size due to resizing.\n \n @param {sap.ui.webc.fiori.types.FCLLayout} layout The current layout\n * @param {array} columnLayout The effective column layout, f.e [67%, 33%, 0]\n * @param {boolean} startColumnVisible Indicates if the start column is currently visible\n * @param {boolean} midColumnVisible Indicates if the middle column is currently visible\n * @param {boolean} endColumnVisible Indicates if the end column is currently visible\n * @param {boolean} arrowsUsed Indicates if the layout is changed via the arrows\n * @param {boolean} resize Indicates if the layout is changed via resizing\n * @event sap.ui.webc.fiori.FlexibleColumnLayout#layout-change\n * @public\n /\n@event(\"layout-change\", {\n\tdetail: {\n\t\tlayout: { type: FCLLayout },\n\t\tcolumnLayout: { type: Array },\n\t\tstartColumnVisible: { type: Boolean },\n\t\tmidColumnVisible: { type: Boolean },\n\t\tendColumnVisible: { type: Boolean },\n\t\tarrowsUsed: { type: Boolean },\n\t\tresize: { type: Boolean },\n\t},\n})\nclass FlexibleColumnLayout extends UI5Element {\n\t/\n\t Defines the columns layout and their proportion.\n\t* <br><br>\n\t* <b>Note:</b> The layout also depends on the screen size - one column for screens smaller than 599px,\n\t* two columns between 599px and 1023px and three columns for sizes bigger than 1023px.\n\t* <br><br>\n\t* Available options are:\n\t* <ul>\n\t* <li><code>OneColumn</code></li>\n\t* <li><code>TwoColumnsStartExpanded</code></li>\n\t* <li><code>TwoColumnsMidExpanded</code></li>\n\t* <li><code>ThreeColumnsMidExpanded</code></li>\n\t* <li><code>ThreeColumnsEndExpanded</code></li>\n\t* <li><code>ThreeColumnsStartExpandedEndHidden</code></li>\n\t* <li><code>ThreeColumnsMidExpandedEndHidden</code></li>\n\t* <li><code>MidColumnFullScreen</code></li>\n\t* <li><code>EndColumnFullScreen</code></li>\n\t* </ul>\n\t* <br><br>\n\t* <b>For example:</b> layout=<code>TwoColumnsStartExpanded</code> means the layout will display up to two columns\n\t* in 67%/33% proportion.\n\t* @type {sap.ui.webc.fiori.types.FCLLayout}\n\t* @defaultvalue \"OneColumn\"\n\t* @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.layout\n\t* @public\n\t/\n\t@property({ type: FCLLayout, defaultValue: FCLLayout.OneColumn })\n\tlayout!: `${FCLLayout}`;\n\n\t/\n\t Defines the visibility of the arrows,\n\t* used for expanding and shrinking the columns.\n\t\n\t @type {boolean}\n\t* @defaultvalue false\n\t* @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.hideArrows\n\t* @public\n\t* @since 1.0.0-rc.15\n\t/\n\t@property({ type: Boolean })\n\thideArrows!: boolean;\n\n\t/\n\t An object of strings that defines several additional accessibility texts for even further customization.\n\t\n\t It supports the following fields:\n\t* - <code>startColumnAccessibleName</code>: the accessibility name for the <code>startColumn</code> region\n\t* - <code>midColumnAccessibleName</code>: the accessibility name for the <code>midColumn</code> region\n\t* - <code>endColumnAccessibleName</code>: the accessibility name for the <code>endColumn</code> region\n\t* - <code>startArrowLeftText</code>: the text that the first arrow (between the <code>begin</code> and <code>mid</code> columns) will have when pointing to the left\n\t* - <code>startArrowRightText</code>: the text that the first arrow (between the <code>begin</code> and <code>mid</code> columns) will have when pointing to the right\n\t* - <code>endArrowLeftText</code>: the text that the second arrow (between the <code>mid</code> and <code>end</code> columns) will have when pointing to the left\n\t* - <code>endArrowRightText</code>: the text that the second arrow (between the <code>mid</code> and <code>end</code> columns) will have when pointing to the right\n\t* - <code>startArrowContainerAccessibleName</code>: the text that the first arrow container (between the <code>begin</code> and <code>mid</code> columns) will have as <code>aria-label</code>\n\t* - <code>endArrowContainerAccessibleName</code>: the text that the second arrow container (between the <code>mid</code> and <code>end</code> columns) will have as <code>aria-label</code>\n\t\n\t @type {object}\n\t* @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.accessibilityTexts\n\t* @public\n\t* @since 1.0.0-rc.11\n\t/\n\t@property({ type: Object })\n\taccessibilityTexts!: AccessiblilityTexts;\n\n\t/\n\t An object of strings that defines additional accessibility roles for further customization.\n\t\n\t It supports the following fields:\n\t* - <code>startColumnRole</code>: the accessibility role for the <code>startColumn</code>\n\t* - <code>startArrowContainerRole</code>: the accessibility role for the first arrow container (between the <code>begin</code> and <code>mid</code> columns)\n\t* - <code>midColumnRole</code>: the accessibility role for the <code>midColumn</code>\n\t* - <code>endArrowContainerRole</code>: the accessibility role for the second arrow container (between the <code>mid</code> and <code>end</code> columns)\n\t* - <code>endColumnRole</code>: the accessibility role for the <code>endColumn</code>\n\t\n\t @type {object}\n\t* @public\n\t* @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.accessibilityRoles\n\t* @since 1.1.0\n\t/\n\t@property({ type: Object })\n\taccessibilityRoles!: AccessibilityRoles;\n\n\t/\n\t Defines the component width in px.\n\t\n\t @type {sap.ui.webc.base.types.Float}\n\t* @defaultvalue 0\n\t* @private\n\t/\n\t@property({ validator: Float, defaultValue: 0 })\n\t_width!: number;\n\n\t/\n\t Defines the effective columns layout,\n\t* based on both the <code>layout</code> property and the screen size.\n\t* Example: [67%, 33%, 0], [25%, 50%, 25%], etc.\n\t\n\t @type {object}\n\t* @defaultvalue undefined\n\t* @private\n\t/\n\t@property({ type: Object, defaultValue: undefined })\n\t_columnLayout?: ColumnLayout;\n\n\t/\n\t Defines the visible columns count - 1, 2 or 3.\n\t\n\t @type {sap.ui.webc.base.types.Integer}\n\t* @defaultvalue 1\n\t* @private\n\t/\n\t@property({ validator: Integer, defaultValue: 0 })\n\t_visibleColumns!: number;\n\n\t/\n\t Allows the user to replace the whole layouts configuration\n\t\n\t @type {object}\n\t* @private\n\t* @sap-restricted\n\t/\n\t@property({ type: Object, defaultValue: undefined })\n\t_layoutsConfiguration?: LayoutConfiguration;\n\n\t/\n\t Defines the content in the start column.\n\t* @type {HTMLElement}\n\t* @slot\n\t* @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.startColumn\n\t* @public\n\t/\n\t@slot()\n\tstartColumn!: Array<HTMLElement>;\n\n\t/\n\t Defines the content in the middle column.\n\t* @type {HTMLElement}\n\t* @slot\n\t* @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.midColumn\n\t* @public\n\t/\n\t@slot()\n\tmidColumn!: Array<HTMLElement>;\n\n\t/\n\t Defines the content in the end column.\n\t* @type {HTMLElement}\n\t* @slot\n\t* @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.endColumn\n\t* @public\n\t/\n\t@slot()\n\tendColumn!: Array<HTMLElement>;\n\n\tinitialRendering: boolean;\n\t_handleResize: () => void;\n\tstatic i18nBundle: I18nBundle;\n\t_prevLayout: `${FCLLayout}` \| null;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._prevLayout = null;\n\t\tthis.initialRendering = true;\n\t\tthis._handleResize = this.handleResize.bind(this);\n\t}\n\n\tstatic async onDefine() {\n\t\tFlexibleColumnLayout.i18nBundle = await getI18nBundle(\"@ui5/webcomponents-fiori\");\n\t}\n\n\tstatic get ANIMATION_DURATION() {\n\t\treturn getAnimationMode() !== AnimationMode.None ? 560 : 0;\n\t}\n\n\tonEnterDOM() {\n\t\tResizeHandler.register(this, this._handleResize.bind(this));\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._handleResize);\n\t}\n\n\tonAfterRendering() {\n\t\tif (this.initialRendering) {\n\t\t\tthis.handleInitialRendering();\n\t\t\treturn;\n\t\t}\n\n\t\tthis.syncLayout();\n\t}\n\n\thandleInitialRendering() {\n\t\tthis._prevLayout = this.layout;\n\t\tthis.updateLayout();\n\t\tthis.initialRendering = false;\n\t}\n\n\thandleResize() {\n\t\tif (this.initialRendering) {\n\t\t\treturn;\n\t\t}\n\n\t\t// store the previous layout\n\t\tconst prevLayoutHash = this.columnLayout!.join();\n\n\t\t// update the column layout, based on the current width\n\t\tthis.updateLayout();\n\n\t\t// fire layout-change if the column layout changed\n\t\tif (prevLayoutHash !== this.columnLayout!.join()) {\n\t\t\tthis.fireLayoutChange(false, true);\n\t\t}\n\t}\n\n\tstartArrowClick() {\n\t\tthis.arrowClick({ start: true, end: false });\n\t}\n\n\tendArrowClick() {\n\t\tthis.arrowClick({ start: false, end: true });\n\t}\n\n\tarrowClick(options: { start: boolean, end: boolean }) {\n\t\t// update public property\n\t\tthis.layout = this.nextLayout(this.layout, { start: options.start, end: options.end })!;\n\n\t\t// update layout\n\t\tthis.updateLayout();\n\n\t\t// fire layout-change\n\t\tthis.fireLayoutChange(true, false);\n\t}\n\n\tupdateLayout() {\n\t\tthis._width = this.widthDOM;\n\t\tthis._columnLayout = this.nextColumnLayout(this.layout);\n\t\tthis._visibleColumns = this.calcVisibleColumns(this._columnLayout);\n\t\tthis.toggleColumns();\n\t}\n\n\tsyncLayout() {\n\t\tif (this._prevLayout !== this.layout) {\n\t\t\tthis.updateLayout();\n\t\t\tthis._prevLayout = this.layout;\n\t\t}\n\t}\n\n\ttoggleColumns() {\n\t\tthis.toggleColumn(\"start\");\n\t\tthis.toggleColumn(\"mid\");\n\t\tthis.toggleColumn(\"end\");\n\t}\n\n\ttoggleColumn(column: string) {\n\t\tlet columnWidth;\n\t\tlet columnDOM;\n\n\t\tif (column === \"start\") {\n\t\t\tcolumnWidth = this.startColumnWidth;\n\t\t\tcolumnDOM = this.startColumnDOM;\n\t\t} else if (column === \"mid\") {\n\t\t\tcolumnWidth = this.midColumnWidth;\n\t\t\tcolumnDOM = this.midColumnDOM;\n\t\t} else {\n\t\t\tcolumnWidth = this.endColumnWidth;\n\t\t\tcolumnDOM = this.endColumnDOM;\n\t\t}\n\n\t\tconst currentlyHidden = this._isColumnHidden(columnWidth);\n\t\tconst previouslyHidden = this._isColumnHidden(columnDOM.style.width);\n\n\t\t// no change\n\t\tif (currentlyHidden && previouslyHidden) {\n\t\t\treturn;\n\t\t}\n\n\t\t// column resizing: from 33% to 67%, from 25% to 50%, etc.\n\t\tif (!currentlyHidden && !previouslyHidden) {\n\t\t\tcolumnDOM.style.width = typeof columnWidth === \"number\" ? `${columnWidth}px` : columnWidth;\n\t\t\treturn;\n\t\t}\n\n\t\t// hide column: 33% to 0, 25% to 0, etc .\n\t\tif (currentlyHidden) {\n\t\t\t// animate the width\n\t\t\tcolumnDOM.style.width = typeof columnWidth === \"number\" ? `${columnWidth}px` : columnWidth;\n\n\t\t\t// hide column with delay to allow the animation runs entirely\n\t\t\tcolumnDOM.addEventListener(\"transitionend\", this.columnResizeHandler);\n\n\t\t\treturn;\n\t\t}\n\n\t\t// show column: from 0 to 33%, from 0 to 25%, etc.\n\t\tif (previouslyHidden) {\n\t\t\tcolumnDOM.removeEventListener(\"transitionend\", this.columnResizeHandler);\n\t\t\tcolumnDOM.classList.remove(\"ui5-fcl-column--hidden\");\n\t\t\tcolumnDOM.style.width = typeof columnWidth === \"number\" ? `${columnWidth}px` : columnWidth;\n\t\t}\n\t}\n\n\tcolumnResizeHandler = (e: Event) => {\n\t\t(e.target as HTMLElement).classList.add(\"ui5-fcl-column--hidden\");\n\t}\n\n\tnextLayout(layout: `${FCLLayout}`, arrowsInfo: { start: boolean, end: boolean }) {\n\t\tif (!arrowsInfo) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (arrowsInfo.start) {\n\t\t\treturn getNextLayoutByStartArrow()[layout as keyof typeof getNextLayoutByStartArrow];\n\t\t}\n\n\t\tif (arrowsInfo.end) {\n\t\t\treturn getNextLayoutByEndArrow()[layout as keyof typeof getNextLayoutByEndArrow];\n\t\t}\n\t}\n\n\tnextColumnLayout(layout: `${FCLLayout}`) {\n\t\treturn this._effectiveLayoutsByMedia[this.media][layout].layout;\n\t}\n\n\tcalcVisibleColumns(colLayout: ColumnLayout) {\n\t\treturn colLayout.filter(colWidth => !this._isColumnHidden(colWidth)).length;\n\t}\n\n\tfireLayoutChange(arrowUsed: boolean, resize: boolean) {\n\t\tthis.fireEvent<FCLLayoutChangeEventDetail>(\"layout-change\", {\n\t\t\tlayout: this.layout,\n\t\t\tcolumnLayout: this._columnLayout!,\n\t\t\tstartColumnVisible: this.startColumnVisible,\n\t\t\tmidColumnVisible: this.midColumnVisible,\n\t\t\tendColumnVisible: this.endColumnVisible,\n\t\t\tarrowUsed, // for backwards compatibility\n\t\t\tarrowsUsed: arrowUsed, // as documented\n\t\t\tresize,\n\t\t});\n\t}\n\n\t/\n\t Checks if a column is hidden based on its width.\n\t /\n\tprivate _isColumnHidden(columnWidth: number \| string): boolean {\n\t\treturn columnWidth === 0 \|\| columnWidth === \"0px\";\n\t}\n\n\t/\n\t Returns the current column layout, based on both the <code>layout</code> property and the screen size.\n\t* <br><br>\n\t* <b>For example:</b> [\"67%\", \"33%\", 0], [\"100%\", 0, 0], [\"25%\", \"50%\", \"25%\"], etc,\n\t* where the numbers represents the width of the start, middle and end columns.\n\t* @readonly\n\t* @type {array}\n\t* @defaultvalue [\"100%\", 0, 0]\n\t* @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.columnLayout\n\t* @public\n\t/\n\tget columnLayout(): ColumnLayout \| undefined {\n\t\treturn this._columnLayout;\n\t}\n\n\t/\n\t Returns if the <code>start</code> column is visible.\n\t* @readonly\n\t* @defaultvalue true\n\t* @type {boolean}\n\t* @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.startColumnVisible\n\t* @public\n\t/\n\tget startColumnVisible(): boolean {\n\t\tif (this._columnLayout) {\n\t\t\treturn !this._isColumnHidden(this._columnLayout[0]);\n\t\t}\n\n\t\treturn false;\n\t}\n\n\t/\n\t Returns if the <code>middle</code> column is visible.\n\t* @readonly\n\t* @type {boolean}\n\t* @defaultvalue false\n\t* @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.midColumnVisible\n\t* @public\n\t/\n\tget midColumnVisible(): boolean {\n\t\tif (this._columnLayout) {\n\t\t\treturn !this._isColumnHidden(this._columnLayout[1]);\n\t\t}\n\n\t\treturn false;\n\t}\n\n\t/\n\t Returns if the <code>end</code> column is visible.\n\t* @readonly\n\t* @type {boolean}\n\t* @defaultvalue false\n\t* @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.endColumnVisible\n\t* @public\n\t/\n\tget endColumnVisible(): boolean {\n\t\tif (this._columnLayout) {\n\t\t\treturn !this._isColumnHidden(this._columnLayout[2]);\n\t\t}\n\n\t\treturn false;\n\t}\n\n\t/\n\t Returns the number of currently visible columns.\n\t* @readonly\n\t* @type {sap.ui.webc.base.types.Integer}\n\t* @defaultvalue 1\n\t* @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.visibleColumns\n\t* @public\n\t*/\n\tget visibleColumns(): number {\n\t\treturn this._visibleColumns;\n\t}\n\n\tget classes() {\n\t\tconst hasAnimation = getAnimationMode() !== AnimationMode.None;\n\n\t\treturn {\n\t\t\troot: {\n\t\t\t\t\"ui5-fcl-root\": true,\n\t\t\t},\n\t\t\tcolumns: {\n\t\t\t\tstart: {\n\t\t\t\t\t\"ui5-fcl-column\": true,\n\t\t\t\t\t\"ui5-fcl-column-animation\": hasAnimation,\n\t\t\t\t\t\"ui5-fcl-column--start\": true,\n\t\t\t\t},\n\t\t\t\tmiddle: {\n\t\t\t\t\t\"ui5-fcl-column\": true,\n\t\t\t\t\t\"ui5-fcl-column-animation\": hasAnimation,\n\t\t\t\t\t\"ui5-fcl-column--middle\": true,\n\t\t\t\t},\n\t\t\t\tend: {\n\t\t\t\t\t\"ui5-fcl-column\": true,\n\t\t\t\t\t\"ui5-fcl-column-animation\": hasAnimation,\n\t\t\t\t\t\"ui5-fcl-column--end\": true,\n\t\t\t\t},\n\t\t\t},\n\t\t};\n\t}\n\n\tget styles() {\n\t\treturn {\n\t\t\tarrowsContainer: {\n\t\t\t\tstart: {\n\t\t\t\t\tdisplay: this.showStartSeparator ? \"flex\" : \"none\",\n\t\t\t\t},\n\t\t\t\tend: {\n\t\t\t\t\tdisplay: this.showEndSeparator ? \"flex\" : \"none\",\n\t\t\t\t},\n\t\t\t},\n\t\t\tarrows: {\n\t\t\t\tstart: {\n\t\t\t\t\tdisplay: this.showStartArrow ? \"inline-block\" : \"none\",\n\t\t\t\t\ttransform: this.startArrowDirection === \"mirror\" ? \"rotate(180deg)\" : \"\",\n\t\t\t\t},\n\t\t\t\tend: {\n\t\t\t\t\tdisplay: this.showEndArrow ? \"inline-block\" : \"none\",\n\t\t\t\t\ttransform: this.endArrowDirection === \"mirror\" ? \"rotate(180deg)\" : \"\",\n\t\t\t\t},\n\t\t\t},\n\t\t};\n\t}\n\n\tget startColumnWidth() {\n\t\treturn this._columnLayout ? this._columnLayout[0] : \"100%\";\n\t}\n\n\tget midColumnWidth() {\n\t\treturn this._columnLayout ? this._columnLayout[1] : \"0px\";\n\t}\n\n\tget endColumnWidth() {\n\t\treturn this._columnLayout ? this._columnLayout[2] : \"0px\";\n\t}\n\n\tget showStartSeparator() {\n\t\treturn this.effectiveArrowsInfo[0].separator \|\| this.startArrowVisibility;\n\t}\n\n\tget showEndSeparator() {\n\t\treturn this.effectiveArrowsInfo[1].separator \|\| this.endArrowVisibility;\n\t}\n\n\tget showStartArrow() {\n\t\treturn this.hideArrows ? false : this.startArrowVisibility;\n\t}\n\n\tget showEndArrow() {\n\t\treturn this.hideArrows ? false : this.endArrowVisibility;\n\t}\n\n\tget startArrowVisibility() {\n\t\treturn this.effectiveArrowsInfo[0].visible;\n\t}\n\n\tget endArrowVisibility() {\n\t\treturn this.effectiveArrowsInfo[1].visible;\n\t}\n\n\tget startArrowDirection() {\n\t\treturn this.effectiveArrowsInfo[0].dir;\n\t}\n\n\tget endArrowDirection() {\n\t\treturn this.effectiveArrowsInfo[1].dir;\n\t}\n\n\tget effectiveArrowsInfo() {\n\t\treturn this._effectiveLayoutsByMedia[this.media][this.layout].arrows;\n\t}\n\n\tget media() {\n\t\tif (this._width <= BREAKPOINTS.PHONE) {\n\t\t\treturn MEDIA.PHONE;\n\t\t}\n\n\t\tif (this._width <= BREAKPOINTS.TABLET) {\n\t\t\treturn MEDIA.TABLET;\n\t\t}\n\n\t\treturn MEDIA.DESKTOP;\n\t}\n\n\tget widthDOM() {\n\t\treturn this.getBoundingClientRect().width;\n\t}\n\n\tget startColumnDOM() {\n\t\treturn this.shadowRoot!.querySelector<HTMLElement>(\".ui5-fcl-column--start\")!;\n\t}\n\n\tget midColumnDOM() {\n\t\treturn this.shadowRoot!.querySelector<HTMLElement>(\".ui5-fcl-column--middle\")!;\n\t}\n\n\tget endColumnDOM() {\n\t\treturn this.shadowRoot!.querySelector<HTMLElement>(\".ui5-fcl-column--end\")!;\n\t}\n\n\tget accStartColumnText() {\n\t\treturn this.accessibilityTexts.startColumnAccessibleName \|\| FlexibleColumnLayout.i18nBundle.getText(FCL_START_COLUMN_TXT);\n\t}\n\n\tget accMiddleColumnText() {\n\t\treturn this.accessibilityTexts.midColumnAccessibleName \|\| FlexibleColumnLayout.i18nBundle.getText(FCL_MIDDLE_COLUMN_TXT);\n\t}\n\n\tget accEndColumnText() {\n\t\treturn this.accessibilityTexts.endColumnAccessibleName \|\| FlexibleColumnLayout.i18nBundle.getText(FCL_END_COLUMN_TXT);\n\t}\n\n\tget accStartArrowContainerText() {\n\t\treturn this.accessibilityTexts.startArrowContainerAccessibleName \|\| undefined;\n\t}\n\n\tget accEndArrowContainerText() {\n\t\treturn this.accessibilityTexts.endArrowContainerAccessibleName \|\| undefined;\n\t}\n\n\tget accStartColumnRole() {\n\t\tif (this.startColumnVisible) {\n\t\t\treturn this.accessibilityRoles.startColumnRole \|\| \"region\";\n\t\t}\n\t\treturn undefined;\n\t}\n\n\tget accMiddleColumnRole() {\n\t\tif (this.midColumnVisible) {\n\t\t\treturn this.accessibilityRoles.midColumnRole \|\| \"region\";\n\t\t}\n\t\treturn undefined;\n\t}\n\n\tget accEndColumnRole() {\n\t\tif (this.endColumnVisible) {\n\t\t\treturn this.accessibilityRoles.endColumnRole \|\| \"region\";\n\t\t}\n\t\treturn undefined;\n\t}\n\n\tget accStartArrowContainerRole() {\n\t\treturn this.accessibilityRoles.startArrowContainerRole \|\| undefined;\n\t}\n\n\tget accEndArrowContainerRole() {\n\t\treturn this.accessibilityRoles.endArrowContainerRole \|\| undefined;\n\t}\n\n\tget _effectiveLayoutsByMedia() {\n\t\treturn this._layoutsConfiguration \|\| getLayoutsByMedia();\n\t}\n\n\tget _accAttributes() {\n\t\treturn {\n\t\t\tcolumns: {\n\t\t\t\tstart: {\n\t\t\t\t\trole: this.accStartColumnRole,\n\t\t\t\t\tariaHidden: !this.startColumnVisible \|\| undefined,\n\t\t\t\t},\n\t\t\t\tmiddle: {\n\t\t\t\t\trole: this.accMiddleColumnRole,\n\t\t\t\t\tariaHidden: !this.midColumnVisible \|\| undefined,\n\t\t\t\t},\n\t\t\t\tend: {\n\t\t\t\t\trole: this.accEndColumnRole,\n\t\t\t\t\tariaHidden: !this.endColumnVisible \|\| undefined,\n\t\t\t\t},\n\t\t\t},\n\t\t};\n\t}\n\n\tget accStartArrowText() {\n\t\tconst customTexts = this.accessibilityTexts;\n\n\t\tif (this.startArrowDirection === \"mirror\") {\n\t\t\treturn customTexts.startArrowLeftText \|\| FlexibleColumnLayout.i18nBundle.getText(FCL_START_COLUMN_COLLAPSE_BUTTON_TOOLTIP);\n\t\t}\n\n\t\treturn customTexts.startArrowRightText \|\| FlexibleColumnLayout.i18nBundle.getText(FCL_START_COLUMN_EXPAND_BUTTON_TOOLTIP);\n\t}\n\n\tget accEndArrowText() {\n\t\tconst customTexts = this.accessibilityTexts;\n\n\t\tif (this.endArrowDirection === \"mirror\") {\n\t\t\treturn customTexts.endArrowRightText \|\| FlexibleColumnLayout.i18nBundle.getText(FCL_END_COLUMN_COLLAPSE_BUTTON_TOOLTIP);\n\t\t}\n\n\t\treturn customTexts.endArrowLeftText \|\| FlexibleColumnLayout.i18nBundle.getText(FCL_END_COLUMN_EXPAND_BUTTON_TOOLTIP);\n\t}\n}\n\nFlexibleColumnLayout.define();\n\nexport default FlexibleColumnLayout;\n\nexport type { MEDIA };\n"]}

package/dist/IllustratedMessage.d.ts CHANGED Viewed

@@ -167,7 +167,7 @@ declare class IllustratedMessage extends UI5Element {
     * @name sap.ui.webc.fiori.IllustratedMessage.prototype.name
     * @public
     */
-    name: IllustrationMessageType;
+    name: `${IllustrationMessageType}`;
     /**
     * Determines which illustration breakpoint variant is used.
     * <br><br>
@@ -189,7 +189,7 @@ declare class IllustratedMessage extends UI5Element {
     * @public
     * @since 1.5.0
     */
-    size: IllustrationMessageSize;
+    size: `${IllustrationMessageSize}`;
     /**
     * Defines the subtitle of the component.
     * <br><br>
@@ -323,6 +323,6 @@ declare class IllustratedMessage extends UI5Element {
     get hasTitle(): boolean;
     get hasSubtitle(): boolean;
     get hasActions(): boolean;
-    isValidIllustration(currentIllustration: IllustrationMessageType): boolean;
+    isValidIllustration(currentIllustration: `${IllustrationMessageType}`): boolean;
 }
 export default IllustratedMessage;