@ui5/webcomponents-fiori 2.21.0 → 2.22.0-rc.1

package/dist/TimelineHeaderBar.js

@@ -0,0 +1,273 @@
+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 TimelineHeaderBar_1;
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import Toolbar from "@ui5/webcomponents/dist/Toolbar.js";
+import ToolbarButton from "@ui5/webcomponents/dist/ToolbarButton.js";
+import ToolbarSpacer from "@ui5/webcomponents/dist/ToolbarSpacer.js";
+import Input from "@ui5/webcomponents/dist/Input.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import Dialog from "@ui5/webcomponents/dist/Dialog.js";
+import List from "@ui5/webcomponents/dist/List.js";
+import ListItemStandard from "@ui5/webcomponents/dist/ListItemStandard.js";
+import Bar from "@ui5/webcomponents/dist/Bar.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+// Import icons to register them
+import "@ui5/webcomponents-icons/dist/sort-descending.js";
+import "@ui5/webcomponents-icons/dist/add-filter.js";
+import TimelineHeaderBarTemplate from "./TimelineHeaderBarTemplate.js";
+import TimelineHeaderBarCss from "./generated/themes/TimelineHeaderBar.css.js";
+import { TIMELINE_HEADER_BAR_ACCESSIBLE_NAME, TIMELINE_SEARCH_PLACEHOLDER, TIMELINE_SEARCH_ACCESSIBLE_NAME, TIMELINE_FILTER_ACCESSIBLE_NAME, TIMELINE_SORT_ASCENDING_TOOLTIP, TIMELINE_SORT_DESCENDING_TOOLTIP, TIMELINE_SORT_ACCESSIBLE_NAME, TIMELINE_FILTER_DIALOG_TITLE, TIMELINE_FILTER_DIALOG_OK, TIMELINE_FILTER_DIALOG_CANCEL, } from "./generated/i18n/i18n-defaults.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-timeline-header-bar` component provides search, filter, and sort functionality
+ * for the `ui5-timeline` component. It is designed to be slotted into the `header-bar` slot
+ * of the Timeline.
+ *
+ * ### Usage
+ *
+ * The component fires events (`search`, `filter`, `sort`) that the application should handle
+ * to filter/sort the timeline items. The Timeline component itself does not perform any
+ * filtering or sorting - this is the responsibility of the application.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents-fiori/dist/TimelineHeaderBar.js";`
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @since 2.22.0
+ */
+let TimelineHeaderBar = TimelineHeaderBar_1 = class TimelineHeaderBar extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Shows the search input field.
+         * @default false
+         * @public
+         */
+        this.showSearch = false;
+        /**
+         * Shows the filter button.
+         * @default false
+         * @public
+         */
+        this.showFilter = false;
+        /**
+         * Shows the sort button.
+         * @default false
+         * @public
+         */
+        this.showSort = false;
+        /**
+         * Shows the filter by date option.
+         * @default false
+         * @public
+         */
+        this.showFilterByDate = false;
+        /**
+         * The current filter category label.
+         * @default ""
+         * @public
+         */
+        this.filterBy = "";
+        /**
+         * The current search value.
+         * @default ""
+         * @public
+         */
+        this.searchValue = "";
+        /**
+         * The current sort order.
+         * @default "Ascending"
+         * @public
+         */
+        this.sortOrder = "Ascending";
+        /**
+         * Controls the filter dialog visibility.
+         * @private
+         */
+        this._filterDialogOpen = false;
+    }
+    get _headerBarAccessibleName() {
+        return TimelineHeaderBar_1.i18nBundle.getText(TIMELINE_HEADER_BAR_ACCESSIBLE_NAME);
+    }
+    get _searchPlaceholder() {
+        return TimelineHeaderBar_1.i18nBundle.getText(TIMELINE_SEARCH_PLACEHOLDER);
+    }
+    get _searchAccessibleName() {
+        return TimelineHeaderBar_1.i18nBundle.getText(TIMELINE_SEARCH_ACCESSIBLE_NAME);
+    }
+    get _filterAccessibleName() {
+        return TimelineHeaderBar_1.i18nBundle.getText(TIMELINE_FILTER_ACCESSIBLE_NAME);
+    }
+    get _sortAccessibleName() {
+        return TimelineHeaderBar_1.i18nBundle.getText(TIMELINE_SORT_ACCESSIBLE_NAME);
+    }
+    get _sortTooltip() {
+        if (this.sortOrder === "Descending") {
+            return TimelineHeaderBar_1.i18nBundle.getText(TIMELINE_SORT_ASCENDING_TOOLTIP);
+        }
+        return TimelineHeaderBar_1.i18nBundle.getText(TIMELINE_SORT_DESCENDING_TOOLTIP);
+    }
+    get _sortIcon() {
+        return "sort-descending";
+    }
+    get _filterIcon() {
+        return "add-filter";
+    }
+    get _filterDialogTitle() {
+        return TimelineHeaderBar_1.i18nBundle.getText(TIMELINE_FILTER_DIALOG_TITLE);
+    }
+    get _filterDialogOkText() {
+        return TimelineHeaderBar_1.i18nBundle.getText(TIMELINE_FILTER_DIALOG_OK);
+    }
+    get _filterDialogCancelText() {
+        return TimelineHeaderBar_1.i18nBundle.getText(TIMELINE_FILTER_DIALOG_CANCEL);
+    }
+    _onSearchInput(e) {
+        const value = e.target.value;
+        this.searchValue = value;
+        this.fireDecoratorEvent("search", { value });
+    }
+    _onFilterClick() {
+        this._filterDialogOpen = true;
+    }
+    _onFilterDialogConfirm() {
+        // Read selected state from the list items in the dialog
+        const list = this.shadowRoot.querySelector(".ui5-timeline-filter-list");
+        if (list) {
+            const selectedItems = list.getSelectedItems();
+            const selectedTexts = selectedItems.map(item => item.textContent?.trim() || "");
+            // Update the TimelineFilterOption elements to match the dialog selection
+            this.filterOptions.forEach(option => {
+                option.selected = selectedTexts.includes(option.text);
+            });
+        }
+        const selectedOptions = this.filterOptions
+            .filter(option => option.selected)
+            .map(option => option.text);
+        this.fireDecoratorEvent("filter", {
+            filterBy: this.filterBy,
+            selectedOptions,
+        });
+        this._filterDialogOpen = false;
+    }
+    _onFilterDialogCancel() {
+        this._filterDialogOpen = false;
+    }
+    _onFilterDialogClose() {
+        this._filterDialogOpen = false;
+    }
+    _onSortClick() {
+        // Toggle sort order: Ascending -> Descending -> Ascending
+        if (this.sortOrder === "Ascending") {
+            this.sortOrder = "Descending";
+        }
+        else {
+            this.sortOrder = "Ascending";
+        }
+        this.fireDecoratorEvent("sort", {
+            sortOrder: this.sortOrder,
+        });
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], TimelineHeaderBar.prototype, "showSearch", void 0);
+__decorate([
+    property({ type: Boolean })
+], TimelineHeaderBar.prototype, "showFilter", void 0);
+__decorate([
+    property({ type: Boolean })
+], TimelineHeaderBar.prototype, "showSort", void 0);
+__decorate([
+    property({ type: Boolean })
+], TimelineHeaderBar.prototype, "showFilterByDate", void 0);
+__decorate([
+    property()
+], TimelineHeaderBar.prototype, "filterBy", void 0);
+__decorate([
+    property()
+], TimelineHeaderBar.prototype, "searchValue", void 0);
+__decorate([
+    property()
+], TimelineHeaderBar.prototype, "sortOrder", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], TimelineHeaderBar.prototype, "_filterDialogOpen", void 0);
+__decorate([
+    slot({ type: HTMLElement, "default": true, invalidateOnChildChange: true })
+], TimelineHeaderBar.prototype, "filterOptions", void 0);
+__decorate([
+    i18n("@ui5/webcomponents-fiori")
+], TimelineHeaderBar, "i18nBundle", void 0);
+TimelineHeaderBar = TimelineHeaderBar_1 = __decorate([
+    customElement({
+        tag: "ui5-timeline-header-bar",
+        languageAware: true,
+        renderer: jsxRenderer,
+        template: TimelineHeaderBarTemplate,
+        styles: TimelineHeaderBarCss,
+        dependencies: [
+            Toolbar,
+            ToolbarButton,
+            ToolbarSpacer,
+            Input,
+            Icon,
+            Dialog,
+            List,
+            ListItemStandard,
+            Bar,
+            Button,
+        ],
+    })
+    /**
+     * Fired when the user performs a search.
+     *
+     * @param {string} value The search value entered by the user.
+     * @public
+     */
+    ,
+    event("search", {
+        bubbles: true,
+    })
+    /**
+     * Fired when the user changes filter selection.
+     *
+     * @param {string} filterBy The filter category.
+     * @param {string[]} selectedOptions The selected filter option texts.
+     * @public
+     */
+    ,
+    event("filter", {
+        bubbles: true,
+    })
+    /**
+     * Fired when the user changes sort order.
+     *
+     * @param {string} sortOrder The sort order ("Ascending" or "Descending").
+     * @public
+     */
+    ,
+    event("sort", {
+        bubbles: true,
+    })
+], TimelineHeaderBar);
+TimelineHeaderBar.define();
+export default TimelineHeaderBar;
+//# sourceMappingURL=TimelineHeaderBar.js.map

