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/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\ntype DynamicSideContentLayoutChangeEventDetail = {\n\tcurrentBreakpoint: string,\n\tpreviousBreakpoint: string,\n\tmainContentVisible: boolean,\n\tsideContentVisible: boolean,\n}\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 * @extends UI5Element\n * @public\n * @since 1.1.0\n * @slot {Array<HTMLElement>} default - Defines the main content.\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 * @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<DynamicSideContentLayoutChangeEventDetail>(\"layout-change\", {\n\tdetail: {\n\t\t/\n\t\t @public\n\t\t /\n\t\tcurrentBreakpoint: {\n\t\t\ttype: String,\n\t\t},\n\t\t/\n\t\t @public\n\t\t /\n\t\tpreviousBreakpoint: {\n\t\t\ttype: String,\n\t\t},\n\t\t/\n\t\t @public\n\t\t /\n\t\tmainContentVisible: {\n\t\t\ttype: Boolean,\n\t\t},\n\t\t/\n\t\t @public\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 @default 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 @default 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 @default \"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 @default \"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 @default \"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 @default 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 side content.\n\t \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 \n\t @public\n\t */\n\ttoggleContents(): void {\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<DynamicSideContentLayoutChangeEventDetail>(\"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;\nexport type {\n\tDynamicSideContentLayoutChangeEventDetail,\n};\n"]}
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\ntype DynamicSideContentLayoutChangeEventDetail = {\n\tcurrentBreakpoint: string,\n\tpreviousBreakpoint: string,\n\tmainContentVisible: boolean,\n\tsideContentVisible: boolean,\n}\n\n/*\n @class\n \n ### Overview\n \n The DynamicSideContent (`ui5-dynamic-side-content`) 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 ### Usage\n \n When to use?\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 When not to use?\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 ### Responsive Behavior\n \n Screen width \\> 1440px\n \n - Main vs. side content ratio is 75 vs. 25 percent (with a minimum of 320px\n * each).\n * - If the application defines a trigger, the side content can be hidden.\n \n Screen width \\<\\= 1440px and \\> 1024px\n \n - 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.\n \n Screen width \\<\\= 1024px and \\> 720px\n \n - The side content ratio is fixed to 340px, and the main content takes the rest\n * of the width. Only if the `sideContentFallDown` is set to `OnMinimumWidth`\n * and screen width is \\<\\= 960px and \\> 720px the side content falls below the main content.\n \n Screen width \\<\\= 720px (for example on a mobile device)\n \n - In this case, the side content automatically disappears from the screen (unless\n * specified to stay under the content by setting of `sideContentVisibility`\n * property to `AlwaysShow`) 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.\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 ### ES6 Module Import\n \n `import \"@ui5/webcomponents-fiori/dist/DynamicSideContent.js\";`\n * @constructor\n * @extends UI5Element\n * @public\n * @since 1.1.0\n * @slot {Array<HTMLElement>} default - Defines the main content.\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 * @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<DynamicSideContentLayoutChangeEventDetail>(\"layout-change\", {\n\tdetail: {\n\t\t/\n\t\t @public\n\t\t /\n\t\tcurrentBreakpoint: {\n\t\t\ttype: String,\n\t\t},\n\t\t/\n\t\t @public\n\t\t /\n\t\tpreviousBreakpoint: {\n\t\t\ttype: String,\n\t\t},\n\t\t/\n\t\t @public\n\t\t /\n\t\tmainContentVisible: {\n\t\t\ttype: Boolean,\n\t\t},\n\t\t/\n\t\t @public\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 * @default 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 * @default 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\n\t * @default \"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 * @default \"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 * @default \"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 * @default 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 side content.\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 */\n\ttoggleContents(): void {\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<DynamicSideContentLayoutChangeEventDetail>(\"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;\nexport type {\n\tDynamicSideContentLayoutChangeEventDetail,\n};\n"]}

package/dist/FilterItem.d.ts CHANGED Viewed

@@ -3,15 +3,14 @@ import type FilterItemOption from "./FilterItemOption.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * <h3>Usage</h3>
+ * ### Usage
  *
- * For the <code>ui5-filter-item</code>
- * <h3>ES6 Module Import</h3>
- *
- * <code>import @ui5/webcomponents-fiori/dist/FilterItem.js";</code>
+ * For the `ui5-filter-item`
+ * ### ES6 Module Import
  *
