@ui5/webcomponents-fiori 0.0.0-037d08c67

package/dist/NotificationListItemBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationListItemBase.js","sourceRoot":"","sources":["../src/NotificationListItemBase.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,sCAAsC,CAAC;AACrE,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAEnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uDAAuD,CAAC;AAC5F,OAAO,gBAAgB,MAAM,uDAAuD,CAAC;AACrF,OAAO,YAAY,MAAM,yCAAyC,CAAC;AACnE,OAAO,EAAE,wBAAwB,EAAE,MAAM,wDAAwD,CAAC;AAElG,QAAQ;AACR,OAAO,EACN,8BAA8B,GAC9B,MAAM,mCAAmC,CAAC;AAE3C;;;;;;;;GAQG;AACH,MAAM,wBAAyB,SAAQ,YAAY;IAAnD;;QAUC;;;;;;;WAOG;QAEH,SAAI,GAAG,KAAK,CAAC;QAEb;;;;;WAKG;QAEH,YAAO,GAAG,KAAK,CAAC;QAEhB;;;;WAIG;QAEH,iBAAY,GAAG,IAAI,CAAC;IAgDrB,CAAC;IA3CA,IAAI,YAAY;QACf,OAAO,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC;IACjC,CAAC;IAED,IAAI,WAAW;QACd,OAAO,wBAAwB,CAAC,eAAe,CAAC,OAAO,CAAC,8BAA8B,CAAC,CAAC;IACzF,CAAC;IAED;;OAEG;IACH,KAAK,CAAC,UAAU,CAAC,CAAgB;QAChC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;QAEpB,IAAI,OAAO,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,cAAc,EAAG,CAAC,OAAO,CAAC,qBAAqB,CAAC,EAAE,CAAC;YACzE,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,OAAO;QACR,CAAC;QAED,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;YACb,CAAC,CAAC,wBAAwB,EAAE,CAAC;YAE7B,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;YACzC,MAAM,WAAW,GAAG,IAAI,CAAC,eAAe,EAAG,CAAC;YAE5C,IAAI,aAAa,KAAK,WAAW,EAAE,CAAC;gBACnC,MAAM,cAAc,GAAG,MAAM,wBAAwB,CAAC,WAAW,CAAC,CAAC;gBACnE,cAAc,EAAE,KAAK,EAAE,CAAC;YACzB,CAAC;iBAAM,CAAC;gBACP,WAAW,CAAC,KAAK,EAAE,CAAC;YACrB,CAAC;QACF,CAAC;IACF,CAAC;IAED,eAAe;QACd,OAAO,IAAI,CAAC,cAAc,EAAE,CAAC;IAC9B,CAAC;IAED,qBAAqB;QACpB,MAAM,QAAQ,GAAG,mBAAmB,CAAC,IAAI,CAAC,eAAe,EAAG,CAAC,CAAC;QAE9D,OAAO,QAAQ,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,KAAK,gBAAgB,EAAE,CAAC,CAAC;IACxF,CAAC;CACD;AA5EA;IADC,QAAQ,EAAE;2DACQ;AAWnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sDACf;AASb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yDACZ;AAQhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8DACP;AAGb;IADN,IAAI,CAAC,0BAA0B,CAAC;uDACE;AA+CpC,eAAe,wBAAwB,CAAC","sourcesContent":["import { isSpace, isF2 } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { getTabbableElements } from \"@ui5/webcomponents-base/dist/util/TabbableElements.js\";\nimport getActiveElement from \"@ui5/webcomponents-base/dist/util/getActiveElement.js\";\nimport ListItemBase from \"@ui5/webcomponents/dist/ListItemBase.js\";\nimport { getFirstFocusableElement } from \"@ui5/webcomponents-base/dist/util/FocusableElements.js\";\n\n// Texts\nimport {\n\tNOTIFICATION_LIST_ITEM_LOADING,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n/**\n * @class\n *\n * The base class of the `NotificationListItem` and `NotificationListGroupItem`.\n * @constructor\n * @extends ListItemBase\n * @since 1.0.0-rc.8\n * @public\n */\nclass NotificationListItemBase extends ListItemBase {\n\teventDetails!: ListItemBase[\"eventDetails\"];\n\t/**\n\t * Defines the `titleText` of the item.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ttitleText?: string;\n\n\t/**\n\t * Defines if the `notification` is new or has been already read.\n\t *\n\t * **Note:** if set to `false` the `titleText` has bold font,\n\t * if set to true - it has a normal font.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tread = false;\n\n\t/**\n\t * Defines if a busy indicator would be displayed over the item.\n\t * @default false\n\t * @public\n\t * @since 1.0.0-rc.8\n\t */\n\t@property({ type: Boolean })\n\tloading = false;\n\n\t/**\n\t * Defines the delay in milliseconds, after which the busy indicator will show up for this component.\n\t * @default 1000\n\t * @public\n\t */\n\t@property({ type: Number })\n\tloadingDelay = 1000;\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nFioriBundle: I18nBundle;\n\n\tget hasTitleText() {\n\t\treturn !!this.titleText?.length;\n\t}\n\n\tget loadingText() {\n\t\treturn NotificationListItemBase.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_LOADING);\n\t}\n\n\t/**\n\t * Event handlers\n\t */\n\tasync _onkeydown(e: KeyboardEvent) {\n\t\tsuper._onkeydown(e);\n\n\t\tif (isSpace(e) && this.getFocusDomRef()!.matches(\":has(:focus-within)\")) {\n\t\t\te.preventDefault();\n\t\t\treturn;\n\t\t}\n\n\t\tif (isF2(e)) {\n\t\t\te.stopImmediatePropagation();\n\n\t\t\tconst activeElement = getActiveElement();\n\t\t\tconst focusDomRef = this.getHeaderDomRef()!;\n\n\t\t\tif (activeElement === focusDomRef) {\n\t\t\t\tconst firstFocusable = await getFirstFocusableElement(focusDomRef);\n\t\t\t\tfirstFocusable?.focus();\n\t\t\t} else {\n\t\t\t\tfocusDomRef.focus();\n\t\t\t}\n\t\t}\n\t}\n\n\tgetHeaderDomRef() {\n\t\treturn this.getFocusDomRef();\n\t}\n\n\tshouldForwardTabAfter() {\n\t\tconst aContent = getTabbableElements(this.getHeaderDomRef()!);\n\n\t\treturn aContent.length === 0 || (aContent[aContent.length - 1] === getActiveElement());\n\t}\n}\n\nexport default NotificationListItemBase;\n"]}

