npm - @ui5/webcomponents-fiori - Versions diffs - 1.23.0-rc.5 → 1.23.0 - Mend

@ui5/webcomponents-fiori 1.23.0-rc.5 → 1.23.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 (739) hide show

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\nconst BREAKPOINTS = {\n\t\"PHONE\": 599,\n\t\"TABLET\": 1023,\n} as const;\n\ntype FlexibleColumnLayoutColumnLayout = Array<string \| number>;\n\ntype FlexibleColumnLayoutLayoutChangeEventDetail = {\n\tlayout: `${FCLLayout}`,\n\tcolumnLayout: FlexibleColumnLayoutColumnLayout,\n\tstartColumnVisible: boolean,\n\tmidColumnVisible: boolean,\n\tendColumnVisible: boolean,\n\tarrowUsed: boolean,\n\tarrowsUsed: boolean,\n\tresize: boolean,\n};\n\ntype FlexibleColumnLayoutAccessibilityTexts = {\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 FlexibleColumnLayoutAccessibilityRoles = {\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 * @extends UI5Element\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 {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 * @public\n /\n@event<FlexibleColumnLayoutLayoutChangeEventDetail>(\"layout-change\", {\n\tdetail: {\n\t\t/\n\t\t @public\n\t\t/\n\t\tlayout: { type: FCLLayout },\n\t\t/\n\t\t @public\n\t\t/\n\t\tcolumnLayout: { type: Array },\n\t\t/\n\t\t @public\n\t\t/\n\t\tstartColumnVisible: { type: Boolean },\n\t\t/\n\t\t @public\n\t\t/\n\t\tmidColumnVisible: { type: Boolean },\n\t\t/\n\t\t @public\n\t\t/\n\t\tendColumnVisible: { type: Boolean },\n\t\t/\n\t\t @public\n\t\t/\n\t\tarrowsUsed: { type: Boolean },\n\t\t/\n\t\t @public\n\t\t/\n\t\tresize: { type: Boolean },\n\t\t/\n\t\t @private\n\t\t/\n\t\tarrowUsed: { 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* <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* @default \"OneColumn\"\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 @default false\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 @default {}\n\t* @public\n\t* @since 1.0.0-rc.11\n\t/\n\t@property({ type: Object })\n\taccessibilityTexts!: FlexibleColumnLayoutAccessibilityTexts;\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 @default {}\n\t* @public\n\t* @since 1.1.0\n\t/\n\t@property({ type: Object })\n\taccessibilityRoles!: FlexibleColumnLayoutAccessibilityRoles;\n\n\t/\n\t Defines the component width in px.\n\t\n\t @default 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 @default undefined\n\t* @private\n\t/\n\t@property({ type: Object, defaultValue: undefined })\n\t_columnLayout?: FlexibleColumnLayoutColumnLayout;\n\n\t/\n\t Defines the visible columns count - 1, 2 or 3.\n\t\n\t @default 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 @private\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* @public\n\t/\n\t@slot()\n\tstartColumn!: Array<HTMLElement>;\n\n\t/\n\t Defines the content in the middle column.\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* @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: FlexibleColumnLayoutColumnLayout) {\n\t\treturn colLayout.filter(colWidth => !this._isColumnHidden(colWidth)).length;\n\t}\n\n\tfireLayoutChange(arrowUsed: boolean, resize: boolean) {\n\t\tthis.fireEvent<FlexibleColumnLayoutLayoutChangeEventDetail>(\"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* @default undefined\n\t* @public\n\t/\n\tget columnLayout(): FlexibleColumnLayoutColumnLayout \| undefined {\n\t\treturn this._columnLayout;\n\t}\n\n\t/\n\t Returns if the <code>start</code> column is visible.\n\t* @default true\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* @default false\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* @default false\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* @default 1\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 {\n\tMEDIA,\n\tFlexibleColumnLayoutLayoutChangeEventDetail,\n\tFlexibleColumnLayoutAccessibilityTexts,\n\tFlexibleColumnLayoutAccessibilityRoles,\n\tFlexibleColumnLayoutColumnLayout,\n};\n"]}
1	+ {"version":3,"file":"FlexibleColumnLayout.js","sourceRoot":"","sources":["../src/FlexibleColumnLayout.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,KAAK,MAAM,kDAAkD,CAAC;AACrE,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,aAAa,MAAM,wDAAwD,CAAC;AACnF,OAAO,KAAK,MAAM,6CAA6C,CAAC;AAChE,OAAO,OAAO,MAAM,+CAA+C,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAG3E,OAAO,aAAa,MAAM,qDAAqD,CAAC;AAChF,OAAO,EAAE,gBAAgB,EAAE,MAAM,sDAAsD,CAAC;AACxF,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,kDAAkD,CAAC;AAC1D,OAAO,mDAAmD,CAAC;AAC3D,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAE7C,OAAO,EACN,iBAAiB,EACjB,yBAAyB,EACzB,uBAAuB,GACvB,MAAM,0BAA0B,CAAC;AAElC,QAAQ;AACR,OAAO,EACN,oBAAoB,EACpB,qBAAqB,EACrB,kBAAkB,EAClB,sCAAsC,EACtC,wCAAwC,EACxC,oCAAoC,EACpC,sCAAsC,GACtC,MAAM,mCAAmC,CAAC;AAE3C,WAAW;AACX,OAAO,4BAA4B,MAAM,2DAA2D,CAAC;AAErG,SAAS;AACT,OAAO,uBAAuB,MAAM,gDAAgD,CAAC;AAErF,IAAK,KAIJ;AAJD,WAAK,KAAK;IACT,wBAAe,CAAA;IACf,0BAAiB,CAAA;IACjB,4BAAmB,CAAA;AACpB,CAAC,EAJI,KAAK,KAAL,KAAK,QAIT;AAED,MAAM,WAAW,GAAG;IACnB,OAAO,EAAE,GAAG;IACZ,QAAQ,EAAE,IAAI;CACL,CAAC;AAmCX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AA0DH,IAAM,oBAAoB,4BAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAwH5C;QACC,KAAK,EAAE,CAAC;QA8IT,wBAAmB,GAAG,CAAC,CAAQ,EAAE,EAAE;YACjC,CAAC,CAAC,MAAsB,CAAC,SAAS,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAC;QACnE,CAAC,CAAA;QA9IA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC7B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACnD,CAAC;IAED,MAAM,CAAC,KAAK,CAAC,QAAQ;QACpB,sBAAoB,CAAC,UAAU,GAAG,MAAM,aAAa,CAAC,0BAA0B,CAAC,CAAC;IACnF,CAAC;IAED,MAAM,KAAK,kBAAkB;QAC5B,OAAO,gBAAgB,EAAE,KAAK,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5D,CAAC;IAED,UAAU;QACT,aAAa,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAC7D,CAAC;IAED,SAAS;QACR,aAAa,CAAC,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IACpD,CAAC;IAED,gBAAgB;QACf,IAAI,IAAI,CAAC,gBAAgB,EAAE;YAC1B,IAAI,CAAC,sBAAsB,EAAE,CAAC;YAC9B,OAAO;SACP;QAED,IAAI,CAAC,UAAU,EAAE,CAAC;IACnB,CAAC;IAED,sBAAsB;QACrB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC;QAC/B,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;IAC/B,CAAC;IAED,YAAY;QACX,IAAI,IAAI,CAAC,gBAAgB,EAAE;YAC1B,OAAO;SACP;QAED,4BAA4B;QAC5B,MAAM,cAAc,GAAG,IAAI,CAAC,YAAa,CAAC,IAAI,EAAE,CAAC;QAEjD,uDAAuD;QACvD,IAAI,CAAC,YAAY,EAAE,CAAC;QAEpB,kDAAkD;QAClD,IAAI,cAAc,KAAK,IAAI,CAAC,YAAa,CAAC,IAAI,EAAE,EAAE;YACjD,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;SACnC;IACF,CAAC;IAED,eAAe;QACd,IAAI,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC;IAC9C,CAAC;IAED,aAAa;QACZ,IAAI,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;IAC9C,CAAC;IAED,UAAU,CAAC,OAAyC;QACnD,yBAAyB;QACzB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,GAAG,EAAE,OAAO,CAAC,GAAG,EAAE,CAAE,CAAC;QAExF,gBAAgB;QAChB,IAAI,CAAC,YAAY,EAAE,CAAC;QAEpB,qBAAqB;QACrB,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IACpC,CAAC;IAED,YAAY;QACX,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC5B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACxD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACnE,IAAI,CAAC,aAAa,EAAE,CAAC;IACtB,CAAC;IAED,UAAU;QACT,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,MAAM,EAAE;YACrC,IAAI,CAAC,YAAY,EAAE,CAAC;YACpB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC;SAC/B;IACF,CAAC;IAED,aAAa;QACZ,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAC3B,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QACzB,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;IAED,YAAY,CAAC,MAAc;QAC1B,IAAI,WAAW,CAAC;QAChB,IAAI,SAAS,CAAC;QAEd,IAAI,MAAM,KAAK,OAAO,EAAE;YACvB,WAAW,GAAG,IAAI,CAAC,gBAAgB,CAAC;YACpC,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC;SAChC;aAAM,IAAI,MAAM,KAAK,KAAK,EAAE;YAC5B,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC;YAClC,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC;SAC9B;aAAM;YACN,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC;YAClC,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC;SAC9B;QAED,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;QAC1D,MAAM,gBAAgB,GAAG,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAErE,YAAY;QACZ,IAAI,eAAe,IAAI,gBAAgB,EAAE;YACxC,OAAO;SACP;QAED,0DAA0D;QAC1D,IAAI,CAAC,eAAe,IAAI,CAAC,gBAAgB,EAAE;YAC1C,SAAS,CAAC,KAAK,CAAC,KAAK,GAAG,OAAO,WAAW,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,WAAW,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC;YAC3F,OAAO;SACP;QAED,yCAAyC;QACzC,IAAI,eAAe,EAAE;YACpB,oBAAoB;YACpB,SAAS,CAAC,KAAK,CAAC,KAAK,GAAG,OAAO,WAAW,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,WAAW,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC;YAE3F,8DAA8D;YAC9D,SAAS,CAAC,gBAAgB,CAAC,eAAe,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;YAEtE,OAAO;SACP;QAED,kDAAkD;QAClD,IAAI,gBAAgB,EAAE;YACrB,SAAS,CAAC,mBAAmB,CAAC,eAAe,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;YACzE,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC;YACrD,SAAS,CAAC,KAAK,CAAC,KAAK,GAAG,OAAO,WAAW,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,WAAW,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC;SAC3F;IACF,CAAC;IAMD,UAAU,CAAC,MAAsB,EAAE,UAA4C;QAC9E,IAAI,CAAC,UAAU,EAAE;YAChB,OAAO;SACP;QAED,IAAI,UAAU,CAAC,KAAK,EAAE;YACrB,OAAO,yBAAyB,EAAE,CAAC,MAAgD,CAAC,CAAC;SACrF;QAED,IAAI,UAAU,CAAC,GAAG,EAAE;YACnB,OAAO,uBAAuB,EAAE,CAAC,MAA8C,CAAC,CAAC;SACjF;IACF,CAAC;IAED,gBAAgB,CAAC,MAAsB;QACtC,OAAO,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC;IACjE,CAAC;IAED,kBAAkB,CAAC,SAA2C;QAC7D,OAAO,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC;IAC7E,CAAC;IAED,gBAAgB,CAAC,SAAkB,EAAE,MAAe;QACnD,IAAI,CAAC,SAAS,CAA8C,eAAe,EAAE;YAC5E,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,YAAY,EAAE,IAAI,CAAC,aAAc;YACjC,kBAAkB,EAAE,IAAI,CAAC,kBAAkB;YAC3C,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;YACvC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;YACvC,SAAS;YACT,UAAU,EAAE,SAAS;YACrB,MAAM;SACN,CAAC,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,eAAe,CAAC,WAA4B;QACnD,OAAO,WAAW,KAAK,CAAC,IAAI,WAAW,KAAK,KAAK,CAAC;IACnD,CAAC;IAED;;;;;;;MAOE;IACF,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,aAAa,CAAC;IAC3B,CAAC;IAED;;;;MAIE;IACF,IAAI,kBAAkB;QACrB,IAAI,IAAI,CAAC,aAAa,EAAE;YACvB,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;SACpD;QAED,OAAO,KAAK,CAAC;IACd,CAAC;IAED;;;;MAIE;IACF,IAAI,gBAAgB;QACnB,IAAI,IAAI,CAAC,aAAa,EAAE;YACvB,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;SACpD;QAED,OAAO,KAAK,CAAC;IACd,CAAC;IAED;;;;MAIE;IACF,IAAI,gBAAgB;QACnB,IAAI,IAAI,CAAC,aAAa,EAAE;YACvB,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;SACpD;QAED,OAAO,KAAK,CAAC;IACd,CAAC;IAED;;;;MAIE;IACF,IAAI,cAAc;QACjB,OAAO,IAAI,CAAC,eAAe,CAAC;IAC7B,CAAC;IAED,IAAI,OAAO;QACV,MAAM,YAAY,GAAG,gBAAgB,EAAE,KAAK,aAAa,CAAC,IAAI,CAAC;QAE/D,OAAO;YACN,IAAI,EAAE;gBACL,cAAc,EAAE,IAAI;aACpB;YACD,OAAO,EAAE;gBACR,KAAK,EAAE;oBACN,gBAAgB,EAAE,IAAI;oBACtB,0BAA0B,EAAE,YAAY;oBACxC,uBAAuB,EAAE,IAAI;iBAC7B;gBACD,MAAM,EAAE;oBACP,gBAAgB,EAAE,IAAI;oBACtB,0BAA0B,EAAE,YAAY;oBACxC,wBAAwB,EAAE,IAAI;iBAC9B;gBACD,GAAG,EAAE;oBACJ,gBAAgB,EAAE,IAAI;oBACtB,0BAA0B,EAAE,YAAY;oBACxC,qBAAqB,EAAE,IAAI;iBAC3B;aACD;SACD,CAAC;IACH,CAAC;IAED,IAAI,MAAM;QACT,OAAO;YACN,eAAe,EAAE;gBAChB,KAAK,EAAE;oBACN,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;iBAClD;gBACD,GAAG,EAAE;oBACJ,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;iBAChD;aACD;YACD,MAAM,EAAE;gBACP,KAAK,EAAE;oBACN,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM;oBACtD,SAAS,EAAE,IAAI,CAAC,mBAAmB,KAAK,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE;iBACxE;gBACD,GAAG,EAAE;oBACJ,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM;oBACpD,SAAS,EAAE,IAAI,CAAC,iBAAiB,KAAK,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE;iBACtE;aACD;SACD,CAAC;IACH,CAAC;IAED,IAAI,gBAAgB;QACnB,OAAO,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;IAC5D,CAAC;IAED,IAAI,cAAc;QACjB,OAAO,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAC3D,CAAC;IAED,IAAI,cAAc;QACjB,OAAO,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAC3D,CAAC;IAED,IAAI,kBAAkB;QACrB,OAAO,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,SAAS,IAAI,IAAI,CAAC,oBAAoB,CAAC;IAC3E,CAAC;IAED,IAAI,gBAAgB;QACnB,OAAO,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,SAAS,IAAI,IAAI,CAAC,kBAAkB,CAAC;IACzE,CAAC;IAED,IAAI,cAAc;QACjB,OAAO,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,oBAAoB,CAAC;IAC5D,CAAC;IAED,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC;IAC1D,CAAC;IAED,IAAI,oBAAoB;QACvB,OAAO,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAC5C,CAAC;IAED,IAAI,kBAAkB;QACrB,OAAO,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAC5C,CAAC;IAED,IAAI,mBAAmB;QACtB,OAAO,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IACxC,CAAC;IAED,IAAI,iBAAiB;QACpB,OAAO,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IACxC,CAAC;IAED,IAAI,mBAAmB;QACtB,OAAO,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC;IACtE,CAAC;IAED,IAAI,KAAK;QACR,IAAI,IAAI,CAAC,MAAM,IAAI,WAAW,CAAC,KAAK,EAAE;YACrC,OAAO,KAAK,CAAC,KAAK,CAAC;SACnB;QAED,IAAI,IAAI,CAAC,MAAM,IAAI,WAAW,CAAC,MAAM,EAAE;YACtC,OAAO,KAAK,CAAC,MAAM,CAAC;SACpB;QAED,OAAO,KAAK,CAAC,OAAO,CAAC;IACtB,CAAC;IAED,IAAI,QAAQ;QACX,OAAO,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;IAC3C,CAAC;IAED,IAAI,cAAc;QACjB,OAAO,IAAI,CAAC,UAAW,CAAC,aAAa,CAAc,wBAAwB,CAAE,CAAC;IAC/E,CAAC;IAED,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,UAAW,CAAC,aAAa,CAAc,yBAAyB,CAAE,CAAC;IAChF,CAAC;IAED,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,UAAW,CAAC,aAAa,CAAc,sBAAsB,CAAE,CAAC;IAC7E,CAAC;IAED,IAAI,kBAAkB;QACrB,OAAO,IAAI,CAAC,kBAAkB,CAAC,yBAAyB,IAAI,sBAAoB,CAAC,UAAU,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC;IAC3H,CAAC;IAED,IAAI,mBAAmB;QACtB,OAAO,IAAI,CAAC,kBAAkB,CAAC,uBAAuB,IAAI,sBAAoB,CAAC,UAAU,CAAC,OAAO,CAAC,qBAAqB,CAAC,CAAC;IAC1H,CAAC;IAED,IAAI,gBAAgB;QACnB,OAAO,IAAI,CAAC,kBAAkB,CAAC,uBAAuB,IAAI,sBAAoB,CAAC,UAAU,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACvH,CAAC;IAED,IAAI,0BAA0B;QAC7B,OAAO,IAAI,CAAC,kBAAkB,CAAC,iCAAiC,IAAI,SAAS,CAAC;IAC/E,CAAC;IAED,IAAI,wBAAwB;QAC3B,OAAO,IAAI,CAAC,kBAAkB,CAAC,+BAA+B,IAAI,SAAS,CAAC;IAC7E,CAAC;IAED,IAAI,kBAAkB;QACrB,IAAI,IAAI,CAAC,kBAAkB,EAAE;YAC5B,OAAO,IAAI,CAAC,kBAAkB,CAAC,eAAe,IAAI,QAAQ,CAAC;SAC3D;QACD,OAAO,SAAS,CAAC;IAClB,CAAC;IAED,IAAI,mBAAmB;QACtB,IAAI,IAAI,CAAC,gBAAgB,EAAE;YAC1B,OAAO,IAAI,CAAC,kBAAkB,CAAC,aAAa,IAAI,QAAQ,CAAC;SACzD;QACD,OAAO,SAAS,CAAC;IAClB,CAAC;IAED,IAAI,gBAAgB;QACnB,IAAI,IAAI,CAAC,gBAAgB,EAAE;YAC1B,OAAO,IAAI,CAAC,kBAAkB,CAAC,aAAa,IAAI,QAAQ,CAAC;SACzD;QACD,OAAO,SAAS,CAAC;IAClB,CAAC;IAED,IAAI,0BAA0B;QAC7B,OAAO,IAAI,CAAC,kBAAkB,CAAC,uBAAuB,IAAI,SAAS,CAAC;IACrE,CAAC;IAED,IAAI,wBAAwB;QAC3B,OAAO,IAAI,CAAC,kBAAkB,CAAC,qBAAqB,IAAI,SAAS,CAAC;IACnE,CAAC;IAED,IAAI,wBAAwB;QAC3B,OAAO,IAAI,CAAC,qBAAqB,IAAI,iBAAiB,EAAE,CAAC;IAC1D,CAAC;IAED,IAAI,cAAc;QACjB,OAAO;YACN,OAAO,EAAE;gBACR,KAAK,EAAE;oBACN,IAAI,EAAE,IAAI,CAAC,kBAAkB;oBAC7B,UAAU,EAAE,CAAC,IAAI,CAAC,kBAAkB,IAAI,SAAS;iBACjD;gBACD,MAAM,EAAE;oBACP,IAAI,EAAE,IAAI,CAAC,mBAAmB;oBAC9B,UAAU,EAAE,CAAC,IAAI,CAAC,gBAAgB,IAAI,SAAS;iBAC/C;gBACD,GAAG,EAAE;oBACJ,IAAI,EAAE,IAAI,CAAC,gBAAgB;oBAC3B,UAAU,EAAE,CAAC,IAAI,CAAC,gBAAgB,IAAI,SAAS;iBAC/C;aACD;SACD,CAAC;IACH,CAAC;IAED,IAAI,iBAAiB;QACpB,MAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB,CAAC;QAE5C,IAAI,IAAI,CAAC,mBAAmB,KAAK,QAAQ,EAAE;YAC1C,OAAO,WAAW,CAAC,kBAAkB,IAAI,sBAAoB,CAAC,UAAU,CAAC,OAAO,CAAC,wCAAwC,CAAC,CAAC;SAC3H;QAED,OAAO,WAAW,CAAC,mBAAmB,IAAI,sBAAoB,CAAC,UAAU,CAAC,OAAO,CAAC,sCAAsC,CAAC,CAAC;IAC3H,CAAC;IAED,IAAI,eAAe;QAClB,MAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB,CAAC;QAE5C,IAAI,IAAI,CAAC,iBAAiB,KAAK,QAAQ,EAAE;YACxC,OAAO,WAAW,CAAC,iBAAiB,IAAI,sBAAoB,CAAC,UAAU,CAAC,OAAO,CAAC,sCAAsC,CAAC,CAAC;SACxH;QAED,OAAO,WAAW,CAAC,gBAAgB,IAAI,sBAAoB,CAAC,UAAU,CAAC,OAAO,CAAC,oCAAoC,CAAC,CAAC;IACtH,CAAC;CACD,CAAA;AA7jBA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,CAAC,SAAS,EAAE,CAAC;oDACzC;AAUxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wDACP;AAoBrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gEACiC;AAgB5D;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gEACiC;AAQ5D;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,CAAC;oDAChC;AAUhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC;2DACH;AAQjD;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC,EAAE,CAAC;6DACzB;AAOzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC;mEACR;AAO5C;IADC,IAAI,EAAE;yDAC0B;AAOjC;IADC,IAAI,EAAE;uDACwB;AAO/B;IADC,IAAI,EAAE;uDACwB;AAjH1B,oBAAoB;IAzDzB,aAAa,CAAC;QACd,GAAG,EAAE,4BAA4B;QACjC,cAAc,EAAE,IAAI;QACpB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,uBAAuB;QAC/B,QAAQ,EAAE,4BAA4B;QACtC,YAAY,EAAE,CAAC,MAAM,CAAC;KACtB,CAAC;IAEF;;;;;;;;;;;OAWG;;IACF,KAAK,CAA8C,eAAe,EAAE;QACpE,MAAM,EAAE;YACP;;cAEE;YACF,MAAM,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;YAC3B;;cAEE;YACF,YAAY,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;YAC7B;;cAEE;YACF,kBAAkB,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YACrC;;cAEE;YACF,gBAAgB,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YACnC;;cAEE;YACF,gBAAgB,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YACnC;;cAEE;YACF,UAAU,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC7B;;cAEE;YACF,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YACzB;;cAEE;YACF,SAAS,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC5B;KACD,CAAC;GACI,oBAAoB,CA0kBzB;AAED,oBAAoB,CAAC,MAAM,EAAE,CAAC;AAE9B,eAAe,oBAAoB,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 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\nconst BREAKPOINTS = {\n\t\"PHONE\": 599,\n\t\"TABLET\": 1023,\n} as const;\n\ntype FlexibleColumnLayoutColumnLayout = Array<string \| number>;\n\ntype FlexibleColumnLayoutLayoutChangeEventDetail = {\n\tlayout: `${FCLLayout}`,\n\tcolumnLayout: FlexibleColumnLayoutColumnLayout,\n\tstartColumnVisible: boolean,\n\tmidColumnVisible: boolean,\n\tendColumnVisible: boolean,\n\tarrowUsed: boolean,\n\tarrowsUsed: boolean,\n\tresize: boolean,\n};\n\ntype FlexibleColumnLayoutAccessibilityTexts = {\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 FlexibleColumnLayoutAccessibilityRoles = {\n\tstartColumnRole?: I18nText;\n\tmidColumnRole?: I18nText;\n\tendColumnRole?: I18nText;\n\tstartArrowContainerRole?: I18nText;\n\tendArrowContainerRole?: I18nText;\n};\n\n/*\n @class\n \n ### Overview\n \n The `FlexibleColumnLayout` 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 ### Usage\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 ### Responsive Behavior\n \n The `FlexibleColumnLayout` automatically displays the maximum possible number of columns based on `layout` 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 ### Keyboard Handling\n \n #### Basic Navigation\n \n - [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).\n * - This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up`.\n * In order to use this functionality, you need to import the following module:\n * `import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n \n #### Fast Navigation\n * This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up`.\n * In order to use this functionality, you need to import the following module:\n * `import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n \n ### ES6 Module Import\n \n `import \"@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js\";`\n * @constructor\n * @extends UI5Element\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 * @param {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 * @public\n /\n@event<FlexibleColumnLayoutLayoutChangeEventDetail>(\"layout-change\", {\n\tdetail: {\n\t\t/\n\t\t @public\n\t\t/\n\t\tlayout: { type: FCLLayout },\n\t\t/\n\t\t @public\n\t\t/\n\t\tcolumnLayout: { type: Array },\n\t\t/\n\t\t @public\n\t\t/\n\t\tstartColumnVisible: { type: Boolean },\n\t\t/\n\t\t @public\n\t\t/\n\t\tmidColumnVisible: { type: Boolean },\n\t\t/\n\t\t @public\n\t\t/\n\t\tendColumnVisible: { type: Boolean },\n\t\t/\n\t\t @public\n\t\t/\n\t\tarrowsUsed: { type: Boolean },\n\t\t/\n\t\t @public\n\t\t/\n\t\tresize: { type: Boolean },\n\t\t/\n\t\t @private\n\t\t/\n\t\tarrowUsed: { type: Boolean },\n\t},\n})\nclass FlexibleColumnLayout extends UI5Element {\n\t/\n\t Defines the columns layout and their proportion.\n\t\n\t Note: 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\n\t For example: layout=`TwoColumnsStartExpanded` means the layout will display up to two columns\n\t* in 67%/33% proportion.\n\t* @default \"OneColumn\"\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* @default false\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* - `startColumnAccessibleName`: the accessibility name for the `startColumn` region\n\t* - `midColumnAccessibleName`: the accessibility name for the `midColumn` region\n\t* - `endColumnAccessibleName`: the accessibility name for the `endColumn` region\n\t* - `startArrowLeftText`: the text that the first arrow (between the `begin` and `mid` columns) will have when pointing to the left\n\t* - `startArrowRightText`: the text that the first arrow (between the `begin` and `mid` columns) will have when pointing to the right\n\t* - `endArrowLeftText`: the text that the second arrow (between the `mid` and `end` columns) will have when pointing to the left\n\t* - `endArrowRightText`: the text that the second arrow (between the `mid` and `end` columns) will have when pointing to the right\n\t* - `startArrowContainerAccessibleName`: the text that the first arrow container (between the `begin` and `mid` columns) will have as `aria-label`\n\t* - `endArrowContainerAccessibleName`: the text that the second arrow container (between the `mid` and `end` columns) will have as `aria-label`\n\t* @default {}\n\t* @public\n\t* @since 1.0.0-rc.11\n\t/\n\t@property({ type: Object })\n\taccessibilityTexts!: FlexibleColumnLayoutAccessibilityTexts;\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* - `startColumnRole`: the accessibility role for the `startColumn`\n\t* - `startArrowContainerRole`: the accessibility role for the first arrow container (between the `begin` and `mid` columns)\n\t* - `midColumnRole`: the accessibility role for the `midColumn`\n\t* - `endArrowContainerRole`: the accessibility role for the second arrow container (between the `mid` and `end` columns)\n\t* - `endColumnRole`: the accessibility role for the `endColumn`\n\t* @default {}\n\t* @public\n\t* @since 1.1.0\n\t/\n\t@property({ type: Object })\n\taccessibilityRoles!: FlexibleColumnLayoutAccessibilityRoles;\n\n\t/\n\t Defines the component width in px.\n\t* @default 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 `layout` property and the screen size.\n\t* Example: [67%, 33%, 0], [25%, 50%, 25%], etc.\n\t* @default undefined\n\t* @private\n\t/\n\t@property({ type: Object, defaultValue: undefined })\n\t_columnLayout?: FlexibleColumnLayoutColumnLayout;\n\n\t/\n\t Defines the visible columns count - 1, 2 or 3.\n\t* @default 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* @private\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* @public\n\t/\n\t@slot()\n\tstartColumn!: Array<HTMLElement>;\n\n\t/\n\t Defines the content in the middle column.\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* @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: FlexibleColumnLayoutColumnLayout) {\n\t\treturn colLayout.filter(colWidth => !this._isColumnHidden(colWidth)).length;\n\t}\n\n\tfireLayoutChange(arrowUsed: boolean, resize: boolean) {\n\t\tthis.fireEvent<FlexibleColumnLayoutLayoutChangeEventDetail>(\"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 `layout` property and the screen size.\n\t\n\t For example: [\"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* @default undefined\n\t* @public\n\t/\n\tget columnLayout(): FlexibleColumnLayoutColumnLayout \| undefined {\n\t\treturn this._columnLayout;\n\t}\n\n\t/\n\t Returns if the `start` column is visible.\n\t* @default true\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 `middle` column is visible.\n\t* @default false\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 `end` column is visible.\n\t* @default false\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* @default 1\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 {\n\tMEDIA,\n\tFlexibleColumnLayoutLayoutChangeEventDetail,\n\tFlexibleColumnLayoutAccessibilityTexts,\n\tFlexibleColumnLayoutAccessibilityRoles,\n\tFlexibleColumnLayoutColumnLayout,\n};\n"]}