+ * `import @ui5/webcomponents-fiori/dist/FilterItem.js";`
  * @constructor
  * @extends UI5Element
  * @abstract
@@ -21,20 +20,18 @@ import type FilterItemOption from "./FilterItemOption.js";
 declare class FilterItem extends UI5Element {
     /**
      * Defines the text of the component.
-     *
      * @default ""
      * @public
      */
     text: string;
     /**
      * Defines the additional text of the component.
-     *
      * @default ""
      * @public
      */
     additionalText: string;
     /**
-     * Defines the <code>values</code> list.
+     * Defines the `values` list.
      * @public
      */
     values: Array<FilterItemOption>;

package/dist/FilterItem.js CHANGED Viewed

@@ -11,15 +11,14 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * <h3>Usage</h3>
+ * ### Usage
  *
- * For the <code>ui5-filter-item</code>
- * <h3>ES6 Module Import</h3>
- *
- * <code>import @ui5/webcomponents-fiori/dist/FilterItem.js";</code>
+ * For the `ui5-filter-item`
+ * ### ES6 Module Import
  *
+ * `import @ui5/webcomponents-fiori/dist/FilterItem.js";`
  * @constructor
  * @extends UI5Element
  * @abstract

package/dist/FilterItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterItem.js","sourceRoot":"","sources":["../src/FilterItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AAGrF~~;;;;;;;;;;;;;;;;;GAiBG~~;AAEH,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;~~CAyBlC~~,CAAA;~~AAjBA~~;IADC,QAAQ,EAAE;wCACG;~~AASd~~;IADC,QAAQ,EAAE;kDACa;AAOxB;IADC,IAAI,EAAE;0CAC0B;~~AAxB5B~~,UAAU;IADf,aAAa,CAAC,iBAAiB,CAAC;GAC3B,UAAU,~~CAyBf~~;AAED,UAAU,CAAC,MAAM,EAAE,CAAC;AAEpB,eAAe,UAAU,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport type FilterItemOption from \"./FilterItemOption.js\";\n\n/*\n @class\n \n ~~<h3~~ ~~class=\"comment-api-title~~\~~">Overview</h3>\~~n \n ~~<h3>~~Usage~~</h3>\~~n \n For the ~~<code>~~ui5-filter-item~~</code>\~~n * ~~<h3>~~ES6 Module Import~~</h3>\~~n \n ~~<code>~~import @ui5/webcomponents-fiori/dist/FilterItem.js\"~~;</code>\~~n \n @constructor\n * @extends UI5Element\n * @abstract\n * @since 1.0.0-rc.16\n * @public\n /\n@customElement(\"ui5-filter-item\")\nclass FilterItem extends UI5Element {\n\t/\n\t Defines the text of the component.\n\t \n\t @default \"\"\n\t * @public\n\t /\n\t@property()\n\ttext!: string;\n\n\t/\n\t Defines the additional text of the component.\n\t \n\t @default \"\"\n\t * @public\n\t /\n\t@property()\n\tadditionalText!: string;\n\n\t/\n\t Defines the ~~<code>~~values~~</code>~~ list.\n\t * @public\n\t */\n\t@slot()\n\tvalues!: Array<FilterItemOption>;\n}\n\nFilterItem.define();\n\nexport default FilterItem;\n"]}
1	+ {"version":3,"file":"FilterItem.js","sourceRoot":"","sources":["../src/FilterItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AAGrF;;;;;;;;;;;;;;;;GAgBG;AAEH,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;CAuBlC,CAAA;AAhBA;IADC,QAAQ,EAAE;wCACG;AAQd;IADC,QAAQ,EAAE;kDACa;AAOxB;IADC,IAAI,EAAE;0CAC0B;AAtB5B,UAAU;IADf,aAAa,CAAC,iBAAiB,CAAC;GAC3B,UAAU,CAuBf;AAED,UAAU,CAAC,MAAM,EAAE,CAAC;AAEpB,eAAe,UAAU,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport type FilterItemOption from \"./FilterItemOption.js\";\n\n/*\n @class\n \n ### Overview\n \n ### Usage\n \n For the `ui5-filter-item`\n * ### ES6 Module Import\n \n `import @ui5/webcomponents-fiori/dist/FilterItem.js\";`\n * @constructor\n * @extends UI5Element\n * @abstract\n * @since 1.0.0-rc.16\n * @public\n /\n@customElement(\"ui5-filter-item\")\nclass FilterItem extends UI5Element {\n\t/\n\t Defines the text of the component.\n\t * @default \"\"\n\t * @public\n\t /\n\t@property()\n\ttext!: string;\n\n\t/\n\t Defines the additional text of the component.\n\t * @default \"\"\n\t * @public\n\t /\n\t@property()\n\tadditionalText!: string;\n\n\t/\n\t Defines the `values` list.\n\t * @public\n\t */\n\t@slot()\n\tvalues!: Array<FilterItemOption>;\n}\n\nFilterItem.define();\n\nexport default FilterItem;\n"]}

