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

package/dist/UserSettingsDialog.js

@@ -0,0 +1,260 @@
+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 UserSettingsDialog_1;
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { customElement, property, slot, eventStrict as event, } from "@ui5/webcomponents-base/dist/decorators.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import { isPhone, isTablet, isCombi } from "@ui5/webcomponents-base/dist/Device.js";
+import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js";
+import UserSettingsDialogTemplate from "./UserSettingsDialogTemplate.js";
+import UserSettingsDialogCss from "./generated/themes/UserSettingsDialog.css.js";
+// Texts
+import { USER_SETTINGS_DIALOG_ACCESSIBLE_NAME, USER_SETTINGS_LIST_ARIA_ROLE_DESC, USER_SETTINGS_DIALOG_CLOSE_BUTTON_TEXT, USER_SETTINGS_DIALOG_NO_SEARCH_RESULTS_TEXT, } from "./generated/i18n/i18n-defaults.js";
+/**
+ * @class
+ * ### Overview
+ *
+ * The `ui5-user-settings-dialog` is an SAP Fiori-specific web component used in the `ui5-user-menu`.
+ * It allows the user to easily view information and settings for an account.
+ *
+ * ### ES6 Module Import
+ * `import "@ui5/webcomponents-fiori/dist/UserSettingsDialog.js";`
+ *
+ * @constructor
+ * @extends UI5Element
+ * @experimental
+ * @public
+ * @since 2.8.0
+ */
+let UserSettingsDialog = UserSettingsDialog_1 = class UserSettingsDialog extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines, if the User Settings Dialog is opened.
+         *
+         * @default false
+         * @public
+         */
+        this.open = false;
+        /**
+         * Defines if the Search Field would be displayed.
+         *
+         * **Note:** By default the Search Field is not displayed.
+         * @default false
+         * @public
+         */
+        this.showSearchField = false;
+        /**
+         * @private
+         */
+        this._searchValue = "";
+        /**
+         * @private
+         */
+        this._collapsed = false;
+        /**
+         * @private
+         */
+        this._filteredItems = [];
+        /**
+         * @private
+         */
+        this._filteredFixedItems = [];
+        /**
+         * @private
+         */
+        this._showNoSearchResult = false;
+    }
+    onBeforeRendering() {
+        this._mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS);
+        const searchValue = this._searchValue.toLowerCase();
+        this._filteredItems = [];
+        this._filteredFixedItems = [];
+        this.items.forEach(item => {
+            if (item.text.toLowerCase().includes(searchValue)) {
+                this._filteredItems.push(item);
+            }
+            if (item.selected) {
+                this._selectedSetting = item;
+            }
+        });
+        this.fixedItems.forEach(item => {
+            if (item.text.toLowerCase().includes(searchValue)) {
+                this._filteredFixedItems.push(item);
+            }
+            if (item.selected) {
+                this._selectedSetting = item;
+            }
+        });
+        if (this._filteredItems.length === 0 && this._filteredFixedItems.length === 0) {
+            this._showNoSearchResult = true;
+        }
+        else {
+            this._showNoSearchResult = false;
+        }
+        if (!this._selectedSetting) {
+            this._selectedSetting = this.items[0] || this.fixedItems[0];
+        }
+    }
+    _handleItemClick(e) {
+        const setting = e.detail.item;
+        const settingItem = setting.associatedSettingItem;
+        const eventPrevented = !this.fireDecoratorEvent("selection-change", {
+            item: settingItem,
+        });
+        this._collapsed = true;
+        if (!eventPrevented) {
+            this.items.forEach(item => {
+                item.selected = false;
+            });
+            this.fixedItems.forEach(item => {
+                item.selected = false;
+            });
+            settingItem.selected = true;
+        }
+    }
+    _handleDialogAfterOpen() {
+        this.fireDecoratorEvent("open");
+    }
+    _handleDialogBeforeClose(e) {
+        if (!e.detail.escPressed) {
+            return;
+        }
+        const eventPrevented = !this.fireDecoratorEvent("before-close", e.detail);
+        if (eventPrevented) {
+            e.preventDefault();
+        }
+    }
+    _handleDialogAfterClose() {
+        this.open = false;
+        this.fireDecoratorEvent("close");
+    }
+    get accessibleNameText() {
+        return UserSettingsDialog_1.i18nBundle.getText(USER_SETTINGS_DIALOG_ACCESSIBLE_NAME);
+    }
+    get ariaRoleDescList() {
+        return UserSettingsDialog_1.i18nBundle.getText(USER_SETTINGS_LIST_ARIA_ROLE_DESC);
+    }
+    get closeButtonText() {
+        return UserSettingsDialog_1.i18nBundle.getText(USER_SETTINGS_DIALOG_CLOSE_BUTTON_TEXT);
+    }
+    get noSearchResultsText() {
+        return UserSettingsDialog_1.i18nBundle.getText(USER_SETTINGS_DIALOG_NO_SEARCH_RESULTS_TEXT);
+    }
+    get _selectedItemSlotName() {
+        return this._selectedSetting ? this._selectedSetting._individualSlot : "";
+    }
+    get _showSettingWithNavigation() {
+        return (isPhone() || (isTablet() && !isCombi())) || (this._mediaRange === "S" || this._mediaRange === "M");
+    }
+    _handleCloseButtonClick() {
+        const eventPrevented = !this.fireDecoratorEvent("before-close", { escPressed: false });
+        if (!eventPrevented) {
+            this.open = false;
+        }
+    }
+    _handleCollapseClick() {
+        this._collapsed = false;
+    }
+    _handleInput(e) {
+        this._searchValue = e.target.value;
+    }
+    captureRef(ref) {
+        if (ref) {
+            ref.associatedSettingItem = this;
+        }
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], UserSettingsDialog.prototype, "open", void 0);
+__decorate([
+    property({ type: String })
+], UserSettingsDialog.prototype, "headerText", void 0);
+__decorate([
+    property({ type: Boolean })
+], UserSettingsDialog.prototype, "showSearchField", void 0);
+__decorate([
+    slot({
+        "default": true,
+        type: HTMLElement,
+        individualSlots: true,
+        invalidateOnChildChange: {
+            properties: true,
+            slots: true,
+        },
+    })
+], UserSettingsDialog.prototype, "items", void 0);
+__decorate([
+    slot({
+        type: HTMLElement,
+        individualSlots: true,
+        invalidateOnChildChange: {
+            properties: true,
+            slots: true,
+        },
+    })
+], UserSettingsDialog.prototype, "fixedItems", void 0);
+__decorate([
+    property({ type: String })
+], UserSettingsDialog.prototype, "_searchValue", void 0);
+__decorate([
+    property({ type: Boolean })
+], UserSettingsDialog.prototype, "_collapsed", void 0);
+__decorate([
+    property({ type: Object })
+], UserSettingsDialog.prototype, "_selectedSetting", void 0);
+__decorate([
+    property({ type: Boolean })
+], UserSettingsDialog.prototype, "_showNoSearchResult", void 0);
+__decorate([
+    property({ type: String })
+], UserSettingsDialog.prototype, "_mediaRange", void 0);
+__decorate([
+    i18n("@ui5/webcomponents-fiori")
+], UserSettingsDialog, "i18nBundle", void 0);
+UserSettingsDialog = UserSettingsDialog_1 = __decorate([
+    customElement({
+        tag: "ui5-user-settings-dialog",
+        renderer: jsxRenderer,
+        template: UserSettingsDialogTemplate,
+        styles: [UserSettingsDialogCss],
+    })
+    /**
+     * Fired when an item is selected.
+     * @param {UserSettingsItem} item The selected `user settings item`.
+     * @public
+     */
+    ,
+    event("selection-change", {
+        cancelable: true,
+    })
+    /**
+     * Fired when a settings dialog is open.
+     * @public
+     */
+    ,
+    event("open")
+    /**
+     * Fired before the settings dialog is closed.
+     * @public
+     */
+    ,
+    event("before-close", {
+        cancelable: true,
+    })
+    /**
+     * Fired when a settings dialog is closed.
+     * @public
+     */
+    ,
+    event("close")
+], UserSettingsDialog);
+UserSettingsDialog.define();
+export default UserSettingsDialog;
+//# sourceMappingURL=UserSettingsDialog.js.map

