@ui5/webcomponents-fiori 2.19.2 → 2.20.0-rc.1

package/dist/shellbar/ShellBarOverflow.js

@@ -0,0 +1,159 @@
+import { ShellBarActions, ShellBarActionsSelectors } from "../ShellBar.js";
+class ShellBarOverflow {
+    constructor() {
+        this.CLOSED_SEARCH_STRATEGY = {
+            ACTIONS: 0, // All actions hide first
+            CONTENT: 1000, // Then content (except last)
+            SEARCH: 2000, // Then search button
+            LAST_CONTENT: 3000, // Last content item hides last
+        };
+        this.OPEN_SEARCH_STRATEGY = {
+            CONTENT: 0, // All content hide first
+            ACTIONS: 1000, // All actions next
+            SEARCH: 2000, // Then search button
+            LAST_CONTENT: 0, // Last content same as other content
+        };
+    }
+    updateOverflow(params) {
+        const { overflowOuter, overflowInner, setVisible, } = params;
+        if (!overflowOuter || !overflowInner) {
+            return { hiddenItemsIds: [], showOverflowButton: false };
+        }
+        const sortedItems = this.buildHidableItems(params);
+        // set initial state, to account for isOverflowing calculation
+        setVisible(ShellBarActionsSelectors.Overflow, false);
+        sortedItems.forEach(item => {
+            // show all items to account for isOverflowing calculation
+            setVisible(item.selector, true);
+        });
+        let nextItemToHide = null;
+        let showOverflowButton = false;
+        const hiddenItemsIds = [];
+        // Iteratively hide items until no overflow
+        for (let indexToHide = 0; indexToHide < sortedItems.length; indexToHide++) {
+            nextItemToHide = sortedItems[indexToHide];
+            if (!this.isOverflowing(overflowOuter, overflowInner)) {
+                break; // No more overflow, stop hiding
+            }
+            setVisible(nextItemToHide.selector, false);
+            hiddenItemsIds.push(nextItemToHide.id);
+            if (nextItemToHide.showInOverflow) {
+                // show overflow button to account in isOverflowing calculation
+                setVisible(ShellBarActionsSelectors.Overflow, true);
+                showOverflowButton = true;
+            }
+        }
+        return {
+            hiddenItemsIds,
+            showOverflowButton,
+        };
+    }
+    isOverflowing(overflowOuter, overflowInner) {
+        return overflowInner.offsetWidth > overflowOuter.offsetWidth;
+    }
+    getOverflowStrategy(showSearchField) {
+        return showSearchField ? this.OPEN_SEARCH_STRATEGY : this.CLOSED_SEARCH_STRATEGY;
+    }
+    buildHidableItems(params) {
+        const items = [
+            ...this.buildContent(params),
+            ...this.buildActions(params),
+        ];
+        // sort by hideOrder first then by keepHidden keepHidden items are at the start
+        return items.sort((a, b) => {
+            if (a.keepHidden && !b.keepHidden) {
+                return -1;
+            }
+            if (!a.keepHidden && b.keepHidden) {
+                return 1;
+            }
+            return a.hideOrder - b.hideOrder;
+        });
+    }
+    buildContent(params) {
+        const { content, showSearchField, } = params;
+        const items = [];
+        const overflowStrategy = this.getOverflowStrategy(showSearchField);
+        // Build content items
+        content.forEach((item, index) => {
+            const slotName = item._individualSlot;
+            const dataHideOrder = parseInt(item.getAttribute("data-hide-order") || String(index));
+            const isLast = index === content.length - 1;
+            const priority = isLast ? overflowStrategy.LAST_CONTENT : overflowStrategy.CONTENT;
+            items.push({
+                id: slotName,
+                selector: `#${slotName}`,
+                hideOrder: priority + dataHideOrder,
+                keepHidden: false, // Content items don't cause flickering
+                showInOverflow: false,
+            });
+        });
+        return items;
+    }
+    buildActions(params) {
+        const { customItems, actions, showSearchField, hiddenItemsIds, } = params;
+        const items = [];
+        const overflowStrategy = this.getOverflowStrategy(showSearchField);
+        let actionIndex = 0;
+        customItems.forEach(item => {
+            items.push({
+                id: item._id,
+                selector: `[data-ui5-stable="${item.stableDomRef}"]`,
+                hideOrder: overflowStrategy.ACTIONS + actionIndex++,
+                keepHidden: hiddenItemsIds.includes(item._id),
+                showInOverflow: true,
+            });
+        });
+        actions
+            // skip protected actions and search (handled separately)
+            .filter(a => !a.isProtected && a.id !== ShellBarActions.Search)
+            .forEach(config => {
+            items.push({
+                id: config.id,
+                selector: config.selector,
+                hideOrder: overflowStrategy.ACTIONS + actionIndex++,
+                keepHidden: hiddenItemsIds.includes(config.id),
+                showInOverflow: true,
+            });
+        });
+        if (!showSearchField) {
+            // Only move search to overflow if it's closed
+            items.push({
+                id: ShellBarActions.Search,
+                selector: ShellBarActionsSelectors.Search,
+                hideOrder: overflowStrategy.SEARCH + actionIndex++,
+                keepHidden: false, // Search button can be shown/hidden freely
+                showInOverflow: true,
+            });
+        }
+        return items;
+    }
+    getOverflowItems(params) {
+        const { actions, customItems, hiddenItemsIds } = params;
+        const result = [];
+        // Add hidden custom items
+        const hiddenCustomItems = customItems.filter((item) => hiddenItemsIds.includes(item._id));
+        hiddenCustomItems.forEach((item, index) => {
+            result.push({
+                type: "item", id: item._id, data: item, order: 3 + index,
+            });
+        });
+        const actionOrder = {
+            [ShellBarActions.Search]: 0,
+            [ShellBarActions.Notifications]: 1,
+            [ShellBarActions.Assistant]: 2,
+        };
+        const hiddenActions = actions.filter(action => hiddenItemsIds.includes(action.id));
+        hiddenActions.forEach(action => {
+            result.push({
+                type: "action",
+                id: action.id,
+                data: action,
+                order: actionOrder[action.id] ?? 0,
+            });
+        });
+        return result.sort((a, b) => a.order - b.order);
+    }
+}
+export default ShellBarOverflow;
+//# sourceMappingURL=ShellBarOverflow.js.map