package/dist/TimelineHeaderBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineHeaderBar.js","sourceRoot":"","sources":["../src/TimelineHeaderBar.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 property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport Toolbar from \"@ui5/webcomponents/dist/Toolbar.js\";\nimport ToolbarButton from \"@ui5/webcomponents/dist/ToolbarButton.js\";\nimport ToolbarSpacer from \"@ui5/webcomponents/dist/ToolbarSpacer.js\";\nimport Input from \"@ui5/webcomponents/dist/Input.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport Dialog from \"@ui5/webcomponents/dist/Dialog.js\";\nimport List from \"@ui5/webcomponents/dist/List.js\";\nimport ListItemStandard from \"@ui5/webcomponents/dist/ListItemStandard.js\";\nimport Bar from \"@ui5/webcomponents/dist/Bar.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport type TimelineSortOrder from \"./types/TimelineSortOrder.js\";\nimport type TimelineFilterOption from \"./TimelineFilterOption.js\";\n\n// Import icons to register them\nimport \"@ui5/webcomponents-icons/dist/sort-descending.js\";\nimport \"@ui5/webcomponents-icons/dist/add-filter.js\";\n\nimport TimelineHeaderBarTemplate from \"./TimelineHeaderBarTemplate.js\";\nimport TimelineHeaderBarCss from \"./generated/themes/TimelineHeaderBar.css.js\";\n\nimport {\n\tTIMELINE_HEADER_BAR_ACCESSIBLE_NAME,\n\tTIMELINE_SEARCH_PLACEHOLDER,\n\tTIMELINE_SEARCH_ACCESSIBLE_NAME,\n\tTIMELINE_FILTER_ACCESSIBLE_NAME,\n\tTIMELINE_SORT_ASCENDING_TOOLTIP,\n\tTIMELINE_SORT_DESCENDING_TOOLTIP,\n\tTIMELINE_SORT_ACCESSIBLE_NAME,\n\tTIMELINE_FILTER_DIALOG_TITLE,\n\tTIMELINE_FILTER_DIALOG_OK,\n\tTIMELINE_FILTER_DIALOG_CANCEL,\n} from \"./generated/i18n/i18n-defaults.js\";\n\ntype TimelineHeaderBarSearchEventDetail = {\n\tvalue: string;\n};\n\ntype TimelineHeaderBarFilterEventDetail = {\n\tfilterBy: string;\n\tselectedOptions: string[];\n};\n\ntype TimelineHeaderBarSortEventDetail = {\n\tsortOrder: string;\n};\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-timeline-header-bar` component provides search, filter, and sort functionality\n * for the `ui5-timeline` component. It is designed to be slotted into the `header-bar` slot\n * of the Timeline.\n *\n * ### Usage\n *\n * The component fires events (`search`, `filter`, `sort`) that the application should handle\n * to filter/sort the timeline items. The Timeline component itself does not perform any\n * filtering or sorting - this is the responsibility of the application.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-fiori/dist/TimelineHeaderBar.js\";`\n *\n * @constructor\n * @extends UI5Element\n * @public\n * @since 2.22.0\n */\n@customElement({\n\ttag: \"ui5-timeline-header-bar\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: TimelineHeaderBarTemplate,\n\tstyles: TimelineHeaderBarCss,\n\tdependencies: [\n\t\tToolbar,\n\t\tToolbarButton,\n\t\tToolbarSpacer,\n\t\tInput,\n\t\tIcon,\n\t\tDialog,\n\t\tList,\n\t\tListItemStandard,\n\t\tBar,\n\t\tButton,\n\t],\n})\n\n/**\n * Fired when the user performs a search.\n *\n * @param {string} value The search value entered by the user.\n * @public\n */\n@event(\"search\", {\n\tbubbles: true,\n})\n\n/**\n * Fired when the user changes filter selection.\n *\n * @param {string} filterBy The filter category.\n * @param {string[]} selectedOptions The selected filter option texts.\n * @public\n */\n@event(\"filter\", {\n\tbubbles: true,\n})\n\n/**\n * Fired when the user changes sort order.\n *\n * @param {string} sortOrder The sort order (\"Ascending\" or \"Descending\").\n * @public\n */\n@event(\"sort\", {\n\tbubbles: true,\n})\n\nclass TimelineHeaderBar extends UI5Element {\n\teventDetails!: {\n\t\t\"search\": TimelineHeaderBarSearchEventDetail,\n\t\t\"filter\": TimelineHeaderBarFilterEventDetail,\n\t\t\"sort\": TimelineHeaderBarSortEventDetail,\n\t};\n\n\t/**\n\t * Shows the search input field.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowSearch = false;\n\n\t/**\n\t * Shows the filter button.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowFilter = false;\n\n\t/**\n\t * Shows the sort button.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowSort = false;\n\n\t/**\n\t * Shows the filter by date option.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowFilterByDate = false;\n\n\t/**\n\t * The current filter category label.\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\tfilterBy = \"\";\n\n\t/**\n\t * The current search value.\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\tsearchValue = \"\";\n\n\t/**\n\t * The current sort order.\n\t * @default \"Ascending\"\n\t * @public\n\t */\n\t@property()\n\tsortOrder: `${TimelineSortOrder}` = \"Ascending\";\n\n\t/**\n\t * Controls the filter dialog visibility.\n\t * @private\n\t */\n\t@property({ type: Boolean, noAttribute: true })\n\t_filterDialogOpen = false;\n\n\t/**\n\t * Filter options to display in the filter dialog.\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, \"default\": true, invalidateOnChildChange: true })\n\tfilterOptions!: Slot<TimelineFilterOption>;\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\n\n\tget _headerBarAccessibleName() {\n\t\treturn TimelineHeaderBar.i18nBundle.getText(TIMELINE_HEADER_BAR_ACCESSIBLE_NAME);\n\t}\n\n\tget _searchPlaceholder() {\n\t\treturn TimelineHeaderBar.i18nBundle.getText(TIMELINE_SEARCH_PLACEHOLDER);\n\t}\n\n\tget _searchAccessibleName() {\n\t\treturn TimelineHeaderBar.i18nBundle.getText(TIMELINE_SEARCH_ACCESSIBLE_NAME);\n\t}\n\n\tget _filterAccessibleName() {\n\t\treturn TimelineHeaderBar.i18nBundle.getText(TIMELINE_FILTER_ACCESSIBLE_NAME);\n\t}\n\n\tget _sortAccessibleName() {\n\t\treturn TimelineHeaderBar.i18nBundle.getText(TIMELINE_SORT_ACCESSIBLE_NAME);\n\t}\n\n\tget _sortTooltip() {\n\t\tif (this.sortOrder === \"Descending\") {\n\t\t\treturn TimelineHeaderBar.i18nBundle.getText(TIMELINE_SORT_ASCENDING_TOOLTIP);\n\t\t}\n\t\treturn TimelineHeaderBar.i18nBundle.getText(TIMELINE_SORT_DESCENDING_TOOLTIP);\n\t}\n\n\tget _sortIcon() {\n\t\treturn \"sort-descending\";\n\t}\n\n\tget _filterIcon() {\n\t\treturn \"add-filter\";\n\t}\n\n\tget _filterDialogTitle() {\n\t\treturn TimelineHeaderBar.i18nBundle.getText(TIMELINE_FILTER_DIALOG_TITLE);\n\t}\n\n\tget _filterDialogOkText() {\n\t\treturn TimelineHeaderBar.i18nBundle.getText(TIMELINE_FILTER_DIALOG_OK);\n\t}\n\n\tget _filterDialogCancelText() {\n\t\treturn TimelineHeaderBar.i18nBundle.getText(TIMELINE_FILTER_DIALOG_CANCEL);\n\t}\n\n\t_onSearchInput(e: CustomEvent) {\n\t\tconst value = (e.target as Input).value;\n\t\tthis.searchValue = value;\n\t\tthis.fireDecoratorEvent(\"search\", { value });\n\t}\n\n\t_onFilterClick() {\n\t\tthis._filterDialogOpen = true;\n\t}\n\n\t_onFilterDialogConfirm() {\n\t\t// Read selected state from the list items in the dialog\n\t\tconst list = this.shadowRoot!.querySelector<List>(\".ui5-timeline-filter-list\");\n\t\tif (list) {\n\t\t\tconst selectedItems = list.getSelectedItems();\n\t\t\tconst selectedTexts = selectedItems.map(item => item.textContent?.trim() || \"\");\n\n\t\t\t// Update the TimelineFilterOption elements to match the dialog selection\n\t\t\tthis.filterOptions.forEach(option => {\n\t\t\t\toption.selected = selectedTexts.includes(option.text);\n\t\t\t});\n\t\t}\n\n\t\tconst selectedOptions = this.filterOptions\n\t\t\t.filter(option => option.selected)\n\t\t\t.map(option => option.text);\n\n\t\tthis.fireDecoratorEvent(\"filter\", {\n\t\t\tfilterBy: this.filterBy,\n\t\t\tselectedOptions,\n\t\t});\n\n\t\tthis._filterDialogOpen = false;\n\t}\n\n\t_onFilterDialogCancel() {\n\t\tthis._filterDialogOpen = false;\n\t}\n\n\t_onFilterDialogClose() {\n\t\tthis._filterDialogOpen = false;\n\t}\n\n\t_onSortClick() {\n\t\t// Toggle sort order: Ascending -> Descending -> Ascending\n\t\tif (this.sortOrder === \"Ascending\") {\n\t\t\tthis.sortOrder = \"Descending\";\n\t\t} else {\n\t\t\tthis.sortOrder = \"Ascending\";\n\t\t}\n\n\t\tthis.fireDecoratorEvent(\"sort\", {\n\t\t\tsortOrder: this.sortOrder,\n\t\t});\n\t}\n}\n\nTimelineHeaderBar.define();\n\nexport default TimelineHeaderBar;\nexport type {\n\tTimelineHeaderBarSearchEventDetail,\n\tTimelineHeaderBarFilterEventDetail,\n\tTimelineHeaderBarSortEventDetail,\n};\n"]}

