@ui5/webcomponents-fiori 0.0.0-a3eca7ade → 0.0.0-a8a75c830

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":"AAWA;;;;GAIG;AACH,MAAM,oBAAoB;IAYzB,YAAY,EACX,aAAa,EACb,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,wBAAwB,GACe;QAThC,kBAAa,GAAG,IAAI,CAAC;QAU5B,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;QACnC,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC;QACrC,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC;QACrC,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC;QACrC,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC;QACrC,IAAI,CAAC,wBAAwB,GAAG,wBAAwB,CAAC;IAC1D,CAAC;IAED;;OAEG;IACH,SAAS;QACR,qDAAqD;IACtD,CAAC;IAED;;OAEG;IACH,WAAW;QACV,gCAAgC;IACjC,CAAC;IAED;;;OAGG;IACH,qBAAqB,CAAC,WAAmB,EAAE,cAAsB;QAChE,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;YAC1B,OAAO;QACR,CAAC;QAED,qCAAqC;QACrC,IAAI,IAAI,CAAC,wBAAwB,EAAE,EAAE,CAAC;YACrC,OAAO;QACR,CAAC;QAED,MAAM,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAEpD,4CAA4C;QAC5C,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAC1C,MAAM,cAAc,GAAG,WAAW,EAAE,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC;QAC9E,MAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;QAElD,uFAAuF;QACvF,qFAAqF;QACrF,4EAA4E;QAC5E,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,oBAAoB,EAAE,CAAC;QACxE,MAAM,eAAe,GAAG,cAAc,IAAI,cAAc,IAAI,YAAY,CAAC;QAEzE,IAAI,WAAW,GAAG,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;YACzC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;QAC5B,CAAC;aAAM,IAAI,cAAc,GAAG,IAAI,CAAC,mBAAmB,EAAE,GAAG,gBAAgB,EAAE,CAAC;YAC3E,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QAC3B,CAAC;QAED,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC5B,CAAC;IAED;;OAEG;IACH,wBAAwB;QACvB,oEAAoE;IACrE,CAAC;IAED;;;OAGG;IACH,oBAAoB;QACnB,OAAO,IAAI,CAAC,aAAa,EAAE,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;IACtD,CAAC;IAED;;;OAGG;IACK,QAAQ,CAAC,WAA+B;QAC/C,IAAI,CAAC,WAAW,EAAE,CAAC;YAClB,OAAO,KAAK,CAAC;QACd,CAAC;QAED,sDAAsD;QACtD,IAAI,OAAO,IAAI,WAAW,EAAE,CAAC;YAC5B,OAAO,CAAC,CAAE,WAAmB,CAAC,KAAK,CAAC;QACrC,CAAC;QAED,iCAAiC;QACjC,MAAM,KAAK,GAAG,WAAW,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QACjD,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IACtC,CAAC;IAED;;OAEG;IACK,mBAAmB;QAC1B,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,oBAAoB,CAAC,YAAY,CAAC,CAAC;QACrE,IAAI,CAAC,KAAK,EAAE,CAAC;YACZ,OAAO,oBAAoB,CAAC,cAAc,CAAC;QAC5C,CAAC;QAED,oBAAoB;QACpB,IAAI,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;YAC3B,MAAM,QAAQ,GAAG,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,QAAQ,CAAC,CAAC;YACjF,OAAO,UAAU,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC;QACrC,CAAC;QAED,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;IAED,IAAY,cAAc;QACzB,OAAO,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;IAChC,CAAC;IAED;;;OAGG;IACK,mBAAmB;QAC1B,OAAO,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,EAAE,qBAAqB,EAAE,CAAC,KAAK,IAAI,CAAC,CAAC;IAC9F,CAAC;;AA3IM,iCAAY,GAAG,oCAAoC,AAAvC,CAAwC;AACpD,mCAAc,GAAG,GAAG,AAAN,CAAO;AA6I7B,eAAe,oBAAoB,CAAC","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, };

package/dist/shellbar/templates/ShellBarLegacyTemplate.js