package/dist/UserSettingsDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserSettingsDialog.js","sourceRoot":"","sources":["../src/UserSettingsDialog.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport {\n\tcustomElement, property, slot, eventStrict as event,\n} from \"@ui5/webcomponents-base/dist/decorators.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type Input from \"@ui5/webcomponents/dist/Input.js\";\nimport type { InputEventDetail } from \"@ui5/webcomponents/dist/Input.js\";\nimport type { ListItemClickEventDetail } from \"@ui5/webcomponents/dist/List.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type ListItemBase from \"@ui5/webcomponents/dist/ListItemBase.js\";\nimport type { PopupBeforeCloseEventDetail } from \"@ui5/webcomponents/dist/Popup.js\";\nimport { isPhone, isTablet, isCombi } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport MediaRange from \"@ui5/webcomponents-base/dist/MediaRange.js\";\nimport UserSettingsDialogTemplate from \"./UserSettingsDialogTemplate.js\";\nimport type UserSettingsItem from \"./UserSettingsItem.js\";\nimport UserSettingsDialogCss from \"./generated/themes/UserSettingsDialog.css.js\";\n\n// Texts\nimport {\n\tUSER_SETTINGS_DIALOG_ACCESSIBLE_NAME,\n\tUSER_SETTINGS_LIST_ARIA_ROLE_DESC,\n\tUSER_SETTINGS_DIALOG_CLOSE_BUTTON_TEXT,\n\tUSER_SETTINGS_DIALOG_NO_SEARCH_RESULTS_TEXT,\n} from \"./generated/i18n/i18n-defaults.js\";\n\ntype UserSettingsItemSelectEventDetail = {\n\titem: UserSettingsItem;\n}\n\ntype UserSettingsBeforeCloseEventDetail = PopupBeforeCloseEventDetail;\n\n/**\n * @class\n * ### Overview\n *\n * The `ui5-user-settings-dialog` is an SAP Fiori-specific web component used in the `ui5-user-menu`.\n * It allows the user to easily view information and settings for an account.\n *\n * ### ES6 Module Import\n * `import \"@ui5/webcomponents-fiori/dist/UserSettingsDialog.js\";`\n *\n * @constructor\n * @extends UI5Element\n * @experimental\n * @public\n * @since 2.8.0\n */\n@customElement({\n\ttag: \"ui5-user-settings-dialog\",\n\trenderer: jsxRenderer,\n\ttemplate: UserSettingsDialogTemplate,\n\tstyles: [UserSettingsDialogCss],\n})\n\n/**\n * Fired when an item is selected.\n * @param {UserSettingsItem} item The selected `user settings item`.\n * @public\n */\n@event(\"selection-change\", {\n\tcancelable: true,\n})\n\n/**\n * Fired when a settings dialog is open.\n * @public\n */\n@event(\"open\")\n\n/**\n * Fired before the settings dialog is closed.\n * @public\n */\n@event(\"before-close\", {\n\tcancelable: true,\n})\n\n/**\n * Fired when a settings dialog is closed.\n * @public\n */\n@event(\"close\")\n\nclass UserSettingsDialog extends UI5Element {\n\teventDetails!: {\n\t\t\"selection-change\": UserSettingsItemSelectEventDetail,\n\t\t\"open\": void,\n\t\t\"before-close\": UserSettingsBeforeCloseEventDetail,\n\t\t\"close\": void,\n\t};\n\t/**\n\t * Defines, if the User Settings Dialog is opened.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\topen = false;\n\n\t/**\n\t * Defines the headerText of the item.\n\t *\n\t * @public\n\t * @default undefined\n\t */\n\t@property({ type: String })\n\theaderText?: string;\n\n\t/**\n\t * Defines if the Search Field would be displayed.\n\t *\n\t * **Note:** By default the Search Field is not displayed.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowSearchField = false;\n\n\t/**\n\t * Defines the user settings items.\n\t *\n\t * **Note:**  If no setting item is set as `selected`, the first one will be selected.\n\t * @public\n\t */\n\t@slot({\n\t\t\"default\": true,\n\t\ttype: HTMLElement,\n\t\tindividualSlots: true,\n\t\tinvalidateOnChildChange: {\n\t\t\tproperties: true,\n\t\t\tslots: true,\n\t\t},\n\t})\n\titems!: Array<UserSettingsItem>;\n\n\t/**\n\t * Defines the fixed user settings items.\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: true,\n\t\t},\n\t})\n\tfixedItems!: Array<UserSettingsItem>;\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: String })\n\t_searchValue = \"\";\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_collapsed = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Object })\n\t_selectedSetting?: UserSettingsItem;\n\n\t/**\n\t * @private\n\t */\n\t_filteredItems: Array<UserSettingsItem> = [];\n\n\t/**\n\t * @private\n\t */\n\t_filteredFixedItems: Array<UserSettingsItem> = [];\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_showNoSearchResult = false;\n\n\t/**\n\t * Defines the current media query size.\n\t * @private\n\t */\n\t@property({ type: String })\n\t_mediaRange?: any;\n\n\tonBeforeRendering() {\n\t\tthis._mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS);\n\t\tconst searchValue = this._searchValue.toLowerCase();\n\t\tthis._filteredItems = [];\n\t\tthis._filteredFixedItems = [];\n\n\t\tthis.items.forEach(item => {\n\t\t\tif (item.text.toLowerCase().includes(searchValue)) {\n\t\t\t\tthis._filteredItems.push(item);\n\t\t\t}\n\n\t\t\tif (item.selected) {\n\t\t\t\tthis._selectedSetting = item;\n\t\t\t}\n\t\t});\n\n\t\tthis.fixedItems.forEach(item => {\n\t\t\tif (item.text.toLowerCase().includes(searchValue)) {\n\t\t\t\tthis._filteredFixedItems.push(item);\n\t\t\t}\n\n\t\t\tif (item.selected) {\n\t\t\t\tthis._selectedSetting = item;\n\t\t\t}\n\t\t});\n\n\t\tif (this._filteredItems.length === 0 && this._filteredFixedItems.length === 0) {\n\t\t\tthis._showNoSearchResult = true;\n\t\t} else {\n\t\t\tthis._showNoSearchResult = false;\n\t\t}\n\n\t\tif (!this._selectedSetting) {\n\t\t\tthis._selectedSetting = this.items[0] || this.fixedItems[0];\n\t\t}\n\t}\n\n\t_handleItemClick(e: CustomEvent<ListItemClickEventDetail>) {\n\t\tconst setting = e.detail.item as ListItemBase & { associatedSettingItem: UserSettingsItem };\n\t\tconst settingItem = setting.associatedSettingItem;\n\t\tconst eventPrevented = !this.fireDecoratorEvent(\"selection-change\", {\n\t\t\titem: settingItem,\n\t\t});\n\t\tthis._collapsed = true;\n\n\t\tif (!eventPrevented) {\n\t\t\tthis.items.forEach(item => {\n\t\t\t\titem.selected = false;\n\t\t\t});\n\t\t\tthis.fixedItems.forEach(item => {\n\t\t\t\titem.selected = false;\n\t\t\t});\n\t\t\tsettingItem.selected = true;\n\t\t}\n\t}\n\n\t_handleDialogAfterOpen() {\n\t\tthis.fireDecoratorEvent(\"open\");\n\t}\n\n\t_handleDialogBeforeClose(e: CustomEvent<PopupBeforeCloseEventDetail>) {\n\t\tif (!e.detail.escPressed) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst eventPrevented = !this.fireDecoratorEvent(\"before-close\", e.detail);\n\n\t\tif (eventPrevented) {\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\t_handleDialogAfterClose() {\n\t\tthis.open = false;\n\t\tthis.fireDecoratorEvent(\"close\");\n\t}\n\n\tget accessibleNameText() {\n\t\treturn UserSettingsDialog.i18nBundle.getText(USER_SETTINGS_DIALOG_ACCESSIBLE_NAME);\n\t}\n\n\tget ariaRoleDescList() {\n\t\treturn UserSettingsDialog.i18nBundle.getText(USER_SETTINGS_LIST_ARIA_ROLE_DESC);\n\t}\n\n\tget closeButtonText() {\n\t\treturn UserSettingsDialog.i18nBundle.getText(USER_SETTINGS_DIALOG_CLOSE_BUTTON_TEXT);\n\t}\n\tget noSearchResultsText() {\n\t\treturn UserSettingsDialog.i18nBundle.getText(USER_SETTINGS_DIALOG_NO_SEARCH_RESULTS_TEXT);\n\t}\n\n\tget _selectedItemSlotName() {\n\t\treturn this._selectedSetting ? this._selectedSetting._individualSlot : \"\";\n\t}\n\n\tget _showSettingWithNavigation() {\n\t\treturn (isPhone() || (isTablet() && !isCombi())) || (this._mediaRange === \"S\" || this._mediaRange === \"M\");\n\t}\n\n\t_handleCloseButtonClick() {\n\t\tconst eventPrevented = !this.fireDecoratorEvent(\"before-close\", { escPressed: false });\n\n\t\tif (!eventPrevented) {\n\t\t\tthis.open = false;\n\t\t}\n\t}\n\n\t_handleCollapseClick() {\n\t\tthis._collapsed = false;\n\t}\n\n\t_handleInput(e: CustomEvent<InputEventDetail>) {\n\t\tthis._searchValue = (e.target as Input).value;\n\t}\n\n\tcaptureRef(ref: HTMLElement & { associatedSettingItem?: UI5Element} | null) {\n\t\tif (ref) {\n\t\t\tref.associatedSettingItem = this;\n\t\t}\n\t}\n}\n\nUserSettingsDialog.define();\n\nexport default UserSettingsDialog;\nexport type {\n\tUserSettingsItemSelectEventDetail,\n\tUserSettingsBeforeCloseEventDetail,\n};\n"]}