package/dist/NotificationListItemTemplate.d.ts

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

package/dist/NotificationListItemTemplate.js

@@ -0,0 +1,19 @@
+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 BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import Link from "@ui5/webcomponents/dist/Link.js";
+import Tag from "@ui5/webcomponents/dist/Tag.js";
+import iconHighPriority from "@ui5/webcomponents-icons/dist/high-priority.js";
+import iconDecline from "@ui5/webcomponents-icons/dist/decline.js";
+import iconOverflow from "@ui5/webcomponents-icons/dist/overflow.js";
+export default function NotificationListItemTemplate() {
+    return (_jsxs("li", { class: this.itemClasses, onFocusIn: this._onfocusin, onKeyDown: this._onkeydown, onKeyUp: this._onkeyup, onClick: this._onclick, tabindex: this.forcedTabIndex ? parseInt(this.forcedTabIndex) : undefined, "aria-labelledby": this.ariaLabelledBy, "aria-level": this._ariaLevel, children: [this.loading && (_jsx("span", { id: `${this._id}-loading`, class: "ui5-hidden-text", children: this.loadingText })), _jsx(BusyIndicator, { id: `${this._id}-busyIndicator`, delay: this.loadingDelay, active: this.loading, inert: this.loading, class: "ui5-nli-loading", children: _jsxs("div", { class: "ui5-nli-content-wrapper", children: [_jsxs("div", { class: {
+                                "ui5-nli-content": true,
+                                "ui5-nli-content-with-importance": this.hasImportance,
+                            }, children: [this.hasImportance && (_jsxs(Tag, { id: `${this._id}-importance`, class: "ui5-nli-importance", design: "Set2", colorScheme: "2", wrappingType: "None", children: [_jsx(Icon, { name: iconHighPriority, slot: "icon" }), this.importanceText] })), _jsxs("div", { class: "ui5-nli-title-text-wrapper", children: [this.hasState && (_jsx(Icon, { class: "ui5-state-icon", name: this.statusIconName, showTooltip: true, accessibleName: this.stateText, design: this.statusIconDesign })), _jsxs("div", { id: `${this._id}-title-text`, class: "ui5-nli-title-text", part: "title-text", children: [_jsx("span", { class: "ui5-hidden-text", children: this.stateText }), this.titleText] })] }), _jsx("span", { id: `${this._id}-read`, class: "ui5-hidden-text", children: this.readText }), this.hasDesc && (_jsx("div", { id: `${this._id}-description`, class: "ui5-nli-description", children: _jsx("slot", {}) })), _jsxs("div", { class: "ui5-nli-footer", children: [_jsx("div", { id: `${this._id}-footnotes`, class: "ui5-nli-footnotes", children: this.footerItems.map(item => {
+                                                return (_jsxs(_Fragment, { children: [_jsx("slot", { name: item.slotName }), item.showDivider && _jsx("div", { class: "ui5-nli-footer-divider", "aria-hidden": "true", children: "\u00B7" })] }));
+                                            }) }), _jsx(Link, { class: "ui5-nli-footer-showMore", hidden: this.hideShowMore, onClick: this._onShowMoreClick, wrappingType: "None", href: "#" // --without href ENTER does not trigger click
+                                            , accessibleName: this.moreLinkAccessibleName, accessibleRole: "Button", accessibilityAttributes: this.moreLinkAccessibilityAttributes, children: this.showMoreText })] })] }), _jsxs("div", { class: "ui5-nli-actions", children: [this.showMenu && (_jsx(Button, { icon: iconOverflow, design: "Transparent", onClick: this._onBtnMenuClick, class: "ui5-nli-menu-btn", tooltip: this.menuBtnAccessibleName, accessibilityAttributes: this.menuButtonAccessibilityAttributes })), this.showClose && (_jsx(Button, { icon: iconDecline, class: "ui5-nli-close-btn", design: "Transparent", onClick: this._onBtnCloseClick, tooltip: this.closeBtnAccessibleName, accessibleName: this.closeBtnAccessibleName }))] }), _jsx("div", { class: "ui5-nli-avatar", "aria-hidden": "true", children: _jsx("slot", { name: "avatar" }) }), _jsx("slot", { name: "menu" })] }) })] }));
+}
+//# sourceMappingURL=NotificationListItemTemplate.js.map