package/dist/shellbar/ShellBarOverflow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShellBarOverflow.js","sourceRoot":"","sources":["../../src/shellbar/ShellBarOverflow.ts"],"names":[],"mappings":"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","sourcesContent":["import type ShellBarItem from \"../ShellBarItem.js\";\nimport { ShellBarActions, ShellBarActionsSelectors } from \"../ShellBar.js\";\nimport type { ShellBarActionId, ShellBarActionItem } from \"../ShellBar.js\";\n\ninterface ShellBarHidableItem {\n\tid: string;\n\tselector: string; \t\t\t// CSS selector to find the element\n\thideOrder: number;\t\t\t// Priority for hiding - later adjusted based on search field state\n\tkeepHidden: boolean; \t\t// Keep item hidden to prevent flickering when searchfield expands/collapses\n\tshowInOverflow?: boolean; \t// If true, hiding this item triggers overflow button\n}\n\ninterface ShellBarOverflowParams {\n\tactions: readonly ShellBarActionItem[];\n\tcontent: readonly HTMLElement[];\n\tcustomItems: readonly ShellBarItem[];\n\toverflowOuter: HTMLElement;\n\toverflowInner: HTMLElement;\n\thiddenItemsIds: readonly string[];\n\tshowSearchField: boolean;\n\tsetVisible: (selector: string, visible: boolean) => void;\n}\n\ninterface ShellBarOverflowResult {\n\thiddenItemsIds: string[];\n\tshowOverflowButton: boolean;\n}\n\ntype ShellBarOverflowItem = {\n\ttype: \"action\";\n\tid: ShellBarActionId;\n\tdata: ShellBarActionItem\n\torder: number;\n} | {\n\ttype: \"item\";\n\tid: string;\n\tdata: ShellBarItem;\n\torder: number;\n}\n\nclass ShellBarOverflow {\n\tprivate readonly CLOSED_SEARCH_STRATEGY = {\n\t\tACTIONS: 0,\t\t\t// All actions hide first\n\t\tCONTENT: 1000,\t\t// Then content (except last)\n\t\tSEARCH: 2000,\t\t// Then search button\n\t\tLAST_CONTENT: 3000,\t// Last content item hides last\n\t};\n\n\tprivate readonly OPEN_SEARCH_STRATEGY = {\n\t\tCONTENT: 0, \t\t// All content hide first\n\t\tACTIONS: 1000,\t\t// All actions next\n\t\tSEARCH: 2000,\t\t// Then search button\n\t\tLAST_CONTENT: 0,\t// Last content same as other content\n\t};\n\n\tupdateOverflow(params: ShellBarOverflowParams): ShellBarOverflowResult {\n\t\tconst {\n\t\t\toverflowOuter, overflowInner, setVisible,\n\t\t} = params;\n\n\t\tif (!overflowOuter || !overflowInner) {\n\t\t\treturn { hiddenItemsIds: [], showOverflowButton: false };\n\t\t}\n\n\t\tconst sortedItems = this.buildHidableItems(params);\n\n\t\t// set initial state, to account for isOverflowing calculation\n\t\tsetVisible(ShellBarActionsSelectors.Overflow, false);\n\t\tsortedItems.forEach(item => {\n\t\t\t// show all items to account for isOverflowing calculation\n\t\t\tsetVisible(item.selector, true);\n\t\t});\n\n\t\tlet nextItemToHide = null;\n\t\tlet showOverflowButton = false;\n\t\tconst hiddenItemsIds: string[] = [];\n\n\t\t// Iteratively hide items until no overflow\n\t\tfor (let indexToHide = 0; indexToHide < sortedItems.length; indexToHide++) {\n\t\t\tnextItemToHide = sortedItems[indexToHide];\n\n\t\t\tif (!this.isOverflowing(overflowOuter, overflowInner)) {\n\t\t\t\tbreak; // No more overflow, stop hiding\n\t\t\t}\n\n\t\t\tsetVisible(nextItemToHide.selector, false);\n\t\t\thiddenItemsIds.push(nextItemToHide.id);\n\n\t\t\tif (nextItemToHide.showInOverflow) {\n\t\t\t\t// show overflow button to account in isOverflowing calculation\n\t\t\t\tsetVisible(ShellBarActionsSelectors.Overflow, true);\n\t\t\t\tshowOverflowButton = true;\n\t\t\t}\n\t\t}\n\n\t\treturn {\n\t\t\thiddenItemsIds,\n\t\t\tshowOverflowButton,\n\t\t};\n\t}\n\n\tisOverflowing(overflowOuter: HTMLElement, overflowInner: HTMLElement): boolean {\n\t\treturn overflowInner.offsetWidth > overflowOuter.offsetWidth;\n\t}\n\n\tprivate getOverflowStrategy(showSearchField: boolean) {\n\t\treturn showSearchField ? this.OPEN_SEARCH_STRATEGY : this.CLOSED_SEARCH_STRATEGY;\n\t}\n\n\tprivate buildHidableItems(params: ShellBarOverflowParams): ShellBarHidableItem[] {\n\t\tconst items: ShellBarHidableItem[] = [\n\t\t\t...this.buildContent(params),\n\t\t\t...this.buildActions(params),\n\t\t];\n\n\t\t// sort by hideOrder first then by keepHidden keepHidden items are at the start\n\t\treturn items.sort((a, b) => {\n\t\t\tif (a.keepHidden && !b.keepHidden) {\n\t\t\t\treturn -1;\n\t\t\t}\n\t\t\tif (!a.keepHidden && b.keepHidden) {\n\t\t\t\treturn 1;\n\t\t\t}\n\t\t\treturn a.hideOrder - b.hideOrder;\n\t\t});\n\t}\n\n\tprivate buildContent(params: ShellBarOverflowParams): readonly ShellBarHidableItem[] {\n\t\tconst {\n\t\t\tcontent, showSearchField,\n\t\t} = params;\n\n\t\tconst items: ShellBarHidableItem[] = [];\n\t\tconst overflowStrategy = this.getOverflowStrategy(showSearchField);\n\n\t\t// Build content items\n\t\tcontent.forEach((item, index) => {\n\t\t\tconst slotName = (item as any)._individualSlot as string;\n\t\t\tconst dataHideOrder = parseInt(item.getAttribute(\"data-hide-order\") || String(index));\n\t\t\tconst isLast = index === content.length - 1;\n\n\t\t\tconst priority = isLast ? overflowStrategy.LAST_CONTENT : overflowStrategy.CONTENT;\n\n\t\t\titems.push({\n\t\t\t\tid: slotName,\n\t\t\t\tselector: `#${slotName}`,\n\t\t\t\thideOrder: priority + dataHideOrder,\n\t\t\t\tkeepHidden: false, // Content items don't cause flickering\n\t\t\t\tshowInOverflow: false,\n\t\t\t});\n\t\t});\n\n\t\treturn items;\n\t}\n\n\tprivate buildActions(params: ShellBarOverflowParams): readonly ShellBarHidableItem[] {\n\t\tconst {\n\t\t\tcustomItems, actions, showSearchField, hiddenItemsIds,\n\t\t} = params;\n\n\t\tconst items: ShellBarHidableItem[] = [];\n\t\tconst overflowStrategy = this.getOverflowStrategy(showSearchField);\n\t\tlet actionIndex = 0;\n\n\t\tcustomItems.forEach(item => {\n\t\t\titems.push({\n\t\t\t\tid: item._id,\n\t\t\t\tselector: `[data-ui5-stable=\"${item.stableDomRef}\"]`,\n\t\t\t\thideOrder: overflowStrategy.ACTIONS + actionIndex++,\n\t\t\t\tkeepHidden: hiddenItemsIds.includes(item._id),\n\t\t\t\tshowInOverflow: true,\n\t\t\t});\n\t\t});\n\n\t\tactions\n\t\t\t// skip protected actions and search (handled separately)\n\t\t\t.filter(a => !a.isProtected && a.id !== ShellBarActions.Search)\n\t\t\t.forEach(config => {\n\t\t\t\titems.push({\n\t\t\t\t\tid: config.id,\n\t\t\t\t\tselector: config.selector,\n\t\t\t\t\thideOrder: overflowStrategy.ACTIONS + actionIndex++,\n\t\t\t\t\tkeepHidden: hiddenItemsIds.includes(config.id),\n\t\t\t\t\tshowInOverflow: true,\n\t\t\t\t});\n\t\t\t});\n\n\t\tif (!showSearchField) {\n\t\t\t// Only move search to overflow if it's closed\n\t\t\titems.push({\n\t\t\t\tid: ShellBarActions.Search,\n\t\t\t\tselector: ShellBarActionsSelectors.Search,\n\t\t\t\thideOrder: overflowStrategy.SEARCH + actionIndex++,\n\t\t\t\tkeepHidden: false, // Search button can be shown/hidden freely\n\t\t\t\tshowInOverflow: true,\n\t\t\t});\n\t\t}\n\t\treturn items;\n\t}\n\n\tgetOverflowItems(params: {\n\t\tactions: readonly ShellBarActionItem[];\n\t\tcustomItems: readonly ShellBarItem[];\n\t\thiddenItemsIds: readonly string[];\n\t}): ReadonlyArray<ShellBarOverflowItem> {\n\t\tconst { actions, customItems, hiddenItemsIds } = params;\n\t\tconst result: ShellBarOverflowItem[] = [];\n\n\t\t// Add hidden custom items\n\t\tconst hiddenCustomItems = customItems.filter((item: ShellBarItem) => hiddenItemsIds.includes(item._id));\n\t\thiddenCustomItems.forEach((item: ShellBarItem, index: number) => {\n\t\t\tresult.push({\n\t\t\t\ttype: \"item\", id: item._id, data: item, order: 3 + index,\n\t\t\t});\n\t\t});\n\n\t\tconst actionOrder: Record<string, number> = {\n\t\t\t[ShellBarActions.Search]: 0,\n\t\t\t[ShellBarActions.Notifications]: 1,\n\t\t\t[ShellBarActions.Assistant]: 2,\n\t\t};\n\n\t\tconst hiddenActions = actions.filter(action => hiddenItemsIds.includes(action.id));\n\t\thiddenActions.forEach(action => {\n\t\t\tresult.push({\n\t\t\t\ttype: \"action\",\n\t\t\t\tid: action.id,\n\t\t\t\tdata: action,\n\t\t\t\torder: actionOrder[action.id] ?? 0,\n\t\t\t});\n\t\t});\n\n\t\treturn result.sort((a, b) => a.order - b.order);\n\t}\n}\n\nexport default ShellBarOverflow;\nexport type {\n\tShellBarHidableItem,\n\tShellBarOverflowParams,\n\tShellBarOverflowResult,\n\tShellBarOverflowItem,\n};\n"]}

