From ab8d01b471d001b60d81eb4dc063ad6449f5f5bb Mon Sep 17 00:00:00 2001 From: Nikolay Hristov Date: Thu, 9 Nov 2023 14:47:15 +0200 Subject: [PATCH 01/12] =?UTF-8?q?docs:=20Adapt=20JSDocs=20for=20new=20C?= =?UTF-8?q?=D0=95M=20and=20Remove=20Redundancies?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/base/src/types/CalendarType.ts | 9 --- packages/base/src/types/NavigationMode.ts | 8 --- packages/base/src/types/ValueState.ts | 9 --- packages/fiori/src/Bar.ts | 31 ++------- packages/fiori/src/DynamicSideContent.ts | 56 +++++++-------- packages/fiori/src/FilterItem.ts | 19 ++---- packages/fiori/src/Interfaces.ts | 15 ++-- packages/fiori/src/SortItem.ts | 16 ++--- packages/fiori/src/Timeline.ts | 18 ++--- packages/fiori/src/TimelineItem.ts | 29 +++----- packages/fiori/src/ViewSettingsDialog.ts | 52 +++++++++----- packages/fiori/src/types/BarDesign.ts | 8 --- .../fiori/src/types/SideContentFallDown.ts | 8 --- .../fiori/src/types/SideContentPosition.ts | 6 -- .../fiori/src/types/SideContentVisibility.ts | 9 --- packages/fiori/src/types/TimelineLayout.ts | 6 -- .../fiori/src/types/ViewSettingsDialogMode.ts | 6 -- packages/main/src/Button.ts | 58 ++++++---------- packages/main/src/Calendar.ts | 26 ++++--- packages/main/src/CalendarDate.ts | 11 ++- packages/main/src/CalendarHeader.ts | 13 ++-- packages/main/src/CalendarPart.ts | 14 ++-- packages/main/src/ColorPalette.ts | 20 +++--- packages/main/src/ColorPaletteItem.ts | 16 ++--- packages/main/src/ColorPalettePopover.ts | 29 +++----- packages/main/src/ColorPicker.ts | 9 +-- packages/main/src/DateComponentBase.ts | 22 +++--- packages/main/src/DatePicker.ts | 68 +++++++------------ packages/main/src/DateRangePicker.ts | 12 +--- packages/main/src/DateTimePicker.ts | 9 +-- packages/main/src/DayPicker.ts | 18 ++--- packages/main/src/FileUploader.ts | 41 ++++------- packages/main/src/Interfaces.ts | 15 ++-- packages/main/src/Link.ts | 61 +++++++---------- packages/main/src/Menu.ts | 56 +++++++-------- packages/main/src/MenuItem.ts | 36 ++++------ packages/main/src/MonthPicker.ts | 8 +-- packages/main/src/SegmentedButton.ts | 31 ++++----- packages/main/src/SegmentedButtonItem.ts | 29 ++++---- packages/main/src/SplitButton.ts | 40 ++++------- packages/main/src/StepInput.ts | 54 ++++++--------- packages/main/src/Switch.ts | 39 ++++------- packages/main/src/TimePicker.ts | 12 +--- packages/main/src/TimePickerBase.ts | 53 ++++++--------- packages/main/src/TimePickerClock.ts | 65 ++++++++---------- packages/main/src/TimePickerInternals.ts | 12 ++-- packages/main/src/TimeSelection.ts | 17 +---- packages/main/src/TimeSelectionClocks.ts | 5 +- packages/main/src/TimeSelectionInputs.ts | 6 +- packages/main/src/ToggleButton.ts | 8 +-- packages/main/src/ToggleSpinButton.ts | 6 +- packages/main/src/WheelSlider.ts | 30 ++++---- packages/main/src/YearPicker.ts | 8 +-- packages/main/src/types/ButtonDesign.ts | 10 --- packages/main/src/types/ButtonType.ts | 7 -- .../main/src/types/CalendarPickersMode.ts | 7 -- .../main/src/types/CalendarSelectionMode.ts | 7 -- packages/main/src/types/HasPopup.ts | 9 --- packages/main/src/types/LinkDesign.ts | 7 -- .../main/src/types/SegmentedButtonMode.ts | 6 -- packages/main/src/types/SwitchDesign.ts | 6 -- packages/main/src/types/WrappingType.ts | 6 -- packages/tools/components-package/eslint.js | 1 + 63 files changed, 441 insertions(+), 887 deletions(-) diff --git a/packages/base/src/types/CalendarType.ts b/packages/base/src/types/CalendarType.ts index 457d17929dd2..e83a0e3c17d2 100644 --- a/packages/base/src/types/CalendarType.ts +++ b/packages/base/src/types/CalendarType.ts @@ -1,36 +1,27 @@ /** * Different calendar types. * - * @readonly - * @enum {string} * @public - * @author SAP SE - * @alias sap.ui.webc.base.types.CalendarType */ enum CalendarType { /** * @public - * @type {Gregorian} */ Gregorian = "Gregorian", /** * @public - * @type {Islamic} */ Islamic = "Islamic", /** * @public - * @type {Japanese} */ Japanese = "Japanese", /** * @public - * @type {Buddhist} */ Buddhist = "Buddhist", /** * @public - * @type {Persian} */ Persian = "Persian", } diff --git a/packages/base/src/types/NavigationMode.ts b/packages/base/src/types/NavigationMode.ts index b9692e16ef6f..193e38c83b86 100644 --- a/packages/base/src/types/NavigationMode.ts +++ b/packages/base/src/types/NavigationMode.ts @@ -1,31 +1,23 @@ /** * Different navigation modes for ItemNavigation. * - * @readonly - * @enum {string} * @public - * @author SAP SE - * @alias sap.ui.webc.base.types.NavigationMode */ enum NavigationMode { /** * @public - * @type {Auto} */ Auto = "Auto", /** * @public - * @type {Vertical} */ Vertical = "Vertical", /** * @public - * @type {Horizontal} */ Horizontal = "Horizontal", /** * @public - * @type {Paging} */ Paging = "Paging", } diff --git a/packages/base/src/types/ValueState.ts b/packages/base/src/types/ValueState.ts index 4ca2cb00a250..071e7f13a54d 100644 --- a/packages/base/src/types/ValueState.ts +++ b/packages/base/src/types/ValueState.ts @@ -1,45 +1,36 @@ /** * Different types of ValueStates. * - * @readonly - * @enum {string} * @public - * @author SAP SE - * @alias sap.ui.webc.base.types.ValueState */ enum ValueState { /** * * @public - * @type {None} */ None = "None", /** * * @public - * @type {Success} */ Success = "Success", /** * * @public - * @type {Warning} */ Warning = "Warning", /** * * @public - * @type {Error} */ Error = "Error", /** * * @public - * @type {Information} */ Information = "Information", } diff --git a/packages/fiori/src/Bar.ts b/packages/fiori/src/Bar.ts index 70b4d323b01e..983131d47a42 100644 --- a/packages/fiori/src/Bar.ts +++ b/packages/fiori/src/Bar.ts @@ -5,6 +5,7 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js"; import BarDesign from "./types/BarDesign.js"; +import type { IBar } from "./Interfaces"; // Template import BarTemplate from "./generated/templates/BarTemplate.lit.js"; @@ -30,15 +31,6 @@ import BarCss from "./generated/themes/Bar.css.js"; * The default slot will be centered in the available space between the startContent and the endContent areas, * therefore it might not always be centered in the entire bar. * - *

CSS Shadow Parts

- * - * CSS Shadow Parts allow developers to style elements inside the Shadow DOM. - *
- * The ui5-bar exposes the following CSS Shadow Parts: - * - * *

Keyboard Handling

* *

Fast Navigation

@@ -51,12 +43,10 @@ import BarCss from "./generated/themes/Bar.css.js"; * * import "@ui5/webcomponents-fiori/dist/Bar.js"; * + * @csspart bar - Used to style the wrapper of the content of the component * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.Bar - * @implements sap.ui.webc.fiori.IBar - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-bar + * @implements {IBar} + * @extends UI5Element * @public * @since 1.0.0-rc.11 */ @@ -67,13 +57,12 @@ import BarCss from "./generated/themes/Bar.css.js"; styles: BarCss, template: BarTemplate, }) -class Bar extends UI5Element { +class Bar extends UI5Element implements IBar { /** * Defines the component's design. * - * @type {sap.ui.webc.fiori.types.BarDesign} - * @name sap.ui.webc.fiori.Bar.prototype.design - * @defaultvalue "Header" + * @type {BarDesign} + * @default "Header" * @public */ @property({ type: BarDesign, defaultValue: BarDesign.Header }) @@ -82,8 +71,6 @@ class Bar extends UI5Element { /** * Defines the content at the start of the bar. * @type {HTMLElement[]} - * @name sap.ui.webc.fiori.Bar.prototype.startContent - * @slot * @public */ @slot({ type: HTMLElement }) @@ -92,8 +79,6 @@ class Bar extends UI5Element { /** * Defines the content in the middle of the bar. * @type {HTMLElement[]} - * @name sap.ui.webc.fiori.Bar.prototype.default - * @slot middleContent * @public */ @slot({ type: HTMLElement, "default": true }) @@ -102,8 +87,6 @@ class Bar extends UI5Element { /** * Defines the content at the end of the bar. * @type {HTMLElement[]} - * @name sap.ui.webc.fiori.Bar.prototype.endContent - * @slot * @public */ @slot({ type: HTMLElement }) diff --git a/packages/fiori/src/DynamicSideContent.ts b/packages/fiori/src/DynamicSideContent.ts index 346d3a6cb49e..8bab80ff33c6 100644 --- a/packages/fiori/src/DynamicSideContent.ts +++ b/packages/fiori/src/DynamicSideContent.ts @@ -104,12 +104,10 @@ type DynamicSideContentLayoutChangeEventDetail = { * import "@ui5/webcomponents-fiori/dist/DynamicSideContent"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.DynamicSideContent - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-dynamic-side-content + * @extends UI5Element * @public * @since 1.1.0 + * @slot {HTMLElement[]} default - Defines the main content. */ @customElement({ tag: "ui5-dynamic-side-content", @@ -119,7 +117,6 @@ type DynamicSideContentLayoutChangeEventDetail = { }) /** * Fires when the current breakpoint has been changed. - * @event sap.ui.webc.fiori.DynamicSideContent#layout-change * @param {string} currentBreakpoint the current breakpoint. * @param {string} previousBreakpoint the breakpoint that was active before change to current breakpoint. * @param {boolean} mainContentVisible visibility of the main content. @@ -128,15 +125,27 @@ type DynamicSideContentLayoutChangeEventDetail = { */ @event("layout-change", { detail: { + /** + * @public + */ currentBreakpoint: { type: String, }, + /** + * @public + */ previousBreakpoint: { type: String, }, + /** + * @public + */ mainContentVisible: { type: Boolean, }, + /** + * @public + */ sideContentVisible: { type: Boolean, }, @@ -147,8 +156,7 @@ class DynamicSideContent extends UI5Element { * Defines the visibility of the main content. * * @type {boolean} - * @name sap.ui.webc.fiori.DynamicSideContent.prototype.hideMainContent - * @defaultvalue false + * @default false * @public * */ @@ -159,8 +167,7 @@ class DynamicSideContent extends UI5Element { * Defines the visibility of the side content. * * @type {boolean} - * @name sap.ui.webc.fiori.DynamicSideContent.prototype.hideSideContent - * @defaultvalue false + * @default false * @public * */ @@ -179,9 +186,8 @@ class DynamicSideContent extends UI5Element { *
  • End
    • * * - * @type {sap.ui.webc.fiori.types.SideContentPosition} - * @name sap.ui.webc.fiori.DynamicSideContent.prototype.sideContentPosition - * @defaultvalue "End" + * @type {SideContentPosition} + * @default "End" * @public * */ @@ -202,9 +208,8 @@ class DynamicSideContent extends UI5Element { *
  • NeverShow
    • * * - * @type {sap.ui.webc.fiori.types.SideContentVisibility} - * @name sap.ui.webc.fiori.DynamicSideContent.prototype.sideContentVisibility - * @defaultvalue "ShowAboveS" + * @type {SideContentVisibility} + * @default "ShowAboveS" * @public * */ @@ -224,9 +229,8 @@ class DynamicSideContent extends UI5Element { *
  • OnMinimumWidth
    • * * - * @type {sap.ui.webc.fiori.types.SideContentFallDown} - * @name sap.ui.webc.fiori.DynamicSideContent.prototype.sideContentFallDown - * @defaultvalue "OnMinimumWidth" + * @type {SideContentFallDown} + * @default "OnMinimumWidth" * @public * */ @@ -239,9 +243,8 @@ class DynamicSideContent extends UI5Element { * except for phone, where the main and side contents are switching visibility * using the toggle method. * - * @type {boolean}] - * @name sap.ui.webc.fiori.DynamicSideContent.prototype.equalSplit - * @defaultvalue false + * @type {boolean} + * @default false * @public * */ @@ -272,20 +275,10 @@ class DynamicSideContent extends UI5Element { @property({ noAttribute: true }) _currentBreakpoint!: string; - /** - * Defines the main content. - * - * @type {HTMLElement[]} - * @name sap.ui.webc.fiori.DynamicSideContent.prototype.default - * @slot - * @public - */ - /** * Defines the side content. * * @type {HTMLElement[]} - * @name sap.ui.webc.fiori.DynamicSideContent.prototype.sideContent * @slot * @public */ @@ -321,7 +314,6 @@ class DynamicSideContent extends UI5Element { * Toggles visibility of main and side contents on S screen size (mobile device). * @public * @method - * @name sap.ui.webc.fiori.DynamicSideContent#toggleContents */ toggleContents() { if (this.breakpoint === this.sizeS && this.sideContentVisibility !== SideContentVisibility.AlwaysShow) { diff --git a/packages/fiori/src/FilterItem.ts b/packages/fiori/src/FilterItem.ts index 5326383a7b83..791393cb2e82 100644 --- a/packages/fiori/src/FilterItem.ts +++ b/packages/fiori/src/FilterItem.ts @@ -3,6 +3,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import type FilterItemOption from "./FilterItemOption.js"; +import type { IFilterItem } from "./Interfaces"; /** * @class @@ -18,23 +19,19 @@ import type FilterItemOption from "./FilterItemOption.js"; * import @ui5/webcomponents-fiori/dist/FilterItem.js"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.FilterItem - * @extends sap.ui.webc.base.UI5Element + * @extends UI5Element * @abstract * @since 1.0.0-rc.16 - * @tagname ui5-filter-item - * @implements sap.ui.webc.fiori.IFilterItem + * @implements {IFilterItem} * @public */ @customElement("ui5-filter-item") -class FilterItem extends UI5Element { +class FilterItem extends UI5Element implements IFilterItem { /** * Defines the text of the component. * - * @name sap.ui.webc.fiori.FilterItem.prototype.text * @type {string} - * @defaultvalue "" + * @default "" * @public */ @property() @@ -43,9 +40,8 @@ class FilterItem extends UI5Element { /** * Defines the additional text of the component. * - * @name sap.ui.webc.fiori.FilterItem.prototype.additionalText * @type {string} - * @defaultvalue "" + * @default "" * @public */ @property() @@ -53,8 +49,7 @@ class FilterItem extends UI5Element { /** * Defines the values list. - * @name sap.ui.webc.fiori.FilterItem.prototype.values - * @type {sap.ui.webc.fiori.IFilterItemOption[]} + * @type {IFilterItemOption[]} * @slot values * @public */ diff --git a/packages/fiori/src/Interfaces.ts b/packages/fiori/src/Interfaces.ts index 30f113637518..01acb3024a43 100644 --- a/packages/fiori/src/Interfaces.ts +++ b/packages/fiori/src/Interfaces.ts @@ -1,29 +1,26 @@ /** * Interface for components that may be slotted inside ui5-page as header and footer. * - * @name sap.ui.webc.fiori.IBar * @interface * @public */ -const IBar = "sap.ui.webc.fiori.IBar"; +interface IBar extends HTMLElement {} /** * Interface for components that may be slotted inside ui5-view-settings-dialog as filter items * - * @name sap.ui.webc.fiori.IFilterItem * @interface * @public */ -const IFilterItem = "sap.ui.webc.fiori.IFilterItem"; +interface IFilterItem extends HTMLElement {} /** * Interface for components that may be slotted inside ui5-filter-item as values * - * @name sap.ui.webc.fiori.IFilterItemOption * @interface * @public */ -const IFilterItemOption = "sap.ui.webc.fiori.IFilterItemOption"; +interface IFilterItemOption extends HTMLElement {} /** * Interface for components that can be slotted inside ui5-media-gallery as items. @@ -91,20 +88,18 @@ const ISideNavigationSubItem = "sap.ui.webc.fiori.ISideNavigationSubItem"; /** * Interface for components that may be slotted inside ui5-view-settings-dialog as sort items * - * @name sap.ui.webc.fiori.ISortItem * @interface * @public */ -const ISortItem = "sap.ui.webc.fiori.ISortItem"; +interface ISortItem extends HTMLElement {} /** * Interface for components that may be slotted inside ui5-timeline as items * - * @name sap.ui.webc.fiori.ITimelineItem * @interface * @public */ -const ITimelineItem = "sap.ui.webc.fiori.ITimelineItem"; +interface ITimelineItem extends HTMLElement {} /** * Interface for components that may be slotted inside ui5-upload-collection as items diff --git a/packages/fiori/src/SortItem.ts b/packages/fiori/src/SortItem.ts index 2803ac0b5550..7cfb3e7ffccb 100644 --- a/packages/fiori/src/SortItem.ts +++ b/packages/fiori/src/SortItem.ts @@ -1,6 +1,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; +import type { ISortItem } from "./Interfaces"; /** * @class @@ -16,23 +17,19 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement * import @ui5/webcomponents-fiori/dist/SortItem.js"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.SortItem - * @extends sap.ui.webc.base.UI5Element + * @extends UI5Element * @abstract * @since 1.0.0-rc.16 - * @tagname ui5-sort-item - * @implements sap.ui.webc.fiori.ISortItem + * @implements {ISortItem} * @public */ @customElement("ui5-sort-item") -class SortItem extends UI5Element { +class SortItem extends UI5Element implements ISortItem { /** * Defines the text of the component. * - * @name sap.ui.webc.fiori.SortItem.prototype.text * @type {string} - * @defaultvalue "" + * @default "" * @public */ @property() @@ -41,9 +38,8 @@ class SortItem extends UI5Element { /** * Defines if the component is selected. * - * @name sap.ui.webc.fiori.SortItem.prototype.selected * @type {boolean} - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) diff --git a/packages/fiori/src/Timeline.ts b/packages/fiori/src/Timeline.ts index 0f07bd620f2a..1e8df28b133c 100644 --- a/packages/fiori/src/Timeline.ts +++ b/packages/fiori/src/Timeline.ts @@ -32,11 +32,7 @@ const LARGE_LINE_WIDTH = "LargeLineWidth"; * while the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam. * * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.Timeline - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-timeline - * @appenddocs sap.ui.webc.fiori.TimelineItem + * @extends UI5Element * @public * @since 0.8.0 */ @@ -60,9 +56,8 @@ class Timeline extends UI5Element { *
  • Horizontal
    • * * - * @type {sap.ui.webc.fiori.types.TimelineLayout} - * @name sap.ui.webc.fiori.Timeline.prototype.layout - * @defaultvalue "Vertical" + * @type {TimelineLayout} + * @default "Vertical" * @since 1.0.0-rc.15 * @public */ @@ -73,8 +68,7 @@ class Timeline extends UI5Element { * Defines the accessible ARIA name of the component. * * @type {string} - * @name sap.ui.webc.fiori.Timeline.prototype.accessibleName - * @defaultvalue: "" + * @default: "" * @public * @since 1.2.0 */ @@ -84,9 +78,7 @@ class Timeline extends UI5Element { /** * Determines the content of the ui5-timeline. * - * @type {sap.ui.webc.fiori.ITimelineItem[]} - * @name sap.ui.webc.fiori.Timeline.prototype.default - * @slot items + * @type {ITimelineItem[]} * @public */ @slot({ type: HTMLElement, individualSlots: true, "default": true }) diff --git a/packages/fiori/src/TimelineItem.ts b/packages/fiori/src/TimelineItem.ts index a07b3621d864..0edf098c4005 100644 --- a/packages/fiori/src/TimelineItem.ts +++ b/packages/fiori/src/TimelineItem.ts @@ -6,6 +6,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js"; import Icon from "@ui5/webcomponents/dist/Icon.js"; import Link from "@ui5/webcomponents/dist/Link.js"; +import type { ITimelineItem } from "./Interfaces"; import TimelineItemTemplate from "./generated/templates/TimelineItemTemplate.lit.js"; import TimelineLayout from "./types/TimelineLayout.js"; // Styles @@ -22,11 +23,8 @@ const LARGE_LINE_WIDTH = "LargeLineWidth"; * An entry posted on the timeline. * * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.TimelineItem - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-timeline-item - * @implements sap.ui.webc.fiori.ITimelineItem + * @extends UI5Element + * @implements {ITimelineItem} * @public */ @customElement({ @@ -50,7 +48,7 @@ const LARGE_LINE_WIDTH = "LargeLineWidth"; * @public */ @event("name-click") -class TimelineItem extends UI5Element implements ITabbable { +class TimelineItem extends UI5Element implements ITabbable, ITimelineItem { /** * Defines the icon to be displayed as graphical element within the ui5-timeline-item. * SAP-icons font provides numerous options. @@ -60,7 +58,7 @@ class TimelineItem extends UI5Element implements ITabbable { * * @type {string} * @name sap.ui.webc.fiori.TimelineItem.prototype.icon - * @defaultvalue "" + * @default "" * @public */ @property() @@ -70,8 +68,7 @@ class TimelineItem extends UI5Element implements ITabbable { * Defines the name of the item, displayed before the title-text. * * @type {string} - * @name sap.ui.webc.fiori.TimelineItem.prototype.name - * @defaultvalue "" + * @default "" * @public */ @property() @@ -81,8 +78,7 @@ class TimelineItem extends UI5Element implements ITabbable { * Defines if the name is clickable. * * @type {boolean} - * @name sap.ui.webc.fiori.TimelineItem.prototype.nameClickable - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -92,8 +88,7 @@ class TimelineItem extends UI5Element implements ITabbable { * Defines the title text of the component. * * @type {string} - * @name sap.ui.webc.fiori.TimelineItem.prototype.titleText - * @defaultvalue "" + * @default "" * @public */ @property() @@ -102,8 +97,7 @@ class TimelineItem extends UI5Element implements ITabbable { /** * Defines the subtitle text of the component. * @type {string} - * @name sap.ui.webc.fiori.TimelineItem.prototype.subtitleText - * @defaultvalue "" + * @default "" * @public */ @property() @@ -115,8 +109,8 @@ class TimelineItem extends UI5Element implements ITabbable { /** * Defines the items orientation. * - * @type {sap.ui.webc.fiori.types.TimelineLayout} - * @defaultvalue "Vertical" + * @type {TimelineLayout} + * @default "Vertical" * @private */ @property({ type: TimelineLayout, defaultValue: TimelineLayout.Vertical }) @@ -135,7 +129,6 @@ class TimelineItem extends UI5Element implements ITabbable { * Determines the description of the ui5-timeline-item. * * @type {Node[]} - * @name sap.ui.webc.fiori.TimelineItem.prototype.default * @slot * @public */ diff --git a/packages/fiori/src/ViewSettingsDialog.ts b/packages/fiori/src/ViewSettingsDialog.ts index 1055d6693f52..8b66d60cc2fe 100644 --- a/packages/fiori/src/ViewSettingsDialog.ts +++ b/packages/fiori/src/ViewSettingsDialog.ts @@ -100,11 +100,7 @@ type VSDInternalSettings = { * import "@ui5/webcomponents-fiori/dist/ViewSettingsDialog"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.ViewSettingsDialog - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-view-settings-dialog - * @appenddocs sap.ui.webc.fiori.SortItem sap.ui.webc.fiori.FilterItem sap.ui.webc.fiori.FilterItemOption + * @extends UI5Element * @since 1.0.0-rc.16 * @public */ @@ -130,7 +126,6 @@ type VSDInternalSettings = { /** * Fired when confirmation button is activated. * - * @event sap.ui.webc.fiori.ViewSettingsDialog#confirm * @param {String} sortOrder The current sort order selected. * @param {String} sortBy The currently selected ui5-sort-item text attribute. * @param {HTMLElement} sortByItem The currently selected ui5-sort-item. @@ -140,10 +135,25 @@ type VSDInternalSettings = { */ @event("confirm", { detail: { + /** + * @public + */ sortOrder: { type: String }, + /** + * @public + */ sortBy: { type: String }, + /** + * @public + */ sortByItem: { type: HTMLElement }, + /** + * @public + */ sortDescending: { type: Boolean }, + /** + * @public + */ filters: { type: Array }, }, }) @@ -151,7 +161,6 @@ type VSDInternalSettings = { /** * Fired when cancel button is activated. * - * @event sap.ui.webc.fiori.ViewSettingsDialog#cancel * @param {String} sortOrder The current sort order selected. * @param {String} sortBy The currently selected ui5-sort-item text attribute. * @param {HTMLElement} sortByItem The currently selected ui5-sort-item. @@ -161,10 +170,25 @@ type VSDInternalSettings = { */ @event("cancel", { detail: { + /** + * @public + */ sortOrder: { type: String }, + /** + * @public + */ sortBy: { type: String }, + /** + * @public + */ sortByItem: { type: HTMLElement }, + /** + * @public + */ sortDescending: { type: Boolean }, + /** + * @public + */ filters: { type: Array }, }, }) @@ -173,16 +197,14 @@ type VSDInternalSettings = { * Fired before the component is opened. This event does not bubble. * * @public - * @event sap.ui.webc.fiori.ViewSettingsDialog#before-open */ @event("before-open") class ViewSettingsDialog extends UI5Element { /** * Defines the initial sort order. * - * @name sap.ui.webc.fiori.ViewSettingsDialog.prototype.sortDescending * @type {boolean} - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -246,8 +268,7 @@ class ViewSettingsDialog extends UI5Element { * Defines the list of items against which the user could sort data. * Note: If you want to use this slot, you need to import used item: import "@ui5/webcomponents-fiori/dist/SortItem"; * - * @name sap.ui.webc.fiori.ViewSettingsDialog.prototype.sortItems - * @type {sap.ui.webc.fiori.ISortItem[]} + * @type {ISortItem[]} * @slot sortItems * @public */ @@ -258,8 +279,7 @@ class ViewSettingsDialog extends UI5Element { * Defines the filterItems list. * Note: If you want to use this slot, you need to import used item: import "@ui5/webcomponents-fiori/dist/FilterItem"; * - * @type {sap.ui.webc.fiori.IFilterItem[]} - * @name sap.ui.webc.fiori.ViewSettingsDialog.prototype.filterItems + * @type {IFilterItem[]} * @slot filterItems * @public */ @@ -499,8 +519,6 @@ class ViewSettingsDialog extends UI5Element { /** * Shows the dialog. * @public - * @method - * @name sap.ui.webc.fiori.ViewSettingsDialog#show */ show() { if (!this._dialog) { @@ -718,8 +736,6 @@ class ViewSettingsDialog extends UI5Element { * @param {string} settings.sortBy - sort by * @param {Array.} settings.filters - filters * @public - * @method - * @name sap.ui.webc.fiori.ViewSettingsDialog#setConfirmedSettings */ setConfirmedSettings(settings: VSDSettings) { if (settings && this._dialog && !this._dialog.isOpen()) { diff --git a/packages/fiori/src/types/BarDesign.ts b/packages/fiori/src/types/BarDesign.ts index ce5fc8f20ac0..8967b5764661 100644 --- a/packages/fiori/src/types/BarDesign.ts +++ b/packages/fiori/src/types/BarDesign.ts @@ -1,38 +1,30 @@ /** * Different types of Bar design * - * @readonly - * @enum {string} * @public - * @author SAP SE - * @alias sap.ui.webc.fiori.types.BarDesign */ enum BarDesign { /** * Default type * @public - * @type {Header} */ Header = "Header", /** * Subheader type * @public - * @type {Subheader} */ Subheader = "Subheader", /** * Footer type * @public - * @type {Footer} */ Footer = "Footer", /** * Floating Footer type - there is visible border on all sides * @public - * @type {FloatingFooter} */ FloatingFooter = "FloatingFooter", } diff --git a/packages/fiori/src/types/SideContentFallDown.ts b/packages/fiori/src/types/SideContentFallDown.ts index e864ab744af2..de5a2920a313 100644 --- a/packages/fiori/src/types/SideContentFallDown.ts +++ b/packages/fiori/src/types/SideContentFallDown.ts @@ -1,38 +1,30 @@ /** * SideContent FallDown options. * - * @readonly - * @enum {string} * @public - * @author SAP SE - * @alias sap.ui.webc.fiori.types.SideContentFallDown */ enum SideContentFallDown { /** * Side content falls down on breakpoints below XL * @public - * @type {BelowXL} */ BelowXL = "BelowXL", /** * Side content falls down on breakpoints below L * @public - * @type {BelowL} */ BelowL = "BelowL", /** * Side content falls down on breakpoints below M * @public - * @type {BelowM} */ BelowM = "BelowM", /** * Side content falls down on breakpoint M and the minimum width for the side content * @public - * @type {OnMinimumWidth} */ OnMinimumWidth = "OnMinimumWidth", } diff --git a/packages/fiori/src/types/SideContentPosition.ts b/packages/fiori/src/types/SideContentPosition.ts index 966392f4e06d..1d7f4418e760 100644 --- a/packages/fiori/src/types/SideContentPosition.ts +++ b/packages/fiori/src/types/SideContentPosition.ts @@ -1,18 +1,13 @@ /** * Side Content position options. * - * @readonly - * @enum {string} * @public - * @author SAP SE - * @alias sap.ui.webc.fiori.types.SideContentPosition */ enum SideContentPosition { /** * The side content is on the right side of the main container * in left-to-right mode and on the left side in right-to-left mode. * @public - * @type {End} */ End = "End", @@ -20,7 +15,6 @@ enum SideContentPosition { * The side content is on the left side of the main container * in left-to-right mode and on the right side in right-to-left mode. * @public - * @type {Start} */ Start = "Start", } diff --git a/packages/fiori/src/types/SideContentVisibility.ts b/packages/fiori/src/types/SideContentVisibility.ts index 4bf7608dc43c..8379f58b2240 100644 --- a/packages/fiori/src/types/SideContentVisibility.ts +++ b/packages/fiori/src/types/SideContentVisibility.ts @@ -1,45 +1,36 @@ /** * Side Content visibility options. * - * @readonly - * @enum {string} * @public - * @author SAP SE - * @alias sap.ui.webc.fiori.types.SideContentVisibility */ enum SideContentVisibility { /** * Show the side content on any breakpoint * @public - * @type {AlwaysShow} */ AlwaysShow = "AlwaysShow", /** * Show the side content on XL breakpoint * @public - * @type {ShowAboveL} */ ShowAboveL = "ShowAboveL", /** * Show the side content on L and XL breakpoints * @public - * @type {ShowAboveM} */ ShowAboveM = "ShowAboveM", /** * Show the side content on M, L and XL breakpoints * @public - * @type {ShowAboveS} */ ShowAboveS = "ShowAboveS", /** * Don't show the side content on any breakpoints * @public - * @type {NeverShow} */ NeverShow = "NeverShow", } diff --git a/packages/fiori/src/types/TimelineLayout.ts b/packages/fiori/src/types/TimelineLayout.ts index f70225cb6dd2..a890b143576b 100644 --- a/packages/fiori/src/types/TimelineLayout.ts +++ b/packages/fiori/src/types/TimelineLayout.ts @@ -1,25 +1,19 @@ /** * Available Timeline layout orientation * - * @readonly - * @enum {string} * @public - * @author SAP SE - * @alias sap.ui.webc.fiori.types.TimelineLayout */ enum TimelineLayout { /** * Vertical layout * Default type * @public - * @type {Vertical} */ Vertical= "Vertical", /** * Horizontal layout * @public - * @type {Horizontal} */ Horizontal= "Horizontal", } diff --git a/packages/fiori/src/types/ViewSettingsDialogMode.ts b/packages/fiori/src/types/ViewSettingsDialogMode.ts index da7bc9327490..e8dda08988be 100644 --- a/packages/fiori/src/types/ViewSettingsDialogMode.ts +++ b/packages/fiori/src/types/ViewSettingsDialogMode.ts @@ -1,18 +1,13 @@ /** * Different types of Bar. * - * @readonly - * @enum {string} * @public - * @author SAP SE - * @alias sap.ui.webc.fiori.types.ViewSettingsDialogMode */ enum ViewSettingsDialogMode { /** * Default type * @since 1.0.0-rc.16 * @public - * @type {Sort} */ Sort = "Sort", @@ -20,7 +15,6 @@ enum ViewSettingsDialogMode { * Filter type * @since 1.0.0-rc.16 * @public - * @type {Filter} */ Filter = "Filter", } diff --git a/packages/main/src/Button.ts b/packages/main/src/Button.ts index 0af5c780cf14..312c0ff42771 100644 --- a/packages/main/src/Button.ts +++ b/packages/main/src/Button.ts @@ -25,6 +25,7 @@ import willShowContent from "@ui5/webcomponents-base/dist/util/willShowContent.j import type { IFormElement } from "./features/InputElementsFormSupport.js"; import ButtonDesign from "./types/ButtonDesign.js"; import ButtonType from "./types/ButtonType.js"; +import type { IButton } from "./Interfaces"; import ButtonTemplate from "./generated/templates/ButtonTemplate.lit.js"; import Icon from "./Icon.js"; @@ -60,25 +61,14 @@ let activeButton: Button | null = null; * its style to provide visual feedback to the user that it is pressed or hovered over with * the mouse cursor. A disabled ui5-button appears inactive and cannot be pressed. * - *

    CSS Shadow Parts

    - * - * CSS Shadow Parts allow developers to style elements inside the Shadow DOM. - *
    - * The ui5-button exposes the following CSS Shadow Parts: - * - * *

    ES6 Module Import

    * * import "@ui5/webcomponents/dist/Button"; * + * @csspart button - Used to style the native button element * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.Button - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-button - * @implements sap.ui.webc.main.IButton + * @extends UI5Element + * @implements {IButton} * @public */ @customElement({ @@ -96,18 +86,16 @@ let activeButton: Button | null = null; * Note: The event will not be fired if the disabled * property is set to true. * - * @event sap.ui.webc.main.Button#click * @public * @native */ @event("click") -class Button extends UI5Element implements IFormElement { +class Button extends UI5Element implements IFormElement, IButton { /** * Defines the component design. * - * @type {sap.ui.webc.main.types.ButtonDesign} - * @name sap.ui.webc.main.Button.prototype.design - * @defaultvalue "Default" + * @type {ButtonDesign} + * @default "Default" * @public */ @property({ type: ButtonDesign, defaultValue: ButtonDesign.Default }) @@ -119,8 +107,7 @@ class Button extends UI5Element implements IFormElement { * focused, and it is not in the tab chain. * * @type {boolean} - * @name sap.ui.webc.main.Button.prototype.disabled - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -135,8 +122,7 @@ class Button extends UI5Element implements IFormElement { * See all the available icons within the Icon Explorer. * * @type {string} - * @name sap.ui.webc.main.Button.prototype.icon - * @defaultvalue "" + * @default "" * @public */ @property() @@ -146,8 +132,7 @@ class Button extends UI5Element implements IFormElement { * Defines whether the icon should be displayed after the component text. * * @type {boolean} - * @name sap.ui.webc.main.Button.prototype.iconEnd - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -161,8 +146,7 @@ class Button extends UI5Element implements IFormElement { * import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js"; * * @type {boolean} - * @name sap.ui.webc.main.Button.prototype.submits - * @defaultvalue false + * @default false * @public * @deprecated Set the "type" property to "Submit" to achieve the same result. The "submits" property is ignored if "type" is set to any value other than "Button". */ @@ -174,8 +158,7 @@ class Button extends UI5Element implements IFormElement { *
    * Note: A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function. * @type {string} - * @name sap.ui.webc.main.Button.prototype.tooltip - * @defaultvalue "" + * @default "" * @public * @since 1.2.0 */ @@ -186,8 +169,7 @@ class Button extends UI5Element implements IFormElement { * Defines the accessible ARIA name of the component. * * @type {string} - * @name sap.ui.webc.main.Button.prototype.accessibleName - * @defaultvalue undefined + * @default undefined * @public * @since 1.0.0-rc.15 */ @@ -198,8 +180,7 @@ class Button extends UI5Element implements IFormElement { * Receives id(or many ids) of the elements that label the component. * * @type {string} - * @name sap.ui.webc.main.Button.prototype.accessibleNameRef - * @defaultvalue "" + * @default "" * @public * @since 1.1.0 */ @@ -231,7 +212,6 @@ class Button extends UI5Element implements IFormElement { *
  • controls: Identifies the element (or elements) whose contents or presence are controlled by the button element. Accepts a string value.
    • * * @type {object} - * @name sap.ui.webc.main.Button.prototype.accessibilityAttributes * @public * @since 1.2.0 */ @@ -245,9 +225,8 @@ class Button extends UI5Element implements IFormElement { * Note: For the type property to have effect, you must add the following import to your project: * import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js"; * - * @type {sap.ui.webc.main.types.ButtonType} - * @name sap.ui.webc.main.Button.prototype.type - * @defaultvalue "Button" + * @type {ButtonType} + * @default "Button" * @public * @since 1.15.0 */ @@ -296,6 +275,9 @@ class Button extends UI5Element implements IFormElement { @property({ noAttribute: true }) buttonTitle?: string; + /** + * @private + */ @property({ type: Object }) _iconSettings!: object; @@ -319,8 +301,6 @@ class Button extends UI5Element implements IFormElement { * 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.Button.prototype.default - * @slot * @public */ @slot({ type: Node, "default": true }) diff --git a/packages/main/src/Calendar.ts b/packages/main/src/Calendar.ts index ae7f78d5108a..beaa52e873ac 100644 --- a/packages/main/src/Calendar.ts +++ b/packages/main/src/Calendar.ts @@ -158,11 +158,7 @@ type CalendarSelectedDatesChangeEventDetail = { * import "@ui5/webcomponents/dist/Calendar"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.Calendar - * @extends sap.ui.webc.main.CalendarPart - * @tagname ui5-calendar - * @appenddocs sap.ui.webc.main.CalendarDate + * @extends CalendarPart * @public * @since 1.0.0-rc.11 */ @@ -184,7 +180,6 @@ type CalendarSelectedDatesChangeEventDetail = { * Note: If you call preventDefault() for this event, the component will not * create instances of ui5-date for the newly selected dates. In that case you should do this manually. * - * @event sap.ui.webc.main.Calendar#selected-dates-change * @allowPreventDefault * @param {Array} values The selected dates * @param {Array} dates The selected dates as UTC timestamps @@ -192,7 +187,13 @@ type CalendarSelectedDatesChangeEventDetail = { */ @event("selected-dates-change", { detail: { + /** + * @public + */ dates: { type: Array }, + /** + * @public + */ values: { type: Array }, }, }) @@ -208,9 +209,8 @@ class Calendar extends CalendarPart { *
  • CalendarSelectionMode.Range - enables selection of a date range.
    • *
  • CalendarSelectionMode.Multiple - enables selection of multiple dates.
    • * - * @type {sap.ui.webc.main.types.CalendarSelectionMode} - * @name sap.ui.webc.main.Calendar.prototype.selectionMode - * @defaultvalue "Single" + * @type {CalendarSelectionMode} + * @default "Single" * @public */ @property({ @@ -227,8 +227,7 @@ class Calendar extends CalendarPart { * the week numbers are not displayed regardless of what is set. * * @type {boolean} - * @name sap.ui.webc.main.Calendar.prototype.hideWeekNumbers - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -236,6 +235,7 @@ class Calendar extends CalendarPart { /** * Which picker is currently visible to the user: day/month/year + * @private */ @property({ defaultValue: "day" }) _currentPicker!: string; @@ -264,9 +264,7 @@ class Calendar extends CalendarPart { * Defines the selected date or dates (depending on the selectionMode property) * for this calendar as instances of ui5-date. * - * @type {sap.ui.webc.main.ICalendarDate[]} - * @name sap.ui.webc.main.Calendar.prototype.default - * @slot dates + * @type {ICalendarDate[]} * @public */ @slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true }) diff --git a/packages/main/src/CalendarDate.ts b/packages/main/src/CalendarDate.ts index 9f7ff2e4dab6..48ec10f535c2 100644 --- a/packages/main/src/CalendarDate.ts +++ b/packages/main/src/CalendarDate.ts @@ -1,6 +1,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { ICalendarDate } from "./Interfaces"; /** * @class @@ -10,22 +11,18 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; * The ui5-date component defines a calendar date to be used inside ui5-calendar * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.CalendarDate - * @extends sap.ui.webc.base.UI5Element + * @extends UI5Element * @abstract - * @tagname ui5-date - * @implements sap.ui.webc.main.ICalendarDate + * @implements {ICalendarDate} * @public */ @customElement("ui5-date") -class CalendarDate extends UI5Element { +class CalendarDate extends UI5Element implements ICalendarDate { /** * The date formatted according to the formatPattern property * of the ui5-calendar that hosts the component. * * @type {string} - * @name sap.ui.webc.main.CalendarDate.prototype.value * @public */ @property() diff --git a/packages/main/src/CalendarHeader.ts b/packages/main/src/CalendarHeader.ts index ead42669def6..c6ff34bdd537 100644 --- a/packages/main/src/CalendarHeader.ts +++ b/packages/main/src/CalendarHeader.ts @@ -42,8 +42,7 @@ class CalendarHeader extends UI5Element { /** * Defines component's timestamp. * Note: set by the Calendar component - * @type {sap.ui.webc.base.types.Integer} - * @name sap.ui.webc.main.CalendarHeader.prototype.timestamp + * @type {Integer} * @public */ @property({ validator: Integer }) @@ -52,8 +51,7 @@ class CalendarHeader extends UI5Element { /** * Defines component's primary calendar type. * Note: set by the Calendar component - * @type {sap.ui.webc.base.types.CalendarType} - * @name sap.ui.webc.main.CalendarHeader.prototype.primaryCalendarType + * @type {CalendarType} * @public */ @property({ type: CalendarType }) @@ -62,10 +60,9 @@ class CalendarHeader extends UI5Element { /** * Defines component's secondary calendar type. * Note: set by the Calendar component - * @sience 1.0.0-rc.16 - * @defaultvalue undefined - * @type {sap.ui.webc.base.types.CalendarType} - * @name sap.ui.webc.main.CalendarHeader.prototype.secondaryCalendarType + * @since 1.0.0-rc.16 + * @default undefined + * @type {CalendarType} * @public */ @property({ type: CalendarType }) diff --git a/packages/main/src/CalendarPart.ts b/packages/main/src/CalendarPart.ts index e69a212f9e72..955cf1e9a615 100644 --- a/packages/main/src/CalendarPart.ts +++ b/packages/main/src/CalendarPart.ts @@ -13,16 +13,14 @@ import DateComponentBase from "./DateComponentBase.js"; * - other common code * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.CalendarPart - * @extends sap.ui.webc.main.DateComponentBase + * @extends DateComponentBase * @public */ class CalendarPart extends DateComponentBase { /** * The timestamp of the currently focused date. Set this property to move the component's focus to a certain date. * Node: Timestamp is 10-digit Integer representing the seconds (not milliseconds) since the Unix Epoch. - * @type {sap.ui.webc.base.types.Integer} + * @type {Integer} * @protected */ @property({ validator: Integer }) @@ -67,7 +65,7 @@ class CalendarPart extends DateComponentBase { /** * Change a timestamp and enforce limits * - * @param timestamp + * @param {number} timestamp * @protected */ _safelySetTimestamp(timestamp: number) { @@ -86,9 +84,9 @@ class CalendarPart extends DateComponentBase { /** * Modify a timestamp by a certain amount of days/months/years and enforce limits - * @param amount - * @param unit - * @param preserveDate whether to preserve the day of the month (f.e. 15th of March + 1 month = 15th of April) + * @param {number} amount + * @param {string} unit + * @param {boolean} preserveDate whether to preserve the day of the month (f.e. 15th of March + 1 month = 15th of April) * @protected */ _safelyModifyTimestampBy(amount: number, unit: string, preserveDate?: boolean) { diff --git a/packages/main/src/ColorPalette.ts b/packages/main/src/ColorPalette.ts index 97d743dd5e36..646593990568 100644 --- a/packages/main/src/ColorPalette.ts +++ b/packages/main/src/ColorPalette.ts @@ -57,12 +57,8 @@ type ColorPaletteItemClickEventDetail = { * import "@ui5/webcomponents/dist/ColorPalette.js"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.ColorPalette - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-color-palette + * @extends UI5Element * @since 1.0.0-rc.12 - * @appenddocs sap.ui.webc.main.ColorPaletteItem * @public */ @customElement({ @@ -81,13 +77,15 @@ type ColorPaletteItemClickEventDetail = { /** * Fired when the user selects a color. * - * @event sap.ui.webc.main.ColorPalette#item-click * @public * @since 1.0.0-rc.15 * @param {string} color the selected color */ @event("item-click", { detail: { + /** + * @public + */ color: { type: String, }, @@ -116,7 +114,7 @@ class ColorPalette extends UI5Element { /** * Defines whether the user can choose the default color from a button. * @type {boolean} - * @defaultvalue false + * @default false * @private * @since 1.0.0-rc.16 */ @@ -126,7 +124,7 @@ class ColorPalette extends UI5Element { /** * Defines the default color of the color palette * Note: The default color should be a part of the ColorPalette colors - * @type {sap.ui.webc.base.types.CSSColor} + * @type {CSSColor} * @private * @since 1.0.0-rc.16 */ @@ -135,7 +133,7 @@ class ColorPalette extends UI5Element { /** * Defines the selected color. - * @type {sap.ui.webc.base.types.CSSColor} + * @type {CSSColor} * @private */ @property({ validator: CSSColor }) @@ -151,9 +149,7 @@ class ColorPalette extends UI5Element { /** * Defines the ui5-color-palette-item elements. - * @type {sap.ui.webc.main.IColorPaletteItem[]} - * @name sap.ui.webc.main.ColorPalette.prototype.default - * @slot colors + * @type {IColorPaletteItem[]} * @public */ @slot({ diff --git a/packages/main/src/ColorPaletteItem.ts b/packages/main/src/ColorPaletteItem.ts index f42cdb5cebd0..25f095df8ce6 100644 --- a/packages/main/src/ColorPaletteItem.ts +++ b/packages/main/src/ColorPaletteItem.ts @@ -8,6 +8,7 @@ import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNaviga import CSSColor from "@ui5/webcomponents-base/dist/types/CSSColor.js"; import { isPhone } from "@ui5/webcomponents-base/dist/Device.js"; import Integer from "@ui5/webcomponents-base/dist/types/Integer.js"; +import type { IColorPaletteItem } from "./Interfaces"; import ColorPaletteItemTemplate from "./generated/templates/ColorPaletteItemTemplate.lit.js"; import { COLORPALETTE_COLOR_LABEL, @@ -24,13 +25,10 @@ import ColorPaletteItemCss from "./generated/themes/ColorPaletteItem.css.js"; * The ui5-color-palette-item component represents a color in the the ui5-color-palette. * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.ColorPaletteItem - * @extends sap.ui.webc.base.UI5Element + * @extends UI5Element * @abstract - * @tagname ui5-color-palette-item * @since 1.0.0-rc.12 - * @implements sap.ui.webc.main.IColorPaletteItem + * @implements {IColorPaletteItem} * @public */ @customElement({ @@ -39,14 +37,13 @@ import ColorPaletteItemCss from "./generated/themes/ColorPaletteItem.css.js"; styles: ColorPaletteItemCss, template: ColorPaletteItemTemplate, }) -class ColorPaletteItem extends UI5Element implements ITabbable { +class ColorPaletteItem extends UI5Element implements ITabbable, IColorPaletteItem { /** * Defines the colour of the component. *

    * Note: The value should be a valid CSS color. * - * @type {sap.ui.webc.base.types.CSSColor} - * @name sap.ui.webc.main.ColorPaletteItem.prototype.value + * @type {CSSColor} * @public */ @property({ validator: CSSColor }) @@ -60,8 +57,7 @@ class ColorPaletteItem extends UI5Element implements ITabbable { * * @public * @type {boolean} - * @name sap.ui.webc.main.ColorPaletteItem.prototype.selected - * @defaultvalue false + * @default false * @since 1.19.0 */ @property({ type: Boolean }) diff --git a/packages/main/src/ColorPalettePopover.ts b/packages/main/src/ColorPalettePopover.ts index 0af35a8bcdac..74c460bada4d 100644 --- a/packages/main/src/ColorPalettePopover.ts +++ b/packages/main/src/ColorPalettePopover.ts @@ -48,10 +48,7 @@ type ColorPalettePopoverItemClickEventDetail = ColorPaletteItemClickEventDetail; * import @ui5/webcomponents/dist/ColorPalettePopover.js"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.ColorPalettePopover - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-color-palette-popover + * @extends UI5Element * @public * @since 1.0.0-rc.16 */ @@ -71,12 +68,14 @@ type ColorPalettePopoverItemClickEventDetail = ColorPaletteItemClickEventDetail; /** * Fired when the user selects a color. * - * @event sap.ui.webc.main.ColorPalettePopover#item-click * @public * @param {string} color the selected color */ @event("item-click", { detail: { + /** + * @public + */ color: { type: String, }, @@ -86,8 +85,7 @@ class ColorPalettePopover extends UI5Element { /** * Defines whether the user can see the last used colors in the bottom of the component * @type {boolean} - * @name sap.ui.webc.main.ColorPalettePopover.prototype.showRecentColors - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -97,8 +95,7 @@ class ColorPalettePopover extends UI5Element { * Defines whether the user can choose a custom color from a component. * Note: In order to use this property you need to import the following module: "@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js" * @type {boolean} - * @name sap.ui.webc.main.ColorPalettePopover.prototype.showMoreColors - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -107,8 +104,7 @@ class ColorPalettePopover extends UI5Element { /** * Defines whether the user can choose the default color from a button. * @type {boolean} - * @name sap.ui.webc.main.ColorPalettePopover.prototype.showDefaultColor - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -117,8 +113,7 @@ class ColorPalettePopover extends UI5Element { /** * Defines the default color of the component. * Note: The default color should be a part of the ColorPalette colors - * @type {sap.ui.webc.base.types.CSSColor} - * @name sap.ui.webc.main.ColorPalettePopover.prototype.defaultColor + * @type {CSSColor} * @public */ @property({ validator: CSSColor }) @@ -126,9 +121,7 @@ class ColorPalettePopover extends UI5Element { /** * Defines the content of the component. - * @type {sap.ui.webc.main.IColorPaletteItem[]} - * @name sap.ui.webc.main.ColorPalettePopover.prototype.default - * @slot colors + * @type {IColorPaletteItem[]} * @public */ @slot({ "default": true, type: HTMLElement, individualSlots: true }) @@ -159,8 +152,6 @@ class ColorPalettePopover extends UI5Element { * Shows the ColorPalettePopover. * @param {HTMLElement} opener the element that the popover is shown at * @public - * @method - * @name sap.ui.webc.main.ColorPalettePopover#showAt * @since 1.1.1 */ showAt(opener: HTMLElement) { @@ -172,8 +163,6 @@ class ColorPalettePopover extends UI5Element { * Note: The method is deprecated and will be removed in future, use showAt instead. * @param {HTMLElement} opener the element that the popover is shown at * @public - * @method - * @name sap.ui.webc.main.ColorPalettePopover#openPopover * @since 1.0.0-rc.16 * @deprecated The method is deprecated in favour of showAt. */ diff --git a/packages/main/src/ColorPicker.ts b/packages/main/src/ColorPicker.ts index 2c6e35ce13fb..0c54a2a2e5ed 100644 --- a/packages/main/src/ColorPicker.ts +++ b/packages/main/src/ColorPicker.ts @@ -69,11 +69,8 @@ type ColorCoordinates = { * import "@ui5/webcomponents/dist/ColorPicker.js"; * * @constructor - * @author SAP SE * @since 1.0.0-rc.12 - * @alias sap.ui.webc.main.ColorPicker - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-color-picker + * @extends UI5Element * @public */ @@ -91,7 +88,6 @@ type ColorCoordinates = { /** * Fired when the the selected color is changed * - * @event sap.ui.webc.main.ColorPicker#change * @public */ @event("change") @@ -100,8 +96,7 @@ class ColorPicker extends UI5Element { * Defines the currently selected color of the component. *

    * Note: use HEX, RGB, RGBA, HSV formats or a CSS color name when modifying this property. - * @type {sap.ui.webc.base.types.CSSColor} - * @name sap.ui.webc.main.ColorPicker.prototype.color + * @type {CSSColor} * @public */ @property({ validator: CSSColor, defaultValue: "rgba(255, 255, 255, 1)" }) diff --git a/packages/main/src/DateComponentBase.ts b/packages/main/src/DateComponentBase.ts index 497ffd40642b..c12edade2c3a 100644 --- a/packages/main/src/DateComponentBase.ts +++ b/packages/main/src/DateComponentBase.ts @@ -23,9 +23,8 @@ import { getMaxCalendarDate, getMinCalendarDate } from "@ui5/webcomponents-local * - additional common methods * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.DateComponentBase - * @extends sap.ui.webc.base.UI5Element + * @abstract + * @extends UI5Element * @public */ @customElement({ @@ -36,8 +35,7 @@ class DateComponentBase extends UI5Element { /** * Sets a calendar type used for display. * If not set, the calendar type of the global configuration is used. - * @type {sap.ui.webc.base.types.CalendarType} - * @name sap.ui.webc.main.DateComponentBase.prototype.primaryCalendarType + * @type {CalendarType} * @public */ @property({ type: CalendarType }) @@ -46,10 +44,9 @@ class DateComponentBase extends UI5Element { /** * Defines the secondary calendar type. * If not set, the calendar will only show the primary calendar type. - * @type {sap.ui.webc.base.types.CalendarType} - * @name sap.ui.webc.main.DateComponentBase.prototype.secondaryCalendarType + * @type {CalendarType} * @since 1.0.0-rc.16 - * @defaultvalue undefined + * @default undefined * @public */ @property({ type: CalendarType }) @@ -59,8 +56,7 @@ class DateComponentBase extends UI5Element { * Determines the format, displayed in the input field. * * @type {string} - * @name sap.ui.webc.main.DateComponentBase.prototype.formatPattern - * @defaultvalue "" + * @default "" * @public */ @property() @@ -72,8 +68,7 @@ class DateComponentBase extends UI5Element { * Note: If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd). * * @type {string} - * @name sap.ui.webc.main.DateComponentBase.prototype.minDate - * @defaultvalue "" + * @default "" * @since 1.0.0-rc.6 * @public */ @@ -86,8 +81,7 @@ class DateComponentBase extends UI5Element { * Note: If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd). * * @type {string} - * @name sap.ui.webc.main.DateComponentBase.prototype.maxDate - * @defaultvalue "" + * @default "" * @since 1.0.0-rc.6 * @public */ diff --git a/packages/main/src/DatePicker.ts b/packages/main/src/DatePicker.ts index 49ef0fbd65fc..64e70b6cc5ae 100644 --- a/packages/main/src/DatePicker.ts +++ b/packages/main/src/DatePicker.ts @@ -146,10 +146,7 @@ type DatePickerInputEventDetail = { * import "@ui5/webcomponents/dist/DatePicker"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.DatePicker - * @extends sap.ui.webc.main.DateComponentBase - * @tagname ui5-date-picker + * @extends DateComponentBase * @public */ @@ -175,7 +172,6 @@ type DatePickerInputEventDetail = { /** * Fired when the input operation has finished by pressing Enter or on focusout. * - * @event sap.ui.webc.main.DatePicker#change * @allowPreventDefault * @public * @param {string} value The submitted value. @@ -183,9 +179,15 @@ type DatePickerInputEventDetail = { */ @event("change", { detail: { + /** + * @public + */ value: { type: String, }, + /** + * @public + */ valid: { type: Boolean, }, @@ -194,7 +196,6 @@ type DatePickerInputEventDetail = { /** * Fired when the value of the component is changed at each key stroke. * - * @event sap.ui.webc.main.DatePicker#input * @allowPreventDefault * @public * @param {string} value The submitted value. @@ -202,9 +203,15 @@ type DatePickerInputEventDetail = { */ @event("input", { detail: { + /** + * @public + */ value: { type: String, }, + /** + * @public + */ valid: { type: Boolean, }, @@ -215,8 +222,7 @@ class DatePicker extends DateComponentBase implements IFormElement { * Defines a formatted date value. * * @type {string} - * @name sap.ui.webc.main.DatePicker.prototype.value - * @defaultvalue "" + * @default "" * @formEvents change input * @formProperty * @public @@ -227,9 +233,8 @@ class DatePicker extends DateComponentBase implements IFormElement { /** * Defines the value state of the component. * - * @type {sap.ui.webc.base.types.ValueState} - * @name sap.ui.webc.main.DatePicker.prototype.valueState - * @defaultvalue "None" + * @type {ValueState} + * @default "None" * @public */ @property({ type: ValueState, defaultValue: ValueState.None }) @@ -240,8 +245,7 @@ class DatePicker extends DateComponentBase implements IFormElement { * * @since 1.0.0-rc.9 * @type {boolean} - * @name sap.ui.webc.main.DatePicker.prototype.required - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -251,8 +255,7 @@ class DatePicker extends DateComponentBase implements IFormElement { * Determines whether the component is displayed as disabled. * * @type {boolean} - * @name sap.ui.webc.main.DatePicker.prototype.disabled - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -262,8 +265,7 @@ class DatePicker extends DateComponentBase implements IFormElement { * Determines whether the component is displayed as read-only. * * @type {boolean} - * @name sap.ui.webc.main.DatePicker.prototype.readonly - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -278,8 +280,7 @@ class DatePicker extends DateComponentBase implements IFormElement { * Passing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern. * * @type {string} - * @name sap.ui.webc.main.DatePicker.prototype.placeholder - * @defaultvalue undefined + * @default undefined * @public */ @property({ defaultValue: undefined }) @@ -298,8 +299,7 @@ class DatePicker extends DateComponentBase implements IFormElement { * part of an HTML form. Do not use this property unless you need to submit a form. * * @type {string} - * @name sap.ui.webc.main.DatePicker.prototype.name - * @defaultvalue "" + * @default "" * @public */ @property() @@ -313,8 +313,7 @@ class DatePicker extends DateComponentBase implements IFormElement { * the week numbers are not displayed regardless of what is set. * * @type {boolean} - * @name sap.ui.webc.main.DatePicker.prototype.hideWeekNumbers - * @defaultvalue false + * @default false * @public * @since 1.0.0-rc.8 */ @@ -325,8 +324,7 @@ class DatePicker extends DateComponentBase implements IFormElement { * Defines the aria-label attribute for the component. * * @type {string} - * @name sap.ui.webc.main.DatePicker.prototype.accessibleName - * @defaultvalue "" + * @default "" * @public * @since 1.0.0-rc.15 */ @@ -337,8 +335,7 @@ class DatePicker extends DateComponentBase implements IFormElement { * Receives id(or many ids) of the elements that label the component. * * @type {string} - * @name sap.ui.webc.main.DatePicker.prototype.accessibleNameRef - * @defaultvalue "" + * @default "" * @public * @since 1.0.0-rc.15 */ @@ -365,9 +362,7 @@ class DatePicker extends DateComponentBase implements IFormElement { * Note: The valueStateMessage would be displayed, * when the component is in Information, Warning or Error value state. * @type {HTMLElement} - * @name sap.ui.webc.main.DatePicker.prototype.valueStateMessage * @since 1.0.0-rc.7 - * @slot * @public */ @slot({ type: HTMLElement }) @@ -377,7 +372,6 @@ class DatePicker extends DateComponentBase 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({ type: HTMLElement }) @@ -622,8 +616,6 @@ class DatePicker extends DateComponentBase implements IFormElement { /** * Checks if a value is valid against the current date format of the DatePicker. * @public - * @method - * @name sap.ui.webc.main.DatePicker#isValid * @param { string } [value=""] A value to be tested against the current date format * @returns { boolean } */ @@ -638,8 +630,6 @@ class DatePicker extends DateComponentBase implements IFormElement { /** * Checks if a date is between the minimum and maximum date. * @public - * @method - * @name sap.ui.webc.main.DatePicker#isInValidRange * @param { string } [value=""] A value to be checked * @returns { boolean } */ @@ -792,8 +782,6 @@ class DatePicker extends DateComponentBase implements IFormElement { * Formats a Java Script date object into a string representing a locale date * according to the formatPattern property of the DatePicker instance * @public - * @method - * @name sap.ui.webc.main.DatePicker#formatValue * @param {Date} date A Java Script date object to be formatted as string * @returns {string} The date as string */ @@ -804,8 +792,6 @@ class DatePicker extends DateComponentBase implements IFormElement { /** * Closes the picker. * @public - * @method - * @name sap.ui.webc.main.DatePicker#closePicker */ closePicker() { this.responsivePopover!.close(); @@ -814,9 +800,6 @@ class DatePicker extends DateComponentBase implements IFormElement { /** * Opens the picker. * @public - * @async - * @method - * @name sap.ui.webc.main.DatePicker#openPicker * @returns {Promise} Resolves when the picker is open */ async openPicker() { @@ -838,8 +821,6 @@ class DatePicker extends DateComponentBase implements IFormElement { /** * Checks if the picker is open. * @public - * @method - * @name sap.ui.webc.main.DatePicker#isOpen * @returns {boolean} true if the picker is open, false otherwise */ isOpen() { @@ -851,7 +832,6 @@ class DatePicker extends DateComponentBase implements IFormElement { * * @public * @readonly - * @name sap.ui.webc.main.DatePicker.prototype.dateValue * @type { Date } */ get dateValue(): Date | null { diff --git a/packages/main/src/DateRangePicker.ts b/packages/main/src/DateRangePicker.ts index 9285453ed986..6da6b115a1bb 100644 --- a/packages/main/src/DateRangePicker.ts +++ b/packages/main/src/DateRangePicker.ts @@ -49,10 +49,7 @@ import type { CalendarSelectedDatesChangeEventDetail } from "./Calendar.js"; * * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.DateRangePicker - * @extends sap.ui.webc.main.DatePicker - * @tagname ui5-daterange-picker + * @extends DatePicker * @since 1.0.0-rc.8 * @public */ @@ -66,8 +63,7 @@ class DateRangePicker extends DatePicker { * If not supplied, the default time interval delimiter for the current locale will be used. * * @type {string} - * @name sap.ui.webc.main.DateRangePicker.prototype.delimiter - * @defaultvalue "-" + * @default "-" * @public */ @property({ defaultValue: "-" }) @@ -94,7 +90,6 @@ class DateRangePicker extends DatePicker { * @readonly * @type {Date} * @public - * @name sap.ui.webc.main.DateRangePicker.prototype.dateValue */ get dateValue() { return null; @@ -106,7 +101,6 @@ class DateRangePicker extends DatePicker { * @readonly * @type {Date} * @public - * @name sap.ui.webc.main.DateRangePicker.prototype.dateValueUTC */ get dateValueUTC() { return null; @@ -160,7 +154,6 @@ class DateRangePicker extends DatePicker { * @readonly * @type {Date} * @public - * @name sap.ui.webc.main.DateRangePicker.prototype.startDateValue */ get startDateValue() { return CalendarDate.fromTimestamp(this._startDateTimestamp! * 1000).toLocalJSDate(); @@ -172,7 +165,6 @@ class DateRangePicker extends DatePicker { * @readonly * @type {Date} * @public - * @name sap.ui.webc.main.DateRangePicker.prototype.endDateValue */ get endDateValue() { return CalendarDate.fromTimestamp(this._endDateTimestamp! * 1000).toLocalJSDate(); diff --git a/packages/main/src/DateTimePicker.ts b/packages/main/src/DateTimePicker.ts index 59ac6d674f8d..043f93ad5e6e 100644 --- a/packages/main/src/DateTimePicker.ts +++ b/packages/main/src/DateTimePicker.ts @@ -110,10 +110,7 @@ type PreviewValues = { * import "@ui5/webcomponents/dist/DateTimePicker.js"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.DateTimePicker - * @extends sap.ui.webc.main.DatePicker - * @tagname ui5-datetime-picker + * @extends DatePicker * @since 1.0.0-rc.7 * @public */ @@ -145,7 +142,7 @@ class DateTimePicker extends DatePicker { *

    * Note: The date view would be displayed by default. * @type {boolean} - * @defaultvalue false + * @default false * @private */ @property({ type: Boolean, noAttribute: true }) @@ -157,7 +154,7 @@ class DateTimePicker extends DatePicker { * In phone mode the user can see either the calendar view, or the time view * and can switch between the views via toggle buttons. * @type {boolean} - * @defaultvalue false + * @default false * @private */ @property({ type: Boolean }) diff --git a/packages/main/src/DayPicker.ts b/packages/main/src/DayPicker.ts index 0e60f132ce40..1d1857bfafd1 100644 --- a/packages/main/src/DayPicker.ts +++ b/packages/main/src/DayPicker.ts @@ -96,10 +96,7 @@ type DayPickerNavigateEventDetail = { * Represents the days inside a single month view of the ui5-calendar component. * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.DayPicker - * @extends sap.ui.webc.main.CalendarPart - * @tagname ui5-daypicker + * @extends CalendarPart * @public */ @customElement({ @@ -110,20 +107,17 @@ type DayPickerNavigateEventDetail = { /** * Fired when the selected date(s) change * @public - * @event sap.ui.webc.main.DayPicker#change */ @event("change") /** * Fired when the timestamp changes (user navigates with the keyboard) or clicks with the mouse * @public - * @event sap.ui.webc.main.DayPicker#navigate */ @event("navigate") class DayPicker extends CalendarPart implements ICalendarPicker { /** * An array of UTC timestamps representing the selected date or dates depending on the capabilities of the picker component. * @type {array} - * @name sap.ui.webc.main.DayPicker.prototype.selectedDates * @public */ @property({ @@ -141,9 +135,8 @@ class DayPicker extends CalendarPart implements ICalendarPicker { *
  • CalendarSelectionMode.Range - enables selection of a date range.
    • *
  • CalendarSelectionMode.Multiple - enables selection of multiple dates.
    • * - * @type {sap.ui.webc.main.types.CalendarSelectionMode} - * @name sap.ui.webc.main.DayPicker.prototype.selectionMode - * @defaultvalue "Single" + * @type {CalendarSelectionMode} + * @default "Single" * @public */ @property({ type: CalendarSelectionMode, defaultValue: CalendarSelectionMode.Single }) @@ -157,8 +150,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker { * the week numbers are not displayed regardless of what is set. * * @type {boolean} - * @name sap.ui.webc.main.DayPicker.prototype.hideWeekNumbers - * @defaultvalue false + * @default false * @public * @since 1.0.0-rc.8 */ @@ -208,7 +200,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker { /** * Builds the "_weeks" object that represents the month. - * @param { LocaleData }localeData + * @param { LocaleData } localeData * @private */ _buildWeeks(localeData: LocaleData) { diff --git a/packages/main/src/FileUploader.ts b/packages/main/src/FileUploader.ts index b9b8e32bef43..1e4d2606ffc8 100644 --- a/packages/main/src/FileUploader.ts +++ b/packages/main/src/FileUploader.ts @@ -60,10 +60,7 @@ type FileUploaderChangeEventDetail = { * * @constructor * @since 1.0.0-rc.6 - * @author SAP SE - * @alias sap.ui.webc.main.FileUploader - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-file-uploader + * @extends UI5Element * @public */ @customElement({ @@ -84,12 +81,14 @@ type FileUploaderChangeEventDetail = { * Event is fired when the value of the file path has been changed. * Note: Keep in mind that because of the HTML input element of type file, the event is also fired in Chrome browser when the Cancel button of the uploads window is pressed. * - * @event sap.ui.webc.main.FileUploader#change * @param {FileList} files The current files. * @public */ @event("change", { detail: { + /** + * @public + */ files: { type: FileList }, }, }) @@ -99,8 +98,7 @@ class FileUploader extends UI5Element implements IFormElement { *

    * Note: Please make sure you are adding the . in front on the file type, e.g. .png in case you want to accept png's only. * @type {string} - * @name sap.ui.webc.main.FileUploader.prototype.accept - * @defaultvalue "" + * @default "" * @public */ @property() @@ -109,8 +107,7 @@ class FileUploader extends UI5Element implements IFormElement { /** * If set to "true", the input field of component will not be rendered. Only the default slot that is passed will be rendered. * @type {boolean} - * @name sap.ui.webc.main.FileUploader.prototype.hideInput - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -122,8 +119,7 @@ class FileUploader extends UI5Element implements IFormElement { * Note: A disabled component is completely noninteractive. * * @type {boolean} - * @name sap.ui.webc.main.FileUploader.prototype.disabled - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -132,8 +128,7 @@ class FileUploader extends UI5Element implements IFormElement { /** * Allows multiple files to be chosen. * @type {boolean} - * @name sap.ui.webc.main.FileUploader.prototype.multiple - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -152,8 +147,7 @@ class FileUploader extends UI5Element implements IFormElement { * part of an HTML form. Do not use this property unless you need to submit a form. * * @type {string} - * @name sap.ui.webc.main.FileUploader.prototype.name - * @defaultvalue "" + * @default "" * @public */ @property() @@ -162,8 +156,7 @@ class FileUploader extends UI5Element implements IFormElement { /** * Defines a short hint intended to aid the user with data entry when the component has no value. * @type {string} - * @name sap.ui.webc.main.FileUploader.prototype.placeholder - * @defaultvalue "" + * @default "" * @public */ @property() @@ -172,8 +165,7 @@ class FileUploader extends UI5Element implements IFormElement { /** * Defines the name/names of the file/files to upload. * @type {string} - * @name sap.ui.webc.main.FileUploader.prototype.value - * @defaultvalue "" + * @default "" * @formEvents change * @formProperty * @public @@ -183,9 +175,8 @@ class FileUploader extends UI5Element implements IFormElement { /** * Defines the value state of the component. - * @type {sap.ui.webc.base.types.ValueState} - * @name sap.ui.webc.main.FileUploader.prototype.valueState - * @defaultvalue "None" + * @type {ValueState} + * @default "None" * @public */ @property({ type: ValueState, defaultValue: ValueState.None }) @@ -203,8 +194,6 @@ class FileUploader extends UI5Element implements IFormElement { * Also it is not recommended to use any non-interactable components, as it may lead to poor accessibility experience. * * @type {HTMLElement[]} - * @name sap.ui.webc.main.FileUploader.prototype.default - * @slot content * @public */ @slot({ type: HTMLElement, "default": true }) @@ -219,9 +208,7 @@ class FileUploader extends UI5Element implements IFormElement { * Note: The valueStateMessage would be displayed, * when the component is in Information, Warning or Error value state. * @type {HTMLElement[]} - * @name sap.ui.webc.main.FileUploader.prototype.valueStateMessage * @since 1.0.0-rc.9 - * @slot * @public */ @slot() @@ -231,7 +218,6 @@ class FileUploader 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() @@ -297,7 +283,6 @@ class FileUploader extends UI5Element implements IFormElement { * @readonly * @type {FileList} * @public - * @name sap.ui.webc.main.FileUploader.prototype.files */ get files() { if (this._input) { diff --git a/packages/main/src/Interfaces.ts b/packages/main/src/Interfaces.ts index 6240ff43baaf..2318c3af7c6c 100644 --- a/packages/main/src/Interfaces.ts +++ b/packages/main/src/Interfaces.ts @@ -19,11 +19,10 @@ const IBreadcrumbsItem = "sap.ui.webc.main.IBreadcrumbsItem"; /** * Interface for components that may be used as a button inside numerous higher-order components * - * @name sap.ui.webc.main.IButton * @interface * @public */ -const IButton = "sap.ui.webc.main.IButton"; +interface IButton extends HTMLElement {} /** * Interface for components that may be slotted inside ui5-card as header @@ -37,11 +36,10 @@ const ICardHeader = "sap.ui.webc.main.ICardHeader"; /** * Interface for components that may be used as dates inside ui5-calendar * - * @name sap.ui.webc.main.ICalendarDate * @interface * @public */ -const ICalendarDate = "sap.ui.webc.main.ICalendarDate"; +interface ICalendarDate extends HTMLElement {} /** * Interface for components that may be slotted inside a ui5-combobox @@ -55,11 +53,10 @@ const IComboBoxItem = "sap.ui.webc.main.IComboBoxItem"; /** * Interface for components that may be used inside a ui5-color-palette or ui5-color-palette-popover * - * @name sap.ui.webc.main.IColorPaletteItem * @interface * @public */ -const IColorPaletteItem = "sap.ui.webc.main.IColorPaletteItem"; +interface IColorPaletteItem extends HTMLElement {} /** * Interface for components that represent an icon, usable in numerous higher-order components @@ -100,11 +97,10 @@ const IListItem = "sap.ui.webc.main.IListItem"; /** * Interface for components that may be slotted inside ui5-menu as items * - * @name sap.ui.webc.main.IMenuItem * @interface * @public */ -const IMenuItem = "sap.ui.webc.main.IMenuItem"; +interface IMenuItem extends HTMLElement {} /** * Interface for components that may be slotted inside a ui5-multi-combobox as items @@ -118,11 +114,10 @@ const IMultiComboBoxItem = "sap.ui.webc.main.IMultiComboBoxItem"; /** * Interface for components that may be slotted inside ui5-segmented-button as items * - * @name sap.ui.webc.main.ISegmentedButtonItem * @interface * @public */ -const ISegmentedButtonItem = "sap.ui.webc.main.ISegmentedButtonItem"; +interface ISegmentedButtonItem extends HTMLElement {} /** * Interface for components that may be slotted inside ui5-select as options diff --git a/packages/main/src/Link.ts b/packages/main/src/Link.ts index be9a6f1335dc..ecbf4c7f657c 100644 --- a/packages/main/src/Link.ts +++ b/packages/main/src/Link.ts @@ -62,11 +62,9 @@ type LinkClickEventDetail = { * import "@ui5/webcomponents/dist/Link"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.Link - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-link + * @extends UI5Element * @public + * @slot {Node[]} default - 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. */ @customElement({ tag: "ui5-link", @@ -79,7 +77,6 @@ type LinkClickEventDetail = { * Fired when the component is triggered either with a mouse/tap * or by using the Enter key. * - * @event sap.ui.webc.main.Link#click * @public * @allowPreventDefault * @param {Boolean} altKey Returns whether the "ALT" key was pressed when the event was triggered. @@ -89,9 +86,21 @@ type LinkClickEventDetail = { */ @event("click", { detail: { + /** + * @public + */ altKey: { type: Boolean }, + /** + * @public + */ ctrlKey: { type: Boolean }, + /** + * @public + */ metaKey: { type: Boolean }, + /** + * @public + */ shiftKey: { type: Boolean }, }, }) @@ -102,8 +111,7 @@ class Link extends UI5Element implements ITabbable { * Note: When disabled, the click event cannot be triggered by the user. * * @type {boolean} - * @name sap.ui.webc.main.Link.prototype.disabled - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -112,9 +120,8 @@ class Link extends UI5Element implements ITabbable { /** * Defines the tooltip of the component. * @type {string} - * @defaultvalue "" + * @default "" * @private - * @name sap.ui.webc.main.Link.prototype.title * @since 1.18.0 */ @property() @@ -126,8 +133,7 @@ class Link extends UI5Element implements ITabbable { * Note: Standard hyperlink behavior is supported. * * @type {string} - * @name sap.ui.webc.main.Link.prototype.href - * @defaultvalue "" + * @default "" * @public */ @property() @@ -149,8 +155,7 @@ class Link extends UI5Element implements ITabbable { * This property must only be used when the href property is set. * * @type {string} - * @name sap.ui.webc.main.Link.prototype.target - * @defaultvalue "" + * @default "" * @public */ @property() @@ -161,9 +166,8 @@ class Link extends UI5Element implements ITabbable { *

    * Note: Avaialble options are Default, Subtle, and Emphasized. * - * @type {sap.ui.webc.main.types.LinkDesign} - * @name sap.ui.webc.main.Link.prototype.design - * @defaultvalue "Default" + * @type {LinkDesign} + * @default "Default" * @public */ @property({ type: LinkDesign, defaultValue: LinkDesign.Default }) @@ -173,9 +177,8 @@ class Link extends UI5Element implements ITabbable { * 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. * - * @type {sap.ui.webc.main.types.WrappingType} - * @name sap.ui.webc.main.Link.prototype.wrappingType - * @defaultvalue "None" + * @type {WrappingType} + * @default "None" * @public */ @property({ type: WrappingType, defaultValue: WrappingType.None }) @@ -185,8 +188,7 @@ class Link extends UI5Element implements ITabbable { * Defines the accessible ARIA name of the component. * * @type {string} - * @name sap.ui.webc.main.Link.prototype.accessibleName - * @defaultvalue "" + * @default "" * @public * @since 1.2.0 */ @@ -197,8 +199,7 @@ class Link extends UI5Element implements ITabbable { * Receives id(or many ids) of the elements that label the input * * @type {string} - * @name sap.ui.webc.main.Link.prototype.accessibleNameRef - * @defaultvalue "" + * @default "" * @public * @since 1.0.0-rc.15 */ @@ -211,8 +212,7 @@ class Link extends UI5Element implements ITabbable { * Note: Use the "button" role in cases when navigation is not expected to occur and the href property is not defined. * * @type {string} - * @name sap.ui.webc.main.Link.prototype.accessibleRole - * @defaultvalue "link" + * @default "link" * @public * @since 1.9.0 */ @@ -243,7 +243,6 @@ class Link extends UI5Element implements ITabbable { * * * @type {object} - * @name sap.ui.webc.main.Link.prototype.accessibilityAttributes * @public * @since 1.1.0 */ @@ -263,16 +262,6 @@ class Link extends UI5Element implements ITabbable { @property({ type: Boolean }) focused!: boolean - /** - * 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.Link.prototype.default - * @slot - * @public - */ - _dummyAnchor: HTMLAnchorElement; static i18nBundle: I18nBundle; diff --git a/packages/main/src/Menu.ts b/packages/main/src/Menu.ts index 373d4fd4f197..7b07ff4e5eaa 100644 --- a/packages/main/src/Menu.ts +++ b/packages/main/src/Menu.ts @@ -87,11 +87,7 @@ type OpenerStandardListItem = StandardListItem & { associatedItem: MenuItem }; * import "@ui5/webcomponents/dist/Menu.js"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.Menu - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-menu - * @appenddocs sap.ui.webc.main.MenuItem + * @extends UI5Element * @since 1.3.0 * @public */ @@ -114,7 +110,6 @@ type OpenerStandardListItem = StandardListItem & { associatedItem: MenuItem }; * Fired when an item is being clicked. * Note: Since 1.17.0 the event is preventable, allowing the menu to remain open after an item is pressed. * - * @event sap.ui.webc.main.Menu#item-click * @allowPreventDefault * @param { HTMLElement } item The currently clicked menu item. * @param { string } text The text of the currently clicked menu item. @@ -122,9 +117,15 @@ type OpenerStandardListItem = StandardListItem & { associatedItem: MenuItem }; */ @event("item-click", { detail: { + /** + * @public + */ item: { type: HTMLElement, }, + /** + * @public + */ text: { type: String, }, @@ -136,13 +137,15 @@ type OpenerStandardListItem = StandardListItem & { associatedItem: MenuItem }; * Note: Since 1.14.0 the event is also fired before a sub-menu opens. * * @public - * @event sap.ui.webc.main.Menu#before-open * @allowPreventDefault * @since 1.10.0 * @param { HTMLElement } item The ui5-menu-item that triggers opening of the sub-menu or undefined when fired upon root menu opening. Note: available since 1.14.0. */ @event("before-open", { detail: { + /** + * @public + */ item: { type: HTMLElement, }, @@ -153,7 +156,6 @@ type OpenerStandardListItem = StandardListItem & { associatedItem: MenuItem }; * Fired after the menu is opened. This event does not bubble. * * @public - * @event sap.ui.webc.main.Menu#after-open * @since 1.10.0 */ @event("after-open") @@ -162,14 +164,18 @@ type OpenerStandardListItem = StandardListItem & { associatedItem: MenuItem }; * Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing. This event does not bubble. * * @public - * @event sap.ui.webc.main.Menu#before-close * @allowPreventDefault * @param {boolean} escPressed Indicates that ESC key has triggered the event. * @since 1.10.0 */ @event("before-close", { detail: { - escPressed: { type: Boolean }, + /** + * @public + */ + escPressed: { + type: Boolean, + }, }, }) @@ -177,7 +183,6 @@ type OpenerStandardListItem = StandardListItem & { associatedItem: MenuItem }; * Fired after the menu is closed. This event does not bubble. * * @public - * @event sap.ui.webc.main.Menu#after-close * @since 1.10.0 */ @event("after-close") @@ -185,9 +190,8 @@ class Menu extends UI5Element { /** * Defines the header text of the menu (displayed on mobile). * - * @name sap.ui.webc.main.Menu.prototype.headerText * @type {string} - * @defaultvalue "" + * @default "" * @public */ @property() @@ -196,10 +200,9 @@ class Menu extends UI5Element { /** * Indicates if the menu is open * - * @name sap.ui.webc.main.Menu.prototype.open * @public * @type {boolean} - * @defaultvalue false + * @default false * @since 1.10.0 */ @property({ type: Boolean }) @@ -208,9 +211,8 @@ class Menu extends UI5Element { /** * Defines if a loading indicator would be displayed inside the corresponding ui5-menu popover. * - * @name sap.ui.webc.main.Menu.prototype.busy * @type {boolean} - * @defaultvalue false + * @default false * @public * @since 1.13.0 */ @@ -220,9 +222,8 @@ class Menu extends UI5Element { /** * Defines the delay in milliseconds, after which the busy indicator will be displayed inside the corresponding ui5-menu popover.. * - * @name sap.ui.webc.main.Menu.prototype.busyDelay - * @type {sap.ui.webc.base.types.Integer} - * @defaultValue 1000 + * @type {Integer} + * @default 1000 * @public * @since 1.13.0 */ @@ -232,10 +233,9 @@ class Menu extends UI5Element { /** * Defines the ID or DOM Reference of the element that the menu is shown at * - * @name sap.ui.webc.main.Menu.prototype.opener * @public - * @type {sap.ui.webc.base.types.DOMReference} - * @defaultvalue "" + * @type {DOMReference} + * @default "" * @since 1.10.0 */ @property({ validator: DOMReference, defaultValue: "" }) @@ -244,7 +244,7 @@ class Menu extends UI5Element { /** * Defines if the menu is sub-menu (not first-level). * @type {boolean} - * @defaultvalue false + * @default false * @private */ @property({ type: Boolean, noAttribute: true }) @@ -300,9 +300,7 @@ class Menu extends UI5Element { *

    * Note: Use ui5-menu-item for the intended design. * - * @name sap.ui.webc.main.Menu.prototype.default - * @type {sap.ui.webc.main.IMenuItem[]} - * @slot items + * @type {IMenuItem[]} * @public */ @slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true }) @@ -400,8 +398,6 @@ class Menu extends UI5Element { * Shows the Menu near the opener element. * @param {HTMLElement} opener the element that the popover is shown at * @public - * @method - * @name sap.ui.webc.main.Menu#showAt */ async showAt(opener: HTMLElement) { if (isPhone()) { @@ -425,8 +421,6 @@ class Menu extends UI5Element { /** * Closes the Menu. * @public - * @method - * @name sap.ui.webc.main.Menu#close */ close() { if (this._popover) { diff --git a/packages/main/src/MenuItem.ts b/packages/main/src/MenuItem.ts index 15e8110230dc..5269d5849d20 100644 --- a/packages/main/src/MenuItem.ts +++ b/packages/main/src/MenuItem.ts @@ -4,6 +4,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; import Integer from "@ui5/webcomponents-base/dist/types/Integer.js"; import type Menu from "./Menu.js"; +import type { IMenuItem } from "./Interfaces"; /** * @class @@ -24,23 +25,19 @@ import type Menu from "./Menu.js"; * import "@ui5/webcomponents/dist/MenuItem.js"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.MenuItem - * @extends sap.ui.webc.base.UI5Element + * @extends UI5Element * @abstract - * @tagname ui5-menu-item - * @implements sap.ui.webc.main.IMenuItem + * @implements IMenuItem * @since 1.3.0 * @public */ @customElement("ui5-menu-item") -class MenuItem extends UI5Element { +class MenuItem extends UI5Element implements IMenuItem { /** * Defines the text of the tree item. * - * @name sap.ui.webc.main.MenuItem.prototype.text * @type {string} - * @defaultValue "" + * @default "" * @public */ @property() @@ -50,7 +47,6 @@ class MenuItem extends UI5Element { * Defines the additionalText, displayed in the end of the menu item. * Note: The additional text would not be displayed if the item has a submenu. * - * @name sap.ui.webc.main.MenuItem.prototype.additionalText * @type {string} * @public * @since 1.8.0 @@ -65,9 +61,8 @@ class MenuItem extends UI5Element { * Example: * See all the available icons in the Icon Explorer. * - * @name sap.ui.webc.main.MenuItem.prototype.icon * @type {string} - * @defaultvalue "" + * @default "" * @public */ @property() @@ -76,9 +71,8 @@ class MenuItem extends UI5Element { /** * Defines whether a visual separator should be rendered before the item. * - * @name sap.ui.webc.main.MenuItem.prototype.startsSection * @type {boolean} - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -89,9 +83,8 @@ class MenuItem extends UI5Element { *

    * Note: A disabled ui5-menu-item is noninteractive. * - * @name sap.ui.webc.main.MenuItem.prototype.disabled * @type {boolean} - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -102,9 +95,8 @@ class MenuItem extends UI5Element { * * Note: If set to true a ui5-busy-indicator component will be displayed into the related one to the current ui5-menu-item sub-menu popover. * - * @name sap.ui.webc.main.MenuItem.prototype.busy * @type {boolean} - * @defaultvalue false + * @default false * @public * @since 1.13.0 */ @@ -114,9 +106,8 @@ class MenuItem extends UI5Element { /** * Defines the delay in milliseconds, after which the busy indicator will be displayed inside the corresponding ui5-menu popover. * - * @name sap.ui.webc.main.MenuItem.prototype.busyDelay * @type {sap.ui.webc.base.types.Integer} - * @defaultValue 1000 + * @default 1000 * @public * @since 1.13.0 */ @@ -126,9 +117,8 @@ class MenuItem extends UI5Element { /** * Defines the accessible ARIA name of the component. * - * @name sap.ui.webc.main.MenuItem.prototype.accessibleName * @type {string} - * @defaultvalue "" + * @default "" * @public * @since 1.7.0 */ @@ -162,9 +152,7 @@ class MenuItem extends UI5Element { /** * Defines the items of this component. * - * @name sap.ui.webc.main.MenuItem.prototype.default - * @type {sap.ui.webc.main.IMenuItem[]} - * @slot items + * @type {IMenuItem[]} * @public */ @slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true }) diff --git a/packages/main/src/MonthPicker.ts b/packages/main/src/MonthPicker.ts index 2a42340e7b26..900b485cd848 100644 --- a/packages/main/src/MonthPicker.ts +++ b/packages/main/src/MonthPicker.ts @@ -68,10 +68,7 @@ type MonthPickerNavigateEventDetail = { * Displays months which can be selected. * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.MonthPicker - * @extends sap.ui.webc.main.CalendarPart - * @tagname ui5-monthpicker + * @extends CalendarPart * @public */ @customElement({ @@ -82,14 +79,12 @@ type MonthPickerNavigateEventDetail = { /** * Fired when the user selects a month via "Space", "Enter" or click. * @public - * @event sap.ui.webc.main.MonthPicker#change */ @event("change") /** * Fired when the timestamp changes - the user navigates with the keyboard or clicks with the mouse. * @since 1.0.0-rc.9 * @public - * @event sap.ui.webc.main.MonthPicker#navigate */ @event("navigate") class MonthPicker extends CalendarPart implements ICalendarPicker { @@ -97,7 +92,6 @@ class MonthPicker extends CalendarPart implements ICalendarPicker { * An array of UTC timestamps representing the selected date * or dates depending on the capabilities of the picker component. * @type {array} - * @name sap.ui.webc.main.MonthPicker.prototype.selectedDates * @public */ @property({ diff --git a/packages/main/src/SegmentedButton.ts b/packages/main/src/SegmentedButton.ts index 6357f1e99c90..b4f65ac14386 100644 --- a/packages/main/src/SegmentedButton.ts +++ b/packages/main/src/SegmentedButton.ts @@ -43,12 +43,8 @@ type SegmentedButtonSelectionChangeEventDetail = { * import "@ui5/webcomponents/dist/SegmentedButton"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.SegmentedButton - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-segmented-button + * @extends UI5Element * @since 1.0.0-rc.6 - * @appenddocs sap.ui.webc.main.SegmentedButtonItem * @public */ @customElement({ @@ -62,14 +58,19 @@ type SegmentedButtonSelectionChangeEventDetail = { /** * Fired when the selected item changes. * - * @event sap.ui.webc.main.SegmentedButton#selection-change * @param {HTMLElement} selectedItem the pressed item. Note: deprecated since 1.14.0 and will be removed in the next major release, use the selectedItems parameter instead. * @param {HTMLElement[]} selectedItems an array of selected items. Note: available since 1.14.0. * @public */ @event("selection-change", { detail: { + /** + * @public + */ selectedItem: { type: HTMLElement }, + /** + * @public + */ selectedItems: { type: Array }, }, }) @@ -79,9 +80,8 @@ class SegmentedButton extends UI5Element { * Defines the accessible ARIA name of the component. * * @type {string} - * @defaultvalue undefined + * @default undefined * @public - * @name sap.ui.webc.main.SegmentedButton.prototype.accessibleName * @since 1.0.3 */ @property({ defaultValue: undefined }) @@ -98,10 +98,9 @@ class SegmentedButton extends UI5Element { *
  • MultiSelect
    • * * - * @type {sap.ui.webc.main.types.SegmentedButtonMode} - * @defaultvalue "SingleSelect" + * @type {SegmentedButtonMode} + * @default "SingleSelect" * @public - * @name sap.ui.webc.main.SegmentedButton.prototype.mode * @since 1.14.0 */ @property({ type: SegmentedButtonMode, defaultValue: SegmentedButtonMode.SingleSelect }) @@ -113,9 +112,7 @@ class SegmentedButton extends UI5Element { * Note: Multiple items are allowed. *

    * Note: Use the ui5-segmented-button-item for the intended design. - * @type {sap.ui.webc.main.ISegmentedButtonItem[]} - * @name sap.ui.webc.main.SegmentedButton.prototype.default - * @slot items + * @type {ISegmentedButtonItem[]} * @public */ @slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true }) @@ -258,8 +255,7 @@ class SegmentedButton extends UI5Element { * Currently selected item. * * @readonly - * @type {sap.ui.webc.main.ISegmentedButtonItem} - * @name sap.ui.webc.main.SegmentedButton.prototype.selectedItem + * @type {ISegmentedButtonItem} * @deprecated since 1.14.0. This method will be removed in the next major release. * Please use the selectedItems property instead. * @public @@ -271,8 +267,7 @@ class SegmentedButton extends UI5Element { /** * Returns an array of the currently selected items. * @readonly - * @name sap.ui.webc.main.SegmentedButton.prototype.selectedItems - * @type {sap.ui.webc.main.ISegmentedButtonItem[]} + * @type {ISegmentedButtonItem[]} * @since 1.14.0 * @public */ diff --git a/packages/main/src/SegmentedButtonItem.ts b/packages/main/src/SegmentedButtonItem.ts index 8ec807b70019..3b49819d19c7 100644 --- a/packages/main/src/SegmentedButtonItem.ts +++ b/packages/main/src/SegmentedButtonItem.ts @@ -2,6 +2,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import Integer from "@ui5/webcomponents-base/dist/types/Integer.js"; +import type { ISegmentedButtonItem } from "./Interfaces"; import SegmentedButtonItemTemplate from "./generated/templates/SegmentedButtonItemTemplate.lit.js"; import ToggleButton from "./ToggleButton.js"; @@ -27,12 +28,9 @@ import { SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defa * import "@ui5/webcomponents/dist/SegmentedButtonItem"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.SegmentedButtonItem - * @extends sap.ui.webc.main.ToggleButton + * @extends ToggleButton * @abstract - * @tagname ui5-segmented-button-item - * @implements sap.ui.webc.main.ISegmentedButtonItem + * @implements {ISegmentedButtonItem} * @public */ @customElement({ @@ -40,13 +38,12 @@ import { SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defa template: SegmentedButtonItemTemplate, dependencies: [Icon], }) -class SegmentedButtonItem extends ToggleButton { +class SegmentedButtonItem extends ToggleButton implements ISegmentedButtonItem { /** * Note: The property is inherited and not supported. If set, it won't take any effect. * - * @type {sap.ui.webc.main.types.ButtonDesign} - * @defaultvalue "Default" - * @name sap.ui.webc.main.SegmentedButtonItem.prototype.design + * @type {ButtonDesign} + * @default "Default" * @public */ @property({ type: ButtonDesign, defaultValue: ButtonDesign.Default }) @@ -56,8 +53,7 @@ class SegmentedButtonItem extends ToggleButton { * Note: The property is inherited and not supported. If set, it won't take any effect. * * @type {boolean} - * @defaultvalue false - * @name sap.ui.webc.main.SegmentedButtonItem.prototype.iconEnd + * @default false * @public */ @property({ type: Boolean }) @@ -67,8 +63,7 @@ class SegmentedButtonItem extends ToggleButton { * Note: The property is inherited and not supported. If set, it won't take any effect. * * @type {boolean} - * @defaultvalue false - * @name sap.ui.webc.main.SegmentedButtonItem.prototype.submits + * @default false * @public */ @property({ type: Boolean }) @@ -77,8 +72,8 @@ class SegmentedButtonItem extends ToggleButton { /** * Defines the index of the item inside of the SegmentedButton. * - * @type {sap.ui.webc.base.types.Integer} - * @defaultvalue 0 + * @type {Integer} + * @default 0 * @private */ @property({ validator: Integer, defaultValue: 0 }) @@ -87,8 +82,8 @@ class SegmentedButtonItem extends ToggleButton { /** * Defines how many items are inside of the SegmentedButton. * - * @type {sap.ui.webc.base.types.Integer} - * @defaultvalue 0 + * @type {Integer} + * @default 0 * @private */ @property({ validator: Integer, defaultValue: 0 }) diff --git a/packages/main/src/SplitButton.ts b/packages/main/src/SplitButton.ts index 4d2e89622258..322d9e077bcb 100644 --- a/packages/main/src/SplitButton.ts +++ b/packages/main/src/SplitButton.ts @@ -77,10 +77,7 @@ import SplitButtonCss from "./generated/themes/SplitButton.css.js"; * import "@ui5/webcomponents/dist/SplitButton.js"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.SplitButton - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-split-button + * @extends UI5Element * @public * @since 1.1.0 */ @@ -93,14 +90,12 @@ import SplitButtonCss from "./generated/themes/SplitButton.css.js"; }) /** * Fired when the user clicks on the default action. - * @event sap.ui.webc.main.SplitButton#click * @public */ @event("click") /** * Fired when the user clicks on the arrow action. - * @event sap.ui.webc.main.SplitButton#arrow-click * @public */ @event("arrow-click") @@ -114,8 +109,7 @@ class SplitButton extends UI5Element { * See all the available icons in the Icon Explorer. * * @type {string} - * @name sap.ui.webc.main.SplitButton.prototype.icon - * @defaultvalue "" + * @default "" * @public */ @property() @@ -125,8 +119,7 @@ class SplitButton extends UI5Element { * Defines the icon to be displayed in active state as graphical element within the component. * * @type {string} - * @name sap.ui.webc.main.SplitButton.prototype.activeIcon - * @defaultvalue "" + * @default "" * @public */ @property() @@ -135,9 +128,8 @@ class SplitButton extends UI5Element { /** * Defines the component design. * - * @type {sap.ui.webc.main.types.ButtonDesign} - * @name sap.ui.webc.main.SplitButton.prototype.design - * @defaultvalue "Default" + * @type {ButtonDesign} + * @default "Default" * @public */ @property({ type: ButtonDesign, defaultValue: ButtonDesign.Default }) @@ -149,8 +141,7 @@ class SplitButton extends UI5Element { * focused, and it is not in the tab chain. * * @type {boolean} - * @name sap.ui.webc.main.SplitButton.prototype.disabled - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -160,8 +151,7 @@ class SplitButton extends UI5Element { * Defines the accessible ARIA name of the component. * * @type {string} - * @name sap.ui.webc.main.SplitButton.prototype.accessibleName - * @defaultvalue: "" + * @default: "" * @public */ @property({ defaultValue: undefined }) @@ -170,7 +160,7 @@ class SplitButton extends UI5Element { /** * Indicates if the elements is on focus * @type {boolean} - * @defaultvalue false + * @default false * @private */ @property({ type: Boolean }) @@ -188,7 +178,7 @@ class SplitButton extends UI5Element { /** * Defines the tabIndex of the component. * @type {string} - * @defaultvalue "" + * @default "" * @private */ @property({ defaultValue: "0", noAttribute: true }) @@ -197,7 +187,7 @@ class SplitButton extends UI5Element { /** * Indicates if there is Space key pressed * @type {boolean} - * @defaultvalue false + * @default false * @private */ @property({ type: Boolean, noAttribute: true }) @@ -206,7 +196,7 @@ class SplitButton extends UI5Element { /** * Indicates if there is SHIFT or ESCAPE key pressed * @type {boolean} - * @defaultvalue false + * @default false * @private */ @property({ type: Boolean, noAttribute: true }) @@ -215,7 +205,7 @@ class SplitButton extends UI5Element { /** * Defines the active state of the text button * @type {boolean} - * @defaultvalue false + * @default false * @private */ @property({ type: Boolean, noAttribute: true }) @@ -224,7 +214,7 @@ class SplitButton extends UI5Element { /** * Defines the icon of the text button * @type {string} - * @defaultvalue "" + * @default "" * @private */ @property({ noAttribute: true }) @@ -233,7 +223,7 @@ class SplitButton extends UI5Element { /** * Defines the active state of the arrow button * @type {boolean} - * @defaultvalue false + * @default false * @private */ @property({ type: Boolean, noAttribute: true }) @@ -245,8 +235,6 @@ class SplitButton extends UI5Element { * 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.SplitButton.prototype.default - * @slot * @public */ @slot({ type: Node, "default": true }) diff --git a/packages/main/src/StepInput.ts b/packages/main/src/StepInput.ts index 1e378eceba49..aaf3a5ec0e49 100644 --- a/packages/main/src/StepInput.ts +++ b/packages/main/src/StepInput.ts @@ -86,10 +86,7 @@ const INITIAL_SPEED = 120; // milliseconds * import "@ui5/webcomponents/dist/StepInput.js"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.StepInput - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-step-input + * @extends UI5Element * @since 1.0.0-rc.13 * @public */ @@ -106,7 +103,6 @@ const INITIAL_SPEED = 120; // milliseconds /** * Fired when the input operation has finished by pressing Enter or on focusout. * - * @event sap.ui.webc.main.StepInput#change * @public */ @event("change") @@ -114,9 +110,8 @@ class StepInput extends UI5Element implements IFormElement { /** * Defines a value of the component. * - * @name sap.ui.webc.main.StepInput.prototype.value - * @type {sap.ui.webc.base.types.Float} - * @defaultvalue 0 + * @type {Float} + * @default 0 * @public */ @property({ validator: Float, defaultValue: 0 }) @@ -125,8 +120,7 @@ class StepInput extends UI5Element implements IFormElement { /** * Defines a minimum value of the component. * - * @name sap.ui.webc.main.StepInput.prototype.min - * @type {sap.ui.webc.base.types.Float} + * @type {Float} * @public */ @property({ validator: Float }) @@ -135,8 +129,7 @@ class StepInput extends UI5Element implements IFormElement { /** * Defines a maximum value of the component. * - * @name sap.ui.webc.main.StepInput.prototype.max - * @type {sap.ui.webc.base.types.Float} + * @type {Float} * @public */ @property({ validator: Float }) @@ -145,9 +138,8 @@ class StepInput extends UI5Element implements IFormElement { /** * Defines a step of increasing/decreasing the value of the component. * - * @name sap.ui.webc.main.StepInput.prototype.step - * @type {sap.ui.webc.base.types.Float} - * @defaultvalue 1 + * @type {Float} + * @default 1 * @public */ @property({ validator: Float, defaultValue: 1 }) @@ -156,9 +148,8 @@ class StepInput extends UI5Element implements IFormElement { /** * Defines the value state of the component. * - * @name sap.ui.webc.main.StepInput.prototype.valueState - * @type {sap.ui.webc.base.types.ValueState} - * @defaultvalue "None" + * @type {ValueState} + * @default "None" * @public */ @property({ type: ValueState, defaultValue: ValueState.None }) @@ -167,9 +158,8 @@ class StepInput extends UI5Element implements IFormElement { /** * Defines whether the component is required. * - * @name sap.ui.webc.main.StepInput.prototype.required * @type {boolean} - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -178,9 +168,8 @@ class StepInput extends UI5Element implements IFormElement { /** * Determines whether the component is displayed as disabled. * - * @name sap.ui.webc.main.StepInput.prototype.disabled * @type {boolean} - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -189,9 +178,8 @@ class StepInput extends UI5Element implements IFormElement { /** * Determines whether the component is displayed as read-only. * - * @name sap.ui.webc.main.StepInput.prototype.readonly * @type {boolean} - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -205,9 +193,8 @@ class StepInput extends UI5Element implements IFormElement { * Note: When no placeholder is set, the format pattern is displayed as a placeholder. * Passing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern. * - * @name sap.ui.webc.main.StepInput.prototype.placeholder * @type {string} - * @defaultvalue undefined + * @default undefined * @public */ @property({ defaultValue: undefined }) @@ -225,9 +212,8 @@ class StepInput extends UI5Element implements IFormElement { * will be created inside the component so that it can be submitted as * part of an HTML form. Do not use this property unless you need to submit a form. * - * @name sap.ui.webc.main.StepInput.prototype.name * @type {string} - * @defaultvalue "" + * @default "" * @public */ @property() @@ -236,9 +222,8 @@ class StepInput extends UI5Element implements IFormElement { /** * Determines the number of digits after the decimal point of the component. * - * @name sap.ui.webc.main.StepInput.prototype.valuePrecision - * @type {sap.ui.webc.base.types.Integer} - * @defaultvalue 0 + * @type {Integer} + * @default 0 * @public */ @property({ validator: Integer, defaultValue: 0 }) @@ -247,7 +232,6 @@ class StepInput extends UI5Element implements IFormElement { /** * Defines the accessible ARIA name of the component. * - * @name sap.ui.webc.main.StepInput.prototype.accessibleName * @type {string} * @public * @since 1.0.0-rc.15 @@ -258,9 +242,8 @@ class StepInput extends UI5Element implements IFormElement { /** * Receives id(or many ids) of the elements that label the component. * - * @name sap.ui.webc.main.StepInput.prototype.accessibleNameRef * @type {string} - * @defaultvalue "" + * @default "" * @public * @since 1.0.0-rc.15 */ @@ -307,7 +290,6 @@ class StepInput extends UI5Element implements IFormElement { * when the component is in Information, Warning or Error value state. * @type {HTMLElement} * @slot - * @name sap.ui.webc.main.StepInput.prototype.valueStateMessage * @public */ @slot() @@ -458,6 +440,7 @@ class StepInput extends UI5Element implements IFormElement { * Value modifier - modifies the value of the component, validates the new value and enables/disables increment and * decrement buttons according to the value and min/max values (if set). Fires change event when requested * + * @private * @param {Float} modifier modifies the value of the component with the given modifier (positive or negative) * @param {boolean} fireChangeEvent if true, fires change event when the value is changed */ @@ -579,6 +562,7 @@ class StepInput extends UI5Element implements IFormElement { /** * Called when the increment or decrement button is pressed and held to set new value. + * @private * @param {boolean} increment - is this the increment button or not so the values should be spin accordingly up or down * @param {boolean} resetVariables - whether to reset the spin-related variables or not */ diff --git a/packages/main/src/Switch.ts b/packages/main/src/Switch.ts index d5086456ae37..0d13ca0d2ba4 100644 --- a/packages/main/src/Switch.ts +++ b/packages/main/src/Switch.ts @@ -59,10 +59,7 @@ import switchCss from "./generated/themes/Switch.css.js"; * import "@ui5/webcomponents/dist/Switch"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.Switch - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-switch + * @extends UI5Element * @public * @since 0.8.0 */ @@ -78,7 +75,6 @@ import switchCss from "./generated/themes/Switch.css.js"; * Fired when the component checked state changes. * * @public - * @event sap.ui.webc.main.Switch#change */ @event("change") class Switch extends UI5Element implements IFormElement { @@ -89,9 +85,8 @@ class Switch extends UI5Element implements IFormElement { * positive and negative icons will replace the textOn and textOff. * * @public - * @type {sap.ui.webc.main.types.SwitchDesign} - * @name sap.ui.webc.main.Switch.prototype.design - * @defaultValue "Textual" + * @type {SwitchDesign} + * @default "Textual" */ @property({ type: SwitchDesign, defaultValue: SwitchDesign.Textual }) design!: `${SwitchDesign}`; @@ -102,8 +97,7 @@ class Switch extends UI5Element implements IFormElement { * Note: The property can be changed with user interaction, * either by cliking the component, or by pressing the Enter or Space key. * @type {boolean} - * @name sap.ui.webc.main.Switch.prototype.checked - * @defaultvalue false + * @default false * @formEvents change * @formProperty * @public @@ -117,8 +111,7 @@ class Switch extends UI5Element implements IFormElement { * Note: A disabled component is noninteractive. * * @type {boolean} - * @name sap.ui.webc.main.Switch.prototype.disabled - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -131,8 +124,7 @@ class Switch extends UI5Element implements IFormElement { * Note: We recommend using short texts, up to 3 letters (larger texts would be cut off). * * @type {string} - * @name sap.ui.webc.main.Switch.prototype.textOn - * @defaultvalue "" + * @default "" * @public */ @property() @@ -144,8 +136,7 @@ class Switch extends UI5Element implements IFormElement { * Note: We recommend using short texts, up to 3 letters (larger texts would be cut off). * * @type {string} - * @name sap.ui.webc.main.Switch.prototype.textOff - * @defaultvalue "" + * @default "" * @public */ @property() @@ -157,8 +148,7 @@ class Switch extends UI5Element implements IFormElement { * Note: We recommend that you set an accessibleNameRef pointing to an external label or at least an accessibleName. * Providing an accessibleNameRef or an accessibleName is mandatory in the cases when textOn and textOff properties aren't set. * @type {string} - * @name sap.ui.webc.main.Switch.prototype.accessibleName - * @defaultvalue: "" + * @default: "" * @public * @since 1.2.0 */ @@ -171,8 +161,7 @@ class Switch extends UI5Element implements IFormElement { * Note: We recommend that you set an accessibleNameRef pointing to an external label or at least an accessibleName. * Providing an accessibleNameRef or an accessibleName is mandatory in the cases when textOn and textOff properties aren't set. * @type {string} - * @name sap.ui.webc.main.Switch.prototype.accessibleNameRef - * @defaultvalue "" + * @default "" * @public * @since 1.1.0 */ @@ -184,8 +173,7 @@ class Switch extends UI5Element implements IFormElement { *
    * Note: If applicable an external label reference should always be the preferred option to provide context to the ui5-switch component over a tooltip. * @type {string} - * @name sap.ui.webc.main.Switch.prototype.tooltip - * @defaultvalue: "" + * @default: "" * @public * @since 1.9.0 */ @@ -196,8 +184,7 @@ class Switch extends UI5Element implements IFormElement { * Defines whether the component is required. * * @type {boolean} - * @name sap.ui.webc.main.Switch.prototype.required - * @defaultvalue false + * @default false * @public * @since 1.16.0 */ @@ -217,8 +204,7 @@ class Switch extends UI5Element implements IFormElement { * part of an HTML form. Do not use this property unless you need to submit a form. * * @type {string} - * @name sap.ui.webc.main.Switch.prototype.name - * @defaultvalue "" + * @default "" * @public * @since 1.16.0 */ @@ -229,7 +215,6 @@ class Switch extends UI5Element implements IFormElement { * The slot is used to render native input HTML element within Light DOM to enable form submit, when Switch is a part of HTML form. * * @type {HTMLElement[]} - * @slot * @private * @since 1.16.0 */ diff --git a/packages/main/src/TimePicker.ts b/packages/main/src/TimePicker.ts index 91741035657a..e74c918883a0 100644 --- a/packages/main/src/TimePicker.ts +++ b/packages/main/src/TimePicker.ts @@ -74,10 +74,7 @@ import { * import "@ui5/webcomponents/dist/TimePicker.js"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.TimePicker - * @extends sap.ui.webc.main.TimePickerBase - * @tagname ui5-time-picker + * @extends TimePickerBase * @public * @since 1.0.0-rc.6 */ @@ -92,8 +89,7 @@ class TimePicker extends TimePickerBase { * Passing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern. * * @type {string} - * @name sap.ui.webc.main.TimePicker.prototype.placeholder - * @defaultvalue undefined + * @default undefined * @public */ @property({ defaultValue: undefined }) @@ -108,8 +104,7 @@ class TimePicker extends TimePickerBase { * mm:ss -> 12:04 (only minutes and seconds) * * @type {string} - * @name sap.ui.webc.main.TimePicker.prototype.formatPattern - * @defaultvalue "" + * @default "" * @public */ @property() @@ -142,7 +137,6 @@ class TimePicker extends TimePickerBase { * @readonly * @type {Date} * @public - * @name sap.ui.webc.main.TimePicker.prototype.dateValue */ get dateValue() { return this.getFormat().parse(this._effectiveValue as string); diff --git a/packages/main/src/TimePickerBase.ts b/packages/main/src/TimePickerBase.ts index abbcab547b6d..69e62fb9ef27 100644 --- a/packages/main/src/TimePickerBase.ts +++ b/packages/main/src/TimePickerBase.ts @@ -60,9 +60,7 @@ type TimePickerBaseInputEventDetail = TimePickerBaseChangeInputEventDetail; * @class * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.TimePickerBase - * @extends sap.ui.webc.base.UI5Element + * @extends UI5Element * @public * @since 1.0.0-rc.6 */ @@ -86,17 +84,22 @@ type TimePickerBaseInputEventDetail = TimePickerBaseChangeInputEventDetail; /** * Fired when the input operation has finished by clicking the "OK" button or * when the text in the input field has changed and the focus leaves the input field. -* -* @event sap.ui.webc.main.TimePickerBase#change + * * @public * @param {string} value The submitted value. * @param {boolean} valid Indicator if the value is in correct format pattern and in valid range. */ @event("change", { detail: { + /** + * @public + */ value: { type: String, }, + /** + * @public + */ valid: { type: Boolean, }, @@ -106,16 +109,21 @@ type TimePickerBaseInputEventDetail = TimePickerBaseChangeInputEventDetail; /** * Fired when the value of the ui5-time-picker is changed at each key stroke. * - * @event sap.ui.webc.main.TimePickerBase#input * @public * @param {string} value The current value. * @param {boolean} valid Indicator if the value is in correct format pattern and in valid range. */ @event("input", { detail: { + /** + * @public + */ value: { type: String, }, + /** + * @public + */ valid: { type: Boolean, }, @@ -126,8 +134,7 @@ class TimePickerBase extends UI5Element { * Defines a formatted time value. * * @type {string} - * @name sap.ui.webc.main.TimePickerBase.prototype.value - * @defaultvalue undefined + * @default undefined * @formEvents change input * @formProperty * @public @@ -147,9 +154,8 @@ class TimePickerBase extends UI5Element { *
  • Information
    • * * - * @type {sap.ui.webc.base.types.ValueState} - * @name sap.ui.webc.main.TimePickerBase.prototype.valueState - * @defaultvalue "None" + * @type {ValueState} + * @default "None" * @public */ @property({ type: ValueState, defaultValue: ValueState.None }) @@ -159,8 +165,7 @@ class TimePickerBase extends UI5Element { * Determines whether the ui5-time-picker is displayed as disabled. * * @type {boolean} - * @name sap.ui.webc.main.TimePickerBase.prototype.disabled - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -170,8 +175,7 @@ class TimePickerBase extends UI5Element { * Determines whether the ui5-time-picker is displayed as readonly. * * @type {boolean} - * @name sap.ui.webc.main.TimePickerBase.prototype.readonly - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -192,7 +196,6 @@ class TimePickerBase extends UI5Element { * Note: The valueStateMessage would be displayed, * when the ui5-time-picker is in Information, Warning or Error value state. * @type {HTMLElement} - * @name sap.ui.webc.main.TimePickerBase.prototype.valueStateMessage * @since 1.0.0-rc.8 * @slot * @public @@ -249,10 +252,7 @@ class TimePickerBase extends UI5Element { /** * Opens the picker. - * @async * @public - * @method - * @name sap.ui.webc.main.TimePickerBase#openPicker * @returns {Promise} Resolves when the picker is open */ async openPicker() { @@ -264,8 +264,6 @@ class TimePickerBase extends UI5Element { /** * Closes the picker * @public - * @method - * @name sap.ui.webc.main.TimePickerBase#closePicker * @returns {Promise} Resolves when the picker is closed */ async closePicker() { @@ -285,8 +283,6 @@ class TimePickerBase extends UI5Element { /** * Checks if the picker is open * @public - * @method - * @name sap.ui.webc.main.TimePickerBase#isOpen * @returns {boolean} */ isOpen() { @@ -310,10 +306,7 @@ class TimePickerBase extends UI5Element { /** * Opens the Inputs popover. - * @async * @private - * @method - * @name sap.ui.webc.main.TimePickerBase#openInputsPopover * @returns {Promise} Resolves when the Inputs popover is open */ async openInputsPopover() { @@ -326,8 +319,6 @@ class TimePickerBase extends UI5Element { /** * Closes the Inputs popover * @private - * @method - * @name sap.ui.webc.main.TimePickerBase#closeInputsPopover * @returns {Promise} Resolves when the Inputs popover is closed */ async closeInputsPopover() { @@ -346,8 +337,6 @@ class TimePickerBase extends UI5Element { /** * Checks if the inputs popover is open * @private - * @method - * @name sap.ui.webc.main.TimePickerBase#isInputsPopoverOpen * @returns {boolean} */ isInputsPopoverOpen() { @@ -515,8 +504,6 @@ class TimePickerBase extends UI5Element { * according to the formatPattern property of the TimePicker instance * @param {Date} date A Java Script date object to be formatted as string * @public - * @method - * @name sap.ui.webc.main.TimePickerBase#formatValue * @returns {string} */ formatValue(date: Date) { @@ -530,8 +517,6 @@ class TimePickerBase extends UI5Element { * Note: an empty string is considered as valid value. * @param {string} value The value to be tested against the current date format * @public - * @method - * @name sap.ui.webc.main.TimePickerBase#isValid * @returns {boolean} */ isValid(value: string | undefined) { diff --git a/packages/main/src/TimePickerClock.ts b/packages/main/src/TimePickerClock.ts index 9804484e1090..b07d6e35e64d 100644 --- a/packages/main/src/TimePickerClock.ts +++ b/packages/main/src/TimePickerClock.ts @@ -80,10 +80,7 @@ const CLOCK_MIDDOT_CLASS = "ui5-tp-clock-mid-dot"; * import "@ui5/webcomponents/dist/TimePickerClock.js"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.TimePickerClock - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-time-picker-clock + * @extends UI5Element * @since 1.15.0 * @private */ @@ -97,15 +94,23 @@ const CLOCK_MIDDOT_CLASS = "ui5-tp-clock-mid-dot"; /** * Fired when a value of clock is changed. * - * @event sap.ui.webc.main.TimePickerClock#change * @param { integer } value The new value of the clock. * @param { string } stringValue The new value of the clock, as string, zero-prepended when necessary. * @param { boolean } finalChange true when a value is selected and confirmed, false when a value is only selected but not confirmed. */ @event("change", { detail: { + /** + * @public + */ value: { type: Integer }, + /** + * @public + */ stringValue: { type: String }, + /** + * @public + */ finalChange: { type: Boolean }, }, }) @@ -114,9 +119,8 @@ class TimePickerClock extends UI5Element { /** * Determines whether the component is displayed as disabled. * - * @name sap.ui.webc.main.TimePickerClock.prototype.disabled * @type {boolean} - * @defaultvalue false + * @default false */ @property({ type: Boolean }) disabled!: boolean; @@ -124,9 +128,8 @@ class TimePickerClock extends UI5Element { /** * Determines whether the component is active (visible). * - * @name sap.ui.webc.main.TimePickerClock.prototype.active * @type {boolean} - * @defaultvalue false + * @default false */ @property({ type: Boolean }) active!: boolean; @@ -134,9 +137,8 @@ class TimePickerClock extends UI5Element { /** * Minimum item value for the outer circle of the clock. * - * @name sap.ui.webc.main.TimePickerClock.prototype.itemMin * @type {integer} - * @defaultvalue -1 + * @default -1 */ @property({ validator: Integer, defaultValue: -1 }) itemMin!: number; @@ -144,9 +146,8 @@ class TimePickerClock extends UI5Element { /** * Maximum item value for the outer circle of the clock. * - * @name sap.ui.webc.main.TimePickerClock.prototype.itemMax * @type {integer} - * @defaultvalue -1 + * @default -1 */ @property({ validator: Integer, defaultValue: -1 }) itemMax!: number; @@ -155,9 +156,8 @@ class TimePickerClock extends UI5Element { * If set to true, an inner circle is displayed. * The first item value of the inner circle will be itemMax + 1 * - * @name sap.ui.webc.main.TimePickerClock.prototype.showInnerCircle * @type {boolean} - * @defaultvalue false + * @default false */ @property({ type: Boolean }) showInnerCircle!: boolean; @@ -165,9 +165,8 @@ class TimePickerClock extends UI5Element { /** * Label of the clock dial - for example, 'Hours', 'Minutes', or 'Seconds'. * - * @name sap.ui.webc.main.TimePickerClock.prototype.label * @type {string} - * @defaultvalue undefined + * @default undefined */ @property({ type: String, defaultValue: undefined }) label?: string; @@ -176,9 +175,8 @@ class TimePickerClock extends UI5Element { * If set to true, a surrounding circle with markers (dots) will be hidden. * (for example, on the 'Minutes' clock-dial, markers represent minutes). * - * @name sap.ui.webc.main.TimePickerClock.prototype.hideFractions * @type {boolean} - * @defaultvalue false + * @default false */ @property({ type: Boolean }) hideFractions!: boolean; @@ -188,9 +186,8 @@ class TimePickerClock extends UI5Element { * the last item from outer circle will be replaced; if there is an inner circle too, the last * item of inner circle will be replaced. Usually, the last item '24' is replaced with '0'. * - * @name sap.ui.webc.main.TimePickerClock.prototype.lastItemReplacement * @type {integer} - * @defaultvalue -1 + * @default -1 */ @property({ validator: Integer, defaultValue: -1 }) lastItemReplacement!: number; @@ -198,9 +195,8 @@ class TimePickerClock extends UI5Element { /** * Prepend with zero flag. If true, values less than 10 will be prepend with 0. * - * @name sap.ui.webc.main.TimePickerClock.prototype.prependZero * @type {boolean} - * @defaultvalue false + * @default false */ @property({ type: Boolean }) prependZero!: boolean; @@ -208,9 +204,8 @@ class TimePickerClock extends UI5Element { /** * The currently selected value of the clock. * - * @name sap.ui.webc.main.TimePickerClock.prototype.selectedValue * @type {integer} - * @defaultvalue -1 + * @default -1 */ @property({ validator: Integer, defaultValue: -1 }) selectedValue!: number; @@ -221,9 +216,8 @@ class TimePickerClock extends UI5Element { * The default display step is 5 which means minutes and seconds are displayed as "0", "5", "10", etc. * For hours the display step must be set to 1. * - * @name sap.ui.webc.main.TimePickerClock.prototype.displayStep * @type {integer} - * @defaultvalue 5 + * @default 5 */ @property({ validator: Integer, defaultValue: 5 }) displayStep!: number; @@ -234,9 +228,8 @@ class TimePickerClock extends UI5Element { * - if the clock displays hours - 1 unit = 1 hour * - if the clock displays minutes/seconds - 1 unit = 1 minute/second * - * @name sap.ui.webc.main.TimePickerClock.prototype.valueStep * @type {integer} - * @defaultvalue 1 + * @default 1 */ @property({ validator: Integer, defaultValue: 1 }) valueStep!: number; @@ -269,7 +262,7 @@ class TimePickerClock extends UI5Element { * Mousedown or Touchstart event flag. * * @type {boolean} - * @defaultvalue false + * @default false */ @property({ type: Boolean, noAttribute: true }) _mouseOrTouchDown!: boolean; @@ -278,7 +271,7 @@ class TimePickerClock extends UI5Element { * Cancel Mouseout flag. * * @type {boolean} - * @defaultvalue false + * @default false */ @property({ type: Boolean, noAttribute: true }) _cancelTouchOut!: boolean; @@ -287,7 +280,7 @@ class TimePickerClock extends UI5Element { * Calculated selected value of the clock during interactions. * * @type {integer} - * @defaultvalue -1 + * @default -1 */ @property({ validator: Integer, defaultValue: -1, noAttribute: true }) _selectedValue!: number; @@ -296,7 +289,7 @@ class TimePickerClock extends UI5Element { * Selected value of the clock during interactions. * * @type {integer} - * @defaultvalue -1 + * @default -1 */ @property({ validator: Integer, defaultValue: -1, noAttribute: true }) _movSelectedValue!: number; @@ -305,7 +298,7 @@ class TimePickerClock extends UI5Element { * Hovered value of the clock during interactions. * * @type {integer} - * @defaultvalue -1 + * @default -1 */ @property({ validator: Integer, defaultValue: -1, noAttribute: true }) _hoveredValue!: number; @@ -314,7 +307,7 @@ class TimePickerClock extends UI5Element { * Previously hovered value of the clock during interactions. * * @type {integer} - * @defaultvalue -1 + * @default -1 */ @property({ validator: Integer, defaultValue: -1, noAttribute: true }) _prevHoveredValue!: number; @@ -323,7 +316,7 @@ class TimePickerClock extends UI5Element { * Animation in progress flag. * * @type {boolean} - * @defaultvalue false + * @default false */ @property({ type: Boolean, noAttribute: true }) _animationInProgress!: boolean; diff --git a/packages/main/src/TimePickerInternals.ts b/packages/main/src/TimePickerInternals.ts index 6390627eb0d8..8368f4fba1da 100644 --- a/packages/main/src/TimePickerInternals.ts +++ b/packages/main/src/TimePickerInternals.ts @@ -75,10 +75,8 @@ const TYPE_COOLDOWN_DELAY = 1000; // Cooldown delay; 0 = disabled cooldown * * @constructor * @author SAP SE - * @alias sap.ui.webc.main.TimePickerInternals - * @extends sap.ui.webc.base.UI5Element + * @extends UI5Element * @abstract - * @tagname ui5-time-picker-internals * @since 1.15.0 * @private */ @@ -101,8 +99,7 @@ class TimePickerInternals extends UI5Element { * Defines a formatted time value. * * @type {string} - * @name sap.ui.webc.main.TimePickerInternals.prototype.value - * @defaultvalue undefined + * @default undefined * @public */ @property({ defaultValue: undefined }) @@ -117,8 +114,7 @@ class TimePickerInternals extends UI5Element { * mm:ss -> 12:04 (only minutes and seconds) * @type {string} - * @name sap.ui.webc.main.TimePickerInternals.prototype.formatPattern - * @defaultvalue "" + * @default "" * @public */ @property() @@ -128,7 +124,7 @@ class TimePickerInternals extends UI5Element { * The index of the active Clock/TogleSpinButton. * * @type {integer} - * @defaultvalue 0 + * @default 0 * @private */ @property({ validator: Integer, defaultValue: 0, noAttribute: true }) diff --git a/packages/main/src/TimeSelection.ts b/packages/main/src/TimeSelection.ts index 69574e923006..c1c614a20f1c 100644 --- a/packages/main/src/TimeSelection.ts +++ b/packages/main/src/TimeSelection.ts @@ -52,10 +52,7 @@ type TimeSelectionSliderChangeEventDetail = { * @class * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.TimeSelection - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-time-selection + * @extends UI5Element * @private * @since 1.0.0-rc.12 */ @@ -91,8 +88,7 @@ class TimeSelection extends UI5Element { * Defines a formatted time value. * * @type {string} - * @name sap.ui.webc.main.TimeSelection.prototype.value - * @defaultvalue undefined + * @default undefined * @public */ @property({ defaultValue: undefined }) @@ -107,8 +103,7 @@ class TimeSelection extends UI5Element { * mm:ss -> 12:04 (only minutes and seconds) * * @type {string} - * @name sap.ui.webc.main.TimeSelection.prototype.formatPattern - * @defaultvalue "" + * @default "" * @public */ @property() @@ -118,7 +113,6 @@ class TimeSelection extends UI5Element { * Hides the hours slider regardless of formatPattern * This property is only needed for the duration picker use case which requires non-standard slider combinations * @public - * @name sap.ui.webc.main.TimeSelection.prototype.hideHours * @type {boolean} */ @property({ type: Boolean }) @@ -128,7 +122,6 @@ class TimeSelection extends UI5Element { * Hides the minutes slider regardless of formatPattern * This property is only needed for the duration picker use case which requires non-standard slider combinations * @public - * @name sap.ui.webc.main.TimeSelection.prototype.hideMinutes * @type {boolean} */ @property({ type: Boolean }) @@ -138,7 +131,6 @@ class TimeSelection extends UI5Element { * Hides the seconds slider regardless of formatPattern * This property is only needed for the duration picker use case which requires non-standard slider combinations * @public - * @name sap.ui.webc.main.TimeSelection.prototype.hideSeconds * @type {boolean} */ @property({ type: Boolean }) @@ -147,7 +139,6 @@ class TimeSelection extends UI5Element { /** * The maximum number of hours to be displayed for the hours slider (only needed for the duration picker use case) * @public - * @name sap.ui.webc.main.TimeSelection.prototype.maxHours * @type {Integer} */ @property({ validator: Integer }) @@ -156,7 +147,6 @@ class TimeSelection extends UI5Element { /** * The maximum number of minutes to be displayed for the minutes slider (only needed for the duration picker use case) * @public - * @name sap.ui.webc.main.TimeSelection.prototype.maxMinutes * @type {Integer} */ @property({ validator: Integer }) @@ -165,7 +155,6 @@ class TimeSelection extends UI5Element { /** * The maximum number of seconds to be displayed for the seconds slider (only needed for the duration picker use case) * @public - * @name sap.ui.webc.main.TimeSelection.prototype.maxSeconds * @type {Integer} */ @property({ validator: Integer }) diff --git a/packages/main/src/TimeSelectionClocks.ts b/packages/main/src/TimeSelectionClocks.ts index 94ca963443df..c6b587782691 100644 --- a/packages/main/src/TimeSelectionClocks.ts +++ b/packages/main/src/TimeSelectionClocks.ts @@ -46,11 +46,8 @@ import TimeSelectionClocksCss from "./generated/themes/TimeSelectionClocks.css.j * This component should not be used separately. * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.TimeSelectionClocks - * @extends sap.ui.webc.main.TimePickerInternals + * @extends TimePickerInternals * @abstract - * @tagname ui5-time-selection-clocks * @since 1.15.0 * @private */ diff --git a/packages/main/src/TimeSelectionInputs.ts b/packages/main/src/TimeSelectionInputs.ts index 81d3c73e90fe..28caa8dd81ac 100644 --- a/packages/main/src/TimeSelectionInputs.ts +++ b/packages/main/src/TimeSelectionInputs.ts @@ -39,11 +39,8 @@ import TimeSelectionInputsCss from "./generated/themes/TimeSelectionInputs.css.j * This component should not be used separately. * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.TimeSelectionInputs - * @extends sap.ui.webc.main.TimePickerInternals + * @extends TimePickerInternals * @abstract - * @tagname ui5-time-selection-inputs * @since 1.18.0 * @private */ @@ -242,7 +239,6 @@ class TimeSelectionInputs extends TimePickerInternals { * * @param {number} num A number to format * @param {boolean} prependZero Whether to prepend with zero or not - * @param {number} max Max value of the number for this clock * @returns {string} Formatted value * @private */ diff --git a/packages/main/src/ToggleButton.ts b/packages/main/src/ToggleButton.ts index 690fde705852..2e720e5a1a0c 100644 --- a/packages/main/src/ToggleButton.ts +++ b/packages/main/src/ToggleButton.ts @@ -28,10 +28,7 @@ import toggleBtnCss from "./generated/themes/ToggleButton.css.js"; * import "@ui5/webcomponents/dist/ToggleButton"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.ToggleButton - * @extends sap.ui.webc.main.Button - * @tagname ui5-toggle-button + * @extends Button * @public */ @customElement({ @@ -44,8 +41,7 @@ class ToggleButton extends Button { * Determines whether the component is displayed as pressed. * * @type {boolean} - * @defaultvalue false - * @name sap.ui.webc.main.ToggleButton.prototype.pressed + * @default false * @public */ @property({ type: Boolean }) diff --git a/packages/main/src/ToggleSpinButton.ts b/packages/main/src/ToggleSpinButton.ts index d7b2234439c9..b1ffccdae944 100644 --- a/packages/main/src/ToggleSpinButton.ts +++ b/packages/main/src/ToggleSpinButton.ts @@ -19,11 +19,8 @@ import ToggleSpinButtonTemplate from "./generated/templates/ToggleSpinButtonTemp * have spin button look and feel from accessibility point of view. This component should not be used separately. * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.ToggleSpinButton - * @extends sap.ui.webc.base.UI5Element + * @extends ToggleButton * @abstract - * @tagname ui5-toggle-spin-button * @since 1.15.0 * @private */ @@ -38,7 +35,6 @@ class ToggleSpinButton extends ToggleButton { /** * Defines the ARIA valuemin of the component. * - * @name sap.ui.webc.main.ToggleSpinButton.prototype.valueMin * @type {Integer} * @defaultvalue -1 */ diff --git a/packages/main/src/WheelSlider.ts b/packages/main/src/WheelSlider.ts index 35b58218fc4f..717cbf36fdb5 100644 --- a/packages/main/src/WheelSlider.ts +++ b/packages/main/src/WheelSlider.ts @@ -38,10 +38,7 @@ type WheelSliderSelectEventDetail = { value: string }; * import "@ui5/webcomponents/dist/WheelSlider.js"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.WheelSlider - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-wheelslider + * @extends UI5Element * @public * @since 1.0.0-rc.6 */ @@ -54,10 +51,14 @@ type WheelSliderSelectEventDetail = { value: string }; }) /** * Fires when new value is selected. - * @event sap.ui.webc.main.WheelSlider#select + * @public + * @param {string} value The selected value. */ @event("select", { detail: { + /** + * @public + */ value: { type: String, }, @@ -66,13 +67,13 @@ type WheelSliderSelectEventDetail = { value: string }; /** * Fires when the wheel slider is expanded. - * @event sap.ui.webc.main.WheelSlider#expand + * @public */ @event("expand") /** * Fires when the wheel slider is collapsed. - * @event sap.ui.webc.main.WheelSlider#collapse + * @public */ @event("collapse") class WheelSlider extends UI5Element { @@ -83,8 +84,7 @@ class WheelSlider extends UI5Element { * focused, and it is not in the tab chain. * * @type {boolean} - * @name sap.ui.webc.main.WheelSlider.prototype.disabled - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -93,8 +93,7 @@ class WheelSlider extends UI5Element { /** * Defines the currently selected value * @type {string} - * @name sap.ui.webc.main.WheelSlider.prototype.value - * @defaultvalue "" + * @default "" * @public */ @property({ defaultValue: "0" }) @@ -103,8 +102,7 @@ class WheelSlider extends UI5Element { /** * Defines the label of the wheelslider. * @type {string} - * @name sap.ui.webc.main.WheelSlider.prototype.label - * @defaultvalue "" + * @default "" * @public */ @property({ defaultValue: "" }) @@ -113,8 +111,7 @@ class WheelSlider extends UI5Element { /** * Indicates if the wheelslider is expanded. * @type {boolean} - * @name sap.ui.webc.main.WheelSlider.prototype.expanded - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) @@ -123,8 +120,7 @@ class WheelSlider extends UI5Element { /** * Indicates if the wheelslider has a cyclic behaviour. * @type {boolean} - * @name sap.ui.webc.main.WheelSlider.prototype.cyclic - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) diff --git a/packages/main/src/YearPicker.ts b/packages/main/src/YearPicker.ts index c2a895387c28..227253995fb3 100644 --- a/packages/main/src/YearPicker.ts +++ b/packages/main/src/YearPicker.ts @@ -62,10 +62,7 @@ type YearPickerNavigateEventDetail = { * Displays years which can be selected. * * @constructor - * @author SAP SE - * @alias sap.ui.webc.main.YearPicker - * @extends sap.ui.webc.main.CalendarPart - * @tagname ui5-yearpicker + * @extends CalendarPart * @public */ @customElement({ @@ -76,14 +73,12 @@ type YearPickerNavigateEventDetail = { /** * Fired when the user selects a year via "Space", "Enter" or click. * @public - * @event sap.ui.webc.main.YearPicker#change */ @event("change") /** * Fired when the timestamp changes - the user navigates with the keyboard or clicks with the mouse. * @since 1.0.0-rc.9 * @public - * @event sap.ui.webc.main.YearPicker#navigate */ @event("navigate") class YearPicker extends CalendarPart implements ICalendarPicker { @@ -91,7 +86,6 @@ class YearPicker extends CalendarPart implements ICalendarPicker { * An array of UTC timestamps representing the selected date * or dates depending on the capabilities of the picker component. * @type {array} - * @name sap.ui.webc.main.YearPicker.prototype.selectedDates * @public */ @property({ diff --git a/packages/main/src/types/ButtonDesign.ts b/packages/main/src/types/ButtonDesign.ts index bd4a8e16bf9a..2217a1e23107 100644 --- a/packages/main/src/types/ButtonDesign.ts +++ b/packages/main/src/types/ButtonDesign.ts @@ -1,52 +1,42 @@ /** * Different Button designs. * - * @readonly - * @enum {string} * @public - * @author SAP SE - * @alias sap.ui.webc.main.types.ButtonDesign */ enum ButtonDesign { /** * default type (no special styling) * @public - * @type {Default} */ Default = "Default", /** * accept type (green button) * @public - * @type {Positive} */ Positive = "Positive", /** * reject style (red button) * @public - * @type {Negative} */ Negative = "Negative", /** * transparent type * @public - * @type {Transparent} */ Transparent = "Transparent", /** * emphasized type * @public - * @type {Emphasized} */ Emphasized = "Emphasized", /** * attention type * @public - * @type {Attention} */ Attention = "Attention", } diff --git a/packages/main/src/types/ButtonType.ts b/packages/main/src/types/ButtonType.ts index bad7f053645b..5ae9461983e2 100644 --- a/packages/main/src/types/ButtonType.ts +++ b/packages/main/src/types/ButtonType.ts @@ -1,31 +1,24 @@ /** * Determines if the button has special form-related functionality. * - * @readonly - * @enum {string} * @public - * @author SAP SE - * @alias sap.ui.webc.main.types.ButtonType */ enum ButtonType { /** * The button does not do anything special when inside a form * @public - * @type {Button} */ Button = "Button", /** * The button acts as a submit button (submits a form) * @public - * @type {Submit} */ Submit = "Submit", /** * The button acts as a reset button (resets a form) * @public - * @type {Reset} */ Reset = "Reset", } diff --git a/packages/main/src/types/CalendarPickersMode.ts b/packages/main/src/types/CalendarPickersMode.ts index 6f9cbea4e7da..afb943e0f2bb 100644 --- a/packages/main/src/types/CalendarPickersMode.ts +++ b/packages/main/src/types/CalendarPickersMode.ts @@ -1,32 +1,25 @@ /** * Defines which pickers the calendar is allowed to show - day/month/year, only month/year, or only year. * - * @class - * @enum {string} * @private - * @author SAP SE - * @alias sap.ui.webc.main.types.CalendarPickersMode */ enum CalendarPickersMode { /** * User can select days, months and years * @public - * @type {DAY_MONTH_YEAR} */ DAY_MONTH_YEAR = "DAY_MONTH_YEAR", /** * User can select months and years * @public - * @type {MONTH_YEAR} */ MONTH_YEAR = "MONTH_YEAR", /** * User can select years * @public - * @type {MONTH_YEAR} */ YEAR = "YEAR" } diff --git a/packages/main/src/types/CalendarSelectionMode.ts b/packages/main/src/types/CalendarSelectionMode.ts index 777e10d08ad7..bd75ca9cd319 100644 --- a/packages/main/src/types/CalendarSelectionMode.ts +++ b/packages/main/src/types/CalendarSelectionMode.ts @@ -1,31 +1,24 @@ /** * Different Calendar selection mode. * - * @readonly - * @enum {string} * @public - * @author SAP SE - * @alias sap.ui.webc.main.types.CalendarSelectionMode */ enum CalendarSelectionMode { /** * Only one date can be selected at a time * @public - * @type {Single} */ Single = "Single", /** * Several dates can be selected * @public - * @type {Multiple} */ Multiple = "Multiple", /** * A range defined by a start date and an end date can be selected * @public - * @type {Range} */ Range = "Range", } diff --git a/packages/main/src/types/HasPopup.ts b/packages/main/src/types/HasPopup.ts index 783a602a385e..f8d9a5874011 100644 --- a/packages/main/src/types/HasPopup.ts +++ b/packages/main/src/types/HasPopup.ts @@ -1,45 +1,36 @@ /** * Different types of HasPopup. * - * @readonly - * @enum {string} * @public - * @author SAP SE - * @alias sap.ui.webc.main.types.HasPopup */ enum HasPopup { /** * Dialog popup type. * @public - * @type {Dialog} */ Dialog = "Dialog", /** * Grid popup type. * @public - * @type {Grid} */ Grid = "Grid", /** * ListBox popup type. * @public - * @type {ListBox} */ ListBox = "ListBox", /** * Menu popup type. * @public - * @type {Menu} */ Menu = "Menu", /** * Tree popup type. * @public - * @type {Tree} */ Tree = "Tree", } diff --git a/packages/main/src/types/LinkDesign.ts b/packages/main/src/types/LinkDesign.ts index c40464f669f0..aab2ccf8b64d 100644 --- a/packages/main/src/types/LinkDesign.ts +++ b/packages/main/src/types/LinkDesign.ts @@ -1,31 +1,24 @@ /** * Different link designs. * - * @readonly - * @enum {string} * @public - * @author SAP SE - * @alias sap.ui.webc.main.types.LinkDesign */ enum LinkDesign { /** * default type (no special styling) * @public - * @type {Default} */ Default = "Default", /** * subtle type (appears as regular text, rather than a link) * @public - * @type {Subtle} */ Subtle = "Subtle", /** * emphasized type * @public - * @type {Emphasized} */ Emphasized = "Emphasized", } diff --git a/packages/main/src/types/SegmentedButtonMode.ts b/packages/main/src/types/SegmentedButtonMode.ts index d1cbde055198..86f7e34aa420 100644 --- a/packages/main/src/types/SegmentedButtonMode.ts +++ b/packages/main/src/types/SegmentedButtonMode.ts @@ -1,24 +1,18 @@ /** * Different SegmentedButton modes. * - * @readonly - * @enum {string} * @public - * @author SAP SE - * @alias sap.ui.webc.main.types.SegmentedButtonMode */ enum SegmentedButtonMode { /** * There is always one selected. Selecting one deselects the previous one. * @public - * @type {SingleSelect} */ SingleSelect = "SingleSelect", /** * Multiple items can be selected at a time. All items can be deselected. * @public - * @type {MultiSelect} */ MultiSelect = "MultiSelect", } diff --git a/packages/main/src/types/SwitchDesign.ts b/packages/main/src/types/SwitchDesign.ts index 10dc21cb7816..4b336668fa0f 100644 --- a/packages/main/src/types/SwitchDesign.ts +++ b/packages/main/src/types/SwitchDesign.ts @@ -1,24 +1,18 @@ /** * Different types of Switch designs. * - * @readonly - * @enum {string} * @public - * @author SAP SE - * @alias sap.ui.webc.main.types.SwitchDesign */ enum SwitchDesign { /** * Defines the Switch as Textual * @public - * @type {Textual} */ Textual = "Textual", /** * Defines the Switch as Graphical * @public - * @type {Graphical} */ Graphical = "Graphical", } diff --git a/packages/main/src/types/WrappingType.ts b/packages/main/src/types/WrappingType.ts index b1ebb6ed14fb..eebdd2c0f4a3 100644 --- a/packages/main/src/types/WrappingType.ts +++ b/packages/main/src/types/WrappingType.ts @@ -1,24 +1,18 @@ /** * Different types of wrapping. * - * @readonly - * @enum {string} * @public - * @author SAP SE - * @alias sap.ui.webc.main.types.WrappingType */ enum WrappingType { /** * The text will be truncated with an ellipsis. * @public - * @type {None} */ None = "None", /** * The text will wrap. The words will not be broken based on hyphenation. * @public - * @type {Normal} */ Normal = "Normal", } diff --git a/packages/tools/components-package/eslint.js b/packages/tools/components-package/eslint.js index 47c39bcd9cc2..0c6d4239b270 100644 --- a/packages/tools/components-package/eslint.js +++ b/packages/tools/components-package/eslint.js @@ -28,6 +28,7 @@ const overrides = tsMode ? [{ "@typescript-eslint/no-non-null-assertion": "off", "@typescript-eslint/no-empty-function": "off", "lines-between-class-members": "off", + "@typescript-eslint/no-empty-interface": "off", } }] : []; From ec5d441a0573fcf55362d56ae94600594a89105b Mon Sep 17 00:00:00 2001 From: Nikolay Hristov Date: Fri, 10 Nov 2023 14:23:29 +0200 Subject: [PATCH 02/12] docs: fix merge conflict --- packages/main/src/ColorPaletteItem.ts | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/packages/main/src/ColorPaletteItem.ts b/packages/main/src/ColorPaletteItem.ts index 25f095df8ce6..f0f44e7f23d2 100644 --- a/packages/main/src/ColorPaletteItem.ts +++ b/packages/main/src/ColorPaletteItem.ts @@ -49,20 +49,6 @@ class ColorPaletteItem extends UI5Element implements ITabbable, IColorPaletteIte @property({ validator: CSSColor }) value!: string; - /** - * Defines if the component is selected. - *

    - * Note: Only one item must be selected per ui5-color-palette. - * If more than one item is defined as selected, the last one would be considered as the selected one. - * - * @public - * @type {boolean} - * @default false - * @since 1.19.0 - */ - @property({ type: Boolean }) - selected!: boolean; - /** * Defines the tab-index of the element, helper information for the ItemNavigation. * @private From 4f8a400cc6c3845777791910bed33542c06db9a0 Mon Sep 17 00:00:00 2001 From: Nikolay Hristov Date: Tue, 14 Nov 2023 19:59:24 +0200 Subject: [PATCH 03/12] docs: adapt docs to updated specs --- packages/fiori/src/Bar.ts | 4 - packages/fiori/src/DynamicSideContent.ts | 7 -- packages/fiori/src/FilterItem.ts | 3 - packages/fiori/src/SortItem.ts | 2 - packages/fiori/src/Timeline.ts | 3 - packages/fiori/src/TimelineItem.ts | 8 -- packages/fiori/src/ViewSettingsDialog.ts | 19 ++--- packages/main/src/Button.ts | 11 --- packages/main/src/Calendar.ts | 8 +- packages/main/src/CalendarDate.ts | 1 - packages/main/src/CalendarHeader.ts | 4 - packages/main/src/CalendarPart.ts | 9 +-- packages/main/src/ColorPalette.ts | 7 -- packages/main/src/ColorPaletteItem.ts | 4 - packages/main/src/ColorPalettePopover.ts | 12 +-- packages/main/src/ColorPicker.ts | 3 - packages/main/src/DateComponentBase.ts | 6 -- packages/main/src/DatePicker.ts | 49 ++++-------- packages/main/src/DateRangePicker.ts | 9 +-- packages/main/src/DateTimePicker.ts | 4 +- packages/main/src/DayPicker.ts | 37 ++++----- packages/main/src/FileUploader.ts | 14 +--- packages/main/src/Link.ts | 10 --- packages/main/src/Menu.ts | 12 +-- packages/main/src/MenuItem.ts | 9 --- packages/main/src/MonthPicker.ts | 11 +-- packages/main/src/SegmentedButton.ts | 9 +-- packages/main/src/SegmentedButtonItem.ts | 5 -- packages/main/src/SplitButton.ts | 14 ---- packages/main/src/StepInput.ts | 23 +----- packages/main/src/Switch.ts | 11 --- packages/main/src/TimePicker.ts | 5 +- packages/main/src/TimePickerBase.ts | 41 +++++----- packages/main/src/TimePickerClock.ts | 95 +++++++++--------------- packages/main/src/TimePickerInternals.ts | 36 ++++----- packages/main/src/TimeSelection.ts | 10 +-- packages/main/src/TimeSelectionClocks.ts | 30 ++++---- packages/main/src/TimeSelectionInputs.ts | 26 +++---- packages/main/src/ToggleButton.ts | 1 - packages/main/src/ToggleSpinButton.ts | 4 - packages/main/src/WheelSlider.ts | 7 +- packages/main/src/YearPicker.ts | 9 +-- 42 files changed, 162 insertions(+), 430 deletions(-) diff --git a/packages/fiori/src/Bar.ts b/packages/fiori/src/Bar.ts index 983131d47a42..fa8d8432df7f 100644 --- a/packages/fiori/src/Bar.ts +++ b/packages/fiori/src/Bar.ts @@ -61,7 +61,6 @@ class Bar extends UI5Element implements IBar { /** * Defines the component's design. * - * @type {BarDesign} * @default "Header" * @public */ @@ -70,7 +69,6 @@ class Bar extends UI5Element implements IBar { /** * Defines the content at the start of the bar. - * @type {HTMLElement[]} * @public */ @slot({ type: HTMLElement }) @@ -78,7 +76,6 @@ class Bar extends UI5Element implements IBar { /** * Defines the content in the middle of the bar. - * @type {HTMLElement[]} * @public */ @slot({ type: HTMLElement, "default": true }) @@ -86,7 +83,6 @@ class Bar extends UI5Element implements IBar { /** * Defines the content at the end of the bar. - * @type {HTMLElement[]} * @public */ @slot({ type: HTMLElement }) diff --git a/packages/fiori/src/DynamicSideContent.ts b/packages/fiori/src/DynamicSideContent.ts index 8bab80ff33c6..1656dad1d686 100644 --- a/packages/fiori/src/DynamicSideContent.ts +++ b/packages/fiori/src/DynamicSideContent.ts @@ -155,7 +155,6 @@ class DynamicSideContent extends UI5Element { /** * Defines the visibility of the main content. * - * @type {boolean} * @default false * @public * @@ -166,7 +165,6 @@ class DynamicSideContent extends UI5Element { /** * Defines the visibility of the side content. * - * @type {boolean} * @default false * @public * @@ -186,7 +184,6 @@ class DynamicSideContent extends UI5Element { *
  • End
    • * * - * @type {SideContentPosition} * @default "End" * @public * @@ -208,7 +205,6 @@ class DynamicSideContent extends UI5Element { *
  • NeverShow
    • * * - * @type {SideContentVisibility} * @default "ShowAboveS" * @public * @@ -229,7 +225,6 @@ class DynamicSideContent extends UI5Element { *
  • OnMinimumWidth
    • * * - * @type {SideContentFallDown} * @default "OnMinimumWidth" * @public * @@ -243,7 +238,6 @@ class DynamicSideContent extends UI5Element { * except for phone, where the main and side contents are switching visibility * using the toggle method. * - * @type {boolean} * @default false * @public * @@ -278,7 +272,6 @@ class DynamicSideContent extends UI5Element { /** * Defines the side content. * - * @type {HTMLElement[]} * @slot * @public */ diff --git a/packages/fiori/src/FilterItem.ts b/packages/fiori/src/FilterItem.ts index 791393cb2e82..37c26856e44d 100644 --- a/packages/fiori/src/FilterItem.ts +++ b/packages/fiori/src/FilterItem.ts @@ -30,7 +30,6 @@ class FilterItem extends UI5Element implements IFilterItem { /** * Defines the text of the component. * - * @type {string} * @default "" * @public */ @@ -40,7 +39,6 @@ class FilterItem extends UI5Element implements IFilterItem { /** * Defines the additional text of the component. * - * @type {string} * @default "" * @public */ @@ -49,7 +47,6 @@ class FilterItem extends UI5Element implements IFilterItem { /** * Defines the values list. - * @type {IFilterItemOption[]} * @slot values * @public */ diff --git a/packages/fiori/src/SortItem.ts b/packages/fiori/src/SortItem.ts index 7cfb3e7ffccb..0a7afc158957 100644 --- a/packages/fiori/src/SortItem.ts +++ b/packages/fiori/src/SortItem.ts @@ -28,7 +28,6 @@ class SortItem extends UI5Element implements ISortItem { /** * Defines the text of the component. * - * @type {string} * @default "" * @public */ @@ -38,7 +37,6 @@ class SortItem extends UI5Element implements ISortItem { /** * Defines if the component is selected. * - * @type {boolean} * @default false * @public */ diff --git a/packages/fiori/src/Timeline.ts b/packages/fiori/src/Timeline.ts index 1e8df28b133c..eeb807b3c5f4 100644 --- a/packages/fiori/src/Timeline.ts +++ b/packages/fiori/src/Timeline.ts @@ -56,7 +56,6 @@ class Timeline extends UI5Element { *
  • Horizontal
    • * * - * @type {TimelineLayout} * @default "Vertical" * @since 1.0.0-rc.15 * @public @@ -67,7 +66,6 @@ class Timeline extends UI5Element { /** * Defines the accessible ARIA name of the component. * - * @type {string} * @default: "" * @public * @since 1.2.0 @@ -78,7 +76,6 @@ class Timeline extends UI5Element { /** * Determines the content of the ui5-timeline. * - * @type {ITimelineItem[]} * @public */ @slot({ type: HTMLElement, individualSlots: true, "default": true }) diff --git a/packages/fiori/src/TimelineItem.ts b/packages/fiori/src/TimelineItem.ts index 0edf098c4005..2ee046bd62dc 100644 --- a/packages/fiori/src/TimelineItem.ts +++ b/packages/fiori/src/TimelineItem.ts @@ -56,7 +56,6 @@ class TimelineItem extends UI5Element implements ITabbable, ITimelineItem { * * See all the available icons in the Icon Explorer. * - * @type {string} * @name sap.ui.webc.fiori.TimelineItem.prototype.icon * @default "" * @public @@ -67,7 +66,6 @@ class TimelineItem extends UI5Element implements ITabbable, ITimelineItem { /** * Defines the name of the item, displayed before the title-text. * - * @type {string} * @default "" * @public */ @@ -77,7 +75,6 @@ class TimelineItem extends UI5Element implements ITabbable, ITimelineItem { /** * Defines if the name is clickable. * - * @type {boolean} * @default false * @public */ @@ -87,7 +84,6 @@ class TimelineItem extends UI5Element implements ITabbable, ITimelineItem { /** * Defines the title text of the component. * - * @type {string} * @default "" * @public */ @@ -96,7 +92,6 @@ class TimelineItem extends UI5Element implements ITabbable, ITimelineItem { /** * Defines the subtitle text of the component. - * @type {string} * @default "" * @public */ @@ -109,7 +104,6 @@ class TimelineItem extends UI5Element implements ITabbable, ITimelineItem { /** * Defines the items orientation. * - * @type {TimelineLayout} * @default "Vertical" * @private */ @@ -119,7 +113,6 @@ class TimelineItem extends UI5Element implements ITabbable, ITimelineItem { /** * Defines the indicator line width. * - * @type {string} * @private */ @property() @@ -128,7 +121,6 @@ class TimelineItem extends UI5Element implements ITabbable, ITimelineItem { /** * Determines the description of the ui5-timeline-item. * - * @type {Node[]} * @slot * @public */ diff --git a/packages/fiori/src/ViewSettingsDialog.ts b/packages/fiori/src/ViewSettingsDialog.ts index 8b66d60cc2fe..acad03deaf7c 100644 --- a/packages/fiori/src/ViewSettingsDialog.ts +++ b/packages/fiori/src/ViewSettingsDialog.ts @@ -203,7 +203,6 @@ class ViewSettingsDialog extends UI5Element { /** * Defines the initial sort order. * - * @type {boolean} * @default false * @public */ @@ -213,7 +212,6 @@ class ViewSettingsDialog extends UI5Element { /** * Keeps recently focused list in order to focus it on next dialog open. * - * @type {object} * @private */ @property({ type: Object }) @@ -222,7 +220,6 @@ class ViewSettingsDialog extends UI5Element { /** * Stores settings of the dialog before the initial open. * - * @type {object} * @private */ @property({ type: Object }) @@ -231,7 +228,6 @@ class ViewSettingsDialog extends UI5Element { /** * Stores settings of the dialog after confirmation. * - * @type {object} * @private */ @property({ type: Object }) @@ -240,7 +236,6 @@ class ViewSettingsDialog extends UI5Element { /** * Stores current settings of the dialog. * - * @type {object} * @private */ @property({ type: Object }) @@ -268,7 +263,6 @@ class ViewSettingsDialog extends UI5Element { * Defines the list of items against which the user could sort data. * Note: If you want to use this slot, you need to import used item: import "@ui5/webcomponents-fiori/dist/SortItem"; * - * @type {ISortItem[]} * @slot sortItems * @public */ @@ -279,7 +273,6 @@ class ViewSettingsDialog extends UI5Element { * Defines the filterItems list. * Note: If you want to use this slot, you need to import used item: import "@ui5/webcomponents-fiori/dist/FilterItem"; * - * @type {IFilterItem[]} * @slot filterItems * @public */ @@ -656,7 +649,7 @@ class ViewSettingsDialog extends UI5Element { /** * If the dialog is closed by [ESC] key, do the same as if the Cancel button is pressed. * - * @param {event} evt + * @param evt */ _restoreConfirmedOnEscape(evt: CustomEvent) { // Dialog#before-close if (evt.detail.escPressed) { @@ -678,7 +671,7 @@ class ViewSettingsDialog extends UI5Element { /** * Sets current settings to ones passed as settings argument. * - * @param {Object} settings + * @param settings */ _restoreSettings(settings: VSDInternalSettings) { this._currentSettings = JSON.parse(JSON.stringify(settings)); @@ -731,10 +724,10 @@ class ViewSettingsDialog extends UI5Element { * ] * } * - * @param {Object} settings - predefined settings. - * @param {string} settings.sortOrder - sort order - * @param {string} settings.sortBy - sort by - * @param {Array.} settings.filters - filters + * @param settings - predefined settings. + * @param settings.sortOrder - sort order + * @param settings.sortBy - sort by + * @param settings.filters - filters * @public */ setConfirmedSettings(settings: VSDSettings) { diff --git a/packages/main/src/Button.ts b/packages/main/src/Button.ts index 312c0ff42771..4851dd99f6b3 100644 --- a/packages/main/src/Button.ts +++ b/packages/main/src/Button.ts @@ -94,7 +94,6 @@ class Button extends UI5Element implements IFormElement, IButton { /** * Defines the component design. * - * @type {ButtonDesign} * @default "Default" * @public */ @@ -106,7 +105,6 @@ class Button extends UI5Element implements IFormElement, IButton { * A disabled component can't be pressed or * focused, and it is not in the tab chain. * - * @type {boolean} * @default false * @public */ @@ -121,7 +119,6 @@ class Button extends UI5Element implements IFormElement, IButton { * * See all the available icons within the Icon Explorer. * - * @type {string} * @default "" * @public */ @@ -131,7 +128,6 @@ class Button extends UI5Element implements IFormElement, IButton { /** * Defines whether the icon should be displayed after the component text. * - * @type {boolean} * @default false * @public */ @@ -145,7 +141,6 @@ class Button extends UI5Element implements IFormElement, IButton { * Note: For the submits property to have effect, you must add the following import to your project: * import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js"; * - * @type {boolean} * @default false * @public * @deprecated Set the "type" property to "Submit" to achieve the same result. The "submits" property is ignored if "type" is set to any value other than "Button". @@ -157,7 +152,6 @@ class Button extends UI5Element implements IFormElement, IButton { * Defines the tooltip of the component. *
    * Note: A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function. - * @type {string} * @default "" * @public * @since 1.2.0 @@ -168,7 +162,6 @@ class Button extends UI5Element implements IFormElement, IButton { /** * Defines the accessible ARIA name of the component. * - * @type {string} * @default undefined * @public * @since 1.0.0-rc.15 @@ -179,7 +172,6 @@ class Button extends UI5Element implements IFormElement, IButton { /** * Receives id(or many ids) of the elements that label the component. * - * @type {string} * @default "" * @public * @since 1.1.0 @@ -211,7 +203,6 @@ class Button extends UI5Element implements IFormElement, IButton { * *
  • controls: Identifies the element (or elements) whose contents or presence are controlled by the button element. Accepts a string value.
    • * - * @type {object} * @public * @since 1.2.0 */ @@ -225,7 +216,6 @@ class Button extends UI5Element implements IFormElement, IButton { * Note: For the type property to have effect, you must add the following import to your project: * import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js"; * - * @type {ButtonType} * @default "Button" * @public * @since 1.15.0 @@ -300,7 +290,6 @@ class Button extends UI5Element implements IFormElement, IButton { *

    * 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[]} * @public */ @slot({ type: Node, "default": true }) diff --git a/packages/main/src/Calendar.ts b/packages/main/src/Calendar.ts index beaa52e873ac..13c0edd20c12 100644 --- a/packages/main/src/Calendar.ts +++ b/packages/main/src/Calendar.ts @@ -209,7 +209,6 @@ class Calendar extends CalendarPart { *
  • CalendarSelectionMode.Range - enables selection of a date range.
    • *
  • CalendarSelectionMode.Multiple - enables selection of multiple dates.
    • * - * @type {CalendarSelectionMode} * @default "Single" * @public */ @@ -226,7 +225,6 @@ class Calendar extends CalendarPart { * Note: For calendars other than Gregorian, * the week numbers are not displayed regardless of what is set. * - * @type {boolean} * @default false * @public */ @@ -264,7 +262,6 @@ class Calendar extends CalendarPart { * Defines the selected date or dates (depending on the selectionMode property) * for this calendar as instances of ui5-date. * - * @type {ICalendarDate[]} * @public */ @slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true }) @@ -436,10 +433,9 @@ class Calendar extends CalendarPart { /** * The month button is hidden when the month picker or year picker is shown - * @returns {boolean} * @private */ - get _isHeaderMonthButtonHidden() { + get _isHeaderMonthButtonHidden(): boolean { return this._currentPicker === "month" || this._currentPicker === "year"; } @@ -525,7 +521,7 @@ class Calendar extends CalendarPart { * Creates instances of ui5-date inside this ui5-calendar with values, equal to the provided UTC timestamps * @protected * @deprecated - * @param { Array } selectedDates Array of UTC timestamps + * @param selectedDates Array of UTC timestamps */ set selectedDates(selectedDates: Array) { this._setSelectedDates(selectedDates); diff --git a/packages/main/src/CalendarDate.ts b/packages/main/src/CalendarDate.ts index 48ec10f535c2..7afc6c3846a0 100644 --- a/packages/main/src/CalendarDate.ts +++ b/packages/main/src/CalendarDate.ts @@ -22,7 +22,6 @@ class CalendarDate extends UI5Element implements ICalendarDate { * The date formatted according to the formatPattern property * of the ui5-calendar that hosts the component. * - * @type {string} * @public */ @property() diff --git a/packages/main/src/CalendarHeader.ts b/packages/main/src/CalendarHeader.ts index c6ff34bdd537..bc34077e45c0 100644 --- a/packages/main/src/CalendarHeader.ts +++ b/packages/main/src/CalendarHeader.ts @@ -42,7 +42,6 @@ class CalendarHeader extends UI5Element { /** * Defines component's timestamp. * Note: set by the Calendar component - * @type {Integer} * @public */ @property({ validator: Integer }) @@ -51,7 +50,6 @@ class CalendarHeader extends UI5Element { /** * Defines component's primary calendar type. * Note: set by the Calendar component - * @type {CalendarType} * @public */ @property({ type: CalendarType }) @@ -62,7 +60,6 @@ class CalendarHeader extends UI5Element { * Note: set by the Calendar component * @since 1.0.0-rc.16 * @default undefined - * @type {CalendarType} * @public */ @property({ type: CalendarType }) @@ -70,7 +67,6 @@ class CalendarHeader extends UI5Element { /** * Stores information for month button for secondary calendar type - * @type {object} * @private */ @property({ type: Object }) diff --git a/packages/main/src/CalendarPart.ts b/packages/main/src/CalendarPart.ts index 955cf1e9a615..222cb8da146a 100644 --- a/packages/main/src/CalendarPart.ts +++ b/packages/main/src/CalendarPart.ts @@ -20,7 +20,6 @@ class CalendarPart extends DateComponentBase { /** * The timestamp of the currently focused date. Set this property to move the component's focus to a certain date. * Node: Timestamp is 10-digit Integer representing the seconds (not milliseconds) since the Unix Epoch. - * @type {Integer} * @protected */ @property({ validator: Integer }) @@ -65,7 +64,7 @@ class CalendarPart extends DateComponentBase { /** * Change a timestamp and enforce limits * - * @param {number} timestamp + * @param timestamp * @protected */ _safelySetTimestamp(timestamp: number) { @@ -84,9 +83,9 @@ class CalendarPart extends DateComponentBase { /** * Modify a timestamp by a certain amount of days/months/years and enforce limits - * @param {number} amount - * @param {string} unit - * @param {boolean} preserveDate whether to preserve the day of the month (f.e. 15th of March + 1 month = 15th of April) + * @param amount + * @param unit + * @param preserveDate whether to preserve the day of the month (f.e. 15th of March + 1 month = 15th of April) * @protected */ _safelyModifyTimestampBy(amount: number, unit: string, preserveDate?: boolean) { diff --git a/packages/main/src/ColorPalette.ts b/packages/main/src/ColorPalette.ts index 3d80caa52ec2..44857dd3f080 100644 --- a/packages/main/src/ColorPalette.ts +++ b/packages/main/src/ColorPalette.ts @@ -94,7 +94,6 @@ type ColorPaletteItemClickEventDetail = { class ColorPalette extends UI5Element { /** * Defines whether the user can see the last used colors in the bottom of the component - * @type {boolean} * @private * @since 1.0.0-rc.15 */ @@ -104,7 +103,6 @@ class ColorPalette extends UI5Element { /** * Defines whether the user can choose a custom color from a color picker * Note: In order to use this property you need to import the following module: "@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js" - * @type {boolean} * @private * @since 1.0.0-rc.15 */ @@ -113,7 +111,6 @@ class ColorPalette extends UI5Element { /** * Defines whether the user can choose the default color from a button. - * @type {boolean} * @default false * @private * @since 1.0.0-rc.16 @@ -124,7 +121,6 @@ class ColorPalette extends UI5Element { /** * Defines the default color of the color palette * Note: The default color should be a part of the ColorPalette colors - * @type {CSSColor} * @private * @since 1.0.0-rc.16 */ @@ -133,7 +129,6 @@ class ColorPalette extends UI5Element { /** * Defines the selected color. - * @type {CSSColor} * @private */ @property({ validator: CSSColor }) @@ -141,7 +136,6 @@ class ColorPalette extends UI5Element { /** * Defines if the palette is in Popup or Embeded mode. - * @type {sap.ui.webc.base.types.CSSColor} * @private */ @property({ type: Boolean }) @@ -149,7 +143,6 @@ class ColorPalette extends UI5Element { /** * Defines the ui5-color-palette-item elements. - * @type {IColorPaletteItem[]} * @public */ @slot({ diff --git a/packages/main/src/ColorPaletteItem.ts b/packages/main/src/ColorPaletteItem.ts index 6480bb2587cb..6b6b1f0d56c8 100644 --- a/packages/main/src/ColorPaletteItem.ts +++ b/packages/main/src/ColorPaletteItem.ts @@ -43,7 +43,6 @@ class ColorPaletteItem extends UI5Element implements ITabbable, IColorPaletteIte *

    * Note: The value should be a valid CSS color. * - * @type {CSSColor} * @public */ @property({ validator: CSSColor }) @@ -59,7 +58,6 @@ class ColorPaletteItem extends UI5Element implements ITabbable, IColorPaletteIte /** * Defines the index of the item inside of the ColorPalette. * @private - * @type {Integer} */ @property({ validator: Integer }) index?: number; @@ -67,14 +65,12 @@ class ColorPaletteItem extends UI5Element implements ITabbable, IColorPaletteIte /** * Defines if the ColorPalette is on phone mode. * @private - * @type {boolean} */ @property({ type: Boolean }) phone!: boolean; /** * @private - * @type {boolean} * @since 1.0.0-rc.15 */ @property({ type: Boolean }) diff --git a/packages/main/src/ColorPalettePopover.ts b/packages/main/src/ColorPalettePopover.ts index 74c460bada4d..533b0c72d819 100644 --- a/packages/main/src/ColorPalettePopover.ts +++ b/packages/main/src/ColorPalettePopover.ts @@ -84,7 +84,6 @@ type ColorPalettePopoverItemClickEventDetail = ColorPaletteItemClickEventDetail; class ColorPalettePopover extends UI5Element { /** * Defines whether the user can see the last used colors in the bottom of the component - * @type {boolean} * @default false * @public */ @@ -94,7 +93,6 @@ class ColorPalettePopover extends UI5Element { /** * Defines whether the user can choose a custom color from a component. * Note: In order to use this property you need to import the following module: "@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js" - * @type {boolean} * @default false * @public */ @@ -103,7 +101,6 @@ class ColorPalettePopover extends UI5Element { /** * Defines whether the user can choose the default color from a button. - * @type {boolean} * @default false * @public */ @@ -113,7 +110,6 @@ class ColorPalettePopover extends UI5Element { /** * Defines the default color of the component. * Note: The default color should be a part of the ColorPalette colors - * @type {CSSColor} * @public */ @property({ validator: CSSColor }) @@ -121,7 +117,6 @@ class ColorPalettePopover extends UI5Element { /** * Defines the content of the component. - * @type {IColorPaletteItem[]} * @public */ @slot({ "default": true, type: HTMLElement, individualSlots: true }) @@ -150,7 +145,7 @@ class ColorPalettePopover extends UI5Element { /** * Shows the ColorPalettePopover. - * @param {HTMLElement} opener the element that the popover is shown at + * @param opener the element that the popover is shown at * @public * @since 1.1.1 */ @@ -161,7 +156,7 @@ class ColorPalettePopover extends UI5Element { /** * Shows the ColorPalettePopover. * Note: The method is deprecated and will be removed in future, use showAt instead. - * @param {HTMLElement} opener the element that the popover is shown at + * @param opener the element that the popover is shown at * @public * @since 1.0.0-rc.16 * @deprecated The method is deprecated in favour of showAt. @@ -197,9 +192,8 @@ class ColorPalettePopover extends UI5Element { * * @protected * @since 1.0.0-rc.16 - * @returns {boolean} */ - isOpen() { + isOpen(): boolean { this._respPopover(); return this.responsivePopover!.opened; } diff --git a/packages/main/src/ColorPicker.ts b/packages/main/src/ColorPicker.ts index 0c54a2a2e5ed..4581bdc18695 100644 --- a/packages/main/src/ColorPicker.ts +++ b/packages/main/src/ColorPicker.ts @@ -96,7 +96,6 @@ class ColorPicker extends UI5Element { * Defines the currently selected color of the component. *

    * Note: use HEX, RGB, RGBA, HSV formats or a CSS color name when modifying this property. - * @type {CSSColor} * @public */ @property({ validator: CSSColor, defaultValue: "rgba(255, 255, 255, 1)" }) @@ -105,7 +104,6 @@ class ColorPicker extends UI5Element { /** * Defines the HEX code of the currently selected color * *Note*: If Alpha(transperancy) is set it is not included in this property. Use color property. - * @type {string} * @private */ @property({ defaultValue: "ffffff", noAttribute: true }) @@ -113,7 +111,6 @@ class ColorPicker extends UI5Element { /** * Defines the current main color which is selected via the hue slider and is shown in the main color square. - * @type {string} * @private */ @property({ type: Object }) diff --git a/packages/main/src/DateComponentBase.ts b/packages/main/src/DateComponentBase.ts index c12edade2c3a..67db5a5ee8ce 100644 --- a/packages/main/src/DateComponentBase.ts +++ b/packages/main/src/DateComponentBase.ts @@ -35,7 +35,6 @@ class DateComponentBase extends UI5Element { /** * Sets a calendar type used for display. * If not set, the calendar type of the global configuration is used. - * @type {CalendarType} * @public */ @property({ type: CalendarType }) @@ -44,7 +43,6 @@ class DateComponentBase extends UI5Element { /** * Defines the secondary calendar type. * If not set, the calendar will only show the primary calendar type. - * @type {CalendarType} * @since 1.0.0-rc.16 * @default undefined * @public @@ -55,7 +53,6 @@ class DateComponentBase extends UI5Element { /** * Determines the format, displayed in the input field. * - * @type {string} * @default "" * @public */ @@ -67,7 +64,6 @@ class DateComponentBase extends UI5Element { * * Note: If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd). * - * @type {string} * @default "" * @since 1.0.0-rc.6 * @public @@ -80,7 +76,6 @@ class DateComponentBase extends UI5Element { * * Note: If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd). * - * @type {string} * @default "" * @since 1.0.0-rc.6 * @public @@ -94,7 +89,6 @@ class DateComponentBase extends UI5Element { * Cached instance of DateFormat with a format pattern of "YYYY-MM-dd". * Used by the getISOFormat method to avoid creating a new DateFormat instance on each call. * - * @type {DateFormat} * @private */ _isoFormatInstance?: DateFormat; diff --git a/packages/main/src/DatePicker.ts b/packages/main/src/DatePicker.ts index 64e70b6cc5ae..3257cdc5ee6d 100644 --- a/packages/main/src/DatePicker.ts +++ b/packages/main/src/DatePicker.ts @@ -221,7 +221,6 @@ class DatePicker extends DateComponentBase implements IFormElement { /** * Defines a formatted date value. * - * @type {string} * @default "" * @formEvents change input * @formProperty @@ -233,7 +232,6 @@ class DatePicker extends DateComponentBase implements IFormElement { /** * Defines the value state of the component. * - * @type {ValueState} * @default "None" * @public */ @@ -244,7 +242,6 @@ class DatePicker extends DateComponentBase implements IFormElement { * Defines whether the component is required. * * @since 1.0.0-rc.9 - * @type {boolean} * @default false * @public */ @@ -254,7 +251,6 @@ class DatePicker extends DateComponentBase implements IFormElement { /** * Determines whether the component is displayed as disabled. * - * @type {boolean} * @default false * @public */ @@ -264,7 +260,6 @@ class DatePicker extends DateComponentBase implements IFormElement { /** * Determines whether the component is displayed as read-only. * - * @type {boolean} * @default false * @public */ @@ -279,7 +274,6 @@ class DatePicker extends DateComponentBase implements IFormElement { * Note: When no placeholder is set, the format pattern is displayed as a placeholder. * Passing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern. * - * @type {string} * @default undefined * @public */ @@ -298,7 +292,6 @@ class DatePicker extends DateComponentBase implements IFormElement { * will be created inside the component so that it can be submitted as * part of an HTML form. Do not use this property unless you need to submit a form. * - * @type {string} * @default "" * @public */ @@ -312,7 +305,6 @@ class DatePicker extends DateComponentBase implements IFormElement { * Note: For calendars other than Gregorian, * the week numbers are not displayed regardless of what is set. * - * @type {boolean} * @default false * @public * @since 1.0.0-rc.8 @@ -323,7 +315,6 @@ class DatePicker extends DateComponentBase implements IFormElement { /** * Defines the aria-label attribute for the component. * - * @type {string} * @default "" * @public * @since 1.0.0-rc.15 @@ -334,7 +325,6 @@ class DatePicker extends DateComponentBase implements IFormElement { /** * Receives id(or many ids) of the elements that label the component. * - * @type {string} * @default "" * @public * @since 1.0.0-rc.15 @@ -361,7 +351,6 @@ class DatePicker extends DateComponentBase implements IFormElement { *
    * Note: The valueStateMessage would be displayed, * when the component is in Information, Warning or Error value state. - * @type {HTMLElement} * @since 1.0.0-rc.7 * @public */ @@ -371,7 +360,6 @@ class DatePicker extends DateComponentBase 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[]} * @private */ @slot({ type: HTMLElement }) @@ -418,10 +406,9 @@ class DatePicker extends DateComponentBase implements IFormElement { /** * Override in derivatives to change calendar selection mode - * @returns {string} * @protected */ - get _calendarSelectionMode() { + get _calendarSelectionMode(): string { return "Single"; } @@ -430,7 +417,7 @@ class DatePicker extends DateComponentBase implements IFormElement { * Override in derivatives to provide the calendar a timestamp based on their properties * By default focus the calendar on the selected date if set, or the current day otherwise * @protected - * @returns { number } the calendar timestamp + * @returns the calendar timestamp */ get _calendarTimestamp(): number { if (this.value && this.dateValueUTC && this._checkValueValidity(this.value)) { @@ -445,7 +432,7 @@ class DatePicker extends DateComponentBase implements IFormElement { * Used to provide selectedDates to the calendar based on the component's state * Override in derivatives to provide different rules for setting the calendar's selected dates * @protected - * @returns { array } the selected dates + * @returns the selected dates */ get _calendarSelectedDates(): Array { if (this.value && this._checkValueValidity(this.value)) { @@ -502,9 +489,9 @@ class DatePicker extends DateComponentBase implements IFormElement { /** * - * @param { number } amount - * @param { string } unit - * @param { boolean } preserveDate whether to preserve the day of the month (f.e. 15th of March + 1 month = 15th of April) + * @param amount + * @param unit + * @param preserveDate whether to preserve the day of the month (f.e. 15th of March + 1 month = 15th of April) * @protected */ _modifyDateValue(amount: number, unit: string, preserveDate?: boolean) { @@ -596,8 +583,7 @@ class DatePicker extends DateComponentBase implements IFormElement { /** * Checks if the provided value is valid and within valid range. * @protected - * @param { string } value - * @returns { boolean } + * @param value */ _checkValueValidity(value: string): boolean { if (value === "") { @@ -616,8 +602,7 @@ class DatePicker extends DateComponentBase implements IFormElement { /** * Checks if a value is valid against the current date format of the DatePicker. * @public - * @param { string } [value=""] A value to be tested against the current date format - * @returns { boolean } + * @param value A value to be tested against the current date format */ isValid(value = ""): boolean { if (value === "") { @@ -630,8 +615,7 @@ class DatePicker extends DateComponentBase implements IFormElement { /** * Checks if a date is between the minimum and maximum date. * @public - * @param { string } [value=""] A value to be checked - * @returns { boolean } + * @param value A value to be checked */ isInValidRange(value = ""): boolean { if (value === "") { @@ -782,10 +766,10 @@ class DatePicker extends DateComponentBase implements IFormElement { * Formats a Java Script date object into a string representing a locale date * according to the formatPattern property of the DatePicker instance * @public - * @param {Date} date A Java Script date object to be formatted as string - * @returns {string} The date as string + * @param date A Java Script date object to be formatted as string + * @returns The date as string */ - formatValue(date: Date) { + formatValue(date: Date): string { return this.getFormat().format(date); } @@ -800,9 +784,9 @@ class DatePicker extends DateComponentBase implements IFormElement { /** * Opens the picker. * @public - * @returns {Promise} Resolves when the picker is open + * @returns Resolves when the picker is open */ - async openPicker() { + async openPicker(): Promise { this._isPickerOpen = true; this._calendarCurrentPicker = "day"; this.responsivePopover = await this._respPopover(); @@ -821,9 +805,9 @@ class DatePicker extends DateComponentBase implements IFormElement { /** * Checks if the picker is open. * @public - * @returns {boolean} true if the picker is open, false otherwise + * @returns true if the picker is open, false otherwise */ - isOpen() { + isOpen(): boolean { return !!this._isPickerOpen; } @@ -832,7 +816,6 @@ class DatePicker extends DateComponentBase implements IFormElement { * * @public * @readonly - * @type { Date } */ get dateValue(): Date | null { return this.liveValue ? this.getFormat().parse(this.liveValue) as Date : this.getFormat().parse(this.value) as Date; diff --git a/packages/main/src/DateRangePicker.ts b/packages/main/src/DateRangePicker.ts index 6da6b115a1bb..e3480667483a 100644 --- a/packages/main/src/DateRangePicker.ts +++ b/packages/main/src/DateRangePicker.ts @@ -62,7 +62,6 @@ class DateRangePicker extends DatePicker { * Determines the symbol which separates the dates. * If not supplied, the default time interval delimiter for the current locale will be used. * - * @type {string} * @default "-" * @public */ @@ -88,7 +87,6 @@ class DateRangePicker extends DatePicker { * Note: The getter method is inherited and not supported. If called it will return an empty value. * * @readonly - * @type {Date} * @public */ get dateValue() { @@ -99,7 +97,6 @@ class DateRangePicker extends DatePicker { * Note: The getter method is inherited and not supported. If called it will return an empty value. * * @readonly - * @type {Date} * @public */ get dateValueUTC() { @@ -152,10 +149,9 @@ class DateRangePicker extends DatePicker { * Returns the start date of the currently selected range as JavaScript Date instance. * * @readonly - * @type {Date} * @public */ - get startDateValue() { + get startDateValue(): Date | null { return CalendarDate.fromTimestamp(this._startDateTimestamp! * 1000).toLocalJSDate(); } @@ -163,10 +159,9 @@ class DateRangePicker extends DatePicker { * Returns the end date of the currently selected range as JavaScript Date instance. * * @readonly - * @type {Date} * @public */ - get endDateValue() { + get endDateValue(): Date | null { return CalendarDate.fromTimestamp(this._endDateTimestamp! * 1000).toLocalJSDate(); } diff --git a/packages/main/src/DateTimePicker.ts b/packages/main/src/DateTimePicker.ts index 043f93ad5e6e..99411549d9e0 100644 --- a/packages/main/src/DateTimePicker.ts +++ b/packages/main/src/DateTimePicker.ts @@ -141,7 +141,6 @@ class DateTimePicker extends DatePicker { * *

    * Note: The date view would be displayed by default. - * @type {boolean} * @default false * @private */ @@ -153,7 +152,6 @@ class DateTimePicker extends DatePicker { * The phone mode turns on when the component is used on small screens or phone devices. * In phone mode the user can see either the calendar view, or the time view * and can switch between the views via toggle buttons. - * @type {boolean} * @default false * @private */ @@ -374,7 +372,7 @@ class DateTimePicker extends DatePicker { /** * Handles the date/time switch available in phoneMode to switch * between the date and time views. - * @param {Event} e + * @param e */ _dateTimeSwitchChange(e: CustomEvent) { // Note: fix when SegmentedButton is implemented in TS const target = e.target as HTMLElement; diff --git a/packages/main/src/DayPicker.ts b/packages/main/src/DayPicker.ts index 1d1857bfafd1..82f8b997562c 100644 --- a/packages/main/src/DayPicker.ts +++ b/packages/main/src/DayPicker.ts @@ -117,7 +117,6 @@ type DayPickerNavigateEventDetail = { class DayPicker extends CalendarPart implements ICalendarPicker { /** * An array of UTC timestamps representing the selected date or dates depending on the capabilities of the picker component. - * @type {array} * @public */ @property({ @@ -135,7 +134,6 @@ class DayPicker extends CalendarPart implements ICalendarPicker { *
  • CalendarSelectionMode.Range - enables selection of a date range.
    • *
  • CalendarSelectionMode.Multiple - enables selection of multiple dates.
    • * - * @type {CalendarSelectionMode} * @default "Single" * @public */ @@ -149,7 +147,6 @@ class DayPicker extends CalendarPart implements ICalendarPicker { * Note: For calendars other than Gregorian, * the week numbers are not displayed regardless of what is set. * - * @type {boolean} * @default false * @public * @since 1.0.0-rc.8 @@ -158,7 +155,6 @@ class DayPicker extends CalendarPart implements ICalendarPicker { hideWeekNumbers!: boolean; /** - * @type {object} * @private */ @property({ @@ -175,7 +171,6 @@ class DayPicker extends CalendarPart implements ICalendarPicker { /** * When set, the component will skip all work in onBeforeRendering and will not automatically set the focus on itself - * @type {boolean} * @private */ @property({ type: Boolean, noAttribute: true }) @@ -200,7 +195,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker { /** * Builds the "_weeks" object that represents the month. - * @param { LocaleData } localeData + * @param localeData * @private */ _buildWeeks(localeData: LocaleData) { @@ -322,7 +317,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker { /** * Builds the dayNames object (header of the month). - * @param { LocaleData } localeData + * @param localeData * @private */ _buildDayNames(localeData: LocaleData) { @@ -384,8 +379,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker { /** * Tells if the day is selected (dark blue). - * @param { number } timestamp - * @returns { boolean } + * @param timestamp * @private */ _isDaySelected(timestamp: number): boolean { @@ -399,8 +393,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker { /** * Tells if the day is inside a selection range (light blue). - * @param { number } timestamp - * @returns { boolean } + * @param timestamp * @private */ _isDayInsideSelectionRange(timestamp: number): boolean { @@ -420,8 +413,8 @@ class DayPicker extends CalendarPart implements ICalendarPicker { /** * Selects/deselects a day. - * @param { Event} e - * @param { boolean} isShift true if the user did Click+Shift or Enter+Shift (but not Space+Shift) + * @param e + * @param isShift true if the user did Click+Shift or Enter+Shift (but not Space+Shift) * @private */ _selectDate(e: Event, isShift: boolean) { @@ -505,7 +498,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker { /** * Called when at least one day is selected and the user presses "Shift". - * @param { number } timestamp + * @param timestamp * @private */ _multipleSelection(timestamp: number) { @@ -546,7 +539,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker { /** * Set the hovered day as the "_secondTimestamp". - * @param { MouseEvent } e + * @param e * @private */ _onmouseover(e: MouseEvent) { @@ -616,7 +609,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker { /** * Click is the same as "Enter". * Note: "Click+Shift" has the same effect as "Enter+Shift". - * @param { MouseEvent } e + * @param e * @private */ _onclick(e: MouseEvent) { @@ -625,7 +618,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker { /** * Called upon "Home" or "End" - moves the focus to the first or last item in the row. - * @param { boolean } homePressed + * @param homePressed * @private */ _onHomeOrEnd(homePressed: boolean) { @@ -645,7 +638,6 @@ class DayPicker extends CalendarPart implements ICalendarPicker { /** * Called by the Calendar component. * @protected - * @returns { boolean } */ _hasPreviousPage(): boolean { return !(this._calendarDate.getMonth() === this._minDate.getMonth() && this._calendarDate.getYear() === this._minDate.getYear()); @@ -654,7 +646,6 @@ class DayPicker extends CalendarPart implements ICalendarPicker { /** * Called by the Calendar component. * @protected - * @returns { boolean } */ _hasNextPage(): boolean { return !(this._calendarDate.getMonth() === this._maxDate.getMonth() && this._calendarDate.getYear() === this._maxDate.getYear()); @@ -678,9 +669,9 @@ class DayPicker extends CalendarPart implements ICalendarPicker { /** * Modifies the timestamp by a certain amount of days/months/years. - * @param { number } amount - * @param { string } unit - * @param { boolean } preserveDate whether to preserve the day of the month (f.e. 15th of March + 1 month = 15th of April) + * @param amount + * @param unit + * @param preserveDate whether to preserve the day of the month (f.e. 15th of March + 1 month = 15th of April) * @private */ _modifyTimestampBy(amount: number, unit: string, preserveDate?: boolean) { @@ -694,7 +685,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker { /** * Sets the timestamp to an absolute value. - * @param { number } value + * @param value * @private */ _setTimestamp(value: number) { diff --git a/packages/main/src/FileUploader.ts b/packages/main/src/FileUploader.ts index 1e4d2606ffc8..eab99f140a8d 100644 --- a/packages/main/src/FileUploader.ts +++ b/packages/main/src/FileUploader.ts @@ -97,7 +97,6 @@ class FileUploader extends UI5Element implements IFormElement { * Comma-separated list of file types that the component should accept. *

    * Note: Please make sure you are adding the . in front on the file type, e.g. .png in case you want to accept png's only. - * @type {string} * @default "" * @public */ @@ -106,7 +105,6 @@ class FileUploader extends UI5Element implements IFormElement { /** * If set to "true", the input field of component will not be rendered. Only the default slot that is passed will be rendered. - * @type {boolean} * @default false * @public */ @@ -118,7 +116,6 @@ class FileUploader extends UI5Element implements IFormElement { *

    * Note: A disabled component is completely noninteractive. * - * @type {boolean} * @default false * @public */ @@ -127,7 +124,6 @@ class FileUploader extends UI5Element implements IFormElement { /** * Allows multiple files to be chosen. - * @type {boolean} * @default false * @public */ @@ -146,7 +142,6 @@ class FileUploader extends UI5Element implements IFormElement { * will be created inside the component so that it can be submitted as * part of an HTML form. Do not use this property unless you need to submit a form. * - * @type {string} * @default "" * @public */ @@ -155,7 +150,6 @@ class FileUploader extends UI5Element implements IFormElement { /** * Defines a short hint intended to aid the user with data entry when the component has no value. - * @type {string} * @default "" * @public */ @@ -164,7 +158,6 @@ class FileUploader extends UI5Element implements IFormElement { /** * Defines the name/names of the file/files to upload. - * @type {string} * @default "" * @formEvents change * @formProperty @@ -175,7 +168,6 @@ class FileUploader extends UI5Element implements IFormElement { /** * Defines the value state of the component. - * @type {ValueState} * @default "None" * @public */ @@ -193,7 +185,6 @@ class FileUploader extends UI5Element implements IFormElement { * Note: If no content is provided in this slot, the component will only consist of an input field and will not be interactable using the keyboard.
    * Also it is not recommended to use any non-interactable components, as it may lead to poor accessibility experience. * - * @type {HTMLElement[]} * @public */ @slot({ type: HTMLElement, "default": true }) @@ -207,7 +198,6 @@ class FileUploader extends UI5Element implements IFormElement { *
    * Note: The valueStateMessage would be displayed, * when the component is in Information, Warning or Error value state. - * @type {HTMLElement[]} * @since 1.0.0-rc.9 * @public */ @@ -217,7 +207,6 @@ class FileUploader 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[]} * @private */ @slot() @@ -281,10 +270,9 @@ class FileUploader extends UI5Element implements IFormElement { /** * FileList of all selected files. * @readonly - * @type {FileList} * @public */ - get files() { + get files(): FileList { if (this._input) { return this._input.files; } diff --git a/packages/main/src/Link.ts b/packages/main/src/Link.ts index ecbf4c7f657c..7b3090546dc9 100644 --- a/packages/main/src/Link.ts +++ b/packages/main/src/Link.ts @@ -110,7 +110,6 @@ class Link extends UI5Element implements ITabbable { *

    * Note: When disabled, the click event cannot be triggered by the user. * - * @type {boolean} * @default false * @public */ @@ -119,7 +118,6 @@ class Link extends UI5Element implements ITabbable { /** * Defines the tooltip of the component. - * @type {string} * @default "" * @private * @since 1.18.0 @@ -132,7 +130,6 @@ class Link extends UI5Element implements ITabbable { *

    * Note: Standard hyperlink behavior is supported. * - * @type {string} * @default "" * @public */ @@ -154,7 +151,6 @@ class Link extends UI5Element implements ITabbable { * * This property must only be used when the href property is set. * - * @type {string} * @default "" * @public */ @@ -166,7 +162,6 @@ class Link extends UI5Element implements ITabbable { *

    * Note: Avaialble options are Default, Subtle, and Emphasized. * - * @type {LinkDesign} * @default "Default" * @public */ @@ -177,7 +172,6 @@ class Link extends UI5Element implements ITabbable { * 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. * - * @type {WrappingType} * @default "None" * @public */ @@ -187,7 +181,6 @@ class Link extends UI5Element implements ITabbable { /** * Defines the accessible ARIA name of the component. * - * @type {string} * @default "" * @public * @since 1.2.0 @@ -198,7 +191,6 @@ class Link extends UI5Element implements ITabbable { /** * Receives id(or many ids) of the elements that label the input * - * @type {string} * @default "" * @public * @since 1.0.0-rc.15 @@ -211,7 +203,6 @@ class Link extends UI5Element implements ITabbable { * * Note: Use the "button" role in cases when navigation is not expected to occur and the href property is not defined. * - * @type {string} * @default "link" * @public * @since 1.9.0 @@ -242,7 +233,6 @@ class Link extends UI5Element implements ITabbable { * * * - * @type {object} * @public * @since 1.1.0 */ diff --git a/packages/main/src/Menu.ts b/packages/main/src/Menu.ts index 7b07ff4e5eaa..7bc524096928 100644 --- a/packages/main/src/Menu.ts +++ b/packages/main/src/Menu.ts @@ -190,7 +190,6 @@ class Menu extends UI5Element { /** * Defines the header text of the menu (displayed on mobile). * - * @type {string} * @default "" * @public */ @@ -201,7 +200,6 @@ class Menu extends UI5Element { * Indicates if the menu is open * * @public - * @type {boolean} * @default false * @since 1.10.0 */ @@ -211,7 +209,6 @@ class Menu extends UI5Element { /** * Defines if a loading indicator would be displayed inside the corresponding ui5-menu popover. * - * @type {boolean} * @default false * @public * @since 1.13.0 @@ -222,7 +219,6 @@ class Menu extends UI5Element { /** * Defines the delay in milliseconds, after which the busy indicator will be displayed inside the corresponding ui5-menu popover.. * - * @type {Integer} * @default 1000 * @public * @since 1.13.0 @@ -234,7 +230,6 @@ class Menu extends UI5Element { * Defines the ID or DOM Reference of the element that the menu is shown at * * @public - * @type {DOMReference} * @default "" * @since 1.10.0 */ @@ -243,7 +238,6 @@ class Menu extends UI5Element { /** * Defines if the menu is sub-menu (not first-level). - * @type {boolean} * @default false * @private */ @@ -252,7 +246,6 @@ class Menu extends UI5Element { /** * Stores id of a list item that opened sub-menu. - * @type {string} * @private */ @property() @@ -263,7 +256,6 @@ class Menu extends UI5Element { * (in case of non-phone devices these are the items of the menu, * but for phone devices the items of the currently opened sub-menu * will be populated here) - * @type {array} * @private */ @property({ type: Object, multiple: true }) @@ -271,7 +263,6 @@ class Menu extends UI5Element { /** * Stores a list of parent menu items for each sub-menu (on phone). - * @type {array} * @private */ @property({ type: Object, multiple: true }) @@ -300,7 +291,6 @@ class Menu extends UI5Element { *

    * Note: Use ui5-menu-item for the intended design. * - * @type {IMenuItem[]} * @public */ @slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true }) @@ -396,7 +386,7 @@ class Menu extends UI5Element { /** * Shows the Menu near the opener element. - * @param {HTMLElement} opener the element that the popover is shown at + * @param opener the element that the popover is shown at * @public */ async showAt(opener: HTMLElement) { diff --git a/packages/main/src/MenuItem.ts b/packages/main/src/MenuItem.ts index 5269d5849d20..416d97e5e40c 100644 --- a/packages/main/src/MenuItem.ts +++ b/packages/main/src/MenuItem.ts @@ -36,7 +36,6 @@ class MenuItem extends UI5Element implements IMenuItem { /** * Defines the text of the tree item. * - * @type {string} * @default "" * @public */ @@ -47,7 +46,6 @@ class MenuItem extends UI5Element implements IMenuItem { * Defines the additionalText, displayed in the end of the menu item. * Note: The additional text would not be displayed if the item has a submenu. * - * @type {string} * @public * @since 1.8.0 */ @@ -61,7 +59,6 @@ class MenuItem extends UI5Element implements IMenuItem { * Example: * See all the available icons in the Icon Explorer. * - * @type {string} * @default "" * @public */ @@ -71,7 +68,6 @@ class MenuItem extends UI5Element implements IMenuItem { /** * Defines whether a visual separator should be rendered before the item. * - * @type {boolean} * @default false * @public */ @@ -83,7 +79,6 @@ class MenuItem extends UI5Element implements IMenuItem { *

    * Note: A disabled ui5-menu-item is noninteractive. * - * @type {boolean} * @default false * @public */ @@ -95,7 +90,6 @@ class MenuItem extends UI5Element implements IMenuItem { * * Note: If set to true a ui5-busy-indicator component will be displayed into the related one to the current ui5-menu-item sub-menu popover. * - * @type {boolean} * @default false * @public * @since 1.13.0 @@ -106,7 +100,6 @@ class MenuItem extends UI5Element implements IMenuItem { /** * Defines the delay in milliseconds, after which the busy indicator will be displayed inside the corresponding ui5-menu popover. * - * @type {sap.ui.webc.base.types.Integer} * @default 1000 * @public * @since 1.13.0 @@ -117,7 +110,6 @@ class MenuItem extends UI5Element implements IMenuItem { /** * Defines the accessible ARIA name of the component. * - * @type {string} * @default "" * @public * @since 1.7.0 @@ -152,7 +144,6 @@ class MenuItem extends UI5Element implements IMenuItem { /** * Defines the items of this component. * - * @type {IMenuItem[]} * @public */ @slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true }) diff --git a/packages/main/src/MonthPicker.ts b/packages/main/src/MonthPicker.ts index 900b485cd848..380142c43adb 100644 --- a/packages/main/src/MonthPicker.ts +++ b/packages/main/src/MonthPicker.ts @@ -91,7 +91,6 @@ class MonthPicker extends CalendarPart implements ICalendarPicker { /** * An array of UTC timestamps representing the selected date * or dates depending on the capabilities of the picker component. - * @type {array} * @public */ @property({ @@ -237,7 +236,7 @@ class MonthPicker extends CalendarPart implements ICalendarPicker { /** * Sets the timestamp to an absolute value. - * @param { number } value + * @param value * @private */ _setTimestamp(value: number) { @@ -248,8 +247,8 @@ class MonthPicker extends CalendarPart implements ICalendarPicker { /** * Modifies timestamp by a given amount of months and, * if necessary, loads the prev/next page. - * @param { number } amount - * @param { boolean } preserveDate whether to preserve the day of the month (f.e. 15th of March + 1 month = 15th of April) + * @param amount + * @param preserveDate whether to preserve the day of the month (f.e. 15th of March + 1 month = 15th of April) * @private */ _modifyTimestampBy(amount: number, preserveDate?: boolean) { @@ -268,7 +267,7 @@ class MonthPicker extends CalendarPart implements ICalendarPicker { /** * Selects a month, when the user clicks or presses "Enter" or "Space". - * @param { Event } e + * @param e * @private */ _selectMonth(e: Event) { @@ -286,7 +285,6 @@ class MonthPicker extends CalendarPart implements ICalendarPicker { /** * Called by the Calendar component. * @protected - * @returns { boolean } */ _hasPreviousPage(): boolean { return this._calendarDate.getYear() !== this._minDate.getYear(); @@ -295,7 +293,6 @@ class MonthPicker extends CalendarPart implements ICalendarPicker { /** * Called by the Calendar component. * @protected - * @returns { boolean } */ _hasNextPage(): boolean { return this._calendarDate.getYear() !== this._maxDate.getYear(); diff --git a/packages/main/src/SegmentedButton.ts b/packages/main/src/SegmentedButton.ts index ee1296d7be96..ae6a2a4e312b 100644 --- a/packages/main/src/SegmentedButton.ts +++ b/packages/main/src/SegmentedButton.ts @@ -79,7 +79,6 @@ class SegmentedButton extends UI5Element { /** * Defines the accessible ARIA name of the component. * - * @type {string} * @default undefined * @public * @since 1.0.3 @@ -98,7 +97,6 @@ class SegmentedButton extends UI5Element { *
  • MultiSelect
    • * * - * @type {SegmentedButtonMode} * @default "SingleSelect" * @public * @since 1.14.0 @@ -112,7 +110,6 @@ class SegmentedButton extends UI5Element { * Note: Multiple items are allowed. *

    * Note: Use the ui5-segmented-button-item for the intended design. - * @type {ISegmentedButtonItem[]} * @public */ @slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true }) @@ -259,21 +256,21 @@ class SegmentedButton extends UI5Element { * Currently selected item. * * @readonly - * @type {ISegmentedButtonItem} * @deprecated since 1.14.0. This method will be removed in the next major release. * Please use the selectedItems property instead. * @public + * @returns selected segmented button item */ - get selectedItem() { + get selectedItem(): SegmentedButtonItem | undefined { return this._selectedItem; } /** * Returns an array of the currently selected items. * @readonly - * @type {ISegmentedButtonItem[]} * @since 1.14.0 * @public + * @returns array of selected segmented button items */ get selectedItems(): Array { return this.items.filter(item => item.pressed); diff --git a/packages/main/src/SegmentedButtonItem.ts b/packages/main/src/SegmentedButtonItem.ts index 3b49819d19c7..281beabc0186 100644 --- a/packages/main/src/SegmentedButtonItem.ts +++ b/packages/main/src/SegmentedButtonItem.ts @@ -42,7 +42,6 @@ class SegmentedButtonItem extends ToggleButton implements ISegmentedButtonItem { /** * Note: The property is inherited and not supported. If set, it won't take any effect. * - * @type {ButtonDesign} * @default "Default" * @public */ @@ -52,7 +51,6 @@ class SegmentedButtonItem extends ToggleButton implements ISegmentedButtonItem { /** * Note: The property is inherited and not supported. If set, it won't take any effect. * - * @type {boolean} * @default false * @public */ @@ -62,7 +60,6 @@ class SegmentedButtonItem extends ToggleButton implements ISegmentedButtonItem { /** * Note: The property is inherited and not supported. If set, it won't take any effect. * - * @type {boolean} * @default false * @public */ @@ -72,7 +69,6 @@ class SegmentedButtonItem extends ToggleButton implements ISegmentedButtonItem { /** * Defines the index of the item inside of the SegmentedButton. * - * @type {Integer} * @default 0 * @private */ @@ -82,7 +78,6 @@ class SegmentedButtonItem extends ToggleButton implements ISegmentedButtonItem { /** * Defines how many items are inside of the SegmentedButton. * - * @type {Integer} * @default 0 * @private */ diff --git a/packages/main/src/SplitButton.ts b/packages/main/src/SplitButton.ts index 322d9e077bcb..534aa47933c8 100644 --- a/packages/main/src/SplitButton.ts +++ b/packages/main/src/SplitButton.ts @@ -108,7 +108,6 @@ class SplitButton extends UI5Element { * * See all the available icons in the Icon Explorer. * - * @type {string} * @default "" * @public */ @@ -118,7 +117,6 @@ class SplitButton extends UI5Element { /** * Defines the icon to be displayed in active state as graphical element within the component. * - * @type {string} * @default "" * @public */ @@ -128,7 +126,6 @@ class SplitButton extends UI5Element { /** * Defines the component design. * - * @type {ButtonDesign} * @default "Default" * @public */ @@ -140,7 +137,6 @@ class SplitButton extends UI5Element { * A disabled component can't be pressed or * focused, and it is not in the tab chain. * - * @type {boolean} * @default false * @public */ @@ -150,7 +146,6 @@ class SplitButton extends UI5Element { /** * Defines the accessible ARIA name of the component. * - * @type {string} * @default: "" * @public */ @@ -159,7 +154,6 @@ class SplitButton extends UI5Element { /** * Indicates if the elements is on focus - * @type {boolean} * @default false * @private */ @@ -169,7 +163,6 @@ class SplitButton extends UI5Element { /** * Accessibility-related properties for inner elements of the Split Button * - * @type {object} * @private */ @property({ type: Object }) @@ -177,7 +170,6 @@ class SplitButton extends UI5Element { /** * Defines the tabIndex of the component. - * @type {string} * @default "" * @private */ @@ -186,7 +178,6 @@ class SplitButton extends UI5Element { /** * Indicates if there is Space key pressed - * @type {boolean} * @default false * @private */ @@ -195,7 +186,6 @@ class SplitButton extends UI5Element { /** * Indicates if there is SHIFT or ESCAPE key pressed - * @type {boolean} * @default false * @private */ @@ -204,7 +194,6 @@ class SplitButton extends UI5Element { /** * Defines the active state of the text button - * @type {boolean} * @default false * @private */ @@ -213,7 +202,6 @@ class SplitButton extends UI5Element { /** * Defines the icon of the text button - * @type {string} * @default "" * @private */ @@ -222,7 +210,6 @@ class SplitButton extends UI5Element { /** * Defines the active state of the arrow button - * @type {boolean} * @default false * @private */ @@ -234,7 +221,6 @@ class SplitButton extends UI5Element { *

    * 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[]} * @public */ @slot({ type: Node, "default": true }) diff --git a/packages/main/src/StepInput.ts b/packages/main/src/StepInput.ts index aaf3a5ec0e49..30d3e88238ad 100644 --- a/packages/main/src/StepInput.ts +++ b/packages/main/src/StepInput.ts @@ -110,7 +110,6 @@ class StepInput extends UI5Element implements IFormElement { /** * Defines a value of the component. * - * @type {Float} * @default 0 * @public */ @@ -120,7 +119,6 @@ class StepInput extends UI5Element implements IFormElement { /** * Defines a minimum value of the component. * - * @type {Float} * @public */ @property({ validator: Float }) @@ -129,7 +127,6 @@ class StepInput extends UI5Element implements IFormElement { /** * Defines a maximum value of the component. * - * @type {Float} * @public */ @property({ validator: Float }) @@ -138,7 +135,6 @@ class StepInput extends UI5Element implements IFormElement { /** * Defines a step of increasing/decreasing the value of the component. * - * @type {Float} * @default 1 * @public */ @@ -148,7 +144,6 @@ class StepInput extends UI5Element implements IFormElement { /** * Defines the value state of the component. * - * @type {ValueState} * @default "None" * @public */ @@ -158,7 +153,6 @@ class StepInput extends UI5Element implements IFormElement { /** * Defines whether the component is required. * - * @type {boolean} * @default false * @public */ @@ -168,7 +162,6 @@ class StepInput extends UI5Element implements IFormElement { /** * Determines whether the component is displayed as disabled. * - * @type {boolean} * @default false * @public */ @@ -178,7 +171,6 @@ class StepInput extends UI5Element implements IFormElement { /** * Determines whether the component is displayed as read-only. * - * @type {boolean} * @default false * @public */ @@ -193,7 +185,6 @@ class StepInput extends UI5Element implements IFormElement { * Note: When no placeholder is set, the format pattern is displayed as a placeholder. * Passing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern. * - * @type {string} * @default undefined * @public */ @@ -212,7 +203,6 @@ class StepInput extends UI5Element implements IFormElement { * will be created inside the component so that it can be submitted as * part of an HTML form. Do not use this property unless you need to submit a form. * - * @type {string} * @default "" * @public */ @@ -222,7 +212,6 @@ class StepInput extends UI5Element implements IFormElement { /** * Determines the number of digits after the decimal point of the component. * - * @type {Integer} * @default 0 * @public */ @@ -232,7 +221,6 @@ class StepInput extends UI5Element implements IFormElement { /** * Defines the accessible ARIA name of the component. * - * @type {string} * @public * @since 1.0.0-rc.15 */ @@ -242,7 +230,6 @@ class StepInput extends UI5Element implements IFormElement { /** * Receives id(or many ids) of the elements that label the component. * - * @type {string} * @default "" * @public * @since 1.0.0-rc.15 @@ -288,7 +275,6 @@ class StepInput extends UI5Element implements IFormElement { *
    * Note: The valueStateMessage would be displayed, * when the component is in Information, Warning or Error value state. - * @type {HTMLElement} * @slot * @public */ @@ -299,7 +285,6 @@ class StepInput 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 */ @@ -441,8 +426,8 @@ class StepInput extends UI5Element implements IFormElement { * decrement buttons according to the value and min/max values (if set). Fires change event when requested * * @private - * @param {Float} modifier modifies the value of the component with the given modifier (positive or negative) - * @param {boolean} fireChangeEvent if true, fires change event when the value is changed + * @param modifier modifies the value of the component with the given modifier (positive or negative) + * @param fireChangeEvent if true, fires change event when the value is changed */ _modifyValue(modifier: number, fireChangeEvent = false) { let value; @@ -563,8 +548,8 @@ class StepInput extends UI5Element implements IFormElement { /** * Called when the increment or decrement button is pressed and held to set new value. * @private - * @param {boolean} increment - is this the increment button or not so the values should be spin accordingly up or down - * @param {boolean} resetVariables - whether to reset the spin-related variables or not + * @param increment - is this the increment button or not so the values should be spin accordingly up or down + * @param resetVariables - whether to reset the spin-related variables or not */ _spinValue(increment: boolean, resetVariables = false) { if (resetVariables) { diff --git a/packages/main/src/Switch.ts b/packages/main/src/Switch.ts index 0d13ca0d2ba4..0e794f324fbf 100644 --- a/packages/main/src/Switch.ts +++ b/packages/main/src/Switch.ts @@ -85,7 +85,6 @@ class Switch extends UI5Element implements IFormElement { * positive and negative icons will replace the textOn and textOff. * * @public - * @type {SwitchDesign} * @default "Textual" */ @property({ type: SwitchDesign, defaultValue: SwitchDesign.Textual }) @@ -96,7 +95,6 @@ class Switch extends UI5Element implements IFormElement { *

    * Note: The property can be changed with user interaction, * either by cliking the component, or by pressing the Enter or Space key. - * @type {boolean} * @default false * @formEvents change * @formProperty @@ -110,7 +108,6 @@ class Switch extends UI5Element implements IFormElement { *

    * Note: A disabled component is noninteractive. * - * @type {boolean} * @default false * @public */ @@ -123,7 +120,6 @@ class Switch extends UI5Element implements IFormElement { *

    * Note: We recommend using short texts, up to 3 letters (larger texts would be cut off). * - * @type {string} * @default "" * @public */ @@ -135,7 +131,6 @@ class Switch extends UI5Element implements IFormElement { *

    * Note: We recommend using short texts, up to 3 letters (larger texts would be cut off). * - * @type {string} * @default "" * @public */ @@ -147,7 +142,6 @@ class Switch extends UI5Element implements IFormElement { * * Note: We recommend that you set an accessibleNameRef pointing to an external label or at least an accessibleName. * Providing an accessibleNameRef or an accessibleName is mandatory in the cases when textOn and textOff properties aren't set. - * @type {string} * @default: "" * @public * @since 1.2.0 @@ -160,7 +154,6 @@ class Switch extends UI5Element implements IFormElement { * * Note: We recommend that you set an accessibleNameRef pointing to an external label or at least an accessibleName. * Providing an accessibleNameRef or an accessibleName is mandatory in the cases when textOn and textOff properties aren't set. - * @type {string} * @default "" * @public * @since 1.1.0 @@ -172,7 +165,6 @@ class Switch extends UI5Element implements IFormElement { * Defines the tooltip of the component. *
    * Note: If applicable an external label reference should always be the preferred option to provide context to the ui5-switch component over a tooltip. - * @type {string} * @default: "" * @public * @since 1.9.0 @@ -183,7 +175,6 @@ class Switch extends UI5Element implements IFormElement { /** * Defines whether the component is required. * - * @type {boolean} * @default false * @public * @since 1.16.0 @@ -203,7 +194,6 @@ class Switch extends UI5Element implements IFormElement { * will be created inside the component so that it can be submitted as * part of an HTML form. Do not use this property unless you need to submit a form. * - * @type {string} * @default "" * @public * @since 1.16.0 @@ -214,7 +204,6 @@ class Switch extends UI5Element implements IFormElement { /** * The slot is used to render native input HTML element within Light DOM to enable form submit, when Switch is a part of HTML form. * - * @type {HTMLElement[]} * @private * @since 1.16.0 */ diff --git a/packages/main/src/TimePicker.ts b/packages/main/src/TimePicker.ts index 898807932943..4613778526aa 100644 --- a/packages/main/src/TimePicker.ts +++ b/packages/main/src/TimePicker.ts @@ -88,7 +88,6 @@ class TimePicker extends TimePickerBase { * Note: When no placeholder is set, the format pattern is displayed as a placeholder. * Passing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern. * - * @type {string} * @default undefined * @public */ @@ -103,7 +102,6 @@ class TimePicker extends TimePickerBase { * hh:mm:ss a -> 2:23:15 PM * mm:ss -> 12:04 (only minutes and seconds) * - * @type {string} * @default "" * @public */ @@ -137,10 +135,9 @@ class TimePicker extends TimePickerBase { * Currently selected time represented as JavaScript Date instance * * @readonly - * @type {Date} * @public */ - get dateValue() { + get dateValue(): Date | Date[] { return this.getFormat().parse(this._effectiveValue as string); } diff --git a/packages/main/src/TimePickerBase.ts b/packages/main/src/TimePickerBase.ts index 69e62fb9ef27..59deb313077f 100644 --- a/packages/main/src/TimePickerBase.ts +++ b/packages/main/src/TimePickerBase.ts @@ -133,7 +133,6 @@ class TimePickerBase extends UI5Element { /** * Defines a formatted time value. * - * @type {string} * @default undefined * @formEvents change input * @formProperty @@ -154,7 +153,6 @@ class TimePickerBase extends UI5Element { *
  • Information
    • * * - * @type {ValueState} * @default "None" * @public */ @@ -164,7 +162,6 @@ class TimePickerBase extends UI5Element { /** * Determines whether the ui5-time-picker is displayed as disabled. * - * @type {boolean} * @default false * @public */ @@ -174,7 +171,6 @@ class TimePickerBase extends UI5Element { /** * Determines whether the ui5-time-picker is displayed as readonly. * - * @type {boolean} * @default false * @public */ @@ -195,7 +191,7 @@ class TimePickerBase extends UI5Element { *
    * Note: The valueStateMessage would be displayed, * when the ui5-time-picker is in Information, Warning or Error value state. - * @type {HTMLElement} + * * @since 1.0.0-rc.8 * @slot * @public @@ -253,9 +249,9 @@ class TimePickerBase extends UI5Element { /** * Opens the picker. * @public - * @returns {Promise} Resolves when the picker is open + * @returns Resolves when the picker is open */ - async openPicker() { + async openPicker(): Promise { this.tempValue = this.value && this.isValid(this.value) ? this.value : this.getFormat().format(new Date()); const responsivePopover = await this._getPopover(); responsivePopover.showAt(this); @@ -264,9 +260,9 @@ class TimePickerBase extends UI5Element { /** * Closes the picker * @public - * @returns {Promise} Resolves when the picker is closed + * @returns Resolves when the picker is closed */ - async closePicker() { + async closePicker(): Promise { const responsivePopover = await this._getPopover(); responsivePopover.close(); this._isPickerOpen = false; @@ -283,9 +279,8 @@ class TimePickerBase extends UI5Element { /** * Checks if the picker is open * @public - * @returns {boolean} */ - isOpen() { + isOpen(): boolean { return !!this._isPickerOpen; } @@ -307,9 +302,9 @@ class TimePickerBase extends UI5Element { /** * Opens the Inputs popover. * @private - * @returns {Promise} Resolves when the Inputs popover is open + * @returns Resolves when the Inputs popover is open */ - async openInputsPopover() { + async openInputsPopover(): Promise { this.tempValue = this.value && this.isValid(this.value) ? this.value : this.getFormat().format(new Date()); const popover = await this._getInputsPopover(); popover.showAt(this); @@ -319,9 +314,9 @@ class TimePickerBase extends UI5Element { /** * Closes the Inputs popover * @private - * @returns {Promise} Resolves when the Inputs popover is closed + * @returns Resolves when the Inputs popover is closed */ - async closeInputsPopover() { + async closeInputsPopover(): Promise { const popover = await this._getInputsPopover(); popover.close(); } @@ -337,9 +332,8 @@ class TimePickerBase extends UI5Element { /** * Checks if the inputs popover is open * @private - * @returns {boolean} */ - isInputsPopoverOpen() { + isInputsPopoverOpen(): boolean { return !!this._isInputsPopoverOpen; } @@ -502,11 +496,11 @@ class TimePickerBase extends UI5Element { /** * Formats a Java Script date object into a string representing a locale date and time * according to the formatPattern property of the TimePicker instance - * @param {Date} date A Java Script date object to be formatted as string + * @param date A Java Script date object to be formatted as string * @public - * @returns {string} + * @returns formatted value */ - formatValue(date: Date) { + formatValue(date: Date): string { return this.getFormat().format(date); } @@ -515,11 +509,10 @@ class TimePickerBase extends UI5Element { * *

    * Note: an empty string is considered as valid value. - * @param {string} value The value to be tested against the current date format + * @param value The value to be tested against the current date format * @public - * @returns {boolean} */ - isValid(value: string | undefined) { + isValid(value: string | undefined): boolean { if (value === "") { return true; } @@ -553,7 +546,7 @@ class TimePickerBase extends UI5Element { /** * - * @param {event} e Wheel Event + * @param e Wheel Event * @private * * The listener for this event can't be passive as it calls preventDefault() diff --git a/packages/main/src/TimePickerClock.ts b/packages/main/src/TimePickerClock.ts index b07d6e35e64d..e5c2b60bcd21 100644 --- a/packages/main/src/TimePickerClock.ts +++ b/packages/main/src/TimePickerClock.ts @@ -119,7 +119,6 @@ class TimePickerClock extends UI5Element { /** * Determines whether the component is displayed as disabled. * - * @type {boolean} * @default false */ @property({ type: Boolean }) @@ -128,7 +127,6 @@ class TimePickerClock extends UI5Element { /** * Determines whether the component is active (visible). * - * @type {boolean} * @default false */ @property({ type: Boolean }) @@ -137,7 +135,6 @@ class TimePickerClock extends UI5Element { /** * Minimum item value for the outer circle of the clock. * - * @type {integer} * @default -1 */ @property({ validator: Integer, defaultValue: -1 }) @@ -146,7 +143,6 @@ class TimePickerClock extends UI5Element { /** * Maximum item value for the outer circle of the clock. * - * @type {integer} * @default -1 */ @property({ validator: Integer, defaultValue: -1 }) @@ -156,7 +152,6 @@ class TimePickerClock extends UI5Element { * If set to true, an inner circle is displayed. * The first item value of the inner circle will be itemMax + 1 * - * @type {boolean} * @default false */ @property({ type: Boolean }) @@ -165,7 +160,6 @@ class TimePickerClock extends UI5Element { /** * Label of the clock dial - for example, 'Hours', 'Minutes', or 'Seconds'. * - * @type {string} * @default undefined */ @property({ type: String, defaultValue: undefined }) @@ -175,7 +169,6 @@ class TimePickerClock extends UI5Element { * If set to true, a surrounding circle with markers (dots) will be hidden. * (for example, on the 'Minutes' clock-dial, markers represent minutes). * - * @type {boolean} * @default false */ @property({ type: Boolean }) @@ -186,7 +179,6 @@ class TimePickerClock extends UI5Element { * the last item from outer circle will be replaced; if there is an inner circle too, the last * item of inner circle will be replaced. Usually, the last item '24' is replaced with '0'. * - * @type {integer} * @default -1 */ @property({ validator: Integer, defaultValue: -1 }) @@ -195,7 +187,6 @@ class TimePickerClock extends UI5Element { /** * Prepend with zero flag. If true, values less than 10 will be prepend with 0. * - * @type {boolean} * @default false */ @property({ type: Boolean }) @@ -204,7 +195,6 @@ class TimePickerClock extends UI5Element { /** * The currently selected value of the clock. * - * @type {integer} * @default -1 */ @property({ validator: Integer, defaultValue: -1 }) @@ -216,7 +206,6 @@ class TimePickerClock extends UI5Element { * The default display step is 5 which means minutes and seconds are displayed as "0", "5", "10", etc. * For hours the display step must be set to 1. * - * @type {integer} * @default 5 */ @property({ validator: Integer, defaultValue: 5 }) @@ -228,7 +217,6 @@ class TimePickerClock extends UI5Element { * - if the clock displays hours - 1 unit = 1 hour * - if the clock displays minutes/seconds - 1 unit = 1 minute/second * - * @type {integer} * @default 1 */ @property({ validator: Integer, defaultValue: 1 }) @@ -236,24 +224,18 @@ class TimePickerClock extends UI5Element { /** * Defines the currently available Time Picker Clock items depending on Clock setup. - * - * @type {Array} */ @property({ type: Object, multiple: true }) _items!: Array; /** * Defines the currently selected Time Picker Clock item. - * - * @type {TimePickerClockSelectedItem} */ @property({ type: Object }) _selectedItem!: TimePickerClockSelectedItem; /** * Keeps variables used in interaction calculations. - * - * @type {TimePickerClockDimensions} */ @property({ type: Object }) _dimensionParameters!: TimePickerClockDimensions; @@ -261,7 +243,6 @@ class TimePickerClock extends UI5Element { /** * Mousedown or Touchstart event flag. * - * @type {boolean} * @default false */ @property({ type: Boolean, noAttribute: true }) @@ -270,7 +251,6 @@ class TimePickerClock extends UI5Element { /** * Cancel Mouseout flag. * - * @type {boolean} * @default false */ @property({ type: Boolean, noAttribute: true }) @@ -279,7 +259,6 @@ class TimePickerClock extends UI5Element { /** * Calculated selected value of the clock during interactions. * - * @type {integer} * @default -1 */ @property({ validator: Integer, defaultValue: -1, noAttribute: true }) @@ -288,7 +267,6 @@ class TimePickerClock extends UI5Element { /** * Selected value of the clock during interactions. * - * @type {integer} * @default -1 */ @property({ validator: Integer, defaultValue: -1, noAttribute: true }) @@ -297,7 +275,6 @@ class TimePickerClock extends UI5Element { /** * Hovered value of the clock during interactions. * - * @type {integer} * @default -1 */ @property({ validator: Integer, defaultValue: -1, noAttribute: true }) @@ -306,7 +283,6 @@ class TimePickerClock extends UI5Element { /** * Previously hovered value of the clock during interactions. * - * @type {integer} * @default -1 */ @property({ validator: Integer, defaultValue: -1, noAttribute: true }) @@ -315,7 +291,6 @@ class TimePickerClock extends UI5Element { /** * Animation in progress flag. * - * @type {boolean} * @default false */ @property({ type: Boolean, noAttribute: true }) @@ -358,10 +333,10 @@ class TimePickerClock extends UI5Element { /** * Returns the real value of the passed clock item, if the replacement must be done, returns the replaced value. * - * @param {number} value The value of the clock item - * @returns {number} The real/replaced value + * @param value The value of the clock item + * @returns The real/replaced value */ - _fixReplacementValue(value: number) { + _fixReplacementValue(value: number): number { let realValue = value; const maxValue = this.itemMax * (this.showInnerCircle ? 2 : 1); @@ -378,7 +353,7 @@ class TimePickerClock extends UI5Element { /** * Updates internal selected value object constructed for rendering purposes. * - * @param {number} value currently selected value. + * @param value currently selected value. */ _updateSelectedValueObject(value: number) { if (value === -1) { @@ -465,9 +440,9 @@ class TimePickerClock extends UI5Element { /** * Returns the DOM Reference of the clock cover element * - * @returns {HTMLElement} the DOM Reference + * @returns the DOM Reference */ - _getClockCoverContainerDomRef() { + _getClockCoverContainerDomRef(): Element | null | undefined { const domRef = this.getDomRef(); return domRef && domRef.querySelector(".ui5-tp-clock-cover"); } @@ -475,19 +450,19 @@ class TimePickerClock extends UI5Element { /** * Returns the real max value of clock items, taking in count if there is inner circle or not. * - * @returns {number} max value + * @returns max value */ - _getMaxValue() { + _getMaxValue(): number { return this.showInnerCircle ? this.itemMax * 2 : this.itemMax; } /** * Calculates the outer height of a HTML element. * - * @param {HTMLElement} element The element which outer height to be calculated - * @returns {number} Outer height of the passed HTML element + * @param element The element which outer height to be calculated + * @returns Outer height of the passed HTML element */ - _outerHeight(element: HTMLElement) { + _outerHeight(element: HTMLElement): number { if (!element) { return 0; } @@ -500,10 +475,10 @@ class TimePickerClock extends UI5Element { /** * Returns the Id of the DOM element of the clock item that display specific value. * - * @param {number} value The value of the clock item - * @returns {string} Id of the clock item element + * @param value The value of the clock item + * @returns Id of the clock item element */ - _hoveredId(value: number) { + _hoveredId(value: number): string { if (value === this._getMaxValue() && this.lastItemReplacement !== -1) { value = this.lastItemReplacement; } @@ -516,19 +491,19 @@ class TimePickerClock extends UI5Element { /** * Returns provided value as string. Padding with additional zero is applied if necessary. * - * @param {number} value The value that should be returned as string - * @returns {string} The value as string + * @param value The value that should be returned as string + * @returns The value as string */ - _getStringValue(value: number) { + _getStringValue(value: number): string { return this.prependZero ? value.toString().padStart(2, "0") : value.toString(); } /** * Calculates dimension variables necessary for determining of item selection. * - * @returns {TimePickerClockDimensions} Dimensions object + * @returns Dimensions object */ - _calculateDimensions() { + _calculateDimensions(): TimePickerClockDimensions | undefined { const cover = this.getDomRef() as HTMLElement; const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft; const scrollTop = window.pageYOffset || document.documentElement.scrollTop; @@ -563,8 +538,8 @@ class TimePickerClock extends UI5Element { /** * Calculates selected and hovered values based on click/touch position. * - * @param {number} x X position of click/touch returned by the event - * @param {number} y Y position of click/touch returned by the event + * @param x X position of click/touch returned by the event + * @param y Y position of click/touch returned by the event */ _calculatePosition(x: number, y: number) { const dX = x - this._dimensionParameters.offsetX + 1 - this._dimensionParameters.radius; @@ -604,8 +579,8 @@ class TimePickerClock extends UI5Element { /** * Does the animation between the old and the new value of the clock. Can be skipped with setting the second parameter to true. * - * @param {number} newValue the new value that must be set - * @param {boolean} skipAnimation whether to skip the animation + * @param newValue the new value that must be set + * @param skipAnimation whether to skip the animation */ _changeValueAnimation(newValue: number, skipAnimation = false) { const maxValue = this.itemMax * (this.showInnerCircle ? 2 : 1); @@ -644,12 +619,12 @@ class TimePickerClock extends UI5Element { /** * Does the animation step between old and new selected values. * - * @param {number} firstSelected first/current value to move from - * @param {number} lastSelected last value to move to - * @param {number} direction direction of the animation - * @param {number} maxValue max clock value - * @param {number} newValue new value - * @param {number} delay delay of the single step + * @param firstSelected first/current value to move from + * @param lastSelected last value to move to + * @param direction direction of the animation + * @param maxValue max clock value + * @param newValue new value + * @param delay delay of the single step */ _selectNextNumber(firstSelected: number, lastSelected: number, direction: number, maxValue: number, newValue: number, delay: number) { const current = firstSelected > maxValue ? firstSelected - maxValue : firstSelected; @@ -678,7 +653,7 @@ class TimePickerClock extends UI5Element { /** * Mousewheel handler. Increases/decreases value of the clock. * - * @param {boolean} increase whether to increase or decrease the value + * @param increase whether to increase or decrease the value */ _modifyValue(increase: boolean) { let selectedValue = this.selectedValue; @@ -715,7 +690,7 @@ class TimePickerClock extends UI5Element { /** * Sets new selected value, fires change event and updates selected value object used for rendering purposes. * - * @param {number} value + * @param value */ _setSelectedValue(value: number) { const realValue: number = this._fixReplacementValue(value); @@ -731,7 +706,7 @@ class TimePickerClock extends UI5Element { /** * TouchStart/MouseDown event handler. * - * @param {event} evt Event object + * @param evt Event object */ _onTouchStart(evt: Event) { this._cancelTouchOut = false; @@ -751,7 +726,7 @@ class TimePickerClock extends UI5Element { /** * TouchMove/MouseMove event handler. * - * @param {event} evt Event object + * @param evt Event object */ _onTouchMove(evt: Event) { let hoveredNumber; @@ -788,7 +763,7 @@ class TimePickerClock extends UI5Element { /** * TouchEnd/MouseUp event handler. * - * @param {event} evt Event object + * @param evt Event object */ _onTouchEnd(evt: Event) { if (!this._mouseOrTouchDown) { @@ -807,7 +782,7 @@ class TimePickerClock extends UI5Element { /** * Mouse Wheel event handler. * - * @param {WheelEvent} evt Event object + * @param evt Event object */ _onMouseWheel(evt: WheelEvent) { const increase = evt.detail ? (evt.detail > 0) : (evt.deltaY > 0 || evt.deltaX > 0); diff --git a/packages/main/src/TimePickerInternals.ts b/packages/main/src/TimePickerInternals.ts index 8368f4fba1da..4bc37eea5312 100644 --- a/packages/main/src/TimePickerInternals.ts +++ b/packages/main/src/TimePickerInternals.ts @@ -98,7 +98,6 @@ class TimePickerInternals extends UI5Element { /** * Defines a formatted time value. * - * @type {string} * @default undefined * @public */ @@ -113,7 +112,6 @@ class TimePickerInternals extends UI5Element { * hh:mm:ss a -> 2:23:15 PM * mm:ss -> 12:04 (only minutes and seconds) - * @type {string} * @default "" * @public */ @@ -123,7 +121,6 @@ class TimePickerInternals extends UI5Element { /** * The index of the active Clock/TogleSpinButton. * - * @type {integer} * @default 0 * @private */ @@ -133,7 +130,6 @@ class TimePickerInternals extends UI5Element { /** * Contains calendar type. * - * @type {CalendarType} * @private */ @property({ type: CalendarType }) @@ -142,7 +138,7 @@ class TimePickerInternals extends UI5Element { /** * Contains currently available Time Picker components depending on time format. * - * @type {Array} + * @private */ @property({ type: Object, multiple: true }) _entities!: Array; @@ -150,7 +146,6 @@ class TimePickerInternals extends UI5Element { /** * Contains component-to-index map. * - * @type {TimePickerComponentIndexMap} * @private */ @property({ type: Object }) @@ -159,7 +154,6 @@ class TimePickerInternals extends UI5Element { /** * Contains currently available Button components depending on time format. * - * @type {Array} * @private */ @property({ type: Object, multiple: true }) @@ -168,7 +162,7 @@ class TimePickerInternals extends UI5Element { /** * Id of the cooldown interval * - * @type {ReturnType} + * @private */ @property({ validator: Integer, noAttribute: true }) _typeCooldownId?: ReturnType; @@ -176,7 +170,7 @@ class TimePickerInternals extends UI5Element { /** * Exact match number buffer * - * @type {integer} + * @private */ @property({ validator: Integer, noAttribute: true }) _exactMatch?: number; @@ -184,7 +178,7 @@ class TimePickerInternals extends UI5Element { /** * Buffer for entered by keyboard numbers * - * @type {string} + * @private */ @property({ defaultValue: "", noAttribute: true }) _keyboardBuffer!: string; @@ -371,9 +365,9 @@ class TimePickerInternals extends UI5Element { /** * Returns name of the clock or button from the id of the event target. * - * @returns {string | undefined} name of the clock/button + * @returns name of the clock/button */ - _getNameFromId(id: string) { + _getNameFromId(id: string): string | undefined { const parts = id.split("_"); return parts.length ? parts[parts.length - 1] : undefined; @@ -382,9 +376,9 @@ class TimePickerInternals extends UI5Element { /** * Returns index of the clock or button from the id of the event target. * - * @returns {number} index of the clock/button + * @returns index of the clock/button */ - _getIndexFromId(id: string) { + _getIndexFromId(id: string): number { const name = this._getNameFromId(id); return name ? this._indexFromName(name) : 0; @@ -393,7 +387,7 @@ class TimePickerInternals extends UI5Element { /** * Changes hours value. * - * @param {hours} number new hours value + * @param hours new hours value */ _hoursChange(hours: number) { if (this._hoursConfiguration.isTwelveHoursFormat) { @@ -409,7 +403,7 @@ class TimePickerInternals extends UI5Element { /** * Changes minutes value. * - * @param {minutes} number new minutes value + * @param minutes new minutes value */ _minutesChange(minutes: number) { const date = this.validDateValue; @@ -421,7 +415,7 @@ class TimePickerInternals extends UI5Element { /** * Changes seconds value. * - * @param {seconds} number new seconds value + * @param seconds new seconds value */ _secondsChange(seconds: number) { const date = this.validDateValue; @@ -469,10 +463,10 @@ class TimePickerInternals extends UI5Element { /** * Shifts hours value with +/- 12 depending on hour value and day period. * - * @param {number} hours current hours - * @returns {number} shifted hours + * @param hours current hours + * @returns shifted hours */ - _shiftHours(hours: number) { + _shiftHours(hours: number): number { if (this._period === this.periodsArray[0]) { // AM hours = hours === 12 ? 0 : hours; } else if (this._period === this.periodsArray[1]) { // PM @@ -484,7 +478,7 @@ class TimePickerInternals extends UI5Element { /** * Clears the currently existing cooldown period and starts new one if requested. * - * @param {boolean} startNewCooldown whether to start new cooldown period after clearing previous one + * @param startNewCooldown whether to start new cooldown period after clearing previous one */ _resetCooldown(startNewCooldown: boolean) { if (!TYPE_COOLDOWN_DELAY) { diff --git a/packages/main/src/TimeSelection.ts b/packages/main/src/TimeSelection.ts index c1c614a20f1c..39bdc79a1399 100644 --- a/packages/main/src/TimeSelection.ts +++ b/packages/main/src/TimeSelection.ts @@ -87,7 +87,6 @@ class TimeSelection extends UI5Element { /** * Defines a formatted time value. * - * @type {string} * @default undefined * @public */ @@ -102,7 +101,6 @@ class TimeSelection extends UI5Element { * hh:mm:ss a -> 2:23:15 PM * mm:ss -> 12:04 (only minutes and seconds) * - * @type {string} * @default "" * @public */ @@ -113,7 +111,6 @@ class TimeSelection extends UI5Element { * Hides the hours slider regardless of formatPattern * This property is only needed for the duration picker use case which requires non-standard slider combinations * @public - * @type {boolean} */ @property({ type: Boolean }) hideHours!: boolean; @@ -122,7 +119,6 @@ class TimeSelection extends UI5Element { * Hides the minutes slider regardless of formatPattern * This property is only needed for the duration picker use case which requires non-standard slider combinations * @public - * @type {boolean} */ @property({ type: Boolean }) hideMinutes!: boolean; @@ -131,7 +127,6 @@ class TimeSelection extends UI5Element { * Hides the seconds slider regardless of formatPattern * This property is only needed for the duration picker use case which requires non-standard slider combinations * @public - * @type {boolean} */ @property({ type: Boolean }) hideSeconds!: boolean; @@ -139,7 +134,6 @@ class TimeSelection extends UI5Element { /** * The maximum number of hours to be displayed for the hours slider (only needed for the duration picker use case) * @public - * @type {Integer} */ @property({ validator: Integer }) maxHours?: number; @@ -147,7 +141,6 @@ class TimeSelection extends UI5Element { /** * The maximum number of minutes to be displayed for the minutes slider (only needed for the duration picker use case) * @public - * @type {Integer} */ @property({ validator: Integer }) maxMinutes?: number; @@ -155,7 +148,6 @@ class TimeSelection extends UI5Element { /** * The maximum number of seconds to be displayed for the seconds slider (only needed for the duration picker use case) * @public - * @type {Integer} */ @property({ validator: Integer }) maxSeconds?: number; @@ -368,7 +360,7 @@ class TimeSelection extends UI5Element { /** * Event handler for the "click" and "focusin" events of the sliders - * @param event + * @param e */ selectSlider(e: MouseEvent | FocusEvent) { const target = e.target as HTMLElement; diff --git a/packages/main/src/TimeSelectionClocks.ts b/packages/main/src/TimeSelectionClocks.ts index c6b587782691..934c81039ff4 100644 --- a/packages/main/src/TimeSelectionClocks.ts +++ b/packages/main/src/TimeSelectionClocks.ts @@ -77,10 +77,10 @@ class TimeSelectionClocks extends TimePickerInternals { /** * Returns ToggleSpinButton component by index or name. * - * @param {number | string} indexOrName the index or name of the component - * @returns { ToggleSpinButton | undefined} component (if exists) or undefined + * @param indexOrName the index or name of the component + * @returns component (if exists) or undefined */ - _buttonComponent(indexOrName: number | string) { + _buttonComponent(indexOrName: number | string): ToggleSpinButton | undefined | null { const index = typeof indexOrName === "string" ? this._indexFromName(indexOrName) : indexOrName; const entity = this._entities[index].entity; return entity ? this.shadowRoot?.querySelector(`#${this._id}_button_${entity}`) : undefined; @@ -89,10 +89,10 @@ class TimeSelectionClocks extends TimePickerInternals { /** * Returns TimePickerClock component by index or name. * - * @param {number | string} indexOrName the index or name of the component - * @returns { TimePickerClock | undefined} component (if exists) or undefined + * @param indexOrName the index or name of the component + * @returns component (if exists) or undefined */ - _clockComponent(indexOrName: number | string) { + _clockComponent(indexOrName: number | string): TimePickerClock | undefined | null { const index = typeof indexOrName === "string" ? this._indexFromName(indexOrName) : indexOrName; const entity = this._entities[index].entity; return entity ? this.shadowRoot?.querySelector(`#${this._id}_clock_${entity}`) : undefined; @@ -101,7 +101,7 @@ class TimeSelectionClocks extends TimePickerInternals { /** * TimePickerClocks focusin event handler. Focuses the active button and switches to active clock. * - * @param {event} evt Event object + * @param evt Event object */ _clocksFocusIn(evt: Event) { const target = evt.target as HTMLElement; @@ -113,7 +113,7 @@ class TimeSelectionClocks extends TimePickerInternals { /** * ToggleSpinButton focusin event handler.Switches to clock which button is being focused. * - * @param {event} evt Event object + * @param evt Event object */ _buttonFocusIn(evt: Event) { const target = evt.target as HTMLElement; @@ -126,7 +126,7 @@ class TimeSelectionClocks extends TimePickerInternals { /** * keyup event handler. * - * @param {event} evt Event object + * @param evt Event object */ _onkeyup(evt: KeyboardEvent) { if (isSpace(evt)) { @@ -137,7 +137,7 @@ class TimeSelectionClocks extends TimePickerInternals { /** * keydown event handler. * - * @param {event} evt Event object + * @param evt Event object */ _onkeydown(evt: KeyboardEvent) { let clock; @@ -208,7 +208,7 @@ class TimeSelectionClocks extends TimePickerInternals { /** * Handles direct numbers entry. * - * @param {event} evt Event object + * @param evt Event object */ _numbersInput(evt: KeyboardEvent) { const char = evt.key; @@ -355,7 +355,7 @@ class TimeSelectionClocks extends TimePickerInternals { /** * Switches to the specific clock by name. * - * @param {string} clockName the name of the clock + * @param clockName the name of the clock */ _switchTo(clockName: string) { const key = this._componentKey(clockName); @@ -367,7 +367,7 @@ class TimeSelectionClocks extends TimePickerInternals { /** * Switches to the specific clock by its index in _clocks property. * - * @param {number} clockIndex the index of the clock + * @param clockIndex the index of the clock */ _switchClock(clockIndex: number) { const newButton = this._buttonComponent(clockIndex); @@ -383,7 +383,7 @@ class TimeSelectionClocks extends TimePickerInternals { /** * Switches to the next available clock. * - * @param {boolean} wrapAround whether to switch to the first clock if there are no next clock + * @param wrapAround whether to switch to the first clock if there are no next clock */ _switchNextClock(wrapAround = false) { let activeIndex = this._activeIndex; @@ -409,7 +409,7 @@ class TimeSelectionClocks extends TimePickerInternals { /** * Clock 'change' event handler. * - * @param {event} evt Event object + * @param evt Event object */ _clockChange(evt: CustomEvent) { const index = this._getIndexFromId((evt.target as HTMLElement).id); diff --git a/packages/main/src/TimeSelectionInputs.ts b/packages/main/src/TimeSelectionInputs.ts index 28caa8dd81ac..29d5e011ed46 100644 --- a/packages/main/src/TimeSelectionInputs.ts +++ b/packages/main/src/TimeSelectionInputs.ts @@ -106,10 +106,10 @@ class TimeSelectionInputs extends TimePickerInternals { /** * Returns Input component by index or name. * - * @param {number | string} indexOrName the index or name of the component - * @returns { Input | undefined} component (if exists) or undefined + * @param indexOrName the index or name of the component + * @returns component (if exists) or undefined */ - _inputComponent(indexOrName: number | string) { + _inputComponent(indexOrName: number | string): Input | undefined | null { const index = typeof indexOrName === "string" ? this._indexFromName(indexOrName) : indexOrName; const entity = this._entities[index].entity; return entity ? this.shadowRoot?.querySelector(`#${this._id}_input_${entity}`) : undefined; @@ -118,10 +118,10 @@ class TimeSelectionInputs extends TimePickerInternals { /** * Returns the inner input element DOM reference. * - * @param { Input } input the Input component - * @returns { HTMLElement } inner input element + * @param input the Input component + * @returns inner input element */ - _innerInput(input: Input) { + _innerInput(input: Input): HTMLElement | null { return input && input.getInputDOMRefSync(); } @@ -198,7 +198,7 @@ class TimeSelectionInputs extends TimePickerInternals { /** * Switches to the specific input. * - * @param {number} index the index (in _entities array) of the input + * @param index the index (in _entities array) of the input * @private */ _switchInput(index: number) { @@ -211,7 +211,7 @@ class TimeSelectionInputs extends TimePickerInternals { /** * Switches to the next input that can de focused. * - * @param {boolean} wrapAround whether to start with first clock after reaching the last one, or not + * @param wrapAround whether to start with first clock after reaching the last one, or not * @private */ _switchNextInput(wrapAround = false) { @@ -237,12 +237,12 @@ class TimeSelectionInputs extends TimePickerInternals { /** * Return a value as string, formatted and prepended with zero if necessary. * - * @param {number} num A number to format - * @param {boolean} prependZero Whether to prepend with zero or not - * @returns {string} Formatted value + * @param num A number to format + * @param prependZero Whether to prepend with zero or not + * @returns Formatted value * @private */ - _formatNumberToString(num: number, prependZero: boolean) { + _formatNumberToString(num: number, prependZero: boolean): string { return num < 10 && prependZero ? `0${num}` : num.toString(); } @@ -286,7 +286,7 @@ class TimeSelectionInputs extends TimePickerInternals { /** * Input 'change' event handler. * - * @param {value} number new value to set on active input + * @param number new value to set on active input */ _inputChange(value: number) { const stringValue = this._formatNumberToString(value, this._entities[this._activeIndex].prependZero); diff --git a/packages/main/src/ToggleButton.ts b/packages/main/src/ToggleButton.ts index 2e720e5a1a0c..17bf323aa3d4 100644 --- a/packages/main/src/ToggleButton.ts +++ b/packages/main/src/ToggleButton.ts @@ -40,7 +40,6 @@ class ToggleButton extends Button { /** * Determines whether the component is displayed as pressed. * - * @type {boolean} * @default false * @public */ diff --git a/packages/main/src/ToggleSpinButton.ts b/packages/main/src/ToggleSpinButton.ts index b1ffccdae944..e7e4c02fe111 100644 --- a/packages/main/src/ToggleSpinButton.ts +++ b/packages/main/src/ToggleSpinButton.ts @@ -35,7 +35,6 @@ class ToggleSpinButton extends ToggleButton { /** * Defines the ARIA valuemin of the component. * - * @type {Integer} * @defaultvalue -1 */ @property({ validator: Integer, defaultValue: -1 }) @@ -45,7 +44,6 @@ class ToggleSpinButton extends ToggleButton { * Defines the ARIA valuemax of the component. * * @name sap.ui.webc.main.ToggleSpinButton.prototype.valueMax - * @type {Integer} * @defaultvalue -1 */ @property({ validator: Integer, defaultValue: -1 }) @@ -55,7 +53,6 @@ class ToggleSpinButton extends ToggleButton { * Defines the ARIA valuenow of the component. * * @name sap.ui.webc.main.ToggleSpinButton.prototype.valueNow - * @type {Integer} * @defaultvalue -1 */ @property({ validator: Integer, defaultValue: -1 }) @@ -64,7 +61,6 @@ class ToggleSpinButton extends ToggleButton { /** * Defines the ARIA valuetext of the component. * - * @type {string} * @name sap.ui.webc.main.ToggleSpinButton.prototype.valueText */ @property() diff --git a/packages/main/src/WheelSlider.ts b/packages/main/src/WheelSlider.ts index 717cbf36fdb5..207b8f61d185 100644 --- a/packages/main/src/WheelSlider.ts +++ b/packages/main/src/WheelSlider.ts @@ -83,7 +83,6 @@ class WheelSlider extends UI5Element { * A disabled component can't be pressed or * focused, and it is not in the tab chain. * - * @type {boolean} * @default false * @public */ @@ -92,7 +91,6 @@ class WheelSlider extends UI5Element { /** * Defines the currently selected value - * @type {string} * @default "" * @public */ @@ -101,7 +99,6 @@ class WheelSlider extends UI5Element { /** * Defines the label of the wheelslider. - * @type {string} * @default "" * @public */ @@ -110,7 +107,6 @@ class WheelSlider extends UI5Element { /** * Indicates if the wheelslider is expanded. - * @type {boolean} * @default false * @public */ @@ -119,7 +115,6 @@ class WheelSlider extends UI5Element { /** * Indicates if the wheelslider has a cyclic behaviour. - * @type {boolean} * @default false * @public */ @@ -324,7 +319,7 @@ class WheelSlider extends UI5Element { /** * - * @param {event} e Wheel Event + * @param e Wheel Event * @private * * The listener for this event can't be passive as it calls preventDefault() diff --git a/packages/main/src/YearPicker.ts b/packages/main/src/YearPicker.ts index 227253995fb3..bd2c59dae58e 100644 --- a/packages/main/src/YearPicker.ts +++ b/packages/main/src/YearPicker.ts @@ -85,7 +85,6 @@ class YearPicker extends CalendarPart implements ICalendarPicker { /** * An array of UTC timestamps representing the selected date * or dates depending on the capabilities of the picker component. - * @type {array} * @public */ @property({ @@ -291,7 +290,7 @@ class YearPicker extends CalendarPart implements ICalendarPicker { /** * Sets the timestamp to an absolute value. - * @param { number } value + * @param value * @private */ _setTimestamp(value: number) { @@ -301,7 +300,7 @@ class YearPicker extends CalendarPart implements ICalendarPicker { /** * Modifies timestamp by a given amount of years and, if necessary, loads the prev/next page. - * @param { number } amount + * @param amount * @private */ _modifyTimestampBy(amount: number) { @@ -320,7 +319,7 @@ class YearPicker extends CalendarPart implements ICalendarPicker { /** * User clicked with the mouser or pressed Enter/Space - * @param { Event } e + * @param e * @private */ _selectYear(e: Event) { @@ -336,7 +335,6 @@ class YearPicker extends CalendarPart implements ICalendarPicker { /** * Called by the Calendar component. * @protected - * @returns { boolean } */ _hasPreviousPage(): boolean { return this._firstYear! > this._minDate.getYear(); @@ -345,7 +343,6 @@ class YearPicker extends CalendarPart implements ICalendarPicker { /** * Called by the Calendar component. * @protected - * @returns { boolean } */ _hasNextPage(): boolean { return this._firstYear! + this._getPageSize() - 1 < this._maxDate.getYear(); From 8ba84e9a65dac5e0a940ec7522a13a01c1b51db4 Mon Sep 17 00:00:00 2001 From: Nikolay Hristov Date: Wed, 15 Nov 2023 14:15:01 +0200 Subject: [PATCH 04/12] docs: fix storybook errors --- packages/main/src/FileUploader.ts | 2 +- packages/main/src/TimeSelectionInputs.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/main/src/FileUploader.ts b/packages/main/src/FileUploader.ts index eab99f140a8d..58ecac2be7d3 100644 --- a/packages/main/src/FileUploader.ts +++ b/packages/main/src/FileUploader.ts @@ -272,7 +272,7 @@ class FileUploader extends UI5Element implements IFormElement { * @readonly * @public */ - get files(): FileList { + get files(): FileList | null { if (this._input) { return this._input.files; } diff --git a/packages/main/src/TimeSelectionInputs.ts b/packages/main/src/TimeSelectionInputs.ts index 29d5e011ed46..8a88ac43a163 100644 --- a/packages/main/src/TimeSelectionInputs.ts +++ b/packages/main/src/TimeSelectionInputs.ts @@ -121,7 +121,7 @@ class TimeSelectionInputs extends TimePickerInternals { * @param input the Input component * @returns inner input element */ - _innerInput(input: Input): HTMLElement | null { + _innerInput(input: Input): HTMLInputElement | null { return input && input.getInputDOMRefSync(); } From ed08e7e6d879715bb3590199c1b2d157d171e0a0 Mon Sep 17 00:00:00 2001 From: Nikolay Hristov Date: Wed, 15 Nov 2023 14:39:25 +0200 Subject: [PATCH 05/12] docs: add missing file --- packages/fiori/src/FilterItemOption.ts | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/packages/fiori/src/FilterItemOption.ts b/packages/fiori/src/FilterItemOption.ts index 6fe58bfb99ef..a771260dda84 100644 --- a/packages/fiori/src/FilterItemOption.ts +++ b/packages/fiori/src/FilterItemOption.ts @@ -16,13 +16,10 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement * import @ui5/webcomponents-fiori/dist/FilterItemOption.js"; * * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.FilterItemOption - * @extends sap.ui.webc.base.UI5Element + * @extends UI5Element * @abstract * @since 1.0.0-rc.16 - * @tagname ui5-filter-item-option - * @implements sap.ui.webc.fiori.IFilterItemOption + * @implements IFilterItemOption * @public */ @customElement("ui5-filter-item-option") @@ -30,9 +27,7 @@ class FilterItemOption extends UI5Element { /** * Defines the text of the component. * - * @name sap.ui.webc.fiori.FilterItemOption.prototype.text - * @type {string} - * @defaultvalue "" + * @default "" * @public */ @property() @@ -41,9 +36,7 @@ class FilterItemOption extends UI5Element { /** * Defines if the component is selected. * - * @name sap.ui.webc.fiori.FilterItemOption.prototype.selected - * @type {boolean} - * @defaultvalue false + * @default false * @public */ @property({ type: Boolean }) From 621fb6c69d8b7d4692a4388bbe9bada2d42ad215 Mon Sep 17 00:00:00 2001 From: Nikolay Hristov Date: Thu, 16 Nov 2023 16:11:47 +0200 Subject: [PATCH 06/12] docs: update interfaces --- packages/fiori/src/Bar.ts | 2 +- packages/fiori/src/FilterItem.ts | 4 +-- packages/fiori/src/FilterItemOption.ts | 1 - packages/fiori/src/Interfaces.ts | 34 +++++------------------- packages/fiori/src/SortItem.ts | 4 +-- packages/fiori/src/TimelineItem.ts | 5 ++-- packages/main/src/Button.ts | 3 ++- packages/main/src/CalendarDate.ts | 4 +-- packages/main/src/ColorPaletteItem.ts | 3 ++- packages/main/src/Interfaces.ts | 27 ------------------- packages/main/src/MenuItem.ts | 4 +-- packages/main/src/SegmentedButtonItem.ts | 4 +-- 12 files changed, 18 insertions(+), 77 deletions(-) diff --git a/packages/fiori/src/Bar.ts b/packages/fiori/src/Bar.ts index fa8d8432df7f..e2037a91de50 100644 --- a/packages/fiori/src/Bar.ts +++ b/packages/fiori/src/Bar.ts @@ -45,7 +45,7 @@ import BarCss from "./generated/themes/Bar.css.js"; * * @csspart bar - Used to style the wrapper of the content of the component * @constructor - * @implements {IBar} + * @implements { IBar } * @extends UI5Element * @public * @since 1.0.0-rc.11 diff --git a/packages/fiori/src/FilterItem.ts b/packages/fiori/src/FilterItem.ts index 37c26856e44d..8cc88ceb5245 100644 --- a/packages/fiori/src/FilterItem.ts +++ b/packages/fiori/src/FilterItem.ts @@ -3,7 +3,6 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import type FilterItemOption from "./FilterItemOption.js"; -import type { IFilterItem } from "./Interfaces"; /** * @class @@ -22,11 +21,10 @@ import type { IFilterItem } from "./Interfaces"; * @extends UI5Element * @abstract * @since 1.0.0-rc.16 - * @implements {IFilterItem} * @public */ @customElement("ui5-filter-item") -class FilterItem extends UI5Element implements IFilterItem { +class FilterItem extends UI5Element { /** * Defines the text of the component. * diff --git a/packages/fiori/src/FilterItemOption.ts b/packages/fiori/src/FilterItemOption.ts index a771260dda84..ab581608d976 100644 --- a/packages/fiori/src/FilterItemOption.ts +++ b/packages/fiori/src/FilterItemOption.ts @@ -19,7 +19,6 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement * @extends UI5Element * @abstract * @since 1.0.0-rc.16 - * @implements IFilterItemOption * @public */ @customElement("ui5-filter-item-option") diff --git a/packages/fiori/src/Interfaces.ts b/packages/fiori/src/Interfaces.ts index 01acb3024a43..7f5cec694831 100644 --- a/packages/fiori/src/Interfaces.ts +++ b/packages/fiori/src/Interfaces.ts @@ -1,3 +1,5 @@ +import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; + /** * Interface for components that may be slotted inside ui5-page as header and footer. * @@ -6,22 +8,6 @@ */ interface IBar extends HTMLElement {} -/** - * Interface for components that may be slotted inside ui5-view-settings-dialog as filter items - * - * @interface - * @public - */ -interface IFilterItem extends HTMLElement {} - -/** - * Interface for components that may be slotted inside ui5-filter-item as values - * - * @interface - * @public - */ -interface IFilterItemOption extends HTMLElement {} - /** * Interface for components that can be slotted inside ui5-media-gallery as items. * @@ -85,21 +71,16 @@ const ISideNavigationItem = "sap.ui.webc.fiori.ISideNavigationItem"; */ const ISideNavigationSubItem = "sap.ui.webc.fiori.ISideNavigationSubItem"; -/** - * Interface for components that may be slotted inside ui5-view-settings-dialog as sort items - * - * @interface - * @public - */ -interface ISortItem extends HTMLElement {} - /** * Interface for components that may be slotted inside ui5-timeline as items * * @interface * @public */ -interface ITimelineItem extends HTMLElement {} +interface ITimelineItem extends UI5Element { + icon: string, + layout: string, +} /** * Interface for components that may be slotted inside ui5-upload-collection as items @@ -121,8 +102,6 @@ const IWizardStep = "sap.ui.webc.fiori.IWizardStep"; export { IBar, - IFilterItem, - IFilterItemOption, IMediaGalleryItem, INotificationAction, INotificationListItem, @@ -130,7 +109,6 @@ export { IShellBarItem, ISideNavigationItem, ISideNavigationSubItem, - ISortItem, ITimelineItem, IUploadCollectionItem, IWizardStep, diff --git a/packages/fiori/src/SortItem.ts b/packages/fiori/src/SortItem.ts index 0a7afc158957..cc1ddeed103e 100644 --- a/packages/fiori/src/SortItem.ts +++ b/packages/fiori/src/SortItem.ts @@ -1,7 +1,6 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; -import type { ISortItem } from "./Interfaces"; /** * @class @@ -20,11 +19,10 @@ import type { ISortItem } from "./Interfaces"; * @extends UI5Element * @abstract * @since 1.0.0-rc.16 - * @implements {ISortItem} * @public */ @customElement("ui5-sort-item") -class SortItem extends UI5Element implements ISortItem { +class SortItem extends UI5Element { /** * Defines the text of the component. * diff --git a/packages/fiori/src/TimelineItem.ts b/packages/fiori/src/TimelineItem.ts index 2ee046bd62dc..48128e38dc6f 100644 --- a/packages/fiori/src/TimelineItem.ts +++ b/packages/fiori/src/TimelineItem.ts @@ -24,7 +24,8 @@ const LARGE_LINE_WIDTH = "LargeLineWidth"; * * @constructor * @extends UI5Element - * @implements {ITimelineItem} + * @implements { ITabbable } + * @implements { ITimelineItem } * @public */ @customElement({ @@ -44,7 +45,6 @@ const LARGE_LINE_WIDTH = "LargeLineWidth"; * Note: The event will not be fired if the name-clickable * attribute is not set. * - * @event sap.ui.webc.fiori.TimelineItem#name-click * @public */ @event("name-click") @@ -56,7 +56,6 @@ class TimelineItem extends UI5Element implements ITabbable, ITimelineItem { * * See all the available icons in the Icon Explorer. * - * @name sap.ui.webc.fiori.TimelineItem.prototype.icon * @default "" * @public */ diff --git a/packages/main/src/Button.ts b/packages/main/src/Button.ts index 4851dd99f6b3..0b769ebee3d4 100644 --- a/packages/main/src/Button.ts +++ b/packages/main/src/Button.ts @@ -68,7 +68,8 @@ let activeButton: Button | null = null; * @csspart button - Used to style the native button element * @constructor * @extends UI5Element - * @implements {IButton} + * @implements { IFormElement } + * @implements { IButton } * @public */ @customElement({ diff --git a/packages/main/src/CalendarDate.ts b/packages/main/src/CalendarDate.ts index 7afc6c3846a0..4c52abcf4d95 100644 --- a/packages/main/src/CalendarDate.ts +++ b/packages/main/src/CalendarDate.ts @@ -1,7 +1,6 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; -import type { ICalendarDate } from "./Interfaces"; /** * @class @@ -13,11 +12,10 @@ import type { ICalendarDate } from "./Interfaces"; * @constructor * @extends UI5Element * @abstract - * @implements {ICalendarDate} * @public */ @customElement("ui5-date") -class CalendarDate extends UI5Element implements ICalendarDate { +class CalendarDate extends UI5Element { /** * The date formatted according to the formatPattern property * of the ui5-calendar that hosts the component. diff --git a/packages/main/src/ColorPaletteItem.ts b/packages/main/src/ColorPaletteItem.ts index 6b6b1f0d56c8..eeb2ccd75d1f 100644 --- a/packages/main/src/ColorPaletteItem.ts +++ b/packages/main/src/ColorPaletteItem.ts @@ -28,7 +28,8 @@ import ColorPaletteItemCss from "./generated/themes/ColorPaletteItem.css.js"; * @extends UI5Element * @abstract * @since 1.0.0-rc.12 - * @implements {IColorPaletteItem} + * @implements { ITabbable } + * @implements { IColorPaletteItem } * @public */ @customElement({ diff --git a/packages/main/src/Interfaces.ts b/packages/main/src/Interfaces.ts index 2318c3af7c6c..4c6b95f70b39 100644 --- a/packages/main/src/Interfaces.ts +++ b/packages/main/src/Interfaces.ts @@ -33,14 +33,6 @@ interface IButton extends HTMLElement {} */ const ICardHeader = "sap.ui.webc.main.ICardHeader"; -/** - * Interface for components that may be used as dates inside ui5-calendar - * - * @interface - * @public - */ -interface ICalendarDate extends HTMLElement {} - /** * Interface for components that may be slotted inside a ui5-combobox * @@ -94,14 +86,6 @@ const IInputSuggestionItem = "sap.ui.webc.main.IInputSuggestionItem"; */ const IListItem = "sap.ui.webc.main.IListItem"; -/** - * Interface for components that may be slotted inside ui5-menu as items - * - * @interface - * @public - */ -interface IMenuItem extends HTMLElement {} - /** * Interface for components that may be slotted inside a ui5-multi-combobox as items * @@ -111,14 +95,6 @@ interface IMenuItem extends HTMLElement {} */ const IMultiComboBoxItem = "sap.ui.webc.main.IMultiComboBoxItem"; -/** - * Interface for components that may be slotted inside ui5-segmented-button as items - * - * @interface - * @public - */ -interface ISegmentedButtonItem extends HTMLElement {} - /** * Interface for components that may be slotted inside ui5-select as options * @@ -214,16 +190,13 @@ export { IBreadcrumbsItem, IButton, ICardHeader, - ICalendarDate, IColorPaletteItem, IComboBoxItem, IIcon, IInput, IInputSuggestionItem, IListItem, - IMenuItem, IMultiComboBoxItem, - ISegmentedButtonItem, ISelectOption, ISelectMenuOption, ITab, diff --git a/packages/main/src/MenuItem.ts b/packages/main/src/MenuItem.ts index 416d97e5e40c..3e2615429bea 100644 --- a/packages/main/src/MenuItem.ts +++ b/packages/main/src/MenuItem.ts @@ -4,7 +4,6 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; import Integer from "@ui5/webcomponents-base/dist/types/Integer.js"; import type Menu from "./Menu.js"; -import type { IMenuItem } from "./Interfaces"; /** * @class @@ -27,12 +26,11 @@ import type { IMenuItem } from "./Interfaces"; * @constructor * @extends UI5Element * @abstract - * @implements IMenuItem * @since 1.3.0 * @public */ @customElement("ui5-menu-item") -class MenuItem extends UI5Element implements IMenuItem { +class MenuItem extends UI5Element { /** * Defines the text of the tree item. * diff --git a/packages/main/src/SegmentedButtonItem.ts b/packages/main/src/SegmentedButtonItem.ts index 281beabc0186..6e740184fb4f 100644 --- a/packages/main/src/SegmentedButtonItem.ts +++ b/packages/main/src/SegmentedButtonItem.ts @@ -2,7 +2,6 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import Integer from "@ui5/webcomponents-base/dist/types/Integer.js"; -import type { ISegmentedButtonItem } from "./Interfaces"; import SegmentedButtonItemTemplate from "./generated/templates/SegmentedButtonItemTemplate.lit.js"; import ToggleButton from "./ToggleButton.js"; @@ -30,7 +29,6 @@ import { SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defa * @constructor * @extends ToggleButton * @abstract - * @implements {ISegmentedButtonItem} * @public */ @customElement({ @@ -38,7 +36,7 @@ import { SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defa template: SegmentedButtonItemTemplate, dependencies: [Icon], }) -class SegmentedButtonItem extends ToggleButton implements ISegmentedButtonItem { +class SegmentedButtonItem extends ToggleButton { /** * Note: The property is inherited and not supported. If set, it won't take any effect. * From a332a43db79ed851751a4ad2a0aa28f802c14744 Mon Sep 17 00:00:00 2001 From: Nikolay Hristov Date: Tue, 21 Nov 2023 11:26:06 +0200 Subject: [PATCH 07/12] docs: fix comments --- packages/fiori/src/DynamicSideContent.ts | 2 -- packages/fiori/src/FilterItem.ts | 1 - packages/fiori/src/Interfaces.ts | 2 -- packages/fiori/src/Timeline.ts | 2 +- packages/fiori/src/ViewSettingsDialog.ts | 9 ++------- packages/main/src/DatePicker.ts | 5 +---- packages/main/src/DateRangePicker.ts | 8 ++------ packages/main/src/FileUploader.ts | 1 - packages/main/src/Interfaces.ts | 2 -- packages/main/src/SegmentedButton.ts | 4 ---- packages/main/src/SplitButton.ts | 2 +- packages/main/src/StepInput.ts | 2 -- packages/main/src/Switch.ts | 4 ++-- packages/main/src/TimePicker.ts | 1 - packages/main/src/TimePickerBase.ts | 6 +----- packages/main/src/TimePickerInternals.ts | 1 - packages/main/src/TimeSelectionInputs.ts | 2 +- packages/main/src/ToggleSpinButton.ts | 10 ++++------ packages/main/src/WheelSlider.ts | 3 +-- 19 files changed, 16 insertions(+), 51 deletions(-) diff --git a/packages/fiori/src/DynamicSideContent.ts b/packages/fiori/src/DynamicSideContent.ts index 1656dad1d686..32cab4dd1e85 100644 --- a/packages/fiori/src/DynamicSideContent.ts +++ b/packages/fiori/src/DynamicSideContent.ts @@ -272,7 +272,6 @@ class DynamicSideContent extends UI5Element { /** * Defines the side content. * - * @slot * @public */ @slot() @@ -306,7 +305,6 @@ class DynamicSideContent extends UI5Element { /** * Toggles visibility of main and side contents on S screen size (mobile device). * @public - * @method */ toggleContents() { if (this.breakpoint === this.sizeS && this.sideContentVisibility !== SideContentVisibility.AlwaysShow) { diff --git a/packages/fiori/src/FilterItem.ts b/packages/fiori/src/FilterItem.ts index 8cc88ceb5245..8e1df979a6cf 100644 --- a/packages/fiori/src/FilterItem.ts +++ b/packages/fiori/src/FilterItem.ts @@ -45,7 +45,6 @@ class FilterItem extends UI5Element { /** * Defines the values list. - * @slot values * @public */ @slot() diff --git a/packages/fiori/src/Interfaces.ts b/packages/fiori/src/Interfaces.ts index 7f5cec694831..0e27a4adbb5c 100644 --- a/packages/fiori/src/Interfaces.ts +++ b/packages/fiori/src/Interfaces.ts @@ -3,7 +3,6 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; /** * Interface for components that may be slotted inside ui5-page as header and footer. * - * @interface * @public */ interface IBar extends HTMLElement {} @@ -74,7 +73,6 @@ const ISideNavigationSubItem = "sap.ui.webc.fiori.ISideNavigationSubItem"; /** * Interface for components that may be slotted inside ui5-timeline as items * - * @interface * @public */ interface ITimelineItem extends UI5Element { diff --git a/packages/fiori/src/Timeline.ts b/packages/fiori/src/Timeline.ts index eeb807b3c5f4..0cb886381615 100644 --- a/packages/fiori/src/Timeline.ts +++ b/packages/fiori/src/Timeline.ts @@ -66,7 +66,7 @@ class Timeline extends UI5Element { /** * Defines the accessible ARIA name of the component. * - * @default: "" + * @default "" * @public * @since 1.2.0 */ diff --git a/packages/fiori/src/ViewSettingsDialog.ts b/packages/fiori/src/ViewSettingsDialog.ts index acad03deaf7c..87297e16c728 100644 --- a/packages/fiori/src/ViewSettingsDialog.ts +++ b/packages/fiori/src/ViewSettingsDialog.ts @@ -263,7 +263,6 @@ class ViewSettingsDialog extends UI5Element { * Defines the list of items against which the user could sort data. * Note: If you want to use this slot, you need to import used item: import "@ui5/webcomponents-fiori/dist/SortItem"; * - * @slot sortItems * @public */ @slot() @@ -273,7 +272,6 @@ class ViewSettingsDialog extends UI5Element { * Defines the filterItems list. * Note: If you want to use this slot, you need to import used item: import "@ui5/webcomponents-fiori/dist/FilterItem"; * - * @slot filterItems * @public */ @slot() @@ -513,7 +511,7 @@ class ViewSettingsDialog extends UI5Element { * Shows the dialog. * @public */ - show() { + show(): void { if (!this._dialog) { this._sortOrder = this._sortOrderListDomRef; this._sortBy = this._sortByList; @@ -725,12 +723,9 @@ class ViewSettingsDialog extends UI5Element { * } * * @param settings - predefined settings. - * @param settings.sortOrder - sort order - * @param settings.sortBy - sort by - * @param settings.filters - filters * @public */ - setConfirmedSettings(settings: VSDSettings) { + setConfirmedSettings(settings: VSDSettings): void { if (settings && this._dialog && !this._dialog.isOpen()) { const tempSettings: VSDInternalSettings = JSON.parse(JSON.stringify(this._confirmedSettings)); if (settings.sortOrder) { diff --git a/packages/main/src/DatePicker.ts b/packages/main/src/DatePicker.ts index 3257cdc5ee6d..28dc2fe1441e 100644 --- a/packages/main/src/DatePicker.ts +++ b/packages/main/src/DatePicker.ts @@ -417,7 +417,6 @@ class DatePicker extends DateComponentBase implements IFormElement { * Override in derivatives to provide the calendar a timestamp based on their properties * By default focus the calendar on the selected date if set, or the current day otherwise * @protected - * @returns the calendar timestamp */ get _calendarTimestamp(): number { if (this.value && this.dateValueUTC && this._checkValueValidity(this.value)) { @@ -432,7 +431,6 @@ class DatePicker extends DateComponentBase implements IFormElement { * Used to provide selectedDates to the calendar based on the component's state * Override in derivatives to provide different rules for setting the calendar's selected dates * @protected - * @returns the selected dates */ get _calendarSelectedDates(): Array { if (this.value && this._checkValueValidity(this.value)) { @@ -737,7 +735,7 @@ class DatePicker extends DateComponentBase implements IFormElement { /** * The user selected a new date in the calendar - * @param event + * @param e * @protected */ onSelectedDatesChange(e: CustomEvent) { @@ -815,7 +813,6 @@ class DatePicker extends DateComponentBase implements IFormElement { * Currently selected date represented as a Local JavaScript Date instance. * * @public - * @readonly */ get dateValue(): Date | null { return this.liveValue ? this.getFormat().parse(this.liveValue) as Date : this.getFormat().parse(this.value) as Date; diff --git a/packages/main/src/DateRangePicker.ts b/packages/main/src/DateRangePicker.ts index e3480667483a..3909eec23c72 100644 --- a/packages/main/src/DateRangePicker.ts +++ b/packages/main/src/DateRangePicker.ts @@ -86,20 +86,18 @@ class DateRangePicker extends DatePicker { /** * Note: The getter method is inherited and not supported. If called it will return an empty value. * - * @readonly * @public */ - get dateValue() { + get dateValue(): null { return null; } /** * Note: The getter method is inherited and not supported. If called it will return an empty value. * - * @readonly * @public */ - get dateValueUTC() { + get dateValueUTC(): null { return null; } @@ -148,7 +146,6 @@ class DateRangePicker extends DatePicker { /** * Returns the start date of the currently selected range as JavaScript Date instance. * - * @readonly * @public */ get startDateValue(): Date | null { @@ -158,7 +155,6 @@ class DateRangePicker extends DatePicker { /** * Returns the end date of the currently selected range as JavaScript Date instance. * - * @readonly * @public */ get endDateValue(): Date | null { diff --git a/packages/main/src/FileUploader.ts b/packages/main/src/FileUploader.ts index 58ecac2be7d3..23f0c3e31f9f 100644 --- a/packages/main/src/FileUploader.ts +++ b/packages/main/src/FileUploader.ts @@ -269,7 +269,6 @@ class FileUploader extends UI5Element implements IFormElement { /** * FileList of all selected files. - * @readonly * @public */ get files(): FileList | null { diff --git a/packages/main/src/Interfaces.ts b/packages/main/src/Interfaces.ts index 4c6b95f70b39..56023018529c 100644 --- a/packages/main/src/Interfaces.ts +++ b/packages/main/src/Interfaces.ts @@ -19,7 +19,6 @@ const IBreadcrumbsItem = "sap.ui.webc.main.IBreadcrumbsItem"; /** * Interface for components that may be used as a button inside numerous higher-order components * - * @interface * @public */ interface IButton extends HTMLElement {} @@ -45,7 +44,6 @@ const IComboBoxItem = "sap.ui.webc.main.IComboBoxItem"; /** * Interface for components that may be used inside a ui5-color-palette or ui5-color-palette-popover * - * @interface * @public */ interface IColorPaletteItem extends HTMLElement {} diff --git a/packages/main/src/SegmentedButton.ts b/packages/main/src/SegmentedButton.ts index ae6a2a4e312b..0eb8e8466f0a 100644 --- a/packages/main/src/SegmentedButton.ts +++ b/packages/main/src/SegmentedButton.ts @@ -255,11 +255,9 @@ class SegmentedButton extends UI5Element { /** * Currently selected item. * - * @readonly * @deprecated since 1.14.0. This method will be removed in the next major release. * Please use the selectedItems property instead. * @public - * @returns selected segmented button item */ get selectedItem(): SegmentedButtonItem | undefined { return this._selectedItem; @@ -267,10 +265,8 @@ class SegmentedButton extends UI5Element { /** * Returns an array of the currently selected items. - * @readonly * @since 1.14.0 * @public - * @returns array of selected segmented button items */ get selectedItems(): Array { return this.items.filter(item => item.pressed); diff --git a/packages/main/src/SplitButton.ts b/packages/main/src/SplitButton.ts index 534aa47933c8..2835ca810308 100644 --- a/packages/main/src/SplitButton.ts +++ b/packages/main/src/SplitButton.ts @@ -146,7 +146,7 @@ class SplitButton extends UI5Element { /** * Defines the accessible ARIA name of the component. * - * @default: "" + * @default "" * @public */ @property({ defaultValue: undefined }) diff --git a/packages/main/src/StepInput.ts b/packages/main/src/StepInput.ts index 30d3e88238ad..bde04315ef69 100644 --- a/packages/main/src/StepInput.ts +++ b/packages/main/src/StepInput.ts @@ -275,7 +275,6 @@ class StepInput extends UI5Element implements IFormElement { *
    * Note: The valueStateMessage would be displayed, * when the component is in Information, Warning or Error value state. - * @slot * @public */ @slot() @@ -285,7 +284,6 @@ class StepInput 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. * - * @slot * @private */ @slot() diff --git a/packages/main/src/Switch.ts b/packages/main/src/Switch.ts index 0e794f324fbf..1500e570f14d 100644 --- a/packages/main/src/Switch.ts +++ b/packages/main/src/Switch.ts @@ -142,7 +142,7 @@ class Switch extends UI5Element implements IFormElement { * * Note: We recommend that you set an accessibleNameRef pointing to an external label or at least an accessibleName. * Providing an accessibleNameRef or an accessibleName is mandatory in the cases when textOn and textOff properties aren't set. - * @default: "" + * @default "" * @public * @since 1.2.0 */ @@ -165,7 +165,7 @@ class Switch extends UI5Element implements IFormElement { * Defines the tooltip of the component. *
    * Note: If applicable an external label reference should always be the preferred option to provide context to the ui5-switch component over a tooltip. - * @default: "" + * @default "" * @public * @since 1.9.0 */ diff --git a/packages/main/src/TimePicker.ts b/packages/main/src/TimePicker.ts index 4613778526aa..5993c8c4452f 100644 --- a/packages/main/src/TimePicker.ts +++ b/packages/main/src/TimePicker.ts @@ -134,7 +134,6 @@ class TimePicker extends TimePickerBase { /** * Currently selected time represented as JavaScript Date instance * - * @readonly * @public */ get dateValue(): Date | Date[] { diff --git a/packages/main/src/TimePickerBase.ts b/packages/main/src/TimePickerBase.ts index 59deb313077f..28522ce36645 100644 --- a/packages/main/src/TimePickerBase.ts +++ b/packages/main/src/TimePickerBase.ts @@ -193,7 +193,6 @@ class TimePickerBase extends UI5Element { * when the ui5-time-picker is in Information, Warning or Error value state. * * @since 1.0.0-rc.8 - * @slot * @public */ @slot() @@ -215,7 +214,6 @@ class TimePickerBase extends UI5Element { } /** - * @abstract * @protected */ get _placeholder(): string | undefined { @@ -223,7 +221,6 @@ class TimePickerBase extends UI5Element { } /** - * @abstract * @protected */ get _formatPattern(): string | undefined { @@ -545,11 +542,10 @@ class TimePickerBase extends UI5Element { } /** + * The listener for this event can't be passive as it calls preventDefault() * * @param e Wheel Event * @private - * - * The listener for this event can't be passive as it calls preventDefault() */ _handleWheel(e: WheelEvent) { e.preventDefault(); diff --git a/packages/main/src/TimePickerInternals.ts b/packages/main/src/TimePickerInternals.ts index 4bc37eea5312..f9f059ef3233 100644 --- a/packages/main/src/TimePickerInternals.ts +++ b/packages/main/src/TimePickerInternals.ts @@ -74,7 +74,6 @@ const TYPE_COOLDOWN_DELAY = 1000; // Cooldown delay; 0 = disabled cooldown * and components and should not be used separately. * * @constructor - * @author SAP SE * @extends UI5Element * @abstract * @since 1.15.0 diff --git a/packages/main/src/TimeSelectionInputs.ts b/packages/main/src/TimeSelectionInputs.ts index 8a88ac43a163..875c3166843c 100644 --- a/packages/main/src/TimeSelectionInputs.ts +++ b/packages/main/src/TimeSelectionInputs.ts @@ -286,7 +286,7 @@ class TimeSelectionInputs extends TimePickerInternals { /** * Input 'change' event handler. * - * @param number new value to set on active input + * @param value new value to set on active input */ _inputChange(value: number) { const stringValue = this._formatNumberToString(value, this._entities[this._activeIndex].prependZero); diff --git a/packages/main/src/ToggleSpinButton.ts b/packages/main/src/ToggleSpinButton.ts index e7e4c02fe111..69fbe995a667 100644 --- a/packages/main/src/ToggleSpinButton.ts +++ b/packages/main/src/ToggleSpinButton.ts @@ -35,7 +35,7 @@ class ToggleSpinButton extends ToggleButton { /** * Defines the ARIA valuemin of the component. * - * @defaultvalue -1 + * @default -1 */ @property({ validator: Integer, defaultValue: -1 }) valueMin!: number; @@ -43,8 +43,7 @@ class ToggleSpinButton extends ToggleButton { /** * Defines the ARIA valuemax of the component. * - * @name sap.ui.webc.main.ToggleSpinButton.prototype.valueMax - * @defaultvalue -1 + * @default -1 */ @property({ validator: Integer, defaultValue: -1 }) valueMax!: number; @@ -52,8 +51,7 @@ class ToggleSpinButton extends ToggleButton { /** * Defines the ARIA valuenow of the component. * - * @name sap.ui.webc.main.ToggleSpinButton.prototype.valueNow - * @defaultvalue -1 + * @default -1 */ @property({ validator: Integer, defaultValue: -1 }) valueNow!: number; @@ -61,7 +59,7 @@ class ToggleSpinButton extends ToggleButton { /** * Defines the ARIA valuetext of the component. * - * @name sap.ui.webc.main.ToggleSpinButton.prototype.valueText + * @default "" */ @property() valueText?: string; diff --git a/packages/main/src/WheelSlider.ts b/packages/main/src/WheelSlider.ts index 207b8f61d185..7826b777e405 100644 --- a/packages/main/src/WheelSlider.ts +++ b/packages/main/src/WheelSlider.ts @@ -318,11 +318,10 @@ class WheelSlider extends UI5Element { } /** + * The listener for this event can't be passive as it calls preventDefault() * * @param e Wheel Event * @private - * - * The listener for this event can't be passive as it calls preventDefault() */ _handleWheel(e: WheelEvent) { if (!e) { From f895ef24293aecc4dda2a85000059148b1d3971a Mon Sep 17 00:00:00 2001 From: Nikolay Hristov Date: Tue, 21 Nov 2023 17:33:28 +0200 Subject: [PATCH 08/12] docs: fix more comments --- packages/fiori/src/TimelineItem.ts | 9 +-------- packages/main/src/Button.ts | 1 - packages/main/src/CalendarDate.ts | 1 + packages/main/src/ColorPaletteItem.ts | 7 +++++-- packages/main/src/ColorPalettePopover.ts | 9 +++++++++ packages/main/src/ColorPicker.ts | 5 +++++ packages/main/src/DateComponentBase.ts | 3 +++ packages/main/src/DayPicker.ts | 22 ++++++++++++++++++++++ packages/main/src/Interfaces.ts | 14 ++++++++++++++ packages/main/src/Menu.ts | 6 ++++-- packages/main/src/MenuItem.ts | 1 + packages/main/src/SegmentedButton.ts | 15 ++++++++------- packages/main/src/SegmentedButtonItem.ts | 4 +++- packages/main/src/SplitButton.ts | 9 ++++++++- packages/main/src/StepInput.ts | 3 +++ packages/main/src/TimeSelection.ts | 12 ++++++++++++ packages/main/src/WheelSlider.ts | 2 +- 17 files changed, 100 insertions(+), 23 deletions(-) diff --git a/packages/fiori/src/TimelineItem.ts b/packages/fiori/src/TimelineItem.ts index 48128e38dc6f..7d1171fa3217 100644 --- a/packages/fiori/src/TimelineItem.ts +++ b/packages/fiori/src/TimelineItem.ts @@ -24,7 +24,6 @@ const LARGE_LINE_WIDTH = "LargeLineWidth"; * * @constructor * @extends UI5Element - * @implements { ITabbable } * @implements { ITimelineItem } * @public */ @@ -58,6 +57,7 @@ class TimelineItem extends UI5Element implements ITabbable, ITimelineItem { * * @default "" * @public + * @slot {Node[]} default - Determines the description of the ui5-timeline-item. */ @property() icon!: string; @@ -117,13 +117,6 @@ class TimelineItem extends UI5Element implements ITabbable, ITimelineItem { @property() _lineWidth!: string; - /** - * Determines the description of the ui5-timeline-item. - * - * @slot - * @public - */ - constructor() { super(); } diff --git a/packages/main/src/Button.ts b/packages/main/src/Button.ts index 0b769ebee3d4..abc125399708 100644 --- a/packages/main/src/Button.ts +++ b/packages/main/src/Button.ts @@ -68,7 +68,6 @@ let activeButton: Button | null = null; * @csspart button - Used to style the native button element * @constructor * @extends UI5Element - * @implements { IFormElement } * @implements { IButton } * @public */ diff --git a/packages/main/src/CalendarDate.ts b/packages/main/src/CalendarDate.ts index 4c52abcf4d95..2a6a7e75ccdc 100644 --- a/packages/main/src/CalendarDate.ts +++ b/packages/main/src/CalendarDate.ts @@ -20,6 +20,7 @@ class CalendarDate extends UI5Element { * The date formatted according to the formatPattern property * of the ui5-calendar that hosts the component. * + * @default "" * @public */ @property() diff --git a/packages/main/src/ColorPaletteItem.ts b/packages/main/src/ColorPaletteItem.ts index eeb2ccd75d1f..86c43e92837c 100644 --- a/packages/main/src/ColorPaletteItem.ts +++ b/packages/main/src/ColorPaletteItem.ts @@ -28,7 +28,6 @@ import ColorPaletteItemCss from "./generated/themes/ColorPaletteItem.css.js"; * @extends UI5Element * @abstract * @since 1.0.0-rc.12 - * @implements { ITabbable } * @implements { IColorPaletteItem } * @public */ @@ -44,13 +43,15 @@ class ColorPaletteItem extends UI5Element implements ITabbable, IColorPaletteIte *

    * Note: The value should be a valid CSS color. * + * @default undefined * @public */ @property({ validator: CSSColor }) - value!: string; + value?: string; /** * Defines the tab-index of the element, helper information for the ItemNavigation. + * * @private */ @property({ defaultValue: "-1", noAttribute: true }) @@ -58,6 +59,7 @@ class ColorPaletteItem extends UI5Element implements ITabbable, IColorPaletteIte /** * Defines the index of the item inside of the ColorPalette. + * * @private */ @property({ validator: Integer }) @@ -65,6 +67,7 @@ class ColorPaletteItem extends UI5Element implements ITabbable, IColorPaletteIte /** * Defines if the ColorPalette is on phone mode. + * * @private */ @property({ type: Boolean }) diff --git a/packages/main/src/ColorPalettePopover.ts b/packages/main/src/ColorPalettePopover.ts index 533b0c72d819..b2ad47face32 100644 --- a/packages/main/src/ColorPalettePopover.ts +++ b/packages/main/src/ColorPalettePopover.ts @@ -84,6 +84,7 @@ type ColorPalettePopoverItemClickEventDetail = ColorPaletteItemClickEventDetail; class ColorPalettePopover extends UI5Element { /** * Defines whether the user can see the last used colors in the bottom of the component + * * @default false * @public */ @@ -93,6 +94,7 @@ class ColorPalettePopover extends UI5Element { /** * Defines whether the user can choose a custom color from a component. * Note: In order to use this property you need to import the following module: "@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js" + * * @default false * @public */ @@ -101,6 +103,7 @@ class ColorPalettePopover extends UI5Element { /** * Defines whether the user can choose the default color from a button. + * * @default false * @public */ @@ -110,6 +113,8 @@ class ColorPalettePopover extends UI5Element { /** * Defines the default color of the component. * Note: The default color should be a part of the ColorPalette colors + * + * @default undefined * @public */ @property({ validator: CSSColor }) @@ -117,6 +122,8 @@ class ColorPalettePopover extends UI5Element { /** * Defines the content of the component. + * + * @default [] * @public */ @slot({ "default": true, type: HTMLElement, individualSlots: true }) @@ -145,6 +152,7 @@ class ColorPalettePopover extends UI5Element { /** * Shows the ColorPalettePopover. + * * @param opener the element that the popover is shown at * @public * @since 1.1.1 @@ -156,6 +164,7 @@ class ColorPalettePopover extends UI5Element { /** * Shows the ColorPalettePopover. * Note: The method is deprecated and will be removed in future, use showAt instead. + * * @param opener the element that the popover is shown at * @public * @since 1.0.0-rc.16 diff --git a/packages/main/src/ColorPicker.ts b/packages/main/src/ColorPicker.ts index 4581bdc18695..060eca45100b 100644 --- a/packages/main/src/ColorPicker.ts +++ b/packages/main/src/ColorPicker.ts @@ -96,6 +96,8 @@ class ColorPicker extends UI5Element { * Defines the currently selected color of the component. *

    * Note: use HEX, RGB, RGBA, HSV formats or a CSS color name when modifying this property. + * + * @default "rgba(255, 255, 255, 1)" * @public */ @property({ validator: CSSColor, defaultValue: "rgba(255, 255, 255, 1)" }) @@ -104,6 +106,7 @@ class ColorPicker extends UI5Element { /** * Defines the HEX code of the currently selected color * *Note*: If Alpha(transperancy) is set it is not included in this property. Use color property. + * * @private */ @property({ defaultValue: "ffffff", noAttribute: true }) @@ -111,6 +114,7 @@ class ColorPicker extends UI5Element { /** * Defines the current main color which is selected via the hue slider and is shown in the main color square. + * * @private */ @property({ type: Object }) @@ -118,6 +122,7 @@ class ColorPicker extends UI5Element { /** * Defines the currenty selected color from the main color section. + * * @private */ @property({ type: Object }) diff --git a/packages/main/src/DateComponentBase.ts b/packages/main/src/DateComponentBase.ts index 67db5a5ee8ce..f238ed58d655 100644 --- a/packages/main/src/DateComponentBase.ts +++ b/packages/main/src/DateComponentBase.ts @@ -35,6 +35,8 @@ class DateComponentBase extends UI5Element { /** * Sets a calendar type used for display. * If not set, the calendar type of the global configuration is used. + * + * @default undefined * @public */ @property({ type: CalendarType }) @@ -43,6 +45,7 @@ class DateComponentBase extends UI5Element { /** * Defines the secondary calendar type. * If not set, the calendar will only show the primary calendar type. + * * @since 1.0.0-rc.16 * @default undefined * @public diff --git a/packages/main/src/DayPicker.ts b/packages/main/src/DayPicker.ts index 82f8b997562c..55f43aa57823 100644 --- a/packages/main/src/DayPicker.ts +++ b/packages/main/src/DayPicker.ts @@ -117,6 +117,8 @@ type DayPickerNavigateEventDetail = { class DayPicker extends CalendarPart implements ICalendarPicker { /** * An array of UTC timestamps representing the selected date or dates depending on the capabilities of the picker component. + * + * @default [] * @public */ @property({ @@ -134,6 +136,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker { *
  • CalendarSelectionMode.Range - enables selection of a date range.
    • *
  • CalendarSelectionMode.Multiple - enables selection of multiple dates.
    • * + * * @default "Single" * @public */ @@ -171,6 +174,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker { /** * When set, the component will skip all work in onBeforeRendering and will not automatically set the focus on itself + * * @private */ @property({ type: Boolean, noAttribute: true }) @@ -178,6 +182,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker { /** * When selectionMode="Range" and the first day in the range is selected, this is the currently hovered (when using mouse) or focused (when using keyboard) day by the user + * * @private */ @property() @@ -195,6 +200,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker { /** * Builds the "_weeks" object that represents the month. + * * @param localeData * @private */ @@ -317,6 +323,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker { /** * Builds the dayNames object (header of the month). + * * @param localeData * @private */ @@ -379,6 +386,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker { /** * Tells if the day is selected (dark blue). + * * @param timestamp * @private */ @@ -393,6 +401,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker { /** * Tells if the day is inside a selection range (light blue). + * * @param timestamp * @private */ @@ -413,6 +422,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker { /** * Selects/deselects a day. + * * @param e * @param isShift true if the user did Click+Shift or Enter+Shift (but not Space+Shift) * @private @@ -449,6 +459,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker { /** * Selects/deselects the whole row (week). + * * @private */ _selectWeek() { @@ -498,6 +509,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker { /** * Called when at least one day is selected and the user presses "Shift". + * * @param timestamp * @private */ @@ -539,6 +551,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker { /** * Set the hovered day as the "_secondTimestamp". + * * @param e * @private */ @@ -609,6 +622,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker { /** * Click is the same as "Enter". * Note: "Click+Shift" has the same effect as "Enter+Shift". + * * @param e * @private */ @@ -618,6 +632,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker { /** * Called upon "Home" or "End" - moves the focus to the first or last item in the row. + * * @param homePressed * @private */ @@ -637,6 +652,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker { /** * Called by the Calendar component. + * * @protected */ _hasPreviousPage(): boolean { @@ -645,6 +661,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker { /** * Called by the Calendar component. + * * @protected */ _hasNextPage(): boolean { @@ -653,6 +670,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker { /** * Called by the Calendar component. + * * @protected */ _showPreviousPage() { @@ -661,6 +679,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker { /** * Called by the Calendar component. + * * @protected */ _showNextPage() { @@ -669,6 +688,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker { /** * Modifies the timestamp by a certain amount of days/months/years. + * * @param amount * @param unit * @param preserveDate whether to preserve the day of the month (f.e. 15th of March + 1 month = 15th of April) @@ -685,6 +705,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker { /** * Sets the timestamp to an absolute value. + * * @param value * @private */ @@ -697,6 +718,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker { /** * During range selection, when the user is navigating with the keyboard, * the currently focused day is considered the "second day". + * * @private */ _updateSecondTimestamp() { diff --git a/packages/main/src/Interfaces.ts b/packages/main/src/Interfaces.ts index 56023018529c..b26512374151 100644 --- a/packages/main/src/Interfaces.ts +++ b/packages/main/src/Interfaces.ts @@ -1,3 +1,5 @@ +import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; + /** * Interface for components that represent an avatar and may be slotted in numerous higher-order components such as ui5-avatar-group * @@ -102,6 +104,17 @@ const IMultiComboBoxItem = "sap.ui.webc.main.IMultiComboBoxItem"; */ const ISelectOption = "sap.ui.webc.main.ISelectOption"; +/** + * Interface for components that may be slotted inside ui5-segmented-button as items + * + * @public + */ +interface ISegmentedButtonItem extends UI5Element { + disabled: boolean, + pressed: boolean, + _tabIndex: string, +} + /** * Interface for components that may be slotted inside ui5-select-menu as options * @@ -195,6 +208,7 @@ export { IInputSuggestionItem, IListItem, IMultiComboBoxItem, + ISegmentedButtonItem, ISelectOption, ISelectMenuOption, ITab, diff --git a/packages/main/src/Menu.ts b/packages/main/src/Menu.ts index 7bc524096928..3a58840eb01c 100644 --- a/packages/main/src/Menu.ts +++ b/packages/main/src/Menu.ts @@ -386,10 +386,11 @@ class Menu extends UI5Element { /** * Shows the Menu near the opener element. + * * @param opener the element that the popover is shown at * @public */ - async showAt(opener: HTMLElement) { + async showAt(opener: HTMLElement): Promise { if (isPhone()) { this._prepareCurrentItems(this.items); this._parentItemsStack = []; @@ -410,9 +411,10 @@ class Menu extends UI5Element { /** * Closes the Menu. + * * @public */ - close() { + close(): void { if (this._popover) { if (isPhone()) { this._parentItemsStack = []; diff --git a/packages/main/src/MenuItem.ts b/packages/main/src/MenuItem.ts index 3e2615429bea..2dfcb2608564 100644 --- a/packages/main/src/MenuItem.ts +++ b/packages/main/src/MenuItem.ts @@ -44,6 +44,7 @@ class MenuItem extends UI5Element { * Defines the additionalText, displayed in the end of the menu item. * Note: The additional text would not be displayed if the item has a submenu. * + * @default "" * @public * @since 1.8.0 */ diff --git a/packages/main/src/SegmentedButton.ts b/packages/main/src/SegmentedButton.ts index 0eb8e8466f0a..2ee67a208c4c 100644 --- a/packages/main/src/SegmentedButton.ts +++ b/packages/main/src/SegmentedButton.ts @@ -15,6 +15,7 @@ import { import { SEGMENTEDBUTTON_ARIA_DESCRIPTION, SEGMENTEDBUTTON_ARIA_DESCRIBEDBY } from "./generated/i18n/i18n-defaults.js"; import SegmentedButtonItem from "./SegmentedButtonItem.js"; import SegmentedButtonMode from "./types/SegmentedButtonMode.js"; +import type { ISegmentedButtonItem } from "./Interfaces"; // Template import SegmentedButtonTemplate from "./generated/templates/SegmentedButtonTemplate.lit.js"; @@ -23,8 +24,8 @@ import SegmentedButtonTemplate from "./generated/templates/SegmentedButtonTempla import SegmentedButtonCss from "./generated/themes/SegmentedButton.css.js"; type SegmentedButtonSelectionChangeEventDetail = { - selectedItem: SegmentedButtonItem, - selectedItems: Array, + selectedItem: ISegmentedButtonItem, + selectedItems: Array, } /** @@ -113,7 +114,7 @@ class SegmentedButton extends UI5Element { * @public */ @slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true }) - items!: Array; + items!: Array; static i18nBundle: I18nBundle; @@ -121,7 +122,7 @@ class SegmentedButton extends UI5Element { hasPreviouslyFocusedItem: boolean; - _selectedItem?: SegmentedButtonItem; + _selectedItem?: ISegmentedButtonItem; static async onDefine() { SegmentedButton.i18nBundle = await getI18nBundle("@ui5/webcomponents"); @@ -198,7 +199,7 @@ class SegmentedButton extends UI5Element { return this; } - _applySingleSelection(item: SegmentedButtonItem) { + _applySingleSelection(item: ISegmentedButtonItem) { this.items.forEach(currentItem => { currentItem.pressed = false; }); @@ -259,7 +260,7 @@ class SegmentedButton extends UI5Element { * Please use the selectedItems property instead. * @public */ - get selectedItem(): SegmentedButtonItem | undefined { + get selectedItem(): ISegmentedButtonItem | undefined { return this._selectedItem; } @@ -268,7 +269,7 @@ class SegmentedButton extends UI5Element { * @since 1.14.0 * @public */ - get selectedItems(): Array { + get selectedItems(): Array { return this.items.filter(item => item.pressed); } diff --git a/packages/main/src/SegmentedButtonItem.ts b/packages/main/src/SegmentedButtonItem.ts index 6e740184fb4f..e7e9913e5004 100644 --- a/packages/main/src/SegmentedButtonItem.ts +++ b/packages/main/src/SegmentedButtonItem.ts @@ -2,6 +2,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import Integer from "@ui5/webcomponents-base/dist/types/Integer.js"; +import type { ISegmentedButtonItem } from "./Interfaces"; import SegmentedButtonItemTemplate from "./generated/templates/SegmentedButtonItemTemplate.lit.js"; import ToggleButton from "./ToggleButton.js"; @@ -28,6 +29,7 @@ import { SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defa * * @constructor * @extends ToggleButton + * @implements { ISelectedButtonItem } * @abstract * @public */ @@ -36,7 +38,7 @@ import { SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defa template: SegmentedButtonItemTemplate, dependencies: [Icon], }) -class SegmentedButtonItem extends ToggleButton { +class SegmentedButtonItem extends ToggleButton implements ISegmentedButtonItem { /** * Note: The property is inherited and not supported. If set, it won't take any effect. * diff --git a/packages/main/src/SplitButton.ts b/packages/main/src/SplitButton.ts index 2835ca810308..7f7638ab88d6 100644 --- a/packages/main/src/SplitButton.ts +++ b/packages/main/src/SplitButton.ts @@ -154,6 +154,7 @@ class SplitButton extends UI5Element { /** * Indicates if the elements is on focus + * * @default false * @private */ @@ -170,7 +171,8 @@ class SplitButton extends UI5Element { /** * Defines the tabIndex of the component. - * @default "" + * + * @default "0" * @private */ @property({ defaultValue: "0", noAttribute: true }) @@ -178,6 +180,7 @@ class SplitButton extends UI5Element { /** * Indicates if there is Space key pressed + * * @default false * @private */ @@ -186,6 +189,7 @@ class SplitButton extends UI5Element { /** * Indicates if there is SHIFT or ESCAPE key pressed + * * @default false * @private */ @@ -194,6 +198,7 @@ class SplitButton extends UI5Element { /** * Defines the active state of the text button + * * @default false * @private */ @@ -202,6 +207,7 @@ class SplitButton extends UI5Element { /** * Defines the icon of the text button + * * @default "" * @private */ @@ -210,6 +216,7 @@ class SplitButton extends UI5Element { /** * Defines the active state of the arrow button + * * @default false * @private */ diff --git a/packages/main/src/StepInput.ts b/packages/main/src/StepInput.ts index bde04315ef69..78ea80aa48ef 100644 --- a/packages/main/src/StepInput.ts +++ b/packages/main/src/StepInput.ts @@ -119,6 +119,7 @@ class StepInput extends UI5Element implements IFormElement { /** * Defines a minimum value of the component. * + * @default undefined * @public */ @property({ validator: Float }) @@ -127,6 +128,7 @@ class StepInput extends UI5Element implements IFormElement { /** * Defines a maximum value of the component. * + * @default undefined * @public */ @property({ validator: Float }) @@ -221,6 +223,7 @@ class StepInput extends UI5Element implements IFormElement { /** * Defines the accessible ARIA name of the component. * + * @default "" * @public * @since 1.0.0-rc.15 */ diff --git a/packages/main/src/TimeSelection.ts b/packages/main/src/TimeSelection.ts index 39bdc79a1399..88ecb8c34050 100644 --- a/packages/main/src/TimeSelection.ts +++ b/packages/main/src/TimeSelection.ts @@ -110,6 +110,8 @@ class TimeSelection extends UI5Element { /** * Hides the hours slider regardless of formatPattern * This property is only needed for the duration picker use case which requires non-standard slider combinations + * + * @default false * @public */ @property({ type: Boolean }) @@ -118,6 +120,8 @@ class TimeSelection extends UI5Element { /** * Hides the minutes slider regardless of formatPattern * This property is only needed for the duration picker use case which requires non-standard slider combinations + * + * @default false * @public */ @property({ type: Boolean }) @@ -126,6 +130,8 @@ class TimeSelection extends UI5Element { /** * Hides the seconds slider regardless of formatPattern * This property is only needed for the duration picker use case which requires non-standard slider combinations + * + * @default false * @public */ @property({ type: Boolean }) @@ -133,6 +139,8 @@ class TimeSelection extends UI5Element { /** * The maximum number of hours to be displayed for the hours slider (only needed for the duration picker use case) + * + * @default undefined * @public */ @property({ validator: Integer }) @@ -140,6 +148,8 @@ class TimeSelection extends UI5Element { /** * The maximum number of minutes to be displayed for the minutes slider (only needed for the duration picker use case) + * + * @default undefined * @public */ @property({ validator: Integer }) @@ -147,6 +157,8 @@ class TimeSelection extends UI5Element { /** * The maximum number of seconds to be displayed for the seconds slider (only needed for the duration picker use case) + * + * @default undefined * @public */ @property({ validator: Integer }) diff --git a/packages/main/src/WheelSlider.ts b/packages/main/src/WheelSlider.ts index 7826b777e405..3aed019606d6 100644 --- a/packages/main/src/WheelSlider.ts +++ b/packages/main/src/WheelSlider.ts @@ -91,7 +91,7 @@ class WheelSlider extends UI5Element { /** * Defines the currently selected value - * @default "" + * @default "0" * @public */ @property({ defaultValue: "0" }) From b675009d65d8c6b028ac7315a23ae06178a82c8e Mon Sep 17 00:00:00 2001 From: Nikolay Hristov Date: Thu, 23 Nov 2023 14:51:35 +0200 Subject: [PATCH 09/12] docs: another comments fix --- packages/fiori/src/DynamicSideContent.ts | 3 ++- packages/main/src/Button.ts | 2 ++ packages/main/src/CalendarHeader.ts | 6 +++++ packages/main/src/ColorPalettePopover.ts | 4 ++-- packages/main/src/DatePicker.ts | 24 +++++++++++++++++-- packages/main/src/DateRangePicker.ts | 4 ++++ packages/main/src/DateTimePicker.ts | 5 +++- packages/main/src/FileUploader.ts | 2 ++ packages/main/src/Link.ts | 2 ++ packages/main/src/MonthPicker.ts | 2 ++ packages/main/src/SegmentedButton.ts | 2 ++ packages/main/src/TimePicker.ts | 3 ++- packages/main/src/YearPicker.ts | 9 +++++++ .../main/src/types/CalendarPickersMode.ts | 9 ++++--- 14 files changed, 67 insertions(+), 10 deletions(-) diff --git a/packages/fiori/src/DynamicSideContent.ts b/packages/fiori/src/DynamicSideContent.ts index 32cab4dd1e85..60d3a2b84a61 100644 --- a/packages/fiori/src/DynamicSideContent.ts +++ b/packages/fiori/src/DynamicSideContent.ts @@ -304,9 +304,10 @@ class DynamicSideContent extends UI5Element { /** * Toggles visibility of main and side contents on S screen size (mobile device). + * * @public */ - toggleContents() { + toggleContents(): void { if (this.breakpoint === this.sizeS && this.sideContentVisibility !== SideContentVisibility.AlwaysShow) { this._toggled = !this._toggled; } diff --git a/packages/main/src/Button.ts b/packages/main/src/Button.ts index abc125399708..185b67d3451f 100644 --- a/packages/main/src/Button.ts +++ b/packages/main/src/Button.ts @@ -203,8 +203,10 @@ class Button extends UI5Element implements IFormElement, IButton { * *
  • controls: Identifies the element (or elements) whose contents or presence are controlled by the button element. Accepts a string value.
    • * + * * @public * @since 1.2.0 + * @default {} */ @property({ type: Object }) accessibilityAttributes!: { expanded: "true" | "false", hasPopup: "Dialog" | "Grid" | "ListBox" | "Menu" | "Tree", controls: string}; diff --git a/packages/main/src/CalendarHeader.ts b/packages/main/src/CalendarHeader.ts index bc34077e45c0..1d5a4b924ae2 100644 --- a/packages/main/src/CalendarHeader.ts +++ b/packages/main/src/CalendarHeader.ts @@ -42,7 +42,9 @@ class CalendarHeader extends UI5Element { /** * Defines component's timestamp. * Note: set by the Calendar component + * * @public + * @default undefined */ @property({ validator: Integer }) timestamp?: number; @@ -50,7 +52,9 @@ class CalendarHeader extends UI5Element { /** * Defines component's primary calendar type. * Note: set by the Calendar component + * * @public + * @default undefined */ @property({ type: CalendarType }) primaryCalendarType?: `${CalendarType}`; @@ -58,6 +62,7 @@ class CalendarHeader extends UI5Element { /** * Defines component's secondary calendar type. * Note: set by the Calendar component + * * @since 1.0.0-rc.16 * @default undefined * @public @@ -67,6 +72,7 @@ class CalendarHeader extends UI5Element { /** * Stores information for month button for secondary calendar type + * * @private */ @property({ type: Object }) diff --git a/packages/main/src/ColorPalettePopover.ts b/packages/main/src/ColorPalettePopover.ts index b2ad47face32..9895cf27a23c 100644 --- a/packages/main/src/ColorPalettePopover.ts +++ b/packages/main/src/ColorPalettePopover.ts @@ -157,7 +157,7 @@ class ColorPalettePopover extends UI5Element { * @public * @since 1.1.1 */ - showAt(opener: HTMLElement) { + showAt(opener: HTMLElement): void { this._openPopover(opener); } @@ -170,7 +170,7 @@ class ColorPalettePopover extends UI5Element { * @since 1.0.0-rc.16 * @deprecated The method is deprecated in favour of showAt. */ - openPopover(opener: HTMLElement) { + openPopover(opener: HTMLElement): void { console.warn("The method 'openPopover' is deprecated and will be removed in future, use 'showAt' instead."); // eslint-disable-line this._openPopover(opener); } diff --git a/packages/main/src/DatePicker.ts b/packages/main/src/DatePicker.ts index 28dc2fe1441e..1356c7099de1 100644 --- a/packages/main/src/DatePicker.ts +++ b/packages/main/src/DatePicker.ts @@ -351,8 +351,10 @@ class DatePicker extends DateComponentBase implements IFormElement { *
    * Note: The valueStateMessage would be displayed, * when the component is in Information, Warning or Error value state. + * * @since 1.0.0-rc.7 * @public + * @default [] */ @slot({ type: HTMLElement }) valueStateMessage!: Array; @@ -360,6 +362,7 @@ class DatePicker extends DateComponentBase implements IFormElement { /** * The slot is used to render native input HTML element within Light DOM to enable form submit, * when name property is set. + * * @private */ @slot({ type: HTMLElement }) @@ -406,6 +409,7 @@ class DatePicker extends DateComponentBase implements IFormElement { /** * Override in derivatives to change calendar selection mode + * * @protected */ get _calendarSelectionMode(): string { @@ -416,6 +420,7 @@ class DatePicker extends DateComponentBase implements IFormElement { * Used to provide a timestamp to the Calendar (to focus it to a relevant date when open) based on the component's state * Override in derivatives to provide the calendar a timestamp based on their properties * By default focus the calendar on the selected date if set, or the current day otherwise + * * @protected */ get _calendarTimestamp(): number { @@ -430,6 +435,7 @@ class DatePicker extends DateComponentBase implements IFormElement { /** * Used to provide selectedDates to the calendar based on the component's state * Override in derivatives to provide different rules for setting the calendar's selected dates + * * @protected */ get _calendarSelectedDates(): Array { @@ -486,7 +492,6 @@ class DatePicker extends DateComponentBase implements IFormElement { } /** - * * @param amount * @param unit * @param preserveDate whether to preserve the day of the month (f.e. 15th of March + 1 month = 15th of April) @@ -558,12 +563,14 @@ class DatePicker extends DateComponentBase implements IFormElement { /** * The ui5-input "submit" event handler - fire change event when the user presses enter + * * @protected */ _onInputSubmit() {} /** * The ui5-input "change" event handler - fire change event when the user focuses out of the input + * * @protected */ _onInputChange(e: Event) { @@ -572,6 +579,7 @@ class DatePicker extends DateComponentBase implements IFormElement { /** * The ui5-input "input" event handler - fire input even when the user types + * * @protected */ _onInputInput(e: KeyboardEvent) { @@ -580,6 +588,7 @@ class DatePicker extends DateComponentBase implements IFormElement { /** * Checks if the provided value is valid and within valid range. + * * @protected * @param value */ @@ -599,6 +608,7 @@ class DatePicker extends DateComponentBase implements IFormElement { /** * Checks if a value is valid against the current date format of the DatePicker. + * * @public * @param value A value to be tested against the current date format */ @@ -612,6 +622,7 @@ class DatePicker extends DateComponentBase implements IFormElement { /** * Checks if a date is between the minimum and maximum date. + * * @public * @param value A value to be checked */ @@ -631,6 +642,7 @@ class DatePicker extends DateComponentBase implements IFormElement { /** * The parser understands many formats, but we need one format + * * @protected */ normalizeValue(value: string) { @@ -693,6 +705,7 @@ class DatePicker extends DateComponentBase implements IFormElement { /** * Defines whether the dialog on mobile should have header + * * @private */ get _shouldHideHeader() { @@ -701,6 +714,7 @@ class DatePicker extends DateComponentBase implements IFormElement { /** * Defines whether the value help icon is hidden + * * @private */ get _ariaHidden() { @@ -735,6 +749,7 @@ class DatePicker extends DateComponentBase implements IFormElement { /** * The user selected a new date in the calendar + * * @param e * @protected */ @@ -763,6 +778,7 @@ class DatePicker extends DateComponentBase implements IFormElement { /** * Formats a Java Script date object into a string representing a locale date * according to the formatPattern property of the DatePicker instance + * * @public * @param date A Java Script date object to be formatted as string * @returns The date as string @@ -773,14 +789,16 @@ class DatePicker extends DateComponentBase implements IFormElement { /** * Closes the picker. + * * @public */ - closePicker() { + closePicker(): void { this.responsivePopover!.close(); } /** * Opens the picker. + * * @public * @returns Resolves when the picker is open */ @@ -802,6 +820,7 @@ class DatePicker extends DateComponentBase implements IFormElement { /** * Checks if the picker is open. + * * @public * @returns true if the picker is open, false otherwise */ @@ -813,6 +832,7 @@ class DatePicker extends DateComponentBase implements IFormElement { * Currently selected date represented as a Local JavaScript Date instance. * * @public + * @default null */ get dateValue(): Date | null { return this.liveValue ? this.getFormat().parse(this.liveValue) as Date : this.getFormat().parse(this.value) as Date; diff --git a/packages/main/src/DateRangePicker.ts b/packages/main/src/DateRangePicker.ts index 3909eec23c72..27d60f6d90f1 100644 --- a/packages/main/src/DateRangePicker.ts +++ b/packages/main/src/DateRangePicker.ts @@ -87,6 +87,7 @@ class DateRangePicker extends DatePicker { * Note: The getter method is inherited and not supported. If called it will return an empty value. * * @public + * @default null */ get dateValue(): null { return null; @@ -96,6 +97,7 @@ class DateRangePicker extends DatePicker { * Note: The getter method is inherited and not supported. If called it will return an empty value. * * @public + * @default null */ get dateValueUTC(): null { return null; @@ -147,6 +149,7 @@ class DateRangePicker extends DatePicker { * Returns the start date of the currently selected range as JavaScript Date instance. * * @public + * @default null */ get startDateValue(): Date | null { return CalendarDate.fromTimestamp(this._startDateTimestamp! * 1000).toLocalJSDate(); @@ -156,6 +159,7 @@ class DateRangePicker extends DatePicker { * Returns the end date of the currently selected range as JavaScript Date instance. * * @public + * @default null */ get endDateValue(): Date | null { return CalendarDate.fromTimestamp(this._endDateTimestamp! * 1000).toLocalJSDate(); diff --git a/packages/main/src/DateTimePicker.ts b/packages/main/src/DateTimePicker.ts index 99411549d9e0..e547953a05ff 100644 --- a/packages/main/src/DateTimePicker.ts +++ b/packages/main/src/DateTimePicker.ts @@ -205,9 +205,10 @@ class DateTimePicker extends DatePicker { /** * Opens the picker. + * * @public */ - async openPicker() { + async openPicker(): Promise { await super.openPicker(); this._currentTimeSlider = "hours"; this._previewValues.timeSelectionValue = this.value || this.getFormat().format(new Date()); @@ -294,6 +295,7 @@ class DateTimePicker extends DatePicker { /** * Defines whether the dialog on mobile should have header + * * @private */ get _shouldHideHeader() { @@ -372,6 +374,7 @@ class DateTimePicker extends DatePicker { /** * Handles the date/time switch available in phoneMode to switch * between the date and time views. + * * @param e */ _dateTimeSwitchChange(e: CustomEvent) { // Note: fix when SegmentedButton is implemented in TS diff --git a/packages/main/src/FileUploader.ts b/packages/main/src/FileUploader.ts index 23f0c3e31f9f..ca22ff2dc773 100644 --- a/packages/main/src/FileUploader.ts +++ b/packages/main/src/FileUploader.ts @@ -269,7 +269,9 @@ class FileUploader extends UI5Element implements IFormElement { /** * FileList of all selected files. + * * @public + * @default null */ get files(): FileList | null { if (this._input) { diff --git a/packages/main/src/Link.ts b/packages/main/src/Link.ts index 7b3090546dc9..0a4f17f8b68c 100644 --- a/packages/main/src/Link.ts +++ b/packages/main/src/Link.ts @@ -233,8 +233,10 @@ class Link extends UI5Element implements ITabbable { * * * + * * @public * @since 1.1.0 + * @default {} */ @property({ type: Object }) accessibilityAttributes!: { expanded: "true" | "false", hasPopup: "Dialog" | "Grid" | "ListBox" | "Menu" | "Tree" }; diff --git a/packages/main/src/MonthPicker.ts b/packages/main/src/MonthPicker.ts index 380142c43adb..573e3800aaad 100644 --- a/packages/main/src/MonthPicker.ts +++ b/packages/main/src/MonthPicker.ts @@ -91,7 +91,9 @@ class MonthPicker extends CalendarPart implements ICalendarPicker { /** * An array of UTC timestamps representing the selected date * or dates depending on the capabilities of the picker component. + * * @public + * @default [] */ @property({ validator: Integer, diff --git a/packages/main/src/SegmentedButton.ts b/packages/main/src/SegmentedButton.ts index 2ee67a208c4c..e4b9de3c3aa1 100644 --- a/packages/main/src/SegmentedButton.ts +++ b/packages/main/src/SegmentedButton.ts @@ -259,6 +259,7 @@ class SegmentedButton extends UI5Element { * @deprecated since 1.14.0. This method will be removed in the next major release. * Please use the selectedItems property instead. * @public + * @default undefined */ get selectedItem(): ISegmentedButtonItem | undefined { return this._selectedItem; @@ -268,6 +269,7 @@ class SegmentedButton extends UI5Element { * Returns an array of the currently selected items. * @since 1.14.0 * @public + * @default [] */ get selectedItems(): Array { return this.items.filter(item => item.pressed); diff --git a/packages/main/src/TimePicker.ts b/packages/main/src/TimePicker.ts index 5993c8c4452f..6b988c76f3dd 100644 --- a/packages/main/src/TimePicker.ts +++ b/packages/main/src/TimePicker.ts @@ -135,8 +135,9 @@ class TimePicker extends TimePickerBase { * Currently selected time represented as JavaScript Date instance * * @public + * @default null */ - get dateValue(): Date | Date[] { + get dateValue(): Date | Date[] | null { return this.getFormat().parse(this._effectiveValue as string); } diff --git a/packages/main/src/YearPicker.ts b/packages/main/src/YearPicker.ts index bd2c59dae58e..007e50f4ec33 100644 --- a/packages/main/src/YearPicker.ts +++ b/packages/main/src/YearPicker.ts @@ -85,6 +85,8 @@ class YearPicker extends CalendarPart implements ICalendarPicker { /** * An array of UTC timestamps representing the selected date * or dates depending on the capabilities of the picker component. + * + * @default [] * @public */ @property({ @@ -290,6 +292,7 @@ class YearPicker extends CalendarPart implements ICalendarPicker { /** * Sets the timestamp to an absolute value. + * * @param value * @private */ @@ -300,6 +303,7 @@ class YearPicker extends CalendarPart implements ICalendarPicker { /** * Modifies timestamp by a given amount of years and, if necessary, loads the prev/next page. + * * @param amount * @private */ @@ -319,6 +323,7 @@ class YearPicker extends CalendarPart implements ICalendarPicker { /** * User clicked with the mouser or pressed Enter/Space + * * @param e * @private */ @@ -334,6 +339,7 @@ class YearPicker extends CalendarPart implements ICalendarPicker { /** * Called by the Calendar component. + * * @protected */ _hasPreviousPage(): boolean { @@ -342,6 +348,7 @@ class YearPicker extends CalendarPart implements ICalendarPicker { /** * Called by the Calendar component. + * * @protected */ _hasNextPage(): boolean { @@ -351,6 +358,7 @@ class YearPicker extends CalendarPart implements ICalendarPicker { /** * Called by the Calendar component. * Note: when the user presses the "<" button in the calendar header (same as "PageUp") + * * @protected */ _showPreviousPage() { @@ -361,6 +369,7 @@ class YearPicker extends CalendarPart implements ICalendarPicker { /** * Called by the Calendar component. * Note: when the user presses the ">" button in the calendar header (same as "PageDown") + * * @protected */ _showNextPage() { diff --git a/packages/main/src/types/CalendarPickersMode.ts b/packages/main/src/types/CalendarPickersMode.ts index afb943e0f2bb..ca7e30315a6a 100644 --- a/packages/main/src/types/CalendarPickersMode.ts +++ b/packages/main/src/types/CalendarPickersMode.ts @@ -7,19 +7,22 @@ enum CalendarPickersMode { /** * User can select days, months and years - * @public + * + * @private */ DAY_MONTH_YEAR = "DAY_MONTH_YEAR", /** * User can select months and years - * @public + * + * @private */ MONTH_YEAR = "MONTH_YEAR", /** * User can select years - * @public + * + * @private */ YEAR = "YEAR" } From 3f9a02b1bec911758d42721ec93a776279023c6c Mon Sep 17 00:00:00 2001 From: Nikolay Hristov Date: Mon, 27 Nov 2023 09:52:05 +0200 Subject: [PATCH 10/12] docs: fix more comments --- packages/fiori/src/TimelineItem.ts | 2 +- packages/main/src/DayPicker.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/fiori/src/TimelineItem.ts b/packages/fiori/src/TimelineItem.ts index 7d1171fa3217..c3cc3c9e8880 100644 --- a/packages/fiori/src/TimelineItem.ts +++ b/packages/fiori/src/TimelineItem.ts @@ -26,6 +26,7 @@ const LARGE_LINE_WIDTH = "LargeLineWidth"; * @extends UI5Element * @implements { ITimelineItem } * @public + * @slot {Node[]} default - Determines the description of the ui5-timeline-item. */ @customElement({ tag: "ui5-timeline-item", @@ -57,7 +58,6 @@ class TimelineItem extends UI5Element implements ITabbable, ITimelineItem { * * @default "" * @public - * @slot {Node[]} default - Determines the description of the ui5-timeline-item. */ @property() icon!: string; diff --git a/packages/main/src/DayPicker.ts b/packages/main/src/DayPicker.ts index 4bd8b9af2410..dd8ce2f56fc6 100644 --- a/packages/main/src/DayPicker.ts +++ b/packages/main/src/DayPicker.ts @@ -367,8 +367,8 @@ class DayPicker extends CalendarPart implements ICalendarPicker { /** * Tells if any of the days is more than 4 characters(too long to render). - * @param { Array } dayNames - * @returns { boolean } + * + * @param dayNames * @private */ namesTooLong(dayNames: Array): boolean { From 72cabaf0471ab3425fc0626932dee9d061787c5d Mon Sep 17 00:00:00 2001 From: Nikolay Hristov Date: Thu, 30 Nov 2023 09:37:46 +0200 Subject: [PATCH 11/12] docs: fix comments --- packages/fiori/src/Interfaces.ts | 5 ++++- packages/fiori/src/Timeline.ts | 5 +++-- packages/fiori/src/TimelineItem.ts | 4 +--- packages/main/src/Calendar.ts | 21 ++++++++++----------- packages/main/src/ColorPalette.ts | 9 +++++---- packages/main/src/ColorPaletteItem.ts | 3 +-- packages/main/src/ColorPalettePopover.ts | 1 - packages/main/src/Interfaces.ts | 8 ++++++-- packages/main/src/SplitButton.ts | 2 +- 9 files changed, 31 insertions(+), 27 deletions(-) diff --git a/packages/fiori/src/Interfaces.ts b/packages/fiori/src/Interfaces.ts index 0e27a4adbb5c..4cdb35c01469 100644 --- a/packages/fiori/src/Interfaces.ts +++ b/packages/fiori/src/Interfaces.ts @@ -1,4 +1,5 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js"; /** * Interface for components that may be slotted inside ui5-page as header and footer. @@ -75,9 +76,11 @@ const ISideNavigationSubItem = "sap.ui.webc.fiori.ISideNavigationSubItem"; * * @public */ -interface ITimelineItem extends UI5Element { +interface ITimelineItem extends UI5Element, ITabbable { icon: string, layout: string, + nameClickable: boolean, + _lineWidth: string, } /** diff --git a/packages/fiori/src/Timeline.ts b/packages/fiori/src/Timeline.ts index 0cb886381615..0e1773360ce5 100644 --- a/packages/fiori/src/Timeline.ts +++ b/packages/fiori/src/Timeline.ts @@ -12,6 +12,7 @@ import { getEventMark } from "@ui5/webcomponents-base/dist/MarkedEvents.js"; import { TIMELINE_ARIA_LABEL } from "./generated/i18n/i18n-defaults.js"; import TimelineTemplate from "./generated/templates/TimelineTemplate.lit.js"; import TimelineItem from "./TimelineItem.js"; +import type { ITimelineItem } from "./Interfaces.js"; // Styles import TimelineCss from "./generated/themes/Timeline.css.js"; @@ -79,7 +80,7 @@ class Timeline extends UI5Element { * @public */ @slot({ type: HTMLElement, individualSlots: true, "default": true }) - items!: Array; + items!: Array; static i18nBundle: I18nBundle; @@ -137,7 +138,7 @@ class Timeline extends UI5Element { _handleTabNextOrPrevious(e: KeyboardEvent, isNext?: boolean) { const target = e.target as TimelineItem; const nextTargetIndex = isNext ? this.items.indexOf(target) + 1 : this.items.indexOf(target) - 1; - const nextTarget = this.items[nextTargetIndex]; + const nextTarget = this.items[nextTargetIndex] as TimelineItem; if (!nextTarget) { return; } diff --git a/packages/fiori/src/TimelineItem.ts b/packages/fiori/src/TimelineItem.ts index c3cc3c9e8880..08773ae87e3b 100644 --- a/packages/fiori/src/TimelineItem.ts +++ b/packages/fiori/src/TimelineItem.ts @@ -3,7 +3,6 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement import event from "@ui5/webcomponents-base/dist/decorators/event.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; -import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js"; import Icon from "@ui5/webcomponents/dist/Icon.js"; import Link from "@ui5/webcomponents/dist/Link.js"; import type { ITimelineItem } from "./Interfaces"; @@ -48,7 +47,7 @@ const LARGE_LINE_WIDTH = "LargeLineWidth"; * @public */ @event("name-click") -class TimelineItem extends UI5Element implements ITabbable, ITimelineItem { +class TimelineItem extends UI5Element implements ITimelineItem { /** * Defines the icon to be displayed as graphical element within the ui5-timeline-item. * SAP-icons font provides numerous options. @@ -127,7 +126,6 @@ class TimelineItem extends UI5Element implements ITabbable, ITimelineItem { /** * Focus the internal link. - * @protected */ focusLink() { this.shadowRoot!.querySelector("[ui5-link]")?.focus(); diff --git a/packages/main/src/Calendar.ts b/packages/main/src/Calendar.ts index 13c0edd20c12..d9e346bd491a 100644 --- a/packages/main/src/Calendar.ts +++ b/packages/main/src/Calendar.ts @@ -5,7 +5,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; import transformDateToSecondaryType from "@ui5/webcomponents-localization/dist/dates/transformDateToSecondaryType.js"; import convertMonthNumbersToMonthNames from "@ui5/webcomponents-localization/dist/dates/convertMonthNumbersToMonthNames.js"; -import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js"; +import CalendarDateComponent from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js"; import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js"; import { isF4, @@ -14,8 +14,7 @@ import { import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js"; import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js"; import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js"; -import * as CalendarDateComponent from "./CalendarDate.js"; -import type CalendarDateComponentT from "./CalendarDate.js"; +import CalendarDate from "./CalendarDate.js"; import CalendarPart from "./CalendarPart.js"; import CalendarHeader from "./CalendarHeader.js"; import DayPicker from "./DayPicker.js"; @@ -168,7 +167,7 @@ type CalendarSelectedDatesChangeEventDetail = { template: CalendarTemplate, styles: calendarCSS, dependencies: [ - CalendarDateComponent.default, + CalendarDate, CalendarHeader, DayPicker, MonthPicker, @@ -265,7 +264,7 @@ class Calendar extends CalendarPart { * @public */ @slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true }) - dates!: Array; + dates!: Array; /** * @private @@ -297,7 +296,7 @@ class Calendar extends CalendarPart { // Create tags for the selected dates that don't already exist in DOM selectedValues.filter(value => !valuesInDOM.includes(value)).forEach(value => { - const dateElement = document.createElement(CalendarDateComponent.default.getMetadata().getTag()) as CalendarDateComponentT; + const dateElement = document.createElement(CalendarDate.getMetadata().getTag()) as CalendarDate; dateElement.value = value; this.appendChild(dateElement); }); @@ -338,8 +337,8 @@ class Calendar extends CalendarPart { this._headerMonthButtonText = localeData.getMonthsStandAlone("wide", this.primaryCalendarType)[this._calendarDate.getMonth()]; if (this._currentPicker === "year") { - const rangeStart = new CalendarDate(this._calendarDate, this._primaryCalendarType); - const rangeEnd = new CalendarDate(this._calendarDate, this._primaryCalendarType); + const rangeStart = new CalendarDateComponent(this._calendarDate, this._primaryCalendarType); + const rangeEnd = new CalendarDateComponent(this._calendarDate, this._primaryCalendarType); rangeStart.setYear(this._currentPickerDOM._firstYear!); rangeEnd.setYear(this._currentPickerDOM._lastYear!); @@ -398,8 +397,8 @@ class Calendar extends CalendarPart { const yearFormatSecType = DateFormat.getDateInstance({ format: "y", calendarType: this._secondaryCalendarType }); if (this._currentPicker === "year") { - const rangeStart = new CalendarDate(this._calendarDate, this._primaryCalendarType); - const rangeEnd = new CalendarDate(this._calendarDate, this._primaryCalendarType); + const rangeStart = new CalendarDateComponent(this._calendarDate, this._primaryCalendarType); + const rangeEnd = new CalendarDateComponent(this._calendarDate, this._primaryCalendarType); rangeStart.setYear(this._currentPickerDOM._firstYear!); rangeEnd.setYear(this._currentPickerDOM._lastYear!); @@ -453,7 +452,7 @@ class Calendar extends CalendarPart { _fireEventAndUpdateSelectedDates(selectedDates: Array) { const datesValues = selectedDates.map(timestamp => { - const calendarDate = CalendarDate.fromTimestamp(timestamp * 1000, this._primaryCalendarType); + const calendarDate = CalendarDateComponent.fromTimestamp(timestamp * 1000, this._primaryCalendarType); return this.getFormat().format(calendarDate.toUTCJSDate(), true); }); diff --git a/packages/main/src/ColorPalette.ts b/packages/main/src/ColorPalette.ts index 44857dd3f080..4c82be7f7334 100644 --- a/packages/main/src/ColorPalette.ts +++ b/packages/main/src/ColorPalette.ts @@ -25,6 +25,7 @@ import Button from "./Button.js"; import type Dialog from "./Dialog.js"; import type ColorPaletteMoreColors from "./features/ColorPaletteMoreColors.js"; import type ColorPicker from "./ColorPicker.js"; +import type { IColorPaletteItem } from "./Interfaces.js"; import { COLORPALETTE_CONTAINER_LABEL, @@ -35,7 +36,7 @@ import { import ColorPaletteCss from "./generated/themes/ColorPalette.css.js"; import ColorPaletteStaticAreaCss from "./generated/themes/ColorPaletteStaticArea.css.js"; -type ColorPaletteNavigationItem = ColorPaletteItem | Button; +type ColorPaletteNavigationItem = IColorPaletteItem | Button; type ColorPaletteItemClickEventDetail = { color: string, @@ -152,7 +153,7 @@ class ColorPalette extends UI5Element { individualSlots: true, }) - colors!: Array; + colors!: Array; _itemNavigation: ItemNavigation; _itemNavigationRecentColors: ItemNavigation; @@ -202,7 +203,7 @@ class ColorPalette extends UI5Element { } } - selectColor(item: ColorPaletteItem) { + selectColor(item: IColorPaletteItem) { if (!item.value) { return; } @@ -391,7 +392,7 @@ class ColorPalette extends UI5Element { } get displayedColors() { - const colors = this.getSlottedNodes("colors"); + const colors = this.getSlottedNodes("colors"); return colors.filter(item => item.value).slice(0, 15); } diff --git a/packages/main/src/ColorPaletteItem.ts b/packages/main/src/ColorPaletteItem.ts index 86c43e92837c..d5e6f5e7a136 100644 --- a/packages/main/src/ColorPaletteItem.ts +++ b/packages/main/src/ColorPaletteItem.ts @@ -4,7 +4,6 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js"; 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 type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js"; import CSSColor from "@ui5/webcomponents-base/dist/types/CSSColor.js"; import { isPhone } from "@ui5/webcomponents-base/dist/Device.js"; import Integer from "@ui5/webcomponents-base/dist/types/Integer.js"; @@ -37,7 +36,7 @@ import ColorPaletteItemCss from "./generated/themes/ColorPaletteItem.css.js"; styles: ColorPaletteItemCss, template: ColorPaletteItemTemplate, }) -class ColorPaletteItem extends UI5Element implements ITabbable, IColorPaletteItem { +class ColorPaletteItem extends UI5Element implements IColorPaletteItem { /** * Defines the colour of the component. *

    diff --git a/packages/main/src/ColorPalettePopover.ts b/packages/main/src/ColorPalettePopover.ts index 9895cf27a23c..58a63ea9f65f 100644 --- a/packages/main/src/ColorPalettePopover.ts +++ b/packages/main/src/ColorPalettePopover.ts @@ -123,7 +123,6 @@ class ColorPalettePopover extends UI5Element { /** * Defines the content of the component. * - * @default [] * @public */ @slot({ "default": true, type: HTMLElement, individualSlots: true }) diff --git a/packages/main/src/Interfaces.ts b/packages/main/src/Interfaces.ts index b26512374151..40b19dbc8636 100644 --- a/packages/main/src/Interfaces.ts +++ b/packages/main/src/Interfaces.ts @@ -1,4 +1,5 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js"; /** * Interface for components that represent an avatar and may be slotted in numerous higher-order components such as ui5-avatar-group @@ -23,7 +24,7 @@ const IBreadcrumbsItem = "sap.ui.webc.main.IBreadcrumbsItem"; * * @public */ -interface IButton extends HTMLElement {} +interface IButton extends HTMLElement, ITabbable {} /** * Interface for components that may be slotted inside ui5-card as header @@ -48,7 +49,10 @@ const IComboBoxItem = "sap.ui.webc.main.IComboBoxItem"; * * @public */ -interface IColorPaletteItem extends HTMLElement {} +interface IColorPaletteItem extends UI5Element, ITabbable { + value?: string, + index?: number, +} /** * Interface for components that represent an icon, usable in numerous higher-order components diff --git a/packages/main/src/SplitButton.ts b/packages/main/src/SplitButton.ts index 7f7638ab88d6..1b549ed8a5c3 100644 --- a/packages/main/src/SplitButton.ts +++ b/packages/main/src/SplitButton.ts @@ -146,7 +146,7 @@ class SplitButton extends UI5Element { /** * Defines the accessible ARIA name of the component. * - * @default "" + * @default undefined * @public */ @property({ defaultValue: undefined }) From 4b59231a242be526d9171ac20ea0380d4dd6b930 Mon Sep 17 00:00:00 2001 From: Nikolay Hristov Date: Thu, 30 Nov 2023 13:02:31 +0200 Subject: [PATCH 12/12] docs: fix ITtimelineItem interface properties --- packages/fiori/src/Interfaces.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/fiori/src/Interfaces.ts b/packages/fiori/src/Interfaces.ts index 63282e550725..07f3979b2ca6 100644 --- a/packages/fiori/src/Interfaces.ts +++ b/packages/fiori/src/Interfaces.ts @@ -1,5 +1,6 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js"; +import TimelineLayout from "./types/TimelineLayout.js"; /** * Interface for components that may be slotted inside ui5-page as header and footer. @@ -56,10 +57,11 @@ const IShellBarItem = "sap.ui.webc.fiori.IShellBarItem"; * @public */ interface ITimelineItem extends UI5Element, ITabbable { - icon: string, - layout: string, - nameClickable: boolean, - _lineWidth: string, + layout: `${TimelineLayout}`, + icon: string, + _lineWidth: string, + nameClickable: boolean, + focusLink: () => void, } /**