Merge remote-tracking branch 'upstream/new-cem' into toolbar-namespac…

…e-refactoring
SAP · Nov 21, 2023 · b2e0f23 · b2e0f23
2 parents bc03bd5 + 7a3954f
commit b2e0f23
Show file tree

Hide file tree

Showing 16 changed files with 5,567 additions and 47 deletions.
diff --git a/packages/base/package-scripts.cjs b/packages/base/package-scripts.cjs
@@ -43,6 +43,8 @@ const scripts = {
 	generateTemplates: `mkdirp src/generated/templates && cross-env UI5_BASE=true UI5_TS=true node "${LIB}/hbs2ui5/index.js" -d test/elements -o src/generated/templates`,
 	generateAPI: {
 		default: "nps generateAPI.prepare generateAPI.preprocess generateAPI.jsdoc generateAPI.cleanup",
+		generateCEM: `cem analyze --config  "${LIB}/cem/custom-elements-manifest.config.mjs"`,
+		validateCEM: `node "${LIB}/cem/validate.js"`,
 		prepare: `copy-and-watch "dist/**/*.js" jsdoc-dist/`,
 		preprocess: `node "${preprocessJSDocScript}" jsdoc-dist/`,
 		jsdoc: `jsdoc -c "${LIB}/jsdoc/configTypescript.json"`,

diff --git a/packages/main/src/Icon.ts b/packages/main/src/Icon.ts
@@ -10,6 +10,7 @@ import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
 import IconTemplate from "./generated/templates/IconTemplate.lit.js";
 import IconDesign from "./types/IconDesign.js";
+import type { IIcon } from "./Interfaces";
 
 // Styles
 import iconCss from "./generated/themes/Icon.css.js";
@@ -90,16 +91,6 @@ const PRESENTATION_ROLE = "presentation";
  * <code>&lt;ui5-icon name="business-suite/ab-testing">&lt;/ui5-icon></code>
  *
  * <br><br>
- * <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-icon</code> exposes the following CSS Shadow Parts:
- * <ul>
- * <li>root - Used to style the outermost wrapper of the <code>ui5-icon</code></li>
- * </ul>
- *
- * <br><br>
  * <h3>Keyboard Handling</h3>
  *
  * <ul>
@@ -111,12 +102,11 @@ const PRESENTATION_ROLE = "presentation";
  *
  * <code>import "@ui5/webcomponents/dist/Icon.js";</code>
  *
+ * @csspart root - Used to style the outermost wrapper of the <code>ui5-icon</code>.
+ *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.Icon
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-icon
- * @implements sap.ui.webc.main.IIcon
+ * @extends UI5Element
+ * @implements {IIcon}
  * @public
  */
 @customElement({
@@ -135,13 +125,11 @@ const PRESENTATION_ROLE = "presentation";
  * @since 1.0.0-rc.8
  */
 @event("click")
-class Icon extends UI5Element {
+class Icon extends UI5Element implements IIcon {
 	/**
 	 * Defines the component semantic design.
 	 *
-	 * @type {sap.ui.webc.main.types.IconDesign}
-	 * @name sap.ui.webc.main.Icon.prototype.design
-	 * @defaultvalue "Default"
+	 * @default "Default"
 	 * @public
 	 * @since 1.9.2
 	 */
@@ -150,9 +138,7 @@ class Icon extends UI5Element {
 
 	/**
 	 * Defines if the icon is interactive (focusable and pressable)
-	 * @name sap.ui.webc.main.Icon.prototype.interactive
-	 * @type {boolean}
-	 * @defaultvalue false
+	 * @default false
 	 * @public
 	 * @since 1.0.0-rc.8
 	 */
@@ -190,9 +176,7 @@ class Icon extends UI5Element {
 	 * Example:
 	 * <br>
 	 * <code>name='business-suite/3d'</code>, <code>name='business-suite/1x2-grid-layout'</code>, <code>name='business-suite/4x4-grid-layout'</code>.
-	 * @name sap.ui.webc.main.Icon.prototype.name
-	 * @type {string}
-	 * @defaultvalue ""
+	 * @default ""
 	 * @public
 	 */
 	@property()
@@ -205,9 +189,7 @@ class Icon extends UI5Element {
 	 * <b>Note:</b> Every icon should have a text alternative in order to
 	 * calculate its accessible name.
 	 *
-	 * @name sap.ui.webc.main.Icon.prototype.accessibleName
-	 * @type {string}
-	 * @defaultvalue ""
+	 * @default ""
 	 * @public
 	 */
 	@property()
@@ -218,19 +200,15 @@ class Icon extends UI5Element {
 	 * <br><br>
 	 * <b>Note:</b> The tooltip text should be provided via the <code>accessible-name</code> property.
 	 *
-	 * @name sap.ui.webc.main.Icon.prototype.showTooltip
-	 * @type {boolean}
-	 * @defaultvalue false
+	 * @default false
 	 * @public
 	 */
 	@property({ type: Boolean })
 	showTooltip!: boolean;
 
 	/**
 	 * Defines the accessibility role of the component.
-	 * @name sap.ui.webc.main.Icon.prototype.accessibleRole
-	 * @type {string}
-	 * @defaultvalue ""
+	 * @default ""
 	 * @public
 	 * @since 1.1.0
 	 */

diff --git a/packages/main/src/Interfaces.ts b/packages/main/src/Interfaces.ts
@@ -64,11 +64,10 @@ const IColorPaletteItem = "sap.ui.webc.main.IColorPaletteItem";
 /**
  * Interface for components that represent an icon, usable in numerous higher-order components
  *
- * @name sap.ui.webc.main.IIcon
- * @interface
  * @public
  */
-const IIcon = "sap.ui.webc.main.IIcon";
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface IIcon extends HTMLElement { }
 
 /**
  * Interface for components that represent an input, usable in numerous higher-order components

diff --git a/packages/playground/build-scripts-storybook/parse-manifest.js b/packages/playground/build-scripts-storybook/parse-manifest.js
@@ -98,7 +98,7 @@ const flattenAPIsHierarchicalStructure = module => {
     const declarations = module.declarations;
 
     declarations.forEach(declaration => {
-        let superclassDeclaration = processedDeclarations.get(declaration.superclass.name);
+        let superclassDeclaration = processedDeclarations.get(declaration.superclass?.name);
 
         if (!superclassDeclaration) {
             superclassDeclaration = customElements.modules.find(_m => _m.declarations.find(_d => _d.name === declaration.superclass?.name ));
@@ -109,7 +109,7 @@ const flattenAPIsHierarchicalStructure = module => {
         }
 
         if (superclassDeclaration) {
-            processedDeclarations.set(declaration.name, mergeClassMembers(declaration, processedDeclarations.get(declaration.superclass.name)));
+            processedDeclarations.set(declaration.name, mergeClassMembers(declaration, processedDeclarations.get(declaration.superclass?.name)));
         } else {
             processedDeclarations.set(declaration.name, declaration);
         }

diff --git a/packages/tools/components-package/eslint.js b/packages/tools/components-package/eslint.js
@@ -27,6 +27,7 @@ const overrides = tsMode ? [{
 		"@typescript-eslint/no-unsafe-call": "off",
 		"@typescript-eslint/no-non-null-assertion": "off",
 		"@typescript-eslint/no-empty-function": "off",
+		"@typescript-eslint/no-empty-interface": "off",
 		"lines-between-class-members": "off",
 	}
 }] : [];

diff --git a/packages/tools/components-package/nps.js b/packages/tools/components-package/nps.js
@@ -131,6 +131,8 @@ const getScripts = (options) => {
 		},
 		generateAPI: {
 			default: "nps generateAPI.prepare generateAPI.preprocess generateAPI.jsdoc generateAPI.cleanup generateAPI.prepareManifest",
+			generateCEM: `cem analyze --config  "${LIB}/cem/custom-elements-manifest.config.mjs"`,
+			validateCEM: `node "${LIB}/cem/validate.js"`,
 			prepare: `node "${LIB}/copy-and-watch/index.js" --silent "dist/**/*.js" jsdoc-dist/`,
 			prepareManifest: `node "${LIB}/generate-custom-elements-manifest/index.js" dist dist`,
 			preprocess: `node "${preprocessJSDocScript}" jsdoc-dist/ src`,