package/dist/TimelineHeaderBarTemplate.d.ts

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

package/dist/TimelineHeaderBarTemplate.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+import Toolbar from "@ui5/webcomponents/dist/Toolbar.js";
+import ToolbarButton from "@ui5/webcomponents/dist/ToolbarButton.js";
+import ToolbarSpacer from "@ui5/webcomponents/dist/ToolbarSpacer.js";
+import Input from "@ui5/webcomponents/dist/Input.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import Dialog from "@ui5/webcomponents/dist/Dialog.js";
+import List from "@ui5/webcomponents/dist/List.js";
+import ListItemStandard from "@ui5/webcomponents/dist/ListItemStandard.js";
+import Bar from "@ui5/webcomponents/dist/Bar.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import searchIcon from "@ui5/webcomponents-icons/dist/search.js";
+import sortDescending from "@ui5/webcomponents-icons/dist/sort-descending.js";
+import addFilter from "@ui5/webcomponents-icons/dist/add-filter.js";
+export default function TimelineHeaderBarTemplate() {
+    return (_jsxs(_Fragment, { children: [_jsxs(Toolbar, { class: "ui5-timeline-header-bar-toolbar", accessibleName: this._headerBarAccessibleName, children: [_jsx(ToolbarSpacer, {}), this.showSearch && (_jsx(Input, { class: "ui5-timeline-header-bar-search", placeholder: this._searchPlaceholder, value: this.searchValue, showClearIcon: true, accessibleName: this._searchAccessibleName, onInput: this._onSearchInput, children: _jsx(Icon, { slot: "icon", name: searchIcon }) })), this.showSort && (_jsx(ToolbarButton, { icon: sortDescending, design: "Transparent", tooltip: this._sortTooltip, accessibleName: this._sortAccessibleName, onClick: this._onSortClick })), this.showFilter && (_jsx(ToolbarButton, { icon: addFilter, design: "Transparent", tooltip: this._filterAccessibleName, accessibleName: this._filterAccessibleName, onClick: this._onFilterClick }))] }), this.showFilter && (_jsxs(Dialog, { class: "ui5-timeline-filter-dialog", headerText: this._filterDialogTitle, open: this._filterDialogOpen, onClose: this._onFilterDialogClose, children: [_jsx(List, { selectionMode: "Multiple", class: "ui5-timeline-filter-list", children: this.filterOptions.map(option => (_jsx(ListItemStandard, { selected: option.selected, "data-filter-text": option.text, children: option.text }, option.text))) }), _jsxs(Bar, { slot: "footer", design: "Footer", children: [_jsx(Button, { slot: "endContent", design: "Emphasized", onClick: this._onFilterDialogConfirm, children: this._filterDialogOkText }), _jsx(Button, { slot: "endContent", design: "Transparent", onClick: this._onFilterDialogCancel, children: this._filterDialogCancelText })] })] }))] }));
+}
+//# sourceMappingURL=TimelineHeaderBarTemplate.js.map