package/dist/shellbar/ShellBarSearch.d.ts

@@ -0,0 +1,59 @@
+import type { IShellBarSearchField } from "../ShellBar.js";
+import type { IShellBarSearchController } from "./IShellBarSearchController.js";
+interface ShellBarSearchConstructorParams {
+    getOverflowed: () => boolean;
+    getSearchState: () => boolean;
+    setSearchState: (expanded: boolean) => void;
+    getSearchField: () => IShellBarSearchField | null;
+    getCSSVariable: (variable: string) => string;
+}
+/**
+ * Search controller for self-collapsible search (ui5-shellbar-search).
+ * Handles search fields with collapsed/open properties and ui5-open/close/search events.
+ */
+declare class ShellBarSearch implements IShellBarSearchController {
+    static CSS_VARIABLE: string;
+    static FALLBACK_WIDTH: number;
+    private onSearchBound;
+    private onSearchOpenBound;
+    private onSearchCloseBound;
+    private getOverflowed;
+    private getSearchField;
+    private getSearchState;
+    private setSearchState;
+    private getCSSVariable;
+    private initialRender;
+    constructor({ getOverflowed, setSearchState, getSearchField, getSearchState, getCSSVariable, }: ShellBarSearchConstructorParams);
+    subscribe(searchField?: HTMLElement | null): void;
+    unsubscribe(searchField?: HTMLElement | null): void;
+    /**
+     * Auto-collapse/restore search field based on available space.
+     * Delegates decision logic to SearchController.
+     */
+    autoManageSearchState(hiddenItems: number, availableSpace: number): void;
+    /**
+     * Applies the show-search-field state to the search field.
+     */
+    syncShowSearchFieldState(): void;
+    /**
+     * Determines if full-screen search should be shown.
+     * Full-screen search activates when overflow happens AND search is visible.
+     */
+    shouldShowFullScreen(): boolean;
+    private onSearchOpen;
+    private onSearchClose;
+    private onSearch;
+    /**
+     * Gets the minimum width needed for search field from CSS variable.
+     */
+    private getSearchFieldWidth;
+    get hasSearchField(): boolean;
+    /**
+     * Gets the size of the search button.
+     * If the search field is visible, the size is 0.
+     * Otherwise, it is the width of the search field (just a button in collapsed state).
+     */
+    private getSearchButtonSize;
+}
+export default ShellBarSearch;
+export type { ShellBarSearchConstructorParams, };

