@ui5/webcomponents-fiori 0.0.0-e7dd012d7 → 0.0.0-ebd9a4db3

package/dist/DynamicSideContent.js

@@ -0,0 +1,437 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var DynamicSideContent_1;
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+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 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 "./DynamicSideContentTemplate.js";
+// Styles
+import DynamicSideContentCss from "./generated/themes/DynamicSideContent.css.js";
+// Texts
+import { DSC_MAIN_ARIA_LABEL, DSC_SIDE_ARIA_LABEL, } from "./generated/i18n/i18n-defaults.js";
+// Breakpoint-related constants
+const S_M_BREAKPOINT = 720, // Breakpoint between S and M screen sizes
+M_L_BREAKPOINT = 1024, // Breakpoint between M and L screen sizes
+L_XL_BREAKPOINT = 1440, // Breakpoint between L and XL screen sizes
+MINIMUM_WIDTH_BREAKPOINT = 960; // Minimum width of the control where main and side contents are side by side
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The DynamicSideContent (`ui5-dynamic-side-content`) is a layout component that allows additional content
+ * to be displayed in a way that flexibly adapts to different screen sizes. The side
+ * content appears in a container next to or directly below the main content
+ * (it doesn't overlay). When the side content is triggered, the main content becomes
+ * narrower (if appearing side-by-side). The side content contains a separate scrollbar
+ * when appearing next to the main content.
+ *
+ * ### Usage
+ *
+ * *When to use?*
+ *
+ * Use this component if you want to display relevant information that is not critical
+ * for users to complete a task. Users should have access to all the key functions and
+ * critical information in the app even if they do not see the side content. This is
+ * important because on smaller screen sizes it may be difficult to display the side
+ * content in a way that is easily accessible for the user.
+ *
+ * *When not to use?*
+ *
+ * Don't use it if you want to display navigation or critical information that prevents
+ * users from completing a task when they have no access to the side content.
+ *
+ * ### Responsive Behavior
+ *
+ * Screen width \> 1440px
+ *
+ * - Main vs. side content ratio is 75 vs. 25 percent (with a minimum of 320px
+ * each).
+ * - If the application defines a trigger, the side content can be hidden.
+ *
+ * Screen width \<\= 1440px and \> 1024px
+ *
+ * - Main vs. side content ratio is 66.666 vs. 33.333 percent (with a minimum of
+ * 320px each). If the side content width falls below 320 px, it automatically slides
+ * under the main content, unless the app development team specifies that it should
+ * disappear.
+ *
+ * Screen width \<\= 1024px and \> 720px
+ *
+ * - The side content ratio is fixed to 340px, and the main content takes the rest
+ * of the width. Only if the `sideContentFallDown` is set to `OnMinimumWidth`
+ * and screen width is \<\= 960px and \> 720px the side content falls below the main content.
+ *
+ * Screen width \<\= 720px (for example on a mobile device)
+ *
+ * - In this case, the side content automatically disappears from the screen (unless
+ * specified to stay under the content by setting of `sideContentVisibility`
+ * property to `AlwaysShow`) and can be triggered from a pre-set trigger
+ * (specified within the app). When the side content is triggered, it replaces the main
+ * content. We recommend that you always place the trigger for the side content in the
+ * same location, such as in the app footer.
+ *
+ * A special case allows switching the comparison mode between the main and side content.
+ * In this case, the screen is split into 50:50 percent for main vs. side content. The
+ * responsive behavior of the equal split is the same as in the standard view - the
+ * side content disappears on screen widths of less than 720 px and can only be
+ * viewed by triggering it.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents-fiori/dist/DynamicSideContent.js";`
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @since 1.1.0
+ * @slot {Array<HTMLElement>} default - Defines the main content.
+ */
+let DynamicSideContent = DynamicSideContent_1 = class DynamicSideContent extends UI5Element {
+    constructor() {
+        super();
+        /**
+         * Defines the visibility of the main content.
+         * @default false
+         * @public
+         *
+         */
+        this.hideMainContent = false;
+        /**
+         * Defines the visibility of the side content.
+         * @default false
+         * @public
+         *
+         */
+        this.hideSideContent = false;
+        /**
+         * Defines whether the side content is positioned before the main content (left side
+         * in LTR mode), or after the the main content (right side in LTR mode).
+    
+         * @default "End"
+         * @public
+         *
+         */
+        this.sideContentPosition = "End";
+        /**
+         * Defines on which breakpoints the side content is visible.
+         * @default "ShowAboveS"
+         * @public
+         *
+         */
+        this.sideContentVisibility = "ShowAboveS";
+        /**
+         * Defines on which breakpoints the side content falls down below the main content.
+         * @default "OnMinimumWidth"
+         * @public
+         *
+         */
+        this.sideContentFallDown = "OnMinimumWidth";
+        /**
+         * Defines whether the component is in equal split mode. In this mode, the side and
+         * the main content take 50:50 percent of the container on all screen sizes
+         * except for phone, where the main and side contents are switching visibility
+         * using the toggle method.
+         * @default false
+         * @public
+         *
+         */
+        this.equalSplit = false;
+        /**
+        * Defines additional accessibility attributes on different areas of the component.
+        *
+        * The accessibilityAttributes object has the following fields:
+        *
+        *  - **mainContent**: `mainContent.ariaLabel` defines the aria-label of the main content area. Accepts any string.
+        *  - **sideContent**: `sideContent.ariaLabel` defines the aria-label of the side content area. Accepts any string.
+        *
+        * @default {}
+        * @public
+        * @since 2.6.0
+        */
+        this.accessibilityAttributes = {};
+        /**
+         * @private
+         */
+        this._mcSpan = "0";
+        /**
+         * @private
+         */
+        this._scSpan = "0";
+        /**
+         * @private
+         */
+        this._toggled = false;
+        this._handleResizeBound = this.handleResize.bind(this);
+    }
+    onAfterRendering() {
+        this._resizeContents();
+    }
+    onEnterDOM() {
+        ResizeHandler.register(this, this._handleResizeBound);
+    }
+    onExitDOM() {
+        ResizeHandler.deregister(this, this._handleResizeBound);
+    }
+    /**
+     * Toggles visibility of main and side contents on S screen size (mobile device).
+     * @public
+     */
+    toggleContents() {
+        if (this.breakpoint === this.sizeS && this.sideContentVisibility !== SideContentVisibility.AlwaysShow) {
+            this._toggled = !this._toggled;
+        }
+    }
+    get 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,
+            },
+        };
+    }
+    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";
+        return {
+            root: {
+                "flex-wrap": this._mcSpan === "12" ? "wrap" : "nowrap",
+            },
+            main: {
+                "height": mcSpan === this.span12 ? contentHeight : "100%",
+            },
+            side: {
+                "height": scSpan === this.span12 ? contentHeight : "100%",
+            },
+        };
+    }
+    get accInfo() {
+        return {
+            mainContent: {
+                ariaLabel: this.accessibilityAttributes.mainContent?.ariaLabel || DynamicSideContent_1.i18nBundle.getText(DSC_MAIN_ARIA_LABEL),
+            },
+            sideContent: {
+                ariaLabel: this.accessibilityAttributes.sideContent?.ariaLabel || DynamicSideContent_1.i18nBundle.getText(DSC_SIDE_ARIA_LABEL),
+            },
+        };
+    }
+    get sizeS() {
+        return "S";
+    }
+    get sizeM() {
+        return "M";
+    }
+    get sizeL() {
+        return "L";
+    }
+    get sizeXL() {
+        return "XL";
+    }
+    get span0() {
+        return "0";
+    }
+    get span3() {
+        return "3";
+    }
+    get span4() {
+        return "4";
+    }
+    get span6() {
+        return "6";
+    }
+    get span8() {
+        return "8";
+    }
+    get span9() {
+        return "9";
+    }
+    get span12() {
+        return "12";
+    }
+    get spanFixed() {
+        return "fixed";
+    }
+    get containerWidth() {
+        return this.parentElement.getBoundingClientRect().width;
+    }
+    get breakpoint() {
+        let size;
+        if (this.containerWidth <= S_M_BREAKPOINT) {
+            size = this.sizeS;
+        }
+        else if (this.containerWidth > S_M_BREAKPOINT && this.containerWidth <= M_L_BREAKPOINT) {
+            size = this.sizeM;
+        }
+        else if (this.containerWidth > M_L_BREAKPOINT && this.containerWidth <= L_XL_BREAKPOINT) {
+            size = this.sizeL;
+        }
+        else {
+            size = this.sizeXL;
+        }
+        return size;
+    }
+    get _isSideContentFirst() {
+        return this.sideContentPosition === SideContentPosition.Start;
+    }
+    handleResize() {
+        this._resizeContents();
+    }
+    _resizeContents() {
+        let mainSize, sideSize, sideVisible = false;
+        // initial set contents sizes
+        switch (this.breakpoint) {
+            case this.sizeS:
+                mainSize = this.span12;
+                sideSize = this.span12;
+                break;
+            case this.sizeM:
+                if (this.sideContentFallDown === SideContentFallDown.BelowXL
+                    || this.sideContentFallDown === SideContentFallDown.BelowL
+                    || (this.containerWidth <= MINIMUM_WIDTH_BREAKPOINT && this.sideContentFallDown === SideContentFallDown.OnMinimumWidth)) {
+                    mainSize = this.span12;
+                    sideSize = this.span12;
+                }
+                else {
+                    mainSize = this.equalSplit ? this.span6 : this.spanFixed;
+                    sideSize = this.equalSplit ? this.span6 : this.spanFixed;
+                }
+                sideVisible = this.sideContentVisibility === SideContentVisibility.ShowAboveS
+                    || this.sideContentVisibility === SideContentVisibility.AlwaysShow;
+                break;
+            case this.sizeL:
+                if (this.sideContentFallDown === SideContentFallDown.BelowXL) {
+                    mainSize = this.span12;
+                    sideSize = this.span12;
+                }
+                else {
+                    mainSize = this.equalSplit ? this.span6 : this.span8;
+                    sideSize = this.equalSplit ? this.span6 : this.span4;
+                }
+                sideVisible = this.sideContentVisibility === SideContentVisibility.ShowAboveS
+                    || this.sideContentVisibility === SideContentVisibility.ShowAboveM
+                    || this.sideContentVisibility === SideContentVisibility.AlwaysShow;
+                break;
+            case this.sizeXL:
+                mainSize = this.equalSplit ? this.span6 : this.span9;
+                sideSize = this.equalSplit ? this.span6 : this.span3;
+                sideVisible = this.sideContentVisibility !== SideContentVisibility.NeverShow;
+        }
+        if (this.sideContentVisibility === SideContentVisibility.AlwaysShow) {
+            sideVisible = true;
+        }
+        // modify sizes of the contents depending on hideMainContent and hideSideContent properties
+        if (this.hideSideContent) {
+            mainSize = this.hideMainContent ? this.span0 : this.span12;
+            sideSize = this.span0;
+            sideVisible = false;
+        }
+        if (this.hideMainContent) {
+            mainSize = this.span0;
+            sideSize = this.hideSideContent ? this.span0 : this.span12;
+            sideVisible = true;
+        }
+        // set final sizes of the contents
+        if (!sideVisible) {
+            mainSize = this.span12;
+            sideSize = this.span0;
+        }
+        // fire "layout-change" event
+        if (this._currentBreakpoint !== this.breakpoint) {
+            const eventParams = {
+                currentBreakpoint: this.breakpoint,
+                previousBreakpoint: this._currentBreakpoint,
+                mainContentVisible: mainSize !== this.span0,
+                sideContentVisible: sideSize !== this.span0,
+            };
+            this.fireDecoratorEvent("layout-change", eventParams);
+            this._currentBreakpoint = this.breakpoint;
+        }
+        // update contents sizes
+        this._setSpanSizes(mainSize, sideSize);
+    }
+    _setSpanSizes(mainSize, sideSize) {
+        this._mcSpan = mainSize;
+        this._scSpan = sideSize;
+        if (this.breakpoint !== this.sizeS) {
+            this._toggled = false;
+        }
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], DynamicSideContent.prototype, "hideMainContent", void 0);
+__decorate([
+    property({ type: Boolean })
+], DynamicSideContent.prototype, "hideSideContent", void 0);
+__decorate([
+    property()
+], DynamicSideContent.prototype, "sideContentPosition", void 0);
+__decorate([
+    property()
+], DynamicSideContent.prototype, "sideContentVisibility", void 0);
+__decorate([
+    property()
+], DynamicSideContent.prototype, "sideContentFallDown", void 0);
+__decorate([
+    property({ type: Boolean })
+], DynamicSideContent.prototype, "equalSplit", void 0);
+__decorate([
+    property({ type: Object })
+], DynamicSideContent.prototype, "accessibilityAttributes", void 0);
+__decorate([
+    property({ noAttribute: true })
+], DynamicSideContent.prototype, "_mcSpan", void 0);
+__decorate([
+    property({ noAttribute: true })
+], DynamicSideContent.prototype, "_scSpan", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], DynamicSideContent.prototype, "_toggled", void 0);
+__decorate([
+    property({ noAttribute: true })
+], DynamicSideContent.prototype, "_currentBreakpoint", void 0);
+__decorate([
+    slot()
+], DynamicSideContent.prototype, "sideContent", void 0);
+__decorate([
+    i18n("@ui5/webcomponents-fiori")
+], DynamicSideContent, "i18nBundle", void 0);
+DynamicSideContent = DynamicSideContent_1 = __decorate([
+    customElement({
+        tag: "ui5-dynamic-side-content",
+        renderer: jsxRenderer,
+        styles: [DynamicSideContentCss, getEffectiveScrollbarStyle()],
+        template: DynamicSideContentTemplate,
+    })
+    /**
+     * Fires when the current breakpoint has been changed.
+     * @param {string} currentBreakpoint the current breakpoint.
+     * @param {string | undefined} previousBreakpoint the breakpoint that was active before change to current breakpoint.
+     * @param {boolean} mainContentVisible visibility of the main content.
+     * @param {boolean} sideContentVisible visibility of the side content.
+     * @public
+     */
+    ,
+    event("layout-change", {
+        bubbles: true,
+    })
+], DynamicSideContent);
+DynamicSideContent.define();
+export default DynamicSideContent;
+//# sourceMappingURL=DynamicSideContent.js.map

