docs: new cem for Topic-P components

packages/fiori/src/BarcodeScannerDialog.ts

@@ -68,10 +68,7 @@ type BarcodeScannerDialogScanErrorEventDetail = {
  * For a list of supported barcode formats, see the <ui5-link target="_blank" href="https://github.com/zxing-js/library">zxing-js/library</ui5-link> documentation.
  *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.fiori.BarcodeScannerDialog
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-barcode-scanner-dialog
+ * @extends UI5Element
  * @public
  * @since 1.0.0-rc.15
  */
@@ -90,7 +87,6 @@ type BarcodeScannerDialogScanErrorEventDetail = {
 /**
  * Fires when the scan is completed successfuuly.
  *
- * @event sap.ui.webc.fiori.BarcodeScannerDialog#scan-success
  * @param {string} text the scan result as string
  * @param {Object} rawBytes the scan result as a Uint8Array
  * @public
@@ -105,7 +101,6 @@ type BarcodeScannerDialogScanErrorEventDetail = {
 /**
  * Fires when the scan fails with error.
  *
- * @event sap.ui.webc.fiori.BarcodeScannerDialog#scan-error
  * @param {string} message the error message
  * @public
  */
@@ -119,9 +114,7 @@ class BarcodeScannerDialog extends UI5Element {
  /**
  * Indicates whether a loading indicator should be displayed in the dialog.
  *
- * @type {boolean}
- * @name sap.ui.webc.fiori.BarcodeScannerDialog.prototype.loading
- * @defaultvalue false
+ * @default false
  * @private
  */
  @property({ type: Boolean })
@@ -142,12 +135,9 @@ class BarcodeScannerDialog extends UI5Element {
 
  /**
  * Shows a dialog with the camera videostream. Starts a scan session.
- * @method
- * @name sap.ui.webc.fiori.BarcodeScannerDialog#show
- * @returns {void}
  * @public
  */
- show() {
+ show(): void {
  if (this.loading) {
  console.warn("Barcode scanning is already in progress."); // eslint-disable-line
  return;
@@ -170,12 +160,9 @@ class BarcodeScannerDialog extends UI5Element {
 
  /**
  * Closes the dialog and the scan session.
- * @method
- * @name sap.ui.webc.fiori.BarcodeScannerDialog#close
- * @returns {void}
  * @public
  */
- close() {
+ close():void {
  this._closeDialog();
  this.loading = false;
  }

packages/fiori/src/FlexibleColumnLayout.ts

@@ -125,10 +125,7 @@ type AccessibilityRoles = {
  * <code>import "@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js";</code>
  *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.fiori.FlexibleColumnLayout
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-flexible-column-layout
+ * @extends UI5Element
  * @public
  * @since 1.0.0-rc.8
  */
@@ -145,14 +142,13 @@ type AccessibilityRoles = {
  * Fired when the layout changes via user interaction by clicking the arrows
  * or by changing the component size due to resizing.
  *
- * @param {sap.ui.webc.fiori.types.FCLLayout} layout The current layout
+ * @param {FCLLayout} layout The current layout
  * @param {array} columnLayout The effective column layout, f.e [67%, 33%, 0]
  * @param {boolean} startColumnVisible Indicates if the start column is currently visible
  * @param {boolean} midColumnVisible Indicates if the middle column is currently visible
  * @param {boolean} endColumnVisible Indicates if the end column is currently visible
  * @param {boolean} arrowsUsed Indicates if the layout is changed via the arrows
  * @param {boolean} resize Indicates if the layout is changed via resizing
- * @event sap.ui.webc.fiori.FlexibleColumnLayout#layout-change
  * @public
  */
 @event("layout-change", {
@@ -175,9 +171,7 @@ class FlexibleColumnLayout extends UI5Element {
  * <br><br>
  * <b>For example:</b> layout=<code>TwoColumnsStartExpanded</code> means the layout will display up to two columns
  * in 67%/33% proportion.
- * @type {sap.ui.webc.fiori.types.FCLLayout}
- * @defaultvalue "OneColumn"
- * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.layout
+ * @default "OneColumn"
  * @public
  */
  @property({ type: FCLLayout, defaultValue: FCLLayout.OneColumn })
@@ -187,9 +181,8 @@ class FlexibleColumnLayout extends UI5Element {
  * Defines the visibility of the arrows,
  * used for expanding and shrinking the columns.
  *
- * @type {boolean}
- * @defaultvalue false
- * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.hideArrows
+ * @default false
+
  * @public
  * @since 1.0.0-rc.15
  */
@@ -210,8 +203,6 @@ class FlexibleColumnLayout extends UI5Element {
  * - <code>startArrowContainerAccessibleName</code>: the text that the first arrow container (between the <code>begin</code> and <code>mid</code> columns) will have as <code>aria-label</code>
  * - <code>endArrowContainerAccessibleName</code>: the text that the second arrow container (between the <code>mid</code> and <code>end</code> columns) will have as <code>aria-label</code>
  *
- * @type {object}
- * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.accessibilityTexts
  * @public
  * @since 1.0.0-rc.11
  */
@@ -228,9 +219,7 @@ class FlexibleColumnLayout extends UI5Element {
  * - <code>endArrowContainerRole</code>: the accessibility role for the second arrow container (between the <code>mid</code> and <code>end</code> columns)
  * - <code>endColumnRole</code>: the accessibility role for the <code>endColumn</code>
  *
- * @type {object}
  * @public
- * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.accessibilityRoles
  * @since 1.1.0
  */
  @property({ type: Object })
@@ -239,8 +228,7 @@ class FlexibleColumnLayout extends UI5Element {
  /**
  * Defines the component width in px.
  *
- * @type {sap.ui.webc.base.types.Float}
- * @defaultvalue 0
+ * @default 0
  * @private
  */
  @property({ validator: Float, defaultValue: 0 })
@@ -251,8 +239,7 @@ class FlexibleColumnLayout extends UI5Element {
  * based on both the <code>layout</code> property and the screen size.
  * Example: [67%, 33%, 0], [25%, 50%, 25%], etc.
  *
- * @type {object}
- * @defaultvalue undefined
+ * @default undefined
  * @private
  */
  @property({ type: Object, defaultValue: undefined })
@@ -261,8 +248,7 @@ class FlexibleColumnLayout extends UI5Element {
  /**
  * Defines the visible columns count - 1, 2 or 3.
  *
- * @type {sap.ui.webc.base.types.Integer}
- * @defaultvalue 1
+ * @default 1
  * @private
  */
  @property({ validator: Integer, defaultValue: 0 })
@@ -271,38 +257,27 @@ class FlexibleColumnLayout extends UI5Element {
  /**
  * Allows the user to replace the whole layouts configuration
  *
- * @type {object}
  * @private
- * @sap-restricted
  */
  @property({ type: Object, defaultValue: undefined })
  _layoutsConfiguration?: LayoutConfiguration;
 
  /**
  * Defines the content in the start column.
- * @type {HTMLElement}
- * @slot
- * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.startColumn
  * @public
  */
  @slot()
  startColumn!: Array<HTMLElement>;
 
  /**
  * Defines the content in the middle column.
- * @type {HTMLElement}
- * @slot
- * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.midColumn
  * @public
  */
  @slot()
  midColumn!: Array<HTMLElement>;
 
  /**
  * Defines the content in the end column.
- * @type {HTMLElement}
- * @slot
- * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.endColumn
  * @public
  */
  @slot()
@@ -507,10 +482,7 @@ class FlexibleColumnLayout extends UI5Element {
  * <br><br>
  * <b>For example:</b> ["67%", "33%", 0], ["100%", 0, 0], ["25%", "50%", "25%"], etc,
  * where the numbers represents the width of the start, middle and end columns.
- * @readonly
- * @type {array}
- * @defaultvalue ["100%", 0, 0]
- * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.columnLayout
+ * @default ["100%", 0, 0]
  * @public
  */
  get columnLayout(): ColumnLayout | undefined {
@@ -519,10 +491,7 @@ class FlexibleColumnLayout extends UI5Element {
 
  /**
  * Returns if the <code>start</code> column is visible.
- * @readonly
- * @defaultvalue true
- * @type {boolean}
- * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.startColumnVisible
+ * @default true
  * @public
  */
  get startColumnVisible(): boolean {
@@ -535,10 +504,7 @@ class FlexibleColumnLayout extends UI5Element {
 
  /**
  * Returns if the <code>middle</code> column is visible.
- * @readonly
- * @type {boolean}
- * @defaultvalue false
- * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.midColumnVisible
+ * @default false
  * @public
  */
  get midColumnVisible(): boolean {
@@ -551,10 +517,7 @@ class FlexibleColumnLayout extends UI5Element {
 
  /**
  * Returns if the <code>end</code> column is visible.
- * @readonly
- * @type {boolean}
- * @defaultvalue false
- * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.endColumnVisible
+ * @default false
  * @public
  */
  get endColumnVisible(): boolean {
@@ -567,10 +530,7 @@ class FlexibleColumnLayout extends UI5Element {
 
  /**
  * Returns the number of currently visible columns.
- * @readonly
- * @type {sap.ui.webc.base.types.Integer}
- * @defaultvalue 1
- * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.visibleColumns
+ * @default 1
  * @public
  */
  get visibleColumns(): number {

packages/fiori/src/Interfaces.ts

@@ -28,11 +28,13 @@ const IFilterItemOption = "sap.ui.webc.fiori.IFilterItemOption";
 /**
  * Interface for components that can be slotted inside <code>ui5-media-gallery</code> as items.
  *
- * @name sap.ui.webc.fiori.IMediaGalleryItem
- * @interface
  * @public
  */
-const IMediaGalleryItem = "sap.ui.webc.fiori.IMediaGalleryItem";
+interface IMediaGalleryItem {
+ selected: boolean,
+ disabled: boolean,
+ focused: boolean,
+}
 
 /**
  * Interface for components that may be slotted as an action inside <code>ui5-li-notification</code> and <code>ui5-li-notification-group</code>
@@ -55,11 +57,16 @@ const INotificationListItem = "sap.ui.webc.fiori.INotificationListItem";
 /**
  * Interface for components that may be slotted inside <code>ui5-product-switch</code> as items
  *
- * @name sap.ui.webc.fiori.IProductSwitchItem
- * @interface
  * @public
  */
-const IProductSwitchItem = "sap.ui.webc.fiori.IProductSwitchItem";
+interface IProductSwitchItem {
+ titleText: string,
+ subtitleText: string,
+ icon: string,
+ target: string,
+ targetSrc: string,
+ selected: boolean,
+}
 
 /**
  * Interface for components that may be slotted inside <code>ui5-shellbar</code> as items