package/dist/UserSettingsDialogTemplate.d.ts

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

package/dist/UserSettingsDialogTemplate.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import Dialog from "@ui5/webcomponents/dist/Dialog.js";
+import Title from "@ui5/webcomponents/dist/Title.js";
+import Input from "@ui5/webcomponents/dist/Input.js";
+import Text from "@ui5/webcomponents/dist/Text.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import List from "@ui5/webcomponents/dist/List.js";
+import ListItemStandard from "@ui5/webcomponents/dist/ListItemStandard.js";
+import ToolbarButton from "@ui5/webcomponents/dist/ToolbarButton.js";
+import Toolbar from "@ui5/webcomponents/dist/Toolbar.js";
+import search from "@ui5/webcomponents-icons/dist/search.js";
+export default function UserSettingsDialogTemplate() {
+    return (_jsxs(Dialog, { class: "ui5-user-settings-dialog", open: this.open, stretch: true, accessibleName: this.accessibleNameText, "onui5-_collapse": this._handleCollapseClick, onOpen: this._handleDialogAfterOpen, onBeforeClose: this._handleDialogBeforeClose, onClose: this._handleDialogAfterClose, initialFocus: `setting-${this._selectedSetting?._id}`, children: [_jsxs("div", { class: "ui5-user-settings-root", children: [_jsxs("div", { class: "ui5-user-settings-side", "aria-orientation": "vertical", "aria-roledescription": this.ariaRoleDescList, children: [_jsxs("div", { class: "ui5-user-settings-side-header", children: [this.headerText &&
+                                        _jsx(Title, { level: "H1", size: "H4", children: this.headerText }), this.showSearchField &&
+                                        _jsx(Input, { placeholder: "Search", type: "Search", class: "ui5-user-settings-side-search", onInput: this._handleInput, children: _jsx(Icon, { id: "searchFieldIcon", slot: "icon", name: search, showTooltip: true }) })] }), this._showNoSearchResult ?
+                                _jsx("div", { class: "ui5-user-settings-side-search", children: _jsx(Text, { children: this.noSearchResultsText }) })
+                                :
+                                    renderList.call(this, this._filteredItems, "ui5-user-settings-side-items"), this._filteredFixedItems.length > 0 && renderList.call(this, this._filteredFixedItems, "ui5-user-settings-side-fixedItems")] }), _jsx("div", { class: "ui5-user-settings-content", children: _jsx("slot", { name: this._selectedItemSlotName }) })] }), _jsx(Toolbar, { slot: "footer", design: "Transparent", children: _jsx(ToolbarButton, { design: "Transparent", text: this.closeButtonText, tooltip: this.closeButtonText, onClick: this._handleCloseButtonClick }) })] }));
+}
+function renderList(items = [], classes) {
+    return _jsx(List, { accessibleRole: "Menu", onItemClick: this._handleItemClick, class: classes, separators: "None", children: items.map(item => (_jsx(ListItemStandard, { id: `setting-${item._id}`, icon: item._icon, tooltip: item._tooltip, ref: this.captureRef.bind(item), selected: item.selected, disabled: item.disabled, accessibleName: item.ariaLabelledByText, type: this._showSettingWithNavigation ? "Navigation" : "Active", children: item.text }))) });
+}
+//# sourceMappingURL=UserSettingsDialogTemplate.js.map

