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]);
* <li><code>"XL"</code>: For screens greater than or equal to 1440 pixels.</li>
* </ul>
*
- * @name MediaRange.RANGESETS.RANGE_4STEPS
* @public
*/
RANGE_4STEPS = "4Step",
@@ -49,10 +46,9 @@ DEAFULT_RANGE_SET.set("XL", [1440, Infinity]);
* <li><code>"Large"</code>: For screens greater than or equal to 400 pixels.</li>
* </ul>
*
- * @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 <code>width</code> 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 <code>width</code> 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<HTMLElement | undefined> {
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<void> {
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<T>(name: string, data?: T, cancelable = false, bubbles = true) {
+ fireEvent<T>(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<T = Node>(slotName: string) {
+ getSlottedNodes<T = Node>(slotName: string): Array<T> {
return getSlottedNodesList((this as unknown as Record<string, Array<SlotValue>>)[slotName]) as Array<T>;
}
/**
* 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<ShadowRoot | null> {
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<typeof UI5Element> {
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<Array<typeof UI5Element>> {
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<void>}
*/
- static async onDefine() {
+ static async onDefine(): Promise<void> {
return Promise.resolve();
}
/**
* Registers a UI5 Web Component in the browser window object
* @public
- * @returns {Promise<UI5Element>}
*/
- static async define() {
+ static async define(): Promise<typeof UI5Element> {
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<string, PropertyValue | Array<SlotValue>>;
/**
- *
* @class
* @public
*/
@@ -106,7 +105,7 @@ class UI5ElementMetadata {
* <b>Note:</b> 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<PropertyValue>).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.
* <b>Note:</b> 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<string> {
return Object.keys(this.getProperties());
}
/**
* Returns an array with the attributes of the UI5 Element (in kebab-case)
* @public
- * @returns {string[]}
*/
- getAttributesList() {
+ getAttributesList(): Array<string> {
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<string, Property> {
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<string, Slot> {
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<number | string>): 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<I18nBundle> }
*/
const getI18nBundle = async (packageName: string): Promise<I18nBundle> => {
if (customGetI18nBundle) {
@@ -92,7 +89,7 @@ const getI18nBundle = async (packageName: string): Promise<I18nBundle> => {
* @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.
* <b>Note:</b> If an ID is passed, it is expected to be part of the same <code>document</code> 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.
*
- * <h3>CSS Shadow Parts</h3>
- *
- * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
- * <br>
- * The <code>ui5-bar</code> exposes the following CSS Shadow Parts:
- * <ul>
- * <li>bar - Used to style the wrapper of the content of the component</li>
- * </ul>
- *
* <h3>Keyboard Handling</h3>
*
* <h4>Fast Navigation</h4>
@@ -51,12 +43,10 @@ import BarCss from "./generated/themes/Bar.css.js";
*
* <code>import "@ui5/webcomponents-fiori/dist/Bar.js";</code>
*
+ * @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 = {
* <code>import "@ui5/webcomponents-fiori/dist/DynamicSideContent";</code>
*
* @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 {
* <li><code>End</code></li>
* </ul>
*
- * @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 {
* <li><code>NeverShow</code></li>
* </ul>
*
- * @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 {
* <li><code>OnMinimumWidth</code></li>
* </ul>
*
- * @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";
* <code>import @ui5/webcomponents-fiori/dist/FilterItem.js";</code>
*
* @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 <code>values</code> 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
* <code>import @ui5/webcomponents-fiori/dist/FilterItemOption.js";</code>
*
* @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 <code>ui5-page</code> 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 <code>ui5-view-settings-dialog</code> 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 <code>ui5-filter-item</code> as values
+ * Interface for components that may be slotted inside <code>ui5-page</code> 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 <code>ui5-media-gallery</code> 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 <code>ui5-shellbar</code> 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 <code>ui5-side-navigation</code> 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 <code>ui5-view-settings-dialog</code> 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 <code>ui5-timeline</code> 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 <code>ui5-upload-collection</code> 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<string, any>;
* @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
* <li>product-switch</li>
* </ul>
*
- * <h3>CSS Shadow Parts</h3>
- *
- * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
- * <br>
- * The <code>ui5-shellbar</code> exposes the following CSS Shadow Parts:
- * <ul>
- * <li>root - Used to style the outermost wrapper of the <code>ui5-shellbar</code></li>
- * </ul>
- *
* <h3>Keyboard Handling</h3>
*
* <h4>Fast Navigation</h4>
@@ -159,12 +150,10 @@ const HANDLE_RESIZE_DEBOUNCE_RATE = 200; // ms
* <h3>ES6 Module Import</h3>
* <code>import "@ui5/webcomponents-fiori/dist/ShellBar";</code>
*
+ * @csspart root - Used to style the outermost wrapper of the <code>ui5-shellbar</code>
+ *
* @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.
* <b>Note:</b> You can prevent closing of overflow popover by calling <code>event.preventDefault()</code>.
*
- * @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
* <b>Note:</b> You can prevent closing of overflow popover by calling <code>event.preventDefault()</code>.
*
- * @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 <code>primaryTitle</code>.
* <br><br>
* <b>Note:</b> The <code>primaryTitle</code> 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 <code>secondaryTitle</code>.
* <br><br>
* <b>Note:</b> The <code>secondaryTitle</code> 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 <code>notificationsCount</code>,
* 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.
* <br><b>Note:</b> By default the co-pilot is displayed as static SVG.
* If you need an animated co-pilot, you can import the <code>"@ui5/webcomponents-fiori/dist/features/CoPilotAnimation.js"</code> 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 <code>searchField</code> slot.
* <br><b>Note:</b> 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:
* - <code>logoRole</code>: the accessibility role for the <code>logo</code>
- *
- * @type {object}
- * @name sap.ui.webc.fiori.ShellBar.prototype.accessibilityRoles
+ * @default {}
* @public
* @since 1.6.0
*/
@@ -372,8 +357,7 @@ class ShellBar extends UI5Element {
* - <code>profileButtonTitle</code>: defines the tooltip for the profile button
* - <code>logoTitle</code>: 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 {
* </ul>
* </li>
* </ul>
- * @type {object}
- * @name sap.ui.webc.fiori.ShellBar.prototype.accessibilityAttributes
+ * @default {}
* @public
* @since 1.10.0
*/
@@ -450,9 +433,6 @@ class ShellBar extends UI5Element {
* <b>Note:</b>
* 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 <code>size</code> attribute of <code>ui5-avatar</code> because
* it should have specific size by design in the context of <code>ui5-shellbar</code> 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 <code>ui5-shellbar</code>.
* For example, you can use <code>ui5-avatar</code> or <code>img</code> 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 {
* <b>Note:</b>
* 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 <code>ui5-input</code>, 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 <code>logo</code> 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<Button>(`*[data-ui5-stable="logo"]`);
+ get logoDomRef(): HTMLElement | null {
+ return this.shadowRoot!.querySelector<HTMLElement>(`*[data-ui5-stable="logo"]`);
}
/**
* Returns the <code>copilot</code> DOM ref.
- * @type {HTMLElement}
- * @name sap.ui.webc.fiori.ShellBar.prototype.copilotDomRef
* @public
- * @readonly
+ * @default null
* @since 1.0.0-rc.16
*/
- get copilotDomRef() {
- return this.shadowRoot!.querySelector<Button>(`*[data-ui5-stable="copilot"]`);
+ get copilotDomRef(): HTMLElement | null {
+ return this.shadowRoot!.querySelector<HTMLElement>(`*[data-ui5-stable="copilot"]`);
}
/**
* Returns the <code>notifications</code> icon DOM ref.
- * @type {HTMLElement}
- * @name sap.ui.webc.fiori.ShellBar.prototype.notificationsDomRef
* @public
- * @readonly
+ * @default null
* @since 1.0.0-rc.16
*/
- get notificationsDomRef() {
- return this.shadowRoot!.querySelector<Button>(`*[data-ui5-stable="notifications"]`);
+ get notificationsDomRef(): HTMLElement | null {
+ return this.shadowRoot!.querySelector<HTMLElement>(`*[data-ui5-stable="notifications"]`);
}
/**
* Returns the <code>overflow</code> icon DOM ref.
- * @type {HTMLElement}
- * @name sap.ui.webc.fiori.ShellBar.prototype.overflowDomRef
* @public
- * @readonly
+ * @default null
* @since 1.0.0-rc.16
*/
- get overflowDomRef() {
- return this.shadowRoot!.querySelector<Button>(`*[data-ui5-stable="overflow"]`);
+ get overflowDomRef(): HTMLElement | null {
+ return this.shadowRoot!.querySelector<HTMLElement>(`*[data-ui5-stable="overflow"]`);
}
/**
* Returns the <code>profile</code> icon DOM ref.
- * @type {HTMLElement}
- * @name sap.ui.webc.fiori.ShellBar.prototype.profileDomRef
* @public
- * @readonly
+ * @default null
* @since 1.0.0-rc.16
*/
- get profileDomRef() {
- return this.shadowRoot!.querySelector<Button>(`*[data-ui5-stable="profile"]`);
+ get profileDomRef(): HTMLElement | null {
+ return this.shadowRoot!.querySelector<HTMLElement>(`*[data-ui5-stable="profile"]`);
}
/**
* Returns the <code>product-switch</code> icon DOM ref.
- * @type {HTMLElement}
- * @name sap.ui.webc.fiori.ShellBar.prototype.productSwitchDomRef
* @public
- * @readonly
+ * @default null
* @since 1.0.0-rc.16
*/
- get productSwitchDomRef() {
- return this.shadowRoot!.querySelector<Button>(`*[data-ui5-stable="product-switch"]`);
+ get productSwitchDomRef(): HTMLElement | null {
+ return this.shadowRoot!.querySelector<HTMLElement>(`*[data-ui5-stable="product-switch"]`);
}
/**
* Returns all items that will be placed in the right of the bar as icons / dom elements.
- * @param {boolean} showOverflowButton Determines if overflow button should be visible (not overflowing)
+ * @param showOverflowButton Determines if overflow button should be visible (not overflowing)
*/
_getAllItems(showOverflowButton: boolean) {
let domOrder = -1;
diff --git a/packages/fiori/src/ShellBarItem.ts b/packages/fiori/src/ShellBarItem.ts
index 62ada4889dcf..a2ceba8c20e9 100644
--- a/packages/fiori/src/ShellBarItem.ts
+++ b/packages/fiori/src/ShellBarItem.ts
@@ -7,6 +7,12 @@ type ShellBarItemClickEventDetail = {
targetRef: HTMLElement,
};
+/**
+ * Interface for components that may be slotted inside <code>ui5-shellbar</code> as items
+ *
+ * @public
+ */
+
/**
* @class
* The <code>ui5-shellbar-item</code> represents a custom item, that
@@ -16,19 +22,14 @@ type ShellBarItemClickEventDetail = {
* <code>import "@ui5/webcomponents-fiori/dist/ShellBarItem";</code>
*
* @constructor
- * @author SAP SE
- * @alias sap.ui.webc.fiori.ShellBarItem
- * @extends sap.ui.webc.base.UI5Element
+ * @extends UI5Element
* @abstract
- * @tagname ui5-shellbar-item
- * @implements sap.ui.webc.fiori.IShellBarItem
* @public
*/
@customElement("ui5-shellbar-item")
/**
* Fired, when the item is pressed.
*
- * @event sap.ui.webc.fiori.ShellBarItem#click
* @allowPreventDefault
* @param {HTMLElement} targetRef DOM ref of the clicked element
* @public
@@ -42,9 +43,7 @@ type ShellBarItemClickEventDetail = {
class ShellBarItem extends UI5Element {
/**
* Defines the name of the item's icon.
- * @type {string}
- * @defaultvalue ""
- * @name sap.ui.webc.fiori.ShellBarItem.prototype.icon
+ * @default ""
* @public
*/
@property()
@@ -54,9 +53,7 @@ class ShellBarItem extends UI5Element {
* Defines the item text.
* <br><br>
* <b>Note:</b> The text is only displayed inside the overflow popover list view.
- * @type {string}
- * @defaultvalue ""
- * @name sap.ui.webc.fiori.ShellBarItem.prototype.text
+ * @default ""
* @public
*/
@property()
@@ -64,9 +61,7 @@ class ShellBarItem extends UI5Element {
/**
* Defines the count displayed in the top-right corner.
- * @type {string}
- * @defaultValue ""
- * @name sap.ui.webc.fiori.ShellBarItem.prototype.count
+ * @default ""
* @since 1.0.0-rc.6
* @public
*/
diff --git a/packages/fiori/src/SortItem.ts b/packages/fiori/src/SortItem.ts
index 2803ac0b5550..cc1ddeed103e 100644
--- a/packages/fiori/src/SortItem.ts
+++ b/packages/fiori/src/SortItem.ts
@@ -16,13 +16,9 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
* <code>import @ui5/webcomponents-fiori/dist/SortItem.js";</code>
*
* @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
* @public
*/
@customElement("ui5-sort-item")
@@ -30,9 +26,7 @@ class SortItem extends UI5Element {
/**
* Defines the text of the component.
*
- * @name sap.ui.webc.fiori.SortItem.prototype.text
- * @type {string}
- * @defaultvalue ""
+ * @default ""
* @public
*/
@property()
@@ -41,9 +35,7 @@ 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..0cb886381615 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,7 @@ class Timeline extends UI5Element {
* <li><code>Horizontal</code></li>
* </ul>
*
- * @type {sap.ui.webc.fiori.types.TimelineLayout}
- * @name sap.ui.webc.fiori.Timeline.prototype.layout
- * @defaultvalue "Vertical"
+ * @default "Vertical"
* @since 1.0.0-rc.15
* @public
*/
@@ -72,9 +66,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 +76,6 @@ class Timeline extends UI5Element {
/**
* Determines the content of the <code>ui5-timeline</code>.
*
- * @type {sap.ui.webc.fiori.ITimelineItem[]}
- * @name sap.ui.webc.fiori.Timeline.prototype.default
- * @slot items
* @public
*/
@slot({ type: HTMLElement, individualSlots: true, "default": true })
diff --git a/packages/fiori/src/TimelineItem.ts b/packages/fiori/src/TimelineItem.ts
index a07b3621d864..c3cc3c9e8880 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,12 +23,10 @@ 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
+ * @slot {Node[]} default - Determines the description of the <code>ui5-timeline-item</code>.
*/
@customElement({
tag: "ui5-timeline-item",
@@ -46,11 +45,10 @@ const LARGE_LINE_WIDTH = "LargeLineWidth";
* <b>Note:</b> The event will not be fired if the <code>name-clickable</code>
* attribute is not set.
*
- * @event sap.ui.webc.fiori.TimelineItem#name-click
* @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 <code>ui5-timeline-item</code>.
* SAP-icons font provides numerous options.
@@ -58,9 +56,7 @@ class TimelineItem extends UI5Element implements ITabbable {
*
* See all the available icons in the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html">Icon Explorer</ui5-link>.
*
- * @type {string}
- * @name sap.ui.webc.fiori.TimelineItem.prototype.icon
- * @defaultvalue ""
+ * @default ""
* @public
*/
@property()
@@ -69,9 +65,7 @@ class TimelineItem extends UI5Element implements ITabbable {
/**
* Defines the name of the item, displayed before the <code>title-text</code>.
*
- * @type {string}
- * @name sap.ui.webc.fiori.TimelineItem.prototype.name
- * @defaultvalue ""
+ * @default ""
* @public
*/
@property()
@@ -80,9 +74,7 @@ class TimelineItem extends UI5Element implements ITabbable {
/**
* Defines if the <code>name</code> is clickable.
*
- * @type {boolean}
- * @name sap.ui.webc.fiori.TimelineItem.prototype.nameClickable
- * @defaultvalue false
+ * @default false
* @public
*/
@property({ type: Boolean })
@@ -91,9 +83,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()
@@ -101,9 +91,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 +103,7 @@ class TimelineItem extends UI5Element implements ITabbable {
/**
* Defines the items orientation.
*
- * @type {sap.ui.webc.fiori.types.TimelineLayout}
- * @defaultvalue "Vertical"
+ * @default "Vertical"
* @private
*/
@property({ type: TimelineLayout, defaultValue: TimelineLayout.Vertical })
@@ -125,21 +112,11 @@ class TimelineItem extends UI5Element implements ITabbable {
/**
* Defines the indicator line width.
*
- * @type {string}
* @private
*/
@property()
_lineWidth!: string;
- /**
- * Determines the description of the <code>ui5-timeline-item</code>.
- *
- * @type {Node[]}
- * @name sap.ui.webc.fiori.TimelineItem.prototype.default
- * @slot
- * @public
- */
-
constructor() {
super();
}
diff --git a/packages/fiori/src/ViewSettingsDialog.ts b/packages/fiori/src/ViewSettingsDialog.ts
index 1055d6693f52..87297e16c728 100644
--- a/packages/fiori/src/ViewSettingsDialog.ts
+++ b/packages/fiori/src/ViewSettingsDialog.ts
@@ -100,11 +100,7 @@ type VSDInternalSettings = {
* <code>import "@ui5/webcomponents-fiori/dist/ViewSettingsDialog";</code>
*
* @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 <code>ui5-sort-item</code> text attribute.
* @param {HTMLElement} sortByItem The currently selected <code>ui5-sort-item</code>.
@@ -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 <code>ui5-sort-item</code> text attribute.
* @param {HTMLElement} sortByItem The currently selected <code>ui5-sort-item</code>.
@@ -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,13 @@ type VSDInternalSettings = {
* Fired before the component is opened. <b>This event does not bubble.</b>
*
* @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 })
@@ -191,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 })
@@ -200,7 +220,6 @@ class ViewSettingsDialog extends UI5Element {
/**
* Stores settings of the dialog before the initial open.
*
- * @type {object}
* @private
*/
@property({ type: Object })
@@ -209,7 +228,6 @@ class ViewSettingsDialog extends UI5Element {
/**
* Stores settings of the dialog after confirmation.
*
- * @type {object}
* @private
*/
@property({ type: Object })
@@ -218,7 +236,6 @@ class ViewSettingsDialog extends UI5Element {
/**
* Stores current settings of the dialog.
*
- * @type {object}
* @private
*/
@property({ type: Object })
@@ -246,9 +263,6 @@ class ViewSettingsDialog extends UI5Element {
* Defines the list of items against which the user could sort data.
* <b>Note:</b> If you want to use this slot, you need to import used item: <code>import "@ui5/webcomponents-fiori/dist/SortItem";</code>
*
- * @name sap.ui.webc.fiori.ViewSettingsDialog.prototype.sortItems
- * @type {sap.ui.webc.fiori.ISortItem[]}
- * @slot sortItems
* @public
*/
@slot()
@@ -258,9 +272,6 @@ class ViewSettingsDialog extends UI5Element {
* Defines the <code>filterItems</code> list.
* <b>Note:</b> If you want to use this slot, you need to import used item: <code>import "@ui5/webcomponents-fiori/dist/FilterItem";</code>
*
- * @type {sap.ui.webc.fiori.IFilterItem[]}
- * @name sap.ui.webc.fiori.ViewSettingsDialog.prototype.filterItems
- * @slot filterItems
* @public
*/
@slot()
@@ -499,10 +510,8 @@ class ViewSettingsDialog extends UI5Element {
/**
* Shows the dialog.
* @public
- * @method
- * @name sap.ui.webc.fiori.ViewSettingsDialog#show
*/
- show() {
+ show(): void {
if (!this._dialog) {
this._sortOrder = this._sortOrderListDomRef;
this._sortBy = this._sortByList;
@@ -638,7 +647,7 @@ class ViewSettingsDialog extends UI5Element {
/**
* If the dialog is closed by [ESC] key, do the same as if the <code>Cancel</code> button is pressed.
*
- * @param {event} evt
+ * @param evt
*/
_restoreConfirmedOnEscape(evt: CustomEvent) { // Dialog#before-close
if (evt.detail.escPressed) {
@@ -660,7 +669,7 @@ class ViewSettingsDialog extends UI5Element {
/**
* Sets current settings to ones passed as <code>settings</code> argument.
*
- * @param {Object} settings
+ * @param settings
*/
_restoreSettings(settings: VSDInternalSettings) {
this._currentSettings = JSON.parse(JSON.stringify(settings));
@@ -713,15 +722,10 @@ class ViewSettingsDialog extends UI5Element {
* ]
* }
* </pre>
- * @param {Object} settings - predefined settings.
- * @param {string} settings.sortOrder - sort order
- * @param {string} settings.sortBy - sort by
- * @param {Array.<Object>} settings.filters - filters
+ * @param settings - predefined settings.
* @public
- * @method
- * @name sap.ui.webc.fiori.ViewSettingsDialog#setConfirmedSettings
*/
- 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/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..185b67d3451f 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 <code>ui5-button</code> appears inactive and cannot be pressed.
*
- * <h3>CSS Shadow Parts</h3>
- *
- * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
- * <br>
- * The <code>ui5-button</code> exposes the following CSS Shadow Parts:
- * <ul>
- * <li>button - Used to style the native button element</li>
- * </ul>
- *
* <h3>ES6 Module Import</h3>
*
* <code>import "@ui5/webcomponents/dist/Button";</code>
*
+ * @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,15 @@ let activeButton: Button | null = null;
* <b>Note:</b> The event will not be fired if the <code>disabled</code>
* property is set to <code>true</code>.
*
- * @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"
+ * @default "Default"
* @public
*/
@property({ type: ButtonDesign, defaultValue: ButtonDesign.Default })
@@ -118,9 +105,7 @@ class Button extends UI5Element implements IFormElement {
* A disabled component can't be pressed or
* 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 })
@@ -134,9 +119,7 @@ class Button extends UI5Element implements IFormElement {
*
* See all the available icons within the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html">Icon Explorer</ui5-link>.
*
- * @type {string}
- * @name sap.ui.webc.main.Button.prototype.icon
- * @defaultvalue ""
+ * @default ""
* @public
*/
@property()
@@ -145,9 +128,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 })
@@ -160,9 +141,7 @@ class Button extends UI5Element implements IFormElement {
* <b>Note:</b> For the <code>submits</code> property to have effect, you must add the following import to your project:
* <code>import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";</code>
*
- * @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".
*/
@@ -173,9 +152,7 @@ class Button extends UI5Element implements IFormElement {
* Defines the tooltip of the component.
* <br>
* <b>Note:</b> 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
*/
@@ -185,9 +162,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
*/
@@ -197,9 +172,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
*/
@@ -230,10 +203,10 @@ class Button extends UI5Element implements IFormElement {
* </li>
* <li><code>controls</code>: Identifies the element (or elements) whose contents or presence are controlled by the button element. Accepts a string value.</li>
* </ul>
- * @type {object}
- * @name sap.ui.webc.main.Button.prototype.accessibilityAttributes
+ *
* @public
* @since 1.2.0
+ * @default {}
*/
@property({ type: Object })
accessibilityAttributes!: { expanded: "true" | "false", hasPopup: "Dialog" | "Grid" | "ListBox" | "Menu" | "Tree", controls: string};
@@ -245,9 +218,7 @@ class Button extends UI5Element implements IFormElement {
* <b>Note:</b> For the <code>type</code> property to have effect, you must add the following import to your project:
* <code>import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";</code>
*
- * @type {sap.ui.webc.main.types.ButtonType}
- * @name sap.ui.webc.main.Button.prototype.type
- * @defaultvalue "Button"
+ * @default "Button"
* @public
* @since 1.15.0
*/
@@ -296,6 +267,9 @@ class Button extends UI5Element implements IFormElement {
@property({ noAttribute: true })
buttonTitle?: string;
+ /**
+ * @private
+ */
@property({ type: Object })
_iconSettings!: object;
@@ -318,9 +292,6 @@ class Button extends UI5Element implements IFormElement {
* <br><br>
* <b>Note:</b> 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..13c0edd20c12 100644
--- a/packages/main/src/Calendar.ts
+++ b/packages/main/src/Calendar.ts
@@ -158,11 +158,7 @@ type CalendarSelectedDatesChangeEventDetail = {
* <code>import "@ui5/webcomponents/dist/Calendar";</code>
*
* @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 = {
* <b>Note:</b> If you call <code>preventDefault()</code> for this event, the component will not
* create instances of <code>ui5-date</code> 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,7 @@ class Calendar extends CalendarPart {
* <li><code>CalendarSelectionMode.Range</code> - enables selection of a date range.</li>
* <li><code>CalendarSelectionMode.Multiple</code> - enables selection of multiple dates.</li>
* </ul>
- * @type {sap.ui.webc.main.types.CalendarSelectionMode}
- * @name sap.ui.webc.main.Calendar.prototype.selectionMode
- * @defaultvalue "Single"
+ * @default "Single"
* @public
*/
@property({
@@ -226,9 +225,7 @@ class Calendar extends CalendarPart {
* <b>Note:</b> For calendars other than Gregorian,
* 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 +233,7 @@ class Calendar extends CalendarPart {
/**
* Which picker is currently visible to the user: day/month/year
+ * @private
*/
@property({ defaultValue: "day" })
_currentPicker!: string;
@@ -264,9 +262,6 @@ class Calendar extends CalendarPart {
* Defines the selected date or dates (depending on the <code>selectionMode</code> property)
* for this calendar as instances of <code>ui5-date</code>.
*
- * @type {sap.ui.webc.main.ICalendarDate[]}
- * @name sap.ui.webc.main.Calendar.prototype.default
- * @slot dates
* @public
*/
@slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true })
@@ -438,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";
}
@@ -527,7 +521,7 @@ class Calendar extends CalendarPart {
* Creates instances of <code>ui5-date</code> inside this <code>ui5-calendar</code> with values, equal to the provided UTC timestamps
* @protected
* @deprecated
- * @param { Array<number> } selectedDates Array of UTC timestamps
+ * @param selectedDates Array of UTC timestamps
*/
set selectedDates(selectedDates: Array<number>) {
this._setSelectedDates(selectedDates);
diff --git a/packages/main/src/CalendarDate.ts b/packages/main/src/CalendarDate.ts
index 9f7ff2e4dab6..2a6a7e75ccdc 100644
--- a/packages/main/src/CalendarDate.ts
+++ b/packages/main/src/CalendarDate.ts
@@ -10,12 +10,8 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
* The <code>ui5-date</code> component defines a calendar date to be used inside <code>ui5-calendar</code>
*
* @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
* @public
*/
@customElement("ui5-date")
@@ -24,8 +20,7 @@ class CalendarDate extends UI5Element {
* The date formatted according to the <code>formatPattern</code> property
* of the <code>ui5-calendar</code> that hosts the component.
*
- * @type {string}
- * @name sap.ui.webc.main.CalendarDate.prototype.value
+ * @default ""
* @public
*/
@property()
diff --git a/packages/main/src/CalendarHeader.ts b/packages/main/src/CalendarHeader.ts
index ead42669def6..1d5a4b924ae2 100644
--- a/packages/main/src/CalendarHeader.ts
+++ b/packages/main/src/CalendarHeader.ts
@@ -42,9 +42,9 @@ class CalendarHeader extends UI5Element {
/**
* Defines component's timestamp.
* <b>Note:</b> set by the Calendar component
- * @type {sap.ui.webc.base.types.Integer}
- * @name sap.ui.webc.main.CalendarHeader.prototype.timestamp
+ *
* @public
+ * @default undefined
*/
@property({ validator: Integer })
timestamp?: number;
@@ -52,9 +52,9 @@ class CalendarHeader extends UI5Element {
/**
* Defines component's primary calendar type.
* <b>Note:</b> set by the Calendar component
- * @type {sap.ui.webc.base.types.CalendarType}
- * @name sap.ui.webc.main.CalendarHeader.prototype.primaryCalendarType
+ *
* @public
+ * @default undefined
*/
@property({ type: CalendarType })
primaryCalendarType?: `${CalendarType}`;
@@ -62,10 +62,9 @@ class CalendarHeader extends UI5Element {
/**
* Defines component's secondary calendar type.
* <b>Note:</b> 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
* @public
*/
@property({ type: CalendarType })
@@ -73,7 +72,7 @@ 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 e69a212f9e72..222cb8da146a 100644
--- a/packages/main/src/CalendarPart.ts
+++ b/packages/main/src/CalendarPart.ts
@@ -13,16 +13,13 @@ 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.
* <b>Node:</b> Timestamp is 10-digit Integer representing the seconds (not milliseconds) since the Unix Epoch.
- * @type {sap.ui.webc.base.types.Integer}
* @protected
*/
@property({ validator: Integer })
diff --git a/packages/main/src/ColorPalette.ts b/packages/main/src/ColorPalette.ts
index 25594759b10f..44857dd3f080 100644
--- a/packages/main/src/ColorPalette.ts
+++ b/packages/main/src/ColorPalette.ts
@@ -57,12 +57,8 @@ type ColorPaletteItemClickEventDetail = {
* <code>import "@ui5/webcomponents/dist/ColorPalette.js";</code>
*
* @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,
},
@@ -96,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
*/
@@ -106,7 +103,6 @@ class ColorPalette extends UI5Element {
/**
* Defines whether the user can choose a custom color from a color picker
* <b>Note:</b> In order to use this property you need to import the following module: <code>"@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js"</code>
- * @type {boolean}
* @private
* @since 1.0.0-rc.15
*/
@@ -115,8 +111,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 +121,6 @@ class ColorPalette extends UI5Element {
/**
* Defines the default color of the color palette
* <b>Note:</b> The default color should be a part of the ColorPalette colors</code>
- * @type {sap.ui.webc.base.types.CSSColor}
* @private
* @since 1.0.0-rc.16
*/
@@ -135,7 +129,6 @@ class ColorPalette extends UI5Element {
/**
* Defines the selected color.
- * @type {sap.ui.webc.base.types.CSSColor}
* @private
*/
@property({ validator: CSSColor })
@@ -143,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 })
@@ -151,9 +143,6 @@ class ColorPalette extends UI5Element {
/**
* Defines the <code>ui5-color-palette-item</code> elements.
- * @type {sap.ui.webc.main.IColorPaletteItem[]}
- * @name sap.ui.webc.main.ColorPalette.prototype.default
- * @slot colors
* @public
*/
@slot({
diff --git a/packages/main/src/ColorPaletteItem.ts b/packages/main/src/ColorPaletteItem.ts
index f32a60d947a4..86c43e92837c 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 <code>ui5-color-palette-item</code> component represents a color in the the <code>ui5-color-palette</code>.
*
* @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,21 +37,21 @@ 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.
* <br><br>
* <b>Note:</b> The value should be a valid CSS color.
*
- * @type {sap.ui.webc.base.types.CSSColor}
- * @name sap.ui.webc.main.ColorPaletteItem.prototype.value
+ * @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 })
@@ -61,23 +59,22 @@ class ColorPaletteItem extends UI5Element implements ITabbable {
/**
* Defines the index of the item inside of the ColorPalette.
+ *
* @private
- * @type {Integer}
*/
@property({ validator: Integer })
index?: number;
/**
* 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 0af35a8bcdac..9895cf27a23c 100644
--- a/packages/main/src/ColorPalettePopover.ts
+++ b/packages/main/src/ColorPalettePopover.ts
@@ -48,10 +48,7 @@ type ColorPalettePopoverItemClickEventDetail = ColorPaletteItemClickEventDetail;
* <code>import @ui5/webcomponents/dist/ColorPalettePopover.js";</code>
*
* @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,
},
@@ -85,9 +84,8 @@ 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}
- * @name sap.ui.webc.main.ColorPalettePopover.prototype.showRecentColors
- * @defaultvalue false
+ *
+ * @default false
* @public
*/
@property({ type: Boolean })
@@ -96,9 +94,8 @@ class ColorPalettePopover extends UI5Element {
/**
* Defines whether the user can choose a custom color from a component.
* <b>Note:</b> In order to use this property you need to import the following module: <code>"@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js"</code>
- * @type {boolean}
- * @name sap.ui.webc.main.ColorPalettePopover.prototype.showMoreColors
- * @defaultvalue false
+ *
+ * @default false
* @public
*/
@property({ type: Boolean })
@@ -106,9 +103,8 @@ 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,8 @@ class ColorPalettePopover extends UI5Element {
/**
* Defines the default color of the component.
* <b>Note:</b> The default color should be a part of the ColorPalette colors</code>
- * @type {sap.ui.webc.base.types.CSSColor}
- * @name sap.ui.webc.main.ColorPalettePopover.prototype.defaultColor
+ *
+ * @default undefined
* @public
*/
@property({ validator: CSSColor })
@@ -126,9 +122,8 @@ 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
+ *
+ * @default []
* @public
*/
@slot({ "default": true, type: HTMLElement, individualSlots: true })
@@ -157,27 +152,25 @@ 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
- * @method
- * @name sap.ui.webc.main.ColorPalettePopover#showAt
* @since 1.1.1
*/
- showAt(opener: HTMLElement) {
+ showAt(opener: HTMLElement): void {
this._openPopover(opener);
}
/**
* Shows the ColorPalettePopover.
* <b>Note:</b> The method is deprecated and will be removed in future, use <code>showAt</code> instead.
- * @param {HTMLElement} opener the element that the popover is shown at
+ *
+ * @param 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 <code>showAt</code>.
*/
- 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);
}
@@ -208,9 +201,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 2c6e35ce13fb..060eca45100b 100644
--- a/packages/main/src/ColorPicker.ts
+++ b/packages/main/src/ColorPicker.ts
@@ -69,11 +69,8 @@ type ColorCoordinates = {
* <code>import "@ui5/webcomponents/dist/ColorPicker.js";</code>
*
* @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,8 @@ class ColorPicker extends UI5Element {
* Defines the currently selected color of the component.
* <br><br>
* <b>Note</b>: 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
+ *
+ * @default "rgba(255, 255, 255, 1)"
* @public
*/
@property({ validator: CSSColor, defaultValue: "rgba(255, 255, 255, 1)" })
@@ -110,7 +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 <code>color</code> property.
- * @type {string}
+ *
* @private
*/
@property({ defaultValue: "ffffff", noAttribute: true })
@@ -118,7 +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.
- * @type {string}
+ *
* @private
*/
@property({ type: Object })
@@ -126,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/CustomListItem.ts b/packages/main/src/CustomListItem.ts
index 7f4373de0206..f6c839f611bc 100644
--- a/packages/main/src/CustomListItem.ts
+++ b/packages/main/src/CustomListItem.ts
@@ -16,26 +16,17 @@ import customListItemCss from "./generated/themes/CustomListItem.css.js";
*
* The component accepts arbitrary HTML content to allow full customization.
*
- * <h3>CSS Shadow Parts</h3>
+ * @csspart native-li - Used to style the main li tag of the list item
+ * @csspart content - Used to style the content area of the list item
+ * @csspart detail-button - Used to style the button rendered when the list item is of type detail
+ * @csspart delete-button - Used to style the button rendered when the list item is in delete mode
+ * @csspart radio - Used to style the radio button rendered when the list item is in single selection mode
+ * @csspart checkbox - Used to style the checkbox rendered when the list item is in multiple selection mode
*
- * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
- * <br>
- * The <code>ui5-li-custom</code> exposes the following CSS Shadow Parts:
- * <ul>
- * <li>native-li - Used to style the main li tag of the list item</li>
- * <li>content - Used to style the content area of the list item</li>
- * <li>detail-button - Used to style the button rendered when the list item is of type detail</li>
- * <li>delete-button - Used to style the button rendered when the list item is in delete mode</li>
- * <li>radio - Used to style the radio button rendered when the list item is in single selection mode</li>
- * <li>checkbox - Used to style the checkbox rendered when the list item is in multiple selection mode</li>
- * </ul>
+ * @slot {Node[]} default - Defines the content of the component.
*
* @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.CustomListItem
- * @extends sap.ui.webc.main.ListItem
- * @tagname ui5-li-custom
- * @implements sap.ui.webc.main.IListItem
+ * @extends ListItem
* @public
*/
@customElement({
@@ -48,23 +39,13 @@ class CustomListItem extends ListItem {
* Defines the text alternative of the component.
* Note: If not provided a default text alternative will be set, if present.
*
- * @type {string}
- * @name sap.ui.webc.main.CustomListItem.prototype.accessibleName
- * @defaultvalue ""
+ * @default ""
* @public
* @since 1.0.0-rc.15
*/
@property()
accessibleName!: string;
- /**
- * Defines the content of the component.
- * @type {Node[]}
- * @name sap.ui.webc.main.CustomListItem.prototype.default
- * @slot
- * @public
- */
-
_onkeydown(e: KeyboardEvent) {
const isTab = isTabNext(e) || isTabPrevious(e);
diff --git a/packages/main/src/DateComponentBase.ts b/packages/main/src/DateComponentBase.ts
index 497ffd40642b..f238ed58d655 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,8 @@ 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
+ *
+ * @default undefined
* @public
*/
@property({ type: CalendarType })
@@ -46,10 +45,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
+ *
* @since 1.0.0-rc.16
- * @defaultvalue undefined
+ * @default undefined
* @public
*/
@property({ type: CalendarType })
@@ -58,9 +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()
@@ -71,9 +67,7 @@ class DateComponentBase extends UI5Element {
*
* <b>Note:</b> 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
*/
@@ -85,9 +79,7 @@ class DateComponentBase extends UI5Element {
*
* <b>Note:</b> 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
*/
@@ -100,7 +92,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 49ef0fbd65fc..1356c7099de1 100644
--- a/packages/main/src/DatePicker.ts
+++ b/packages/main/src/DatePicker.ts
@@ -146,10 +146,7 @@ type DatePickerInputEventDetail = {
* <code>import "@ui5/webcomponents/dist/DatePicker";</code>
*
* @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,
},
@@ -214,9 +221,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 +232,7 @@ 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"
+ * @default "None"
* @public
*/
@property({ type: ValueState, defaultValue: ValueState.None })
@@ -239,9 +242,7 @@ class DatePicker extends DateComponentBase implements IFormElement {
* Defines whether the component is required.
*
* @since 1.0.0-rc.9
- * @type {boolean}
- * @name sap.ui.webc.main.DatePicker.prototype.required
- * @defaultvalue false
+ * @default false
* @public
*/
@property({ type: Boolean })
@@ -250,9 +251,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 })
@@ -261,9 +260,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 })
@@ -277,9 +274,7 @@ class DatePicker extends DateComponentBase implements IFormElement {
* <b>Note:</b> 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}
- * @name sap.ui.webc.main.DatePicker.prototype.placeholder
- * @defaultvalue undefined
+ * @default undefined
* @public
*/
@property({ defaultValue: undefined })
@@ -297,9 +292,7 @@ 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}
- * @name sap.ui.webc.main.DatePicker.prototype.name
- * @defaultvalue ""
+ * @default ""
* @public
*/
@property()
@@ -312,9 +305,7 @@ class DatePicker extends DateComponentBase implements IFormElement {
* <b>Note:</b> For calendars other than Gregorian,
* 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
*/
@@ -324,9 +315,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
*/
@@ -336,9 +325,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
*/
@@ -364,11 +351,10 @@ class DatePicker extends DateComponentBase implements IFormElement {
* <br>
* <b>Note:</b> The <code>valueStateMessage</code> would be displayed,
* when the component is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state.
- * @type {HTMLElement}
- * @name sap.ui.webc.main.DatePicker.prototype.valueStateMessage
+ *
* @since 1.0.0-rc.7
- * @slot
* @public
+ * @default []
*/
@slot({ type: HTMLElement })
valueStateMessage!: Array<HTMLElement>;
@@ -376,8 +362,7 @@ class DatePicker extends DateComponentBase implements IFormElement {
/**
* The slot is used to render native <code>input</code> HTML element within Light DOM to enable form submit,
* when <code>name</code> property is set.
- * @type {HTMLElement[]}
- * @slot
+ *
* @private
*/
@slot({ type: HTMLElement })
@@ -424,10 +409,10 @@ class DatePicker extends DateComponentBase implements IFormElement {
/**
* Override in derivatives to change calendar selection mode
- * @returns {string}
+ *
* @protected
*/
- get _calendarSelectionMode() {
+ get _calendarSelectionMode(): string {
return "Single";
}
@@ -435,8 +420,8 @@ 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
- * @returns { number } the calendar timestamp
*/
get _calendarTimestamp(): number {
if (this.value && this.dateValueUTC && this._checkValueValidity(this.value)) {
@@ -450,8 +435,8 @@ 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
*/
get _calendarSelectedDates(): Array<string> {
if (this.value && this._checkValueValidity(this.value)) {
@@ -507,10 +492,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) {
@@ -579,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) {
@@ -593,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) {
@@ -601,9 +588,9 @@ 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 === "") {
@@ -621,11 +608,9 @@ 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 }
+ * @param value A value to be tested against the current date format
*/
isValid(value = ""): boolean {
if (value === "") {
@@ -637,11 +622,9 @@ 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 }
+ * @param value A value to be checked
*/
isInValidRange(value = ""): boolean {
if (value === "") {
@@ -659,6 +642,7 @@ class DatePicker extends DateComponentBase implements IFormElement {
/**
* The parser understands many formats, but we need one format
+ *
* @protected
*/
normalizeValue(value: string) {
@@ -721,6 +705,7 @@ class DatePicker extends DateComponentBase implements IFormElement {
/**
* Defines whether the dialog on mobile should have header
+ *
* @private
*/
get _shouldHideHeader() {
@@ -729,6 +714,7 @@ class DatePicker extends DateComponentBase implements IFormElement {
/**
* Defines whether the value help icon is hidden
+ *
* @private
*/
get _ariaHidden() {
@@ -763,7 +749,8 @@ class DatePicker extends DateComponentBase implements IFormElement {
/**
* The user selected a new date in the calendar
- * @param event
+ *
+ * @param e
* @protected
*/
onSelectedDatesChange(e: CustomEvent<CalendarSelectedDatesChangeEventDetail>) {
@@ -791,35 +778,31 @@ class DatePicker extends DateComponentBase implements IFormElement {
/**
* Formats a Java Script date object into a string representing a locale date
* according to the <code>formatPattern</code> 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
+ * @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);
}
/**
* Closes the picker.
+ *
* @public
- * @method
- * @name sap.ui.webc.main.DatePicker#closePicker
*/
- closePicker() {
+ closePicker(): void {
this.responsivePopover!.close();
}
/**
* Opens the picker.
+ *
* @public
- * @async
- * @method
- * @name sap.ui.webc.main.DatePicker#openPicker
- * @returns {Promise} Resolves when the picker is open
+ * @returns Resolves when the picker is open
*/
- async openPicker() {
+ async openPicker(): Promise<void> {
this._isPickerOpen = true;
this._calendarCurrentPicker = "day";
this.responsivePopover = await this._respPopover();
@@ -837,12 +820,11 @@ 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
+ * @returns true if the picker is open, false otherwise
*/
- isOpen() {
+ isOpen(): boolean {
return !!this._isPickerOpen;
}
@@ -850,9 +832,7 @@ class DatePicker extends DateComponentBase implements IFormElement {
* Currently selected date represented as a Local JavaScript Date instance.
*
* @public
- * @readonly
- * @name sap.ui.webc.main.DatePicker.prototype.dateValue
- * @type { Date }
+ * @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 9285453ed986..27d60f6d90f1 100644
--- a/packages/main/src/DateRangePicker.ts
+++ b/packages/main/src/DateRangePicker.ts
@@ -49,10 +49,7 @@ import type { CalendarSelectedDatesChangeEventDetail } from "./Calendar.js";
* </ul>
*
* @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
*/
@@ -65,9 +62,7 @@ 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}
- * @name sap.ui.webc.main.DateRangePicker.prototype.delimiter
- * @defaultvalue "-"
+ * @default "-"
* @public
*/
@property({ defaultValue: "-" })
@@ -91,24 +86,20 @@ class DateRangePicker extends DatePicker {
/**
* <b>Note:</b> The getter method is inherited and not supported. If called it will return an empty value.
*
- * @readonly
- * @type {Date}
* @public
- * @name sap.ui.webc.main.DateRangePicker.prototype.dateValue
+ * @default null
*/
- get dateValue() {
+ get dateValue(): null {
return null;
}
/**
* <b>Note:</b> The getter method is inherited and not supported. If called it will return an empty value.
*
- * @readonly
- * @type {Date}
* @public
- * @name sap.ui.webc.main.DateRangePicker.prototype.dateValueUTC
+ * @default null
*/
- get dateValueUTC() {
+ get dateValueUTC(): null {
return null;
}
@@ -157,24 +148,20 @@ class DateRangePicker extends DatePicker {
/**
* Returns the start date of the currently selected range as JavaScript Date instance.
*
- * @readonly
- * @type {Date}
* @public
- * @name sap.ui.webc.main.DateRangePicker.prototype.startDateValue
+ * @default null
*/
- get startDateValue() {
+ get startDateValue(): Date | null {
return CalendarDate.fromTimestamp(this._startDateTimestamp! * 1000).toLocalJSDate();
}
/**
* Returns the end date of the currently selected range as JavaScript Date instance.
*
- * @readonly
- * @type {Date}
* @public
- * @name sap.ui.webc.main.DateRangePicker.prototype.endDateValue
+ * @default null
*/
- 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 59ac6d674f8d..e547953a05ff 100644
--- a/packages/main/src/DateTimePicker.ts
+++ b/packages/main/src/DateTimePicker.ts
@@ -110,10 +110,7 @@ type PreviewValues = {
* <code>import "@ui5/webcomponents/dist/DateTimePicker.js";</code>
*
* @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
*/
@@ -144,8 +141,7 @@ class DateTimePicker extends DatePicker {
*
* <br><br>
* <b>Note:</b> The date view would be displayed by default.
- * @type {boolean}
- * @defaultvalue false
+ * @default false
* @private
*/
@property({ type: Boolean, noAttribute: true })
@@ -156,8 +152,7 @@ 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}
- * @defaultvalue false
+ * @default false
* @private
*/
@property({ type: Boolean })
@@ -210,9 +205,10 @@ class DateTimePicker extends DatePicker {
/**
* Opens the picker.
+ *
* @public
*/
- async openPicker() {
+ async openPicker(): Promise<void> {
await super.openPicker();
this._currentTimeSlider = "hours";
this._previewValues.timeSelectionValue = this.value || this.getFormat().format(new Date());
@@ -299,6 +295,7 @@ class DateTimePicker extends DatePicker {
/**
* Defines whether the dialog on mobile should have header
+ *
* @private
*/
get _shouldHideHeader() {
@@ -377,7 +374,8 @@ class DateTimePicker extends DatePicker {
/**
* Handles the date/time switch available in <code>phoneMode</code> 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 81d046b92d3e..dd8ce2f56fc6 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 <code>ui5-calendar</code> 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,18 @@ 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
+ *
+ * @default []
* @public
*/
@property({
@@ -141,9 +136,8 @@ class DayPicker extends CalendarPart implements ICalendarPicker {
* <li><code>CalendarSelectionMode.Range</code> - enables selection of a date range.</li>
* <li><code>CalendarSelectionMode.Multiple</code> - enables selection of multiple dates.</li>
* </ul>
- * @type {sap.ui.webc.main.types.CalendarSelectionMode}
- * @name sap.ui.webc.main.DayPicker.prototype.selectionMode
- * @defaultvalue "Single"
+ *
+ * @default "Single"
* @public
*/
@property({ type: CalendarSelectionMode, defaultValue: CalendarSelectionMode.Single })
@@ -156,9 +150,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker {
* <b>Note:<b> For calendars other than Gregorian,
* 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
*/
@@ -166,7 +158,6 @@ class DayPicker extends CalendarPart implements ICalendarPicker {
hideWeekNumbers!: boolean;
/**
- * @type {object}
* @private
*/
@property({
@@ -183,7 +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
- * @type {boolean}
+ *
* @private
*/
@property({ type: Boolean, noAttribute: true })
@@ -191,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()
@@ -208,7 +200,8 @@ class DayPicker extends CalendarPart implements ICalendarPicker {
/**
* Builds the "_weeks" object that represents the month.
- * @param { LocaleData }localeData
+ *
+ * @param localeData
* @private
*/
_buildWeeks(localeData: LocaleData) {
@@ -330,7 +323,8 @@ class DayPicker extends CalendarPart implements ICalendarPicker {
/**
* Builds the dayNames object (header of the month).
- * @param { LocaleData } localeData
+ *
+ * @param localeData
* @private
*/
_buildDayNames(localeData: LocaleData) {
@@ -373,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<string> } dayNames
- * @returns { boolean }
+ *
+ * @param dayNames
* @private
*/
namesTooLong(dayNames: Array<string>): boolean {
@@ -403,8 +397,8 @@ 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 {
@@ -418,8 +412,8 @@ 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 {
@@ -439,8 +433,9 @@ 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) {
@@ -475,6 +470,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker {
/**
* Selects/deselects the whole row (week).
+ *
* @private
*/
_selectWeek() {
@@ -524,7 +520,8 @@ 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) {
@@ -565,7 +562,8 @@ class DayPicker extends CalendarPart implements ICalendarPicker {
/**
* Set the hovered day as the "_secondTimestamp".
- * @param { MouseEvent } e
+ *
+ * @param e
* @private
*/
_onmouseover(e: MouseEvent) {
@@ -635,7 +633,8 @@ class DayPicker extends CalendarPart implements ICalendarPicker {
/**
* Click is the same as "Enter".
* <b>Note:</b> "Click+Shift" has the same effect as "Enter+Shift".
- * @param { MouseEvent } e
+ *
+ * @param e
* @private
*/
_onclick(e: MouseEvent) {
@@ -644,7 +643,8 @@ 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) {
@@ -663,8 +663,8 @@ 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());
@@ -672,8 +672,8 @@ 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());
@@ -681,6 +681,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker {
/**
* Called by the Calendar component.
+ *
* @protected
*/
_showPreviousPage() {
@@ -689,6 +690,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker {
/**
* Called by the Calendar component.
+ *
* @protected
*/
_showNextPage() {
@@ -697,9 +699,10 @@ 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) {
@@ -713,7 +716,8 @@ class DayPicker extends CalendarPart implements ICalendarPicker {
/**
* Sets the timestamp to an absolute value.
- * @param { number } value
+ *
+ * @param value
* @private
*/
_setTimestamp(value: number) {
@@ -725,6 +729,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/FileUploader.ts b/packages/main/src/FileUploader.ts
index b9b8e32bef43..ca22ff2dc773 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.
* <b>Note:</b> 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 },
},
})
@@ -98,9 +97,7 @@ class FileUploader extends UI5Element implements IFormElement {
* Comma-separated list of file types that the component should accept.
* <br><br>
* <b>Note:</b> Please make sure you are adding the <code>.</code> in front on the file type, e.g. <code>.png</code> in case you want to accept png's only.
- * @type {string}
- * @name sap.ui.webc.main.FileUploader.prototype.accept
- * @defaultvalue ""
+ * @default ""
* @public
*/
@property()
@@ -108,9 +105,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 })
@@ -121,9 +116,7 @@ class FileUploader extends UI5Element implements IFormElement {
* <br><br>
* <b>Note:</b> A disabled component is completely noninteractive.
*
- * @type {boolean}
- * @name sap.ui.webc.main.FileUploader.prototype.disabled
- * @defaultvalue false
+ * @default false
* @public
*/
@property({ type: Boolean })
@@ -131,9 +124,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 })
@@ -151,9 +142,7 @@ 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}
- * @name sap.ui.webc.main.FileUploader.prototype.name
- * @defaultvalue ""
+ * @default ""
* @public
*/
@property()
@@ -161,9 +150,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()
@@ -171,9 +158,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 +168,7 @@ 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"
+ * @default "None"
* @public
*/
@property({ type: ValueState, defaultValue: ValueState.None })
@@ -202,9 +185,6 @@ class FileUploader extends UI5Element implements IFormElement {
* <b>Note:</b> 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.<br>
* 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 })
@@ -218,10 +198,7 @@ class FileUploader extends UI5Element implements IFormElement {
* <br>
* <b>Note:</b> The <code>valueStateMessage</code> would be displayed,
* when the component is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state.
- * @type {HTMLElement[]}
- * @name sap.ui.webc.main.FileUploader.prototype.valueStateMessage
* @since 1.0.0-rc.9
- * @slot
* @public
*/
@slot()
@@ -230,8 +207,6 @@ class FileUploader extends UI5Element implements IFormElement {
/**
* The slot is used to render native <code>input</code> HTML element within Light DOM to enable form submit,
* when <code>name</code> property is set.
- * @type {HTMLElement[]}
- * @slot
* @private
*/
@slot()
@@ -294,12 +269,11 @@ class FileUploader extends UI5Element implements IFormElement {
/**
* FileList of all selected files.
- * @readonly
- * @type {FileList}
+ *
* @public
- * @name sap.ui.webc.main.FileUploader.prototype.files
+ * @default null
*/
- get files() {
+ get files(): FileList | null {
if (this._input) {
return this._input.files;
}
diff --git a/packages/main/src/GroupHeaderListItem.ts b/packages/main/src/GroupHeaderListItem.ts
index 77b1f390e7f5..bce29bd86759 100644
--- a/packages/main/src/GroupHeaderListItem.ts
+++ b/packages/main/src/GroupHeaderListItem.ts
@@ -16,12 +16,12 @@ import groupheaderListItemCss from "./generated/themes/GroupHeaderListItem.css.j
* @class
* The <code>ui5-li-groupheader</code> is a special list item, used only to separate other list items into logical groups.
*
+ * @slot {Node[]} default - Defines the text of the component.
+ * <br>
+ * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+ *
* @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.GroupHeaderListItem
- * @extends sap.ui.webc.main.ListItemBase
- * @tagname ui5-li-groupheader
- * @implements sap.ui.webc.main.IListItem
+ * @extends ListItemBase
* @public
*/
@customElement({
@@ -35,26 +35,13 @@ class GroupHeaderListItem extends ListItemBase {
* Defines the text alternative of the component.
* Note: If not provided a default text alternative will be set, if present.
*
- * @type {string}
- * @name sap.ui.webc.main.GroupHeaderListItem.prototype.accessibleName
- * @defaultvalue ""
+ * @default ""
* @public
* @since 1.0.0-rc.15
*/
@property()
accessibleName!: string;
- /**
- * Defines the text of the component.
- * <br>
- * <b>Note:</b> 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.GroupHeaderListItem.prototype.default
- * @slot
- * @public
- */
-
static i18nBundle: I18nBundle;
get groupItem() {
diff --git a/packages/main/src/Icon.ts b/packages/main/src/Icon.ts
index c8c6d342ff93..1d8cb6fc0064 100644
--- a/packages/main/src/Icon.ts
+++ b/packages/main/src/Icon.ts
@@ -10,6 +10,7 @@ import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
import IconTemplate from "./generated/templates/IconTemplate.lit.js";
import IconDesign from "./types/IconDesign.js";
+import type { IIcon } from "./Interfaces";
// Styles
import iconCss from "./generated/themes/Icon.css.js";
@@ -90,16 +91,6 @@ const PRESENTATION_ROLE = "presentation";
* <code><ui5-icon name="business-suite/ab-testing"></ui5-icon></code>
*
* <br><br>
- * <h3>CSS Shadow Parts</h3>
- *
- * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
- * <br>
- * The <code>ui5-icon</code> exposes the following CSS Shadow Parts:
- * <ul>
- * <li>root - Used to style the outermost wrapper of the <code>ui5-icon</code></li>
- * </ul>
- *
- * <br><br>
* <h3>Keyboard Handling</h3>
*
* <ul>
@@ -111,12 +102,11 @@ const PRESENTATION_ROLE = "presentation";
*
* <code>import "@ui5/webcomponents/dist/Icon.js";</code>
*
+ * @csspart root - Used to style the outermost wrapper of the <code>ui5-icon</code>.
+ *
* @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.Icon
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-icon
- * @implements sap.ui.webc.main.IIcon
+ * @extends UI5Element
+ * @implements {IIcon}
* @public
*/
@customElement({
@@ -135,13 +125,11 @@ const PRESENTATION_ROLE = "presentation";
* @since 1.0.0-rc.8
*/
@event("click")
-class Icon extends UI5Element {
+class Icon extends UI5Element implements IIcon {
/**
* Defines the component semantic design.
*
- * @type {sap.ui.webc.main.types.IconDesign}
- * @name sap.ui.webc.main.Icon.prototype.design
- * @defaultvalue "Default"
+ * @default "Default"
* @public
* @since 1.9.2
*/
@@ -150,9 +138,7 @@ class Icon extends UI5Element {
/**
* Defines if the icon is interactive (focusable and pressable)
- * @name sap.ui.webc.main.Icon.prototype.interactive
- * @type {boolean}
- * @defaultvalue false
+ * @default false
* @public
* @since 1.0.0-rc.8
*/
@@ -190,9 +176,7 @@ class Icon extends UI5Element {
* Example:
* <br>
* <code>name='business-suite/3d'</code>, <code>name='business-suite/1x2-grid-layout'</code>, <code>name='business-suite/4x4-grid-layout'</code>.
- * @name sap.ui.webc.main.Icon.prototype.name
- * @type {string}
- * @defaultvalue ""
+ * @default ""
* @public
*/
@property()
@@ -205,9 +189,7 @@ class Icon extends UI5Element {
* <b>Note:</b> Every icon should have a text alternative in order to
* calculate its accessible name.
*
- * @name sap.ui.webc.main.Icon.prototype.accessibleName
- * @type {string}
- * @defaultvalue ""
+ * @default ""
* @public
*/
@property()
@@ -218,9 +200,7 @@ class Icon extends UI5Element {
* <br><br>
* <b>Note:</b> The tooltip text should be provided via the <code>accessible-name</code> property.
*
- * @name sap.ui.webc.main.Icon.prototype.showTooltip
- * @type {boolean}
- * @defaultvalue false
+ * @default false
* @public
*/
@property({ type: Boolean })
@@ -228,9 +208,7 @@ class Icon extends UI5Element {
/**
* Defines the accessibility role of the component.
- * @name sap.ui.webc.main.Icon.prototype.accessibleRole
- * @type {string}
- * @defaultvalue ""
+ * @default ""
* @public
* @since 1.1.0
*/
diff --git a/packages/main/src/Interfaces.ts b/packages/main/src/Interfaces.ts
index 6240ff43baaf..cee5f4cd8711 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 <code>ui5-avatar-group</code>
*
@@ -19,11 +21,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";
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface IButton extends HTMLElement { }
/**
* Interface for components that may be slotted inside <code>ui5-card</code> as header
@@ -34,15 +35,6 @@ const IButton = "sap.ui.webc.main.IButton";
*/
const ICardHeader = "sap.ui.webc.main.ICardHeader";
-/**
- * Interface for components that may be used as dates inside <code>ui5-calendar</code>
- *
- * @name sap.ui.webc.main.ICalendarDate
- * @interface
- * @public
- */
-const ICalendarDate = "sap.ui.webc.main.ICalendarDate";
-
/**
* Interface for components that may be slotted inside a <code>ui5-combobox</code>
*
@@ -55,20 +47,17 @@ const IComboBoxItem = "sap.ui.webc.main.IComboBoxItem";
/**
* Interface for components that may be used inside a <code>ui5-color-palette</code> or <code>ui5-color-palette-popover</code>
*
- * @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
*
- * @name sap.ui.webc.main.IIcon
- * @interface
* @public
*/
-const IIcon = "sap.ui.webc.main.IIcon";
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface IIcon extends HTMLElement { }
/**
* Interface for components that represent an input, usable in numerous higher-order components
@@ -88,15 +77,6 @@ const IInput = "sap.ui.webc.main.IInput";
*/
const IInputSuggestionItem = "sap.ui.webc.main.IInputSuggestionItem";
-/**
- * Interface for components that may be slotted inside a <code>ui5-list</code> as items
- *
- * @name sap.ui.webc.main.IListItem
- * @interface
- * @public
- */
-const IListItem = "sap.ui.webc.main.IListItem";
-
/**
* Interface for components that may be slotted inside <code>ui5-menu</code> as items
*
@@ -116,22 +96,24 @@ const IMenuItem = "sap.ui.webc.main.IMenuItem";
const IMultiComboBoxItem = "sap.ui.webc.main.IMultiComboBoxItem";
/**
- * Interface for components that may be slotted inside <code>ui5-segmented-button</code> as items
+ * Interface for components that may be slotted inside <code>ui5-select</code> as options
*
- * @name sap.ui.webc.main.ISegmentedButtonItem
+ * @name sap.ui.webc.main.ISelectOption
* @interface
* @public
*/
-const ISegmentedButtonItem = "sap.ui.webc.main.ISegmentedButtonItem";
+const ISelectOption = "sap.ui.webc.main.ISelectOption";
/**
- * Interface for components that may be slotted inside <code>ui5-select</code> as options
+ * Interface for components that may be slotted inside <code>ui5-segmented-button</code> as items
*
- * @name sap.ui.webc.main.ISelectOption
- * @interface
* @public
*/
-const ISelectOption = "sap.ui.webc.main.ISelectOption";
+interface ISegmentedButtonItem extends UI5Element {
+ disabled: boolean,
+ pressed: boolean,
+ _tabIndex: string,
+}
/**
* Interface for components that may be slotted inside <code>ui5-select-menu</code> as options
@@ -196,36 +178,16 @@ const IToken = "sap.ui.webc.main.IToken";
*/
const ITreeItem = "sap.ui.webc.main.ITreeItem";
-/**
- * Interface for toolbar items for the purpose of <code>ui5-toolbar</code>
- *
- * @name sap.ui.webc.main.IToolbarItem
- * @interface
- * @public
- */
-const IToolbarItem = "sap.ui.webc.main.IToolbarItem";
-
-/**
- * Interface for toolbar select items for the purpose of <code>ui5-toolbar-select</code>
- *
- * @name sap.ui.webc.main.IToolbarSelectOption
- * @interface
- * @public
- */
-const IToolbarSelectOption = "sap.ui.webc.main.IToolbarSelectOption";
-
export {
IAvatar,
IBreadcrumbsItem,
IButton,
ICardHeader,
- ICalendarDate,
IColorPaletteItem,
IComboBoxItem,
IIcon,
IInput,
IInputSuggestionItem,
- IListItem,
IMenuItem,
IMultiComboBoxItem,
ISegmentedButtonItem,
@@ -237,6 +199,4 @@ export {
ITableRow,
IToken,
ITreeItem,
- IToolbarItem,
- IToolbarSelectOption,
};
diff --git a/packages/main/src/Link.ts b/packages/main/src/Link.ts
index be9a6f1335dc..0a4f17f8b68c 100644
--- a/packages/main/src/Link.ts
+++ b/packages/main/src/Link.ts
@@ -62,11 +62,9 @@ type LinkClickEventDetail = {
* <code>import "@ui5/webcomponents/dist/Link";</code>
*
* @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. <br><b>Note:</b> 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 },
},
})
@@ -101,9 +110,7 @@ class Link extends UI5Element implements ITabbable {
* <br><br>
* <b>Note:</b> 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 })
@@ -111,10 +118,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()
@@ -125,9 +130,7 @@ class Link extends UI5Element implements ITabbable {
* <br><br>
* <b>Note:</b> Standard hyperlink behavior is supported.
*
- * @type {string}
- * @name sap.ui.webc.main.Link.prototype.href
- * @defaultvalue ""
+ * @default ""
* @public
*/
@property()
@@ -148,9 +151,7 @@ class Link extends UI5Element implements ITabbable {
*
* <b>This property must only be used when the <code>href</code> property is set.</b>
*
- * @type {string}
- * @name sap.ui.webc.main.Link.prototype.target
- * @defaultvalue ""
+ * @default ""
* @public
*/
@property()
@@ -161,9 +162,7 @@ class Link extends UI5Element implements ITabbable {
* <br><br>
* <b>Note:</b> Avaialble options are <code>Default</code>, <code>Subtle</code>, and <code>Emphasized</code>.
*
- * @type {sap.ui.webc.main.types.LinkDesign}
- * @name sap.ui.webc.main.Link.prototype.design
- * @defaultvalue "Default"
+ * @default "Default"
* @public
*/
@property({ type: LinkDesign, defaultValue: LinkDesign.Default })
@@ -173,9 +172,7 @@ class Link extends UI5Element implements ITabbable {
* Defines how the text of a component will be displayed when there is not enough space.
* <br><b>Note:</b> 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"
+ * @default "None"
* @public
*/
@property({ type: WrappingType, defaultValue: WrappingType.None })
@@ -184,9 +181,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
*/
@@ -196,9 +191,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
*/
@@ -210,9 +203,7 @@ class Link extends UI5Element implements ITabbable {
*
* <b>Note:</b> 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
*/
@@ -242,10 +233,10 @@ class Link extends UI5Element implements ITabbable {
* </ul>
* </li>
* </ul>
- * @type {object}
- * @name sap.ui.webc.main.Link.prototype.accessibilityAttributes
+ *
* @public
* @since 1.1.0
+ * @default {}
*/
@property({ type: Object })
accessibilityAttributes!: { expanded: "true" | "false", hasPopup: "Dialog" | "Grid" | "ListBox" | "Menu" | "Tree" };
@@ -263,16 +254,6 @@ class Link extends UI5Element implements ITabbable {
@property({ type: Boolean })
focused!: boolean
- /**
- * Defines the text of the component.
- * <br><b>Note:</b> 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/List.ts b/packages/main/src/List.ts
index 0a37f3a35c6a..5bce9a44e50b 100644
--- a/packages/main/src/List.ts
+++ b/packages/main/src/List.ts
@@ -145,11 +145,7 @@ type ListItemClickEventDetail = {
* <code>import "@ui5/webcomponents/dist/GroupHeaderListItem.js";</code> (for <code>ui5-li-groupheader</code>)
*
* @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.List
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-list
- * @appenddocs sap.ui.webc.main.StandardListItem sap.ui.webc.main.CustomListItem sap.ui.webc.main.GroupHeaderListItem
+ * @extends UI5Element
* @public
*/
@customElement({
@@ -164,13 +160,15 @@ type ListItemClickEventDetail = {
* Fired when an item is activated, unless the item's <code>type</code> property
* is set to <code>Inactive</code>.
*
- * @event sap.ui.webc.main.List#item-click
* @allowPreventDefault
* @param {HTMLElement} item The clicked item.
* @public
*/
@event("item-click", {
detail: {
+ /**
+ * @public
+ */
item: { type: HTMLElement },
},
})
@@ -181,13 +179,15 @@ type ListItemClickEventDetail = {
* <b>Note:</b> This event is only applicable to list items that can be closed (such as notification list items),
* not to be confused with <code>item-delete</code>.
*
- * @event sap.ui.webc.main.List#item-close
* @param {HTMLElement} item the item about to be closed.
* @public
* @since 1.0.0-rc.8
*/
@event("item-close", {
detail: {
+ /**
+ * @public
+ */
item: { type: HTMLElement },
},
})
@@ -197,13 +197,15 @@ type ListItemClickEventDetail = {
* <br><br>
* <b>Note:</b> This event is only applicable to list items that can be toggled (such as notification group list items).
*
- * @event sap.ui.webc.main.List#item-toggle
* @param {HTMLElement} item the toggled item.
* @public
* @since 1.0.0-rc.8
*/
@event("item-toggle", {
detail: {
+ /**
+ * @public
+ */
item: { type: HTMLElement },
},
})
@@ -214,12 +216,14 @@ type ListItemClickEventDetail = {
* <b>Note:</b> A Delete button is displayed on each item,
* when the component <code>mode</code> property is set to <code>Delete</code>.
*
- * @event sap.ui.webc.main.List#item-delete
* @param {HTMLElement} item the deleted item.
* @public
*/
@event("item-delete", {
detail: {
+ /**
+ * @public
+ */
item: { type: HTMLElement },
},
})
@@ -228,7 +232,6 @@ type ListItemClickEventDetail = {
* Fired when selection is changed by user interaction
* in <code>SingleSelect</code>, <code>SingleSelectBegin</code>, <code>SingleSelectEnd</code> and <code>MultiSelect</code> modes.
*
- * @event sap.ui.webc.main.List#selection-change
* @allowPreventDefault
* @param {Array} selectedItems An array of the selected items.
* @param {Array} previouslySelectedItems An array of the previously selected items.
@@ -236,7 +239,13 @@ type ListItemClickEventDetail = {
*/
@event("selection-change", {
detail: {
+ /**
+ * @public
+ */
selectedItems: { type: Array },
+ /**
+ * @public
+ */
previouslySelectedItems: { type: Array },
targetItem: { type: HTMLElement }, // protected, holds the event target item
selectionComponentPressed: { type: Boolean }, // protected, indicates if the user used the selection components to change the selection
@@ -248,7 +257,6 @@ type ListItemClickEventDetail = {
* <br><br>
* <b>Note:</b> The event is fired when the <code>growing='Scroll'</code> property is enabled.
*
- * @event sap.ui.webc.main.List#load-more
* @public
* @since 1.0.0-rc.6
*/
@@ -268,9 +276,7 @@ class List extends UI5Element {
* <br><br>
* <b>Note:</b> If <code>header</code> is set this property is ignored.
*
- * @type {string}
- * @name sap.ui.webc.main.List.prototype.headerText
- * @defaultvalue ""
+ * @default ""
* @public
*/
@property()
@@ -279,9 +285,7 @@ class List extends UI5Element {
/**
* Defines the footer text.
*
- * @type {string}
- * @name sap.ui.webc.main.List.prototype.footerText
- * @defaultvalue ""
+ * @default ""
* @public
*/
@property()
@@ -290,9 +294,7 @@ class List extends UI5Element {
/**
* Determines whether the component is indented.
*
- * @type {boolean}
- * @name sap.ui.webc.main.List.prototype.indent
- * @defaultvalue false
+ * @default false
* @public
*/
@property({ type: Boolean })
@@ -301,9 +303,7 @@ class List extends UI5Element {
/**
* Defines the mode of the component.
*
- * @type {sap.ui.webc.main.types.ListMode}
- * @name sap.ui.webc.main.List.prototype.mode
- * @defaultvalue "None"
+ * @default "None"
* @public
*/
@property({ type: ListMode, defaultValue: ListMode.None })
@@ -312,9 +312,7 @@ class List extends UI5Element {
/**
* Defines the text that is displayed when the component contains no items.
*
- * @type {string}
- * @name sap.ui.webc.main.List.prototype.noDataText
- * @defaultvalue ""
+ * @default ""
* @public
*/
@property()
@@ -323,9 +321,7 @@ class List extends UI5Element {
/**
* Defines the item separator style that is used.
*
- * @type {sap.ui.webc.main.types.ListSeparators}
- * @name sap.ui.webc.main.List.prototype.separators
- * @defaultvalue "All"
+ * @default "All"
* @public
*/
@property({ type: ListSeparators, defaultValue: ListSeparators.All })
@@ -337,9 +333,7 @@ class List extends UI5Element {
* <br><br>
* <b>Restrictions:</b> <code>growing="Scroll"</code> is not supported for Internet Explorer,
* on IE the component will fallback to <code>growing="Button"</code>.
- * @type {sap.ui.webc.main.types.ListGrowingMode}
- * @name sap.ui.webc.main.List.prototype.growing
- * @defaultvalue "None"
+ * @default "None"
* @since 1.0.0-rc.13
* @public
*/
@@ -349,9 +343,7 @@ class List extends UI5Element {
/**
* Defines if the component would display a loading indicator over the list.
*
- * @type {boolean}
- * @name sap.ui.webc.main.List.prototype.busy
- * @defaultvalue false
+ * @default false
* @public
* @since 1.0.0-rc.6
*/
@@ -361,9 +353,7 @@ class List extends UI5Element {
/**
* Defines the delay in milliseconds, after which the busy indicator will show up for this component.
*
- * @type {sap.ui.webc.base.types.Integer}
- * @name sap.ui.webc.main.List.prototype.busyDelay
- * @defaultValue 1000
+ * @default 1000
* @public
*/
@property({ validator: Integer, defaultValue: 1000 })
@@ -372,9 +362,7 @@ class List extends UI5Element {
/**
* Defines the accessible name of the component.
*
- * @type {string}
- * @name sap.ui.webc.main.List.prototype.accessibleName
- * @defaultvalue ""
+ * @default ""
* @public
* @since 1.0.0-rc.15
*/
@@ -384,9 +372,7 @@ class List extends UI5Element {
/**
* Defines the IDs of the elements that label the input.
*
- * @type {string}
- * @name sap.ui.webc.main.List.prototype.accessibleNameRef
- * @defaultvalue ""
+ * @default ""
* @public
* @since 1.0.0-rc.15
*/
@@ -397,9 +383,7 @@ class List extends UI5Element {
* Defines the accessible role of the component.
* <br><br>
* @public
- * @type {string}
- * @name sap.ui.webc.main.List.prototype.accessibleRole
- * @defaultvalue "list"
+ * @default "list"
* @since 1.0.0-rc.15
*/
@property({ defaultValue: "list" })
@@ -408,9 +392,7 @@ class List extends UI5Element {
/**
* Defines the description for the accessible role of the component.
* @protected
- * @type {string}
- * @name sap.ui.webc.main.List.prototype.accessibleRoleDescription
- * @defaultvalue undefined
+ * @default undefined
* @since 1.10.0
*/
@property({ defaultValue: undefined, noAttribute: true })
@@ -435,9 +417,6 @@ class List extends UI5Element {
* <br><br>
* <b>Note:</b> Use <code>ui5-li</code>, <code>ui5-li-custom</code>, and <code>ui5-li-groupheader</code> for the intended design.
*
- * @type {sap.ui.webc.main.IListItem[]}
- * @name sap.ui.webc.main.List.prototype.default
- * @slot items
* @public
*/
@slot({ type: HTMLElement, "default": true })
@@ -449,9 +428,6 @@ class List extends UI5Element {
* <b>Note:</b> When <code>header</code> is set, the
* <code>headerText</code> property is ignored.
*
- * @type {HTMLElement[]}
- * @name sap.ui.webc.main.List.prototype.header
- * @slot
* @public
*/
@slot()
diff --git a/packages/main/src/ListItem.ts b/packages/main/src/ListItem.ts
index 07ab3c52b523..8e5d33128a79 100644
--- a/packages/main/src/ListItem.ts
+++ b/packages/main/src/ListItem.ts
@@ -16,6 +16,7 @@ import ListItemBase from "./ListItemBase.js";
import RadioButton from "./RadioButton.js";
import CheckBox from "./CheckBox.js";
import Button from "./Button.js";
+import { IButton } from "./Interfaces.js";
import {
DELETE,
ARIA_LABEL_LIST_ITEM_CHECKBOX,
@@ -76,9 +77,7 @@ type AccessibilityAttributes = {
* for the <code>StandardListItem</code> and <code>CustomListItem</code> classes.
*
* @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.ListItem
- * @extends sap.ui.webc.main.ListItemBase
+ * @extends ListItemBase
* @public
*/
@customElement({
@@ -93,7 +92,6 @@ type AccessibilityAttributes = {
/**
* Fired when the user clicks on the detail button when type is <code>Detail</code>.
*
- * @event sap.ui.webc.main.ListItem#detail-click
* @public
*/
@event("detail-click")
@@ -108,9 +106,7 @@ abstract class ListItem extends ListItemBase {
* <b>Note:</b> When set to <code>Active</code> or <code>Navigation</code>, the item will provide visual response upon press and hover,
* while with type <code>Inactive</code> and <code>Detail</code> - will not.
*
- * @type {sap.ui.webc.main.types.ListItemType}
- * @name sap.ui.webc.main.ListItem.prototype.type
- * @defaultvalue "Active"
+ * @default "Active"
* @public
*/
@property({ type: ListItemType, defaultValue: ListItemType.Active })
@@ -132,8 +128,7 @@ abstract class ListItem extends ListItemBase {
* </li>
* </ul>
*
- * @type {object}
- * @name sap.ui.webc.main.ListItem.prototype.accessibilityAttributes
+ * @default {}
* @public
* @since 1.15.0
*/
@@ -144,9 +139,8 @@ abstract class ListItem extends ListItemBase {
* The navigated state of the list item.
* If set to <code>true</code>, a navigation indicator is displayed at the end of the list item.
*
+ * @default false
* @public
- * @type {boolean}
- * @name sap.ui.webc.main.ListItem.prototype.navigated
* @since 1.10.0
*/
@property({ type: Boolean })
@@ -155,8 +149,6 @@ abstract class ListItem extends ListItemBase {
/**
* Indicates if the list item is active, e.g pressed down with the mouse or the keyboard keys.
*
- * @type {boolean}
- * @name sap.ui.webc.main.ListItem.prototype.active
* @private
*/
@property({ type: Boolean })
@@ -164,9 +156,7 @@ abstract class ListItem extends ListItemBase {
/**
* Defines the tooltip of the component.
- * @type {string}
- * @name sap.ui.webc.main.ListItem.prototype.title
- * @defaultvalue ""
+ * @default ""
* @private
* @since 1.0.0-rc.15
*/
@@ -176,8 +166,6 @@ abstract class ListItem extends ListItemBase {
/**
* Indicates if the list item is actionable, e.g has hover and pressed effects.
*
- * @type {boolean}
- * @name sap.ui.webc.main.ListItem.prototype.actionable
* @private
*/
@property({ type: Boolean })
@@ -187,9 +175,7 @@ abstract class ListItem extends ListItemBase {
* Used to define the role of the list item.
*
* @private
- * @type {string}
- * @name sap.ui.webc.main.ListItem.prototype.role
- * @defaultvalue "listitem"
+ * @default "listitem"
* @since 1.0.0-rc.9
*
*/
@@ -199,9 +185,7 @@ abstract class ListItem extends ListItemBase {
/**
* Defines the description for the accessible role of the component.
* @protected
- * @type {string}
- * @name sap.ui.webc.main.ListItem.prototype.accessibleRoleDescription
- * @defaultvalue undefined
+ * @default undefined
* @since 1.10.0
*/
@property({ defaultValue: undefined, noAttribute: true })
@@ -211,9 +195,7 @@ abstract class ListItem extends ListItemBase {
* Used to define the role of the list item.
*
* @private
- * @type {string}
- * @name sap.ui.webc.main.ListItem.prototype.accessibleRole
- * @defaultvalue ""
+ * @default ""
* @since 1.3.0
*
*/
@@ -225,8 +207,6 @@ abstract class ListItem extends ListItemBase {
/**
* Defines the availability and type of interactive popup element that can be triggered by the component on which the property is set.
- * @type {sap.ui.webc.main.types.HasPopup}
- * @name sap.ui.webc.main.ListItem.prototype.ariaHaspopup
* @since 1.10.0
* @private
*/
@@ -248,14 +228,11 @@ abstract class ListItem extends ListItemBase {
* <b>Note:</b> While the slot allows custom buttons, to match
* design guidelines, please use the <code>ui5-button</code> component.
* <b>Note:</b> When the slot is not present, a built-in delete button will be displayed.
- * @type {sap.ui.webc.main.IButton}
- * @name sap.ui.webc.main.ListItem.prototype.deleteButton
* @since 1.9.0
- * @slot
* @public
*/
@slot()
- deleteButton!: Array<HTMLElement>;
+ deleteButton!: Array<IButton>;
deactivateByKey: (e: KeyboardEvent) => void;
deactivate: () => void;
diff --git a/packages/main/src/ListItemBase.ts b/packages/main/src/ListItemBase.ts
index 08f3ebf677dd..f341b01c0693 100644
--- a/packages/main/src/ListItemBase.ts
+++ b/packages/main/src/ListItemBase.ts
@@ -18,9 +18,7 @@ import styles from "./generated/themes/ListItemBase.css.js";
* for the <code>ListItem</code> and <code>GroupHeaderListItem</code> classes.
*
* @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.ListItemBase
- * @extends sap.ui.webc.base.UI5Element
+ * @extends UI5Element
* @public
*/
@customElement({
@@ -34,9 +32,7 @@ import styles from "./generated/themes/ListItemBase.css.js";
class ListItemBase extends UI5Element implements ITabbable {
/**
* Defines the selected state of the <code>ListItem</code>.
- * @type {boolean}
- * @name sap.ui.webc.main.ListItemBase.prototype.selected
- * @defaultvalue false
+ * @default false
* @public
*/
@property({ type: Boolean })
@@ -56,9 +52,7 @@ class ListItemBase extends UI5Element implements ITabbable {
* Defines whether <code>ui5-li</code> is in disabled state.
* <br><br>
* <b>Note:</b> A disabled <code>ui5-li</code> is noninteractive.
- * @type {boolean}
- * @name sap.ui.webc.main.ListItemBase.prototype.disabled
- * @defaultvalue false
+ * @default false
* @protected
* @since 1.0.0-rc.12
*/
diff --git a/packages/main/src/Menu.ts b/packages/main/src/Menu.ts
index 373d4fd4f197..3a58840eb01c 100644
--- a/packages/main/src/Menu.ts
+++ b/packages/main/src/Menu.ts
@@ -87,11 +87,7 @@ type OpenerStandardListItem = StandardListItem & { associatedItem: MenuItem };
* <code>import "@ui5/webcomponents/dist/Menu.js";</code>
*
* @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.
* <b>Note:</b> 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 };
* <b>Note:</b> 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 <code>ui5-menu-item</code> that triggers opening of the sub-menu or undefined when fired upon root menu opening. <b>Note:</b> 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. <b>This event does not bubble.</b>
*
* @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. <b>This event does not bubble.</b>
*
* @public
- * @event sap.ui.webc.main.Menu#before-close
* @allowPreventDefault
* @param {boolean} escPressed Indicates that <code>ESC</code> 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. <b>This event does not bubble.</b>
*
* @public
- * @event sap.ui.webc.main.Menu#after-close
* @since 1.10.0
*/
@event("after-close")
@@ -185,9 +190,7 @@ 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 +199,8 @@ 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 +209,7 @@ 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 +219,7 @@ 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
+ * @default 1000
* @public
* @since 1.13.0
*/
@@ -232,10 +229,8 @@ 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 ""
+ * @default ""
* @since 1.10.0
*/
@property({ validator: DOMReference, defaultValue: "" })
@@ -243,8 +238,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 })
@@ -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,9 +291,6 @@ class Menu extends UI5Element {
* <br><br>
* <b>Note:</b> Use <code>ui5-menu-item</code> for the intended design.
*
- * @name sap.ui.webc.main.Menu.prototype.default
- * @type {sap.ui.webc.main.IMenuItem[]}
- * @slot items
* @public
*/
@slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true })
@@ -398,12 +386,11 @@ 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
- * @method
- * @name sap.ui.webc.main.Menu#showAt
*/
- async showAt(opener: HTMLElement) {
+ async showAt(opener: HTMLElement): Promise<void> {
if (isPhone()) {
this._prepareCurrentItems(this.items);
this._parentItemsStack = [];
@@ -424,11 +411,10 @@ class Menu extends UI5Element {
/**
* Closes the Menu.
+ *
* @public
- * @method
- * @name sap.ui.webc.main.Menu#close
*/
- 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 15e8110230dc..2dfcb2608564 100644
--- a/packages/main/src/MenuItem.ts
+++ b/packages/main/src/MenuItem.ts
@@ -24,12 +24,8 @@ import type Menu from "./Menu.js";
* <code>import "@ui5/webcomponents/dist/MenuItem.js";</code>
*
* @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
* @since 1.3.0
* @public
*/
@@ -38,9 +34,7 @@ class MenuItem extends UI5Element {
/**
* Defines the text of the tree item.
*
- * @name sap.ui.webc.main.MenuItem.prototype.text
- * @type {string}
- * @defaultValue ""
+ * @default ""
* @public
*/
@property()
@@ -50,8 +44,7 @@ class MenuItem extends UI5Element {
* Defines the <code>additionalText</code>, displayed in the end of the menu item.
* <b>Note:</b> The additional text would not be displayed if the item has a submenu.
*
- * @name sap.ui.webc.main.MenuItem.prototype.additionalText
- * @type {string}
+ * @default ""
* @public
* @since 1.8.0
*/
@@ -65,9 +58,7 @@ class MenuItem extends UI5Element {
<b>* Example:</b>
* See all the available icons in the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html">Icon Explorer</ui5-link>.
*
- * @name sap.ui.webc.main.MenuItem.prototype.icon
- * @type {string}
- * @defaultvalue ""
+ * @default ""
* @public
*/
@property()
@@ -76,9 +67,7 @@ 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 +78,7 @@ class MenuItem extends UI5Element {
* <br><br>
* <b>Note:</b> A disabled <code>ui5-menu-item</code> is noninteractive.
*
- * @name sap.ui.webc.main.MenuItem.prototype.disabled
- * @type {boolean}
- * @defaultvalue false
+ * @default false
* @public
*/
@property({ type: Boolean })
@@ -102,9 +89,7 @@ class MenuItem extends UI5Element {
*
* Note: If set to <code>true</code> a <code>ui5-busy-indicator</code> component will be displayed into the related one to the current <code>ui5-menu-item</code> sub-menu popover.
*
- * @name sap.ui.webc.main.MenuItem.prototype.busy
- * @type {boolean}
- * @defaultvalue false
+ * @default false
* @public
* @since 1.13.0
*/
@@ -114,9 +99,7 @@ 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 +109,7 @@ 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 +143,6 @@ 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
* @public
*/
@slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true })
diff --git a/packages/main/src/MonthPicker.ts b/packages/main/src/MonthPicker.ts
index 2a42340e7b26..573e3800aaad 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,23 +79,21 @@ 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 {
/**
* 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
+ * @default []
*/
@property({
validator: Integer,
@@ -243,7 +238,7 @@ class MonthPicker extends CalendarPart implements ICalendarPicker {
/**
* Sets the timestamp to an absolute value.
- * @param { number } value
+ * @param value
* @private
*/
_setTimestamp(value: number) {
@@ -254,8 +249,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) {
@@ -274,7 +269,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) {
@@ -292,7 +287,6 @@ class MonthPicker extends CalendarPart implements ICalendarPicker {
/**
* Called by the Calendar component.
* @protected
- * @returns { boolean }
*/
_hasPreviousPage(): boolean {
return this._calendarDate.getYear() !== this._minDate.getYear();
@@ -301,7 +295,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/RangeSlider.ts b/packages/main/src/RangeSlider.ts
index 5e480eb5a157..89fe74608ac7 100644
--- a/packages/main/src/RangeSlider.ts
+++ b/packages/main/src/RangeSlider.ts
@@ -58,17 +58,6 @@ type AffectedValue = "startValue" | "endValue";
* <h3>Responsive Behavior</h3>
* You can move the currently selected range by clicking on it and dragging it along the interval.
*
- * <h3>CSS Shadow Parts</h3>
- *
- * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
- * <br>
- * The <code>ui5-range-slider</code> exposes the following CSS Shadow Parts:
- * <ul>
- * <li>progress-container - Used to style the progress container(the horizontal bar which visually represents the range between the minimum and maximum value) of the <code>ui5-range-slider</code>.</li>
- * <li>progress-bar - Used to style the progress bar, which shows the progress of the <code>ui5-range-slider</code>.</li>
- * <li>handle - Used to style the handles of the <code>ui5-range-slider</code>.</li>
- * </ul>
- *
* <h3>Keyboard Handling</h3>
*
* <ul>
@@ -91,12 +80,12 @@ type AffectedValue = "startValue" | "endValue";
*
*
* @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.RangeSlider
- * @extends sap.ui.webc.main.SliderBase
- * @tagname ui5-range-slider
+ * @extends SliderBase
* @since 1.0.0-rc.11
* @public
+ * @csspart progress-container - Used to style the progress container, the horizontal bar that visually represents the range between the minimum and maximum values, of the <code>ui5-range-slider</code>.
+ * @csspart progress-bar - Used to style the progress bar, which shows the progress of the <code>ui5-range-slider</code>.
+ * @csspart handle - Used to style the handles of the <code>ui5-range-slider</code>.
*/
@customElement({
tag: "ui5-range-slider",
@@ -110,9 +99,7 @@ class RangeSlider extends SliderBase {
* Defines start point of a selection - position of a first handle on the slider.
* <br><br>
*
- * @type {sap.ui.webc.base.types.Float}
- * @name sap.ui.webc.main.RangeSlider.prototype.startValue
- * @defaultvalue 0
+ * @default 0
* @formEvents change input
* @formProperty
* @public
@@ -124,9 +111,7 @@ class RangeSlider extends SliderBase {
* Defines end point of a selection - position of a second handle on the slider.
* <br><br>
*
- * @type {sap.ui.webc.base.types.Float}
- * @name sap.ui.webc.main.RangeSlider.prototype.endValue
- * @defaultvalue 100
+ * @default 100
* @formEvents change input
* @formProperty
* @public
@@ -609,7 +594,7 @@ class RangeSlider extends SliderBase {
* - mouse press position - cursor coordinates relative to the start/end handles
* - selected inner element via a keyboard navigation
*
- * @param {string} affectedValue The value that will get modified by the interaction
+ * @param affectedValue The value that will get modified by the interaction
* @private
*/
_setAffectedValue(affectedValue: AffectedValue | undefined) {
@@ -624,7 +609,7 @@ class RangeSlider extends SliderBase {
/**
* Flag if press action is made on the currently selected range of values
*
- * @param {boolean} isPressInCurrentRange Did the current press action occur in the current range (between the two handles)
+ * @param isPressInCurrentRange Did the current press action occur in the current range (between the two handles)
* @private
*/
_setIsPressInCurrentRange(isPressInCurrentRange: boolean) {
@@ -679,8 +664,8 @@ class RangeSlider extends SliderBase {
* Uses the change of the position of the start handle and adds the initially
* selected range to it, to determine the whole range offset.
*
- * @param {Integer} currentPageXPos The current horizontal position of the cursor/touch
- * @param {Integer} initialStartHandlePageXPos The initial horizontal position of the start handle
+ * @param currentPageXPos The current horizontal position of the cursor/touch
+ * @param initialStartHandlePageXPos The initial horizontal position of the start handle
*
* @private
*/
@@ -710,8 +695,8 @@ class RangeSlider extends SliderBase {
* Computes the new value based on the difference of the current cursor location from the
* start of the interaction.
*
- * @param {Integer} currentPageXPos The current horizontal position of the cursor/touch
- * @param {Integer} initialStartHandlePageXPos The initial horizontal position of the start handle
+ * @param currentPageXPos The current horizontal position of the cursor/touch
+ * @param initialStartHandlePageXPos The initial horizontal position of the start handle
*
* @private
*/
diff --git a/packages/main/src/RatingIndicator.ts b/packages/main/src/RatingIndicator.ts
index 424b8911a9bd..8b61baac5039 100644
--- a/packages/main/src/RatingIndicator.ts
+++ b/packages/main/src/RatingIndicator.ts
@@ -72,10 +72,7 @@ type Star = {
* <code>import "@ui5/webcomponents/dist/RatingIndicator.js";</code>
*
* @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.RatingIndicator
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-rating-indicator
+ * @extends UI5Element
* @public
* @since 1.0.0-rc.8
*/
@@ -91,7 +88,6 @@ type Star = {
/**
* The event is fired when the value changes.
*
- * @event sap.ui.webc.main.RatingIndicator#change
* @public
*/
@event("change")
@@ -106,9 +102,7 @@ class RatingIndicator extends UI5Element {
* <li>1.3 - 1.7 -> 1.5</li>
* <li>1.8 - 1.9 -> 2</li>
* <ul>
- * @type {sap.ui.webc.base.types.Float}
- * @name sap.ui.webc.main.RatingIndicator.prototype.value
- * @defaultvalue 0
+ * @default 0
* @public
*/
@property({ validator: Float, defaultValue: 0 })
@@ -116,9 +110,8 @@ class RatingIndicator extends UI5Element {
/**
* The number of displayed rating symbols.
- * @type {sap.ui.webc.base.types.Integer}
- * @name sap.ui.webc.main.RatingIndicator.prototype.max
- * @defaultvalue 5
+ *
+ * @default 5
* @public
* @since 1.0.0-rc.15
*/
@@ -130,9 +123,8 @@ class RatingIndicator extends UI5Element {
*
* <br><br>
* <b>Note:</b> A disabled component is completely noninteractive.
- * @type {boolean}
- * @name sap.ui.webc.main.RatingIndicator.prototype.disabled
- * @defaultvalue false
+ *
+ * @default false
* @public
*/
@property({ type: Boolean })
@@ -144,9 +136,7 @@ class RatingIndicator extends UI5Element {
* <b>Note:</b> A read-only component is not editable,
* but still provides visual feedback upon user interaction.
*
- * @type {boolean}
- * @name sap.ui.webc.main.RatingIndicator.prototype.readonly
- * @defaultvalue false
+ * @default false
* @public
*/
@property({ type: Boolean })
@@ -155,8 +145,7 @@ class RatingIndicator extends UI5Element {
/**
* Defines the accessible ARIA name of the component.
*
- * @type {string}
- * @name sap.ui.webc.main.RatingIndicator.prototype.accessibleName
+ * @default ""
* @public
* @since 1.0.0-rc.15
*/
@@ -166,9 +155,7 @@ class RatingIndicator extends UI5Element {
/**
* Receives id(or many ids) of the elements that label the component.
*
- * @type {string}
- * @name sap.ui.webc.main.RatingIndicator.prototype.accessibleNameRef
- * @defaultvalue ""
+ * @default ""
* @public
* @since 1.15.0
*/
@@ -178,9 +165,7 @@ class RatingIndicator extends UI5Element {
/**
* Defines whether the component is required.
*
- * @type {boolean}
- * @name sap.ui.webc.main.RatingIndicator.prototype.required
- * @defaultvalue false
+ * @default false
* @public
* @since 1.15.0
*/
@@ -190,9 +175,7 @@ class RatingIndicator extends UI5Element {
/**
* Defines the tooltip of the component.
*
- * @type {string}
- * @name sap.ui.webc.main.RatingIndicator.prototype.tooltip
- * @defaultvalue ""
+ * @default ""
* @public
* @since 1.19.0
*/
diff --git a/packages/main/src/SegmentedButton.ts b/packages/main/src/SegmentedButton.ts
index e53b798c620a..e4b9de3c3aa1 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<SegmentedButtonItem>,
+ selectedItem: ISegmentedButtonItem,
+ selectedItems: Array<ISegmentedButtonItem>,
}
/**
@@ -43,12 +44,8 @@ type SegmentedButtonSelectionChangeEventDetail = {
* <code>import "@ui5/webcomponents/dist/SegmentedButton";</code>
*
* @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 +59,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 <code>selectedItems</code> 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 },
},
})
@@ -78,10 +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,8 @@ class SegmentedButton extends UI5Element {
* <li><code>MultiSelect</code></li>
* </ul>
*
- * @type {sap.ui.webc.main.types.SegmentedButtonMode}
- * @defaultvalue "SingleSelect"
+ * @default "SingleSelect"
* @public
- * @name sap.ui.webc.main.SegmentedButton.prototype.mode
* @since 1.14.0
*/
@property({ type: SegmentedButtonMode, defaultValue: SegmentedButtonMode.SingleSelect })
@@ -113,13 +111,10 @@ class SegmentedButton extends UI5Element {
* <b>Note:</b> Multiple items are allowed.
* <br><br>
* <b>Note:</b> Use the <code>ui5-segmented-button-item</code> for the intended design.
- * @type {sap.ui.webc.main.ISegmentedButtonItem[]}
- * @name sap.ui.webc.main.SegmentedButton.prototype.default
- * @slot items
* @public
*/
@slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true })
- items!: Array<SegmentedButtonItem>;
+ items!: Array<ISegmentedButtonItem>;
static i18nBundle: I18nBundle;
@@ -127,7 +122,7 @@ class SegmentedButton extends UI5Element {
hasPreviouslyFocusedItem: boolean;
- _selectedItem?: SegmentedButtonItem;
+ _selectedItem?: ISegmentedButtonItem;
static async onDefine() {
SegmentedButton.i18nBundle = await getI18nBundle("@ui5/webcomponents");
@@ -204,7 +199,7 @@ class SegmentedButton extends UI5Element {
return this;
}
- _applySingleSelection(item: SegmentedButtonItem) {
+ _applySingleSelection(item: ISegmentedButtonItem) {
this.items.forEach(currentItem => {
currentItem.pressed = false;
});
@@ -261,26 +256,22 @@ class SegmentedButton extends UI5Element {
/**
* Currently selected item.
*
- * @readonly
- * @type {sap.ui.webc.main.ISegmentedButtonItem}
- * @name sap.ui.webc.main.SegmentedButton.prototype.selectedItem
* @deprecated since 1.14.0. This method will be removed in the next major release.
* Please use the <code>selectedItems</code> property instead.
* @public
+ * @default undefined
*/
- get selectedItem() {
+ get selectedItem(): ISegmentedButtonItem | undefined {
return this._selectedItem;
}
/**
* Returns an array of the currently selected items.
- * @readonly
- * @name sap.ui.webc.main.SegmentedButton.prototype.selectedItems
- * @type {sap.ui.webc.main.ISegmentedButtonItem[]}
* @since 1.14.0
* @public
+ * @default []
*/
- get selectedItems(): Array<SegmentedButtonItem> {
+ get selectedItems(): Array<ISegmentedButtonItem> {
return this.items.filter(item => item.pressed);
}
diff --git a/packages/main/src/SegmentedButtonItem.ts b/packages/main/src/SegmentedButtonItem.ts
index 8ec807b70019..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";
@@ -27,12 +28,9 @@ import { SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defa
* <code>import "@ui5/webcomponents/dist/SegmentedButtonItem";</code>
*
* @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.SegmentedButtonItem
- * @extends sap.ui.webc.main.ToggleButton
+ * @extends ToggleButton
+ * @implements { ISelectedButtonItem }
* @abstract
- * @tagname ui5-segmented-button-item
- * @implements sap.ui.webc.main.ISegmentedButtonItem
* @public
*/
@customElement({
@@ -40,13 +38,11 @@ import { SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defa
template: SegmentedButtonItemTemplate,
dependencies: [Icon],
})
-class SegmentedButtonItem extends ToggleButton {
+class SegmentedButtonItem extends ToggleButton implements ISegmentedButtonItem {
/**
* <b>Note:</b> 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
+ * @default "Default"
* @public
*/
@property({ type: ButtonDesign, defaultValue: ButtonDesign.Default })
@@ -55,9 +51,7 @@ class SegmentedButtonItem extends ToggleButton {
/**
* <b>Note:</b> 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 })
@@ -66,9 +60,7 @@ class SegmentedButtonItem extends ToggleButton {
/**
* <b>Note:</b> 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 +69,7 @@ class SegmentedButtonItem extends ToggleButton {
/**
* Defines the index of the item inside of the SegmentedButton.
*
- * @type {sap.ui.webc.base.types.Integer}
- * @defaultvalue 0
+ * @default 0
* @private
*/
@property({ validator: Integer, defaultValue: 0 })
@@ -87,8 +78,7 @@ class SegmentedButtonItem extends ToggleButton {
/**
* Defines how many items are inside of the SegmentedButton.
*
- * @type {sap.ui.webc.base.types.Integer}
- * @defaultvalue 0
+ * @default 0
* @private
*/
@property({ validator: Integer, defaultValue: 0 })
diff --git a/packages/main/src/Slider.ts b/packages/main/src/Slider.ts
index d021b1893d9e..d2ab623ba0e4 100644
--- a/packages/main/src/Slider.ts
+++ b/packages/main/src/Slider.ts
@@ -46,17 +46,6 @@ import {
* <li>Click/tap on the range bar to move the handle to that location.</li>
* </ul>
*
- * <h3>CSS Shadow Parts</h3>
- *
- * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
- * <br>
- * The <code>ui5-slider</code> exposes the following CSS Shadow Parts:
- * <ul>
- * <li>progress-container - Used to style the progress container(the horizontal bar which visually represents the range between the minimum and maximum value) of the <code>ui5-slider</code>.</li>
- * <li>progress-bar - Used to style the progress bar, which shows the progress of the <code>ui5-slider</code>.</li>
- * <li>handle - Used to style the handle of the <code>ui5-slider</code>.</li>
- * </ul>
- *
* <h3>Keyboard Handling</h3>
*
* <ul>
@@ -78,12 +67,12 @@ import {
* <code>import "@ui5/webcomponents/dist/Slider";</code>
*
* @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.Slider
- * @extends sap.ui.webc.main.SliderBase
- * @tagname ui5-slider
+ * @extends SliderBase
* @since 1.0.0-rc.11
* @public
+ * @csspart progress-container - Used to style the progress container, the horizontal bar that visually represents the range between the minimum and maximum values, of the <code>ui5-slider</code>.
+ * @csspart progress-bar - Used to style the progress bar, which shows the progress of the <code>ui5-slider</code>.
+ * @csspart handle - Used to style the handle of the <code>ui5-slider</code>.
*/
@customElement({
tag: "ui5-slider",
@@ -95,9 +84,7 @@ class Slider extends SliderBase {
/**
* Current value of the slider
*
- * @type {sap.ui.webc.base.types.Float}
- * @name sap.ui.webc.main.Slider.prototype.value
- * @defaultvalue 0
+ * @default 0
* @formEvents change input
* @formProperty
* @public
diff --git a/packages/main/src/SliderBase.ts b/packages/main/src/SliderBase.ts
index ea958d41f9d6..b7b0711e3833 100644
--- a/packages/main/src/SliderBase.ts
+++ b/packages/main/src/SliderBase.ts
@@ -1,5 +1,4 @@
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
import property from "@ui5/webcomponents-base/dist/decorators/property.js";
import event from "@ui5/webcomponents-base/dist/decorators/event.js";
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
@@ -23,26 +22,9 @@ type StateStorage = {
type DirectionStart = "left" | "right";
-/**
- * @class
- *
- * <h3 class="comment-api-title">Overview</h3>
- *
- *
- * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.SliderBase
- * @extends sap.ui.webc.base.UI5Element
- * @public
- */
-@customElement({
- renderer: litRender,
- styles: sliderBaseStyles,
-})
/**
* Fired when the value changes and the user has finished interacting with the slider.
*
- * @event sap.ui.webc.main.SliderBase#change
* @public
*/
@event("change")
@@ -50,17 +32,24 @@ type DirectionStart = "left" | "right";
/**
* Fired when the value changes due to user interaction that is not yet finished - during mouse/touch dragging.
*
- * @event sap.ui.webc.main.SliderBase#input
* @public
*/
@event("input")
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
abstract class SliderBase extends UI5Element {
/**
* Defines the minimum value of the slider.
*
- * @type {sap.ui.webc.base.types.Float}
- * @name sap.ui.webc.main.SliderBase.prototype.min
- * @defaultvalue 0
+ * @default 0
* @public
*/
@property({ validator: Float, defaultValue: 0 })
@@ -69,9 +58,7 @@ abstract class SliderBase extends UI5Element {
/**
* Defines the maximum value of the slider.
*
- * @type {sap.ui.webc.base.types.Float}
- * @name sap.ui.webc.main.SliderBase.prototype.max
- * @defaultvalue 100
+ * @default 100
* @public
*/
@property({ validator: Float, defaultValue: 100 })
@@ -82,9 +69,7 @@ abstract class SliderBase extends UI5Element {
* <br><br>
* <b>Note:</b> If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.
*
- * @type {sap.ui.webc.base.types.Integer}
- * @name sap.ui.webc.main.SliderBase.prototype.step
- * @defaultvalue 1
+ * @default 1
* @public
*/
@property({ validator: Float, defaultValue: 1 })
@@ -97,9 +82,7 @@ abstract class SliderBase extends UI5Element {
* Example - if the step value is set to 2 and the label interval is also specified to 2 - then every second
* tickmark will be labelled, which means every 4th value number.
*
- * @type {sap.ui.webc.base.types.Integer}
- * @name sap.ui.webc.main.SliderBase.prototype.labelInterval
- * @defaultvalue 0
+ * @default 0
* @public
*/
@property({ validator: Integer, defaultValue: 0 })
@@ -110,9 +93,7 @@ abstract class SliderBase extends UI5Element {
* <br><br>
* <b>Note:</b> The step must be a positive number.
*
- * @type {boolean}
- * @name sap.ui.webc.main.SliderBase.prototype.showTickmarks
- * @defaultvalue false
+ * @default false
* @public
*/
@property({ type: Boolean })
@@ -121,9 +102,7 @@ abstract class SliderBase extends UI5Element {
/**
* Enables handle tooltip displaying the current value.
*
- * @type {boolean}
- * @name sap.ui.webc.main.SliderBase.prototype.showTooltip
- * @defaultvalue false
+ * @default false
* @public
*/
@property({ type: Boolean })
@@ -132,9 +111,7 @@ abstract class SliderBase extends UI5Element {
/**
* Defines whether the slider is in disabled state.
*
- * @type {boolean}
- * @name sap.ui.webc.main.SliderBase.prototype.disabled
- * @defaultvalue false
+ * @default false
* @public
*/
@property({ type: Boolean })
@@ -143,9 +120,7 @@ abstract class SliderBase extends UI5Element {
/**
* Defines the accessible ARIA name of the component.
*
- * @type {string}
- * @name sap.ui.webc.main.SliderBase.prototype.accessibleName
- * @defaultvalue: ""
+ * @default ""
* @public
* @since 1.4.0
*/
@@ -249,6 +224,14 @@ abstract class SliderBase extends UI5Element {
};
}
+ static get render() {
+ return litRender;
+ }
+
+ static get styles() {
+ return sliderBaseStyles;
+ }
+
get classes() {
return {
root: {
diff --git a/packages/main/src/SplitButton.ts b/packages/main/src/SplitButton.ts
index 4d2e89622258..7f7638ab88d6 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";
* <code>import "@ui5/webcomponents/dist/SplitButton.js";</code>
*
* @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")
@@ -113,9 +108,7 @@ class SplitButton extends UI5Element {
*
* See all the available icons in the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html">Icon Explorer</ui5-link>.
*
- * @type {string}
- * @name sap.ui.webc.main.SplitButton.prototype.icon
- * @defaultvalue ""
+ * @default ""
* @public
*/
@property()
@@ -124,9 +117,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 +126,7 @@ 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"
+ * @default "Default"
* @public
*/
@property({ type: ButtonDesign, defaultValue: ButtonDesign.Default })
@@ -148,9 +137,7 @@ class SplitButton extends UI5Element {
* A disabled component can't be pressed or
* 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 })
@@ -159,9 +146,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 })
@@ -169,8 +154,8 @@ class SplitButton extends UI5Element {
/**
* Indicates if the elements is on focus
- * @type {boolean}
- * @defaultvalue false
+ *
+ * @default false
* @private
*/
@property({ type: Boolean })
@@ -179,7 +164,6 @@ class SplitButton extends UI5Element {
/**
* Accessibility-related properties for inner elements of the Split Button
*
- * @type {object}
* @private
*/
@property({ type: Object })
@@ -187,8 +171,8 @@ class SplitButton extends UI5Element {
/**
* Defines the tabIndex of the component.
- * @type {string}
- * @defaultvalue ""
+ *
+ * @default "0"
* @private
*/
@property({ defaultValue: "0", noAttribute: true })
@@ -196,8 +180,8 @@ class SplitButton extends UI5Element {
/**
* Indicates if there is Space key pressed
- * @type {boolean}
- * @defaultvalue false
+ *
+ * @default false
* @private
*/
@property({ type: Boolean, noAttribute: true })
@@ -205,8 +189,8 @@ 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 })
@@ -214,8 +198,8 @@ class SplitButton extends UI5Element {
/**
* Defines the active state of the text button
- * @type {boolean}
- * @defaultvalue false
+ *
+ * @default false
* @private
*/
@property({ type: Boolean, noAttribute: true })
@@ -223,8 +207,8 @@ class SplitButton extends UI5Element {
/**
* Defines the icon of the text button
- * @type {string}
- * @defaultvalue ""
+ *
+ * @default ""
* @private
*/
@property({ noAttribute: true })
@@ -232,8 +216,8 @@ class SplitButton extends UI5Element {
/**
* Defines the active state of the arrow button
- * @type {boolean}
- * @defaultvalue false
+ *
+ * @default false
* @private
*/
@property({ type: Boolean, noAttribute: true })
@@ -244,9 +228,6 @@ class SplitButton extends UI5Element {
* <br><br>
* <b>Note:</b> 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/StandardListItem.ts b/packages/main/src/StandardListItem.ts
index f4d6b33a531d..d64d6dd326fa 100644
--- a/packages/main/src/StandardListItem.ts
+++ b/packages/main/src/StandardListItem.ts
@@ -16,31 +16,25 @@ import StandardListItemTemplate from "./generated/templates/StandardListItemTemp
* This is a list item,
* providing the most common use cases such as <code>text</code>,
* <code>image</code> and <code>icon</code>.
+
+ * @csspart title - Used to style the title of the list item
+ * @csspart description - Used to style the description of the list item
+ * @csspart additional-text - Used to style the additionalText of the list item
+ * @csspart icon - Used to style the icon of the list item
+ * @csspart native-li - Used to style the main li tag of the list item
+ * @csspart content - Used to style the content area of the list item
+ * @csspart detail-button - Used to style the button rendered when the list item is of type detail
+ * @csspart delete-button - Used to style the button rendered when the list item is in delete mode
+ * @csspart radio - Used to style the radio button rendered when the list item is in single selection mode
+ * @csspart checkbox - Used to style the checkbox rendered when the list item is in multiple selection mode
*
- * <h3>CSS Shadow Parts</h3>
- *
- * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
- * <br>
- * The <code>ui5-li</code> exposes the following CSS Shadow Parts:
- * <ul>
- * <li>title - Used to style the title of the list item</li>
- * <li>description - Used to style the description of the list item</li>
- * <li>additional-text - Used to style the additionalText of the list item</li>
- * <li>icon - Used to style the icon of the list item</li>
- * <li>native-li - Used to style the main li tag of the list item</li>
- * <li>content - Used to style the content area of the list item</li>
- * <li>detail-button - Used to style the button rendered when the list item is of type detail</li>
- * <li>delete-button - Used to style the button rendered when the list item is in delete mode</li>
- * <li>radio - Used to style the radio button rendered when the list item is in single selection mode</li>
- * <li>checkbox - Used to style the checkbox rendered when the list item is in multiple selection mode</li>
- * </ul>
+ * @slot {Node[]} default - Defines the text of the component.
+ * <br><br>
+ * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
*
* @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.StandardListItem
- * @extends sap.ui.webc.main.ListItem
- * @tagname ui5-li
- * @implements sap.ui.webc.main.IListItem
+ * @extends ListItem
+ * @implements {IAccessibleListItem}
* @public
*/
@customElement({
@@ -55,9 +49,7 @@ import StandardListItemTemplate from "./generated/templates/StandardListItemTemp
class StandardListItem extends ListItem implements IAccessibleListItem {
/**
* Defines the description displayed right under the item text, if such is present.
- * @type {string}
- * @name sap.ui.webc.main.StandardListItem.prototype.description
- * @defaultvalue: ""
+ * @default ""
* @public
* @since 0.8.0
*/
@@ -71,8 +63,7 @@ class StandardListItem extends ListItem implements IAccessibleListItem {
* SAP-icons font provides numerous built-in icons. To find all the available icons, see the
* <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html">Icon Explorer</ui5-link>.
*
- * @type {string}
- * @name sap.ui.webc.main.StandardListItem.prototype.icon
+ * @default ""
* @public
*/
@property()
@@ -83,9 +74,7 @@ class StandardListItem extends ListItem implements IAccessibleListItem {
* <br><br>
* <b>Note:</b> If <code>image</code> is set, the <code>icon</code> would be displayed after the <code>image</code>.
*
- * @type {boolean}
- * @name sap.ui.webc.main.StandardListItem.prototype.iconEnd
- * @defaultvalue false
+ * @default false
* @public
*/
@property({ type: Boolean })
@@ -96,8 +85,7 @@ class StandardListItem extends ListItem implements IAccessibleListItem {
* <br><br>
* <b>Note:</b> The <code>image</code> would be displayed in the beginning of the list item.
*
- * @type {string}
- * @name sap.ui.webc.main.StandardListItem.prototype.image
+ * @default ""
* @public
*/
@property()
@@ -105,8 +93,7 @@ class StandardListItem extends ListItem implements IAccessibleListItem {
/**
* Defines the <code>additionalText</code>, displayed in the end of the list item.
- * @type {string}
- * @name sap.ui.webc.main.StandardListItem.prototype.additionalText
+ * @default ""
* @public
* @since 1.0.0-rc.15
*/
@@ -117,9 +104,7 @@ class StandardListItem extends ListItem implements IAccessibleListItem {
* Defines the state of the <code>additionalText</code>.
* <br>
* Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code>, <code>"Information"</code> and <code>"Error"</code>.
- * @type {sap.ui.webc.base.types.ValueState}
- * @name sap.ui.webc.main.StandardListItem.prototype.additionalTextState
- * @defaultvalue "None"
+ * @default "None"
* @public
* @since 1.0.0-rc.15
*/
@@ -130,9 +115,7 @@ class StandardListItem extends ListItem implements IAccessibleListItem {
* Defines the text alternative of the component.
* Note: If not provided a default text alternative will be set, if present.
*
- * @type {string}
- * @name sap.ui.webc.main.StandardListItem.prototype.accessibleName
- * @defaultvalue ""
+ * @default ""
* @public
* @since 1.0.0-rc.15
*/
@@ -144,9 +127,7 @@ class StandardListItem extends ListItem implements IAccessibleListItem {
*
* <br><br>
* <b>Note:</b> this property takes affect only if text node is provided to default slot of the component
- * @type {sap.ui.webc.main.types.WrappingType}
- * @name sap.ui.webc.main.StandardListItem.prototype.wrappingType
- * @defaultvalue "None"
+ * @default "None"
* @private
* @since 1.5.0
*/
@@ -155,8 +136,6 @@ class StandardListItem extends ListItem implements IAccessibleListItem {
/**
* Indicates if the list item has text content.
- * @type {boolean}
- * @name sap.ui.webc.main.StandardListItem.prototype.hasTitle
* @private
*/
@property({ type: Boolean })
@@ -165,26 +144,12 @@ class StandardListItem extends ListItem implements IAccessibleListItem {
@property({ type: Boolean })
_hasImageContent!: boolean;
- /**
- * Defines the text of the component.
- * <br><br>
- * <b>Note:</b> 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.StandardListItem.prototype.default
- * @slot
- * @public
- */
-
/**
* <b>Note:</b> While the slot allows option for setting custom avatar, to match the
* design guidelines, please use the <code>ui5-avatar</code> with it`s default size - S.
* <b>Note:</b> If bigger <code>ui5-avatar</code> needs to be used, then the size of the
* <code>ui5-li</code> should be customized in order to fit.
- * @type {HTMLElement[]}
- * @name sap.ui.webc.main.StandardListItem.prototype.imageContent
* @since 1.10.0
- * @slot
* @public
*/
@slot()
diff --git a/packages/main/src/StepInput.ts b/packages/main/src/StepInput.ts
index 86bb14c6c8a9..78ea80aa48ef 100644
--- a/packages/main/src/StepInput.ts
+++ b/packages/main/src/StepInput.ts
@@ -86,10 +86,7 @@ const INITIAL_SPEED = 120; // milliseconds
* <code>import "@ui5/webcomponents/dist/StepInput.js";</code>
*
* @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,11 +110,7 @@ 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}
- * @formEvents change
- * @formProperty
- * @defaultvalue 0
+ * @default 0
* @public
*/
@property({ validator: Float, defaultValue: 0 })
@@ -127,8 +119,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}
+ * @default undefined
* @public
*/
@property({ validator: Float })
@@ -137,8 +128,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}
+ * @default undefined
* @public
*/
@property({ validator: Float })
@@ -147,9 +137,7 @@ 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
+ * @default 1
* @public
*/
@property({ validator: Float, defaultValue: 1 })
@@ -158,9 +146,7 @@ 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"
+ * @default "None"
* @public
*/
@property({ type: ValueState, defaultValue: ValueState.None })
@@ -169,9 +155,7 @@ 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 })
@@ -180,9 +164,7 @@ 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 })
@@ -191,9 +173,7 @@ 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 })
@@ -207,9 +187,7 @@ class StepInput extends UI5Element implements IFormElement {
* <b>Note:</b> 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 })
@@ -227,9 +205,7 @@ 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()
@@ -238,9 +214,7 @@ 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
+ * @default 0
* @public
*/
@property({ validator: Integer, defaultValue: 0 })
@@ -249,8 +223,7 @@ class StepInput extends UI5Element implements IFormElement {
/**
* Defines the accessible ARIA name of the component.
*
- * @name sap.ui.webc.main.StepInput.prototype.accessibleName
- * @type {string}
+ * @default ""
* @public
* @since 1.0.0-rc.15
*/
@@ -260,9 +233,7 @@ 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,9 +278,6 @@ class StepInput extends UI5Element implements IFormElement {
* <br>
* <b>Note:</b> The <code>valueStateMessage</code> would be displayed,
* when the component is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state.
- * @type {HTMLElement}
- * @slot
- * @name sap.ui.webc.main.StepInput.prototype.valueStateMessage
* @public
*/
@slot()
@@ -319,8 +287,6 @@ class StepInput extends UI5Element implements IFormElement {
* The slot is used to render native <code>input</code> HTML element within Light DOM to enable form submit,
* when <code>name</code> property is set.
*
- * @type {HTMLElement[]}
- * @slot
* @private
*/
@slot()
@@ -460,8 +426,9 @@ 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 <code>change</code> event when requested
*
- * @param {Float} modifier modifies the value of the component with the given modifier (positive or negative)
- * @param {boolean} fireChangeEvent if <code>true</code>, fires <code>change</code> event when the value is changed
+ * @private
+ * @param modifier modifies the value of the component with the given modifier (positive or negative)
+ * @param fireChangeEvent if <code>true</code>, fires <code>change</code> event when the value is changed
*/
_modifyValue(modifier: number, fireChangeEvent = false) {
let value;
@@ -581,8 +548,9 @@ class StepInput extends UI5Element implements IFormElement {
/**
* Called when the increment or decrement button is pressed and held to set new value.
- * @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
+ * @private
+ * @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 d5086456ae37..1500e570f14d 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";
* <code>import "@ui5/webcomponents/dist/Switch";</code>
*
* @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,7 @@ class Switch extends UI5Element implements IFormElement {
* positive and negative icons will replace the <code>textOn</code> and <code>textOff</code>.
*
* @public
- * @type {sap.ui.webc.main.types.SwitchDesign}
- * @name sap.ui.webc.main.Switch.prototype.design
- * @defaultValue "Textual"
+ * @default "Textual"
*/
@property({ type: SwitchDesign, defaultValue: SwitchDesign.Textual })
design!: `${SwitchDesign}`;
@@ -101,9 +95,7 @@ class Switch extends UI5Element implements IFormElement {
* <br><br>
* <b>Note:</b> The property can be changed with user interaction,
* either by cliking the component, or by pressing the <code>Enter</code> or <code>Space</code> key.
- * @type {boolean}
- * @name sap.ui.webc.main.Switch.prototype.checked
- * @defaultvalue false
+ * @default false
* @formEvents change
* @formProperty
* @public
@@ -116,9 +108,7 @@ class Switch extends UI5Element implements IFormElement {
* <br><br>
* <b>Note:</b> A disabled component is noninteractive.
*
- * @type {boolean}
- * @name sap.ui.webc.main.Switch.prototype.disabled
- * @defaultvalue false
+ * @default false
* @public
*/
@property({ type: Boolean })
@@ -130,9 +120,7 @@ class Switch extends UI5Element implements IFormElement {
* <br><br>
* <b>Note:</b> 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()
@@ -143,9 +131,7 @@ class Switch extends UI5Element implements IFormElement {
* <br><br>
* <b>Note:</b> 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()
@@ -156,9 +142,7 @@ class Switch extends UI5Element implements IFormElement {
*
* <b>Note</b>: We recommend that you set an accessibleNameRef pointing to an external label or at least an <code>accessibleName</code>.
* Providing an <code>accessibleNameRef</code> or an <code>accessibleName</code> is mandatory in the cases when <code>textOn</code> and <code>textOff</code> properties aren't set.
- * @type {string}
- * @name sap.ui.webc.main.Switch.prototype.accessibleName
- * @defaultvalue: ""
+ * @default ""
* @public
* @since 1.2.0
*/
@@ -170,9 +154,7 @@ class Switch extends UI5Element implements IFormElement {
*
* <b>Note</b>: We recommend that you set an accessibleNameRef pointing to an external label or at least an <code>accessibleName</code>.
* Providing an <code>accessibleNameRef</code> or an <code>accessibleName</code> is mandatory in the cases when <code>textOn</code> and <code>textOff</code> properties aren't set.
- * @type {string}
- * @name sap.ui.webc.main.Switch.prototype.accessibleNameRef
- * @defaultvalue ""
+ * @default ""
* @public
* @since 1.1.0
*/
@@ -183,9 +165,7 @@ class Switch extends UI5Element implements IFormElement {
* Defines the tooltip of the component.
* <br>
* <b>Note:</b> If applicable an external label reference should always be the preferred option to provide context to the <code>ui5-switch</code> component over a tooltip.
- * @type {string}
- * @name sap.ui.webc.main.Switch.prototype.tooltip
- * @defaultvalue: ""
+ * @default ""
* @public
* @since 1.9.0
*/
@@ -195,9 +175,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
*/
@@ -216,9 +194,7 @@ 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}
- * @name sap.ui.webc.main.Switch.prototype.name
- * @defaultvalue ""
+ * @default ""
* @public
* @since 1.16.0
*/
@@ -228,8 +204,6 @@ class Switch extends UI5Element implements IFormElement {
/**
* The slot is used to render native <code>input</code> HTML element within Light DOM to enable form submit, when <code>Switch</code> is a part of HTML form.
*
- * @type {HTMLElement[]}
- * @slot
* @private
* @since 1.16.0
*/
diff --git a/packages/main/src/TextArea.ts b/packages/main/src/TextArea.ts
index 5e5631dbb386..d15823d9c5d2 100644
--- a/packages/main/src/TextArea.ts
+++ b/packages/main/src/TextArea.ts
@@ -66,25 +66,14 @@ type ExceededText = {
* When empty, it can hold a placeholder similar to a <code>ui5-input</code>.
* You can define the rows of the <code>ui5-textarea</code> and also determine specific behavior when handling long texts.
*
- * <h3>CSS Shadow Parts</h3>
- *
- * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
- * <br>
- * The <code>ui5-textarea</code> exposes the following CSS Shadow Parts:
- * <ul>
- * <li>textarea - Used to style the native textarea</li>
- * </ul>
- *
* <h3>ES6 Module Import</h3>
*
* <code>import "@ui5/webcomponents/dist/TextArea";</code>
*
* @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.TextArea
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-textarea
+ * @extends UI5Element
* @public
+ * @csspart textarea - Used to style the native textarea
*/
@customElement({
tag: "ui5-textarea",
@@ -99,7 +88,6 @@ type ExceededText = {
/**
* Fired when the text has changed and the focus leaves the component.
*
- * @event sap.ui.webc.main.TextArea#change
* @public
*/
@event("change")
@@ -108,7 +96,6 @@ type ExceededText = {
* Fired when the value of the component changes at each keystroke or when
* something is pasted.
*
- * @event sap.ui.webc.main.TextArea#input
* @since 1.0.0-rc.5
* @public
*/
@@ -118,11 +105,9 @@ class TextArea extends UI5Element implements IFormElement {
/**
* Defines the value of the component.
*
- * @type {string}
- * @name sap.ui.webc.main.TextArea.prototype.value
* @formEvents change input
* @formProperty
- * @defaultvalue ""
+ * @default ""
* @public
*/
@property()
@@ -132,9 +117,7 @@ class TextArea extends UI5Element implements IFormElement {
* <br><br>
* <b>Note:</b> A disabled component is completely noninteractive.
*
- * @type {boolean}
- * @name sap.ui.webc.main.TextArea.prototype.disabled
- * @defaultvalue false
+ * @default false
* @public
*/
@property({ type: Boolean })
@@ -145,9 +128,7 @@ class TextArea extends UI5Element implements IFormElement {
* <b>Note:</b> A read-only component is not editable,
* but still provides visual feedback upon user interaction.
*
- * @type {boolean}
- * @name sap.ui.webc.main.TextArea.prototype.readonly
- * @defaultvalue false
+ * @default false
* @public
*/
@property({ type: Boolean })
@@ -155,9 +136,7 @@ class TextArea extends UI5Element implements IFormElement {
/**
* Defines whether the component is required.
*
- * @type {boolean}
- * @name sap.ui.webc.main.TextArea.prototype.required
- * @defaultvalue false
+ * @default false
* @public
* @since 1.0.0-rc.3
*/
@@ -167,9 +146,7 @@ class TextArea 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.TextArea.prototype.placeholder
- * @defaultvalue ""
+ * @default ""
* @public
*/
@property()
@@ -182,9 +159,8 @@ class TextArea extends UI5Element implements IFormElement {
* <b>Note:</b> If <code>maxlength</code> property is set,
* the component turns into "Warning" state once the characters exceeds the limit.
* In this case, only the "Error" state is considered and can be applied.
- * @type {sap.ui.webc.base.types.ValueState}
- * @name sap.ui.webc.main.TextArea.prototype.valueState
- * @defaultvalue "None"
+ *
+ * @default "None"
* @since 1.0.0-rc.7
* @public
*/
@@ -201,9 +177,7 @@ class TextArea extends UI5Element implements IFormElement {
* <li>The CSS <code>height</code> property wins over the <code>rows</code> property, if both are set.</li>
* </ul>
*
- * @type {sap.ui.webc.base.types.Integer}
- * @name sap.ui.webc.main.TextArea.prototype.rows
- * @defaultvalue 0
+ * @default 0
* @public
*/
@property({ validator: Integer, defaultValue: 0 })
@@ -212,13 +186,11 @@ class TextArea extends UI5Element implements IFormElement {
/**
* Defines the maximum number of characters that the <code>value</code> can have.
*
- * @type {sap.ui.webc.base.types.Integer}
- * @name sap.ui.webc.main.TextArea.prototype.maxlength
- * @defaultValue null
+ * @default undefined
* @public
*/
- @property({ validator: Integer, defaultValue: null })
- maxlength?: number;
+ @property({ validator: Integer })
+ maxlength?: number
/**
* Determines whether the characters exceeding the maximum allowed character count are visible
@@ -229,10 +201,7 @@ class TextArea extends UI5Element implements IFormElement {
* If set to <code>true</code> the characters exceeding the <code>maxlength</code> value are selected on
* paste and the counter below the component displays their number.
*
- * @type {boolean}
- * @name sap.ui.webc.main.TextArea.prototype.showExceededText
-
- * @defaultvalue false
+ * @default false
* @public
*/
@property({ type: Boolean })
@@ -241,9 +210,8 @@ class TextArea extends UI5Element implements IFormElement {
/**
* Enables the component to automatically grow and shrink dynamically with its content.
* <br><br>
- * @type {boolean}
- * @name sap.ui.webc.main.TextArea.prototype.growing
- * @defaultvalue false
+ *
+ * @default false
* @public
*/
@property({ type: Boolean })
@@ -252,9 +220,7 @@ class TextArea extends UI5Element implements IFormElement {
/**
* Defines the maximum number of lines that the component can grow.
*
- * @type {sap.ui.webc.base.types.Integer}
- * @name sap.ui.webc.main.TextArea.prototype.growingMaxLines
- * @defaultvalue 0
+ * @default 0
* @public
*/
@property({ validator: Integer, defaultValue: 0 })
@@ -272,9 +238,7 @@ class TextArea 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}
- * @name sap.ui.webc.main.TextArea.prototype.name
- * @defaultvalue ""
+ * @default ""
* @public
*/
@property()
@@ -283,8 +247,7 @@ class TextArea extends UI5Element implements IFormElement {
/**
* Defines the accessible ARIA name of the component.
*
- * @type {string}
- * @name sap.ui.webc.main.TextArea.prototype.accessibleName
+ * @default ""
* @public
* @since 1.0.0-rc.15
*/
@@ -294,9 +257,7 @@ class TextArea extends UI5Element implements IFormElement {
/**
* Receives id(or many ids) of the elements that label the textarea.
*
- * @type {string}
- * @name sap.ui.webc.main.TextArea.prototype.accessibleNameRef
- * @defaultvalue ""
+ * @default ""
* @public
* @since 1.0.0-rc.15
*/
@@ -342,10 +303,8 @@ class TextArea extends UI5Element implements IFormElement {
* <br><br>
* <b>Note:</b> The <code>valueStateMessage</code> would be displayed if the component has
* <code>valueState</code> of type <code>Information</code>, <code>Warning</code> or <code>Error</code>.
- * @type {HTMLElement[]}
- * @name sap.ui.webc.main.TextArea.prototype.valueStateMessage
+ *
* @since 1.0.0-rc.7
- * @slot
* @public
*/
@slot()
@@ -353,9 +312,7 @@ class TextArea extends UI5Element implements IFormElement {
/**
* The slot is used to render native <code>input</code> HTML element within Light DOM to enable form submit,
* when <code>name</code> property is set.
- * @type {HTMLElement[]}
- * @name sa.ui.webc.main.TextArea.prototype.formSupport
- * @slot
+ *
* @private
*/
@slot()
diff --git a/packages/main/src/TimePicker.ts b/packages/main/src/TimePicker.ts
index 5a40eda1f44e..6b988c76f3dd 100644
--- a/packages/main/src/TimePicker.ts
+++ b/packages/main/src/TimePicker.ts
@@ -74,10 +74,7 @@ import {
* <code>import "@ui5/webcomponents/dist/TimePicker.js";</code>
*
* @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
*/
@@ -91,9 +88,7 @@ class TimePicker extends TimePickerBase {
* <b>Note:</b> 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}
- * @name sap.ui.webc.main.TimePicker.prototype.placeholder
- * @defaultvalue undefined
+ * @default undefined
* @public
*/
@property({ defaultValue: undefined })
@@ -107,9 +102,7 @@ class TimePicker extends TimePickerBase {
* hh:mm:ss a -> 2:23:15 PM
* mm:ss -> 12:04 (only minutes and seconds)
*
- * @type {string}
- * @name sap.ui.webc.main.TimePicker.prototype.formatPattern
- * @defaultvalue ""
+ * @default ""
* @public
*/
@property()
@@ -141,12 +134,10 @@ class TimePicker extends TimePickerBase {
/**
* Currently selected time represented as JavaScript Date instance
*
- * @readonly
- * @type {Date}
* @public
- * @name sap.ui.webc.main.TimePicker.prototype.dateValue
+ * @default null
*/
- get dateValue() {
+ get dateValue(): Date | Date[] | null {
return this.getFormat().parse(this._effectiveValue as string);
}
diff --git a/packages/main/src/TimePickerBase.ts b/packages/main/src/TimePickerBase.ts
index abbcab547b6d..28522ce36645 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 <code>ui5-time-picker</code> 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,
},
@@ -125,9 +133,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 +153,7 @@ class TimePickerBase extends UI5Element {
* <li><code>Information</code></li>
* </ul>
*
- * @type {sap.ui.webc.base.types.ValueState}
- * @name sap.ui.webc.main.TimePickerBase.prototype.valueState
- * @defaultvalue "None"
+ * @default "None"
* @public
*/
@property({ type: ValueState, defaultValue: ValueState.None })
@@ -158,9 +162,7 @@ class TimePickerBase extends UI5Element {
/**
* Determines whether the <code>ui5-time-picker</code> is displayed as disabled.
*
- * @type {boolean}
- * @name sap.ui.webc.main.TimePickerBase.prototype.disabled
- * @defaultvalue false
+ * @default false
* @public
*/
@property({ type: Boolean })
@@ -169,9 +171,7 @@ class TimePickerBase extends UI5Element {
/**
* Determines whether the <code>ui5-time-picker</code> is displayed as readonly.
*
- * @type {boolean}
- * @name sap.ui.webc.main.TimePickerBase.prototype.readonly
- * @defaultvalue false
+ * @default false
* @public
*/
@property({ type: Boolean })
@@ -191,10 +191,8 @@ class TimePickerBase extends UI5Element {
* <br>
* <b>Note:</b> The <code>valueStateMessage</code> would be displayed,
* when the <code>ui5-time-picker</code> is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state.
- * @type {HTMLElement}
- * @name sap.ui.webc.main.TimePickerBase.prototype.valueStateMessage
+ *
* @since 1.0.0-rc.8
- * @slot
* @public
*/
@slot()
@@ -216,7 +214,6 @@ class TimePickerBase extends UI5Element {
}
/**
- * @abstract
* @protected
*/
get _placeholder(): string | undefined {
@@ -224,7 +221,6 @@ class TimePickerBase extends UI5Element {
}
/**
- * @abstract
* @protected
*/
get _formatPattern(): string | undefined {
@@ -249,13 +245,10 @@ 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
+ * @returns Resolves when the picker is open
*/
- async openPicker() {
+ async openPicker(): Promise<void> {
this.tempValue = this.value && this.isValid(this.value) ? this.value : this.getFormat().format(new Date());
const responsivePopover = await this._getPopover();
responsivePopover.showAt(this);
@@ -264,11 +257,9 @@ class TimePickerBase extends UI5Element {
/**
* Closes the picker
* @public
- * @method
- * @name sap.ui.webc.main.TimePickerBase#closePicker
- * @returns {Promise} Resolves when the picker is closed
+ * @returns Resolves when the picker is closed
*/
- async closePicker() {
+ async closePicker(): Promise<void> {
const responsivePopover = await this._getPopover();
responsivePopover.close();
this._isPickerOpen = false;
@@ -285,11 +276,8 @@ class TimePickerBase extends UI5Element {
/**
* Checks if the picker is open
* @public
- * @method
- * @name sap.ui.webc.main.TimePickerBase#isOpen
- * @returns {boolean}
*/
- isOpen() {
+ isOpen(): boolean {
return !!this._isPickerOpen;
}
@@ -310,13 +298,10 @@ 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
+ * @returns Resolves when the Inputs popover is open
*/
- async openInputsPopover() {
+ async openInputsPopover(): Promise<void> {
this.tempValue = this.value && this.isValid(this.value) ? this.value : this.getFormat().format(new Date());
const popover = await this._getInputsPopover();
popover.showAt(this);
@@ -326,11 +311,9 @@ 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
+ * @returns Resolves when the Inputs popover is closed
*/
- async closeInputsPopover() {
+ async closeInputsPopover(): Promise<void> {
const popover = await this._getInputsPopover();
popover.close();
}
@@ -346,11 +329,8 @@ class TimePickerBase extends UI5Element {
/**
* Checks if the inputs popover is open
* @private
- * @method
- * @name sap.ui.webc.main.TimePickerBase#isInputsPopoverOpen
- * @returns {boolean}
*/
- isInputsPopoverOpen() {
+ isInputsPopoverOpen(): boolean {
return !!this._isInputsPopoverOpen;
}
@@ -513,13 +493,11 @@ class TimePickerBase extends UI5Element {
/**
* Formats a Java Script date object into a string representing a locale date and time
* according to the <code>formatPattern</code> 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
- * @method
- * @name sap.ui.webc.main.TimePickerBase#formatValue
- * @returns {string}
+ * @returns formatted value
*/
- formatValue(date: Date) {
+ formatValue(date: Date): string {
return this.getFormat().format(date);
}
@@ -528,13 +506,10 @@ class TimePickerBase extends UI5Element {
*
* <br><br>
* <b>Note:</b> 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
- * @method
- * @name sap.ui.webc.main.TimePickerBase#isValid
- * @returns {boolean}
*/
- isValid(value: string | undefined) {
+ isValid(value: string | undefined): boolean {
if (value === "") {
return true;
}
@@ -567,11 +542,10 @@ class TimePickerBase extends UI5Element {
}
/**
+ * The listener for this event can't be passive as it calls preventDefault()
*
- * @param {event} e Wheel Event
+ * @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/TimePickerClock.ts b/packages/main/src/TimePickerClock.ts
index 9804484e1090..e5c2b60bcd21 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";
* <code>import "@ui5/webcomponents/dist/TimePickerClock.js";</code>
*
* @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 <code>value</code> of the clock.
* @param { string } stringValue The new <code>value</code> of the clock, as string, zero-prepended when necessary.
* @param { boolean } finalChange <code>true</code> when a value is selected and confirmed, <code>false</code> 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,7 @@ 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 +127,7 @@ 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 +135,7 @@ 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 +143,7 @@ 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 +152,7 @@ class TimePickerClock extends UI5Element {
* If set to <code>true</code>, 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 +160,7 @@ 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 +169,7 @@ class TimePickerClock extends UI5Element {
* If set to <code>true</code>, 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 +179,7 @@ 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 +187,7 @@ class TimePickerClock extends UI5Element {
/**
* Prepend with zero flag. If <code>true</code>, 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 +195,7 @@ 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 +206,7 @@ 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,33 +217,25 @@ 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;
/**
* Defines the currently available Time Picker Clock items depending on Clock setup.
- *
- * @type {Array}
*/
@property({ type: Object, multiple: true })
_items!: Array<TimePickerClockItem>;
/**
* 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;
@@ -268,8 +243,7 @@ class TimePickerClock extends UI5Element {
/**
* Mousedown or Touchstart event flag.
*
- * @type {boolean}
- * @defaultvalue false
+ * @default false
*/
@property({ type: Boolean, noAttribute: true })
_mouseOrTouchDown!: boolean;
@@ -277,8 +251,7 @@ class TimePickerClock extends UI5Element {
/**
* Cancel Mouseout flag.
*
- * @type {boolean}
- * @defaultvalue false
+ * @default false
*/
@property({ type: Boolean, noAttribute: true })
_cancelTouchOut!: boolean;
@@ -286,8 +259,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;
@@ -295,8 +267,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;
@@ -304,8 +275,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;
@@ -313,8 +283,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;
@@ -322,8 +291,7 @@ class TimePickerClock extends UI5Element {
/**
* Animation in progress flag.
*
- * @type {boolean}
- * @defaultvalue false
+ * @default false
*/
@property({ type: Boolean, noAttribute: true })
_animationInProgress!: boolean;
@@ -365,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);
@@ -385,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) {
@@ -472,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");
}
@@ -482,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;
}
@@ -507,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;
}
@@ -523,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;
@@ -570,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;
@@ -611,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);
@@ -651,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;
@@ -685,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;
@@ -722,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);
@@ -738,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;
@@ -758,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;
@@ -795,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) {
@@ -814,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 6390627eb0d8..f9f059ef3233 100644
--- a/packages/main/src/TimePickerInternals.ts
+++ b/packages/main/src/TimePickerInternals.ts
@@ -74,11 +74,8 @@ const TYPE_COOLDOWN_DELAY = 1000; // Cooldown delay; 0 = disabled cooldown
* and <ui5-time-selection-inputs> components and should not be used separately.
*
* @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
*/
@@ -100,9 +97,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 })
@@ -116,9 +111,7 @@ class TimePickerInternals extends UI5Element {
* hh:mm:ss a -> 2:23:15 PM
* mm:ss -> 12:04 (only minutes and seconds)
- * @type {string}
- * @name sap.ui.webc.main.TimePickerInternals.prototype.formatPattern
- * @defaultvalue ""
+ * @default ""
* @public
*/
@property()
@@ -127,8 +120,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 })
@@ -137,7 +129,6 @@ class TimePickerInternals extends UI5Element {
/**
* Contains calendar type.
*
- * @type {CalendarType}
* @private
*/
@property({ type: CalendarType })
@@ -146,7 +137,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<TimePickerEntityProperties>;
@@ -154,7 +145,6 @@ class TimePickerInternals extends UI5Element {
/**
* Contains component-to-index map.
*
- * @type {TimePickerComponentIndexMap}
* @private
*/
@property({ type: Object })
@@ -163,7 +153,6 @@ class TimePickerInternals extends UI5Element {
/**
* Contains currently available Button components depending on time format.
*
- * @type {Array}
* @private
*/
@property({ type: Object, multiple: true })
@@ -172,7 +161,7 @@ class TimePickerInternals extends UI5Element {
/**
* Id of the cooldown interval
*
- * @type {ReturnType}
+ * @private
*/
@property({ validator: Integer, noAttribute: true })
_typeCooldownId?: ReturnType<typeof setTimeout>;
@@ -180,7 +169,7 @@ class TimePickerInternals extends UI5Element {
/**
* Exact match number buffer
*
- * @type {integer}
+ * @private
*/
@property({ validator: Integer, noAttribute: true })
_exactMatch?: number;
@@ -188,7 +177,7 @@ class TimePickerInternals extends UI5Element {
/**
* Buffer for entered by keyboard numbers
*
- * @type {string}
+ * @private
*/
@property({ defaultValue: "", noAttribute: true })
_keyboardBuffer!: string;
@@ -375,9 +364,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;
@@ -386,9 +375,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;
@@ -397,7 +386,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) {
@@ -413,7 +402,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;
@@ -425,7 +414,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;
@@ -473,10 +462,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
@@ -488,7 +477,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 69574e923006..88ecb8c34050 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
*/
@@ -90,9 +87,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 })
@@ -106,9 +101,7 @@ class TimeSelection extends UI5Element {
* hh:mm:ss a -> 2:23:15 PM
* mm:ss -> 12:04 (only minutes and seconds)
*
- * @type {string}
- * @name sap.ui.webc.main.TimeSelection.prototype.formatPattern
- * @defaultvalue ""
+ * @default ""
* @public
*/
@property()
@@ -117,9 +110,9 @@ 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
- * @name sap.ui.webc.main.TimeSelection.prototype.hideHours
- * @type {boolean}
*/
@property({ type: Boolean })
hideHours!: boolean;
@@ -127,9 +120,9 @@ 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
- * @name sap.ui.webc.main.TimeSelection.prototype.hideMinutes
- * @type {boolean}
*/
@property({ type: Boolean })
hideMinutes!: boolean;
@@ -137,36 +130,36 @@ 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
- * @name sap.ui.webc.main.TimeSelection.prototype.hideSeconds
- * @type {boolean}
*/
@property({ type: Boolean })
hideSeconds!: boolean;
/**
* The maximum number of hours to be displayed for the hours slider (only needed for the duration picker use case)
+ *
+ * @default undefined
* @public
- * @name sap.ui.webc.main.TimeSelection.prototype.maxHours
- * @type {Integer}
*/
@property({ validator: Integer })
maxHours?: number;
/**
* The maximum number of minutes to be displayed for the minutes slider (only needed for the duration picker use case)
+ *
+ * @default undefined
* @public
- * @name sap.ui.webc.main.TimeSelection.prototype.maxMinutes
- * @type {Integer}
*/
@property({ validator: Integer })
maxMinutes?: number;
/**
* The maximum number of seconds to be displayed for the seconds slider (only needed for the duration picker use case)
+ *
+ * @default undefined
* @public
- * @name sap.ui.webc.main.TimeSelection.prototype.maxSeconds
- * @type {Integer}
*/
@property({ validator: Integer })
maxSeconds?: number;
@@ -379,7 +372,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 94ca963443df..934c81039ff4 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
*/
@@ -80,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<ToggleSpinButton>(`#${this._id}_button_${entity}`) : undefined;
@@ -92,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<TimePickerClock>(`#${this._id}_clock_${entity}`) : undefined;
@@ -104,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;
@@ -116,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;
@@ -129,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)) {
@@ -140,7 +137,7 @@ class TimeSelectionClocks extends TimePickerInternals {
/**
* keydown event handler.
*
- * @param {event} evt Event object
+ * @param evt Event object
*/
_onkeydown(evt: KeyboardEvent) {
let clock;
@@ -211,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;
@@ -358,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);
@@ -370,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);
@@ -386,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;
@@ -412,7 +409,7 @@ class TimeSelectionClocks extends TimePickerInternals {
/**
* Clock 'change' event handler.
*
- * @param {event} evt Event object
+ * @param evt Event object
*/
_clockChange(evt: CustomEvent<TimePickerClockChangeEventDetail>) {
const index = this._getIndexFromId((evt.target as HTMLElement).id);
diff --git a/packages/main/src/TimeSelectionInputs.ts b/packages/main/src/TimeSelectionInputs.ts
index 81d3c73e90fe..875c3166843c 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
*/
@@ -109,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<Input>(`#${this._id}_input_${entity}`) : undefined;
@@ -121,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): HTMLInputElement | null {
return input && input.getInputDOMRefSync();
}
@@ -201,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) {
@@ -214,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) {
@@ -240,13 +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
- * @param {number} max Max value of the number for this clock
- * @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();
}
@@ -290,7 +286,7 @@ class TimeSelectionInputs extends TimePickerInternals {
/**
* Input 'change' event handler.
*
- * @param {value} 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/ToggleButton.ts b/packages/main/src/ToggleButton.ts
index 690fde705852..17bf323aa3d4 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";
* <code>import "@ui5/webcomponents/dist/ToggleButton";</code>
*
* @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.ToggleButton
- * @extends sap.ui.webc.main.Button
- * @tagname ui5-toggle-button
+ * @extends Button
* @public
*/
@customElement({
@@ -43,9 +40,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..69fbe995a667 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,9 +35,7 @@ class ToggleSpinButton extends ToggleButton {
/**
* Defines the ARIA valuemin of the component.
*
- * @name sap.ui.webc.main.ToggleSpinButton.prototype.valueMin
- * @type {Integer}
- * @defaultvalue -1
+ * @default -1
*/
@property({ validator: Integer, defaultValue: -1 })
valueMin!: number;
@@ -48,9 +43,7 @@ class ToggleSpinButton extends ToggleButton {
/**
* Defines the ARIA valuemax of the component.
*
- * @name sap.ui.webc.main.ToggleSpinButton.prototype.valueMax
- * @type {Integer}
- * @defaultvalue -1
+ * @default -1
*/
@property({ validator: Integer, defaultValue: -1 })
valueMax!: number;
@@ -58,9 +51,7 @@ class ToggleSpinButton extends ToggleButton {
/**
* Defines the ARIA valuenow of the component.
*
- * @name sap.ui.webc.main.ToggleSpinButton.prototype.valueNow
- * @type {Integer}
- * @defaultvalue -1
+ * @default -1
*/
@property({ validator: Integer, defaultValue: -1 })
valueNow!: number;
@@ -68,8 +59,7 @@ class ToggleSpinButton extends ToggleButton {
/**
* Defines the ARIA valuetext of the component.
*
- * @type {string}
- * @name sap.ui.webc.main.ToggleSpinButton.prototype.valueText
+ * @default ""
*/
@property()
valueText?: string;
diff --git a/packages/main/src/Toolbar.ts b/packages/main/src/Toolbar.ts
index 59a0833350d0..dec335f1b4fc 100644
--- a/packages/main/src/Toolbar.ts
+++ b/packages/main/src/Toolbar.ts
@@ -28,7 +28,7 @@ import ToolbarAlign from "./types/ToolbarAlign.js";
import ToolbarItemOverflowBehavior from "./types/ToolbarItemOverflowBehavior.js";
import HasPopup from "./types/HasPopup.js";
-import type ToolbarItem from "./ToolbarItem.js";
+import ToolbarItem from "./ToolbarItem.js";
import type ToolbarSeparator from "./ToolbarSeparator.js";
import {
@@ -69,11 +69,7 @@ function parsePxValue(styleSet: CSSStyleDeclaration, propertyName: string): numb
* <h3>ES6 Module Import</h3>
* <code>import "@ui5/webcomponents/dist/Toolbar";</code>
* @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.Toolbar
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-toolbar
- * @appenddocs sap.ui.webc.main.ToolbarButton sap.ui.webc.main.ToolbarSelect sap.ui.webc.main.ToolbarSelectOption sap.ui.webc.main.ToolbarSeparator sap.ui.webc.main.ToolbarSpacer
+ * @extends UI5Element
* @public
* @since 1.17.0
*/
@@ -90,10 +86,8 @@ class Toolbar extends UI5Element {
/**
* Indicated the direction in which the Toolbar items will be aligned.
*
- * @type {sap.ui.webc.main.types.ToolbarAlign}
* @public
- * @defaultvalue: "End"
- * @name sap.ui.webc.main.Toolbar.prototype.alignContent
+ * @default "End"
*/
@property({ type: ToolbarAlign, defaultValue: ToolbarAlign.End })
alignContent!: `${ToolbarAlign}`;
@@ -101,27 +95,22 @@ class Toolbar extends UI5Element {
/**
* Calculated width of the whole toolbar.
* @private
- * @name sap.ui.webc.main.Toolbar.prototype.width
- * @type {sap.ui.webc.base.types.Integer}
- * @defaultvalue false
+ * @default undefined
*/
- @property({ type: Integer })
+ @property({ validator: Integer })
width?: number;
/**
* Calculated width of the toolbar content.
* @private
- * @name sap.ui.webc.main.Toolbar.prototype.contentWidth
- * @type {sap.ui.webc.base.types.Integer}
- * @defaultvalue 0
+ * @default undefined
*/
- @property({ type: Integer })
+ @property({ validator: Integer })
contentWidth?: number;
/**
* Notifies the toolbar if it should show the items in a reverse way if Toolbar Popover needs to be placed on "Top" position.
* @private
- * @type {Boolean}
*/
@property({ type: Boolean })
reverseOverflow!: boolean;
@@ -129,9 +118,7 @@ class Toolbar extends UI5Element {
/**
* Defines the accessible ARIA name of the component.
*
- * @type {string}
- * @name sap.ui.webc.main.Toolbar.prototype.accessibleName
- * @defaultvalue: ""
+ * @default ""
* @public
*/
@property()
@@ -140,9 +127,7 @@ class Toolbar extends UI5Element {
/**
* Receives id(or many ids) of the elements that label the input.
*
- * @type {string}
- * @name sap.ui.webc.main.Toolbar.prototype.accessibleNameRef
- * @defaultvalue ""
+ * @default ""
* @public
*/
@property({ defaultValue: "" })
@@ -153,9 +138,6 @@ class Toolbar extends UI5Element {
*
* <b>Note:</b> Currently only <code>ui5-toolbar-button</code>, <code>ui5-toolbar-select</code>, <code>ui5-toolbar-separator</code> and <code>ui5-toolbar-spacer</code> are allowed here.
*
- * @type {sap.ui.webc.main.IToolbarItem[]}
- * @name sap.ui.webc.main.Toolbar.prototype.default
- * @slot items
* @public
*/
@slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true })
@@ -357,7 +339,6 @@ class Toolbar extends UI5Element {
* Returns if the overflow popup is open.
*
* @public
- * @return { Promise<Boolean> }
*/
async isOverflowOpen(): Promise<boolean> {
const overflowPopover = await this.getOverflowPopover();
diff --git a/packages/main/src/ToolbarButton.ts b/packages/main/src/ToolbarButton.ts
index 938b8c67f466..d4ac7088cae7 100644
--- a/packages/main/src/ToolbarButton.ts
+++ b/packages/main/src/ToolbarButton.ts
@@ -26,12 +26,8 @@ import { registerToolbarItem } from "./ToolbarRegistry.js";
*
* @constructor
* @abstract
- * @author SAP SE
- * @alias sap.ui.webc.main.ToolbarButton
- * @extends sap.ui.webc.main.ToolbarItem
- * @tagname ui5-toolbar-button
+ * @extends ToolbarItem
* @public
- * @implements sap.ui.webc.main.IToolbarItem
* @since 1.17.0
*/
@customElement({
@@ -46,7 +42,6 @@ import { registerToolbarItem } from "./ToolbarRegistry.js";
* <b>Note:</b> The event will not be fired if the <code>disabled</code>
* property is set to <code>true</code>.
*
- * @event sap.ui.webc.main.ToolbarButton#click
* @public
*/
@event("click")
@@ -56,9 +51,7 @@ class ToolbarButton extends ToolbarItem {
* <br><br>
* <b>Note:</b> a disabled action can't be pressed or focused, and it is not in the tab chain.
*
- * @type {boolean}
- * @defaultvalue false
- * @name sap.ui.webc.main.ToolbarButton.prototype.disabled
+ * @default false
* @public
*/
@property({ type: Boolean })
@@ -77,9 +70,7 @@ class ToolbarButton extends ToolbarItem {
* <li><code>Attention</code></li>
* </ul>
*
- * @type {ButtonDesign}
- * @defaultvalue "Default"
- * @name sap.ui.webc.main.ToolbarButton.prototype.design
+ * @default "Default"
* @public
*/
@property({ type: ButtonDesign, defaultValue: ButtonDesign.Default })
@@ -92,9 +83,7 @@ class ToolbarButton extends ToolbarItem {
* SAP-icons font provides numerous buil-in icons. To find all the available icons, see the
* <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
*
- * @type {string}
- * @defaultvalue ""
- * @name sap.ui.webc.main.ToolbarButton.prototype.icon
+ * @default ""
* @public
*/
@property()
@@ -103,9 +92,7 @@ class ToolbarButton extends ToolbarItem {
/**
* Defines whether the icon should be displayed after the component text.
*
- * @type {boolean}
- * @name sap.ui.webc.main.ToolbarButton.prototype.iconEnd
- * @defaultvalue false
+ * @default false
* @public
*/
@property({ type: Boolean })
@@ -115,9 +102,7 @@ class ToolbarButton extends ToolbarItem {
* Defines the tooltip of the component.
* <br>
* <b>Note:</b> 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.ToolbarButton.prototype.tooltip
- * @defaultvalue ""
+ * @default ""
* @public
*/
@property()
@@ -126,9 +111,7 @@ class ToolbarButton extends ToolbarItem {
/**
* Defines the accessible ARIA name of the component.
*
- * @type {string}
- * @name sap.ui.webc.main.ToolbarButton.prototype.accessibleName
- * @defaultvalue undefined
+ * @default undefined
* @public
*/
@property({ defaultValue: undefined })
@@ -137,9 +120,7 @@ class ToolbarButton extends ToolbarItem {
/**
* Receives id(or many ids) of the elements that label the component.
*
- * @type {string}
- * @name sap.ui.webc.main.ToolbarButton.prototype.accessibleNameRef
- * @defaultvalue ""
+ * @default ""
* @public
*/
@property({ defaultValue: "" })
@@ -169,8 +150,7 @@ class ToolbarButton extends ToolbarItem {
* </li>
* <li><code>controls</code>: Identifies the element (or elements) whose contents or presence are controlled by the button element. Accepts a string value.</li>
* </ul>
- * @type {object}
- * @name sap.ui.webc.main.ToolbarButton.prototype.accessibilityAttributes
+ * @default {}
* @public
*/
@property({ type: Object })
@@ -179,9 +159,7 @@ class ToolbarButton extends ToolbarItem {
/**
* Button text
* @public
- * @defaultvalue ""
- * @type {string}
- * @name sap.ui.webc.main.ToolbarButton.prototype.text
+ * @default ""
*/
@property()
text!: string;
@@ -192,9 +170,7 @@ class ToolbarButton extends ToolbarItem {
*
* <b>Note:</b> all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.
*
- * @name sap.ui.webc.main.ToolbarButton.prototype.width
- * @defaultvalue undefined
- * @type { sap.ui.webc.base.types.CSSSize }
+ * @default undefined
* @public
*/
@property({ validator: CSSSize })
diff --git a/packages/main/src/ToolbarItem.ts b/packages/main/src/ToolbarItem.ts
index 3c3412f1c156..6dac8c263aa2 100644
--- a/packages/main/src/ToolbarItem.ts
+++ b/packages/main/src/ToolbarItem.ts
@@ -8,16 +8,6 @@ type IEventOptions = {
preventClosing: boolean;
}
-interface IToolbarItem {
- overflowPriority: `${ToolbarItemOverflowBehavior}`;
- preventOverflowClosing: boolean;
- ignoreSpace?: boolean;
- isSeparator?: boolean;
- containsText?: boolean;
- hasFlexibleWidth?: boolean;
- stableDomRef: string;
-}
-
/**
* @class
*
@@ -25,14 +15,12 @@ interface IToolbarItem {
* used in the <code>ui5-toolbar</code>.
*
* @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.ToolbarItem
- * @extends sap.ui.webc.base.UI5Element
+ * @extends UI5Element
* @abstract
* @public
* @since 1.17.0
*/
-class ToolbarItem extends UI5Element implements IToolbarItem {
+class ToolbarItem extends UI5Element {
/**
* Property used to define the access of the item to the overflow Popover. If "NeverOverflow" option is set,
* the item never goes in the Popover, if "AlwaysOverflow" - it never comes out of it.
@@ -43,9 +31,7 @@ class ToolbarItem extends UI5Element implements IToolbarItem {
* <li><code>Default</code></li>
* </ul>
* @public
- * @name sap.ui.webc.main.ToolbarItem.prototype.overflowPriority
- * @defaultvalue "Default"
- * @type {ToolbarItemOverflowBehavior}
+ * @default "Default"
*/
@property({ type: ToolbarItemOverflowBehavior, defaultValue: ToolbarItemOverflowBehavior.Default })
overflowPriority!: `${ToolbarItemOverflowBehavior}`;
@@ -53,17 +39,14 @@ class ToolbarItem extends UI5Element implements IToolbarItem {
/**
* Defines if the toolbar overflow popup should close upon intereaction with the item.
* It will close by default.
- * @type {boolean}
- * @defaultvalue false
+ * @default false
* @public
- * @name sap.ui.webc.main.ToolbarItem.prototype.preventOverflowClosing
*/
@property({ type: Boolean })
preventOverflowClosing!: boolean;
/**
* Defines if the width of the item should be ignored in calculating the whole width of the toolbar
- * @returns {boolean}
* @protected
*/
get ignoreSpace(): boolean {
@@ -74,7 +57,6 @@ class ToolbarItem extends UI5Element implements IToolbarItem {
* Returns if the item contains text. Used to position the text properly inside the popover.
* Aligned left if the item has text, default aligned otherwise.
* @protected
- * @returns {boolean}
*/
get containsText(): boolean {
return false;
@@ -84,7 +66,6 @@ class ToolbarItem extends UI5Element implements IToolbarItem {
* Returns if the item is flexible. An item that is returning true for this property will make
* the toolbar expand to fill the 100% width of its container.
* @protected
- * @returns {Boolean}
*/
get hasFlexibleWidth(): boolean {
return false;
@@ -95,7 +76,6 @@ class ToolbarItem extends UI5Element implements IToolbarItem {
* This value is used to determinate if the toolbar should have its accessibility role and attributes set.
* At least two interactive items are needed for the toolbar to have the role="toolbar" attribute set.
* @protected
- * @returns {boolean}
*/
get isInteractive(): boolean {
return true;
@@ -104,7 +84,6 @@ class ToolbarItem extends UI5Element implements IToolbarItem {
/**
* Returns if the item is separator.
* @protected
- * @returns {boolean}
*/
get isSeparator() {
return false;
@@ -113,7 +92,6 @@ class ToolbarItem extends UI5Element implements IToolbarItem {
/**
* Returns the template for the toolbar item.
* @protected
- * @returns {TemplateFunction}
*/
static get toolbarTemplate(): TemplateFunction {
throw new Error("Template must be defined");
@@ -122,7 +100,6 @@ class ToolbarItem extends UI5Element implements IToolbarItem {
/**
* Returns the template for the toolbar item popover.
* @protected
- * @returns {TemplateFunction}
*/
static get toolbarPopoverTemplate(): TemplateFunction {
throw new Error("Popover template must be defined");
@@ -131,7 +108,6 @@ class ToolbarItem extends UI5Element implements IToolbarItem {
/**
* Returns the events that the item is subscribed to.
* @protected
- * @returns {Map}
*/
get subscribedEvents(): Map<string, IEventOptions> {
return new Map();
@@ -142,8 +118,5 @@ class ToolbarItem extends UI5Element implements IToolbarItem {
}
}
-export type {
- IToolbarItem,
- IEventOptions,
-};
+export type { IEventOptions };
export default ToolbarItem;
diff --git a/packages/main/src/ToolbarRegistry.ts b/packages/main/src/ToolbarRegistry.ts
index e62cebd76688..4d8bcb401b6e 100644
--- a/packages/main/src/ToolbarRegistry.ts
+++ b/packages/main/src/ToolbarRegistry.ts
@@ -1,10 +1,10 @@
import getSharedResource from "@ui5/webcomponents-base/dist/getSharedResource.js";
-import type IToolbarItem from "./ToolbarItem.js";
+import type ToolbarItem from "./ToolbarItem.js";
-const registry = getSharedResource<Map<string, typeof IToolbarItem>>("ToolbarItem.registry", new Map());
+const registry = getSharedResource<Map<string, typeof ToolbarItem>>("ToolbarItem.registry", new Map());
-const registerToolbarItem = (ElementClass: typeof IToolbarItem) => {
+const registerToolbarItem = (ElementClass: typeof ToolbarItem) => {
registry.set(ElementClass.name, ElementClass);
};
@@ -17,15 +17,15 @@ const getRegisteredToolbarItem = (name: string) => {
};
const getRegisteredStyles = () => {
- return [...registry.values()].map((ElementClass: typeof IToolbarItem) => ElementClass.styles);
+ return [...registry.values()].map((ElementClass: typeof ToolbarItem) => ElementClass.styles);
};
const getRegisteredStaticAreaStyles = () => {
- return [...registry.values()].map((ElementClass: typeof IToolbarItem) => ElementClass.staticAreaStyles);
+ return [...registry.values()].map((ElementClass: typeof ToolbarItem) => ElementClass.staticAreaStyles);
};
const getRegisteredDependencies = () => {
- return [...registry.values()].map((ElementClass: typeof IToolbarItem) => ElementClass.dependencies).flat();
+ return [...registry.values()].map((ElementClass: typeof ToolbarItem) => ElementClass.dependencies).flat();
};
export {
diff --git a/packages/main/src/ToolbarSelect.ts b/packages/main/src/ToolbarSelect.ts
index 1951d6b87e32..00e3af3b4b77 100644
--- a/packages/main/src/ToolbarSelect.ts
+++ b/packages/main/src/ToolbarSelect.ts
@@ -14,7 +14,7 @@ import ToolbarPopoverSelectTemplate from "./generated/templates/ToolbarPopoverSe
import ToolbarItem from "./ToolbarItem.js";
import Select from "./Select.js";
import Option from "./Option.js";
-import "./ToolbarSelectOption.js";
+import type ToolbarSelectOption from "./ToolbarSelectOption.js";
import type { SelectChangeEventDetail } from "./Select.js";
type ToolbarSelectChangeEventDetail = SelectChangeEventDetail;
@@ -32,13 +32,8 @@ type ToolbarSelectChangeEventDetail = SelectChangeEventDetail;
* <code>import "@ui5/webcomponents/dist/ToolbarSelectOption";</code> (comes with <code>ui5-toolbar-select</code>)
* @constructor
* @abstract
- * @author SAP SE
- * @alias sap.ui.webc.main.ToolbarSelect
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-toolbar-select
- * @appenddocs sap.ui.webc.main.ToolbarSelectOption
+ * @extends UI5Element
* @public
- * @implements sap.ui.webc.main.IToolbarItem
* @since 1.17.0
*/
@customElement({
@@ -49,13 +44,15 @@ type ToolbarSelectChangeEventDetail = SelectChangeEventDetail;
/**
* Fired when the selected option changes.
*
- * @event sap.ui.webc.main.ToolbarSelect#change
* @allowPreventDefault
* @param {HTMLElement} selectedOption the selected option.
* @public
*/
@event("change", {
detail: {
+ /**
+ * @public
+ */
selectedOption: { type: HTMLElement },
},
})
@@ -63,14 +60,12 @@ type ToolbarSelectChangeEventDetail = SelectChangeEventDetail;
/**
* Fired after the component's dropdown menu opens.
*
- * @event sap.ui.webc.main.ToolbarSelect#open
* @public
*/
@event("open")
/**
* Fired after the component's dropdown menu closes.
*
- * @event sap.ui.webc.main.ToolbarSelect#close
* @public
*/
@event("close")
@@ -82,9 +77,7 @@ class ToolbarSelect extends ToolbarItem {
*
* <b>Note:</b> all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.
*
- * @name sap.ui.webc.main.ToolbarSelect.prototype.width
- * @defaultvalue undefined
- * @type { sap.ui.webc.base.types.CSSSize }
+ * @default undefined
* @public
*/
@property({ validator: CSSSize })
@@ -99,21 +92,16 @@ class ToolbarSelect extends ToolbarItem {
*
* <br><br>
* <b>Note:</b> Use the <code>ui5-toolbar-select-option</code> component to define the desired options.
- * @type {sap.ui.webc.main.ISelectOption[]}
- * @slot options
- * @name sap.ui.webc.main.ToolbarSelect.prototype.default
* @public
*/
@slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true })
- options!: Array<Option>;
+ options!: Array<ToolbarSelectOption>;
/**
* Defines the value state of the component.
* <br><br>
*
- * @type {sap.ui.webc.base.types.ValueState}
- * @defaultvalue "None"
- * @name sap.ui.webc.main.ToolbarSelect.prototype.valueState
+ * @default "None"
* @public
*/
@property({ type: ValueState, defaultValue: ValueState.None })
@@ -124,9 +112,7 @@ class ToolbarSelect extends ToolbarItem {
* <br><br>
* <b>Note:</b> A disabled component is noninteractive.
*
- * @type {boolean}
- * @defaultvalue false
- * @name sap.ui.webc.main.ToolbarSelect.prototype.disabled
+ * @default false
* @public
*/
@property({ type: Boolean })
@@ -135,10 +121,8 @@ class ToolbarSelect extends ToolbarItem {
/**
* Defines the accessible ARIA name of the component.
*
- * @type {string}
* @public
- * @defaultvalue ""
- * @name sap.ui.webc.main.ToolbarSelect.prototype.accessibleName
+ * @default ""
*/
@property()
accessibleName!: string;
@@ -146,9 +130,7 @@ class ToolbarSelect extends ToolbarItem {
/**
* Receives id(or many ids) of the elements that label the select.
*
- * @type {string}
- * @defaultvalue ""
- * @name sap.ui.webc.main.ToolbarSelect.prototype.accessibleNameRef
+ * @default ""
* @public
*/
@property()
@@ -206,7 +188,7 @@ class ToolbarSelect extends ToolbarItem {
// update options
const selectedOption = (e as CustomEvent<ToolbarSelectChangeEventDetail>).detail.selectedOption;
const selectedOptionIndex = Number(selectedOption?.getAttribute("data-ui5-external-action-item-index"));
- this.options.forEach((option: Option, index: number) => {
+ this.options.forEach((option: ToolbarSelectOption, index: number) => {
if (index === selectedOptionIndex) {
option.setAttribute("selected", "");
} else {
diff --git a/packages/main/src/ToolbarSelectOption.ts b/packages/main/src/ToolbarSelectOption.ts
index 40382932e378..cdcf7ce8fcd3 100644
--- a/packages/main/src/ToolbarSelectOption.ts
+++ b/packages/main/src/ToolbarSelectOption.ts
@@ -11,12 +11,8 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
* The <code>ui5-toolbar-select-option</code> component defines the content of an option in the <code>ui5-toolbar-select</code>.
*
* @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.ToolbarSelectOption
- * @extends sap.ui.webc.base.UI5Element
+ * @extends UI5Element
* @abstract
- * @tagname ui5-toolbar-select-option
- * @implements sap.ui.webc.main.IToolbarSelectOption
* @public
* @since 1.17.0
*/
@@ -24,9 +20,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
class ToolbarSelectOption extends UI5Element {
/**
* Defines the selected state of the component.
- * @type {boolean}
- * @defaultvalue false
- * @name sap.ui.webc.main.ToolbarSelectOption.prototype.selected
+ * @default false
* @public
*/
@property({ type: Boolean })
@@ -37,9 +31,6 @@ class ToolbarSelectOption extends UI5Element {
* <br><br>
* <b>Note:</b> 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.ToolbarSelectOption.prototype.default
- * @slot
* @public
*/
@slot({ type: Node, "default": true, invalidateOnChildChange: true })
diff --git a/packages/main/src/ToolbarSeparator.ts b/packages/main/src/ToolbarSeparator.ts
index a19c48f86336..a5a32397dc89 100644
--- a/packages/main/src/ToolbarSeparator.ts
+++ b/packages/main/src/ToolbarSeparator.ts
@@ -15,13 +15,9 @@ import ToolbarItem from "./ToolbarItem.js";
* It takes no space in calculating toolbar items width.
*
* @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.ToolbarSeparator
- * @extends sap.ui.webc.main.ToolbarItem
- * @tagname ui5-toolbar-separator
+ * @extends ToolbarItem
* @since 1.17.0
* @abstract
- * @implements sap.ui.webc.main.IToolbarItem
* @public
*/
@customElement({
diff --git a/packages/main/src/ToolbarSpacer.ts b/packages/main/src/ToolbarSpacer.ts
index 3b290a6eb1a3..77751569b665 100644
--- a/packages/main/src/ToolbarSpacer.ts
+++ b/packages/main/src/ToolbarSpacer.ts
@@ -4,6 +4,7 @@ import CSSSize from "@ui5/webcomponents-base/dist/types/CSSSize.js";
import ToolbarSpacerTemplate from "./generated/templates/ToolbarSpacerTemplate.lit.js";
import ToolbarItem from "./ToolbarItem.js";
+
import { registerToolbarItem } from "./ToolbarRegistry.js";
/**
@@ -14,13 +15,9 @@ import { registerToolbarItem } from "./ToolbarRegistry.js";
* It takes no space in calculating toolbar items width.
*
* @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.ToolbarSpacer
- * @extends sap.ui.webc.main.ToolbarItem
- * @tagname ui5-toolbar-spacer
+ * @extends ToolbarItem
* @abstract
* @since 1.17.0
- * @implements sap.ui.webc.main.IToolbarItem
* @public
*/
@customElement({
@@ -35,9 +32,7 @@ class ToolbarSpacer extends ToolbarItem {
* <b>Note:</b> all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.
*
* @public
- * @type { sap.ui.webc.base.types.CSSSize }
- * @name sap.ui.webc.main.ToolbarSpacer.prototype.width
- * @defaultvalue undefined
+ * @default undefined
*/
@property({ validator: CSSSize })
width?: string;
diff --git a/packages/main/src/WheelSlider.ts b/packages/main/src/WheelSlider.ts
index 35b58218fc4f..3aed019606d6 100644
--- a/packages/main/src/WheelSlider.ts
+++ b/packages/main/src/WheelSlider.ts
@@ -38,10 +38,7 @@ type WheelSliderSelectEventDetail = { value: string };
* <code>import "@ui5/webcomponents/dist/WheelSlider.js";</code>
*
* @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 {
@@ -82,9 +83,7 @@ class WheelSlider extends UI5Element {
* A disabled component can't be pressed or
* 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 })
@@ -92,9 +91,7 @@ class WheelSlider extends UI5Element {
/**
* Defines the currently selected value
- * @type {string}
- * @name sap.ui.webc.main.WheelSlider.prototype.value
- * @defaultvalue ""
+ * @default "0"
* @public
*/
@property({ defaultValue: "0" })
@@ -102,9 +99,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: "" })
@@ -112,9 +107,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 })
@@ -122,9 +115,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 })
@@ -327,11 +318,10 @@ class WheelSlider extends UI5Element {
}
/**
+ * The listener for this event can't be passive as it calls preventDefault()
*
- * @param {event} e Wheel Event
+ * @param e Wheel Event
* @private
- *
- * The listener for this event can't be passive as it calls preventDefault()
*/
_handleWheel(e: WheelEvent) {
if (!e) {
diff --git a/packages/main/src/YearPicker.ts b/packages/main/src/YearPicker.ts
index c2a895387c28..007e50f4ec33 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,22 +73,20 @@ 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 {
/**
* 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
+ *
+ * @default []
* @public
*/
@property({
@@ -297,7 +292,8 @@ class YearPicker extends CalendarPart implements ICalendarPicker {
/**
* Sets the timestamp to an absolute value.
- * @param { number } value
+ *
+ * @param value
* @private
*/
_setTimestamp(value: number) {
@@ -307,7 +303,8 @@ 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) {
@@ -326,7 +323,8 @@ class YearPicker extends CalendarPart implements ICalendarPicker {
/**
* User clicked with the mouser or pressed Enter/Space
- * @param { Event } e
+ *
+ * @param e
* @private
*/
_selectYear(e: Event) {
@@ -341,8 +339,8 @@ class YearPicker extends CalendarPart implements ICalendarPicker {
/**
* Called by the Calendar component.
+ *
* @protected
- * @returns { boolean }
*/
_hasPreviousPage(): boolean {
return this._firstYear! > this._minDate.getYear();
@@ -350,8 +348,8 @@ 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();
@@ -360,6 +358,7 @@ class YearPicker extends CalendarPart implements ICalendarPicker {
/**
* Called by the Calendar component.
* <b>Note:</b> when the user presses the "<" button in the calendar header (same as "PageUp")
+ *
* @protected
*/
_showPreviousPage() {
@@ -370,6 +369,7 @@ class YearPicker extends CalendarPart implements ICalendarPicker {
/**
* Called by the Calendar component.
* <b>Note:</b> when the user presses the ">" button in the calendar header (same as "PageDown")
+ *
* @protected
*/
_showNextPage() {
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..ca7e30315a6a 100644
--- a/packages/main/src/types/CalendarPickersMode.ts
+++ b/packages/main/src/types/CalendarPickersMode.ts
@@ -1,32 +1,28 @@
/**
* 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}
+ *
+ * @private
*/
DAY_MONTH_YEAR = "DAY_MONTH_YEAR",
/**
* User can select months and years
- * @public
- * @type {MONTH_YEAR}
+ *
+ * @private
*/
MONTH_YEAR = "MONTH_YEAR",
/**
* User can select years
- * @public
- * @type {MONTH_YEAR}
+ *
+ * @private
*/
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/ListGrowingMode.ts b/packages/main/src/types/ListGrowingMode.ts
index 06980ca28a5d..d51533c18337 100644
--- a/packages/main/src/types/ListGrowingMode.ts
+++ b/packages/main/src/types/ListGrowingMode.ts
@@ -1,32 +1,25 @@
/**
* Different list growing modes.
*
- * @readonly
- * @enum {string}
* @public
- * @author SAP SE
- * @alias sap.ui.webc.main.types.ListGrowingMode
*/
enum ListGrowingMode {
/**
* Component's "load-more" is fired upon pressing a "More" button.
* at the bottom.
* @public
- * @type {Button}
*/
Button = "Button",
/**
* Component's "load-more" is fired upon scroll.
* @public
- * @type {Scroll}
*/
Scroll = "Scroll",
/**
* Component's growing is not enabled.
* @public
- * @type {None}
*/
None = "None",
}
diff --git a/packages/main/src/types/ListItemType.ts b/packages/main/src/types/ListItemType.ts
index 82cc0f71fa60..10ef4ec228c8 100644
--- a/packages/main/src/types/ListItemType.ts
+++ b/packages/main/src/types/ListItemType.ts
@@ -1,38 +1,30 @@
/**
* Different list item types.
*
- * @readonly
- * @enum {string}
* @public
- * @author SAP SE
- * @alias sap.ui.webc.main.types.ListItemType
*/
enum ListItemType {
/**
* Indicates the list item does not have any active feedback when item is pressed.
* @public
- * @type {Inactive}
*/
Inactive = "Inactive",
/**
* Indicates that the item is clickable via active feedback when item is pressed.
* @public
- * @type {Active}
*/
Active = "Active",
/**
* Enables detail button of the list item that fires detail-click event.
* @public
- * @type {Detail}
*/
Detail = "Detail",
/**
* Enables the type of navigation, which is specified to add an arrow at the end of the items and fires navigate-click event.
* @public
- * @type {Navigation}
*/
Navigation = "Navigation",
}
diff --git a/packages/main/src/types/ListMode.ts b/packages/main/src/types/ListMode.ts
index 9a29f6791f50..9310047a74f5 100644
--- a/packages/main/src/types/ListMode.ts
+++ b/packages/main/src/types/ListMode.ts
@@ -1,31 +1,24 @@
/**
* Different list modes.
*
- * @readonly
- * @enum {string}
* @public
- * @author SAP SE
- * @alias sap.ui.webc.main.types.ListMode
*/
enum ListMode {
/**
* Default mode (no selection).
* @public
- * @type {None}
*/
None = "None",
/**
* Right-positioned single selection mode (only one list item can be selected).
* @public
- * @type {SingleSelect}
*/
SingleSelect = "SingleSelect",
/**
* Left-positioned single selection mode (only one list item can be selected).
* @public
- * @type {SingleSelectBegin}
*/
SingleSelectBegin = "SingleSelectBegin",
@@ -33,7 +26,6 @@ enum ListMode {
* Selected item is highlighted but no selection element is visible
* (only one list item can be selected).
* @public
- * @type {SingleSelectEnd}
*/
SingleSelectEnd = "SingleSelectEnd",
@@ -41,21 +33,18 @@ enum ListMode {
* Selected item is highlighted and selection is changed upon arrow navigation
* (only one list item can be selected - this is always the focused item).
* @public
- * @type {SingleSelectAuto}
*/
SingleSelectAuto = "SingleSelectAuto",
/**
* Multi selection mode (more than one list item can be selected).
* @public
- * @type {MultiSelect}
*/
MultiSelect = "MultiSelect",
/**
* Delete mode (only one list item can be deleted via provided delete button)
* @public
- * @type {Delete}
*/
Delete = "Delete",
}
diff --git a/packages/main/src/types/ListSeparators.ts b/packages/main/src/types/ListSeparators.ts
index 98b4fad3ae2b..8032b48b5535 100644
--- a/packages/main/src/types/ListSeparators.ts
+++ b/packages/main/src/types/ListSeparators.ts
@@ -1,30 +1,23 @@
/**
* Different types of list items separators.
*
- * @readonly
- * @enum {string}
* @public
- * @author SAP SE
- * @alias sap.ui.webc.main.types.ListSeparators
*/
enum ListSeparators {
/**
* Separators between the items including the last and the first one.
* @public
- * @type {All}
*/
All = "All",
/**
* Separators between the items.
* Note: This enumeration depends on the theme.
* @public
- * @type {Inner}
*/
Inner = "Inner",
/**
* No item separators.
* @public
- * @type {None}
*/
None = "None",
}
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/ToolbarAlign.ts b/packages/main/src/types/ToolbarAlign.ts
index bb84504bbb13..5cce054a58c1 100644
--- a/packages/main/src/types/ToolbarAlign.ts
+++ b/packages/main/src/types/ToolbarAlign.ts
@@ -1,25 +1,18 @@
/**
* Defines which direction the items of ui5-toolbar will be aligned.
*
- * @readonly
- * @enum {string}
* @public
- * @type {string}
- * @author SAP SE
- * @alias sap.ui.webc.main.types.ToolbarAlign
*/
enum ToolbarAlign {
/**
- * @public
- * @type {Start}
* Toolbar items are situated at the <code>start</code> of the Toolbar
+ * @public
*/
Start = "Start",
/**
- * @public
- * @type {End}
* Toolbar items are situated at the <code>end</code> of the Toolbar
+ * @public
*/
End = "End",
}
diff --git a/packages/main/src/types/ToolbarItemOverflowBehavior.ts b/packages/main/src/types/ToolbarItemOverflowBehavior.ts
index c558db9a1e19..6ce5a1e8c3df 100644
--- a/packages/main/src/types/ToolbarItemOverflowBehavior.ts
+++ b/packages/main/src/types/ToolbarItemOverflowBehavior.ts
@@ -1,32 +1,24 @@
/**
* Defines the priority of the toolbar item to go inside overflow popover.
*
- * @readonly
- * @enum {string}
* @public
- * @type {string}
- * @author SAP SE
- * @alias sap.ui.webc.main.types.ToolbarItemOverflowBehavior
*/
enum ToolbarItemOverflowBehavior {
/**
* The item is presented inside the toolbar and goes in the popover, when there is not enough space.
* @public
- * @type {Default}
*/
Default = "Default",
/**
* When set, the item will never go to the overflow popover.
* @public
- * @type {NeverOverflow}
*/
NeverOverflow = "NeverOverflow",
/**
- * @public
* When set, the item will be always part of the overflow part of ui5-toolbar.
- * @type {AlwaysOverflow}
+ * @public
*/
AlwaysOverflow = "AlwaysOverflow",
}
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/playground/.storybook/args/enhanceArgTypes.ts b/packages/playground/.storybook/args/enhanceArgTypes.ts
index 7426fb784800..8da8f412dfb8 100644
--- a/packages/playground/.storybook/args/enhanceArgTypes.ts
+++ b/packages/playground/.storybook/args/enhanceArgTypes.ts
@@ -25,6 +25,14 @@ export const enhanceArgTypes = <TRenderer extends Renderer>(
) as typeof userArgTypes)
: userArgTypes;
+ Object.keys(withExtractedTypes)
+ .filter(key => key.startsWith("_ui5"))
+ .forEach(argType => {
+ withExtractedTypes[argType].name = withExtractedTypes[argType].name.replace("_ui5", "");
+
+ withExtractedTypes[argType].control = "text"
+ })
+
// enhance descriptions
enhanceArgTypesDescriptions(withExtractedTypes);
return withExtractedTypes;
diff --git a/packages/playground/.storybook/args/enhancers/description/event/EventDescriptionRenderer.tsx b/packages/playground/.storybook/args/enhancers/description/event/EventDescriptionRenderer.tsx
index 302e4e3e94f5..fae8deca2032 100644
--- a/packages/playground/.storybook/args/enhancers/description/event/EventDescriptionRenderer.tsx
+++ b/packages/playground/.storybook/args/enhancers/description/event/EventDescriptionRenderer.tsx
@@ -7,8 +7,8 @@ export class EventDescriptionRenderer implements IDescriptionRenderer {
<React.Fragment key={p.name}>
<b><code>{p.name}</code></b>
<ul>
- <li><b>type:</b> {p.type}</li>
- <li><b>description:</b> {p.description}</li>
+ <li><b>type:</b> {p.type.text}</li>
+ {p.description && <li><b>description:</b> {p.description}</li>}
</ul>
</React.Fragment>
));
diff --git a/packages/playground/.storybook/args/enhancers/description/method/MethodDescriptionRenderer.tsx b/packages/playground/.storybook/args/enhancers/description/method/MethodDescriptionRenderer.tsx
index 56c65efeee65..e63ac22979ec 100644
--- a/packages/playground/.storybook/args/enhancers/description/method/MethodDescriptionRenderer.tsx
+++ b/packages/playground/.storybook/args/enhancers/description/method/MethodDescriptionRenderer.tsx
@@ -8,8 +8,8 @@ export class MethodDescriptionRenderer implements IDescriptionRenderer {
<React.Fragment key={p.name}>
<b><code>{p.name}</code></b>
<ul>
- <li><b>type:</b> {p.type}</li>
- <li><b>description:</b> {p.description}</li>
+ <li><b>type:</b> {p.type.text}</li>
+ {p.description && <li><b>description:</b> {p.description}</li>}
</ul>
</React.Fragment>
));
@@ -31,8 +31,8 @@ export class MethodDescriptionRenderer implements IDescriptionRenderer {
<>
<p><b>Return Value:</b></p>
<ul>
- <li><b>type:</b> {returnValue?.type}</li>
- <li><b>description:</b> {returnValue?.description}</li>
+ <li><b>type:</b> {returnValue?.type?.text}</li>
+ {returnValue?.description && <li><b>description:</b> {returnValue?.description}</li>}
</ul>
</>
);
diff --git a/packages/playground/.storybook/args/types.ts b/packages/playground/.storybook/args/types.ts
index 099202cbd080..dbdd3e628fa6 100644
--- a/packages/playground/.storybook/args/types.ts
+++ b/packages/playground/.storybook/args/types.ts
@@ -8,13 +8,17 @@ export interface IArgTypeEnhancer {
}
export type ReturnValue = {
- type: string;
+ type: {
+ text: string,
+ };
description: string;
};
export type Parameter = {
name: string;
- type: string;
+ type: {
+ text: string
+ };
description: string;
};
diff --git a/packages/playground/build-scripts-storybook/parse-manifest.js b/packages/playground/build-scripts-storybook/parse-manifest.js
index 6b114a134a5d..4e7233f5a588 100644
--- a/packages/playground/build-scripts-storybook/parse-manifest.js
+++ b/packages/playground/build-scripts-storybook/parse-manifest.js
@@ -6,6 +6,8 @@ const path = require("path");
// The following properties are excluded from the members array as they are not truly public.
const EXCLUDE_LIST = [
+ "detachComponentStateFinalized",
+ "attachComponentStateFinalized",
"effectiveDir",
"isUI5Element",
"attachInvalidate",
@@ -28,38 +30,57 @@ const EXCLUDE_LIST = [
];
const loadManifest = () => {
+ let customElementsMain = {};
+ let customElementsFiori = {};
+ let customElementsBase = {};
+
try {
- const customElementsMain = require("@ui5/webcomponents/custom-elements.json");
- const customElementsFiori = require("@ui5/webcomponents-fiori/custom-elements.json");
+ customElementsMain = require("@ui5/webcomponents/custom-elements.json");
- return {
- customElementsMain,
- customElementsFiori,
- };
+ customElementsMain.modules.forEach(module => {
+ applyPackageToDeclarations(module, "@ui5/webcomponents")
+ })
} catch (error) {
- console.log("Error while loading manifests. Did you run 'yarn build'?");
+ console.error("Did you run `yarn build` for packages/main?")
+ }
- if (process.env.NODE_ENV !== "production") {
- return {
- customElementsMain: {},
- customElementsFiori: {},
- };
- }
+ try {
+ customElementsFiori = require("@ui5/webcomponents-fiori/custom-elements.json");
- throw error;
+ customElementsFiori.modules.forEach(module => {
+ applyPackageToDeclarations(module, "@ui5/webcomponents-fiori")
+ })
+ } catch (error) {
+ console.error("Did you run `yarn build` for packages/main?")
}
+
+ try {
+ customElementsBase = require("@ui5/webcomponents-base/custom-elements.json");
+
+ customElementsBase.modules.forEach(module => {
+ applyPackageToDeclarations(module, "@ui5/webcomponents-base")
+ })
+ } catch (error) {
+ console.error("Did you run `yarn build` for packages/main?")
+ }
+
+ return {
+ customElementsMain,
+ customElementsFiori,
+ customElementsBase,
+ };
};
+const applyPackageToDeclarations = (module, package) => {
+ module?.declarations?.forEach(declaration => (declaration._ui5package = package));
+}
+
const parseMembers = (members) => {
const parsed = [];
members.forEach((member) => {
if (EXCLUDE_LIST.indexOf(member.name) > -1) {
return;
}
- if (member.kind === "method") {
- // change kind to property as Storybook does not show methods from the custom-elements.json
- member.kind = "field";
- }
parsed.push(member);
});
return parsed;
@@ -76,6 +97,15 @@ const parseModule = (module) => {
if (declaration.members) {
declaration.members = parseMembers(declaration.members);
}
+ // Storybook remove slots/css parts/properties/events with duplicate names so we add suffix to css parts in order to avoid duplicates.
+ // It can't happen to slots and properties since you can't have duplicate accessors.
+ if (declaration.cssParts) {
+ declaration.cssParts.forEach(part => {
+ if (!part.name.startsWith("_ui5")) {
+ part.name = `_ui5${part.name}`;
+ }
+ });
+ }
return declaration;
});
@@ -98,10 +128,10 @@ const flattenAPIsHierarchicalStructure = module => {
const declarations = module.declarations;
declarations.forEach(declaration => {
- let superclassDeclaration = processedDeclarations.get(declaration.superclass.name);
+ let superclassDeclaration = processedDeclarations.get(`${declaration.superclass?.package}/${declaration.superclass?.name}`);
if (!superclassDeclaration) {
- superclassDeclaration = customElements.modules.find(_m => _m.declarations.find(_d => _d.name === declaration.superclass?.name ));
+ superclassDeclaration = customElements.modules.find(_m => _m.declarations.find(_d => _d.name === declaration.superclass?.name && _d._ui5package === declaration.superclass?.package));
if (superclassDeclaration) {
flattenAPIsHierarchicalStructure(superclassDeclaration);
@@ -109,15 +139,15 @@ const flattenAPIsHierarchicalStructure = module => {
}
if (superclassDeclaration) {
- processedDeclarations.set(declaration.name, mergeClassMembers(declaration, processedDeclarations.get(declaration.superclass.name)));
+ processedDeclarations.set(`${declaration._ui5package}/${declaration.name}`, mergeClassMembers(declaration, processedDeclarations.get(`${declaration.superclass?.package}/${declaration.superclass?.name}`)));
} else {
- processedDeclarations.set(declaration.name, declaration);
+ processedDeclarations.set(`${declaration._ui5package}/${declaration.name}`, declaration);
}
})
}
const mergeClassMembers = (declaration, superclassDeclaration) => {
- const props = ["members", "slots", "events"];
+ const props = ["members", "slots", "events", "cssParts"];
props.forEach(prop => {
if (declaration[prop]?.length) {
@@ -139,11 +169,11 @@ const mergeArraysWithoutDuplicates = (currentValues, newValue) => {
}
-const { customElementsMain, customElementsFiori } = loadManifest();
-const customElements = mergeManifests(customElementsMain, customElementsFiori );
+const { customElementsMain, customElementsFiori, customElementsBase } = loadManifest();
+let customElements = mergeManifests(mergeManifests(customElementsMain, customElementsFiori), customElementsBase);
const processedDeclarations = new Map();
-customElements.modules.forEach(flattenAPIsHierarchicalStructure)
+customElements.modules?.forEach(flattenAPIsHierarchicalStructure);
fs.writeFileSync(
path.join(__dirname, "../.storybook/custom-elements.json"),
diff --git a/packages/playground/build-scripts-storybook/samples-prepare.js b/packages/playground/build-scripts-storybook/samples-prepare.js
deleted file mode 100644
index 0176229d25c8..000000000000
--- a/packages/playground/build-scripts-storybook/samples-prepare.js
+++ /dev/null
@@ -1,156 +0,0 @@
-const fs = require('fs/promises');
-const path = require('path');
-
-const STORIES_ROOT_FOLDER_NAME = '../_stories';
-const NUMERIC_TYPES = ["sap.ui.webc.base.types.Integer", "sap.ui.webc.base.types.Float"];
-const STRING_TYPES = ["sap.ui.webc.base.types.CSSColor", "sap.ui.webc.base.types.DOMReference"];
-
-// run the script to generate the argTypes for the stories available in the _stories folder
-const main = async () => {
-
- const baseAPI = JSON.parse((await fs.readFile(`../base/dist/api.json`)).toString());
-
- // read all directories inside _stories folder and create a list of components
- const packages = await fs.readdir(path.join(__dirname, STORIES_ROOT_FOLDER_NAME));
- for (const package of packages) {
- // packages [main, fiori]
- const api = JSON.parse((await fs.readFile(`../${package}/dist/api.json`)).toString());
-
- const packagePath = path.join(__dirname, STORIES_ROOT_FOLDER_NAME, package);
- const packageStats = await fs.stat(packagePath);
- if (packageStats.isDirectory()) {
- const componentsInPackage = await fs.readdir(packagePath);
- for (const component of componentsInPackage) {
- // components [Button, Card, ...]
- const componentPath = path.join(packagePath, component);
- const componentStats = await fs.stat(componentPath);
- if (componentStats.isDirectory()) {
- generateStoryDoc(componentPath, component, api, package);
- }
- }
- }
- }
-
- async function generateStoryDoc(componentPath, component, api, package) {
- console.log(`Generating argTypes for story ${component}`);
- const apiData = getAPIData(api, component, package);
- const { storyArgsTypes, slotNames, info } = apiData;
-
- await fs.writeFile(componentPath + '/argTypes.ts', `export default ${storyArgsTypes};
-export const componentInfo = ${JSON.stringify(info, null, 4)};
-export type StoryArgsSlots = {
- ${slotNames.map(slotName => `${slotName}: string;`).join('\n ')}
-}`);
- };
-
- function getAPIData(api, module, package) {
- const moduleAPI = api.symbols.find(s => s.module === module);
- const data = getArgsTypes(api, moduleAPI);
-
- return {
- info: {
- package: `@ui5/webcomponents${package !== 'main' ? `-${package}` : ''}`,
- since: moduleAPI.since
- },
- slotNames: data.slotNames,
- storyArgsTypes: JSON.stringify(data.args, null, "\t")
- };
- }
-
- function getArgsTypes(api, moduleAPI) {
- let args = {};
- let slotNames = [];
-
- moduleAPI?.properties?.forEach(prop => {
- if (prop.visibility === 'public') {
- const typeEnum = api.symbols.find(s => s.name === prop.type) || baseAPI.symbols.find(s => s.name === prop.type);
- if (prop.readonly) {
- args[prop.name] = {
- control: {
- type: false
- },
- };
- } else if (Array.isArray(typeEnum?.properties)) {
- args[prop.name] = {
- control: "select",
- options: typeEnum.properties.map(a => a.type),
- };
- } else if (NUMERIC_TYPES.includes(typeEnum?.name)) {
- args[prop.name] = {
- control: {
- type: "number"
- },
- };
- } else if (STRING_TYPES.includes(typeEnum?.name)) {
- args[prop.name] = {
- control: {
- type: "text"
- },
- };
- }
- }
- });
-
- moduleAPI?.slots?.forEach(prop => {
- if (prop.visibility === 'public') {
- args[prop.name] = {
- control: {
- type: "text"
- }
- };
- slotNames.push(prop.name);
- }
- });
-
- // methods parsing because Storybook does not include them in the args by default from the custom-elements.json
- // only changing the category to Methods so they are not displayed in the Properties tab
- moduleAPI?.methods?.forEach((prop) => {
- if (prop.visibility === "public") {
- args[prop.name] = {
- description: prop.description,
- table: {
- category: "methods",
- },
- };
-
- // methods can have custom descriptions with parameters and return value
- if (prop.parameters || prop.returnValue) {
- args[prop.name].UI5CustomData = {
- parameters: prop.parameters,
- returnValue: prop.returnValue,
- }
- }
- }
- });
-
- // events also have custom descriptions with parameters of their detail object
- moduleAPI?.events?.forEach((prop) => {
- if (prop.visibility === "public" && prop.parameters) {
- args[prop.name] = {
- description: prop.description,
- table: {
- category: "events",
- },
- UI5CustomData: {
- parameters: prop.parameters,
- },
- };
- }
- });
-
- // recursively merging the args from the parent/parents
- const moduleAPIBeingExtended = api.symbols.find(s => s.name === moduleAPI.extends) || baseAPI.symbols.find(s => s.module === moduleAPI.extends);
- if (moduleAPIBeingExtended) {
- const { args: nextArgs, slotNames: nextSlotNames } = getArgsTypes(api, moduleAPIBeingExtended);
- args = { ...args, ...nextArgs };
- slotNames = [...slotNames, ...nextSlotNames].filter((v, i, a) => a.indexOf(v) === i);
- }
-
- return {
- args,
- slotNames
- };
- }
-};
-
-main();
diff --git a/packages/playground/build-scripts-storybook/samples-prepare.ts b/packages/playground/build-scripts-storybook/samples-prepare.ts
new file mode 100644
index 000000000000..06cb1c644d4b
--- /dev/null
+++ b/packages/playground/build-scripts-storybook/samples-prepare.ts
@@ -0,0 +1,248 @@
+import fs from "fs/promises";
+import path from "path";
+import type {
+ ClassDeclaration,
+ CustomElementDeclaration,
+ Package,
+ Parameter,
+ Type,
+ ClassField,
+ ClassMethod,
+ EnumDeclaration,
+ InterfaceDeclaration,
+ FunctionDeclaration,
+ CustomElementMixinDeclaration,
+ MixinDeclaration,
+ VariableDeclaration
+} from "@ui5/webcomponents-tools/lib/cem/types-internal";
+
+const STORIES_ROOT_FOLDER_NAME = '../_stories';
+
+const isCustomElementDeclaration = (object: any): object is CustomElementDeclaration => {
+ return "customElement" in object && object.customElement;
+};
+
+type Declaration = CustomElementDeclaration | EnumDeclaration | ClassDeclaration | InterfaceDeclaration | FunctionDeclaration | MixinDeclaration | VariableDeclaration | CustomElementMixinDeclaration
+
+type ControlType = "text" | "select" | "multi-select" | boolean;
+
+type ArgsTypes = Record<string, {
+ control?: ControlType | { type: ControlType };
+ description?: string;
+ mapping?: Record<string, Record<string, any>>;
+ name?: string;
+ options?: string[];
+ table?: {
+ category?: string;
+ defaultValue?: { summary: string; detail?: string };
+ subcategory?: string;
+ type?: { summary?: string; detail?: string };
+ };
+ UI5CustomData?: {
+ parameters?: Array<Parameter>;
+ returnValue?: {
+ description?: string;
+ summary?: string;
+ type?: Type;
+ };
+ };
+}>;
+
+type APIData = {
+ info: {
+ package: string;
+ since: string | undefined;
+ };
+ slotNames: Array<string>;
+ storyArgsTypes: string;
+};
+
+// run the script to generate the argTypes for the stories available in the _stories folder
+const main = async () => {
+ const api: Package = JSON.parse((await fs.readFile(`./.storybook/custom-elements.json`)).toString());
+
+ // read all directories inside _stories folder and create a list of components
+ const packages = await fs.readdir(path.join(__dirname, STORIES_ROOT_FOLDER_NAME));
+ for (const currPackage of packages) {
+ // packages [main, fiori]
+ const packagePath = path.join(__dirname, STORIES_ROOT_FOLDER_NAME, currPackage);
+ const packageStats = await fs.stat(packagePath);
+ if (packageStats.isDirectory()) {
+ const componentsInPackage = await fs.readdir(packagePath);
+ for (const component of componentsInPackage) {
+ // components [Button, Card, ...]
+ const componentPath = path.join(packagePath, component);
+ const componentStats = await fs.stat(componentPath);
+ if (componentStats.isDirectory()) {
+ generateStoryDoc(componentPath, component, api, currPackage);
+ }
+ }
+ }
+ }
+};
+
+const generateStoryDoc = async (componentPath: string, component: string, api: Package, componentPackage: string) => {
+ console.log(`Generating argTypes for story ${component}`);
+ const apiData = getAPIData(api, component, componentPackage);
+
+ if (!apiData) {
+ return;
+ }
+
+ const { storyArgsTypes, slotNames, info } = apiData;
+
+ await fs.writeFile(componentPath + '/argTypes.ts', `export default ${storyArgsTypes};
+export const componentInfo = ${JSON.stringify(info, null, 4)};
+export type StoryArgsSlots = {
+ ${slotNames.map(slotName => `${slotName}: string;`).join('\n ')}
+}`);
+};
+
+const getAPIData = (api: Package, module: string, componentPackage: string): APIData | undefined => {
+ const moduleAPI = api.modules?.find(currModule => currModule.declarations?.find(s => s.name === module && s._ui5package === `@ui5/webcomponents${componentPackage !== 'main' ? `-${componentPackage}` : ''}`));
+ const declaration = moduleAPI?.declarations?.find(s => s.name === module && s._ui5package === `@ui5/webcomponents${componentPackage !== 'main' ? `-${componentPackage}` : ''}`);
+
+ if (!declaration) {
+ return;
+ }
+
+ const data = getArgsTypes(api, declaration as CustomElementDeclaration);
+
+ return {
+ info: {
+ package: `@ui5/webcomponents${componentPackage !== 'main' ? `-${componentPackage}` : ''}`,
+ since: (declaration as CustomElementDeclaration)?._ui5since
+ },
+ slotNames: data.slotNames,
+ storyArgsTypes: JSON.stringify(data.args, null, "\t")
+ };
+};
+
+const getArgsTypes = (api: Package, moduleAPI: CustomElementDeclaration | ClassDeclaration) => {
+ let args: ArgsTypes = {};
+ let slotNames: string[] = [];
+
+ moduleAPI.members
+ ?.filter((member): member is ClassField => "kind" in member && member.kind === "field")
+ .forEach(prop => {
+ let typeEnum: EnumDeclaration | undefined;
+
+ if (prop.type?.references?.length) {
+ for (const currModule of api.modules) {
+ if (!currModule.declarations) {
+ continue;
+ }
+
+ for (const s of currModule.declarations) {
+ if (s.name === prop.type?.references[0].name && s._ui5package === prop.type?.references[0].package && s.kind === "enum") {
+ typeEnum = s;
+ break;
+ }
+ }
+ }
+ }
+
+ if (prop.readonly) {
+ args[prop.name] = {
+ control: {
+ type: false
+ },
+ };
+ } else if (typeEnum && Array.isArray(typeEnum.members)) {
+ args[prop.name] = {
+ control: "select",
+ options: typeEnum.members.map(a => a.name),
+ };
+ }
+ });
+
+ if (isCustomElementDeclaration(moduleAPI)) {
+ moduleAPI.slots?.forEach(prop => {
+ args[prop.name] = {
+ control: {
+ type: "text"
+ },
+ table: {
+ type: {
+ summary: prop._ui5type?.text
+ }
+ }
+ };
+ slotNames.push(prop.name);
+ });
+ }
+
+ moduleAPI.members
+ ?.filter((member): member is ClassMethod => "kind" in member && member.kind === "method")
+ .forEach((prop) => {
+ args[prop.name] = {
+ description: prop.description,
+ table: {
+ category: "methods",
+ },
+ };
+
+ if (prop.parameters || prop.return) {
+ args[prop.name].UI5CustomData = {
+ parameters: prop.parameters,
+ returnValue: prop.return,
+ };
+ }
+
+ (prop as unknown as ClassField).kind = "field";
+ });
+
+ // events also have custom descriptions with parameters of their detail objec
+ if (isCustomElementDeclaration(moduleAPI)) {
+ moduleAPI.events?.forEach((prop) => {
+ if (prop._ui5privacy === "public" && prop._ui5parameters?.length) {
+ args[prop.name] = {
+ description: prop.description,
+ control: {
+ type: false
+ },
+ table: {
+ category: "events",
+ },
+ UI5CustomData: {
+ parameters: prop._ui5parameters,
+ },
+ };
+ }
+ });
+ }
+
+ const packages = ["@ui5/webcomponents", "@ui5/webcomponents-fiori"];
+
+ // recursively merging the args from the parent/parents
+ let moduleAPIBeingExtended;
+
+ if (moduleAPI.superclass && api.modules) {
+ for (const currModule of api.modules) {
+ if (!currModule.declarations || !moduleAPI.superclass?.name || !moduleAPI.superclass?.package) {
+ continue;
+ }
+
+ moduleAPIBeingExtended = findReference(currModule.declarations, moduleAPI.superclass?.name, moduleAPI.superclass.package);
+ }
+ }
+
+ const referencePackage = moduleAPIBeingExtended?._ui5package;
+
+ if (moduleAPIBeingExtended && referencePackage && packages.includes(referencePackage)) {
+ const { args: nextArgs, slotNames: nextSlotNames } = getArgsTypes(api, moduleAPIBeingExtended as ClassDeclaration);
+ args = { ...args, ...nextArgs };
+ slotNames = [...slotNames, ...nextSlotNames].filter((v, i, a) => a.indexOf(v) === i);
+ }
+
+ return {
+ args,
+ slotNames
+ };
+};
+
+const findReference = (something: Array<Declaration>, componentName: string, componentPackage: string): Declaration | undefined => {
+ return something.find(s => s.name === componentName && s._ui5package === componentPackage)
+}
+
+main();
diff --git a/packages/playground/package.json b/packages/playground/package.json
index 2f0f5a9ff252..b134f6840621 100644
--- a/packages/playground/package.json
+++ b/packages/playground/package.json
@@ -51,7 +51,7 @@
"prepare:build:nojekyll": "copy-and-watch \"./.nojekyll\" \"./dist\"",
"prepare:build:pages": "npm run clean:pages && vite-node ./build-scripts-storybook/pages-prepare.ts",
"prepare:assets": "npm run clean:assets && npm run copy:assets",
- "prepare:samples": "node ./build-scripts-storybook/samples-prepare.js",
+ "prepare:samples": "vite-node ./build-scripts-storybook/samples-prepare.ts",
"prepare:manifest": "node ./build-scripts-storybook/parse-manifest.js",
"prepare:documentation": "vite-node ./build-scripts-storybook/documentation-prepare.ts",
"storybook": "npm-run-all --parallel prepare:* && storybook dev -p 6006",
diff --git a/packages/tools/components-package/eslint.js b/packages/tools/components-package/eslint.js
index 47c39bcd9cc2..85684865f3c9 100644
--- a/packages/tools/components-package/eslint.js
+++ b/packages/tools/components-package/eslint.js
@@ -27,7 +27,9 @@ const overrides = tsMode ? [{
"@typescript-eslint/no-unsafe-call": "off",
"@typescript-eslint/no-non-null-assertion": "off",
"@typescript-eslint/no-empty-function": "off",
+ "@typescript-eslint/no-empty-interface": "off",
"lines-between-class-members": "off",
+ "@typescript-eslint/no-empty-interface": "off",
}
}] : [];
diff --git a/packages/tools/components-package/nps.js b/packages/tools/components-package/nps.js
index 5200860880a3..69588fdc40a5 100644
--- a/packages/tools/components-package/nps.js
+++ b/packages/tools/components-package/nps.js
@@ -131,6 +131,8 @@ const getScripts = (options) => {
},
generateAPI: {
default: "nps generateAPI.prepare generateAPI.preprocess generateAPI.jsdoc generateAPI.cleanup generateAPI.prepareManifest",
+ generateCEM: `cem analyze --config "${LIB}/cem/custom-elements-manifest.config.mjs"`,
+ validateCEM: `node "${LIB}/cem/validate.js"`,
prepare: `node "${LIB}/copy-and-watch/index.js" --silent "dist/**/*.js" jsdoc-dist/`,
prepareManifest: `node "${LIB}/generate-custom-elements-manifest/index.js" dist dist`,
preprocess: `node "${preprocessJSDocScript}" jsdoc-dist/ src`,
diff --git a/packages/tools/lib/cem/custom-elements-manifest.config.mjs b/packages/tools/lib/cem/custom-elements-manifest.config.mjs
new file mode 100644
index 000000000000..afec7e72679a
--- /dev/null
+++ b/packages/tools/lib/cem/custom-elements-manifest.config.mjs
@@ -0,0 +1,370 @@
+import { parse } from "comment-parser";
+import processEvent from "./event.mjs";
+import {
+ getDeprecatedStatus,
+ getSinceStatus,
+ getPrivacyStatus,
+ getReference,
+ validateJSDocComment,
+ findDecorator,
+ findAllDecorators,
+ hasTag,
+ findTag,
+ findAllTags,
+ getJSDocErrors,
+ getTypeRefs,
+} from "./utils.mjs";
+
+function processClass(ts, classNode, moduleDoc) {
+ const className = classNode?.name?.text;
+ const currClass = moduleDoc?.declarations?.find(declaration => declaration?.name === className);
+ const currClassJSdoc = classNode?.jsDoc?.[0] || classNode?.jsDoc?.find(jsDoc => jsDoc?.[0]?.getText?.()?.includes("@class"));
+
+ if (!currClassJSdoc) return;
+
+ const customElementDecorator = findDecorator(classNode, "customElement");
+ const classParsedJsDoc = parse(currClassJSdoc?.getText())[0];
+
+ validateJSDocComment("class", classParsedJsDoc, classNode.name?.text, moduleDoc);
+
+ const decoratorArg = customElementDecorator?.expression?.arguments[0];
+ currClass.tagName = decoratorArg?.text || (decoratorArg?.properties.find(property => property.name.text === "tag")?.initializer?.text);
+ currClass.customElement = !!decoratorArg;
+ currClass.kind = "class";
+ currClass.deprecated = getDeprecatedStatus(classParsedJsDoc);
+ currClass._ui5since = getSinceStatus(classParsedJsDoc);
+ currClass._ui5privacy = getPrivacyStatus(classParsedJsDoc);
+ currClass._ui5abstract = hasTag(classParsedJsDoc, "abstract") ? true : undefined;
+ currClass.description = classParsedJsDoc.description || findTag(classParsedJsDoc, "class")?.description;
+ currClass._ui5implements = findAllTags(classParsedJsDoc, "implements")
+ .map(tag => getReference(ts, tag.type, classNode, moduleDoc.path))
+ .filter(Boolean);
+
+
+ if (hasTag(classParsedJsDoc, "extends")) {
+ const superclassTag = findTag(classParsedJsDoc, "extends");
+ currClass.superclass = getReference(ts, superclassTag.name, classNode, moduleDoc.path);
+ }
+
+ if (!currClass._ui5implements.length) delete currClass._ui5implements;
+
+ // Slots
+
+ // Slots without accessort (defined in class comment)
+ if (hasTag(classParsedJsDoc, "slot") && currClass.slots) {
+ const slotTags = findAllTags(classParsedJsDoc, "slot");
+
+ currClass.slots.forEach(slot => {
+ const tag = slotTags.find(tag => tag.name === slot.name);
+
+ const typeRefs = (tag.type
+ ?.replaceAll(/Array<|>|\[\]/g, "")
+ ?.split("|")
+ ?.map(e => getReference(ts, e.trim(), classNode, moduleDoc.path)).filter(Boolean));
+
+ slot._ui5privacy = "public";
+ slot._ui5type = { text: tag.type };
+
+ if (typeRefs && typeRefs.length) {
+ slot._ui5type.references = typeRefs;
+ }
+
+ delete slot.type
+ })
+ }
+
+ // Events
+ currClass.events = findAllDecorators(classNode, "event")
+ ?.map(event => processEvent(ts, event, classNode, moduleDoc));
+
+ // Slots (with accessor), methods and fields
+ for (let i = 0; i < (currClass.members?.length || 0); i++) {
+ const member = currClass.members[i];
+ const classNodeMember = classNode.members?.find(nodeMember => nodeMember.name?.text === member?.name);
+ const classNodeMemberJSdoc = classNodeMember?.jsDoc?.[0];
+
+ if (!classNodeMember || !classNodeMemberJSdoc) continue;
+
+ const memberParsedJsDoc = parse(classNodeMemberJSdoc?.getText())[0];
+
+ member._ui5since = getSinceStatus(memberParsedJsDoc);
+ member.deprecated === "true" && (member.deprecated = true)
+
+ // Slots with accessors are treated like fields by the tool, so we have to convert them into slots.
+ if (member.kind === "field") {
+ const slotDecorator = findDecorator(classNodeMember, "slot");
+ validateJSDocComment(slotDecorator ? "slot" : (member.readonly ? "getter" : "field"), memberParsedJsDoc, classNodeMember.name?.text, moduleDoc);
+
+ const typeRefs = (getTypeRefs(ts, classNodeMember, member)
+ ?.map(e => getReference(ts, e, classNodeMember, moduleDoc.path)).filter(Boolean)) || [];
+
+ if (member.type && typeRefs.length) {
+ member.type.references = typeRefs;
+ }
+
+ if (slotDecorator) {
+ if (!currClass.slots) currClass.slots = [];
+
+ const slot = currClass.members.splice(i, 1)[0];
+ const defaultProperty = slotDecorator.expression?.arguments?.[0]?.properties?.find(property => property.name.text === "default");
+
+ // name of the default slot declared with decorator will be overriden so we to provide it's accessor name
+ if (defaultProperty && defaultProperty.initializer?.kind === ts.SyntaxKind.TrueKeyword) {
+ slot._ui5propertyName = slot.name;
+ slot.name = "default";
+ }
+
+ // Slots don't have type, privacy and kind, so we have do convert them and to clean unused props
+ member._ui5type = member.type;
+ member._ui5privacy = member.privacy;
+ delete member.type;
+ delete member.privacy;
+ delete slot.kind;
+
+ currClass.slots.push(slot);
+ i--;
+ } else {
+ if (hasTag(memberParsedJsDoc, "formProperty")) {
+ member._ui5formProperty = true;
+ }
+
+ const formEventsTag = findTag(memberParsedJsDoc, "formEvents");
+ if (formEventsTag) {
+ const tagValue = formEventsTag.description ? `${formEventsTag.name} ${formEventsTag.description}` : formEventsTag.name;
+ member._ui5formEvents = tagValue.trim().replaceAll(/\s+/g, ",");
+ }
+
+ const defaultTag = findTag(memberParsedJsDoc, "default");
+ if (defaultTag) {
+ const tagValue = defaultTag.source?.[0]?.tokens?.name || defaultTag.source?.[0]?.tokens?.description || defaultTag.source?.[0]?.tokens?.type || "";
+ member.default = tagValue;
+ }
+
+ if (member.privacy === "public") {
+ const JSDocErrors = getJSDocErrors();
+ if (member.readonly && !member.type) {
+ JSDocErrors.push(
+ `=== ERROR: Problem found with ${member.name}'s JSDoc comment in ${moduleDoc.path}: Missing return type`
+ );
+ }
+
+ if (!member.default) {
+ JSDocErrors.push(
+ `=== ERROR: Problem found with ${member.name}'s JSDoc comment in ${moduleDoc.path}: Default value is missing`
+ );
+ }
+ }
+
+ // Getters are treated as fields so they should not have return, instead of return they should have default value defined with @default
+ if (member.readonly) {
+ if (member.privacy === "public" && !member.type) {
+ const JSDocErrors = getJSDocErrors();
+
+ JSDocErrors.push(
+ `=== ERROR: Problem found with ${member.name}'s JSDoc comment in ${moduleDoc.path}: Missing return type`
+ );
+ }
+
+ delete member.return;
+ }
+ }
+ } else if (member.kind === "method") {
+ validateJSDocComment("method", memberParsedJsDoc, classNodeMember.name?.text, moduleDoc);
+
+ member.parameters?.forEach(param => {
+ // Treat every parameter that has respective @param tag as public
+ param._ui5privacy = findAllTags(memberParsedJsDoc, "param").some(tag => tag.name === param.name) ? "public" : "private";
+ const paramNode = classNodeMember.parameters?.find(parameter => parameter.name?.text === param.name);
+
+ const typeRefs = (getTypeRefs(ts, paramNode, param)
+ ?.map(typeRef => getReference(ts, typeRef, classNodeMember, moduleDoc.path)).filter(Boolean)) || [];
+
+ if (typeRefs.length) {
+ param.type.references = typeRefs;
+ }
+ });
+
+ if (member.return) {
+ const returnTag = findTag(memberParsedJsDoc, "returns");
+ member.return.description = returnTag?.description ? `${returnTag.name} ${returnTag.description}` : returnTag?.name;
+ member.return.type.text = classNodeMember?.type?.getFullText?.()?.trim();
+ const typeRefs = (getTypeRefs(ts, classNodeMember, member.return)
+ ?.map(typeRef => getReference(ts, typeRef, classNodeMember, moduleDoc.path)).filter(Boolean)) || [];
+
+ if (typeRefs.length) {
+ member.return.type.references = typeRefs;
+ }
+ }
+
+ if (member.privacy === "public" && !member.return) {
+ const JSDocErrors = getJSDocErrors();
+
+ JSDocErrors.push(
+ `=== ERROR: Problem found with ${member.name}'s JSDoc comment in ${moduleDoc.path}: Missing return type`
+ );
+ }
+ }
+ }
+}
+
+function processInterface(ts, interfaceNode, moduleDoc) {
+ const interfaceJSdoc = interfaceNode?.jsDoc?.[0];
+ const interfaceName = interfaceNode?.name?.text;
+
+ if (!interfaceJSdoc) return;
+
+ const interfaceParsedJsDoc = parse(interfaceJSdoc?.getText())[0];
+
+ validateJSDocComment("interface", interfaceParsedJsDoc, interfaceNode.name?.text, moduleDoc);
+
+ moduleDoc.declarations.push({
+ kind: "interface",
+ name: interfaceName,
+ description: interfaceParsedJsDoc?.description,
+ _ui5privacy: getPrivacyStatus(interfaceParsedJsDoc),
+ _ui5since: getSinceStatus(interfaceParsedJsDoc),
+ deprecated: getDeprecatedStatus(interfaceParsedJsDoc),
+ });
+}
+
+function processEnum(ts, enumNode, moduleDoc) {
+ const enumJSdoc = enumNode?.jsDoc?.[0];
+ const enumName = enumNode?.name?.text;
+
+ if (!enumJSdoc) return;
+
+ const enumParsedJsDoc = parse(enumJSdoc?.getText())[0];
+
+ validateJSDocComment("enum", enumParsedJsDoc, enumNode.name?.text, moduleDoc);
+
+ const result = {
+ kind: "enum",
+ name: enumName,
+ description: enumJSdoc?.comment,
+ _ui5privacy: getPrivacyStatus(enumParsedJsDoc),
+ _ui5since: getSinceStatus(enumParsedJsDoc),
+ deprecated: getDeprecatedStatus(enumParsedJsDoc) || undefined,
+ members: (enumNode?.members || []).map(member => {
+ const memberJSdoc = member?.jsDoc?.[0];
+
+ if (!memberJSdoc) return;
+
+ const memberParsedJsDoc = parse(memberJSdoc?.getText())[0];
+
+ validateJSDocComment("enum", memberParsedJsDoc, member.name?.text, moduleDoc);
+
+ return {
+ kind: "field",
+ static: true,
+ privacy: getPrivacyStatus(memberParsedJsDoc),
+ _ui5since: getSinceStatus(memberParsedJsDoc),
+ description: memberJSdoc?.comment,
+ default: member.initializer?.text,
+ deprecated: getDeprecatedStatus(memberParsedJsDoc),
+ name: member.name?.text,
+ readonly: true,
+ };
+ }).filter(Boolean),
+ };
+
+ moduleDoc.declarations.push(result);
+}
+
+const processPublicAPI = object => {
+ if (!object) {
+ return true;
+ }
+ const keys = Object.keys(object);
+ if (!keys.includes("privacy") && !keys.includes("_ui5privacy")) {
+ return true;
+ }
+ for (const key of keys) {
+ if ((key === "privacy" && object[key] !== "public") || (key === "_ui5privacy" && object[key] !== "public")) {
+ return true;
+ } else if (typeof object[key] === "object") {
+ if (key === "cssParts" || key === "_ui5implements") {
+ continue;
+ }
+
+ if (Array.isArray(object[key])) {
+ for (let i = 0; i < object[key].length; i++) {
+ const shouldRemove = processPublicAPI(object[key][i]);
+ if (shouldRemove) {
+ object[key].splice(i, 1);
+ i--;
+ }
+ }
+ if (object[key].length === 0) {
+ delete object[key];
+ } else {
+ object[key].sort(function (a, b) {
+ if (a.name < b.name) {
+ return -1;
+ }
+ if (a.name > b.name) {
+ return 1;
+ }
+ return 0;
+ });
+ }
+ }
+ }
+ }
+ return false;
+};
+
+export default {
+ globs: ["src/!(*generated)/*.ts", "src/*.ts"],
+ outdir: 'dist',
+ plugins: [
+ {
+ name: 'my-plugin',
+ analyzePhase({ ts, node, moduleDoc }) {
+ switch (true) {
+ case ts.isClassDeclaration(node):
+ processClass(ts, node, moduleDoc);
+ break;
+ case ts.isEnumDeclaration(node):
+ processEnum(ts, node, moduleDoc);
+ break;
+ case ts.isInterfaceDeclaration(node):
+ processInterface(ts, node, moduleDoc);
+ break;
+ }
+ },
+ moduleLinkPhase({ moduleDoc }) {
+ for (let i = 0; i < moduleDoc.declarations.length; i++) {
+ const shouldRemove = processPublicAPI(moduleDoc.declarations[i]) || ["function", "variable"].includes(moduleDoc.declarations[i].kind)
+ if (shouldRemove) {
+ moduleDoc.declarations.splice(i, 1);
+ i--;
+ }
+ }
+
+ moduleDoc.exports?.forEach(e => {
+ const classNode = moduleDoc.declarations.find(c => c.name === e.declaration.name);
+
+ if (classNode?.customElement && e.kind !== "custom-element-definition") {
+ moduleDoc.exports.push({
+ kind: "custom-element-definition",
+ name: classNode.tagName,
+ declaration: {
+ name: e.declaration.name,
+ module: e.declaration.module
+ }
+ })
+ }
+ })
+ },
+ packageLinkPhase() {
+ // Uncomment and handle errors appropriately
+ const JSDocErrors = getJSDocErrors();
+ if (JSDocErrors.length > 0) {
+ console.log(JSDocErrors.join("\n"));
+ console.log(`Invalid JSDoc. ${JSDocErrors.length} were found.`);
+ throw new Error(`Invalid JSDoc.`);
+ }
+ }
+ },
+ ],
+};
diff --git a/packages/tools/lib/cem/event.mjs b/packages/tools/lib/cem/event.mjs
new file mode 100644
index 000000000000..1bf7eb2fe1f2
--- /dev/null
+++ b/packages/tools/lib/cem/event.mjs
@@ -0,0 +1,112 @@
+import { parse } from "comment-parser";
+import {
+ getPrivacyStatus,
+ getDeprecatedStatus,
+ getSinceStatus,
+ getType,
+ validateJSDocComment,
+ hasTag,
+ findTag,
+ findAllTags,
+ getReference
+} from "./utils.mjs";
+
+const jsDocRegExp = /\/\*\*(.|\n)+?\s+\*\//;
+
+const getParams = (ts, eventDetails, commentParams, classNode, moduleDoc) => {
+ return commentParams?.map(commentParam => {
+ const decoratorParam = eventDetails?.find(prop => prop?.name?.text === commentParam?.name);
+
+ if (!decoratorParam || !decoratorParam?.jsDoc?.[0]) {
+ return;
+ }
+
+ const decoratorParamParsedComment = parse(decoratorParam?.jsDoc?.[0]?.getText?.())[0];
+
+ validateJSDocComment("eventParam", decoratorParamParsedComment, decoratorParam.name?.text, moduleDoc);
+
+ const { typeName, name } = getType(commentParam?.type);
+ let type;
+
+ if (typeName) {
+ type = { text: typeName };
+
+ let typeRefs = name?.split("|")
+ ?.map(e => getReference(ts, e.trim(), classNode, moduleDoc.path))
+ .filter(Boolean);
+
+ if (typeRefs?.length) {
+ type.references = typeRefs;
+ }
+ }
+
+ return {
+ type,
+ name: commentParam?.name,
+ _ui5privacy: getPrivacyStatus(decoratorParamParsedComment),
+ description: commentParam?.description,
+ _ui5since: getSinceStatus(decoratorParamParsedComment),
+ deprecated: getDeprecatedStatus(decoratorParamParsedComment),
+ };
+ }).filter(pair => !!pair);
+};
+
+function processEvent(ts, event, classNode, moduleDoc) {
+ const result = {
+ name: event?.expression?.arguments?.[0]?.text,
+ _ui5privacy: "private",
+ type: { text: "CustomEvent" }
+ };
+
+ const comment = event.getFullText?.().match(jsDocRegExp)?.[0];
+
+ if (!comment) {
+ return result;
+ }
+
+ const eventParsedComment = parse(comment)[0];
+
+ validateJSDocComment("event", eventParsedComment, event?.expression?.arguments?.[0]?.text, moduleDoc);
+
+ const deprecatedTag = findTag(eventParsedComment, "deprecated");
+ const privacy = findTag(eventParsedComment, ["public", "private", "protected"])?.tag || "private";
+ const sinceTag = findTag(eventParsedComment, "since");
+ const commentParams = findAllTags(eventParsedComment, "param");
+ const allowPreventDefault = hasTag(eventParsedComment, "allowPreventDefault") || undefined;
+ const description = eventParsedComment?.description;
+ const native = hasTag(eventParsedComment, "native");
+ const eventDetails = event?.expression?.arguments?.[1]?.properties?.find(prop => prop?.name?.text === "detail")?.initializer?.properties;
+
+ result.description = description;
+ result._ui5allowPreventDefault = allowPreventDefault;
+
+ if (native) {
+ result.type = { text: "Event" };
+ }
+
+ if (privacy) {
+ result._ui5privacy = privacy;
+ }
+
+ if (deprecatedTag?.name) {
+ result.deprecated = deprecatedTag.description
+ ? `${deprecatedTag.name} ${deprecatedTag.description}`
+ : deprecatedTag.name;
+ } else if (deprecatedTag) {
+ result.deprecated = true;
+ }
+
+ if (sinceTag?.name) {
+ result._ui5since = sinceTag?.description
+ ? `${sinceTag.name} ${sinceTag.description}`
+ : sinceTag.name;
+ }
+
+ if (commentParams && eventDetails) {
+ result._ui5parameters = getParams(ts, eventDetails, commentParams, classNode, moduleDoc);
+ }
+
+ return result;
+}
+
+export default processEvent;
diff --git a/packages/tools/lib/cem/schema-internal.json b/packages/tools/lib/cem/schema-internal.json
new file mode 100644
index 000000000000..0acb3b7c932c
--- /dev/null
+++ b/packages/tools/lib/cem/schema-internal.json
@@ -0,0 +1,1352 @@
+{
+ "$schema": "http://json-schema.org/draft-07/schema#",
+ "definitions": {
+ "Attribute": {
+ "properties": {
+ "default": {
+ "description": "The default value of the attribute, if any.\n\nAs attributes are always strings, this is the actual value, not a human\nreadable description.",
+ "type": "string"
+ },
+ "deprecated": {
+ "description": "Whether the attribute is deprecated.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "description": {
+ "description": "A markdown description.",
+ "type": "string"
+ },
+ "fieldName": {
+ "description": "The name of the field this attribute is associated with, if any.",
+ "type": "string"
+ },
+ "inheritedFrom": {
+ "$ref": "#/definitions/Reference"
+ },
+ "name": {
+ "type": "string"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ },
+ "type": {
+ "$ref": "#/definitions/Type",
+ "description": "The type that the attribute will be serialized/deserialized as."
+ }
+ },
+ "required": [
+ "name"
+ ],
+ "type": "object"
+ },
+ "ClassDeclaration": {
+ "properties": {
+ "_ui5implements": {
+ "items": {
+ "$ref": "#/definitions/Reference"
+ },
+ "type": "array"
+ },
+ "_ui5privacy": {
+ "$ref": "#/definitions/Privacy"
+ },
+ "_ui5since": {
+ "description": "Marks when the field was",
+ "type": "string"
+ },
+ "deprecated": {
+ "description": "Whether the class or mixin is deprecated.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "description": {
+ "description": "A markdown description of the class.",
+ "type": "string"
+ },
+ "kind": {
+ "enum": [
+ "class"
+ ],
+ "type": "string"
+ },
+ "members": {
+ "items": {
+ "anyOf": [
+ {
+ "$ref": "#/definitions/ClassField"
+ },
+ {
+ "$ref": "#/definitions/ClassMethod"
+ }
+ ]
+ },
+ "type": "array"
+ },
+ "mixins": {
+ "description": "Any class mixins applied in the extends clause of this class.\n\nIf mixins are applied in the class definition, then the true superclass\nof this class is the result of applying mixins in order to the superclass.\n\nMixins must be listed in order of their application to the superclass or\nprevious mixin application. This means that the innermost mixin is listed\nfirst. This may read backwards from the common order in JavaScript, but\nmatches the order of language used to describe mixin application, like\n\"S with A, B\".",
+ "items": {
+ "$ref": "#/definitions/Reference"
+ },
+ "type": "array"
+ },
+ "name": {
+ "type": "string"
+ },
+ "source": {
+ "$ref": "#/definitions/SourceReference"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ },
+ "superclass": {
+ "$ref": "#/definitions/Reference",
+ "description": "The superclass of this class.\n\nIf this class is defined with mixin applications, the prototype chain\nincludes the mixin applications and the true superclass is computed\nfrom them."
+ }
+ },
+ "required": [
+ "kind",
+ "name"
+ ],
+ "type": "object"
+ },
+ "EnumDeclaration": {
+ "properties": {
+ "_ui5privacy": {
+ "$ref": "#/definitions/Privacy"
+ },
+ "_ui5since": {
+ "description": "Marks when the field was introduced",
+ "type": "string"
+ },
+ "deprecated": {
+ "description": "Whether the class or mixin is deprecated.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "description": {
+ "description": "A markdown description of the class.",
+ "type": "string"
+ },
+ "kind": {
+ "enum": [
+ "enum"
+ ],
+ "type": "string"
+ },
+ "members": {
+ "items": {
+ "$ref": "#/definitions/EnumField"
+ },
+ "type": "array"
+ },
+ "mixins": {
+ "description": "Any class mixins applied in the extends clause of this class.\n\nIf mixins are applied in the class definition, then the true superclass\nof this class is the result of applying mixins in order to the superclass.\n\nMixins must be listed in order of their application to the superclass or\nprevious mixin application. This means that the innermost mixin is listed\nfirst. This may read backwards from the common order in JavaScript, but\nmatches the order of language used to describe mixin application, like\n\"S with A, B\".",
+ "items": {
+ "$ref": "#/definitions/Reference"
+ },
+ "type": "array"
+ },
+ "name": {
+ "type": "string"
+ },
+ "source": {
+ "$ref": "#/definitions/SourceReference"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ },
+ "superclass": {
+ "$ref": "#/definitions/Reference",
+ "description": "The superclass of this class.\n\nIf this class is defined with mixin applications, the prototype chain\nincludes the mixin applications and the true superclass is computed\nfrom them."
+ }
+ },
+ "required": [
+ "kind",
+ "name"
+ ],
+ "type": "object"
+ },
+ "InterfaceDeclaration": {
+ "properties": {
+ "_ui5privacy": {
+ "$ref": "#/definitions/Privacy"
+ },
+ "_ui5since": {
+ "description": "Marks when the field was introduced",
+ "type": "string"
+ },
+ "deprecated": {
+ "description": "Whether the class or mixin is deprecated.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "description": {
+ "description": "A markdown description of the class.",
+ "type": "string"
+ },
+ "kind": {
+ "enum": [
+ "interface"
+ ],
+ "type": "string"
+ },
+ "mixins": {
+ "description": "Any class mixins applied in the extends clause of this class.\n\nIf mixins are applied in the class definition, then the true superclass\nof this class is the result of applying mixins in order to the superclass.\n\nMixins must be listed in order of their application to the superclass or\nprevious mixin application. This means that the innermost mixin is listed\nfirst. This may read backwards from the common order in JavaScript, but\nmatches the order of language used to describe mixin application, like\n\"S with A, B\".",
+ "items": {
+ "$ref": "#/definitions/Reference"
+ },
+ "type": "array"
+ },
+ "name": {
+ "type": "string"
+ },
+ "source": {
+ "$ref": "#/definitions/SourceReference"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ },
+ "superclass": {
+ "$ref": "#/definitions/Reference",
+ "description": "The superclass of this class.\n\nIf this class is defined with mixin applications, the prototype chain\nincludes the mixin applications and the true superclass is computed\nfrom them."
+ }
+ },
+ "required": [
+ "kind",
+ "name"
+ ],
+ "type": "object"
+ },
+ "ClassField": {
+ "properties": {
+ "_ui5formProperty": {
+ "type": "boolean"
+ },
+ "_ui5formEvents": {
+ "type": "string"
+ },
+ "_ui5since": {
+ "description": "Marks when the field was introduced",
+ "type": "string"
+ },
+ "default": {
+ "type": "string"
+ },
+ "deprecated": {
+ "description": "Whether the property is deprecated.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "description": {
+ "description": "A markdown description of the field.",
+ "type": "string"
+ },
+ "inheritedFrom": {
+ "$ref": "#/definitions/Reference"
+ },
+ "kind": {
+ "enum": [
+ "field"
+ ],
+ "type": "string"
+ },
+ "name": {
+ "type": "string"
+ },
+ "privacy": {
+ "$ref": "#/definitions/Privacy"
+ },
+ "readonly": {
+ "description": "Whether the property is read-only.",
+ "type": "boolean"
+ },
+ "source": {
+ "$ref": "#/definitions/SourceReference"
+ },
+ "static": {
+ "type": "boolean"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ },
+ "type": {
+ "$ref": "#/definitions/Type"
+ }
+ },
+ "required": [
+ "kind",
+ "name"
+ ],
+ "type": "object"
+ },
+ "EnumField": {
+ "properties": {
+ "_ui5since": {
+ "description": "Marks when the field was introduced",
+ "type": "string"
+ },
+ "deprecated": {
+ "description": "Whether the property is deprecated.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "description": {
+ "description": "A markdown description of the field.",
+ "type": "string"
+ },
+ "inheritedFrom": {
+ "$ref": "#/definitions/Reference"
+ },
+ "kind": {
+ "enum": [
+ "field"
+ ],
+ "type": "string"
+ },
+ "name": {
+ "type": "string"
+ },
+ "privacy": {
+ "$ref": "#/definitions/Privacy"
+ },
+ "source": {
+ "$ref": "#/definitions/SourceReference"
+ },
+ "static": {
+ "type": "boolean"
+ },
+ "readonly": {
+ "description": "Whether the property is read-only.",
+ "type": "boolean"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ }
+ },
+ "required": [
+ "kind",
+ "name"
+ ],
+ "type": "object"
+ },
+ "ClassMethod": {
+ "properties": {
+ "_ui5since": {
+ "description": "Marks when the field was introduced",
+ "type": "string"
+ },
+ "deprecated": {
+ "description": "Whether the function is deprecated.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "description": {
+ "description": "A markdown description.",
+ "type": "string"
+ },
+ "inheritedFrom": {
+ "$ref": "#/definitions/Reference"
+ },
+ "kind": {
+ "enum": [
+ "method"
+ ],
+ "type": "string"
+ },
+ "name": {
+ "type": "string"
+ },
+ "parameters": {
+ "items": {
+ "$ref": "#/definitions/Parameter"
+ },
+ "type": "array"
+ },
+ "privacy": {
+ "$ref": "#/definitions/Privacy"
+ },
+ "return": {
+ "properties": {
+ "description": {
+ "description": "A markdown description.",
+ "type": "string"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ },
+ "type": {
+ "$ref": "#/definitions/Type"
+ }
+ },
+ "type": "object"
+ },
+ "source": {
+ "$ref": "#/definitions/SourceReference"
+ },
+ "static": {
+ "type": "boolean"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ }
+ },
+ "required": [
+ "kind",
+ "name"
+ ],
+ "type": "object"
+ },
+ "CssCustomProperty": {
+ "properties": {
+ "default": {
+ "type": "string"
+ },
+ "deprecated": {
+ "description": "Whether the CSS custom property is deprecated.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "description": {
+ "description": "A markdown description.",
+ "type": "string"
+ },
+ "name": {
+ "description": "The name of the property, including leading `--`.",
+ "type": "string"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ },
+ "syntax": {
+ "description": "The expected syntax of the defined property. Defaults to \"*\".\n\nThe syntax must be a valid CSS [syntax string](https://developer.mozilla.org/en-US/docs/Web/CSS/@property/syntax)\nas defined in the CSS Properties and Values API.\n\nExamples:\n\n\"<color>\": accepts a color\n\"<length> | <percentage>\": accepts lengths or percentages but not calc expressions with a combination of the two\n\"small | medium | large\": accepts one of these values set as custom idents.\n\"*\": any valid token",
+ "type": "string"
+ }
+ },
+ "required": [
+ "name"
+ ],
+ "type": "object"
+ },
+ "CssPart": {
+ "description": "The description of a CSS Part",
+ "properties": {
+ "deprecated": {
+ "description": "Whether the CSS shadow part is deprecated.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "description": {
+ "description": "A markdown description.",
+ "type": "string"
+ },
+ "name": {
+ "type": "string"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ }
+ },
+ "required": [
+ "name"
+ ],
+ "type": "object"
+ },
+ "CustomElementDeclaration": {
+ "description": "A description of a custom element class.\n\nCustom elements are JavaScript classes, so this extends from\n`ClassDeclaration` and adds custom-element-specific features like\nattributes, events, and slots.\n\nNote that `tagName` in this interface is optional. Tag names are not\nneccessarily part of a custom element class, but belong to the definition\n(often called the \"registration\") or the `customElements.define()` call.\n\nBecause classes and tag names can only be registered once, there's a\none-to-one relationship between classes and tag names. For ease of use,\nwe allow the tag name here.\n\nSome packages define and register custom elements in separate modules. In\nthese cases one `Module` should contain the `CustomElement` without a\ntagName, and another `Module` should contain the\n`CustomElementExport`.",
+ "properties": {
+ "_ui5implements": {
+ "items": {
+ "$ref": "#/definitions/Reference"
+ },
+ "type": "array"
+ },
+ "_ui5abstract": {
+ "type": "boolean"
+ },
+ "_ui5privacy": {
+ "$ref": "#/definitions/Privacy"
+ },
+ "_ui5since": {
+ "description": "Marks when the field was introduced",
+ "type": "string"
+ },
+ "attributes": {
+ "description": "The attributes that this element is known to understand.",
+ "items": {
+ "$ref": "#/definitions/Attribute"
+ },
+ "type": "array"
+ },
+ "cssParts": {
+ "items": {
+ "$ref": "#/definitions/CssPart"
+ },
+ "type": "array"
+ },
+ "cssProperties": {
+ "items": {
+ "$ref": "#/definitions/CssCustomProperty"
+ },
+ "type": "array"
+ },
+ "customElement": {
+ "description": "Distinguishes a regular JavaScript class from a\ncustom element class",
+ "enum": [
+ true
+ ],
+ "type": "boolean"
+ },
+ "demos": {
+ "items": {
+ "$ref": "#/definitions/Demo"
+ },
+ "type": "array"
+ },
+ "deprecated": {
+ "description": "Whether the class or mixin is deprecated.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "description": {
+ "description": "A markdown description of the class.",
+ "type": "string"
+ },
+ "events": {
+ "description": "The events that this element fires.",
+ "items": {
+ "$ref": "#/definitions/Event"
+ },
+ "type": "array"
+ },
+ "kind": {
+ "enum": [
+ "class"
+ ],
+ "type": "string"
+ },
+ "members": {
+ "items": {
+ "anyOf": [
+ {
+ "$ref": "#/definitions/ClassField"
+ },
+ {
+ "$ref": "#/definitions/ClassMethod"
+ }
+ ]
+ },
+ "type": "array"
+ },
+ "mixins": {
+ "description": "Any class mixins applied in the extends clause of this class.\n\nIf mixins are applied in the class definition, then the true superclass\nof this class is the result of applying mixins in order to the superclass.\n\nMixins must be listed in order of their application to the superclass or\nprevious mixin application. This means that the innermost mixin is listed\nfirst. This may read backwards from the common order in JavaScript, but\nmatches the order of language used to describe mixin application, like\n\"S with A, B\".",
+ "items": {
+ "$ref": "#/definitions/Reference"
+ },
+ "type": "array"
+ },
+ "name": {
+ "type": "string"
+ },
+ "slots": {
+ "description": "The shadow dom content slots that this element accepts.",
+ "items": {
+ "$ref": "#/definitions/Slot"
+ },
+ "type": "array"
+ },
+ "source": {
+ "$ref": "#/definitions/SourceReference"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ },
+ "superclass": {
+ "$ref": "#/definitions/Reference",
+ "description": "The superclass of this class.\n\nIf this class is defined with mixin applications, the prototype chain\nincludes the mixin applications and the true superclass is computed\nfrom them."
+ },
+ "tagName": {
+ "description": "An optional tag name that should be specified if this is a\nself-registering element.\n\nSelf-registering elements must also include a CustomElementExport\nin the module's exports.",
+ "type": "string"
+ }
+ },
+ "required": [
+ "customElement",
+ "kind",
+ "name"
+ ],
+ "type": "object"
+ },
+ "CustomElementExport": {
+ "description": "A global custom element defintion, ie the result of a\n`customElements.define()` call.\n\nThis is represented as an export because a definition makes the element\navailable outside of the module it's defined it.",
+ "properties": {
+ "declaration": {
+ "$ref": "#/definitions/Reference",
+ "description": "A reference to the class or other declaration that implements the\ncustom element."
+ },
+ "deprecated": {
+ "description": "Whether the custom-element export is deprecated.\nFor example, a future version will not register the custom element in this file.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "kind": {
+ "enum": [
+ "custom-element-definition"
+ ],
+ "type": "string"
+ },
+ "name": {
+ "description": "The tag name of the custom element.",
+ "type": "string"
+ }
+ },
+ "required": [
+ "declaration",
+ "kind",
+ "name"
+ ],
+ "type": "object"
+ },
+ "CustomElementMixinDeclaration": {
+ "description": "A class mixin that also adds custom element related properties.",
+ "properties": {
+ "attributes": {
+ "description": "The attributes that this element is known to understand.",
+ "items": {
+ "$ref": "#/definitions/Attribute"
+ },
+ "type": "array"
+ },
+ "cssParts": {
+ "items": {
+ "$ref": "#/definitions/CssPart"
+ },
+ "type": "array"
+ },
+ "cssProperties": {
+ "items": {
+ "$ref": "#/definitions/CssCustomProperty"
+ },
+ "type": "array"
+ },
+ "customElement": {
+ "description": "Distinguishes a regular JavaScript class from a\ncustom element class",
+ "enum": [
+ true
+ ],
+ "type": "boolean"
+ },
+ "demos": {
+ "items": {
+ "$ref": "#/definitions/Demo"
+ },
+ "type": "array"
+ },
+ "deprecated": {
+ "description": "Whether the class or mixin is deprecated.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "description": {
+ "description": "A markdown description of the class.",
+ "type": "string"
+ },
+ "events": {
+ "description": "The events that this element fires.",
+ "items": {
+ "$ref": "#/definitions/Event"
+ },
+ "type": "array"
+ },
+ "kind": {
+ "enum": [
+ "mixin"
+ ],
+ "type": "string"
+ },
+ "members": {
+ "items": {
+ "anyOf": [
+ {
+ "$ref": "#/definitions/ClassField"
+ },
+ {
+ "$ref": "#/definitions/ClassMethod"
+ }
+ ]
+ },
+ "type": "array"
+ },
+ "mixins": {
+ "description": "Any class mixins applied in the extends clause of this class.\n\nIf mixins are applied in the class definition, then the true superclass\nof this class is the result of applying mixins in order to the superclass.\n\nMixins must be listed in order of their application to the superclass or\nprevious mixin application. This means that the innermost mixin is listed\nfirst. This may read backwards from the common order in JavaScript, but\nmatches the order of language used to describe mixin application, like\n\"S with A, B\".",
+ "items": {
+ "$ref": "#/definitions/Reference"
+ },
+ "type": "array"
+ },
+ "name": {
+ "type": "string"
+ },
+ "parameters": {
+ "items": {
+ "$ref": "#/definitions/Parameter"
+ },
+ "type": "array"
+ },
+ "return": {
+ "properties": {
+ "description": {
+ "description": "A markdown description.",
+ "type": "string"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ },
+ "type": {
+ "$ref": "#/definitions/Type"
+ }
+ },
+ "type": "object"
+ },
+ "slots": {
+ "description": "The shadow dom content slots that this element accepts.",
+ "items": {
+ "$ref": "#/definitions/Slot"
+ },
+ "type": "array"
+ },
+ "source": {
+ "$ref": "#/definitions/SourceReference"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ },
+ "superclass": {
+ "$ref": "#/definitions/Reference",
+ "description": "The superclass of this class.\n\nIf this class is defined with mixin applications, the prototype chain\nincludes the mixin applications and the true superclass is computed\nfrom them."
+ },
+ "tagName": {
+ "description": "An optional tag name that should be specified if this is a\nself-registering element.\n\nSelf-registering elements must also include a CustomElementExport\nin the module's exports.",
+ "type": "string"
+ }
+ },
+ "required": [
+ "customElement",
+ "kind",
+ "name"
+ ],
+ "type": "object"
+ },
+ "Demo": {
+ "properties": {
+ "description": {
+ "description": "A markdown description of the demo.",
+ "type": "string"
+ },
+ "source": {
+ "$ref": "#/definitions/SourceReference"
+ },
+ "url": {
+ "description": "Relative URL of the demo if it's published with the package. Absolute URL\nif it's hosted.",
+ "type": "string"
+ }
+ },
+ "required": [
+ "url"
+ ],
+ "type": "object"
+ },
+ "Event": {
+ "properties": {
+ "_ui5parameters": {
+ "items": {
+ "$ref": "#/definitions/Parameter"
+ },
+ "type": "array"
+ },
+ "_ui5privacy": {
+ "$ref": "#/definitions/Privacy"
+ },
+ "_ui5allowPreventDefault": {
+ "description": "Whether the parameter is optional. Undefined implies non-optional.",
+ "type": "boolean"
+ },
+ "_ui5since": {
+ "description": "Marks when the field was introduced",
+ "type": "string"
+ },
+ "deprecated": {
+ "description": "Whether the event is deprecated.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "description": {
+ "description": "A markdown description.",
+ "type": "string"
+ },
+ "inheritedFrom": {
+ "$ref": "#/definitions/Reference"
+ },
+ "name": {
+ "type": "string"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ },
+ "type": {
+ "$ref": "#/definitions/Type",
+ "description": "The type of the event object that's fired."
+ }
+ },
+ "required": [
+ "name",
+ "type"
+ ],
+ "type": "object"
+ },
+ "FunctionDeclaration": {
+ "properties": {
+ "_ui5since": {
+ "description": "Marks when the field was introduced",
+ "type": "string"
+ },
+ "deprecated": {
+ "description": "Whether the function is deprecated.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "description": {
+ "description": "A markdown description.",
+ "type": "string"
+ },
+ "kind": {
+ "enum": [
+ "function"
+ ],
+ "type": "string"
+ },
+ "name": {
+ "type": "string"
+ },
+ "parameters": {
+ "items": {
+ "$ref": "#/definitions/Parameter"
+ },
+ "type": "array"
+ },
+ "return": {
+ "properties": {
+ "description": {
+ "description": "A markdown description.",
+ "type": "string"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ },
+ "type": {
+ "$ref": "#/definitions/Type"
+ }
+ },
+ "type": "object"
+ },
+ "source": {
+ "$ref": "#/definitions/SourceReference"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ }
+ },
+ "required": [
+ "kind",
+ "name"
+ ],
+ "type": "object"
+ },
+ "JavaScriptExport": {
+ "properties": {
+ "declaration": {
+ "$ref": "#/definitions/Reference",
+ "description": "A reference to the exported declaration.\n\nIn the case of aggregating exports, the reference's `module` field must be\ndefined and the `name` field must be `\"*\"`."
+ },
+ "deprecated": {
+ "description": "Whether the export is deprecated. For example, the name of the export was changed.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "kind": {
+ "enum": [
+ "js"
+ ],
+ "type": "string"
+ },
+ "name": {
+ "description": "The name of the exported symbol.\n\nJavaScript has a number of ways to export objects which determine the\ncorrect name to use.\n\n- Default exports must use the name \"default\".\n- Named exports use the name that is exported. If the export is renamed\n with the \"as\" clause, use the exported name.\n- Aggregating exports (`* from`) should use the name `*`",
+ "type": "string"
+ }
+ },
+ "required": [
+ "declaration",
+ "kind",
+ "name"
+ ],
+ "type": "object"
+ },
+ "JavaScriptModule": {
+ "properties": {
+ "declarations": {
+ "description": "The declarations of a module.\n\nFor documentation purposes, all declarations that are reachable from\nexports should be described here. Ie, functions and objects that may be\nproperties of exported objects, or passed as arguments to functions.",
+ "items": {
+ "anyOf": [
+ {
+ "$ref": "#/definitions/ClassDeclaration"
+ },
+ {
+ "$ref": "#/definitions/EnumDeclaration"
+ },
+ {
+ "$ref": "#/definitions/InterfaceDeclaration"
+ },
+ {
+ "$ref": "#/definitions/FunctionDeclaration"
+ },
+ {
+ "$ref": "#/definitions/MixinDeclaration"
+ },
+ {
+ "$ref": "#/definitions/VariableDeclaration"
+ },
+ {
+ "$ref": "#/definitions/CustomElementDeclaration"
+ },
+ {
+ "$ref": "#/definitions/CustomElementMixinDeclaration"
+ }
+ ]
+ },
+ "type": "array"
+ },
+ "deprecated": {
+ "description": "Whether the module is deprecated.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "description": {
+ "description": "A markdown description of the module.",
+ "type": "string"
+ },
+ "exports": {
+ "description": "The exports of a module. This includes JavaScript exports and\ncustom element definitions.",
+ "items": {
+ "anyOf": [
+ {
+ "$ref": "#/definitions/JavaScriptExport"
+ },
+ {
+ "$ref": "#/definitions/CustomElementExport"
+ }
+ ]
+ },
+ "type": "array"
+ },
+ "kind": {
+ "enum": [
+ "javascript-module"
+ ],
+ "type": "string"
+ },
+ "path": {
+ "description": "Path to the javascript file needed to be imported. \n(not the path for example to a typescript file.)",
+ "type": "string"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ }
+ },
+ "required": [
+ "kind",
+ "path"
+ ],
+ "type": "object"
+ },
+ "MixinDeclaration": {
+ "description": "A description of a class mixin.\n\nMixins are functions which generate a new subclass of a given superclass.\nThis interfaces describes the class and custom element features that\nare added by the mixin. As such, it extends the CustomElement interface and\nClassLike interface.\n\nSince mixins are functions, it also extends the FunctionLike interface. This\nmeans a mixin is callable, and has parameters and a return type.\n\nThe return type is often hard or impossible to accurately describe in type\nsystems like TypeScript. It requires generics and an `extends` operator\nthat TypeScript lacks. Therefore it's recommended that the return type is\nleft empty. The most common form of a mixin function takes a single\nargument, so consumers of this interface should assume that the return type\nis the single argument subclassed by this declaration.\n\nA mixin should not have a superclass. If a mixins composes other mixins,\nthey should be listed in the `mixins` field.\n\nSee [this article]{@link https://justinfagnani.com/2015/12/21/real-mixins-with-javascript-classes/}\nfor more information on the classmixin pattern in JavaScript.",
+ "properties": {
+ "deprecated": {
+ "description": "Whether the class or mixin is deprecated.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "description": {
+ "description": "A markdown description of the class.",
+ "type": "string"
+ },
+ "kind": {
+ "enum": [
+ "mixin"
+ ],
+ "type": "string"
+ },
+ "members": {
+ "items": {
+ "anyOf": [
+ {
+ "$ref": "#/definitions/ClassField"
+ },
+ {
+ "$ref": "#/definitions/ClassMethod"
+ }
+ ]
+ },
+ "type": "array"
+ },
+ "mixins": {
+ "description": "Any class mixins applied in the extends clause of this class.\n\nIf mixins are applied in the class definition, then the true superclass\nof this class is the result of applying mixins in order to the superclass.\n\nMixins must be listed in order of their application to the superclass or\nprevious mixin application. This means that the innermost mixin is listed\nfirst. This may read backwards from the common order in JavaScript, but\nmatches the order of language used to describe mixin application, like\n\"S with A, B\".",
+ "items": {
+ "$ref": "#/definitions/Reference"
+ },
+ "type": "array"
+ },
+ "name": {
+ "type": "string"
+ },
+ "parameters": {
+ "items": {
+ "$ref": "#/definitions/Parameter"
+ },
+ "type": "array"
+ },
+ "return": {
+ "properties": {
+ "description": {
+ "description": "A markdown description.",
+ "type": "string"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ },
+ "type": {
+ "$ref": "#/definitions/Type"
+ }
+ },
+ "type": "object"
+ },
+ "source": {
+ "$ref": "#/definitions/SourceReference"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ },
+ "superclass": {
+ "$ref": "#/definitions/Reference",
+ "description": "The superclass of this class.\n\nIf this class is defined with mixin applications, the prototype chain\nincludes the mixin applications and the true superclass is computed\nfrom them."
+ }
+ },
+ "required": [
+ "kind",
+ "name"
+ ],
+ "type": "object"
+ },
+ "Parameter": {
+ "properties": {
+ "_ui5privacy": {
+ "$ref": "#/definitions/Privacy"
+ },
+ "_ui5since": {
+ "description": "Marks when the field was introduced",
+ "type": "string"
+ },
+ "default": {
+ "type": "string"
+ },
+ "deprecated": {
+ "description": "Whether the property is deprecated.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "description": {
+ "description": "A markdown description of the field.",
+ "type": "string"
+ },
+ "name": {
+ "type": "string"
+ },
+ "optional": {
+ "description": "Whether the parameter is optional. Undefined implies non-optional.",
+ "type": "boolean"
+ },
+ "readonly": {
+ "description": "Whether the property is read-only.",
+ "type": "boolean"
+ },
+ "rest": {
+ "description": "Whether the parameter is a rest parameter. Only the last parameter may be a rest parameter.\nUndefined implies single parameter.",
+ "type": "boolean"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ },
+ "type": {
+ "$ref": "#/definitions/Type"
+ }
+ },
+ "required": [
+ "name"
+ ],
+ "type": "object"
+ },
+ "Privacy": {
+ "enum": [
+ "private",
+ "protected",
+ "public"
+ ],
+ "type": "string"
+ },
+ "Reference": {
+ "description": "A reference to an export of a module.\n\nAll references are required to be publically accessible, so the canonical\nrepresentation of a reference is the export it's available from.\n\n`package` should generally refer to an npm package name. If `package` is\nundefined then the reference is local to this package. If `module` is\nundefined the reference is local to the containing module.\n\nReferences to global symbols like `Array`, `HTMLElement`, or `Event` should\nuse a `package` name of `\"global:\"`.",
+ "properties": {
+ "module": {
+ "type": "string"
+ },
+ "name": {
+ "type": "string"
+ },
+ "package": {
+ "type": "string"
+ }
+ },
+ "required": [
+ "name"
+ ],
+ "type": "object"
+ },
+ "Slot": {
+ "properties": {
+ "_ui5type": {
+ "$ref": "#/definitions/Type"
+ },
+ "_ui5privacy": {
+ "$ref": "#/definitions/Privacy"
+ },
+ "_ui5since": {
+ "description": "Marks when the field was introduced",
+ "type": "string"
+ },
+ "deprecated": {
+ "description": "Whether the slot is deprecated.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "description": {
+ "description": "A markdown description.",
+ "type": "string"
+ },
+ "name": {
+ "description": "The slot name, or the empty string for an unnamed slot.",
+ "type": "string"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ }
+ },
+ "required": [
+ "name"
+ ],
+ "type": "object"
+ },
+ "SourceReference": {
+ "description": "A reference to the source of a declaration or member.",
+ "properties": {
+ "href": {
+ "description": "An absolute URL to the source (ie. a GitHub URL).",
+ "type": "string"
+ }
+ },
+ "required": [
+ "href"
+ ],
+ "type": "object"
+ },
+ "Type": {
+ "properties": {
+ "references": {
+ "description": "An array of references to the types in the type string.\n\nThese references have optional indices into the type string so that tools\ncan understand the references in the type string independently of the type\nsystem and syntax. For example, a documentation viewer could display the\ntype `Array<FooElement | BarElement>` with cross-references to `FooElement`\nand `BarElement` without understanding arrays, generics, or union types.",
+ "items": {
+ "$ref": "#/definitions/TypeReference"
+ },
+ "type": "array"
+ },
+ "source": {
+ "$ref": "#/definitions/SourceReference"
+ },
+ "text": {
+ "description": "The full string representation of the type, in whatever type syntax is\nused, such as JSDoc, Closure, or TypeScript.",
+ "type": "string"
+ }
+ },
+ "required": [
+ "text"
+ ],
+ "type": "object"
+ },
+ "TypeReference": {
+ "description": "A reference that is associated with a type string and optionally a range\nwithin the string.\n\nStart and end must both be present or not present. If they're present, they\nare indices into the associated type string. If they are missing, the entire\ntype string is the symbol referenced and the name should match the type\nstring.",
+ "properties": {
+ "end": {
+ "type": "number"
+ },
+ "module": {
+ "type": "string"
+ },
+ "name": {
+ "type": "string"
+ },
+ "package": {
+ "type": "string"
+ },
+ "start": {
+ "type": "number"
+ }
+ },
+ "required": [
+ "name"
+ ],
+ "type": "object"
+ },
+ "VariableDeclaration": {
+ "properties": {
+ "default": {
+ "type": "string"
+ },
+ "deprecated": {
+ "description": "Whether the property is deprecated.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "description": {
+ "description": "A markdown description of the field.",
+ "type": "string"
+ },
+ "kind": {
+ "enum": [
+ "variable"
+ ],
+ "type": "string"
+ },
+ "name": {
+ "type": "string"
+ },
+ "readonly": {
+ "description": "Whether the property is read-only.",
+ "type": "boolean"
+ },
+ "source": {
+ "$ref": "#/definitions/SourceReference"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ },
+ "type": {
+ "$ref": "#/definitions/Type"
+ }
+ },
+ "required": [
+ "kind",
+ "name"
+ ],
+ "type": "object"
+ }
+ },
+ "description": "The top-level interface of a custom elements manifest file.\n\nBecause custom elements are JavaScript classes, describing a custom element\nmay require describing arbitrary JavaScript concepts like modules, classes,\nfunctions, etc. So custom elements manifests are capable of documenting\nthe elements in a package, as well as those JavaScript concepts.\n\nThe modules described in a package should be the public entrypoints that\nother packages may import from. Multiple modules may export the same object\nvia re-exports, but in most cases a package should document the single\ncanonical export that should be used.",
+ "properties": {
+ "deprecated": {
+ "description": "Whether the package is deprecated.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "modules": {
+ "description": "An array of the modules this package contains.",
+ "items": {
+ "$ref": "#/definitions/JavaScriptModule"
+ },
+ "type": "array"
+ },
+ "readme": {
+ "description": "The Markdown to use for the main readme of this package.\n\nThis can be used to override the readme used by Github or npm if that\nfile contains information irrelevant to custom element catalogs and\ndocumentation viewers.",
+ "type": "string"
+ },
+ "schemaVersion": {
+ "description": "The version of the schema used in this file.",
+ "type": "string"
+ }
+ },
+ "required": [
+ "modules",
+ "schemaVersion"
+ ],
+ "type": "object"
+}
\ No newline at end of file
diff --git a/packages/tools/lib/cem/schema.json b/packages/tools/lib/cem/schema.json
new file mode 100644
index 000000000000..963c8ce7351d
--- /dev/null
+++ b/packages/tools/lib/cem/schema.json
@@ -0,0 +1,1098 @@
+{
+ "$schema": "http://json-schema.org/draft-07/schema#",
+ "definitions": {
+ "Attribute": {
+ "properties": {
+ "default": {
+ "description": "The default value of the attribute, if any.\n\nAs attributes are always strings, this is the actual value, not a human\nreadable description.",
+ "type": "string"
+ },
+ "deprecated": {
+ "description": "Whether the attribute is deprecated.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "description": {
+ "description": "A markdown description.",
+ "type": "string"
+ },
+ "fieldName": {
+ "description": "The name of the field this attribute is associated with, if any.",
+ "type": "string"
+ },
+ "inheritedFrom": {
+ "$ref": "#/definitions/Reference"
+ },
+ "name": {
+ "type": "string"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ },
+ "type": {
+ "$ref": "#/definitions/Type",
+ "description": "The type that the attribute will be serialized/deserialized as."
+ }
+ },
+ "required": [
+ "name"
+ ],
+ "type": "object"
+ },
+ "ClassDeclaration": {
+ "properties": {
+ "deprecated": {
+ "description": "Whether the class or mixin is deprecated.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "description": {
+ "description": "A markdown description of the class.",
+ "type": "string"
+ },
+ "kind": {
+ "enum": [
+ "class"
+ ],
+ "type": "string"
+ },
+ "members": {
+ "items": {
+ "anyOf": [
+ {
+ "$ref": "#/definitions/ClassField"
+ },
+ {
+ "$ref": "#/definitions/ClassMethod"
+ }
+ ]
+ },
+ "type": "array"
+ },
+ "mixins": {
+ "description": "Any class mixins applied in the extends clause of this class.\n\nIf mixins are applied in the class definition, then the true superclass\nof this class is the result of applying mixins in order to the superclass.\n\nMixins must be listed in order of their application to the superclass or\nprevious mixin application. This means that the innermost mixin is listed\nfirst. This may read backwards from the common order in JavaScript, but\nmatches the order of language used to describe mixin application, like\n\"S with A, B\".",
+ "items": {
+ "$ref": "#/definitions/Reference"
+ },
+ "type": "array"
+ },
+ "name": {
+ "type": "string"
+ },
+ "source": {
+ "$ref": "#/definitions/SourceReference"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ },
+ "superclass": {
+ "$ref": "#/definitions/Reference",
+ "description": "The superclass of this class.\n\nIf this class is defined with mixin applications, the prototype chain\nincludes the mixin applications and the true superclass is computed\nfrom them."
+ }
+ },
+ "required": [
+ "kind",
+ "name"
+ ],
+ "type": "object"
+ },
+ "ClassField": {
+ "properties": {
+ "default": {
+ "type": "string"
+ },
+ "deprecated": {
+ "description": "Whether the property is deprecated.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "description": {
+ "description": "A markdown description of the field.",
+ "type": "string"
+ },
+ "inheritedFrom": {
+ "$ref": "#/definitions/Reference"
+ },
+ "kind": {
+ "enum": [
+ "field"
+ ],
+ "type": "string"
+ },
+ "name": {
+ "type": "string"
+ },
+ "privacy": {
+ "$ref": "#/definitions/Privacy"
+ },
+ "readonly": {
+ "description": "Whether the property is read-only.",
+ "type": "boolean"
+ },
+ "source": {
+ "$ref": "#/definitions/SourceReference"
+ },
+ "static": {
+ "type": "boolean"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ },
+ "type": {
+ "$ref": "#/definitions/Type"
+ }
+ },
+ "required": [
+ "kind",
+ "name"
+ ],
+ "type": "object"
+ },
+ "ClassMethod": {
+ "properties": {
+ "deprecated": {
+ "description": "Whether the function is deprecated.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "description": {
+ "description": "A markdown description.",
+ "type": "string"
+ },
+ "inheritedFrom": {
+ "$ref": "#/definitions/Reference"
+ },
+ "kind": {
+ "enum": [
+ "method"
+ ],
+ "type": "string"
+ },
+ "name": {
+ "type": "string"
+ },
+ "parameters": {
+ "items": {
+ "$ref": "#/definitions/Parameter"
+ },
+ "type": "array"
+ },
+ "privacy": {
+ "$ref": "#/definitions/Privacy"
+ },
+ "return": {
+ "properties": {
+ "description": {
+ "description": "A markdown description.",
+ "type": "string"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ },
+ "type": {
+ "$ref": "#/definitions/Type"
+ }
+ },
+ "type": "object"
+ },
+ "source": {
+ "$ref": "#/definitions/SourceReference"
+ },
+ "static": {
+ "type": "boolean"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ }
+ },
+ "required": [
+ "kind",
+ "name"
+ ],
+ "type": "object"
+ },
+ "CssCustomProperty": {
+ "properties": {
+ "default": {
+ "type": "string"
+ },
+ "deprecated": {
+ "description": "Whether the CSS custom property is deprecated.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "description": {
+ "description": "A markdown description.",
+ "type": "string"
+ },
+ "name": {
+ "description": "The name of the property, including leading `--`.",
+ "type": "string"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ },
+ "syntax": {
+ "description": "The expected syntax of the defined property. Defaults to \"*\".\n\nThe syntax must be a valid CSS [syntax string](https://developer.mozilla.org/en-US/docs/Web/CSS/@property/syntax)\nas defined in the CSS Properties and Values API.\n\nExamples:\n\n\"<color>\": accepts a color\n\"<length> | <percentage>\": accepts lengths or percentages but not calc expressions with a combination of the two\n\"small | medium | large\": accepts one of these values set as custom idents.\n\"*\": any valid token",
+ "type": "string"
+ }
+ },
+ "required": [
+ "name"
+ ],
+ "type": "object"
+ },
+ "CssPart": {
+ "description": "The description of a CSS Part",
+ "properties": {
+ "deprecated": {
+ "description": "Whether the CSS shadow part is deprecated.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "description": {
+ "description": "A markdown description.",
+ "type": "string"
+ },
+ "name": {
+ "type": "string"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ }
+ },
+ "required": [
+ "name"
+ ],
+ "type": "object"
+ },
+ "CustomElementDeclaration": {
+ "description": "A description of a custom element class.\n\nCustom elements are JavaScript classes, so this extends from\n`ClassDeclaration` and adds custom-element-specific features like\nattributes, events, and slots.\n\nNote that `tagName` in this interface is optional. Tag names are not\nneccessarily part of a custom element class, but belong to the definition\n(often called the \"registration\") or the `customElements.define()` call.\n\nBecause classes and tag names can only be registered once, there's a\none-to-one relationship between classes and tag names. For ease of use,\nwe allow the tag name here.\n\nSome packages define and register custom elements in separate modules. In\nthese cases one `Module` should contain the `CustomElement` without a\ntagName, and another `Module` should contain the\n`CustomElementExport`.",
+ "properties": {
+ "attributes": {
+ "description": "The attributes that this element is known to understand.",
+ "items": {
+ "$ref": "#/definitions/Attribute"
+ },
+ "type": "array"
+ },
+ "cssParts": {
+ "items": {
+ "$ref": "#/definitions/CssPart"
+ },
+ "type": "array"
+ },
+ "cssProperties": {
+ "items": {
+ "$ref": "#/definitions/CssCustomProperty"
+ },
+ "type": "array"
+ },
+ "customElement": {
+ "description": "Distinguishes a regular JavaScript class from a\ncustom element class",
+ "enum": [
+ true
+ ],
+ "type": "boolean"
+ },
+ "demos": {
+ "items": {
+ "$ref": "#/definitions/Demo"
+ },
+ "type": "array"
+ },
+ "deprecated": {
+ "description": "Whether the class or mixin is deprecated.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "description": {
+ "description": "A markdown description of the class.",
+ "type": "string"
+ },
+ "events": {
+ "description": "The events that this element fires.",
+ "items": {
+ "$ref": "#/definitions/Event"
+ },
+ "type": "array"
+ },
+ "kind": {
+ "enum": [
+ "class"
+ ],
+ "type": "string"
+ },
+ "members": {
+ "items": {
+ "anyOf": [
+ {
+ "$ref": "#/definitions/ClassField"
+ },
+ {
+ "$ref": "#/definitions/ClassMethod"
+ }
+ ]
+ },
+ "type": "array"
+ },
+ "mixins": {
+ "description": "Any class mixins applied in the extends clause of this class.\n\nIf mixins are applied in the class definition, then the true superclass\nof this class is the result of applying mixins in order to the superclass.\n\nMixins must be listed in order of their application to the superclass or\nprevious mixin application. This means that the innermost mixin is listed\nfirst. This may read backwards from the common order in JavaScript, but\nmatches the order of language used to describe mixin application, like\n\"S with A, B\".",
+ "items": {
+ "$ref": "#/definitions/Reference"
+ },
+ "type": "array"
+ },
+ "name": {
+ "type": "string"
+ },
+ "slots": {
+ "description": "The shadow dom content slots that this element accepts.",
+ "items": {
+ "$ref": "#/definitions/Slot"
+ },
+ "type": "array"
+ },
+ "source": {
+ "$ref": "#/definitions/SourceReference"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ },
+ "superclass": {
+ "$ref": "#/definitions/Reference",
+ "description": "The superclass of this class.\n\nIf this class is defined with mixin applications, the prototype chain\nincludes the mixin applications and the true superclass is computed\nfrom them."
+ },
+ "tagName": {
+ "description": "An optional tag name that should be specified if this is a\nself-registering element.\n\nSelf-registering elements must also include a CustomElementExport\nin the module's exports.",
+ "type": "string"
+ }
+ },
+ "required": [
+ "customElement",
+ "kind",
+ "name"
+ ],
+ "type": "object"
+ },
+ "CustomElementExport": {
+ "description": "A global custom element defintion, ie the result of a\n`customElements.define()` call.\n\nThis is represented as an export because a definition makes the element\navailable outside of the module it's defined it.",
+ "properties": {
+ "declaration": {
+ "$ref": "#/definitions/Reference",
+ "description": "A reference to the class or other declaration that implements the\ncustom element."
+ },
+ "deprecated": {
+ "description": "Whether the custom-element export is deprecated.\nFor example, a future version will not register the custom element in this file.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "kind": {
+ "enum": [
+ "custom-element-definition"
+ ],
+ "type": "string"
+ },
+ "name": {
+ "description": "The tag name of the custom element.",
+ "type": "string"
+ }
+ },
+ "required": [
+ "declaration",
+ "kind",
+ "name"
+ ],
+ "type": "object"
+ },
+ "CustomElementMixinDeclaration": {
+ "description": "A class mixin that also adds custom element related properties.",
+ "properties": {
+ "attributes": {
+ "description": "The attributes that this element is known to understand.",
+ "items": {
+ "$ref": "#/definitions/Attribute"
+ },
+ "type": "array"
+ },
+ "cssParts": {
+ "items": {
+ "$ref": "#/definitions/CssPart"
+ },
+ "type": "array"
+ },
+ "cssProperties": {
+ "items": {
+ "$ref": "#/definitions/CssCustomProperty"
+ },
+ "type": "array"
+ },
+ "customElement": {
+ "description": "Distinguishes a regular JavaScript class from a\ncustom element class",
+ "enum": [
+ true
+ ],
+ "type": "boolean"
+ },
+ "demos": {
+ "items": {
+ "$ref": "#/definitions/Demo"
+ },
+ "type": "array"
+ },
+ "deprecated": {
+ "description": "Whether the class or mixin is deprecated.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "description": {
+ "description": "A markdown description of the class.",
+ "type": "string"
+ },
+ "events": {
+ "description": "The events that this element fires.",
+ "items": {
+ "$ref": "#/definitions/Event"
+ },
+ "type": "array"
+ },
+ "kind": {
+ "enum": [
+ "mixin"
+ ],
+ "type": "string"
+ },
+ "members": {
+ "items": {
+ "anyOf": [
+ {
+ "$ref": "#/definitions/ClassField"
+ },
+ {
+ "$ref": "#/definitions/ClassMethod"
+ }
+ ]
+ },
+ "type": "array"
+ },
+ "mixins": {
+ "description": "Any class mixins applied in the extends clause of this class.\n\nIf mixins are applied in the class definition, then the true superclass\nof this class is the result of applying mixins in order to the superclass.\n\nMixins must be listed in order of their application to the superclass or\nprevious mixin application. This means that the innermost mixin is listed\nfirst. This may read backwards from the common order in JavaScript, but\nmatches the order of language used to describe mixin application, like\n\"S with A, B\".",
+ "items": {
+ "$ref": "#/definitions/Reference"
+ },
+ "type": "array"
+ },
+ "name": {
+ "type": "string"
+ },
+ "parameters": {
+ "items": {
+ "$ref": "#/definitions/Parameter"
+ },
+ "type": "array"
+ },
+ "return": {
+ "properties": {
+ "description": {
+ "description": "A markdown description.",
+ "type": "string"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ },
+ "type": {
+ "$ref": "#/definitions/Type"
+ }
+ },
+ "type": "object"
+ },
+ "slots": {
+ "description": "The shadow dom content slots that this element accepts.",
+ "items": {
+ "$ref": "#/definitions/Slot"
+ },
+ "type": "array"
+ },
+ "source": {
+ "$ref": "#/definitions/SourceReference"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ },
+ "superclass": {
+ "$ref": "#/definitions/Reference",
+ "description": "The superclass of this class.\n\nIf this class is defined with mixin applications, the prototype chain\nincludes the mixin applications and the true superclass is computed\nfrom them."
+ },
+ "tagName": {
+ "description": "An optional tag name that should be specified if this is a\nself-registering element.\n\nSelf-registering elements must also include a CustomElementExport\nin the module's exports.",
+ "type": "string"
+ }
+ },
+ "required": [
+ "customElement",
+ "kind",
+ "name"
+ ],
+ "type": "object"
+ },
+ "Demo": {
+ "properties": {
+ "description": {
+ "description": "A markdown description of the demo.",
+ "type": "string"
+ },
+ "source": {
+ "$ref": "#/definitions/SourceReference"
+ },
+ "url": {
+ "description": "Relative URL of the demo if it's published with the package. Absolute URL\nif it's hosted.",
+ "type": "string"
+ }
+ },
+ "required": [
+ "url"
+ ],
+ "type": "object"
+ },
+ "Event": {
+ "properties": {
+ "deprecated": {
+ "description": "Whether the event is deprecated.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "description": {
+ "description": "A markdown description.",
+ "type": "string"
+ },
+ "inheritedFrom": {
+ "$ref": "#/definitions/Reference"
+ },
+ "name": {
+ "type": "string"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ },
+ "type": {
+ "$ref": "#/definitions/Type",
+ "description": "The type of the event object that's fired."
+ }
+ },
+ "required": [
+ "name",
+ "type"
+ ],
+ "type": "object"
+ },
+ "FunctionDeclaration": {
+ "properties": {
+ "deprecated": {
+ "description": "Whether the function is deprecated.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "description": {
+ "description": "A markdown description.",
+ "type": "string"
+ },
+ "kind": {
+ "enum": [
+ "function"
+ ],
+ "type": "string"
+ },
+ "name": {
+ "type": "string"
+ },
+ "parameters": {
+ "items": {
+ "$ref": "#/definitions/Parameter"
+ },
+ "type": "array"
+ },
+ "return": {
+ "properties": {
+ "description": {
+ "description": "A markdown description.",
+ "type": "string"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ },
+ "type": {
+ "$ref": "#/definitions/Type"
+ }
+ },
+ "type": "object"
+ },
+ "source": {
+ "$ref": "#/definitions/SourceReference"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ }
+ },
+ "required": [
+ "kind",
+ "name"
+ ],
+ "type": "object"
+ },
+ "JavaScriptExport": {
+ "properties": {
+ "declaration": {
+ "$ref": "#/definitions/Reference",
+ "description": "A reference to the exported declaration.\n\nIn the case of aggregating exports, the reference's `module` field must be\ndefined and the `name` field must be `\"*\"`."
+ },
+ "deprecated": {
+ "description": "Whether the export is deprecated. For example, the name of the export was changed.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "kind": {
+ "enum": [
+ "js"
+ ],
+ "type": "string"
+ },
+ "name": {
+ "description": "The name of the exported symbol.\n\nJavaScript has a number of ways to export objects which determine the\ncorrect name to use.\n\n- Default exports must use the name \"default\".\n- Named exports use the name that is exported. If the export is renamed\n with the \"as\" clause, use the exported name.\n- Aggregating exports (`* from`) should use the name `*`",
+ "type": "string"
+ }
+ },
+ "required": [
+ "declaration",
+ "kind",
+ "name"
+ ],
+ "type": "object"
+ },
+ "JavaScriptModule": {
+ "properties": {
+ "declarations": {
+ "description": "The declarations of a module.\n\nFor documentation purposes, all declarations that are reachable from\nexports should be described here. Ie, functions and objects that may be\nproperties of exported objects, or passed as arguments to functions.",
+ "items": {
+ "anyOf": [
+ {
+ "$ref": "#/definitions/ClassDeclaration"
+ },
+ {
+ "$ref": "#/definitions/FunctionDeclaration"
+ },
+ {
+ "$ref": "#/definitions/MixinDeclaration"
+ },
+ {
+ "$ref": "#/definitions/VariableDeclaration"
+ },
+ {
+ "$ref": "#/definitions/CustomElementDeclaration"
+ },
+ {
+ "$ref": "#/definitions/CustomElementMixinDeclaration"
+ }
+ ]
+ },
+ "type": "array"
+ },
+ "deprecated": {
+ "description": "Whether the module is deprecated.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "description": {
+ "description": "A markdown description of the module.",
+ "type": "string"
+ },
+ "exports": {
+ "description": "The exports of a module. This includes JavaScript exports and\ncustom element definitions.",
+ "items": {
+ "anyOf": [
+ {
+ "$ref": "#/definitions/JavaScriptExport"
+ },
+ {
+ "$ref": "#/definitions/CustomElementExport"
+ }
+ ]
+ },
+ "type": "array"
+ },
+ "kind": {
+ "enum": [
+ "javascript-module"
+ ],
+ "type": "string"
+ },
+ "path": {
+ "description": "Path to the javascript file needed to be imported. \n(not the path for example to a typescript file.)",
+ "type": "string"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ }
+ },
+ "required": [
+ "kind",
+ "path"
+ ],
+ "type": "object"
+ },
+ "MixinDeclaration": {
+ "description": "A description of a class mixin.\n\nMixins are functions which generate a new subclass of a given superclass.\nThis interfaces describes the class and custom element features that\nare added by the mixin. As such, it extends the CustomElement interface and\nClassLike interface.\n\nSince mixins are functions, it also extends the FunctionLike interface. This\nmeans a mixin is callable, and has parameters and a return type.\n\nThe return type is often hard or impossible to accurately describe in type\nsystems like TypeScript. It requires generics and an `extends` operator\nthat TypeScript lacks. Therefore it's recommended that the return type is\nleft empty. The most common form of a mixin function takes a single\nargument, so consumers of this interface should assume that the return type\nis the single argument subclassed by this declaration.\n\nA mixin should not have a superclass. If a mixins composes other mixins,\nthey should be listed in the `mixins` field.\n\nSee [this article]{@link https://justinfagnani.com/2015/12/21/real-mixins-with-javascript-classes/}\nfor more information on the classmixin pattern in JavaScript.",
+ "properties": {
+ "deprecated": {
+ "description": "Whether the class or mixin is deprecated.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "description": {
+ "description": "A markdown description of the class.",
+ "type": "string"
+ },
+ "kind": {
+ "enum": [
+ "mixin"
+ ],
+ "type": "string"
+ },
+ "members": {
+ "items": {
+ "anyOf": [
+ {
+ "$ref": "#/definitions/ClassField"
+ },
+ {
+ "$ref": "#/definitions/ClassMethod"
+ }
+ ]
+ },
+ "type": "array"
+ },
+ "mixins": {
+ "description": "Any class mixins applied in the extends clause of this class.\n\nIf mixins are applied in the class definition, then the true superclass\nof this class is the result of applying mixins in order to the superclass.\n\nMixins must be listed in order of their application to the superclass or\nprevious mixin application. This means that the innermost mixin is listed\nfirst. This may read backwards from the common order in JavaScript, but\nmatches the order of language used to describe mixin application, like\n\"S with A, B\".",
+ "items": {
+ "$ref": "#/definitions/Reference"
+ },
+ "type": "array"
+ },
+ "name": {
+ "type": "string"
+ },
+ "parameters": {
+ "items": {
+ "$ref": "#/definitions/Parameter"
+ },
+ "type": "array"
+ },
+ "return": {
+ "properties": {
+ "description": {
+ "description": "A markdown description.",
+ "type": "string"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ },
+ "type": {
+ "$ref": "#/definitions/Type"
+ }
+ },
+ "type": "object"
+ },
+ "source": {
+ "$ref": "#/definitions/SourceReference"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ },
+ "superclass": {
+ "$ref": "#/definitions/Reference",
+ "description": "The superclass of this class.\n\nIf this class is defined with mixin applications, the prototype chain\nincludes the mixin applications and the true superclass is computed\nfrom them."
+ }
+ },
+ "required": [
+ "kind",
+ "name"
+ ],
+ "type": "object"
+ },
+ "Parameter": {
+ "properties": {
+ "default": {
+ "type": "string"
+ },
+ "deprecated": {
+ "description": "Whether the property is deprecated.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "description": {
+ "description": "A markdown description of the field.",
+ "type": "string"
+ },
+ "name": {
+ "type": "string"
+ },
+ "optional": {
+ "description": "Whether the parameter is optional. Undefined implies non-optional.",
+ "type": "boolean"
+ },
+ "readonly": {
+ "description": "Whether the property is read-only.",
+ "type": "boolean"
+ },
+ "rest": {
+ "description": "Whether the parameter is a rest parameter. Only the last parameter may be a rest parameter.\nUndefined implies single parameter.",
+ "type": "boolean"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ },
+ "type": {
+ "$ref": "#/definitions/Type"
+ }
+ },
+ "required": [
+ "name"
+ ],
+ "type": "object"
+ },
+ "Privacy": {
+ "enum": [
+ "private",
+ "protected",
+ "public"
+ ],
+ "type": "string"
+ },
+ "Reference": {
+ "description": "A reference to an export of a module.\n\nAll references are required to be publically accessible, so the canonical\nrepresentation of a reference is the export it's available from.\n\n`package` should generally refer to an npm package name. If `package` is\nundefined then the reference is local to this package. If `module` is\nundefined the reference is local to the containing module.\n\nReferences to global symbols like `Array`, `HTMLElement`, or `Event` should\nuse a `package` name of `\"global:\"`.",
+ "properties": {
+ "module": {
+ "type": "string"
+ },
+ "name": {
+ "type": "string"
+ },
+ "package": {
+ "type": "string"
+ }
+ },
+ "required": [
+ "name"
+ ],
+ "type": "object"
+ },
+ "Slot": {
+ "properties": {
+ "deprecated": {
+ "description": "Whether the slot is deprecated.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "description": {
+ "description": "A markdown description.",
+ "type": "string"
+ },
+ "name": {
+ "description": "The slot name, or the empty string for an unnamed slot.",
+ "type": "string"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ }
+ },
+ "required": [
+ "name"
+ ],
+ "type": "object"
+ },
+ "SourceReference": {
+ "description": "A reference to the source of a declaration or member.",
+ "properties": {
+ "href": {
+ "description": "An absolute URL to the source (ie. a GitHub URL).",
+ "type": "string"
+ }
+ },
+ "required": [
+ "href"
+ ],
+ "type": "object"
+ },
+ "Type": {
+ "properties": {
+ "references": {
+ "description": "An array of references to the types in the type string.\n\nThese references have optional indices into the type string so that tools\ncan understand the references in the type string independently of the type\nsystem and syntax. For example, a documentation viewer could display the\ntype `Array<FooElement | BarElement>` with cross-references to `FooElement`\nand `BarElement` without understanding arrays, generics, or union types.",
+ "items": {
+ "$ref": "#/definitions/TypeReference"
+ },
+ "type": "array"
+ },
+ "source": {
+ "$ref": "#/definitions/SourceReference"
+ },
+ "text": {
+ "description": "The full string representation of the type, in whatever type syntax is\nused, such as JSDoc, Closure, or TypeScript.",
+ "type": "string"
+ }
+ },
+ "required": [
+ "text"
+ ],
+ "type": "object"
+ },
+ "TypeReference": {
+ "description": "A reference that is associated with a type string and optionally a range\nwithin the string.\n\nStart and end must both be present or not present. If they're present, they\nare indices into the associated type string. If they are missing, the entire\ntype string is the symbol referenced and the name should match the type\nstring.",
+ "properties": {
+ "end": {
+ "type": "number"
+ },
+ "module": {
+ "type": "string"
+ },
+ "name": {
+ "type": "string"
+ },
+ "package": {
+ "type": "string"
+ },
+ "start": {
+ "type": "number"
+ }
+ },
+ "required": [
+ "name"
+ ],
+ "type": "object"
+ },
+ "VariableDeclaration": {
+ "properties": {
+ "default": {
+ "type": "string"
+ },
+ "deprecated": {
+ "description": "Whether the property is deprecated.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "description": {
+ "description": "A markdown description of the field.",
+ "type": "string"
+ },
+ "kind": {
+ "enum": [
+ "variable"
+ ],
+ "type": "string"
+ },
+ "name": {
+ "type": "string"
+ },
+ "readonly": {
+ "description": "Whether the property is read-only.",
+ "type": "boolean"
+ },
+ "source": {
+ "$ref": "#/definitions/SourceReference"
+ },
+ "summary": {
+ "description": "A markdown summary suitable for display in a listing.",
+ "type": "string"
+ },
+ "type": {
+ "$ref": "#/definitions/Type"
+ }
+ },
+ "required": [
+ "kind",
+ "name"
+ ],
+ "type": "object"
+ }
+ },
+ "description": "The top-level interface of a custom elements manifest file.\n\nBecause custom elements are JavaScript classes, describing a custom element\nmay require describing arbitrary JavaScript concepts like modules, classes,\nfunctions, etc. So custom elements manifests are capable of documenting\nthe elements in a package, as well as those JavaScript concepts.\n\nThe modules described in a package should be the public entrypoints that\nother packages may import from. Multiple modules may export the same object\nvia re-exports, but in most cases a package should document the single\ncanonical export that should be used.",
+ "properties": {
+ "deprecated": {
+ "description": "Whether the package is deprecated.\nIf the value is a string, it's the reason for the deprecation.",
+ "type": [
+ "string",
+ "boolean"
+ ]
+ },
+ "modules": {
+ "description": "An array of the modules this package contains.",
+ "items": {
+ "$ref": "#/definitions/JavaScriptModule"
+ },
+ "type": "array"
+ },
+ "readme": {
+ "description": "The Markdown to use for the main readme of this package.\n\nThis can be used to override the readme used by Github or npm if that\nfile contains information irrelevant to custom element catalogs and\ndocumentation viewers.",
+ "type": "string"
+ },
+ "schemaVersion": {
+ "description": "The version of the schema used in this file.",
+ "type": "string"
+ }
+ },
+ "required": [
+ "modules",
+ "schemaVersion"
+ ],
+ "type": "object"
+}
\ No newline at end of file
diff --git a/packages/tools/lib/cem/types-internal.d.ts b/packages/tools/lib/cem/types-internal.d.ts
new file mode 100644
index 000000000000..916f8c5f2176
--- /dev/null
+++ b/packages/tools/lib/cem/types-internal.d.ts
@@ -0,0 +1,1061 @@
+export type Privacy = "private" | "protected" | "public"
+
+/**
+ * The top-level interface of a custom elements manifest file.
+ *
+ * Because custom elements are JavaScript classes, describing a custom element
+ * may require describing arbitrary JavaScript concepts like modules, classes,
+ * functions, etc. So custom elements manifests are capable of documenting
+ * the elements in a package, as well as those JavaScript concepts.
+ *
+ * The modules described in a package should be the public entrypoints that
+ * other packages may import from. Multiple modules may export the same object
+ * via re-exports, but in most cases a package should document the single
+ * canonical export that should be used.
+ */
+export interface Package {
+ /**
+ * Whether the package is deprecated.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ /**
+ * An array of the modules this package contains.
+ */
+ modules: JavaScriptModule[]
+ /**
+ * The Markdown to use for the main readme of this package.
+ *
+ * This can be used to override the readme used by Github or npm if that
+ * file contains information irrelevant to custom element catalogs and
+ * documentation viewers.
+ */
+ readme?: string
+ /**
+ * The version of the schema used in this file.
+ */
+ schemaVersion: string
+}
+export interface JavaScriptModule {
+ /**
+ * The declarations of a module.
+ *
+ * For documentation purposes, all declarations that are reachable from
+ * exports should be described here. Ie, functions and objects that may be
+ * properties of exported objects, or passed as arguments to functions.
+ */
+ declarations?: (
+ | ClassDeclaration
+ | EnumDeclaration
+ | InterfaceDeclaration
+ | FunctionDeclaration
+ | MixinDeclaration
+ | VariableDeclaration
+ | CustomElementDeclaration
+ | CustomElementMixinDeclaration
+ )[]
+ /**
+ * Whether the module is deprecated.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ /**
+ * A markdown description of the module.
+ */
+ description?: string
+ /**
+ * The exports of a module. This includes JavaScript exports and
+ * custom element definitions.
+ */
+ exports?: (JavaScriptExport | CustomElementExport)[]
+ kind: "javascript-module"
+ /**
+ * Path to the javascript file needed to be imported.
+ * (not the path for example to a typescript file.)
+ */
+ path: string
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+}
+export interface ClassDeclaration {
+ _ui5implements?: Reference[]
+ _ui5privacy?: Privacy
+ /**
+ * Marks when the field was
+ */
+ _ui5since?: string
+ /**
+ * Whether the class or mixin is deprecated.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ /**
+ * A markdown description of the class.
+ */
+ description?: string
+ kind: "class"
+ members?: (ClassField | ClassMethod)[]
+ /**
+ * Any class mixins applied in the extends clause of this class.
+ *
+ * If mixins are applied in the class definition, then the true superclass
+ * of this class is the result of applying mixins in order to the superclass.
+ *
+ * Mixins must be listed in order of their application to the superclass or
+ * previous mixin application. This means that the innermost mixin is listed
+ * first. This may read backwards from the common order in JavaScript, but
+ * matches the order of language used to describe mixin application, like
+ * "S with A, B".
+ */
+ mixins?: Reference[]
+ name: string
+ source?: SourceReference
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+ /**
+ * A reference to an export of a module.
+ *
+ * All references are required to be publically accessible, so the canonical
+ * representation of a reference is the export it's available from.
+ *
+ * `package` should generally refer to an npm package name. If `package` is
+ * undefined then the reference is local to this package. If `module` is
+ * undefined the reference is local to the containing module.
+ *
+ * References to global symbols like `Array`, `HTMLElement`, or `Event` should
+ * use a `package` name of `"global:"`.
+ */
+ superclass?: {
+ module?: string
+ name: string
+ package?: string
+ [k: string]: unknown
+ }
+}
+/**
+ * A reference to an export of a module.
+ *
+ * All references are required to be publically accessible, so the canonical
+ * representation of a reference is the export it's available from.
+ *
+ * `package` should generally refer to an npm package name. If `package` is
+ * undefined then the reference is local to this package. If `module` is
+ * undefined the reference is local to the containing module.
+ *
+ * References to global symbols like `Array`, `HTMLElement`, or `Event` should
+ * use a `package` name of `"global:"`.
+ */
+export interface Reference {
+ module?: string
+ name: string
+ package?: string
+}
+export interface ClassField {
+ _ui5formProperty?: boolean
+ _ui5formEvents?: string
+ /**
+ * Marks when the field was introduced
+ */
+ _ui5since?: string
+ default?: string
+ /**
+ * Whether the property is deprecated.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ /**
+ * A markdown description of the field.
+ */
+ description?: string
+ inheritedFrom?: Reference
+ kind: "field"
+ name: string
+ privacy?: Privacy
+ /**
+ * Whether the property is read-only.
+ */
+ readonly?: boolean
+ source?: SourceReference
+ static?: boolean
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+ type?: Type
+}
+/**
+ * A reference to the source of a declaration or member.
+ */
+export interface SourceReference {
+ /**
+ * An absolute URL to the source (ie. a GitHub URL).
+ */
+ href: string
+}
+export interface Type {
+ /**
+ * An array of references to the types in the type string.
+ *
+ * These references have optional indices into the type string so that tools
+ * can understand the references in the type string independently of the type
+ * system and syntax. For example, a documentation viewer could display the
+ * type `Array<FooElement | BarElement>` with cross-references to `FooElement`
+ * and `BarElement` without understanding arrays, generics, or union types.
+ */
+ references?: TypeReference[]
+ source?: SourceReference
+ /**
+ * The full string representation of the type, in whatever type syntax is
+ * used, such as JSDoc, Closure, or TypeScript.
+ */
+ text: string
+}
+/**
+ * A reference that is associated with a type string and optionally a range
+ * within the string.
+ *
+ * Start and end must both be present or not present. If they're present, they
+ * are indices into the associated type string. If they are missing, the entire
+ * type string is the symbol referenced and the name should match the type
+ * string.
+ */
+export interface TypeReference {
+ end?: number
+ module?: string
+ name: string
+ package?: string
+ start?: number
+}
+export interface ClassMethod {
+ /**
+ * Marks when the field was introduced
+ */
+ _ui5since?: string
+ /**
+ * Whether the function is deprecated.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ /**
+ * A markdown description.
+ */
+ description?: string
+ inheritedFrom?: Reference
+ kind: "method"
+ name: string
+ parameters?: Parameter[]
+ privacy?: Privacy
+ return?: {
+ /**
+ * A markdown description.
+ */
+ description?: string
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+ type?: Type
+ [k: string]: unknown
+ }
+ source?: SourceReference
+ static?: boolean
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+}
+export interface Parameter {
+ _ui5privacy?: Privacy
+ /**
+ * Marks when the field was introduced
+ */
+ _ui5since?: string
+ default?: string
+ /**
+ * Whether the property is deprecated.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ /**
+ * A markdown description of the field.
+ */
+ description?: string
+ name: string
+ /**
+ * Whether the parameter is optional. Undefined implies non-optional.
+ */
+ optional?: boolean
+ /**
+ * Whether the property is read-only.
+ */
+ readonly?: boolean
+ /**
+ * Whether the parameter is a rest parameter. Only the last parameter may be a rest parameter.
+ * Undefined implies single parameter.
+ */
+ rest?: boolean
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+ type?: Type
+}
+export interface EnumDeclaration {
+ _ui5privacy?: Privacy
+ /**
+ * Marks when the field was introduced
+ */
+ _ui5since?: string
+ /**
+ * Whether the class or mixin is deprecated.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ /**
+ * A markdown description of the class.
+ */
+ description?: string
+ kind: "enum"
+ members?: EnumField[]
+ /**
+ * Any class mixins applied in the extends clause of this class.
+ *
+ * If mixins are applied in the class definition, then the true superclass
+ * of this class is the result of applying mixins in order to the superclass.
+ *
+ * Mixins must be listed in order of their application to the superclass or
+ * previous mixin application. This means that the innermost mixin is listed
+ * first. This may read backwards from the common order in JavaScript, but
+ * matches the order of language used to describe mixin application, like
+ * "S with A, B".
+ */
+ mixins?: Reference[]
+ name: string
+ source?: SourceReference
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+ /**
+ * A reference to an export of a module.
+ *
+ * All references are required to be publically accessible, so the canonical
+ * representation of a reference is the export it's available from.
+ *
+ * `package` should generally refer to an npm package name. If `package` is
+ * undefined then the reference is local to this package. If `module` is
+ * undefined the reference is local to the containing module.
+ *
+ * References to global symbols like `Array`, `HTMLElement`, or `Event` should
+ * use a `package` name of `"global:"`.
+ */
+ superclass?: {
+ module?: string
+ name: string
+ package?: string
+ [k: string]: unknown
+ }
+}
+export interface EnumField {
+ /**
+ * Marks when the field was introduced
+ */
+ _ui5since?: string
+ /**
+ * Whether the property is deprecated.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ /**
+ * A markdown description of the field.
+ */
+ description?: string
+ inheritedFrom?: Reference
+ kind: "field"
+ name: string
+ privacy?: Privacy
+ source?: SourceReference
+ static?: boolean
+ /**
+ * Whether the property is read-only.
+ */
+ readonly?: boolean
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+}
+export interface InterfaceDeclaration {
+ _ui5privacy?: Privacy
+ /**
+ * Marks when the field was introduced
+ */
+ _ui5since?: string
+ /**
+ * Whether the class or mixin is deprecated.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ /**
+ * A markdown description of the class.
+ */
+ description?: string
+ kind: "interface"
+ /**
+ * Any class mixins applied in the extends clause of this class.
+ *
+ * If mixins are applied in the class definition, then the true superclass
+ * of this class is the result of applying mixins in order to the superclass.
+ *
+ * Mixins must be listed in order of their application to the superclass or
+ * previous mixin application. This means that the innermost mixin is listed
+ * first. This may read backwards from the common order in JavaScript, but
+ * matches the order of language used to describe mixin application, like
+ * "S with A, B".
+ */
+ mixins?: Reference[]
+ name: string
+ source?: SourceReference
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+ /**
+ * A reference to an export of a module.
+ *
+ * All references are required to be publically accessible, so the canonical
+ * representation of a reference is the export it's available from.
+ *
+ * `package` should generally refer to an npm package name. If `package` is
+ * undefined then the reference is local to this package. If `module` is
+ * undefined the reference is local to the containing module.
+ *
+ * References to global symbols like `Array`, `HTMLElement`, or `Event` should
+ * use a `package` name of `"global:"`.
+ */
+ superclass?: {
+ module?: string
+ name: string
+ package?: string
+ [k: string]: unknown
+ }
+}
+export interface FunctionDeclaration {
+ /**
+ * Marks when the field was introduced
+ */
+ _ui5since?: string
+ /**
+ * Whether the function is deprecated.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ /**
+ * A markdown description.
+ */
+ description?: string
+ kind: "function"
+ name: string
+ parameters?: Parameter[]
+ return?: {
+ /**
+ * A markdown description.
+ */
+ description?: string
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+ type?: Type
+ [k: string]: unknown
+ }
+ source?: SourceReference
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+}
+/**
+ * A description of a class mixin.
+ *
+ * Mixins are functions which generate a new subclass of a given superclass.
+ * This interfaces describes the class and custom element features that
+ * are added by the mixin. As such, it extends the CustomElement interface and
+ * ClassLike interface.
+ *
+ * Since mixins are functions, it also extends the FunctionLike interface. This
+ * means a mixin is callable, and has parameters and a return type.
+ *
+ * The return type is often hard or impossible to accurately describe in type
+ * systems like TypeScript. It requires generics and an `extends` operator
+ * that TypeScript lacks. Therefore it's recommended that the return type is
+ * left empty. The most common form of a mixin function takes a single
+ * argument, so consumers of this interface should assume that the return type
+ * is the single argument subclassed by this declaration.
+ *
+ * A mixin should not have a superclass. If a mixins composes other mixins,
+ * they should be listed in the `mixins` field.
+ *
+ * See [this article]{@link https://justinfagnani.com/2015/12/21/real-mixins-with-javascript-classes/}
+ * for more information on the classmixin pattern in JavaScript.
+ */
+export interface MixinDeclaration {
+ /**
+ * Whether the class or mixin is deprecated.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ /**
+ * A markdown description of the class.
+ */
+ description?: string
+ kind: "mixin"
+ members?: (ClassField | ClassMethod)[]
+ /**
+ * Any class mixins applied in the extends clause of this class.
+ *
+ * If mixins are applied in the class definition, then the true superclass
+ * of this class is the result of applying mixins in order to the superclass.
+ *
+ * Mixins must be listed in order of their application to the superclass or
+ * previous mixin application. This means that the innermost mixin is listed
+ * first. This may read backwards from the common order in JavaScript, but
+ * matches the order of language used to describe mixin application, like
+ * "S with A, B".
+ */
+ mixins?: Reference[]
+ name: string
+ parameters?: Parameter[]
+ return?: {
+ /**
+ * A markdown description.
+ */
+ description?: string
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+ type?: Type
+ [k: string]: unknown
+ }
+ source?: SourceReference
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+ /**
+ * A reference to an export of a module.
+ *
+ * All references are required to be publically accessible, so the canonical
+ * representation of a reference is the export it's available from.
+ *
+ * `package` should generally refer to an npm package name. If `package` is
+ * undefined then the reference is local to this package. If `module` is
+ * undefined the reference is local to the containing module.
+ *
+ * References to global symbols like `Array`, `HTMLElement`, or `Event` should
+ * use a `package` name of `"global:"`.
+ */
+ superclass?: {
+ module?: string
+ name: string
+ package?: string
+ [k: string]: unknown
+ }
+}
+export interface VariableDeclaration {
+ default?: string
+ /**
+ * Whether the property is deprecated.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ /**
+ * A markdown description of the field.
+ */
+ description?: string
+ kind: "variable"
+ name: string
+ /**
+ * Whether the property is read-only.
+ */
+ readonly?: boolean
+ source?: SourceReference
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+ type?: Type
+}
+/**
+ * A description of a custom element class.
+ *
+ * Custom elements are JavaScript classes, so this extends from
+ * `ClassDeclaration` and adds custom-element-specific features like
+ * attributes, events, and slots.
+ *
+ * Note that `tagName` in this interface is optional. Tag names are not
+ * neccessarily part of a custom element class, but belong to the definition
+ * (often called the "registration") or the `customElements.define()` call.
+ *
+ * Because classes and tag names can only be registered once, there's a
+ * one-to-one relationship between classes and tag names. For ease of use,
+ * we allow the tag name here.
+ *
+ * Some packages define and register custom elements in separate modules. In
+ * these cases one `Module` should contain the `CustomElement` without a
+ * tagName, and another `Module` should contain the
+ * `CustomElementExport`.
+ */
+export interface CustomElementDeclaration {
+ _ui5implements?: Reference[]
+ _ui5abstract?: boolean
+ _ui5privacy?: Privacy
+ /**
+ * Marks when the field was introduced
+ */
+ _ui5since?: string
+ /**
+ * The attributes that this element is known to understand.
+ */
+ attributes?: Attribute[]
+ cssParts?: CssPart[]
+ cssProperties?: CssCustomProperty[]
+ /**
+ * Distinguishes a regular JavaScript class from a
+ * custom element class
+ */
+ customElement: true
+ demos?: Demo[]
+ /**
+ * Whether the class or mixin is deprecated.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ /**
+ * A markdown description of the class.
+ */
+ description?: string
+ /**
+ * The events that this element fires.
+ */
+ events?: Event[]
+ kind: "class"
+ members?: (ClassField | ClassMethod)[]
+ /**
+ * Any class mixins applied in the extends clause of this class.
+ *
+ * If mixins are applied in the class definition, then the true superclass
+ * of this class is the result of applying mixins in order to the superclass.
+ *
+ * Mixins must be listed in order of their application to the superclass or
+ * previous mixin application. This means that the innermost mixin is listed
+ * first. This may read backwards from the common order in JavaScript, but
+ * matches the order of language used to describe mixin application, like
+ * "S with A, B".
+ */
+ mixins?: Reference[]
+ name: string
+ /**
+ * The shadow dom content slots that this element accepts.
+ */
+ slots?: Slot[]
+ source?: SourceReference
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+ /**
+ * A reference to an export of a module.
+ *
+ * All references are required to be publically accessible, so the canonical
+ * representation of a reference is the export it's available from.
+ *
+ * `package` should generally refer to an npm package name. If `package` is
+ * undefined then the reference is local to this package. If `module` is
+ * undefined the reference is local to the containing module.
+ *
+ * References to global symbols like `Array`, `HTMLElement`, or `Event` should
+ * use a `package` name of `"global:"`.
+ */
+ superclass?: {
+ module?: string
+ name: string
+ package?: string
+ [k: string]: unknown
+ }
+ /**
+ * An optional tag name that should be specified if this is a
+ * self-registering element.
+ *
+ * Self-registering elements must also include a CustomElementExport
+ * in the module's exports.
+ */
+ tagName?: string
+}
+export interface Attribute {
+ /**
+ * The default value of the attribute, if any.
+ *
+ * As attributes are always strings, this is the actual value, not a human
+ * readable description.
+ */
+ default?: string
+ /**
+ * Whether the attribute is deprecated.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ /**
+ * A markdown description.
+ */
+ description?: string
+ /**
+ * The name of the field this attribute is associated with, if any.
+ */
+ fieldName?: string
+ inheritedFrom?: Reference
+ name: string
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+ /**
+ * The type that the attribute will be serialized/deserialized as.
+ */
+ type?: {
+ /**
+ * An array of references to the types in the type string.
+ *
+ * These references have optional indices into the type string so that tools
+ * can understand the references in the type string independently of the type
+ * system and syntax. For example, a documentation viewer could display the
+ * type `Array<FooElement | BarElement>` with cross-references to `FooElement`
+ * and `BarElement` without understanding arrays, generics, or union types.
+ */
+ references?: TypeReference[]
+ source?: SourceReference
+ /**
+ * The full string representation of the type, in whatever type syntax is
+ * used, such as JSDoc, Closure, or TypeScript.
+ */
+ text: string
+ [k: string]: unknown
+ }
+}
+/**
+ * The description of a CSS Part
+ */
+export interface CssPart {
+ /**
+ * Whether the CSS shadow part is deprecated.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ /**
+ * A markdown description.
+ */
+ description?: string
+ name: string
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+}
+export interface CssCustomProperty {
+ default?: string
+ /**
+ * Whether the CSS custom property is deprecated.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ /**
+ * A markdown description.
+ */
+ description?: string
+ /**
+ * The name of the property, including leading `--`.
+ */
+ name: string
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+ /**
+ * The expected syntax of the defined property. Defaults to "*".
+ *
+ * The syntax must be a valid CSS [syntax string](https://developer.mozilla.org/en-US/docs/Web/CSS/@property/syntax)
+ * as defined in the CSS Properties and Values API.
+ *
+ * Examples:
+ *
+ * "<color>": accepts a color
+ * "<length> | <percentage>": accepts lengths or percentages but not calc expressions with a combination of the two
+ * "small | medium | large": accepts one of these values set as custom idents.
+ * "*": any valid token
+ */
+ syntax?: string
+}
+export interface Demo {
+ /**
+ * A markdown description of the demo.
+ */
+ description?: string
+ source?: SourceReference
+ /**
+ * Relative URL of the demo if it's published with the package. Absolute URL
+ * if it's hosted.
+ */
+ url: string
+}
+export interface Event {
+ _ui5parameters?: Parameter[]
+ _ui5privacy?: Privacy
+ /**
+ * Whether the parameter is optional. Undefined implies non-optional.
+ */
+ _ui5allowPreventDefault?: boolean
+ /**
+ * Marks when the field was introduced
+ */
+ _ui5since?: string
+ /**
+ * Whether the event is deprecated.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ /**
+ * A markdown description.
+ */
+ description?: string
+ inheritedFrom?: Reference
+ name: string
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+ /**
+ * The type of the event object that's fired.
+ */
+ type: {
+ /**
+ * An array of references to the types in the type string.
+ *
+ * These references have optional indices into the type string so that tools
+ * can understand the references in the type string independently of the type
+ * system and syntax. For example, a documentation viewer could display the
+ * type `Array<FooElement | BarElement>` with cross-references to `FooElement`
+ * and `BarElement` without understanding arrays, generics, or union types.
+ */
+ references?: TypeReference[]
+ source?: SourceReference
+ /**
+ * The full string representation of the type, in whatever type syntax is
+ * used, such as JSDoc, Closure, or TypeScript.
+ */
+ text: string
+ [k: string]: unknown
+ }
+}
+export interface Slot {
+ _ui5type?: Type
+ _ui5privacy?: Privacy
+ /**
+ * Marks when the field was introduced
+ */
+ _ui5since?: string
+ /**
+ * Whether the slot is deprecated.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ /**
+ * A markdown description.
+ */
+ description?: string
+ /**
+ * The slot name, or the empty string for an unnamed slot.
+ */
+ name: string
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+}
+/**
+ * A class mixin that also adds custom element related properties.
+ */
+export interface CustomElementMixinDeclaration {
+ /**
+ * The attributes that this element is known to understand.
+ */
+ attributes?: Attribute[]
+ cssParts?: CssPart[]
+ cssProperties?: CssCustomProperty[]
+ /**
+ * Distinguishes a regular JavaScript class from a
+ * custom element class
+ */
+ customElement: true
+ demos?: Demo[]
+ /**
+ * Whether the class or mixin is deprecated.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ /**
+ * A markdown description of the class.
+ */
+ description?: string
+ /**
+ * The events that this element fires.
+ */
+ events?: Event[]
+ kind: "mixin"
+ members?: (ClassField | ClassMethod)[]
+ /**
+ * Any class mixins applied in the extends clause of this class.
+ *
+ * If mixins are applied in the class definition, then the true superclass
+ * of this class is the result of applying mixins in order to the superclass.
+ *
+ * Mixins must be listed in order of their application to the superclass or
+ * previous mixin application. This means that the innermost mixin is listed
+ * first. This may read backwards from the common order in JavaScript, but
+ * matches the order of language used to describe mixin application, like
+ * "S with A, B".
+ */
+ mixins?: Reference[]
+ name: string
+ parameters?: Parameter[]
+ return?: {
+ /**
+ * A markdown description.
+ */
+ description?: string
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+ type?: Type
+ [k: string]: unknown
+ }
+ /**
+ * The shadow dom content slots that this element accepts.
+ */
+ slots?: Slot[]
+ source?: SourceReference
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+ /**
+ * A reference to an export of a module.
+ *
+ * All references are required to be publically accessible, so the canonical
+ * representation of a reference is the export it's available from.
+ *
+ * `package` should generally refer to an npm package name. If `package` is
+ * undefined then the reference is local to this package. If `module` is
+ * undefined the reference is local to the containing module.
+ *
+ * References to global symbols like `Array`, `HTMLElement`, or `Event` should
+ * use a `package` name of `"global:"`.
+ */
+ superclass?: {
+ module?: string
+ name: string
+ package?: string
+ [k: string]: unknown
+ }
+ /**
+ * An optional tag name that should be specified if this is a
+ * self-registering element.
+ *
+ * Self-registering elements must also include a CustomElementExport
+ * in the module's exports.
+ */
+ tagName?: string
+}
+export interface JavaScriptExport {
+ /**
+ * A reference to an export of a module.
+ *
+ * All references are required to be publically accessible, so the canonical
+ * representation of a reference is the export it's available from.
+ *
+ * `package` should generally refer to an npm package name. If `package` is
+ * undefined then the reference is local to this package. If `module` is
+ * undefined the reference is local to the containing module.
+ *
+ * References to global symbols like `Array`, `HTMLElement`, or `Event` should
+ * use a `package` name of `"global:"`.
+ */
+ declaration: {
+ module?: string
+ name: string
+ package?: string
+ [k: string]: unknown
+ }
+ /**
+ * Whether the export is deprecated. For example, the name of the export was changed.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ kind: "js"
+ /**
+ * The name of the exported symbol.
+ *
+ * JavaScript has a number of ways to export objects which determine the
+ * correct name to use.
+ *
+ * - Default exports must use the name "default".
+ * - Named exports use the name that is exported. If the export is renamed
+ * with the "as" clause, use the exported name.
+ * - Aggregating exports (`* from`) should use the name `*`
+ */
+ name: string
+}
+/**
+ * A global custom element defintion, ie the result of a
+ * `customElements.define()` call.
+ *
+ * This is represented as an export because a definition makes the element
+ * available outside of the module it's defined it.
+ */
+export interface CustomElementExport {
+ /**
+ * A reference to an export of a module.
+ *
+ * All references are required to be publically accessible, so the canonical
+ * representation of a reference is the export it's available from.
+ *
+ * `package` should generally refer to an npm package name. If `package` is
+ * undefined then the reference is local to this package. If `module` is
+ * undefined the reference is local to the containing module.
+ *
+ * References to global symbols like `Array`, `HTMLElement`, or `Event` should
+ * use a `package` name of `"global:"`.
+ */
+ declaration: {
+ module?: string
+ name: string
+ package?: string
+ [k: string]: unknown
+ }
+ /**
+ * Whether the custom-element export is deprecated.
+ * For example, a future version will not register the custom element in this file.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ kind: "custom-element-definition"
+ /**
+ * The tag name of the custom element.
+ */
+ name: string
+}
diff --git a/packages/tools/lib/cem/types.d.ts b/packages/tools/lib/cem/types.d.ts
new file mode 100644
index 000000000000..20fb70847b07
--- /dev/null
+++ b/packages/tools/lib/cem/types.d.ts
@@ -0,0 +1,871 @@
+export type Privacy = "private" | "protected" | "public"
+
+/**
+ * The top-level interface of a custom elements manifest file.
+ *
+ * Because custom elements are JavaScript classes, describing a custom element
+ * may require describing arbitrary JavaScript concepts like modules, classes,
+ * functions, etc. So custom elements manifests are capable of documenting
+ * the elements in a package, as well as those JavaScript concepts.
+ *
+ * The modules described in a package should be the public entrypoints that
+ * other packages may import from. Multiple modules may export the same object
+ * via re-exports, but in most cases a package should document the single
+ * canonical export that should be used.
+ */
+export interface Package {
+ /**
+ * Whether the package is deprecated.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ /**
+ * An array of the modules this package contains.
+ */
+ modules: JavaScriptModule[]
+ /**
+ * The Markdown to use for the main readme of this package.
+ *
+ * This can be used to override the readme used by Github or npm if that
+ * file contains information irrelevant to custom element catalogs and
+ * documentation viewers.
+ */
+ readme?: string
+ /**
+ * The version of the schema used in this file.
+ */
+ schemaVersion: string
+}
+export interface JavaScriptModule {
+ /**
+ * The declarations of a module.
+ *
+ * For documentation purposes, all declarations that are reachable from
+ * exports should be described here. Ie, functions and objects that may be
+ * properties of exported objects, or passed as arguments to functions.
+ */
+ declarations?: (
+ | ClassDeclaration
+ | FunctionDeclaration
+ | MixinDeclaration
+ | VariableDeclaration
+ | CustomElementDeclaration
+ | CustomElementMixinDeclaration
+ )[]
+ /**
+ * Whether the module is deprecated.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ /**
+ * A markdown description of the module.
+ */
+ description?: string
+ /**
+ * The exports of a module. This includes JavaScript exports and
+ * custom element definitions.
+ */
+ exports?: (JavaScriptExport | CustomElementExport)[]
+ kind: "javascript-module"
+ /**
+ * Path to the javascript file needed to be imported.
+ * (not the path for example to a typescript file.)
+ */
+ path: string
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+}
+export interface ClassDeclaration {
+ /**
+ * Whether the class or mixin is deprecated.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ /**
+ * A markdown description of the class.
+ */
+ description?: string
+ kind: "class"
+ members?: (ClassField | ClassMethod)[]
+ /**
+ * Any class mixins applied in the extends clause of this class.
+ *
+ * If mixins are applied in the class definition, then the true superclass
+ * of this class is the result of applying mixins in order to the superclass.
+ *
+ * Mixins must be listed in order of their application to the superclass or
+ * previous mixin application. This means that the innermost mixin is listed
+ * first. This may read backwards from the common order in JavaScript, but
+ * matches the order of language used to describe mixin application, like
+ * "S with A, B".
+ */
+ mixins?: Reference[]
+ name: string
+ source?: SourceReference
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+ /**
+ * A reference to an export of a module.
+ *
+ * All references are required to be publically accessible, so the canonical
+ * representation of a reference is the export it's available from.
+ *
+ * `package` should generally refer to an npm package name. If `package` is
+ * undefined then the reference is local to this package. If `module` is
+ * undefined the reference is local to the containing module.
+ *
+ * References to global symbols like `Array`, `HTMLElement`, or `Event` should
+ * use a `package` name of `"global:"`.
+ */
+ superclass?: {
+ module?: string
+ name: string
+ package?: string
+ [k: string]: unknown
+ }
+}
+export interface ClassField {
+ default?: string
+ /**
+ * Whether the property is deprecated.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ /**
+ * A markdown description of the field.
+ */
+ description?: string
+ inheritedFrom?: Reference
+ kind: "field"
+ name: string
+ privacy?: Privacy
+ /**
+ * Whether the property is read-only.
+ */
+ readonly?: boolean
+ source?: SourceReference
+ static?: boolean
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+ type?: Type
+}
+/**
+ * A reference to an export of a module.
+ *
+ * All references are required to be publically accessible, so the canonical
+ * representation of a reference is the export it's available from.
+ *
+ * `package` should generally refer to an npm package name. If `package` is
+ * undefined then the reference is local to this package. If `module` is
+ * undefined the reference is local to the containing module.
+ *
+ * References to global symbols like `Array`, `HTMLElement`, or `Event` should
+ * use a `package` name of `"global:"`.
+ */
+export interface Reference {
+ module?: string
+ name: string
+ package?: string
+}
+/**
+ * A reference to the source of a declaration or member.
+ */
+export interface SourceReference {
+ /**
+ * An absolute URL to the source (ie. a GitHub URL).
+ */
+ href: string
+}
+export interface Type {
+ /**
+ * An array of references to the types in the type string.
+ *
+ * These references have optional indices into the type string so that tools
+ * can understand the references in the type string independently of the type
+ * system and syntax. For example, a documentation viewer could display the
+ * type `Array<FooElement | BarElement>` with cross-references to `FooElement`
+ * and `BarElement` without understanding arrays, generics, or union types.
+ */
+ references?: TypeReference[]
+ source?: SourceReference
+ /**
+ * The full string representation of the type, in whatever type syntax is
+ * used, such as JSDoc, Closure, or TypeScript.
+ */
+ text: string
+}
+/**
+ * A reference that is associated with a type string and optionally a range
+ * within the string.
+ *
+ * Start and end must both be present or not present. If they're present, they
+ * are indices into the associated type string. If they are missing, the entire
+ * type string is the symbol referenced and the name should match the type
+ * string.
+ */
+export interface TypeReference {
+ end?: number
+ module?: string
+ name: string
+ package?: string
+ start?: number
+}
+export interface ClassMethod {
+ /**
+ * Whether the function is deprecated.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ /**
+ * A markdown description.
+ */
+ description?: string
+ inheritedFrom?: Reference
+ kind: "method"
+ name: string
+ parameters?: Parameter[]
+ privacy?: Privacy
+ return?: {
+ /**
+ * A markdown description.
+ */
+ description?: string
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+ type?: Type
+ [k: string]: unknown
+ }
+ source?: SourceReference
+ static?: boolean
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+}
+export interface Parameter {
+ default?: string
+ /**
+ * Whether the property is deprecated.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ /**
+ * A markdown description of the field.
+ */
+ description?: string
+ name: string
+ /**
+ * Whether the parameter is optional. Undefined implies non-optional.
+ */
+ optional?: boolean
+ /**
+ * Whether the property is read-only.
+ */
+ readonly?: boolean
+ /**
+ * Whether the parameter is a rest parameter. Only the last parameter may be a rest parameter.
+ * Undefined implies single parameter.
+ */
+ rest?: boolean
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+ type?: Type
+}
+export interface FunctionDeclaration {
+ /**
+ * Whether the function is deprecated.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ /**
+ * A markdown description.
+ */
+ description?: string
+ kind: "function"
+ name: string
+ parameters?: Parameter[]
+ return?: {
+ /**
+ * A markdown description.
+ */
+ description?: string
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+ type?: Type
+ [k: string]: unknown
+ }
+ source?: SourceReference
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+}
+/**
+ * A description of a class mixin.
+ *
+ * Mixins are functions which generate a new subclass of a given superclass.
+ * This interfaces describes the class and custom element features that
+ * are added by the mixin. As such, it extends the CustomElement interface and
+ * ClassLike interface.
+ *
+ * Since mixins are functions, it also extends the FunctionLike interface. This
+ * means a mixin is callable, and has parameters and a return type.
+ *
+ * The return type is often hard or impossible to accurately describe in type
+ * systems like TypeScript. It requires generics and an `extends` operator
+ * that TypeScript lacks. Therefore it's recommended that the return type is
+ * left empty. The most common form of a mixin function takes a single
+ * argument, so consumers of this interface should assume that the return type
+ * is the single argument subclassed by this declaration.
+ *
+ * A mixin should not have a superclass. If a mixins composes other mixins,
+ * they should be listed in the `mixins` field.
+ *
+ * See [this article]{@link https://justinfagnani.com/2015/12/21/real-mixins-with-javascript-classes/}
+ * for more information on the classmixin pattern in JavaScript.
+ */
+export interface MixinDeclaration {
+ /**
+ * Whether the class or mixin is deprecated.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ /**
+ * A markdown description of the class.
+ */
+ description?: string
+ kind: "mixin"
+ members?: (ClassField | ClassMethod)[]
+ /**
+ * Any class mixins applied in the extends clause of this class.
+ *
+ * If mixins are applied in the class definition, then the true superclass
+ * of this class is the result of applying mixins in order to the superclass.
+ *
+ * Mixins must be listed in order of their application to the superclass or
+ * previous mixin application. This means that the innermost mixin is listed
+ * first. This may read backwards from the common order in JavaScript, but
+ * matches the order of language used to describe mixin application, like
+ * "S with A, B".
+ */
+ mixins?: Reference[]
+ name: string
+ parameters?: Parameter[]
+ return?: {
+ /**
+ * A markdown description.
+ */
+ description?: string
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+ type?: Type
+ [k: string]: unknown
+ }
+ source?: SourceReference
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+ /**
+ * A reference to an export of a module.
+ *
+ * All references are required to be publically accessible, so the canonical
+ * representation of a reference is the export it's available from.
+ *
+ * `package` should generally refer to an npm package name. If `package` is
+ * undefined then the reference is local to this package. If `module` is
+ * undefined the reference is local to the containing module.
+ *
+ * References to global symbols like `Array`, `HTMLElement`, or `Event` should
+ * use a `package` name of `"global:"`.
+ */
+ superclass?: {
+ module?: string
+ name: string
+ package?: string
+ [k: string]: unknown
+ }
+}
+export interface VariableDeclaration {
+ default?: string
+ /**
+ * Whether the property is deprecated.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ /**
+ * A markdown description of the field.
+ */
+ description?: string
+ kind: "variable"
+ name: string
+ /**
+ * Whether the property is read-only.
+ */
+ readonly?: boolean
+ source?: SourceReference
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+ type?: Type
+}
+/**
+ * A description of a custom element class.
+ *
+ * Custom elements are JavaScript classes, so this extends from
+ * `ClassDeclaration` and adds custom-element-specific features like
+ * attributes, events, and slots.
+ *
+ * Note that `tagName` in this interface is optional. Tag names are not
+ * neccessarily part of a custom element class, but belong to the definition
+ * (often called the "registration") or the `customElements.define()` call.
+ *
+ * Because classes and tag names can only be registered once, there's a
+ * one-to-one relationship between classes and tag names. For ease of use,
+ * we allow the tag name here.
+ *
+ * Some packages define and register custom elements in separate modules. In
+ * these cases one `Module` should contain the `CustomElement` without a
+ * tagName, and another `Module` should contain the
+ * `CustomElementExport`.
+ */
+export interface CustomElementDeclaration {
+ /**
+ * The attributes that this element is known to understand.
+ */
+ attributes?: Attribute[]
+ cssParts?: CssPart[]
+ cssProperties?: CssCustomProperty[]
+ /**
+ * Distinguishes a regular JavaScript class from a
+ * custom element class
+ */
+ customElement: true
+ demos?: Demo[]
+ /**
+ * Whether the class or mixin is deprecated.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ /**
+ * A markdown description of the class.
+ */
+ description?: string
+ /**
+ * The events that this element fires.
+ */
+ events?: Event[]
+ kind: "class"
+ members?: (ClassField | ClassMethod)[]
+ /**
+ * Any class mixins applied in the extends clause of this class.
+ *
+ * If mixins are applied in the class definition, then the true superclass
+ * of this class is the result of applying mixins in order to the superclass.
+ *
+ * Mixins must be listed in order of their application to the superclass or
+ * previous mixin application. This means that the innermost mixin is listed
+ * first. This may read backwards from the common order in JavaScript, but
+ * matches the order of language used to describe mixin application, like
+ * "S with A, B".
+ */
+ mixins?: Reference[]
+ name: string
+ /**
+ * The shadow dom content slots that this element accepts.
+ */
+ slots?: Slot[]
+ source?: SourceReference
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+ /**
+ * A reference to an export of a module.
+ *
+ * All references are required to be publically accessible, so the canonical
+ * representation of a reference is the export it's available from.
+ *
+ * `package` should generally refer to an npm package name. If `package` is
+ * undefined then the reference is local to this package. If `module` is
+ * undefined the reference is local to the containing module.
+ *
+ * References to global symbols like `Array`, `HTMLElement`, or `Event` should
+ * use a `package` name of `"global:"`.
+ */
+ superclass?: {
+ module?: string
+ name: string
+ package?: string
+ [k: string]: unknown
+ }
+ /**
+ * An optional tag name that should be specified if this is a
+ * self-registering element.
+ *
+ * Self-registering elements must also include a CustomElementExport
+ * in the module's exports.
+ */
+ tagName?: string
+}
+export interface Attribute {
+ /**
+ * The default value of the attribute, if any.
+ *
+ * As attributes are always strings, this is the actual value, not a human
+ * readable description.
+ */
+ default?: string
+ /**
+ * Whether the attribute is deprecated.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ /**
+ * A markdown description.
+ */
+ description?: string
+ /**
+ * The name of the field this attribute is associated with, if any.
+ */
+ fieldName?: string
+ inheritedFrom?: Reference
+ name: string
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+ /**
+ * The type that the attribute will be serialized/deserialized as.
+ */
+ type?: {
+ /**
+ * An array of references to the types in the type string.
+ *
+ * These references have optional indices into the type string so that tools
+ * can understand the references in the type string independently of the type
+ * system and syntax. For example, a documentation viewer could display the
+ * type `Array<FooElement | BarElement>` with cross-references to `FooElement`
+ * and `BarElement` without understanding arrays, generics, or union types.
+ */
+ references?: TypeReference[]
+ source?: SourceReference
+ /**
+ * The full string representation of the type, in whatever type syntax is
+ * used, such as JSDoc, Closure, or TypeScript.
+ */
+ text: string
+ [k: string]: unknown
+ }
+}
+/**
+ * The description of a CSS Part
+ */
+export interface CssPart {
+ /**
+ * Whether the CSS shadow part is deprecated.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ /**
+ * A markdown description.
+ */
+ description?: string
+ name: string
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+}
+export interface CssCustomProperty {
+ default?: string
+ /**
+ * Whether the CSS custom property is deprecated.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ /**
+ * A markdown description.
+ */
+ description?: string
+ /**
+ * The name of the property, including leading `--`.
+ */
+ name: string
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+ /**
+ * The expected syntax of the defined property. Defaults to "*".
+ *
+ * The syntax must be a valid CSS [syntax string](https://developer.mozilla.org/en-US/docs/Web/CSS/@property/syntax)
+ * as defined in the CSS Properties and Values API.
+ *
+ * Examples:
+ *
+ * "<color>": accepts a color
+ * "<length> | <percentage>": accepts lengths or percentages but not calc expressions with a combination of the two
+ * "small | medium | large": accepts one of these values set as custom idents.
+ * "*": any valid token
+ */
+ syntax?: string
+}
+export interface Demo {
+ /**
+ * A markdown description of the demo.
+ */
+ description?: string
+ source?: SourceReference
+ /**
+ * Relative URL of the demo if it's published with the package. Absolute URL
+ * if it's hosted.
+ */
+ url: string
+}
+export interface Event {
+ /**
+ * Whether the event is deprecated.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ /**
+ * A markdown description.
+ */
+ description?: string
+ inheritedFrom?: Reference
+ name: string
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+ /**
+ * The type of the event object that's fired.
+ */
+ type: {
+ /**
+ * An array of references to the types in the type string.
+ *
+ * These references have optional indices into the type string so that tools
+ * can understand the references in the type string independently of the type
+ * system and syntax. For example, a documentation viewer could display the
+ * type `Array<FooElement | BarElement>` with cross-references to `FooElement`
+ * and `BarElement` without understanding arrays, generics, or union types.
+ */
+ references?: TypeReference[]
+ source?: SourceReference
+ /**
+ * The full string representation of the type, in whatever type syntax is
+ * used, such as JSDoc, Closure, or TypeScript.
+ */
+ text: string
+ [k: string]: unknown
+ }
+}
+export interface Slot {
+ /**
+ * Whether the slot is deprecated.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ /**
+ * A markdown description.
+ */
+ description?: string
+ /**
+ * The slot name, or the empty string for an unnamed slot.
+ */
+ name: string
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+}
+/**
+ * A class mixin that also adds custom element related properties.
+ */
+export interface CustomElementMixinDeclaration {
+ /**
+ * The attributes that this element is known to understand.
+ */
+ attributes?: Attribute[]
+ cssParts?: CssPart[]
+ cssProperties?: CssCustomProperty[]
+ /**
+ * Distinguishes a regular JavaScript class from a
+ * custom element class
+ */
+ customElement: true
+ demos?: Demo[]
+ /**
+ * Whether the class or mixin is deprecated.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ /**
+ * A markdown description of the class.
+ */
+ description?: string
+ /**
+ * The events that this element fires.
+ */
+ events?: Event[]
+ kind: "mixin"
+ members?: (ClassField | ClassMethod)[]
+ /**
+ * Any class mixins applied in the extends clause of this class.
+ *
+ * If mixins are applied in the class definition, then the true superclass
+ * of this class is the result of applying mixins in order to the superclass.
+ *
+ * Mixins must be listed in order of their application to the superclass or
+ * previous mixin application. This means that the innermost mixin is listed
+ * first. This may read backwards from the common order in JavaScript, but
+ * matches the order of language used to describe mixin application, like
+ * "S with A, B".
+ */
+ mixins?: Reference[]
+ name: string
+ parameters?: Parameter[]
+ return?: {
+ /**
+ * A markdown description.
+ */
+ description?: string
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+ type?: Type
+ [k: string]: unknown
+ }
+ /**
+ * The shadow dom content slots that this element accepts.
+ */
+ slots?: Slot[]
+ source?: SourceReference
+ /**
+ * A markdown summary suitable for display in a listing.
+ */
+ summary?: string
+ /**
+ * A reference to an export of a module.
+ *
+ * All references are required to be publically accessible, so the canonical
+ * representation of a reference is the export it's available from.
+ *
+ * `package` should generally refer to an npm package name. If `package` is
+ * undefined then the reference is local to this package. If `module` is
+ * undefined the reference is local to the containing module.
+ *
+ * References to global symbols like `Array`, `HTMLElement`, or `Event` should
+ * use a `package` name of `"global:"`.
+ */
+ superclass?: {
+ module?: string
+ name: string
+ package?: string
+ [k: string]: unknown
+ }
+ /**
+ * An optional tag name that should be specified if this is a
+ * self-registering element.
+ *
+ * Self-registering elements must also include a CustomElementExport
+ * in the module's exports.
+ */
+ tagName?: string
+}
+export interface JavaScriptExport {
+ /**
+ * A reference to an export of a module.
+ *
+ * All references are required to be publically accessible, so the canonical
+ * representation of a reference is the export it's available from.
+ *
+ * `package` should generally refer to an npm package name. If `package` is
+ * undefined then the reference is local to this package. If `module` is
+ * undefined the reference is local to the containing module.
+ *
+ * References to global symbols like `Array`, `HTMLElement`, or `Event` should
+ * use a `package` name of `"global:"`.
+ */
+ declaration: {
+ module?: string
+ name: string
+ package?: string
+ [k: string]: unknown
+ }
+ /**
+ * Whether the export is deprecated. For example, the name of the export was changed.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ kind: "js"
+ /**
+ * The name of the exported symbol.
+ *
+ * JavaScript has a number of ways to export objects which determine the
+ * correct name to use.
+ *
+ * - Default exports must use the name "default".
+ * - Named exports use the name that is exported. If the export is renamed
+ * with the "as" clause, use the exported name.
+ * - Aggregating exports (`* from`) should use the name `*`
+ */
+ name: string
+}
+/**
+ * A global custom element defintion, ie the result of a
+ * `customElements.define()` call.
+ *
+ * This is represented as an export because a definition makes the element
+ * available outside of the module it's defined it.
+ */
+export interface CustomElementExport {
+ /**
+ * A reference to an export of a module.
+ *
+ * All references are required to be publically accessible, so the canonical
+ * representation of a reference is the export it's available from.
+ *
+ * `package` should generally refer to an npm package name. If `package` is
+ * undefined then the reference is local to this package. If `module` is
+ * undefined the reference is local to the containing module.
+ *
+ * References to global symbols like `Array`, `HTMLElement`, or `Event` should
+ * use a `package` name of `"global:"`.
+ */
+ declaration: {
+ module?: string
+ name: string
+ package?: string
+ [k: string]: unknown
+ }
+ /**
+ * Whether the custom-element export is deprecated.
+ * For example, a future version will not register the custom element in this file.
+ * If the value is a string, it's the reason for the deprecation.
+ */
+ deprecated?: string | boolean
+ kind: "custom-element-definition"
+ /**
+ * The tag name of the custom element.
+ */
+ name: string
+}
diff --git a/packages/tools/lib/cem/utils.mjs b/packages/tools/lib/cem/utils.mjs
new file mode 100644
index 000000000000..b5b8370586df
--- /dev/null
+++ b/packages/tools/lib/cem/utils.mjs
@@ -0,0 +1,334 @@
+import fs from "fs";
+import path from "path";
+
+let JSDocErrors = [];
+
+const getDeprecatedStatus = (jsdocComment) => {
+ const deprecatedTag = findTag(jsdocComment, "deprecated");
+ return deprecatedTag?.name
+ ? deprecatedTag.description
+ ? `${deprecatedTag.name} ${deprecatedTag.description}`
+ : deprecatedTag.name
+ : deprecatedTag
+ ? true
+ : undefined;
+};
+
+const getTypeRefs = (ts, classNodeMember, member) => {
+ const extractTypeRefs = (type) => {
+ if (type?.kind === ts.SyntaxKind.TypeReference) {
+ return type.typeArguments?.length
+ ? type.typeArguments.map((typeRef) => typeRef.typeName?.text)
+ : [type.typeName?.text];
+ } else if (type?.kind === ts.SyntaxKind.UnionType) {
+ return type.types
+ .map((type) => extractTypeRefs(type))
+ .flat(1);
+ } else if (type?.kind === ts.SyntaxKind.TemplateLiteralType) {
+ if (member.type) {
+ member.type.text = member.type.text.replaceAll?.(/`|\${|}/g, "");
+ }
+
+ return type.templateSpans?.length
+ ? type.templateSpans.map((typeRef) => typeRef.type?.typeName?.text)
+ : [type.typeName?.text];
+ }
+ };
+
+ let typeRefs = extractTypeRefs(classNodeMember.type);
+
+ if (typeRefs) {
+ typeRefs = typeRefs.filter((e) => !!e);
+ }
+
+ return typeRefs?.length ? typeRefs : undefined;
+};
+
+const getSinceStatus = (jsdocComment) => {
+ const sinceTag = findTag(jsdocComment, "since");
+ return sinceTag
+ ? sinceTag.description
+ ? `${sinceTag.name} ${sinceTag.description}`
+ : sinceTag.name
+ : undefined;
+};
+
+const getPrivacyStatus = (jsdocComment) => {
+ const privacyTag = findTag(jsdocComment, ["public", "private", "protected"]);
+ return privacyTag?.tag || "private";
+};
+
+const findPackageName = (ts, sourceFile, typeName, packageJSON) => {
+ const localStatements = [
+ ts.SyntaxKind.EnumDeclaration,
+ ts.SyntaxKind.InterfaceDeclaration,
+ ts.SyntaxKind.ClassDeclaration,
+ ts.SyntaxKind.TypeAliasDeclaration,
+ ];
+
+ const isLocalDeclared = sourceFile.statements.some(
+ (statement) =>
+ localStatements.includes(statement.kind) && statement?.name?.text === typeName
+ );
+
+ if (isLocalDeclared) {
+ return packageJSON?.name;
+ } else {
+ const importStatements = sourceFile.statements?.filter(
+ (statement) => statement.kind === ts.SyntaxKind.ImportDeclaration
+ );
+ const currentModuleSpecifier = importStatements.find((statement) => {
+ if (statement.importClause?.name?.text === typeName) {
+ return true;
+ }
+
+ return statement.importClause?.namedBindings?.elements?.some(
+ (element) => element.name?.text === typeName
+ );
+ })?.moduleSpecifier;
+
+ if (currentModuleSpecifier?.text?.startsWith(".")) {
+ return packageJSON?.name;
+ } else {
+ return Object.keys(packageJSON?.dependencies || {}).find(
+ (dependency) =>
+ currentModuleSpecifier?.text?.startsWith(dependency)
+ );
+ }
+ }
+};
+
+const findImportPath = (ts, sourceFile, typeName, packageJSON, modulePath) => {
+ const localStatements = [
+ ts.SyntaxKind.EnumDeclaration,
+ ts.SyntaxKind.InterfaceDeclaration,
+ ts.SyntaxKind.ClassDeclaration,
+ ts.SyntaxKind.TypeAliasDeclaration,
+ ];
+
+ const isLocalDeclared = sourceFile.statements.some(
+ (statement) =>
+ localStatements.includes(statement.kind) && statement?.name?.text === typeName
+ );
+
+ if (isLocalDeclared) {
+ return (
+ modulePath?.replace("src", "dist")?.replace(".ts", ".js") || undefined
+ );
+ } else {
+ const importStatements = sourceFile.statements?.filter(
+ (statement) => statement.kind === ts.SyntaxKind.ImportDeclaration
+ );
+ const currentModuleSpecifier = importStatements.find((statement) => {
+ if (statement.importClause?.name?.text === typeName) {
+ return true;
+ }
+
+ return statement.importClause?.namedBindings?.elements?.some(
+ (element) => element.name?.text === typeName
+ );
+ })?.moduleSpecifier;
+
+ if (currentModuleSpecifier?.text?.startsWith(".")) {
+ return (
+ path.join(path.dirname(modulePath), currentModuleSpecifier.text)
+ ?.replace("src", "dist")?.replace(".ts", ".js") || undefined
+ );
+ } else {
+ const packageName = Object.keys(packageJSON?.dependencies || {}).find(
+ (dependency) =>
+ currentModuleSpecifier?.text?.startsWith(dependency)
+ );
+ return currentModuleSpecifier?.text
+ ?.replace(`${packageName}/`, "") || undefined;
+ }
+ }
+};
+
+const getReference = (ts, type, classNode, modulePath) => {
+ let sourceFile = classNode.parent;
+
+ while (sourceFile && sourceFile.kind !== ts.SyntaxKind.SourceFile) {
+ sourceFile = sourceFile.parent;
+ }
+
+ const packageJSON = JSON.parse(fs.readFileSync("./package.json"));
+
+ const typeName =
+ typeof type === "string"
+ ? type
+ : type.class?.expression?.text ||
+ type.typeExpression?.type?.getText() ||
+ type.typeExpression?.type?.elementType?.typeName?.text;
+ const packageName = findPackageName(ts, sourceFile, typeName, packageJSON);
+ const importPath = findImportPath(
+ ts,
+ sourceFile,
+ typeName,
+ packageJSON,
+ modulePath
+ );
+
+ return packageName && {
+ name: typeName,
+ package: packageName,
+ module: importPath,
+ };
+};
+
+const getType = (type) => {
+ const typeName = typeof type === "string" ? type : type?.type;
+
+ const multiple =
+ typeName?.endsWith("[]") || typeName?.startsWith("Array<");
+ const name = multiple
+ ? typeName?.replace("[]", "")?.replace("Array<", "")?.replace(">", "")
+ : typeName;
+
+ return typeName ? { typeName: multiple ? `Array<${name}>` : typeName, name, multiple } : undefined;
+};
+
+const commonTags = ["public", "protected", "private", "since", "deprecated"];
+
+const allowedTags = {
+ field: [...commonTags, "formEvents", "formProperty", "default"],
+ slot: [...commonTags, "default"],
+ event: [...commonTags, "param", "allowPreventDefault", "native"],
+ eventParam: [...commonTags],
+ method: [...commonTags, "param", "returns", "override"],
+ class: [...commonTags, "constructor", "class", "abstract", "implements", "extends", "slot", "csspart"],
+ enum: [...commonTags],
+ enumMember: [...commonTags],
+ interface: [...commonTags],
+};
+allowedTags.getter = [...allowedTags.field, "override"]
+
+const tagMatchCallback = (tag, tagName) => {
+ const currentTagName = tag.tag;
+
+ return typeof tagName === "string"
+ ? currentTagName === tagName
+ : tagName.includes(currentTagName);
+};
+
+const findDecorator = (node, decoratorName) => {
+ return node?.decorators?.find(
+ (decorator) =>
+ decorator?.expression?.expression?.text === decoratorName
+ );
+};
+
+const findAllDecorators = (node, decoratorName) => {
+ return (
+ node?.decorators?.filter(
+ (decorator) =>
+ decorator?.expression?.expression?.text === decoratorName
+ ) || []
+ );
+};
+
+const hasTag = (jsDoc, tagName) => {
+ if (!jsDoc) {
+ return;
+ }
+
+ return jsDoc?.tags?.some((tag) => tagMatchCallback(tag, tagName));
+};
+
+const findTag = (jsDoc, tagName) => {
+ if (!jsDoc) {
+ return;
+ }
+
+ return jsDoc?.tags?.find((tag) => tagMatchCallback(tag, tagName));
+};
+
+const findAllTags = (jsDoc, tagName) => {
+ if (!jsDoc) {
+ return [];
+ }
+
+ const foundTags = jsDoc?.tags?.filter((tag) => tagMatchCallback(tag, tagName));
+
+ return foundTags || [];
+};
+
+const validateJSDocTag = (tag) => {
+ const booleanTags = ["private", "protected", "public", "abstract", "allowPreventDefault", "native", "formProperty", "constructor", "override"];
+ let tagName = tag.tag;
+
+ if (booleanTags.includes(tag.tag)) {
+ tagName = "boolean";
+ }
+
+ switch (tagName) {
+ case "boolean":
+ return !tag.name && !tag.type && !tag.description;
+ case "deprecated":
+ return !tag.type;
+ case "extends":
+ return !tag.type && tag.name && !tag.description;
+ case "implements":
+ return tag.type && !tag.name && !tag.description;
+ case "slot":
+ return tag.type && tag.name && tag.description;
+ case "csspart":
+ return !tag.type && tag.name && tag.description;
+ case "since":
+ return !tag.type && tag.name;
+ case "returns":
+ return !tag.type && tag.name;
+ case "default":
+ return !tag.type && !tag.description;
+ case "class":
+ return !tag.type;
+ case "param":
+ return !tag.type && tag.name;
+ case "eventparam":
+ return tag.type && tag.name;
+ case "formEvents":
+ return !tag.type && tag.name;
+ default:
+ return false;
+ }
+};
+
+const validateJSDocComment = (fieldType, jsdocComment, node, moduleDoc) => {
+ return !!jsdocComment?.tags?.every((tag) => {
+ let isValid = false
+
+ if (fieldType === "event" && tag?.tag === "param") {
+ isValid = allowedTags[fieldType]?.includes(tag.tag) && validateJSDocTag({...tag, tag: "eventparam"});
+ } else {
+ isValid = allowedTags[fieldType]?.includes(tag.tag) && validateJSDocTag(tag);
+ }
+
+ if (!isValid) {
+ JSDocErrors.push(
+ `=== ERROR: Problem found with ${node}'s JSDoc comment in ${moduleDoc.path}: \n\t- @${tag.tag} tag is being used wrong or it's not part of ${fieldType} JSDoc tags`
+ );
+ }
+
+ return !!isValid;
+ });
+};
+
+const getJSDocErrors = () => {
+ return JSDocErrors;
+};
+
+export {
+ getPrivacyStatus,
+ getSinceStatus,
+ getDeprecatedStatus,
+ getType,
+ getReference,
+ validateJSDocComment,
+ findDecorator,
+ findAllDecorators,
+ hasTag,
+ findTag,
+ findAllTags,
+ getJSDocErrors,
+ getTypeRefs,
+};
diff --git a/packages/tools/lib/cem/validate.js b/packages/tools/lib/cem/validate.js
new file mode 100644
index 000000000000..b46f2ae29e5a
--- /dev/null
+++ b/packages/tools/lib/cem/validate.js
@@ -0,0 +1,63 @@
+const fs = require('fs');
+const Ajv = require('ajv');
+const path = require('path');
+
+// Load your JSON schema
+const extenalSchema = require('./schema.json');
+const internalSchema = require('./schema-internal.json');
+
+// Load your JSON data from the input file
+const inputFilePath = path.join(process.cwd(), "dist/custom-elements.json"); // Update with your file path
+const customManifest = fs.readFileSync(inputFilePath, 'utf8');
+const inputDataInternal = JSON.parse(customManifest);
+
+const clearProps = (data) => {
+ if (Array.isArray(data)) {
+ for (let i = 0; i < data.length; i++) {
+ if (typeof data[i] === "object") {
+ if (["enum", "interface"].includes(data[i].kind)) {
+ data.splice(i, 1);
+ i--;
+ } else {
+ clearProps(data[i]);
+ }
+ }
+ }
+ } else if (typeof data === "object") {
+ Object.keys(data).forEach(prop => {
+ if (prop.startsWith("_ui5")) {
+ delete data[prop];
+ } else if (typeof data[prop] === "object") {
+ clearProps(data[prop]);
+ }
+ });
+ }
+
+ return data;
+}
+
+const inputDataExternal = clearProps(JSON.parse(JSON.stringify(inputDataInternal)));
+
+const ajv = new Ajv({ allowUnionTypes: true, allError: true })
+
+let validate = ajv.compile(internalSchema)
+
+// Validate the JSON data against the schema
+if (validate(inputDataInternal)) {
+ console.log('Validation internal custom-elements successful');
+} else {
+ console.error('Validation of internal custom-elements failed:', ajv.errorsText(validate.errors));
+ throw new Error("Validation of internal custom-elements failed");
+}
+
+validate = ajv.compile(extenalSchema)
+
+// Validate the JSON data against the schema
+if (validate(inputDataExternal)) {
+ console.log('Validation external custom-elements successful');
+ fs.writeFileSync(inputFilePath, JSON.stringify(inputDataExternal, null, 2), 'utf8');
+ fs.writeFileSync(inputFilePath.replace("custom-elements", "custom-elements-internal"), JSON.stringify(inputDataInternal, null, 2), 'utf8');
+} else {
+ console.error('Validation of external custom-elements failed:', ajv.errorsText(validate.errors));
+ throw new Error("Validation of external custom-elements failed");
+}
\ No newline at end of file
diff --git a/packages/tools/package.json b/packages/tools/package.json
index 60b978e96e12..62c8ff28225d 100644
--- a/packages/tools/package.json
+++ b/packages/tools/package.json
@@ -21,6 +21,7 @@
"directory": "packages/tools"
},
"dependencies": {
+ "@custom-elements-manifest/analyzer": "^0.8.4",
"@typescript-eslint/eslint-plugin": "^5.42.1",
"@typescript-eslint/parser": "^5.42.1",
"@wdio/cli": "^7.19.7",
@@ -29,11 +30,13 @@
"@wdio/mocha-framework": "^7.19.7",
"@wdio/spec-reporter": "^7.19.7",
"@wdio/static-server-service": "^7.19.5",
+ "ajv": "^8.12.0",
"chai": "^4.3.4",
"child_process": "^1.0.2",
"chokidar": "^3.5.1",
"chokidar-cli": "^3.0.0",
"command-line-args": "^5.1.1",
+ "comment-parser": "^1.4.0",
"concurrently": "^6.0.0",
"cross-env": "^7.0.3",
"cssnano": "^6.0.1",
@@ -50,6 +53,7 @@
"is-port-reachable": "^3.1.0",
"jsdoc": "^3.6.6",
"json-beautify": "^1.1.1",
+ "json-schema-to-typescript": "^13.1.1",
"mkdirp": "^1.0.4",
"nps": "^5.10.0",
"postcss": "^8.4.5",
diff --git a/yarn.lock b/yarn.lock
index d9bf5b9c5617..06f03b8420a6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1319,6 +1319,16 @@
"@babel/helper-validator-identifier" "^7.19.1"
to-fast-properties "^2.0.0"
+"@bcherny/json-schema-ref-parser@10.0.5-fork":
+ version "10.0.5-fork"
+ resolved "https://registry.yarnpkg.com/@bcherny/json-schema-ref-parser/-/json-schema-ref-parser-10.0.5-fork.tgz#9b5e1e7e07964ea61840174098e634edbe8197bc"
+ integrity sha512-E/jKbPoca1tfUPj3iSbitDZTGnq6FUFjkH6L8U2oDwSuwK1WhnnVtCG7oFOTg/DDnyoXbQYUiUiGOibHqaGVnw==
+ dependencies:
+ "@jsdevtools/ono" "^7.1.3"
+ "@types/json-schema" "^7.0.6"
+ call-me-maybe "^1.0.1"
+ js-yaml "^4.1.0"
+
"@buxlabs/amd-to-es6@0.16.1":
version "0.16.1"
resolved "https://registry.yarnpkg.com/@buxlabs/amd-to-es6/-/amd-to-es6-0.16.1.tgz#4baf5bc01af7d2306a8fe3ecb3fe3589688e7aa7"
@@ -1494,6 +1504,29 @@
dependencies:
"@jridgewell/trace-mapping" "0.3.9"
+"@custom-elements-manifest/analyzer@^0.8.4":
+ version "0.8.4"
+ resolved "https://registry.yarnpkg.com/@custom-elements-manifest/analyzer/-/analyzer-0.8.4.tgz#34fce1158a44cb7a9d8c1c7415e8c9d03e25d95f"
+ integrity sha512-hibYFNoqPc/xSH9ySuotOllz3UtQnnbG912oC0RtRwHGilnOVT5zeL3Ip26swCjiuFAp8Y0uLN5DwnMpa/xXYQ==
+ dependencies:
+ "@custom-elements-manifest/find-dependencies" "^0.0.5"
+ "@github/catalyst" "^1.6.0"
+ "@web/config-loader" "0.1.3"
+ chokidar "3.5.2"
+ command-line-args "5.1.2"
+ comment-parser "1.2.4"
+ custom-elements-manifest "1.0.0"
+ debounce "1.2.1"
+ globby "11.0.4"
+ typescript "~4.3.2"
+
+"@custom-elements-manifest/find-dependencies@^0.0.5":
+ version "0.0.5"
+ resolved "https://registry.yarnpkg.com/@custom-elements-manifest/find-dependencies/-/find-dependencies-0.0.5.tgz#ebc11672019de3d52bb8f29f76efe510b8401fbd"
+ integrity sha512-fKIMMZCDFSoL2ySUoz8knWgpV4jpb0lUXgLOvdZQMQFHxgxz1PqOJpUIypwvEVyKk3nEHRY4f10gNol02HjeCg==
+ dependencies:
+ es-module-lexer "^0.9.3"
+
"@discoveryjs/json-ext@^0.5.3":
version "0.5.7"
resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
@@ -1761,6 +1794,11 @@
resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
integrity sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==
+"@github/catalyst@^1.6.0":
+ version "1.6.0"
+ resolved "https://registry.yarnpkg.com/@github/catalyst/-/catalyst-1.6.0.tgz#378734d1d2b6a85af169d7e66c1a2a604bf1e82c"
+ integrity sha512-u8A+DameixqpeyHzvnJWTGj+wfiskQOYHzSiJscCWVfMkIT3rxnbHMtGh3lMthaRY21nbUOK71WcsCnCrXhBJQ==
+
"@humanwhocodes/config-array@^0.5.0":
version "0.5.0"
resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz#1407967d4c6eecd7388f83acf1eaf4d0c6e58ef9"
@@ -1938,6 +1976,11 @@
"@jridgewell/resolve-uri" "3.1.0"
"@jridgewell/sourcemap-codec" "1.4.14"
+"@jsdevtools/ono@^7.1.3":
+ version "7.1.3"
+ resolved "https://registry.yarnpkg.com/@jsdevtools/ono/-/ono-7.1.3.tgz#9df03bbd7c696a5c58885c34aa06da41c8543796"
+ integrity sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==
+
"@juggle/resize-observer@^3.3.1":
version "3.4.0"
resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
@@ -3372,6 +3415,14 @@
"@types/jsonfile" "*"
"@types/node" "*"
+"@types/glob@^7.1.3":
+ version "7.2.0"
+ resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.2.0.tgz#bc1b5bf3aa92f25bd5dd39f35c57361bdce5b2eb"
+ integrity sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==
+ dependencies:
+ "@types/minimatch" "*"
+ "@types/node" "*"
+
"@types/glob@^8.0.0", "@types/glob@^8.1.0":
version "8.1.0"
resolved "https://registry.yarnpkg.com/@types/glob/-/glob-8.1.0.tgz#b63e70155391b0584dce44e7ea25190bbc38f2fc"
@@ -3446,6 +3497,11 @@
dependencies:
"@types/sizzle" "*"
+"@types/json-schema@^7.0.11", "@types/json-schema@^7.0.6":
+ version "7.0.13"
+ resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.13.tgz#02c24f4363176d2d18fc8b70b9f3c54aba178a85"
+ integrity sha512-RbSSoHliUbnXj3ny0CNFOoxrIDV6SUGyStHsvDqosw6CkdPV8TtWGlfecuK4ToyMEAql6pzNxgCFKanovUzlgQ==
+
"@types/json-schema@^7.0.9":
version "7.0.12"
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.12.tgz#d70faba7039d5fca54c83c7dbab41051d2b6f6cb"
@@ -3501,6 +3557,11 @@
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.195.tgz#bafc975b252eb6cea78882ce8a7b6bf22a6de632"
integrity sha512-Hwx9EUgdwf2GLarOjQp5ZH8ZmblzcbTBC2wtQWNKARBSxM9ezRIAUpeDTgoQRAFB0+8CNWXVA9+MaSOzOF3nPg==
+"@types/lodash@^4.14.182":
+ version "4.14.199"
+ resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.199.tgz#c3edb5650149d847a277a8961a7ad360c474e9bf"
+ integrity sha512-Vrjz5N5Ia4SEzWWgIVwnHNEnb1UE1XMkvY5DGXrAeOGE9imk0hgTHh5GyDjLDJi9OTCn9oo9dXH1uToK1VRfrg==
+
"@types/markdown-it@^12.2.3":
version "12.2.3"
resolved "https://registry.yarnpkg.com/@types/markdown-it/-/markdown-it-12.2.3.tgz#0d6f6e5e413f8daaa26522904597be3d6cd93b51"
@@ -3541,16 +3602,16 @@
resolved "https://registry.yarnpkg.com/@types/mime/-/mime-1.3.2.tgz#93e25bf9ee75fe0fd80b594bc4feb0e862111b5a"
integrity sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==
+"@types/minimatch@*", "@types/minimatch@^5.1.2":
+ version "5.1.2"
+ resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-5.1.2.tgz#07508b45797cb81ec3f273011b054cd0755eddca"
+ integrity sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==
+
"@types/minimatch@^3.0.3":
version "3.0.5"
resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.5.tgz#1001cc5e6a3704b83c236027e77f2f58ea010f40"
integrity sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==
-"@types/minimatch@^5.1.2":
- version "5.1.2"
- resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-5.1.2.tgz#07508b45797cb81ec3f273011b054cd0755eddca"
- integrity sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==
-
"@types/minimist@^1.2.0", "@types/minimist@^1.2.2":
version "1.2.2"
resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.2.tgz#ee771e2ba4b3dc5b372935d549fd9617bf345b8c"
@@ -3624,6 +3685,11 @@
resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
+"@types/prettier@^2.6.1":
+ version "2.7.3"
+ resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.7.3.tgz#3e51a17e291d01d17d3fc61422015a933af7a08f"
+ integrity sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==
+
"@types/pretty-hrtime@^1.0.0":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@types/pretty-hrtime/-/pretty-hrtime-1.0.1.tgz#72a26101dc567b0d68fd956cf42314556e42d601"
@@ -4078,6 +4144,13 @@
"@wdio/types" "7.30.2"
p-iteration "^1.1.8"
+"@web/config-loader@0.1.3":
+ version "0.1.3"
+ resolved "https://registry.yarnpkg.com/@web/config-loader/-/config-loader-0.1.3.tgz#8325ea54f75ef2ee7166783e64e66936db25bff7"
+ integrity sha512-XVKH79pk4d3EHRhofete8eAnqto1e8mCRAqPV00KLNFzCWSe8sWmLnqKCqkPNARC6nksMaGrATnA5sPDRllMpQ==
+ dependencies:
+ semver "^7.3.4"
+
"@whitespace/storybook-addon-html@^5.1.0":
version "5.1.6"
resolved "https://registry.yarnpkg.com/@whitespace/storybook-addon-html/-/storybook-addon-html-5.1.6.tgz#9813a40a3e71e4afcb49069788e1120423e083f6"
@@ -4238,7 +4311,7 @@ ajv@^6.10.0, ajv@^6.12.4, ajv@^6.12.6:
json-schema-traverse "^0.4.1"
uri-js "^4.2.2"
-ajv@^8.0.1:
+ajv@^8.0.1, ajv@^8.12.0:
version "8.12.0"
resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.12.0.tgz#d1a0527323e22f53562c567c00991577dfbe19d1"
integrity sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==
@@ -4321,6 +4394,11 @@ ansi-styles@^6.1.0:
resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
+any-promise@^1.0.0:
+ version "1.3.0"
+ resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
+ integrity sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==
+
anymatch@^3.0.3, anymatch@~3.1.2:
version "3.1.3"
resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
@@ -4421,6 +4499,11 @@ array-back@^3.0.1, array-back@^3.1.0:
resolved "https://registry.yarnpkg.com/array-back/-/array-back-3.1.0.tgz#b8859d7a508871c9a7b2cf42f99428f65e96bfb0"
integrity sha512-TkuxA4UCOvxuDK6NZYXCalszEzj+TLszyASooky+i742l9TqsOdYCMJJupxRic61hwquNtppB3hgcuq9SVSH1Q==
+array-back@^6.1.2:
+ version "6.2.2"
+ resolved "https://registry.yarnpkg.com/array-back/-/array-back-6.2.2.tgz#f567d99e9af88a6d3d2f9dfcc21db6f9ba9fd157"
+ integrity sha512-gUAZ7HPyb4SJczXAMUXMGAvI976JoK3qEx9v1FTmeYuJj0IBiaKttG1ydtGKdkfqWkIkouke7nG8ufGy77+Cvw==
+
array-buffer-byte-length@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz#fabe8bc193fea865f317fe7807085ee0dee5aead"
@@ -4993,6 +5076,11 @@ call-bind@^1.0.0, call-bind@^1.0.2:
function-bind "^1.1.1"
get-intrinsic "^1.0.2"
+call-me-maybe@^1.0.1:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/call-me-maybe/-/call-me-maybe-1.0.2.tgz#03f964f19522ba643b1b0693acb9152fe2074baa"
+ integrity sha512-HpX65o1Hnr9HH25ojC1YGs7HCQLq0GCOibSaWER0eNpgJ/Z1MZv2mTc7+xh6WOPxbRVcmgbv4hGU+uSQ/2xFZQ==
+
callsites@^3.0.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
@@ -5282,6 +5370,17 @@ cli-boxes@^2.2.0:
resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-2.2.1.tgz#ddd5035d25094fce220e9cab40a45840a440318f"
integrity sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw==
+cli-color@^2.0.2:
+ version "2.0.3"
+ resolved "https://registry.yarnpkg.com/cli-color/-/cli-color-2.0.3.tgz#73769ba969080629670f3f2ef69a4bf4e7cc1879"
+ integrity sha512-OkoZnxyC4ERN3zLzZaY9Emb7f/MhBOIpePv0Ycok0fJYT+Ouo00UBEIwsVsr0yoow++n5YWlSUgST9GKhNHiRQ==
+ dependencies:
+ d "^1.0.1"
+ es5-ext "^0.10.61"
+ es6-iterator "^2.0.3"
+ memoizee "^0.4.15"
+ timers-ext "^0.1.7"
+
cli-cursor@3.1.0, cli-cursor@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-3.1.0.tgz#264305a7ae490d1d03bf0c9ba7c925d1753af307"
@@ -5442,6 +5541,16 @@ comma-separated-tokens@^1.0.0:
resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz#632b80b6117867a158f1080ad498b2fbe7e3f5ea"
integrity sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==
+command-line-args@5.1.2:
+ version "5.1.2"
+ resolved "https://registry.yarnpkg.com/command-line-args/-/command-line-args-5.1.2.tgz#25908e573d2214bc23a8437e3df853b02dffa425"
+ integrity sha512-fytTsbndLbl+pPWtS0CxLV3BEWw9wJayB8NnU2cbQqVPsNdYezQeT+uIQv009m+GShnMNyuoBrRo8DTmuTfSCA==
+ dependencies:
+ array-back "^6.1.2"
+ find-replace "^3.0.0"
+ lodash.camelcase "^4.3.0"
+ typical "^4.0.0"
+
command-line-args@^5.1.1:
version "5.2.1"
resolved "https://registry.yarnpkg.com/command-line-args/-/command-line-args-5.2.1.tgz#c44c32e437a57d7c51157696893c5909e9cec42e"
@@ -5467,6 +5576,16 @@ commander@^8.0.0:
resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
+comment-parser@1.2.4:
+ version "1.2.4"
+ resolved "https://registry.yarnpkg.com/comment-parser/-/comment-parser-1.2.4.tgz#489f3ee55dfd184a6e4bffb31baba284453cb760"
+ integrity sha512-pm0b+qv+CkWNriSTMsfnjChF9kH0kxz55y44Wo5le9qLxMj5xDQAaEd9ZN1ovSuk9CsrncWaFwgpOMg7ClJwkw==
+
+comment-parser@^1.4.0:
+ version "1.4.0"
+ resolved "https://registry.yarnpkg.com/comment-parser/-/comment-parser-1.4.0.tgz#0f8c560f59698193854f12884c20c0e39a26d32c"
+ integrity sha512-QLyTNiZ2KDOibvFPlZ6ZngVsZ/0gYnE6uTXi5aoDg8ed3AkJAz4sEje3Y8a29hQ1s6A99MZXe47fLAXQ1rTqaw==
+
common-ancestor-path@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/common-ancestor-path/-/common-ancestor-path-1.0.1.tgz#4f7d2d1394d91b7abdf51871c62f71eadb0182a7"
@@ -5993,6 +6112,19 @@ currently-unhandled@^0.4.1:
dependencies:
array-find-index "^1.0.1"
+custom-elements-manifest@1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/custom-elements-manifest/-/custom-elements-manifest-1.0.0.tgz#b35c2129076a1dc9f95d720c6f7b5b71a857274b"
+ integrity sha512-j59k0ExGCKA8T6Mzaq+7axc+KVHwpEphEERU7VZ99260npu/p/9kd+Db+I3cGKxHkM5y6q5gnlXn00mzRQkX2A==
+
+d@1, d@^1.0.1:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a"
+ integrity sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==
+ dependencies:
+ es5-ext "^0.10.50"
+ type "^1.0.1"
+
dargs@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/dargs/-/dargs-7.0.0.tgz#04015c41de0bcb69ec84050f3d9be0caf8d6d5cc"
@@ -6015,6 +6147,11 @@ dateformat@^3.0.0:
resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
+debounce@1.2.1:
+ version "1.2.1"
+ resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
+ integrity sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==
+
debug@2.6.9, debug@^2.6.9:
version "2.6.9"
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -6574,11 +6711,47 @@ es-to-primitive@^1.2.1:
is-date-object "^1.0.1"
is-symbol "^1.0.2"
+es5-ext@^0.10.35, es5-ext@^0.10.46, es5-ext@^0.10.50, es5-ext@^0.10.53, es5-ext@^0.10.61, es5-ext@~0.10.14, es5-ext@~0.10.2, es5-ext@~0.10.46:
+ version "0.10.62"
+ resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.62.tgz#5e6adc19a6da524bf3d1e02bbc8960e5eb49a9a5"
+ integrity sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==
+ dependencies:
+ es6-iterator "^2.0.3"
+ es6-symbol "^3.1.3"
+ next-tick "^1.1.0"
+
+es6-iterator@^2.0.3:
+ version "2.0.3"
+ resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7"
+ integrity sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==
+ dependencies:
+ d "1"
+ es5-ext "^0.10.35"
+ es6-symbol "^3.1.1"
+
es6-object-assign@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/es6-object-assign/-/es6-object-assign-1.1.0.tgz#c2c3582656247c39ea107cb1e6652b6f9f24523c"
integrity sha512-MEl9uirslVwqQU369iHNWZXsI8yaZYGg/D65aOgZkeyFJwHYSxilf7rQzXKI7DdDuBPrBXbfk3sl9hJhmd5AUw==
+es6-symbol@^3.1.1, es6-symbol@^3.1.3:
+ version "3.1.3"
+ resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.3.tgz#bad5d3c1bcdac28269f4cb331e431c78ac705d18"
+ integrity sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==
+ dependencies:
+ d "^1.0.1"
+ ext "^1.1.2"
+
+es6-weak-map@^2.0.3:
+ version "2.0.3"
+ resolved "https://registry.yarnpkg.com/es6-weak-map/-/es6-weak-map-2.0.3.tgz#b6da1f16cc2cc0d9be43e6bdbfc5e7dfcdf31d53"
+ integrity sha512-p5um32HOTO1kP+w7PRnB+5lQ43Z6muuMuIMffvDN8ZB4GcnjLBV6zGStpbASIMk4DCAvEaamhe2zhyCb/QXXsA==
+ dependencies:
+ d "1"
+ es5-ext "^0.10.46"
+ es6-iterator "^2.0.3"
+ es6-symbol "^3.1.1"
+
esbuild-plugin-alias@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/esbuild-plugin-alias/-/esbuild-plugin-alias-0.2.1.tgz#45a86cb941e20e7c2bc68a2bea53562172494fcb"
@@ -6863,6 +7036,14 @@ etag@~1.8.1:
resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==
+event-emitter@^0.3.5:
+ version "0.3.5"
+ resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.5.tgz#df8c69eef1647923c7157b9ce83840610b02cc39"
+ integrity sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==
+ dependencies:
+ d "1"
+ es5-ext "~0.10.14"
+
event-stream@=3.3.4:
version "3.3.4"
resolved "https://registry.yarnpkg.com/event-stream/-/event-stream-3.3.4.tgz#4ab4c9a0f5a54db9338b4c34d86bfce8f4b35571"
@@ -7010,6 +7191,13 @@ express@^4.14.0, express@^4.17.3:
utils-merge "1.0.1"
vary "~1.1.2"
+ext@^1.1.2:
+ version "1.7.0"
+ resolved "https://registry.yarnpkg.com/ext/-/ext-1.7.0.tgz#0ea4383c0103d60e70be99e9a7f11027a33c4f5f"
+ integrity sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==
+ dependencies:
+ type "^2.7.2"
+
extend@^3.0.0:
version "3.0.2"
resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
@@ -7066,6 +7254,17 @@ fast-glob@3.2.7:
merge2 "^1.3.0"
micromatch "^4.0.4"
+fast-glob@^3.1.1:
+ version "3.3.1"
+ resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.1.tgz#784b4e897340f3dbbef17413b3f11acf03c874c4"
+ integrity sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==
+ dependencies:
+ "@nodelib/fs.stat" "^2.0.2"
+ "@nodelib/fs.walk" "^1.2.3"
+ glob-parent "^5.1.2"
+ merge2 "^1.3.0"
+ micromatch "^4.0.4"
+
fast-glob@^3.2.7, fast-glob@^3.2.9, fast-glob@^3.3.0:
version "3.3.0"
resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.0.tgz#7c40cb491e1e2ed5664749e87bfb516dbe8727c0"
@@ -7530,6 +7729,11 @@ get-stdin@^4.0.1:
resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
integrity sha512-F5aQMywwJ2n85s4hJPTT9RPxGmubonuB10MNYo17/xph174n2MIR33HRguhzVag10O/npM7SPk73LMZNP+FaWw==
+get-stdin@^8.0.0:
+ version "8.0.0"
+ resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-8.0.0.tgz#cbad6a73feb75f6eeb22ba9e01f89aa28aa97a53"
+ integrity sha512-sY22aA6xchAzprjyqmSEQv4UbAAzRN0L2dQB0NlN5acTTK9Don6nhoc3eAbUnpZiCANAMfd/+40kVdKfFygohg==
+
get-stdin@^9.0.0:
version "9.0.0"
resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-9.0.0.tgz#3983ff82e03d56f1b2ea0d3e60325f39d703a575"
@@ -7653,6 +7857,13 @@ glob-parent@6.0.2, glob-parent@^6.0.2:
dependencies:
is-glob "^4.0.3"
+glob-promise@^4.2.2:
+ version "4.2.2"
+ resolved "https://registry.yarnpkg.com/glob-promise/-/glob-promise-4.2.2.tgz#15f44bcba0e14219cd93af36da6bb905ff007877"
+ integrity sha512-xcUzJ8NWN5bktoTIX7eOclO1Npxd/dyVqUJxlLIDasT4C7KZyqlPIwkdJ0Ypiy3p2ZKahTjK4M9uC3sNSfNMzw==
+ dependencies:
+ "@types/glob" "^7.1.3"
+
glob-promise@^6.0.2:
version "6.0.3"
resolved "https://registry.yarnpkg.com/glob-promise/-/glob-promise-6.0.3.tgz#e6b3ab02d350b3f4b3e15b57e4485986e41ba2fe"
@@ -7778,6 +7989,18 @@ globalthis@^1.0.3:
dependencies:
define-properties "^1.1.3"
+globby@11.0.4:
+ version "11.0.4"
+ resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.4.tgz#2cbaff77c2f2a62e71e9b2813a67b97a3a3001a5"
+ integrity sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==
+ dependencies:
+ array-union "^2.1.0"
+ dir-glob "^3.0.1"
+ fast-glob "^3.1.1"
+ ignore "^5.1.4"
+ merge2 "^1.3.0"
+ slash "^3.0.0"
+
globby@11.1.0, globby@^11.0.1, globby@^11.0.2, globby@^11.1.0:
version "11.1.0"
resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
@@ -8161,7 +8384,7 @@ ignore@^4.0.6:
resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
-ignore@^5.0.4, ignore@^5.1.9, ignore@^5.2.0, ignore@^5.2.4:
+ignore@^5.0.4, ignore@^5.1.4, ignore@^5.1.9, ignore@^5.2.0, ignore@^5.2.4:
version "5.2.4"
resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
@@ -8595,6 +8818,11 @@ is-port-reachable@^3.1.0:
resolved "https://registry.yarnpkg.com/is-port-reachable/-/is-port-reachable-3.1.0.tgz#f6668d3bca9c36b07f737c48a8f875ab0653cd2b"
integrity sha512-vjc0SSRNZ32s9SbZBzGaiP6YVB+xglLShhgZD/FHMZUXBvQWaV9CtzgeVhjccFJrI6RAMV+LX7NYxueW/A8W5A==
+is-promise@^2.2.2:
+ version "2.2.2"
+ resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.2.2.tgz#39ab959ccbf9a774cf079f7b40c7a26f763135f1"
+ integrity sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==
+
is-regex@^1.1.4:
version "1.1.4"
resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
@@ -9027,6 +9255,26 @@ json-parse-even-better-errors@^3.0.0:
resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-3.0.0.tgz#2cb2ee33069a78870a0c7e3da560026b89669cf7"
integrity sha512-iZbGHafX/59r39gPwVPRBGw0QQKnA7tte5pSMrhWOW7swGsVvVTjmfyAV9pNqk8YGT7tRCdxRu8uzcgZwoDooA==
+json-schema-to-typescript@^13.1.1:
+ version "13.1.1"
+ resolved "https://registry.yarnpkg.com/json-schema-to-typescript/-/json-schema-to-typescript-13.1.1.tgz#8d1b28f93530d3b57730ee7272eec8e4400238e9"
+ integrity sha512-F3CYhtA7F3yPbb8vF7sFchk/2dnr1/yTKf8RcvoNpjnh67ZS/ZMH1ElLt5KHAtf2/bymiejLQQszszPWEeTdSw==
+ dependencies:
+ "@bcherny/json-schema-ref-parser" "10.0.5-fork"
+ "@types/json-schema" "^7.0.11"
+ "@types/lodash" "^4.14.182"
+ "@types/prettier" "^2.6.1"
+ cli-color "^2.0.2"
+ get-stdin "^8.0.0"
+ glob "^7.1.6"
+ glob-promise "^4.2.2"
+ is-glob "^4.0.3"
+ lodash "^4.17.21"
+ minimist "^1.2.6"
+ mkdirp "^1.0.4"
+ mz "^2.7.0"
+ prettier "^2.6.2"
+
json-schema-traverse@^0.4.1:
version "0.4.1"
resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
@@ -9643,6 +9891,13 @@ lru-cache@^7.4.4, lru-cache@^7.5.1, lru-cache@^7.7.1:
resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.0.0.tgz#b9e2a6a72a129d81ab317202d93c7691df727e61"
integrity sha512-svTf/fzsKHffP42sujkO/Rjs37BCIsQVRCeNYIm9WN8rgT7ffoUnRtZCqU+6BqcSBdv8gwJeTz8knJpgACeQMw==
+lru-queue@^0.1.0:
+ version "0.1.0"
+ resolved "https://registry.yarnpkg.com/lru-queue/-/lru-queue-0.1.0.tgz#2738bd9f0d3cf4f84490c5736c48699ac632cda3"
+ integrity sha512-BpdYkt9EvGl8OfWHDQPISVpcl5xZthb+XPsbELj5AQXxIC8IriDZIQYjBJPEm5rS420sjZ0TLEzRcq5KdBhYrQ==
+ dependencies:
+ es5-ext "~0.10.2"
+
magic-string@^0.27.0:
version "0.27.0"
resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.27.0.tgz#e4a3413b4bab6d98d2becffd48b4a257effdbbf3"
@@ -9937,6 +10192,20 @@ media-typer@0.3.0:
resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
integrity sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==
+memoizee@^0.4.15:
+ version "0.4.15"
+ resolved "https://registry.yarnpkg.com/memoizee/-/memoizee-0.4.15.tgz#e6f3d2da863f318d02225391829a6c5956555b72"
+ integrity sha512-UBWmJpLZd5STPm7PMUlOw/TSy972M+z8gcyQ5veOnSDRREz/0bmpyTfKt3/51DhEBqCZQn1udM/5flcSPYhkdQ==
+ dependencies:
+ d "^1.0.1"
+ es5-ext "^0.10.53"
+ es6-weak-map "^2.0.3"
+ event-emitter "^0.3.5"
+ is-promise "^2.2.2"
+ lru-queue "^0.1.0"
+ next-tick "^1.1.0"
+ timers-ext "^0.1.7"
+
memoizerific@^1.11.3:
version "1.11.3"
resolved "https://registry.yarnpkg.com/memoizerific/-/memoizerific-1.11.3.tgz#7c87a4646444c32d75438570905f2dbd1b1a805a"
@@ -10618,6 +10887,15 @@ mute-stream@0.0.8, mute-stream@~0.0.4:
resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
+mz@^2.7.0:
+ version "2.7.0"
+ resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
+ integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
+ dependencies:
+ any-promise "^1.0.0"
+ object-assign "^4.0.1"
+ thenify-all "^1.0.0"
+
nanoid@3.3.3:
version "3.3.3"
resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.3.tgz#fd8e8b7aa761fe807dba2d1b98fb7241bb724a25"
@@ -10648,6 +10926,11 @@ neo-async@^2.5.0, neo-async@^2.6.0:
resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
+next-tick@1, next-tick@^1.1.0:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.1.0.tgz#1836ee30ad56d67ef281b22bd199f709449b35eb"
+ integrity sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==
+
nice-try@^1.0.4:
version "1.0.5"
resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
@@ -11950,7 +12233,7 @@ prepend-http@^2.0.0:
resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
integrity sha512-ravE6m9Atw9Z/jjttRUZ+clIXogdghyZAuWJ3qEzjT+jI/dL1ifAqhZeC5VHzQp1MSt1+jxKkFNemj/iO7tVUA==
-prettier@^2.8.0, prettier@^2.8.1:
+prettier@^2.6.2, prettier@^2.8.0, prettier@^2.8.1:
version "2.8.8"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
@@ -13742,6 +14025,20 @@ thenby@^1.3.4:
resolved "https://registry.yarnpkg.com/thenby/-/thenby-1.3.4.tgz#81581f6e1bb324c6dedeae9bfc28e59b1a2201cc"
integrity sha512-89Gi5raiWA3QZ4b2ePcEwswC3me9JIg+ToSgtE0JWeCynLnLxNr/f9G+xfo9K+Oj4AFdom8YNJjibIARTJmapQ==
+thenify-all@^1.0.0:
+ version "1.6.0"
+ resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
+ integrity sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==
+ dependencies:
+ thenify ">= 3.1.0 < 4"
+
+"thenify@>= 3.1.0 < 4":
+ version "3.3.1"
+ resolved "https://registry.yarnpkg.com/thenify/-/thenify-3.3.1.tgz#8932e686a4066038a016dd9e2ca46add9838a95f"
+ integrity sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==
+ dependencies:
+ any-promise "^1.0.0"
+
third-party-web@^0.12.4:
version "0.12.7"
resolved "https://registry.yarnpkg.com/third-party-web/-/third-party-web-0.12.7.tgz#64445702379abf1a29066d636a965173e4e423c6"
@@ -13777,6 +14074,14 @@ timed-out@4.0.1:
resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-4.0.1.tgz#f32eacac5a175bea25d7fab565ab3ed8741ef56f"
integrity sha512-G7r3AhovYtr5YKOWQkta8RKAPb+J9IsO4uVmzjl8AZwfhs8UcUwTiD6gcJYSgOtzyjvQKrKYn41syHbUWMkafA==
+timers-ext@^0.1.7:
+ version "0.1.7"
+ resolved "https://registry.yarnpkg.com/timers-ext/-/timers-ext-0.1.7.tgz#6f57ad8578e07a3fb9f91d9387d65647555e25c6"
+ integrity sha512-b85NUNzTSdodShTIbky6ZF02e8STtVVfD+fu4aXXShEELpozH+bCpJLYMPZbsABN2wDH7fJpqIoXxJpzbf0NqQ==
+ dependencies:
+ es5-ext "~0.10.46"
+ next-tick "1"
+
tmp@^0.0.33:
version "0.0.33"
resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -13982,6 +14287,16 @@ type-is@~1.6.18:
media-typer "0.3.0"
mime-types "~2.1.24"
+type@^1.0.1:
+ version "1.2.0"
+ resolved "https://registry.yarnpkg.com/type/-/type-1.2.0.tgz#848dd7698dafa3e54a6c479e759c4bc3f18847a0"
+ integrity sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==
+
+type@^2.7.2:
+ version "2.7.2"
+ resolved "https://registry.yarnpkg.com/type/-/type-2.7.2.tgz#2376a15a3a28b1efa0f5350dcf72d24df6ef98d0"
+ integrity sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw==
+
typed-array-buffer@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.0.tgz#18de3e7ed7974b0a729d3feecb94338d1472cd60"
@@ -14038,6 +14353,11 @@ typedarray@^0.0.6:
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
+typescript@~4.3.2:
+ version "4.3.5"
+ resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.5.tgz#4d1c37cc16e893973c45a06886b7113234f119f4"
+ integrity sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==
+
typical@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/typical/-/typical-4.0.0.tgz#cbeaff3b9d7ae1e2bbfaf5a4e6f11eccfde94fc4"