From c3a9185d6ca1ec0a27a2dbb9d9a84dec61234b14 Mon Sep 17 00:00:00 2001 From: Siyana Todorova <72251110+s-todorova@users.noreply.github.com> Date: Thu, 30 Nov 2023 09:16:43 +0200 Subject: [PATCH] docs: rewrite JSDoc for custom-elements-manifest/analyzer (#7778) * docs: new cem for Topic-RD components JSDoc changes related to using the new custom-elements-manifest for Rodopi-owned components. Issue: #7610 * docs: remove types from enums * docs: rewrite JSDoc for custom-elements-manifest/analyzer Related to: #7610 * docs: rewrite JSDoc for custom-elements-manifest/analyzer Related to: #7610 * docs: rewrite JSDoc for custom-elements-manifest/analyzer Related to: #7610 * docs: rewrite JSDoc for custom-elements-manifest/analyzer Related to: #7610 * docs: rewrite JSDoc for custom-elements-manifest/analyzer Related to: #7610 * chore: fulfill * docs: rewrite JSDoc for custom-elements-manifest/analyzer Related to: #7610 --------- Co-authored-by: Nayden Naydenov --- packages/fiori/src/Interfaces.ts | 38 ++------ packages/fiori/src/NotificationAction.ts | 28 ++---- .../fiori/src/NotificationListGroupItem.ts | 19 +--- packages/fiori/src/NotificationListItem.ts | 34 ++------ .../fiori/src/NotificationListItemBase.ts | 46 ++++------ packages/fiori/src/SideNavigation.ts | 25 ++---- packages/fiori/src/SideNavigationItem.ts | 21 +---- packages/fiori/src/SideNavigationItemBase.ts | 50 ++++------- packages/fiori/src/SideNavigationSubItem.ts | 6 +- packages/fiori/src/UploadCollection.ts | 57 ++++-------- packages/fiori/src/UploadCollectionItem.ts | 69 ++++----------- packages/fiori/src/types/UploadState.ts | 8 -- packages/main/src/Badge.ts | 18 +--- packages/main/src/BusyIndicator.ts | 31 ++----- packages/main/src/Card.ts | 25 ++---- packages/main/src/CardHeader.ts | 66 ++++++-------- packages/main/src/Carousel.ts | 76 +++++----------- packages/main/src/Dialog.ts | 51 +++-------- packages/main/src/Interfaces.ts | 24 +----- packages/main/src/Label.ts | 32 ++----- packages/main/src/Popover.ts | 86 +++++-------------- packages/main/src/Popup.ts | 70 ++++----------- packages/main/src/RadioButton.ts | 54 +++--------- packages/main/src/ResponsivePopover.ts | 43 +++------- packages/main/src/Tab.ts | 42 +++------ packages/main/src/TabContainer.ts | 81 ++++++----------- packages/main/src/Title.ts | 29 ++----- packages/main/src/types/BackgroundDesign.ts | 7 -- packages/main/src/types/BorderDesign.ts | 6 -- packages/main/src/types/BusyIndicatorSize.ts | 7 -- .../main/src/types/CarouselArrowsPlacement.ts | 6 -- .../src/types/CarouselPageIndicatorStyle.ts | 6 -- .../main/src/types/PopoverHorizontalAlign.ts | 8 -- .../main/src/types/PopoverPlacementType.ts | 8 -- .../main/src/types/PopoverVerticalAlign.ts | 8 -- .../main/src/types/PopupAccessibleRole.ts | 7 -- packages/main/src/types/Priority.ts | 8 -- packages/main/src/types/SemanticColor.ts | 9 -- .../src/types/TabContainerBackgroundDesign.ts | 7 -- .../src/types/TabContainerTabsPlacement.ts | 6 -- packages/main/src/types/TabLayout.ts | 6 -- packages/main/src/types/TabsOverflowMode.ts | 6 -- packages/main/src/types/TitleLevel.ts | 10 --- 43 files changed, 290 insertions(+), 954 deletions(-) diff --git a/packages/fiori/src/Interfaces.ts b/packages/fiori/src/Interfaces.ts index 4955761776b1..888fd80611c1 100644 --- a/packages/fiori/src/Interfaces.ts +++ b/packages/fiori/src/Interfaces.ts @@ -36,23 +36,13 @@ interface IMediaGalleryItem { focused: boolean, } -/** - * Interface for components that may be slotted as an action inside ui5-li-notification and ui5-li-notification-group - * - * @name sap.ui.webc.fiori.INotificationAction - * @interface - * @public - */ -const INotificationAction = "sap.ui.webc.fiori.INotificationAction"; - /** * Interface for components that may be slotted inside a notification list * - * @name sap.ui.webc.fiori.INotificationListItem - * @interface * @public */ -const INotificationListItem = "sap.ui.webc.fiori.INotificationListItem"; +// eslint-disable-next-line @typescript-eslint/no-empty-interface +interface INotificationListItem extends HTMLElement { } /** * Interface for components that may be slotted inside ui5-product-switch as items @@ -69,22 +59,13 @@ interface IProductSwitchItem { } /** - * Interface for components that may be slotted inside ui5-side-navigation as items + * Interface for components that may be slotted inside ui5-shellbar as items * - * @name sap.ui.webc.fiori.ISideNavigationItem + * @name sap.ui.webc.fiori.IShellBarItem * @interface * @public */ -const ISideNavigationItem = "sap.ui.webc.fiori.ISideNavigationItem"; - -/** - * Interface for components that may be slotted inside ui5-side-navigation-item as sub-items - * - * @name sap.ui.webc.fiori.ISideNavigationSubItem - * @interface - * @public - */ -const ISideNavigationSubItem = "sap.ui.webc.fiori.ISideNavigationSubItem"; +const IShellBarItem = "sap.ui.webc.fiori.IShellBarItem"; /** * Interface for components that may be slotted inside ui5-view-settings-dialog as sort items @@ -107,11 +88,10 @@ const ITimelineItem = "sap.ui.webc.fiori.ITimelineItem"; /** * Interface for components that may be slotted inside ui5-upload-collection as items * - * @name sap.ui.webc.fiori.IUploadCollectionItem - * @interface * @public */ -const IUploadCollectionItem = "sap.ui.webc.fiori.IUploadCollectionItem"; +// eslint-disable-next-line @typescript-eslint/no-empty-interface +interface IUploadCollectionItem extends HTMLElement { } /** * Interface for components that may be slotted inside ui5-wizard as wizard steps @@ -127,11 +107,9 @@ export { IFilterItem, IFilterItemOption, IMediaGalleryItem, - INotificationAction, INotificationListItem, IProductSwitchItem, - ISideNavigationItem, - ISideNavigationSubItem, + IShellBarItem, ISortItem, ITimelineItem, IUploadCollectionItem, diff --git a/packages/fiori/src/NotificationAction.ts b/packages/fiori/src/NotificationAction.ts index 06788957f2a2..94d9f85a98a2 100644 --- a/packages/fiori/src/NotificationAction.ts +++ b/packages/fiori/src/NotificationAction.ts @@ -15,12 +15,7 @@ type NotificationActionClickEventDetail = { * used in the ui5-li-notification and the ui5-li-notification-group items. * * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.NotificationAction - * @extends sap.ui.webc.base.UI5Element - * @abstract - * @tagname ui5-notification-action - * @implements sap.ui.webc.fiori.INotificationAction + * @extends UI5Element * @public */ @customElement("ui5-notification-action") @@ -28,7 +23,6 @@ type NotificationActionClickEventDetail = { /** * Fired, when the action is pressed. * - * @event sap.ui.webc.fiori.NotificationAction#click * @param {HTMLElement} targetRef DOM ref of the clicked element * @public */ @@ -41,10 +35,8 @@ class NotificationAction extends UI5Element { /** * Defines the text of the ui5-notification-action. * - * @type {string} - * @defaultvalue "" + * @default "" * @public - * @name sap.ui.webc.fiori.NotificationAction.prototype.text */ @property() text!: string; @@ -54,10 +46,8 @@ class NotificationAction extends UI5Element { *

* Note: a disabled action can't be pressed or focused, and it is not in the tab chain. * - * @type {boolean} - * @defaultvalue false + * @default false * @public - * @name sap.ui.webc.fiori.NotificationAction.prototype.disabled */ @property({ type: Boolean }) disabled!: boolean; @@ -65,10 +55,8 @@ class NotificationAction extends UI5Element { /** * Defines the action design. * - * @type {sap.ui.webc.main.types.ButtonDesign} - * @defaultvalue "Transparent" + * @default "Transparent" * @public - * @name sap.ui.webc.fiori.NotificationAction.prototype.design */ @property({ type: ButtonDesign, defaultValue: ButtonDesign.Transparent }) design!: `${ButtonDesign}`; @@ -80,10 +68,8 @@ class NotificationAction extends UI5Element { * SAP-icons font provides numerous built-in icons. To find all the available icons, see the * Icon Explorer. * - * @type {string} - * @defaultvalue "" + * @default "" * @public - * @name sap.ui.webc.fiori.NotificationAction.prototype.icon */ @property() icon!: string; @@ -92,9 +78,9 @@ class NotificationAction extends UI5Element { * Fires a custom event "click". * Note: Called by NotificationListItem and NotificationListGroupItem components. * - * @param { MouseEvent } e + * @param e * @protected - * @returns { boolean } false, if the event was cancelled (preventDefault called), true otherwise + * @returns false, if the event was cancelled (preventDefault called), true otherwise */ fireClickEvent(e: MouseEvent): boolean { return this.fireEvent("click", { diff --git a/packages/fiori/src/NotificationListGroupItem.ts b/packages/fiori/src/NotificationListGroupItem.ts index 77be21d39a85..bd2920fb7dd7 100644 --- a/packages/fiori/src/NotificationListGroupItem.ts +++ b/packages/fiori/src/NotificationListGroupItem.ts @@ -78,12 +78,9 @@ type NotificationListGroupItemToggleEventDetail = { *
* import "@ui5/webcomponents/dist/NotificationAction.js"; (optional) * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.NotificationListGroupItem - * @extends sap.ui.webc.fiori.NotificationListItemBase - * @tagname ui5-li-notification-group + * @extends NotificationListItemBase * @since 1.0.0-rc.8 - * @appenddocs sap.ui.webc.fiori.NotificationAction + * @implements {IListItem} * @public */ @customElement({ @@ -104,15 +101,12 @@ type NotificationListGroupItemToggleEventDetail = { * Fired when the ui5-li-notification-group is expanded/collapsed by user interaction. * * @public - * @event sap.ui.webc.fiori.NotificationListGroupItem#toggle */ @event("toggle") class NotificationListGroupItem extends NotificationListItemBase { /** * Defines if the group is collapsed or expanded. - * @type {boolean} - * @defaultvalue false - * @name sap.ui.webc.fiori.NotificationListGroupItem.prototype.collapsed + * @default false * @public */ @property({ type: Boolean }) @@ -120,9 +114,7 @@ class NotificationListGroupItem extends NotificationListItemBase { /** * Defines if the items counter would be displayed. - * @type {boolean} - * @defaultvalue false - * @name sap.ui.webc.fiori.NotificationListGroupItem.prototype.showCounter + * @default false * @public */ @property({ type: Boolean }) @@ -132,9 +124,6 @@ class NotificationListGroupItem extends NotificationListItemBase { * Defines the items of the ui5-li-notification-group, * usually ui5-li-notification items. * - * @type {sap.ui.webc.fiori.INotificationListItem[]} - * @slot items - * @name sap.ui.webc.fiori.NotificationListGroupItem.prototype.default * @public */ @slot({ type: HTMLElement, "default": true }) diff --git a/packages/fiori/src/NotificationListItem.ts b/packages/fiori/src/NotificationListItem.ts index 9a50a2a308e3..0a725be7e1c4 100644 --- a/packages/fiori/src/NotificationListItem.ts +++ b/packages/fiori/src/NotificationListItem.ts @@ -14,6 +14,7 @@ import Icon from "@ui5/webcomponents/dist/Icon.js"; import Popover from "@ui5/webcomponents/dist/Popover.js"; import WrappingType from "@ui5/webcomponents/dist/types/WrappingType.js"; import NotificationListItemBase from "./NotificationListItemBase.js"; +import type { INotificationListItem } from "./Interfaces"; // Icons import "@ui5/webcomponents-icons/dist/overflow.js"; @@ -69,28 +70,18 @@ type Footnote = Record; *

Usage

* The component can be used in a standard ui5-list. * - *

CSS Shadow Parts

- * - * CSS Shadow Parts allow developers to style elements inside the Shadow DOM. - *
- * The ui5-li-notification exposes the following CSS Shadow Parts: - *
    - *
  • title-text - Used to style the titleText of the notification list item
    • - *
- * *

ES6 Module Import

* * import "@ui5/webcomponents/dist/NotificationListItem.js"; *
* import "@ui5/webcomponents/dist/NotificationAction.js"; (optional) * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.NotificationListItem - * @extends sap.ui.webc.fiori.NotificationListItemBase - * @tagname ui5-li-notification - * @appenddocs sap.ui.webc.fiori.NotificationAction + * @extends NotificationListItemBase * @since 1.0.0-rc.8 + * @implements {INotificationListItem} + * @implements {IListItem} * @public + * @csspart title-text - Used to style the titleText of the notification list item */ @customElement({ tag: "ui5-li-notification", @@ -107,7 +98,7 @@ type Footnote = Record; }) @event("_press") -class NotificationListItem extends NotificationListItemBase { +class NotificationListItem extends NotificationListItemBase implements INotificationListItem { /** * Defines if the titleText and description should wrap, * they truncate by default. @@ -115,10 +106,8 @@ class NotificationListItem extends NotificationListItemBase { *

* Note: by default the titleText and description, * and a ShowMore/Less button would be displayed. - * @type {sap.ui.webc.main.types.WrappingType} - * @defaultvalue "None" + * @default "None" * @public - * @name sap.ui.webc.fiori.NotificationListItem.prototype.wrappingType * @since 1.0.0-rc.15 */ @property({ type: WrappingType, defaultValue: WrappingType.None }) @@ -149,20 +138,14 @@ class NotificationListItem extends NotificationListItemBase { * we recommend using avatars with 2rem X 2rem in size (32px X 32px). In case you are using the ui5-avatar * you can set its size property to XS to get the required size - <ui5-avatar size="XS"></ui5-avatar>. * - * @type {sap.ui.webc.main.IAvatar} - * @slot * @public - * @name sap.ui.webc.fiori.NotificationListItem.prototype.avatar */ @slot() avatar!: Array; /** * Defines the elements, displayed in the footer of the of the component. - * @type {HTMLElement[]} - * @slot * @public - * @name sap.ui.webc.fiori.NotificationListItem.prototype.footnotes */ @slot({ type: HTMLElement, individualSlots: true }) footnotes!: Array; @@ -174,10 +157,7 @@ class NotificationListItem extends NotificationListItemBase { *

* Note: Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design. * - * @type {Node[]} - * @slot description * @public - * @name sap.ui.webc.fiori.NotificationListItem.prototype.default */ @slot({ type: Node, "default": true }) description!: Array; diff --git a/packages/fiori/src/NotificationListItemBase.ts b/packages/fiori/src/NotificationListItemBase.ts index 7b9efe14d67f..7086445f5fb4 100644 --- a/packages/fiori/src/NotificationListItemBase.ts +++ b/packages/fiori/src/NotificationListItemBase.ts @@ -10,7 +10,7 @@ import ListItemBase from "@ui5/webcomponents/dist/ListItemBase.js"; import Integer from "@ui5/webcomponents-base/dist/types/Integer.js"; import Priority from "@ui5/webcomponents/dist/types/Priority.js"; import type Popover from "@ui5/webcomponents/dist/Popover.js"; -import type NotificationAction from "./NotificationAction.js"; +import NotificationAction from "./NotificationAction.js"; // Icons import "@ui5/webcomponents-icons/dist/decline.js"; @@ -44,38 +44,35 @@ type NotificationListItemBaseCloseEventDetail = { * * The base class of the NotificationListItem and NotificationListGroupItem. * - * @abstract * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.NotificationListItemBase - * @extends sap.ui.webc.main.ListItemBase + * @extends ListItemBase * @since 1.0.0-rc.8 * @public */ +@customElement({ + staticAreaStyles: NotificationOverflowActionsPopoverCss, + staticAreaTemplate: NotificationOverflowActionsPopoverTemplate, +}) /** * Fired when the Close button is pressed. * - * @event sap.ui.webc.fiori.NotificationListItemBase#close * @param {HTMLElement} item the closed item. * @public */ @event("close", { detail: { + /** + * @public + */ item: HTMLElement, }, }) -@customElement({ - staticAreaStyles: NotificationOverflowActionsPopoverCss, - staticAreaTemplate: NotificationOverflowActionsPopoverTemplate, -}) class NotificationListItemBase extends ListItemBase { /** * Defines the titleText of the item. - * @type {string} - * @defaultvalue "" + * @default "" * @public - * @name sap.ui.webc.fiori.NotificationListItemBase.prototype.titleText */ @property() titleText!: string; @@ -83,20 +80,16 @@ class NotificationListItemBase extends ListItemBase { /** * Defines the priority of the item. * - * @type {sap.ui.webc.main.types.Priority} - * @defaultvalue "None" + * @default "None" * @public - * @name sap.ui.webc.fiori.NotificationListItemBase.prototype.priority */ @property({ type: Priority, defaultValue: Priority.None }) priority!: `${Priority}`; /** * Defines if the close button would be displayed. - * @type {boolean} - * @defaultvalue false + * @default false * @public - * @name sap.ui.webc.fiori.NotificationListItemBase.prototype.showClose */ @property({ type: Boolean }) showClose!: boolean; @@ -106,20 +99,16 @@ class NotificationListItemBase extends ListItemBase { *

* Note: if set to false the titleText has bold font, * if set to true - it has a normal font. - * @type {boolean} - * @defaultvalue false + * @default false * @public - * @name sap.ui.webc.fiori.NotificationListItemBase.prototype.read */ @property({ type: Boolean }) read!: boolean; /** * Defines if a busy indicator would be displayed over the item. - * @type {boolean} - * @defaultvalue false + * @default false * @public - * @name sap.ui.webc.fiori.NotificationListItemBase.prototype.busy * @since 1.0.0-rc.8 */ @property({ type: Boolean }) @@ -128,10 +117,8 @@ class NotificationListItemBase extends ListItemBase { /** * Defines the delay in milliseconds, after which the busy indicator will show up for this component. * - * @type {sap.ui.webc.base.types.Integer} - * @defaultValue 1000 + * @default 1000 * @public - * @name sap.ui.webc.fiori.NotificationListItemBase.prototype.busyDelay */ @property({ validator: Integer, defaultValue: 1000 }) busyDelay!: number; @@ -141,10 +128,7 @@ class NotificationListItemBase extends ListItemBase { *

* Note: use the ui5-notification-action component. * - * @type {sap.ui.webc.fiori.INotificationAction[]} - * @slot * @public - * @name sap.ui.webc.fiori.NotificationListItemBase.prototype.actions */ @slot() actions!: Array diff --git a/packages/fiori/src/SideNavigation.ts b/packages/fiori/src/SideNavigation.ts index 039712ccf896..73f78e8fb04a 100644 --- a/packages/fiori/src/SideNavigation.ts +++ b/packages/fiori/src/SideNavigation.ts @@ -88,12 +88,8 @@ type PopupClickEventDetail = { * import "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js"; (for ui5-side-navigation-sub-item) * * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.SideNavigation - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-side-navigation + * @extends UI5Element * @since 1.0.0-rc.8 - * @appenddocs sap.ui.webc.fiori.SideNavigationItem sap.ui.webc.fiori.SideNavigationSubItem * @public */ @@ -115,13 +111,15 @@ type PopupClickEventDetail = { /** * Fired when the selection has changed via user interaction * - * @event sap.ui.webc.fiori.SideNavigation#selection-change - * @param {sap.ui.webc.fiori.SideNavigationItemBase} item the clicked item. + * @param {SideNavigationItemBase} item the clicked item. * @allowPreventDefault * @public */ @event("selection-change", { detail: { + /** + * @public + */ item: { type: HTMLElement }, }, }) @@ -130,9 +128,7 @@ class SideNavigation extends UI5Element { * Defines whether the ui5-side-navigation is expanded or collapsed. * * @public - * @type {boolean} - * @defaultvalue false - * @name sap.ui.webc.fiori.SideNavigation.prototype.collapsed + * @default false */ @property({ type: Boolean }) collapsed!: boolean; @@ -143,9 +139,6 @@ class SideNavigation extends UI5Element { * inside the items. * * @public - * @type {sap.ui.webc.fiori.SideNavigationItem[]} - * @slot items - * @name sap.ui.webc.fiori.SideNavigation.prototype.default */ @slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true }) items!: Array; @@ -157,10 +150,7 @@ class SideNavigation extends UI5Element { * Note: The header is displayed when the component is expanded - the property collapsed is false; * * @public - * @type {HTMLElement[]} * @since 1.0.0-rc.11 - * @slot header - * @name sap.ui.webc.fiori.SideNavigation.prototype.header */ @slot() header!: Array; @@ -172,9 +162,6 @@ class SideNavigation extends UI5Element { * Note: In order to achieve the best user experience, it is recommended that you keep the fixed items "flat" (do not pass sub-items) * * @public - * @type {sap.ui.webc.fiori.SideNavigationItem[]} - * @slot fixedItems - * @name sap.ui.webc.fiori.SideNavigation.prototype.fixedItems */ @slot({ type: HTMLElement, invalidateOnChildChange: true }) fixedItems!: Array; diff --git a/packages/fiori/src/SideNavigationItem.ts b/packages/fiori/src/SideNavigationItem.ts index b9f0a5d4b97d..1f59741430de 100644 --- a/packages/fiori/src/SideNavigationItem.ts +++ b/packages/fiori/src/SideNavigationItem.ts @@ -19,13 +19,9 @@ import type SideNavigationSubItem from "./SideNavigationSubItem.js"; * import "@ui5/webcomponents-fiori/dist/SideNavigationItem.js"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.SideNavigationItem - * @extends sap.ui.webc.fiori.SideNavigationItemBase + * @extends SideNavigationItemBase * @abstract - * @tagname ui5-side-navigation-item * @public - * @implements sap.ui.webc.fiori.ISideNavigationItem * @since 1.0.0-rc.8 */ @customElement("ui5-side-navigation-item") @@ -34,9 +30,7 @@ class SideNavigationItem extends SideNavigationItemBase { * Defines if the item is expanded * * @public - * @type {boolean} - * @defaultvalue false - * @name sap.ui.webc.fiori.SideNavigationItem.prototype.expanded + * @default false */ @property({ type: Boolean }) expanded!: boolean; @@ -45,9 +39,7 @@ class SideNavigationItem extends SideNavigationItemBase { * Defines if the item should be collapsible or not. * It is true, for example, for the items inside the Popover of the Side Navigation * @private - * @type {boolean} - * @defaultvalue false - * @name sap.ui.webc.fiori.SideNavigationItem.prototype._fixed + * @default false * @since 1.10.0 */ @property({ type: Boolean }) @@ -56,10 +48,7 @@ class SideNavigationItem extends SideNavigationItemBase { /** * Defines nested items by passing ui5-side-navigation-sub-item to the default slot. * - * @type {sap.ui.webc.fiori.ISideNavigationSubItem[]} * @public - * @slot items - * @name sap.ui.webc.fiori.SideNavigationItem.prototype.default */ @slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true }) items!: Array; @@ -70,9 +59,7 @@ class SideNavigationItem extends SideNavigationItemBase { * By default, only clicking the arrow icon will toggle the sub items. * * @public - * @type {boolean} - * @defaultvalue false - * @name sap.ui.webc.fiori.SideNavigationItem.prototype.wholeItemToggleable + * @default false * @since 1.0.0-rc.11 */ @property({ type: Boolean }) diff --git a/packages/fiori/src/SideNavigationItemBase.ts b/packages/fiori/src/SideNavigationItemBase.ts index d1d55a759469..02b3e3fe2aa0 100644 --- a/packages/fiori/src/SideNavigationItemBase.ts +++ b/packages/fiori/src/SideNavigationItemBase.ts @@ -5,37 +5,31 @@ import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js"; import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js"; import type SideNavigation from "./SideNavigation.js"; +/** + * Fired when the component is activated either with a + * click/tap or by using the Enter or Space key. + * + * @public + */ +@event("click") + /** * @class * A class to serve as a foundation * for the SideNavigationItem and SideNavigationSubItem classes. * * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.SideNavigationItemBase - * @extends sap.ui.webc.base.UI5Element + * @extends UI5Element * @abstract * @public - * @implements sap.ui.webc.fiori.SideNavigationItemBase * @since 1.19.0 */ - -/** - * Fired when the component is activated either with a - * click/tap or by using the Enter or Space key. - * - * @event sap.ui.webc.fiori.SideNavigationItemBase#click - * @public - */ -@event("click") class SideNavigationItemBase extends UI5Element implements ITabbable { /** * Defines the text of the item. * * @public - * @type {string} - * @defaultvalue "" - * @name sap.ui.webc.fiori.SideNavigationItemBase.prototype.text + * @default "" */ @property() text!: string; @@ -48,9 +42,7 @@ class SideNavigationItemBase extends UI5Element implements ITabbable { *
* See all the available icons in the Icon Explorer. * @public - * @type {string} - * @defaultvalue "" - * @name sap.ui.webc.fiori.SideNavigationItemBase.prototype.icon + * @default "" */ @property() icon!: string; @@ -59,9 +51,7 @@ class SideNavigationItemBase extends UI5Element implements ITabbable { * Defines whether the item is selected * * @public - * @type {boolean} - * @defaultvalue false - * @name sap.ui.webc.fiori.SideNavigationItemBase.prototype.selected + * @default false */ @property({ type: Boolean }) selected!: boolean; @@ -73,9 +63,7 @@ class SideNavigationItemBase extends UI5Element implements ITabbable { * for the click event should be registered. * * @public - * @type {string} - * @defaultvalue "" - * @name sap.ui.webc.fiori.SideNavigationItemBase.prototype.href + * @default "" * @since 1.19.0 */ @property() @@ -97,9 +85,7 @@ class SideNavigationItemBase extends UI5Element implements ITabbable { * This property must only be used when the href property is set. * * @public - * @type {string} - * @defaultvalue "" - * @name sap.ui.webc.fiori.SideNavigationItemBase.prototype.target + * @default "" * @since 1.19.0 */ @property() @@ -110,9 +96,7 @@ class SideNavigationItemBase extends UI5Element implements ITabbable { * A disabled component can't be pressed or * focused, and it is not in the tab chain. * - * @type {boolean} - * @name sap.ui.webc.main.SideNavigationItemBase.prototype.disabled - * @defaultvalue false + * @default false * @public * @since 1.19.0 */ @@ -121,10 +105,8 @@ class SideNavigationItemBase extends UI5Element implements ITabbable { /** * Defines the tooltip of the component. - * @type {string} - * @defaultvalue "" + * @default "" * @private - * @name sap.ui.webc.fiori.SideNavigationItemBase.prototype.title * @since 1.0.0-rc.16 */ @property() diff --git a/packages/fiori/src/SideNavigationSubItem.ts b/packages/fiori/src/SideNavigationSubItem.ts index e25936c70197..a1bb93debf1b 100644 --- a/packages/fiori/src/SideNavigationSubItem.ts +++ b/packages/fiori/src/SideNavigationSubItem.ts @@ -13,13 +13,9 @@ import SideNavigationItemBase from "./SideNavigationItemBase.js"; * import "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.SideNavigationSubItem - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-side-navigation-sub-item + * @extends SideNavigationItemBase * @public * @abstract - * @implements sap.ui.webc.fiori.ISideNavigationSubItem * @since 1.0.0-rc.8 */ @customElement("ui5-side-navigation-sub-item") diff --git a/packages/fiori/src/UploadCollection.ts b/packages/fiori/src/UploadCollection.ts index 0fc717659c79..5833ec46ae6d 100644 --- a/packages/fiori/src/UploadCollection.ts +++ b/packages/fiori/src/UploadCollection.ts @@ -28,7 +28,7 @@ import { detachBodyDnDHandler, draggingFiles, } from "./upload-utils/UploadCollectionBodyDnD.js"; -import type UploadCollectionItem from "./UploadCollectionItem.js"; +import type IUploadCollectionItem from "./UploadCollectionItem.js"; import type { DnDEventListener, DnDEventListenerParam } from "./upload-utils/UploadCollectionBodyDnD.js"; import UploadCollectionDnDOverlayMode from "./types/UploadCollectionDnDMode.js"; @@ -39,11 +39,11 @@ import UploadCollectionTemplate from "./generated/templates/UploadCollectionTemp import UploadCollectionCss from "./generated/themes/UploadCollection.css.js"; type UploadCollectionSelectionChangeEventDetail = { - selectedItems: Array, + selectedItems: Array, }; type UploadCollectionItemDeleteEventDetail = { - item: UploadCollectionItem, + item: IUploadCollectionItem, }; /** @@ -59,11 +59,7 @@ type UploadCollectionItemDeleteEventDetail = { * import "@ui5/webcomponents-fiori/dist/UploadCollectionItem.js"; (for ui5-upload-collection-item) * * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.UploadCollection - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-upload-collection - * @appenddocs sap.ui.webc.fiori.UploadCollectionItem + * @extends UI5Element * @public * @since 1.0.0-rc.7 */ @@ -86,8 +82,6 @@ type UploadCollectionItemDeleteEventDetail = { *

* Note: The drop event is fired only when elements are dropped within the drag and drop overlay and ignored for the other parts of the ui5-upload-collection. * - * @event sap.ui.webc.fiori.UploadCollection#drop - * @readonly * @param {DataTransfer} dataTransfer The drop event operation data. * @public * @native @@ -97,12 +91,14 @@ type UploadCollectionItemDeleteEventDetail = { /** * Fired when the delete button of any item is pressed. * - * @event sap.ui.webc.fiori.UploadCollection#item-delete * @param {HTMLElement} item The ui5-upload-collection-item which was deleted. * @public */ @event("item-delete", { detail: { + /** + * @public + */ item: { type: HTMLElement }, }, }) @@ -111,12 +107,14 @@ type UploadCollectionItemDeleteEventDetail = { * Fired when selection is changed by user interaction * in SingleSelect and MultiSelect modes. * - * @event sap.ui.webc.fiori.UploadCollection#selection-change * @param {Array} selectedItems An array of the selected items. * @public */ @event("selection-change", { detail: { + /** + * @public + */ selectedItems: { type: Array }, }, }) @@ -127,9 +125,7 @@ class UploadCollection extends UI5Element { *
Note: * Mode "Delete" has no effect. The delete button is controlled by the hideDeleteButton property of UploadCollectionItem * - * @type {sap.ui.webc.main.types.ListMode} - * @name sap.ui.webc.fiori.UploadCollection.prototype.mode - * @defaultvalue "None" + * @default "None" * @public */ @property({ type: ListMode, defaultValue: ListMode.None }) @@ -138,9 +134,7 @@ class UploadCollection extends UI5Element { /** * Allows you to set your own text for the 'No data' description. * - * @type {string} - * @name sap.ui.webc.fiori.UploadCollection.prototype.noDataDescription - * @defaultvalue "" + * @default "" * @public */ @property() @@ -149,9 +143,7 @@ class UploadCollection extends UI5Element { /** * Allows you to set your own text for the 'No data' text. * - * @type {string} - * @name sap.ui.webc.fiori.UploadCollection.prototype.noDataText - * @defaultvalue "" + * @default "" * @public */ @property() @@ -164,9 +156,7 @@ class UploadCollection extends UI5Element { * Note: It is up to the application developer to add handler for drop event and handle it. * ui5-upload-collection only displays an overlay. * - * @type {boolean} - * @name sap.ui.webc.fiori.UploadCollection.prototype.hideDragOverlay - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -175,9 +165,7 @@ class UploadCollection extends UI5Element { /** * Defines the accessible ARIA name of the component. * - * @type {string} - * @name sap.ui.webc.fiori.UploadCollection.prototype.accessibleName - * @defaultvalue "" + * @default "" * @public * @since 1.0.0-rc.16 */ @@ -187,8 +175,7 @@ class UploadCollection extends UI5Element { /** * Indicates what overlay to show when files are being dragged. * - * @type {sap.ui.webc.fiori.types.UploadCollectionDnDOverlayMode} - * @defaultvalue "None" + * @default "None" * @private */ @property({ type: UploadCollectionDnDOverlayMode, defaultValue: UploadCollectionDnDOverlayMode.None }) @@ -198,13 +185,10 @@ class UploadCollection extends UI5Element { * Defines the items of the ui5-upload-collection. *
Note: Use ui5-upload-collection-item for the intended design. * - * @type {sap.ui.webc.fiori.IUploadCollectionItem[]} - * @name sap.ui.webc.fiori.UploadCollection.prototype.default - * @slot items * @public */ @slot({ type: HTMLElement, "default": true }) - items!: Array; + items!: Array; /** * Defines the ui5-upload-collection header. @@ -213,9 +197,6 @@ class UploadCollection extends UI5Element { * the labelling of the UploadCollection is a responsibility of the application developer. * accessibleName should be used. * - * @type {HTMLElement[]} - * @name sap.ui.webc.fiori.UploadCollection.prototype.header - * @slot * @public */ @slot({ type: HTMLElement }) @@ -297,11 +278,11 @@ class UploadCollection extends UI5Element { } _onItemDelete(e: CustomEvent) { - this.fireEvent("item-delete", { item: e.target as UploadCollectionItem }); + this.fireEvent("item-delete", { item: e.target as IUploadCollectionItem }); } _onSelectionChange(e: CustomEvent) { - this.fireEvent("selection-change", { selectedItems: e.detail.selectedItems as UploadCollectionItem[] }); + this.fireEvent("selection-change", { selectedItems: e.detail.selectedItems as IUploadCollectionItem[] }); } get classes() { diff --git a/packages/fiori/src/UploadCollectionItem.ts b/packages/fiori/src/UploadCollectionItem.ts index 63a00b1272b4..717c57225e72 100644 --- a/packages/fiori/src/UploadCollectionItem.ts +++ b/packages/fiori/src/UploadCollectionItem.ts @@ -30,6 +30,7 @@ import { UPLOADCOLLECTIONITEM_TERMINATE_BUTTON_TEXT, UPLOADCOLLECTIONITEM_EDIT_BUTTON_TEXT, } from "./generated/i18n/i18n-defaults.js"; +import type { IUploadCollectionItem } from "./Interfaces"; // Template import UploadCollectionItemTemplate from "./generated/templates/UploadCollectionItemTemplate.lit.js"; @@ -48,12 +49,10 @@ import UploadCollectionItemCss from "./generated/themes/UploadCollectionItem.css * import "@ui5/webcomponents-fiori/dist/UploadCollectionItem.js"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.UploadCollectionItem - * @extends sap.ui.webc.main.ListItem - * @tagname ui5-upload-collection-item + * @extends ListItem * @public - * @implements sap.ui.webc.fiori.IUploadCollectionItem + * @implements {IUploadCollectionItem} + * @slot {Node[]} default - Hold the description of the ui5-upload-collection-item. Will be shown below the file name. * @since 1.0.0-rc.7 */ @customElement({ @@ -76,7 +75,6 @@ import UploadCollectionItemCss from "./generated/themes/UploadCollectionItem.css *

* Note: This event is only available when fileNameClickable property is true. * - * @event sap.ui.webc.fiori.UploadCollectionItem#file-name-click * @public */ @event("file-name-click") @@ -87,7 +85,6 @@ import UploadCollectionItemCss from "./generated/themes/UploadCollectionItem.css * Note: An edit button is displayed on each item, * when the ui5-upload-collection-item type property is set to Detail. * - * @event sap.ui.webc.fiori.UploadCollectionItem#rename * @public */ @event("rename") @@ -97,7 +94,6 @@ import UploadCollectionItemCss from "./generated/themes/UploadCollectionItem.css *

* Note: Terminate button is displayed when uploadState property is set to Uploading. * - * @event sap.ui.webc.fiori.UploadCollectionItem#terminate * @public */ @event("terminate") @@ -107,7 +103,6 @@ import UploadCollectionItemCss from "./generated/themes/UploadCollectionItem.css *

* Note: Retry button is displayed when uploadState property is set to Error. * - * @event sap.ui.webc.fiori.UploadCollectionItem#retry * @public */ @event("retry") @@ -115,7 +110,6 @@ import UploadCollectionItemCss from "./generated/themes/UploadCollectionItem.css /** * @since 1.0.0-rc.8 * - * @event * @private */ @event("_focus-requested") @@ -124,24 +118,20 @@ import UploadCollectionItemCss from "./generated/themes/UploadCollectionItem.css * @private */ @event("_uci-delete") -class UploadCollectionItem extends ListItem { +class UploadCollectionItem extends ListItem implements IUploadCollectionItem { /** * Holds an instance of File associated with this item. * - * @type {File} - * @name sap.ui.webc.fiori.UploadCollectionItem.prototype.file - * @defaultvalue null + * @default null * @public */ @property({ type: Object, noAttribute: true, defaultValue: null }) - file?: object; + file?: File | null; /** * The name of the file. * - * @type {string} - * @name sap.ui.webc.fiori.UploadCollectionItem.prototype.fileName - * @defaultvalue "" + * @default "" * @public */ @property() @@ -150,9 +140,7 @@ class UploadCollectionItem extends ListItem { /** * If set to true the file name will be clickable and it will fire file-name-click event upon click. * - * @type {boolean} - * @name sap.ui.webc.fiori.UploadCollectionItem.prototype.fileNameClickable - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -161,9 +149,7 @@ class UploadCollectionItem extends ListItem { /** * Disables the delete button. * - * @type {boolean} - * @name sap.ui.webc.fiori.UploadCollectionItem.prototype.disableDeleteButton - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean, noAttribute: false }) @@ -173,9 +159,7 @@ class UploadCollectionItem extends ListItem { * By default, the delete button will always be shown, regardless of the ui5-upload-collection's property mode. * Setting this property to true will hide the delete button. * - * @type {boolean} - * @name sap.ui.webc.fiori.UploadCollectionItem.prototype.hideDeleteButton - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -184,9 +168,7 @@ class UploadCollectionItem extends ListItem { /** * Hides the retry button when uploadState property is Error. * - * @type {boolean} - * @name sap.ui.webc.fiori.UploadCollectionItem.prototype.hideRetryButton - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -195,9 +177,7 @@ class UploadCollectionItem extends ListItem { /** * Hides the terminate button when uploadState property is Uploading. * - * @type {boolean} - * @name sap.ui.webc.fiori.UploadCollectionItem.prototype.hideTerminateButton - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -208,9 +188,7 @@ class UploadCollectionItem extends ListItem { *

* Note: Expected values are in the interval [0, 100]. * - * @type {sap.ui.webc.base.types.Integer} - * @name sap.ui.webc.fiori.UploadCollectionItem.prototype.progress - * @defaultvalue 0 + * @default 0 * @public */ @property({ validator: Integer, defaultValue: 0 }) @@ -221,9 +199,7 @@ class UploadCollectionItem extends ListItem { * Also if set to Error, a refresh button is shown. When this icon is pressed retry event is fired. * If set to Uploading, a terminate button is shown. When this icon is pressed terminate event is fired. * - * @type {sap.ui.webc.fiori.types.UploadState} - * @name sap.ui.webc.fiori.UploadCollectionItem.prototype.uploadState - * @defaultvalue "Ready" + * @default "Ready" * @public */ @property({ type: UploadState, defaultValue: UploadState.Ready }) @@ -232,8 +208,7 @@ class UploadCollectionItem extends ListItem { /** * Indicates if editing. * - * @type {boolean} - * @defaultvalue false + * @default false * @private */ @property({ type: Boolean }) @@ -244,23 +219,11 @@ class UploadCollectionItem extends ListItem { *

* Note: Use ui5-icon or img for the intended design. * - * @type {HTMLElement} - * @slot - * @name sap.ui.webc.fiori.UploadCollectionItem.prototype.thumbnail * @public */ @slot({ type: HTMLElement }) thumbnail!: Array; - /** - * Hold the description of the ui5-upload-collection-item. Will be shown below the file name. - * - * @type {Node[]} - * @slot - * @name sap.ui.webc.fiori.UploadCollectionItem.prototype.default - * @public - */ - static i18nFioriBundle: I18nBundle; static async onDefine() { diff --git a/packages/fiori/src/types/UploadState.ts b/packages/fiori/src/types/UploadState.ts index 262ef3234aa0..59af3e1cca14 100644 --- a/packages/fiori/src/types/UploadState.ts +++ b/packages/fiori/src/types/UploadState.ts @@ -1,38 +1,30 @@ /** * Different types of UploadState. * - * @readonly - * @enum {string} * @public - * @author SAP SE - * @alias sap.ui.webc.fiori.types.UploadState */ enum UploadState { /** * The file has been uploaded successfully. * @public - * @type {Complete} */ Complete = "Complete", /** * The file cannot be uploaded due to an error. * @public - * @type {Error} */ Error = "Error", /** * The file is awaiting an explicit command to start being uploaded. * @public - * @type {Ready} */ Ready = "Ready", /** * The file is currently being uploaded. * @public - * @type {Uploading} */ Uploading = "Uploading", } diff --git a/packages/main/src/Badge.ts b/packages/main/src/Badge.ts index 3e7374a0cf23..4723eadd7061 100644 --- a/packages/main/src/Badge.ts +++ b/packages/main/src/Badge.ts @@ -6,6 +6,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import willShowContent from "@ui5/webcomponents-base/dist/util/willShowContent.js"; +import type { IIcon } from "./Interfaces.js"; // Template import BadgeTemplate from "./generated/templates/BadgeTemplate.lit.js"; @@ -34,10 +35,7 @@ import badgeCss from "./generated/themes/Badge.css.js"; * import "@ui5/webcomponents/dist/Badge"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.Badge - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-badge + * @extends UI5Element * @since 0.12.0 * @public */ @@ -55,9 +53,7 @@ class Badge extends UI5Element { * To use one you can set a number from "1" to "10". The colorScheme "1" will be set by default. *

* Note: Color schemes have no visual representation in High Contrast Black (sap_belize_hcb) theme. - * @type {string} - * @name sap.ui.webc.main.Badge.prototype.colorScheme - * @defaultvalue "1" + * @default "1" * @public */ @property({ defaultValue: "1" }) @@ -81,9 +77,6 @@ class Badge extends UI5Element { * Defines the text of the component. *
Note: Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design. * - * @type {Node[]} - * @name sap.ui.webc.main.Badge.prototype.default - * @slot * @public */ @slot({ type: Node, "default": true }) @@ -92,13 +85,10 @@ class Badge extends UI5Element { /** * Defines the icon to be displayed in the component. * - * @type {sap.ui.webc.main.IIcon[]} - * @name sap.ui.webc.main.Badge.prototype.icon - * @slot * @public */ @slot() - icon!: Array; + icon!: Array; static i18nBundle: I18nBundle; diff --git a/packages/main/src/BusyIndicator.ts b/packages/main/src/BusyIndicator.ts index b7df43b3f503..7c53088dad0f 100644 --- a/packages/main/src/BusyIndicator.ts +++ b/packages/main/src/BusyIndicator.ts @@ -54,11 +54,9 @@ import busyIndicatorCss from "./generated/themes/BusyIndicator.css.js"; * import "@ui5/webcomponents/dist/BusyIndicator"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.BusyIndicator - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-busy-indicator + * @extends UI5Element * @public + * @slot {Node[]} default - Determines the content over which the component will appear. * @since 0.12.0 */ @customElement({ @@ -72,10 +70,8 @@ import busyIndicatorCss from "./generated/themes/BusyIndicator.css.js"; class BusyIndicator extends UI5Element { /** * Defines text to be displayed below the component. It can be used to inform the user of the current operation. - * @type {string} - * @name sap.ui.webc.main.BusyIndicator.prototype.text * @public - * @defaultvalue "" + * @default "" * @since 1.0.0-rc.7 */ @property() @@ -84,9 +80,7 @@ class BusyIndicator extends UI5Element { /** * Defines the size of the component. * - * @type {sap.ui.webc.main.types.BusyIndicatorSize} - * @name sap.ui.webc.main.BusyIndicator.prototype.size - * @defaultvalue "Medium" + * @default "Medium" * @public */ @property({ type: BusyIndicatorSize, defaultValue: BusyIndicatorSize.Medium }) @@ -95,9 +89,7 @@ class BusyIndicator extends UI5Element { /** * Defines if the busy indicator is visible on the screen. By default it is not. * - * @type {boolean} - * @name sap.ui.webc.main.BusyIndicator.prototype.active - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -106,9 +98,7 @@ class BusyIndicator extends UI5Element { /** * Defines the delay in milliseconds, after which the busy indicator will be visible on the screen. * - * @type {sap.ui.webc.base.types.Integer} - * @name sap.ui.webc.main.BusyIndicator.prototype.delay - * @defaultValue 1000 + * @default 1000 * @public */ @property({ validator: Integer, defaultValue: 1000 }) @@ -121,15 +111,6 @@ class BusyIndicator extends UI5Element { @property({ type: Boolean }) _isBusy!: boolean; - /** - * Determines the content over which the component will appear. - * - * @type {Node[]} - * @name sap.ui.webc.main.BusyIndicator.prototype.default - * @slot - * @public - */ - _keydownHandler: (e: KeyboardEvent) => void; _preventEventHandler: (e: KeyboardEvent) => void; _busyTimeoutId?: Timeout; diff --git a/packages/main/src/Card.ts b/packages/main/src/Card.ts index 7ce6da8a3ca9..3c9ffd467720 100644 --- a/packages/main/src/Card.ts +++ b/packages/main/src/Card.ts @@ -8,8 +8,7 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js"; import CardTemplate from "./generated/templates/CardTemplate.lit.js"; import Icon from "./Icon.js"; -import type CardHeader from "./CardHeader.js"; - +import type { ICardHeader } from "./CardHeader.js"; import { ARIA_ROLEDESCRIPTION_CARD, ARIA_LABEL_CARD_CONTENT, @@ -36,12 +35,8 @@ import cardCss from "./generated/themes/Card.css.js"; * import "@ui5/webcomponents/dist/CardHeader.js"; (for ui5-card-header) * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.Card - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-card + * @extends UI5Element * @public - * @appenddocs sap.ui.webc.main.CardHeader */ @customElement({ tag: "ui5-card", @@ -57,9 +52,7 @@ class Card extends UI5Element { * Note: accessibleName should be always set, unless accessibleNameRef is set. * * - * @type {string} - * @defaultvalue "" - * @name sap.ui.webc.main.Card.prototype.accessibleName + * @default "" * @public * @since 1.0.0-rc.16 */ @@ -69,9 +62,7 @@ class Card extends UI5Element { /** * Defines the IDs of the elements that label the component. * - * @type {string} - * @defaultvalue "" - * @name sap.ui.webc.main.Card.prototype.accessibleNameRef + * @default "" * @public * @since 1.0.0-rc.16 */ @@ -80,9 +71,6 @@ class Card extends UI5Element { /** * Defines the content of the component. - * @type {HTMLElement[]} - * @slot content - * @name sap.ui.webc.main.Card.prototype.default * @public */ @slot({ type: HTMLElement, "default": true }) @@ -92,14 +80,11 @@ class Card extends UI5Element { * Defines the header of the component. *

* Note: Use ui5-card-header for the intended design. - * @type {sap.ui.webc.main.ICardHeader[]} * @since 1.0.0-rc.15 - * @slot header - * @name sap.ui.webc.main.Card.prototype.header * @public */ @slot({ type: HTMLElement, invalidateOnChildChange: true }) - header!: Array; + header!: Array; static i18nBundle: I18nBundle; diff --git a/packages/main/src/CardHeader.ts b/packages/main/src/CardHeader.ts index 1de928a6a7d2..8254e2239cf2 100644 --- a/packages/main/src/CardHeader.ts +++ b/packages/main/src/CardHeader.ts @@ -20,6 +20,18 @@ import { // Styles import cardHeaderCss from "./generated/themes/CardHeader.css.js"; +/** + * Interface for components that may be slotted inside ui5-card as header + * + * @public + */ +interface ICardHeader extends UI5Element { + subtitleText: string, + titleText: string, + status: string, + interactive: boolean, +} + /** * @class *

Overview

@@ -31,30 +43,19 @@ import cardHeaderCss from "./generated/themes/CardHeader.css.js"; *

Keyboard handling

* In case you enable interactive property, you can press the ui5-card-header by Space and Enter keys. * - *

CSS Shadow Parts

- * - * CSS Shadow Parts allow developers to style elements inside the Shadow DOM. - *
- * The ui5-card-header exposes the following CSS Shadow Parts: - *
    - *
  • root - Used to style the root DOM element of the CardHeader
    • - *
  • title - Used to style the title of the CardHeader
    • - *
  • subtitle - Used to style the subtitle of the CardHeader
    • - *
  • status - Used to style the status of the CardHeader
    • - *
- * *

ES6 Module Import

* * import "@ui5/webcomponents/dist/CardHeader"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.CardHeader - * @implements sap.ui.webc.main.ICardHeader - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-card-header + * @implements {ICardHeader} + * @extends UI5Element * @public * @since 1.0.0-rc.15 + * @csspart root - Used to style the root DOM element of the CardHeader + * @csspart title - Used to style the title of the CardHeader + * @csspart subtitle - Used to style the subtitle of the CardHeader + * @csspart status - Used to style the status of the CardHeader */ @customElement({ tag: "ui5-card-header", @@ -67,16 +68,13 @@ import cardHeaderCss from "./generated/themes/CardHeader.css.js"; * Fired when the component is activated by mouse/tap or by using the Enter or Space key. *

* Note: The event would be fired only if the interactive property is set to true. - * @event sap.ui.webc.main.CardHeader#click * @public */ @event("click") -class CardHeader extends UI5Element { +class CardHeader extends UI5Element implements ICardHeader { /** * Defines the title text. - * @type {string} - * @defaultvalue "" - * @name sap.ui.webc.main.CardHeader.prototype.titleText + * @default "" * @public */ @property() @@ -84,9 +82,7 @@ class CardHeader extends UI5Element { /** * Defines the subtitle text. - * @type {string} - * @defaultvalue "" - * @name sap.ui.webc.main.CardHeader.prototype.subtitleText + * @default "" * @public */ @property() @@ -94,9 +90,7 @@ class CardHeader extends UI5Element { /** * Defines the status text. - * @type {string} - * @defaultvalue "" - * @name sap.ui.webc.main.CardHeader.prototype.status + * @default "" * @public */ @property() @@ -105,9 +99,7 @@ class CardHeader extends UI5Element { /** * Defines if the component would be interactive, * e.g gets hover effect, gets focus outline and click event is fired, when pressed. - * @type {boolean} - * @defaultvalue false - * @name sap.ui.webc.main.CardHeader.prototype.interactive + * @default false * @public */ @property({ type: Boolean }) @@ -117,8 +109,7 @@ class CardHeader extends UI5Element { * Define the aria-level attribute of the component * Note: If the interactive property is set, aria-level attribute is not rendered at all. * @private - * @type {sap.ui.webc.base.types.Integer} - * @defaultValue 3 + * @default 3 */ @property({ validator: Integer, defaultValue: 3 }) _ariaLevel!: number; @@ -128,9 +119,6 @@ class CardHeader extends UI5Element { /** * Defines an avatar image, displayed in the left most part of the header. - * @type {HTMLElement[]} - * @slot - * @name sap.ui.webc.main.CardHeader.prototype.avatar * @public */ @slot() @@ -138,9 +126,6 @@ class CardHeader extends UI5Element { /** * Defines an action, displayed in the right most part of the header. - * @type {HTMLElement[]} - * @slot - * @name sap.ui.webc.main.CardHeader.prototype.action * @public */ @slot() @@ -264,3 +249,6 @@ class CardHeader extends UI5Element { CardHeader.define(); export default CardHeader; +export type { + ICardHeader, +}; diff --git a/packages/main/src/Carousel.ts b/packages/main/src/Carousel.ts index b98dc8e3a550..a97c969feeab 100644 --- a/packages/main/src/Carousel.ts +++ b/packages/main/src/Carousel.ts @@ -96,22 +96,16 @@ type CarouselNavigateEventDetail = { * * CSS Shadow Parts allow developers to style elements inside the Shadow DOM. *
- * The ui5-carousel exposes the following CSS Shadow Parts: - *
    - *
  • content - Used to style the content of the component
    • - *
* *

ES6 Module Import

* * import "@ui5/webcomponents/dist/Carousel.js"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.Carousel - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-carousel + * @extends UI5Element * @since 1.0.0-rc.6 * @public + * @csspart content - Used to style the content of the component */ @customElement({ tag: "ui5-carousel", @@ -130,13 +124,15 @@ type CarouselNavigateEventDetail = { * when the user clicks on the navigation arrows or while resizing, * based on the items-per-page-l, items-per-page-m and items-per-page-s properties. * - * @event sap.ui.webc.main.Carousel#navigate * @param {Integer} selectedIndex the current selected index * @public * @since 1.0.0-rc.7 */ @event("navigate", { detail: { + /** + * @public + */ selectedIndex: { type: Integer }, }, }) @@ -144,9 +140,7 @@ type CarouselNavigateEventDetail = { class Carousel extends UI5Element { /** * Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa. - * @type {boolean} - * @name sap.ui.webc.main.Carousel.prototype.cyclic - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -154,9 +148,7 @@ class Carousel extends UI5Element { /** * Defines the number of items per page on small size (up to 640px). One item per page shown by default. - * @type {sap.ui.webc.base.types.Integer} - * @name sap.ui.webc.main.Carousel.prototype.itemsPerPageS - * @defaultvalue 1 + * @default 1 * @public */ @property({ validator: Integer, defaultValue: 1 }) @@ -164,9 +156,7 @@ class Carousel extends UI5Element { /** * Defines the number of items per page on medium size (from 640px to 1024px). One item per page shown by default. - * @type {sap.ui.webc.base.types.Integer} - * @name sap.ui.webc.main.Carousel.prototype.itemsPerPageM - * @defaultvalue 1 + * @default 1 * @public */ @property({ validator: Integer, defaultValue: 1 }) @@ -174,9 +164,7 @@ class Carousel extends UI5Element { /** * Defines the number of items per page on large size (more than 1024px). One item per page shown by default. - * @type {sap.ui.webc.base.types.Integer} - * @name sap.ui.webc.main.Carousel.prototype.itemsPerPageL - * @defaultvalue 1 + * @default 1 * @public */ @property({ validator: Integer, defaultValue: 1 }) @@ -188,10 +176,8 @@ class Carousel extends UI5Element { *

* Note: The navigation arrows are never displayed on touch devices. * In this case, the user can swipe to navigate through the items. - * @type {boolean} - * @name sap.ui.webc.main.Carousel.prototype.hideNavigationArrows * @since 1.0.0-rc.15 - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -200,10 +186,8 @@ class Carousel extends UI5Element { /** * Defines the visibility of the page indicator. * If set to true the page indicator will be hidden. - * @type {boolean} - * @name sap.ui.webc.main.Carousel.prototype.hidePageIndicator * @since 1.0.0-rc.15 - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -216,10 +200,8 @@ class Carousel extends UI5Element { *
  • Default - The page indicator will be visualized as dots if there are fewer than 9 pages. If there are more pages, the page indicator will switch to displaying the current page and the total number of pages. (e.g. X of Y)
    • *
  • Numeric - The page indicator will display the current page and the total number of pages. (e.g. X of Y)
    • * - * @type {sap.ui.webc.main.types.CarouselPageIndicatorStyle} - * @name sap.ui.webc.main.Carousel.prototype.pageIndicatorStyle * @since 1.10 - * @defaultvalue "Default" + * @default "Default" * @public */ @property({ type: CarouselPageIndicatorStyle, defaultValue: CarouselPageIndicatorStyle.Default }) @@ -227,10 +209,8 @@ class Carousel extends UI5Element { /** * Defines the carousel's background design. - * @type {sap.ui.webc.main.types.BackgroundDesign} - * @name sap.ui.webc.main.Carousel.prototype.backgroundDesign * @since 1.14 - * @defaultvalue "Translucent" + * @default "Translucent" * @public */ @property({ type: BackgroundDesign, defaultValue: BackgroundDesign.Translucent }) @@ -238,10 +218,8 @@ class Carousel extends UI5Element { /** * Defines the page indicator background design. - * @type {sap.ui.webc.main.types.BackgroundDesign} - * @name sap.ui.webc.main.Carousel.prototype.pageIndicatorBackgroundDesign * @since 1.14 - * @defaultvalue "Solid" + * @default "Solid" * @public */ @property({ type: BackgroundDesign, defaultValue: BackgroundDesign.Solid }) @@ -249,10 +227,8 @@ class Carousel extends UI5Element { /** * Defines the page indicator border design. - * @type {sap.ui.webc.main.types.BorderDesign} - * @name sap.ui.webc.main.Carousel.prototype.pageIndicatorBorderDesign * @since 1.14 - * @defaultvalue "Solid" + * @default "Solid" * @public */ @property({ type: BorderDesign, defaultValue: BorderDesign.Solid }) @@ -260,9 +236,7 @@ class Carousel extends UI5Element { /** * Defines the index of the initially selected item. - * @type {sap.ui.webc.base.types.Integer} - * @name sap.ui.webc.main.Carousel.prototype._selectedIndex - * @defaultvalue 0 + * @default 0 * @private */ @property({ validator: Integer, defaultValue: 0 }) @@ -276,9 +250,7 @@ class Carousel extends UI5Element { *
  • Content - the arrows are placed on the sides of the current page.
    • *
  • Navigation - the arrows are placed on the sides of the page indicator.
    • * - * @type {sap.ui.webc.main.types.CarouselArrowsPlacement} - * @name sap.ui.webc.main.Carousel.prototype.arrowsPlacement - * @defaultvalue "Content" + * @default "Content" * @public */ @property({ type: CarouselArrowsPlacement, defaultValue: CarouselArrowsPlacement.Content }) @@ -314,9 +286,6 @@ class Carousel extends UI5Element { /** * Defines the content of the component. - * @type {HTMLElement[]} - * @slot - * @name sap.ui.webc.main.Carousel.prototype.default * @public */ @slot({ "default": true, type: HTMLElement, individualSlots: true }) @@ -543,13 +512,11 @@ class Carousel extends UI5Element { /** * Changes the currently displayed page. - * @param {Integer} itemIndex The index of the target page + * @param itemIndex The index of the target page * @since 1.0.0-rc.15 - * @method - * @name sap.ui.webc.main.Carousel#navigateTo * @public */ - navigateTo(itemIndex: number) { + navigateTo(itemIndex: number) : void { this._resizing = false; this._selectedIndex = itemIndex; } @@ -733,11 +700,10 @@ class Carousel extends UI5Element { /** * The indices of the currently visible items of the component. * @public - * @readonly * @since 1.0.0-rc.15 - * @returns {Integer[]} the indices of the visible items + * @default [] */ - get visibleItemsIndices() { + get visibleItemsIndices() : Array { const visibleItemsIndices: Array = []; this.items.forEach((item, index) => { diff --git a/packages/main/src/Dialog.ts b/packages/main/src/Dialog.ts index 353cde68fda1..41f33cdbb1e1 100644 --- a/packages/main/src/Dialog.ts +++ b/packages/main/src/Dialog.ts @@ -75,16 +75,6 @@ const ICON_PER_STATE: Record = { * The stretch property can be used to stretch the * ui5-dialog on full screen. * - *

    CSS Shadow Parts

    - * - * CSS Shadow Parts allow developers to style elements inside the Shadow DOM. - *
    - * The ui5-dialog exposes the following CSS Shadow Parts: - *
      - *
    • header - Used to style the header of the component
      • - *
    • content - Used to style the content of the component
      • - *
    • footer - Used to style the footer of the component
      • - *
    * Note: When a ui5-bar is used in the header or in the footer, you should remove the default dialog's paddings. *
    * For more information see the sample "Bar in Header/Footer". @@ -101,11 +91,11 @@ const ICON_PER_STATE: Record = { * This might break z-index management. * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.Dialog - * @extends sap.ui.webc.main.Popup - * @tagname ui5-dialog + * @extends Popup * @public + * @csspart header - Used to style the header of the component + * @csspart content - Used to style the content of the component + * @csspart footer - Used to style the footer of the component */ @customElement({ tag: "ui5-dialog", @@ -125,9 +115,7 @@ class Dialog extends Popup { *

    * Note: If header slot is provided, the headerText is ignored. * - * @type {string} - * @name sap.ui.webc.main.Dialog.prototype.headerText - * @defaultvalue "" + * @default "" * @public */ @property() @@ -139,9 +127,7 @@ class Dialog extends Popup { * Note: The component will be stretched to approximately * 90% of the viewport. * - * @type {boolean} - * @name sap.ui.webc.main.Dialog.prototype.stretch - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -156,9 +142,7 @@ class Dialog extends Popup { * Note: This property overrides the default HTML "draggable" attribute native behavior. * When "draggable" is set to true, the native browser "draggable" * behavior is prevented and only the Dialog custom logic ("draggable by its header") works. - * @type {boolean} - * @name sap.ui.webc.main.Dialog.prototype.draggable - * @defaultvalue false + * @default false * @since 1.0.0-rc.9 * @public */ @@ -173,9 +157,7 @@ class Dialog extends Popup { * Note: The component can be resizable only in desktop mode. *
    * Note: Upon resizing, externally defined height and width styling will be ignored. - * @type {boolean} - * @name sap.ui.webc.main.Dialog.prototype.resizable - * @defaultvalue false + * @default false * @since 1.0.0-rc.10 * @public */ @@ -186,9 +168,7 @@ class Dialog extends Popup { * Defines the state of the Dialog. *
    Note: If "Error" and "Warning" state is set, it will change the * accessibility role to "alertdialog", if the accessibleRole property is set to "Dialog". - * @type {sap.ui.webc.base.types.ValueState} - * @name sap.ui.webc.main.Dialog.prototype.state - * @defaultvalue "None" + * @default "None" * @public * @since 1.0.0-rc.15 */ @@ -235,9 +215,6 @@ class Dialog extends Popup { * Note: If header slot is provided, the labelling of the dialog is a responsibility of the application developer. * accessibleName should be used. * - * @type {HTMLElement[]} - * @name sap.ui.webc.main.Dialog.prototype.header - * @slot * @public */ @slot() @@ -248,9 +225,6 @@ class Dialog extends Popup { *

    * Note: When a ui5-bar is used in the footer, you should remove the default dialog's paddings. * - * @type {HTMLElement[]} - * @name sap.ui.webc.main.Dialog.prototype.footer - * @slot * @public */ @slot() @@ -283,12 +257,9 @@ class Dialog extends Popup { /** * Shows the dialog. * - * @param {boolean} [preventInitialFocus=false] Prevents applying the focus inside the popup + * @param [preventInitialFocus=false] Prevents applying the focus inside the popup * @public - * @method - * @name sap.ui.webc.main.Dialog#show - * @async - * @returns {Promise} Resolves when the dialog is open + * @returns Resolves when the dialog is open */ async show(preventInitialFocus = false) { await super._open(preventInitialFocus); diff --git a/packages/main/src/Interfaces.ts b/packages/main/src/Interfaces.ts index 3be4bb87af42..bd300b10ef8b 100644 --- a/packages/main/src/Interfaces.ts +++ b/packages/main/src/Interfaces.ts @@ -1,3 +1,4 @@ +import { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js"; import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; /** @@ -14,16 +15,8 @@ interface IAvatar { * * @public */ -interface IButton extends HTMLElement { } - -/** - * Interface for components that may be slotted inside ui5-card as header - * - * @name sap.ui.webc.main.ICardHeader - * @interface - * @public - */ -const ICardHeader = "sap.ui.webc.main.ICardHeader"; +// eslint-disable-next-line @typescript-eslint/no-empty-interface +interface IButton extends HTMLElement, ITabbable { } /** * Interface for components that may be used as dates inside ui5-calendar @@ -123,15 +116,6 @@ interface IOption extends UI5Element { displayText?: string, } -/** - * Interface for components that may be slotted inside ui5-tabcontainer - * - * @name sap.ui.webc.main.ITab - * @interface - * @public - */ -const ITab = "sap.ui.webc.main.ITab"; - /** * Interface for components that may be slotted inside a ui5-table as rows * @@ -182,7 +166,6 @@ interface ITreeItem extends HTMLElement { export { IAvatar, IButton, - ICardHeader, ICalendarDate, IColorPaletteItem, IComboBoxItem, @@ -193,7 +176,6 @@ export { IMultiComboBoxItem, ISegmentedButtonItem, IOption, - ITab, ITableCell, ITableColumn, ITableRow, diff --git a/packages/main/src/Label.ts b/packages/main/src/Label.ts index 4bfb3421432c..f088db76940b 100644 --- a/packages/main/src/Label.ts +++ b/packages/main/src/Label.ts @@ -32,11 +32,9 @@ import labelCss from "./generated/themes/Label.css.js"; * import "@ui5/webcomponents/dist/Label"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.Label - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-label + * @extends UI5Element * @public + * @slot {Node[]} default - Defines the text of the component. */ @customElement({ tag: "ui5-label", @@ -51,9 +49,7 @@ class Label extends UI5Element { *

    * Note: Can be used with both ui5-input and native input. * - * @type {string} - * @name sap.ui.webc.main.Label.prototype.for - * @defaultvalue "" + * @default "" * @public */ @property() @@ -63,9 +59,7 @@ class Label extends UI5Element { * Defines whether colon is added to the component text. *

    * Note: Usually used in forms. - * @name sap.ui.webc.main.Label.prototype.showColon - * @type {boolean} - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -78,9 +72,7 @@ class Label extends UI5Element { * In that case the required property of * the corresponding input should also be set. * - * @name sap.ui.webc.main.Label.prototype.required - * @type {boolean} - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -90,9 +82,7 @@ class Label extends UI5Element { * Defines how the text of a component will be displayed when there is not enough space. *
    Note: for option "Normal" the text will wrap and the words will not be broken based on hyphenation. * - * @name sap.ui.webc.main.Label.prototype.wrappingType - * @type {sap.ui.webc.main.types.WrappingType} - * @defaultvalue "None" + * @default "None" * @public */ @property({ type: WrappingType, defaultValue: WrappingType.None }) @@ -104,16 +94,6 @@ class Label extends UI5Element { Label.i18nBundle = await getI18nBundle("@ui5/webcomponents"); } - /** - * Defines the text of the component. - *
    Note: Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design. - * - * @type {Node[]} - * @slot - * @public - * @name sap.ui.webc.main.Label.prototype.default - */ - _onclick() { if (!this.for) { return; diff --git a/packages/main/src/Popover.ts b/packages/main/src/Popover.ts index f754ba49f0ef..6cef230bbe6c 100644 --- a/packages/main/src/Popover.ts +++ b/packages/main/src/Popover.ts @@ -64,28 +64,17 @@ type CalculatedPlacement = { * or selects an action within the popover. You can prevent this with the * modal property. * - *

    CSS Shadow Parts

    - * - * CSS Shadow Parts allow developers to style elements inside the Shadow DOM. - *
    - * The ui5-popover exposes the following CSS Shadow Parts: - *
      - *
    • header - Used to style the header of the component
      • - *
    • content - Used to style the content of the component
      • - *
    • footer - Used to style the footer of the component
      • - *
    - * *

    ES6 Module Import

    * * import "@ui5/webcomponents/dist/Popover.js"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.Popover - * @extends sap.ui.webc.main.Popup - * @tagname ui5-popover + * @extends Popup * @since 1.0.0-rc.6 * @public + * @csspart header - Used to style the header of the component + * @csspart content - Used to style the content of the component + * @csspart footer - Used to style the footer of the component */ @customElement({ tag: "ui5-popover", @@ -102,9 +91,7 @@ class Popover extends Popup { *

    * Note: If header slot is provided, the headerText is ignored. * - * @type {string} - * @name sap.ui.webc.main.Popover.prototype.headerText - * @defaultvalue "" + * @default "" * @public */ @property() @@ -113,9 +100,7 @@ class Popover extends Popup { /** * Determines on which side the component is placed at. * - * @type {sap.ui.webc.main.types.PopoverPlacementType} - * @name sap.ui.webc.main.Popover.prototype.placementType - * @defaultvalue "Right" + * @default "Right" * @public */ @property({ type: PopoverPlacementType, defaultValue: PopoverPlacementType.Right }) @@ -124,9 +109,7 @@ class Popover extends Popup { /** * Determines the horizontal alignment of the component. * - * @type {sap.ui.webc.main.types.PopoverHorizontalAlign} - * @name sap.ui.webc.main.Popover.prototype.horizontalAlign - * @defaultvalue "Center" + * @default "Center" * @public */ @property({ type: PopoverHorizontalAlign, defaultValue: PopoverHorizontalAlign.Center }) @@ -135,9 +118,7 @@ class Popover extends Popup { /** * Determines the vertical alignment of the component. * - * @type {sap.ui.webc.main.types.PopoverVerticalAlign} - * @name sap.ui.webc.main.Popover.prototype.verticalAlign - * @defaultvalue "Center" + * @default "Center" * @public */ @property({ type: PopoverVerticalAlign, defaultValue: PopoverVerticalAlign.Center }) @@ -148,9 +129,7 @@ class Popover extends Popup { * clicking/tapping outside of the popover. * If enabled, it blocks any interaction with the background. * - * @type {boolean} - * @name sap.ui.webc.main.Popover.prototype.modal - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -158,9 +137,7 @@ class Popover extends Popup { /** * Defines whether the block layer will be shown if modal property is set to true. - * @type {boolean} - * @name sap.ui.webc.main.Popover.prototype.hideBackdrop - * @defaultvalue false + * @default false * @public * @since 1.0.0-rc.10 */ @@ -170,9 +147,7 @@ class Popover extends Popup { /** * Determines whether the component arrow is hidden. * - * @type {boolean} - * @name sap.ui.webc.main.Popover.prototype.hideArrow - * @defaultvalue false + * @default false * @public * @since 1.0.0-rc.15 */ @@ -183,9 +158,7 @@ class Popover extends Popup { * Determines if there is no enough space, the component can be placed * over the target. * - * @type {boolean} - * @name sap.ui.webc.main.Popover.prototype.allowTargetOverlap - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -194,9 +167,7 @@ class Popover extends Popup { /** * Defines the ID or DOM Reference of the element that the popover is shown at * @public - * @type {sap.ui.webc.base.types.DOMReference} - * @name sap.ui.webc.main.Popover.prototype.opener - * @defaultvalue undefined + * @default undefined * @since 1.2.0 */ @property({ validator: DOMReference }) @@ -205,8 +176,7 @@ class Popover extends Popup { /** * Defines whether the content is scrollable. * - * @type {boolean} - * @defaultvalue false + * @default false * @private */ @property({ type: Boolean }) @@ -245,9 +215,6 @@ class Popover extends Popup { /** * Defines the header HTML Element. * - * @type {HTMLElement[]} - * @name sap.ui.webc.main.Popover.prototype.header - * @slot * @public */ @slot({ type: HTMLElement }) @@ -256,9 +223,6 @@ class Popover extends Popup { /** * Defines the footer HTML Element. * - * @type {HTMLElement[]} - * @name sap.ui.webc.main.Popover.prototype.footer - * @slot * @public */ @slot({ type: HTMLElement }) @@ -320,16 +284,12 @@ class Popover extends Popup { /** * Shows the popover. - * @param {HTMLElement} opener the element that the popover is shown at - * @param {boolean} [preventInitialFocus=false] prevents applying the focus inside the popover + * @param opener the element that the popover is shown at + * @param [preventInitialFocus=false] prevents applying the focus inside the popover * @public - * @async - * @method - * @name sap.ui.webc.main.Popover#showAt - * @async - * @returns {Promise} Resolved when the popover is open + * @returns Resolved when the popover is open */ - async showAt(opener: HTMLElement, preventInitialFocus = false) { + async showAt(opener: HTMLElement, preventInitialFocus = false): Promise { if (!opener || this.opened) { return; } @@ -479,8 +439,8 @@ class Popover extends Popup { * Adjust the desired top position to compensate for shift of the screen * caused by opened keyboard on iOS which affects all elements with position:fixed. * @private - * @param {int} top The target top in px. - * @returns {int} The adjusted top in px. + * @param top The target top in px. + * @returns The adjusted top in px. */ _adjustForIOSKeyboard(top: number): number { if (!isIOS()) { @@ -623,12 +583,12 @@ class Popover extends Popup { * Calculates the position for the arrow. * @private * @param targetRect BoundingClientRect of the target element - * @param {{width: number, height: number}} popoverSize Width and height of the popover + * @param popoverSize Width and height of the popover * @param left Left offset of the popover * @param top Top offset of the popover * @param isVertical If the popover is positioned vertically to the target element - * @param {number} borderRadius Value of the border-radius property - * @returns {{x: number, y: number}} Arrow's coordinates + * @param borderRadius Value of the border-radius property + * @returns Arrow's coordinates */ getArrowPosition(targetRect: DOMRect, popoverSize: PopoverSize, left: number, top: number, isVertical: boolean, borderRadius: number): ArrowPosition { const horizontalAlign = this._actualHorizontalAlign; diff --git a/packages/main/src/Popup.ts b/packages/main/src/Popup.ts index 5b4fc983f0a8..5f6baec3fbce 100644 --- a/packages/main/src/Popup.ts +++ b/packages/main/src/Popup.ts @@ -73,9 +73,7 @@ type PopupBeforeCloseEventDetail = { * - afterContent (lower part, useful for footer/action buttons) * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.Popup - * @extends sap.ui.webc.base.UI5Element + * @extends UI5Element * @public */ @customElement({ @@ -89,7 +87,6 @@ type PopupBeforeCloseEventDetail = { * Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. This event does not bubble. * * @public - * @event sap.ui.webc.main.Popup#before-open * @allowPreventDefault */ @event("before-open") @@ -98,7 +95,6 @@ type PopupBeforeCloseEventDetail = { * Fired after the component is opened. This event does not bubble. * * @public - * @event sap.ui.webc.main.Popup#after-open */ @event("after-open") @@ -106,11 +102,13 @@ type PopupBeforeCloseEventDetail = { * Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. This event does not bubble. * * @public - * @event sap.ui.webc.main.Popup#before-close * @allowPreventDefault * @param {boolean} escPressed Indicates that ESC key has triggered the event. */ @event("before-close", { + /** + * @public + */ escPressed: { type: Boolean }, }) @@ -118,7 +116,6 @@ type PopupBeforeCloseEventDetail = { * Fired after the component is closed. This event does not bubble. * * @public - * @event sap.ui.webc.main.Popup#after-close */ @event("after-close") @@ -126,16 +123,13 @@ type PopupBeforeCloseEventDetail = { * Fired whenever the popup content area is scrolled * * @private - * @event sap.ui.webc.main.Popup#scroll */ @event("scroll") abstract class Popup extends UI5Element { /** * Defines the ID of the HTML Element, which will get the initial focus. * - * @type {string} - * @name sap.ui.webc.main.Popup.prototype.initialFocus - * @defaultvalue "" + * @default "" * @public */ @property() @@ -144,9 +138,7 @@ abstract class Popup extends UI5Element { /** * Defines if the focus should be returned to the previously focused element, * when the popup closes. - * @type {boolean} - * @name sap.ui.webc.main.Popup.prototype.preventFocusRestore - * @defaultvalue false + * @default false * @public * @since 1.0.0-rc.8 */ @@ -156,9 +148,7 @@ abstract class Popup extends UI5Element { /** * Indicates if the element is open * @public - * @type {boolean} - * @name sap.ui.webc.main.Popup.prototype.open - * @defaultvalue false + * @default false * @since 1.2.0 */ @property({ type: Boolean }) @@ -167,8 +157,7 @@ abstract class Popup extends UI5Element { /** * Indicates if the element is already open * @private - * @type {boolean} - * @defaultvalue false + * @default false */ @property({ type: Boolean, noAttribute: true }) opened!: boolean; @@ -176,9 +165,7 @@ abstract class Popup extends UI5Element { /** * Defines the accessible name of the component. * - * @type {string} - * @name sap.ui.webc.main.Popup.prototype.accessibleName - * @defaultvalue undefined + * @default undefined * @public * @since 1.0.0-rc.15 */ @@ -188,9 +175,7 @@ abstract class Popup extends UI5Element { /** * Defines the IDs of the elements that label the component. * - * @type {string} - * @name sap.ui.webc.main.Popup.prototype.accessibleNameRef - * @defaultvalue "" + * @default "" * @public * @since 1.1.0 */ @@ -200,9 +185,7 @@ abstract class Popup extends UI5Element { /** * Allows setting a custom role. * - * @type {sap.ui.webc.main.types.PopupAccessibleRole} - * @name sap.ui.webc.main.Popup.prototype.accessibleRole - * @defaultvalue "Dialog" + * @default "Dialog" * @public * @since 1.10.0 */ @@ -212,7 +195,6 @@ abstract class Popup extends UI5Element { /** * Defines the current media query size. * - * @type {string} * @private */ @property() @@ -233,17 +215,13 @@ abstract class Popup extends UI5Element { * This property is calculated automatically * * @private - * @type {boolean} - * @defaultvalue false + * @default false */ @property({ type: Boolean, noAttribute: true }) isTopModalPopup!: boolean; /** * Defines the content of the Popup. - * @type {HTMLElement[]} - * @name sap.ui.webc.main.Popup.prototype.default - * @slot content * @public */ @slot({ type: HTMLElement, "default": true }) @@ -414,12 +392,9 @@ abstract class Popup extends UI5Element { * Focuses the element denoted by initialFocus, if provided, * or the first focusable element otherwise. * @public - * @method - * @name sap.ui.webc.main.Popup#applyFocus - * @async - * @returns {Promise} Promise that resolves when the focus is applied + * @returns Promise that resolves when the focus is applied */ - async applyFocus() { + async applyFocus(): Promise { await this._waitForDomRef(); if (this.getRootNode() === this) { @@ -446,11 +421,8 @@ abstract class Popup extends UI5Element { /** * Tells if the component is opened * @public - * @method - * @name sap.ui.webc.main.Popup#isOpen - * @returns {boolean} */ - isOpen() { + isOpen() : boolean { return this.opened; } @@ -515,11 +487,8 @@ abstract class Popup extends UI5Element { /** * Closes the popup. * @public - * @method - * @name sap.ui.webc.main.Popup#close - * @returns {void} */ - close(escPressed = false, preventRegistryUpdate = false, preventFocusRestore = false) { + close(escPressed = false, preventRegistryUpdate = false, preventFocusRestore = false): void { if (!this.opened) { return; } @@ -590,8 +559,6 @@ abstract class Popup extends UI5Element { * Implement this getter with relevant logic regarding the modality of the popup (e.g. based on a public property) * * @protected - * @abstract - * @returns {boolean} */ abstract get isModal(): boolean @@ -599,8 +566,6 @@ abstract class Popup extends UI5Element { * Implement this getter with relevant logic in order to hide the block layer (f.e. based on a public property) * * @protected - * @abstract - * @returns {boolean} */ abstract get shouldHideBackdrop(): boolean @@ -608,14 +573,11 @@ abstract class Popup extends UI5Element { * Return the ID of an element in the shadow DOM that is going to label this popup * * @protected - * @abstract - * @returns {string | undefined} */ abstract get _ariaLabelledBy(): string | undefined /** * Ensures ariaLabel is never null or empty string - * @returns {string | undefined} * @protected */ get _ariaLabel() { diff --git a/packages/main/src/RadioButton.ts b/packages/main/src/RadioButton.ts index 2d4f3594fcb9..5e84a250c01b 100644 --- a/packages/main/src/RadioButton.ts +++ b/packages/main/src/RadioButton.ts @@ -69,10 +69,7 @@ let activeRadio: RadioButton; * import "@ui5/webcomponents/dist/RadioButton"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.RadioButton - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-radio-button + * @extends UI5Element * @public */ @customElement({ @@ -86,7 +83,6 @@ let activeRadio: RadioButton; /** * Fired when the component checked state changes. * - * @event sap.ui.webc.main.RadioButton#change * @public * @since 1.0.0-rc.15 */ @@ -98,9 +94,7 @@ class RadioButton extends UI5Element implements IFormElement { *

    * Note: A disabled component is completely noninteractive. * - * @type {boolean} - * @defaultvalue false - * @name sap.ui.webc.main.RadioButton.prototype.disabled + * @default false * @public */ @property({ type: Boolean }) @@ -112,9 +106,7 @@ class RadioButton extends UI5Element implements IFormElement { * Note: A read-only component is not editable, * but still provides visual feedback upon user interaction. * - * @type {boolean} - * @defaultvalue false - * @name sap.ui.webc.main.RadioButton.prototype.readonly + * @default false * @public */ @property({ type: Boolean }) @@ -123,9 +115,7 @@ class RadioButton extends UI5Element implements IFormElement { /** * Defines whether the component is required. * - * @type {boolean} - * @defaultvalue false - * @name sap.ui.webc.main.RadioButton.prototype.required + * @default false * @public * @since 1.9.0 */ @@ -139,11 +129,9 @@ class RadioButton extends UI5Element implements IFormElement { * either by clicking/tapping on the component, * or by using the Space or Enter key. * - * @type {boolean} - * @defaultvalue false + * @default false * @formEvents change * @formProperty - * @name sap.ui.webc.main.RadioButton.prototype.checked * @public * @since 1.0.0-rc.15 */ @@ -153,9 +141,7 @@ class RadioButton extends UI5Element implements IFormElement { /** * Defines the text of the component. * - * @type {string} - * @defaultvalue "" - * @name sap.ui.webc.main.RadioButton.prototype.text + * @default "" * @public */ @property() @@ -164,9 +150,7 @@ class RadioButton extends UI5Element implements IFormElement { /** * Defines the value state of the component. * - * @type {sap.ui.webc.base.types.ValueState} - * @defaultvalue "None" - * @name sap.ui.webc.main.RadioButton.prototype.valueState + * @default "None" * @public */ @property({ type: ValueState, defaultValue: ValueState.None }) @@ -193,9 +177,7 @@ class RadioButton extends UI5Element implements IFormElement { * will be created inside the component so that it can be submitted as * part of an HTML form. * - * @type {string} - * @defaultvalue "" - * @name sap.ui.webc.main.RadioButton.prototype.name + * @default "" * @public */ @property() @@ -209,9 +191,7 @@ class RadioButton extends UI5Element implements IFormElement { * Important: For the value property to have effect, you must add the following import to your project: * import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js"; * - * @type {string} - * @defaultvalue "" - * @name sap.ui.webc.main.RadioButton.prototype.value + * @default "" * @public */ @property() @@ -221,9 +201,7 @@ class RadioButton extends UI5Element implements IFormElement { * Defines whether the component text wraps when there is not enough space. *
    Note: for option "Normal" the text will wrap and the words will not be broken based on hyphenation. * - * @type {sap.ui.webc.main.types.WrappingType} - * @defaultvalue "None" - * @name sap.ui.webc.main.RadioButton.prototype.wrappingType + * @default "None" * @public */ @property({ type: WrappingType, defaultValue: WrappingType.None }) @@ -232,9 +210,7 @@ class RadioButton extends UI5Element implements IFormElement { /** * Defines the accessible ARIA name of the component. * - * @type {string} - * @defaultvalue "" - * @name sap.ui.webc.main.RadioButton.prototype.accessibleName + * @default "" * @public * @since 1.6.0 */ @@ -244,9 +220,7 @@ class RadioButton extends UI5Element implements IFormElement { /** * Defines the IDs of the elements that label the component. * - * @type {string} - * @defaultvalue "" - * @name sap.ui.webc.main.RadioButton.prototype.accessibleNameRef + * @default "" * @public * @since 1.1.0 */ @@ -258,7 +232,7 @@ class RadioButton extends UI5Element implements IFormElement { /** * Defines the active state (pressed or not) of the component. - * @defaultvalue false + * @default false * @private */ @property({ type: Boolean }) @@ -267,8 +241,6 @@ class RadioButton extends UI5Element implements IFormElement { /** * The slot is used to render native input HTML element within Light DOM to enable form submit, * when name property is set. - * @type {HTMLElement[]} - * @slot * @private */ @slot() diff --git a/packages/main/src/ResponsivePopover.ts b/packages/main/src/ResponsivePopover.ts index a760e6e65c6f..8c0acd9145cf 100644 --- a/packages/main/src/ResponsivePopover.ts +++ b/packages/main/src/ResponsivePopover.ts @@ -30,24 +30,13 @@ type ResponsivePopoverBeforeCloseEventDetail = PopupBeforeCloseEventDetail; *

    Usage

    * Use it when you want to make sure that all the content is visible on any device. * - *

    CSS Shadow Parts

    - * - * CSS Shadow Parts allow developers to style elements inside the Shadow DOM. - *
    - * The ui5-responsive-popover exposes the following CSS Shadow Parts: - *
      - *
    • header - Used to style the header of the component
      • - *
    • content - Used to style the content of the component
      • - *
    • footer - Used to style the footer of the component
      • - *
    - * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.ResponsivePopover - * @extends sap.ui.webc.main.Popover - * @tagname ui5-responsive-popover + * @extends Popover * @since 1.0.0-rc.6 * @public + * @csspart header - Used to style the header of the component + * @csspart content - Used to style the content of the component + * @csspart footer - Used to style the footer of the component */ @customElement({ tag: "ui5-responsive-popover", @@ -81,8 +70,7 @@ class ResponsivePopover extends Popover { * Note: If you are using the header slot, this property will have no effect * * @private - * @type {boolean} - * @defaultvalue false + * @default false * @since 1.0.0-rc.16 */ @property({ type: Boolean }) @@ -96,15 +84,12 @@ class ResponsivePopover extends Popover { /** * Shows popover on desktop and dialog on mobile. - * @param {HTMLElement} opener the element that the popover is shown at - * @param {boolean} [preventInitialFocus=false] Prevents applying the focus inside the popup + * @param opener the element that the popover is shown at + * @param [preventInitialFocus=false] Prevents applying the focus inside the popup * @public - * @async - * @method - * @name sap.ui.webc.main.ResponsivePopover#showAt - * @returns {Promise} Resolves when the responsive popover is open + * @returns Resolves when the responsive popover is open */ - async showAt(opener: HTMLElement, preventInitialFocus = false) { + async showAt(opener: HTMLElement, preventInitialFocus = false): Promise { if (!isPhone()) { await super.showAt(opener, preventInitialFocus); } else { @@ -122,11 +107,8 @@ class ResponsivePopover extends Popover { /** * Closes the popover/dialog. * @public - * @method - * @name sap.ui.webc.main.ResponsivePopover#close - * @returns {void} */ - close(escPressed = false, preventRegistryUpdate = false, preventFocusRestore = false) { + close(escPressed = false, preventRegistryUpdate = false, preventFocusRestore = false) : void { if (!isPhone()) { super.close(escPressed, preventRegistryUpdate, preventFocusRestore); } else { @@ -145,11 +127,8 @@ class ResponsivePopover extends Popover { /** * Tells if the responsive popover is open. * @public - * @method - * @name sap.ui.webc.main.ResponsivePopover#isOpen - * @returns {boolean} */ - isOpen() { + isOpen() : boolean { return (isPhone() && this._dialog) ? this._dialog.isOpen() : super.isOpen(); } diff --git a/packages/main/src/Tab.ts b/packages/main/src/Tab.ts index debe3c6e965e..b44889af8113 100644 --- a/packages/main/src/Tab.ts +++ b/packages/main/src/Tab.ts @@ -53,11 +53,9 @@ const DESIGN_DESCRIPTIONS = { * * @abstract * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.Tab - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-tab - * @implements sap.ui.webc.main.ITab + * @extends UI5Element + * @implements {ITab} + * @implements {ITabbable} * @public */ @customElement({ @@ -75,30 +73,24 @@ const DESIGN_DESCRIPTIONS = { class Tab extends UI5Element implements ITab, ITabbable { /** * The text to be displayed for the item. - * @type {string} - * @defaultvalue "" + * @default "" * @public - * @name sap.ui.webc.main.Tab.prototype.text */ @property() text!: string; /** * Disabled tabs can't be selected. - * @type {boolean} - * @defaultvalue false + * @default false * @public - * @name sap.ui.webc.main.Tab.prototype.disabled */ @property({ type: Boolean }) disabled!: boolean; /** * Represents the "additionalText" text, which is displayed in the tab. In the cases when in the same time there are tabs with icons and tabs without icons, if a tab has no icon the "additionalText" is displayed larger. - * @type {string} - * @defaultvalue "" + * @default "" * @public - * @name sap.ui.webc.main.Tab.prototype.additionalText */ @property() additionalText!: string; @@ -108,10 +100,8 @@ class Tab extends UI5Element implements ITab, ITabbable { * The SAP-icons font provides numerous built-in icons. * See all the available icons in the Icon Explorer. * - * @type {string} - * @defaultvalue "" + * @default "" * @public - * @name sap.ui.webc.main.Tab.prototype.icon */ @property() icon!: string; @@ -131,10 +121,8 @@ class Tab extends UI5Element implements ITab, ITabbable { * *

    * Note: The design depends on the current theme. - * @type {sap.ui.webc.main.types.SemanticColor} - * @defaultvalue "Default" + * @default "Default" * @public - * @name sap.ui.webc.main.Tab.prototype.design */ @property({ type: SemanticColor, defaultValue: SemanticColor.Default }) design!: `${SemanticColor}`; @@ -142,10 +130,8 @@ class Tab extends UI5Element implements ITab, ITabbable { /** * Specifies if the component is selected. * - * @type {boolean} - * @defaultvalue false + * @default false * @public - * @name sap.ui.webc.main.Tab.prototype.selected */ @property({ type: Boolean }) selected!: boolean; @@ -162,10 +148,7 @@ class Tab extends UI5Element implements ITab, ITabbable { /** * Holds the content associated with this tab. * - * @type {Node[]} * @public - * @slot - * @name sap.ui.webc.main.Tab.prototype.default */ @slot({ type: Node, @@ -182,10 +165,7 @@ class Tab extends UI5Element implements ITab, ITabbable { *

    * Note: Use ui5-tab and ui5-tab-separator for the intended design. * - * @type {sap.ui.webc.main.ITab[]} * @public - * @slot subTabs - * @name sap.ui.webc.main.Tab.prototype.subTabs */ @slot({ type: HTMLElement, @@ -271,12 +251,10 @@ class Tab extends UI5Element implements ITab, ITabbable { * Note: Tabs, placed in the subTabs slot of other tabs are not shown in the header. Calling this method on such tabs will return null. * Note: If you need a DOM ref to the tab content please use the getDomRef method. * - * @function * @public - * @name sap.ui.webc.main.Tab.prototype.getTabInStripDomRef * @since 1.0.0-rc.16 */ - getTabInStripDomRef() { + getTabInStripDomRef() : ITab | null { if (this._getElementInStrip) { return this._getElementInStrip(); } diff --git a/packages/main/src/TabContainer.ts b/packages/main/src/TabContainer.ts index 492e4867d13a..2531070e5783 100644 --- a/packages/main/src/TabContainer.ts +++ b/packages/main/src/TabContainer.ts @@ -46,6 +46,7 @@ import SemanticColor from "./types/SemanticColor.js"; import TabContainerBackgroundDesign from "./types/TabContainerBackgroundDesign.js"; import TabLayout from "./types/TabLayout.js"; import TabsOverflowMode from "./types/TabsOverflowMode.js"; +import type { IButton } from "./Interfaces.js"; // Templates import TabContainerTemplate from "./generated/templates/TabContainerTemplate.lit.js"; @@ -122,15 +123,6 @@ interface TabContainerTabInOverflow extends CustomListItem { * to indicate the level of each nested tab. When a tab has both sub tabs and own content its click area is split * to allow the user to display the content or alternatively to expand / collapse the list of sub tabs. * - *

    CSS Shadow Parts

    - * - * CSS Shadow Parts allow developers to style elements inside the Shadow DOM. - *
    - * The ui5-tabcontainer exposes the following CSS Shadow Parts: - *
      - *
    • content - Used to style the content of the component
      • - *
    - * *

    Keyboard Handling

    * *

    Fast Navigation

    @@ -148,12 +140,9 @@ interface TabContainerTabInOverflow extends CustomListItem { * import "@ui5/webcomponents/dist/TabSeparator"; (for ui5-tab-separator) * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.TabContainer - * @extends sap.ui.webc.base.UI5Element - * @appenddocs sap.ui.webc.main.Tab sap.ui.webc.main.TabSeparator - * @tagname ui5-tabcontainer + * @extends UI5Element * @public + * @csspart content - Used to style the content of the component */ @customElement({ tag: "ui5-tabcontainer", @@ -174,7 +163,6 @@ interface TabContainerTabInOverflow extends CustomListItem { /** * Fired when a tab is selected. * - * @event sap.ui.webc.main.TabContainer#tab-select * @param {HTMLElement} tab The selected tab. * @param {Integer} tabIndex The selected tab index in the flattened array of all tabs and their subTabs, provided by the allItems getter. * @public @@ -182,7 +170,13 @@ interface TabContainerTabInOverflow extends CustomListItem { */ @event("tab-select", { detail: { + /** + * @public + */ tab: { type: HTMLElement }, + /** + * @public + */ tabIndex: { type: Number }, }, }) @@ -191,9 +185,7 @@ class TabContainer extends UI5Element { * Defines whether the tabs are in a fixed state that is not * expandable/collapsible by user interaction. * - * @type {boolean} - * @name sap.ui.webc.main.TabContainer.prototype.fixed - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -202,9 +194,7 @@ class TabContainer extends UI5Element { /** * Defines whether the tab content is collapsed. * - * @type {boolean} - * @name sap.ui.webc.main.TabContainer.prototype.collapsed - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -216,9 +206,7 @@ class TabContainer extends UI5Element { * The overflow select list represents a list, where all tabs are displayed * so that it's easier for the user to select a specific tab. * - * @type {boolean} - * @name sap.ui.webc.main.TabContainer.prototype.showOverflow - * @defaultvalue false + * @default false * @public * @deprecated Since the introduction of TabsOverflowMode, overflows will always be visible if there is not enough space for all tabs, * all hidden tabs are moved to a select list in the respective overflows and are accessible via the overflowButton and / or startOverflowButton slots. @@ -234,9 +222,7 @@ class TabContainer extends UI5Element { * The content and the additionalText would be displayed vertically by default, * but when set to Inline, they would be displayed horizontally. * - * @type {sap.ui.webc.main.types.TabLayout} - * @name sap.ui.webc.main.TabContainer.prototype.tabLayout - * @defaultvalue "Standard" + * @default "Standard" * @public */ @property({ type: TabLayout, defaultValue: TabLayout.Standard }) @@ -251,9 +237,7 @@ class TabContainer extends UI5Element { * Only one overflow at the end would be displayed by default, * but when set to StartAndEnd, there will be two overflows on both ends, and tab order will not change on tab selection. * - * @type {sap.ui.webc.main.types.TabsOverflowMode} - * @name sap.ui.webc.main.TabContainer.prototype.tabsOverflowMode - * @defaultvalue "End" + * @default "End" * @since 1.1.0 * @public */ @@ -263,9 +247,7 @@ class TabContainer extends UI5Element { /** * Sets the background color of the Tab Container's header as Solid, Transparent, or Translucent. * - * @type {sap.ui.webc.main.types.TabContainerBackgroundDesign} - * @name sap.ui.webc.main.TabContainer.prototype.headerBackgroundDesign - * @defaultvalue "Solid" + * @default "Solid" * @since 1.10.0 * @public */ @@ -275,9 +257,7 @@ class TabContainer extends UI5Element { /** * Sets the background color of the Tab Container's content as Solid, Transparent, or Translucent. * - * @type {sap.ui.webc.main.types.TabContainerBackgroundDesign} - * @name sap.ui.webc.main.TabContainer.prototype.contentBackgroundDesign - * @defaultvalue "Solid" + * @default "Solid" * @since 1.10.0 * @public */ @@ -291,9 +271,7 @@ class TabContainer extends UI5Element { * layout for most scenarios. Set to Bottom only when the component is at the * bottom of the page and you want the tab strip to act as a menu. * - * @type {sap.ui.webc.main.types.TabContainerTabsPlacement} - * @name sap.ui.webc.main.TabContainer.prototype.tabsPlacement - * @defaultvalue "Top" + * @default "Top" * @since 1.0.0-rc.7 * @private */ @@ -326,10 +304,7 @@ class TabContainer extends UI5Element { *

    * Note: Use ui5-tab and ui5-tab-separator for the intended design. * - * @type {sap.ui.webc.main.ITab[]} * @public - * @slot items - * @name sap.ui.webc.main.TabContainer.prototype.default */ @slot({ "default": true, @@ -346,27 +321,21 @@ class TabContainer extends UI5Element { * Defines the button which will open the overflow menu. If nothing is provided to this slot, * the default button will be used. * - * @type {sap.ui.webc.main.IButton} * @public - * @slot * @since 1.0.0-rc.9 - * @name sap.ui.webc.main.TabContainer.prototype.overflowButton */ @slot() - overflowButton!: Array