package/dist/NotificationListItemTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationListItemTemplate.js","sourceRoot":"","sources":["../src/NotificationListItemTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import type NotificationListItem from \"./NotificationListItem.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport BusyIndicator from \"@ui5/webcomponents/dist/BusyIndicator.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport Link from \"@ui5/webcomponents/dist/Link.js\";\nimport Tag from \"@ui5/webcomponents/dist/Tag.js\";\nimport iconHighPriority from \"@ui5/webcomponents-icons/dist/high-priority.js\";\nimport iconDecline from \"@ui5/webcomponents-icons/dist/decline.js\";\nimport iconOverflow from \"@ui5/webcomponents-icons/dist/overflow.js\";\n\nexport default function NotificationListItemTemplate(this: NotificationListItem) {\n\treturn (\n\t\t<li\n\t\t\tclass={this.itemClasses}\n\t\t\tonFocusIn={this._onfocusin}\n\t\t\tonKeyDown={this._onkeydown}\n\t\t\tonKeyUp={this._onkeyup}\n\t\t\tonClick={this._onclick}\n\t\t\ttabindex={this.forcedTabIndex ? parseInt(this.forcedTabIndex) : undefined}\n\t\t\taria-labelledby={this.ariaLabelledBy}\n\t\t\taria-level={this._ariaLevel}\n\t\t>\n\t\t\t{this.loading && (\n\t\t\t\t<span\n\t\t\t\t\tid={`${this._id}-loading`}\n\t\t\t\t\tclass=\"ui5-hidden-text\"\n\t\t\t\t>\n\t\t\t\t\t{this.loadingText}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t<BusyIndicator\n\t\t\t\tid={`${this._id}-busyIndicator`}\n\t\t\t\tdelay={this.loadingDelay}\n\t\t\t\tactive={this.loading}\n\t\t\t\tinert={this.loading}\n\t\t\t\tclass=\"ui5-nli-loading\">\n\t\t\t\t<div class=\"ui5-nli-content-wrapper\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\"ui5-nli-content\": true,\n\t\t\t\t\t\t\t\"ui5-nli-content-with-importance\": this.hasImportance,\n\t\t\t\t\t\t}}>\n\t\t\t\t\t\t{this.hasImportance && (\n\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\tid={`${this._id}-importance`}\n\t\t\t\t\t\t\t\tclass=\"ui5-nli-importance\"\n\t\t\t\t\t\t\t\tdesign=\"Set2\"\n\t\t\t\t\t\t\t\tcolorScheme=\"2\"\n\t\t\t\t\t\t\t\twrappingType=\"None\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\tname={iconHighPriority}\n\t\t\t\t\t\t\t\t\tslot=\"icon\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t{this.importanceText}\n\t\t\t\t\t\t\t</Tag>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div class=\"ui5-nli-title-text-wrapper\">\n\t\t\t\t\t\t\t{this.hasState && (\n\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\tclass=\"ui5-state-icon\"\n\t\t\t\t\t\t\t\t\tname={this.statusIconName}\n\t\t\t\t\t\t\t\t\tshowTooltip={true}\n\t\t\t\t\t\t\t\t\taccessibleName={this.stateText}\n\t\t\t\t\t\t\t\t\tdesign={this.statusIconDesign}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tid={`${this._id}-title-text`}\n\t\t\t\t\t\t\t\tclass=\"ui5-nli-title-text\"\n\t\t\t\t\t\t\t\tpart=\"title-text\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span class=\"ui5-hidden-text\">{this.stateText}</span>\n\t\t\t\t\t\t\t\t{this.titleText}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tid={`${this._id}-read`}\n\t\t\t\t\t\t\tclass=\"ui5-hidden-text\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this.readText}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t{this.hasDesc && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tid={`${this._id}-description`}\n\t\t\t\t\t\t\t\tclass=\"ui5-nli-description\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div class=\"ui5-nli-footer\">\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tid={`${this._id}-footnotes`}\n\t\t\t\t\t\t\t\tclass=\"ui5-nli-footnotes\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tthis.footerItems.map(item => {\n\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t\t<slot name={item.slotName}></slot>\n\t\t\t\t\t\t\t\t\t\t\t\t{item.showDivider && <div class=\"ui5-nli-footer-divider\" aria-hidden=\"true\">·</div>}\n\t\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\tclass=\"ui5-nli-footer-showMore\"\n\t\t\t\t\t\t\t\thidden={this.hideShowMore}\n\t\t\t\t\t\t\t\tonClick={this._onShowMoreClick}\n\t\t\t\t\t\t\t\twrappingType=\"None\"\n\t\t\t\t\t\t\t\thref=\"#\" // --without href ENTER does not trigger click\n\t\t\t\t\t\t\t\taccessibleName={this.moreLinkAccessibleName}\n\t\t\t\t\t\t\t\taccessibleRole=\"Button\"\n\t\t\t\t\t\t\t\taccessibilityAttributes={this.moreLinkAccessibilityAttributes}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{this.showMoreText}\n\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"ui5-nli-actions\">\n\t\t\t\t\t\t{this.showMenu && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\ticon={iconOverflow}\n\t\t\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\t\t\tonClick={this._onBtnMenuClick}\n\t\t\t\t\t\t\t\tclass=\"ui5-nli-menu-btn\"\n\t\t\t\t\t\t\t\ttooltip={this.menuBtnAccessibleName}\n\t\t\t\t\t\t\t\taccessibilityAttributes={this.menuButtonAccessibilityAttributes}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.showClose && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\ticon={iconDecline}\n\t\t\t\t\t\t\t\tclass=\"ui5-nli-close-btn\"\n\t\t\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\t\t\tonClick={this._onBtnCloseClick}\n\t\t\t\t\t\t\t\ttooltip={this.closeBtnAccessibleName}\n\t\t\t\t\t\t\t\taccessibleName={this.closeBtnAccessibleName}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"ui5-nli-avatar\"\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot name=\"avatar\"></slot>\n\t\t\t\t\t</div>\n\t\t\t\t\t<slot name=\"menu\"></slot>\n\t\t\t\t</div>\n\t\t\t</BusyIndicator>\n\t\t</li>\n\t);\n}\n"]}

package/dist/NotificationListTemplate.d.ts

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

package/dist/NotificationListTemplate.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
+import NotificationListInternal from "./NotificationListInternal.js";
+export default function NotificationListTemplate() {
+    return (_jsx(NotificationListInternal, { accessibleName: this._accessibleName, noDataText: this.noDataText, onItemClick: this._onItemClick, onItemClose: this._onItemClose, onItemToggle: this._onItemToggle, onLoadMore: this._onLoadMore, children: _jsx("slot", {}) }));
+}
+//# sourceMappingURL=NotificationListTemplate.js.map

