@ui5/webcomponents 0.0.0-ec448881d → 0.0.0-ee3bbe46b

package/dist/CalendarPart.js

@@ -1,26 +1,15 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
 import modifyDateBy from "@ui5/webcomponents-localization/dist/dates/modifyDateBy.js";
 import getTodayUTCTimestamp from "@ui5/webcomponents-localization/dist/dates/getTodayUTCTimestamp.js";
 import DateComponentBase from "./DateComponentBase.js";
-
-/**
- * @public
- */
-const metadata = {
-	properties: /** @lends  sap.ui.webcomponents.main.CalendarPart.prototype */ {
-		/**
-		 * 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 {Integer}
-		 * @protected
-		 */
-		timestamp: {
-			type: Integer,
-		},
-	},
-};
-
 /**
  * @class
  *
@@ -30,82 +19,72 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.CalendarPart
- * @extends DateComponentBase
+ * @alias sap.ui.webc.main.CalendarPart
+ * @extends sap.ui.webc.main.DateComponentBase
  * @public
  */
 class CalendarPart extends DateComponentBase {
-	static get metadata() {
-		return metadata;
-	}
-
-	get _minTimestamp() {
-		return this._minDate.valueOf() / 1000;
-	}
-
-	get _maxTimestamp() {
-		return this._maxDate.valueOf() / 1000;
-	}
-
-	/**
-	 * Returns the effective timestamp to be used by the respective calendar part
-	 * @protected
-	 */
-	get _timestamp() {
-		let timestamp = this.timestamp !== undefined ? this.timestamp : getTodayUTCTimestamp(this._primaryCalendarType);
-		if (timestamp < this._minTimestamp || timestamp > this._maxTimestamp) {
-			timestamp = this._minTimestamp;
-		}
-		return timestamp;
-	}
-
-	get _localDate() {
-		return new Date(this._timestamp * 1000);
-	}
-
-	/**
-	 * Returns a CalendarDate instance, representing the _timestamp getter - this date is central to all components' rendering logic
-	 * @protected
-	 */
-	get _calendarDate() {
-		return CalendarDate.fromTimestamp(this._localDate.getTime(), this._primaryCalendarType);
-	}
-
-	/**
-	 * Change a timestamp and enforce limits
-	 *
-	 * @param timestamp
-	 * @protected
-	 */
-	_safelySetTimestamp(timestamp) {
-		const min = this._minDate.valueOf() / 1000;
-		const max = this._maxDate.valueOf() / 1000;
-
-		if (timestamp < min) {
-			timestamp = min;
-		}
-		if (timestamp > max) {
-			timestamp = max;
-		}
-
-		this.timestamp = timestamp;
-	}
-
-	/**
-	 * Modify a timestamp by a certain amount of days/months/years and enforce limits
-	 * @param amount
-	 * @param unit
-	 * @protected
-	 */
-	_safelyModifyTimestampBy(amount, unit) {
-		const newDate = modifyDateBy(this._calendarDate, amount, unit);
-		this._safelySetTimestamp(newDate.valueOf() / 1000);
-	}
-
-	_getTimestampFromDom(domNode) {
-		const oMonthDomRef = domNode.getAttribute("data-sap-timestamp");
-		return parseInt(oMonthDomRef);
-	}
+    get _minTimestamp() {
+        return this._minDate.valueOf() / 1000;
+    }
+    get _maxTimestamp() {
+        return this._maxDate.valueOf() / 1000;
+    }
+    /**
+     * Returns the effective timestamp to be used by the respective calendar part
+     * @protected
+     */
+    get _timestamp() {
+        let timestamp = this.timestamp !== undefined ? this.timestamp : getTodayUTCTimestamp(this._primaryCalendarType);
+        if (timestamp < this._minTimestamp || timestamp > this._maxTimestamp) {
+            timestamp = this._minTimestamp;
+        }
+        return timestamp;
+    }
+    get _localDate() {
+        return new Date(this._timestamp * 1000);
+    }
+    /**
+     * Returns a CalendarDate instance, representing the _timestamp getter - this date is central to all components' rendering logic
+     * @protected
+     */
+    get _calendarDate() {
+        return CalendarDate.fromTimestamp(this._localDate.getTime(), this._primaryCalendarType);
+    }
+    /**
+     * Change a timestamp and enforce limits
+     *
+     * @param timestamp
+     * @protected
+     */
+    _safelySetTimestamp(timestamp) {
+        const min = this._minDate.valueOf() / 1000;
+        const max = this._maxDate.valueOf() / 1000;
+        if (timestamp < min) {
+            timestamp = min;
+        }
+        if (timestamp > max) {
+            timestamp = max;
+        }
+        this.timestamp = timestamp;
+    }
+    /**
+     * Modify a timestamp by a certain amount of days/months/years and enforce limits
+     * @param amount
+     * @param unit
+     * @protected
+     */
+    _safelyModifyTimestampBy(amount, unit) {
+        const newDate = modifyDateBy(this._calendarDate, amount, unit);
+        this._safelySetTimestamp(newDate.valueOf() / 1000);
+    }
+    _getTimestampFromDom(domNode) {
+        const oMonthDomRef = domNode.getAttribute("data-sap-timestamp");
+        return parseInt(oMonthDomRef);
+    }
 }
