docs: new cem for Topic-P components - Toolbar

packages/base/package.json

@@ -38,7 +38,7 @@
     "@buxlabs/amd-to-es6": "0.16.1",
     "@openui5/sap.ui.core": "1.116.0",
     "@ui5/webcomponents-tools": "1.20.0-rc.1",
-    "chromedriver": "118.0.1",
+    "chromedriver": "119.0.1",
     "clean-css": "^5.2.2",
     "copy-and-watch": "^0.1.5",
     "cross-env": "^7.0.3",

packages/base/src/ManagedStyles.ts

@@ -105,16 +105,18 @@ const updateStyle = (data: StyleData, name: string, value = "", theme?: string)
 	}
 };
 
-const hasStyle = (name: string, value = "") => {
+const hasStyle = (name: string, value = ""): boolean => {
 	if (shouldUseLinks()) {
 		return !!document.querySelector(`head>link[${name}="${value}"]`);
 	}
 
+	const styleElement = document.querySelector(`head>style[${name}="${value}"]`);
+
 	if (document.adoptedStyleSheets && !isSafari()) {
-		return !!document.adoptedStyleSheets.find(sh => (sh as Record<string, any>)._ui5StyleId === getStyleId(name, value));
+		return !!styleElement || !!document.adoptedStyleSheets.find(sh => (sh as Record<string, any>)._ui5StyleId === getStyleId(name, value));
 	}
 
-	return !!document.querySelector(`head>style[${name}="${value}"]`);
+	return !!styleElement;
 };
 
 const removeStyle = (name: string, value = "") => {

packages/fiori/package.json

@@ -49,6 +49,6 @@
   },
   "devDependencies": {
     "@ui5/webcomponents-tools": "1.20.0-rc.1",
-    "chromedriver": "118.0.1"
+    "chromedriver": "119.0.1"
   }
 }

packages/localization/package.json

@@ -30,7 +30,7 @@
   "devDependencies": {
     "@openui5/sap.ui.core": "1.116.0",
     "@ui5/webcomponents-tools": "1.20.0-rc.1",
-    "chromedriver": "118.0.1",
+    "chromedriver": "119.0.1",
     "mkdirp": "^1.0.4",
     "resolve": "^1.20.0"
   },

packages/main/package.json

@@ -50,6 +50,6 @@
   },
   "devDependencies": {
     "@ui5/webcomponents-tools": "1.20.0-rc.1",
-    "chromedriver": "118.0.1"
+    "chromedriver": "119.0.1"
   }
 }

packages/main/src/Interfaces.ts

@@ -126,11 +126,10 @@ 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
@@ -195,24 +194,6 @@ const IToken = "sap.ui.webc.main.IToken";
  */
 const ITreeItem = "sap.ui.webc.main.ITreeItem";
 