package/dist/IllustratedMessage.d.ts CHANGED Viewed

@@ -8,44 +8,40 @@ import "./illustrations/BeforeSearch.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  * An IllustratedMessage is a recommended combination of a solution-oriented message, an engaging
  * illustration, and conversational tone to better communicate an empty or a success state than just show
  * a message alone.
  *
  * Each illustration has default internationalised title and subtitle texts. Also they can be managed with
- * <code>titleText</code> and <code>subtitleText</code> properties.
+ * `titleText` and `subtitleText` properties.
  *
- * To display the desired illustration, use the <code>name</code> property, where you can find the list of all available illustrations.
- * <br><br>
- * <b>Note:</b> By default the “BeforeSearch” illustration is loaded. To use other illustrations, make sure you import them in addition, for example:
- * <br>
- * <code>import "@ui5/webcomponents-fiori/dist/illustrations/NoData.js"</code>
- * <br>
- * <b>Note:</b> Illustrations starting with the “Tnt” prefix are part of another illustration set. For example to use the “TntSuccess” illustration, add the following import::
- * <br>
- * <code>import "@ui5/webcomponents-fiori/dist/illustrations/tnt/Success.js"</code>
+ * To display the desired illustration, use the `name` property, where you can find the list of all available illustrations.
  *
- * <h3>Structure</h3>
- * The IllustratedMessage consists of the following elements, which are displayed below each other in the following order:
- * <br>
- * <ul>
- * <li>Illustration</li>
- * <li>Title</li>
- * <li>Subtitle</li>
- * <li>Actions</li>
- * </ul>
+ * **Note:** By default the “BeforeSearch” illustration is loaded. To use other illustrations, make sure you import them in addition, for example:
+ *
+ * `import "@ui5/webcomponents-fiori/dist/illustrations/NoData.js"`
+ *
+ * **Note:** Illustrations starting with the “Tnt” prefix are part of another illustration set. For example to use the “TntSuccess” illustration, add the following import::
+ *
+ * `import "@ui5/webcomponents-fiori/dist/illustrations/tnt/Success.js"`
  *