-
+__decorate([
+    property({ validator: Integer })
+], CalendarPart.prototype, "timestamp", void 0);
 export default CalendarPart;
+//# sourceMappingURL=CalendarPart.js.map

package/dist/CalendarPart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarPart.js","sourceRoot":"","sources":["../src/CalendarPart.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,OAAO,MAAM,+CAA+C,CAAC;AACpE,OAAO,YAAY,MAAM,4DAA4D,CAAC;AACtF,OAAO,YAAY,MAAM,4DAA4D,CAAC;AACtF,OAAO,oBAAoB,MAAM,oEAAoE,CAAC;AACtG,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AAEvD;;;;;;;;;;;;GAYG;AACH,MAAM,YAAa,SAAQ,iBAAiB;IAU3C,IAAI,aAAa;QAChB,OAAO,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC;IACvC,CAAC;IAED,IAAI,aAAa;QAChB,OAAO,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC;IACvC,CAAC;IAED;;;OAGG;IACH,IAAI,UAAU;QACb,IAAI,SAAS,GAAG,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,oBAAoB,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;QAChH,IAAI,SAAS,GAAG,IAAI,CAAC,aAAa,IAAI,SAAS,GAAG,IAAI,CAAC,aAAa,EAAE;YACrE,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC;SAC/B;QACD,OAAO,SAAS,CAAC;IAClB,CAAC;IAED,IAAI,UAAU;QACb,OAAO,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,CAAC;IACzC,CAAC;IAED;;;OAGG;IACH,IAAI,aAAa;QAChB,OAAO,YAAY,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;IACzF,CAAC;IAED;;;;;OAKG;IACH,mBAAmB,CAAC,SAAiB;QACpC,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC;QAC3C,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC;QAE3C,IAAI,SAAS,GAAG,GAAG,EAAE;YACpB,SAAS,GAAG,GAAG,CAAC;SAChB;QACD,IAAI,SAAS,GAAG,GAAG,EAAE;YACpB,SAAS,GAAG,GAAG,CAAC;SAChB;QAED,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;IAC5B,CAAC;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,MAAc,EAAE,IAAY;QACpD,MAAM,OAAO,GAAG,YAAY,CAAC,IAAI,CAAC,aAAa,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC;QAC/D,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,CAAC;IACpD,CAAC;IAED,oBAAoB,CAAC,OAAoB;QACxC,MAAM,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC,oBAAoB,CAAE,CAAC;QACjE,OAAO,QAAQ,CAAC,YAAY,CAAC,CAAC;IAC/B,CAAC;CACD;AArEA;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC;+CACd;AAuEpB,eAAe,YAAY,CAAC"}

package/dist/Card.js

