docs: new cem for Topic-P components - Toolbar

-fixed review comments

packages/main/src/Interfaces.ts

@@ -127,11 +127,11 @@ const ISegmentedButtonItem = "sap.ui.webc.main.ISegmentedButtonItem";
 /**
  * Interface for components that may be slotted inside <code>ui5-select</code> as options
  *
- * @name sap.ui.webc.main.ISelectOption
  * @interface
  * @public
  */
-const ISelectOption = "sap.ui.webc.main.ISelectOption";
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface ISelectOption extends HTMLElement { }
 
 /**
  * Interface for components that may be slotted inside <code>ui5-select-menu</code> as options
@@ -208,11 +208,11 @@ const IToolbarItem = "sap.ui.webc.main.IToolbarItem";
 /**
  * Interface for toolbar select items for the purpose of <code>ui5-toolbar-select</code>
  *
- * @name sap.ui.webc.main.IToolbarSelectOption
  * @interface
  * @public
  */
-const IToolbarSelectOption = "sap.ui.webc.main.IToolbarSelectOption";
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface IToolbarSelectOption extends HTMLElement { }
 
 export {
 	IAvatar,

packages/main/src/Toolbar.ts

@@ -13,6 +13,7 @@ import "@ui5/webcomponents-icons/dist/overflow.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
+import type IToolbarItem from "./ToolbarItem.js";
 
 import {
 	TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL,
@@ -28,7 +29,7 @@ import ToolbarAlign from "./types/ToolbarAlign.js";
 import ToolbarItemOverflowBehavior from "./types/ToolbarItemOverflowBehavior.js";
 import HasPopup from "./types/HasPopup.js";
 
-import type ToolbarItem from "./ToolbarItem.js";
+import ToolbarItem from "./ToolbarItem.js";
 import type ToolbarSeparator from "./ToolbarSeparator.js";
 
 import {
@@ -86,7 +87,6 @@ class Toolbar extends UI5Element {
 	/**
 	 * Indicated the direction in which the Toolbar items will be aligned.
 	 *
-	 * @type {ToolbarAlign}
 	 * @public
 	 * @default: "End"
 	 */
@@ -96,33 +96,29 @@ class Toolbar extends UI5Element {
 	/**
 	 * Calculated width of the whole toolbar.
 	 * @private
-	 * @type {Integer}
 	 * @default false
 	 */
-	@property({ type: Integer })
+	@property({ validator: Integer })
 	width?: number;
 
 	/**
 	 * Calculated width of the toolbar content.
 	 * @private
-	 * @type {Integer}
 	 * @default 0
 	 */
-	@property({ type: Integer })
+	@property({ validator: Integer })
 	contentWidth?: number;
 
 	/**
 	 * Notifies the toolbar if it should show the items in a reverse way if Toolbar Popover needs to be placed on "Top" position.
 	 * @private
-	 * @type {Boolean}
 	 */
 	@property({ type: Boolean })
 	reverseOverflow!: boolean;
 
 	/**
 	 * Defines the accessible ARIA name of the component.
 	 *
-	 * @type {string}
 	 * @default: ""
 	 * @public
 	 */
@@ -132,7 +128,6 @@ class Toolbar extends UI5Element {
 	/**
 	 * Receives id(or many ids) of the elements that label the input.
 	 *
-	 * @type {string}
 	 * @default ""
 	 * @public
 	 */
@@ -144,12 +139,11 @@ class Toolbar extends UI5Element {
      *
      * <b>Note:</b> Currently only <code>ui5-toolbar-button</code>, <code>ui5-toolbar-select</code>, <code>ui5-toolbar-separator</code> and <code>ui5-toolbar-spacer</code> are allowed here.
 	 *
-	 * @type {IToolbarItem[]}
 	 * @slot items
 	 * @public
 	 */
 	@slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true })
-	items!: Array<ToolbarItem>
+	items!: Array<IToolbarItem>
 
 	_onResize!: ResizeObserverCallback;
 	_onInteract!: EventListener;

packages/main/src/ToolbarButton.ts

@@ -4,6 +4,7 @@ import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import CSSSize from "@ui5/webcomponents-base/dist/types/CSSSize.js";
 import Button from "./Button.js";
 import ButtonDesign from "./types/ButtonDesign.js";
+import type IToolbarItem from "./ToolbarItem.js";
 
 import ToolbarItem from "./ToolbarItem.js";
 import type { IEventOptions } from "./ToolbarItem.js";
@@ -46,13 +47,12 @@ import { registerToolbarItem } from "./ToolbarRegistry.js";
  * @public
  */
 @event("click")
-class ToolbarButton extends ToolbarItem {
+class ToolbarButton extends ToolbarItem implements IToolbarItem {
 	/**
 	 * Defines if the action is disabled.
 	 * <br><br>
 	 * <b>Note:</b> a disabled action can't be pressed or focused, and it is not in the tab chain.
 	 *
-	 * @type {boolean}
 	 * @default false
 	 * @public
 	 */
@@ -72,7 +72,6 @@ class ToolbarButton extends ToolbarItem {
 	 * <li><code>Attention</code></li>
 	 * </ul>
 	 *
-	 * @type {ButtonDesign}
 	 * @default "Default"
 	 * @public
 	 */
@@ -86,7 +85,6 @@ class ToolbarButton extends ToolbarItem {
 	 * SAP-icons font provides numerous buil-in icons. To find all the available icons, see the
 	 * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
 	 *
-	 * @type {string}
 	 * @default ""
 	 * @public
 	 */
@@ -96,7 +94,6 @@ class ToolbarButton extends ToolbarItem {
 	/**
 	 * Defines whether the icon should be displayed after the component text.
 	 *
-	 * @type {boolean}
 	 * @default false
 	 * @public
 	 */
@@ -107,7 +104,6 @@ class ToolbarButton extends ToolbarItem {
 	 * Defines the tooltip of the component.
 	 * <br>
 	 * <b>Note:</b> A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.
-	 * @type {string}
 	 * @default ""
 	 * @public
 	 */
@@ -117,7 +113,6 @@ class ToolbarButton extends ToolbarItem {
 	/**
 	 * Defines the accessible ARIA name of the component.
 	 *
-	 * @type {string}
 	 * @default undefined
 	 * @public
 	 */
@@ -127,7 +122,6 @@ class ToolbarButton extends ToolbarItem {
 	/**
 	 * Receives id(or many ids) of the elements that label the component.
 	 *
-	 * @type {string}
 	 * @default ""
 	 * @public
 	 */
@@ -158,7 +152,6 @@ class ToolbarButton extends ToolbarItem {
 	 * 		</li>
 	 * 		<li><code>controls</code>: Identifies the element (or elements) whose contents or presence are controlled by the button element. Accepts a string value.</li>
 	 * </ul>
-	 * @type {object}
 	 * @public
 	 */
 	@property({ type: Object })
@@ -168,7 +161,6 @@ class ToolbarButton extends ToolbarItem {
 	 * Button text
 	 * @public
 	 * @default ""
-	 * @type {string}
 	 */
 	@property()
 	text!: string;
@@ -180,7 +172,6 @@ class ToolbarButton extends ToolbarItem {
 	 * <b>Note:</b> all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.
 	 *
 	 * @default undefined
-	 * @type { sap.ui.webc.base.types.CSSSize }
 	 * @public
 	 */
 	@property({ validator: CSSSize })

packages/main/src/ToolbarItem.ts

@@ -42,15 +42,13 @@ class ToolbarItem extends UI5Element implements IToolbarItem {
 	 * </ul>
 	 * @public
 	 * @default "Default"
-	 * @type {ToolbarItemOverflowBehavior}
 	 */
 	@property({ type: ToolbarItemOverflowBehavior, defaultValue: ToolbarItemOverflowBehavior.Default })
 	overflowPriority!: `${ToolbarItemOverflowBehavior}`;
 
 	/**
 	 * Defines if the toolbar overflow popup should close upon intereaction with the item.
 	 * It will close by default.
-	 * @type {boolean}
 	 * @default false
 	 * @public
 	 */

packages/main/src/ToolbarSelect.ts

@@ -4,6 +4,8 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import CSSSize from "@ui5/webcomponents-base/dist/types/CSSSize.js";
+import type IToolbarItem from "./ToolbarItem.js";
+import { ISelectOption } from "./Interfaces.js";
 
 import { registerToolbarItem } from "./ToolbarRegistry.js";
 
@@ -68,15 +70,14 @@ type ToolbarSelectChangeEventDetail = SelectChangeEventDetail;
  */
 @event("close")
 
-class ToolbarSelect extends ToolbarItem {
+class ToolbarSelect extends ToolbarItem implements IToolbarItem {
 	/**
 	 * Defines the width of the select.
 	 * <br><br>
 	 *
 	 * <b>Note:</b> all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.
 	 *
 	 * @default undefined
-	 * @type {CSSSize}
 	 * @public
 	 */
 	@property({ validator: CSSSize })
@@ -91,18 +92,16 @@ class ToolbarSelect extends ToolbarItem {
 	 *
 	 * <br><br>
 	 * <b>Note:</b> Use the <code>ui5-toolbar-select-option</code> component to define the desired options.
-	 * @type {ISelectOption[]}
 	 * @slot options
 	 * @public
 	 */
 	@slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true })
-	options!: Array<Option>;
+	options!: Array<ISelectOption>;
 
 	/**
 	 * Defines the value state of the component.
 	 * <br><br>
 	 *
-	 * @type {ValueState}
 	 * @default "None"
 	 * @public
 	 */
@@ -114,7 +113,6 @@ class ToolbarSelect extends ToolbarItem {
 	 * <br><br>
 	 * <b>Note:</b> A disabled component is noninteractive.
 	 *
-	 * @type {boolean}
 	 * @default false
 	 * @public
 	 */
@@ -124,7 +122,6 @@ class ToolbarSelect extends ToolbarItem {
 	/**
 	 * Defines the accessible ARIA name of the component.
 	 *
-	 * @type {string}
 	 * @public
 	 * @default ""
 	 */
@@ -134,7 +131,6 @@ class ToolbarSelect extends ToolbarItem {
 	/**
 	 * Receives id(or many ids) of the elements that label the select.
 	 *
-	 * @type {string}
 	 * @default ""
 	 * @public
 	 */
@@ -193,7 +189,7 @@ class ToolbarSelect extends ToolbarItem {
 			// update options
 			const selectedOption = (e as CustomEvent<ToolbarSelectChangeEventDetail>).detail.selectedOption;
 			const selectedOptionIndex = Number(selectedOption?.getAttribute("data-ui5-external-action-item-index"));
-			this.options.forEach((option: Option, index: number) => {
+			this.options.forEach((option: ISelectOption, index: number) => {
 				if (index === selectedOptionIndex) {
 					option.setAttribute("selected", "");
 				} else {

packages/main/src/ToolbarSelectOption.ts

@@ -2,6 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import { IToolbarSelectOption } from "./Interfaces.js";
 
 /**
  * @class
@@ -18,10 +19,9 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
  * @since 1.17.0
  */
 @customElement("ui5-toolbar-select-option")
-class ToolbarSelectOption extends UI5Element {
+class ToolbarSelectOption extends UI5Element implements IToolbarSelectOption {
 	/**
 	 * Defines the selected state of the component.
-	 * @type {boolean}
 	 * @default false
 	 * @public
 	 */
@@ -33,7 +33,6 @@ class ToolbarSelectOption extends UI5Element {
 	 * <br><br>
 	 * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
 	 *
-	 * @type {Node[]}
 	 * @slot
 	 * @public
 	 */

packages/main/src/ToolbarSeparator.ts

@@ -6,6 +6,7 @@ import ToolbarPopoverSeparatorTemplate from "./generated/templates/ToolbarPopove
 import { registerToolbarItem } from "./ToolbarRegistry.js";
 
 import ToolbarItem from "./ToolbarItem.js";
+import type IToolbarItem from "./ToolbarItem.js";
 
 /**
  * @class
@@ -25,7 +26,7 @@ import ToolbarItem from "./ToolbarItem.js";
 	tag: "ui5-toolbar-separator",
 })
 
-class ToolbarSeparator extends ToolbarItem {
+class ToolbarSeparator extends ToolbarItem implements IToolbarItem {
 	@property({ type: Boolean })
 	visible!: boolean;
 

packages/main/src/ToolbarSpacer.ts

@@ -4,6 +4,8 @@ import CSSSize from "@ui5/webcomponents-base/dist/types/CSSSize.js";
 import ToolbarSpacerTemplate from "./generated/templates/ToolbarSpacerTemplate.lit.js";
 
 import ToolbarItem from "./ToolbarItem.js";
+import type IToolbarItem from "./ToolbarItem.js";
+
 import { registerToolbarItem } from "./ToolbarRegistry.js";
 
 /**
@@ -24,15 +26,14 @@ import { registerToolbarItem } from "./ToolbarRegistry.js";
 	tag: "ui5-toolbar-spacer",
 })
 
-class ToolbarSpacer extends ToolbarItem {
+class ToolbarSpacer extends ToolbarItem implements IToolbarItem {
 	/**
 	 * Defines the width of the spacer.
 	 * <br><br>
 	 *
 	 * <b>Note:</b> all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.
 	 *
 	 * @public
-	 * @type {CSSSize}
 	 * @default undefined
 	 */
 	@property({ validator: CSSSize })