package/dist/NotificationListTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationListTemplate.js","sourceRoot":"","sources":["../src/NotificationListTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,wBAAwB,MAAM,+BAA+B,CAAC;AAErE,MAAM,CAAC,OAAO,UAAU,wBAAwB;IAC/C,OAAO,CACN,KAAC,wBAAwB,IACxB,cAAc,EAAE,IAAI,CAAC,eAAe,EACpC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,WAAW,EAAE,IAAI,CAAC,YAAY,EAC9B,WAAW,EAAE,IAAI,CAAC,YAAY,EAC9B,YAAY,EAAE,IAAI,CAAC,aAAa,EAChC,UAAU,EAAE,IAAI,CAAC,WAAW,YAE5B,gBAAa,GACa,CAC3B,CAAC;AACH,CAAC","sourcesContent":["import type NotificationList from \"./NotificationList.js\";\nimport NotificationListInternal from \"./NotificationListInternal.js\";\n\nexport default function NotificationListTemplate(this: NotificationList) {\n\treturn (\n\t\t<NotificationListInternal\n\t\t\taccessibleName={this._accessibleName}\n\t\t\tnoDataText={this.noDataText}\n\t\t\tonItemClick={this._onItemClick}\n\t\t\tonItemClose={this._onItemClose}\n\t\t\tonItemToggle={this._onItemToggle}\n\t\t\tonLoadMore={this._onLoadMore}\n\t\t>\n\t\t\t<slot></slot>\n\t\t</NotificationListInternal>\n\t);\n}\n"]}

package/dist/Page.d.ts

@@ -0,0 +1,84 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type PageBackgroundDesign from "./types/PageBackgroundDesign.js";
+import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-page` is a container component that holds one whole screen of an application.
+ * The page has three distinct areas that can hold content - a header, content area and a footer.
+ * ### Structure
+ * #### Header
+ * The top most area of the page is occupied by the header. The standard header includes a navigation button and a title.
+ * #### Content
+ * The content occupies the main part of the page. Only the content area is scrollable by default.
+ * This can be prevented by setting `noScrolling` to `true`.
+ * #### Footer
+ * The footer is optional and occupies the part above the bottom part of the content. Alternatively, the footer can be fixed at the bottom of the page by enabling the `fixedFooter` property.
+ *
+ * **Note:** `ui5-page` occipues the whole available space of its parent. In order to achieve the intended design you have to make sure
+ * that there is enough space for the `ui5-page` to be rendered.
+ * **Note:** In order for the `ui5-page` to be displayed, the parent element should have fixed height.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents-fiori/dist/Page.js";`
+ * @constructor
+ * @extends UI5Element
+ * @since 1.0.0-rc.12
+ * @public
+ * @csspart content - Used to style the content section of the component
+ */
+declare class Page extends UI5Element {
+    /**
+     * Defines the background color of the `ui5-page`.
+     *
+     * **Note:** When a ui5-list is placed inside the page, we recommend using “List” to ensure better color contrast.
+     * @default "Solid"
+     * @public
+     */
+    backgroundDesign: `${PageBackgroundDesign}`;
+    /**
+     * Disables vertical scrolling of page content.
+     * If set to true, there will be no vertical scrolling at all.
+     * @default false
+     * @public
+     */
+    noScrolling: boolean;
+    /**
+     * Defines if the footer is fixed at the very bottom of the page.
+     *
+     * **Note:** When set to true the footer is fixed at the very bottom of the page, otherwise it floats over the content with a slight offset from the bottom.
+     * @default false
+     * @public
+     */
+    fixedFooter: boolean;
+    /**
+     * Defines the footer visibility.
+     * @default false
+     * @public
+     */
+    hideFooter: boolean;
+    /**
+     * Defines the header HTML Element.
+     * @public
+     */
+    header: Slot<HTMLElement>;
+    /**
+     * Defines the content HTML Element.
+     * @public
+     */
+    content: DefaultSlot<Node>;
+    /**
+     * Defines the footer HTML Element.
+     * @public
+     */
+    footer: Slot<HTMLElement>;
+    constructor();
+    onEnterDOM(): void;
+    get _contentBottom(): "0" | "2.75rem";
+    get _contentPaddingBottom(): "0" | "3.5rem";
+    get _contentTop(): "2.75rem" | "0rem";
+}
+export default Page;

package/dist/Page.js

@@ -0,0 +1,127 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
+import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
+// Template
+import PageTemplate from "./PageTemplate.js";
+// Styles
+import PageCss from "./generated/themes/Page.css.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-page` is a container component that holds one whole screen of an application.
+ * The page has three distinct areas that can hold content - a header, content area and a footer.
+ * ### Structure
+ * #### Header
+ * The top most area of the page is occupied by the header. The standard header includes a navigation button and a title.
+ * #### Content
+ * The content occupies the main part of the page. Only the content area is scrollable by default.
+ * This can be prevented by setting `noScrolling` to `true`.
+ * #### Footer
+ * The footer is optional and occupies the part above the bottom part of the content. Alternatively, the footer can be fixed at the bottom of the page by enabling the `fixedFooter` property.
+ *
+ * **Note:** `ui5-page` occipues the whole available space of its parent. In order to achieve the intended design you have to make sure
+ * that there is enough space for the `ui5-page` to be rendered.
+ * **Note:** In order for the `ui5-page` to be displayed, the parent element should have fixed height.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents-fiori/dist/Page.js";`
+ * @constructor
+ * @extends UI5Element
+ * @since 1.0.0-rc.12
+ * @public
+ * @csspart content - Used to style the content section of the component
+ */
+let Page = class Page extends UI5Element {
+    constructor() {
+        super();
+        /**
+         * Defines the background color of the `ui5-page`.
+         *
+         * **Note:** When a ui5-list is placed inside the page, we recommend using “List” to ensure better color contrast.
+         * @default "Solid"
+         * @public
+         */
+        this.backgroundDesign = "Solid";
+        /**
+         * Disables vertical scrolling of page content.
+         * If set to true, there will be no vertical scrolling at all.
+         * @default false
+         * @public
+         */
+        this.noScrolling = false;
+        /**
+         * Defines if the footer is fixed at the very bottom of the page.
+         *
+         * **Note:** When set to true the footer is fixed at the very bottom of the page, otherwise it floats over the content with a slight offset from the bottom.
+         * @default false
+         * @public
+         */
+        this.fixedFooter = false;
+        /**
+         * Defines the footer visibility.
+         * @default false
+         * @public
+         */
+        this.hideFooter = false;
+    }
+    onEnterDOM() {
+        this.style.setProperty("--_ui5-page-animation-duration", getAnimationMode() === AnimationMode.None ? "0s" : "0.35s");
+    }
+    get _contentBottom() {
+        return this.fixedFooter && !this.hideFooter ? "2.75rem" : "0";
+    }
+    get _contentPaddingBottom() {
+        return !this.fixedFooter && !this.hideFooter ? "3.5rem" : "0";
+    }
+    get _contentTop() {
+        return this.header.length ? "2.75rem" : "0rem";
+    }
+};
+__decorate([
+    property()
+], Page.prototype, "backgroundDesign", void 0);
+__decorate([
+    property({ type: Boolean })
+], Page.prototype, "noScrolling", void 0);
+__decorate([
+    property({ type: Boolean })
+], Page.prototype, "fixedFooter", void 0);
+__decorate([
+    property({ type: Boolean })
+], Page.prototype, "hideFooter", void 0);
+__decorate([
+    slot()
+], Page.prototype, "header", void 0);
+__decorate([
+    slot({ type: Node, "default": true })
+], Page.prototype, "content", void 0);
+__decorate([
+    slot()
+], Page.prototype, "footer", void 0);
+Page = __decorate([
+    customElement({
+        tag: "ui5-page",
+        languageAware: true,
+        renderer: jsxRenderer,
+        styles: [
+            PageCss,
+        ],
+        template: PageTemplate,
+    })
+], Page);
+Page.define();
+export default Page;
+//# sourceMappingURL=Page.js.map