-/**
- * Interface for toolbar items for the purpose of <code>ui5-toolbar</code>
- *
- * @name sap.ui.webc.main.IToolbarItem
- * @interface
- * @public
- */
-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";
-
 export {
 	IAvatar,
 	IBreadcrumbsItem,
@@ -236,6 +217,4 @@ export {
 	ITableRow,
 	IToken,
 	ITreeItem,
-	IToolbarItem,
-	IToolbarSelectOption,
 };

packages/main/src/Toolbar.ts

@@ -28,7 +28,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 {
@@ -69,11 +69,7 @@ function parsePxValue(styleSet: CSSStyleDeclaration, propertyName: string): numb
  * <h3>ES6 Module Import</h3>
  * <code>import "@ui5/webcomponents/dist/Toolbar";</code>
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.Toolbar
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-toolbar
- * @appenddocs sap.ui.webc.main.ToolbarButton sap.ui.webc.main.ToolbarSelect sap.ui.webc.main.ToolbarSelectOption sap.ui.webc.main.ToolbarSeparator sap.ui.webc.main.ToolbarSpacer
+ * @extends UI5Element
  * @public
  * @since 1.17.0
  */
@@ -90,48 +86,39 @@ class Toolbar extends UI5Element {
 	/**
 	 * Indicated the direction in which the Toolbar items will be aligned.
 	 *
-	 * @type {sap.ui.webc.main.types.ToolbarAlign}
 	 * @public
-	 * @defaultvalue: "End"
-	 * @name sap.ui.webc.main.Toolbar.prototype.alignContent
+	 * @default "End"
 	 */
 	@property({ type: ToolbarAlign, defaultValue: ToolbarAlign.End })
 	alignContent!: `${ToolbarAlign}`;
 
 	/**
 	 * Calculated width of the whole toolbar.
 	 * @private
-	 * @name sap.ui.webc.main.Toolbar.prototype.width
-	 * @type {sap.ui.webc.base.types.Integer}
-	 * @defaultvalue false
+	 * @default undefined
 	 */
-	@property({ type: Integer })
+	@property({ validator: Integer })
 	width?: number;
 
 	/**
 	 * Calculated width of the toolbar content.
 	 * @private
-	 * @name sap.ui.webc.main.Toolbar.prototype.contentWidth
-	 * @type {sap.ui.webc.base.types.Integer}
-	 * @defaultvalue 0
+	 * @default undefined
 	 */
-	@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}
-	 * @name sap.ui.webc.main.Toolbar.prototype.accessibleName
-	 * @defaultvalue: ""
+	 * @default ""
 	 * @public
 	 */
 	@property()
@@ -140,9 +127,7 @@ class Toolbar extends UI5Element {
 	/**
 	 * Receives id(or many ids) of the elements that label the input.
 	 *
-	 * @type {string}
-	 * @name sap.ui.webc.main.Toolbar.prototype.accessibleNameRef
-	 * @defaultvalue ""
+	 * @default ""
 	 * @public
 	 */
 	@property({ defaultValue: "" })
@@ -153,9 +138,6 @@ 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 {sap.ui.webc.main.IToolbarItem[]}
-	 * @name sap.ui.webc.main.Toolbar.prototype.default
-	 * @slot items
 	 * @public
 	 */
 	@slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true })

packages/main/src/ToolbarButton.ts

@@ -26,12 +26,8 @@ import { registerToolbarItem } from "./ToolbarRegistry.js";
  *
  * @constructor
  * @abstract
- * @author SAP SE
- * @alias sap.ui.webc.main.ToolbarButton
- * @extends sap.ui.webc.main.ToolbarItem
- * @tagname ui5-toolbar-button
+ * @extends ToolbarItem
  * @public
- * @implements sap.ui.webc.main.IToolbarItem
  * @since 1.17.0
  */
 @customElement({
@@ -46,7 +42,6 @@ import { registerToolbarItem } from "./ToolbarRegistry.js";
  * <b>Note:</b> The event will not be fired if the <code>disabled</code>
  * property is set to <code>true</code>.
  *
- * @event sap.ui.webc.main.ToolbarButton#click
  * @public
  */
 @event("click")
@@ -56,9 +51,7 @@ class ToolbarButton extends ToolbarItem {
 	 * <br><br>
 	 * <b>Note:</b> a disabled action can't be pressed or focused, and it is not in the tab chain.
 	 *
-	 * @type {boolean}
-	 * @defaultvalue false
-	 * @name sap.ui.webc.main.ToolbarButton.prototype.disabled
+	 * @default false
 	 * @public
 	 */
 	@property({ type: Boolean })
@@ -77,9 +70,7 @@ class ToolbarButton extends ToolbarItem {
 	 * <li><code>Attention</code></li>
 	 * </ul>
 	 *
-	 * @type {ButtonDesign}
-	 * @defaultvalue "Default"
-	 * @name sap.ui.webc.main.ToolbarButton.prototype.design
+	 * @default "Default"
 	 * @public
 	 */
 	@property({ type: ButtonDesign, defaultValue: ButtonDesign.Default })
@@ -92,9 +83,7 @@ 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}
-	 * @defaultvalue ""
-	 * @name sap.ui.webc.main.ToolbarButton.prototype.icon
+	 * @default ""
 	 * @public
 	 */
 	@property()
@@ -103,9 +92,7 @@ class ToolbarButton extends ToolbarItem {
 	/**
 	 * Defines whether the icon should be displayed after the component text.
 	 *
-	 * @type {boolean}
-	 * @name sap.ui.webc.main.ToolbarButton.prototype.iconEnd
-	 * @defaultvalue false
+	 * @default false
 	 * @public
 	 */
 	@property({ type: Boolean })
@@ -115,9 +102,7 @@ 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}
-	 * @name sap.ui.webc.main.ToolbarButton.prototype.tooltip
-	 * @defaultvalue ""
+	 * @default ""
 	 * @public
 	 */
 	@property()
@@ -126,9 +111,7 @@ class ToolbarButton extends ToolbarItem {
 	/**
 	 * Defines the accessible ARIA name of the component.
 	 *
-	 * @type {string}
-	 * @name sap.ui.webc.main.ToolbarButton.prototype.accessibleName
-	 * @defaultvalue undefined
+	 * @default undefined
 	 * @public
 	 */
 	@property({ defaultValue: undefined })
@@ -137,9 +120,7 @@ class ToolbarButton extends ToolbarItem {
 	/**
 	 * Receives id(or many ids) of the elements that label the component.
 	 *
-	 * @type {string}
-	 * @name sap.ui.webc.main.ToolbarButton.prototype.accessibleNameRef
-	 * @defaultvalue ""
+	 * @default ""
 	 * @public
 	 */
 	@property({ defaultValue: "" })
@@ -169,8 +150,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}
-	 * @name sap.ui.webc.main.ToolbarButton.prototype.accessibilityAttributes
 	 * @public
 	 */
 	@property({ type: Object })
@@ -179,9 +158,7 @@ class ToolbarButton extends ToolbarItem {
 	/**
 	 * Button text
 	 * @public
-	 * @defaultvalue ""
-	 * @type {string}
-	 * @name sap.ui.webc.main.ToolbarButton.prototype.text
+	 * @default ""
 	 */
 	@property()
 	text!: string;
@@ -192,9 +169,7 @@ class ToolbarButton extends ToolbarItem {
 	 *
 	 * <b>Note:</b> all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.
 	 *
-	 * @name sap.ui.webc.main.ToolbarButton.prototype.width
-	 * @defaultvalue undefined
-	 * @type { sap.ui.webc.base.types.CSSSize }
+	 * @default undefined
 	 * @public
 	 */
 	@property({ validator: CSSSize })