diff --git a/docs/6-contributing/04-writing-samples.md b/docs/6-contributing/04-writing-samples.md index 003d96d48c6c..e9b42420d53b 100644 --- a/docs/6-contributing/04-writing-samples.md +++ b/docs/6-contributing/04-writing-samples.md @@ -115,7 +115,7 @@ The above example includes only the `indeterminate`, `checked` properties in the ## Documentation -The documentation for each component is automatically produced using the `custom-elements.json` file. Additionally, there is an `argTypes.ts` file located beside each `.stories.ts` file. It is generated during build time and contains extra properties that enhance the documentation beyond what is available in the `custom-elements.json` file. This file should not be edited directly, as it can only be modified by the `packages/playground/build-scripts-storybook/samples-prepare.js` script. +The documentation for each component is automatically produced using the `custom-elements.json` file. Additionally, there is an `argTypes.ts` file located beside each `.stories.ts` file. It is generated during build time and contains extra properties that enhance the documentation beyond what is available in the `custom-elements.json` file. This file should not be edited directly, as it can only be modified by the `packages/playground/build-scripts-storybook/samples-prepare.ts` script. ### Docs page Every story has a `docs` page in the storybook's sidebar. Usually, this page is generated automatically by storybook but it can be customized by adding a `docs` property to the story parameters. diff --git a/packages/base/package-scripts.cjs b/packages/base/package-scripts.cjs index 86d93d9dc24b..d24d6111c819 100644 --- a/packages/base/package-scripts.cjs +++ b/packages/base/package-scripts.cjs @@ -43,6 +43,8 @@ const scripts = { generateTemplates: `mkdirp src/generated/templates && cross-env UI5_BASE=true UI5_TS=true node "${LIB}/hbs2ui5/index.js" -d test/elements -o src/generated/templates`, generateAPI: { default: "nps generateAPI.prepare generateAPI.preprocess generateAPI.jsdoc generateAPI.cleanup", + generateCEM: `cem analyze --config "${LIB}/cem/custom-elements-manifest.config.mjs"`, + validateCEM: `node "${LIB}/cem/validate.js"`, prepare: `copy-and-watch "dist/**/*.js" jsdoc-dist/`, preprocess: `node "${preprocessJSDocScript}" jsdoc-dist/`, jsdoc: `jsdoc -c "${LIB}/jsdoc/configTypescript.json"`, diff --git a/packages/base/src/MediaRange.ts b/packages/base/src/MediaRange.ts index 54acbd474e12..d81f2aa58eb8 100644 --- a/packages/base/src/MediaRange.ts +++ b/packages/base/src/MediaRange.ts @@ -11,8 +11,6 @@ DEAFULT_RANGE_SET.set("XL", [1440, Infinity]); /** * Enumeration containing the names and settings of predefined screen width media query range sets. * - * @namespace - * @name MediaRange.RANGESETS * @public */ enum RANGESETS { @@ -27,7 +25,6 @@ DEAFULT_RANGE_SET.set("XL", [1440, Infinity]); *
  • "XL": For screens greater than or equal to 1440 pixels.
    • * * - * @name MediaRange.RANGESETS.RANGE_4STEPS * @public */ RANGE_4STEPS = "4Step", @@ -49,10 +46,9 @@ DEAFULT_RANGE_SET.set("XL", [1440, Infinity]); *
  • "Large": For screens greater than or equal to 400 pixels.
    • * * - * @param {string} name The name of the range set to be initialized. + * @param name The name of the range set to be initialized. * The name must be a valid id and consist only of letters and numeric digits. - * @param {Range} [range] The given range set. - * @name MediaRange.initRangeSet + * @param range The given range set. */ const initRangeSet = (name: string, range: Range) => { mediaRanges.set(name, range); @@ -64,13 +60,10 @@ const initRangeSet = (name: string, range: Range) => { * If the optional parameter width is given, the active range will be determined for that width, * otherwise it is determined for the current window size. * - * @param {string} name The name of the range set. The range set must be initialized beforehand ({@link MediaRange.initRangeSet}) - * @param {number} [width] An optional width, based on which the range should be determined; + * @param name The name of the range set. The range set must be initialized beforehand ({@link MediaRange.initRangeSet}) + * @param [width] An optional width, based on which the range should be determined; * If width is not provided, the window size will be used. - * @returns {string} The name of the current active interval of the range set. - * - * @name MediaRange.getCurrentRange - * @function + * @returns The name of the current active interval of the range set. * @public */ const getCurrentRange = (name: string, width = window.innerWidth): string => { @@ -94,11 +87,7 @@ const getCurrentRange = (name: string, width = window.innerWidth): string => { /** * API for screen width changes. - * - * @namespace - * @name MediaRange */ - const MediaRange = { RANGESETS, initRangeSet, diff --git a/packages/base/src/StaticAreaItem.ts b/packages/base/src/StaticAreaItem.ts index 074b45006c46..203812ac4721 100644 --- a/packages/base/src/StaticAreaItem.ts +++ b/packages/base/src/StaticAreaItem.ts @@ -10,9 +10,7 @@ const pureTagName = "ui5-static-area-item"; const popupIntegrationAttr = "data-sap-ui-integration-popup-content"; /** - * * @class - * @author SAP SE * @private */ class StaticAreaItem extends HTMLElement { @@ -26,7 +24,7 @@ class StaticAreaItem extends HTMLElement { } /** - * @param {UI5Element} ownerElement the UI5Element instance that owns this static area item + * @param ownerElement the UI5Element instance that owns this static area item */ setOwnerElement(ownerElement: UI5Element) { this.ownerElement = ownerElement; @@ -83,8 +81,8 @@ class StaticAreaItem extends HTMLElement { } /** - * @protected * Returns reference to the DOM element where the current fragment is added. + * @protected */ async getDomRef() { this.updateAdditionalProperties(); diff --git a/packages/base/src/UI5Element.ts b/packages/base/src/UI5Element.ts index 23e65cf5b241..2b990ed10dd8 100644 --- a/packages/base/src/UI5Element.ts +++ b/packages/base/src/UI5Element.ts @@ -80,12 +80,9 @@ function _invalidate(this: UI5Element, changeInfo: ChangeInfo) { } /** + * @class * Base class for all UI5 Web Components * - * @class - * @constructor - * @author SAP SE - * @alias sap.ui.webc.base.UI5Element * @extends HTMLElement * @public */ @@ -230,25 +227,25 @@ abstract class UI5Element extends HTMLElement { * Called every time before the component renders. * @public */ - onBeforeRendering() {} + onBeforeRendering(): void {} /** * Called every time after the component renders. * @public */ - onAfterRendering() {} + onAfterRendering(): void {} /** * Called on connectedCallback - added to the DOM. * @public */ - onEnterDOM() {} + onEnterDOM(): void {} /** * Called on disconnectedCallback - removed from the DOM. * @public */ - onExitDOM() {} + onExitDOM(): void {} /** * @private @@ -438,28 +435,28 @@ abstract class UI5Element extends HTMLElement { /** * Attach a callback that will be executed whenever the component is invalidated * - * @param {InvalidationInfo} callback + * @param callback * @public */ - attachInvalidate(callback: (param: InvalidationInfo) => void) { + attachInvalidate(callback: (param: InvalidationInfo) => void): void { this._invalidationEventProvider.attachEvent("invalidate", callback); } /** * Detach the callback that is executed whenever the component is invalidated * - * @param {InvalidationInfo} callback + * @param callback * @public */ - detachInvalidate(callback: (param: InvalidationInfo) => void) { + detachInvalidate(callback: (param: InvalidationInfo) => void): void { this._invalidationEventProvider.detachEvent("invalidate", callback); } /** * Callback that is executed whenever a monitored child changes its state * - * @param {sting} slotName the slot in which a child was invalidated - * @param { ChangeInfo } childChangeInfo the changeInfo object for the child in the given slot + * @param slotName the slot in which a child was invalidated + * @param childChangeInfo the changeInfo object for the child in the given slot * @private */ _onChildChange(slotName: string, childChangeInfo: ChangeInfo) { @@ -576,24 +573,22 @@ abstract class UI5Element extends HTMLElement { * Returns a singleton event listener for the "change" event of a child in a given slot * * @param slotName the name of the slot, where the child is - * @returns {ChildChangeListener} * @private */ - _getChildChangeListener(slotName: string) { + _getChildChangeListener(slotName: string): ChildChangeListener { if (!this._childChangeListeners.has(slotName)) { this._childChangeListeners.set(slotName, this._onChildChange.bind(this, slotName)); } - return this._childChangeListeners.get(slotName); + return this._childChangeListeners.get(slotName)!; } /** * Returns a singleton slotchange event listener that invalidates the component due to changes in the given slot * * @param slotName the name of the slot, where the slot element (whose slotchange event we're listening to) is - * @returns {SlotChangeListener} * @private */ - _getSlotChangeListener(slotName: string) { + _getSlotChangeListener(slotName: string): SlotChangeListener { if (!this._slotChangeListeners.has(slotName)) { this._slotChangeListeners.set(slotName, this._onSlotChange.bind(this, slotName)); } @@ -658,7 +653,7 @@ abstract class UI5Element extends HTMLElement { * * @public */ - onInvalidation(changeInfo: ChangeInfo) {} // eslint-disable-line + onInvalidation(changeInfo: ChangeInfo): void {} // eslint-disable-line /** * Do not call this method directly, only intended to be called by js @@ -746,7 +741,7 @@ abstract class UI5Element extends HTMLElement { * * @public */ - getDomRef() { + getDomRef(): HTMLElement | undefined { // If a component set _getRealDomRef to its children, use the return value of this function if (typeof this._getRealDomRef === "function") { return this._getRealDomRef(); @@ -769,7 +764,7 @@ abstract class UI5Element extends HTMLElement { * This is the element that will receive the focus by default. * @public */ - getFocusDomRef() { + getFocusDomRef(): HTMLElement | undefined { const domRef = this.getDomRef(); if (domRef) { const focusRef = domRef.querySelector("[data-sap-focus-ref]") as HTMLElement; @@ -782,17 +777,17 @@ abstract class UI5Element extends HTMLElement { * This is the element that will receive the focus by default. * @public */ - async getFocusDomRefAsync() { + async getFocusDomRefAsync(): Promise { await this._waitForDomRef(); return this.getFocusDomRef(); } /** * Set the focus to the element, returned by "getFocusDomRef()" (marked by "data-sap-focus-ref") - * @param {FocusOptions} focusOptions additional options for the focus + * @param focusOptions additional options for the focus * @public */ - async focus(focusOptions?: FocusOptions) { + async focus(focusOptions?: FocusOptions): Promise { await this._waitForDomRef(); const focusDomRef = this.getFocusDomRef(); @@ -809,9 +804,9 @@ abstract class UI5Element extends HTMLElement { * @param data - additional data for the event * @param cancelable - true, if the user can call preventDefault on the event object * @param bubbles - true, if the event bubbles - * @returns {boolean} false, if the event was cancelled (preventDefault called), true otherwise + * @returns false, if the event was cancelled (preventDefault called), true otherwise */ - fireEvent(name: string, data?: T, cancelable = false, bubbles = true) { + fireEvent(name: string, data?: T, cancelable = false, bubbles = true): boolean { const eventResult = this._fireEvent(name, data, cancelable, bubbles); const camelCaseEventName = kebabToCamelCase(name); @@ -856,27 +851,27 @@ abstract class UI5Element extends HTMLElement { * Useful when there are transitive slots in nested component scenarios and you don't want to get a list of the slots, but rather of their content. * @public */ - getSlottedNodes(slotName: string) { + getSlottedNodes(slotName: string): Array { return getSlottedNodesList((this as unknown as Record>)[slotName]) as Array; } /** * Attach a callback that will be executed whenever the component's state is finalized * - * @param {} callback + * @param callback * @public */ - attachComponentStateFinalized(callback: () => void) { + attachComponentStateFinalized(callback: () => void): void { this._componentStateFinalizedEventProvider.attachEvent("componentStateFinalized", callback); } /** * Detach the callback that is executed whenever the component's state is finalized * - * @param {} callback + * @param callback * @public */ - detachComponentStateFinalized(callback: () => void) { + detachComponentStateFinalized(callback: () => void): void { this._componentStateFinalizedEventProvider.detachEvent("componentStateFinalized", callback); } @@ -885,19 +880,19 @@ abstract class UI5Element extends HTMLElement { * Returns: "rtl", "ltr" or undefined * * @public - * @returns {String|undefined} + * @default undefined */ - get effectiveDir() { + get effectiveDir(): string | undefined { markAsRtlAware(this.constructor as typeof UI5Element); // if a UI5 Element calls this method, it's considered to be rtl-aware return getEffectiveDir(this); } /** * Used to duck-type UI5 elements without using instanceof - * @returns {boolean} * @public + * @default true */ - get isUI5Element() { + get isUI5Element(): boolean { return true; } @@ -930,7 +925,7 @@ abstract class UI5Element extends HTMLElement { /** * @public */ - getStaticAreaItemDomRef() { + getStaticAreaItemDomRef(): Promise { if (!(this.constructor as typeof UI5Element)._needsStaticArea()) { throw new Error("This component does not use the static area"); } @@ -1093,7 +1088,7 @@ abstract class UI5Element extends HTMLElement { * * @public */ - static getUniqueDependencies(this: typeof UI5Element) { + static getUniqueDependencies(this: typeof UI5Element): Array { if (!uniqueDependenciesCache.has(this)) { const filtered = this.dependencies.filter((dep, index, deps) => deps.indexOf(dep) === index); uniqueDependenciesCache.set(this, filtered); @@ -1104,8 +1099,6 @@ abstract class UI5Element extends HTMLElement { /** * Returns a promise that resolves whenever all dependencies for this UI5 Web Component have resolved - * - * @returns {Promise} */ static whenDependenciesDefined(): Promise> { return Promise.all(this.getUniqueDependencies().map(dep => dep.define())); @@ -1115,18 +1108,16 @@ abstract class UI5Element extends HTMLElement { * Hook that will be called upon custom element definition * * @protected - * @returns {Promise} */ - static async onDefine() { + static async onDefine(): Promise { return Promise.resolve(); } /** * Registers a UI5 Web Component in the browser window object * @public - * @returns {Promise} */ - static async define() { + static async define(): Promise { await boot(); await Promise.all([ @@ -1154,9 +1145,8 @@ abstract class UI5Element extends HTMLElement { * Returns an instance of UI5ElementMetadata.js representing this UI5 Web Component's full metadata (its and its parents') * Note: not to be confused with the "get metadata()" method, which returns an object for this class's metadata only * @public - * @returns {UI5ElementMetadata} */ - static getMetadata() { + static getMetadata(): UI5ElementMetadata { if (this.hasOwnProperty("_metadata")) { // eslint-disable-line return this._metadata; } @@ -1176,7 +1166,6 @@ abstract class UI5Element extends HTMLElement { /** * Always use duck-typing to cover all runtimes on the page. - * @returns {boolean} */ const instanceOfUI5Element = (object: any): object is UI5Element => { return "isUI5Element" in object; diff --git a/packages/base/src/UI5ElementMetadata.ts b/packages/base/src/UI5ElementMetadata.ts index ed8f756c5745..11fc14042ef6 100644 --- a/packages/base/src/UI5ElementMetadata.ts +++ b/packages/base/src/UI5ElementMetadata.ts @@ -45,7 +45,6 @@ type Metadata = { type State = Record>; /** - * * @class * @public */ @@ -106,7 +105,7 @@ class UI5ElementMetadata { * Note: Only intended for use by UI5Element.js * @public */ - static validatePropertyValue(value: PropertyValue, propData: Property) { + static validatePropertyValue(value: PropertyValue, propData: Property): PropertyValue { const isMultiple = propData.multiple; if (isMultiple && value) { return (value as Array).map((propValue: PropertyValue) => validateSingleProperty(propValue, propData)); @@ -118,9 +117,9 @@ class UI5ElementMetadata { * Validates the slot's value and returns it if correct * or throws an exception if not. * Note: Only intended for use by UI5Element.js - * @pubic + * @public */ - static validateSlotValue(value: Node, slotData: Slot) { + static validateSlotValue(value: Node, slotData: Slot): Node { return validateSingleSlot(value, slotData); } @@ -128,7 +127,7 @@ class UI5ElementMetadata { * Returns the tag of the UI5 Element without the scope * @public */ - getPureTag() { + getPureTag(): string { return this.metadata.tag || ""; } @@ -136,7 +135,7 @@ class UI5ElementMetadata { * Returns the tag of the UI5 Element * @public */ - getTag() { + getTag(): string { const pureTag = this.metadata.tag; if (!pureTag) { @@ -155,9 +154,8 @@ class UI5ElementMetadata { * Determines whether a property should have an attribute counterpart * @public * @param propName - * @returns {boolean} */ - hasAttribute(propName: string) { + hasAttribute(propName: string): boolean { const propData = this.getProperties()[propName]; return propData.type !== Object && !propData.noAttribute && !propData.multiple; } @@ -165,26 +163,23 @@ class UI5ElementMetadata { /** * Returns an array with the properties of the UI5 Element (in camelCase) * @public - * @returns {string[]} */ - getPropertiesList() { + getPropertiesList(): Array { return Object.keys(this.getProperties()); } /** * Returns an array with the attributes of the UI5 Element (in kebab-case) * @public - * @returns {string[]} */ - getAttributesList() { + getAttributesList(): Array { return this.getPropertiesList().filter(this.hasAttribute.bind(this)).map(camelToKebabCase); } /** * Determines whether this UI5 Element has a default slot of type Node, therefore can slot text - * @returns {boolean} */ - canSlotText() { + canSlotText(): boolean { const defaultSlot = this.getSlots().default; return defaultSlot && defaultSlot.type === Node; } @@ -193,7 +188,7 @@ class UI5ElementMetadata { * Determines whether this UI5 Element supports any slots * @public */ - hasSlots() { + hasSlots(): boolean { return !!Object.entries(this.getSlots()).length; } @@ -201,7 +196,7 @@ class UI5ElementMetadata { * Determines whether this UI5 Element supports any slots with "individualSlots: true" * @public */ - hasIndividualSlots() { + hasIndividualSlots(): boolean { return this.slotsAreManaged() && Object.values(this.getSlots()).some(slotData => slotData.individualSlots); } @@ -209,7 +204,7 @@ class UI5ElementMetadata { * Determines whether this UI5 Element needs to invalidate if children are added/removed/changed * @public */ - slotsAreManaged() { + slotsAreManaged(): boolean { return !!this.metadata.managedSlots; } @@ -217,7 +212,7 @@ class UI5ElementMetadata { * Determines whether this control supports F6 fast navigation * @public */ - supportsF6FastNavigation() { + supportsF6FastNavigation(): boolean { return !!this.metadata.fastNavigation; } @@ -225,7 +220,7 @@ class UI5ElementMetadata { * Returns an object with key-value pairs of properties and their metadata definitions * @public */ - getProperties() { + getProperties(): Record { if (!this.metadata.properties) { this.metadata.properties = {}; } @@ -236,7 +231,7 @@ class UI5ElementMetadata { * Returns an object with key-value pairs of events and their metadata definitions * @public */ - getEvents() { + getEvents(): EventData { if (!this.metadata.events) { this.metadata.events = {}; } @@ -247,7 +242,7 @@ class UI5ElementMetadata { * Returns an object with key-value pairs of slots and their metadata definitions * @public */ - getSlots() { + getSlots(): Record { if (!this.metadata.slots) { this.metadata.slots = {}; } @@ -256,17 +251,15 @@ class UI5ElementMetadata { /** * Determines whether this UI5 Element has any translatable texts (needs to be invalidated upon language change) - * @returns {boolean} */ - isLanguageAware() { + isLanguageAware(): boolean { return !!this.metadata.languageAware; } /** * Determines whether this UI5 Element has any theme dependant carachteristics. - * @returns {boolean} */ - isThemeAware() { + isThemeAware(): boolean { return !!this.metadata.themeAware; } @@ -277,9 +270,8 @@ class UI5ElementMetadata { * @param slotName the name of the slot in which a child was changed * @param type the type of change in the child: "property" or "slot" * @param name the name of the property/slot that changed - * @returns {boolean} */ - shouldInvalidateOnChildChange(slotName: string, type: "property" | "slot", name: string) { + shouldInvalidateOnChildChange(slotName: string, type: "property" | "slot", name: string): boolean { const config = this.getSlots()[slotName].invalidateOnChildChange; // invalidateOnChildChange was not set in the slot metadata - by default child changes do not affect the component diff --git a/packages/base/src/delegate/ItemNavigation.ts b/packages/base/src/delegate/ItemNavigation.ts index ca6566b3c23d..f4198be50649 100644 --- a/packages/base/src/delegate/ItemNavigation.ts +++ b/packages/base/src/delegate/ItemNavigation.ts @@ -127,7 +127,7 @@ class ItemNavigation { * @public * @param current the new selected item */ - setCurrentItem(current: ITabbable) { + setCurrentItem(current: ITabbable): void { const currentItemIndex = this._getItems().indexOf(current); if (currentItemIndex === -1) { @@ -145,7 +145,7 @@ class ItemNavigation { * @public * @param newRowSize */ - setRowSize(newRowSize: number) { + setRowSize(newRowSize: number): void { this._rowSize = newRowSize; } diff --git a/packages/base/src/delegate/ResizeHandler.ts b/packages/base/src/delegate/ResizeHandler.ts index 8920adb12ddb..f94df55e1602 100644 --- a/packages/base/src/delegate/ResizeHandler.ts +++ b/packages/base/src/delegate/ResizeHandler.ts @@ -56,12 +56,11 @@ const unobserve = (element: HTMLElement, callback: ResizeObserverCallback) => { */ class ResizeHandler { /** - * @static * @public - * @param {*} element UI5 Web Component or DOM Element to be observed - * @param {*} callback Callback to be executed + * @param element UI5 Web Component or DOM Element to be observed + * @param callback Callback to be executed */ - static register(element: HTMLElement, callback: ResizeObserverCallback) { + static register(element: HTMLElement, callback: ResizeObserverCallback): void { let effectiveElement: HTMLElement | undefined = element; if (instanceOfUI5Element(effectiveElement)) { @@ -76,12 +75,11 @@ class ResizeHandler { } /** - * @static * @public - * @param {*} element UI5 Web Component or DOM Element to be unobserved - * @param {*} callback Callback to be removed + * @param element UI5 Web Component or DOM Element to be unobserved + * @param callback Callback to be removed */ - static deregister(element: HTMLElement, callback: ResizeObserverCallback) { + static deregister(element: HTMLElement, callback: ResizeObserverCallback): void { let effectiveElement: HTMLElement | undefined = element; if (instanceOfUI5Element(effectiveElement)) { diff --git a/packages/base/src/i18nBundle.ts b/packages/base/src/i18nBundle.ts index 637a1ffc9227..c7243d389301 100644 --- a/packages/base/src/i18nBundle.ts +++ b/packages/base/src/i18nBundle.ts @@ -27,9 +27,8 @@ class I18nBundle { * Returns a text in the currently loaded language * * @public - * @param {Object|String} textObj key/defaultText pair or just the key + * @param textObj key/defaultText pair or just the key * @param params Values for the placeholders - * @returns {string} */ getText(textObj: I18nText | string, ...params: Array): string { if (typeof textObj === "string") { @@ -56,7 +55,6 @@ class I18nBundle { * * @public * @param packageName - * @returns { I18nBundle } */ const getI18nBundleSync = (packageName: string): I18nBundle => { if (I18nBundleInstances.has(packageName)) { @@ -73,7 +71,6 @@ const getI18nBundleSync = (packageName: string): I18nBundle => { * * @public * @param packageName - * @returns { Promise } */ const getI18nBundle = async (packageName: string): Promise => { if (customGetI18nBundle) { @@ -92,7 +89,7 @@ const getI18nBundle = async (packageName: string): Promise => { * @public * @param customGet the function to use instead of the standard getI18nBundle implementation */ -const registerCustomI18nBundleGetter = (customGet: I18nBundleGetter) => { +const registerCustomI18nBundleGetter = (customGet: I18nBundleGetter): void => { customGetI18nBundle = customGet; }; diff --git a/packages/base/src/types/AnimationMode.ts b/packages/base/src/types/AnimationMode.ts index d4c03826aaae..9359c21b0b9e 100644 --- a/packages/base/src/types/AnimationMode.ts +++ b/packages/base/src/types/AnimationMode.ts @@ -1,31 +1,23 @@ /** * Different types of AnimationMode. * - * @readonly - * @enum {string} * @public - * @author SAP SE - * @alias sap.ui.webc.base.types.AnimationMode */ enum AnimationMode { /** * @public - * @type {Full} */ Full = "full", /** * @public - * @type {Basic} */ Basic = "basic", /** * @public - * @type {Minimal} */ Minimal = "minimal", /** * @public - * @type {None} */ None = "none", } diff --git a/packages/base/src/types/CSSColor.ts b/packages/base/src/types/CSSColor.ts index c81819652ca7..5ed1bfd391d8 100644 --- a/packages/base/src/types/CSSColor.ts +++ b/packages/base/src/types/CSSColor.ts @@ -4,10 +4,6 @@ import DataType from "./DataType.js"; * @class * CSSColor data type. * - * @extends sap.ui.webc.base.types.DataType - * @constructor - * @author SAP SE - * @alias sap.ui.webc.base.types.CSSColor * @public */ class CSSColor extends DataType { diff --git a/packages/base/src/types/CSSSize.ts b/packages/base/src/types/CSSSize.ts index a05505630dd8..030485d25946 100644 --- a/packages/base/src/types/CSSSize.ts +++ b/packages/base/src/types/CSSSize.ts @@ -4,10 +4,6 @@ import DataType from "./DataType.js"; * @class * CSSSize data type. * - * @extends sap.ui.webc.base.types.DataType - * @constructor - * @author SAP SE - * @alias sap.ui.webc.base.types.CSSSize * @public */ class CSSSize extends DataType { 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/DOMReference.ts b/packages/base/src/types/DOMReference.ts index cc83ad6f89b1..85756fabf2b8 100644 --- a/packages/base/src/types/DOMReference.ts +++ b/packages/base/src/types/DOMReference.ts @@ -5,10 +5,6 @@ import DataType from "./DataType.js"; * DOM Element reference or ID. * Note: If an ID is passed, it is expected to be part of the same document element as the consuming component. * - * @constructor - * @extends sap.ui.webc.base.types.DataType - * @author SAP SE - * @alias sap.ui.webc.base.types.DOMReference * @public */ class DOMReference extends DataType { diff --git a/packages/base/src/types/DataType.ts b/packages/base/src/types/DataType.ts index 51523f359aac..571355de5bd1 100644 --- a/packages/base/src/types/DataType.ts +++ b/packages/base/src/types/DataType.ts @@ -1,20 +1,15 @@ import { PropertyValue } from "../UI5ElementMetadata.js"; /** + * @class * Base class for all data types. * - * @class - * @constructor - * @author SAP SE - * @alias sap.ui.webc.base.types.DataType * @public */ class DataType { /** * Checks if the value is valid for its data type. * @public - * @abstract - * @returns {Boolean} */ // eslint-disable-next-line static isValid(value: any): boolean { diff --git a/packages/base/src/types/Float.ts b/packages/base/src/types/Float.ts index d11ec6f941e9..eb92ecd7bcdf 100644 --- a/packages/base/src/types/Float.ts +++ b/packages/base/src/types/Float.ts @@ -6,9 +6,6 @@ import DataType from "./DataType.js"; * Float data type. * * @constructor - * @extends sap.ui.webc.base.types.DataType - * @author SAP SE - * @alias sap.ui.webc.base.types.Float * @public */ class Float extends DataType { diff --git a/packages/base/src/types/Integer.ts b/packages/base/src/types/Integer.ts index fb8bf140ae08..f88c57e9e393 100644 --- a/packages/base/src/types/Integer.ts +++ b/packages/base/src/types/Integer.ts @@ -6,9 +6,6 @@ import DataType from "./DataType.js"; * Integer data type. * * @constructor - * @extends sap.ui.webc.base.types.DataType - * @author SAP SE - * @alias sap.ui.webc.base.types.Integer * @public */ class Integer extends DataType { diff --git a/packages/base/src/types/InvisibleMessageMode.ts b/packages/base/src/types/InvisibleMessageMode.ts index 99b13d383117..6fba3a478047 100644 --- a/packages/base/src/types/InvisibleMessageMode.ts +++ b/packages/base/src/types/InvisibleMessageMode.ts @@ -1,25 +1,19 @@ /** * Enumeration for different mode behaviors of the InvisibleMessage. * - * @readonly - * @enum {string} * @public - * @author SAP SE - * @alias sap.ui.webc.base.types.InvisibleMessageMode */ enum InvisibleMessageMode { /** * Indicates that updates to the region should be presented at the next graceful opportunity, * such as at the end of reading the current sentence, or when the user pauses typing. * @public - * @type {Polite} */ Polite = "Polite", /** * Indicates that updates to the region have the highest priority and should be presented to the user immediately. * @public - * @type {Assertive} */ Assertive = "Assertive", } diff --git a/packages/base/src/types/ItemNavigationBehavior.ts b/packages/base/src/types/ItemNavigationBehavior.ts index a19be96b11f5..8da0edac415f 100644 --- a/packages/base/src/types/ItemNavigationBehavior.ts +++ b/packages/base/src/types/ItemNavigationBehavior.ts @@ -1,24 +1,18 @@ /** * Different behavior for ItemNavigation. * - * @readonly - * @enum {string} * @public - * @author SAP SE - * @alias sap.ui.webc.base.types.ItemNavigationBehavior */ enum ItemNavigationBehavior { /** * Static behavior: navigations stops at the first or last item. * @public - * @type {Static} */ Static = "Static", /** * Cycling behavior: navigating past the last item continues with the first and vice versa. * @public - * @type {Cyclic} */ Cyclic = "Cyclic", } 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..339399f2e712 100644 --- a/packages/base/src/types/ValueState.ts +++ b/packages/base/src/types/ValueState.ts @@ -1,45 +1,31 @@ /** * 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..e2037a91de50 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: - *
      - *
    • bar - Used to style the wrapper of the content of the component
      • - *
    - * *

    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,11 @@ 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" + * @default "Header" * @public */ @property({ type: BarDesign, defaultValue: BarDesign.Header }) @@ -81,9 +69,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 }) @@ -91,9 +76,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 }) @@ -101,9 +83,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..60d3a2b84a61 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, }, @@ -146,9 +155,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 * */ @@ -158,9 +165,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 +184,7 @@ class DynamicSideContent extends UI5Element { *
  • End
    • * * - * @type {sap.ui.webc.fiori.types.SideContentPosition} - * @name sap.ui.webc.fiori.DynamicSideContent.prototype.sideContentPosition - * @defaultvalue "End" + * @default "End" * @public * */ @@ -202,9 +205,7 @@ class DynamicSideContent extends UI5Element { *
  • NeverShow
    • * * - * @type {sap.ui.webc.fiori.types.SideContentVisibility} - * @name sap.ui.webc.fiori.DynamicSideContent.prototype.sideContentVisibility - * @defaultvalue "ShowAboveS" + * @default "ShowAboveS" * @public * */ @@ -224,9 +225,7 @@ class DynamicSideContent extends UI5Element { *
  • OnMinimumWidth
    • * * - * @type {sap.ui.webc.fiori.types.SideContentFallDown} - * @name sap.ui.webc.fiori.DynamicSideContent.prototype.sideContentFallDown - * @defaultvalue "OnMinimumWidth" + * @default "OnMinimumWidth" * @public * */ @@ -239,9 +238,7 @@ 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 + * @default false * @public * */ @@ -272,21 +269,9 @@ 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 */ @slot() @@ -319,11 +304,10 @@ 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() { + toggleContents(): void { if (this.breakpoint === this.sizeS && this.sideContentVisibility !== SideContentVisibility.AlwaysShow) { this._toggled = !this._toggled; } diff --git a/packages/fiori/src/FilterItem.ts b/packages/fiori/src/FilterItem.ts index 5326383a7b83..8e1df979a6cf 100644 --- a/packages/fiori/src/FilterItem.ts +++ b/packages/fiori/src/FilterItem.ts @@ -18,13 +18,9 @@ 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 * @public */ @customElement("ui5-filter-item") @@ -32,9 +28,7 @@ class FilterItem extends UI5Element { /** * Defines the text of the component. * - * @name sap.ui.webc.fiori.FilterItem.prototype.text - * @type {string} - * @defaultvalue "" + * @default "" * @public */ @property() @@ -43,9 +37,7 @@ 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,9 +45,6 @@ class FilterItem extends UI5Element { /** * Defines the values list. - * @name sap.ui.webc.fiori.FilterItem.prototype.values - * @type {sap.ui.webc.fiori.IFilterItemOption[]} - * @slot values * @public */ @slot() diff --git a/packages/fiori/src/FilterItemOption.ts b/packages/fiori/src/FilterItemOption.ts index 6fe58bfb99ef..ab581608d976 100644 --- a/packages/fiori/src/FilterItemOption.ts +++ b/packages/fiori/src/FilterItemOption.ts @@ -16,13 +16,9 @@ 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 * @public */ @customElement("ui5-filter-item-option") @@ -30,9 +26,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 +35,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 }) diff --git a/packages/fiori/src/Interfaces.ts b/packages/fiori/src/Interfaces.ts index 30f113637518..9c4eb1af3dd7 100644 --- a/packages/fiori/src/Interfaces.ts +++ b/packages/fiori/src/Interfaces.ts @@ -1,29 +1,11 @@ -/** - * 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 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"; +import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; /** - * Interface for components that may be slotted inside ui5-filter-item as values + * Interface for components that may be slotted inside ui5-page as header and footer. * - * @name sap.ui.webc.fiori.IFilterItemOption - * @interface * @public */ -const IFilterItemOption = "sap.ui.webc.fiori.IFilterItemOption"; +interface IBar extends HTMLElement {} /** * Interface for components that can be slotted inside ui5-media-gallery as items. @@ -61,15 +43,6 @@ const INotificationListItem = "sap.ui.webc.fiori.INotificationListItem"; */ const IProductSwitchItem = "sap.ui.webc.fiori.IProductSwitchItem"; -/** - * Interface for components that may be slotted inside ui5-shellbar as items - * - * @name sap.ui.webc.fiori.IShellBarItem - * @interface - * @public - */ -const IShellBarItem = "sap.ui.webc.fiori.IShellBarItem"; - /** * Interface for components that may be slotted inside ui5-side-navigation as items * @@ -88,23 +61,15 @@ 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 - * - * @name sap.ui.webc.fiori.ISortItem - * @interface - * @public - */ -const ISortItem = "sap.ui.webc.fiori.ISortItem"; - /** * 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 UI5Element { + icon: string, + layout: string, +} /** * Interface for components that may be slotted inside ui5-upload-collection as items @@ -126,16 +91,12 @@ const IWizardStep = "sap.ui.webc.fiori.IWizardStep"; export { IBar, - IFilterItem, - IFilterItemOption, IMediaGalleryItem, INotificationAction, INotificationListItem, IProductSwitchItem, - IShellBarItem, ISideNavigationItem, ISideNavigationSubItem, - ISortItem, ITimelineItem, IUploadCollectionItem, IWizardStep, diff --git a/packages/fiori/src/NotificationListGroupItem.ts b/packages/fiori/src/NotificationListGroupItem.ts index 09beb3c9bd42..77be21d39a85 100644 --- a/packages/fiori/src/NotificationListGroupItem.ts +++ b/packages/fiori/src/NotificationListGroupItem.ts @@ -84,7 +84,6 @@ type NotificationListGroupItemToggleEventDetail = { * @tagname ui5-li-notification-group * @since 1.0.0-rc.8 * @appenddocs sap.ui.webc.fiori.NotificationAction - * @implements sap.ui.webc.main.IListItem * @public */ @customElement({ diff --git a/packages/fiori/src/NotificationListItem.ts b/packages/fiori/src/NotificationListItem.ts index bf33877d5a6d..9a50a2a308e3 100644 --- a/packages/fiori/src/NotificationListItem.ts +++ b/packages/fiori/src/NotificationListItem.ts @@ -90,7 +90,6 @@ type Footnote = Record; * @tagname ui5-li-notification * @appenddocs sap.ui.webc.fiori.NotificationAction * @since 1.0.0-rc.8 - * @implements sap.ui.webc.fiori.INotificationListItem, sap.ui.webc.main.IListItem * @public */ @customElement({ diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts index 97bd0defd60a..b5671edcb4d8 100644 --- a/packages/fiori/src/ShellBar.ts +++ b/packages/fiori/src/ShellBar.ts @@ -139,15 +139,6 @@ const HANDLE_RESIZE_DEBOUNCE_RATE = 200; // ms *
  • product-switch
    • * * - *

    CSS Shadow Parts

    - * - * CSS Shadow Parts allow developers to style elements inside the Shadow DOM. - *
    - * The ui5-shellbar exposes the following CSS Shadow Parts: - *
      - *
    • root - Used to style the outermost wrapper of the ui5-shellbar
      • - *
    - * *

    Keyboard Handling

    * *

    Fast Navigation

    @@ -159,12 +150,10 @@ const HANDLE_RESIZE_DEBOUNCE_RATE = 200; // ms *

    ES6 Module Import

    * import "@ui5/webcomponents-fiori/dist/ShellBar"; * + * @csspart root - Used to style the outermost wrapper of the ui5-shellbar + * * @constructor - * @author SAP SE - * @alias sap.ui.webc.fiori.ShellBar - * @extends sap.ui.webc.base.UI5Element - * @tagname ui5-shellbar - * @appenddocs sap.ui.webc.fiori.ShellBarItem + * @extends UI5Element * @public * @since 0.8.0 */ @@ -189,13 +178,15 @@ const HANDLE_RESIZE_DEBOUNCE_RATE = 200; // ms * * Fired, when the notification icon is activated. * - * @event sap.ui.webc.fiori.ShellBar#notifications-click * @allowPreventDefault * @param {HTMLElement} targetRef dom ref of the activated element * @public */ @event("notifications-click", { detail: { + /** + * @public + */ targetRef: { type: HTMLElement }, }, }) @@ -203,12 +194,14 @@ const HANDLE_RESIZE_DEBOUNCE_RATE = 200; // ms /** * Fired, when the profile slot is present. * - * @event sap.ui.webc.fiori.ShellBar#profile-click * @param {HTMLElement} targetRef dom ref of the activated element * @public */ @event("profile-click", { detail: { + /** + * @public + */ targetRef: { type: HTMLElement }, }, }) @@ -217,13 +210,15 @@ const HANDLE_RESIZE_DEBOUNCE_RATE = 200; // ms * Fired, when the product switch icon is activated. * Note: You can prevent closing of overflow popover by calling event.preventDefault(). * - * @event sap.ui.webc.fiori.ShellBar#product-switch-click * @allowPreventDefault * @param {HTMLElement} targetRef dom ref of the activated element * @public */ @event("product-switch-click", { detail: { + /** + * @public + */ targetRef: { type: HTMLElement }, }, }) @@ -231,13 +226,15 @@ const HANDLE_RESIZE_DEBOUNCE_RATE = 200; // ms /** * Fired, when the logo is activated. * - * @event sap.ui.webc.fiori.ShellBar#logo-click * @param {HTMLElement} targetRef dom ref of the activated element * @since 0.10 * @public */ @event("logo-click", { detail: { + /** + * @public + */ targetRef: { type: HTMLElement }, }, }) @@ -245,13 +242,15 @@ const HANDLE_RESIZE_DEBOUNCE_RATE = 200; // ms /** * Fired, when the co pilot is activated. * - * @event sap.ui.webc.fiori.ShellBar#co-pilot-click * @param {HTMLElement} targetRef dom ref of the activated element * @since 0.10 * @public */ @event("co-pilot-click", { detail: { + /** + * @public + */ targetRef: { type: HTMLElement }, }, }) @@ -260,13 +259,15 @@ const HANDLE_RESIZE_DEBOUNCE_RATE = 200; // ms * Fired, when a menu item is activated * Note: You can prevent closing of overflow popover by calling event.preventDefault(). * - * @event sap.ui.webc.fiori.ShellBar#menu-item-click * @param {HTMLElement} item DOM ref of the activated list item * @since 0.10 * @public */ @event("menu-item-click", { detail: { + /** + * @public + */ item: { type: HTMLElement }, }, }) @@ -276,9 +277,7 @@ class ShellBar extends UI5Element { * Defines the primaryTitle. *

    * Note: The primaryTitle would be hidden on S screen size (less than approx. 700px). - * @type {string} - * @defaultvalue "" - * @name sap.ui.webc.fiori.ShellBar.prototype.primaryTitle + * @default "" * @public */ @property() @@ -288,9 +287,7 @@ class ShellBar extends UI5Element { * Defines the secondaryTitle. *

    * Note: The secondaryTitle would be hidden on S and M screen sizes (less than approx. 1300px). - * @type {string} - * @defaultvalue "" - * @name sap.ui.webc.fiori.ShellBar.prototype.secondaryTitle + * @default "" * @public */ @property() @@ -299,9 +296,7 @@ class ShellBar extends UI5Element { /** * Defines the notificationsCount, * displayed in the notification icon top-right corner. - * @type {string} - * @defaultvalue "" - * @name sap.ui.webc.fiori.ShellBar.prototype.notificationsCount + * @default "" * @public */ @property() @@ -309,9 +304,7 @@ class ShellBar extends UI5Element { /** * Defines, if the notification icon would be displayed. - * @type {boolean} - * @defaultvalue false - * @name sap.ui.webc.fiori.ShellBar.prototype.showNotifications + * @default false * @public */ @property({ type: Boolean }) @@ -319,9 +312,7 @@ class ShellBar extends UI5Element { /** * Defines, if the product switch icon would be displayed. - * @type {boolean} - * @defaultvalue false - * @name sap.ui.webc.fiori.ShellBar.prototype.showProductSwitch + * @default false * @public */ @property({ type: Boolean }) @@ -331,9 +322,7 @@ class ShellBar extends UI5Element { * Defines, if the product CoPilot icon would be displayed. *
    Note: By default the co-pilot is displayed as static SVG. * If you need an animated co-pilot, you can import the "@ui5/webcomponents-fiori/dist/features/CoPilotAnimation.js" module as add-on feature. - * @type {boolean} - * @defaultvalue false - * @name sap.ui.webc.fiori.ShellBar.prototype.showCoPilot + * @default false * @public */ @property({ type: Boolean }) @@ -342,9 +331,7 @@ class ShellBar extends UI5Element { /** * Defines, if the Search Field would be displayed when there is a valid searchField slot. *
    Note: By default the Search Field is not displayed. - * @type {boolean} - * @defaultvalue false - * @name sap.ui.webc.fiori.ShellBar.prototype.showSearchField + * @default false * @public */ @property({ type: Boolean }) @@ -355,9 +342,7 @@ class ShellBar extends UI5Element { * * It supports the following fields: * - logoRole: the accessibility role for the logo - * - * @type {object} - * @name sap.ui.webc.fiori.ShellBar.prototype.accessibilityRoles + * @default {} * @public * @since 1.6.0 */ @@ -372,8 +357,7 @@ class ShellBar extends UI5Element { * - profileButtonTitle: defines the tooltip for the profile button * - logoTitle: defines the tooltip for the logo * - * @type {object} - * @name sap.ui.webc.fiori.ShellBar.prototype.accessibilityTexts + * @default {} * @public * @since 1.1.0 */ @@ -403,8 +387,7 @@ class ShellBar extends UI5Element { * * * - * @type {object} - * @name sap.ui.webc.fiori.ShellBar.prototype.accessibilityAttributes + * @default {} * @public * @since 1.10.0 */ @@ -450,9 +433,6 @@ class ShellBar extends UI5Element { * Note: * You can use the  <ui5-shellbar-item></ui5-shellbar-item>. * - * @type {sap.ui.webc.fiori.IShellBarItem[]} - * @name sap.ui.webc.fiori.ShellBar.prototype.default - * @slot items * @public */ @slot({ type: HTMLElement, "default": true, invalidateOnChildChange: true }) @@ -464,9 +444,6 @@ class ShellBar extends UI5Element { * * Note: We recommend not using the size attribute of ui5-avatar because * it should have specific size by design in the context of ui5-shellbar profile. - * @type {sap.ui.webc.main.IAvatar} - * @name sap.ui.webc.fiori.ShellBar.prototype.profile - * @slot profile * @since 1.0.0-rc.6 * @public */ @@ -476,9 +453,6 @@ class ShellBar extends UI5Element { /** * Defines the logo of the ui5-shellbar. * For example, you can use ui5-avatar or img elements as logo. - * @type {sap.ui.webc.main.IAvatar} - * @name sap.ui.webc.fiori.ShellBar.prototype.logo - * @slot * @since 1.0.0-rc.8 * @public */ @@ -491,9 +465,6 @@ class ShellBar extends UI5Element { * Note: * You can use the  <ui5-li></ui5-li> and its ancestors. * - * @type {sap.ui.webc.main.IListItem[]} - * @name sap.ui.webc.fiori.ShellBar.prototype.menuItems - * @slot * @since 0.10 * @public */ @@ -503,9 +474,6 @@ class ShellBar extends UI5Element { /** * Defines the ui5-input, that will be used as a search field. * - * @type {sap.ui.webc.main.IInput} - * @name sap.ui.webc.fiori.ShellBar.prototype.searchField - * @slot * @public */ @slot() @@ -516,9 +484,6 @@ class ShellBar extends UI5Element { * We encourage this slot to be used for a back or home button. * It gets overstyled to match ShellBar's styling. * - * @type {sap.ui.webc.main.IButton} - * @name sap.ui.webc.fiori.ShellBar.prototype.startButton - * @slot * @public */ @slot() @@ -706,10 +671,8 @@ class ShellBar extends UI5Element { * Closes the overflow area. * Useful to manually close the overflow after having suppressed automatic closing with preventDefault() of ShellbarItem's press event * @public - * @method - * @name sap.ui.webc.fiori.ShellBar#closeOverflow */ - closeOverflow() { + closeOverflow(): void { if (this.overflowPopover) { this.overflowPopover.close(); } @@ -907,79 +870,67 @@ class ShellBar extends UI5Element { /** * Returns the logo DOM ref. - * @type {HTMLElement} - * @name sap.ui.webc.fiori.ShellBar.prototype.logoDomRef * @public - * @readonly + * @default null * @since 1.0.0-rc.16 */ - get logoDomRef() { - return this.shadowRoot!.querySelector