package/dist/Page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Page.js","sourceRoot":"","sources":["../src/Page.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAC1E,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,EAAE,gBAAgB,EAAE,MAAM,sDAAsD,CAAC;AACxF,OAAO,aAAa,MAAM,qDAAqD,CAAC;AAIhF,WAAW;AACX,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAE7C,SAAS;AACT,OAAO,OAAO,MAAM,gCAAgC,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAUH,IAAM,IAAI,GAAV,MAAM,IAAK,SAAQ,UAAU;IA2D5B;QACC,KAAK,EAAE,CAAC;QA3DT;;;;;;WAMG;QAEH,qBAAgB,GAA8B,OAAO,CAAC;QAEtD;;;;;WAKG;QAEH,gBAAW,GAAG,KAAK,CAAC;QAEpB;;;;;;WAMG;QAEH,gBAAW,GAAG,KAAK,CAAC;QAEpB;;;;WAIG;QAEH,eAAU,GAAG,KAAK,CAAC;IAyBnB,CAAC;IAED,UAAU;QACT,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,gCAAgC,EAAE,gBAAgB,EAAE,KAAK,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IACtH,CAAC;IAED,IAAI,cAAc;QACjB,OAAO,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC;IAC/D,CAAC;IAED,IAAI,qBAAqB;QACxB,OAAO,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC;IAC/D,CAAC;IAED,IAAI,WAAW;QACd,OAAO,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;IAChD,CAAC;CACD,CAAA;AArEA;IADC,QAAQ,EAAE;8CAC2C;AAStD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCACR;AAUpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCACR;AAQpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACT;AAOnB;IADC,IAAI,EAAE;oCACoB;AAO3B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;qCACV;AAO5B;IADC,IAAI,EAAE;oCACoB;AAzDtB,IAAI;IATT,aAAa,CAAC;QACd,GAAG,EAAE,UAAU;QACf,aAAa,EAAE,IAAI;QACnB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE;YACP,OAAO;SACP;QACD,QAAQ,EAAE,YAAY;KACtB,CAAC;GACI,IAAI,CA8ET;AAED,IAAI,CAAC,MAAM,EAAE,CAAC;AAEd,eAAe,IAAI,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport { getAnimationMode } from \"@ui5/webcomponents-base/dist/config/AnimationMode.js\";\nimport AnimationMode from \"@ui5/webcomponents-base/dist/types/AnimationMode.js\";\nimport type PageBackgroundDesign from \"./types/PageBackgroundDesign.js\";\nimport type { Slot, DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\n\n// Template\nimport PageTemplate from \"./PageTemplate.js\";\n\n// Styles\nimport PageCss from \"./generated/themes/Page.css.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-page` is a container component that holds one whole screen of an application.\n * The page has three distinct areas that can hold content - a header, content area and a footer.\n * ### Structure\n * #### Header\n * The top most area of the page is occupied by the header. The standard header includes a navigation button and a title.\n * #### Content\n * The content occupies the main part of the page. Only the content area is scrollable by default.\n * This can be prevented by setting `noScrolling` to `true`.\n * #### Footer\n * The footer is optional and occupies the part above the bottom part of the content. Alternatively, the footer can be fixed at the bottom of the page by enabling the `fixedFooter` property.\n *\n * **Note:** `ui5-page` occipues the whole available space of its parent. In order to achieve the intended design you have to make sure\n * that there is enough space for the `ui5-page` to be rendered.\n * **Note:** In order for the `ui5-page` to be displayed, the parent element should have fixed height.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-fiori/dist/Page.js\";`\n * @constructor\n * @extends UI5Element\n * @since 1.0.0-rc.12\n * @public\n * @csspart content - Used to style the content section of the component\n */\n@customElement({\n\ttag: \"ui5-page\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\tstyles: [\n\t\tPageCss,\n\t],\n\ttemplate: PageTemplate,\n})\nclass Page extends UI5Element {\n\t/**\n\t * Defines the background color of the `ui5-page`.\n\t *\n\t * **Note:** When a ui5-list is placed inside the page, we recommend using “List” to ensure better color contrast.\n\t * @default \"Solid\"\n\t * @public\n\t */\n\t@property()\n\tbackgroundDesign: `${PageBackgroundDesign}` = \"Solid\";\n\n\t/**\n\t * Disables vertical scrolling of page content.\n\t * If set to true, there will be no vertical scrolling at all.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tnoScrolling = false;\n\n\t/**\n\t * Defines if the footer is fixed at the very bottom of the page.\n\t *\n\t * **Note:** When set to true the footer is fixed at the very bottom of the page, otherwise it floats over the content with a slight offset from the bottom.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tfixedFooter = false;\n\n\t/**\n\t * Defines the footer visibility.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\thideFooter = false;\n\n\t/**\n\t * Defines the header HTML Element.\n\t * @public\n\t */\n\t@slot()\n\theader!: Slot<HTMLElement>;\n\n\t/**\n\t * Defines the content HTML Element.\n\t * @public\n\t */\n\t@slot({ type: Node, \"default\": true })\n\tcontent!: DefaultSlot<Node>;\n\n\t/**\n\t * Defines the footer HTML Element.\n\t * @public\n\t */\n\t@slot()\n\tfooter!: Slot<HTMLElement>;\n\n\tconstructor() {\n\t\tsuper();\n\t}\n\n\tonEnterDOM(): void {\n\t\tthis.style.setProperty(\"--_ui5-page-animation-duration\", getAnimationMode() === AnimationMode.None ? \"0s\" : \"0.35s\");\n\t}\n\n\tget _contentBottom() {\n\t\treturn this.fixedFooter && !this.hideFooter ? \"2.75rem\" : \"0\";\n\t}\n\n\tget _contentPaddingBottom() {\n\t\treturn !this.fixedFooter && !this.hideFooter ? \"3.5rem\" : \"0\";\n\t}\n\n\tget _contentTop() {\n\t\treturn this.header.length ? \"2.75rem\" : \"0rem\";\n\t}\n}\n\nPage.define();\n\nexport default Page;\n"]}

