@ui5/webcomponents-fiori 2.5.0-rc.3 → 2.6.0-rc.0

package/dist/DynamicPageTitle.js

@@ -11,7 +11,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import ToolbarItemOverflowBehavior from "@ui5/webcomponents/dist/types/ToolbarItemOverflowBehavior.js";
@@ -19,7 +19,7 @@ import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import Title from "@ui5/webcomponents/dist/Title.js";
 // Template
-import DynamicPageTitleTemplate from "./generated/templates/DynamicPageTitleTemplate.lit.js";
+import DynamicPageTitleTemplate from "./DynamicPageTitleTemplate.js";
 // Styles
 import DynamicPageTitleCss from "./generated/themes/DynamicPageTitle.css.js";
 // Texts
@@ -100,16 +100,6 @@ let DynamicPageTitle = DynamicPageTitle_1 = class DynamicPageTitle extends UI5El
     onBeforeRendering() {
         this.prepareLayoutActions();
     }
-    get styles() {
-        return {
-            content: {
-                "min-width": this.minContentWidth ? `${this.minContentWidth || 0}px` : undefined,
-            },
-            actions: {
-                "min-width": this.minActionsWidth ? `${this.minActionsWidth || 0}px` : undefined,
-            },
-        };
-    }
     get hasContent() {
         return !!this.content.length;
     }
@@ -123,7 +113,7 @@ let DynamicPageTitle = DynamicPageTitle_1 = class DynamicPageTitle extends UI5El
         return !this.snapped ? "subheading" : "snappedSubheading";
     }
     get _tabIndex() {
-        return this.interactive ? "0" : undefined;
+        return this.interactive ? 0 : undefined;
     }
     get _headerExpanded() {
         return !this.snapped;
@@ -164,12 +154,12 @@ let DynamicPageTitle = DynamicPageTitle_1 = class DynamicPageTitle extends UI5El
         }
     }
     onTitleClick() {
-        this.fireDecoratorEvent("_toggle-title");
+        this.fireDecoratorEvent("toggle-title");
     }
     _onkeydown(e) {
         if (isEnter(e) || isSpace(e)) {
             e.preventDefault();
-            this.fireDecoratorEvent("_toggle-title");
+            this.fireDecoratorEvent("toggle-title");
         }
     }
 };
