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

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/vscode.html-custom-data.json

@@ -626,28 +626,8 @@
     },
     {
       "name": "ui5-shellbar",
-      "description": "### Overview\n\nThe `ui5-shellbar` is meant to serve as an application header\nand includes numerous built-in features, such as: logo, profile image/icon, title, search field, notifications and so on.\n\n### Stable DOM Refs\n\nYou can use the following stable DOM refs for the `ui5-shellbar`:\n\n- logo\n- notifications\n- overflow\n- profile\n- product-switch\n\n### Keyboard Handling\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/ShellBar.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **notifications-click** - Fired, when the notification icon is activated.\n- **profile-click** - Fired, when the profile slot is present.\n- **product-switch-click** - Fired, when the product switch icon is activated.\n\n**Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`.\n- **logo-click** - Fired, when the logo is activated.\n- **menu-item-click** - Fired, when a menu item is activated\n\n**Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`.\n- **search-button-click** - Fired, when the search button is activated.\n\n**Note:** You can prevent expanding/collapsing of the search field by calling `event.preventDefault()`.\n- **search-field-toggle** - Fired, when the search field is expanded or collapsed.\n- **search-field-clear** - Fired, when the search cancel button is activated.\n\n**Note:** You can prevent the default behavior (clearing the search field value) by calling `event.preventDefault()`. The search will still be closed.\n**Note:** The `search-field-clear` event is in an experimental state and is a subject to change.\n- **content-item-visibility-change** - Fired, when an item from the content slot is hidden or shown.\n**Note:** The `content-item-visibility-change` event is in an experimental state and is a subject to change.\n\n### **Methods:**\n - **closeOverflow(): _void_** - Closes the overflow area.\nUseful to manually close the overflow after having suppressed automatic closing with preventDefault() of ShellbarItem's press event\n- **getSearchButtonDomRef(): _Promise<HTMLElement | null>_** - Returns the `search` icon DOM ref.\n\n### **Slots:**\n - **assistant** - Defines the assistant slot.\n- **branding** - Defines the branding slot.\nThe `ui5-shellbar-branding` component is intended to be placed inside this slot.\nContent placed here takes precedence over the `primaryTitle` property and the `logo` content slot.\n\n**Note:** The `branding` slot is in an experimental state and is a subject to change.\n- **default** - Defines the `ui5-shellbar` additional items.\n\n**Note:**\nYou can use the `<ui5-shellbar-item></ui5-shellbar-item>`.\n- **profile** - You can pass `ui5-avatar` to set the profile image/icon.\nIf no profile slot is set - profile will be excluded from actions.\n\n**Note:** We recommend not using the `size` attribute of `ui5-avatar` because\nit should have specific size by design in the context of `ui5-shellbar` profile.\n- **logo** - Defines the logo of the `ui5-shellbar`.\nFor example, you can use `ui5-avatar` or `img` elements as logo.\n- **menuItems** - Defines the items displayed in menu after a click on a start button.\n\n**Note:** You can use the  `<ui5-li></ui5-li>` and its ancestors.\n- **searchField** - Defines the `ui5-input`, that will be used as a search field.\n- **startButton** - Defines a `ui5-button` in the bar that will be placed in the beginning.\nWe encourage this slot to be used for a menu button.\nIt gets overstyled to match ShellBar's styling.\n- **content** - Define the items displayed in the content area.\n\nUse the `data-hide-order` attribute with numeric value to specify the order of the items to be hidden when the space is not enough.\nLower values will be hidden first.\n\n**Note:** The `content` slot is in an experimental state and is a subject to change.\n\n### **CSS Parts:**\n - **root** - Used to style the outermost wrapper of the `ui5-shellbar`",
+      "description": "### Overview\n\nThe `ui5-shellbar` is meant to serve as an application header\nand includes numerous built-in features, such as: logo, profile image/icon, title, search field, notifications and so on.\n\n### Stable DOM Refs\n\nYou can use the following stable DOM refs for the `ui5-shellbar`:\n\n- logo\n- notifications\n- overflow\n- profile\n- product-switch\n\n### Keyboard Handling\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/ShellBar.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **notifications-click** - Fired, when the notification icon is activated.\n- **profile-click** - Fired, when the profile slot is present.\n- **product-switch-click** - Fired, when the product switch icon is activated.\n\n**Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`.\n- **logo-click** - Fired, when the logo is activated.\n- **menu-item-click** - Fired, when a menu item is activated\n\n**Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`.\n- **search-button-click** - Fired, when the search button is activated.\n\n**Note:** You can prevent expanding/collapsing of the search field by calling `event.preventDefault()`.\n- **search-field-toggle** - Fired, when the search field is expanded or collapsed.\n- **search-field-clear** - Fired, when the search cancel button is activated.\n\n**Note:** You can prevent the default behavior (clearing the search field value) by calling `event.preventDefault()`. The search will still be closed.\n**Note:** The `search-field-clear` event is in an experimental state and is a subject to change.\n- **content-item-visibility-change** - Fired, when an item from the content slot is hidden or shown.\n**Note:** The `content-item-visibility-change` event is in an experimental state and is a subject to change.\n\n### **Methods:**\n - **closeOverflow(): _void_** - Closes the overflow popover.\n- **getSearchButtonDomRef(): _Promise<HTMLElement | null>_** - Returns the search button DOM reference.\n\n### **Slots:**\n - **startButton** - Defines a `ui5-button` in the bar that will be placed in the beginning.\nWe encourage this slot to be used for a menu button.\nIt gets overstyled to match ShellBar's styling.\n- **branding** - Defines the branding slot.\nThe `ui5-shellbar-branding` component is intended to be placed inside this slot.\nContent placed here takes precedence over the `primaryTitle` property and the `logo` content slot.\n\n**Note:** The `branding` slot is in an experimental state and is a subject to change.\n- **content** - Define the items displayed in the content area.\n\nUse the `data-hide-order` attribute with numeric value to specify the order of the items to be hidden when the space is not enough.\nLower values will be hidden first.\n\n**Note:** The `content` slot is in an experimental state and is a subject to change.\n- **searchField** - Defines the `ui5-input`, that will be used as a search field.\n- **assistant** - Defines the assistant slot.\n- **default** - Defines the `ui5-shellbar` additional items.\n\n**Note:**\nYou can use the `<ui5-shellbar-item></ui5-shellbar-item>`.\n- **profile** - You can pass `ui5-avatar` to set the profile image/icon.\nIf no profile slot is set - profile will be excluded from actions.\n\n**Note:** We recommend not using the `size` attribute of `ui5-avatar` because\nit should have specific size by design in the context of `ui5-shellbar` profile.\n- **logo** - Defines the logo of the `ui5-shellbar`.\nFor example, you can use `ui5-avatar` or `img` elements as logo.\n- **menuItems** - Defines the items displayed in menu after a click on a start button.\n\n**Note:** You can use the  `<ui5-li></ui5-li>` and its ancestors.\n\n### **CSS Parts:**\n - **root** - Used to style the outermost wrapper of the `ui5-shellbar`",
       "attributes": [
-        {
-          "name": "hide-search-button",
-          "description": "Defines the visibility state of the search button.\n\n**Note:** The `hideSearchButton` property is in an experimental state and is a subject to change.",
-          "values": []
-        },
-        {
-          "name": "disable-search-collapse",
-          "description": "Disables the automatic search field expansion/collapse when the available space is not enough.\n\n**Note:** The `disableSearchCollapse` property is in an experimental state and is a subject to change.",
-          "values": []
-        },
-        {
-          "name": "primary-title",
-          "description": "Defines the `primaryTitle`.\n\n**Note:** The `primaryTitle` would be hidden on S screen size (less than approx. 700px).",
-          "values": []
-        },
-        {
-          "name": "secondary-title",
-          "description": "Defines the `secondaryTitle`.\n\n**Note:** The `secondaryTitle` would be hidden on S and M screen sizes (less than approx. 1300px).",
-          "values": []
-        },
         {
           "name": "notifications-count",
           "description": "Defines the `notificationsCount`,\ndisplayed in the notification icon top-right corner.",
@@ -673,6 +653,26 @@
           "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields,\nwhere each field is an object supporting one or more accessibility attributes:\n\n- **logo** - `logo.role` and `logo.name`.\n- **notifications** - `notifications.expanded` and `notifications.hasPopup`.\n- **profile** - `profile.expanded`, `profile.hasPopup` and `profile.name`.\n- **product** - `product.expanded` and `product.hasPopup`.\n- **search** - `search.hasPopup`.\n- **overflow** - `overflow.expanded` and `overflow.hasPopup`.\n- **branding** - `branding.name`.\n\nThe accessibility attributes support the following values:\n\n- **role**: Defines the accessible ARIA role of the logo area.\nAccepts the following string values: `button` or `link`.\n\n- **expanded**: Indicates whether the button, or another grouping element it controls,\nis currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element,\nsuch as menu or dialog, that can be triggered by the button.\n\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n- **name**: Defines the accessible ARIA name of the area.\nAccepts any string.",
           "values": [{ "name": "ShellBarAccessibilityAttributes" }]
         },
+        {
+          "name": "hide-search-button",
+          "description": "Defines the visibility state of the search button.\n\n**Note:** The `hideSearchButton` property is in an experimental state and is a subject to change.",
+          "values": []
+        },
+        {
+          "name": "disable-search-collapse",
+          "description": "Disables the automatic search field expansion/collapse when the available space is not enough.\n\n**Note:** The `disableSearchCollapse` property is in an experimental state and is a subject to change.",
+          "values": []
+        },
+        {
+          "name": "primary-title",
+          "description": "Defines the `primaryTitle`.\n\n**Note:** The `primaryTitle` would be hidden on S screen size (less than approx. 700px).",
+          "values": []
+        },
+        {
+          "name": "secondary-title",
+          "description": "Defines the `secondaryTitle`.\n\n**Note:** The `secondaryTitle` would be hidden on S and M screen sizes (less than approx. 1300px).",
+          "values": []
+        },
         {
           "name": "logo-dom-ref",
           "description": "Returns the `logo` DOM ref.",
@@ -725,26 +725,26 @@
     },
     {
       "name": "ui5-shellbar-item",
-      "description": "The `ui5-shellbar-item` represents a custom item, that\nmight be added to the `ui5-shellbar`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/ShellBarItem.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - Fired, when the item is pressed.",
+      "description": "The `ui5-shellbar-item` represents a custom item for `ui5-shellbar`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/ShellBarItem.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - Fired when the item is clicked.",
       "attributes": [
         {
           "name": "icon",
-          "description": "Defines the name of the item's icon.",
+          "description": "Defines the item's icon.",
           "values": []
         },
         {
           "name": "text",
-          "description": "Defines the item text.\n\n**Note:** The text is only displayed inside the overflow popover list view.",
+          "description": "Defines the item text.",
           "values": []
         },
         {
           "name": "count",
-          "description": "Defines the count displayed in the top-right corner.",
+          "description": "Defines the count displayed in badge.",
           "values": []
         },
         {
           "name": "accessibility-attributes",
-          "description": "Defines additional accessibility attributes on Shellbar Items.\n\nThe accessibility attributes support the following values:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls,\nis currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element,\nsuch as menu or dialog, that can be triggered by the button.\n\n- **controls**: Identifies the element (or elements) whose contents\nor presence are controlled by the component.\nAccepts a lowercase string value, referencing the ID of the element it controls.",
+          "description": "Defines accessibility attributes.",
           "values": [{ "name": "ShellBarItemAccessibilityAttributes" }]
         }
       ],
@@ -752,65 +752,15 @@
     },
     {
       "name": "ui5-shellbar-search",
-      "description": "Search field for the ShellBar component.\n\n\n---\n\n\n\n\n### **Events:**\n - **open** - Fired when the popup is opened.\n- **close** - Fired when the popup is closed.\n- **input** - Fired when typing in input or clear icon is pressed.\n- **scope-change** - Fired when the scope has changed.\n- **search** - Fired when the user has triggered search with Enter key or Search Button press.\n\n### **Slots:**\n - **default** - Defines the Search suggestion items.\n- **action** - Defines the popup footer action button.\n- **illustration** - Defines the illustrated message to be shown in the popup.\n- **messageArea** - Defines the illustrated message to be shown in the popup.\n- **scopes** - Defines the component scope options.\n- **filterButton** - Defines the filter button slot, used to display an additional filtering button.\nThis slot is intended for passing a `ui5-button` with a filter icon to provide extended filtering options.\n\n**Note:** Scope button and Filter button are mutually exclusive.",
+      "description": "Search field for the ShellBar component.\n\n\n---\n\n\n",
       "attributes": [
         {
           "name": "auto-open",
           "description": "Indicates whether the suggestions popover should be opened on focus.",
           "values": []
-        },
-        {
-          "name": "loading",
-          "description": "Indicates whether a loading indicator should be shown in the popup.",
-          "values": []
-        },
-        {
-          "name": "no-typeahead",
-          "description": "Defines whether the value will be autcompleted to match an item.",
-          "values": []
-        },
-        {
-          "name": "open",
-          "description": "Indicates whether the items picker is open.",
-          "values": []
-        },
-        {
-          "name": "field-loading",
-          "description": "Indicates whether a loading indicator should be shown in the input field.",
-          "values": []
-        },
-        {
-          "name": "show-clear-icon",
-          "description": "Defines whether the clear icon of the search will be shown.",
-          "values": []
-        },
-        {
-          "name": "value",
-          "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.",
-          "values": []
-        },
-        {
-          "name": "placeholder",
-          "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.",
-          "values": []
-        },
-        {
-          "name": "accessible-name",
-          "description": "Defines the accessible ARIA name of the component.",
-          "values": []
-        },
-        {
-          "name": "accessible-description",
-          "description": "Defines the accessible ARIA description of the field.",
-          "values": []
-        },
-        {
-          "name": "scope-value",
-          "description": "Defines the value of the component:\n\nApplications are responsible for setting the correct scope value.\n\n**Note:** If the given value does not match any existing scopes,\nno scope will be selected and the SearchField scope component will be displayed as empty.",
-          "values": []
         }
       ],
-      "references": []
+      "references": [null]
     },
     {
       "name": "ui5-shellbar-spacer",
@@ -1283,7 +1233,7 @@
     },
     {
       "name": "ui5-user-menu",
-      "description": "### Overview\n\nThe `ui5-user-menu` is an SAP Fiori specific web component that is used in `ui5-shellbar`\nand allows the user to easily see information and settings for the current user and all other logged in accounts.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserMenu.js\";`\n\n`import \"@ui5/webcomponents-fiori/dist/UserMenuItem.js\";` (for `ui5-user-menu-item`)\n\n\n---\n\n\n\n\n### **Events:**\n - **avatar-click** - Fired when the account avatar is selected.\n- **manage-account-click** - Fired when the \"Manage Account\" button is selected.\n- **edit-accounts-click** - Fired when the \"Edit Accounts\" button is selected.\n- **change-account** - Fired when the account is switched to a different one.\n- **item-click** - Fired when a menu item is selected.\n- **open** - Fired when a user menu is open.\n- **close** - Fired when a user menu is close.\n- **sign-out-click** - Fired when the \"Sign Out\" button is selected.\n\n### **Slots:**\n - **default** - Defines the menu items.\n- **accounts** - Defines the user accounts.\n\n**Note:** If one item is used, it will be shown as the selected one. If more than one item is used, the first one will be shown as selected unless\nthere is an item with `selected` property set to `true`.",
+      "description": "### Overview\n\nThe `ui5-user-menu` is an SAP Fiori specific web component that is used in `ui5-shellbar`\nand allows the user to easily see information and settings for the current user and all other logged in accounts.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserMenu.js\";`\n\n`import \"@ui5/webcomponents-fiori/dist/UserMenuItem.js\";` (for `ui5-user-menu-item`)\n\n\n---\n\n\n\n\n### **Events:**\n - **avatar-click** - Fired when the account avatar is selected.\n- **manage-account-click** - Fired when the \"Manage Account\" button is selected.\n- **edit-accounts-click** - Fired when the \"Edit Accounts\" button is selected.\n- **change-account** - Fired when the account is switched to a different one.\n- **item-click** - Fired when a menu item is selected.\n- **open** - Fired when a user menu is open.\n- **close** - Fired when a user menu is close.\n- **sign-out-click** - Fired when the \"Sign Out\" button is selected.\n\n### **Slots:**\n - **default** - Defines the menu items.\n- **accounts** - Defines the user accounts.\n\n**Note:** If one item is used, it will be shown as the selected one. If more than one item is used, the first one will be shown as selected unless\nthere is an item with `selected` property set to `true`.\n- **footer** - Defines custom footer content.\n\n**Note:** When provided, replaces the default \"Sign Out\" button. Use an empty element to hide the footer completely.",
       "attributes": [
         {
           "name": "open",