package/dist/PageTemplate.d.ts

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

package/dist/PageTemplate.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+export default function PageTemplate() {
+    return (_jsxs("div", { class: "ui5-page-root", children: [_jsx("header", { id: "ui5-page-header", class: "ui5-page-header-root", children: _jsx("slot", { name: "header" }) }), _jsx("section", { part: "content", class: "ui5-page-content-root", style: {
+                    "padding-bottom": this.footer.length && this._contentPaddingBottom,
+                    "scroll-padding-bottom": this.footer.length && this._contentPaddingBottom,
+                    "margin-bottom": this.footer.length && this._contentBottom,
+                    "bottom": this.footer.length && this._contentBottom,
+                    "top": this._contentTop,
+                }, children: _jsx("slot", {}) }), _jsx("footer", { class: "ui5-page-footer-root", children: _jsx("slot", { name: "footer" }) })] }));
+}
+//# sourceMappingURL=PageTemplate.js.map

package/dist/PageTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageTemplate.js","sourceRoot":"","sources":["../src/PageTemplate.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,YAAY;IACnC,OAAO,CACN,eAAK,KAAK,EAAC,eAAe,aACzB,iBACC,EAAE,EAAC,iBAAiB,EACpB,KAAK,EAAC,sBAAsB,YAE5B,eAAM,IAAI,EAAC,QAAQ,GAAQ,GACnB,EAET,kBACC,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,uBAAuB,EAAC,KAAK,EAAE;oBACpC,gBAAgB,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,IAAI,CAAC,qBAAqB;oBAClE,uBAAuB,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,IAAI,CAAC,qBAAqB;oBACzE,eAAe,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,IAAI,CAAC,cAAc;oBAC1D,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,IAAI,CAAC,cAAc;oBACnD,KAAK,EAAE,IAAI,CAAC,WAAW;iBACvB,YACD,gBAAa,GACJ,EAEV,iBAAQ,KAAK,EAAC,sBAAsB,YACnC,eAAM,IAAI,EAAC,QAAQ,GAAQ,GACnB,IACJ,CACN,CAAC;AACH,CAAC","sourcesContent":["import type Page from \"./Page.js\";\n\nexport default function PageTemplate(this: Page) {\n\treturn (\n\t\t<div class=\"ui5-page-root\">\n\t\t\t<header\n\t\t\t\tid=\"ui5-page-header\"\n\t\t\t\tclass=\"ui5-page-header-root\"\n\t\t\t>\n\t\t\t\t<slot name=\"header\"></slot>\n\t\t\t</header>\n\n\t\t\t<section\n\t\t\t\tpart=\"content\"\n\t\t\t\tclass=\"ui5-page-content-root\" style={{\n\t\t\t\t\t\"padding-bottom\": this.footer.length && this._contentPaddingBottom,\n\t\t\t\t\t\"scroll-padding-bottom\": this.footer.length && this._contentPaddingBottom,\n\t\t\t\t\t\"margin-bottom\": this.footer.length && this._contentBottom,\n\t\t\t\t\t\"bottom\": this.footer.length && this._contentBottom,\n\t\t\t\t\t\"top\": this._contentTop,\n\t\t\t\t}}>\n\t\t\t\t<slot></slot>\n\t\t\t</section>\n\n\t\t\t<footer class=\"ui5-page-footer-root\">\n\t\t\t\t<slot name=\"footer\"></slot>\n\t\t\t</footer>\n\t\t</div>\n\t);\n}\n"]}

package/dist/ProductSwitch.d.ts

