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

package/dist/UserSettingsItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserSettingsItem.js","sourceRoot":"","sources":["../src/UserSettingsItem.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport {\n\tcustomElement, property, slot, eventStrict as event,\n} from \"@ui5/webcomponents-base/dist/decorators.js\";\nimport type { TabContainerTabSelectEventDetail } from \"@ui5/webcomponents/dist/TabContainer.js\";\nimport type Tab from \"@ui5/webcomponents/dist/Tab.js\";\nimport getEffectiveScrollbarStyle from \"@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js\";\nimport UserSettingsItemTemplate from \"./UserSettingsItemTemplate.js\";\nimport type UserSettingsView from \"./UserSettingsView.js\";\nimport UserSettingsItemCss from \"./generated/themes/UserSettingsItem.css.js\";\n\ntype UserSettingsItemViewSelectEventDetail = {\n\tview: UserSettingsView;\n}\n\ntype UserSettingsItemBackClickEventDetail = {\n\tview: UserSettingsView;\n}\n\n/**\n * @class\n * ### Overview\n *\n * The `ui5-user-settings-item` represents an item in the `ui5-user-settings-dialog`.\n *\n * ### ES6 Module Import\n * `import \"@ui5/webcomponents-fiori/dist/UserSettingsItem.js\";`\n *\n * You can disable the <code>UserSettingsItem</code> by setting the <code>enabled</code> property to <code>false</code>,\n * or use the <code>UserSettingsItem</code> in read-only mode by setting the <code>editable</code> property to false.\n *\n * <b>Note:</b> Disabled and read-only states shouldn't be used together.\n *\n * @constructor\n * @extends UI5Element\n * @experimental\n * @public\n * @since 2.8.0\n */\n@customElement({\n\ttag: \"ui5-user-settings-item\",\n\trenderer: jsxRenderer,\n\ttemplate: UserSettingsItemTemplate,\n\tstyles: [getEffectiveScrollbarStyle(), UserSettingsItemCss],\n})\n\n/**\n * Fired when a selected view changed.\n * @param {UserSettingsView} view The selected `view`.\n * @public\n */\n@event(\"selection-change\", {\n\tcancelable: true,\n})\n\n/**\n *\n * @private\n */\n@event(\"_collapse\", {\n\tbubbles: true,\n})\n\nclass UserSettingsItem extends UI5Element {\n\teventDetails!: {\n\t\t\"_collapse\": void,\n\t\t\"selection-change\": UserSettingsItemViewSelectEventDetail,\n\t\t\"back-click\": UserSettingsItemBackClickEventDetail,\n\n\t}\n\t/**\n\t * Defines the text of the user settings item.\n\t *\n\t * @public\n\t * @default \"\"\n\t */\n\t@property({ type: String })\n\ttext = \"\";\n\n\t/**\n\t * Defines the tooltip of the component.\n\t *\n\t * A tooltip attribute should be provided to represent the meaning or function when the component is collapsed and only the icon is visible.\n\t * @default \"\"\n\t * @public\n\t */\n\t@property({ type: String })\n\ttooltip = \"\";\n\n\t/**\n\t * Defines the headerText of the item.\n\t *\n\t * @public\n\t * @default \"\"\n\t */\n\t@property({ type: String })\n\theaderText?: string;\n\n\t/**\n\t * Shows item tab.\n\t *\n\t * @public\n\t * @default false\n\t */\n\t@property({ type: Boolean })\n\tselected = false;\n\n\t/**\n\t * Defines whether the component is in disabled state.\n\t *\n\t * **Note:** A disabled component is completely noninteractive.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled = false;\n\n\t/**\n\t * Indicates whether a loading indicator should be shown.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tloading = false;\n\n\t/**\n\t * Indicates why the control is in loading state.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tloadingReason?: string;\n\n\t/**\n\t * Defines the icon of the component.\n\t *\n\t * @default \"globe\"\n\t * @public\n\t */\n\t@property({ type: String })\n\ticon = \"globe\";\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n\t * Defines the tab views of the user settings item.\n\t *\n\t * The tab views are displayed by default if there is no selected page view.\n\t * @public\n\t */\n\t@slot({\n\t\ttype: HTMLElement,\n\t\t\"default\": true,\n\t\tindividualSlots: true,\n\t\tinvalidateOnChildChange: {\n\t\t\tproperties: true,\n\t\t\tslots: false,\n\t\t},\n\t})\n\ttabs!: Array<UserSettingsView>;\n\n\t/**\n\t * Defines the page views of the user settings item.\n\t *\n\t * If there are no tab views, the first page view will be shown unless there is selected one. If there is selected page\n\t * view it will be shown no matter if there are tab views.\n\t *\n\t * @public\n\t */\n\t@slot({\n\t\ttype: HTMLElement,\n\t\tindividualSlots: true,\n\t\tinvalidateOnChildChange: {\n\t\t\tproperties: true,\n\t\t\tslots: false,\n\t\t},\n\t})\n\tpages!: Array<UserSettingsView>;\n\n\t/**\n\t * @private\n\t */\n\t_individualSlot?: string;\n\n\tget _hasSelectedPageView() {\n\t\treturn this.pages.some(view => view.selected);\n\t}\n\n\tget _selectedPageView() {\n\t\treturn this.pages.find(view => view.selected) || this.pages[0];\n\t}\n\n\tget ariaLabelledByText() {\n\t\treturn `${this.text} ${this.accessibleName}`.trim();\n\t}\n\n\tget _tooltip() {\n\t\treturn this.tooltip ? this.tooltip : this.text;\n\t}\n\n\tget _icon() {\n\t\treturn this.icon;\n\t}\n\n\t_handleBackButtonClick() {\n\t\tif (this._shouldShowBackButton) {\n\t\t\tconst selectedPageView = this._selectedPageView;\n\t\t\tconst eventPrevented = !this.fireDecoratorEvent(\"selection-change\", {\n\t\t\t\tview: selectedPageView,\n\t\t\t});\n\n\t\t\tif (!eventPrevented) {\n\t\t\t\tselectedPageView.selected = false;\n\t\t\t}\n\t\t} else {\n\t\t\tthis.fireDecoratorEvent(\"_collapse\");\n\t\t}\n\t}\n\n\t_handleTabSelect(e: CustomEvent<TabContainerTabSelectEventDetail>) {\n\t\tconst tab = e.detail.tab as Tab & { associatedSettingView: UserSettingsView };\n\t\tconst tabView = tab.associatedSettingView;\n\t\tconst eventPrevented = !this.fireDecoratorEvent(\"selection-change\", {\n\t\t\tview: tabView,\n\t\t});\n\n\t\tif (eventPrevented) {\n\t\t\te.preventDefault();\n\t\t} else {\n\t\t\tthis.tabs.forEach(view => {\n\t\t\t\tview.selected = false;\n\t\t\t});\n\t\t\ttabView.selected = true;\n\t\t}\n\t}\n\n\tget _shouldShowBackButton() {\n\t\treturn !!(this._hasSelectedPageView && this._selectedPageView.secondary);\n\t}\n\n\tcaptureRef(this: UserSettingsView, ref: HTMLElement & { associatedSettingView?: UserSettingsView} | null) {\n\t\tif (ref) {\n\t\t\tref.associatedSettingView = this;\n\t\t}\n\t}\n}\n\nUserSettingsItem.define();\n\nexport default UserSettingsItem;\nexport type {\n\tUserSettingsItemViewSelectEventDetail,\n\tUserSettingsItemBackClickEventDetail,\n};\n"]}