- * <h3>Usage</h3>
- * <code>ui5-illustrated-message</code> is meant to be used inside container component, for example a <code>ui5-card</code>,
- * a <code>ui5-dialog</code> or a <code>ui5-page</code>
+ * ### Structure
+ * The IllustratedMessage consists of the following elements, which are displayed below each other in the following order:
  *
- * <h3>ES6 Module Import</h3>
+ * - Illustration
+ * - Title
+ * - Subtitle
+ * - Actions
  *
- * <code>import "@ui5/webcomponents-fiori/dist/IllustratedMessage.js";</code>
+ * ### Usage
+ * `ui5-illustrated-message` is meant to be used inside container component, for example a `ui5-card`,
+ * a `ui5-dialog` or a `ui5-page`
  *
- * @csspart subtitle - Used to style the subtitle wrapper of the <code>ui5-illustrated-message</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents-fiori/dist/IllustratedMessage.js";`
+ * @csspart subtitle - Used to style the subtitle wrapper of the `ui5-illustrated-message`
  * @constructor
  * @extends UI5Element
  * @public
@@ -54,40 +50,35 @@ import "./illustrations/BeforeSearch.js";
 declare class IllustratedMessage extends UI5Element {
     /**
     * Defines the illustration name that will be displayed in the component.
-    * <br>
+    *
     * Example:
-    * <br>
-    * <code>name='BeforeSearch'</code>, <code>name='UnableToUpload'</code>, etc..
-    * <br>
-    * <br>
-    * <b>Note:</b> To use the TNT illustrations,
-    * you need to set the <code>tnt</code> or <code>Tnt</code> prefix in front of the icon's name.
-    * <br>
+    *
+    * `name='BeforeSearch'`, `name='UnableToUpload'`, etc..
+    *
+    * **Note:** To use the TNT illustrations,
+    * you need to set the `tnt` or `Tnt` prefix in front of the icon's name.
+    *
     * Example:
-    * <br>
-    * <code>name='tnt/Avatar'</code> or <code>name='TntAvatar'</code>.
-    * <br>
-    * <br>
-    * <b>Note:</b> By default the <code>BeforeSearch</code> illustration is loaded.
+    *
+    * `name='tnt/Avatar'` or `name='TntAvatar'`.
+    *
+    * **Note:** By default the `BeforeSearch` illustration is loaded.
     * When using an illustration type, other than the default, it should be loaded in addition:
-    * <br>
-    * <code>import "@ui5/webcomponents-fiori/dist/illustrations/NoData.js";</code>
-    * <br>
-    * <br>
+    *
+    * `import "@ui5/webcomponents-fiori/dist/illustrations/NoData.js";`
+    *
     * For TNT illustrations:
-    * <br>
-    * <code>import "@ui5/webcomponents-fiori/dist/illustrations/tnt/SessionExpired.js";</code>
+    *
+    * `import "@ui5/webcomponents-fiori/dist/illustrations/tnt/SessionExpired.js";`
     * @default "BeforeSearch"
     * @public
     */
     name: string;
     /**
     * Determines which illustration breakpoint variant is used.
-    * <br><br>
     *
-    * As <code>IllustratedMessage</code> adapts itself around the <code>Illustration</code>, the other
+    * As `IllustratedMessage` adapts itself around the `Illustration`, the other
     * elements of the component are displayed differently on the different breakpoints/illustration sizes.
-    *
     * @default "Auto"
     * @public
     * @since 1.5.0
@@ -95,25 +86,24 @@ declare class IllustratedMessage extends UI5Element {
     size: `${IllustrationMessageSize}`;
     /**
     * Defines the subtitle of the component.
-    * <br><br>
-    * <b>Note:</b> Using this property, the default subtitle text of illustration will be overwritten.
-    * <br><br>
-    * <b>Note:</b> Using <code>subtitle</code> slot, the default of this property will be overwritten.
+    *
+    * **Note:** Using this property, the default subtitle text of illustration will be overwritten.
+    *
+    * **Note:** Using `subtitle` slot, the default of this property will be overwritten.
     * @default ""
     * @public
     */
     subtitleText: string;
     /**
     * Defines the title of the component.
-    * <br><br>
-    * <b>Note:</b> Using this property, the default title text of illustration will be overwritten.
+    *
+    * **Note:** Using this property, the default title text of illustration will be overwritten.
     * @default ""
     * @public
     */
     titleText: string;
     /**
     * Receives id(or many ids) of the elements that label the component.
-    *
     * @default ""
     * @public
     * @since 1.7.0
@@ -122,18 +112,22 @@ declare class IllustratedMessage extends UI5Element {
     /**
     * Defines the semantic level of the title.
     *
-    * <b>Note:</b> Used for accessibility purposes only.
-    *
-    * <br/>
-    *
-    * <b>Note:</b> Doesn't take effect when <code>title</code> slot is being used.
+    * **Note:** Used for accessibility purposes only.
     *
+    * **Note:** Doesn't take effect when `title` slot is being used.
     * @default "H2"
     * @public
     * @since 1.20.0
     */
     titleLevel: `${TitleLevel}`;
     /**
+    * Illustration breakpoint variant for the <code>Dot</code> size.
+    *
+    * @private
+    * @since 1.24.0
+    */
+    dotSvg: string;
+    /**
     * Illustration breakpoint variant for the <code>Spot</code> size.
     *
     * @private
@@ -141,15 +135,13 @@ declare class IllustratedMessage extends UI5Element {
     */
     spotSvg: string;
     /**
-    * Illustration breakpoint variant for the <code>Scene</code> size.
-    *
+    * Illustration breakpoint variant for the `Scene` size.
     * @private
     * @since 1.9.0
     */
     sceneSvg: string;
     /**
-    * Illustration breakpoint variant for the <code>Dialog</code> size.
-    *
+    * Illustration breakpoint variant for the `Dialog` size.
     * @private
     * @since 1.9.0
     */
@@ -161,16 +153,16 @@ declare class IllustratedMessage extends UI5Element {
     media: string;
     /**
     * Defines the title of the component.
-    * <br><br>
-    * <b>Note:</b> Using this slot, the default title text of illustration and the value of <code>title</code> property will be overwritten.
+    *
+    * **Note:** Using this slot, the default title text of illustration and the value of `title` property will be overwritten.
     * @public
     * @since 1.7.0
     */
     title: Array<HTMLElement> & string;
     /**
     * Defines the subtitle of the component.
-    * <br><br>
-    * <b>Note:</b> Using this slot, the default subtitle text of illustration and the value of <code>subtitleText</code> property will be overwritten.
+    *
+    * **Note:** Using this slot, the default subtitle text of illustration and the value of `subtitleText` property will be overwritten.
     * @public
     * @since 1.0.0-rc.16
     */
@@ -192,15 +184,18 @@ declare class IllustratedMessage extends UI5Element {
     static get BREAKPOINTS(): {
         DIALOG: number;
         SPOT: number;
+        DOT: number;
         BASE: number;
     };
     static get BREAKPOINTS_HEIGHT(): {
         DIALOG: number;
         SPOT: number;
+        DOT: number;
         BASE: number;
     };
     static get MEDIA(): {
         BASE: string;
+        DOT: string;
         SPOT: string;
         DIALOG: string;
         SCENE: string;

package/dist/IllustratedMessage.js CHANGED Viewed

@@ -35,44 +35,40 @@ const getEffectiveIllustrationName = (name) => {
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  * An IllustratedMessage is a recommended combination of a solution-oriented message, an engaging
  * illustration, and conversational tone to better communicate an empty or a success state than just show
  * a message alone.
  *
  * Each illustration has default internationalised title and subtitle texts. Also they can be managed with
- * <code>titleText</code> and <code>subtitleText</code> properties.
+ * `titleText` and `subtitleText` properties.
  *
- * To display the desired illustration, use the <code>name</code> property, where you can find the list of all available illustrations.
- * <br><br>
- * <b>Note:</b> By default the “BeforeSearch” illustration is loaded. To use other illustrations, make sure you import them in addition, for example:
- * <br>
- * <code>import "@ui5/webcomponents-fiori/dist/illustrations/NoData.js"</code>
- * <br>
- * <b>Note:</b> Illustrations starting with the “Tnt” prefix are part of another illustration set. For example to use the “TntSuccess” illustration, add the following import::
- * <br>
- * <code>import "@ui5/webcomponents-fiori/dist/illustrations/tnt/Success.js"</code>
+ * To display the desired illustration, use the `name` property, where you can find the list of all available illustrations.
  *
- * <h3>Structure</h3>
- * The IllustratedMessage consists of the following elements, which are displayed below each other in the following order:
- * <br>
- * <ul>
- * <li>Illustration</li>
- * <li>Title</li>
- * <li>Subtitle</li>
- * <li>Actions</li>
- * </ul>
+ * **Note:** By default the “BeforeSearch” illustration is loaded. To use other illustrations, make sure you import them in addition, for example:
+ *
+ * `import "@ui5/webcomponents-fiori/dist/illustrations/NoData.js"`
+ *
+ * **Note:** Illustrations starting with the “Tnt” prefix are part of another illustration set. For example to use the “TntSuccess” illustration, add the following import::
  *
- * <h3>Usage</h3>
- * <code>ui5-illustrated-message</code> is meant to be used inside container component, for example a <code>ui5-card</code>,
- * a <code>ui5-dialog</code> or a <code>ui5-page</code>
+ * `import "@ui5/webcomponents-fiori/dist/illustrations/tnt/Success.js"`
+ *
+ * ### Structure
+ * The IllustratedMessage consists of the following elements, which are displayed below each other in the following order:
  *
- * <h3>ES6 Module Import</h3>
+ * - Illustration
+ * - Title
+ * - Subtitle
+ * - Actions
  *
- * <code>import "@ui5/webcomponents-fiori/dist/IllustratedMessage.js";</code>
+ * ### Usage
+ * `ui5-illustrated-message` is meant to be used inside container component, for example a `ui5-card`,
+ * a `ui5-dialog` or a `ui5-page`
  *
- * @csspart subtitle - Used to style the subtitle wrapper of the <code>ui5-illustrated-message</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents-fiori/dist/IllustratedMessage.js";`
+ * @csspart subtitle - Used to style the subtitle wrapper of the `ui5-illustrated-message`
  * @constructor
  * @extends UI5Element
  * @public
@@ -93,21 +89,24 @@ let IllustratedMessage = IllustratedMessage_1 = class IllustratedMessage extends
     }
     static get BREAKPOINTS() {
         return {
-            DIALOG: 679,
-            SPOT: 319,
-            BASE: 259,
+            DIALOG: 681,
+            SPOT: 360,
+            DOT: 260,
+            BASE: 160,
         };
     }
     static get BREAKPOINTS_HEIGHT() {
         return {
-            DIALOG: 451,
-            SPOT: 296,
-            BASE: 87,
+            DIALOG: 415,
+            SPOT: 284,
+            DOT: 207,
+            BASE: 61,
         };
     }
     static get MEDIA() {
         return {
             BASE: "base",
+            DOT: "dot",
             SPOT: "spot",
             DIALOG: "dialog",
             SCENE: "scene",
@@ -125,6 +124,7 @@ let IllustratedMessage = IllustratedMessage_1 = class IllustratedMessage extends
         if (illustrationData === undefined) {
             illustrationData = await getIllustrationData(effectiveName);
         }
+        this.dotSvg = illustrationData.dotSvg;
         this.spotSvg = illustrationData.spotSvg;
         this.dialogSvg = illustrationData.dialogSvg;
         this.sceneSvg = illustrationData.sceneSvg;
@@ -155,6 +155,9 @@ let IllustratedMessage = IllustratedMessage_1 = class IllustratedMessage extends
         if (size <= oBreakpounts.BASE) {
             newMedia = IllustratedMessage_1.MEDIA.BASE;
         }
+        else if (size <= oBreakpounts.DOT) {
+            newMedia = IllustratedMessage_1.MEDIA.DOT;
+        }
         else if (size <= oBreakpounts.SPOT) {
             newMedia = IllustratedMessage_1.MEDIA.SPOT;
         }
@@ -213,6 +216,9 @@ let IllustratedMessage = IllustratedMessage_1 = class IllustratedMessage extends
             case IllustrationMessageSize.Base:
                 this.media = IllustratedMessage_1.MEDIA.BASE;
                 return;
+            case IllustrationMessageSize.Dot:
+                this.media = IllustratedMessage_1.MEDIA.DOT;
+                return;
             case IllustrationMessageSize.Spot:
                 this.media = IllustratedMessage_1.MEDIA.SPOT;
                 return;
@@ -228,6 +234,8 @@ let IllustratedMessage = IllustratedMessage_1 = class IllustratedMessage extends
     }
     get effectiveIllustration() {
         switch (this.media) {
+            case IllustratedMessage_1.MEDIA.DOT:
+                return this.dotSvg;
             case IllustratedMessage_1.MEDIA.SPOT:
                 return this.spotSvg;
             case IllustratedMessage_1.MEDIA.DIALOG:
@@ -282,6 +290,9 @@ __decorate([
 __decorate([
     property({ type: TitleLevel, defaultValue: TitleLevel.H2 })
 ], IllustratedMessage.prototype, "titleLevel", void 0);
+__decorate([
+    property({ noAttribute: true })
+], IllustratedMessage.prototype, "dotSvg", void 0);
 __decorate([
     property({ noAttribute: true })
 ], IllustratedMessage.prototype, "spotSvg", void 0);