@ui5/webcomponents-fiori 0.0.0-037d08c67

package/dist/DynamicSideContent.js

@@ -0,0 +1,413 @@
+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-strict.js";
+import query from "@ui5/webcomponents-base/dist/decorators/query.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.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(...arguments);
+        /**
+         * 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._toggled = false;
+        /**
+         * @private
+         */
+        this._isSideContentBelowMainContent = false;
+    }
+    onEnterDOM() {
+        this._resizeObserver = new ResizeObserver(entries => {
+            entries.forEach(entry => {
+                const width = entry.contentRect.width;
+                let breakpoint;
+                if (width <= S_M_BREAKPOINT) {
+                    breakpoint = "S";
+                }
+                else if (width <= M_L_BREAKPOINT) {
+                    breakpoint = "M";
+                }
+                else if (width <= L_XL_BREAKPOINT) {
+                    breakpoint = "L";
+                }
+                else {
+                    breakpoint = "XL";
+                }
+                this._isSideContentBelowMainContent = this.isSideContentBelowMainContent;
+                if (breakpoint !== this._currentBreakpoint) {
+                    this.fireDecoratorEvent("layout-change", {
+                        currentBreakpoint: breakpoint,
+                        previousBreakpoint: this._currentBreakpoint,
+                        mainContentVisible: this._getMainContentVisibility(),
+                        sideContentVisible: this._getSideContentVisibility(),
+                    });
+                    this._currentBreakpoint = breakpoint;
+                }
+            });
+        });
+        this._resizeObserver.observe(this);
+    }
+    onExitDOM() {
+        this._resizeObserver?.disconnect();
+    }
+    /**
+     * Toggles visibility of main and side contents on S screen size (mobile device).
+     * @public
+     */
+    toggleContents() {
+        if (this._isToggleEnabled) {
+            this._toggled = !this._toggled;
+        }
+    }
+    /**
+     * Gets main content visibility by checking CSS display property
+     * @private
+     */
+    _getMainContentVisibility() {
+        if (!this._mainContent) {
+            return false;
+        }
+        const computedStyle = getComputedStyle(this._mainContent);
+        return computedStyle.display !== "none";
+    }
+    /**
+     * Gets side content visibility by checking CSS display property
+     * @private
+     */
+    _getSideContentVisibility() {
+        if (!this._sideContent) {
+            return false;
+        }
+        const computedStyle = getComputedStyle(this._sideContent);
+        return computedStyle.display !== "none";
+    }
+    get classes() {
+        return {
+            main: {
+                "ui5-dsc-main": true,
+            },
+            side: {
+                "ui5-dsc-side": true,
+            },
+            root: {
+                "ui5-dsc-root": true,
+                "ui5-dsc-toggled": this._toggled,
+            },
+        };
+    }
+    get isSideContentBelowMainContent() {
+        if (this.sideContentVisibility === SideContentVisibility.NeverShow) {
+            return false;
+        }
+        // Cases when side content falls below main content
+        const fallOnMinimumWidth = this.sideContentFallDown === SideContentFallDown.OnMinimumWidth && this._currentBreakpoint === this.sizeM && this.containerWidth <= MINIMUM_WIDTH_BREAKPOINT;
+        const fallBelowM = this.sideContentFallDown === SideContentFallDown.BelowM && (this._currentBreakpoint === this.sizeM || this._currentBreakpoint === this.sizeS);
+        const fallBelowL = this.sideContentFallDown === SideContentFallDown.BelowL && (this._currentBreakpoint === this.sizeM || this._currentBreakpoint === this.sizeS);
+        const fallBelowXL = this.sideContentFallDown === SideContentFallDown.BelowXL
+            && (this._currentBreakpoint === this.sizeL || this._currentBreakpoint === this.sizeM || this._currentBreakpoint === this.sizeS)
+            && this._currentBreakpoint !== this.sizeXL;
+        const fallWhenAlwaysShow = this.sideContentVisibility === SideContentVisibility.AlwaysShow && (this._currentBreakpoint === this.sizeS
+            || (this._currentBreakpoint === this.sizeM && this.containerWidth <= MINIMUM_WIDTH_BREAKPOINT));
+        return fallOnMinimumWidth || fallBelowM || fallBelowL || fallBelowXL || fallWhenAlwaysShow;
+    }
+    get styles() {
+        this._isSideContentBelowMainContent = this.isSideContentBelowMainContent;
+        return {
+            root: {
+                "flex-wrap": "nowrap",
+            },
+            main: {
+                "height": this._isSideContentBelowMainContent ? "auto" : "100%",
+            },
+            side: {
+                "height": this._isSideContentBelowMainContent ? "auto" : "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 containerWidth() {
+        return this.clientWidth;
+    }
+    get breakpoint() {
+        const width = this.containerWidth;
+        if (width <= S_M_BREAKPOINT) {
+            return this.sizeS;
+        }
+        if (width <= M_L_BREAKPOINT) {
+            return this.sizeM;
+        }
+        if (width <= L_XL_BREAKPOINT) {
+            return this.sizeL;
+        }
+        return this.sizeXL;
+    }
+    get _isSideContentFirst() {
+        return this.sideContentPosition === SideContentPosition.Start;
+    }
+    /**
+     * Returns true when the toggleContents functionality should be enabled.
+     * Toggle is available when side content would normally be hidden in the current breakpoint
+     * but can be shown via the toggle mechanism.
+     * @private
+     */
+    get _isToggleEnabled() {
+        // Never allow toggle when NeverShow is set or content is explicitly hidden
+        if (this.sideContentVisibility === SideContentVisibility.NeverShow
+            || this.hideMainContent
+            || this.hideSideContent) {
+            return false;
+        }
+        const currentBreakpoint = this.breakpoint;
+        // S breakpoint: toggle available unless AlwaysShow
+        if (currentBreakpoint === this.sizeS) {
+            return this.sideContentVisibility !== SideContentVisibility.AlwaysShow;
+        }
+        // For other breakpoints, check if side content would be hidden based on visibility setting
+        const breakpointHierarchy = {
+            [this.sizeM]: [SideContentVisibility.ShowAboveM, SideContentVisibility.ShowAboveL],
+            [this.sizeL]: [SideContentVisibility.ShowAboveL],
+        };
+        const hiddenVisibilities = breakpointHierarchy[currentBreakpoint];
+        return hiddenVisibilities?.includes(this.sideContentVisibility) ?? 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({ type: Boolean, noAttribute: true })
+], DynamicSideContent.prototype, "_toggled", void 0);
+__decorate([
+    property({ noAttribute: true })
+], DynamicSideContent.prototype, "_currentBreakpoint", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], DynamicSideContent.prototype, "_isSideContentBelowMainContent", void 0);
+__decorate([
+    slot()
+], DynamicSideContent.prototype, "sideContent", void 0);
+__decorate([
+    query(".ui5-dsc-main")
+], DynamicSideContent.prototype, "_mainContent", void 0);
+__decorate([
+    query(".ui5-dsc-side")
+], 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],
+        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 type { Slot } 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-strict.js\";\nimport query from \"@ui5/webcomponents-base/dist/decorators/query.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.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],\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({ 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 * @private\n\t */\n\t@property({ type: Boolean, noAttribute: true })\n\t_isSideContentBelowMainContent = false;\n\n\t/**\n\t * Defines the side content.\n\t * @public\n\t */\n\t@slot()\n\tsideContent!: Slot<HTMLElement>;\n\n\t@query(\".ui5-dsc-main\")\n\t_mainContent!: HTMLElement;\n\n\t@query(\".ui5-dsc-side\")\n\t_sideContent!: HTMLElement;\n\n\t_resizeObserver?: ResizeObserver;\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\n\n\tonEnterDOM() {\n\t\tthis._resizeObserver = new ResizeObserver(entries => {\n\t\t\tentries.forEach(entry => {\n\t\t\t\tconst width = entry.contentRect.width;\n\t\t\t\tlet breakpoint: string;\n\t\t\t\tif (width <= S_M_BREAKPOINT) {\n\t\t\t\t\tbreakpoint = \"S\";\n\t\t\t\t} else if (width <= M_L_BREAKPOINT) {\n\t\t\t\t\tbreakpoint = \"M\";\n\t\t\t\t} else if (width <= L_XL_BREAKPOINT) {\n\t\t\t\t\tbreakpoint = \"L\";\n\t\t\t\t} else {\n\t\t\t\t\tbreakpoint = \"XL\";\n\t\t\t\t}\n\n\t\t\t\tthis._isSideContentBelowMainContent = this.isSideContentBelowMainContent;\n\n\t\t\t\tif (breakpoint !== this._currentBreakpoint) {\n\t\t\t\t\tthis.fireDecoratorEvent(\"layout-change\", {\n\t\t\t\t\t\tcurrentBreakpoint: breakpoint,\n\t\t\t\t\t\tpreviousBreakpoint: this._currentBreakpoint,\n\t\t\t\t\t\tmainContentVisible: this._getMainContentVisibility(),\n\t\t\t\t\t\tsideContentVisible: this._getSideContentVisibility(),\n\t\t\t\t\t});\n\t\t\t\t\tthis._currentBreakpoint = breakpoint;\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\t\tthis._resizeObserver.observe(this);\n\t}\n\n\tonExitDOM() {\n\t\tthis._resizeObserver?.disconnect();\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._isToggleEnabled) {\n\t\t\tthis._toggled = !this._toggled;\n\t\t}\n\t}\n\n\t/**\n\t * Gets main content visibility by checking CSS display property\n\t * @private\n\t */\n\t_getMainContentVisibility(): boolean {\n\t\tif (!this._mainContent) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst computedStyle = getComputedStyle(this._mainContent);\n\t\treturn computedStyle.display !== \"none\";\n\t}\n\n\t/**\n\t * Gets side content visibility by checking CSS display property\n\t * @private\n\t */\n\t_getSideContentVisibility(): boolean {\n\t\tif (!this._sideContent) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst computedStyle = getComputedStyle(this._sideContent);\n\t\treturn computedStyle.display !== \"none\";\n\t}\n\n\tget classes() {\n\t\treturn {\n\t\t\tmain: {\n\t\t\t\t\"ui5-dsc-main\": true,\n\t\t\t},\n\t\t\tside: {\n\t\t\t\t\"ui5-dsc-side\": true,\n\t\t\t},\n\t\t\troot: {\n\t\t\t\t\"ui5-dsc-root\": true,\n\t\t\t\t\"ui5-dsc-toggled\": this._toggled,\n\t\t\t},\n\t\t};\n\t}\n\n\tget isSideContentBelowMainContent() {\n\t\tif (this.sideContentVisibility === SideContentVisibility.NeverShow) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Cases when side content falls below main content\n\t\tconst fallOnMinimumWidth = this.sideContentFallDown === SideContentFallDown.OnMinimumWidth && this._currentBreakpoint === this.sizeM && this.containerWidth <= MINIMUM_WIDTH_BREAKPOINT;\n\t\tconst fallBelowM = this.sideContentFallDown === SideContentFallDown.BelowM && (this._currentBreakpoint === this.sizeM || this._currentBreakpoint === this.sizeS);\n\t\tconst fallBelowL = this.sideContentFallDown === SideContentFallDown.BelowL && (this._currentBreakpoint === this.sizeM || this._currentBreakpoint === this.sizeS);\n\t\tconst fallBelowXL = this.sideContentFallDown === SideContentFallDown.BelowXL\n\t\t\t&& (this._currentBreakpoint === this.sizeL || this._currentBreakpoint === this.sizeM || this._currentBreakpoint === this.sizeS)\n\t\t\t&& this._currentBreakpoint !== this.sizeXL;\n\t\tconst fallWhenAlwaysShow = this.sideContentVisibility === SideContentVisibility.AlwaysShow && (\n\t\t\tthis._currentBreakpoint === this.sizeS\n\t\t\t|| (this._currentBreakpoint === this.sizeM && this.containerWidth <= MINIMUM_WIDTH_BREAKPOINT)\n\t\t);\n\n\t\treturn fallOnMinimumWidth || fallBelowM || fallBelowL || fallBelowXL || fallWhenAlwaysShow;\n\t}\n\n\tget styles() {\n\t\tthis._isSideContentBelowMainContent = this.isSideContentBelowMainContent;\n\n\t\treturn {\n\t\t\troot: {\n\t\t\t\t\"flex-wrap\": \"nowrap\",\n\t\t\t},\n\t\t\tmain: {\n\t\t\t\t\"height\": this._isSideContentBelowMainContent ? \"auto\" : \"100%\",\n\t\t\t},\n\t\t\tside: {\n\t\t\t\t\"height\": this._isSideContentBelowMainContent ? \"auto\" : \"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 containerWidth() {\n\t\treturn this.clientWidth;\n\t}\n\n\tget breakpoint(): string {\n\t\tconst width = this.containerWidth;\n\n\t\tif (width <= S_M_BREAKPOINT) {\n\t\t\treturn this.sizeS;\n\t\t}\n\t\tif (width <= M_L_BREAKPOINT) {\n\t\t\treturn this.sizeM;\n\t\t}\n\t\tif (width <= L_XL_BREAKPOINT) {\n\t\t\treturn this.sizeL;\n\t\t}\n\t\treturn this.sizeXL;\n\t}\n\n\tget _isSideContentFirst() {\n\t\treturn this.sideContentPosition === SideContentPosition.Start;\n\t}\n\n\t/**\n\t * Returns true when the toggleContents functionality should be enabled.\n\t * Toggle is available when side content would normally be hidden in the current breakpoint\n\t * but can be shown via the toggle mechanism.\n\t * @private\n\t */\n\tget _isToggleEnabled(): boolean {\n\t\t// Never allow toggle when NeverShow is set or content is explicitly hidden\n\t\tif (this.sideContentVisibility === SideContentVisibility.NeverShow\n\t\t\t|| this.hideMainContent\n\t\t\t|| this.hideSideContent) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst currentBreakpoint = this.breakpoint;\n\n\t\t// S breakpoint: toggle available unless AlwaysShow\n\t\tif (currentBreakpoint === this.sizeS) {\n\t\t\treturn this.sideContentVisibility !== SideContentVisibility.AlwaysShow;\n\t\t}\n\n\t\t// For other breakpoints, check if side content would be hidden based on visibility setting\n\t\tconst breakpointHierarchy = {\n\t\t\t[this.sizeM]: [SideContentVisibility.ShowAboveM, SideContentVisibility.ShowAboveL],\n\t\t\t[this.sizeL]: [SideContentVisibility.ShowAboveL],\n\t\t};\n\n\t\tconst hiddenVisibilities = breakpointHierarchy[currentBreakpoint];\n\t\treturn hiddenVisibilities?.includes(this.sideContentVisibility as SideContentVisibility) ?? false;\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: this.classes.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,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,EACxB,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={this.classes.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,45 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type FilterItemOption from "./FilterItemOption.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-filter-item` component defines the filtering criteria for data in `ui5-view-settings-dialog`.
+ * It represents a single filter category that contains multiple filter options that users can select.
+ *
+ * ### Usage
+ *
+ * The `ui5-filter-item` is used within the `ui5-view-settings-dialog` to provide filtering options.
+ *
+ * ### 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 filter item.
+     * @default undefined
+     * @public
+     */
+    text?: string;
+    /**
+     * Defines the additional text of the filter item.
+     * This text is typically used to show the number of selected filter options within this category.
+     * @default undefined
+     * @public
+     */
+    additionalText?: string;
+    /**
+     * Defines the filter options available for this filter category.
+     * @public
+     */
+    values: Slot<FilterItemOption>;
+}
+export default FilterItem;

package/dist/FilterItem.js

@@ -0,0 +1,48 @@
+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-strict.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-filter-item` component defines the filtering criteria for data in `ui5-view-settings-dialog`.
+ * It represents a single filter category that contains multiple filter options that users can select.
+ *
+ * ### Usage
+ *
+ * The `ui5-filter-item` is used within the `ui5-view-settings-dialog` to provide filtering options.
+ *
+ * ### 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;AAEpE,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAC1E,OAAO,aAAa,MAAM,0DAA0D,CAAC;AAGrF;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;CAwBlC,CAAA;AAjBA;IADC,QAAQ,EAAE;wCACG;AASd;IADC,QAAQ,EAAE;kDACa;AAOxB;IADC,IAAI,EAAE;0CACyB;AAvB3B,UAAU;IADf,aAAa,CAAC,iBAAiB,CAAC;GAC3B,UAAU,CAwBf;AAED,UAAU,CAAC,MAAM,EAAE,CAAC;AAEpB,eAAe,UAAU,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { Slot } 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-strict.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 * The `ui5-filter-item` component defines the filtering criteria for data in `ui5-view-settings-dialog`.\n * It represents a single filter category that contains multiple filter options that users can select.\n *\n * ### Usage\n *\n * The `ui5-filter-item` is used within the `ui5-view-settings-dialog` to provide filtering options.\n *\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 filter item.\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 filter item.\n\t * This text is typically used to show the number of selected filter options within this category.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tadditionalText?: string;\n\n\t/**\n\t * Defines the filter options available for this filter category.\n\t * @public\n\t */\n\t@slot()\n\tvalues!: Slot<FilterItemOption>;\n}\n\nFilterItem.define();\n\nexport default FilterItem;\n"]}

package/dist/FilterItemOption.d.ts

@@ -0,0 +1,38 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-filter-item-option` component defines individual filter values within a `ui5-filter-item`.
+ * It represents a single selectable option that users can choose to filter data.
+ *
+ * ### Usage
+ *
+ * The `ui5-filter-item-option` is used as a child component within `ui5-filter-item` in the context
+ * of `ui5-view-settings-dialog`. Each option represents a specific value that can be used for filtering
+ *
+ * ### 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 filter option.
+     * @default undefined
+     * @public
+     */
+    text?: string;
+    /**
+     * Defines if the filter option is selected.
+     * @default false
+     * @public
+     */
+    selected: boolean;
+}
+export default FilterItemOption;