package/dist/UserSettingsDialogTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserSettingsDialogTemplate.js","sourceRoot":"","sources":["../src/UserSettingsDialogTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import type UserSettingsDialog from \"./UserSettingsDialog.js\";\nimport Dialog from \"@ui5/webcomponents/dist/Dialog.js\";\nimport Title from \"@ui5/webcomponents/dist/Title.js\";\nimport Input from \"@ui5/webcomponents/dist/Input.js\";\nimport Text from \"@ui5/webcomponents/dist/Text.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport List from \"@ui5/webcomponents/dist/List.js\";\nimport ListItemStandard from \"@ui5/webcomponents/dist/ListItemStandard.js\";\nimport ToolbarButton from \"@ui5/webcomponents/dist/ToolbarButton.js\";\nimport Toolbar from \"@ui5/webcomponents/dist/Toolbar.js\";\nimport search from \"@ui5/webcomponents-icons/dist/search.js\";\nimport type UserSettingsItem from \"./UserSettingsItem.js\";\n\nexport default function UserSettingsDialogTemplate(this: UserSettingsDialog) {\n\treturn (\n\n\t\t<Dialog class=\"ui5-user-settings-dialog\"\n\t\t\topen={this.open}\n\t\t\tstretch\n\t\t\taccessibleName={this.accessibleNameText}\n\t\t\tonui5-_collapse={this._handleCollapseClick}\n\t\t\tonOpen={this._handleDialogAfterOpen}\n\t\t\tonBeforeClose={this._handleDialogBeforeClose}\n\t\t\tonClose={this._handleDialogAfterClose}\n\t\t\tinitialFocus={`setting-${this._selectedSetting?._id}`}\n\t\t>\n\t\t\t<div class=\"ui5-user-settings-root\">\n\t\t\t\t<div class=\"ui5-user-settings-side\" aria-orientation=\"vertical\" aria-roledescription={this.ariaRoleDescList}>\n\t\t\t\t\t<div class=\"ui5-user-settings-side-header\">\n\t\t\t\t\t\t{this.headerText &&\n\t\t\t\t\t\t\t<Title level=\"H1\" size=\"H4\">{this.headerText}</Title>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t{this.showSearchField &&\n\t\t\t\t\t\t\t<Input placeholder=\"Search\" type=\"Search\" class=\"ui5-user-settings-side-search\"\n\t\t\t\t\t\t\t\t   onInput={this._handleInput}>\n\t\t\t\t\t\t\t\t<Icon id=\"searchFieldIcon\" slot=\"icon\" name={search} showTooltip></Icon>\n\t\t\t\t\t\t\t</Input>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t\t{this._showNoSearchResult ?\n\t\t\t\t\t\t<div class=\"ui5-user-settings-side-search\">\n\t\t\t\t\t\t\t<Text>{this.noSearchResultsText}</Text>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t:\n\t\t\t\t\t\trenderList.call(this, this._filteredItems, \"ui5-user-settings-side-items\")}\n\n\t\t\t\t\t{this._filteredFixedItems.length > 0 && renderList.call(this, this._filteredFixedItems, \"ui5-user-settings-side-fixedItems\")}\n\t\t\t\t</div>\n\n\t\t\t\t<div class=\"ui5-user-settings-content\">\n\t\t\t\t\t<slot name={this._selectedItemSlotName}></slot>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<Toolbar slot=\"footer\" design=\"Transparent\">\n\t\t\t\t<ToolbarButton design=\"Transparent\" text={this.closeButtonText} tooltip={this.closeButtonText} onClick={this._handleCloseButtonClick} />\n\t\t\t</Toolbar>\n\t\t</Dialog>\n\t);\n}\n\nfunction renderList(this: UserSettingsDialog, items: Array<UserSettingsItem> = [], classes: string) {\n\treturn <List accessibleRole=\"Menu\" onItemClick={this._handleItemClick} class={classes} separators=\"None\">\n\t\t{items.map(item => (\n\t\t\t<ListItemStandard id={`setting-${item._id}`} icon={item._icon} tooltip={item._tooltip} ref={this.captureRef.bind(item)} selected={item.selected} disabled={item.disabled} accessibleName={item.ariaLabelledByText} type={this._showSettingWithNavigation ? \"Navigation\" : \"Active\"}>{item.text}</ListItemStandard>\n\t\t))}\n\t</List>;\n}\n"]}