package/dist/UserSettingsItemTemplate.d.ts

@@ -0,0 +1,4 @@
+import type UserSettingsItem from "./UserSettingsItem.js";
+import "@ui5/webcomponents-icons/dist/globe.js";
+import "@ui5/webcomponents-icons/dist/nav-back.js";
+export default function UserSettingsItemTemplate(this: UserSettingsItem): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/UserSettingsItemTemplate.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import TabContainer from "@ui5/webcomponents/dist/TabContainer.js";
+import Tab from "@ui5/webcomponents/dist/Tab.js";
+import Title from "@ui5/webcomponents/dist/Title.js";
+import "@ui5/webcomponents-icons/dist/globe.js";
+import "@ui5/webcomponents-icons/dist/nav-back.js";
+export default function UserSettingsItemTemplate() {
+    const content = this.tabs.length > 0 && !this._hasSelectedPageView ?
+        _jsx(TabContainer, { contentBackgroundDesign: "Transparent", class: "ui5-user-settings-item-tabs", onTabSelect: this._handleTabSelect, children: this.tabs.map(view => _jsx(Tab, { text: view.text, selected: view.selected, ref: this.captureRef.bind(view), children: _jsx("slot", { name: view._individualSlot }) })) })
+        :
+            _jsx(_Fragment, { children: this._selectedPageView ?
+                    _jsx("div", { class: "ui5-user-settings-item-view-container", children: _jsx("slot", { name: this._selectedPageView._individualSlot }) })
+                    :
+                        null });
+    const loadingState = _jsx("div", { class: "ui5-user-settings-item-loading-container", children: _jsx(BusyIndicator, { active: this.loading, class: "ui5-user-settings-item-busy", delay: 0, "aria-description": this.loadingReason }) });
+    return (_jsxs("div", { class: "ui5-user-settings-item", children: [_jsx("header", { class: "ui5-user-settings-item-header-container", tabindex: 0, children: _jsxs("div", { class: "ui5-user-settings-item-header", children: [_jsx(Button, { icon: "nav-back", design: "Transparent", onClick: this._handleBackButtonClick, class: "ui5-user-settings-item-collapse-btn", style: { display: this._shouldShowBackButton ? "block" : "" } }), _jsx(Title, { level: "H2", size: "H4", children: this._hasSelectedPageView ? this._selectedPageView.text : this.headerText })] }) }), this.loading ? loadingState : content] }));
+}
+//# sourceMappingURL=UserSettingsItemTemplate.js.map