package/dist/shellbar/ShellBarSearch.js

@@ -0,0 +1,145 @@
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+/**
+ * Search controller for self-collapsible search (ui5-shellbar-search).
+ * Handles search fields with collapsed/open properties and ui5-open/close/search events.
+ */
+class ShellBarSearch {
+    constructor({ getOverflowed, setSearchState, getSearchField, getSearchState, getCSSVariable, }) {
+        this.onSearchBound = this.onSearch.bind(this);
+        this.onSearchOpenBound = this.onSearchOpen.bind(this);
+        this.onSearchCloseBound = this.onSearchClose.bind(this);
+        this.initialRender = true;
+        this.getOverflowed = getOverflowed;
+        this.getCSSVariable = getCSSVariable;
+        this.getSearchField = getSearchField;
+        this.getSearchState = getSearchState;
+        this.setSearchState = setSearchState;
+    }
+    subscribe(searchField = this.getSearchField()) {
+        if (!searchField) {
+            return;
+        }
+        searchField.addEventListener("ui5-open", this.onSearchOpenBound);
+        searchField.addEventListener("ui5-close", this.onSearchCloseBound);
+        searchField.addEventListener("ui5-search", this.onSearchBound);
+    }
+    unsubscribe(searchField = this.getSearchField()) {
+        if (!searchField) {
+            return;
+        }
+        searchField.removeEventListener("ui5-open", this.onSearchOpenBound);
+        searchField.removeEventListener("ui5-close", this.onSearchCloseBound);
+        searchField.removeEventListener("ui5-search", this.onSearchBound);
+    }
+    /**
+     * Auto-collapse/restore search field based on available space.
+     * Delegates decision logic to SearchController.
+     */
+    autoManageSearchState(hiddenItems, availableSpace) {
+        if (!this.hasSearchField) {
+            return;
+        }
+        // Get search field min width from CSS variable
+        const searchFieldWidth = this.getSearchFieldWidth();
+        const searchHasFocus = document.activeElement === this.getSearchField();
+        const searchHasValue = !!this.getSearchField()?.value;
+        // On initial load, allow search to collapse even if it would trigger full-screen mode.
+        // This prevents search from showing in full-screen when page loads on small screens.
+        // After initial render, prevent collapse in full-screen mode during resize.
+        const inFullScreen = !this.initialRender && this.shouldShowFullScreen();
+        const preventCollapse = searchHasFocus || searchHasValue || inFullScreen;
+        if (hiddenItems > 0 && !preventCollapse) {
+            this.setSearchState(false);
+        }
+        else if (availableSpace + this.getSearchButtonSize() > searchFieldWidth) {
+            this.setSearchState(true);
+        }
+        this.initialRender = false;
+    }
+    /**
+     * Applies the show-search-field state to the search field.
+     */
+    syncShowSearchFieldState() {
+        const search = this.getSearchField();
+        if (!search) {
+            return;
+        }
+        if (isPhone()) {
+            // On initial render, don't auto-open the search dialog on phones
+            // to prevent the full-screen search from showing when page loads
+            if (this.initialRender) {
+                return;
+            }
+            search.open = this.getSearchState();
+        }
+        else {
+            search.collapsed = !this.getSearchState();
+        }
+    }
+    /**
+     * Determines if full-screen search should be shown.
+     * Full-screen search activates when overflow happens AND search is visible.
+     */
+    shouldShowFullScreen() {
+        return this.getOverflowed() && this.getSearchState();
+    }
+    onSearchOpen(e) {
+        if (e.target !== this.getSearchField()) {
+            this.unsubscribe(e.target);
+            return;
+        }
+        if (isPhone()) {
+            this.setSearchState(true);
+        }
+    }
+    onSearchClose(e) {
+        if (e.target !== this.getSearchField()) {
+            this.unsubscribe(e.target);
+            return;
+        }
+        if (isPhone()) {
+            this.setSearchState(false);
+        }
+    }
+    onSearch(e) {
+        if (e.target !== this.getSearchField()) {
+            this.unsubscribe(e.target);
+            return;
+        }
+        // On mobile or if has value, don't toggle
+        if (isPhone() || (this.getSearchField()?.value && this.getSearchState())) {
+            return;
+        }
+        this.setSearchState(!this.getSearchState());
+    }
+    /**
+     * Gets the minimum width needed for search field from CSS variable.
+     */
+    getSearchFieldWidth() {
+        const width = this.getCSSVariable(ShellBarSearch.CSS_VARIABLE);
+        if (!width) {
+            return ShellBarSearch.FALLBACK_WIDTH;
+        }
+        // Convert rem to px
+        if (width.endsWith("rem")) {
+            const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+            return parseFloat(width) * fontSize;
+        }
+        return parseFloat(width);
+    }
+    get hasSearchField() {
+        return !!this.getSearchField();
+    }
+    /**
+     * Gets the size of the search button.
+     * If the search field is visible, the size is 0.
+     * Otherwise, it is the width of the search field (just a button in collapsed state).
+     */
+    getSearchButtonSize() {
+        return this.getSearchState() ? 0 : this.getSearchField()?.getBoundingClientRect().width || 0;
+    }
+}
+ShellBarSearch.CSS_VARIABLE = "--_ui5_shellbar_search_field_width";
+ShellBarSearch.FALLBACK_WIDTH = 400;
+export default ShellBarSearch;
+//# sourceMappingURL=ShellBarSearch.js.map