@@ -0,0 +1,79 @@
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+/**
+ * Interface for components that may be slotted inside `ui5-product-switch` as items
+ * @public
+ */
+interface IProductSwitchItem extends HTMLElement, ITabbable {
+    titleText?: string;
+    subtitleText?: string;
+    icon?: string;
+    target?: string;
+    targetSrc?: string;
+    selected: boolean;
+}
+/**
+ * @class
+ * ### Overview
+ *
+ * The `ui5-product-switch` is an SAP Fiori specific web component that is used in `ui5-shellbar`
+ * and allows the user to easily switch between products.
+ *
+ * ### Keyboard Handling
+ * The `ui5-product-switch` provides advanced keyboard handling.
+ * When focused, the user can use the following keyboard
+ * shortcuts in order to perform a navigation:
+ *
+ * - [Tab] - Move focus to the next interactive element after the `ui5-product-switch`
+ * - [Up] or [Down] - Navigates up and down the items
+ * - [Left] or [Right] - Navigates left and right the items
+ *
+ * ### ES6 Module Import
+ * `import "@ui5/webcomponents-fiori/dist/ProductSwitch.js";`
+ *
+ * `import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";` (for `ui5-product-switch-item`)
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @since 1.0.0-rc.5
+ */
+declare class ProductSwitch extends UI5Element {
+    /**
+     * Indicates how many columns are displayed.
+     * @private
+     */
+    desktopColumns?: number;
+    /**
+     * Defines the items of the `ui5-product-switch`.
+     * @public
+     */
+    items: DefaultSlot<IProductSwitchItem>;
+    _itemNavigation: ItemNavigation;
+    _currentIndex: number;
+    _rowSize: number;
+    _handleResizeBound: ResizeObserverCallback;
+    constructor();
+    static i18nBundle: I18nBundle;
+    static get ROW_MIN_WIDTH(): {
+        ONE_COLUMN: number;
+        THREE_COLUMN: number;
+    };
+    get _ariaLabelText(): string;
+    onEnterDOM(): void;
+    onExitDOM(): void;
+    onBeforeRendering(): void;
+    _handleResize(): void;
+    handleProductSwitchItemClick(e: MouseEvent): void;
+    _onfocusin(e: FocusEvent): void;
+    _setRowSize(size: number): void;
+    _onkeydown(e: KeyboardEvent): void;
+    _handleDown(e: KeyboardEvent): void;
+    _handleUp(e: KeyboardEvent): void;
+    getFocusDomRef(): HTMLElement | undefined;
+}
+export default ProductSwitch;
+export type { IProductSwitchItem, };

package/dist/ProductSwitch.js

@@ -0,0 +1,142 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var ProductSwitch_1;
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import { isDown, isUp, } from "@ui5/webcomponents-base/dist/Keys.js";
+import ProductSwitchTemplate from "./ProductSwitchTemplate.js";
+import { PRODUCT_SWITCH_CONTAINER_LABEL, } from "./generated/i18n/i18n-defaults.js";
+// Styles
+import ProductSwitchCss from "./generated/themes/ProductSwitch.css.js";
+/**
+ * @class
+ * ### Overview
+ *
+ * The `ui5-product-switch` is an SAP Fiori specific web component that is used in `ui5-shellbar`
+ * and allows the user to easily switch between products.
+ *
+ * ### Keyboard Handling
+ * The `ui5-product-switch` provides advanced keyboard handling.
+ * When focused, the user can use the following keyboard
+ * shortcuts in order to perform a navigation:
+ *
+ * - [Tab] - Move focus to the next interactive element after the `ui5-product-switch`
+ * - [Up] or [Down] - Navigates up and down the items
+ * - [Left] or [Right] - Navigates left and right the items
+ *
+ * ### ES6 Module Import
+ * `import "@ui5/webcomponents-fiori/dist/ProductSwitch.js";`
+ *
+ * `import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";` (for `ui5-product-switch-item`)
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @since 1.0.0-rc.5
+ */
+let ProductSwitch = ProductSwitch_1 = class ProductSwitch extends UI5Element {
+    constructor() {
+        super();
+        this._currentIndex = 0;
+        this._rowSize = 4;
+        this._itemNavigation = new ItemNavigation(this, {
+            rowSize: this._rowSize,
+            getItemsCallback: () => this.items,
+        });
+        this._handleResizeBound = this._handleResize.bind(this);
+    }
+    static get ROW_MIN_WIDTH() {
+        return {
+            ONE_COLUMN: 600,
+            THREE_COLUMN: 900,
+        };
+    }
+    get _ariaLabelText() {
+        return ProductSwitch_1.i18nBundle.getText(PRODUCT_SWITCH_CONTAINER_LABEL);
+    }
+    onEnterDOM() {
+        ResizeHandler.register(document.body, this._handleResizeBound);
+    }
+    onExitDOM() {
+        ResizeHandler.deregister(document.body, this._handleResizeBound);
+    }
+    onBeforeRendering() {
+        this.desktopColumns = this.items.length > 6 ? 4 : 3;
+    }
+    _handleResize() {
+        const documentWidth = document.body.clientWidth;
+        if (documentWidth <= this.constructor.ROW_MIN_WIDTH.ONE_COLUMN) {
+            this._setRowSize(1);
+        }
+        else if (documentWidth <= this.constructor.ROW_MIN_WIDTH.THREE_COLUMN || this.items.length <= 6) {
+            this._setRowSize(3);
+        }
+        else {
+            this._setRowSize(4);
+        }
+    }
+    handleProductSwitchItemClick(e) {
+        this.items.forEach(item => { item.selected = false; });
+        e.target.selected = true;
+    }
+    _onfocusin(e) {
+        const target = e.target;
+        this._itemNavigation.setCurrentItem(target);
+        this._currentIndex = this.items.indexOf(target);
+    }
+    _setRowSize(size) {
+        this._rowSize = size;
+        this._itemNavigation.setRowSize(size);
+    }
+    _onkeydown(e) {
+        if (isDown(e)) {
+            this._handleDown(e);
+        }
+        else if (isUp(e)) {
+            this._handleUp(e);
+        }
+    }
+    _handleDown(e) {
+        const itemsLength = this.items.length;
+        if (this._currentIndex + this._rowSize > itemsLength) { // border reached, do nothing
+            e.stopPropagation();
+        }
+    }
+    _handleUp(e) {
+        if (this._currentIndex - this._rowSize < 0) { // border reached, do nothing
+            e.stopPropagation();
+        }
+    }
+    getFocusDomRef() {
+        return this._itemNavigation._getCurrentItem();
+    }
+};
+__decorate([
+    property({ type: Number })
+], ProductSwitch.prototype, "desktopColumns", void 0);
+__decorate([
+    slot({ type: HTMLElement, "default": true, invalidateOnChildChange: true })
+], ProductSwitch.prototype, "items", void 0);
+__decorate([
+    i18n("@ui5/webcomponents-fiori")
+], ProductSwitch, "i18nBundle", void 0);
+ProductSwitch = ProductSwitch_1 = __decorate([
+    customElement({
+        tag: "ui5-product-switch",
+        renderer: jsxRenderer,
+        styles: ProductSwitchCss,
+        template: ProductSwitchTemplate,
+    })
+], ProductSwitch);
+ProductSwitch.define();
+export default ProductSwitch;
+//# sourceMappingURL=ProductSwitch.js.map