package/dist/TimelineHeaderBarTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineHeaderBarTemplate.js","sourceRoot":"","sources":["../src/TimelineHeaderBarTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,OAAO,MAAM,oCAAoC,CAAC;AACzD,OAAO,aAAa,MAAM,0CAA0C,CAAC;AACrE,OAAO,aAAa,MAAM,0CAA0C,CAAC;AACrE,OAAO,KAAK,MAAM,kCAAkC,CAAC;AACrD,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,gBAAgB,MAAM,6CAA6C,CAAC;AAC3E,OAAO,GAAG,MAAM,gCAAgC,CAAC;AACjD,OAAO,MAAM,MAAM,mCAAmC,CAAC;AAEvD,OAAO,UAAU,MAAM,yCAAyC,CAAC;AACjE,OAAO,cAAc,MAAM,kDAAkD,CAAC;AAC9E,OAAO,SAAS,MAAM,6CAA6C,CAAC;AAEpE,MAAM,CAAC,OAAO,UAAU,yBAAyB;IAChD,OAAO,CAAC,8BACP,MAAC,OAAO,IACP,KAAK,EAAC,iCAAiC,EACvC,cAAc,EAAE,IAAI,CAAC,wBAAwB,aAG7C,KAAC,aAAa,KAAG,EAGhB,IAAI,CAAC,UAAU,IAAI,CACnB,KAAC,KAAK,IACL,KAAK,EAAC,gCAAgC,EACtC,WAAW,EAAE,IAAI,CAAC,kBAAkB,EACpC,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,aAAa,EAAE,IAAI,EACnB,cAAc,EAAE,IAAI,CAAC,qBAAqB,EAC1C,OAAO,EAAE,IAAI,CAAC,cAAc,YAE5B,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,UAAU,GAAI,GAC/B,CACR,EAGA,IAAI,CAAC,QAAQ,IAAI,CACjB,KAAC,aAAa,IACb,IAAI,EAAE,cAAc,EACpB,MAAM,EAAC,aAAa,EACpB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,cAAc,EAAE,IAAI,CAAC,mBAAmB,EACxC,OAAO,EAAE,IAAI,CAAC,YAAY,GACzB,CACF,EAGA,IAAI,CAAC,UAAU,IAAI,CACnB,KAAC,aAAa,IACb,IAAI,EAAE,SAAS,EACf,MAAM,EAAC,aAAa,EACpB,OAAO,EAAE,IAAI,CAAC,qBAAqB,EACnC,cAAc,EAAE,IAAI,CAAC,qBAAqB,EAC1C,OAAO,EAAE,IAAI,CAAC,cAAc,GAC3B,CACF,IACQ,EAGT,IAAI,CAAC,UAAU,IAAI,CACnB,MAAC,MAAM,IACN,KAAK,EAAC,4BAA4B,EAClC,UAAU,EAAE,IAAI,CAAC,kBAAkB,EACnC,IAAI,EAAE,IAAI,CAAC,iBAAiB,EAC5B,OAAO,EAAE,IAAI,CAAC,oBAAoB,aAElC,KAAC,IAAI,IACJ,aAAa,EAAC,UAAU,EACxB,KAAK,EAAC,0BAA0B,YAE/B,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CACjC,KAAC,gBAAgB,IAEhB,QAAQ,EAAE,MAAM,CAAC,QAAQ,sBACP,MAAM,CAAC,IAAI,YAE5B,MAAM,CAAC,IAAI,IAJP,MAAM,CAAC,IAAI,CAKE,CACnB,CAAC,GACI,EAEP,MAAC,GAAG,IAAC,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAC,QAAQ,aACjC,KAAC,MAAM,IACN,IAAI,EAAC,YAAY,EACjB,MAAM,EAAC,YAAY,EACnB,OAAO,EAAE,IAAI,CAAC,sBAAsB,YAEnC,IAAI,CAAC,mBAAmB,GACjB,EACT,KAAC,MAAM,IACN,IAAI,EAAC,YAAY,EACjB,MAAM,EAAC,aAAa,EACpB,OAAO,EAAE,IAAI,CAAC,qBAAqB,YAElC,IAAI,CAAC,uBAAuB,GACrB,IACJ,IACE,CACT,IACC,CAAC,CAAC;AACN,CAAC","sourcesContent":["import Toolbar from \"@ui5/webcomponents/dist/Toolbar.js\";\nimport ToolbarButton from \"@ui5/webcomponents/dist/ToolbarButton.js\";\nimport ToolbarSpacer from \"@ui5/webcomponents/dist/ToolbarSpacer.js\";\nimport Input from \"@ui5/webcomponents/dist/Input.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport Dialog from \"@ui5/webcomponents/dist/Dialog.js\";\nimport List from \"@ui5/webcomponents/dist/List.js\";\nimport ListItemStandard from \"@ui5/webcomponents/dist/ListItemStandard.js\";\nimport Bar from \"@ui5/webcomponents/dist/Bar.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport type TimelineHeaderBar from \"./TimelineHeaderBar.js\";\nimport searchIcon from \"@ui5/webcomponents-icons/dist/search.js\";\nimport sortDescending from \"@ui5/webcomponents-icons/dist/sort-descending.js\";\nimport addFilter from \"@ui5/webcomponents-icons/dist/add-filter.js\";\n\nexport default function TimelineHeaderBarTemplate(this: TimelineHeaderBar) {\n\treturn (<>\n\t\t<Toolbar\n\t\t\tclass=\"ui5-timeline-header-bar-toolbar\"\n\t\t\taccessibleName={this._headerBarAccessibleName}\n\t\t>\n\t\t\t{/* Spacer pushes all controls to the end */}\n\t\t\t<ToolbarSpacer />\n\n\t\t\t{/* Search Input */}\n\t\t\t{this.showSearch && (\n\t\t\t\t<Input\n\t\t\t\t\tclass=\"ui5-timeline-header-bar-search\"\n\t\t\t\t\tplaceholder={this._searchPlaceholder}\n\t\t\t\t\tvalue={this.searchValue}\n\t\t\t\t\tshowClearIcon={true}\n\t\t\t\t\taccessibleName={this._searchAccessibleName}\n\t\t\t\t\tonInput={this._onSearchInput}\n\t\t\t\t>\n\t\t\t\t\t<Icon slot=\"icon\" name={searchIcon} />\n\t\t\t\t</Input>\n\t\t\t)}\n\n\t\t\t{/* Sort Button */}\n\t\t\t{this.showSort && (\n\t\t\t\t<ToolbarButton\n\t\t\t\t\ticon={sortDescending}\n\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\ttooltip={this._sortTooltip}\n\t\t\t\t\taccessibleName={this._sortAccessibleName}\n\t\t\t\t\tonClick={this._onSortClick}\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t{/* Filter Button */}\n\t\t\t{this.showFilter && (\n\t\t\t\t<ToolbarButton\n\t\t\t\t\ticon={addFilter}\n\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\ttooltip={this._filterAccessibleName}\n\t\t\t\t\taccessibleName={this._filterAccessibleName}\n\t\t\t\t\tonClick={this._onFilterClick}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</Toolbar>\n\n\t\t{/* Filter Dialog */}\n\t\t{this.showFilter && (\n\t\t\t<Dialog\n\t\t\t\tclass=\"ui5-timeline-filter-dialog\"\n\t\t\t\theaderText={this._filterDialogTitle}\n\t\t\t\topen={this._filterDialogOpen}\n\t\t\t\tonClose={this._onFilterDialogClose}\n\t\t\t>\n\t\t\t\t<List\n\t\t\t\t\tselectionMode=\"Multiple\"\n\t\t\t\t\tclass=\"ui5-timeline-filter-list\"\n\t\t\t\t>\n\t\t\t\t\t{this.filterOptions.map(option => (\n\t\t\t\t\t\t<ListItemStandard\n\t\t\t\t\t\t\tkey={option.text}\n\t\t\t\t\t\t\tselected={option.selected}\n\t\t\t\t\t\t\tdata-filter-text={option.text}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{option.text}\n\t\t\t\t\t\t</ListItemStandard>\n\t\t\t\t\t))}\n\t\t\t\t</List>\n\n\t\t\t\t<Bar slot=\"footer\" design=\"Footer\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tslot=\"endContent\"\n\t\t\t\t\t\tdesign=\"Emphasized\"\n\t\t\t\t\t\tonClick={this._onFilterDialogConfirm}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this._filterDialogOkText}\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tslot=\"endContent\"\n\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\tonClick={this._onFilterDialogCancel}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this._filterDialogCancelText}\n\t\t\t\t\t</Button>\n\t\t\t\t</Bar>\n\t\t\t</Dialog>\n\t\t)}\n\t</>);\n}\n"]}

package/dist/TimelineItem.d.ts