package/dist/shellbar/ShellBarSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShellBarSearch.js","sourceRoot":"","sources":["../../src/shellbar/ShellBarSearch.ts"],"names":[],"mappings":"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","sourcesContent":["import { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport type { IShellBarSearchField } from \"../ShellBar.js\";\nimport type { IShellBarSearchController } from \"./IShellBarSearchController.js\";\n\ninterface ShellBarSearchConstructorParams {\n\tgetOverflowed: () => boolean;\n\tgetSearchState: () => boolean;\n\tsetSearchState: (expanded: boolean) => void;\n\tgetSearchField: () => IShellBarSearchField | null;\n\tgetCSSVariable: (variable: string) => string;\n}\n\n/**\n * Search controller for self-collapsible search (ui5-shellbar-search).\n * Handles search fields with collapsed/open properties and ui5-open/close/search events.\n */\nclass ShellBarSearch implements IShellBarSearchController {\n\tstatic CSS_VARIABLE = \"--_ui5_shellbar_search_field_width\";\n\tstatic FALLBACK_WIDTH = 400;\n\n\tprivate onSearchBound = this.onSearch.bind(this);\n\tprivate onSearchOpenBound = this.onSearchOpen.bind(this);\n\tprivate onSearchCloseBound = this.onSearchClose.bind(this);\n\n\tprivate getOverflowed: () => boolean;\n\tprivate getSearchField: () => IShellBarSearchField | null;\n\tprivate getSearchState: () => boolean;\n\tprivate setSearchState: (expanded: boolean) => void;\n\tprivate getCSSVariable: (variable: string) => string;\n\tprivate initialRender = true;\n\n\tconstructor({\n\t\tgetOverflowed,\n\t\tsetSearchState,\n\t\tgetSearchField,\n\t\tgetSearchState,\n\t\tgetCSSVariable,\n\t}: ShellBarSearchConstructorParams) {\n\t\tthis.getOverflowed = getOverflowed;\n\t\tthis.getCSSVariable = getCSSVariable;\n\t\tthis.getSearchField = getSearchField;\n\t\tthis.getSearchState = getSearchState;\n\t\tthis.setSearchState = setSearchState;\n\t}\n\n\tsubscribe(searchField: HTMLElement | null = this.getSearchField()) {\n\t\tif (!searchField) {\n\t\t\treturn;\n\t\t}\n\t\tsearchField.addEventListener(\"ui5-open\", this.onSearchOpenBound);\n\t\tsearchField.addEventListener(\"ui5-close\", this.onSearchCloseBound);\n\t\tsearchField.addEventListener(\"ui5-search\", this.onSearchBound);\n\t}\n\n\tunsubscribe(searchField: HTMLElement | null = this.getSearchField()) {\n\t\tif (!searchField) {\n\t\t\treturn;\n\t\t}\n\t\tsearchField.removeEventListener(\"ui5-open\", this.onSearchOpenBound);\n\t\tsearchField.removeEventListener(\"ui5-close\", this.onSearchCloseBound);\n\t\tsearchField.removeEventListener(\"ui5-search\", this.onSearchBound);\n\t}\n\n\t/**\n\t * Auto-collapse/restore search field based on available space.\n\t * Delegates decision logic to SearchController.\n\t */\n\tautoManageSearchState(hiddenItems: number, availableSpace: number) {\n\t\tif (!this.hasSearchField) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Get search field min width from CSS variable\n\t\tconst searchFieldWidth = this.getSearchFieldWidth();\n\n\t\tconst searchHasFocus = document.activeElement === this.getSearchField();\n\t\tconst searchHasValue = !!this.getSearchField()?.value;\n\n\t\t// On initial load, allow search to collapse even if it would trigger full-screen mode.\n\t\t// This prevents search from showing in full-screen when page loads on small screens.\n\t\t// After initial render, prevent collapse in full-screen mode during resize.\n\t\tconst inFullScreen = !this.initialRender && this.shouldShowFullScreen();\n\t\tconst preventCollapse = searchHasFocus || searchHasValue || inFullScreen;\n\n\t\tif (hiddenItems > 0 && !preventCollapse) {\n\t\t\tthis.setSearchState(false);\n\t\t} else if (availableSpace + this.getSearchButtonSize() > searchFieldWidth) {\n\t\t\tthis.setSearchState(true);\n\t\t}\n\n\t\tthis.initialRender = false;\n\t}\n\n\t/**\n\t * Applies the show-search-field state to the search field.\n\t */\n\tsyncShowSearchFieldState() {\n\t\tconst search = this.getSearchField();\n\t\tif (!search) {\n\t\t\treturn;\n\t\t}\n\t\tif (isPhone()) {\n\t\t\t// On initial render, don't auto-open the search dialog on phones\n\t\t\t// to prevent the full-screen search from showing when page loads\n\t\t\tif (this.initialRender) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsearch.open = this.getSearchState();\n\t\t} else {\n\t\t\tsearch.collapsed = !this.getSearchState();\n\t\t}\n\t}\n\n\t/**\n\t * Determines if full-screen search should be shown.\n\t * Full-screen search activates when overflow happens AND search is visible.\n\t */\n\tshouldShowFullScreen(): boolean {\n\t\treturn this.getOverflowed() && this.getSearchState();\n\t}\n\n\tprivate onSearchOpen(e: Event) {\n\t\tif (e.target !== this.getSearchField()) {\n\t\t\tthis.unsubscribe(e.target as HTMLElement);\n\t\t\treturn;\n\t\t}\n\t\tif (isPhone()) {\n\t\t\tthis.setSearchState(true);\n\t\t}\n\t}\n\n\tprivate onSearchClose(e: Event) {\n\t\tif (e.target !== this.getSearchField()) {\n\t\t\tthis.unsubscribe(e.target as HTMLElement);\n\t\t\treturn;\n\t\t}\n\t\tif (isPhone()) {\n\t\t\tthis.setSearchState(false);\n\t\t}\n\t}\n\n\tprivate onSearch(e: Event) {\n\t\tif (e.target !== this.getSearchField()) {\n\t\t\tthis.unsubscribe(e.target as HTMLElement);\n\t\t\treturn;\n\t\t}\n\n\t\t// On mobile or if has value, don't toggle\n\t\tif (isPhone() || (this.getSearchField()?.value && this.getSearchState())) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.setSearchState(!this.getSearchState());\n\t}\n\n\t/**\n\t * Gets the minimum width needed for search field from CSS variable.\n\t */\n\tprivate getSearchFieldWidth(): number {\n\t\tconst width = this.getCSSVariable(ShellBarSearch.CSS_VARIABLE);\n\t\tif (!width) {\n\t\t\treturn ShellBarSearch.FALLBACK_WIDTH;\n\t\t}\n\t\t// Convert rem to px\n\t\tif (width.endsWith(\"rem\")) {\n\t\t\tconst fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);\n\t\t\treturn parseFloat(width) * fontSize;\n\t\t}\n\t\treturn parseFloat(width);\n\t}\n\n\tget hasSearchField() {\n\t\treturn !!this.getSearchField();\n\t}\n\n\t/**\n\t * Gets the size of the search button.\n\t * If the search field is visible, the size is 0.\n\t * Otherwise, it is the width of the search field (just a button in collapsed state).\n\t */\n\tprivate getSearchButtonSize(): number {\n\t\treturn this.getSearchState() ? 0 : this.getSearchField()?.getBoundingClientRect().width || 0;\n\t}\n}\n\nexport default ShellBarSearch;\nexport type {\n\tShellBarSearchConstructorParams,\n};\n"]}

