diff --git a/packages/fiori/src/BarcodeScannerDialog.ts b/packages/fiori/src/BarcodeScannerDialog.ts index d7f4294f3271..ae0ff651da8e 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 */ @@ -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; } diff --git a/packages/fiori/src/FlexibleColumnLayout.ts b/packages/fiori/src/FlexibleColumnLayout.ts index 8fbea6757ef3..b858c68064fd 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 */ @@ -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 { *

* 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 + * @default "OneColumn" * @public */ @property({ type: FCLLayout, defaultValue: FCLLayout.OneColumn }) @@ -187,9 +181,7 @@ 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 +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 * - * @type {object} - * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.accessibilityTexts + * @default {} * @public * @since 1.0.0-rc.11 */ @@ -228,9 +219,8 @@ 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} + * @default {} * @public - * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.accessibilityRoles * @since 1.1.0 */ @property({ type: Object }) @@ -239,8 +229,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 +240,7 @@ class FlexibleColumnLayout extends UI5Element { * based on both the layout 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 +249,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,18 +258,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} - * @slot - * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.startColumn * @public */ @slot() @@ -290,9 +272,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() @@ -300,9 +279,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() @@ -507,10 +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. - * @readonly - * @type {array} - * @defaultvalue ["100%", 0, 0] - * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.columnLayout + * @default undefined * @public */ get columnLayout(): ColumnLayout | undefined { @@ -519,10 +492,7 @@ class FlexibleColumnLayout extends UI5Element { /** * Returns if the start column is visible. - * @readonly - * @defaultvalue true - * @type {boolean} - * @name sap.ui.webc.fiori.FlexibleColumnLayout.prototype.startColumnVisible + * @default true * @public */ get startColumnVisible(): boolean { @@ -535,10 +505,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 { @@ -551,10 +518,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 { @@ -567,10 +531,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 { 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..00fad5abdf7b 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") @@ -133,9 +127,7 @@ 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} - * @name sap.ui.webc.fiori.MediaGallery.prototype.showAllThumbnails - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -148,9 +140,7 @@ class MediaGallery extends UI5Element { * The display area is the central area that contains * 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 +149,7 @@ 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" + * @default "Auto" * @public */ @property({ type: MediaGalleryLayout, defaultValue: MediaGalleryLayout.Auto }) @@ -171,9 +159,7 @@ 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" + * @default "Left" * @public */ @property({ type: MediaGalleryMenuHorizontalAlign, defaultValue: MediaGalleryMenuHorizontalAlign.Left }) @@ -183,9 +169,7 @@ 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" + * @default "Bottom" * @public */ @property({ type: MediaGalleryMenuVerticalAlign, defaultValue: MediaGalleryMenuVerticalAlign.Bottom }) @@ -196,8 +180,7 @@ 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" + * @default "Vertical" * @private */ @property({ type: MediaGalleryLayout, defaultValue: MediaGalleryLayout.Vertical }) @@ -228,9 +211,6 @@ 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 * @public */ @slot({ @@ -239,7 +219,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..d4a30d32914c 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,13 +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 + * @default false * @public */ @property({ type: Boolean }) @@ -68,9 +64,7 @@ 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 + * @default false * @public */ @property({ type: Boolean }) @@ -85,9 +79,7 @@ class MediaGalleryItem extends UI5Element implements ITabbable { *
  • Wide
    • * * - * @type {sap.ui.webc.fiori.types.MediaGalleryItemLayout} - * @name sap.ui.webc.fiori.MediaGalleryItem.prototype.layout - * @defaultvalue "Square" + * @default "Square" * @public */ @property({ type: MediaGalleryItemLayout, defaultValue: MediaGalleryItemLayout.Square }) @@ -144,9 +136,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 }) @@ -155,9 +144,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..76953535a084 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,10 @@ class ProductSwitch extends UI5Element { /** * Defines the items of the ui5-product-switch. * - * @type {sap.ui.webc.fiori.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 +139,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..157971e7f87f 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(); @@ -70,9 +67,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 */ @@ -81,9 +76,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 */ @@ -99,9 +92,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() @@ -118,9 +109,7 @@ class ProductSwitchItem extends UI5Element implements ITabbable { *
  • _parent
    • *
  • _search
    • * - * - * @type {string} - * @name sap.ui.webc.fiori.ProductSwitchItem.prototype.target + * @default "_self" * @public */ @property({ defaultValue: "_self" }) @@ -128,9 +117,7 @@ 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..99826dbf613e 100644 --- a/packages/fiori/src/types/FCLLayout.ts +++ b/packages/fiori/src/types/FCLLayout.ts @@ -1,17 +1,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 +18,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 +29,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 +40,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 +52,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 +64,6 @@ enum FCLLayout { * The detail-detail is still loaded and easily accessible with layout arrows. * * @public - * @type ThreeColumnsStartExpandedEndHidden */ ThreeColumnsStartExpandedEndHidden = "ThreeColumnsStartExpandedEndHidden", @@ -86,7 +76,6 @@ enum FCLLayout { * The detail-detail is still loaded and easily accessible with a layout arrow. * * @public - * @type ThreeColumnsMidExpandedEndHidden */ ThreeColumnsMidExpandedEndHidden = "ThreeColumnsMidExpandedEndHidden", @@ -98,7 +87,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 +98,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..f59479cdf667 100644 --- a/packages/fiori/src/types/MediaGalleryItemLayout.ts +++ b/packages/fiori/src/types/MediaGalleryItemLayout.ts @@ -1,11 +1,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 +9,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 +17,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..bd7ffc1728ee 100644 --- a/packages/fiori/src/types/MediaGalleryLayout.ts +++ b/packages/fiori/src/types/MediaGalleryLayout.ts @@ -1,32 +1,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..9858a12bfbea 100644 --- a/packages/fiori/src/types/MediaGalleryMenuHorizontalAlign.ts +++ b/packages/fiori/src/types/MediaGalleryMenuHorizontalAlign.ts @@ -1,25 +1,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..5e14ca96a99b 100644 --- a/packages/fiori/src/types/MediaGalleryMenuVerticalAlign.ts +++ b/packages/fiori/src/types/MediaGalleryMenuVerticalAlign.ts @@ -1,24 +1,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..b5882026df6d 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,17 @@ 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 }) @@ -96,9 +91,7 @@ class Avatar extends UI5Element implements ITabbable { * 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} - * @name sap.ui.webc.main.Avatar.prototype.interactive - * @defaultValue false + * @default false * @public */ @property({ type: Boolean }) @@ -132,9 +125,7 @@ class Avatar extends UI5Element implements ITabbable { * 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} - * @name sap.ui.webc.main.Avatar.prototype.icon - * @defaultvalue "" + * @default "" * @public */ @property() @@ -159,9 +150,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() @@ -172,9 +161,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 +170,7 @@ 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" + * @default "Circle" * @public */ @property({ type: AvatarShape, defaultValue: AvatarShape.Circle }) @@ -194,9 +179,7 @@ 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" + * @default "S" * @public */ @property({ type: AvatarSize, defaultValue: AvatarSize.S }) @@ -211,9 +194,7 @@ 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" + * @default "Accent6" * @public */ @property({ type: AvatarColorScheme, defaultValue: AvatarColorScheme.Accent6 }) @@ -229,9 +210,7 @@ class Avatar extends UI5Element implements ITabbable { * Defines the text alternative of the component. * 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 +220,6 @@ class Avatar extends UI5Element implements ITabbable { /** * Defines the aria-haspopup value of the component when interactive property is true. *

    - * @type String * @since 1.0.0-rc.15 * @protected */ @@ -264,9 +242,6 @@ class Avatar extends UI5Element implements ITabbable { *  visibility: hidden;
    * }
    * - * @type {HTMLElement} - * @name sap.ui.webc.main.Avatar.prototype.default - * @slot image * @public * @since 1.0.0-rc.15 */ @@ -293,9 +268,6 @@ class Avatar extends UI5Element implements ITabbable { * * * - * @type {HTMLElement} - * @name sap.ui.webc.main.Avatar.prototype.badge - * @slot badge * @public * @since 1.7.0 */ @@ -321,9 +293,7 @@ class Avatar extends UI5Element implements ITabbable { /** * Returns the effective avatar size. - * @readonly - * @type {string} - * @defaultValue "S" + * @default "S" * @private */ get _effectiveSize(): AvatarSize { @@ -333,9 +303,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..9b7d656079c9 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,7 @@ 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" + * @default "Group" * @public */ @property({ type: AvatarGroupType, defaultValue: AvatarGroupType.Group }) @@ -192,8 +185,6 @@ 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 * @protected */ @@ -212,13 +203,10 @@ 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 * @public */ @slot({ type: HTMLElement, "default": true }) - items!: Array; + items!: Array; /** * Defines the overflow button of the component. @@ -226,9 +214,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 */ @@ -260,25 +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[]} - * @defaultValue [] - * @name sap.ui.webc.main.AvatarGroup.prototype.hiddenItems + * @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 {sap.ui.webc.main.types.AvatarColorScheme[]} - * @name sap.ui.webc.main.AvatarGroup.prototype.colorScheme - * @defaultValue [] + * @default [] * @public */ - get colorScheme() { + get colorScheme(): string[] { return this.items.map(avatar => avatar._effectiveBackgroundColor); } @@ -499,14 +478,14 @@ class AvatarGroup extends UI5Element { } _onfocusin(e: FocusEvent) { - this._itemNavigation.setCurrentItem(e.target as Avatar); + this._itemNavigation.setCurrentItem(e.target as IAvatar); } /** * 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"; @@ -541,7 +520,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..cfedab6f5728 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 @@ -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 - * - * @name sap.ui.webc.main.ISelectOption - * @interface - * @public - */ -const ISelectOption = "sap.ui.webc.main.ISelectOption"; - /** * Interface for components that may be slotted inside ui5-select-menu as options * @@ -229,7 +220,6 @@ export { IMenuItem, IMultiComboBoxItem, ISegmentedButtonItem, - ISelectOption, ISelectMenuOption, ITab, ITableCell, diff --git a/packages/main/src/types/AvatarColorScheme.ts b/packages/main/src/types/AvatarColorScheme.ts index f72e2e722b11..a4fb61e36b0d 100644 --- a/packages/main/src/types/AvatarColorScheme.ts +++ b/packages/main/src/types/AvatarColorScheme.ts @@ -1,87 +1,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..ae721c054464 100644 --- a/packages/main/src/types/AvatarGroupType.ts +++ b/packages/main/src/types/AvatarGroupType.ts @@ -1,18 +1,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 +15,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..01130ad57107 100644 --- a/packages/main/src/types/AvatarShape.ts +++ b/packages/main/src/types/AvatarShape.ts @@ -1,24 +1,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..d72809cc0511 100644 --- a/packages/main/src/types/AvatarSize.ts +++ b/packages/main/src/types/AvatarSize.ts @@ -1,18 +1,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 +15,6 @@ enum AvatarSize { * component size - 3rem * font size - 1.5rem * @public - * @type { S } */ S = "S", @@ -28,7 +22,6 @@ enum AvatarSize { * component size - 4rem * font size - 2rem * @public - * @type { M } */ M = "M", @@ -36,7 +29,6 @@ enum AvatarSize { * component size - 5rem * font size - 2.5rem * @public - * @type { L } */ L = "L", @@ -44,7 +36,6 @@ enum AvatarSize { * component size - 7rem * font size - 3rem * @public - * @type { XL } */ XL = "XL", }