@@ -0,0 +1,71 @@
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import List from "@ui5/webcomponents/dist/List.js";
+import Popover from "@ui5/webcomponents/dist/Popover.js";
+import slimArrowDown from "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+function ShellBarLegacyBrandingArea() {
+    const legacy = this.legacyAdaptor;
+    if (!legacy) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [legacy.hasMenuItems && ShellBarInteractiveMenuButton.call(this), legacy.hasMenuItems && ShellBarLegacySecondaryTitle.call(this), !legacy.hasMenuItems && ShellBarLegacyTitleArea.call(this), ShellBarMenuPopover.call(this)] }));
+}
+function ShellBarLegacyTitleArea() {
+    const legacy = this.legacyAdaptor;
+    if (!legacy) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [!!(legacy.isSBreakPoint && legacy.hasLogo) && ShellBarSingleLogo.call(this), !legacy.isSBreakPoint && (legacy.hasLogo || legacy.primaryTitle) && (_jsxs(_Fragment, { children: [ShellBarCombinedLogo.call(this), legacy.hasSecondaryTitle && legacy.hasPrimaryTitle && ShellBarLegacySecondaryTitle.call(this)] }))] }));
+}
+/**
+ * Renders interactive menu button for non-S breakpoints.
+ * Shows primaryTitle with arrow, opens menu popover.
+ */
+function ShellBarInteractiveMenuButton() {
+    const legacy = this.legacyAdaptor;
+    if (!legacy) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [!legacy.showLogoInMenuButton && legacy.hasLogo && ShellBarSingleLogo.call(this), legacy.showTitleInMenuButton && _jsx("h1", { class: "ui5-hidden-text", children: legacy.primaryTitle }), legacy.showMenuButton && (_jsxs("button", { class: {
+                    "ui5-shellbar-menu-button": true,
+                    "ui5-shellbar-menu-button--interactive": legacy.hasMenuItems,
+                }, onClick: legacy.handleMenuButtonClickBound, "aria-haspopup": "menu", "aria-expanded": legacy.menuPopoverExpanded, "aria-label": legacy.brandingText, "data-ui5-stable": "menu", tabIndex: 0, children: [legacy.showLogoInMenuButton && (_jsx("span", { class: "ui5-shellbar-logo", "aria-label": legacy.logoAriaLabel, title: legacy.logoAriaLabel, children: _jsx("slot", { name: "logo" }) })), legacy.showTitleInMenuButton && (_jsx("div", { class: "ui5-shellbar-menu-button-title", children: legacy.primaryTitle })), _jsx(Icon, { class: "ui5-shellbar-menu-button-arrow", name: slimArrowDown })] }))] }));
+}
+/**
+ * Renders single logo on S breakpoint when no menu items.
+ * Used on S breakpoint when no menu items and no branding slot.
+ */
+function ShellBarSingleLogo() {
+    const legacy = this.legacyAdaptor;
+    if (!legacy) {
+        return null;
+    }
+    return (_jsx("span", { role: legacy.logoRole, class: "ui5-shellbar-logo ui5-shellbar-gap-end", "aria-label": legacy.logoAriaLabel, title: legacy.logoAriaLabel, onClick: legacy.handleLogoClickBound, onKeyDown: legacy.handleLogoKeydownBound, onKeyUp: legacy.handleLogoKeyupBound, tabIndex: 0, "data-ui5-stable": "logo", children: _jsx("slot", { name: "logo" }) }));
+}
+function ShellBarCombinedLogo() {
+    const legacy = this.legacyAdaptor;
+    if (!legacy) {
+        return null;
+    }
+    return (_jsxs("div", { role: legacy.logoRole, class: "ui5-shellbar-logo-area", onClick: legacy.handleLogoClickBound, tabIndex: 0, onKeyDown: legacy.handleLogoKeydownBound, onKeyUp: legacy.handleLogoKeyupBound, "aria-label": legacy.logoAriaLabel, children: [legacy.hasLogo && (_jsx("span", { class: "ui5-shellbar-logo", title: legacy.logoAriaLabel, "data-ui5-stable": "logo", children: _jsx("slot", { name: "logo" }) })), _jsx("div", { class: "ui5-shellbar-headings", children: legacy.primaryTitle && (_jsx("h1", { class: "ui5-shellbar-title", children: _jsx("bdi", { children: legacy.primaryTitle }) })) })] }));
+}
+function ShellBarLegacySecondaryTitle() {
+    const legacy = this.legacyAdaptor;
+    if (!legacy || !legacy.showSecondaryTitle) {
+        return null;
+    }
+    return (_jsx("div", { style: { display: "block" }, class: "ui5-shellbar-secondary-title ui5-shellbar-gap-start ui5-shellbar-gap-end", "data-ui5-stable": "secondary-title", children: this.secondaryTitle }));
+}
+/**
+ * Renders the menu popover.
+ * Contains the list of menu items.
+ */
+function ShellBarMenuPopover() {
+    const legacy = this.legacyAdaptor;
+    if (!legacy || !legacy.hasMenuItems) {
+        return null;
+    }
+    return (_jsx(Popover, { class: "ui5-shellbar-menu-popover", hideArrow: true, placement: "Bottom", preventInitialFocus: true, onBeforeOpen: legacy.handleMenuPopoverBeforeOpenBound, onClose: legacy.handleMenuPopoverAfterCloseBound, children: _jsx(List, { separators: "None", selectionMode: "Single", onItemClick: legacy.handleMenuItemClickBound, children: _jsx("slot", { name: "menuItems" }) }) }));
+}
+export { ShellBarSingleLogo, ShellBarMenuPopover, ShellBarLegacyTitleArea, ShellBarLegacyBrandingArea, ShellBarLegacySecondaryTitle, ShellBarInteractiveMenuButton, };
+//# sourceMappingURL=ShellBarLegacyTemplate.js.map