package/dist/shellbar/ShellBarSearchLegacy.d.ts

@@ -0,0 +1,65 @@
+import type { IShellBarSearchController } from "./IShellBarSearchController.js";
+interface ShellBarSearchLegacyConstructorParams {
+    getOverflowed: () => boolean;
+    getSearchState: () => boolean;
+    setSearchState: (expanded: boolean) => void;
+    getSearchField: () => HTMLElement | null;
+    getCSSVariable: (variable: string) => string;
+    getDisableSearchCollapse: () => boolean;
+}
+/**
+ * Search controller for legacy search fields (ui5-input, custom div).
+ * Handles search fields that don't have collapsed/open properties.
+ * Supports disableSearchCollapse for preventing auto-collapse.
+ */
+declare class ShellBarSearchLegacy implements IShellBarSearchController {
+    static CSS_VARIABLE: string;
+    static FALLBACK_WIDTH: number;
+    private getOverflowed;
+    private getSearchField;
+    private getSearchState;
+    private setSearchState;
+    private getCSSVariable;
+    private getDisableSearchCollapse;
+    private initialRender;
+    constructor({ getOverflowed, setSearchState, getSearchField, getSearchState, getCSSVariable, getDisableSearchCollapse, }: ShellBarSearchLegacyConstructorParams);
+    /**
+     * No-op for legacy search - legacy fields don't emit ui5-open/close/search events.
+     */
+    subscribe(): void;
+    /**
+     * No-op for legacy search - no event listeners to clean up.
+     */
+    unsubscribe(): void;
+    /**
+     * Auto-collapse/restore search field based on available space.
+     * Respects disableSearchCollapse flag, focus state, and field value.
+     */
+    autoManageSearchState(hiddenItems: number, availableSpace: number): void;
+    /**
+     * No-op for legacy search - legacy fields don't have collapsed/open properties.
+     */
+    syncShowSearchFieldState(): void;
+    /**
+     * Determines if full-screen search should be shown.
+     * Full-screen search activates when overflow happens AND search is visible.
+     */
+    shouldShowFullScreen(): boolean;
+    /**
+     * Get value from various field types.
+     * Supports ui5-input (value property) and custom div (nested input element).
+     */
+    private hasValue;
+    /**
+     * Get minimum width needed for search field from CSS variable.
+     */
+    private getSearchFieldWidth;
+    private get hasSearchField();
+    /**
+     * Get search button size for overflow calculation.
+     * Returns 0 if search is expanded, otherwise returns button width.
+     */
+    private getSearchButtonSize;
+}
+export default ShellBarSearchLegacy;
+export type { ShellBarSearchLegacyConstructorParams, };

package/dist/shellbar/ShellBarSearchLegacy.js

