@ui5/webcomponents 0.0.0-0a35d6b3d → 0.0.0-0dd36ca4b

package/dist/CheckBox.js

@@ -9,19 +9,20 @@ import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 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 slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import "@ui5/webcomponents-icons/dist/accept.js";
+import "@ui5/webcomponents-icons/dist/complete.js";
+import "@ui5/webcomponents-icons/dist/border.js";
+import "@ui5/webcomponents-icons/dist/tri-state.js";
 import Icon from "./Icon.js";
 import Label from "./Label.js";
 import WrappingType from "./types/WrappingType.js";
-import { VALUE_STATE_ERROR, VALUE_STATE_WARNING, VALUE_STATE_SUCCESS, } from "./generated/i18n/i18n-defaults.js";
+import { VALUE_STATE_ERROR, VALUE_STATE_WARNING, VALUE_STATE_SUCCESS, FORM_CHECKABLE_REQUIRED, } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import checkboxCss from "./generated/themes/CheckBox.css.js";
 // Template
@@ -31,50 +32,58 @@ let activeCb;
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
  * Allows the user to set a binary value, such as true/false or yes/no for an item.
- * <br><br>
- * The <code>ui5-checkbox</code> component consists of a box and a label that describes its purpose.
+ *
+ * The `ui5-checkbox` component consists of a box and a label that describes its purpose.
  * If it's checked, an indicator is displayed inside the box.
- * To check/uncheck the <code>ui5-checkbox</code>, the user has to click or tap the square
+ * To check/uncheck the `ui5-checkbox`, the user has to click or tap the square
  * box or its label.
- * <br><br>
- * The <code>ui5-checkbox</code> component only has 2 states - checked and unchecked.
- * Clicking or tapping toggles the <code>ui5-checkbox</code> between checked and unchecked state.
  *
- * <h3>Usage</h3>
+ * The `ui5-checkbox` component only has 2 states - checked and unchecked.
+ * Clicking or tapping toggles the `ui5-checkbox` between checked and unchecked state.
+ *
+ * ### Usage
  *
- * You can define the checkbox text with via the <code>text</code> property. If the text exceeds the available width, it is truncated by default.
- * In case you prefer text to wrap, set the <code>wrappingType</code> property to "Normal".
- * The touchable area for toggling the <code>ui5-checkbox</code> ends where the text ends.
- * <br><br>
- * You can disable the <code>ui5-checkbox</code> by setting the <code>disabled</code> property to
- * <code>true</code>,
- * or use the <code>ui5-checkbox</code> in read-only mode by setting the <code>readonly</code>
- * property to <code>true</code>.
+ * You can define the checkbox text with via the `text` property. If the text exceeds the available width, it is truncated by default.
+ * In case you prefer text to wrap, set the `wrappingType` property to "Normal".
+ * The touchable area for toggling the `ui5-checkbox` ends where the text ends.
  *
- * <br><br>
+ * You can disable the `ui5-checkbox` by setting the `disabled` property to
+ * `true`,
+ * or use the `ui5-checkbox` in read-only mode by setting the `readonly`
+ * property to `true`.
  *
- * <h3>Keyboard Handling</h3>
+ * ### Keyboard Handling
  *
- * The user can use the following keyboard shortcuts to toggle the checked state of the <code>ui5-checkbox</code>.
- * <ul>
- * <li>[SPACE, ENTER] - Toggles between different states: checked, not checked.</li>
- * </ul>
- * <br><br>
+ * The user can use the following keyboard shortcuts to toggle the checked state of the `ui5-checkbox`.
  *
- * <h3>ES6 Module Import</h3>
+ * - [Space],[Enter] - Toggles between different states: checked, not checked.
  *
- * <code>import "@ui5/webcomponents/dist/CheckBox";</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents/dist/CheckBox.js";`
  * @constructor
  * @extends UI5Element
  * @public