package/dist/shellbar/templates/ShellBarLegacyTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShellBarLegacyTemplate.js","sourceRoot":"","sources":["../../../src/shellbar/templates/ShellBarLegacyTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport List from \"@ui5/webcomponents/dist/List.js\";\nimport Popover from \"@ui5/webcomponents/dist/Popover.js\";\nimport slimArrowDown from \"@ui5/webcomponents-icons/dist/slim-arrow-down.js\";\nimport type ShellBar from \"../../ShellBar.js\";\n\nfunction ShellBarLegacyBrandingArea(this: ShellBar) {\n\tconst legacy = this.legacyAdaptor;\n\tif (!legacy) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{legacy.hasMenuItems && ShellBarInteractiveMenuButton.call(this)}\n\t\t\t{legacy.hasMenuItems && ShellBarLegacySecondaryTitle.call(this)}\n\t\t\t{!legacy.hasMenuItems && ShellBarLegacyTitleArea.call(this)}\n\n\t\t\t{/* Menu Popover (legacy) */}\n\t\t\t{ShellBarMenuPopover.call(this)}\n\t\t</>\n\t);\n}\n\nfunction ShellBarLegacyTitleArea(this: ShellBar) {\n\tconst legacy = this.legacyAdaptor;\n\tif (!legacy) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{!!(legacy.isSBreakPoint && legacy.hasLogo) && ShellBarSingleLogo.call(this)}\n\t\t\t{!legacy.isSBreakPoint && (legacy.hasLogo || legacy.primaryTitle) && (\n\t\t\t\t<>\n\t\t\t\t\t{ShellBarCombinedLogo.call(this)}\n\t\t\t\t\t{legacy.hasSecondaryTitle && legacy.hasPrimaryTitle && ShellBarLegacySecondaryTitle.call(this)}\n\t\t\t\t</>\n\t\t\t)}\n\t\t</>\n\t);\n}\n\n/**\n * Renders interactive menu button for non-S breakpoints.\n * Shows primaryTitle with arrow, opens menu popover.\n */\nfunction ShellBarInteractiveMenuButton(this: ShellBar) {\n\tconst legacy = this.legacyAdaptor;\n\tif (!legacy) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{!legacy.showLogoInMenuButton && legacy.hasLogo && ShellBarSingleLogo.call(this)}\n\t\t\t{legacy.showTitleInMenuButton && <h1 class=\"ui5-hidden-text\">{legacy.primaryTitle}</h1>}\n\t\t\t{legacy.showMenuButton && (\n\t\t\t\t<button\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t\"ui5-shellbar-menu-button\": true,\n\t\t\t\t\t\t\"ui5-shellbar-menu-button--interactive\": legacy.hasMenuItems,\n\t\t\t\t\t}}\n\t\t\t\t\tonClick={legacy.handleMenuButtonClickBound}\n\t\t\t\t\taria-haspopup=\"menu\"\n\t\t\t\t\taria-expanded={legacy.menuPopoverExpanded}\n\t\t\t\t\taria-label={legacy.brandingText}\n\t\t\t\t\tdata-ui5-stable=\"menu\"\n\t\t\t\t\ttabIndex={0}>\n\t\t\t\t\t{legacy.showLogoInMenuButton && (\n\t\t\t\t\t\t<span class=\"ui5-shellbar-logo\" aria-label={legacy.logoAriaLabel} title={legacy.logoAriaLabel}>\n\t\t\t\t\t\t\t<slot name=\"logo\"></slot>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t\t{legacy.showTitleInMenuButton && (\n\t\t\t\t\t\t<div class=\"ui5-shellbar-menu-button-title\">{legacy.primaryTitle}</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<Icon class=\"ui5-shellbar-menu-button-arrow\" name={slimArrowDown} />\n\t\t\t\t</button>\n\t\t\t)}\n\t\t</>\n\t);\n}\n\n/**\n * Renders single logo on S breakpoint when no menu items.\n * Used on S breakpoint when no menu items and no branding slot.\n */\nfunction ShellBarSingleLogo(this: ShellBar) {\n\tconst legacy = this.legacyAdaptor;\n\tif (!legacy) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<span\n\t\t\trole={legacy.logoRole}\n\t\t\tclass=\"ui5-shellbar-logo ui5-shellbar-gap-end\"\n\t\t\taria-label={legacy.logoAriaLabel}\n\t\t\ttitle={legacy.logoAriaLabel}\n\t\t\tonClick={legacy.handleLogoClickBound}\n\t\t\tonKeyDown={legacy.handleLogoKeydownBound}\n\t\t\tonKeyUp={legacy.handleLogoKeyupBound}\n\t\t\ttabIndex={0}\n\t\t\tdata-ui5-stable=\"logo\">\n\t\t\t<slot name=\"logo\"></slot>\n\t\t</span>\n\t);\n}\n\nfunction ShellBarCombinedLogo(this: ShellBar) {\n\tconst legacy = this.legacyAdaptor;\n\tif (!legacy) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\trole={legacy.logoRole}\n\t\t\tclass=\"ui5-shellbar-logo-area\"\n\t\t\tonClick={legacy.handleLogoClickBound}\n\t\t\ttabIndex={0}\n\t\t\tonKeyDown={legacy.handleLogoKeydownBound}\n\t\t\tonKeyUp={legacy.handleLogoKeyupBound}\n\t\t\taria-label={legacy.logoAriaLabel}>\n\t\t\t{legacy.hasLogo && (\n\t\t\t\t<span\n\t\t\t\t\tclass=\"ui5-shellbar-logo\"\n\t\t\t\t\ttitle={legacy.logoAriaLabel}\n\t\t\t\t\tdata-ui5-stable=\"logo\">\n\t\t\t\t\t<slot name=\"logo\"></slot>\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t<div class=\"ui5-shellbar-headings\">\n\t\t\t\t{legacy.primaryTitle && (\n\t\t\t\t\t<h1 class=\"ui5-shellbar-title\">\n\t\t\t\t\t\t<bdi>{legacy.primaryTitle}</bdi>\n\t\t\t\t\t</h1>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nfunction ShellBarLegacySecondaryTitle(this: ShellBar) {\n\tconst legacy = this.legacyAdaptor;\n\tif (!legacy || !legacy.showSecondaryTitle) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<div style={{ display: \"block\" }} class=\"ui5-shellbar-secondary-title ui5-shellbar-gap-start ui5-shellbar-gap-end\" data-ui5-stable=\"secondary-title\">\n\t\t\t{this.secondaryTitle}\n\t\t</div>\n\t);\n}\n\n/**\n * Renders the menu popover.\n * Contains the list of menu items.\n */\nfunction ShellBarMenuPopover(this: ShellBar) {\n\tconst legacy = this.legacyAdaptor;\n\tif (!legacy || !legacy.hasMenuItems) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Popover class=\"ui5-shellbar-menu-popover\"\n\t\t\thideArrow={true}\n\t\t\tplacement=\"Bottom\"\n\t\t\tpreventInitialFocus={true}\n\t\t\tonBeforeOpen={legacy.handleMenuPopoverBeforeOpenBound}\n\t\t\tonClose={legacy.handleMenuPopoverAfterCloseBound}\n\t\t>\n\t\t\t<List separators=\"None\" selectionMode=\"Single\" onItemClick={legacy.handleMenuItemClickBound}>\n\t\t\t\t<slot name=\"menuItems\"></slot>\n\t\t\t</List>\n\t\t</Popover>\n\t);\n}\n\nexport {\n\tShellBarSingleLogo,\n\tShellBarMenuPopover,\n\tShellBarLegacyTitleArea,\n\tShellBarLegacyBrandingArea,\n\tShellBarLegacySecondaryTitle,\n\tShellBarInteractiveMenuButton,\n};\n"]}

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