@@ -0,0 +1,116 @@
+/**
+ * Search controller for legacy search fields (ui5-input, custom div).
+ * Handles search fields that don't have collapsed/open properties.
+ * Supports disableSearchCollapse for preventing auto-collapse.
+ */
+class ShellBarSearchLegacy {
+    constructor({ getOverflowed, setSearchState, getSearchField, getSearchState, getCSSVariable, getDisableSearchCollapse, }) {
+        this.initialRender = true;
+        this.getOverflowed = getOverflowed;
+        this.getCSSVariable = getCSSVariable;
+        this.getSearchField = getSearchField;
+        this.getSearchState = getSearchState;
+        this.setSearchState = setSearchState;
+        this.getDisableSearchCollapse = getDisableSearchCollapse;
+    }
+    /**
+     * No-op for legacy search - legacy fields don't emit ui5-open/close/search events.
+     */
+    subscribe() {
+        // No events to subscribe to for legacy search fields
+    }
+    /**
+     * No-op for legacy search - no event listeners to clean up.
+     */
+    unsubscribe() {
+        // No events to unsubscribe from
+    }
+    /**
+     * Auto-collapse/restore search field based on available space.
+     * Respects disableSearchCollapse flag, focus state, and field value.
+     */
+    autoManageSearchState(hiddenItems, availableSpace) {
+        if (!this.hasSearchField) {
+            return;
+        }
+        // Check if auto-collapse is disabled
+        if (this.getDisableSearchCollapse()) {
+            return;
+        }
+        const searchFieldWidth = this.getSearchFieldWidth();
+        // Check focus and value to prevent collapse
+        const searchField = this.getSearchField();
+        const searchHasFocus = searchField?.contains(document.activeElement) || false;
+        const searchHasValue = this.hasValue(searchField);
+        // On initial load, allow search to collapse even if it would trigger full-screen mode.
+        // This prevents search from showing in full-screen when page loads on small screens.
+        // After initial render, prevent collapse in full-screen mode during resize.
+        const inFullScreen = !this.initialRender && this.shouldShowFullScreen();
+        const preventCollapse = searchHasFocus || searchHasValue || inFullScreen;
+        if (hiddenItems > 0 && !preventCollapse) {
+            this.setSearchState(false);
+        }
+        else if (availableSpace + this.getSearchButtonSize() > searchFieldWidth) {
+            this.setSearchState(true);
+        }
+        this.initialRender = false;
+    }
+    /**
+     * No-op for legacy search - legacy fields don't have collapsed/open properties.
+     */
+    syncShowSearchFieldState() {
+        // Legacy search fields don't have collapsed/open properties to sync
+    }
+    /**
+     * Determines if full-screen search should be shown.
+     * Full-screen search activates when overflow happens AND search is visible.
+     */
+    shouldShowFullScreen() {
+        return this.getOverflowed() && this.getSearchState();
+    }
+    /**
+     * Get value from various field types.
+     * Supports ui5-input (value property) and custom div (nested input element).
+     */
+    hasValue(searchField) {
+        if (!searchField) {
+            return false;
+        }
+        // ui5-input or similar components with value property
+        if ("value" in searchField) {
+            return !!searchField.value;
+        }
+        // Custom div - find input inside
+        const input = searchField.querySelector("input");
+        return input ? !!input.value : false;
+    }
+    /**
+     * Get minimum width needed for search field from CSS variable.
+     */
+    getSearchFieldWidth() {
+        const width = this.getCSSVariable(ShellBarSearchLegacy.CSS_VARIABLE);
+        if (!width) {
+            return ShellBarSearchLegacy.FALLBACK_WIDTH;
+        }
+        // Convert rem to px
+        if (width.endsWith("rem")) {
+            const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+            return parseFloat(width) * fontSize;
+        }
+        return parseFloat(width);
+    }
+    get hasSearchField() {
+        return !!this.getSearchField();
+    }
+    /**
+     * Get search button size for overflow calculation.
+     * Returns 0 if search is expanded, otherwise returns button width.
+     */
+    getSearchButtonSize() {
+        return this.getSearchState() ? 0 : this.getSearchField()?.getBoundingClientRect().width || 0;
+    }
+}
+ShellBarSearchLegacy.CSS_VARIABLE = "--_ui5_shellbar_search_field_width";
+ShellBarSearchLegacy.FALLBACK_WIDTH = 400;
+export default ShellBarSearchLegacy;
+//# sourceMappingURL=ShellBarSearchLegacy.js.map

