@ui5/webcomponents 0.0.0-e818f286e → 0.0.0-ee3bbe46b

package/src/CalendarHeader.ts

@@ -0,0 +1,218 @@
+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 languageAware from "@ui5/webcomponents-base/dist/decorators/languageAware.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import CalendarType from "@ui5/webcomponents-base/dist/types/CalendarType.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import Icon from "./Icon.js";
+import CalendarHeaderTemplate from "./generated/templates/CalendarHeaderTemplate.lit.js";
+import {
+	CALENDAR_HEADER_NEXT_BUTTON,
+	CALENDAR_HEADER_PREVIOUS_BUTTON,
+// @ts-ignore
+} from "./generated/i18n/i18n-defaults.js";
+
+// Styles
+import styles from "./generated/themes/CalendarHeader.css.js";
+
+type SecondaryCalendarButtonTexts = {
+	monthButtonText: string,
+	monthButtonInfo: string,
+	yearButtonText: string,
+}
+
+@customElement("ui5-calendar-header")
+@languageAware
+@event("next-press")
+@event("previous-press")
+@event("show-month-press")
+@event("show-year-press")
+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
+	 */
+	@property({ validator: Integer })
+	timestamp?: number;
+
+	/**
+	 * 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
+	 */
+	@property({ type: CalendarType })
+	primaryCalendarType?: CalendarType;
+
+	/**
+	 * 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
+	 * @public
+	 */
+	@property({ type: CalendarType })
+	secondaryCalendarType?: CalendarType;
+
+	/**
+	 * Stores information for month button for secondary calendar type
+	 * @type {object}
+	 * @private
+	*/
+	@property({ type: Object })
+	buttonTextForSecondaryCalendarType!: SecondaryCalendarButtonTexts;
+
+	@property({ type: Boolean })
+	isNextButtonDisabled!: boolean;
+
+	@property({ type: Boolean })
+	isPrevButtonDisabled!: boolean;
+
+	@property({ type: Boolean })
+	isMonthButtonHidden!: boolean;
+
+	@property()
+	_monthButtonText!: string;
+
+	@property()
+	_yearButtonText!: string;
+
+	@property()
+	_yearButtonTextSecType!: string;
+
+	@property({ type: Boolean })
+	isYearButtonHidden!: boolean;
+
+	_prevButtonText?: string;
+	_nextButtonText?: string;
+	_secondMonthButtonText?: string;
+	_secondYearButtonText?: string;
+
+	static i18nBundle: I18nBundle;
+
+	static get render() {
+		return litRender;
+	}
+
+	static get template() {
+		return CalendarHeaderTemplate;
+	}
+
+	static get styles() {
+		return styles;
+	}
+
+	static get dependencies() {
+		return [Icon];
+	}
+
+	static async onDefine() {
+		CalendarHeader.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+	}
+
+	constructor() {
+		super();
+	}
+
+	onBeforeRendering() {
+		this._prevButtonText = CalendarHeader.i18nBundle.getText(CALENDAR_HEADER_PREVIOUS_BUTTON as I18nText);
+		this._nextButtonText = CalendarHeader.i18nBundle.getText(CALENDAR_HEADER_NEXT_BUTTON as I18nText);
+
+		if (this.hasSecondaryCalendarType) {
+			this._secondMonthButtonText = this.buttonTextForSecondaryCalendarType.monthButtonText;
+			this._secondYearButtonText = this.buttonTextForSecondaryCalendarType.yearButtonText;
+		}
+	}
+
+	onPrevButtonClick(e: MouseEvent) {
+		this.fireEvent("previous-press", e);
+	}
+
+	onNextButtonClick(e: MouseEvent) {
+		this.fireEvent("next-press", e);
+	}
+
+	onMonthButtonClick(e: MouseEvent) {
+		this.fireEvent("show-month-press", e);
+	}
+
+	onMonthButtonKeyDown(e: KeyboardEvent) {
+		if (isSpace(e)) {
+			e.preventDefault();
+		}
+
+		if (isEnter(e)) {
+			this.fireEvent("show-month-press", e);
+		}
+	}
+
+	onMonthButtonKeyUp(e: KeyboardEvent) {
+		if (isSpace(e)) {
+			e.preventDefault();
+			this.fireEvent("show-month-press", e);
+		}
+	}
+
+	onYearButtonClick(e: MouseEvent) {
+		this.fireEvent("show-year-press", e);
+	}
+
+	onYearButtonKeyDown(e: KeyboardEvent) {
+		if (isSpace(e)) {
+			e.preventDefault();
+		}
+
+		if (isEnter(e)) {
+			this.fireEvent("show-year-press", e);
+		}
+	}
+
+	onYearButtonKeyUp(e: KeyboardEvent) {
+		if (isSpace(e)) {
+			e.preventDefault();
+			this.fireEvent("show-year-press", e);
+		}
+	}
+
+	get hasSecondaryCalendarType() {
+		return !!this.secondaryCalendarType;
+	}
+
+	get classes() {
+		return {
+			prevButton: {
+				"ui5-calheader-arrowbtn": true,
+				"ui5-calheader-arrowbtn-disabled": this.isPrevButtonDisabled,
+			},
+			nextButton: {
+				"ui5-calheader-arrowbtn": true,
+				"ui5-calheader-arrowbtn-disabled": this.isNextButtonDisabled,
+			},
+		};
+	}
+
+	get accInfo() {
+		return {
+			ariaLabelMonthButton: this.hasSecondaryCalendarType
+				? `${this._monthButtonText}, ${this.buttonTextForSecondaryCalendarType.monthButtonInfo}` : `${this._monthButtonText}`,
+		};
+	}
+}
+
+CalendarHeader.define();
+
+export default CalendarHeader;