package/dist/UserSettingsItemTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserSettingsItemTemplate.js","sourceRoot":"","sources":["../src/UserSettingsItemTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,aAAa,MAAM,0CAA0C,CAAC;AACrE,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,YAAY,MAAM,yCAAyC,CAAC;AACnE,OAAO,GAAG,MAAM,gCAAgC,CAAC;AACjD,OAAO,KAAK,MAAM,kCAAkC,CAAC;AACrD,OAAO,wCAAwC,CAAC;AAChD,OAAO,2CAA2C,CAAC;AAEnD,MAAM,CAAC,OAAO,UAAU,wBAAwB;IAC/C,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;QACnE,KAAC,YAAY,IAAC,uBAAuB,EAAC,aAAa,EAAC,KAAK,EAAC,6BAA6B,EAAC,WAAW,EAAE,IAAI,CAAC,gBAAgB,YACxH,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CACrB,KAAC,GAAG,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,YAC7E,eAAM,IAAI,EAAE,IAAI,CAAC,eAAe,GAAI,GAC/B,CACN,GACa;QACf,CAAC;YACD,4BACE,IAAI,CAAC,iBAAiB,CAAC,CAAC;oBACxB,cAAK,KAAK,EAAC,uCAAuC,YACjD,eAAM,IAAI,EAAE,IAAI,CAAC,iBAAiB,CAAC,eAAe,GAAI,GACjD;oBACN,CAAC;wBACD,IAAI,GAEH,CAAC;IAEL,MAAM,YAAY,GAAG,cAAK,KAAK,EAAC,0CAA0C,YACzE,KAAC,aAAa,IACb,MAAM,EAAE,IAAI,CAAC,OAAO,EACpB,KAAK,EAAC,6BAA6B,EACnC,KAAK,EAAE,CAAC,sBACU,IAAI,CAAC,aAAa,GACrB,GACX,CAAC;IAEP,OAAO,CACN,eAAK,KAAK,EAAC,wBAAwB,aAClC,iBAAQ,KAAK,EAAC,yCAAyC,EAAC,QAAQ,EAAE,CAAC,YAClE,eAAK,KAAK,EAAC,+BAA+B,aACzC,KAAC,MAAM,IAAC,IAAI,EAAC,UAAU,EAAC,MAAM,EAAC,aAAa,EAAC,OAAO,EAAE,IAAI,CAAC,sBAAsB,EAAE,KAAK,EAAC,qCAAqC,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,GAAW,EAEvM,KAAC,KAAK,IAAC,KAAK,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,YAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,GAAS,IAC1G,GACE,EAER,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,IACjC,CACN,CAAC;AACH,CAAC","sourcesContent":["import type UserSettingsItem from \"./UserSettingsItem.js\";\nimport BusyIndicator from \"@ui5/webcomponents/dist/BusyIndicator.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport TabContainer from \"@ui5/webcomponents/dist/TabContainer.js\";\nimport Tab from \"@ui5/webcomponents/dist/Tab.js\";\nimport Title from \"@ui5/webcomponents/dist/Title.js\";\nimport \"@ui5/webcomponents-icons/dist/globe.js\";\nimport \"@ui5/webcomponents-icons/dist/nav-back.js\";\n\nexport default function UserSettingsItemTemplate(this: UserSettingsItem) {\n\tconst content = this.tabs.length > 0 && !this._hasSelectedPageView ?\n\t\t<TabContainer contentBackgroundDesign=\"Transparent\" class=\"ui5-user-settings-item-tabs\" onTabSelect={this._handleTabSelect}>\n\t\t\t{this.tabs.map(view =>\n\t\t\t\t<Tab text={view.text} selected={view.selected} ref={this.captureRef.bind(view)}>\n\t\t\t\t\t<slot name={view._individualSlot} />\n\t\t\t\t</Tab>\n\t\t\t)}\n\t\t</TabContainer>\n\t\t:\n\t\t<>\n\t\t\t{this._selectedPageView ?\n\t\t\t\t<div class=\"ui5-user-settings-item-view-container\">\n\t\t\t\t\t<slot name={this._selectedPageView._individualSlot} />\n\t\t\t\t</div>\n\t\t\t\t:\n\t\t\t\tnull\n\t\t\t}\n\t\t</>;\n\n\tconst loadingState = <div class=\"ui5-user-settings-item-loading-container\">\n\t\t<BusyIndicator\n\t\t\tactive={this.loading}\n\t\t\tclass=\"ui5-user-settings-item-busy\"\n\t\t\tdelay={0}\n\t\t\taria-description={this.loadingReason}>\n\t\t</BusyIndicator>\n\t</div>;\n\n\treturn (\n\t\t<div class=\"ui5-user-settings-item\">\n\t\t\t<header class=\"ui5-user-settings-item-header-container\" tabindex={0}>\n\t\t\t\t<div class=\"ui5-user-settings-item-header\">\n\t\t\t\t\t<Button icon=\"nav-back\" design=\"Transparent\" onClick={this._handleBackButtonClick} class=\"ui5-user-settings-item-collapse-btn\" style={{ display: this._shouldShowBackButton ? \"block\" : \"\" }}></Button>\n\n\t\t\t\t\t<Title level=\"H2\" size=\"H4\">{this._hasSelectedPageView ? this._selectedPageView.text : this.headerText}</Title>\n\t\t\t\t</div>\n\t\t\t</header>\n\n\t\t\t{this.loading ? loadingState : content}\n\t\t</div>\n\t);\n}\n"]}