package/dist/ProductSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductSwitch.js","sourceRoot":"","sources":["../src/ProductSwitch.ts"],"names":[],"mappings":"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","sourcesContent":["import type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport ItemNavigation from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport type { ITabbable } from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\n\nimport {\n\tisDown,\n\tisUp,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\n\nimport ProductSwitchTemplate from \"./ProductSwitchTemplate.js\";\n\nimport {\n\tPRODUCT_SWITCH_CONTAINER_LABEL,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport ProductSwitchCss from \"./generated/themes/ProductSwitch.css.js\";\n\n/**\n * Interface for components that may be slotted inside `ui5-product-switch` as items\n * @public\n */\ninterface IProductSwitchItem extends HTMLElement, ITabbable {\n\ttitleText?: string,\n\tsubtitleText?: string,\n\ticon?: string,\n\ttarget?: string,\n\ttargetSrc?: string,\n\tselected: boolean,\n}\n\n/**\n * @class\n * ### Overview\n *\n * The `ui5-product-switch` is an SAP Fiori specific web component that is used in `ui5-shellbar`\n * and allows the user to easily switch between products.\n *\n * ### Keyboard Handling\n * The `ui5-product-switch` provides advanced keyboard handling.\n * When focused, the user can use the following keyboard\n * shortcuts in order to perform a navigation:\n *\n * - [Tab] - Move focus to the next interactive element after the `ui5-product-switch`\n * - [Up] or [Down] - Navigates up and down the items\n * - [Left] or [Right] - Navigates left and right the items\n *\n * ### ES6 Module Import\n * `import \"@ui5/webcomponents-fiori/dist/ProductSwitch.js\";`\n *\n * `import \"@ui5/webcomponents-fiori/dist/ProductSwitchItem.js\";` (for `ui5-product-switch-item`)\n * @constructor\n * @extends UI5Element\n * @public\n * @since 1.0.0-rc.5\n */\n@customElement({\n\ttag: \"ui5-product-switch\",\n\trenderer: jsxRenderer,\n\tstyles: ProductSwitchCss,\n\ttemplate: ProductSwitchTemplate,\n})\nclass ProductSwitch extends UI5Element {\n\t/**\n\t * Indicates how many columns are displayed.\n\t * @private\n\t */\n\t@property({ type: Number })\n\tdesktopColumns?: number;\n\n\t/**\n\t * Defines the items of the `ui5-product-switch`.\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, \"default\": true, invalidateOnChildChange: true })\n\titems!: DefaultSlot<IProductSwitchItem>\n\n\t_itemNavigation: ItemNavigation;\n\t_currentIndex: number;\n\t_rowSize: number;\n\t_handleResizeBound: ResizeObserverCallback;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._currentIndex = 0;\n\t\tthis._rowSize = 4;\n\n\t\tthis._itemNavigation = new ItemNavigation(this, {\n\t\t\trowSize: this._rowSize,\n\t\t\tgetItemsCallback: () => this.items,\n\t\t});\n\n\t\tthis._handleResizeBound = this._handleResize.bind(this);\n\t}\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\n\n\tstatic get ROW_MIN_WIDTH() {\n\t\treturn {\n\t\t\tONE_COLUMN: 600,\n\t\t\tTHREE_COLUMN: 900,\n\t\t};\n\t}\n\n\tget _ariaLabelText() {\n\t\treturn ProductSwitch.i18nBundle.getText(PRODUCT_SWITCH_CONTAINER_LABEL);\n\t}\n\n\tonEnterDOM() {\n\t\tResizeHandler.register(document.body, this._handleResizeBound);\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(document.body, this._handleResizeBound);\n\t}\n\n\tonBeforeRendering() {\n\t\tthis.desktopColumns = this.items.length > 6 ? 4 : 3;\n\t}\n\n\t_handleResize() {\n\t\tconst documentWidth = document.body.clientWidth;\n\n\t\tif (documentWidth <= (this.constructor as typeof ProductSwitch).ROW_MIN_WIDTH.ONE_COLUMN) {\n\t\t\tthis._setRowSize(1);\n\t\t} else if (documentWidth <= (this.constructor as typeof ProductSwitch).ROW_MIN_WIDTH.THREE_COLUMN || this.items.length <= 6) {\n\t\t\tthis._setRowSize(3);\n\t\t} else {\n\t\t\tthis._setRowSize(4);\n\t\t}\n\t}\n\n\thandleProductSwitchItemClick(e: MouseEvent) {\n\t\tthis.items.forEach(item => { item.selected = false; });\n\t\t(e.target as IProductSwitchItem).selected = true;\n\t}\n\n\t_onfocusin(e: FocusEvent) {\n\t\tconst target = e.target as IProductSwitchItem;\n\n\t\tthis._itemNavigation.setCurrentItem(target);\n\t\tthis._currentIndex = this.items.indexOf(target);\n\t}\n\n\t_setRowSize(size: number) {\n\t\tthis._rowSize = size;\n\t\tthis._itemNavigation.setRowSize(size);\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (isDown(e)) {\n\t\t\tthis._handleDown(e);\n\t\t} else if (isUp(e)) {\n\t\t\tthis._handleUp(e);\n\t\t}\n\t}\n\n\t_handleDown(e: KeyboardEvent) {\n\t\tconst itemsLength = this.items.length;\n\t\tif (this._currentIndex + this._rowSize > itemsLength) { // border reached, do nothing\n\t\t\te.stopPropagation();\n\t\t}\n\t}\n\n\t_handleUp(e: KeyboardEvent) {\n\t\tif (this._currentIndex - this._rowSize < 0) { // border reached, do nothing\n\t\t\te.stopPropagation();\n\t\t}\n\t}\n\n\tgetFocusDomRef() {\n\t\treturn this._itemNavigation._getCurrentItem();\n\t}\n}\n\nProductSwitch.define();\n\nexport default ProductSwitch;\n\nexport type {\n\tIProductSwitchItem,\n};\n"]}