@@ -96,6 +96,8 @@ declare class TimelineItem extends UI5Element implements ITimelineItem {
      */
     lastItem: boolean;
     /**
+     * Used internally by TimelineGroupItem for collapse/expand mechanics.
+     * Applications should not use this for filtering — instead, add/remove items from the DOM.
      * @private
      */
     hidden: boolean;

package/dist/TimelineItem.js

@@ -67,6 +67,8 @@ let TimelineItem = TimelineItem_1 = class TimelineItem extends UI5Element {
          */
         this.lastItem = false;
         /**
+         * Used internally by TimelineGroupItem for collapse/expand mechanics.
+         * Applications should not use this for filtering — instead, add/remove items from the DOM.
          * @private
          */
         this.hidden = false;

package/dist/TimelineItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineItem.js","sourceRoot":"","sources":["../src/TimelineItem.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } 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 i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type Link from \"@ui5/webcomponents/dist/Link.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { I18nText } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { ITimelineItem } from \"./Timeline.js\";\nimport type ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\nimport TimelineItemTemplate from \"./TimelineItemTemplate.js\";\n// Styles\nimport type TimelineLayout from \"./types/TimelineLayout.js\";\n\nimport {\n\tTIMELINE_ITEM_INFORMATION_STATE_TEXT,\n\tTIMELINE_ITEM_POSITIVE_STATE_TEXT,\n\tTIMELINE_ITEM_NEGATIVE_STATE_TEXT,\n\tTIMELINE_ITEM_CRITICAL_STATE_TEXT,\n} from \"./generated/i18n/i18n-defaults.js\";\n\nimport TimelineItemCss from \"./generated/themes/TimelineItem.css.js\";\n\ntype TimelineItemRole = \"listitem\" | \"treeitem\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * An entry posted on the timeline.\n * @constructor\n * @extends UI5Element\n * @implements { ITimelineItem }\n * @public\n */\n@customElement({\n\ttag: \"ui5-timeline-item\",\n\trenderer: jsxRenderer,\n\tstyles: TimelineItemCss,\n\ttemplate: TimelineItemTemplate,\n})\n/**\n * Fired when the item name is pressed either with a\n * click/tap or by using the Enter or Space key.\n *\n * **Note:** The event will not be fired if the `name-clickable`\n * attribute is not set.\n * @public\n */\n@event(\"name-click\", {\n\tbubbles: true,\n})\nclass TimelineItem extends UI5Element implements ITimelineItem {\n\teventDetails!: {\n\t\t\"name-click\": void\n\t}\n\t/**\n\t * Defines the icon to be displayed as graphical element within the `ui5-timeline-item`.\n\t * SAP-icons font provides numerous options.\n\t *\n\t * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ticon?: string;\n\n\t/**\n\t * Defines the name of the item, displayed before the `title-text`.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tname?: string;\n\n\t/**\n\t * Defines if the `name` is clickable.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tnameClickable = false;\n\n\t/**\n\t * Defines the title text of the component.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ttitleText?: string;\n\n\t/**\n\t * Defines the subtitle text of the component.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tsubtitleText?: string;\n\n\t/**\n\t * Defines the state of the icon displayed in the `ui5-timeline-item`.\n\t * @default \"None\"\n\t * @public\n\t * @since 2.7.0\n\t */\n\t@property()\n\tstate: `${ValueState}` = \"None\";\n\n\t/**\n\t * Defines the content of the `ui5-timeline-item`.\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, \"default\": true })\n\tcontent!: DefaultSlot<Node>;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tfirstItemInTimeline = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tisNextItemGroup = false;\n\n\t@property({ noAttribute: true })\n\tforcedTabIndex = \"-1\";\n\n\t/**\n\t * Defines the items orientation.\n\t * @default \"Vertical\"\n\t * @private\n\t */\n\t@property()\n\tlayout: `${TimelineLayout}` = \"Vertical\";\n\n\t/**\n\t * Defines the indicator line width.\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\tforcedLineWidth?: string;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\thideBubble = false;\n\n\t/**\n\t * Marks the last `<ui5-timeline-item>`\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tlastItem = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\thidden = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\teffectiveRole: `${TimelineItemRole}` = \"listitem\";\n\n\t/**\n\t * Defines the position of the item in a group.\n\t * @private\n\t */\n\t@property({ type: Number })\n\tpositionInGroup?: number;\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundleFiori: I18nBundle;\n\n\tconstructor() {\n\t\tsuper();\n\t}\n\n\tonNamePress() {\n\t\tthis.fireDecoratorEvent(\"name-click\");\n\t}\n\n\t/**\n\t * Focus the internal link.\n\t */\n\tfocusLink() {\n\t\tthis.shadowRoot!.querySelector<Link>(\"[ui5-link]\")?.focus();\n\t}\n\n\tstatic typeTextMappings(): Record<string, I18nText> {\n\t\treturn {\n\t\t\t\"Information\": TIMELINE_ITEM_INFORMATION_STATE_TEXT,\n\t\t\t\"Positive\": TIMELINE_ITEM_POSITIVE_STATE_TEXT,\n\t\t\t\"Negative\": TIMELINE_ITEM_NEGATIVE_STATE_TEXT,\n\t\t\t\"Critical\": TIMELINE_ITEM_CRITICAL_STATE_TEXT,\n\t\t};\n\t}\n\n\tget timelineItemStateText() {\n\t\treturn this.state !== \"None\" ? TimelineItem.i18nBundleFiori.getText(TimelineItem.typeTextMappings()[this.state]) : undefined;\n\t}\n\n\tget isGroupItem() {\n\t\treturn false;\n\t}\n\n\tget _getAccessibleLabel() {\n\t\tconst parts = [];\n\n\t\tif (this.name) {\n\t\t\tparts.push(this.name);\n\t\t}\n\n\t\tif (this.titleText) {\n\t\t\tparts.push(this.titleText);\n\t\t}\n\n\t\tif (this.subtitleText) {\n\t\t\tparts.push(this.subtitleText);\n\t\t}\n\n\t\tif (this.timelineItemStateText) {\n\t\t\tparts.push(this.timelineItemStateText);\n\t\t}\n\n\t\treturn parts.join(\", \");\n\t}\n}\n\nTimelineItem.define();\n\nexport default TimelineItem;\n"]}
+{"version":3,"file":"TimelineItem.js","sourceRoot":"","sources":["../src/TimelineItem.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } 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 i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type Link from \"@ui5/webcomponents/dist/Link.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { I18nText } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { ITimelineItem } from \"./Timeline.js\";\nimport type ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\nimport TimelineItemTemplate from \"./TimelineItemTemplate.js\";\n// Styles\nimport type TimelineLayout from \"./types/TimelineLayout.js\";\n\nimport {\n\tTIMELINE_ITEM_INFORMATION_STATE_TEXT,\n\tTIMELINE_ITEM_POSITIVE_STATE_TEXT,\n\tTIMELINE_ITEM_NEGATIVE_STATE_TEXT,\n\tTIMELINE_ITEM_CRITICAL_STATE_TEXT,\n} from \"./generated/i18n/i18n-defaults.js\";\n\nimport TimelineItemCss from \"./generated/themes/TimelineItem.css.js\";\n\ntype TimelineItemRole = \"listitem\" | \"treeitem\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * An entry posted on the timeline.\n * @constructor\n * @extends UI5Element\n * @implements { ITimelineItem }\n * @public\n */\n@customElement({\n\ttag: \"ui5-timeline-item\",\n\trenderer: jsxRenderer,\n\tstyles: TimelineItemCss,\n\ttemplate: TimelineItemTemplate,\n})\n/**\n * Fired when the item name is pressed either with a\n * click/tap or by using the Enter or Space key.\n *\n * **Note:** The event will not be fired if the `name-clickable`\n * attribute is not set.\n * @public\n */\n@event(\"name-click\", {\n\tbubbles: true,\n})\nclass TimelineItem extends UI5Element implements ITimelineItem {\n\teventDetails!: {\n\t\t\"name-click\": void\n\t}\n\t/**\n\t * Defines the icon to be displayed as graphical element within the `ui5-timeline-item`.\n\t * SAP-icons font provides numerous options.\n\t *\n\t * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ticon?: string;\n\n\t/**\n\t * Defines the name of the item, displayed before the `title-text`.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tname?: string;\n\n\t/**\n\t * Defines if the `name` is clickable.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tnameClickable = false;\n\n\t/**\n\t * Defines the title text of the component.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ttitleText?: string;\n\n\t/**\n\t * Defines the subtitle text of the component.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tsubtitleText?: string;\n\n\t/**\n\t * Defines the state of the icon displayed in the `ui5-timeline-item`.\n\t * @default \"None\"\n\t * @public\n\t * @since 2.7.0\n\t */\n\t@property()\n\tstate: `${ValueState}` = \"None\";\n\n\t/**\n\t * Defines the content of the `ui5-timeline-item`.\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, \"default\": true })\n\tcontent!: DefaultSlot<Node>;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tfirstItemInTimeline = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tisNextItemGroup = false;\n\n\t@property({ noAttribute: true })\n\tforcedTabIndex = \"-1\";\n\n\t/**\n\t * Defines the items orientation.\n\t * @default \"Vertical\"\n\t * @private\n\t */\n\t@property()\n\tlayout: `${TimelineLayout}` = \"Vertical\";\n\n\t/**\n\t * Defines the indicator line width.\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\tforcedLineWidth?: string;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\thideBubble = false;\n\n\t/**\n\t * Marks the last `<ui5-timeline-item>`\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tlastItem = false;\n\n\t/**\n\t * Used internally by TimelineGroupItem for collapse/expand mechanics.\n\t * Applications should not use this for filtering — instead, add/remove items from the DOM.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\thidden = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\teffectiveRole: `${TimelineItemRole}` = \"listitem\";\n\n\t/**\n\t * Defines the position of the item in a group.\n\t * @private\n\t */\n\t@property({ type: Number })\n\tpositionInGroup?: number;\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundleFiori: I18nBundle;\n\n\tconstructor() {\n\t\tsuper();\n\t}\n\n\tonNamePress() {\n\t\tthis.fireDecoratorEvent(\"name-click\");\n\t}\n\n\t/**\n\t * Focus the internal link.\n\t */\n\tfocusLink() {\n\t\tthis.shadowRoot!.querySelector<Link>(\"[ui5-link]\")?.focus();\n\t}\n\n\tstatic typeTextMappings(): Record<string, I18nText> {\n\t\treturn {\n\t\t\t\"Information\": TIMELINE_ITEM_INFORMATION_STATE_TEXT,\n\t\t\t\"Positive\": TIMELINE_ITEM_POSITIVE_STATE_TEXT,\n\t\t\t\"Negative\": TIMELINE_ITEM_NEGATIVE_STATE_TEXT,\n\t\t\t\"Critical\": TIMELINE_ITEM_CRITICAL_STATE_TEXT,\n\t\t};\n\t}\n\n\tget timelineItemStateText() {\n\t\treturn this.state !== \"None\" ? TimelineItem.i18nBundleFiori.getText(TimelineItem.typeTextMappings()[this.state]) : undefined;\n\t}\n\n\tget isGroupItem() {\n\t\treturn false;\n\t}\n\n\tget _getAccessibleLabel() {\n\t\tconst parts = [];\n\n\t\tif (this.name) {\n\t\t\tparts.push(this.name);\n\t\t}\n\n\t\tif (this.titleText) {\n\t\t\tparts.push(this.titleText);\n\t\t}\n\n\t\tif (this.subtitleText) {\n\t\t\tparts.push(this.subtitleText);\n\t\t}\n\n\t\tif (this.timelineItemStateText) {\n\t\t\tparts.push(this.timelineItemStateText);\n\t\t}\n\n\t\treturn parts.join(\", \");\n\t}\n}\n\nTimelineItem.define();\n\nexport default TimelineItem;\n"]}

