@ui5/webcomponents 2.0.0-rc.3 → 2.0.0-rc.4

package/dist/CheckBox.d.ts

@@ -5,8 +5,8 @@ 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 type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import WrappingType from "./types/WrappingType.js";
-import type { IFormElement } from "./features/InputElementsFormSupport.js";
 /**
  * @class
  *
@@ -49,7 +49,7 @@ import type { IFormElement } from "./features/InputElementsFormSupport.js";
  * @csspart label - Used to style the label of the `ui5-checkbox`
  * @csspart icon - Used to style the icon of the `ui5-checkbox`
  */
-declare class CheckBox extends UI5Element implements IFormElement {
+declare class CheckBox extends UI5Element implements IFormInputElement {
     /**
      * Receives id(or many ids) of the elements that label the component
      * @default ""
@@ -148,14 +148,9 @@ declare class CheckBox extends UI5Element implements IFormElement {
      */
     wrappingType: `${WrappingType}`;
     /**
-     * Determines the name with which the component will be submitted in an HTML form.
+     * Determines the name by which the component will be identified upon submission in an HTML form.
      *
-     * **Important:** For the `name` property to have effect, you must add the following import to your project:
-     * `import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`
-     *
-     * **Note:** When set, a native `input` HTML element
-     * 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.
+     * **Note:** This property is only applicable within the context of an HTML Form element.
      * @default ""
      * @public
      */
@@ -165,18 +160,14 @@ declare class CheckBox extends UI5Element implements IFormElement {
      * @private
      */
     active: boolean;
-    /**
-     * The slot is used to render native `input` HTML element within Light DOM to enable form submit,
-     * when `name` property is set.
-     * @private
-     */
-    formSupport: Array<HTMLElement>;
     static i18nBundle: I18nBundle;
     _deactivate: () => void;
+    get formValidityMessage(): string;
+    get formValidity(): ValidityStateFlags;
+    formElementAnchor(): Promise<HTMLElement | undefined>;
+    get formFormattedValue(): "on" | null;
     constructor();
-    onBeforeRendering(): void;
     onEnterDOM(): void;
-    _enableFormSupport(): void;
     _onclick(): void;
     _onmousedown(): void;
     _onmouseup(): void;

package/dist/CheckBox.js

@@ -9,12 +9,10 @@ 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";
@@ -24,7 +22,7 @@ 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
@@ -74,6 +72,18 @@ let activeCb;
  * @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 = () => {
@@ -86,27 +96,11 @@ let CheckBox = CheckBox_1 = class CheckBox extends UI5Element {
             isGlobalHandlerAttached = true;
         }
     }
-    onBeforeRendering() {
-        this._enableFormSupport();
-    }
     onEnterDOM() {
         if (isDesktop()) {
             this.setAttribute("desktop", "");
         }
     }
-    _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
-        }
-    }
     _onclick() {
         this.toggle();
     }
@@ -272,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,

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 \"@ui5/webcomponents-icons/dist/complete.js\";\nimport \"@ui5/webcomponents-icons/dist/border.js\";\nimport \"@ui5/webcomponents-icons/dist/tri-state.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 * ### 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\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 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 * @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 with which the component will be submitted in an HTML form.\n\t *\n\t * **Important:** For the `name` property to have effect, you must add the following import to your project:\n\t * `import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";`\n\t *\n\t * **Note:** When set, a native `input` 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 * @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 `input` HTML element within Light DOM to enable form submit,\n\t * when `name` 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\tonEnterDOM() {\n\t\tif (isDesktop()) {\n\t\t\tthis.setAttribute(\"desktop\", \"\");\n\t\t}\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}\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"]}
+{"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

@@ -14,6 +14,7 @@ import type ColorPicker from "./ColorPicker.js";
 interface IColorPaletteItem extends HTMLElement, ITabbable {
     value?: string;
     index?: number;
+    selected?: boolean;
 }
 type ColorPaletteNavigationItem = IColorPaletteItem | Button;
 type ColorPaletteItemClickEventDetail = {
@@ -92,6 +93,8 @@ declare class ColorPalette extends UI5Element {
     _itemNavigationRecentColors: ItemNavigation;
     _recentColors: Array<string>;
     moreColorsFeature: ColorPaletteMoreColors | Record<string, any>;
+    _currentlySelected?: ColorPaletteItem;
+    _shouldFocusRecentColors: boolean;
     static i18nBundle: I18nBundle;
     static onDefine(): Promise<void>;
     constructor();
@@ -99,11 +102,21 @@ declare class ColorPalette extends UI5Element {
     onAfterRendering(): void;
     selectColor(item: ColorPaletteItem): void;
     _setColor(color: string): void;
+    get effectiveColorItems(): IColorPaletteItem[];
+    /**
+     * Ensures that only one item is selected or only the last selected item remains active if more than one are explicitly set as 'selected'.
+     * @private
+     */
+    _ensureSingleSelectionOrDeselectAll(): void;
     _onclick(e: MouseEvent): void;
     _onkeyup(e: KeyboardEvent): void;
     _onkeydown(e: KeyboardEvent): void;
+    handleSelection(target: ColorPaletteItem): void;
+    _handleDefaultColorClick(e: KeyboardEvent): void;
+    _onDefaultColorKeyUp(e: KeyboardEvent): void;
     _onDefaultColorKeyDown(e: KeyboardEvent): void;
     _onMoreColorsKeyDown(e: KeyboardEvent): void;
+    _isUpOrDownNavigatableColorPaletteItem(e: KeyboardEvent): boolean | undefined;
     _onColorContainerKeyDown(e: KeyboardEvent): void;
     _onRecentColorsContainerKeyDown(e: KeyboardEvent): void;
     focusColorElement(element: ColorPaletteNavigationItem, itemNavigation: ItemNavigation): void;
@@ -111,9 +124,15 @@ declare class ColorPalette extends UI5Element {
     focusFirstFocusableElement(): void;
     get firstFocusableElement(): ColorPaletteNavigationItem;
     _chooseCustomColor(): void;
+    _addRecentColor(color: string): void;
     _closeDialog(): void;
     _openMoreColorsDialog(): void;
     _onDefaultColorClick(): void;
+    /**
+     * Returns the selected item.
+     */
+    get selectedItem(): IColorPaletteItem | undefined;
+    get allColorsInPalette(): IColorPaletteItem[];
     /**
      * Returns the selected color.
      */

package/dist/ColorPalette.js

@@ -68,6 +68,11 @@ let ColorPalette = ColorPalette_1 = class ColorPalette extends UI5Element {
         this._recentColors = [];
     }
     onBeforeRendering() {
+        this._ensureSingleSelectionOrDeselectAll();
+        const selectedItem = this.allColorsInPalette.find(item => item.selected);
+        if (selectedItem && !this.showRecentColors) {
+            this._selectedColor = selectedItem.value;
+        }
         this.displayedColors.forEach((item, index) => {
             item.index = index + 1;
         });
@@ -83,6 +88,10 @@ let ColorPalette = ColorPalette_1 = class ColorPalette extends UI5Element {
         this.onPhone = isPhone();
     }
     onAfterRendering() {
+        if (this._shouldFocusRecentColors && this.hasRecentColors) {
+            this.recentColorsElements[0].selected = true;
+            this.recentColorsElements[0].focus();
+        }
         if (this.popupMode) {
             if (this.showDefaultColor) {
                 this.focusFirstFocusableElement();
@@ -109,36 +118,89 @@ let ColorPalette = ColorPalette_1 = class ColorPalette extends UI5Element {
                 this._recentColors.unshift(this._recentColors.splice(this._recentColors.indexOf(this._selectedColor), 1)[0]);
             }
             else {
-                this._recentColors.unshift(this._selectedColor);
+                this._addRecentColor(this._selectedColor);
             }
         }
         this.fireEvent("item-click", {
             color: this._selectedColor,
         });
     }
-    _onclick(e) {
-        const target = e.target;
-        if (target.hasAttribute("ui5-color-palette-item")) {
-            this.selectColor(target);
+    get effectiveColorItems() {
+        let colorItems = this.colors;
+        if (this.popupMode) {
+            colorItems = this.getSlottedNodes("colors");
         }
+        return colorItems;
+    }
+    /**
+     * Ensures that only one item is selected or only the last selected item remains active if more than one are explicitly set as 'selected'.
+     * @private
+     */
+    _ensureSingleSelectionOrDeselectAll() {
+        let lastSelectedItem;
+        this.allColorsInPalette.forEach(item => {
+            if (item.selected) {
+                if (lastSelectedItem) {
+                    lastSelectedItem.selected = false;
+                }
+                lastSelectedItem = item;
+            }
+        });
+    }
+    _onclick(e) {
+        this.handleSelection(e.target);
     }
     _onkeyup(e) {
         const target = e.target;
-        if (isSpace(e) && target.hasAttribute("ui5-color-palette-item")) {
+        if (isSpace(e)) {
             e.preventDefault();
-            this.selectColor(target);
+            this.handleSelection(target);
         }
     }
     _onkeydown(e) {
         const target = e.target;
-        if (isEnter(e) && target.hasAttribute("ui5-color-palette-item")) {
-            this.selectColor(target);
+        if (isEnter(e)) {
+            this.handleSelection(target);
+        }
+        if (isSpace(e)) {
+            e.preventDefault();
+        }
+    }
+    handleSelection(target) {
+        if (!target.hasAttribute("ui5-color-palette-item") || !target.value) {
+            return;
+        }
+        this._shouldFocusRecentColors = false;
+        this.selectColor(target);
+        // Handle selection for items within the 'recentColorsElements'
+        if (this.recentColorsElements.includes(target)) {
+            this.recentColorsElements[0].selected = true;
+            this.recentColorsElements[0].focus();
+            this._currentlySelected = this.recentColorsElements[0];
+        }
+        else {
+            this.allColorsInPalette.forEach(item => {
+                item.selected = item === target;
+            });
+            this._currentlySelected = target;
+        }
+        this._ensureSingleSelectionOrDeselectAll();
+    }
+    _handleDefaultColorClick(e) {
+        e.preventDefault();
+        this._onDefaultColorClick();
+    }
+    _onDefaultColorKeyUp(e) {
+        if (isSpace(e)) {
+            this._handleDefaultColorClick(e);
         }
     }
     _onDefaultColorKeyDown(e) {
         if (isTabNext(e) && this.popupMode) {
-            e.preventDefault();
-            this._onDefaultColorClick();
+            this._handleDefaultColorClick(e);
+        }
+        if (isEnter(e)) {
+            this._handleDefaultColorClick(e);
         }
         if (isDown(e)) {
             e.stopPropagation();
@@ -180,9 +242,15 @@ let ColorPalette = ColorPalette_1 = class ColorPalette extends UI5Element {
             }
         }
     }
+    _isUpOrDownNavigatableColorPaletteItem(e) {
+        return (isUp(e) || isDown(e)) && this._currentlySelected && this.colorPaletteNavigationElements.includes(this._currentlySelected);
+    }
     _onColorContainerKeyDown(e) {
         const target = e.target;
         const lastElementInNavigation = this.colorPaletteNavigationElements[this.colorPaletteNavigationElements.length - 1];
+        if (this._isUpOrDownNavigatableColorPaletteItem(e)) {
+            this._currentlySelected = undefined;
+        }
         if (isTabNext(e) && this.popupMode) {
             e.preventDefault();
             this.selectColor(target);
@@ -217,6 +285,9 @@ let ColorPalette = ColorPalette_1 = class ColorPalette extends UI5Element {
         }
     }
     _onRecentColorsContainerKeyDown(e) {
+        if (this._isUpOrDownNavigatableColorPaletteItem(e)) {
+            this._currentlySelected = undefined;
+        }
         if (isUp(e)) {
             if (this.showMoreColors) {
                 const navigationElementsIndex = this.showDefaultColor ? 2 : 1;
@@ -255,20 +326,45 @@ let ColorPalette = ColorPalette_1 = class ColorPalette extends UI5Element {
         const colorPicker = this.getColorPicker();
         this._setColor(colorPicker.value);
         this._closeDialog();
+        this._shouldFocusRecentColors = !this.popupMode;
+        this.recentColorsElements[0].selected = true;
+        this._currentlySelected = colorPicker.value ? this.recentColorsElements[0] : undefined;
+    }
+    _addRecentColor(color) {
+        if (this.showRecentColors && !this._recentColors.includes(color)) {
+            this._recentColors.unshift(color);
+            if (this._recentColors.length > this.rowSize) {
+                this._recentColors.pop();
+            }
+        }
     }
     _closeDialog() {
         const dialog = this._getDialog();
-        dialog.close();
+        dialog.open = false;
     }
     _openMoreColorsDialog() {
         const dialog = this._getDialog();
-        dialog.show();
+        dialog.open = true;
     }
     _onDefaultColorClick() {
         if (this.defaultColor) {
             this._setColor(this.defaultColor);
+            this._addRecentColor(this.defaultColor);
+            if (this.selectedItem) {
+                this.selectedItem.selected = false;
+                this._currentlySelected = undefined;
+            }
         }
     }
+    /**
+     * Returns the selected item.
+     */
+    get selectedItem() {
+        return [...this.effectiveColorItems, ...this.recentColorsElements].find(item => item.selected);
+    }
+    get allColorsInPalette() {
+        return [...this.effectiveColorItems, ...this.recentColorsElements];
+    }
     /**
      * Returns the selected color.
      */
@@ -316,6 +412,9 @@ let ColorPalette = ColorPalette_1 = class ColorPalette extends UI5Element {
     get colorPaletteNavigationElements() {
         const navigationElements = [];
         const rootElement = this.shadowRoot.querySelector(".ui5-cp-root");
+        if (this._currentlySelected) {
+            navigationElements.push(this._currentlySelected);
+        }
         if (this.showDefaultColor) {
             navigationElements.push(rootElement.querySelector(".ui5-cp-default-color-button"));
         }