docs: new cem for Topic-P components - List

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/CustomListItem.ts

@@ -4,6 +4,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import ListItem from "./ListItem.js";
 import CustomListItemTemplate from "./generated/templates/CustomListItemTemplate.lit.js";
+import { IListItem } from "./Interfaces.js";
 
 // Styles
 import customListItemCss from "./generated/themes/CustomListItem.css.js";
@@ -16,55 +17,37 @@ import customListItemCss from "./generated/themes/CustomListItem.css.js";
  *
  * The component accepts arbitrary HTML content to allow full customization.
  *
- * <h3>CSS Shadow Parts</h3>
+ * @csspart native-li - Used to style the main li tag of the list item
+ * @csspart content - Used to style the content area of the list item
+ * @csspart detail-button - Used to style the button rendered when the list item is of type detail
+ * @csspart delete-button - Used to style the button rendered when the list item is in delete mode
+ * @csspart radio - Used to style the radio button rendered when the list item is in single selection mode
+ * @csspart checkbox - Used to style the checkbox rendered when the list item is in multiple selection mode
  *
- * <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-li-custom</code> exposes the following CSS Shadow Parts:
- * <ul>
- * <li>native-li - Used to style the main li tag of the list item</li>
- * <li>content - Used to style the content area of the list item</li>
- * <li>detail-button - Used to style the button rendered when the list item is of type detail</li>
- * <li>delete-button - Used to style the button rendered when the list item is in delete mode</li>
- * <li>radio - Used to style the radio button rendered when the list item is in single selection mode</li>
- * <li>checkbox - Used to style the checkbox rendered when the list item is in multiple selection mode</li>
- * </ul>
+ * @slot default - Defines the content of the component.
  *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.CustomListItem
- * @extends sap.ui.webc.main.ListItem
- * @tagname ui5-li-custom
- * @implements sap.ui.webc.main.IListItem
+ * @extends ListItem
+ * @implements {IListItem}
  * @public
  */
 @customElement({
 	tag: "ui5-li-custom",
 	template: CustomListItemTemplate,
 	styles: [ListItem.styles, customListItemCss],
 })
-class CustomListItem extends ListItem {
+class CustomListItem extends ListItem implements IListItem {
 	/**
 	 * Defines the text alternative of the component.
 	 * Note: If not provided a default text alternative will be set, if present.
 	 *
-	 * @type {string}
-	 * @name sap.ui.webc.main.CustomListItem.prototype.accessibleName
-	 * @defaultvalue ""
+	 * @default ""
 	 * @public
 	 * @since 1.0.0-rc.15
 	 */
 	@property()
 	accessibleName!: string;
 
-	/**
-	 * Defines the content of the component.
-	 * @type {Node[]}
-	 * @name sap.ui.webc.main.CustomListItem.prototype.default
-	 * @slot
-	 * @public
-	 */
-
 	_onkeydown(e: KeyboardEvent) {
 		const isTab = isTabNext(e) || isTabPrevious(e);
 

packages/main/src/GroupHeaderListItem.ts

@@ -3,6 +3,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ListItemBase from "./ListItemBase.js";
+import { IListItem } from "./Interfaces.js";
 
 import { GROUP_HEADER_TEXT } from "./generated/i18n/i18n-defaults.js";
 
@@ -16,12 +17,13 @@ import groupheaderListItemCss from "./generated/themes/GroupHeaderListItem.css.j
  * @class
  * The <code>ui5-li-groupheader</code> is a special list item, used only to separate other list items into logical groups.
  *
+ * @slot {Node[]} default - Defines the text of the component.
+ * <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.
+ *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.GroupHeaderListItem
- * @extends sap.ui.webc.main.ListItemBase
- * @tagname ui5-li-groupheader
- * @implements sap.ui.webc.main.IListItem
+ * @extends ListItemBase
+ * @implements {IListItem}
  * @public
  */
 @customElement({
@@ -30,31 +32,18 @@ import groupheaderListItemCss from "./generated/themes/GroupHeaderListItem.css.j
 	template: GroupHeaderListItemTemplate,
 	styles: [ListItemBase.styles, groupheaderListItemCss],
 })
-class GroupHeaderListItem extends ListItemBase {
+class GroupHeaderListItem extends ListItemBase implements IListItem {
 	/**
 	 * Defines the text alternative of the component.
 	 * Note: If not provided a default text alternative will be set, if present.
 	 *
-	 * @type {string}
-	 * @name sap.ui.webc.main.GroupHeaderListItem.prototype.accessibleName
-	 * @defaultvalue ""
+	 * @default ""
 	 * @public
 	 * @since 1.0.0-rc.15
 	 */
 	@property()
 	accessibleName!: string;
 
-	/**
-	 * Defines the text of the component.
-	 * <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[]}
-	 * @name sap.ui.webc.main.GroupHeaderListItem.prototype.default
-	 * @slot
-	 * @public
-	 */
-
 	static i18nBundle: I18nBundle;
 
 	get groupItem() {

packages/main/src/Interfaces.ts

@@ -90,11 +90,10 @@ const IInputSuggestionItem = "sap.ui.webc.main.IInputSuggestionItem";
 /**
  * Interface for components that may be slotted inside a <code>ui5-list</code> as items
  *
- * @name sap.ui.webc.main.IListItem
- * @interface
  * @public
  */
-const IListItem = "sap.ui.webc.main.IListItem";
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface IListItem extends HTMLElement { }
 
 /**
  * Interface for components that may be slotted inside <code>ui5-menu</code> as items