package/dist/UserSettingsItem.d.ts

@@ -0,0 +1,131 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { TabContainerTabSelectEventDetail } from "@ui5/webcomponents/dist/TabContainer.js";
+import type UserSettingsView from "./UserSettingsView.js";
+type UserSettingsItemViewSelectEventDetail = {
+    view: UserSettingsView;
+};
+type UserSettingsItemBackClickEventDetail = {
+    view: UserSettingsView;
+};
+/**
+ * @class
+ * ### Overview
+ *
+ * The `ui5-user-settings-item` represents an item in the `ui5-user-settings-dialog`.
+ *
+ * ### ES6 Module Import
+ * `import "@ui5/webcomponents-fiori/dist/UserSettingsItem.js";`
+ *
+ * You can disable the <code>UserSettingsItem</code> by setting the <code>enabled</code> property to <code>false</code>,
+ * or use the <code>UserSettingsItem</code> in read-only mode by setting the <code>editable</code> property to false.
+ *
+ * <b>Note:</b> Disabled and read-only states shouldn't be used together.
+ *
+ * @constructor
+ * @extends UI5Element
+ * @experimental
+ * @public
+ * @since 2.8.0
+ */
+declare class UserSettingsItem extends UI5Element {
+    eventDetails: {
+        "_collapse": void;
+        "selection-change": UserSettingsItemViewSelectEventDetail;
+        "back-click": UserSettingsItemBackClickEventDetail;
+    };
+    /**
+     * Defines the text of the user settings item.
+     *
+     * @public
+     * @default ""
+     */
+    text: string;
+    /**
+     * Defines the tooltip of the component.
+     *
+     * A tooltip attribute should be provided to represent the meaning or function when the component is collapsed and only the icon is visible.
+     * @default ""
+     * @public
+     */
+    tooltip: string;
+    /**
+     * Defines the headerText of the item.
+     *
+     * @public
+     * @default ""
+     */
+    headerText?: string;
+    /**
+     * Shows item tab.
+     *
+     * @public
+     * @default false
+     */
+    selected: boolean;
+    /**
+     * Defines whether the component is in disabled state.
+     *
+     * **Note:** A disabled component is completely noninteractive.
+     * @default false
+     * @public
+     */
+    disabled: boolean;
+    /**
+     * Indicates whether a loading indicator should be shown.
+     * @default false
+     * @public
+     */
+    loading: boolean;
+    /**
+     * Indicates why the control is in loading state.
+     * @default undefined
+     * @public
+     */
+    loadingReason?: string;
+    /**
+     * Defines the icon of the component.
+     *
+     * @default "globe"
+     * @public
+     */
+    icon: string;
+    /**
+     * Defines the accessible ARIA name of the component.
+     * @default undefined
+     * @public
+     */
+    accessibleName?: string;
+    /**
+     * Defines the tab views of the user settings item.
+     *
+     * The tab views are displayed by default if there is no selected page view.
+     * @public
+     */
+    tabs: Array<UserSettingsView>;
+    /**
+     * Defines the page views of the user settings item.
+     *
+     * If there are no tab views, the first page view will be shown unless there is selected one. If there is selected page
+     * view it will be shown no matter if there are tab views.
+     *
+     * @public
+     */
+    pages: Array<UserSettingsView>;
+    /**
+     * @private
+     */
+    _individualSlot?: string;
+    get _hasSelectedPageView(): boolean;
+    get _selectedPageView(): UserSettingsView;
+    get ariaLabelledByText(): string;
+    get _tooltip(): string;
+    get _icon(): string;
+    _handleBackButtonClick(): void;
+    _handleTabSelect(e: CustomEvent<TabContainerTabSelectEventDetail>): void;
+    get _shouldShowBackButton(): boolean;
+    captureRef(this: UserSettingsView, ref: HTMLElement & {
+        associatedSettingView?: UserSettingsView;
+    } | null): void;
+}
+export default UserSettingsItem;
+export type { UserSettingsItemViewSelectEventDetail, UserSettingsItemBackClickEventDetail, };

