@ui5/webcomponents-fiori 1.21.0 → 1.22.0-rc.0

package/dist/Page.js.map

@@ -1 +1 @@
-{"version":3,"file":"Page.js","sourceRoot":"","sources":["../src/Page.ts"],"names":[],"mappings":"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","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.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport MediaRange from \"@ui5/webcomponents-base/dist/MediaRange.js\";\nimport browserScrollbarCSS from \"@ui5/webcomponents/dist/generated/themes/BrowserScrollbar.css.js\";\nimport PageBackgroundDesign from \"./types/PageBackgroundDesign.js\";\n\n// Template\nimport PageTemplate from \"./generated/templates/PageTemplate.lit.js\";\n\n// Styles\nimport PageCss from \"./generated/themes/Page.css.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * The <code>ui5-page</code> 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 * <h3>Structure</h3>\n * <h4>Header</h4>\n * The top most area of the page is occupied by the header. The standard header includes a navigation button and a title.\n * <h4>Content</h4>\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  <code>enableScrolling</code> to <code>false</code>.\n * <h4>Footer</h4>\n * The footer is optional and occupies the fixed bottom part of the page. Alternatively, the footer can be floating above the bottom part of the content.\n * This is enabled with the <code>floatingFooter</code> property.\n *\n * <b>Note:</b> <code>ui5-page</code> 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 <code>ui5-page</code> to be rendered.\n * <b>Note:</b> In order for the <code>ui5-page</code> to be displayed, the parent element should have fixed height.\n *\n * <h3>CSS Shadow Parts</h3>\n *\n * <ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.\n * <br>\n * The <code>ui5-page</code> exposes the following CSS Shadow Parts:\n * <ul>\n * <li>content - Used to style the content section of the component</li>\n * </ul>\n *\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@ui5/webcomponents-fiori/dist/Page.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @alias sap.ui.webc.fiori.Page\n * @extends sap.ui.webc.base.UI5Element\n * @tagname ui5-page\n * @since 1.0.0-rc.12\n * @public\n */\n@customElement({\n\ttag: \"ui5-page\",\n\tlanguageAware: true,\n\trenderer: litRender,\n\tstyles: [\n\t\tbrowserScrollbarCSS,\n\t\tPageCss,\n\t],\n\ttemplate: PageTemplate,\n})\nclass Page extends UI5Element {\n\t/**\n\t * Defines the background color of the <code>ui5-page</code>.\n\t * <br><br>\n\t * <b>Note:</b> When a ui5-list is placed inside the page, we recommend using “List” to ensure better color contrast.\n\t * <br><br>\n\t *\n\t * @type {sap.ui.webc.fiori.types.PageBackgroundDesign}\n\t * @name sap.ui.webc.fiori.Page.prototype.backgroundDesign\n\t * @defaultvalue \"Solid\"\n\t * @public\n\t */\n\t@property({ type: PageBackgroundDesign, defaultValue: PageBackgroundDesign.Solid })\n\tbackgroundDesign!: `${PageBackgroundDesign}`;\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 *\n\t * @type {boolean}\n\t * @name sap.ui.webc.fiori.Page.prototype.disableScrolling\n\t * @defaultvalue false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisableScrolling!: boolean;\n\n\t/**\n\t * Defines if the footer should float over the content.\n\t * <br><br>\n\t * <b>Note:</b> When set to true the footer floats over the content with a slight offset from the bottom, otherwise it is fixed at the very bottom of the page.\n\t * @type {boolean}\n\t * @name sap.ui.webc.fiori.Page.prototype.floatingFooter\n\t * @defaultvalue true\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tfloatingFooter!: boolean;\n\n\t/**\n\t * Defines the footer visibility.\n\t *\n\t * @type {boolean}\n\t * @name sap.ui.webc.fiori.Page.prototype.hideFooter\n\t * @defaultvalue false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\thideFooter!: boolean;\n\n\t/**\n\t * Defines the current media query size.\n\t *\n\t * @type {string}\n\t * @private\n\t * @since 1.0.0-rc.15\n\t */\n\t@property()\n\tmediaRange!: string;\n\n\t/**\n\t * Defines the header HTML Element.\n\t *\n\t * @type {sap.ui.webc.fiori.IBar}\n\t * @name sap.ui.webc.fiori.Page.prototype.header\n\t * @slot\n\t * @public\n\t */\n\t@slot()\n\theader!: Array<HTMLElement>;\n\n\t/**\n\t * Defines the content HTML Element.\n\t *\n\t * @type {HTMLElement[]}\n\t * @name sap.ui.webc.fiori.Page.prototype.default\n\t * @slot content\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, \"default\": true })\n\tcontent!: Array<HTMLElement>;\n\n\t/**\n\t * Defines the footer HTML Element.\n\t *\n\t * @type {sap.ui.webc.fiori.IBar}\n\t * @name sap.ui.webc.fiori.Page.prototype.footer\n\t * @slot\n\t * @public\n\t */\n\t@slot()\n\tfooter!: Array<HTMLElement>;\n\n\t_updateMediaRange: ResizeObserverCallback;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._updateMediaRange = this.updateMediaRange.bind(this);\n\t}\n\n\tonEnterDOM() {\n\t\tResizeHandler.register(this, this._updateMediaRange);\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._updateMediaRange);\n\t}\n\n\tupdateMediaRange() {\n\t\tthis.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef()!.offsetWidth);\n\t}\n\n\tget _contentBottom() {\n\t\treturn !this.floatingFooter && !this.hideFooter ? \"2.75rem\" : \"0\";\n\t}\n\n\tget _contentPaddingBottom() {\n\t\treturn this.floatingFooter && !this.hideFooter ? \"3.5rem\" : \"0\";\n\t}\n\n\tget _contentTop() {\n\t\treturn this.header.length ? \"2.75rem\" : \"0rem\";\n\t}\n\n\tget styles() {\n\t\treturn {\n\t\t\tcontent: {\n\t\t\t\t\"padding-bottom\": this.footer.length && this._contentPaddingBottom,\n\t\t\t\t\"bottom\": this.footer.length && this._contentBottom,\n\t\t\t\t\"top\": this._contentTop,\n\t\t\t},\n\t\t\tfooter: {},\n\t\t};\n\t}\n}\n\nPage.define();\n\nexport default Page;\n"]}
+{"version":3,"file":"Page.js","sourceRoot":"","sources":["../src/Page.ts"],"names":[],"mappings":"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","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.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport MediaRange from \"@ui5/webcomponents-base/dist/MediaRange.js\";\nimport browserScrollbarCSS from \"@ui5/webcomponents/dist/generated/themes/BrowserScrollbar.css.js\";\nimport PageBackgroundDesign from \"./types/PageBackgroundDesign.js\";\n\n// Template\nimport PageTemplate from \"./generated/templates/PageTemplate.lit.js\";\n\n// Styles\nimport PageCss from \"./generated/themes/Page.css.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * The <code>ui5-page</code> 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 * <h3>Structure</h3>\n * <h4>Header</h4>\n * The top most area of the page is occupied by the header. The standard header includes a navigation button and a title.\n * <h4>Content</h4>\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  <code>enableScrolling</code> to <code>false</code>.\n * <h4>Footer</h4>\n * The footer is optional and occupies the fixed bottom part of the page. Alternatively, the footer can be floating above the bottom part of the content.\n * This is enabled with the <code>floatingFooter</code> property.\n *\n * <b>Note:</b> <code>ui5-page</code> 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 <code>ui5-page</code> to be rendered.\n * <b>Note:</b> In order for the <code>ui5-page</code> to be displayed, the parent element should have fixed height.\n *\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@ui5/webcomponents-fiori/dist/Page.js\";</code>\n *\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: litRender,\n\tstyles: [\n\t\tbrowserScrollbarCSS,\n\t\tPageCss,\n\t],\n\ttemplate: PageTemplate,\n})\nclass Page extends UI5Element {\n\t/**\n\t * Defines the background color of the <code>ui5-page</code>.\n\t * <br><br>\n\t * <b>Note:</b> When a ui5-list is placed inside the page, we recommend using “List” to ensure better color contrast.\n\t * <br><br>\n\t *\n\t * @default \"Solid\"\n\t * @public\n\t */\n\t@property({ type: PageBackgroundDesign, defaultValue: PageBackgroundDesign.Solid })\n\tbackgroundDesign!: `${PageBackgroundDesign}`;\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 *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisableScrolling!: boolean;\n\n\t/**\n\t * Defines if the footer should float over the content.\n\t * <br><br>\n\t * <b>Note:</b> When set to true the footer floats over the content with a slight offset from the bottom, otherwise it is fixed at the very bottom of the page.\n\t *\n\t * @default true\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tfloatingFooter!: boolean;\n\n\t/**\n\t * Defines the footer visibility.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\thideFooter!: boolean;\n\n\t/**\n\t * Defines the current media query size.\n\t *\n\t * @private\n\t * @since 1.0.0-rc.15\n\t */\n\t@property()\n\tmediaRange!: string;\n\n\t/**\n\t * Defines the header HTML Element.\n\t *\n\t * @public\n\t */\n\t@slot()\n\theader!: Array<HTMLElement>;\n\n\t/**\n\t * Defines the content HTML Element.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, \"default\": true })\n\tcontent!: Array<HTMLElement>;\n\n\t/**\n\t * Defines the footer HTML Element.\n\t *\n\t * @public\n\t */\n\t@slot()\n\tfooter!: Array<HTMLElement>;\n\n\t_updateMediaRange: ResizeObserverCallback;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._updateMediaRange = this.updateMediaRange.bind(this);\n\t}\n\n\tonEnterDOM() {\n\t\tResizeHandler.register(this, this._updateMediaRange);\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._updateMediaRange);\n\t}\n\n\tupdateMediaRange() {\n\t\tthis.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef()!.offsetWidth);\n\t}\n\n\tget _contentBottom() {\n\t\treturn !this.floatingFooter && !this.hideFooter ? \"2.75rem\" : \"0\";\n\t}\n\n\tget _contentPaddingBottom() {\n\t\treturn this.floatingFooter && !this.hideFooter ? \"3.5rem\" : \"0\";\n\t}\n\n\tget _contentTop() {\n\t\treturn this.header.length ? \"2.75rem\" : \"0rem\";\n\t}\n\n\tget styles() {\n\t\treturn {\n\t\t\tcontent: {\n\t\t\t\t\"padding-bottom\": this.footer.length && this._contentPaddingBottom,\n\t\t\t\t\"bottom\": this.footer.length && this._contentBottom,\n\t\t\t\t\"top\": this._contentTop,\n\t\t\t},\n\t\t\tfooter: {},\n\t\t};\n\t}\n}\n\nPage.define();\n\nexport default Page;\n"]}