package/dist/UserSettingsView.d.ts

@@ -0,0 +1,43 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+/**
+ * @class
+ * ### Overview
+ *
+ * The `ui5-user-settings-view` represents a view displayed in the `ui5-user-settings-item`.
+ *
+ * @constructor
+ * @extends UI5Element
+ * @experimental
+ * @public
+ * @since 2.8.0
+ */
+declare class UserSettingsView extends UI5Element {
+    /**
+     * Defines the title text of the user settings view.
+     *
+     * @public
+     * @default undefined
+     */
+    text?: string;
+    /**
+     * Defines whether the view is selected. There can be just one selected view at a time.
+     *
+     * @default false
+     * @public
+     */
+    selected: boolean;
+    /**
+     * Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`
+     * and controls the visibility of the back button.
+     * @default false
+     * @public
+     */
+    secondary: boolean;
+    /**
+     * Defines the content of the view.
+     *
+     * @public
+     */
+    content: Array<HTMLElement>;
+}
+export default UserSettingsView;

package/dist/UserSettingsView.js

@@ -0,0 +1,68 @@
+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 { customElement, property, slot } from "@ui5/webcomponents-base/dist/decorators.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import UserSettingsViewTemplate from "./UserSettingsViewTemplate.js";
+import UserSettingViewCss from "./generated/themes/UserSettingsView.css.js";
+/**
+ * @class
+ * ### Overview
+ *
+ * The `ui5-user-settings-view` represents a view displayed in the `ui5-user-settings-item`.
+ *
+ * @constructor
+ * @extends UI5Element
+ * @experimental
+ * @public
+ * @since 2.8.0
+ */
+let UserSettingsView = class UserSettingsView extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines whether the view is selected. There can be just one selected view at a time.
+         *
+         * @default false
+         * @public
+         */
+        this.selected = false;
+        /**
+         * Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`
+         * and controls the visibility of the back button.
+         * @default false
+         * @public
+         */
+        this.secondary = false;
+    }
+};
+__decorate([
+    property()
+], UserSettingsView.prototype, "text", void 0);
+__decorate([
+    property({ type: Boolean })
+], UserSettingsView.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean })
+], UserSettingsView.prototype, "secondary", void 0);
+__decorate([
+    slot({
+        type: HTMLElement,
+        "default": true,
+    })
+], UserSettingsView.prototype, "content", void 0);
+UserSettingsView = __decorate([
+    customElement({
+        tag: "ui5-user-settings-view",
+        renderer: jsxRenderer,
+        template: UserSettingsViewTemplate,
+        styles: [UserSettingViewCss],
+    })
+], UserSettingsView);
+UserSettingsView.define();
+export default UserSettingsView;
+//# sourceMappingURL=UserSettingsView.js.map