package/dist/shellbar/ShellBarSearchLegacy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShellBarSearchLegacy.js","sourceRoot":"","sources":["../../src/shellbar/ShellBarSearchLegacy.ts"],"names":[],"mappings":"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","sourcesContent":["import type { IShellBarSearchController } from \"./IShellBarSearchController.js\";\n\ninterface ShellBarSearchLegacyConstructorParams {\n\tgetOverflowed: () => boolean;\n\tgetSearchState: () => boolean;\n\tsetSearchState: (expanded: boolean) => void;\n\tgetSearchField: () => HTMLElement | null;\n\tgetCSSVariable: (variable: string) => string;\n\tgetDisableSearchCollapse: () => boolean;\n}\n\n/**\n * Search controller for legacy search fields (ui5-input, custom div).\n * Handles search fields that don't have collapsed/open properties.\n * Supports disableSearchCollapse for preventing auto-collapse.\n */\nclass ShellBarSearchLegacy implements IShellBarSearchController {\n\tstatic CSS_VARIABLE = \"--_ui5_shellbar_search_field_width\";\n\tstatic FALLBACK_WIDTH = 400;\n\n\tprivate getOverflowed: () => boolean;\n\tprivate getSearchField: () => HTMLElement | null;\n\tprivate getSearchState: () => boolean;\n\tprivate setSearchState: (expanded: boolean) => void;\n\tprivate getCSSVariable: (variable: string) => string;\n\tprivate getDisableSearchCollapse: () => boolean;\n\tprivate initialRender = true;\n\n\tconstructor({\n\t\tgetOverflowed,\n\t\tsetSearchState,\n\t\tgetSearchField,\n\t\tgetSearchState,\n\t\tgetCSSVariable,\n\t\tgetDisableSearchCollapse,\n\t}: ShellBarSearchLegacyConstructorParams) {\n\t\tthis.getOverflowed = getOverflowed;\n\t\tthis.getCSSVariable = getCSSVariable;\n\t\tthis.getSearchField = getSearchField;\n\t\tthis.getSearchState = getSearchState;\n\t\tthis.setSearchState = setSearchState;\n\t\tthis.getDisableSearchCollapse = getDisableSearchCollapse;\n\t}\n\n\t/**\n\t * No-op for legacy search - legacy fields don't emit ui5-open/close/search events.\n\t */\n\tsubscribe(): void {\n\t\t// No events to subscribe to for legacy search fields\n\t}\n\n\t/**\n\t * No-op for legacy search - no event listeners to clean up.\n\t */\n\tunsubscribe(): void {\n\t\t// No events to unsubscribe from\n\t}\n\n\t/**\n\t * Auto-collapse/restore search field based on available space.\n\t * Respects disableSearchCollapse flag, focus state, and field value.\n\t */\n\tautoManageSearchState(hiddenItems: number, availableSpace: number): void {\n\t\tif (!this.hasSearchField) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if auto-collapse is disabled\n\t\tif (this.getDisableSearchCollapse()) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst searchFieldWidth = this.getSearchFieldWidth();\n\n\t\t// Check focus and value to prevent collapse\n\t\tconst searchField = this.getSearchField();\n\t\tconst searchHasFocus = searchField?.contains(document.activeElement) || false;\n\t\tconst searchHasValue = this.hasValue(searchField);\n\n\t\t// On initial load, allow search to collapse even if it would trigger full-screen mode.\n\t\t// This prevents search from showing in full-screen when page loads on small screens.\n\t\t// After initial render, prevent collapse in full-screen mode during resize.\n\t\tconst inFullScreen = !this.initialRender && this.shouldShowFullScreen();\n\t\tconst preventCollapse = searchHasFocus || searchHasValue || inFullScreen;\n\n\t\tif (hiddenItems > 0 && !preventCollapse) {\n\t\t\tthis.setSearchState(false);\n\t\t} else if (availableSpace + this.getSearchButtonSize() > searchFieldWidth) {\n\t\t\tthis.setSearchState(true);\n\t\t}\n\n\t\tthis.initialRender = false;\n\t}\n\n\t/**\n\t * No-op for legacy search - legacy fields don't have collapsed/open properties.\n\t */\n\tsyncShowSearchFieldState(): void {\n\t\t// Legacy search fields don't have collapsed/open properties to sync\n\t}\n\n\t/**\n\t * Determines if full-screen search should be shown.\n\t * Full-screen search activates when overflow happens AND search is visible.\n\t */\n\tshouldShowFullScreen(): boolean {\n\t\treturn this.getOverflowed() && this.getSearchState();\n\t}\n\n\t/**\n\t * Get value from various field types.\n\t * Supports ui5-input (value property) and custom div (nested input element).\n\t */\n\tprivate hasValue(searchField: HTMLElement | null): boolean {\n\t\tif (!searchField) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// ui5-input or similar components with value property\n\t\tif (\"value\" in searchField) {\n\t\t\treturn !!(searchField as any).value;\n\t\t}\n\n\t\t// Custom div - find input inside\n\t\tconst input = searchField.querySelector(\"input\");\n\t\treturn input ? !!input.value : false;\n\t}\n\n\t/**\n\t * Get minimum width needed for search field from CSS variable.\n\t */\n\tprivate getSearchFieldWidth(): number {\n\t\tconst width = this.getCSSVariable(ShellBarSearchLegacy.CSS_VARIABLE);\n\t\tif (!width) {\n\t\t\treturn ShellBarSearchLegacy.FALLBACK_WIDTH;\n\t\t}\n\n\t\t// Convert rem to px\n\t\tif (width.endsWith(\"rem\")) {\n\t\t\tconst fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);\n\t\t\treturn parseFloat(width) * fontSize;\n\t\t}\n\n\t\treturn parseFloat(width);\n\t}\n\n\tprivate get hasSearchField(): boolean {\n\t\treturn !!this.getSearchField();\n\t}\n\n\t/**\n\t * Get search button size for overflow calculation.\n\t * Returns 0 if search is expanded, otherwise returns button width.\n\t */\n\tprivate getSearchButtonSize(): number {\n\t\treturn this.getSearchState() ? 0 : this.getSearchField()?.getBoundingClientRect().width || 0;\n\t}\n}\n\nexport default ShellBarSearchLegacy;\nexport type {\n\tShellBarSearchLegacyConstructorParams,\n};\n"]}

package/dist/shellbar/templates/ShellBarLegacyTemplate.d.ts

@@ -0,0 +1,20 @@
+import type ShellBar from "../../ShellBar.js";
+declare function ShellBarLegacyBrandingArea(this: ShellBar): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element | null;
+declare function ShellBarLegacyTitleArea(this: ShellBar): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element | null;
+/**
+ * Renders interactive menu button for non-S breakpoints.
+ * Shows primaryTitle with arrow, opens menu popover.
+ */
+declare function ShellBarInteractiveMenuButton(this: ShellBar): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element | null;
+/**
+ * Renders single logo on S breakpoint when no menu items.
+ * Used on S breakpoint when no menu items and no branding slot.
+ */
+declare function ShellBarSingleLogo(this: ShellBar): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element | null;
+declare function ShellBarLegacySecondaryTitle(this: ShellBar): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element | null;
+/**
+ * Renders the menu popover.
+ * Contains the list of menu items.
+ */
+declare function ShellBarMenuPopover(this: ShellBar): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element | null;
+export { ShellBarSingleLogo, ShellBarMenuPopover, ShellBarLegacyTitleArea, ShellBarLegacyBrandingArea, ShellBarLegacySecondaryTitle, ShellBarInteractiveMenuButton, };