package/dist/TimelineTemplate.js

@@ -3,7 +3,7 @@ import Button from "@ui5/webcomponents/dist/Button.js";
 import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
 export default function TimelineTemplate() {
     const listRole = this.hasGroupItems ? "tree" : "list";
-    return (_jsx("div", { class: "ui5-timeline-root", role: "region", "aria-label": this.ariaLabel, onFocusIn: this._onfocusin, onKeyDown: this._onkeydown, children: _jsx(BusyIndicator, { id: `${this._id}-busyIndicator`, delay: this.loadingDelay, active: this.showBusyIndicatorOverlay, class: "ui5-timeline-busy-indicator", children: _jsx("div", { class: "ui5-timeline-scroll-container", children: _jsxs("div", { class: "ui5-timeline-list", role: listRole, "aria-live": "polite", "aria-label": this.ariaLabel, children: [this.items.map(item => _jsx("div", { class: "ui5-timeline-list-item", children: _jsx("slot", { name: item._individualSlot }) })), this.growsWithButton && moreRow.call(this), this.growsOnScroll && endRow.call(this)] }) }) }) }));
+    return (_jsxs("div", { class: "ui5-timeline-root", role: "region", "aria-label": this.ariaLabel, onFocusIn: this._onfocusin, onKeyDown: this._onkeydown, children: [this._hasHeaderBar && (_jsx("div", { class: "ui5-timeline-header-bar-wrapper", children: _jsx("slot", { name: "headerBar" }) })), _jsx(BusyIndicator, { id: `${this._id}-busyIndicator`, delay: this.loadingDelay, active: this.showBusyIndicatorOverlay, class: "ui5-timeline-busy-indicator", children: _jsx("div", { class: "ui5-timeline-scroll-container", children: _jsxs("div", { class: "ui5-timeline-list", role: listRole, "aria-live": "polite", "aria-label": this.ariaLabel, children: [this.items.map(item => _jsx("div", { class: "ui5-timeline-list-item", children: _jsx("slot", { name: item._individualSlot }) })), this.growsWithButton && moreRow.call(this), this.growsOnScroll && endRow.call(this)] }) }) })] }));
 }
 function moreRow() {
     return (_jsxs("li", { class: "ui5-timeline-list-item ui5-timeline-list-growing", children: [_jsx("div", { class: "ui5-tli-icon-outer", children: _jsx(Button, { icon: this.growingButtonIcon, id: "ui5-timeline-growing-btn", class: {

package/dist/TimelineTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineTemplate.js","sourceRoot":"","sources":["../src/TimelineTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mCAAmC,CAAC;AAEvD,OAAO,aAAa,MAAM,0CAA0C,CAAC;AAIrE,MAAM,CAAC,OAAO,UAAU,gBAAgB;IACvC,MAAM,QAAQ,GAA0B,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;IAE7E,OAAO,CACN,cAAK,KAAK,EAAC,mBAAmB,EAC7B,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,SAAS,EAC1B,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,SAAS,EAAE,IAAI,CAAC,UAAU,YAE1B,KAAC,aAAa,IACb,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,gBAAgB,EAC/B,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,MAAM,EAAE,IAAI,CAAC,wBAAwB,EACrC,KAAK,EAAC,6BAA6B,YAEnC,cAAK,KAAK,EAAC,+BAA+B,YAEzC,eAAK,KAAK,EAAC,mBAAmB,EAC7B,IAAI,EAAE,QAAQ,eACJ,QAAQ,gBACN,IAAI,CAAC,SAAS,aAEzB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CACtB,cAAK,KAAK,EAAC,wBAAwB,YAClC,eAAM,IAAI,EAAE,IAAI,CAAC,eAAe,GAAS,GACpC,CACN,EACC,IAAI,CAAC,eAAe,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAC1C,IAAI,CAAC,aAAa,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IACpC,GACD,GACS,GACX,CACN,CAAC;AACH,CAAC;AAED,SAAS,OAAO;IACf,OAAO,CACN,cAAI,KAAK,EAAC,kDAAkD,aAC3D,cAAK,KAAK,EAAC,oBAAoB,YAC9B,KAAC,MAAM,IAAC,IAAI,EAAE,IAAI,CAAC,iBAAiB,EACnC,EAAE,EAAE,0BAA0B,EAC9B,KAAK,EAAE;wBACN,gCAAgC,EAAE,IAAI;wBACtC,wCAAwC,EAAE,IAAI,CAAC,eAAe;qBAC9D,EACD,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAClC,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,cAAc,EAAE,IAAI,CAAC,iBAAiB,GAC7B,GACL,EACL,IAAI,CAAC,OAAO;gBACZ,KAAC,aAAa,IACb,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,KAAK,EAAC,4CAA4C,EAClD,MAAM,SACS,IAEb,CACL,CAAC;AACH,CAAC;AAED,SAAS,MAAM;IACd,OAAO,CACN,cAAK,QAAQ,EAAE,CAAC,CAAC,iBAAc,MAAM,EAAC,KAAK,EAAC,yBAAyB,YACpE,eAAM,QAAQ,EAAE,CAAC,CAAC,iBAAc,MAAM,EAAC,KAAK,EAAC,yBAAyB,GAAQ,GACzE,CACN,CAAC;AACH,CAAC","sourcesContent":["import Button from \"@ui5/webcomponents/dist/Button.js\";\nimport type Timeline from \"./Timeline.js\";\nimport BusyIndicator from \"@ui5/webcomponents/dist/BusyIndicator.js\";\n\ntype TimelineListRole = \"list\" | \"tree\";\n\nexport default function TimelineTemplate(this: Timeline) {\n\tconst listRole: `${TimelineListRole}` = this.hasGroupItems ? \"tree\" : \"list\";\n\n\treturn (\n\t\t<div class=\"ui5-timeline-root\"\n\t\t\trole=\"region\"\n\t\t\taria-label={this.ariaLabel}\n\t\t\tonFocusIn={this._onfocusin}\n\t\t\tonKeyDown={this._onkeydown}\n\t\t>\n\t\t\t<BusyIndicator\n\t\t\t\tid={`${this._id}-busyIndicator`}\n\t\t\t\tdelay={this.loadingDelay}\n\t\t\t\tactive={this.showBusyIndicatorOverlay}\n\t\t\t\tclass=\"ui5-timeline-busy-indicator\"\n\t\t\t>\n\t\t\t\t<div class=\"ui5-timeline-scroll-container\">\n\n\t\t\t\t\t<div class=\"ui5-timeline-list\"\n\t\t\t\t\t\trole={listRole}\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-label={this.ariaLabel}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this.items.map(item =>\n\t\t\t\t\t\t\t<div class=\"ui5-timeline-list-item\">\n\t\t\t\t\t\t\t\t<slot name={item._individualSlot}></slot>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{ this.growsWithButton && moreRow.call(this) }\n\t\t\t\t\t\t{ this.growsOnScroll && endRow.call(this) }\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</BusyIndicator>\n\t\t</div>\n\t);\n}\n\nfunction moreRow(this: Timeline) {\n\treturn (\n\t\t<li class=\"ui5-timeline-list-item ui5-timeline-list-growing\">\n\t\t\t<div class=\"ui5-tli-icon-outer\">\n\t\t\t\t<Button icon={this.growingButtonIcon}\n\t\t\t\t\tid={\"ui5-timeline-growing-btn\"}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t\"ui5-timeline-growing-row-inner\": true,\n\t\t\t\t\t\t\"ui5-timeline-growing-row-inner--active\": this._loadMoreActive\n\t\t\t\t\t}}\n\t\t\t\t\ttabindex={0}\n\t\t\t\t\tonClick={this._onLoadMoreClick}\n\t\t\t\t\tonKeyDown={this._onLoadMoreKeydown}\n\t\t\t\t\tonKeyUp={this._onLoadMoreKeyup}\n\t\t\t\t\ttooltip={this.growingButtonText}\n\t\t\t\t\taccessibleName={this.growingButtonText}\n\t\t\t\t></Button>\n\t\t\t</div>\n\t\t\t{this.loading &&\n\t\t\t\t<BusyIndicator\n\t\t\t\t\tdelay={this.loadingDelay}\n\t\t\t\t\tclass=\"ui5-timeline-growing-button-busy-indicator\"\n\t\t\t\t\tactive>\n\t\t\t\t</BusyIndicator>\n\t\t\t}\n\t\t</li>\n\t);\n}\n\nfunction endRow(this: Timeline) {\n\treturn (\n\t\t<div tabindex={-1} aria-hidden=\"true\" class=\"ui5-timeline-end-marker\">\n\t\t\t<span tabindex={-1} aria-hidden=\"true\" class=\"ui5-timeline-end-marker\"></span>\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"file":"TimelineTemplate.js","sourceRoot":"","sources":["../src/TimelineTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mCAAmC,CAAC;AAEvD,OAAO,aAAa,MAAM,0CAA0C,CAAC;AAIrE,MAAM,CAAC,OAAO,UAAU,gBAAgB;IACvC,MAAM,QAAQ,GAA0B,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;IAE7E,OAAO,CACN,eAAK,KAAK,EAAC,mBAAmB,EAC7B,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,SAAS,EAC1B,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,SAAS,EAAE,IAAI,CAAC,UAAU,aAGzB,IAAI,CAAC,aAAa,IAAI,CACtB,cAAK,KAAK,EAAC,iCAAiC,YAC3C,eAAM,IAAI,EAAC,WAAW,GAAQ,GACzB,CACN,EAED,KAAC,aAAa,IACb,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,gBAAgB,EAC/B,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,MAAM,EAAE,IAAI,CAAC,wBAAwB,EACrC,KAAK,EAAC,6BAA6B,YAEnC,cAAK,KAAK,EAAC,+BAA+B,YAEzC,eAAK,KAAK,EAAC,mBAAmB,EAC7B,IAAI,EAAE,QAAQ,eACJ,QAAQ,gBACN,IAAI,CAAC,SAAS,aAEzB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CACtB,cAAK,KAAK,EAAC,wBAAwB,YAClC,eAAM,IAAI,EAAE,IAAI,CAAC,eAAe,GAAS,GACpC,CACN,EACC,IAAI,CAAC,eAAe,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAC1C,IAAI,CAAC,aAAa,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IACpC,GACD,GACS,IACX,CACN,CAAC;AACH,CAAC;AAED,SAAS,OAAO;IACf,OAAO,CACN,cAAI,KAAK,EAAC,kDAAkD,aAC3D,cAAK,KAAK,EAAC,oBAAoB,YAC9B,KAAC,MAAM,IAAC,IAAI,EAAE,IAAI,CAAC,iBAAiB,EACnC,EAAE,EAAE,0BAA0B,EAC9B,KAAK,EAAE;wBACN,gCAAgC,EAAE,IAAI;wBACtC,wCAAwC,EAAE,IAAI,CAAC,eAAe;qBAC9D,EACD,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAClC,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,cAAc,EAAE,IAAI,CAAC,iBAAiB,GAC7B,GACL,EACL,IAAI,CAAC,OAAO;gBACZ,KAAC,aAAa,IACb,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,KAAK,EAAC,4CAA4C,EAClD,MAAM,SACS,IAEb,CACL,CAAC;AACH,CAAC;AAED,SAAS,MAAM;IACd,OAAO,CACN,cAAK,QAAQ,EAAE,CAAC,CAAC,iBAAc,MAAM,EAAC,KAAK,EAAC,yBAAyB,YACpE,eAAM,QAAQ,EAAE,CAAC,CAAC,iBAAc,MAAM,EAAC,KAAK,EAAC,yBAAyB,GAAQ,GACzE,CACN,CAAC;AACH,CAAC","sourcesContent":["import Button from \"@ui5/webcomponents/dist/Button.js\";\nimport type Timeline from \"./Timeline.js\";\nimport BusyIndicator from \"@ui5/webcomponents/dist/BusyIndicator.js\";\n\ntype TimelineListRole = \"list\" | \"tree\";\n\nexport default function TimelineTemplate(this: Timeline) {\n\tconst listRole: `${TimelineListRole}` = this.hasGroupItems ? \"tree\" : \"list\";\n\n\treturn (\n\t\t<div class=\"ui5-timeline-root\"\n\t\t\trole=\"region\"\n\t\t\taria-label={this.ariaLabel}\n\t\t\tonFocusIn={this._onfocusin}\n\t\t\tonKeyDown={this._onkeydown}\n\t\t>\n\t\t\t{/* Header Bar Slot */}\n\t\t\t{this._hasHeaderBar && (\n\t\t\t\t<div class=\"ui5-timeline-header-bar-wrapper\">\n\t\t\t\t\t<slot name=\"headerBar\"></slot>\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t<BusyIndicator\n\t\t\t\tid={`${this._id}-busyIndicator`}\n\t\t\t\tdelay={this.loadingDelay}\n\t\t\t\tactive={this.showBusyIndicatorOverlay}\n\t\t\t\tclass=\"ui5-timeline-busy-indicator\"\n\t\t\t>\n\t\t\t\t<div class=\"ui5-timeline-scroll-container\">\n\n\t\t\t\t\t<div class=\"ui5-timeline-list\"\n\t\t\t\t\t\trole={listRole}\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-label={this.ariaLabel}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this.items.map(item =>\n\t\t\t\t\t\t\t<div class=\"ui5-timeline-list-item\">\n\t\t\t\t\t\t\t\t<slot name={item._individualSlot}></slot>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{ this.growsWithButton && moreRow.call(this) }\n\t\t\t\t\t\t{ this.growsOnScroll && endRow.call(this) }\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</BusyIndicator>\n\t\t</div>\n\t);\n}\n\nfunction moreRow(this: Timeline) {\n\treturn (\n\t\t<li class=\"ui5-timeline-list-item ui5-timeline-list-growing\">\n\t\t\t<div class=\"ui5-tli-icon-outer\">\n\t\t\t\t<Button icon={this.growingButtonIcon}\n\t\t\t\t\tid={\"ui5-timeline-growing-btn\"}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t\"ui5-timeline-growing-row-inner\": true,\n\t\t\t\t\t\t\"ui5-timeline-growing-row-inner--active\": this._loadMoreActive\n\t\t\t\t\t}}\n\t\t\t\t\ttabindex={0}\n\t\t\t\t\tonClick={this._onLoadMoreClick}\n\t\t\t\t\tonKeyDown={this._onLoadMoreKeydown}\n\t\t\t\t\tonKeyUp={this._onLoadMoreKeyup}\n\t\t\t\t\ttooltip={this.growingButtonText}\n\t\t\t\t\taccessibleName={this.growingButtonText}\n\t\t\t\t></Button>\n\t\t\t</div>\n\t\t\t{this.loading &&\n\t\t\t\t<BusyIndicator\n\t\t\t\t\tdelay={this.loadingDelay}\n\t\t\t\t\tclass=\"ui5-timeline-growing-button-busy-indicator\"\n\t\t\t\t\tactive>\n\t\t\t\t</BusyIndicator>\n\t\t\t}\n\t\t</li>\n\t);\n}\n\nfunction endRow(this: Timeline) {\n\treturn (\n\t\t<div tabindex={-1} aria-hidden=\"true\" class=\"ui5-timeline-end-marker\">\n\t\t\t<span tabindex={-1} aria-hidden=\"true\" class=\"ui5-timeline-end-marker\"></span>\n\t\t</div>\n\t);\n}\n"]}

package/dist/ViewSettingsDialog.d.ts

@@ -12,6 +12,7 @@ import "@ui5/webcomponents-icons/dist/nav-back.js";
 import type SortItem from "./SortItem.js";
 import type FilterItem from "./FilterItem.js";
 import type GroupItem from "./GroupItem.js";
+import type ViewSettingsDialogCustomTab from "./ViewSettingsDialogCustomTab.js";
 type VSDFilter = Record<string, Array<string>>;
 type VSDFilters = Array<VSDFilter>;
 type VSDSettings = {
@@ -50,6 +51,9 @@ type VSDInternalSettings = {
         index: number;
     }>;
 };
+declare const CUSTOM_MODE_PREFIX = "customTabs-";
+type ViewSettingsCustomMode = `${typeof CUSTOM_MODE_PREFIX}${number}`;
+type ViewSettingsDialogInternalMode = `${ViewSettingsDialogMode}` | ViewSettingsCustomMode;
 /**
  * @class
  * ### Overview
@@ -85,6 +89,7 @@ declare class ViewSettingsDialog extends UI5Element {
         "before-open": void;
         "open": void;
         "close": void;
+        "reset-click": void;
     };
     /**
      * Defines the initial sort order.
@@ -106,6 +111,18 @@ declare class ViewSettingsDialog extends UI5Element {
      * @since 2.0.0
      */
     open: boolean;
+    /**
+     * Defines whether the Reset button is always enabled.
+     *
+     * **Note:** By default, the Reset button is only enabled when the dialog settings
+     * differ from their initial state. Set this property to `true` to keep the Reset
+     * button always enabled, which is useful when working with custom tabs
+     * whose internal state changes cannot be detected by the component.
+     * @default false
+     * @public
+     * @since 2.22.0
+     */
+    enableReset: boolean;
     /**
      * Keeps recently focused list in order to focus it on next dialog open.
      * @private
@@ -131,7 +148,7 @@ declare class ViewSettingsDialog extends UI5Element {
      * @since 1.0.0-rc.16
      * @private
      */
-    _currentMode: `${ViewSettingsDialogMode}`;
+    _currentMode: ViewSettingsDialogInternalMode;
     /**
      * 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
@@ -159,6 +176,16 @@ declare class ViewSettingsDialog extends UI5Element {
      * @public
      */
     groupItems: Slot<GroupItem>;
+    /**
+     * Defines custom tabs for the dialog.
+     *
+     * The custom tabs are rendered after the built-in tabs (`Sort`, `Filter`, `Group`).
+     *
+     * **Note:** If you want to use this slot, you need to import the item: `import "@ui5/webcomponents-fiori/dist/ViewSettingsDialogCustomTab.js";`
+     * @public
+     * @since 2.22.0
+     */
+    customTabs: Slot<ViewSettingsDialogCustomTab>;
     _list: List;
     _dialog?: Dialog;
     _sortOrder?: List;
@@ -178,7 +205,14 @@ declare class ViewSettingsDialog extends UI5Element {
     get shouldBuildSort(): boolean;
     get shouldBuildFilter(): boolean;
     get shouldBuildGroup(): boolean;
+    get shouldBuildCustomTabs(): boolean;
+    /**
+     * Returns only custom tabs that have an icon defined and can be rendered.
+     */
+    get _renderableCustomTabs(): ViewSettingsDialogCustomTab[];
     get hasPagination(): boolean;
+    get _defaultMode(): ViewSettingsDialogInternalMode;
+    get _selectedCustomTab(): ViewSettingsDialogCustomTab | undefined;
     get _filterByTitle(): string;
     get _dialogTitle(): string;
     get _okButtonLabel(): string;
@@ -230,6 +264,7 @@ declare class ViewSettingsDialog extends UI5Element {
     get isModeSort(): boolean;
     get isModeFilter(): boolean;
     get isModeGroup(): boolean;
+    get isModeCustom(): boolean;
     get showBackButton(): boolean;
     /**
      * Shows the dialog.
@@ -285,6 +320,10 @@ declare class ViewSettingsDialog extends UI5Element {
      * @param settings
      */
     _restoreSettings(settings: VSDInternalSettings): void;
+    isCurrentCustomTabMode(tab: ViewSettingsDialogCustomTab): boolean;
+    _customTabMode(tab: ViewSettingsDialogCustomTab): ViewSettingsCustomMode;
+    _isCustomMode(mode: string): mode is ViewSettingsCustomMode;
+    _isValidMode(mode: string): mode is ViewSettingsDialogInternalMode;
     /**
      * Stores `Sort Order` list as recently used control and its selected item in current state.
      */