package/dist/UserSettingsItem.js

@@ -0,0 +1,209 @@
+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 jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import { customElement, property, slot, eventStrict as event, } from "@ui5/webcomponents-base/dist/decorators.js";
+import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
+import UserSettingsItemTemplate from "./UserSettingsItemTemplate.js";
+import UserSettingsItemCss from "./generated/themes/UserSettingsItem.css.js";
+/**
+ * @class
+ * ### Overview
+ *
+ * The `ui5-user-settings-item` represents an item in the `ui5-user-settings-dialog`.
+ *
+ * ### ES6 Module Import
+ * `import "@ui5/webcomponents-fiori/dist/UserSettingsItem.js";`
+ *
+ * You can disable the <code>UserSettingsItem</code> by setting the <code>enabled</code> property to <code>false</code>,
+ * or use the <code>UserSettingsItem</code> in read-only mode by setting the <code>editable</code> property to false.
+ *
+ * <b>Note:</b> Disabled and read-only states shouldn't be used together.
+ *
+ * @constructor
+ * @extends UI5Element
+ * @experimental
+ * @public
+ * @since 2.8.0
+ */
+let UserSettingsItem = class UserSettingsItem extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines the text of the user settings item.
+         *
+         * @public
+         * @default ""
+         */
+        this.text = "";
+        /**
+         * Defines the tooltip of the component.
+         *
+         * A tooltip attribute should be provided to represent the meaning or function when the component is collapsed and only the icon is visible.
+         * @default ""
+         * @public
+         */
+        this.tooltip = "";
+        /**
+         * Shows item tab.
+         *
+         * @public
+         * @default false
+         */
+        this.selected = false;
+        /**
+         * Defines whether the component is in disabled state.
+         *
+         * **Note:** A disabled component is completely noninteractive.
+         * @default false
+         * @public
+         */
+        this.disabled = false;
+        /**
+         * Indicates whether a loading indicator should be shown.
+         * @default false
+         * @public
+         */
+        this.loading = false;
+        /**
+         * Defines the icon of the component.
+         *
+         * @default "globe"
+         * @public
+         */
+        this.icon = "globe";
+    }
+    get _hasSelectedPageView() {
+        return this.pages.some(view => view.selected);
+    }
+    get _selectedPageView() {
+        return this.pages.find(view => view.selected) || this.pages[0];
+    }
+    get ariaLabelledByText() {
+        return `${this.text} ${this.accessibleName}`.trim();
+    }
+    get _tooltip() {
+        return this.tooltip ? this.tooltip : this.text;
+    }
+    get _icon() {
+        return this.icon;
+    }
+    _handleBackButtonClick() {
+        if (this._shouldShowBackButton) {
+            const selectedPageView = this._selectedPageView;
+            const eventPrevented = !this.fireDecoratorEvent("selection-change", {
+                view: selectedPageView,
+            });
+            if (!eventPrevented) {
+                selectedPageView.selected = false;
+            }
+        }
+        else {
+            this.fireDecoratorEvent("_collapse");
+        }
+    }
+    _handleTabSelect(e) {
+        const tab = e.detail.tab;
+        const tabView = tab.associatedSettingView;
+        const eventPrevented = !this.fireDecoratorEvent("selection-change", {
+            view: tabView,
+        });
+        if (eventPrevented) {
+            e.preventDefault();
+        }
+        else {
+            this.tabs.forEach(view => {
+                view.selected = false;
+            });
+            tabView.selected = true;
+        }
+    }
+    get _shouldShowBackButton() {
+        return !!(this._hasSelectedPageView && this._selectedPageView.secondary);
+    }
+    captureRef(ref) {
+        if (ref) {
+            ref.associatedSettingView = this;
+        }
+    }
+};
+__decorate([
+    property({ type: String })
+], UserSettingsItem.prototype, "text", void 0);
+__decorate([
+    property({ type: String })
+], UserSettingsItem.prototype, "tooltip", void 0);
+__decorate([
+    property({ type: String })
+], UserSettingsItem.prototype, "headerText", void 0);
+__decorate([
+    property({ type: Boolean })
+], UserSettingsItem.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean })
+], UserSettingsItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], UserSettingsItem.prototype, "loading", void 0);
+__decorate([
+    property()
+], UserSettingsItem.prototype, "loadingReason", void 0);
+__decorate([
+    property({ type: String })
+], UserSettingsItem.prototype, "icon", void 0);
+__decorate([
+    property()
+], UserSettingsItem.prototype, "accessibleName", void 0);
+__decorate([
+    slot({
+        type: HTMLElement,
+        "default": true,
+        individualSlots: true,
+        invalidateOnChildChange: {
+            properties: true,
+            slots: false,
+        },
+    })
+], UserSettingsItem.prototype, "tabs", void 0);
+__decorate([
+    slot({
+        type: HTMLElement,
+        individualSlots: true,
+        invalidateOnChildChange: {
+            properties: true,
+            slots: false,
+        },
+    })
+], UserSettingsItem.prototype, "pages", void 0);
+UserSettingsItem = __decorate([
+    customElement({
+        tag: "ui5-user-settings-item",
+        renderer: jsxRenderer,
+        template: UserSettingsItemTemplate,
+        styles: [getEffectiveScrollbarStyle(), UserSettingsItemCss],
+    })
+    /**
+     * Fired when a selected view changed.
+     * @param {UserSettingsView} view The selected `view`.
+     * @public
+     */
+    ,
+    event("selection-change", {
+        cancelable: true,
+    })
+    /**
+     *
+     * @private
+     */
+    ,
+    event("_collapse", {
+        bubbles: true,
+    })
+], UserSettingsItem);
+UserSettingsItem.define();
+export default UserSettingsItem;
+//# sourceMappingURL=UserSettingsItem.js.map