@@ -228,7 +218,7 @@ DynamicPageTitle = DynamicPageTitle_1 = __decorate([
     customElement({
         tag: "ui5-dynamic-page-title",
         fastNavigation: true,
-        renderer: litRender,
+        renderer: jsxRenderer,
         styles: DynamicPageTitleCss,
         template: DynamicPageTitleTemplate,
         dependencies: [Title, Icon],
@@ -238,7 +228,7 @@ DynamicPageTitle = DynamicPageTitle_1 = __decorate([
      * @private
      */
     ,
-    event("_toggle-title", {
+    event("toggle-title", {
         bubbles: true,
     })
 ], DynamicPageTitle);

package/dist/DynamicPageTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicPageTitle.js","sourceRoot":"","sources":["../src/DynamicPageTitle.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-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport { isEnter, isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport type Toolbar from \"@ui5/webcomponents/dist/Toolbar.js\";\nimport type { ToolbarMinWidthChangeEventDetail } from \"@ui5/webcomponents/dist/Toolbar.js\";\nimport ToolbarItemOverflowBehavior from \"@ui5/webcomponents/dist/types/ToolbarItemOverflowBehavior.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport Title from \"@ui5/webcomponents/dist/Title.js\";\n\n// Template\nimport DynamicPageTitleTemplate from \"./generated/templates/DynamicPageTitleTemplate.lit.js\";\n\n// Styles\nimport DynamicPageTitleCss from \"./generated/themes/DynamicPageTitle.css.js\";\n\n// Texts\nimport {\n\tDYNAMIC_PAGE_ARIA_DESCR_TOGGLE_HEADER,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * Title of the `DynamicPage`.\n *\n * The `DynamicPageTitle` component is part of the `DynamicPage`\n * family and is used to serve as title of the `DynamicPage`.\n *\n * ### Usage\n *\n * The `DynamicPageTitle` can hold any component and displays the most important\n * information regarding the object that will always remain visible while scrolling.\n *\n * **Note:** The `actions` slot accepts any UI5 web component, but it's\n * recommended to use `ui5-toolbar`.\n *\n * The user can switch between the expanded/collapsed states of the\n * `DynamicPage` by clicking on the `DynamicPageTitle`\n * or by using the expand/collapse visual indicators, positioned at the bottom of the\n * `DynamicPageTitle` and the `DynamicPageHeader` inside `ui5-dynamic-page-header-actions`.\n *\n * ### Responsive Behavior\n *\n * The responsive behavior of the `DynamicPageTitle` depends on the behavior of the\n * content that is displayed.\n * @constructor\n * @extends UI5Element\n * @public\n * @since 2.0.0\n */\n@customElement({\n\ttag: \"ui5-dynamic-page-title\",\n\tfastNavigation: true,\n\trenderer: litRender,\n\tstyles: DynamicPageTitleCss,\n\ttemplate: DynamicPageTitleTemplate,\n\tdependencies: [Title, Icon],\n})\n\n/**\n * Event is fired when the title is toggled.\n * @private\n */\n@event(\"_toggle-title\", {\n\tbubbles: true,\n})\n\nclass DynamicPageTitle extends UI5Element {\n\teventDetails!: {\n\t\t\"_toggle-title\": void;\n\t}\n\t/**\n\t * Defines if the title is snapped.\n\t *\n\t * @protected\n\t * @default false\n\t */\n\t@property({ type: Boolean })\n\tsnapped = false;\n\n\t/**\n\t * Defines if the mobileNavigationActions are shown.\n\t *\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tmobileNavigationActions = false;\n\n\t/**\n\t * Indicates if the elements is on focus\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tfocused = false;\n\n\t/**\n\t * Defines the minimum width of the content area.\n\t * @private\n\t */\n\t@property({ type: Number })\n\tminContentWidth?: number;\n\n\t/**\n\t * Defines the minimum width of the actions area.\n\t * @private\n\t */\n\t@property({ type: Number })\n\tminActionsWidth?: number;\n\n\t/**\n\t * Indicates whether the title has snapped on mobile devices.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\thasSnappedTitleOnMobile = false;\n\n\t/**\n\t * Defines the content of the Heading of the Dynamic Page.\n\t *\n\t * The font size of the title within the `heading` slot can be adjusted to the recommended values using the following CSS variables:\n\t *\n\t * **Expanded:** `var(--sapObjectHeader_Title_FontSize)`\n\t *\n\t * **Collapsed:** `var(--sapObjectHeader_Title_SnappedFontSize)`\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\theading!: HTMLElement[];\n\n\t/**\n\t * Defines the heading that is shown only when the header is snapped.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tsnappedHeading!: HTMLElement[];\n\n\t/**\n\t * Defines the content of the snapped title on mobile devices.\n\t *\n\t * This slot is displayed only when the `DynamicPageTitle` is in the snapped state on mobile devices.\n\t * It should be used to provide a simplified, single-line title that takes up less space on smaller screens.\n\t *\n\t * **Note:**\n\t * - The content set in this slot **overrides** all other content set in the `DynamicPageTitle` slots when displayed.\n\t * - The slot is intended for a single `ui5-title` component.\n\t *\n\t * @public\n\t * @since 2.3.0\n\t */\n\t@slot({ type: HTMLElement })\n\tsnappedTitleOnMobile!: Array<Title>;\n\n\t/**\n\t * Defines the bar with actions in the Dynamic page title.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tactionsBar!: HTMLElement[];\n\n\t/**\n\t * Defines the bar with navigation actions in the Dynamic page title.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tnavigationBar!: Array<Toolbar>;\n\n\t/**\n\t * Defines the content of the Dynamic page title.\n\t *\n\t * @public\n\t */\n\t@slot({ \"default\": true, type: HTMLElement })\n\tcontent!: HTMLElement[];\n\n\t/**\n\t * Defines the content of the title that is shown only when the header is not snapped.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tsubheading!: HTMLElement[];\n\n\t/**\n\t * Defines the content of the title that is shown only when the header is snapped.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tsnappedSubheading!: HTMLElement[];\n\n\t/**\n\t * Defines the content of the breadcrumbs inside Dynamic Page Title.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tbreadcrumbs!: HTMLElement[];\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tinteractive = false;\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\n\n\t_handleResize: ResizeObserverCallback;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._handleResize = this.handleResize.bind(this);\n\t}\n\n\tonEnterDOM() {\n\t\tResizeHandler.register(this, this._handleResize);\n\t\tif (isDesktop()) {\n\t\t\tthis.setAttribute(\"desktop\", \"\");\n\t\t}\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._handleResize);\n\t}\n\n\tonBeforeRendering() {\n\t\tthis.prepareLayoutActions();\n\t}\n\n\tget styles() {\n\t\treturn {\n\t\t\tcontent: {\n\t\t\t\t\"min-width\": this.minContentWidth ? `${this.minContentWidth || 0}px` : undefined,\n\t\t\t},\n\t\t\tactions: {\n\t\t\t\t\"min-width\": this.minActionsWidth ? `${this.minActionsWidth || 0}px` : undefined,\n\t\t\t},\n\t\t};\n\t}\n\n\tget hasContent() {\n\t\treturn !!this.content.length;\n\t}\n\n\tget headingSlotName() {\n\t\tif (!this.snapped) {\n\t\t\treturn \"heading\";\n\t\t}\n\t\treturn \"snappedHeading\";\n\t}\n\n\tget subheadingSlotName() {\n\t\treturn !this.snapped ? \"subheading\" : \"snappedSubheading\";\n\t}\n\n\tget _tabIndex() {\n\t\treturn this.interactive ? \"0\" : undefined;\n\t}\n\n\tget _headerExpanded() {\n\t\treturn !this.snapped;\n\t}\n\n\tget _ariaDescribedbyText() {\n\t\treturn DynamicPageTitle.i18nBundle.getText(DYNAMIC_PAGE_ARIA_DESCR_TOGGLE_HEADER);\n\t}\n\n\tget _ariaLabelledBy() {\n\t\tconst hasAnyHeading = this[this.headingSlotName].length;\n\t\tif (hasAnyHeading) {\n\t\t\treturn `${this._id}-heading`;\n\t\t}\n\t}\n\n\tget _needsSeparator() {\n\t\treturn (this.navigationBar.length && this.actionsBar.length);\n\t}\n\n\tprepareLayoutActions() {\n\t\tconst navigationBar = this.querySelector<Toolbar>(\"[ui5-toolbar][slot='navigationBar']\"),\n\t\t\tisWideScreen = this.offsetWidth >= 1280;\n\n\t\tif (!navigationBar) {\n\t\t\treturn;\n\t\t}\n\n\t\tnavigationBar.items.forEach(action => {\n\t\t\taction.overflowPriority = isWideScreen\n\t\t\t\t? ToolbarItemOverflowBehavior.NeverOverflow\n\t\t\t\t: ToolbarItemOverflowBehavior.Default;\n\t\t});\n\t}\n\n\thandleResize() {\n\t\tthis.mobileNavigationActions = this.offsetWidth < 1280;\n\t}\n\n\tonMinContentWidthChange(e: CustomEvent<ToolbarMinWidthChangeEventDetail>) {\n\t\tconst slotName = (<HTMLElement>e.target)?.assignedSlot?.name;\n\t\tif (!slotName || slotName === \"content\") {\n\t\t\tthis.minContentWidth = e.detail.minWidth;\n\t\t} else if (slotName === \"actionsBar\") {\n\t\t\tthis.minActionsWidth = e.detail.minWidth;\n\t\t}\n\t}\n\n\tonTitleClick() {\n\t\tthis.fireDecoratorEvent(\"_toggle-title\");\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (isEnter(e) || isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t\tthis.fireDecoratorEvent(\"_toggle-title\");\n\t\t}\n\t}\n}\n\nDynamicPageTitle.define();\n\nexport default DynamicPageTitle;\n"]}
+{"version":3,"file":"DynamicPageTitle.js","sourceRoot":"","sources":["../src/DynamicPageTitle.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-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport { isEnter, isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport type Toolbar from \"@ui5/webcomponents/dist/Toolbar.js\";\nimport type { ToolbarMinWidthChangeEventDetail } from \"@ui5/webcomponents/dist/Toolbar.js\";\nimport ToolbarItemOverflowBehavior from \"@ui5/webcomponents/dist/types/ToolbarItemOverflowBehavior.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport Title from \"@ui5/webcomponents/dist/Title.js\";\n\n// Template\nimport DynamicPageTitleTemplate from \"./DynamicPageTitleTemplate.js\";\n\n// Styles\nimport DynamicPageTitleCss from \"./generated/themes/DynamicPageTitle.css.js\";\n\n// Texts\nimport {\n\tDYNAMIC_PAGE_ARIA_DESCR_TOGGLE_HEADER,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * Title of the `DynamicPage`.\n *\n * The `DynamicPageTitle` component is part of the `DynamicPage`\n * family and is used to serve as title of the `DynamicPage`.\n *\n * ### Usage\n *\n * The `DynamicPageTitle` can hold any component and displays the most important\n * information regarding the object that will always remain visible while scrolling.\n *\n * **Note:** The `actions` slot accepts any UI5 web component, but it's\n * recommended to use `ui5-toolbar`.\n *\n * The user can switch between the expanded/collapsed states of the\n * `DynamicPage` by clicking on the `DynamicPageTitle`\n * or by using the expand/collapse visual indicators, positioned at the bottom of the\n * `DynamicPageTitle` and the `DynamicPageHeader` inside `ui5-dynamic-page-header-actions`.\n *\n * ### Responsive Behavior\n *\n * The responsive behavior of the `DynamicPageTitle` depends on the behavior of the\n * content that is displayed.\n * @constructor\n * @extends UI5Element\n * @public\n * @since 2.0.0\n */\n@customElement({\n\ttag: \"ui5-dynamic-page-title\",\n\tfastNavigation: true,\n\trenderer: jsxRenderer,\n\tstyles: DynamicPageTitleCss,\n\ttemplate: DynamicPageTitleTemplate,\n\tdependencies: [Title, Icon],\n})\n\n/**\n * Event is fired when the title is toggled.\n * @private\n */\n@event(\"toggle-title\", {\n\tbubbles: true,\n})\n\nclass DynamicPageTitle extends UI5Element {\n\teventDetails!: {\n\t\t\"toggle-title\": void;\n\t}\n\t/**\n\t * Defines if the title is snapped.\n\t *\n\t * @protected\n\t * @default false\n\t */\n\t@property({ type: Boolean })\n\tsnapped = false;\n\n\t/**\n\t * Defines if the mobileNavigationActions are shown.\n\t *\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tmobileNavigationActions = false;\n\n\t/**\n\t * Indicates if the elements is on focus\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tfocused = false;\n\n\t/**\n\t * Defines the minimum width of the content area.\n\t * @private\n\t */\n\t@property({ type: Number })\n\tminContentWidth?: number;\n\n\t/**\n\t * Defines the minimum width of the actions area.\n\t * @private\n\t */\n\t@property({ type: Number })\n\tminActionsWidth?: number;\n\n\t/**\n\t * Indicates whether the title has snapped on mobile devices.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\thasSnappedTitleOnMobile = false;\n\n\t/**\n\t * Defines the content of the Heading of the Dynamic Page.\n\t *\n\t * The font size of the title within the `heading` slot can be adjusted to the recommended values using the following CSS variables:\n\t *\n\t * **Expanded:** `var(--sapObjectHeader_Title_FontSize)`\n\t *\n\t * **Collapsed:** `var(--sapObjectHeader_Title_SnappedFontSize)`\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\theading!: HTMLElement[];\n\n\t/**\n\t * Defines the heading that is shown only when the header is snapped.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tsnappedHeading!: HTMLElement[];\n\n\t/**\n\t * Defines the content of the snapped title on mobile devices.\n\t *\n\t * This slot is displayed only when the `DynamicPageTitle` is in the snapped state on mobile devices.\n\t * It should be used to provide a simplified, single-line title that takes up less space on smaller screens.\n\t *\n\t * **Note:**\n\t * - The content set in this slot **overrides** all other content set in the `DynamicPageTitle` slots when displayed.\n\t * - The slot is intended for a single `ui5-title` component.\n\t *\n\t * @public\n\t * @since 2.3.0\n\t */\n\t@slot({ type: HTMLElement })\n\tsnappedTitleOnMobile!: Array<Title>;\n\n\t/**\n\t * Defines the bar with actions in the Dynamic page title.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tactionsBar!: HTMLElement[];\n\n\t/**\n\t * Defines the bar with navigation actions in the Dynamic page title.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tnavigationBar!: Array<Toolbar>;\n\n\t/**\n\t * Defines the content of the Dynamic page title.\n\t *\n\t * @public\n\t */\n\t@slot({ \"default\": true, type: HTMLElement })\n\tcontent!: HTMLElement[];\n\n\t/**\n\t * Defines the content of the title that is shown only when the header is not snapped.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tsubheading!: HTMLElement[];\n\n\t/**\n\t * Defines the content of the title that is shown only when the header is snapped.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tsnappedSubheading!: HTMLElement[];\n\n\t/**\n\t * Defines the content of the breadcrumbs inside Dynamic Page Title.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tbreadcrumbs!: HTMLElement[];\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tinteractive = false;\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\n\n\t_handleResize: ResizeObserverCallback;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._handleResize = this.handleResize.bind(this);\n\t}\n\n\tonEnterDOM() {\n\t\tResizeHandler.register(this, this._handleResize);\n\t\tif (isDesktop()) {\n\t\t\tthis.setAttribute(\"desktop\", \"\");\n\t\t}\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._handleResize);\n\t}\n\n\tonBeforeRendering() {\n\t\tthis.prepareLayoutActions();\n\t}\n\n\tget hasContent() {\n\t\treturn !!this.content.length;\n\t}\n\n\tget headingSlotName() {\n\t\tif (!this.snapped) {\n\t\t\treturn \"heading\";\n\t\t}\n\t\treturn \"snappedHeading\";\n\t}\n\n\tget subheadingSlotName() {\n\t\treturn !this.snapped ? \"subheading\" : \"snappedSubheading\";\n\t}\n\n\tget _tabIndex() {\n\t\treturn this.interactive ? 0 : undefined;\n\t}\n\n\tget _headerExpanded() {\n\t\treturn !this.snapped;\n\t}\n\n\tget _ariaDescribedbyText() {\n\t\treturn DynamicPageTitle.i18nBundle.getText(DYNAMIC_PAGE_ARIA_DESCR_TOGGLE_HEADER);\n\t}\n\n\tget _ariaLabelledBy() {\n\t\tconst hasAnyHeading = this[this.headingSlotName].length;\n\t\tif (hasAnyHeading) {\n\t\t\treturn `${this._id}-heading`;\n\t\t}\n\t}\n\n\tget _needsSeparator() {\n\t\treturn (this.navigationBar.length && this.actionsBar.length);\n\t}\n\n\tprepareLayoutActions() {\n\t\tconst navigationBar = this.querySelector<Toolbar>(\"[ui5-toolbar][slot='navigationBar']\"),\n\t\t\tisWideScreen = this.offsetWidth >= 1280;\n\n\t\tif (!navigationBar) {\n\t\t\treturn;\n\t\t}\n\n\t\tnavigationBar.items.forEach(action => {\n\t\t\taction.overflowPriority = isWideScreen\n\t\t\t\t? ToolbarItemOverflowBehavior.NeverOverflow\n\t\t\t\t: ToolbarItemOverflowBehavior.Default;\n\t\t});\n\t}\n\n\thandleResize() {\n\t\tthis.mobileNavigationActions = this.offsetWidth < 1280;\n\t}\n\n\tonMinContentWidthChange(e: CustomEvent<ToolbarMinWidthChangeEventDetail>) {\n\t\tconst slotName = (<HTMLElement>e.target)?.assignedSlot?.name;\n\t\tif (!slotName || slotName === \"content\") {\n\t\t\tthis.minContentWidth = e.detail.minWidth;\n\t\t} else if (slotName === \"actionsBar\") {\n\t\t\tthis.minActionsWidth = e.detail.minWidth;\n\t\t}\n\t}\n\n\tonTitleClick() {\n\t\tthis.fireDecoratorEvent(\"toggle-title\");\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (isEnter(e) || isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t\tthis.fireDecoratorEvent(\"toggle-title\");\n\t\t}\n\t}\n}\n\nDynamicPageTitle.define();\n\nexport default DynamicPageTitle;\n"]}

package/dist/DynamicPageTitleTemplate.d.ts

@@ -0,0 +1,2 @@
+import type DynamicPageTitle from "./DynamicPageTitle.js";
+export default function DynamicPageTitleTemplate(this: DynamicPageTitle): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/DynamicPageTitleTemplate.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import slimArrowDownIcon from "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+export default function DynamicPageTitleTemplate() {
+    return (_jsxs("div", { class: "ui5-dynamic-page-title-root", children: [_jsx("span", { class: "ui5-dynamic-page-title-focus-area", "data-sap-focus-ref": true, tabIndex: this._tabIndex, onKeyDown: this._onkeydown, onClick: this.onTitleClick, role: "button", "aria-expanded": this._headerExpanded, "aria-labelledby": this._ariaLabelledBy, "aria-describedby": `${this._id}-toggle-description` }), this.hasSnappedTitleOnMobile ?
+                _jsxs("div", { id: `${this._id}-heading`, class: "ui5-dynamic-page--snapped-title-on-mobile", children: [_jsx("slot", { name: "snappedTitleOnMobile" }), _jsx(Icon, { name: slimArrowDownIcon, mode: "Decorative" })] })
+                : _jsxs(_Fragment, { children: [_jsxs("div", { class: "ui5-dynamic-page-title--top-area", children: [_jsx("slot", { name: "breadcrumbs" }), this.mobileNavigationActions &&
+                                    _jsx("slot", { name: "navigationBar" })] }), _jsxs("div", { class: "ui5-dynamic-page-title--wrapper", "onui5-_min-content-width-change": this.onMinContentWidthChange, children: [_jsx("div", { id: `${this._id}-heading`, class: "ui5-dynamic-page-title--heading", children: _jsx("slot", { name: this.headingSlotName }) }), this.hasContent &&
+                                    _jsx("div", { class: "ui5-dynamic-page-title--content", style: {
+                                            "min-width": this.minContentWidth ? `${this.minContentWidth || 0}px` : undefined,
+                                        }, children: _jsx("slot", {}) }), _jsxs("div", { class: "ui5-dynamic-page-title--actions", style: {
+                                        "min-width": this.minActionsWidth ? `${this.minActionsWidth || 0}px` : undefined,
+                                    }, children: [_jsx("slot", { name: "actionsBar" }), !this.mobileNavigationActions && _jsxs(_Fragment, { children: [this._needsSeparator &&
+                                                    _jsx("div", { class: "ui5-dynamic-page-title--actions-separator" }), _jsx("slot", { name: "navigationBar" })] })] })] }), _jsx("slot", { name: this.subheadingSlotName })] }), _jsx("span", { id: `${this._id}-toggle-description`, class: "ui5-hidden-text", children: this._ariaDescribedbyText })] }));
+}
+//# sourceMappingURL=DynamicPageTitleTemplate.js.map

package/dist/DynamicPageTitleTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicPageTitleTemplate.js","sourceRoot":"","sources":["../src/DynamicPageTitleTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,iCAAiC,CAAC;AAEnD,OAAO,iBAAiB,MAAM,kDAAkD,CAAC;AAEjF,MAAM,CAAC,OAAO,UAAU,wBAAwB;IAC/C,OAAO,CACN,eAAK,KAAK,EAAC,6BAA6B,aACvC,eAAM,KAAK,EAAC,mCAAmC,8BAE9C,QAAQ,EAAE,IAAI,CAAC,SAAS,EACxB,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,eAAe,qBAClB,IAAI,CAAC,eAAe,sBACnB,GAAG,IAAI,CAAC,GAAG,qBAAqB,GAC3C,EAEP,IAAI,CAAC,uBAAuB,CAAC,CAAC;gBAC9B,eAAK,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,UAAU,EAC5B,KAAK,EAAC,2CAA2C,aAElD,eAAM,IAAI,EAAC,sBAAsB,GAAQ,EACzC,KAAC,IAAI,IAAC,IAAI,EAAE,iBAAiB,EAAE,IAAI,EAAC,YAAY,GAAG,IAC9C;gBACN,CAAC,CAAC,8BACD,eAAK,KAAK,EAAC,kCAAkC,aAC5C,eAAM,IAAI,EAAC,aAAa,GAAQ,EAE/B,IAAI,CAAC,uBAAuB;oCAC7B,eAAM,IAAI,EAAC,eAAe,GAAQ,IAE7B,EACN,eAAK,KAAK,EAAC,iCAAiC,qCACV,IAAI,CAAC,uBAAuB,aAE7D,cAAK,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,UAAU,EAC7B,KAAK,EAAC,iCAAiC,YAEvC,eAAM,IAAI,EAAE,IAAI,CAAC,eAAe,GAAS,GACpC,EAEL,IAAI,CAAC,UAAU;oCAChB,cAAK,KAAK,EAAC,iCAAiC,EAC3C,KAAK,EAAE;4CACN,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;yCAChF,YAED,gBAAa,GACR,EAGN,eAAK,KAAK,EAAC,iCAAiC,EAC3C,KAAK,EAAE;wCACN,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;qCAChF,aAED,eAAM,IAAI,EAAC,YAAY,GAAQ,EAC9B,CAAC,IAAI,CAAC,uBAAuB,IAAI,8BAChC,IAAI,CAAC,eAAe;oDACrB,cAAK,KAAK,EAAC,2CAA2C,GAAO,EAE7D,eAAM,IAAI,EAAC,eAAe,GAAQ,IAChC,IACE,IACD,EACN,eAAM,IAAI,EAAE,IAAI,CAAC,kBAAkB,GAAS,IAC1C,EAEJ,eAAM,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,qBAAqB,EACzC,KAAK,EAAC,iBAAiB,YACtB,IAAI,CAAC,oBAAoB,GAAQ,IAC9B,CACN,CAAC;AACH,CAAC","sourcesContent":["import Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport type DynamicPageTitle from \"./DynamicPageTitle.js\";\nimport slimArrowDownIcon from \"@ui5/webcomponents-icons/dist/slim-arrow-down.js\";\n\nexport default function DynamicPageTitleTemplate(this: DynamicPageTitle) {\n\treturn (\n\t\t<div class=\"ui5-dynamic-page-title-root\">\n\t\t\t<span class=\"ui5-dynamic-page-title-focus-area\"\n\t\t\t\tdata-sap-focus-ref\n\t\t\t\ttabIndex={this._tabIndex}\n\t\t\t\tonKeyDown={this._onkeydown}\n\t\t\t\tonClick={this.onTitleClick}\n\t\t\t\trole=\"button\"\n\t\t\t\taria-expanded={this._headerExpanded}\n\t\t\t\taria-labelledby={this._ariaLabelledBy}\n\t\t\t\taria-describedby={`${this._id}-toggle-description`}\n\t\t\t></span>\n\n\t\t\t{this.hasSnappedTitleOnMobile ?\n\t\t\t\t<div id={`${this._id}-heading`}\n\t\t\t\t\t class=\"ui5-dynamic-page--snapped-title-on-mobile\"\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"snappedTitleOnMobile\"></slot>\n\t\t\t\t\t<Icon name={slimArrowDownIcon} mode=\"Decorative\" />\n\t\t\t\t</div>\n\t\t\t\t: <>\n\t\t\t\t\t<div class=\"ui5-dynamic-page-title--top-area\">\n\t\t\t\t\t\t<slot name=\"breadcrumbs\"></slot>\n\n\t\t\t\t\t\t{this.mobileNavigationActions &&\n\t\t\t\t\t\t<slot name=\"navigationBar\"></slot>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"ui5-dynamic-page-title--wrapper\"\n\t\t\t\t\t\tonui5-_min-content-width-change={this.onMinContentWidthChange}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div id={`${this._id}-heading`}\n\t\t\t\t\t\t class=\"ui5-dynamic-page-title--heading\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<slot name={this.headingSlotName}></slot>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t{this.hasContent &&\n\t\t\t\t\t\t<div class=\"ui5-dynamic-page-title--content\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\"min-width\": this.minContentWidth ? `${this.minContentWidth || 0}px` : undefined,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t<div class=\"ui5-dynamic-page-title--actions\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\"min-width\": this.minActionsWidth ? `${this.minActionsWidth || 0}px` : undefined,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<slot name=\"actionsBar\"></slot>\n\t\t\t\t\t\t\t{!this.mobileNavigationActions && <>\n\t\t\t\t\t\t\t\t{this._needsSeparator &&\n\t\t\t\t\t\t\t\t<div class=\"ui5-dynamic-page-title--actions-separator\"></div>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t<slot name=\"navigationBar\"></slot>\n\t\t\t\t\t\t\t</>}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<slot name={this.subheadingSlotName}></slot>\n\t\t\t\t</>}\n\n\t\t\t<span id={`${this._id}-toggle-description`}\n\t\t\t\tclass=\"ui5-hidden-text\"\n\t\t\t>{this._ariaDescribedbyText}</span>\n\t\t</div>\n\t);\n}\n"]}

package/dist/DynamicSideContent.d.ts

@@ -1,5 +1,4 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import type { ClassMap } from "@ui5/webcomponents-base/dist/types.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import SideContentPosition from "./types/SideContentPosition.js";
 import SideContentVisibility from "./types/SideContentVisibility.js";
@@ -165,7 +164,16 @@ declare class DynamicSideContent extends UI5Element {
      * @public
      */
     toggleContents(): void;
-    get classes(): ClassMap;
+    get classes(): {
+        main: {
+            [x: string]: boolean;
+            "ui5-dsc-main": boolean;
+        };
+        side: {
+            [x: string]: boolean;
+            "ui5-dsc-side": boolean;
+        };
+    };
     get styles(): {
         root: {
             "flex-wrap": string;

package/dist/DynamicSideContent.js

@@ -12,12 +12,12 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import SideContentPosition from "./types/SideContentPosition.js";
 import SideContentVisibility from "./types/SideContentVisibility.js";
 import SideContentFallDown from "./types/SideContentFallDown.js";
-import DynamicSideContentTemplate from "./generated/templates/DynamicSideContentTemplate.lit.js";
+import DynamicSideContentTemplate from "./DynamicSideContentTemplate.js";
 // Styles
 import DynamicSideContentCss from "./generated/themes/DynamicSideContent.css.js";
 // Texts
@@ -182,17 +182,17 @@ let DynamicSideContent = DynamicSideContent_1 = class DynamicSideContent extends
         }
     }
     get classes() {
-        const gridPrefix = "ui5-dsc-span", mcSpan = this._toggled ? this._scSpan : this._mcSpan, scSpan = this._toggled ? this._mcSpan : this._scSpan, classes = {
+        const gridPrefix = "ui5-dsc-span", mcSpan = this._toggled ? this._scSpan : this._mcSpan, scSpan = this._toggled ? this._mcSpan : this._scSpan;
+        return {
             main: {
                 "ui5-dsc-main": true,
+                [`${gridPrefix}-${mcSpan}`]: true,
             },
             side: {
                 "ui5-dsc-side": true,
+                [`${gridPrefix}-${scSpan}`]: true,
             },
         };
-        classes.main[`${gridPrefix}-${mcSpan}`] = true;
-        classes.side[`${gridPrefix}-${scSpan}`] = true;
-        return classes;
     }
     get styles() {
         const isToggled = this.breakpoint === this.sizeS && this._toggled, mcSpan = isToggled ? this._scSpan : this._mcSpan, scSpan = isToggled ? this._mcSpan : this._scSpan, contentHeight = this.breakpoint === this.sizeS && this.sideContentVisibility !== SideContentVisibility.AlwaysShow ? "100%" : "auto";
@@ -394,7 +394,7 @@ __decorate([
 DynamicSideContent = DynamicSideContent_1 = __decorate([
     customElement({
         tag: "ui5-dynamic-side-content",
-        renderer: litRender,
+        renderer: jsxRenderer,
         styles: [DynamicSideContentCss, getEffectiveScrollbarStyle()],
         template: DynamicSideContentTemplate,
     })

package/dist/DynamicSideContent.js.map

@@ -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-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport getEffectiveScrollbarStyle from \"@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js\";\nimport type { ClassMap } from \"@ui5/webcomponents-base/dist/types.js\";\nimport type I18nBundle 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 | undefined,\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, getEffectiveScrollbarStyle()],\n\ttemplate: DynamicSideContentTemplate,\n})\n/**\n * Fires when the current breakpoint has been changed.\n * @param {string} currentBreakpoint the current breakpoint.\n * @param {string | undefined} previousBreakpoint the breakpoint that was active before change to current breakpoint.\n * @param {boolean} mainContentVisible visibility of the main content.\n * @param {boolean} sideContentVisible visibility of the side content.\n * @public\n */\n@event(\"layout-change\", {\n\tbubbles: true,\n})\nclass DynamicSideContent extends UI5Element {\n\teventDetails!: {\n\t\t\"layout-change\": DynamicSideContentLayoutChangeEventDetail\n\t}\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 = false;\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 = false;\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()\n\tsideContentPosition: `${SideContentPosition}` = \"End\";\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()\n\tsideContentVisibility: `${SideContentVisibility}` = \"ShowAboveS\";\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()\n\tsideContentFallDown: `${SideContentFallDown}` = \"OnMinimumWidth\";\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 = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\t_mcSpan = \"0\";\n\n\t/**\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\t_scSpan = \"0\";\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean, noAttribute: true })\n\t_toggled = false;\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\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\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).getBoundingClientRect().width;\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 = false;\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.fireDecoratorEvent(\"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"]}
+{"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-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport getEffectiveScrollbarStyle from \"@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.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 \"./DynamicSideContentTemplate.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 | undefined,\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: jsxRenderer,\n\tstyles: [DynamicSideContentCss, getEffectiveScrollbarStyle()],\n\ttemplate: DynamicSideContentTemplate,\n})\n/**\n * Fires when the current breakpoint has been changed.\n * @param {string} currentBreakpoint the current breakpoint.\n * @param {string | undefined} previousBreakpoint the breakpoint that was active before change to current breakpoint.\n * @param {boolean} mainContentVisible visibility of the main content.\n * @param {boolean} sideContentVisible visibility of the side content.\n * @public\n */\n@event(\"layout-change\", {\n\tbubbles: true,\n})\nclass DynamicSideContent extends UI5Element {\n\teventDetails!: {\n\t\t\"layout-change\": DynamicSideContentLayoutChangeEventDetail\n\t}\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 = false;\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 = false;\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()\n\tsideContentPosition: `${SideContentPosition}` = \"End\";\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()\n\tsideContentVisibility: `${SideContentVisibility}` = \"ShowAboveS\";\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()\n\tsideContentFallDown: `${SideContentFallDown}` = \"OnMinimumWidth\";\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 = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\t_mcSpan = \"0\";\n\n\t/**\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\t_scSpan = \"0\";\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean, noAttribute: true })\n\t_toggled = false;\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\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\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() {\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\n\t\treturn {\n\t\t\tmain: {\n\t\t\t\t\"ui5-dsc-main\": true,\n\t\t\t\t[`${gridPrefix}-${mcSpan}`]: true,\n\t\t\t},\n\t\t\tside: {\n\t\t\t\t\"ui5-dsc-side\": true,\n\t\t\t\t[`${gridPrefix}-${scSpan}`]: true,\n\t\t\t},\n\t\t};\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).getBoundingClientRect().width;\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 = false;\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.fireDecoratorEvent(\"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/DynamicSideContentTemplate.d.ts

@@ -0,0 +1,2 @@
+import type DynamicSideContent from "./DynamicSideContent.js";
+export default function DynamicSideContentTemplate(this: DynamicSideContent): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/DynamicSideContentTemplate.js

@@ -0,0 +1,14 @@
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
+export default function DynamicSideContentTemplate() {
+    return (_jsx("div", { class: "ui5-dsc-root", style: this.styles.root, children: this._isSideContentFirst ?
+            _jsxs(_Fragment, { children: [sideContent.call(this), mainContent.call(this)] })
+            :
+                _jsxs(_Fragment, { children: [mainContent.call(this), sideContent.call(this)] }) }));
+}
+function mainContent() {
+    return (_jsx("div", { class: this.classes.main, style: this.styles.main, children: _jsx("slot", {}) }));
+}
+function sideContent() {
+    return (_jsx("aside", { role: "complementary", "aria-label": this.accInfo.label, class: this.classes.side, style: this.styles.side, children: _jsx("slot", { name: "sideContent" }) }));
+}
+//# sourceMappingURL=DynamicSideContentTemplate.js.map

package/dist/DynamicSideContentTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicSideContentTemplate.js","sourceRoot":"","sources":["../src/DynamicSideContentTemplate.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,0BAA0B;IACjD,OAAO,CACN,cACC,KAAK,EAAC,cAAc,EACpB,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,YAEtB,IAAI,CAAC,mBAAmB,CAAC,CAAC;YAC1B,8BACG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EACtB,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IACtB;YACH,CAAC;gBACD,8BACG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EACtB,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IACtB,GAEC,CACN,CAAC;AACH,CAAC;AAED,SAAS,WAAW;IACnB,OAAO,CACN,cACC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,EACxB,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,YAEvB,gBAAa,GACR,CACN,CAAC;AACH,CAAC;AAED,SAAS,WAAW;IACnB,OAAO,CACN,gBACC,IAAI,EAAC,eAAe,gBACR,IAAI,CAAC,OAAO,CAAC,KAAK,EAC9B,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,EACxB,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,YAEvB,eAAM,IAAI,EAAC,aAAa,GAAQ,GACzB,CACR,CAAC;AACH,CAAC","sourcesContent":["import type DynamicSideContent from \"./DynamicSideContent.js\";\n\nexport default function DynamicSideContentTemplate(this: DynamicSideContent) {\n\treturn (\n\t\t<div\n\t\t\tclass=\"ui5-dsc-root\"\n\t\t\tstyle={this.styles.root}\n\t\t>\n\t\t\t{this._isSideContentFirst ?\n\t\t\t\t<>\n\t\t\t\t\t{ sideContent.call(this) }\n\t\t\t\t\t{ mainContent.call(this) }\n\t\t\t\t</>\n\t\t\t\t:\n\t\t\t\t<>\n\t\t\t\t\t{ mainContent.call(this) }\n\t\t\t\t\t{ sideContent.call(this) }\n\t\t\t\t</>\n\t\t\t}\n\t\t</div>\n\t);\n}\n\nfunction mainContent(this: DynamicSideContent) {\n\treturn (\n\t\t<div\n\t\t\tclass={this.classes.main}\n\t\t\tstyle={this.styles.main}\n\t\t>\n\t\t\t<slot></slot>\n\t\t</div>\n\t);\n}\n\nfunction sideContent(this: DynamicSideContent) {\n\treturn (\n\t\t<aside\n\t\t\trole=\"complementary\"\n\t\t\taria-label={this.accInfo.label}\n\t\t\tclass={this.classes.side}\n\t\t\tstyle={this.styles.side}\n\t\t>\n\t\t\t<slot name=\"sideContent\"></slot>\n\t\t</aside>\n\t);\n}\n"]}

package/dist/FlexibleColumnLayout.d.ts

@@ -1,8 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import type AriaLandmarkRole from "@ui5/webcomponents-base/dist/types/AriaLandmarkRole.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/vertical-grip.js";
-import type { PassiveEventListenerObject } from "@ui5/webcomponents-base/dist/types.js";
+import type { PassiveEventListenerObject, AriaLandmarkRole } from "@ui5/webcomponents-base";
 import FCLLayout from "./types/FCLLayout.js";
 import type { LayoutConfiguration } from "./fcl-utils/FCLLayout.js";
 declare enum MEDIA {
@@ -30,7 +29,7 @@ type FlexibleColumnLayoutLayoutChangeEventDetail = {
     separatorsUsed: boolean;
     resized: boolean;
 };
-type FCLAccessibilityRoles = Extract<Lowercase<AriaLandmarkRole>, "none" | "complementary" | "contentinfo" | "main" | "region">;
+type FCLAccessibilityRoles = Extract<AriaLandmarkRole, "none" | "complementary" | "contentinfo" | "main" | "region">;
 type FCLAccessibilityAttributes = {
     startColumn?: {
         role: FCLAccessibilityRoles;
@@ -289,46 +288,6 @@ declare class FlexibleColumnLayout extends UI5Element {
     * @public
     */
     get visibleColumns(): number;
-    get classes(): {
-        root: {
-            "ui5-fcl-root": boolean;
-        };
-        columns: {
-            start: {
-                "ui5-fcl-column": boolean;
-                "ui5-fcl-column-animation": boolean;
-                "ui5-fcl-column--start": boolean;
-            };
-            middle: {
-                "ui5-fcl-column": boolean;
-                "ui5-fcl-column-animation": boolean;
-                "ui5-fcl-column--middle": boolean;
-            };
-            end: {
-                "ui5-fcl-column": boolean;
-                "ui5-fcl-column-animation": boolean;
-                "ui5-fcl-column--end": boolean;
-            };
-        };
-    };
-    get styles(): {
-        separator: {
-            start: {
-                display: string;
-            };
-            end: {
-                display: string;
-            };
-        };
-        grip: {
-            start: {
-                display: string;
-            };
-            end: {
-                display: string;
-            };
-        };
-    };
     get startColumnWidth(): string | number;
     get midColumnWidth(): string | number;
     get endColumnWidth(): string | number;
@@ -360,8 +319,8 @@ declare class FlexibleColumnLayout extends UI5Element {
     get accStartColumnRole(): FCLAccessibilityRoles | undefined;
     get accMiddleColumnRole(): FCLAccessibilityRoles | undefined;
     get accEndColumnRole(): FCLAccessibilityRoles | undefined;
-    get accStartSeparatorRole(): FCLAccessibilityRoles | "separator";
-    get accEndSeparatorRole(): FCLAccessibilityRoles | "separator";
+    get accStartSeparatorRole(): "separator" | FCLAccessibilityRoles;
+    get accEndSeparatorRole(): "separator" | FCLAccessibilityRoles;
     get _effectiveLayoutsByMedia(): LayoutConfiguration;
     get _accAttributes(): {
         columns: {

package/dist/FlexibleColumnLayout.js

@@ -11,7 +11,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { supportsTouch } from "@ui5/webcomponents-base/dist/Device.js";
 import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
@@ -25,7 +25,7 @@ import { getLayoutsByMedia, } from "./fcl-utils/FCLLayout.js";
 // Texts
 import { FCL_START_COLUMN_TXT, FCL_MIDDLE_COLUMN_TXT, FCL_END_COLUMN_TXT, FCL_START_SEPARATOR_TOOLTIP, FCL_END_SEPARATOR_TOOLTIP, } from "./generated/i18n/i18n-defaults.js";
 // Template
-import FlexibleColumnLayoutTemplate from "./generated/templates/FlexibleColumnLayoutTemplate.lit.js";
+import FlexibleColumnLayoutTemplate from "./FlexibleColumnLayoutTemplate.js";
 // Styles
 import FlexibleColumnLayoutCss from "./generated/themes/FlexibleColumnLayout.css.js";
 var MEDIA;
@@ -683,51 +683,6 @@ let FlexibleColumnLayout = FlexibleColumnLayout_1 = class FlexibleColumnLayout e
     get visibleColumns() {
         return this._visibleColumns;
     }
-    get classes() {
-        const hasAnimation = getAnimationMode() !== AnimationMode.None;
-        return {
-            root: {
-                "ui5-fcl-root": true,
-            },
-            columns: {
-                start: {
-                    "ui5-fcl-column": true,
-                    "ui5-fcl-column-animation": hasAnimation,
-                    "ui5-fcl-column--start": true,
-                },
-                middle: {
-                    "ui5-fcl-column": true,
-                    "ui5-fcl-column-animation": hasAnimation,
-                    "ui5-fcl-column--middle": true,
-                },
-                end: {
-                    "ui5-fcl-column": true,
-                    "ui5-fcl-column-animation": hasAnimation,
-                    "ui5-fcl-column--end": true,
-                },
-            },
-        };
-    }
-    get styles() {
-        return {
-            separator: {
-                start: {
-                    display: this.showStartSeparator ? "flex" : "none",
-                },
-                end: {
-                    display: this.showEndSeparator ? "flex" : "none",
-                },
-            },
-            grip: {
-                start: {
-                    display: this.showStartSeparatorGrip ? "inline-block" : "none",
-                },
-                end: {
-                    display: this.showEndSeparatorGrip ? "inline-block" : "none",
-                },
-            },
-        };
-    }
     get startColumnWidth() {
         return this._columnLayout ? this._columnLayout[0] : "100%";
     }
@@ -904,7 +859,7 @@ FlexibleColumnLayout = FlexibleColumnLayout_1 = __decorate([
     customElement({
         tag: "ui5-flexible-column-layout",
         fastNavigation: true,
-        renderer: litRender,
+        renderer: jsxRenderer,
         styles: FlexibleColumnLayoutCss,
         template: FlexibleColumnLayoutTemplate,
         dependencies: [Icon],