package/dist/ProductSwitch.d.ts

@@ -2,7 +2,7 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import type ProductSwitchItem from "./ProductSwitchItem.js";
+import type IProductSwitchItem from "./ProductSwitchItem.js";
 /**
  * @class
  * <h3 class="comment-api-title">Overview</h3>
@@ -29,11 +29,7 @@ import type ProductSwitchItem from "./ProductSwitchItem.js";
  * <br>
  * <code>import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";</code> (for <code>ui5-product-switch-item</code>)
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.fiori.ProductSwitch
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-product-switch
- * @appenddocs sap.ui.webc.fiori.ProductSwitchItem
+ * @extends UI5Element
  * @public
  * @since 1.0.0-rc.5
  */
@@ -47,12 +43,9 @@ declare class ProductSwitch extends UI5Element {
     /**
      * Defines the items of the <code>ui5-product-switch</code>.
      *
-     * @type {sap.ui.webc.fiori.IProductSwitchItem[]}
-     * @name sap.ui.webc.fiori.ProductSwitch.prototype.default
-     * @slot items
      * @public
      */
-    items: Array<ProductSwitchItem>;
+    items: Array<IProductSwitchItem>;
     _itemNavigation: ItemNavigation;
     _currentIndex: number;
     _rowSize: number;

package/dist/ProductSwitch.js

@@ -45,11 +45,7 @@ import ProductSwitchCss from "./generated/themes/ProductSwitch.css.js";
  * <br>
  * <code>import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";</code> (for <code>ui5-product-switch-item</code>)
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.fiori.ProductSwitch
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-product-switch
- * @appenddocs sap.ui.webc.fiori.ProductSwitchItem
+ * @extends UI5Element
  * @public
  * @since 1.0.0-rc.5
  */

package/dist/ProductSwitch.js.map

@@ -1 +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 { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport ItemNavigation 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.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\n\nimport {\n\tisDown,\n\tisUp,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\n\nimport ProductSwitchTemplate from \"./generated/templates/ProductSwitchTemplate.lit.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\";\nimport type ProductSwitchItem from \"./ProductSwitchItem.js\";\n\n/**\n * @class\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * The <code>ui5-product-switch</code> is an SAP Fiori specific web component that is used in <code>ui5-shellbar</code>\n * and allows the user to easily switch between products.\n * <br><br>\n *\n * <h3>Keyboard Handling</h3>\n * The <code>ui5-product-switch</code> provides advanced keyboard handling.\n * When focused, the user can use the following keyboard\n * shortcuts in order to perform a navigation:\n * <br>\n * <ul>\n * <li>[TAB] - Move focus to the next interactive element after the <code>ui5-product-switch</code></li>\n * <li>[UP/DOWN] - Navigates up and down the items </li>\n * <li>[LEFT/RIGHT] - Navigates left and right the items</li>\n * </ul>\n * <br>\n * <br>\n *\n * <h3>ES6 Module Import</h3>\n * <code>import \"@ui5/webcomponents-fiori/dist/ProductSwitch.js\";</code>\n * <br>\n * <code>import \"@ui5/webcomponents-fiori/dist/ProductSwitchItem.js\";</code> (for <code>ui5-product-switch-item</code>)\n * @constructor\n * @author SAP SE\n * @alias sap.ui.webc.fiori.ProductSwitch\n * @extends sap.ui.webc.base.UI5Element\n * @tagname ui5-product-switch\n * @appenddocs sap.ui.webc.fiori.ProductSwitchItem\n * @public\n * @since 1.0.0-rc.5\n */\n@customElement({\n\ttag: \"ui5-product-switch\",\n\trenderer: litRender,\n\tstyles: ProductSwitchCss,\n\ttemplate: ProductSwitchTemplate,\n})\nclass ProductSwitch extends UI5Element {\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/**\n\t * Indicates how many columns are displayed.\n\t * @private\n\t */\n\t@property({ validator: Integer })\n\tdesktopColumns?: number;\n\n\t/**\n\t * Defines the items of the <code>ui5-product-switch</code>.\n\t *\n\t * @type {sap.ui.webc.fiori.IProductSwitchItem[]}\n\t * @name sap.ui.webc.fiori.ProductSwitch.prototype.default\n\t * @slot items\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, \"default\": true })\n\titems!: Array<ProductSwitchItem>\n\n\t_itemNavigation: ItemNavigation;\n\t_currentIndex: number;\n\t_rowSize: number;\n\t_handleResizeBound: ResizeObserverCallback;\n\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\tstatic async onDefine() {\n\t\tProductSwitch.i18nBundle = await getI18nBundle(\"@ui5/webcomponents-fiori\");\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 ProductSwitchItem).selected = true;\n\t}\n\n\t_onfocusin(e: FocusEvent) {\n\t\tconst target = e.target as ProductSwitchItem;\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\nProductSwitch.define();\n\nexport default ProductSwitch;\n"]}
+{"version":3,"file":"ProductSwitch.js","sourceRoot":"","sources":["../src/ProductSwitch.ts"],"names":[],"mappings":";;;;;;;AACA,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAC3E,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,cAAc,MAAM,yDAAyD,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,aAAa,MAAM,wDAAwD,CAAC;AAEnF,OAAO,OAAO,MAAM,+CAA+C,CAAC;AACpE,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAE7E,OAAO,EACN,MAAM,EACN,IAAI,GACJ,MAAM,sCAAsC,CAAC;AAE9C,OAAO,qBAAqB,MAAM,oDAAoD,CAAC;AAEvF,OAAO,EACN,8BAA8B,GAC9B,MAAM,mCAAmC,CAAC;AAE3C,SAAS;AACT,OAAO,gBAAgB,MAAM,yCAAyC,CAAC;AAGvE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAOH,IAAM,aAAa,qBAAnB,MAAM,aAAc,SAAQ,UAAU;IACrC;QACC,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;QACvB,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;QAElB,IAAI,CAAC,eAAe,GAAG,IAAI,cAAc,CAAC,IAAI,EAAE;YAC/C,OAAO,EAAE,IAAI,CAAC,QAAQ;YACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK;SAClC,CAAC,CAAC;QAEH,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACzD,CAAC;IAwBD,MAAM,KAAK,aAAa;QACvB,OAAO;YACN,UAAU,EAAE,GAAG;YACf,YAAY,EAAE,GAAG;SACjB,CAAC;IACH,CAAC;IAED,MAAM,CAAC,KAAK,CAAC,QAAQ;QACpB,eAAa,CAAC,UAAU,GAAG,MAAM,aAAa,CAAC,0BAA0B,CAAC,CAAC;IAC5E,CAAC;IAED,IAAI,cAAc;QACjB,OAAO,eAAa,CAAC,UAAU,CAAC,OAAO,CAAC,8BAA8B,CAAC,CAAC;IACzE,CAAC;IAED,UAAU;QACT,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAChE,CAAC;IAED,SAAS;QACR,aAAa,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAClE,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACrD,CAAC;IAED,aAAa;QACZ,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC;QAEhD,IAAI,aAAa,IAAK,IAAI,CAAC,WAAoC,CAAC,aAAa,CAAC,UAAU,EAAE;YACzF,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;SACpB;aAAM,IAAI,aAAa,IAAK,IAAI,CAAC,WAAoC,CAAC,aAAa,CAAC,YAAY,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,EAAE;YAC5H,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;SACpB;aAAM;YACN,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;SACpB;IACF,CAAC;IAED,4BAA4B,CAAC,CAAa;QACzC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QACtD,CAAC,CAAC,MAA6B,CAAC,QAAQ,GAAG,IAAI,CAAC;IAClD,CAAC;IAED,UAAU,CAAC,CAAa;QACvB,MAAM,MAAM,GAAG,CAAC,CAAC,MAA4B,CAAC;QAE9C,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;QAC5C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IACjD,CAAC;IAED,WAAW,CAAC,IAAY;QACvB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IACvC,CAAC;IAED,UAAU,CAAC,CAAgB;QAC1B,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE;YACd,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;SACpB;aAAM,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE;YACnB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;SAClB;IACF,CAAC;IAED,WAAW,CAAC,CAAgB;QAC3B,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;QACtC,IAAI,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,QAAQ,GAAG,WAAW,EAAE,EAAE,6BAA6B;YACpF,CAAC,CAAC,eAAe,EAAE,CAAC;SACpB;IACF,CAAC;IAED,SAAS,CAAC,CAAgB;QACzB,IAAI,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,EAAE,EAAE,6BAA6B;YAC1E,CAAC,CAAC,eAAe,EAAE,CAAC;SACpB;IACF,CAAC;CACD,CAAA;AA7FA;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC;qDACT;AAQxB;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;4CACZ;AA5B5B,aAAa;IANlB,aAAa,CAAC;QACd,GAAG,EAAE,oBAAoB;QACzB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,gBAAgB;QACxB,QAAQ,EAAE,qBAAqB;KAC/B,CAAC;GACI,aAAa,CAiHlB;AAED,aAAa,CAAC,MAAM,EAAE,CAAC;AAEvB,eAAe,aAAa,CAAC","sourcesContent":["import type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport ItemNavigation 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.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\n\nimport {\n\tisDown,\n\tisUp,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\n\nimport ProductSwitchTemplate from \"./generated/templates/ProductSwitchTemplate.lit.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\";\nimport type IProductSwitchItem from \"./ProductSwitchItem.js\";\n\n/**\n * @class\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * The <code>ui5-product-switch</code> is an SAP Fiori specific web component that is used in <code>ui5-shellbar</code>\n * and allows the user to easily switch between products.\n * <br><br>\n *\n * <h3>Keyboard Handling</h3>\n * The <code>ui5-product-switch</code> provides advanced keyboard handling.\n * When focused, the user can use the following keyboard\n * shortcuts in order to perform a navigation:\n * <br>\n * <ul>\n * <li>[TAB] - Move focus to the next interactive element after the <code>ui5-product-switch</code></li>\n * <li>[UP/DOWN] - Navigates up and down the items </li>\n * <li>[LEFT/RIGHT] - Navigates left and right the items</li>\n * </ul>\n * <br>\n * <br>\n *\n * <h3>ES6 Module Import</h3>\n * <code>import \"@ui5/webcomponents-fiori/dist/ProductSwitch.js\";</code>\n * <br>\n * <code>import \"@ui5/webcomponents-fiori/dist/ProductSwitchItem.js\";</code> (for <code>ui5-product-switch-item</code>)\n * @constructor\n * @extends UI5Element\n * @public\n * @since 1.0.0-rc.5\n */\n@customElement({\n\ttag: \"ui5-product-switch\",\n\trenderer: litRender,\n\tstyles: ProductSwitchCss,\n\ttemplate: ProductSwitchTemplate,\n})\nclass ProductSwitch extends UI5Element {\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/**\n\t * Indicates how many columns are displayed.\n\t * @private\n\t */\n\t@property({ validator: Integer })\n\tdesktopColumns?: number;\n\n\t/**\n\t * Defines the items of the <code>ui5-product-switch</code>.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, \"default\": true })\n\titems!: Array<IProductSwitchItem>\n\n\t_itemNavigation: ItemNavigation;\n\t_currentIndex: number;\n\t_rowSize: number;\n\t_handleResizeBound: ResizeObserverCallback;\n\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\tstatic async onDefine() {\n\t\tProductSwitch.i18nBundle = await getI18nBundle(\"@ui5/webcomponents-fiori\");\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\nProductSwitch.define();\n\nexport default ProductSwitch;\n"]}

package/dist/ProductSwitchItem.d.ts

@@ -1,5 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import type { IProductSwitchItem } from "./Interfaces.js";
 /**
  * @class
  * <h3 class="comment-api-title">Overview</h3>
@@ -22,30 +22,23 @@ import { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.
  * <code>import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";</code>
  *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.fiori.ProductSwitchItem
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-product-switch-item
+ * @extends UI5Element
  * @public
- * @implements sap.ui.webc.fiori.IProductSwitchItem
+ * @implements {IProductSwitchItem}
  * @since 1.0.0-rc.5
  */
-declare class ProductSwitchItem extends UI5Element implements ITabbable {
+declare class ProductSwitchItem extends UI5Element implements IProductSwitchItem {
     constructor();
     /**
      * Defines the title of the component.
-     * @type {string}
-     * @name sap.ui.webc.fiori.ProductSwitchItem.prototype.titleText
-     * @defaultvalue ""
+     * @default ""
      * @since 1.0.0-rc.15
      * @public
      */
     titleText: string;
     /**
      * Defines the subtitle of the component.
-     * @type {string}
-     * @name sap.ui.webc.fiori.ProductSwitchItem.prototype.subtitleText
-     * @defaultvalue ""
+     * @default ""
      * @since 1.0.0-rc.15
      * @public
      */
@@ -59,9 +52,7 @@ declare class ProductSwitchItem extends UI5Element implements ITabbable {
      *
      * See all the available icons in the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html">Icon Explorer</ui5-link>.
      *
-     * @type {string}
-     * @name sap.ui.webc.fiori.ProductSwitchItem.prototype.icon
-     * @defaultvalue ""
+     * @default ""
      * @public
      */
     icon: string;
@@ -76,17 +67,13 @@ declare class ProductSwitchItem extends UI5Element implements ITabbable {
      * <li><code>_parent</code></li>
      * <li><code>_search</code></li>
      * </ul>
-     *
-     * @type {string}
-     * @name sap.ui.webc.fiori.ProductSwitchItem.prototype.target
+     * @default "_self"
      * @public
      */
     target: string;
     /**
      * Defines the component target URI. Supports standard hyperlink behavior.
-     * @type {string}
-     * @name sap.ui.webc.fiori.ProductSwitchItem.prototype.targetSrc
-     * @defaultvalue ""
+     * @default ""
      * @public
      */
     targetSrc: string;

package/dist/ProductSwitchItem.js

@@ -8,7 +8,6 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isSpace, isEnter, isSpaceShift } from "@ui5/webcomponents-base/dist/Keys.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
-import "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
@@ -37,12 +36,9 @@ import ProductSwitchItemCss from "./generated/themes/ProductSwitchItem.css.js";
  * <code>import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";</code>
  *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.fiori.ProductSwitchItem
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-product-switch-item
+ * @extends UI5Element
  * @public
- * @implements sap.ui.webc.fiori.IProductSwitchItem
+ * @implements {IProductSwitchItem}
  * @since 1.0.0-rc.5
  */
 let ProductSwitchItem = class ProductSwitchItem extends UI5Element {
@@ -136,7 +132,6 @@ ProductSwitchItem = __decorate([
      * Fired when the <code>ui5-product-switch-item</code> is activated either with a
      * click/tap or by using the Enter or Space key.
      *
-     * @event sap.ui.webc.fiori.ProductSwitchItem#click
      * @public
      */
     ,

package/dist/ProductSwitchItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProductSwitchItem.js","sourceRoot":"","sources":["../src/ProductSwitchItem.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { isSpace, isEnter, isSpaceShift } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport { ITabbable } from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport ProductSwitchItemTemplate from \"./generated/templates/ProductSwitchItemTemplate.lit.js\";\n\n// Styles\nimport ProductSwitchItemCss from \"./generated/themes/ProductSwitchItem.css.js\";\n\n/**\n * @class\n * <h3 class=\"comment-api-title\">Overview</h3>\n * The <code>ui5-product-switch-item</code> web component represents the items displayed in the\n * <code>ui5-product-switch</code> web component.\n * <br><br>\n * <b>Note:</b> <code>ui5-product-switch-item</code> is not supported when used outside of <code>ui5-product-switch</code>.\n * <br><br>\n *\n * <h3>Keyboard Handling</h3>\n * The <code>ui5-product-switch</code> provides advanced keyboard handling.\n * When focused, the user can use the following keyboard\n * shortcuts in order to perform a navigation:\n * <br>\n * <ul>\n * <li>[SPACE/ENTER/RETURN] - Trigger <code>ui5-click</code> event</li>\n * </ul>\n *\n * <h3>ES6 Module Import</h3>\n * <code>import \"@ui5/webcomponents-fiori/dist/ProductSwitchItem.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @alias sap.ui.webc.fiori.ProductSwitchItem\n * @extends sap.ui.webc.base.UI5Element\n * @tagname ui5-product-switch-item\n * @public\n * @implements sap.ui.webc.fiori.IProductSwitchItem\n * @since 1.0.0-rc.5\n */\n@customElement({\n\ttag: \"ui5-product-switch-item\",\n\trenderer: litRender,\n\tstyles: ProductSwitchItemCss,\n\ttemplate: ProductSwitchItemTemplate,\n\tdependencies: [Icon],\n})\n/**\n * Fired when the <code>ui5-product-switch-item</code> is activated either with a\n * click/tap or by using the Enter or Space key.\n *\n * @event sap.ui.webc.fiori.ProductSwitchItem#click\n * @public\n */\n@event(\"click\")\n@event(\"_focused\")\nclass ProductSwitchItem extends UI5Element implements ITabbable {\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._deactivate = () => {\n\t\t\tif (this.active) {\n\t\t\t\tthis.active = false;\n\t\t\t}\n\t\t};\n\t}\n\n\t/**\n\t * Defines the title of the component.\n\t * @type {string}\n\t * @name sap.ui.webc.fiori.ProductSwitchItem.prototype.titleText\n\t * @defaultvalue \"\"\n\t * @since 1.0.0-rc.15\n\t * @public\n\t */\n\t@property()\n\ttitleText!: string;\n\n\t/**\n\t * Defines the subtitle of the component.\n\t * @type {string}\n\t * @name sap.ui.webc.fiori.ProductSwitchItem.prototype.subtitleText\n\t * @defaultvalue \"\"\n\t * @since 1.0.0-rc.15\n\t * @public\n\t */\n\t@property()\n\tsubtitleText!: string;\n\n\t/**\n\t * Defines the icon to be displayed as a graphical element within the component.\n\t * <br><br>\n\t * Example:\n\t * <br>\n\t * <pre>ui5-product-switch-item icon=\"palette\"</pre>\n\t *\n\t * See all the available icons in the <ui5-link target=\"_blank\" href=\"https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\">Icon Explorer</ui5-link>.\n\t *\n\t * @type {string}\n\t * @name sap.ui.webc.fiori.ProductSwitchItem.prototype.icon\n\t * @defaultvalue \"\"\n\t * @public\n\t */\n\t@property()\n\ticon!: string;\n\n\t/**\n\t * Defines a target where the <code>targetSrc</code> content must be open.\n\t * <br><br>\n\t * Available options are:\n\t * <ul>\n\t * <li><code>_self</code></li>\n\t * <li><code>_top</code></li>\n\t * <li><code>_blank</code></li>\n\t * <li><code>_parent</code></li>\n\t * <li><code>_search</code></li>\n\t * </ul>\n\t *\n\t * @type {string}\n\t * @name sap.ui.webc.fiori.ProductSwitchItem.prototype.target\n\t * @public\n\t */\n\t@property({ defaultValue: \"_self\" })\n\ttarget!: string;\n\n\t/**\n\t * Defines the component target URI. Supports standard hyperlink behavior.\n\t * @type {string}\n\t * @name sap.ui.webc.fiori.ProductSwitchItem.prototype.targetSrc\n\t * @defaultvalue \"\"\n\t * @public\n\t */\n\t@property()\n\ttargetSrc!: string;\n\n\t/**\n\t * Used to switch the active state (pressed or not) of the component.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tprivate active!: boolean;\n\n\t/**\n\t * Indicates whether the element is focused.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tprivate focused!: boolean;\n\n\t/**\n\t * Used to set the selected state of the component. Only one selected in a sequence.\n\t * <b>Note:</b> Set by the <code>ProductSwitch</code>\n\t */\n\t@property({ type: Boolean })\n\tselected!: boolean;\n\n\t/**\n\t * Defines the component tabindex.\n\t */\n\t@property({ defaultValue: \"-1\", noAttribute: true })\n\t_tabIndex!: string;\n\n\t_deactivate: () => void;\n\n\tonEnterDOM() {\n\t\tdocument.addEventListener(\"mouseup\", this._deactivate);\n\t}\n\n\tonExitDOM() {\n\t\tdocument.removeEventListener(\"mouseup\", this._deactivate);\n\t}\n\n\t_onmousedown() {\n\t\tthis.active = true;\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (isSpace(e) || isEnter(e)) {\n\t\t\tthis.active = true;\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis._fireItemClick();\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (isSpace(e) || isEnter(e)) {\n\t\t\tthis.active = false;\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\tif (isSpaceShift(e)) {\n\t\t\t\te.stopPropagation();\n\t\t\t}\n\t\t\tthis._fireItemClick();\n\t\t}\n\t}\n\n\t_onfocusout() {\n\t\tthis.active = false;\n\t\tthis.focused = false;\n\t}\n\n\t_onfocusin(e: FocusEvent) {\n\t\tthis.focused = true;\n\n\t\tthis.fireEvent(\"_focused\", e);\n\t}\n\n\t_fireItemClick() {\n\t\tthis.fireEvent(\"click\", { item: this });\n\t}\n}\n\nProductSwitchItem.define();\n\nexport default ProductSwitchItem;\n"]}
+{"version":3,"file":"ProductSwitchItem.js","sourceRoot":"","sources":["../src/ProductSwitchItem.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { isSpace, isEnter, isSpaceShift } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport ProductSwitchItemTemplate from \"./generated/templates/ProductSwitchItemTemplate.lit.js\";\n\n// Styles\nimport ProductSwitchItemCss from \"./generated/themes/ProductSwitchItem.css.js\";\nimport type { IProductSwitchItem } from \"./Interfaces.js\";\n\n/**\n * @class\n * <h3 class=\"comment-api-title\">Overview</h3>\n * The <code>ui5-product-switch-item</code> web component represents the items displayed in the\n * <code>ui5-product-switch</code> web component.\n * <br><br>\n * <b>Note:</b> <code>ui5-product-switch-item</code> is not supported when used outside of <code>ui5-product-switch</code>.\n * <br><br>\n *\n * <h3>Keyboard Handling</h3>\n * The <code>ui5-product-switch</code> provides advanced keyboard handling.\n * When focused, the user can use the following keyboard\n * shortcuts in order to perform a navigation:\n * <br>\n * <ul>\n * <li>[SPACE/ENTER/RETURN] - Trigger <code>ui5-click</code> event</li>\n * </ul>\n *\n * <h3>ES6 Module Import</h3>\n * <code>import \"@ui5/webcomponents-fiori/dist/ProductSwitchItem.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n * @implements {IProductSwitchItem}\n * @since 1.0.0-rc.5\n */\n@customElement({\n\ttag: \"ui5-product-switch-item\",\n\trenderer: litRender,\n\tstyles: ProductSwitchItemCss,\n\ttemplate: ProductSwitchItemTemplate,\n\tdependencies: [Icon],\n})\n/**\n * Fired when the <code>ui5-product-switch-item</code> is activated either with a\n * click/tap or by using the Enter or Space key.\n *\n * @public\n */\n@event(\"click\")\n@event(\"_focused\")\nclass ProductSwitchItem extends UI5Element implements IProductSwitchItem {\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._deactivate = () => {\n\t\t\tif (this.active) {\n\t\t\t\tthis.active = false;\n\t\t\t}\n\t\t};\n\t}\n\n\t/**\n\t * Defines the title of the component.\n\t * @default \"\"\n\t * @since 1.0.0-rc.15\n\t * @public\n\t */\n\t@property()\n\ttitleText!: string;\n\n\t/**\n\t * Defines the subtitle of the component.\n\t * @default \"\"\n\t * @since 1.0.0-rc.15\n\t * @public\n\t */\n\t@property()\n\tsubtitleText!: string;\n\n\t/**\n\t * Defines the icon to be displayed as a graphical element within the component.\n\t * <br><br>\n\t * Example:\n\t * <br>\n\t * <pre>ui5-product-switch-item icon=\"palette\"</pre>\n\t *\n\t * See all the available icons in the <ui5-link target=\"_blank\" href=\"https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\">Icon Explorer</ui5-link>.\n\t *\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\ticon!: string;\n\n\t/**\n\t * Defines a target where the <code>targetSrc</code> content must be open.\n\t * <br><br>\n\t * Available options are:\n\t * <ul>\n\t * <li><code>_self</code></li>\n\t * <li><code>_top</code></li>\n\t * <li><code>_blank</code></li>\n\t * <li><code>_parent</code></li>\n\t * <li><code>_search</code></li>\n\t * </ul>\n\t * @default \"_self\"\n\t * @public\n\t */\n\t@property({ defaultValue: \"_self\" })\n\ttarget!: string;\n\n\t/**\n\t * Defines the component target URI. Supports standard hyperlink behavior.\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\ttargetSrc!: string;\n\n\t/**\n\t * Used to switch the active state (pressed or not) of the component.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tprivate active!: boolean;\n\n\t/**\n\t * Indicates whether the element is focused.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tprivate focused!: boolean;\n\n\t/**\n\t * Used to set the selected state of the component. Only one selected in a sequence.\n\t * <b>Note:</b> Set by the <code>ProductSwitch</code>\n\t */\n\t@property({ type: Boolean })\n\tselected!: boolean;\n\n\t/**\n\t * Defines the component tabindex.\n\t */\n\t@property({ defaultValue: \"-1\", noAttribute: true })\n\t_tabIndex!: string;\n\n\t_deactivate: () => void;\n\n\tonEnterDOM() {\n\t\tdocument.addEventListener(\"mouseup\", this._deactivate);\n\t}\n\n\tonExitDOM() {\n\t\tdocument.removeEventListener(\"mouseup\", this._deactivate);\n\t}\n\n\t_onmousedown() {\n\t\tthis.active = true;\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (isSpace(e) || isEnter(e)) {\n\t\t\tthis.active = true;\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis._fireItemClick();\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (isSpace(e) || isEnter(e)) {\n\t\t\tthis.active = false;\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\tif (isSpaceShift(e)) {\n\t\t\t\te.stopPropagation();\n\t\t\t}\n\t\t\tthis._fireItemClick();\n\t\t}\n\t}\n\n\t_onfocusout() {\n\t\tthis.active = false;\n\t\tthis.focused = false;\n\t}\n\n\t_onfocusin(e: FocusEvent) {\n\t\tthis.focused = true;\n\n\t\tthis.fireEvent(\"_focused\", e);\n\t}\n\n\t_fireItemClick() {\n\t\tthis.fireEvent(\"click\", { item: this });\n\t}\n}\n\nProductSwitchItem.define();\n\nexport default ProductSwitchItem;\n"]}

package/dist/ShellBar.d.ts

@@ -2,14 +2,15 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type { ListSelectionChangeEventDetail } from "@ui5/webcomponents/dist/List.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
-import Button from "@ui5/webcomponents/dist/Button.js";
 import type Input from "@ui5/webcomponents/dist/Input.js";
+import type { IButton } from "@ui5/webcomponents/dist/Interfaces.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/search.js";
 import "@ui5/webcomponents-icons/dist/bell.js";
 import "@ui5/webcomponents-icons/dist/overflow.js";
 import "@ui5/webcomponents-icons/dist/grid.js";
 import type { Timeout, ClassMap } from "@ui5/webcomponents-base/dist/types.js";
+import type ListItemBase from "@ui5/webcomponents/dist/ListItemBase.js";
 import type ShellBarItem from "./ShellBarItem.js";
 type AccessibilityRoles = {
     logoRole?: string;
@@ -89,15 +90,6 @@ interface IShelBarItemInfo {
  * <li>product-switch</li>
  * </ul>
  *
- * <h3>CSS Shadow Parts</h3>
- *
- * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
- * <br>
- * The <code>ui5-shellbar</code> exposes the following CSS Shadow Parts:
- * <ul>
- * <li>root - Used to style the outermost wrapper of the <code>ui5-shellbar</code></li>
- * </ul>
- *
  * <h3>Keyboard Handling</h3>
  *
  * <h4>Fast Navigation</h4>
@@ -109,12 +101,10 @@ interface IShelBarItemInfo {
  * <h3>ES6 Module Import</h3>
  * <code>import "@ui5/webcomponents-fiori/dist/ShellBar";</code>
  *
+ * @csspart root - Used to style the outermost wrapper of the <code>ui5-shellbar</code>
+ *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.fiori.ShellBar
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-shellbar
- * @appenddocs sap.ui.webc.fiori.ShellBarItem
+ * @extends UI5Element
  * @public
  * @since 0.8.0
  */
@@ -123,9 +113,7 @@ declare class ShellBar extends UI5Element {
      * Defines the <code>primaryTitle</code>.
      * <br><br>
      * <b>Note:</b> The <code>primaryTitle</code> would be hidden on S screen size (less than approx. 700px).
-     * @type {string}
-     * @defaultvalue ""
-     * @name sap.ui.webc.fiori.ShellBar.prototype.primaryTitle
+     * @default ""
      * @public
      */
     primaryTitle: string;
@@ -133,34 +121,26 @@ declare class ShellBar extends UI5Element {
      * Defines the <code>secondaryTitle</code>.
      * <br><br>
      * <b>Note:</b> The <code>secondaryTitle</code> would be hidden on S and M screen sizes (less than approx. 1300px).
-     * @type {string}
-     * @defaultvalue ""
-     * @name sap.ui.webc.fiori.ShellBar.prototype.secondaryTitle
+     * @default ""
      * @public
      */
     secondaryTitle: string;
     /**
      * Defines the <code>notificationsCount</code>,
      * displayed in the notification icon top-right corner.
-     * @type {string}
-     * @defaultvalue ""
-     * @name sap.ui.webc.fiori.ShellBar.prototype.notificationsCount
+     * @default ""
      * @public
      */
     notificationsCount: string;
     /**
      * Defines, if the notification icon would be displayed.
-     * @type {boolean}
-     * @defaultvalue false
-     * @name sap.ui.webc.fiori.ShellBar.prototype.showNotifications
+     * @default false
      * @public
      */
     showNotifications: boolean;
     /**
      * Defines, if the product switch icon would be displayed.
-     * @type {boolean}
-     * @defaultvalue false
-     * @name sap.ui.webc.fiori.ShellBar.prototype.showProductSwitch
+     * @default false
      * @public
      */
     showProductSwitch: boolean;
@@ -168,18 +148,14 @@ declare class ShellBar extends UI5Element {
      * Defines, if the product CoPilot icon would be displayed.
      * <br><b>Note:</b> By default the co-pilot is displayed as static SVG.
      * If you need an animated co-pilot, you can import the <code>"@ui5/webcomponents-fiori/dist/features/CoPilotAnimation.js"</code> module as add-on feature.
-     * @type {boolean}
-     * @defaultvalue false
-     * @name sap.ui.webc.fiori.ShellBar.prototype.showCoPilot
+     * @default false
      * @public
      */
     showCoPilot: boolean;
     /**
      * Defines, if the Search Field would be displayed when there is a valid <code>searchField</code> slot.
      * <br><b>Note:</b> By default the Search Field is not displayed.
-     * @type {boolean}
-     * @defaultvalue false
-     * @name sap.ui.webc.fiori.ShellBar.prototype.showSearchField
+     * @default false
      * @public
      */
     showSearchField: boolean;
@@ -188,9 +164,7 @@ declare class ShellBar extends UI5Element {
      *
      * It supports the following fields:
      *  - <code>logoRole</code>: the accessibility role for the <code>logo</code>
-     *
-     * @type {object}
-     * @name sap.ui.webc.fiori.ShellBar.prototype.accessibilityRoles
+     * @default {}
      * @public
      * @since 1.6.0
      */
@@ -203,8 +177,7 @@ declare class ShellBar extends UI5Element {
      * - <code>profileButtonTitle</code>: defines the tooltip for the profile button
      * - <code>logoTitle</code>: defines the tooltip for the logo
      *
-     * @type {object}
-     * @name sap.ui.webc.fiori.ShellBar.prototype.accessibilityTexts
+     * @default {}
      * @public
      * @since 1.1.0
      */
@@ -232,8 +205,7 @@ declare class ShellBar extends UI5Element {
      * 			</ul>
      * 		</li>
      * </ul>
-     * @type {object}
-     * @name sap.ui.webc.fiori.ShellBar.prototype.accessibilityAttributes
+     * @default {}
      * @public
      * @since 1.10.0
      */
@@ -261,9 +233,6 @@ declare class ShellBar extends UI5Element {
      * <b>Note:</b>
      * You can use the &nbsp;&lt;ui5-shellbar-item>&lt;/ui5-shellbar-item>.
      *
-     * @type {sap.ui.webc.fiori.IShellBarItem[]}
-     * @name sap.ui.webc.fiori.ShellBar.prototype.default
-     * @slot items
      * @public
      */
     items: Array<ShellBarItem>;
@@ -273,9 +242,6 @@ declare class ShellBar extends UI5Element {
      *
      * Note: We recommend not using the <code>size</code> attribute of <code>ui5-avatar</code> because
      * it should have specific size by design in the context of <code>ui5-shellbar</code> profile.
-     * @type {sap.ui.webc.main.IAvatar}
-     * @name sap.ui.webc.fiori.ShellBar.prototype.profile
-     * @slot profile
      * @since 1.0.0-rc.6
      * @public
      */
@@ -283,9 +249,6 @@ declare class ShellBar extends UI5Element {
     /**
      * Defines the logo of the <code>ui5-shellbar</code>.
      * For example, you can use <code>ui5-avatar</code> or <code>img</code> elements as logo.
-     * @type {sap.ui.webc.main.IAvatar}
-     * @name sap.ui.webc.fiori.ShellBar.prototype.logo
-     * @slot
      * @since 1.0.0-rc.8
      * @public
      */
@@ -296,19 +259,13 @@ declare class ShellBar extends UI5Element {
      * <b>Note:</b>
      * You can use the &nbsp;&lt;ui5-li>&lt;/ui5-li> and its ancestors.
      *
-     * @type {sap.ui.webc.main.IListItem[]}
-     * @name sap.ui.webc.fiori.ShellBar.prototype.menuItems
-     * @slot
      * @since 0.10
      * @public
      */
-    menuItems: Array<HTMLElement>;
+    menuItems: Array<ListItemBase>;
     /**
      * Defines the <code>ui5-input</code>, that will be used as a search field.
      *
-     * @type {sap.ui.webc.main.IInput}
-     * @name sap.ui.webc.fiori.ShellBar.prototype.searchField
-     * @slot
      * @public
      */
     searchField: Array<Input>;
@@ -317,12 +274,9 @@ declare class ShellBar extends UI5Element {
      * We encourage this slot to be used for a back or home button.
      * It gets overstyled to match ShellBar's styling.
      *
-     * @type {sap.ui.webc.main.IButton}
-     * @name sap.ui.webc.fiori.ShellBar.prototype.startButton
-     * @slot
      * @public
      */
-    startButton: Array<Button>;
+    startButton: Array<IButton>;
     static i18nBundle: I18nBundle;
     overflowPopover?: Popover | null;
     menuPopover?: Popover | null;
@@ -356,8 +310,6 @@ declare class ShellBar extends UI5Element {
      * Closes the overflow area.
      * Useful to manually close the overflow after having suppressed automatic closing with preventDefault() of ShellbarItem's press event
      * @public
-     * @method
-     * @name sap.ui.webc.fiori.ShellBar#closeOverflow
      */
     closeOverflow(): void;
     _handleBarBreakpoints(): string;
@@ -377,61 +329,49 @@ declare class ShellBar extends UI5Element {
     _handleProductSwitchPress(e: MouseEvent): void;
     /**
      * Returns the <code>logo</code> DOM ref.
-     * @type {HTMLElement}
-     * @name sap.ui.webc.fiori.ShellBar.prototype.logoDomRef
      * @public
-     * @readonly
+     * @default null
      * @since 1.0.0-rc.16
      */
-    get logoDomRef(): Button | null;
+    get logoDomRef(): HTMLElement | null;
     /**
      * Returns the <code>copilot</code> DOM ref.
-     * @type {HTMLElement}
-     * @name sap.ui.webc.fiori.ShellBar.prototype.copilotDomRef
      * @public
-     * @readonly
+     * @default null
      * @since 1.0.0-rc.16
      */
-    get copilotDomRef(): Button | null;
+    get copilotDomRef(): HTMLElement | null;
     /**
      * Returns the <code>notifications</code> icon DOM ref.
-     * @type {HTMLElement}
-     * @name sap.ui.webc.fiori.ShellBar.prototype.notificationsDomRef
      * @public
-     * @readonly
+     * @default null
      * @since 1.0.0-rc.16
      */
-    get notificationsDomRef(): Button | null;
+    get notificationsDomRef(): HTMLElement | null;
     /**
      * Returns the <code>overflow</code> icon DOM ref.
-     * @type {HTMLElement}
-     * @name sap.ui.webc.fiori.ShellBar.prototype.overflowDomRef
      * @public
-     * @readonly
+     * @default null
      * @since 1.0.0-rc.16
      */
-    get overflowDomRef(): Button | null;
+    get overflowDomRef(): HTMLElement | null;
     /**
      * Returns the <code>profile</code> icon DOM ref.
-     * @type {HTMLElement}
-     * @name sap.ui.webc.fiori.ShellBar.prototype.profileDomRef
      * @public
-     * @readonly
+     * @default null
      * @since 1.0.0-rc.16
      */
-    get profileDomRef(): Button | null;
+    get profileDomRef(): HTMLElement | null;
     /**
      * Returns the <code>product-switch</code> icon DOM ref.
-     * @type {HTMLElement}
-     * @name sap.ui.webc.fiori.ShellBar.prototype.productSwitchDomRef
      * @public
-     * @readonly
+     * @default null
      * @since 1.0.0-rc.16
      */
-    get productSwitchDomRef(): Button | null;
+    get productSwitchDomRef(): HTMLElement | null;
     /**
      * Returns all items that will be placed in the right of the bar as icons / dom elements.
-     * @param {boolean} showOverflowButton Determines if overflow button should be visible (not overflowing)
+     * @param showOverflowButton Determines if overflow button should be visible (not overflowing)
      */
     _getAllItems(showOverflowButton: boolean): IShelBarItemInfo[];
     _updateItemsInfo(newItems: Array<IShelBarItemInfo>): void;