package/src/{CalendarPart.js → CalendarPart.ts}

@@ -1,26 +1,10 @@
+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,14 +14,19 @@ 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;
-	}
+	/**
+	 * 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 })
+	timestamp?: number;
 
 	get _minTimestamp() {
 		return this._minDate.valueOf() / 1000;
@@ -77,7 +66,7 @@ class CalendarPart extends DateComponentBase {
 	 * @param timestamp
 	 * @protected
 	 */
-	_safelySetTimestamp(timestamp) {
+	_safelySetTimestamp(timestamp: number) {
 		const min = this._minDate.valueOf() / 1000;
 		const max = this._maxDate.valueOf() / 1000;
 
@@ -97,13 +86,13 @@ class CalendarPart extends DateComponentBase {
 	 * @param unit
 	 * @protected
 	 */
-	_safelyModifyTimestampBy(amount, unit) {
+	_safelyModifyTimestampBy(amount: number, unit: string) {
 		const newDate = modifyDateBy(this._calendarDate, amount, unit);
 		this._safelySetTimestamp(newDate.valueOf() / 1000);
 	}
 
-	_getTimestampFromDom(domNode) {
-		const oMonthDomRef = domNode.getAttribute("data-sap-timestamp");
+	_getTimestampFromDom(domNode: HTMLElement) {
+		const oMonthDomRef = domNode.getAttribute("data-sap-timestamp")!;
 		return parseInt(oMonthDomRef);
 	}
 }

package/src/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/src/CardHeader.hbs

@@ -6,6 +6,7 @@
 	@click="{{_click}}"
 	@keydown="{{_keydown}}"
 	@keyup="{{_keyup}}"
+	part="root"
 >
 	<div
 		class="ui5-card-header-focusable-element"

package/src/CardHeader.js

@@ -2,6 +2,7 @@ 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";
 
@@ -21,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.
@@ -43,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.
@@ -90,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: {
@@ -103,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": {},
@@ -133,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>
@@ -144,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
@@ -172,6 +174,7 @@ 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(),
 		};
 	}
 

package/src/Carousel.hbs

@@ -8,7 +8,7 @@
     @mouseout="{{_onmouseout}}"
     @mouseover="{{_onmouseover}}"
 >
-    <div class="{{classes.viewport}}">
+    <div class="{{classes.viewport}}" part="content">
         <div class="{{classes.content}}" style="{{styles.content}}">
             {{#each items}}
                  <div id="{{id}}"

package/src/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

package/src/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
@@ -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/src/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,11 +109,11 @@ 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
@@ -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