@ui5/webcomponents-fiori 1.23.0-rc.5 → 1.23.0

package/dist/NotificationListItemBase.d.ts

@@ -14,8 +14,7 @@ type NotificationListItemBaseCloseEventDetail = {
 /**
  * @class
  *
- * The base class of the <code>NotificationListItem</code> and <code>NotificationListGroupItem</code>.
- *
+ * The base class of the `NotificationListItem` and `NotificationListGroupItem`.
  * @constructor
  * @extends ListItemBase
  * @since 1.0.0-rc.8
@@ -23,28 +22,27 @@ type NotificationListItemBaseCloseEventDetail = {
  */
 declare class NotificationListItemBase extends ListItemBase {
     /**
-     * Defines the <code>titleText</code> of the item.
+     * Defines the `titleText` of the item.
      * @default ""
      * @public
      */
     titleText: string;
     /**
-     * Defines the <code>priority</code> of the item.
-     *
+     * Defines the `priority` of the item.
      * @default "None"
      * @public
      */
     priority: `${Priority}`;
     /**
-     * Defines if the <code>close</code> button would be displayed.
+     * Defines if the `close` button would be displayed.
      * @default false
      * @public
      */
     showClose: boolean;
     /**
-     * Defines if the <code>notification</code> is new or has been already read.
-     * <br><br>
-     * <b>Note:</b> if set to <code>false</code> the <code>titleText</code> has bold font,
+     * Defines if the `notification` is new or has been already read.
+     *
+     * **Note:** if set to `false` the `titleText` has bold font,
      * if set to true - it has a normal font.
      * @default false
      * @public
@@ -59,16 +57,14 @@ declare class NotificationListItemBase extends ListItemBase {
     busy: boolean;
     /**
      * Defines the delay in milliseconds, after which the busy indicator will show up for this component.
-     *
      * @default 1000
      * @public
      */
     busyDelay: number;
     /**
      * Defines the actions, displayed in the top-right area.
-     * <br><br>
-     * <b>Note:</b> use the <code>ui5-notification-action</code> component.
      *
+     * **Note:** use the `ui5-notification-action` component.
      * @public
      */
     actions: Array<NotificationAction>;

package/dist/NotificationListItemBase.js

@@ -37,8 +37,7 @@ const ICON_PER_PRIORITY = {
 /**
  * @class
  *
- * The base class of the <code>NotificationListItem</code> and <code>NotificationListGroupItem</code>.
- *
+ * The base class of the `NotificationListItem` and `NotificationListGroupItem`.
  * @constructor
  * @extends ListItemBase
  * @since 1.0.0-rc.8
@@ -155,8 +154,7 @@ NotificationListItemBase = NotificationListItemBase_1 = __decorate([
         staticAreaTemplate: NotificationOverflowActionsPopoverTemplate,
     })
     /**
-     * Fired when the <code>Close</code> button is pressed.
-     *
+     * Fired when the `Close` button is pressed.
      * @param {HTMLElement} item the closed item.
      * @public
      */

package/dist/NotificationListItemBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationListItemBase.js","sourceRoot":"","sources":["../src/NotificationListItemBase.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport { isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { getEventMark } from \"@ui5/webcomponents-base/dist/MarkedEvents.js\";\nimport ListItemBase from \"@ui5/webcomponents/dist/ListItemBase.js\";\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\nimport Priority from \"@ui5/webcomponents/dist/types/Priority.js\";\nimport type Popover from \"@ui5/webcomponents/dist/Popover.js\";\nimport type NotificationAction from \"./NotificationAction.js\";\n\n// Icons\nimport \"@ui5/webcomponents-icons/dist/decline.js\";\nimport \"@ui5/webcomponents-icons/dist/message-success.js\";\nimport \"@ui5/webcomponents-icons/dist/message-error.js\";\nimport \"@ui5/webcomponents-icons/dist/message-warning.js\";\nimport \"@ui5/webcomponents-icons/dist/overflow.js\";\n\n// Templates\nimport NotificationOverflowActionsPopoverTemplate from \"./generated/templates/NotificationOverflowActionsPopoverTemplate.lit.js\";\n\n// Styles\nimport NotificationOverflowActionsPopoverCss from \"./generated/themes/NotificationOverflowActionsPopover.css.js\";\n\n/**\n * Defines the icons corresponding to the notification's priority.\n */\nconst ICON_PER_PRIORITY = {\n\t[Priority.High]: \"message-error\",\n\t[Priority.Medium]: \"message-warning\",\n\t[Priority.Low]: \"message-success\",\n\t[Priority.None]: \"\",\n};\n\ntype NotificationListItemBaseCloseEventDetail = {\n\titem: HTMLElement,\n};\n\n/**\n * @class\n *\n * The base class of the <code>NotificationListItem</code> and <code>NotificationListGroupItem</code>.\n *\n * @constructor\n * @extends ListItemBase\n * @since 1.0.0-rc.8\n * @public\n */\n@customElement({\n\tstaticAreaStyles: NotificationOverflowActionsPopoverCss,\n\tstaticAreaTemplate: NotificationOverflowActionsPopoverTemplate,\n})\n\n/**\n * Fired when the <code>Close</code> button is pressed.\n *\n * @param {HTMLElement} item the closed item.\n * @public\n */\n@event<NotificationListItemBaseCloseEventDetail>(\"close\", {\n\t detail: {\n\t\t/**\n\t\t * @public\n\t\t */\n\t\titem: {\n\t\t\ttype: HTMLElement,\n\t\t},\n\t},\n})\nclass NotificationListItemBase extends ListItemBase {\n\t/**\n\t * Defines the <code>titleText</code> of the item.\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\ttitleText!: string;\n\n\t/**\n\t * Defines the <code>priority</code> of the item.\n\t *\n\t * @default \"None\"\n\t * @public\n\t */\n\t@property({ type: Priority, defaultValue: Priority.None })\n\tpriority!: `${Priority}`;\n\n\t/**\n\t * Defines if the <code>close</code> button would be displayed.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowClose!: boolean;\n\n\t/**\n\t * Defines if the <code>notification</code> is new or has been already read.\n\t * <br><br>\n\t * <b>Note:</b> if set to <code>false</code> the <code>titleText</code> 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!: boolean;\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\tbusy!: boolean;\n\n\t/**\n\t * Defines the delay in milliseconds, after which the busy indicator will show up for this component.\n\t *\n\t * @default 1000\n\t * @public\n\t */\n\t@property({ validator: Integer, defaultValue: 1000 })\n\tbusyDelay!: number;\n\n\t/**\n\t * Defines the actions, displayed in the top-right area.\n\t * <br><br>\n\t * <b>Note:</b> use the <code>ui5-notification-action</code> component.\n\t *\n\t * @public\n\t */\n\t@slot()\n\tactions!: Array<NotificationAction>\n\n\tstatic i18nFioriBundle: I18nBundle;\n\n\tget hasTitleText() {\n\t\treturn !!this.titleText.length;\n\t}\n\n\tget hasPriority() {\n\t\treturn this.priority !== Priority.None;\n\t}\n\n\tget priorityIcon() {\n\t\treturn ICON_PER_PRIORITY[this.priority];\n\t}\n\n\tget overflowButtonDOM() {\n\t\treturn this.shadowRoot!.querySelector<HTMLElement>(\".ui5-nli-overflow-btn\")!;\n\t}\n\n\tget showOverflow() {\n\t\treturn !!this.overflowActions.length;\n\t}\n\n\tget overflowActions() {\n\t\tif (this.actions.length <= 1) {\n\t\t\treturn [];\n\t\t}\n\n\t\treturn this.actionsInfo;\n\t}\n\n\tget standardActions() {\n\t\tif (this.actions.length > 1) {\n\t\t\treturn [];\n\t\t}\n\n\t\treturn this.actionsInfo;\n\t}\n\n\tget actionsInfo() {\n\t\treturn this.actions.map(action => {\n\t\t\treturn {\n\t\t\t\ticon: action.icon,\n\t\t\t\ttext: action.text,\n\t\t\t\tpress: this._onCustomActionClick.bind(this),\n\t\t\t\trefItemid: action._id,\n\t\t\t\tdisabled: action.disabled ? true : undefined,\n\t\t\t\tdesign: action.design,\n\t\t\t};\n\t\t});\n\t}\n\n\t/**\n\t * Event handlers\n\t */\n\t_onBtnCloseClick() {\n\t\tthis.fireEvent<NotificationListItemBaseCloseEventDetail>(\"close\", { item: this });\n\t}\n\n\t_onBtnOverflowClick() {\n\t\tthis.openOverflow();\n\t}\n\n\t_onCustomActionClick(e: MouseEvent) {\n\t\tconst refItemId = (e.target as Element).getAttribute(\"data-ui5-external-action-item-id\");\n\n\t\tif (refItemId) {\n\t\t\tthis.getActionByID(refItemId)!.fireClickEvent(e);\n\t\t\tthis.closeOverflow();\n\t\t}\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tsuper._onkeydown(e);\n\n\t\tif (getEventMark(e) === \"button\") {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\tgetActionByID(id: string) {\n\t\treturn this.actions.find(action => action._id === id);\n\t}\n\n\tasync openOverflow() {\n\t\tconst overflowPopover = await this.getOverflowPopover();\n\t\toverflowPopover.showAt(this.overflowButtonDOM);\n\t}\n\n\tasync closeOverflow() {\n\t\tconst overflowPopover = await this.getOverflowPopover();\n\t\toverflowPopover.close();\n\t}\n\n\tasync getOverflowPopover() {\n\t\tconst staticAreaItem = await this.getStaticAreaItemDomRef();\n\t\treturn staticAreaItem!.querySelector<Popover>(\".ui5-notification-overflow-popover\")!;\n\t}\n\n\tstatic async onDefine() {\n\t\tNotificationListItemBase.i18nFioriBundle = await getI18nBundle(\"@ui5/webcomponents-fiori\");\n\t}\n}\n\nexport default NotificationListItemBase;\nexport type {\n\tNotificationListItemBaseCloseEventDetail,\n};\n"]}
+{"version":3,"file":"NotificationListItemBase.js","sourceRoot":"","sources":["../src/NotificationListItemBase.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport { isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { getEventMark } from \"@ui5/webcomponents-base/dist/MarkedEvents.js\";\nimport ListItemBase from \"@ui5/webcomponents/dist/ListItemBase.js\";\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\nimport Priority from \"@ui5/webcomponents/dist/types/Priority.js\";\nimport type Popover from \"@ui5/webcomponents/dist/Popover.js\";\nimport type NotificationAction from \"./NotificationAction.js\";\n\n// Icons\nimport \"@ui5/webcomponents-icons/dist/decline.js\";\nimport \"@ui5/webcomponents-icons/dist/message-success.js\";\nimport \"@ui5/webcomponents-icons/dist/message-error.js\";\nimport \"@ui5/webcomponents-icons/dist/message-warning.js\";\nimport \"@ui5/webcomponents-icons/dist/overflow.js\";\n\n// Templates\nimport NotificationOverflowActionsPopoverTemplate from \"./generated/templates/NotificationOverflowActionsPopoverTemplate.lit.js\";\n\n// Styles\nimport NotificationOverflowActionsPopoverCss from \"./generated/themes/NotificationOverflowActionsPopover.css.js\";\n\n/**\n * Defines the icons corresponding to the notification's priority.\n */\nconst ICON_PER_PRIORITY = {\n\t[Priority.High]: \"message-error\",\n\t[Priority.Medium]: \"message-warning\",\n\t[Priority.Low]: \"message-success\",\n\t[Priority.None]: \"\",\n};\n\ntype NotificationListItemBaseCloseEventDetail = {\n\titem: HTMLElement,\n};\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 */\n@customElement({\n\tstaticAreaStyles: NotificationOverflowActionsPopoverCss,\n\tstaticAreaTemplate: NotificationOverflowActionsPopoverTemplate,\n})\n\n/**\n * Fired when the `Close` button is pressed.\n * @param {HTMLElement} item the closed item.\n * @public\n */\n@event<NotificationListItemBaseCloseEventDetail>(\"close\", {\n\t detail: {\n\t\t/**\n\t\t * @public\n\t\t */\n\t\titem: {\n\t\t\ttype: HTMLElement,\n\t\t},\n\t},\n})\nclass NotificationListItemBase extends ListItemBase {\n\t/**\n\t * Defines the `titleText` of the item.\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\ttitleText!: string;\n\n\t/**\n\t * Defines the `priority` of the item.\n\t * @default \"None\"\n\t * @public\n\t */\n\t@property({ type: Priority, defaultValue: Priority.None })\n\tpriority!: `${Priority}`;\n\n\t/**\n\t * Defines if the `close` button would be displayed.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowClose!: boolean;\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!: boolean;\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\tbusy!: boolean;\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({ validator: Integer, defaultValue: 1000 })\n\tbusyDelay!: number;\n\n\t/**\n\t * Defines the actions, displayed in the top-right area.\n\t *\n\t * **Note:** use the `ui5-notification-action` component.\n\t * @public\n\t */\n\t@slot()\n\tactions!: Array<NotificationAction>\n\n\tstatic i18nFioriBundle: I18nBundle;\n\n\tget hasTitleText() {\n\t\treturn !!this.titleText.length;\n\t}\n\n\tget hasPriority() {\n\t\treturn this.priority !== Priority.None;\n\t}\n\n\tget priorityIcon() {\n\t\treturn ICON_PER_PRIORITY[this.priority];\n\t}\n\n\tget overflowButtonDOM() {\n\t\treturn this.shadowRoot!.querySelector<HTMLElement>(\".ui5-nli-overflow-btn\")!;\n\t}\n\n\tget showOverflow() {\n\t\treturn !!this.overflowActions.length;\n\t}\n\n\tget overflowActions() {\n\t\tif (this.actions.length <= 1) {\n\t\t\treturn [];\n\t\t}\n\n\t\treturn this.actionsInfo;\n\t}\n\n\tget standardActions() {\n\t\tif (this.actions.length > 1) {\n\t\t\treturn [];\n\t\t}\n\n\t\treturn this.actionsInfo;\n\t}\n\n\tget actionsInfo() {\n\t\treturn this.actions.map(action => {\n\t\t\treturn {\n\t\t\t\ticon: action.icon,\n\t\t\t\ttext: action.text,\n\t\t\t\tpress: this._onCustomActionClick.bind(this),\n\t\t\t\trefItemid: action._id,\n\t\t\t\tdisabled: action.disabled ? true : undefined,\n\t\t\t\tdesign: action.design,\n\t\t\t};\n\t\t});\n\t}\n\n\t/**\n\t * Event handlers\n\t */\n\t_onBtnCloseClick() {\n\t\tthis.fireEvent<NotificationListItemBaseCloseEventDetail>(\"close\", { item: this });\n\t}\n\n\t_onBtnOverflowClick() {\n\t\tthis.openOverflow();\n\t}\n\n\t_onCustomActionClick(e: MouseEvent) {\n\t\tconst refItemId = (e.target as Element).getAttribute(\"data-ui5-external-action-item-id\");\n\n\t\tif (refItemId) {\n\t\t\tthis.getActionByID(refItemId)!.fireClickEvent(e);\n\t\t\tthis.closeOverflow();\n\t\t}\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tsuper._onkeydown(e);\n\n\t\tif (getEventMark(e) === \"button\") {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\tgetActionByID(id: string) {\n\t\treturn this.actions.find(action => action._id === id);\n\t}\n\n\tasync openOverflow() {\n\t\tconst overflowPopover = await this.getOverflowPopover();\n\t\toverflowPopover.showAt(this.overflowButtonDOM);\n\t}\n\n\tasync closeOverflow() {\n\t\tconst overflowPopover = await this.getOverflowPopover();\n\t\toverflowPopover.close();\n\t}\n\n\tasync getOverflowPopover() {\n\t\tconst staticAreaItem = await this.getStaticAreaItemDomRef();\n\t\treturn staticAreaItem!.querySelector<Popover>(\".ui5-notification-overflow-popover\")!;\n\t}\n\n\tstatic async onDefine() {\n\t\tNotificationListItemBase.i18nFioriBundle = await getI18nBundle(\"@ui5/webcomponents-fiori\");\n\t}\n}\n\nexport default NotificationListItemBase;\nexport type {\n\tNotificationListItemBaseCloseEventDetail,\n};\n"]}

package/dist/Page.d.ts

@@ -4,28 +4,27 @@ import PageBackgroundDesign from "./types/PageBackgroundDesign.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-page</code> is a container component that holds one whole screen of an application.
+ * 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.
- * <h3>Structure</h3>
- * <h4>Header</h4>
+ * ### Structure
+ * #### Header
  * The top most area of the page is occupied by the header. The standard header includes a navigation button and a title.
- * <h4>Content</h4>
+ * #### Content
  * The content occupies the main part of the page. Only the content area is scrollable by default.
- * This can be prevented by setting  <code>enableScrolling</code> to <code>false</code>.
- * <h4>Footer</h4>
+ * This can be prevented by setting  `enableScrolling` to `false`.
+ * #### Footer
  * 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.
- * This is enabled with the <code>floatingFooter</code> property.
+ * This is enabled with the `floatingFooter` property.
  *
- * <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
- * that there is enough space for the <code>ui5-page</code> to be rendered.
- * <b>Note:</b> In order for the <code>ui5-page</code> to be displayed, the parent element should have fixed height.
+ * **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.
  *
- * <h3>ES6 Module Import</h3>
- *
- * <code>import "@ui5/webcomponents-fiori/dist/Page.js";</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents-fiori/dist/Page.js";`
  * @constructor
  * @extends UI5Element
  * @since 1.0.0-rc.12
@@ -34,11 +33,9 @@ import PageBackgroundDesign from "./types/PageBackgroundDesign.js";
  */
 declare class Page extends UI5Element {
     /**
-     * Defines the background color of the <code>ui5-page</code>.
-     * <br><br>
-     * <b>Note:</b> When a ui5-list is placed inside the page, we recommend using “List” to ensure better color contrast.
-     * <br><br>
+     * 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
      */
@@ -46,49 +43,42 @@ declare class Page extends UI5Element {
     /**
      * Disables vertical scrolling of page content.
      * If set to true, there will be no vertical scrolling at all.
-     *
      * @default false
      * @public
      */
     disableScrolling: boolean;
     /**
      * Defines if the footer should float over the content.
-     * <br><br>
-     * <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.
      *
+     * **Note:** 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.
      * @default true
      * @public
      */
     floatingFooter: boolean;
     /**
      * Defines the footer visibility.
-     *
      * @default false
      * @public
      */
     hideFooter: boolean;
     /**
      * Defines the current media query size.
-     *
      * @private
      * @since 1.0.0-rc.15
      */
     mediaRange: string;
     /**
      * Defines the header HTML Element.
-     *
      * @public
      */
     header: Array<HTMLElement>;
     /**
      * Defines the content HTML Element.
-     *
      * @public
      */
     content: Array<HTMLElement>;
     /**
      * Defines the footer HTML Element.
-     *
      * @public
      */
     footer: Array<HTMLElement>;

package/dist/Page.js

@@ -20,28 +20,27 @@ import PageCss from "./generated/themes/Page.css.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-page</code> is a container component that holds one whole screen of an application.
+ * 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.
- * <h3>Structure</h3>
- * <h4>Header</h4>
+ * ### Structure
+ * #### Header
  * The top most area of the page is occupied by the header. The standard header includes a navigation button and a title.
- * <h4>Content</h4>
+ * #### Content
  * The content occupies the main part of the page. Only the content area is scrollable by default.
- * This can be prevented by setting  <code>enableScrolling</code> to <code>false</code>.
- * <h4>Footer</h4>
+ * This can be prevented by setting  `enableScrolling` to `false`.
+ * #### Footer
  * 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.
- * This is enabled with the <code>floatingFooter</code> property.
+ * This is enabled with the `floatingFooter` property.
  *
- * <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
- * that there is enough space for the <code>ui5-page</code> to be rendered.
- * <b>Note:</b> In order for the <code>ui5-page</code> to be displayed, the parent element should have fixed height.
+ * **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.
  *
- * <h3>ES6 Module Import</h3>
- *
- * <code>import "@ui5/webcomponents-fiori/dist/Page.js";</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents-fiori/dist/Page.js";`
  * @constructor
  * @extends UI5Element
  * @since 1.0.0-rc.12

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>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"]}
+{"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 * ### 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  `enableScrolling` to `false`.\n * #### Footer\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 `floatingFooter` 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: 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 `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({ 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 * @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 *\n\t * **Note:** 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 * @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 * @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 * @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 * @public\n\t */\n\t@slot()\n\theader!: Array<HTMLElement>;\n\n\t/**\n\t * Defines the content HTML Element.\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 * @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

@@ -4,8 +4,7 @@ import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation
 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 <code>ui5-product-switch</code> as items
- *
+ * Interface for components that may be slotted inside `ui5-product-switch` as items
  * @public
  */
 interface IProductSwitchItem extends HTMLElement, ITabbable {
@@ -18,29 +17,24 @@ interface IProductSwitchItem extends HTMLElement, ITabbable {
 }
 /**
  * @class
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-product-switch</code> is an SAP Fiori specific web component that is used in <code>ui5-shellbar</code>
+ * 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.
- * <br><br>
  *
- * <h3>Keyboard Handling</h3>
- * The <code>ui5-product-switch</code> provides advanced keyboard handling.
+ * ### 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:
- * <br>
- * <ul>
- * <li>[TAB] - Move focus to the next interactive element after the <code>ui5-product-switch</code></li>
- * <li>[UP/DOWN] - Navigates up and down the items </li>
- * <li>[LEFT/RIGHT] - Navigates left and right the items</li>
- * </ul>
- * <br>
- * <br>
  *
- * <h3>ES6 Module Import</h3>
- * <code>import "@ui5/webcomponents-fiori/dist/ProductSwitch.js";</code>
- * <br>
- * <code>import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";</code> (for <code>ui5-product-switch-item</code>)
+ * - [TAB] - Move focus to the next interactive element after the `ui5-product-switch`
+ * - [UP/DOWN] - Navigates up and down the items
+ * - [LEFT/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
@@ -54,8 +48,7 @@ declare class ProductSwitch extends UI5Element {
      */
     desktopColumns?: number;
     /**
-     * Defines the items of the <code>ui5-product-switch</code>.
-     *
+     * Defines the items of the `ui5-product-switch`.
      * @public
      */
     items: Array<IProductSwitchItem>;

package/dist/ProductSwitch.js

@@ -21,29 +21,24 @@ import { PRODUCT_SWITCH_CONTAINER_LABEL, } from "./generated/i18n/i18n-defaults.
 import ProductSwitchCss from "./generated/themes/ProductSwitch.css.js";
 /**
  * @class
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-product-switch</code> is an SAP Fiori specific web component that is used in <code>ui5-shellbar</code>
+ * 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.
- * <br><br>
  *
- * <h3>Keyboard Handling</h3>
- * The <code>ui5-product-switch</code> provides advanced keyboard handling.
+ * ### 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:
- * <br>
- * <ul>
- * <li>[TAB] - Move focus to the next interactive element after the <code>ui5-product-switch</code></li>
- * <li>[UP/DOWN] - Navigates up and down the items </li>
- * <li>[LEFT/RIGHT] - Navigates left and right the items</li>
- * </ul>
- * <br>
- * <br>
  *
- * <h3>ES6 Module Import</h3>
- * <code>import "@ui5/webcomponents-fiori/dist/ProductSwitch.js";</code>
- * <br>
- * <code>import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";</code> (for <code>ui5-product-switch-item</code>)
+ * - [TAB] - Move focus to the next interactive element after the `ui5-product-switch`
+ * - [UP/DOWN] - Navigates up and down the items
+ * - [LEFT/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

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 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.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\";\n\n/**\n * Interface for components that may be slotted inside <code>ui5-product-switch</code> as items\n *\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 * <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\nexport type {\n\tIProductSwitchItem,\n};\n"]}
+{"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 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.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\";\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/DOWN] - Navigates up and down the items\n * - [LEFT/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: 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 `ui5-product-switch`.\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\nexport type {\n\tIProductSwitchItem,\n};\n"]}

package/dist/ProductSwitchItem.d.ts

@@ -2,25 +2,21 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type { IProductSwitchItem } from "./ProductSwitch.js";
 /**
  * @class
- * <h3 class="comment-api-title">Overview</h3>
- * The <code>ui5-product-switch-item</code> web component represents the items displayed in the
- * <code>ui5-product-switch</code> web component.
- * <br><br>
- * <b>Note:</b> <code>ui5-product-switch-item</code> is not supported when used outside of <code>ui5-product-switch</code>.
- * <br><br>
+ * ### Overview
+ * The `ui5-product-switch-item` web component represents the items displayed in the
+ * `ui5-product-switch` web component.
  *
- * <h3>Keyboard Handling</h3>
- * The <code>ui5-product-switch</code> provides advanced keyboard handling.
+ * **Note:** `ui5-product-switch-item` is not supported when used outside of `ui5-product-switch`.
+ *
+ * ### 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:
- * <br>
- * <ul>
- * <li>[SPACE/ENTER/RETURN] - Trigger <code>ui5-click</code> event</li>
- * </ul>
  *
- * <h3>ES6 Module Import</h3>
- * <code>import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";</code>
+ * - [SPACE/ENTER/RETURN] - Trigger `ui5-click` event
  *
+ * ### ES6 Module Import
+ * `import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";`
  * @constructor
  * @extends UI5Element
  * @public
@@ -45,28 +41,26 @@ declare class ProductSwitchItem extends UI5Element implements IProductSwitchItem
     subtitleText: string;
     /**
      * Defines the icon to be displayed as a graphical element within the component.
-     * <br><br>
+     *
      * Example:
-     * <br>
-     * <pre>ui5-product-switch-item icon="palette"</pre>
      *
-     * 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>.
+     * `<ui5-product-switch-item icon="palette">`
      *
+     * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
      * @default ""
      * @public
      */
     icon: string;
     /**
-     * Defines a target where the <code>targetSrc</code> content must be open.
-     * <br><br>
+     * Defines a target where the `targetSrc` content must be open.
+     *
      * Available options are:
-     * <ul>
-     * <li><code>_self</code></li>
-     * <li><code>_top</code></li>
-     * <li><code>_blank</code></li>
-     * <li><code>_parent</code></li>
-     * <li><code>_search</code></li>
-     * </ul>
+     *
+     * - `_self`
+     * - `_top`
+     * - `_blank`
+     * - `_parent`
+     * - `_search`
      * @default "_self"
      * @public
      */
@@ -89,7 +83,7 @@ declare class ProductSwitchItem extends UI5Element implements IProductSwitchItem
     private focused;
     /**
      * Used to set the selected state of the component. Only one selected in a sequence.
-     * <b>Note:</b> Set by the <code>ProductSwitch</code>
+     * **Note:** Set by the `ProductSwitch`
      */
     selected: boolean;
     /**

package/dist/ProductSwitchItem.js

@@ -16,25 +16,21 @@ import ProductSwitchItemTemplate from "./generated/templates/ProductSwitchItemTe
 import ProductSwitchItemCss from "./generated/themes/ProductSwitchItem.css.js";
 /**
  * @class
- * <h3 class="comment-api-title">Overview</h3>
- * The <code>ui5-product-switch-item</code> web component represents the items displayed in the
- * <code>ui5-product-switch</code> web component.
- * <br><br>
- * <b>Note:</b> <code>ui5-product-switch-item</code> is not supported when used outside of <code>ui5-product-switch</code>.
- * <br><br>
+ * ### Overview
+ * The `ui5-product-switch-item` web component represents the items displayed in the
+ * `ui5-product-switch` web component.
  *
- * <h3>Keyboard Handling</h3>
- * The <code>ui5-product-switch</code> provides advanced keyboard handling.
+ * **Note:** `ui5-product-switch-item` is not supported when used outside of `ui5-product-switch`.
+ *
+ * ### 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:
- * <br>
- * <ul>
- * <li>[SPACE/ENTER/RETURN] - Trigger <code>ui5-click</code> event</li>
- * </ul>
  *
- * <h3>ES6 Module Import</h3>
- * <code>import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";</code>
+ * - [SPACE/ENTER/RETURN] - Trigger `ui5-click` event
  *
+ * ### ES6 Module Import
+ * `import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";`
  * @constructor
  * @extends UI5Element
  * @public
@@ -129,9 +125,8 @@ ProductSwitchItem = __decorate([
         dependencies: [Icon],
     })
     /**
-     * Fired when the <code>ui5-product-switch-item</code> is activated either with a
+     * Fired when the `ui5-product-switch-item` is activated either with a
      * click/tap or by using the Enter or Space key.
-     *
      * @public
      */
     ,