From 5cd8dcf386683d0bdb426a079a45e43474eb8dcd Mon Sep 17 00:00:00 2001 From: yanaminkova Date: Wed, 8 Nov 2023 12:30:35 +0200 Subject: [PATCH 1/6] docs: new cem for Topic-P components --- packages/fiori/src/BarcodeScannerDialog.ts | 12 +---- packages/fiori/src/FlexibleColumnLayout.ts | 50 ++++++----------- packages/fiori/src/Interfaces.ts | 19 ++++--- packages/fiori/src/MediaGallery.ts | 41 +++++--------- packages/fiori/src/MediaGalleryItem.ts | 19 ++----- packages/fiori/src/ProductSwitch.ts | 17 +++--- packages/fiori/src/ProductSwitchItem.ts | 25 ++++----- packages/fiori/src/types/FCLLayout.ts | 12 ----- .../fiori/src/types/MediaGalleryItemLayout.ts | 5 -- .../fiori/src/types/MediaGalleryLayout.ts | 6 --- .../types/MediaGalleryMenuHorizontalAlign.ts | 5 -- .../types/MediaGalleryMenuVerticalAlign.ts | 5 -- packages/main/src/Avatar.ts | 54 +++++++------------ packages/main/src/AvatarGroup.ts | 39 +++++--------- packages/main/src/Interfaces.ts | 12 ++--- packages/main/src/types/AvatarColorScheme.ts | 14 ----- packages/main/src/types/AvatarGroupType.ts | 5 -- packages/main/src/types/AvatarShape.ts | 5 -- packages/main/src/types/AvatarSize.ts | 8 --- 19 files changed, 103 insertions(+), 250 deletions(-) diff --git a/packages/fiori/src/BarcodeScannerDialog.ts b/packages/fiori/src/BarcodeScannerDialog.ts index d7f4294f3271..cfe3f671d379 100644 --- a/packages/fiori/src/BarcodeScannerDialog.ts +++ b/packages/fiori/src/BarcodeScannerDialog.ts @@ -68,10 +68,7 @@ type BarcodeScannerDialogScanErrorEventDetail = { * For a list of supported barcode formats, see the zxing-js/library 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 */ @@ -120,8 +115,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 }) @@ -143,7 +137,6 @@ 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 */ @@ -171,7 +164,6 @@ class BarcodeScannerDialog extends UI5Element { /** * Closes the dialog and the scan session. * @method - * @name sap.ui.webc.fiori.BarcodeScannerDialog#close * @returns {void} * @public */ diff --git a/packages/fiori/src/FlexibleColumnLayout.ts b/packages/fiori/src/FlexibleColumnLayout.ts index 8fbea6757ef3..bc3421541e9e 100644 --- a/packages/fiori/src/FlexibleColumnLayout.ts +++ b/packages/fiori/src/FlexibleColumnLayout.ts @@ -125,10 +125,7 @@ type AccessibilityRoles = { * import "@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js"; * * @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 */ @@ -152,7 +149,6 @@ type AccessibilityRoles = { * @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,8 @@ class FlexibleColumnLayout extends UI5Element { *

* For example: layout=TwoColumnsStartExpanded 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 + * @type {FCLLayout} + * @default "OneColumn" * @public */ @property({ type: FCLLayout, defaultValue: FCLLayout.OneColumn }) @@ -188,8 +183,8 @@ class FlexibleColumnLayout extends UI5Element { * 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 */ @@ -211,7 +206,6 @@ class FlexibleColumnLayout extends UI5Element { * - endArrowContainerAccessibleName: the text that the second arrow container (between the mid and end columns) will have as aria-label * * @type {object} - * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.accessibilityTexts * @public * @since 1.0.0-rc.11 */ @@ -230,7 +224,6 @@ class FlexibleColumnLayout extends UI5Element { * * @type {object} * @public - * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.accessibilityRoles * @since 1.1.0 */ @property({ type: Object }) @@ -239,8 +232,8 @@ class FlexibleColumnLayout extends UI5Element { /** * Defines the component width in px. * - * @type {sap.ui.webc.base.types.Float} - * @defaultvalue 0 + * @type {Float} + * @default 0 * @private */ @property({ validator: Float, defaultValue: 0 }) @@ -252,7 +245,7 @@ class FlexibleColumnLayout extends UI5Element { * Example: [67%, 33%, 0], [25%, 50%, 25%], etc. * * @type {object} - * @defaultvalue undefined + * @default undefined * @private */ @property({ type: Object, defaultValue: undefined }) @@ -261,8 +254,8 @@ class FlexibleColumnLayout extends UI5Element { /** * Defines the visible columns count - 1, 2 or 3. * - * @type {sap.ui.webc.base.types.Integer} - * @defaultvalue 1 + * @type {Integer} + * @default 1 * @private */ @property({ validator: Integer, defaultValue: 0 }) @@ -281,8 +274,6 @@ class FlexibleColumnLayout extends UI5Element { /** * Defines the content in the start column. * @type {HTMLElement} - * @slot - * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.startColumn * @public */ @slot() @@ -291,8 +282,6 @@ class FlexibleColumnLayout extends UI5Element { /** * Defines the content in the middle column. * @type {HTMLElement} - * @slot - * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.midColumn * @public */ @slot() @@ -301,8 +290,6 @@ class FlexibleColumnLayout extends UI5Element { /** * Defines the content in the end column. * @type {HTMLElement} - * @slot - * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.endColumn * @public */ @slot() @@ -509,8 +496,7 @@ class FlexibleColumnLayout extends UI5Element { * 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 { @@ -520,9 +506,8 @@ class FlexibleColumnLayout extends UI5Element { /** * Returns if the start column is visible. * @readonly - * @defaultvalue true + * @default true * @type {boolean} - * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.startColumnVisible * @public */ get startColumnVisible(): boolean { @@ -537,8 +522,7 @@ class FlexibleColumnLayout extends UI5Element { * Returns if the middle column is visible. * @readonly * @type {boolean} - * @defaultvalue false - * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.midColumnVisible + * @default false * @public */ get midColumnVisible(): boolean { @@ -553,8 +537,7 @@ class FlexibleColumnLayout extends UI5Element { * Returns if the end column is visible. * @readonly * @type {boolean} - * @defaultvalue false - * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.endColumnVisible + * @default false * @public */ get endColumnVisible(): boolean { @@ -568,9 +551,8 @@ 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 + * @type {Integer} + * @default 1 * @public */ get visibleColumns(): number { diff --git a/packages/fiori/src/Interfaces.ts b/packages/fiori/src/Interfaces.ts index 30f113637518..39f5803c5168 100644 --- a/packages/fiori/src/Interfaces.ts +++ b/packages/fiori/src/Interfaces.ts @@ -28,11 +28,13 @@ const IFilterItemOption = "sap.ui.webc.fiori.IFilterItemOption"; /** * Interface for components that can be slotted inside ui5-media-gallery 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 ui5-li-notification and ui5-li-notification-group @@ -55,11 +57,16 @@ const INotificationListItem = "sap.ui.webc.fiori.INotificationListItem"; /** * Interface for components that may be slotted inside ui5-product-switch 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 ui5-shellbar as items diff --git a/packages/fiori/src/MediaGallery.ts b/packages/fiori/src/MediaGallery.ts index f3dba1e4f176..bed24039c7d8 100644 --- a/packages/fiori/src/MediaGallery.ts +++ b/packages/fiori/src/MediaGallery.ts @@ -19,6 +19,7 @@ import MediaGalleryItemLayout from "./types/MediaGalleryItemLayout.js"; import MediaGalleryLayout from "./types/MediaGalleryLayout.js"; import MediaGalleryMenuHorizontalAlign from "./types/MediaGalleryMenuHorizontalAlign.js"; import MediaGalleryMenuVerticalAlign from "./types/MediaGalleryMenuVerticalAlign.js"; +import type IMediaGalleryItem from "./MediaGalleryItem.js"; // Styles import MediaGalleryCss from "./generated/themes/MediaGallery.css.js"; @@ -75,11 +76,7 @@ const COLUMNS_COUNT: Record = { * import "@ui5/webcomponents-fiori/dist/MediaGalleryItem"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.MediaGallery - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-media-gallery - * @appenddocs sap.ui.webc.fiori.MediaGalleryItem + * @extends UI5Element * @public * @since 1.1.0 */ @@ -99,7 +96,6 @@ const COLUMNS_COUNT: Record = { /** * Fired when selection is changed by user interaction. * - * @event sap.ui.webc.fiori.MediaGallery#selection-change * @param {HTMLElement} item the selected item. * @public */ @@ -112,7 +108,6 @@ const COLUMNS_COUNT: Record = { /** * Fired when the thumbnails overflow button is clicked. * - * @event sap.ui.webc.fiori.MediaGallery#overflow-click * @public */ @event("overflow-click") @@ -122,7 +117,6 @@ const COLUMNS_COUNT: Record = { * The display area is the central area that contains * the enlarged content of the currently selected item. * - * @event sap.ui.webc.fiori.MediaGallery#display-area-click * @public */ @event("display-area-click") @@ -134,8 +128,7 @@ class MediaGallery extends UI5Element { * an overflow button that shows the count of the remaining thumbnails. * * @type {boolean} - * @name sap.ui.webc.fiori.MediaGallery.prototype.showAllThumbnails - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -149,8 +142,7 @@ class MediaGallery extends UI5Element { * the enlarged content of the currently selected item. * * @type {boolean} - * @name sap.ui.webc.fiori.MediaGallery.prototype.interactiveDisplayArea - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -159,9 +151,8 @@ class MediaGallery extends UI5Element { /** * Determines the layout of the component. * - * @type {sap.ui.webc.fiori.types.MediaGalleryLayout} - * @name sap.ui.webc.fiori.MediaGallery.prototype.layout - * @defaultvalue "Auto" + * @type {MediaGalleryLayout} + * @default "Auto" * @public */ @property({ type: MediaGalleryLayout, defaultValue: MediaGalleryLayout.Auto }) @@ -171,9 +162,8 @@ class MediaGallery extends UI5Element { * Determines the horizontal alignment of the thumbnails menu * vs. the central display area. * - * @type {sap.ui.webc.fiori.types.MediaGalleryMenuHorizontalAlign} - * @name sap.ui.webc.fiori.MediaGallery.prototype.menuHorizontalAlign - * @defaultvalue "Left" + * @type {MediaGalleryMenuHorizontalAlign} + * @default "Left" * @public */ @property({ type: MediaGalleryMenuHorizontalAlign, defaultValue: MediaGalleryMenuHorizontalAlign.Left }) @@ -183,9 +173,8 @@ class MediaGallery extends UI5Element { * Determines the vertical alignment of the thumbnails menu * vs. the central display area. * - * @type {sap.ui.webc.fiori.types.MediaGalleryMenuVerticalAlign} - * @name sap.ui.webc.fiori.MediaGallery.prototype.menuVerticalAlign - * @defaultvalue "Bottom" + * @type {MediaGalleryMenuVerticalAlign} + * @default "Bottom" * @public */ @property({ type: MediaGalleryMenuVerticalAlign, defaultValue: MediaGalleryMenuVerticalAlign.Bottom }) @@ -196,8 +185,8 @@ class MediaGallery extends UI5Element { * (esp. needed when the app did not specify a fixed layout type * but selected Auto layout type). * - * @type {sap.ui.webc.fiori.types.MediaGalleryLayout} - * @defaultvalue "Vertical" + * @type {MediaGalleryLayout} + * @default "Vertical" * @private */ @property({ type: MediaGalleryLayout, defaultValue: MediaGalleryLayout.Vertical }) @@ -228,9 +217,7 @@ class MediaGallery extends UI5Element { *

* Note: Use the ui5-media-gallery-item component to define the desired items. * - * @type {sap.ui.webc.fiori.IMediaGalleryItem[]} - * @name sap.ui.webc.fiori.MediaGallery.prototype.default - * @slot items + * @type {IMediaGalleryItem[]} * @public */ @slot({ @@ -239,7 +226,7 @@ class MediaGallery extends UI5Element { invalidateOnChildChange: true, "default": true, }) - items!: Array; + items!: Array; _itemNavigation: ItemNavigation; _onResize: () => void; diff --git a/packages/fiori/src/MediaGalleryItem.ts b/packages/fiori/src/MediaGalleryItem.ts index 47de170004c5..63ebfbc16d39 100644 --- a/packages/fiori/src/MediaGalleryItem.ts +++ b/packages/fiori/src/MediaGalleryItem.ts @@ -9,6 +9,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js"; import MediaGalleryItemLayout from "./types/MediaGalleryItemLayout.js"; +import type { IMediaGalleryItem } from "./Interfaces.js"; // Styles import MediaGalleryItemCss from "./generated/themes/MediaGalleryItem.css.js"; @@ -38,12 +39,9 @@ import MediaGalleryItemTemplate from "./generated/templates/MediaGalleryItemTemp * import "@ui5/webcomponents-fiori/dist/MediaGalleryItem.js"; (comes with ui5-media-gallery) * * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.MediaGalleryItem - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-media-gallery-item + * @extends UI5Element * @public - * @implements sap.ui.webc.fiori.IMediaGalleryItem + * @implements {IMediaGalleryItem} * @since 1.1.0 */ @customElement({ @@ -53,12 +51,11 @@ import MediaGalleryItemTemplate from "./generated/templates/MediaGalleryItemTemp template: MediaGalleryItemTemplate, dependencies: [Icon], }) -class MediaGalleryItem extends UI5Element implements ITabbable { +class MediaGalleryItem extends UI5Element implements ITabbable, IMediaGalleryItem { /** * Defines the selected state of the component. * * @type {boolean} - * @name sap.ui.webc.fiori.MediaGalleryItem.prototype.selected * @defaultvalue false * @public */ @@ -69,7 +66,6 @@ class MediaGalleryItem extends UI5Element implements ITabbable { * Defines whether the component is in disabled state. * * @type {boolean} - * @name sap.ui.webc.fiori.MediaGalleryItem.prototype.disabled * @defaultvalue false * @public */ @@ -85,8 +81,7 @@ class MediaGalleryItem extends UI5Element implements ITabbable { *
  • Wide
    • * * - * @type {sap.ui.webc.fiori.types.MediaGalleryItemLayout} - * @name sap.ui.webc.fiori.MediaGalleryItem.prototype.layout + * @type {MediaGalleryItemLayout} * @defaultvalue "Square" * @public */ @@ -145,8 +140,6 @@ class MediaGalleryItem extends UI5Element implements ITabbable { * Defines the content of the component. * * @type {HTMLElement} - * @name sap.ui.webc.fiori.MediaGalleryItem.prototype.default - * @slot content * @public */ @slot({ type: HTMLElement, "default": true }) @@ -156,8 +149,6 @@ class MediaGalleryItem extends UI5Element implements ITabbable { * Defines the content of the thumbnail. * * @type {HTMLElement} - * @name sap.ui.webc.fiori.MediaGalleryItem.prototype.thumbnail - * @slot thumbnail * @public */ @slot() diff --git a/packages/fiori/src/ProductSwitch.ts b/packages/fiori/src/ProductSwitch.ts index d4f1e072da74..36f92893fd0e 100644 --- a/packages/fiori/src/ProductSwitch.ts +++ b/packages/fiori/src/ProductSwitch.ts @@ -23,7 +23,7 @@ import { // Styles import ProductSwitchCss from "./generated/themes/ProductSwitch.css.js"; -import type ProductSwitchItem from "./ProductSwitchItem.js"; +import type IProductSwitchItem from "./ProductSwitchItem.js"; /** * @class @@ -51,11 +51,7 @@ import type ProductSwitchItem from "./ProductSwitchItem.js"; *
    * import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js"; (for ui5-product-switch-item) * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.ProductSwitch - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-product-switch - * @appenddocs sap.ui.webc.fiori.ProductSwitchItem + * @extends UI5Element * @public * @since 1.0.0-rc.5 */ @@ -90,13 +86,12 @@ class ProductSwitch extends UI5Element { /** * Defines the items of the ui5-product-switch. * - * @type {sap.ui.webc.fiori.IProductSwitchItem[]} + * @type {IProductSwitchItem[]} * @name sap.ui.webc.fiori.ProductSwitch.prototype.default - * @slot items * @public */ @slot({ type: HTMLElement, "default": true }) - items!: Array + items!: Array _itemNavigation: ItemNavigation; _currentIndex: number; @@ -146,11 +141,11 @@ class ProductSwitch extends UI5Element { handleProductSwitchItemClick(e: MouseEvent) { this.items.forEach(item => { item.selected = false; }); - (e.target as ProductSwitchItem).selected = true; + (e.target as IProductSwitchItem).selected = true; } _onfocusin(e: FocusEvent) { - const target = e.target as ProductSwitchItem; + const target = e.target as IProductSwitchItem; this._itemNavigation.setCurrentItem(target); this._currentIndex = this.items.indexOf(target); diff --git a/packages/fiori/src/ProductSwitchItem.ts b/packages/fiori/src/ProductSwitchItem.ts index d67511ba0e76..d132371797a4 100644 --- a/packages/fiori/src/ProductSwitchItem.ts +++ b/packages/fiori/src/ProductSwitchItem.ts @@ -10,6 +10,7 @@ import ProductSwitchItemTemplate from "./generated/templates/ProductSwitchItemTe // Styles import ProductSwitchItemCss from "./generated/themes/ProductSwitchItem.css.js"; +import type { IProductSwitchItem } from "./Interfaces.js"; /** * @class @@ -33,12 +34,9 @@ import ProductSwitchItemCss from "./generated/themes/ProductSwitchItem.css.js"; * import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.ProductSwitchItem - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-product-switch-item + * @extends UI5Element * @public - * @implements sap.ui.webc.fiori.IProductSwitchItem + * @implements {IProductSwitchItem} * @since 1.0.0-rc.5 */ @customElement({ @@ -52,12 +50,11 @@ import ProductSwitchItemCss from "./generated/themes/ProductSwitchItem.css.js"; * Fired when the ui5-product-switch-item is activated either with a * click/tap or by using the Enter or Space key. * - * @event sap.ui.webc.fiori.ProductSwitchItem#click * @public */ @event("click") @event("_focused") -class ProductSwitchItem extends UI5Element implements ITabbable { +class ProductSwitchItem extends UI5Element implements ITabbable, IProductSwitchItem { constructor() { super(); @@ -71,8 +68,7 @@ class ProductSwitchItem extends UI5Element implements ITabbable { /** * Defines the title of the component. * @type {string} - * @name sap.ui.webc.fiori.ProductSwitchItem.prototype.titleText - * @defaultvalue "" + * @default "" * @since 1.0.0-rc.15 * @public */ @@ -82,8 +78,7 @@ class ProductSwitchItem extends UI5Element implements ITabbable { /** * Defines the subtitle of the component. * @type {string} - * @name sap.ui.webc.fiori.ProductSwitchItem.prototype.subtitleText - * @defaultvalue "" + * @default "" * @since 1.0.0-rc.15 * @public */ @@ -100,8 +95,7 @@ class ProductSwitchItem extends UI5Element implements ITabbable { * See all the available icons in the Icon Explorer. * * @type {string} - * @name sap.ui.webc.fiori.ProductSwitchItem.prototype.icon - * @defaultvalue "" + * @default "" * @public */ @property() @@ -120,7 +114,6 @@ class ProductSwitchItem extends UI5Element implements ITabbable { * * * @type {string} - * @name sap.ui.webc.fiori.ProductSwitchItem.prototype.target * @public */ @property({ defaultValue: "_self" }) @@ -129,8 +122,8 @@ class ProductSwitchItem extends UI5Element implements ITabbable { /** * Defines the component target URI. Supports standard hyperlink behavior. * @type {string} - * @name sap.ui.webc.fiori.ProductSwitchItem.prototype.targetSrc - * @defaultvalue "" + + * @default "" * @public */ @property() diff --git a/packages/fiori/src/types/FCLLayout.ts b/packages/fiori/src/types/FCLLayout.ts index 35a0abed92d4..3c9ac309919e 100644 --- a/packages/fiori/src/types/FCLLayout.ts +++ b/packages/fiori/src/types/FCLLayout.ts @@ -2,16 +2,12 @@ * Different types of FCLLayout. * * @readonly - * @enum {string} * @public - * @author SAP SE - * @alias sap.ui.webc.fiori.types.FCLLayout */ enum FCLLayout { /** * The layout will display 1 column. * @public - * @type {OneColumn} */ OneColumn = "OneColumn", @@ -23,7 +19,6 @@ enum FCLLayout { * * Use to display both a list and a detail page when the user should focus on the list page. * - * @type {TwoColumnsStartExpanded} * @public */ TwoColumnsStartExpanded = "TwoColumnsStartExpanded", @@ -35,7 +30,6 @@ enum FCLLayout { * * Use to display both a list and a detail page when the user should focus on the detail page. * - * @type {TwoColumnsMidExpanded} * @public */ TwoColumnsMidExpanded = "TwoColumnsMidExpanded", @@ -47,7 +41,6 @@ enum FCLLayout { * * Use to display all three pages (list, detail, detail-detail) when the user should focus on the detail. * - * @type {ThreeColumnsMidExpanded} * @public */ ThreeColumnsMidExpanded = "ThreeColumnsMidExpanded", @@ -60,7 +53,6 @@ enum FCLLayout { * Use to display all three pages (list, detail, detail-detail) when the user should focus on the detail-detail. * * @public - * @type ThreeColumnsEndExpanded */ ThreeColumnsEndExpanded = "ThreeColumnsEndExpanded", @@ -73,7 +65,6 @@ enum FCLLayout { * The detail-detail is still loaded and easily accessible with layout arrows. * * @public - * @type ThreeColumnsStartExpandedEndHidden */ ThreeColumnsStartExpandedEndHidden = "ThreeColumnsStartExpandedEndHidden", @@ -86,7 +77,6 @@ enum FCLLayout { * The detail-detail is still loaded and easily accessible with a layout arrow. * * @public - * @type ThreeColumnsMidExpandedEndHidden */ ThreeColumnsMidExpandedEndHidden = "ThreeColumnsMidExpandedEndHidden", @@ -98,7 +88,6 @@ enum FCLLayout { * Use to display a detail page only, when the user should focus entirely on it. * * @public - * @type MidColumnFullScreen */ MidColumnFullScreen = "MidColumnFullScreen", @@ -110,7 +99,6 @@ enum FCLLayout { * Use to display a detail-detail page only, when the user should focus entirely on it. * * @public - * @type EndColumnFullScreen */ EndColumnFullScreen = "EndColumnFullScreen", } diff --git a/packages/fiori/src/types/MediaGalleryItemLayout.ts b/packages/fiori/src/types/MediaGalleryItemLayout.ts index d80ce448a5d5..aca8c8c6c717 100644 --- a/packages/fiori/src/types/MediaGalleryItemLayout.ts +++ b/packages/fiori/src/types/MediaGalleryItemLayout.ts @@ -2,10 +2,7 @@ * Defines the layout of the content displayed in the ui5-media-gallery-item. * * @readonly - * @enum {string} * @public - * @author SAP SE - * @alias sap.ui.webc.fiori.types.MediaGalleryItemLayout */ enum MediaGalleryItemLayout { @@ -13,7 +10,6 @@ enum MediaGalleryItemLayout { * Recommended to use when the item contains an image.
    * When a thumbnail is selected, it makes the corresponding enlarged content appear in a square display area. * @public - * @type {Square} */ Square = "Square", @@ -22,7 +18,6 @@ enum MediaGalleryItemLayout { * When a thumbnail is selected, it makes the corresponding enlarged content appear in a wide display area * (stretched to fill all of the available width) for optimal user experiance. * @public - * @type {Wide} */ Wide = "Wide", } diff --git a/packages/fiori/src/types/MediaGalleryLayout.ts b/packages/fiori/src/types/MediaGalleryLayout.ts index df17e5f016b5..252b4467a733 100644 --- a/packages/fiori/src/types/MediaGalleryLayout.ts +++ b/packages/fiori/src/types/MediaGalleryLayout.ts @@ -2,31 +2,25 @@ * Defines the layout type of the thumbnails list of the ui5-media-gallery component. * * @readonly - * @enum {string} * @public - * @author SAP SE - * @alias sap.ui.webc.fiori.types.MediaGalleryLayout */ enum MediaGalleryLayout { /** * The layout is determined automatically. * @public - * @type {Auto} */ Auto = "Auto", /** * Displays the layout as a vertical split between the thumbnails list and the selected image. * @public - * @type {Vertical} */ Vertical = "Vertical", /** * Displays the layout as a horizontal split between the thumbnails list and the selected image. * @public - * @type {Horizontal} */ Horizontal = "Horizontal", } diff --git a/packages/fiori/src/types/MediaGalleryMenuHorizontalAlign.ts b/packages/fiori/src/types/MediaGalleryMenuHorizontalAlign.ts index a8063ab046e4..c97e1f37d625 100644 --- a/packages/fiori/src/types/MediaGalleryMenuHorizontalAlign.ts +++ b/packages/fiori/src/types/MediaGalleryMenuHorizontalAlign.ts @@ -2,24 +2,19 @@ * Defines the horizontal alignment of the thumbnails menu of the ui5-media-gallery component. * * @readonly - * @enum {string} * @public - * @author SAP SE - * @alias sap.ui.webc.fiori.types.MediaGalleryMenuHorizontalAlign */ enum MediaGalleryMenuHorizontalAlign { /** * Displays the menu on the left side of the target. * @public - * @type {Left} */ Left = "Left", /** * Displays the menu on the right side of the target. * @public - * @type {Right} */ Right = "Right", } diff --git a/packages/fiori/src/types/MediaGalleryMenuVerticalAlign.ts b/packages/fiori/src/types/MediaGalleryMenuVerticalAlign.ts index 4a27a0ec20f5..ba9377f67fe3 100644 --- a/packages/fiori/src/types/MediaGalleryMenuVerticalAlign.ts +++ b/packages/fiori/src/types/MediaGalleryMenuVerticalAlign.ts @@ -2,23 +2,18 @@ * Types for the vertical alignment of the thumbnails menu of the ui5-media-gallery component. * * @readonly - * @enum {string} * @public - * @author SAP SE - * @alias sap.ui.webc.fiori.types.MediaGalleryMenuVerticalAlign */ enum MediaGalleryMenuVerticalAlign { /** * Displays the menu at the top of the reference control. * @public - * @type {Top} */ Top = "Top", /** * Displays the menu at the bottom of the reference control. * @public - * @type {Bottom} */ Bottom = "Bottom", } diff --git a/packages/main/src/Avatar.ts b/packages/main/src/Avatar.ts index d71af5aed91f..2e5202ae1c0a 100644 --- a/packages/main/src/Avatar.ts +++ b/packages/main/src/Avatar.ts @@ -11,6 +11,7 @@ import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.j import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js"; import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js"; import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js"; +import type { IAvatar } from "./Interfaces.js"; // Template import AvatarTemplate from "./generated/templates/AvatarTemplate.lit.js"; @@ -53,12 +54,9 @@ import "@ui5/webcomponents-icons/dist/alert.js"; * import "@ui5/webcomponents/dist/Avatar.js"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.Avatar - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-avatar + * @extends UI5Element * @since 1.0.0-rc.6 - * @implements sap.ui.webc.main.IAvatar + * @implements {IAvatar} * @public */ @customElement({ @@ -73,20 +71,18 @@ import "@ui5/webcomponents-icons/dist/alert.js"; * Fired on mouseup, space and enter if avatar is interactive * Note: The event will not be fired if the disabled * property is set to true. -* @event * @private * @since 1.0.0-rc.11 */ @event("click") -class Avatar extends UI5Element implements ITabbable { +class Avatar extends UI5Element implements ITabbable, IAvatar { /** * Defines whether the component is disabled. * A disabled component can't be pressed or * focused, and it is not in the tab chain. * * @type {boolean} - * @name sap.ui.webc.main.Avatar.prototype.disabled - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -97,8 +93,7 @@ class Avatar extends UI5Element implements ITabbable { * Note: This property won't have effect if the disabled * property is set to true. * @type {boolean} - * @name sap.ui.webc.main.Avatar.prototype.interactive - * @defaultValue false + * @default false * @public */ @property({ type: Boolean }) @@ -133,8 +128,7 @@ class Avatar extends UI5Element implements ITabbable { * * See all the available icons in the Icon Explorer. * @type {string} - * @name sap.ui.webc.main.Avatar.prototype.icon - * @defaultvalue "" + * @default "" * @public */ @property() @@ -160,8 +154,7 @@ class Avatar extends UI5Element implements ITabbable { * * See all the available icons in the Icon Explorer. * @type {string} - * @name sap.ui.webc.main.Avatar.prototype.fallbackIcon - * @defaultvalue "" + * @default "" * @public */ @property() @@ -173,8 +166,7 @@ class Avatar extends UI5Element implements ITabbable { * Up to three Latin letters can be displayed as initials. * * @type {string} - * @name sap.ui.webc.main.Avatar.prototype.initials - * @defaultvalue "" + * @default "" * @public */ @property() @@ -183,9 +175,8 @@ class Avatar extends UI5Element implements ITabbable { /** * Defines the shape of the component. * - * @type {sap.ui.webc.main.types.AvatarShape} - * @name sap.ui.webc.main.Avatar.prototype.shape - * @defaultvalue "Circle" + * @type {AvatarShape} + * @default "Circle" * @public */ @property({ type: AvatarShape, defaultValue: AvatarShape.Circle }) @@ -194,9 +185,8 @@ class Avatar extends UI5Element implements ITabbable { /** * Defines predefined size of the component. * - * @type {sap.ui.webc.main.types.AvatarSize} - * @name sap.ui.webc.main.Avatar.prototype.size - * @defaultvalue "S" + * @type {AvatarSize} + * @default "S" * @public */ @property({ type: AvatarSize, defaultValue: AvatarSize.S }) @@ -211,9 +201,8 @@ class Avatar extends UI5Element implements ITabbable { /** * Defines the background color of the desired image. * - * @type {sap.ui.webc.main.types.AvatarColorScheme} - * @name sap.ui.webc.main.Avatar.prototype.colorScheme - * @defaultvalue "Accent6" + * @type {AvatarColorScheme} + * @default "Accent6" * @public */ @property({ type: AvatarColorScheme, defaultValue: AvatarColorScheme.Accent6 }) @@ -230,8 +219,7 @@ class Avatar extends UI5Element implements ITabbable { * If not provided a default text alternative will be set, if present. * * @type {string} - * @name sap.ui.webc.main.Avatar.prototype.accessibleName - * @defaultvalue "" + * @default "" * @public * @since 1.0.0-rc.7 */ @@ -241,7 +229,7 @@ class Avatar extends UI5Element implements ITabbable { /** * Defines the aria-haspopup value of the component when interactive property is true. *

    - * @type String + * @type {string} * @since 1.0.0-rc.15 * @protected */ @@ -265,8 +253,6 @@ class Avatar extends UI5Element implements ITabbable { * }
    * * @type {HTMLElement} - * @name sap.ui.webc.main.Avatar.prototype.default - * @slot image * @public * @since 1.0.0-rc.15 */ @@ -294,8 +280,6 @@ class Avatar extends UI5Element implements ITabbable { * * * @type {HTMLElement} - * @name sap.ui.webc.main.Avatar.prototype.badge - * @slot badge * @public * @since 1.7.0 */ @@ -323,7 +307,7 @@ class Avatar extends UI5Element implements ITabbable { * Returns the effective avatar size. * @readonly * @type {string} - * @defaultValue "S" + * @default "S" * @private */ get _effectiveSize(): AvatarSize { @@ -335,7 +319,7 @@ class Avatar extends UI5Element implements ITabbable { * Returns the effective background color. * @readonly * @type {string} - * @defaultValue "Accent6" + * @default "Accent6" * @private */ get _effectiveBackgroundColor() { diff --git a/packages/main/src/AvatarGroup.ts b/packages/main/src/AvatarGroup.ts index 75cc9020407c..d0b5f8d06c7f 100644 --- a/packages/main/src/AvatarGroup.ts +++ b/packages/main/src/AvatarGroup.ts @@ -14,7 +14,7 @@ import { isSpace, } from "@ui5/webcomponents-base/dist/Keys.js"; import Button from "./Button.js"; -import type Avatar from "./Avatar.js"; +import type IAvatar from "./Avatar.js"; import AvatarSize from "./types/AvatarSize.js"; import AvatarGroupType from "./types/AvatarGroupType.js"; import AvatarColorScheme from "./types/AvatarColorScheme.js"; @@ -132,10 +132,7 @@ type AvatarGroupClickEventDetail = { *
    * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.AvatarGroup - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-avatar-group + * @extends UI5Element * @since 1.0.0-rc.11 * @public */ @@ -152,7 +149,6 @@ type AvatarGroupClickEventDetail = { * click/tap or by using the Enter or Space key. * @param {HTMLElement} targetRef The DOM ref of the clicked item. * @param {boolean} overflowButtonClicked indicates if the overflow button is clicked -* @event sap.ui.webc.main.AvatarGroup#click * @public * @since 1.0.0-rc.11 */ @@ -166,7 +162,6 @@ type AvatarGroupClickEventDetail = { /** * Fired when the count of visible ui5-avatar elements in the * component has changed -* @event sap.ui.webc.main.AvatarGroup#overflow * @public * @since 1.0.0-rc.13 */ @@ -176,9 +171,8 @@ class AvatarGroup extends UI5Element { /** * Defines the mode of the AvatarGroup. * - * @type {sap.ui.webc.main.types.AvatarGroupType} - * @name sap.ui.webc.main.AvatarGroup.prototype.type - * @defaultValue "Group" + * @type {AvatarGroupType} + * @default "Group" * @public */ @property({ type: AvatarGroupType, defaultValue: AvatarGroupType.Group }) @@ -192,9 +186,8 @@ class AvatarGroup extends UI5Element { *
  • the default "More" overflow button when type is Individual
    • * *

    - * @type String - * @name sap.ui.webc.main.AvatarGroup.prototype.ariaHaspopup - * @since 1.0.0-rc.15 + * @type {string} + * @since 1.0.0-rc.15 * @protected */ @property() @@ -212,13 +205,11 @@ class AvatarGroup extends UI5Element { * Note: The UX guidelines recommends using avatars with "Circle" shape. * Moreover, if you use avatars with "Square" shape, there will be visual inconsistency * as the built-in overflow action has "Circle" shape. - * @type {sap.ui.webc.main.IAvatar[]} - * @name sap.ui.webc.main.AvatarGroup.prototype.default - * @slot items + * @type {IAvatar[]} * @public */ @slot({ type: HTMLElement, "default": true }) - items!: Array; + items!: Array; /** * Defines the overflow button of the component. @@ -227,8 +218,6 @@ class AvatarGroup extends UI5Element { * Note: If this slot is not used, the component will * display the built-in overflow button. * @type {HTMLElement} - * @name sap.ui.webc.main.AvatarGroup.prototype.overflowButton - * @slot overflowButton * @public * @since 1.0.0-rc.13 */ @@ -262,8 +251,7 @@ class AvatarGroup extends UI5Element { * Returns an array containing the ui5-avatar instances that are currently not displayed due to lack of space. * @readonly * @type {HTMLElement[]} - * @defaultValue [] - * @name sap.ui.webc.main.AvatarGroup.prototype.hiddenItems + * @default [] * @public */ get hiddenItems() { @@ -273,9 +261,8 @@ class AvatarGroup extends UI5Element { /** * Returns an array containing the AvatarColorScheme values that correspond to the avatars in the component. * @readonly - * @type {sap.ui.webc.main.types.AvatarColorScheme[]} - * @name sap.ui.webc.main.AvatarGroup.prototype.colorScheme - * @defaultValue [] + * @type {AvatarColorScheme[]} + * @default [] * @public */ get colorScheme() { @@ -499,7 +486,7 @@ class AvatarGroup extends UI5Element { } _onfocusin(e: FocusEvent) { - this._itemNavigation.setCurrentItem(e.target as Avatar); + this._itemNavigation.setCurrentItem(e.target as IAvatar); } /** @@ -541,7 +528,7 @@ class AvatarGroup extends UI5Element { let hiddenItems = 0; for (let index = 0; index < this._itemsCount; index++) { - const item: Avatar = this.items[index]; + const item: IAvatar = this.items[index]; // show item to determine if it will fit the new container size item.hidden = false; diff --git a/packages/main/src/Interfaces.ts b/packages/main/src/Interfaces.ts index 6240ff43baaf..a3f0a0da562f 100644 --- a/packages/main/src/Interfaces.ts +++ b/packages/main/src/Interfaces.ts @@ -1,11 +1,11 @@ /** * Interface for components that represent an avatar and may be slotted in numerous higher-order components such as ui5-avatar-group * - * @name sap.ui.webc.main.IAvatar - * @interface * @public */ -const IAvatar = "sap.ui.webc.main.IAvatar"; +interface IAvatar { + isUI5Element: boolean, +} /** * Interface for components that may be slotted inside ui5-breadcrumbs as options @@ -127,11 +127,11 @@ const ISegmentedButtonItem = "sap.ui.webc.main.ISegmentedButtonItem"; /** * Interface for components that may be slotted inside ui5-select as options * - * @name sap.ui.webc.main.ISelectOption - * @interface * @public */ -const ISelectOption = "sap.ui.webc.main.ISelectOption"; +interface ISelectOption { + isUI5Element: boolean, +} /** * Interface for components that may be slotted inside ui5-select-menu as options diff --git a/packages/main/src/types/AvatarColorScheme.ts b/packages/main/src/types/AvatarColorScheme.ts index f72e2e722b11..d6c8a0e0857e 100644 --- a/packages/main/src/types/AvatarColorScheme.ts +++ b/packages/main/src/types/AvatarColorScheme.ts @@ -2,86 +2,72 @@ * Different types of AvatarColorScheme. * * @readonly - * @enum {string} * @public - * @author SAP SE - * @alias sap.ui.webc.main.types.AvatarColorScheme */ enum AvatarColorScheme { /** * * @public - * @type {Accent1} */ Accent1 = "Accent1", /** * * @public - * @type {Accent2} */ Accent2 = "Accent2", /** * * @public - * @type {Accent3} */ Accent3 = "Accent3", /** * * @public - * @type {Accent4} */ Accent4 = "Accent4", /** * * @public - * @type {Accent5} */ Accent5 = "Accent5", /** * * @public - * @type {Accent6} */ Accent6 = "Accent6", /** * * @public - * @type {Accent7} */ Accent7 = "Accent7", /** * * @public - * @type {Accent8} */ Accent8 = "Accent8", /** * * @public - * @type {Accent9} */ Accent9 = "Accent9", /** * * @public - * @type {Accent10} */ Accent10 = "Accent10", /** * * @public - * @type {Placeholder} */ Placeholder = "Placeholder", } diff --git a/packages/main/src/types/AvatarGroupType.ts b/packages/main/src/types/AvatarGroupType.ts index e8185a72178b..48ddbcd3700b 100644 --- a/packages/main/src/types/AvatarGroupType.ts +++ b/packages/main/src/types/AvatarGroupType.ts @@ -2,17 +2,13 @@ * Different types of AvatarGroupType. * * @readonly - * @enum {string} * @public - * @author SAP SE - * @alias sap.ui.webc.main.types.AvatarGroupType */ enum AvatarGroupType { /** * The avatars are displayed as partially overlapped on top of each other and the entire group has one click or tap area. * * @public - * @type {Group} */ Group = "Group", @@ -20,7 +16,6 @@ enum AvatarGroupType { * The avatars are displayed side-by-side and each avatar has its own click or tap area. * * @public - * @type {Individual} */ Individual = "Individual", } diff --git a/packages/main/src/types/AvatarShape.ts b/packages/main/src/types/AvatarShape.ts index 981b3547ec45..93ce22a508d6 100644 --- a/packages/main/src/types/AvatarShape.ts +++ b/packages/main/src/types/AvatarShape.ts @@ -2,23 +2,18 @@ * Different types of AvatarShape. * * @readonly - * @enum {string} * @public - * @author SAP SE - * @alias sap.ui.webc.main.types.AvatarShape */ enum AvatarShape { /** * Circular shape. * @public - * @type {Circle} */ Circle = "Circle", /** * Square shape. * @public - * @type {Square} */ Square = "Square", } diff --git a/packages/main/src/types/AvatarSize.ts b/packages/main/src/types/AvatarSize.ts index b80c3de0bd0b..e2f85197f509 100644 --- a/packages/main/src/types/AvatarSize.ts +++ b/packages/main/src/types/AvatarSize.ts @@ -2,17 +2,13 @@ * Different types of AvatarSize. * * @readonly - * @enum {string} * @public - * @author SAP SE - * @alias sap.ui.webc.main.types.AvatarSize */ enum AvatarSize { /** * component size - 2rem * font size - 1rem * @public - * @type { XS } */ XS = "XS", @@ -20,7 +16,6 @@ enum AvatarSize { * component size - 3rem * font size - 1.5rem * @public - * @type { S } */ S = "S", @@ -28,7 +23,6 @@ enum AvatarSize { * component size - 4rem * font size - 2rem * @public - * @type { M } */ M = "M", @@ -36,7 +30,6 @@ enum AvatarSize { * component size - 5rem * font size - 2.5rem * @public - * @type { L } */ L = "L", @@ -44,7 +37,6 @@ enum AvatarSize { * component size - 7rem * font size - 3rem * @public - * @type { XL } */ XL = "XL", } From cfa619a64e911f5a599661ca440863760e0e03ad Mon Sep 17 00:00:00 2001 From: yanaminkova Date: Mon, 13 Nov 2023 15:16:11 +0200 Subject: [PATCH 2/6] docs: new cem for Topic-P components --- packages/fiori/src/BarcodeScannerDialog.ts | 9 +- packages/fiori/src/FlexibleColumnLayout.ts | 91 ++++++++----------- packages/fiori/src/MediaGallery.ts | 7 -- packages/fiori/src/MediaGalleryItem.ts | 11 +-- packages/fiori/src/ProductSwitch.ts | 2 - packages/fiori/src/ProductSwitchItem.ts | 8 +- packages/fiori/src/types/FCLLayout.ts | 1 - .../fiori/src/types/MediaGalleryItemLayout.ts | 1 - .../fiori/src/types/MediaGalleryLayout.ts | 1 - .../types/MediaGalleryMenuHorizontalAlign.ts | 1 - .../types/MediaGalleryMenuVerticalAlign.ts | 1 - packages/main/src/Avatar.ts | 14 --- packages/main/src/AvatarGroup.ts | 18 +--- packages/main/src/types/AvatarColorScheme.ts | 1 - packages/main/src/types/AvatarGroupType.ts | 1 - packages/main/src/types/AvatarShape.ts | 1 - packages/main/src/types/AvatarSize.ts | 1 - 17 files changed, 49 insertions(+), 120 deletions(-) diff --git a/packages/fiori/src/BarcodeScannerDialog.ts b/packages/fiori/src/BarcodeScannerDialog.ts index cfe3f671d379..ae0ff651da8e 100644 --- a/packages/fiori/src/BarcodeScannerDialog.ts +++ b/packages/fiori/src/BarcodeScannerDialog.ts @@ -114,7 +114,6 @@ class BarcodeScannerDialog extends UI5Element { /** * Indicates whether a loading indicator should be displayed in the dialog. * - * @type {boolean} * @default false * @private */ @@ -136,11 +135,9 @@ class BarcodeScannerDialog extends UI5Element { /** * Shows a dialog with the camera videostream. Starts a scan session. - * @method - * @returns {void} * @public */ - show() { + show(): void { if (this.loading) { console.warn("Barcode scanning is already in progress."); // eslint-disable-line return; @@ -163,11 +160,9 @@ class BarcodeScannerDialog extends UI5Element { /** * Closes the dialog and the scan session. - * @method - * @returns {void} * @public */ - close() { + close():void { this._closeDialog(); this.loading = false; } diff --git a/packages/fiori/src/FlexibleColumnLayout.ts b/packages/fiori/src/FlexibleColumnLayout.ts index bc3421541e9e..c7fcee4c9d73 100644 --- a/packages/fiori/src/FlexibleColumnLayout.ts +++ b/packages/fiori/src/FlexibleColumnLayout.ts @@ -8,6 +8,7 @@ import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.j import Float from "@ui5/webcomponents-base/dist/types/Float.js"; import Integer from "@ui5/webcomponents-base/dist/types/Integer.js"; import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; +import type { ClassMap } from "@ui5/webcomponents-base/dist/types.js"; import type { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js"; @@ -84,6 +85,12 @@ type AccessibilityRoles = { endArrowContainerRole?: I18nText; }; +interface IEffectiveArrowsInfo { + visible: boolean, + dir: string | null, + separator?: boolean | undefined, +} + /** * @class * @@ -142,7 +149,7 @@ 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 @@ -171,7 +178,6 @@ class FlexibleColumnLayout extends UI5Element { *

    * For example: layout=TwoColumnsStartExpanded means the layout will display up to two columns * in 67%/33% proportion. - * @type {FCLLayout} * @default "OneColumn" * @public */ @@ -182,7 +188,6 @@ class FlexibleColumnLayout extends UI5Element { * Defines the visibility of the arrows, * used for expanding and shrinking the columns. * - * @type {boolean} * @default false * @public @@ -205,7 +210,6 @@ class FlexibleColumnLayout extends UI5Element { * - startArrowContainerAccessibleName: the text that the first arrow container (between the begin and mid columns) will have as aria-label * - endArrowContainerAccessibleName: the text that the second arrow container (between the mid and end columns) will have as aria-label * - * @type {object} * @public * @since 1.0.0-rc.11 */ @@ -222,7 +226,6 @@ class FlexibleColumnLayout extends UI5Element { * - endArrowContainerRole: the accessibility role for the second arrow container (between the mid and end columns) * - endColumnRole: the accessibility role for the endColumn * - * @type {object} * @public * @since 1.1.0 */ @@ -232,7 +235,6 @@ class FlexibleColumnLayout extends UI5Element { /** * Defines the component width in px. * - * @type {Float} * @default 0 * @private */ @@ -244,7 +246,6 @@ class FlexibleColumnLayout extends UI5Element { * based on both the layout property and the screen size. * Example: [67%, 33%, 0], [25%, 50%, 25%], etc. * - * @type {object} * @default undefined * @private */ @@ -254,7 +255,6 @@ class FlexibleColumnLayout extends UI5Element { /** * Defines the visible columns count - 1, 2 or 3. * - * @type {Integer} * @default 1 * @private */ @@ -264,16 +264,13 @@ 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} * @public */ @slot() @@ -281,7 +278,6 @@ class FlexibleColumnLayout extends UI5Element { /** * Defines the content in the middle column. - * @type {HTMLElement} * @public */ @slot() @@ -289,7 +285,6 @@ class FlexibleColumnLayout extends UI5Element { /** * Defines the content in the end column. - * @type {HTMLElement} * @public */ @slot() @@ -494,8 +489,6 @@ class FlexibleColumnLayout extends UI5Element { *

    * For example: ["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} * @default ["100%", 0, 0] * @public */ @@ -505,9 +498,7 @@ class FlexibleColumnLayout extends UI5Element { /** * Returns if the start column is visible. - * @readonly * @default true - * @type {boolean} * @public */ get startColumnVisible(): boolean { @@ -520,8 +511,6 @@ class FlexibleColumnLayout extends UI5Element { /** * Returns if the middle column is visible. - * @readonly - * @type {boolean} * @default false * @public */ @@ -535,8 +524,6 @@ class FlexibleColumnLayout extends UI5Element { /** * Returns if the end column is visible. - * @readonly - * @type {boolean} * @default false * @public */ @@ -550,8 +537,6 @@ class FlexibleColumnLayout extends UI5Element { /** * Returns the number of currently visible columns. - * @readonly - * @type {Integer} * @default 1 * @public */ @@ -559,7 +544,7 @@ class FlexibleColumnLayout extends UI5Element { return this._visibleColumns; } - get classes() { + get classes(): ClassMap { const hasAnimation = getAnimationMode() !== AnimationMode.None; return { @@ -609,55 +594,55 @@ class FlexibleColumnLayout extends UI5Element { }; } - get startColumnWidth() { + get startColumnWidth(): string | number { return this._columnLayout ? this._columnLayout[0] : "100%"; } - get midColumnWidth() { + get midColumnWidth(): string | number { return this._columnLayout ? this._columnLayout[1] : "0px"; } - get endColumnWidth() { + get endColumnWidth(): string | number { return this._columnLayout ? this._columnLayout[2] : "0px"; } - get showStartSeparator() { + get showStartSeparator(): boolean { return this.effectiveArrowsInfo[0].separator || this.startArrowVisibility; } - get showEndSeparator() { + get showEndSeparator(): boolean { return this.effectiveArrowsInfo[1].separator || this.endArrowVisibility; } - get showStartArrow() { + get showStartArrow(): boolean { return this.hideArrows ? false : this.startArrowVisibility; } - get showEndArrow() { + get showEndArrow(): boolean { return this.hideArrows ? false : this.endArrowVisibility; } - get startArrowVisibility() { + get startArrowVisibility(): boolean { return this.effectiveArrowsInfo[0].visible; } - get endArrowVisibility() { + get endArrowVisibility(): boolean { return this.effectiveArrowsInfo[1].visible; } - get startArrowDirection() { + get startArrowDirection(): string | null { return this.effectiveArrowsInfo[0].dir; } - get endArrowDirection() { + get endArrowDirection(): string | null { return this.effectiveArrowsInfo[1].dir; } - get effectiveArrowsInfo() { + get effectiveArrowsInfo(): IEffectiveArrowsInfo[] { return this._effectiveLayoutsByMedia[this.media][this.layout].arrows; } - get media() { + get media(): MEDIA { if (this._width <= BREAKPOINTS.PHONE) { return MEDIA.PHONE; } @@ -669,68 +654,68 @@ class FlexibleColumnLayout extends UI5Element { return MEDIA.DESKTOP; } - get widthDOM() { + get widthDOM(): number { return this.getBoundingClientRect().width; } - get startColumnDOM() { + get startColumnDOM(): HTMLElement { return this.shadowRoot!.querySelector(".ui5-fcl-column--start")!; } - get midColumnDOM() { + get midColumnDOM(): HTMLElement { return this.shadowRoot!.querySelector(".ui5-fcl-column--middle")!; } - get endColumnDOM() { + get endColumnDOM(): HTMLElement { return this.shadowRoot!.querySelector(".ui5-fcl-column--end")!; } - get accStartColumnText() { + get accStartColumnText(): string | I18nText { return this.accessibilityTexts.startColumnAccessibleName || FlexibleColumnLayout.i18nBundle.getText(FCL_START_COLUMN_TXT); } - get accMiddleColumnText() { + get accMiddleColumnText(): string | I18nText { return this.accessibilityTexts.midColumnAccessibleName || FlexibleColumnLayout.i18nBundle.getText(FCL_MIDDLE_COLUMN_TXT); } - get accEndColumnText() { + get accEndColumnText(): string | I18nText { return this.accessibilityTexts.endColumnAccessibleName || FlexibleColumnLayout.i18nBundle.getText(FCL_END_COLUMN_TXT); } - get accStartArrowContainerText() { + get accStartArrowContainerText(): I18nText | undefined { return this.accessibilityTexts.startArrowContainerAccessibleName || undefined; } - get accEndArrowContainerText() { + get accEndArrowContainerText(): I18nText | undefined { return this.accessibilityTexts.endArrowContainerAccessibleName || undefined; } - get accStartColumnRole() { + get accStartColumnRole(): I18nText | "region" | undefined { if (this.startColumnVisible) { return this.accessibilityRoles.startColumnRole || "region"; } return undefined; } - get accMiddleColumnRole() { + get accMiddleColumnRole(): I18nText | "region" | undefined { if (this.midColumnVisible) { return this.accessibilityRoles.midColumnRole || "region"; } return undefined; } - get accEndColumnRole() { + get accEndColumnRole(): I18nText | "region" | undefined { if (this.endColumnVisible) { return this.accessibilityRoles.endColumnRole || "region"; } return undefined; } - get accStartArrowContainerRole() { + get accStartArrowContainerRole(): I18nText | undefined { return this.accessibilityRoles.startArrowContainerRole || undefined; } - get accEndArrowContainerRole() { + get accEndArrowContainerRole(): I18nText | undefined { return this.accessibilityRoles.endArrowContainerRole || undefined; } @@ -757,7 +742,7 @@ class FlexibleColumnLayout extends UI5Element { }; } - get accStartArrowText() { + get accStartArrowText(): string | I18nText { const customTexts = this.accessibilityTexts; if (this.startArrowDirection === "mirror") { @@ -767,7 +752,7 @@ class FlexibleColumnLayout extends UI5Element { return customTexts.startArrowRightText || FlexibleColumnLayout.i18nBundle.getText(FCL_START_COLUMN_EXPAND_BUTTON_TOOLTIP); } - get accEndArrowText() { + get accEndArrowText(): string | I18nText { const customTexts = this.accessibilityTexts; if (this.endArrowDirection === "mirror") { diff --git a/packages/fiori/src/MediaGallery.ts b/packages/fiori/src/MediaGallery.ts index bed24039c7d8..00fad5abdf7b 100644 --- a/packages/fiori/src/MediaGallery.ts +++ b/packages/fiori/src/MediaGallery.ts @@ -127,7 +127,6 @@ class MediaGallery extends UI5Element { * If false, only up to five thumbnails are rendered, followed by * an overflow button that shows the count of the remaining thumbnails. * - * @type {boolean} * @default false * @public */ @@ -141,7 +140,6 @@ class MediaGallery extends UI5Element { * The display area is the central area that contains * the enlarged content of the currently selected item. * - * @type {boolean} * @default false * @public */ @@ -151,7 +149,6 @@ class MediaGallery extends UI5Element { /** * Determines the layout of the component. * - * @type {MediaGalleryLayout} * @default "Auto" * @public */ @@ -162,7 +159,6 @@ class MediaGallery extends UI5Element { * Determines the horizontal alignment of the thumbnails menu * vs. the central display area. * - * @type {MediaGalleryMenuHorizontalAlign} * @default "Left" * @public */ @@ -173,7 +169,6 @@ class MediaGallery extends UI5Element { * Determines the vertical alignment of the thumbnails menu * vs. the central display area. * - * @type {MediaGalleryMenuVerticalAlign} * @default "Bottom" * @public */ @@ -185,7 +180,6 @@ class MediaGallery extends UI5Element { * (esp. needed when the app did not specify a fixed layout type * but selected Auto layout type). * - * @type {MediaGalleryLayout} * @default "Vertical" * @private */ @@ -217,7 +211,6 @@ class MediaGallery extends UI5Element { *

    * Note: Use the ui5-media-gallery-item component to define the desired items. * - * @type {IMediaGalleryItem[]} * @public */ @slot({ diff --git a/packages/fiori/src/MediaGalleryItem.ts b/packages/fiori/src/MediaGalleryItem.ts index 63ebfbc16d39..d4a30d32914c 100644 --- a/packages/fiori/src/MediaGalleryItem.ts +++ b/packages/fiori/src/MediaGalleryItem.ts @@ -55,8 +55,7 @@ class MediaGalleryItem extends UI5Element implements ITabbable, IMediaGalleryIte /** * Defines the selected state of the component. * - * @type {boolean} - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -65,8 +64,7 @@ class MediaGalleryItem extends UI5Element implements ITabbable, IMediaGalleryIte /** * Defines whether the component is in disabled state. * - * @type {boolean} - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -81,8 +79,7 @@ class MediaGalleryItem extends UI5Element implements ITabbable, IMediaGalleryIte *
  • Wide
    • * * - * @type {MediaGalleryItemLayout} - * @defaultvalue "Square" + * @default "Square" * @public */ @property({ type: MediaGalleryItemLayout, defaultValue: MediaGalleryItemLayout.Square }) @@ -139,7 +136,6 @@ class MediaGalleryItem extends UI5Element implements ITabbable, IMediaGalleryIte /** * Defines the content of the component. * - * @type {HTMLElement} * @public */ @slot({ type: HTMLElement, "default": true }) @@ -148,7 +144,6 @@ class MediaGalleryItem extends UI5Element implements ITabbable, IMediaGalleryIte /** * Defines the content of the thumbnail. * - * @type {HTMLElement} * @public */ @slot() diff --git a/packages/fiori/src/ProductSwitch.ts b/packages/fiori/src/ProductSwitch.ts index 36f92893fd0e..76953535a084 100644 --- a/packages/fiori/src/ProductSwitch.ts +++ b/packages/fiori/src/ProductSwitch.ts @@ -86,8 +86,6 @@ class ProductSwitch extends UI5Element { /** * Defines the items of the ui5-product-switch. * - * @type {IProductSwitchItem[]} - * @name sap.ui.webc.fiori.ProductSwitch.prototype.default * @public */ @slot({ type: HTMLElement, "default": true }) diff --git a/packages/fiori/src/ProductSwitchItem.ts b/packages/fiori/src/ProductSwitchItem.ts index d132371797a4..9bdaa08ea145 100644 --- a/packages/fiori/src/ProductSwitchItem.ts +++ b/packages/fiori/src/ProductSwitchItem.ts @@ -67,7 +67,6 @@ class ProductSwitchItem extends UI5Element implements ITabbable, IProductSwitchI /** * Defines the title of the component. - * @type {string} * @default "" * @since 1.0.0-rc.15 * @public @@ -77,7 +76,6 @@ class ProductSwitchItem extends UI5Element implements ITabbable, IProductSwitchI /** * Defines the subtitle of the component. - * @type {string} * @default "" * @since 1.0.0-rc.15 * @public @@ -94,7 +92,6 @@ class ProductSwitchItem extends UI5Element implements ITabbable, IProductSwitchI * * See all the available icons in the Icon Explorer. * - * @type {string} * @default "" * @public */ @@ -113,7 +110,6 @@ class ProductSwitchItem extends UI5Element implements ITabbable, IProductSwitchI *
  • _search
    • * * - * @type {string} * @public */ @property({ defaultValue: "_self" }) @@ -121,9 +117,7 @@ class ProductSwitchItem extends UI5Element implements ITabbable, IProductSwitchI /** * Defines the component target URI. Supports standard hyperlink behavior. - * @type {string} - - * @default "" + * @default "" * @public */ @property() diff --git a/packages/fiori/src/types/FCLLayout.ts b/packages/fiori/src/types/FCLLayout.ts index 3c9ac309919e..99826dbf613e 100644 --- a/packages/fiori/src/types/FCLLayout.ts +++ b/packages/fiori/src/types/FCLLayout.ts @@ -1,7 +1,6 @@ /** * Different types of FCLLayout. * - * @readonly * @public */ enum FCLLayout { diff --git a/packages/fiori/src/types/MediaGalleryItemLayout.ts b/packages/fiori/src/types/MediaGalleryItemLayout.ts index aca8c8c6c717..f59479cdf667 100644 --- a/packages/fiori/src/types/MediaGalleryItemLayout.ts +++ b/packages/fiori/src/types/MediaGalleryItemLayout.ts @@ -1,7 +1,6 @@ /** * Defines the layout of the content displayed in the ui5-media-gallery-item. * - * @readonly * @public */ enum MediaGalleryItemLayout { diff --git a/packages/fiori/src/types/MediaGalleryLayout.ts b/packages/fiori/src/types/MediaGalleryLayout.ts index 252b4467a733..bd7ffc1728ee 100644 --- a/packages/fiori/src/types/MediaGalleryLayout.ts +++ b/packages/fiori/src/types/MediaGalleryLayout.ts @@ -1,7 +1,6 @@ /** * Defines the layout type of the thumbnails list of the ui5-media-gallery component. * - * @readonly * @public */ enum MediaGalleryLayout { diff --git a/packages/fiori/src/types/MediaGalleryMenuHorizontalAlign.ts b/packages/fiori/src/types/MediaGalleryMenuHorizontalAlign.ts index c97e1f37d625..9858a12bfbea 100644 --- a/packages/fiori/src/types/MediaGalleryMenuHorizontalAlign.ts +++ b/packages/fiori/src/types/MediaGalleryMenuHorizontalAlign.ts @@ -1,7 +1,6 @@ /** * Defines the horizontal alignment of the thumbnails menu of the ui5-media-gallery component. * - * @readonly * @public */ enum MediaGalleryMenuHorizontalAlign { diff --git a/packages/fiori/src/types/MediaGalleryMenuVerticalAlign.ts b/packages/fiori/src/types/MediaGalleryMenuVerticalAlign.ts index ba9377f67fe3..5e14ca96a99b 100644 --- a/packages/fiori/src/types/MediaGalleryMenuVerticalAlign.ts +++ b/packages/fiori/src/types/MediaGalleryMenuVerticalAlign.ts @@ -1,7 +1,6 @@ /** * Types for the vertical alignment of the thumbnails menu of the ui5-media-gallery component. * - * @readonly * @public */ enum MediaGalleryMenuVerticalAlign { diff --git a/packages/main/src/Avatar.ts b/packages/main/src/Avatar.ts index 2e5202ae1c0a..c5f084c061eb 100644 --- a/packages/main/src/Avatar.ts +++ b/packages/main/src/Avatar.ts @@ -81,7 +81,6 @@ class Avatar extends UI5Element implements ITabbable, IAvatar { * A disabled component can't be pressed or * focused, and it is not in the tab chain. * - * @type {boolean} * @default false * @public */ @@ -92,7 +91,6 @@ class Avatar extends UI5Element implements ITabbable, IAvatar { * Defines if the avatar is interactive (focusable and pressable). * Note: This property won't have effect if the disabled * property is set to true. - * @type {boolean} * @default false * @public */ @@ -127,7 +125,6 @@ class Avatar extends UI5Element implements ITabbable, IAvatar { * Note: If no icon or an empty one is provided, by default the "employee" icon should be displayed. * * See all the available icons in the Icon Explorer. - * @type {string} * @default "" * @public */ @@ -153,7 +150,6 @@ class Avatar extends UI5Element implements ITabbable, IAvatar { *
    * * See all the available icons in the Icon Explorer. - * @type {string} * @default "" * @public */ @@ -165,7 +161,6 @@ class Avatar extends UI5Element implements ITabbable, IAvatar { *
    * Up to three Latin letters can be displayed as initials. * - * @type {string} * @default "" * @public */ @@ -175,7 +170,6 @@ class Avatar extends UI5Element implements ITabbable, IAvatar { /** * Defines the shape of the component. * - * @type {AvatarShape} * @default "Circle" * @public */ @@ -185,7 +179,6 @@ class Avatar extends UI5Element implements ITabbable, IAvatar { /** * Defines predefined size of the component. * - * @type {AvatarSize} * @default "S" * @public */ @@ -201,7 +194,6 @@ class Avatar extends UI5Element implements ITabbable, IAvatar { /** * Defines the background color of the desired image. * - * @type {AvatarColorScheme} * @default "Accent6" * @public */ @@ -218,7 +210,6 @@ class Avatar extends UI5Element implements ITabbable, IAvatar { * Defines the text alternative of the component. * If not provided a default text alternative will be set, if present. * - * @type {string} * @default "" * @public * @since 1.0.0-rc.7 @@ -229,7 +220,6 @@ class Avatar extends UI5Element implements ITabbable, IAvatar { /** * Defines the aria-haspopup value of the component when interactive property is true. *

    - * @type {string} * @since 1.0.0-rc.15 * @protected */ @@ -252,7 +242,6 @@ class Avatar extends UI5Element implements ITabbable, IAvatar { *  visibility: hidden;
    * }
    * - * @type {HTMLElement} * @public * @since 1.0.0-rc.15 */ @@ -279,7 +268,6 @@ class Avatar extends UI5Element implements ITabbable, IAvatar { * * * - * @type {HTMLElement} * @public * @since 1.7.0 */ @@ -306,7 +294,6 @@ class Avatar extends UI5Element implements ITabbable, IAvatar { /** * Returns the effective avatar size. * @readonly - * @type {string} * @default "S" * @private */ @@ -318,7 +305,6 @@ class Avatar extends UI5Element implements ITabbable, IAvatar { /** * Returns the effective background color. * @readonly - * @type {string} * @default "Accent6" * @private */ diff --git a/packages/main/src/AvatarGroup.ts b/packages/main/src/AvatarGroup.ts index d0b5f8d06c7f..3186f08d3550 100644 --- a/packages/main/src/AvatarGroup.ts +++ b/packages/main/src/AvatarGroup.ts @@ -171,7 +171,6 @@ class AvatarGroup extends UI5Element { /** * Defines the mode of the AvatarGroup. * - * @type {AvatarGroupType} * @default "Group" * @public */ @@ -186,8 +185,7 @@ class AvatarGroup extends UI5Element { *
  • the default "More" overflow button when type is Individual
    • * *

    - * @type {string} - * @since 1.0.0-rc.15 + * @since 1.0.0-rc.15 * @protected */ @property() @@ -205,7 +203,6 @@ class AvatarGroup extends UI5Element { * Note: The UX guidelines recommends using avatars with "Circle" shape. * Moreover, if you use avatars with "Square" shape, there will be visual inconsistency * as the built-in overflow action has "Circle" shape. - * @type {IAvatar[]} * @public */ @slot({ type: HTMLElement, "default": true }) @@ -217,7 +214,6 @@ class AvatarGroup extends UI5Element { *

    * Note: If this slot is not used, the component will * display the built-in overflow button. - * @type {HTMLElement} * @public * @since 1.0.0-rc.13 */ @@ -249,23 +245,19 @@ class AvatarGroup extends UI5Element { /** * Returns an array containing the ui5-avatar instances that are currently not displayed due to lack of space. - * @readonly - * @type {HTMLElement[]} * @default [] * @public */ - get hiddenItems() { + get hiddenItems(): IAvatar[] { return this.items.slice(this._hiddenStartIndex); } /** * Returns an array containing the AvatarColorScheme values that correspond to the avatars in the component. - * @readonly - * @type {AvatarColorScheme[]} * @default [] * @public */ - get colorScheme() { + get colorScheme(): string[] { return this.items.map(avatar => avatar._effectiveBackgroundColor); } @@ -367,7 +359,7 @@ class AvatarGroup extends UI5Element { return button.offsetWidth; } - get firstAvatarSize() { + get firstAvatarSize(): string { return this.items[0].size; } @@ -493,7 +485,7 @@ class AvatarGroup extends UI5Element { * Returns the total width to item excluding the item width * RTL/LTR aware * @private - * @param {HTMLElement} item + * @param item */ _getWidthToItem(item: HTMLElement) { const isRTL = this.effectiveDir === "rtl"; diff --git a/packages/main/src/types/AvatarColorScheme.ts b/packages/main/src/types/AvatarColorScheme.ts index d6c8a0e0857e..a4fb61e36b0d 100644 --- a/packages/main/src/types/AvatarColorScheme.ts +++ b/packages/main/src/types/AvatarColorScheme.ts @@ -1,7 +1,6 @@ /** * Different types of AvatarColorScheme. * - * @readonly * @public */ enum AvatarColorScheme { diff --git a/packages/main/src/types/AvatarGroupType.ts b/packages/main/src/types/AvatarGroupType.ts index 48ddbcd3700b..ae721c054464 100644 --- a/packages/main/src/types/AvatarGroupType.ts +++ b/packages/main/src/types/AvatarGroupType.ts @@ -1,7 +1,6 @@ /** * Different types of AvatarGroupType. * - * @readonly * @public */ enum AvatarGroupType { diff --git a/packages/main/src/types/AvatarShape.ts b/packages/main/src/types/AvatarShape.ts index 93ce22a508d6..01130ad57107 100644 --- a/packages/main/src/types/AvatarShape.ts +++ b/packages/main/src/types/AvatarShape.ts @@ -1,7 +1,6 @@ /** * Different types of AvatarShape. * - * @readonly * @public */ enum AvatarShape { diff --git a/packages/main/src/types/AvatarSize.ts b/packages/main/src/types/AvatarSize.ts index e2f85197f509..d72809cc0511 100644 --- a/packages/main/src/types/AvatarSize.ts +++ b/packages/main/src/types/AvatarSize.ts @@ -1,7 +1,6 @@ /** * Different types of AvatarSize. * - * @readonly * @public */ enum AvatarSize { From 2625e8a8e886bd9749af474b4e321d49d827ad24 Mon Sep 17 00:00:00 2001 From: yanaminkova Date: Tue, 14 Nov 2023 11:22:08 +0200 Subject: [PATCH 3/6] docs: new cem for Topic-P components --- packages/fiori/src/FlexibleColumnLayout.ts | 67 ++++++++++------------ packages/main/src/AvatarGroup.ts | 2 +- 2 files changed, 31 insertions(+), 38 deletions(-) diff --git a/packages/fiori/src/FlexibleColumnLayout.ts b/packages/fiori/src/FlexibleColumnLayout.ts index c7fcee4c9d73..9375b8cbf445 100644 --- a/packages/fiori/src/FlexibleColumnLayout.ts +++ b/packages/fiori/src/FlexibleColumnLayout.ts @@ -8,7 +8,6 @@ import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.j import Float from "@ui5/webcomponents-base/dist/types/Float.js"; import Integer from "@ui5/webcomponents-base/dist/types/Integer.js"; import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; -import type { ClassMap } from "@ui5/webcomponents-base/dist/types.js"; import type { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js"; @@ -85,12 +84,6 @@ type AccessibilityRoles = { endArrowContainerRole?: I18nText; }; -interface IEffectiveArrowsInfo { - visible: boolean, - dir: string | null, - separator?: boolean | undefined, -} - /** * @class * @@ -544,7 +537,7 @@ class FlexibleColumnLayout extends UI5Element { return this._visibleColumns; } - get classes(): ClassMap { + get classes() { const hasAnimation = getAnimationMode() !== AnimationMode.None; return { @@ -594,55 +587,55 @@ class FlexibleColumnLayout extends UI5Element { }; } - get startColumnWidth(): string | number { + get startColumnWidth() { return this._columnLayout ? this._columnLayout[0] : "100%"; } - get midColumnWidth(): string | number { + get midColumnWidth() { return this._columnLayout ? this._columnLayout[1] : "0px"; } - get endColumnWidth(): string | number { + get endColumnWidth() { return this._columnLayout ? this._columnLayout[2] : "0px"; } - get showStartSeparator(): boolean { + get showStartSeparator() { return this.effectiveArrowsInfo[0].separator || this.startArrowVisibility; } - get showEndSeparator(): boolean { + get showEndSeparator() { return this.effectiveArrowsInfo[1].separator || this.endArrowVisibility; } - get showStartArrow(): boolean { + get showStartArrow() { return this.hideArrows ? false : this.startArrowVisibility; } - get showEndArrow(): boolean { + get showEndArrow() { return this.hideArrows ? false : this.endArrowVisibility; } - get startArrowVisibility(): boolean { + get startArrowVisibility() { return this.effectiveArrowsInfo[0].visible; } - get endArrowVisibility(): boolean { + get endArrowVisibility() { return this.effectiveArrowsInfo[1].visible; } - get startArrowDirection(): string | null { + get startArrowDirection() { return this.effectiveArrowsInfo[0].dir; } - get endArrowDirection(): string | null { + get endArrowDirection() { return this.effectiveArrowsInfo[1].dir; } - get effectiveArrowsInfo(): IEffectiveArrowsInfo[] { + get effectiveArrowsInfo() { return this._effectiveLayoutsByMedia[this.media][this.layout].arrows; } - get media(): MEDIA { + get media() { if (this._width <= BREAKPOINTS.PHONE) { return MEDIA.PHONE; } @@ -654,68 +647,68 @@ class FlexibleColumnLayout extends UI5Element { return MEDIA.DESKTOP; } - get widthDOM(): number { + get widthDOM() { return this.getBoundingClientRect().width; } - get startColumnDOM(): HTMLElement { + get startColumnDOM() { return this.shadowRoot!.querySelector(".ui5-fcl-column--start")!; } - get midColumnDOM(): HTMLElement { + get midColumnDOM() { return this.shadowRoot!.querySelector(".ui5-fcl-column--middle")!; } - get endColumnDOM(): HTMLElement { + get endColumnDOM() { return this.shadowRoot!.querySelector(".ui5-fcl-column--end")!; } - get accStartColumnText(): string | I18nText { + get accStartColumnText() { return this.accessibilityTexts.startColumnAccessibleName || FlexibleColumnLayout.i18nBundle.getText(FCL_START_COLUMN_TXT); } - get accMiddleColumnText(): string | I18nText { + get accMiddleColumnText() { return this.accessibilityTexts.midColumnAccessibleName || FlexibleColumnLayout.i18nBundle.getText(FCL_MIDDLE_COLUMN_TXT); } - get accEndColumnText(): string | I18nText { + get accEndColumnText() { return this.accessibilityTexts.endColumnAccessibleName || FlexibleColumnLayout.i18nBundle.getText(FCL_END_COLUMN_TXT); } - get accStartArrowContainerText(): I18nText | undefined { + get accStartArrowContainerText() { return this.accessibilityTexts.startArrowContainerAccessibleName || undefined; } - get accEndArrowContainerText(): I18nText | undefined { + get accEndArrowContainerText() { return this.accessibilityTexts.endArrowContainerAccessibleName || undefined; } - get accStartColumnRole(): I18nText | "region" | undefined { + get accStartColumnRole() { if (this.startColumnVisible) { return this.accessibilityRoles.startColumnRole || "region"; } return undefined; } - get accMiddleColumnRole(): I18nText | "region" | undefined { + get accMiddleColumnRole() { if (this.midColumnVisible) { return this.accessibilityRoles.midColumnRole || "region"; } return undefined; } - get accEndColumnRole(): I18nText | "region" | undefined { + get accEndColumnRole() { if (this.endColumnVisible) { return this.accessibilityRoles.endColumnRole || "region"; } return undefined; } - get accStartArrowContainerRole(): I18nText | undefined { + get accStartArrowContainerRole() { return this.accessibilityRoles.startArrowContainerRole || undefined; } - get accEndArrowContainerRole(): I18nText | undefined { + get accEndArrowContainerRole() { return this.accessibilityRoles.endArrowContainerRole || undefined; } @@ -742,7 +735,7 @@ class FlexibleColumnLayout extends UI5Element { }; } - get accStartArrowText(): string | I18nText { + get accStartArrowText() { const customTexts = this.accessibilityTexts; if (this.startArrowDirection === "mirror") { @@ -752,7 +745,7 @@ class FlexibleColumnLayout extends UI5Element { return customTexts.startArrowRightText || FlexibleColumnLayout.i18nBundle.getText(FCL_START_COLUMN_EXPAND_BUTTON_TOOLTIP); } - get accEndArrowText(): string | I18nText { + get accEndArrowText() { const customTexts = this.accessibilityTexts; if (this.endArrowDirection === "mirror") { diff --git a/packages/main/src/AvatarGroup.ts b/packages/main/src/AvatarGroup.ts index 3186f08d3550..9b7d656079c9 100644 --- a/packages/main/src/AvatarGroup.ts +++ b/packages/main/src/AvatarGroup.ts @@ -359,7 +359,7 @@ class AvatarGroup extends UI5Element { return button.offsetWidth; } - get firstAvatarSize(): string { + get firstAvatarSize() { return this.items[0].size; } From 1db8f4332f18beefe107c19221c6272a11932e70 Mon Sep 17 00:00:00 2001 From: yanaminkova Date: Wed, 15 Nov 2023 15:49:22 +0200 Subject: [PATCH 4/6] docs: new cem for Topic-P components --- packages/main/src/Avatar.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/main/src/Avatar.ts b/packages/main/src/Avatar.ts index c5f084c061eb..b5882026df6d 100644 --- a/packages/main/src/Avatar.ts +++ b/packages/main/src/Avatar.ts @@ -293,7 +293,6 @@ class Avatar extends UI5Element implements ITabbable, IAvatar { /** * Returns the effective avatar size. - * @readonly * @default "S" * @private */ @@ -304,7 +303,6 @@ class Avatar extends UI5Element implements ITabbable, IAvatar { /** * Returns the effective background color. - * @readonly * @default "Accent6" * @private */ From a8ad3d6cde219e2f177cf7f2679a8ab3f455cab9 Mon Sep 17 00:00:00 2001 From: yanaminkova Date: Fri, 24 Nov 2023 13:37:40 +0200 Subject: [PATCH 5/6] docs: new cem for Topic-P components --- packages/fiori/src/FlexibleColumnLayout.ts | 3 ++- packages/fiori/src/ProductSwitchItem.ts | 2 +- packages/main/src/Interfaces.ts | 9 --------- 3 files changed, 3 insertions(+), 11 deletions(-) diff --git a/packages/fiori/src/FlexibleColumnLayout.ts b/packages/fiori/src/FlexibleColumnLayout.ts index 9375b8cbf445..85c1ba30d8f8 100644 --- a/packages/fiori/src/FlexibleColumnLayout.ts +++ b/packages/fiori/src/FlexibleColumnLayout.ts @@ -182,7 +182,6 @@ class FlexibleColumnLayout extends UI5Element { * used for expanding and shrinking the columns. * * @default false - * @public * @since 1.0.0-rc.15 */ @@ -203,6 +202,7 @@ class FlexibleColumnLayout extends UI5Element { * - startArrowContainerAccessibleName: the text that the first arrow container (between the begin and mid columns) will have as aria-label * - endArrowContainerAccessibleName: the text that the second arrow container (between the mid and end columns) will have as aria-label * + * @default {} * @public * @since 1.0.0-rc.11 */ @@ -219,6 +219,7 @@ class FlexibleColumnLayout extends UI5Element { * - endArrowContainerRole: the accessibility role for the second arrow container (between the mid and end columns) * - endColumnRole: the accessibility role for the endColumn * + * @default {} * @public * @since 1.1.0 */ diff --git a/packages/fiori/src/ProductSwitchItem.ts b/packages/fiori/src/ProductSwitchItem.ts index 9bdaa08ea145..157971e7f87f 100644 --- a/packages/fiori/src/ProductSwitchItem.ts +++ b/packages/fiori/src/ProductSwitchItem.ts @@ -109,7 +109,7 @@ class ProductSwitchItem extends UI5Element implements ITabbable, IProductSwitchI *
  • _parent
    • *
  • _search
    • * - * + * @default "_self" * @public */ @property({ defaultValue: "_self" }) diff --git a/packages/main/src/Interfaces.ts b/packages/main/src/Interfaces.ts index a3f0a0da562f..1f914ab775ff 100644 --- a/packages/main/src/Interfaces.ts +++ b/packages/main/src/Interfaces.ts @@ -124,15 +124,6 @@ const IMultiComboBoxItem = "sap.ui.webc.main.IMultiComboBoxItem"; */ const ISegmentedButtonItem = "sap.ui.webc.main.ISegmentedButtonItem"; -/** - * Interface for components that may be slotted inside ui5-select as options - * - * @public - */ -interface ISelectOption { - isUI5Element: boolean, -} - /** * Interface for components that may be slotted inside ui5-select-menu as options * From 2829cc9cdd77cdc2248dc7c5d1e13166c7ca3366 Mon Sep 17 00:00:00 2001 From: yanaminkova Date: Mon, 27 Nov 2023 16:04:30 +0200 Subject: [PATCH 6/6] docs: new cem for Topic-P components --- packages/fiori/src/FlexibleColumnLayout.ts | 2 +- packages/main/src/Interfaces.ts | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/fiori/src/FlexibleColumnLayout.ts b/packages/fiori/src/FlexibleColumnLayout.ts index 85c1ba30d8f8..b858c68064fd 100644 --- a/packages/fiori/src/FlexibleColumnLayout.ts +++ b/packages/fiori/src/FlexibleColumnLayout.ts @@ -483,7 +483,7 @@ class FlexibleColumnLayout extends UI5Element { *

    * For example: ["67%", "33%", 0], ["100%", 0, 0], ["25%", "50%", "25%"], etc, * where the numbers represents the width of the start, middle and end columns. - * @default ["100%", 0, 0] + * @default undefined * @public */ get columnLayout(): ColumnLayout | undefined { diff --git a/packages/main/src/Interfaces.ts b/packages/main/src/Interfaces.ts index 1f914ab775ff..cfedab6f5728 100644 --- a/packages/main/src/Interfaces.ts +++ b/packages/main/src/Interfaces.ts @@ -220,7 +220,6 @@ export { IMenuItem, IMultiComboBoxItem, ISegmentedButtonItem, - ISelectOption, ISelectMenuOption, ITab, ITableCell,