package/dist/UserSettingsView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserSettingsView.js","sourceRoot":"","sources":["../src/UserSettingsView.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,4CAA4C,CAAC;AAC3F,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,wBAAwB,MAAM,+BAA+B,CAAC;AACrE,OAAO,kBAAkB,MAAM,4CAA4C,CAAC;AAE5E;;;;;;;;;;;GAWG;AAQH,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAUC;;;;;WAKG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAEjB;;;;;WAKG;QAEH,cAAS,GAAG,KAAK,CAAC;IAYnB,CAAC;CAAA,CAAA;AA9BA;IADC,QAAQ,EAAE;8CACG;AASd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDACX;AASjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDACV;AAWlB;IAJC,IAAI,CAAC;QACL,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,IAAI;KACf,CAAC;iDAC2B;AArCxB,gBAAgB;IAPrB,aAAa,CAAC;QACd,GAAG,EAAE,wBAAwB;QAC7B,QAAQ,EAAE,WAAW;QACrB,QAAQ,EAAE,wBAAwB;QAClC,MAAM,EAAE,CAAC,kBAAkB,CAAC;KAC5B,CAAC;GAEI,gBAAgB,CAsCrB;AAED,gBAAgB,CAAC,MAAM,EAAE,CAAC;AAE1B,eAAe,gBAAgB,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport { customElement, property, slot } from \"@ui5/webcomponents-base/dist/decorators.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport UserSettingsViewTemplate from \"./UserSettingsViewTemplate.js\";\nimport UserSettingViewCss from \"./generated/themes/UserSettingsView.css.js\";\n\n/**\n * @class\n * ### Overview\n *\n * The `ui5-user-settings-view` represents a view displayed in the `ui5-user-settings-item`.\n *\n * @constructor\n * @extends UI5Element\n * @experimental\n * @public\n * @since 2.8.0\n */\n@customElement({\n\ttag: \"ui5-user-settings-view\",\n\trenderer: jsxRenderer,\n\ttemplate: UserSettingsViewTemplate,\n\tstyles: [UserSettingViewCss],\n})\n\nclass UserSettingsView extends UI5Element {\n\t/**\n\t * Defines the title text of the user settings view.\n\t *\n\t * @public\n\t * @default undefined\n\t */\n\t@property()\n\ttext?: string;\n\n\t/**\n\t * Defines whether the view is selected. There can be just one selected view at a time.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tselected = false;\n\n\t/**\n\t * Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`\n\t * and controls the visibility of the back button.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tsecondary = false;\n\n\t/**\n\t * Defines the content of the view.\n\t *\n\t * @public\n\t */\n\t@slot({\n\t\ttype: HTMLElement,\n\t\t\"default\": true,\n\t})\n\tcontent!: Array<HTMLElement>;\n}\n\nUserSettingsView.define();\n\nexport default UserSettingsView;\n"]}