@@ -0,0 +1,5 @@
+import type ShellBar from "../../ShellBar.js";
+declare function ShellBarSearchField(this: ShellBar): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;
+declare function ShellBarSearchFieldFullWidth(this: ShellBar): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;
+declare function ShellBarSearchButton(this: ShellBar): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;
+export { ShellBarSearchField, ShellBarSearchButton, ShellBarSearchFieldFullWidth, };

package/dist/shellbar/templates/ShellBarSearchLegacyTemplate.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
+function ShellBarSearchField() {
+    return (
+    // .ui5-shellbar-search-field-area is used to measure the width of
+    // the search field. It must be present even if the search is in full-width mode.
+    _jsx("div", { class: "ui5-shellbar-search-field-area", children: this.showSearchField && !this.showFullWidthSearch && (_jsx("div", { class: "ui5-shellbar-search-field ui5-shellbar-gap-start", children: _jsx("slot", { name: "searchField" }) })) }));
+}
+function ShellBarSearchFieldFullWidth() {
+    return (_jsxs("div", { class: "ui5-shellbar-search-full-width-wrapper", children: [_jsx("div", { class: "ui5-shellbar-search-full-field", children: _jsx("slot", { name: "searchField" }) }), _jsx(Button, { class: "ui5-shellbar-cancel-button ui5-shellbar-gap-start", design: ButtonDesign.Transparent, onClick: this.handleCancelButtonClick, children: "Cancel" })] }));
+}
+function ShellBarSearchButton() {
+    const searchAction = this.getAction("search");
+    return (_jsx(_Fragment, { children: !this.hideSearchButton && (_jsx(Button, { "data-ui5-stable": searchAction?.stableDomRef, class: "ui5-shellbar-search-button ui5-shellbar-action-button ui5-shellbar-gap-start ui5-shellbar-search-toggle", icon: searchAction?.icon, design: "Transparent", onClick: this.handleSearchButtonClick, tooltip: this.actionsAccessibilityInfo.search.title, "aria-expanded": this.showSearchField, accessibilityAttributes: this.actionsAccessibilityInfo.search.accessibilityAttributes })) }));
+}
+export { ShellBarSearchField, ShellBarSearchButton, ShellBarSearchFieldFullWidth, };
+//# sourceMappingURL=ShellBarSearchLegacyTemplate.js.map