package/dist/DynamicSideContent.js.map

@@ -0,0 +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 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\";\nimport type {\n\tAccessibilityAttributes,\n} from \"@ui5/webcomponents-base\";\n\n// Styles\nimport DynamicSideContentCss from \"./generated/themes/DynamicSideContent.css.js\";\n\n// Texts\nimport {\n\tDSC_MAIN_ARIA_LABEL,\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\ntype DynamicSideContentAriaAccessibilityAttributes = Pick<AccessibilityAttributes, \"ariaLabel\">;\ntype DynamicSideContentAccessibilityAttributes = {\n\tmainContent?: DynamicSideContentAriaAccessibilityAttributes,\n\tsideContent?: DynamicSideContentAriaAccessibilityAttributes,\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* Defines additional accessibility attributes on different areas of the component.\n\t*\n\t* The accessibilityAttributes object has the following fields:\n\t*\n\t*  - **mainContent**: `mainContent.ariaLabel` defines the aria-label of the main content area. Accepts any string.\n\t*  - **sideContent**: `sideContent.ariaLabel` defines the aria-label of the side content area. Accepts any string.\n\t*\n\t* @default {}\n\t* @public\n\t* @since 2.6.0\n\t*/\n\t@property({ type: Object })\n\taccessibilityAttributes: DynamicSideContentAccessibilityAttributes = {};\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(): DynamicSideContentAccessibilityAttributes {\n\t\treturn {\n\t\t\tmainContent: {\n\t\t\t\tariaLabel: this.accessibilityAttributes.mainContent?.ariaLabel || DynamicSideContent.i18nBundle.getText(DSC_MAIN_ARIA_LABEL),\n\t\t\t},\n\t\t\tsideContent: {\n\t\t\t\tariaLabel: this.accessibilityAttributes.sideContent?.ariaLabel || DynamicSideContent.i18nBundle.getText(DSC_SIDE_ARIA_LABEL),\n\t\t\t},\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\tDynamicSideContentAccessibilityAttributes,\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", { role: "main", "aria-label": this.accInfo.mainContent?.ariaLabel, class: this.classes.main, style: this.styles.main, children: _jsx("slot", {}) }));
+}
+function sideContent() {
+    return (_jsx("aside", { role: "complementary", "aria-label": this.accInfo.sideContent?.ariaLabel, 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,IAAI,EAAC,MAAM,gBACC,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,SAAS,EAC/C,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,WAAW,EAAE,SAAS,EAC/C,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\trole=\"main\"\n\t\t\taria-label={this.accInfo.mainContent?.ariaLabel}\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.sideContent?.ariaLabel}\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/FilterItem.d.ts

@@ -0,0 +1,39 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type FilterItemOption from "./FilterItemOption.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * ### Usage
+ *
+ * For the `ui5-filter-item`
+ * ### ES6 Module Import
+ *
+ * `import @ui5/webcomponents-fiori/dist/FilterItem.js";`
+ * @constructor
+ * @extends UI5Element
+ * @abstract
+ * @since 1.0.0-rc.16
+ * @public
+ */
+declare class FilterItem extends UI5Element {
+    /**
+     * Defines the text of the component.
+     * @default undefined
+     * @public
+     */
+    text?: string;
+    /**
+     * Defines the additional text of the component.
+     * @default undefined
+     * @public
+     */
+    additionalText?: string;
+    /**
+     * Defines the `values` list.
+     * @public
+     */
+    values: Array<FilterItemOption>;
+}
+export default FilterItem;

package/dist/FilterItem.js

@@ -0,0 +1,44 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * ### Usage
+ *
+ * For the `ui5-filter-item`
+ * ### ES6 Module Import
+ *
+ * `import @ui5/webcomponents-fiori/dist/FilterItem.js";`
+ * @constructor
+ * @extends UI5Element
+ * @abstract
+ * @since 1.0.0-rc.16
+ * @public
+ */
+let FilterItem = class FilterItem extends UI5Element {
+};
+__decorate([
+    property()
+], FilterItem.prototype, "text", void 0);
+__decorate([
+    property()
+], FilterItem.prototype, "additionalText", void 0);
+__decorate([
+    slot()
+], FilterItem.prototype, "values", void 0);
+FilterItem = __decorate([
+    customElement("ui5-filter-item")
+], FilterItem);
+FilterItem.define();
+export default FilterItem;
+//# sourceMappingURL=FilterItem.js.map

package/dist/FilterItem.js.map

@@ -0,0 +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 undefined\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 undefined\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

@@ -0,0 +1,33 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * ### Usage
+ *
+ * For the `ui5-filter-item-option`
+ * ### ES6 Module Import
+ *
+ * `import @ui5/webcomponents-fiori/dist/FilterItemOption.js";`
+ * @constructor
+ * @extends UI5Element
+ * @abstract
+ * @since 1.0.0-rc.16
+ * @public
+ */
+declare class FilterItemOption extends UI5Element {
+    /**
+     * Defines the text of the component.
+     * @default undefined
+     * @public
+     */
+    text?: string;
+    /**
+     * Defines if the component is selected.
+     * @default false
+     * @public
+     */
+    selected: boolean;
+}
+export default FilterItemOption;