- * @csspart root - Used to style the outermost wrapper of the <code>ui5-checkbox</code>
- * @csspart label - Used to style the label of the <code>ui5-checkbox</code>
+ * @csspart root - Used to style the outermost wrapper of the `ui5-checkbox`
+ * @csspart label - Used to style the label of the `ui5-checkbox`
+ * @csspart icon - Used to style the icon of the `ui5-checkbox`
  */
 let CheckBox = CheckBox_1 = class CheckBox extends UI5Element {
+    get formValidityMessage() {
+        return CheckBox_1.i18nBundle.getText(FORM_CHECKABLE_REQUIRED);
+    }
+    get formValidity() {
+        return { valueMissing: this.required && !this.checked };
+    }
+    async formElementAnchor() {
+        return this.getFocusDomRefAsync();
+    }
+    get formFormattedValue() {
+        return this.checked ? "on" : null;
+    }
     constructor() {
         super();
         this._deactivate = () => {
@@ -87,20 +96,9 @@ let CheckBox = CheckBox_1 = class CheckBox extends UI5Element {
             isGlobalHandlerAttached = true;
         }
     }
-    onBeforeRendering() {
-        this._enableFormSupport();
-    }
-    _enableFormSupport() {
-        const formSupport = getFeature("FormSupport");
-        if (formSupport) {
-            formSupport.syncNativeHiddenInput(this, (element, nativeInput) => {
-                nativeInput.disabled = !!element.disabled;
-                nativeInput.checked = !!element.checked;
-                nativeInput.value = element.checked ? "on" : "";
-            });
-        }
-        else if (this.name) {
-            console.warn(`In order for the "name" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
+    onEnterDOM() {
+        if (isDesktop()) {
+            this.setAttribute("desktop", "");
         }
     }
     _onclick() {
@@ -122,12 +120,14 @@ let CheckBox = CheckBox_1 = class CheckBox extends UI5Element {
     _onkeydown(e) {
         if (isSpace(e)) {
             e.preventDefault();
-            this.active = true;
+        }
+        if (this.readonly || this.disabled) {
+            return;
         }
         if (isEnter(e)) {
             this.toggle();
-            this.active = true;
         }
+        this.active = true;
     }
     _onkeyup(e) {
         if (isSpace(e)) {
@@ -159,13 +159,13 @@ let CheckBox = CheckBox_1 = class CheckBox extends UI5Element {
         return this;
     }
     canToggle() {
-        return !(this.disabled || this.readonly);
+        return !(this.disabled || this.readonly || this.displayOnly);
     }
     valueStateTextMappings() {
         return {
-            "Error": CheckBox_1.i18nBundle.getText(VALUE_STATE_ERROR),
-            "Warning": CheckBox_1.i18nBundle.getText(VALUE_STATE_WARNING),
-            "Success": CheckBox_1.i18nBundle.getText(VALUE_STATE_SUCCESS),
+            "Negative": CheckBox_1.i18nBundle.getText(VALUE_STATE_ERROR),
+            "Critical": CheckBox_1.i18nBundle.getText(VALUE_STATE_WARNING),
+            "Positive": CheckBox_1.i18nBundle.getText(VALUE_STATE_SUCCESS),
         };
     }
     get ariaLabelText() {
@@ -179,7 +179,7 @@ let CheckBox = CheckBox_1 = class CheckBox extends UI5Element {
         };
     }
     get ariaReadonly() {
-        return this.readonly ? "true" : undefined;
+        return this.readonly || this.displayOnly ? "true" : undefined;
     }
     get effectiveAriaDisabled() {
         return this.disabled ? "true" : undefined;
@@ -206,11 +206,23 @@ let CheckBox = CheckBox_1 = class CheckBox extends UI5Element {
     }
     get effectiveTabIndex() {
         const tabindex = this.getAttribute("tabindex");
-        return this.disabled ? undefined : tabindex || "0";
+        return this.disabled || this.displayOnly ? undefined : tabindex || "0";
     }
     get isCompletelyChecked() {
         return this.checked && !this.indeterminate;
     }
+    get isDisplayOnly() {
+        return this.displayOnly && !this.disabled;
+    }
+    get displayOnlyIcon() {
+        if (this.isCompletelyChecked) {
+            return "complete";
+        }
+        if (this.checked && this.indeterminate) {
+            return "tri-state";
+        }
+        return "border";
+    }
     static async onDefine() {
         CheckBox_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
     }
@@ -227,6 +239,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], CheckBox.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], CheckBox.prototype, "displayOnly", void 0);
 __decorate([
     property({ type: Boolean })
 ], CheckBox.prototype, "required", void 0);
@@ -251,13 +266,11 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], CheckBox.prototype, "active", void 0);
-__decorate([
-    slot()
-], CheckBox.prototype, "formSupport", void 0);
 CheckBox = CheckBox_1 = __decorate([
     customElement({
         tag: "ui5-checkbox",
         languageAware: true,
+        formAssociated: true,
         renderer: litRender,
         template: CheckBoxTemplate,
         styles: checkboxCss,
@@ -268,8 +281,8 @@ CheckBox = CheckBox_1 = __decorate([
     })
     /**
      * Fired when the component checked state changes.
-     *
      * @public
+     * @allowPreventDefault
      */
     ,
     event("change")

package/dist/CheckBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBox.js","sourceRoot":"","sources":["../src/CheckBox.ts"],"names":[],"mappings":"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","sourcesContent":["import { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\nimport { getFeature } from \"@ui5/webcomponents-base/dist/FeaturesRegistry.js\";\nimport { getEffectiveAriaLabelText } from \"@ui5/webcomponents-base/dist/util/AriaLabelHelper.js\";\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport \"@ui5/webcomponents-icons/dist/accept.js\";\nimport Icon from \"./Icon.js\";\nimport Label from \"./Label.js\";\nimport WrappingType from \"./types/WrappingType.js\";\nimport {\n\tVALUE_STATE_ERROR,\n\tVALUE_STATE_WARNING,\n\tVALUE_STATE_SUCCESS,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport checkboxCss from \"./generated/themes/CheckBox.css.js\";\nimport type FormSupport from \"./features/InputElementsFormSupport.js\";\nimport type { IFormElement, NativeFormElement } from \"./features/InputElementsFormSupport.js\";\n\n// Template\nimport CheckBoxTemplate from \"./generated/templates/CheckBoxTemplate.lit.js\";\n\nlet isGlobalHandlerAttached = false;\nlet activeCb: CheckBox;\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * Allows the user to set a binary value, such as true/false or yes/no for an item.\n * <br><br>\n * The <code>ui5-checkbox</code> component consists of a box and a label that describes its purpose.\n * If it's checked, an indicator is displayed inside the box.\n * To check/uncheck the <code>ui5-checkbox</code>, the user has to click or tap the square\n * box or its label.\n * <br><br>\n * The <code>ui5-checkbox</code> component only has 2 states - checked and unchecked.\n * Clicking or tapping toggles the <code>ui5-checkbox</code> between checked and unchecked state.\n *\n * <h3>Usage</h3>\n *\n * You can define the checkbox text with via the <code>text</code> property. If the text exceeds the available width, it is truncated by default.\n * In case you prefer text to wrap, set the <code>wrappingType</code> property to \"Normal\".\n * The touchable area for toggling the <code>ui5-checkbox</code> ends where the text ends.\n * <br><br>\n * You can disable the <code>ui5-checkbox</code> by setting the <code>disabled</code> property to\n * <code>true</code>,\n * or use the <code>ui5-checkbox</code> in read-only mode by setting the <code>readonly</code>\n * property to <code>true</code>.\n *\n * <br><br>\n *\n * <h3>Keyboard Handling</h3>\n *\n * The user can use the following keyboard shortcuts to toggle the checked state of the <code>ui5-checkbox</code>.\n * <ul>\n * <li>[SPACE, ENTER] - Toggles between different states: checked, not checked.</li>\n * </ul>\n * <br><br>\n *\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@ui5/webcomponents/dist/CheckBox\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n * @csspart root - Used to style the outermost wrapper of the <code>ui5-checkbox</code>\n * @csspart label - Used to style the label of the <code>ui5-checkbox</code>\n */\n@customElement({\n\ttag: \"ui5-checkbox\",\n\tlanguageAware: true,\n\trenderer: litRender,\n\ttemplate: CheckBoxTemplate,\n\tstyles: checkboxCss,\n\tdependencies: [\n\t\tLabel,\n\t\tIcon,\n\t],\n})\n/**\n * Fired when the component checked state changes.\n *\n * @public\n */\n@event(\"change\")\n\nclass CheckBox extends UI5Element implements IFormElement {\n\t/**\n\t * Receives id(or many ids) of the elements that label the component\n\t * @default \"\"\n\t * @public\n\t * @since 1.1.0\n\t */\n\t@property()\n\taccessibleNameRef!: string;\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t *\n\t * @public\n\t * @default \"\"\n\t * @since 1.1.0\n\t */\n\t@property()\n\taccessibleName!: string;\n\n\t/**\n\t * Defines whether the component is disabled.\n\t * <br><br>\n\t * <b>Note:</b> A disabled component is completely noninteractive.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled!: boolean;\n\n\t/**\n\t * Defines whether the component is read-only.\n\t * <br><br>\n\t * <b>Note:</b> A read-only component is not editable,\n\t * but still provides visual feedback upon user interaction.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\treadonly!: boolean;\n\n\t/**\n\t * Defines whether the component is required.\n\t *\n\t * @default false\n\t * @public\n\t * @since 1.3.0\n\t */\n\t@property({ type: Boolean })\n\trequired!: boolean;\n\n\t/**\n\t* Defines whether the component is displayed as partially checked.\n\t* <br><br>\n\t* <b>Note:</b> The indeterminate state can be set only programmatically and can’t be achieved by user\n\t* interaction and the resulting visual state depends on the values of the <code>indeterminate</code>\n\t* and <code>checked</code> properties:\n\t* <ul>\n\t* <li> If the component is checked and indeterminate, it will be displayed as partially checked\n\t* <li> If the component is checked and it is not indeterminate, it will be displayed as checked\n\t* <li> If the component is not checked, it will be displayed as not checked regardless value of the indeterminate attribute\n\t* </ul>\n\t*\n\t* @default false\n\t* @public\n\t* @since 1.0.0-rc.15\n\t*/\n\t@property({ type: Boolean })\n\tindeterminate!: boolean;\n\n\t/**\n\t * Defines if the component is checked.\n\t * <br><br>\n\t * <b>Note:</b> The property can be changed with user interaction,\n\t * either by cliking/tapping on the component, or by\n\t * pressing the Enter or Space key.\n\t *\n\t * @default false\n\t * @formEvents change\n\t * @formProperty\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tchecked!: boolean;\n\n\t/**\n\t * Defines the text of the component.\n\t *\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\ttext!: string;\n\n\t/**\n\t * Defines the value state of the component.\n\t *\n\t * @default \"None\"\n\t * @public\n\t */\n\t@property({ type: ValueState, defaultValue: ValueState.None })\n\tvalueState!: `${ValueState}`;\n\n\t/**\n\t * Defines whether the component text wraps when there is not enough space.\n\t * <br><b>Note:</b> for option \"Normal\" the text will wrap and the words will not be broken based on hyphenation.\n\t *\n\t * @default \"None\"\n\t * @public\n\t */\n\t@property({ type: WrappingType, defaultValue: WrappingType.None })\n\twrappingType!: `${WrappingType}`;\n\n\t/**\n\t * Determines the name with which the component will be submitted in an HTML form.\n\t *\n\t * <br><br>\n\t * <b>Important:</b> For the <code>name</code> property to have effect, you must add the following import to your project:\n\t * <code>import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";</code>\n\t *\n\t * <br><br>\n\t * <b>Note:</b> When set, a native <code>input</code> HTML element\n\t * will be created inside the component so that it can be submitted as\n\t * part of an HTML form. Do not use this property unless you need to submit a form.\n\t *\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\tname!: string;\n\n\t/**\n\t * Defines the active state (pressed or not) of the component.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tactive!: boolean;\n\n\t/**\n\t * The slot is used to render native <code>input</code> HTML element within Light DOM to enable form submit,\n\t * when <code>name</code> property is set.\n\t * @private\n\t */\n\t@slot()\n\tformSupport!: Array<HTMLElement>;\n\n\tstatic i18nBundle: I18nBundle;\n\t_deactivate: () => void;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._deactivate = () => {\n\t\t\tif (activeCb) {\n\t\t\t\tactiveCb.active = false;\n\t\t\t}\n\t\t};\n\n\t\tif (!isGlobalHandlerAttached) {\n\t\t\tdocument.addEventListener(\"mouseup\", this._deactivate);\n\t\t\tisGlobalHandlerAttached = true;\n\t\t}\n\t}\n\n\tonBeforeRendering() {\n\t\tthis._enableFormSupport();\n\t}\n\n\t_enableFormSupport() {\n\t\tconst formSupport = getFeature<typeof FormSupport>(\"FormSupport\");\n\t\tif (formSupport) {\n\t\t\tformSupport.syncNativeHiddenInput(this, (element: IFormElement, nativeInput: NativeFormElement) => {\n\t\t\t\tnativeInput.disabled = !!element.disabled;\n\t\t\t\t(nativeInput as HTMLInputElement).checked = !!element.checked;\n\t\t\t\tnativeInput.value = element.checked ? \"on\" : \"\";\n\t\t\t});\n\t\t} else if (this.name) {\n\t\t\tconsole.warn(`In order for the \"name\" property to have effect, you should also: import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";`); // eslint-disable-line\n\t\t}\n\t}\n\n\t_onclick() {\n\t\tthis.toggle();\n\t}\n\n\t_onmousedown() {\n\t\tif (this.readonly || this.disabled) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.active = true;\n\t\tactiveCb = this; // eslint-disable-line\n\t}\n\n\t_onmouseup() {\n\t\tthis.active = false;\n\t}\n\n\t_onfocusout() {\n\t\tthis.active = false;\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t\tthis.active = true;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis.toggle();\n\t\t\tthis.active = true;\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (isSpace(e)) {\n\t\t\tthis.toggle();\n\t\t}\n\n\t\tthis.active = false;\n\t}\n\n\ttoggle() {\n\t\tif (this.canToggle()) {\n\t\t\tconst lastState = {\n\t\t\t\tchecked: this.checked,\n\t\t\t\tindeterminate: this.indeterminate,\n\t\t\t};\n\t\t\tif (this.indeterminate) {\n\t\t\t\tthis.indeterminate = false;\n\t\t\t\tthis.checked = true;\n\t\t\t} else {\n\t\t\t\tthis.checked = !this.checked;\n\t\t\t}\n\n\t\t\tconst changePrevented = !this.fireEvent(\"change\", null, true);\n\t\t\t// Angular two way data binding\n\t\t\tconst valueChagnePrevented = !this.fireEvent(\"value-changed\", null, true);\n\n\t\t\tif (changePrevented || valueChagnePrevented) {\n\t\t\t\tthis.checked = lastState.checked;\n\t\t\t\tthis.indeterminate = lastState.indeterminate;\n\t\t\t}\n\t\t}\n\t\treturn this;\n\t}\n\n\tcanToggle() {\n\t\treturn !(this.disabled || this.readonly);\n\t}\n\n\tvalueStateTextMappings() {\n\t\treturn {\n\t\t\t\"Error\": CheckBox.i18nBundle.getText(VALUE_STATE_ERROR),\n\t\t\t\"Warning\": CheckBox.i18nBundle.getText(VALUE_STATE_WARNING),\n\t\t\t\"Success\": CheckBox.i18nBundle.getText(VALUE_STATE_SUCCESS),\n\t\t};\n\t}\n\n\tget ariaLabelText() {\n\t\treturn getEffectiveAriaLabelText(this);\n\t}\n\n\tget classes() {\n\t\treturn {\n\t\t\tmain: {\n\t\t\t\t\"ui5-checkbox--hoverable\": !this.disabled && !this.readonly && isDesktop(),\n\t\t\t},\n\t\t};\n\t}\n\n\tget ariaReadonly() {\n\t\treturn this.readonly ? \"true\" : undefined;\n\t}\n\n\tget effectiveAriaDisabled() {\n\t\treturn this.disabled ? \"true\" : undefined;\n\t}\n\n\tget effectiveAriaChecked() {\n\t\treturn this.indeterminate && this.checked ? \"mixed\" : this.checked;\n\t}\n\n\tget ariaLabelledBy() {\n\t\tif (!this.ariaLabelText) {\n\t\t\treturn this.text ? `${this._id}-label` : undefined;\n\t\t}\n\n\t\treturn undefined;\n\t}\n\n\tget ariaDescribedBy() {\n\t\treturn this.hasValueState ? `${this._id}-descr` : undefined;\n\t}\n\n\tget hasValueState() {\n\t\treturn this.valueState !== ValueState.None;\n\t}\n\n\tget valueStateText() {\n\t\tif (this.valueState !== ValueState.None && this.valueState !== ValueState.Information) {\n\t\t\treturn this.valueStateTextMappings()[this.valueState];\n\t\t}\n\t}\n\n\tget effectiveTabIndex() {\n\t\tconst tabindex = this.getAttribute(\"tabindex\");\n\t\treturn this.disabled ? undefined : tabindex || \"0\";\n\t}\n\n\tget isCompletelyChecked() {\n\t\treturn this.checked && !this.indeterminate;\n\t}\n\n\tstatic async onDefine() {\n\t\tCheckBox.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n\t}\n}\n\nCheckBox.define();\n\nexport default CheckBox;\n"]}
+{"version":3,"file":"CheckBox.js","sourceRoot":"","sources":["../src/CheckBox.ts"],"names":[],"mappings":"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","sourcesContent":["import { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\nimport { getEffectiveAriaLabelText } from \"@ui5/webcomponents-base/dist/util/AriaLabelHelper.js\";\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport \"@ui5/webcomponents-icons/dist/accept.js\";\nimport \"@ui5/webcomponents-icons/dist/complete.js\";\nimport \"@ui5/webcomponents-icons/dist/border.js\";\nimport \"@ui5/webcomponents-icons/dist/tri-state.js\";\nimport type { IFormInputElement } from \"@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js\";\nimport Icon from \"./Icon.js\";\nimport Label from \"./Label.js\";\nimport WrappingType from \"./types/WrappingType.js\";\nimport {\n\tVALUE_STATE_ERROR,\n\tVALUE_STATE_WARNING,\n\tVALUE_STATE_SUCCESS,\n\tFORM_CHECKABLE_REQUIRED,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport checkboxCss from \"./generated/themes/CheckBox.css.js\";\n\n// Template\nimport CheckBoxTemplate from \"./generated/templates/CheckBoxTemplate.lit.js\";\n\nlet isGlobalHandlerAttached = false;\nlet activeCb: CheckBox;\n\n/**\n * @class\n *\n * ### Overview\n *\n * Allows the user to set a binary value, such as true/false or yes/no for an item.\n *\n * The `ui5-checkbox` component consists of a box and a label that describes its purpose.\n * If it's checked, an indicator is displayed inside the box.\n * To check/uncheck the `ui5-checkbox`, the user has to click or tap the square\n * box or its label.\n *\n * The `ui5-checkbox` component only has 2 states - checked and unchecked.\n * Clicking or tapping toggles the `ui5-checkbox` between checked and unchecked state.\n *\n * ### Usage\n *\n * You can define the checkbox text with via the `text` property. If the text exceeds the available width, it is truncated by default.\n * In case you prefer text to wrap, set the `wrappingType` property to \"Normal\".\n * The touchable area for toggling the `ui5-checkbox` ends where the text ends.\n *\n * You can disable the `ui5-checkbox` by setting the `disabled` property to\n * `true`,\n * or use the `ui5-checkbox` in read-only mode by setting the `readonly`\n * property to `true`.\n *\n * ### Keyboard Handling\n *\n * The user can use the following keyboard shortcuts to toggle the checked state of the `ui5-checkbox`.\n *\n * - [Space],[Enter] - Toggles between different states: checked, not checked.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/CheckBox.js\";`\n * @constructor\n * @extends UI5Element\n * @public\n * @csspart root - Used to style the outermost wrapper of the `ui5-checkbox`\n * @csspart label - Used to style the label of the `ui5-checkbox`\n * @csspart icon - Used to style the icon of the `ui5-checkbox`\n */\n@customElement({\n\ttag: \"ui5-checkbox\",\n\tlanguageAware: true,\n\tformAssociated: true,\n\trenderer: litRender,\n\ttemplate: CheckBoxTemplate,\n\tstyles: checkboxCss,\n\tdependencies: [\n\t\tLabel,\n\t\tIcon,\n\t],\n})\n/**\n * Fired when the component checked state changes.\n * @public\n * @allowPreventDefault\n */\n@event(\"change\")\n\nclass CheckBox extends UI5Element implements IFormInputElement {\n\t/**\n\t * Receives id(or many ids) of the elements that label the component\n\t * @default \"\"\n\t * @public\n\t * @since 1.1.0\n\t */\n\t@property()\n\taccessibleNameRef!: string;\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t * @public\n\t * @default \"\"\n\t * @since 1.1.0\n\t */\n\t@property()\n\taccessibleName!: string;\n\n\t/**\n\t * Defines whether the component is disabled.\n\t *\n\t * **Note:** A disabled component is completely noninteractive.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled!: boolean;\n\n\t/**\n\t * Defines whether the component is read-only.\n\t *\n\t * **Note:** A read-only component is not editable,\n\t * but still provides visual feedback upon user interaction.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\treadonly!: boolean;\n\n\t/**\n\t * Determines whether the `ui5-checkbox` is in display only state.\n\t *\n\t * When set to `true`, the `ui5-checkbox` is not interactive, not editable, not focusable\n\t * and not in the tab chain. This setting is used for forms in review mode.\n\t *\n\t * **Note:** When the property `disabled` is set to `true` this property has no effect.\n\t * @since 1.22.0\n\t * @public\n\t * @default false\n\t */\n\t@property({ type: Boolean })\n\tdisplayOnly!: boolean;\n\n\t/**\n\t * Defines whether the component is required.\n\t * @default false\n\t * @public\n\t * @since 1.3.0\n\t */\n\t@property({ type: Boolean })\n\trequired!: boolean;\n\n\t/**\n\t* Defines whether the component is displayed as partially checked.\n\t*\n\t* **Note:** The indeterminate state can be set only programmatically and can’t be achieved by user\n\t* interaction and the resulting visual state depends on the values of the `indeterminate`\n\t* and `checked` properties:\n\t*\n\t* -  If the component is checked and indeterminate, it will be displayed as partially checked\n\t* -  If the component is checked and it is not indeterminate, it will be displayed as checked\n\t* -  If the component is not checked, it will be displayed as not checked regardless value of the indeterminate attribute\n\t* @default false\n\t* @public\n\t* @since 1.0.0-rc.15\n\t*/\n\t@property({ type: Boolean })\n\tindeterminate!: boolean;\n\n\t/**\n\t * Defines if the component is checked.\n\t *\n\t * **Note:** The property can be changed with user interaction,\n\t * either by cliking/tapping on the component, or by\n\t * pressing the Enter or Space key.\n\t * @default false\n\t * @formEvents change\n\t * @formProperty\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tchecked!: boolean;\n\n\t/**\n\t * Defines the text of the component.\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\ttext!: string;\n\n\t/**\n\t * Defines the value state of the component.\n\t * @default \"None\"\n\t * @public\n\t */\n\t@property({ type: ValueState, defaultValue: ValueState.None })\n\tvalueState!: `${ValueState}`;\n\n\t/**\n\t * Defines whether the component text wraps when there is not enough space.\n\t *\n\t * **Note:** for option \"Normal\" the text will wrap and the words will not be broken based on hyphenation.\n\t * @default \"None\"\n\t * @public\n\t */\n\t@property({ type: WrappingType, defaultValue: WrappingType.None })\n\twrappingType!: `${WrappingType}`;\n\n\t/**\n\t * Determines the name by which the component will be identified upon submission in an HTML form.\n\t *\n\t * **Note:** This property is only applicable within the context of an HTML Form element.\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\tname!: string;\n\n\t/**\n\t * Defines the active state (pressed or not) of the component.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tactive!: boolean;\n\n\tstatic i18nBundle: I18nBundle;\n\t_deactivate: () => void;\n\n\tget formValidityMessage() {\n\t\treturn CheckBox.i18nBundle.getText(FORM_CHECKABLE_REQUIRED);\n\t}\n\n\tget formValidity(): ValidityStateFlags {\n\t\treturn { valueMissing: this.required && !this.checked };\n\t}\n\n\tasync formElementAnchor() {\n\t\treturn this.getFocusDomRefAsync();\n\t}\n\n\tget formFormattedValue() {\n\t\treturn this.checked ? \"on\" : null;\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._deactivate = () => {\n\t\t\tif (activeCb) {\n\t\t\t\tactiveCb.active = false;\n\t\t\t}\n\t\t};\n\n\t\tif (!isGlobalHandlerAttached) {\n\t\t\tdocument.addEventListener(\"mouseup\", this._deactivate);\n\t\t\tisGlobalHandlerAttached = true;\n\t\t}\n\t}\n\n\tonEnterDOM() {\n\t\tif (isDesktop()) {\n\t\t\tthis.setAttribute(\"desktop\", \"\");\n\t\t}\n\t}\n\n\t_onclick() {\n\t\tthis.toggle();\n\t}\n\n\t_onmousedown() {\n\t\tif (this.readonly || this.disabled) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.active = true;\n\t\tactiveCb = this; // eslint-disable-line\n\t}\n\n\t_onmouseup() {\n\t\tthis.active = false;\n\t}\n\n\t_onfocusout() {\n\t\tthis.active = false;\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t}\n\n\t\tif (this.readonly || this.disabled) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis.toggle();\n\t\t}\n\n\t\tthis.active = true;\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (isSpace(e)) {\n\t\t\tthis.toggle();\n\t\t}\n\n\t\tthis.active = false;\n\t}\n\n\ttoggle() {\n\t\tif (this.canToggle()) {\n\t\t\tconst lastState = {\n\t\t\t\tchecked: this.checked,\n\t\t\t\tindeterminate: this.indeterminate,\n\t\t\t};\n\t\t\tif (this.indeterminate) {\n\t\t\t\tthis.indeterminate = false;\n\t\t\t\tthis.checked = true;\n\t\t\t} else {\n\t\t\t\tthis.checked = !this.checked;\n\t\t\t}\n\n\t\t\tconst changePrevented = !this.fireEvent(\"change\", null, true);\n\t\t\t// Angular two way data binding\n\t\t\tconst valueChagnePrevented = !this.fireEvent(\"value-changed\", null, true);\n\n\t\t\tif (changePrevented || valueChagnePrevented) {\n\t\t\t\tthis.checked = lastState.checked;\n\t\t\t\tthis.indeterminate = lastState.indeterminate;\n\t\t\t}\n\t\t}\n\t\treturn this;\n\t}\n\n\tcanToggle() {\n\t\treturn !(this.disabled || this.readonly || this.displayOnly);\n\t}\n\n\tvalueStateTextMappings() {\n\t\treturn {\n\t\t\t\"Negative\": CheckBox.i18nBundle.getText(VALUE_STATE_ERROR),\n\t\t\t\"Critical\": CheckBox.i18nBundle.getText(VALUE_STATE_WARNING),\n\t\t\t\"Positive\": CheckBox.i18nBundle.getText(VALUE_STATE_SUCCESS),\n\t\t};\n\t}\n\n\tget ariaLabelText() {\n\t\treturn getEffectiveAriaLabelText(this);\n\t}\n\n\tget classes() {\n\t\treturn {\n\t\t\tmain: {\n\t\t\t\t\"ui5-checkbox--hoverable\": !this.disabled && !this.readonly && isDesktop(),\n\t\t\t},\n\t\t};\n\t}\n\n\tget ariaReadonly() {\n\t\treturn this.readonly || this.displayOnly ? \"true\" : undefined;\n\t}\n\n\tget effectiveAriaDisabled() {\n\t\treturn this.disabled ? \"true\" : undefined;\n\t}\n\n\tget effectiveAriaChecked() {\n\t\treturn this.indeterminate && this.checked ? \"mixed\" : this.checked;\n\t}\n\n\tget ariaLabelledBy() {\n\t\tif (!this.ariaLabelText) {\n\t\t\treturn this.text ? `${this._id}-label` : undefined;\n\t\t}\n\n\t\treturn undefined;\n\t}\n\n\tget ariaDescribedBy() {\n\t\treturn this.hasValueState ? `${this._id}-descr` : undefined;\n\t}\n\n\tget hasValueState() {\n\t\treturn this.valueState !== ValueState.None;\n\t}\n\n\tget valueStateText() {\n\t\tif (this.valueState !== ValueState.None && this.valueState !== ValueState.Information) {\n\t\t\treturn this.valueStateTextMappings()[this.valueState];\n\t\t}\n\t}\n\n\tget effectiveTabIndex() {\n\t\tconst tabindex = this.getAttribute(\"tabindex\");\n\t\treturn this.disabled || this.displayOnly ? undefined : tabindex || \"0\";\n\t}\n\n\tget isCompletelyChecked() {\n\t\treturn this.checked && !this.indeterminate;\n\t}\n\n\tget isDisplayOnly() {\n\t\treturn this.displayOnly && !this.disabled;\n\t}\n\n\tget displayOnlyIcon() {\n\t\tif (this.isCompletelyChecked) {\n\t\t\treturn \"complete\";\n\t\t}\n\t\tif (this.checked && this.indeterminate) {\n\t\t\treturn \"tri-state\";\n\t\t}\n\t\treturn \"border\";\n\t}\n\n\tstatic async onDefine() {\n\t\tCheckBox.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n\t}\n}\n\nCheckBox.define();\n\nexport default CheckBox;\n"]}

package/dist/ColorPalette.d.ts

@@ -1,12 +1,20 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import ColorPaletteItem from "./ColorPaletteItem.js";
 import Button from "./Button.js";
 import type Dialog from "./Dialog.js";
 import type ColorPaletteMoreColors from "./features/ColorPaletteMoreColors.js";
 import type ColorPicker from "./ColorPicker.js";
-import type { IColorPaletteItem } from "./Interfaces.js";
+/**
+ * Interface for components that may be used inside a `ui5-color-palette` or `ui5-color-palette-popover`
+ * @public
+ */
+interface IColorPaletteItem extends HTMLElement, ITabbable {
+    value?: string;
+    index?: number;
+}
 type ColorPaletteNavigationItem = IColorPaletteItem | Button;
 type ColorPaletteItemClickEventDetail = {
     color: string;
@@ -14,18 +22,17 @@ type ColorPaletteItemClickEventDetail = {
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
- * The <code>ui5-color-palette</code> provides the users with a range of predefined colors. The colors are fixed and do not change with the theme.
+ * ### Overview
+ * The `ui5-color-palette` provides the users with a range of predefined colors. The colors are fixed and do not change with the theme.
  *
- * <h3>Usage</h3>
+ * ### Usage
  *
- * The <code>ui5-color-palette</code> is meant for users that need to select a color from a predefined set.
- * To define the colors, use the <code>ui5-color-palette-item</code> component inside the default slot of the <code>ui5-color-palette</code>.
+ * The `ui5-color-palette` is meant for users that need to select a color from a predefined set.
+ * To define the colors, use the `ui5-color-palette-item` component inside the default slot of the `ui5-color-palette`.
  *
- * <h3>ES6 Module Import</h3>
- *
- * <code>import "@ui5/webcomponents/dist/ColorPalette.js";</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents/dist/ColorPalette.js";`
  * @constructor
  * @extends UI5Element
  * @since 1.0.0-rc.12
@@ -40,7 +47,8 @@ declare class ColorPalette extends UI5Element {
     showRecentColors: boolean;
     /**
      * 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>
+     *
+     * **Note:** In order to use this property you need to import the following module: `"@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js"`
      * @private
      * @since 1.0.0-rc.15
      */
@@ -54,7 +62,8 @@ declare class ColorPalette extends UI5Element {
     showDefaultColor: boolean;
     /**
      * Defines the default color of the color palette
-     * <b>Note:</b> The default color should be a part of the ColorPalette colors</code>
+     *
+     * **Note:** The default color should be a part of the ColorPalette colors`
      * @private
      * @since 1.0.0-rc.16
      */
@@ -70,14 +79,19 @@ declare class ColorPalette extends UI5Element {
      */
     popupMode: boolean;
     /**
-     * Defines the <code>ui5-color-palette-item</code> elements.
+     * Defines if the palette is rendered on phone.
+     * @private
+     */
+    onPhone: boolean;
+    /**
+     * Defines the `ui5-color-palette-item` elements.
      * @public
      */
     colors: Array<IColorPaletteItem>;
     _itemNavigation: ItemNavigation;
     _itemNavigationRecentColors: ItemNavigation;
     _recentColors: Array<string>;
-    moreColorsFeature?: ColorPaletteMoreColors;
+    moreColorsFeature: ColorPaletteMoreColors | Record<string, any>;
     static i18nBundle: I18nBundle;
     static onDefine(): Promise<void>;
     constructor();
@@ -96,9 +110,9 @@ declare class ColorPalette extends UI5Element {
     focusFirstDisplayColorElement(): void;
     focusFirstFocusableElement(): void;
     get firstFocusableElement(): ColorPaletteNavigationItem;
-    _chooseCustomColor(): Promise<void>;
-    _closeDialog(): Promise<void>;
-    _openMoreColorsDialog(): Promise<void>;
+    _chooseCustomColor(): void;
+    _closeDialog(): void;
+    _openMoreColorsDialog(): void;
     _onDefaultColorClick(): void;
     /**
      * Returns the selected color.
@@ -106,8 +120,9 @@ declare class ColorPalette extends UI5Element {
     get selectedColor(): string | undefined;
     get displayedColors(): IColorPaletteItem[];
     get colorContainerLabel(): string;
-    get colorPaleteMoreColorsText(): string;
-    get _showMoreColors(): false | ColorPaletteMoreColors | undefined;
+    get colorPaletteMoreColorsText(): string;
+    get colorPaletteDefaultColorText(): string;
+    get _showMoreColors(): false | ColorPaletteMoreColors | Record<string, any>;
     get rowSize(): number;
     get hasRecentColors(): string | false;
     get recentColors(): string[];
@@ -119,8 +134,8 @@ declare class ColorPalette extends UI5Element {
             "ui5-cp-root-phone": boolean;
         };
     };
-    _getDialog(): Promise<Dialog>;
-    getColorPicker(): Promise<ColorPicker>;
+    _getDialog(): Dialog;
+    getColorPicker(): ColorPicker;
 }
 export default ColorPalette;
-export type { ColorPaletteItemClickEventDetail };
+export type { ColorPaletteItemClickEventDetail, IColorPaletteItem, };

package/dist/ColorPalette.js

@@ -19,28 +19,26 @@ import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import { isSpace, isEnter, isDown, isUp, isTabNext, } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import ColorPaletteTemplate from "./generated/templates/ColorPaletteTemplate.lit.js";
-import ColorPaletteDialogTemplate from "./generated/templates/ColorPaletteDialogTemplate.lit.js";
 import ColorPaletteItem from "./ColorPaletteItem.js";
 import Button from "./Button.js";
-import { COLORPALETTE_CONTAINER_LABEL, COLOR_PALETTE_MORE_COLORS_TEXT, } from "./generated/i18n/i18n-defaults.js";
+import { COLORPALETTE_CONTAINER_LABEL, COLOR_PALETTE_MORE_COLORS_TEXT, COLOR_PALETTE_DEFAULT_COLOR_TEXT, } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import ColorPaletteCss from "./generated/themes/ColorPalette.css.js";
-import ColorPaletteStaticAreaCss from "./generated/themes/ColorPaletteStaticArea.css.js";
+import ColorPaletteDialogCss from "./generated/themes/ColorPaletteDialog.css.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
- * The <code>ui5-color-palette</code> provides the users with a range of predefined colors. The colors are fixed and do not change with the theme.
+ * ### Overview
+ * The `ui5-color-palette` provides the users with a range of predefined colors. The colors are fixed and do not change with the theme.
  *
- * <h3>Usage</h3>
+ * ### Usage
  *
- * The <code>ui5-color-palette</code> is meant for users that need to select a color from a predefined set.
- * To define the colors, use the <code>ui5-color-palette-item</code> component inside the default slot of the <code>ui5-color-palette</code>.
+ * The `ui5-color-palette` is meant for users that need to select a color from a predefined set.
+ * To define the colors, use the `ui5-color-palette-item` component inside the default slot of the `ui5-color-palette`.
  *
- * <h3>ES6 Module Import</h3>
- *
- * <code>import "@ui5/webcomponents/dist/ColorPalette.js";</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents/dist/ColorPalette.js";`
  * @constructor
  * @extends UI5Element
  * @since 1.0.0-rc.12
@@ -56,6 +54,7 @@ let ColorPalette = ColorPalette_1 = class ColorPalette extends UI5Element {
     }
     constructor() {
         super();
+        this.moreColorsFeature = {};
         this._itemNavigation = new ItemNavigation(this, {
             getItemsCallback: () => this.displayedColors,
             rowSize: this.rowSize,
@@ -81,6 +80,7 @@ let ColorPalette = ColorPalette_1 = class ColorPalette extends UI5Element {
                 throw new Error(`You have to import "@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js" module to use the more-colors functionality.`);
             }
         }
+        this.onPhone = isPhone();
     }
     onAfterRendering() {
         if (this.popupMode) {
@@ -251,18 +251,18 @@ let ColorPalette = ColorPalette_1 = class ColorPalette extends UI5Element {
     get firstFocusableElement() {
         return this.colorPaletteNavigationElements[0];
     }
-    async _chooseCustomColor() {
-        const colorPicker = await this.getColorPicker();
-        this._setColor(colorPicker.color);
+    _chooseCustomColor() {
+        const colorPicker = this.getColorPicker();
+        this._setColor(colorPicker.value);
         this._closeDialog();
     }
-    async _closeDialog() {
-        const dialog = await this._getDialog();
-        dialog.close();
+    _closeDialog() {
+        const dialog = this._getDialog();
+        dialog.open = false;
     }
-    async _openMoreColorsDialog() {
-        const dialog = await this._getDialog();
-        dialog.show();
+    _openMoreColorsDialog() {
+        const dialog = this._getDialog();
+        dialog.open = true;
     }
     _onDefaultColorClick() {
         if (this.defaultColor) {
@@ -282,9 +282,12 @@ let ColorPalette = ColorPalette_1 = class ColorPalette extends UI5Element {
     get colorContainerLabel() {
         return ColorPalette_1.i18nBundle.getText(COLORPALETTE_CONTAINER_LABEL);
     }
-    get colorPaleteMoreColorsText() {
+    get colorPaletteMoreColorsText() {
         return ColorPalette_1.i18nBundle.getText(COLOR_PALETTE_MORE_COLORS_TEXT);
     }
+    get colorPaletteDefaultColorText() {
+        return ColorPalette_1.i18nBundle.getText(COLOR_PALETTE_DEFAULT_COLOR_TEXT);
+    }
     get _showMoreColors() {
         return this.showMoreColors && this.moreColorsFeature;
     }
@@ -333,12 +336,11 @@ let ColorPalette = ColorPalette_1 = class ColorPalette extends UI5Element {
             },
         };
     }
-    async _getDialog() {
-        const staticAreaItem = await this.getStaticAreaItemDomRef();
-        return staticAreaItem.querySelector("[ui5-dialog]");
+    _getDialog() {
+        return this.shadowRoot.querySelector("[ui5-dialog]");
     }
-    async getColorPicker() {
-        const dialog = await this._getDialog();
+    getColorPicker() {
+        const dialog = this._getDialog();
         return dialog.content[0].querySelector("[ui5-color-picker]");
     }
 };
@@ -360,6 +362,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], ColorPalette.prototype, "popupMode", void 0);
+__decorate([
+    property({ type: Boolean })
+], ColorPalette.prototype, "onPhone", void 0);
 __decorate([
     slot({
         "default": true,
@@ -373,9 +378,7 @@ ColorPalette = ColorPalette_1 = __decorate([
         tag: "ui5-color-palette",
         renderer: litRender,
         template: ColorPaletteTemplate,
-        staticAreaTemplate: ColorPaletteDialogTemplate,
-        styles: ColorPaletteCss,
-        staticAreaStyles: ColorPaletteStaticAreaCss,
+        styles: [ColorPaletteCss, ColorPaletteDialogCss],
         get dependencies() {
             const colorPaletteMoreColors = getFeature("ColorPaletteMoreColors");
             return [ColorPaletteItem, Button].concat(colorPaletteMoreColors ? colorPaletteMoreColors.dependencies : []);
@@ -383,7 +386,6 @@ ColorPalette = ColorPalette_1 = __decorate([
     })
     /**
      * Fired when the user selects a color.
-     *
      * @public
      * @since 1.0.0-rc.15
      * @param {string} color the selected color