package/dist/shellbar/templates/ShellBarSearchLegacyTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShellBarSearchLegacyTemplate.js","sourceRoot":"","sources":["../../../src/shellbar/templates/ShellBarSearchLegacyTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,YAAY,MAAM,+CAA+C,CAAC;AAGzE,SAAS,mBAAmB;IAC3B,OAAO;IACN,kEAAkE;IAClE,iFAAiF;IACjF,cAAK,KAAK,EAAC,gCAAgC,YACzC,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,mBAAmB,IAAI,CACrD,cAAK,KAAK,EAAC,kDAAkD,YAC5D,eAAM,IAAI,EAAC,aAAa,GAAQ,GAC3B,CACN,GACI,CACN,CAAC;AACH,CAAC;AAED,SAAS,4BAA4B;IACpC,OAAO,CACN,eAAK,KAAK,EAAC,wCAAwC,aAClD,cAAK,KAAK,EAAC,gCAAgC,YAC1C,eAAM,IAAI,EAAC,aAAa,GAAQ,GAC3B,EACN,KAAC,MAAM,IACN,KAAK,EAAC,mDAAmD,EACzD,MAAM,EAAE,YAAY,CAAC,WAAW,EAChC,OAAO,EAAE,IAAI,CAAC,uBAAuB,uBAG7B,IACJ,CACN,CAAC;AACH,CAAC;AAED,SAAS,oBAAoB;IAC5B,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;IAC9C,OAAO,CACN,4BACE,CAAC,IAAI,CAAC,gBAAgB,IAAI,CAC1B,KAAC,MAAM,uBACW,YAAY,EAAE,YAAY,EAC3C,KAAK,EAAC,yGAAyG,EAC/G,IAAI,EAAE,YAAY,EAAE,IAAI,EACxB,MAAM,EAAC,aAAa,EACpB,OAAO,EAAE,IAAI,CAAC,uBAAuB,EACrC,OAAO,EAAE,IAAI,CAAC,wBAAwB,CAAC,MAAM,CAAC,KAAK,mBACpC,IAAI,CAAC,eAAe,EACnC,uBAAuB,EAAE,IAAI,CAAC,wBAAwB,CAAC,MAAM,CAAC,uBAAuB,GACpF,CACF,GACC,CAEH,CAAC;AACH,CAAC;AAED,OAAO,EACN,mBAAmB,EACnB,oBAAoB,EACpB,4BAA4B,GAC5B,CAAC","sourcesContent":["import Button from \"@ui5/webcomponents/dist/Button.js\";\nimport ButtonDesign from \"@ui5/webcomponents/dist/types/ButtonDesign.js\";\nimport type ShellBar from \"../../ShellBar.js\";\n\nfunction ShellBarSearchField(this: ShellBar) {\n\treturn (\n\t\t// .ui5-shellbar-search-field-area is used to measure the width of\n\t\t// the search field. It must be present even if the search is in full-width mode.\n\t\t<div class=\"ui5-shellbar-search-field-area\">\n\t\t\t{this.showSearchField && !this.showFullWidthSearch && (\n\t\t\t\t<div class=\"ui5-shellbar-search-field ui5-shellbar-gap-start\">\n\t\t\t\t\t<slot name=\"searchField\"></slot>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nfunction ShellBarSearchFieldFullWidth(this: ShellBar) {\n\treturn (\n\t\t<div class=\"ui5-shellbar-search-full-width-wrapper\">\n\t\t\t<div class=\"ui5-shellbar-search-full-field\">\n\t\t\t\t<slot name=\"searchField\"></slot>\n\t\t\t</div>\n\t\t\t<Button\n\t\t\t\tclass=\"ui5-shellbar-cancel-button ui5-shellbar-gap-start\"\n\t\t\t\tdesign={ButtonDesign.Transparent}\n\t\t\t\tonClick={this.handleCancelButtonClick}\n\t\t\t>\n\t\t\t\tCancel\n\t\t\t</Button>\n\t\t</div>\n\t);\n}\n\nfunction ShellBarSearchButton(this: ShellBar) {\n\tconst searchAction = this.getAction(\"search\");\n\treturn (\n\t\t<>\n\t\t\t{!this.hideSearchButton && (\n\t\t\t\t<Button\n\t\t\t\t\tdata-ui5-stable={searchAction?.stableDomRef}\n\t\t\t\t\tclass=\"ui5-shellbar-search-button ui5-shellbar-action-button ui5-shellbar-gap-start ui5-shellbar-search-toggle\"\n\t\t\t\t\ticon={searchAction?.icon}\n\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\tonClick={this.handleSearchButtonClick}\n\t\t\t\t\ttooltip={this.actionsAccessibilityInfo.search.title}\n\t\t\t\t\taria-expanded={this.showSearchField}\n\t\t\t\t\taccessibilityAttributes={this.actionsAccessibilityInfo.search.accessibilityAttributes}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\n\t);\n}\n\nexport {\n\tShellBarSearchField,\n\tShellBarSearchButton,\n\tShellBarSearchFieldFullWidth,\n};\n"]}

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