package/dist/FilterItemOption.d.ts CHANGED Viewed

@@ -2,16 +2,14 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
+ * ### Usage
  *
- * <h3>Usage</h3>
- *
- * For the <code>ui5-filter-item-option</code>
- * <h3>ES6 Module Import</h3>
- *
- * <code>import @ui5/webcomponents-fiori/dist/FilterItemOption.js";</code>
+ * For the `ui5-filter-item-option`
+ * ### ES6 Module Import
  *
+ * `import @ui5/webcomponents-fiori/dist/FilterItemOption.js";`
  * @constructor
  * @extends UI5Element
  * @abstract
@@ -21,14 +19,12 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 declare class FilterItemOption extends UI5Element {
     /**
      * Defines the text of the component.
-     *
      * @default ""
      * @public
      */
     text: string;
     /**
      * Defines if the component is selected.
-     *
      * @default false
      * @public
      */

package/dist/FilterItemOption.js CHANGED Viewed

@@ -10,16 +10,14 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
+ * ### Usage
  *
- * <h3>Usage</h3>
- *
- * For the <code>ui5-filter-item-option</code>
- * <h3>ES6 Module Import</h3>
- *
- * <code>import @ui5/webcomponents-fiori/dist/FilterItemOption.js";</code>
+ * For the `ui5-filter-item-option`
+ * ### ES6 Module Import
  *
+ * `import @ui5/webcomponents-fiori/dist/FilterItemOption.js";`
  * @constructor
  * @extends UI5Element
  * @abstract

package/dist/FilterItemOption.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterItemOption.js","sourceRoot":"","sources":["../src/FilterItemOption.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,aAAa,MAAM,0DAA0D,CAAC;AAErF~~;;;;;;;;;;;;;;;;;;GAkBG~~;AAEH,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;~~CAkBxC~~,CAAA;~~AAVA~~;IADC,QAAQ,EAAE;8CACG;~~AASd~~;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDACT;~~AAjBd~~,gBAAgB;IADrB,aAAa,CAAC,wBAAwB,CAAC;GAClC,gBAAgB,~~CAkBrB~~;AAED,gBAAgB,CAAC,MAAM,EAAE,CAAC;AAE1B,eAAe,gBAAgB,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\n\n/*\n @class\n \n ~~<h3~~ ~~class=\"comment-api-title~~\~~">Overview</h3>\~~n \n \n * ~~<h3>~~Usage~~</h3>\~~n \n For the ~~<code>~~ui5-filter-item-option~~</code>\~~n * ~~<h3>~~ES6 Module Import~~</h3>\~~n \n ~~<code>~~import @ui5/webcomponents-fiori/dist/FilterItemOption.js\"~~;</code>\~~n \n @constructor\n * @extends UI5Element\n * @abstract\n * @since 1.0.0-rc.16\n * @public\n /\n@customElement(\"ui5-filter-item-option\")\nclass FilterItemOption extends UI5Element {\n\t/\n\t Defines the text of the component.\n\t \n\t @default \"\"\n\t * @public\n\t /\n\t@property()\n\ttext!: string;\n\n\t/\n\t Defines if the component is selected.\n\t \n\t @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tselected!: boolean;\n}\n\nFilterItemOption.define();\n\nexport default FilterItemOption;\n"]}
1	+ {"version":3,"file":"FilterItemOption.js","sourceRoot":"","sources":["../src/FilterItemOption.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,aAAa,MAAM,0DAA0D,CAAC;AAErF;;;;;;;;;;;;;;;;GAgBG;AAEH,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;CAgBxC,CAAA;AATA;IADC,QAAQ,EAAE;8CACG;AAQd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDACT;AAfd,gBAAgB;IADrB,aAAa,CAAC,wBAAwB,CAAC;GAClC,gBAAgB,CAgBrB;AAED,gBAAgB,CAAC,MAAM,EAAE,CAAC;AAE1B,eAAe,gBAAgB,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\n\n/*\n @class\n \n ### Overview\n \n ### Usage\n \n For the `ui5-filter-item-option`\n * ### ES6 Module Import\n \n `import @ui5/webcomponents-fiori/dist/FilterItemOption.js\";`\n * @constructor\n * @extends UI5Element\n * @abstract\n * @since 1.0.0-rc.16\n * @public\n /\n@customElement(\"ui5-filter-item-option\")\nclass FilterItemOption extends UI5Element {\n\t/\n\t Defines the text of the component.\n\t * @default \"\"\n\t * @public\n\t /\n\t@property()\n\ttext!: string;\n\n\t/\n\t Defines if the component is selected.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tselected!: boolean;\n}\n\nFilterItemOption.define();\n\nexport default FilterItemOption;\n"]}

package/dist/FlexibleColumnLayout.d.ts CHANGED Viewed

@@ -42,43 +42,39 @@ type FlexibleColumnLayoutAccessibilityRoles = {
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>FlexibleColumnLayout</code> implements the list-detail-detail paradigm by displaying up to three pages in separate columns.
+ * The `FlexibleColumnLayout` implements the list-detail-detail paradigm by displaying up to three pages in separate columns.
  * There are several possible layouts that can be changed either with the component API, or by pressing the arrows, displayed between the columns.
  *
- * <h3>Usage</h3>
+ * ### Usage
  *
  * 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.).
  * The Component is flexible in a sense that the application can focus the user's attention on one particular column.
  *
- * <h3>Responsive Behavior</h3>
+ * ### Responsive Behavior
  *
- * The <code>FlexibleColumnLayout</code> automatically displays the maximum possible number of columns based on <code>layout</code> property and the window size.
+ * The `FlexibleColumnLayout` automatically displays the maximum possible number of columns based on `layout` property and the window size.
  * The component would display 1 column for window size smaller than 599px, up to two columns between 599px and 1023px,
  * and 3 columns for sizes bigger than 1023px.
  *
- * <br><br>
- * <h3>Keyboard Handling</h3>
+ * ### Keyboard Handling
  *
- * <h4>Basic Navigation</h4>
- * <ul>
- * <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>
- * <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>.
- * In order to use this functionality, you need to import the following module:
- * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code></li>
- * </ul>
+ * #### Basic Navigation
  *
- * <h4>Fast Navigation</h4>
- * 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>.
+ * - [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).
+ * - 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`.
  * In order to use this functionality, you need to import the following module:
- * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
- * <br><br>
+ * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
  *
- * <h3>ES6 Module Import</h3>
+ * #### Fast Navigation
+ * 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`.
+ * In order to use this functionality, you need to import the following module:
+ * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
  *
- * <code>import "@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js";</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js";`
  * @constructor
  * @extends UI5Element
  * @public
@@ -87,11 +83,11 @@ type FlexibleColumnLayoutAccessibilityRoles = {
 declare class FlexibleColumnLayout extends UI5Element {
     /**
     * Defines the columns layout and their proportion.
-    * <br><br>
-    * <b>Note:</b> The layout also depends on the screen size - one column for screens smaller than 599px,
+    *
+    * **Note:** The layout also depends on the screen size - one column for screens smaller than 599px,
     * two columns between 599px and 1023px and three columns for sizes bigger than 1023px.
-    * <br><br>
-    * <b>For example:</b> layout=<code>TwoColumnsStartExpanded</code> means the layout will display up to two columns
+    *
+    * **For example:** layout=`TwoColumnsStartExpanded` means the layout will display up to two columns
     * in 67%/33% proportion.
     * @default "OneColumn"
     * @public
@@ -100,7 +96,6 @@ declare class FlexibleColumnLayout extends UI5Element {
     /**
     * Defines the visibility of the arrows,
     * used for expanding and shrinking the columns.
-    *
     * @default false
     * @public
     * @since 1.0.0-rc.15
@@ -110,16 +105,15 @@ declare class FlexibleColumnLayout extends UI5Element {
     * An object of strings that defines several additional accessibility texts for even further customization.
     *
     * It supports the following fields:
-    *  - <code>startColumnAccessibleName</code>: the accessibility name for the <code>startColumn</code> region
-    *  - <code>midColumnAccessibleName</code>: the accessibility name for the <code>midColumn</code> region
-    *  - <code>endColumnAccessibleName</code>: the accessibility name for the <code>endColumn</code> region
-    *  - <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
-    *  - <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
-    *  - <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
-    *  - <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
-    *  - <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>
-    *  - <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>
-    *
+    *  - `startColumnAccessibleName`: the accessibility name for the `startColumn` region
+    *  - `midColumnAccessibleName`: the accessibility name for the `midColumn` region
+    *  - `endColumnAccessibleName`: the accessibility name for the `endColumn` region
+    *  - `startArrowLeftText`: the text that the first arrow (between the `begin` and `mid` columns) will have when pointing to the left
+    *  - `startArrowRightText`: the text that the first arrow (between the `begin` and `mid` columns) will have when pointing to the right
+    *  - `endArrowLeftText`: the text that the second arrow (between the `mid` and `end` columns) will have when pointing to the left
+    *  - `endArrowRightText`: the text that the second arrow (between the `mid` and `end` columns) will have when pointing to the right
+    *  - `startArrowContainerAccessibleName`: the text that the first arrow container (between the `begin` and `mid` columns) will have as `aria-label`
+    *  - `endArrowContainerAccessibleName`: the text that the second arrow container (between the `mid` and `end` columns) will have as `aria-label`
     * @default {}
     * @public
     * @since 1.0.0-rc.11
@@ -129,12 +123,11 @@ declare class FlexibleColumnLayout extends UI5Element {
     * An object of strings that defines additional accessibility roles for further customization.
     *
     * It supports the following fields:
-    *  - <code>startColumnRole</code>: the accessibility role for the <code>startColumn</code>
-    *  - <code>startArrowContainerRole</code>: the accessibility role for the first arrow container (between the <code>begin</code> and <code>mid</code> columns)
-    *  - <code>midColumnRole</code>: the accessibility role for the <code>midColumn</code>
-    *  - <code>endArrowContainerRole</code>: the accessibility role for the second arrow container (between the <code>mid</code> and <code>end</code> columns)
-    *  - <code>endColumnRole</code>: the accessibility role for the <code>endColumn</code>
-    *
+    *  - `startColumnRole`: the accessibility role for the `startColumn`
+    *  - `startArrowContainerRole`: the accessibility role for the first arrow container (between the `begin` and `mid` columns)
+    *  - `midColumnRole`: the accessibility role for the `midColumn`
+    *  - `endArrowContainerRole`: the accessibility role for the second arrow container (between the `mid` and `end` columns)
+    *  - `endColumnRole`: the accessibility role for the `endColumn`
     * @default {}
     * @public
     * @since 1.1.0
@@ -142,30 +135,26 @@ declare class FlexibleColumnLayout extends UI5Element {
     accessibilityRoles: FlexibleColumnLayoutAccessibilityRoles;
     /**
     * Defines the component width in px.
-    *
     * @default 0
     * @private
     */
     _width: number;
     /**
     * Defines the effective columns layout,
-    * based on both the <code>layout</code> property and the screen size.
+    * based on both the `layout` property and the screen size.
     * Example: [67%, 33%, 0], [25%, 50%, 25%], etc.
-    *
     * @default undefined
     * @private
     */
     _columnLayout?: FlexibleColumnLayoutColumnLayout;
     /**
     * Defines the visible columns count - 1, 2 or 3.
-    *
     * @default 1
     * @private
     */
     _visibleColumns: number;
     /**
     * Allows the user to replace the whole layouts configuration
-    *
     * @private
     */
     _layoutsConfiguration?: LayoutConfiguration;
@@ -219,28 +208,28 @@ declare class FlexibleColumnLayout extends UI5Element {
      */
     private _isColumnHidden;
     /**
-    * Returns the current column layout, based on both the <code>layout</code> property and the screen size.
-    * <br><br>
-    * <b>For example:</b> ["67%", "33%", 0], ["100%", 0, 0], ["25%", "50%", "25%"], etc,
+    * Returns the current column layout, based on both the `layout` property and the screen size.
+    *
+    * **For example:** ["67%", "33%", 0], ["100%", 0, 0], ["25%", "50%", "25%"], etc,
     * where the numbers represents the width of the start, middle and end columns.
     * @default undefined
     * @public
     */
     get columnLayout(): FlexibleColumnLayoutColumnLayout | undefined;
     /**
-    * Returns if the <code>start</code> column is visible.
+    * Returns if the `start` column is visible.
     * @default true
     * @public
     */
     get startColumnVisible(): boolean;
     /**
-    * Returns if the <code>middle</code> column is visible.
+    * Returns if the `middle` column is visible.
     * @default false
     * @public
     */
     get midColumnVisible(): boolean;
     /**
-    * Returns if the <code>end</code> column is visible.
+    * Returns if the `end` column is visible.
     * @default false
     * @public
     */

package/dist/FlexibleColumnLayout.js CHANGED Viewed

@@ -41,43 +41,39 @@ const BREAKPOINTS = {
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>FlexibleColumnLayout</code> implements the list-detail-detail paradigm by displaying up to three pages in separate columns.
+ * The `FlexibleColumnLayout` implements the list-detail-detail paradigm by displaying up to three pages in separate columns.
  * There are several possible layouts that can be changed either with the component API, or by pressing the arrows, displayed between the columns.
  *
- * <h3>Usage</h3>
+ * ### Usage
  *
  * 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.).
  * The Component is flexible in a sense that the application can focus the user's attention on one particular column.
  *
- * <h3>Responsive Behavior</h3>
+ * ### Responsive Behavior
  *
- * The <code>FlexibleColumnLayout</code> automatically displays the maximum possible number of columns based on <code>layout</code> property and the window size.
+ * The `FlexibleColumnLayout` automatically displays the maximum possible number of columns based on `layout` property and the window size.
  * The component would display 1 column for window size smaller than 599px, up to two columns between 599px and 1023px,
  * and 3 columns for sizes bigger than 1023px.
  *
- * <br><br>
- * <h3>Keyboard Handling</h3>
+ * ### Keyboard Handling
  *
- * <h4>Basic Navigation</h4>
- * <ul>
- * <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>
- * <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>.
- * In order to use this functionality, you need to import the following module:
- * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code></li>
- * </ul>
+ * #### Basic Navigation
  *
- * <h4>Fast Navigation</h4>
- * 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>.
+ * - [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).
+ * - 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`.
  * In order to use this functionality, you need to import the following module:
- * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
- * <br><br>
+ * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
  *
- * <h3>ES6 Module Import</h3>
+ * #### Fast Navigation
+ * 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`.
+ * In order to use this functionality, you need to import the following module:
+ * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
  *
- * <code>import "@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js";</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js";`
  * @constructor
  * @extends UI5Element
  * @public
@@ -238,9 +234,9 @@ let FlexibleColumnLayout = FlexibleColumnLayout_1 = class FlexibleColumnLayout e
         return columnWidth === 0 || columnWidth === "0px";
     }
     /**
-    * Returns the current column layout, based on both the <code>layout</code> property and the screen size.
-    * <br><br>
-    * <b>For example:</b> ["67%", "33%", 0], ["100%", 0, 0], ["25%", "50%", "25%"], etc,
+    * Returns the current column layout, based on both the `layout` property and the screen size.
+    *
+    * **For example:** ["67%", "33%", 0], ["100%", 0, 0], ["25%", "50%", "25%"], etc,
     * where the numbers represents the width of the start, middle and end columns.
     * @default undefined
     * @public
@@ -249,7 +245,7 @@ let FlexibleColumnLayout = FlexibleColumnLayout_1 = class FlexibleColumnLayout e
         return this._columnLayout;
     }
     /**
-    * Returns if the <code>start</code> column is visible.
+    * Returns if the `start` column is visible.
     * @default true
     * @public
     */
@@ -260,7 +256,7 @@ let FlexibleColumnLayout = FlexibleColumnLayout_1 = class FlexibleColumnLayout e
         return false;
     }
     /**
-    * Returns if the <code>middle</code> column is visible.
+    * Returns if the `middle` column is visible.
     * @default false
     * @public
     */
@@ -271,7 +267,7 @@ let FlexibleColumnLayout = FlexibleColumnLayout_1 = class FlexibleColumnLayout e
         return false;
     }
     /**
-    * Returns if the <code>end</code> column is visible.
+    * Returns if the `end` column is visible.
     * @default false
     * @public
     */
@@ -513,7 +509,6 @@ FlexibleColumnLayout = FlexibleColumnLayout_1 = __decorate([
     /**
      * Fired when the layout changes via user interaction by clicking the arrows
      * or by changing the component size due to resizing.
-     *
      * @param {FCLLayout} layout The current layout
      * @param {array} columnLayout The effective column layout, f.e [67%, 33%, 0]
      * @param {boolean} startColumnVisible Indicates if the start column is currently visible