@@ -20,7 +20,7 @@ const metadata = {
 	tag: "ui5-card",
 	languageAware: true,
 	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.main.Card.prototype */ {
+	slots: /** @lends sap.ui.webc.main.Card.prototype */ {
 
 		/**
 		 * Defines the content of the component.
@@ -46,7 +46,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	properties: /** @lends sap.ui.webcomponents.main.Card.prototype */ {
+	properties: /** @lends sap.ui.webc.main.Card.prototype */ {
 
 		/**
 		 * Defines the accessible name of the component, which is used as the name of the card region and should be unique per card.
@@ -74,7 +74,7 @@ const metadata = {
 			type: String,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.Card.prototype */ {
+	events: /** @lends sap.ui.webc.main.Card.prototype */ {
 
 	},
 };
@@ -102,8 +102,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.Card
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.main.Card
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-card
  * @public
  * @appenddocs CardHeader

package/dist/CardHeader.js

@@ -2,9 +2,9 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isFirefox } from "@ui5/webcomponents-base/dist/Device.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import CardHeaderTemplate from "./generated/templates/CardHeaderTemplate.lit.js";
-import Icon from "./Icon.js";
 
 import {
 	AVATAR_TOOLTIP,
@@ -22,7 +22,7 @@ const metadata = {
 	tag: "ui5-card-header",
 	languageAware: true,
 	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.main.CardHeader.prototype */ {
+	slots: /** @lends sap.ui.webc.main.CardHeader.prototype */ {
 
 		/**
 		 * Defines an avatar image, displayed in the left most part of the header.
@@ -44,7 +44,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	properties: /** @lends sap.ui.webcomponents.main.CardHeader.prototype */ {
+	properties: /** @lends sap.ui.webc.main.CardHeader.prototype */ {
 
 		/**
 		 * Defines the title text.
@@ -91,7 +91,7 @@ const metadata = {
 		 * Define the <code>aria-level</code> attribute of the component
 		 * <b>Note: </b> If the interactive property is set, <code>aria-level</code> attribute is not rendered at all.
 		 * @private
-		 * @type {Integer}
+		 * @type {sap.ui.webc.base.types.Integer}
 		 * @defaultValue 3
 		 */
 		ariaLevel: {
@@ -104,13 +104,13 @@ const metadata = {
 			noAttribute: true,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.CardHeader.prototype */ {
+	events: /** @lends sap.ui.webc.main.CardHeader.prototype */ {
 
 		/**
 		 * Fired when the component is activated by mouse/tap or by using the Enter or Space key.
 		 * <br><br>
 		 * <b>Note:</b> The event would be fired only if the <code>interactive</code> property is set to true.
-		 * @event sap.ui.webcomponents.main.CardHeader#click
+		 * @event sap.ui.webc.main.CardHeader#click
 		 * @public
 		 */
 		"click": {},
@@ -134,6 +134,7 @@ const metadata = {
  * <br>
  * The <code>ui5-card</code> exposes the following CSS Shadow Parts:
  * <ul>
+ * <li>root - Used to style the root DOM element of the CardHeader</li>
  * <li>title - Used to style the title of the CardHeader</li>
  * <li>subtitle - Used to style the subtitle of the CardHeader</li>
  * <li>status - Used to style the status of the CardHeader</li>
@@ -145,8 +146,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.CardHeader
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.main.CardHeader
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-card-header
  * @public
  * @since 1.0.0-rc.15
@@ -173,30 +174,27 @@ class CardHeader extends UI5Element {
 			"ui5-card-header": true,
 			"ui5-card-header--interactive": this.interactive,
 			"ui5-card-header--active": this.interactive && this._headerActive,
+			"ui5-card-header-ff": isFirefox(),
 		};
 	}
 
-	get ariaHeaderRole() {
-		return this.interactive ? "button" : "heading";
+	get _root() {
+		return this.shadowRoot.querySelector(".ui5-card-header");
 	}
 
-	get _ariaLevel() {
-		if (this.interactive) {
-			return undefined;
-		}
-
-		return this.ariaLevel;
+	get ariaRoleDescription() {
+		return this.interactive ? CardHeader.i18nBundle.getText(ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER) : CardHeader.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD_HEADER);
 	}
 
-	get ariaCardHeaderRoleDescription() {
-		return this.interactive ? CardHeader.i18nBundle.getText(ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER) : CardHeader.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD_HEADER);
+	get ariaRoleFocusableElement() {
+		return this.interactive ? "button" : null;
 	}
 
 	get ariaCardAvatarLabel() {
 		return CardHeader.i18nBundle.getText(AVATAR_TOOLTIP);
 	}
 
-	get ariaLabelledByHeader() {
+	get ariaLabelledBy() {
 		const labels = [];
 
 		if (this.titleText) {
@@ -226,25 +224,29 @@ class CardHeader extends UI5Element {
 		return !!this.action.length;
 	}
 
-	static get dependencies() {
-		return [Icon];
-	}
-
 	static async onDefine() {
 		CardHeader.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
-	_headerClick(event) {
+	_actionsFocusin() {
+		this._root.classList.add("ui5-card-header-hide-focus");
+	}
+
+	_actionsFocusout() {
+		this._root.classList.remove("ui5-card-header-hide-focus");
+	}
+
+	_click(event) {
 		// prevents the native browser "click" event from firing
 		event.stopImmediatePropagation();
 
-		if (this.interactive && event.target === event.currentTarget) {
+		if (this.interactive && this._root.contains(event.target)) {
 			this.fireEvent("click");
 		}
 	}
 
-	_headerKeydown(event) {
-		if (!this.interactive || event.target !== event.currentTarget) {
+	_keydown(event) {
+		if (!this.interactive || !this._root.contains(event.target)) {
 			return;
 		}
 
@@ -263,8 +265,8 @@ class CardHeader extends UI5Element {
 		}
 	}
 
-	_headerKeyup(event) {
-		if (!this.interactive || event.target !== event.currentTarget) {
+	_keyup(event) {
+		if (!this.interactive || !this._root.contains(event.target)) {
 			return;
 		}
 

package/dist/Carousel.js

@@ -39,7 +39,7 @@ const metadata = {
 	tag: "ui5-carousel",
 	languageAware: true,
 	fastNavigation: true,
-	properties: /** @lends sap.ui.webcomponents.main.Carousel.prototype */ {
+	properties: /** @lends sap.ui.webc.main.Carousel.prototype */ {
 		/**
 		 * Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.
 		 * @type {boolean}
@@ -52,7 +52,7 @@ const metadata = {
 
 		/**
 		 * Defines the number of items per page on small size (up to 640px). One item per page shown by default.
-		 * @type {Integer}
+		 * @type {sap.ui.webc.base.types.Integer}
 		 * @defaultvalue 1
 		 * @public
 		 */
@@ -63,7 +63,7 @@ const metadata = {
 
 		/**
 		 * Defines the number of items per page on medium size (from 640px to 1024px). One item per page shown by default.
-		 * @type {Integer}
+		 * @type {sap.ui.webc.base.types.Integer}
 		 * @defaultvalue 1
 		 * @public
 		 */
@@ -74,7 +74,7 @@ const metadata = {
 
 		/**
 		 * Defines the number of items per page on large size (more than 1024px). One item per page shown by default.
-		 * @type {Integer}
+		 * @type {sap.ui.webc.base.types.Integer}
 		 * @defaultvalue 1
 		 * @public
 		 */
@@ -112,7 +112,7 @@ const metadata = {
 
 		/**
 		 * Defines the index of the initially selected item.
-		 * @type {Integer}
+		 * @type {sap.ui.webc.base.types.Integer}
 		 * @defaultvalue 0
 		 * @private
 		 */
@@ -133,7 +133,7 @@ const metadata = {
 		 * When set to "Content", the arrows are placed on the sides of the current page.
 		 * <br>
 		 * When set to "Navigation", the arrows are placed on the sides of the page indicator.
-		 * @type {CarouselArrowsPlacement}
+		 * @type {sap.ui.webc.main.types.CarouselArrowsPlacement}
 		 * @defaultvalue "Content"
 		 * @public
 		 */
@@ -169,7 +169,7 @@ const metadata = {
 		},
 	},
 	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.main.Carousel.prototype */ {
+	slots: /** @lends sap.ui.webc.main.Carousel.prototype */ {
 		/**
 		 * Defines the content of the component.
 		 * @type {HTMLElement[]}
@@ -182,7 +182,7 @@ const metadata = {
 			individualSlots: true,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.Carousel.prototype */ {
+	events: /** @lends sap.ui.webc.main.Carousel.prototype */ {
 
 		/**
 		 * Fired whenever the page changes due to user interaction,
@@ -238,6 +238,15 @@ const metadata = {
  * with the following keyboard shortcuts:
  * <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-carousel</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>content - Used to style the content of the component</li>
+ * </ul>
+ *
  * * <h4>Fast Navigation</h4>
  * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
  * In order to use this functionality, you need to import the following module:
@@ -255,8 +264,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.Carousel
- * @extends UI5Element
+ * @alias sap.ui.webc.main.Carousel
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-carousel
  * @since 1.0.0-rc.6
  * @public
@@ -479,6 +488,16 @@ class Carousel extends UI5Element {
 		}
 	}
 
+	_navButtonClick(event) {
+		if (event.target.hasAttribute("arrow-forward")) {
+			this.navigateRight();
+		} else {
+			this.navigateLeft();
+		}
+
+		this.focus();
+	}
+
 	/**
 	 * Changes the currently displayed page.
 	 * @param {Integer} itemIndex The index of the target page

package/dist/CheckBox.js

@@ -31,7 +31,7 @@ let activeCb = null;
 const metadata = {
 	tag: "ui5-checkbox",
 	languageAware: true,
-	properties: /** @lends sap.ui.webcomponents.main.CheckBox.prototype */ {
+	properties: /** @lends sap.ui.webc.main.CheckBox.prototype */ {
 
 		/**
 		 * Receives id(or many ids) of the elements that label the component
@@ -46,7 +46,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @public
@@ -99,7 +99,7 @@ const metadata = {
 		/**
 		* Defines whether the component is displayed as partially checked.
 		* <br><br>
-		* <b>Note:</b> The indeterminate state can be set only programatically and can’t be achieved by user
+		* <b>Note:</b> The indeterminate state can be set only programmatically and can’t be achieved by user
 		* interaction and the resulting visual state depends on the values of the <code>indeterminate</code>
 		* and <code>checked</code> properties:
 		* <ul>
@@ -126,6 +126,8 @@ const metadata = {
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
+		 * @formEvents change
+		 * @formProperty
 		 * @public
 		 */
 		checked: {
@@ -157,7 +159,7 @@ const metadata = {
 		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webc.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -175,7 +177,7 @@ const metadata = {
 		 * <li><code>Normal</code> - The text will wrap. The words will not be broken based on hyphenation.</li>
 		 * </ul>
 		 *
-		 * @type {WrappingType}
+		 * @type {sap.ui.webc.main.types.WrappingType}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -212,7 +214,7 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.CheckBox.prototype */ {
+	events: /** @lends sap.ui.webc.main.CheckBox.prototype */ {
 
 		/**
 		 * Fired when the component checked state changes.
@@ -222,7 +224,7 @@ const metadata = {
 		 */
 		change: {},
 	},
-	slots: /** @lends sap.ui.webcomponents.main.CheckBox.prototype */ {
+	slots: /** @lends sap.ui.webc.main.CheckBox.prototype */ {
 		/**
 		 * 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.
@@ -277,8 +279,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.CheckBox
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.main.CheckBox
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-checkbox
  * @public
  */

package/dist/ColorPalette.js

@@ -32,7 +32,7 @@ import ColorPaletteStaticAreaCss from "./generated/themes/ColorPaletteStaticArea
 const metadata = {
 	tag: "ui5-color-palette",
 	managedSlots: true,
-	properties: /** @lends sap.ui.webcomponents.main.ColorPalette.prototype */ {
+	properties: /** @lends sap.ui.webc.main.ColorPalette.prototype */ {
 
 		/**
 		 * Defines whether the user can see the last used colors in the bottom of the component
@@ -69,7 +69,7 @@ const metadata = {
 		/**
 		 * Defines the default color of the color palette
 		 * <b>Note:</b> The default color should be a part of the ColorPalette colors</code>
-		 * @type {CSSColor}
+		 * @type {sap.ui.webc.base.types.CSSColor}
 		 * @private
 		 * @since 1.0.0-rc.16
 		 */
@@ -79,7 +79,7 @@ const metadata = {
 
 		/**
 		 * Defines the selected color.
-		 * @type {CSSColor}
+		 * @type {sap.ui.webc.base.types.CSSColor}
 		 * @private
 		 */
 		_selectedColor: {
@@ -88,17 +88,17 @@ const metadata = {
 
 		/**
 		 * Defines if the palette is in Popup or Embeded mode.
-		 * @type {CSSColor}
+		 * @type {sap.ui.webc.base.types.CSSColor}
 		 * @private
 		 */
 		popupMode: {
 			type: Boolean,
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.main.ColorPalette.prototype */ {
+	slots: /** @lends sap.ui.webc.main.ColorPalette.prototype */ {
 		/**
 		 * Defines the <code>ui5-color-palette-item</code> elements.
-		 * @type {sap.ui.webcomponents.main.IColorPaletteItem[]}
+		 * @type {sap.ui.webc.main.IColorPaletteItem[]}
 		 * @slot colors
 		 * @public
 		 */
@@ -109,17 +109,17 @@ const metadata = {
 			individualSlots: true,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.ColorPalette.prototype */ {
+	events: /** @lends sap.ui.webc.main.ColorPalette.prototype */ {
 		/**
 		 * Fired when the user selects a color.
 		 *
-		 * @event sap.ui.webcomponents.main.ColorPalette#item-click
+		 * @event sap.ui.webc.main.ColorPalette#item-click
 		 * @public
 		 * @since 1.0.0-rc.15
 		 * @param {string} color the selected color
 		 */
 		"item-click": {
-			details: {
+			detail: {
 				color: {
 					type: String,
 				},
@@ -145,8 +145,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.ColorPalette
- * @extends UI5Element
+ * @alias sap.ui.webc.main.ColorPalette
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-color-palette
  * @since 1.0.0-rc.12
  * @appenddocs ColorPaletteItem