@@ -0,0 +1,4 @@
+import type ShellBar from "../../ShellBar.js";
+declare function ShellBarSearchField(this: ShellBar): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;
+declare function ShellBarSearchFieldFullWidth(this: ShellBar): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;
+export { ShellBarSearchField, ShellBarSearchFieldFullWidth, };

package/dist/shellbar/templates/ShellBarSearchTemplate.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
+function ShellBarSearchField() {
+    return (
+    // .ui5-shellbar-search-field-area is used to measure the width of
+    // the search field. It must be present even if the search is in full-width mode.
+    _jsx("div", { class: {
+            "ui5-shellbar-search-field-area ui5-shellbar-gap-start ui5-shellbar-search-toggle": true,
+            "ui5-shellbar-hidden": this.isHidden("search")
+        }, children: !this.showFullWidthSearch && (_jsx("slot", { name: "searchField" })) }));
+}
+function ShellBarSearchFieldFullWidth() {
+    return (_jsxs("div", { class: "ui5-shellbar-search-full-width-wrapper", children: [_jsx("div", { class: "ui5-shellbar-search-full-field", children: _jsx("slot", { name: "searchField" }) }), _jsx(Button, { class: "ui5-shellbar-cancel-button ui5-shellbar-gap-start", design: ButtonDesign.Transparent, onClick: this.handleCancelButtonClick, children: "Cancel" })] }));
+}
+export { ShellBarSearchField, ShellBarSearchFieldFullWidth, };
+//# sourceMappingURL=ShellBarSearchTemplate.js.map