package/dist/UserSettingsViewTemplate.d.ts

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

package/dist/UserSettingsViewTemplate.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
+export default function UserSettingsViewTemplate() {
+    return (_jsx("div", { class: "ui5-user-settings-view-container", children: _jsx("div", { class: "ui5-user-settings-view", children: _jsx("slot", {}) }) }));
+}
+//# sourceMappingURL=UserSettingsViewTemplate.js.map

package/dist/UserSettingsViewTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserSettingsViewTemplate.js","sourceRoot":"","sources":["../src/UserSettingsViewTemplate.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,wBAAwB;IAC/C,OAAO,CACN,cAAK,KAAK,EAAC,kCAAkC,YAC5C,cAAK,KAAK,EAAC,wBAAwB,YAClC,gBAAa,GACR,GACD,CACN,CAAC;AACH,CAAC","sourcesContent":["import type UserSettingsView from \"./UserSettingsView.js\";\n\nexport default function UserSettingsViewTemplate(this: UserSettingsView) {\n\treturn (\n\t\t<div class=\"ui5-user-settings-view-container\">\n\t\t\t<div class=\"ui5-user-settings-view\">\n\t\t\t\t<slot></slot>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}

package/dist/ViewSettingsDialog.d.ts

@@ -0,0 +1,262 @@
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type Dialog from "@ui5/webcomponents/dist/Dialog.js";
+import type List from "@ui5/webcomponents/dist/List.js";
+import type { ListItemClickEventDetail, ListSelectionChangeEventDetail } from "@ui5/webcomponents/dist/List.js";
+import ViewSettingsDialogMode from "./types/ViewSettingsDialogMode.js";
+import "@ui5/webcomponents-icons/dist/sort.js";
+import "@ui5/webcomponents-icons/dist/filter.js";
+import "@ui5/webcomponents-icons/dist/nav-back.js";
+import type SortItem from "./SortItem.js";
+import type FilterItem from "./FilterItem.js";
+type VSDFilter = Record<string, Array<string>>;
+type VSDFilters = Array<VSDFilter>;
+type VSDSettings = {
+    sortOrder: string;
+    sortBy: string;
+    filters: VSDFilters;
+};
+type ViewSettingsDialogConfirmEventDetail = VSDSettings & {
+    sortByItem: SortItem;
+    sortDescending: boolean;
+};
+type ViewSettingsDialogCancelEventDetail = VSDSettings & {
+    sortByItem: SortItem;
+    sortDescending: boolean;
+};
+type VSDItem = {
+    text?: string;
+    selected: boolean;
+};
+type VSDInternalSettings = {
+    sortOrder: Array<VSDItem>;
+    sortBy: Array<VSDItem & {
+        index: number;
+    }>;
+    filters: Array<VSDItem & {
+        filterOptions: Array<VSDItem>;
+    }>;
+};
+/**
+ * @class
+ * ### Overview
+ * The `ui5-view-settings-dialog` component helps the user to sort data within a list or a table.
+ * It consists of several lists like `Sort order` which is built-in and `Sort By` and `Filter By` lists,
+ * for which you must be provide items(`ui5-sort-item` & `ui5-filter-item` respectively)
+ * These options can be used to create sorters for a table.
+ *
+ * The `ui5-view-settings-dialog` interrupts the current application processing as it is the only focused UI element and
+ * the main screen is dimmed/blocked.
+ * The `ui5-view-settings-dialog` is modal, which means that user action is required before returning to the parent window is possible.
+ *
+ * ### Structure
+ * A `ui5-view-settings-dialog` consists of a header, content, and a footer for action buttons.
+ * The `ui5-view-settings-dialog` is usually displayed at the center of the screen.
+ *
+ * ### Responsive Behavior
+ * `ui5-view-settings-dialog` stretches on full screen on phones.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js";`
+ * @constructor
+ * @extends UI5Element
+ * @since 1.0.0-rc.16
+ * @public
+ */
+declare class ViewSettingsDialog extends UI5Element {
+    eventDetails: {
+        "confirm": ViewSettingsDialogConfirmEventDetail;
+        "cancel": ViewSettingsDialogCancelEventDetail;
+        "before-open": void;
+        "open": void;
+        "close": void;
+    };
+    /**
+     * Defines the initial sort order.
+     * @default false
+     * @public
+     */
+    sortDescending: boolean;
+    /**
+     * Indicates if the dialog is open.
+     * @public
+     * @default false
+     * @since 2.0.0
+     */
+    open: boolean;
+    /**
+     * Keeps recently focused list in order to focus it on next dialog open.
+     * @private
+     */
+    _recentlyFocused?: List;
+    /**
+     * Stores current settings of the dialog.
+     * @private
+     */
+    _currentSettings: VSDInternalSettings;
+    /**
+     * Stores settings of the dialog before the initial open.
+     * @private
+     */
+    _initialSettings: VSDInternalSettings;
+    /**
+     * Stores settings of the dialog after confirmation.
+     * @private
+     */
+    _confirmedSettings: VSDInternalSettings;
+    /**
+     * Defnies the current mode of the component.
+     * @since 1.0.0-rc.16
+     * @private
+     */
+    _currentMode: `${ViewSettingsDialogMode}`;
+    /**
+     * When in Filter By mode, defines whether we need to show the list of keys, or the list with values.
+     * @since 1.0.0-rc.16
+     * @private
+     */
+    _filterStepTwo: boolean;
+    /**
+     * Defines the list of items against which the user could sort data.
+     *
+     * **Note:** If you want to use this slot, you need to import used item: `import "@ui5/webcomponents-fiori/dist/SortItem.js";`
+     * @public
+     */
+    sortItems: Array<SortItem>;
+    /**
+     * Defines the `filterItems` list.
+     *
+     * **Note:** If you want to use this slot, you need to import used item: `import "@ui5/webcomponents-fiori/dist/FilterItem.js";`
+     * @public
+     */
+    filterItems: Array<FilterItem>;
+    _dialog?: Dialog;
+    _sortOrder?: List;
+    _sortBy?: List;
+    static i18nBundle: I18nBundle;
+    onBeforeRendering(): void;
+    onInvalidation(changeInfo: ChangeInfo): void;
+    _setAdditionalTexts(): void;
+    get _selectedFilter(): (VSDItem & {
+        filterOptions: Array<VSDItem>;
+    }) | undefined;
+    _selectedFiltersLabel(item: FilterItem): string;
+    get shouldBuildSort(): boolean;
+    get shouldBuildFilter(): boolean;
+    get hasPagination(): boolean;
+    get _filterByTitle(): string;
+    get _dialogTitle(): string;
+    get _okButtonLabel(): string;
+    get _cancelButtonLabel(): string;
+    get _resetButtonLabel(): string;
+    get _ascendingLabel(): string;
+    get _descendingLabel(): string;
+    get _sortOrderLabel(): string;
+    get _filterByLabel(): string;
+    get _sortByLabel(): string;
+    get _sortButtonTooltip(): string;
+    get _filterButtonTooltip(): string;
+    get _resetButtonAction(): string;
+    get _isPhone(): boolean;
+    get _sortAscending(): boolean;
+    get _title(): string;
+    /**
+     * Determines disabled state of the `Reset` button.
+     */
+    get _disableResetButton(): boolean | undefined;
+    get _sortSetttingsAreInitial(): boolean;
+    get _filteresAreInitial(): boolean;
+    /**
+     * Returns the current settings (current state of all lists).
+     */
+    get _settings(): VSDInternalSettings;
+    get initSortByItems(): {
+        text: string | undefined;
+        selected: boolean;
+        index: number;
+    }[];
+    get initSortOrderItems(): {
+        text: string;
+        selected: boolean;
+    }[];
+    get expandContent(): boolean;
+    get isModeSort(): boolean;
+    get isModeFilter(): boolean;
+    get showBackButton(): boolean;
+    get _sortOrderListDomRef(): List;
+    get _sortByList(): List;
+    get _dialogDomRef(): Dialog;
+    /**
+     * Shows the dialog.
+     */
+    beforeDialogOpen(): void;
+    afterDialogOpen(): void;
+    afterDialogClose(): void;
+    _handleModeChange(e: CustomEvent): void;
+    _handleFilterValueItemClick(e: CustomEvent<ListSelectionChangeEventDetail>): void;
+    /**
+     * Sets the selected property of the clicked item.
+     * @private
+     */
+    _setSelectedProp(itemText: string): void;
+    _navigateToFilters(): void;
+    _changeCurrentFilter(e: CustomEvent<ListItemClickEventDetail>): void;
+    /**
+     * Sets focus on recently used control within the dialog.
+     */
+    _focusRecentlyUsedControl(): void;
+    /**
+     * Stores current settings as confirmed and fires `confirm` event.
+     */
+    _confirmSettings(): void;
+    /**
+     * Sets current settings to recently confirmed ones and fires `cancel` event.
+     */
+    _cancelSettings(): void;
+    get eventsParams(): {
+        sortOrder: string;
+        sortDescending: boolean;
+        sortBy: string;
+        sortByItem: SortItem;
+        filters: VSDFilters;
+        filterItems: FilterItem[];
+    };
+    get selectedFilters(): VSDFilters;
+    /**
+     * If the dialog is closed by [Escape] key, do the same as if the `Cancel` button is pressed.
+     * @param evt
+     */
+    _restoreConfirmedOnEscape(evt: CustomEvent): void;
+    /**
+     * Resets the control settings to their initial state.
+     */
+    _resetSettings(): void;
+    /**
+     * Sets current settings to ones passed as `settings` argument.
+     * @param settings
+     */
+    _restoreSettings(settings: VSDInternalSettings): void;
+    /**
+     * Stores `Sort Order` list as recently used control and its selected item in current state.
+     */
+    _onSortOrderChange(e: CustomEvent<ListSelectionChangeEventDetail>): void;
+    /**
+     * Stores `Sort By` list as recently used control and its selected item in current state.
+     */
+    _onSortByChange(e: CustomEvent<ListSelectionChangeEventDetail>): void;
+    /**
+     * Sets a JavaScript object, as settings to the `ui5-view-settings-dialog`.
+     * This method can be used after the dialog is initially open, as the dialog needs
+     * to set its initial settings.
+     * The `ui5-view-settings-dialog` throws an event called "before-open",
+     * which can be used as a trigger point.
+     * The object should have the following format:
+     * @param settings - predefined settings.
+     * @public
+     */
+    setConfirmedSettings(settings: VSDSettings): void;
+}
+export default ViewSettingsDialog;
+export type { ViewSettingsDialogConfirmEventDetail, ViewSettingsDialogCancelEventDetail, VSDSettings, };