package/dist/shellbar/templates/ShellBarSearchTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShellBarSearchTemplate.js","sourceRoot":"","sources":["../../../src/shellbar/templates/ShellBarSearchTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,YAAY,MAAM,+CAA+C,CAAC;AAGzE,SAAS,mBAAmB;IAC3B,OAAO;IACN,kEAAkE;IAClE,iFAAiF;IACjF,cAAK,KAAK,EAAE;YACX,kFAAkF,EAAE,IAAI;YACxF,qBAAqB,EAAE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC;SAC9C,YACC,CAAC,IAAI,CAAC,mBAAmB,IAAI,CAC7B,eAAM,IAAI,EAAC,aAAa,GAAQ,CAChC,GACI,CACN,CAAC;AACH,CAAC;AAED,SAAS,4BAA4B;IACpC,OAAO,CACN,eAAK,KAAK,EAAC,wCAAwC,aAClD,cAAK,KAAK,EAAC,gCAAgC,YAC1C,eAAM,IAAI,EAAC,aAAa,GAAQ,GAC3B,EACN,KAAC,MAAM,IACN,KAAK,EAAC,mDAAmD,EACzD,MAAM,EAAE,YAAY,CAAC,WAAW,EAChC,OAAO,EAAE,IAAI,CAAC,uBAAuB,uBAG7B,IACJ,CACN,CAAC;AACH,CAAC;AAED,OAAO,EACN,mBAAmB,EACnB,4BAA4B,GAC5B,CAAC","sourcesContent":["import Button from \"@ui5/webcomponents/dist/Button.js\";\nimport ButtonDesign from \"@ui5/webcomponents/dist/types/ButtonDesign.js\";\nimport type ShellBar from \"../../ShellBar.js\";\n\nfunction ShellBarSearchField(this: ShellBar) {\n\treturn (\n\t\t// .ui5-shellbar-search-field-area is used to measure the width of\n\t\t// the search field. It must be present even if the search is in full-width mode.\n\t\t<div class={{\n\t\t\t\"ui5-shellbar-search-field-area ui5-shellbar-gap-start ui5-shellbar-search-toggle\": true,\n\t\t\t\"ui5-shellbar-hidden\": this.isHidden(\"search\")\n\t\t}}>\n\t\t\t{!this.showFullWidthSearch && (\n\t\t\t\t<slot name=\"searchField\"></slot>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nfunction ShellBarSearchFieldFullWidth(this: ShellBar) {\n\treturn (\n\t\t<div class=\"ui5-shellbar-search-full-width-wrapper\">\n\t\t\t<div class=\"ui5-shellbar-search-full-field\">\n\t\t\t\t<slot name=\"searchField\"></slot>\n\t\t\t</div>\n\t\t\t<Button\n\t\t\t\tclass=\"ui5-shellbar-cancel-button ui5-shellbar-gap-start\"\n\t\t\t\tdesign={ButtonDesign.Transparent}\n\t\t\t\tonClick={this.handleCancelButtonClick}\n\t\t\t>\n\t\t\t\tCancel\n\t\t\t</Button>\n\t\t</div>\n\t);\n}\n\nexport {\n\tShellBarSearchField,\n\tShellBarSearchFieldFullWidth,\n};\n"]}

package/dist/ssr-zxing-shim.d.ts

@@ -0,0 +1,2 @@
+declare const ZXing: {};
+export default ZXing;

package/dist/ssr-zxing-shim.js

@@ -0,0 +1,3 @@
+const ZXing = {};
+export default ZXing;
+//# sourceMappingURL=ssr-zxing-shim.js.map

package/dist/ssr-zxing-shim.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ssr-zxing-shim.js","sourceRoot":"","sources":["../src/ssr-zxing-shim.ts"],"names":[],"mappings":"AAAA,MAAM,KAAK,GAAG,EAAE,CAAC;AACjB,eAAe,KAAK,CAAC","sourcesContent":["const ZXing = {};\nexport default ZXing;\n"]}

package/dist/ssr-zxing.d.ts

@@ -0,0 +1,2 @@
+import * as ZXing from "@zxing/library/umd/index.min.js";
+export default ZXing;

package/dist/ssr-zxing.js

@@ -0,0 +1,3 @@
+import * as ZXing from "@zxing/library/umd/index.min.js";
+export default ZXing;
+//# sourceMappingURL=ssr-zxing.js.map

package/dist/ssr-zxing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ssr-zxing.js","sourceRoot":"","sources":["../src/ssr-zxing.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,iCAAiC,CAAC;AAEzD,eAAe,KAAK,CAAC","sourcesContent":["import * as ZXing from \"@zxing/library/umd/index.min.js\";\n\nexport default ZXing;\n"]}

package/dist/types/FCLLayout.d.ts

@@ -0,0 +1,105 @@
+/**
+ * Different types of FCLLayout.
+ * @public
+ */
+declare enum FCLLayout {
+    /**
+     * The layout will display 1 column.
+     * @public
+     */
+    OneColumn = "OneColumn",
+    /**
+     *
+     * Desktop: Defaults to 67 - 33 - -- percent widths of columns. Start (expanded) and Mid columns are displayed.
+     * Tablet:  Defaults to 67 - 33 - -- percent widths of columns. Start (expanded) and Mid columns are displayed.
+     * Phone:   Fixed -- 100 -- percent widths of columns, only the Mid column is displayed
+     *
+     * Use to display both a list and a detail page when the user should focus on the list page.
+     * @public
+     */
+    TwoColumnsStartExpanded = "TwoColumnsStartExpanded",
+    /**
+     * Desktop: Defaults to 33 - 67 - -- percent widths of columns. Start and Mid (expanded) columns are displayed
+     * Tablet:  Defaults to 33 - 67 - -- percent widths of columns. Start and Mid (expanded) columns are displayed
+     * Phone:   Fixed -- 100 -- percent widths of columns, only the Mid column is displayed
+     *
+     * Use to display both a list and a detail page when the user should focus on the detail page.
+     * @public
+     */
+    TwoColumnsMidExpanded = "TwoColumnsMidExpanded",
+    /**
+     * Desktop: Defaults to 25 - 50 - 25 percent widths of columns. Start, Mid (expanded) and End columns are displayed
+     * Tablet:  Defaults to 0 - 67 - 33 percent widths of columns. Mid (expanded) and End columns are displayed, Start is accessible by dragging the columns-separator
+     * Phone:   Fixed -- -- 100 percent widths of columns, only the End column is displayed
+     *
+     * Use to display all three pages (list, detail, detail-detail) when the user should focus on the detail.
+     * @public
+     */
+    ThreeColumnsMidExpanded = "ThreeColumnsMidExpanded",
+    /**
+     * Desktop: Defaults to 25 - 25 - 50 percent widths of columns. Start, Mid and End (expanded) columns are displayed
+     * Tablet:  Defaults to 0 - 33 - 67 percent widths of columns. Mid and End (expanded) columns are displayed, Start is accessible by dragging the columns-separator
+     * Phone:   Fixed -- -- 100 percent widths of columns (only the End column is displayed)
+     *
+     * Use to display all three pages (list, detail, detail-detail) when the user should focus on the detail-detail.
+     * @public
+     */
+    ThreeColumnsEndExpanded = "ThreeColumnsEndExpanded",
+    /**
+     * Desktop: Defaults to 67 - 33 - 0 percent widths of columns. Start (expanded) and Mid columns are displayed, End is accessible by dragging the columns-separator
+     * Tablet:  Defaults to 67 - 33 - 0 percent widths of columns. Start (expanded) and Mid columns are displayed, End is accessible by dragging the columns-separator
+     * Phone:   Fixed -- -- 100 percent widths of columns, only the End column is displayed
+     *
+     * Use to display the list and detail pages when the user should focus on the list.
+     * The detail-detail is still loaded and easily accessible by dragging the columns-separator
+     * @public
+     */
+    ThreeColumnsStartExpandedEndHidden = "ThreeColumnsStartExpandedEndHidden",
+    /**
+     * Desktop: Defaults to 33 - 67 - 0 percent widths of columns. Start and Mid (expanded) columns are displayed, End is accessible by dragging the columns-separator
+     * Tablet:  Defaults to 33 - 67 - 0 percent widths of columns. Start and Mid (expanded) columns are displayed, End is accessible by dragging the columns-separator
+     * Phone:   Fixed -- -- 100 percent widths of columns, only the End column is displayed
+     *
+     * Use to display the list and detail pages when the user should focus on the detail.
+     * The detail-detail is still loaded and easily accessible by dragging the columns-separator
+     * @public
+     */
+    ThreeColumnsMidExpandedEndHidden = "ThreeColumnsMidExpandedEndHidden",
+    /**
+    * Desktop: Defaults to 0 - 67 - 33 percent widths of columns. Start is hidden, Mid (expanded) and End columns are displayed.
+    * Tablet:  Defaults to 0 - 67 - 33 percent widths of columns. Start is hidden, Mid (expanded) and End columns are displayed.
+    * Phone:   Fixed -- 100 percent width of the Mid column, only the Mid column is displayed.
+    *
+    * Use to display the Mid and End columns while the Start column is hidden.
+    * @public
+    */
+    ThreeColumnsStartHiddenMidExpanded = "ThreeColumnsStartHiddenMidExpanded",
+    /**
+     * Desktop: Defaults to 0 - 33 - 67 percent widths of columns. Start is hidden, Mid and End (expanded) columns are displayed.
+     * Tablet:  Defaults to 0 - 33 - 67 percent widths of columns. Start is hidden, Mid and End (expanded) columns are displayed.
+     * Phone:   Fixed -- 100 percent width of the End column, only the End column is displayed.
+     *
+     * Use to display the Mid column and expanded End column while the grip of the separator is not visible.
+     * @public
+     */
+    ThreeColumnsStartHiddenEndExpanded = "ThreeColumnsStartHiddenEndExpanded",
+    /**
+     * Desktop: Fixed -- 100 -- percent widths of columns, only the Mid column is displayed
+     * Tablet:  Fixed -- 100 -- percent widths of columns, only the Mid column is displayed
+     * Phone:   Fixed -- 100 -- percent widths of columns, only the Mid column is displayed
+     *
+     * Use to display a detail page only, when the user should focus entirely on it.
+     * @public
+     */
+    MidColumnFullScreen = "MidColumnFullScreen",
+    /**
+     * Desktop: Fixed -- -- 100 percent widths of columns, only the End column is displayed
+     * Tablet:  Fixed -- -- 100 percent widths of columns, only the End column is displayed
+     * Phone:   Fixed -- -- 100 percent widths of columns, only the End column is displayed
+     *
+     * Use to display a detail-detail page only, when the user should focus entirely on it.
+     * @public
+     */
+    EndColumnFullScreen = "EndColumnFullScreen"
+}
+export default FCLLayout;