@sapudex/web-components 0.224.0 → 2.0.0

package/dist/PasswordField.js

@@ -4,26 +4,26 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var UDExPasswordField_1;
 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 litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import UDExTextField from "./TextField.js";
-import ValueState from "./types/common.js";
+import UDExValueState from "./types/common.js";
+import "@ui5/webcomponents-icons/dist/hide.js";
+import "@ui5/webcomponents-icons/dist/show.js";
 import PasswordFieldTemplate from "./generated/templates/PasswordFieldTemplate.lit.js";
-export var InputType;
-(function (InputType) {
-    InputType["Password"] = "password";
-    InputType["Text"] = "text";
-})(InputType || (InputType = {}));
-export var IconType;
-(function (IconType) {
-    IconType["Hide"] = "hide";
-    IconType["Show"] = "show";
-})(IconType || (IconType = {}));
+export var UDExInputType;
+(function (UDExInputType) {
+    UDExInputType["Password"] = "password";
+    UDExInputType["Text"] = "text";
+})(UDExInputType || (UDExInputType = {}));
+export var UDExIconType;
+(function (UDExIconType) {
+    UDExIconType["Hide"] = "hide";
+    UDExIconType["Show"] = "show";
+})(UDExIconType || (UDExIconType = {}));
 /**
  * @class
  *
@@ -42,14 +42,35 @@ export var IconType;
  * @tagname udex-password-field
  * @public
  */
-let UDExPasswordField = UDExPasswordField_1 = class UDExPasswordField extends UI5Element {
-    static async onDefine() {
-        UDExPasswordField_1.i18nBundle = await getI18nBundle("@sapudex/web-components");
+let UDExPasswordField = class UDExPasswordField extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines supporting text under the input field.
+         *
+         * @default ""
+         * @private
+         */
+        this.type = UDExInputType.Password;
+        /**
+         * Defines the value state of the component.
+         *
+         * @default "Standard"
+         * @public
+         */
+        this.valueState = UDExValueState.Standard;
+        /**
+         * Defines the inner stored show password button icon.
+         *
+         * @default "show"
+         * @private
+         */
+        this.icon = UDExIconType.Show;
     }
     handleShowPassword() {
-        const isPassword = this.type === InputType.Password;
-        this.icon = isPassword ? IconType.Hide : IconType.Show;
-        this.type = isPassword ? InputType.Text : InputType.Password;
+        const isPassword = this.type === UDExInputType.Password;
+        this.icon = isPassword ? UDExIconType.Hide : UDExIconType.Show;
+        this.type = isPassword ? UDExInputType.Text : UDExInputType.Password;
     }
     get passwordLabel() {
         return `${this.label} ${this.showAsterisk ? "*" : ""}`;
@@ -62,7 +83,7 @@ let UDExPasswordField = UDExPasswordField_1 = class UDExPasswordField extends UI
     }
 };
 __decorate([
-    property({ type: String, noAttribute: true, defaultValue: InputType.Password })
+    property({ type: String, noAttribute: true })
 ], UDExPasswordField.prototype, "type", void 0);
 __decorate([
     property({ type: Boolean })
@@ -71,7 +92,7 @@ __decorate([
     property({ type: String })
 ], UDExPasswordField.prototype, "value", void 0);
 __decorate([
-    property({ validator: Integer })
+    property({ type: Number })
 ], UDExPasswordField.prototype, "maxlength", void 0);
 __decorate([
     property({ type: String })
@@ -80,7 +101,7 @@ __decorate([
     property({ type: Boolean })
 ], UDExPasswordField.prototype, "showAsterisk", void 0);
 __decorate([
-    property({ type: ValueState, defaultValue: ValueState.Standard })
+    property()
 ], UDExPasswordField.prototype, "valueState", void 0);
 __decorate([
     property({ type: String })
@@ -89,7 +110,7 @@ __decorate([
     property({ type: Boolean })
 ], UDExPasswordField.prototype, "showButtonEnabled", void 0);
 __decorate([
-    property({ type: String, noAttribute: true, defaultValue: IconType.Show })
+    property({ type: String, noAttribute: true })
 ], UDExPasswordField.prototype, "icon", void 0);
 __decorate([
     property({ type: String })
@@ -106,7 +127,10 @@ __decorate([
 __decorate([
     property({ type: String })
 ], UDExPasswordField.prototype, "accessibleNameRef", void 0);
-UDExPasswordField = UDExPasswordField_1 = __decorate([
+__decorate([
+    i18n("@sapudex/web-components")
+], UDExPasswordField, "i18nBundle", void 0);
+UDExPasswordField = __decorate([
     customElement({
         tag: "udex-password-field",
         renderer: litRender,

package/dist/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.js","sourceRoot":"","sources":["../src/PasswordField.ts"],"names":[],"mappings":"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","sourcesContent":["import 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 litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport UDExTextField from \"./TextField.js\";\nimport ValueState from \"./types/common.js\";\n\nimport PasswordFieldTemplate from \"./generated/templates/PasswordFieldTemplate.lit.js\";\n\nexport enum InputType {\n  Password = \"password\",\n  Text = \"text\",\n}\n\nexport enum IconType {\n  Hide = \"hide\",\n  Show = \"show\",\n}\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-password-field</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/UDExPasswordField.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-password-field\n * @public\n */\n@customElement({\n  tag: \"udex-password-field\",\n  renderer: litRender,\n  template: PasswordFieldTemplate,\n  dependencies: [UDExTextField],\n})\n\nclass UDExPasswordField extends UI5Element {\n  /**\n   * Defines supporting text under the input field.\n   *\n   * @default \"\"\n   * @private\n   */\n  @property({ type: String, noAttribute: true, defaultValue: InputType.Password })\n    type!: InputType;\n\n  /**\n   * Defines whether the component is in disabled state.\n   * <br><br>\n   * <b>Note:</b> A disabled component is completely noninteractive.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    disabled!: boolean;\n\n  /**\n   * Defines the value of the component.\n   * <br><br>\n   * <b>Note:</b> The property is updated upon typing.\n   *\n   * @default \"\"\n   * @formEvents input\n   * @formProperty\n   * @public\n   */\n  @property({ type: String })\n    value!: string;\n\n  /**\n   * Sets the maximum number of characters available in the input field.\n   * <br><br>\n   * <b>Note:</b> This property is not compatible with the ui5-input type InputType.Number. If the ui5-input type is set to Number, the maxlength value is ignored.\n   *\n   * @public\n   */\n  @property({ validator: Integer })\n    maxlength?: number;\n\n  /**\n   * Defines label text for the input field.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    label!: string;\n\n  /**\n   * Defines asterisk for the input field's label text.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    showAsterisk!: boolean;\n\n  /**\n   * Defines the value state of the component.\n   *\n   * @default \"Standard\"\n   * @public\n   */\n\n  @property({ type: ValueState, defaultValue: ValueState.Standard })\n    valueState!: ValueState;\n\n  /**\n   * Defines supporting text under the input field.\n   *\n   * @default \"\"\n   * @public\n   */\n\n  @property({ type: String })\n    supportingText!: string;\n\n  /**\n   * Defines the inner stored show password button visibility state.\n   *\n   * @default false\n   * @public\n   */\n\n  @property({ type: Boolean })\n    showButtonEnabled!: boolean;\n\n  /**\n   * Defines the inner stored show password button icon.\n   *\n   * @default \"show\"\n   * @private\n   */\n\n  @property({ type: String, noAttribute: true, defaultValue: IconType.Show })\n    icon!: IconType;\n\n  /**\n   * Defines the inner stored show password button tooltip.\n   *\n   * @default \"\"\n   * @public\n   */\n\n  @property({ type: String })\n    showButtonTooltip!: string;\n\n  /**\n   * Defines the inner stored readonly state.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    readonly!: boolean;\n\n  /**\n   * Defines the inner stored displayonly state.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    displayonly!: boolean;\n\n  /**\n   * Defines the accessible ARIA name of the component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    accessibleName!: string;\n\n  /**\n   * Receives id (or many ids) of the elements that label the component.\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    accessibleNameRef!: string;\n\n  static i18nBundle: I18nBundle;\n\n  static async onDefine() {\n    UDExPasswordField.i18nBundle = await getI18nBundle(\"@sapudex/web-components\");\n  }\n\n  handleShowPassword(): void {\n    const isPassword = this.type === InputType.Password;\n\n    this.icon = isPassword ? IconType.Hide : IconType.Show;\n    this.type = isPassword ? InputType.Text : InputType.Password;\n  }\n\n  get passwordLabel(): string {\n    return `${this.label} ${this.showAsterisk ? \"*\" : \"\"}`;\n  }\n\n  get renderShowButton(): boolean {\n    return !this.disabled && !this.readonly && !this.displayonly && this.showButtonEnabled;\n  }\n\n  get iconButton(): IconType | null {\n    return this.renderShowButton ? this.icon : null;\n  }\n}\n\nUDExPasswordField.define();\n\nexport default UDExPasswordField;\n"]}
+{"version":3,"file":"PasswordField.js","sourceRoot":"","sources":["../src/PasswordField.ts"],"names":[],"mappings":"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","sourcesContent":["import 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 litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport UDExTextField from \"./TextField.js\";\nimport UDExValueState from \"./types/common.js\";\nimport \"@ui5/webcomponents-icons/dist/hide.js\";\nimport \"@ui5/webcomponents-icons/dist/show.js\";\n\nimport PasswordFieldTemplate from \"./generated/templates/PasswordFieldTemplate.lit.js\";\n\nexport enum UDExInputType {\n  Password = \"password\",\n  Text = \"text\",\n}\n\nexport enum UDExIconType {\n  Hide = \"hide\",\n  Show = \"show\",\n}\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-password-field</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/UDExPasswordField.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-password-field\n * @public\n */\n@customElement({\n  tag: \"udex-password-field\",\n  renderer: litRender,\n  template: PasswordFieldTemplate,\n  dependencies: [UDExTextField],\n})\n\nclass UDExPasswordField extends UI5Element {\n  /**\n   * Defines supporting text under the input field.\n   *\n   * @default \"\"\n   * @private\n   */\n  @property({ type: String, noAttribute: true })\n    type: UDExInputType = UDExInputType.Password;\n\n  /**\n   * Defines whether the component is in disabled state.\n   * <br><br>\n   * <b>Note:</b> A disabled component is completely noninteractive.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    disabled!: boolean;\n\n  /**\n   * Defines the value of the component.\n   * <br><br>\n   * <b>Note:</b> The property is updated upon typing.\n   *\n   * @default \"\"\n   * @formEvents input\n   * @formProperty\n   * @public\n   */\n  @property({ type: String })\n    value!: string;\n\n  /**\n   * Sets the maximum number of characters available in the input field.\n   * <br><br>\n   * <b>Note:</b> This property is not compatible with the ui5-input type UDExInputType.Number. If the ui5-input type is set to Number, the maxlength value is ignored.\n   *\n   * @public\n   */\n  @property({ type: Number })\n    maxlength?: number;\n\n  /**\n   * Defines label text for the input field.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    label!: string;\n\n  /**\n   * Defines asterisk for the input field's label text.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    showAsterisk!: boolean;\n\n  /**\n   * Defines the value state of the component.\n   *\n   * @default \"Standard\"\n   * @public\n   */\n\n  @property()\n    valueState: UDExValueState = UDExValueState.Standard;\n\n  /**\n   * Defines supporting text under the input field.\n   *\n   * @default \"\"\n   * @public\n   */\n\n  @property({ type: String })\n    supportingText!: string;\n\n  /**\n   * Defines the inner stored show password button visibility state.\n   *\n   * @default false\n   * @public\n   */\n\n  @property({ type: Boolean })\n    showButtonEnabled!: boolean;\n\n  /**\n   * Defines the inner stored show password button icon.\n   *\n   * @default \"show\"\n   * @private\n   */\n\n  @property({ type: String, noAttribute: true })\n    icon: UDExIconType = UDExIconType.Show;\n\n  /**\n   * Defines the inner stored show password button tooltip.\n   *\n   * @default \"\"\n   * @public\n   */\n\n  @property({ type: String })\n    showButtonTooltip!: string;\n\n  /**\n   * Defines the inner stored readonly state.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    readonly!: boolean;\n\n  /**\n   * Defines the inner stored displayonly state.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    displayonly!: boolean;\n\n  /**\n   * Defines the accessible ARIA name of the component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    accessibleName!: string;\n\n  /**\n   * Receives id (or many ids) of the elements that label the component.\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    accessibleNameRef!: string;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  handleShowPassword(): void {\n    const isPassword = this.type === UDExInputType.Password;\n\n    this.icon = isPassword ? UDExIconType.Hide : UDExIconType.Show;\n    this.type = isPassword ? UDExInputType.Text : UDExInputType.Password;\n  }\n\n  get passwordLabel(): string {\n    return `${this.label} ${this.showAsterisk ? \"*\" : \"\"}`;\n  }\n\n  get renderShowButton(): boolean {\n    return !this.disabled && !this.readonly && !this.displayonly && this.showButtonEnabled;\n  }\n\n  get iconButton(): UDExIconType | null {\n    return this.renderShowButton ? this.icon : null;\n  }\n}\n\nUDExPasswordField.define();\n\nexport default UDExPasswordField;\n"]}

package/dist/PhoneNumberField.d.ts

@@ -1,25 +1,22 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import { Country } from "./data/CountryListISO3166.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import type { Country } from "./data/CountryListISO3166.js";
 import UDExDropdown from "./Dropdown.js";
 import UDExList from "./List.js";
 import UDExButton from "./Button.js";
 import "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-up.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import type UDExValueState from "./types/common.js";
 export interface ExtendedCountriesListPhoneNumberData extends Country {
     selected?: boolean;
 }
-export declare enum OpenButtonIcon {
+export declare enum UDExOpenButtonIcon {
     iconUp = "slim-arrow-up",
     iconDown = "slim-arrow-down"
 }
-export declare enum FieldState {
-    Standard = "Standard",
-    Success = "Success",
-    Error = "Error"
-}
+export type UDExPhoneNumberFieldValueState = Exclude<UDExValueState, "Warning">;
 /**
  * @class
  *
@@ -29,6 +26,10 @@ export declare enum FieldState {
  * @public
  */
 declare class UDExPhoneNumberField extends UI5Element {
+    eventDetails: {
+        "input": void;
+        "change": void;
+    };
     /**
      * Defines label text for the textarea field.
      *
@@ -42,7 +43,7 @@ declare class UDExPhoneNumberField extends UI5Element {
      * @default "Standard"
      * @public
      */
-    fieldState: `${FieldState}`;
+    valueState: `${UDExPhoneNumberFieldValueState}`;
     /**
      * Defines supporting text under the input field.
      *
@@ -186,26 +187,23 @@ declare class UDExPhoneNumberField extends UI5Element {
     _dropdown: UDExDropdown;
     _dropdownList: UDExList;
     _handleResizeBound: ResizeObserverCallback;
-    static onDefine(): Promise<void>;
-    get countrySelectorAriaLabel(): string;
-    get countryIso(): string;
     countriesList: ExtendedCountriesListPhoneNumberData[];
     constructor();
     onEnterDOM(): void;
     onExitDOM(): void;
+    onBeforeRendering(): void;
     onAfterRendering(): void;
-    onClick(): void;
     _handleResize(): void;
     handleInput(e: InputEvent): void;
-    handleChange(): void;
+    openDropdown(): void;
     handleKeyDown: (e: KeyboardEvent) => void;
     handleKeyUp(): void;
     handleFocus(): void;
     handleClick(): void;
     handleBlur(): void;
     handleSelect(e: CustomEvent): void;
-    handleDropdownOpen(): void;
-    handleDropdownClose(): void;
+    dropdownBeforeOpen(): void;
+    dropdownBeforeClose(): void;
     autoSelectCountry(value: string): void;
     applyPhoneMask(): void;
     applyPlaceholder(): void;
@@ -222,16 +220,11 @@ declare class UDExPhoneNumberField extends UI5Element {
     } | {
         backgroundPosition: string;
     };
-    get ariaInvalid(): "true" | null;
+    get ariaInvalid(): string | null;
     get isInputReadonly(): boolean;
     get isButtonDisabled(): boolean;
     get updatedCountriesList(): ExtendedCountriesListPhoneNumberData[];
-    get valueStateTypeMappings(): {
-        Success: string;
-        Standard: string;
-        Error: string;
-        Warning: string;
-    };
+    get valueStateTypeMappings(): Record<UDExPhoneNumberFieldValueState, string>;
     get hasValueState(): boolean;
     get valueStateText(): string | undefined;
     get readOnlyStateText(): string;
@@ -239,6 +232,7 @@ declare class UDExPhoneNumberField extends UI5Element {
     get supportingTextId(): string;
     get valueStateTextId(): string;
     get readOnlyStateTextId(): string;
-    onBeforeRendering(): void;
+    get countrySelectorAriaLabel(): string;
+    get countryIso(): string;
 }
 export default UDExPhoneNumberField;

package/dist/PhoneNumberField.js

@@ -9,12 +9,11 @@ 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 litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
-import { COUNTRY_SELECT, READ_ONLY, VALUE_STATE_ERROR, VALUE_STATE_INFORMATION, VALUE_STATE_SUCCESS, VALUE_STATE_WARNING, } from "./generated/i18n/i18n-defaults.js";
+import { COUNTRY_SELECT, READ_ONLY, VALUE_STATE_ERROR, VALUE_STATE_INFORMATION, VALUE_STATE_SUCCESS, } from "./generated/i18n/i18n-defaults.js";
 import { CountryListDB } from "./data/CountryListISO3166.js";
 import UDExDropdown from "./Dropdown.js";
 import UDExList from "./List.js";
@@ -27,17 +26,12 @@ import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import PhoneNumberFieldTemplate from "./generated/templates/PhoneNumberFieldTemplate.lit.js";
 // Styles
 import PhoneNumberFieldCss from "./generated/themes/PhoneNumberField.css.js";
-export var OpenButtonIcon;
-(function (OpenButtonIcon) {
-    OpenButtonIcon["iconUp"] = "slim-arrow-up";
-    OpenButtonIcon["iconDown"] = "slim-arrow-down";
-})(OpenButtonIcon || (OpenButtonIcon = {}));
-export var FieldState;
-(function (FieldState) {
-    FieldState["Standard"] = "Standard";
-    FieldState["Success"] = "Success";
-    FieldState["Error"] = "Error";
-})(FieldState || (FieldState = {}));
+import { isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+export var UDExOpenButtonIcon;
+(function (UDExOpenButtonIcon) {
+    UDExOpenButtonIcon["iconUp"] = "slim-arrow-up";
+    UDExOpenButtonIcon["iconDown"] = "slim-arrow-down";
+})(UDExOpenButtonIcon || (UDExOpenButtonIcon = {}));
 const initialPlaceholder = "+X XXX-XXX-XXXX";
 /**
  * @class
@@ -48,17 +42,75 @@ const initialPlaceholder = "+X XXX-XXX-XXXX";
  * @public
  */
 let UDExPhoneNumberField = UDExPhoneNumberField_1 = class UDExPhoneNumberField extends UI5Element {
-    static async onDefine() {
-        UDExPhoneNumberField_1.i18nBundle = await getI18nBundle("@sapudex/web-components");
-    }
-    get countrySelectorAriaLabel() {
-        return this.accessibleName || `${UDExPhoneNumberField_1.i18nBundle.getText(COUNTRY_SELECT)} ${this.label}`.trim();
-    }
-    get countryIso() {
-        return this.selectedIso || this.autoSelectedIso;
-    }
     constructor() {
         super();
+        /**
+         * Defines label text for the textarea field.
+         *
+         * @default ""
+         * @public
+         */
+        this.label = "";
+        /**
+         * Defines the value state of the component.
+         *
+         * @default "Standard"
+         * @public
+         */
+        this.valueState = "Standard";
+        /**
+         * Defines supporting text under the input field.
+         *
+         * @default ""
+         * @public
+         */
+        this.supportingText = "";
+        /**
+         * Defines the country iso code selected by the user
+         * <br><br>
+         * Note: should be used two-letter country codes, e.g.: "DE" | "PL" | "UA" | "US"
+         *
+         * @default ""
+         * @public
+         */
+        this.selectedIso = "";
+        /**
+         * Defines the autoselected country iso code
+         *
+         * @default ""
+         * @private
+         */
+        this.autoSelectedIso = "";
+        /**
+         * Defines the value of the component.
+         *
+         * @default ""
+         */
+        this.value = "";
+        /**
+         * Defines the open button icon
+         *
+         * @private
+         */
+        this.buttonIcon = UDExOpenButtonIcon.iconDown;
+        /**
+         * Defines the open button icon
+         *
+         * @private
+         */
+        this._dropdownExpanded = false;
+        /**
+         * Defines the phone format of the input
+         *
+         * @private
+         */
+        this.phoneFormat = initialPlaceholder;
+        /**
+         * Receives id (or many ids) of the elements that label the component.
+         * @default ""
+         * @public
+         */
+        this.accessibleNameRef = "";
         /**
          * Defines the allowed keys for the input
          *
@@ -77,13 +129,16 @@ let UDExPhoneNumberField = UDExPhoneNumberField_1 = class UDExPhoneNumberField e
         ];
         this.countriesList = CountryListDB;
         this.handleKeyDown = (e) => {
-            const isKeyAllowed = e.key.match(/\d/)
+            const isKeyAllowed = e.key && (e.key.match(/\d/)
                 || this.allowedKeys.includes(e.key)
                 || e.metaKey
-                || e.ctrlKey;
+                || e.ctrlKey);
             if (!isKeyAllowed) {
                 e.preventDefault();
             }
+            if (isEnter(e)) {
+                this.fireDecoratorEvent("change");
+            }
             e.stopPropagation();
             this.previousKey = e.key;
         };
@@ -95,6 +150,14 @@ let UDExPhoneNumberField = UDExPhoneNumberField_1 = class UDExPhoneNumberField e
     onExitDOM() {
         ResizeHandler.deregister(this, this._handleResizeBound);
     }
+    onBeforeRendering() {
+        this.applyPlaceholder();
+        if (this.blockedCountryCodes?.length) {
+            const blockedCountryCodesArray = this.blockedCountryCodes.split(",").map(code => code.trim().toUpperCase());
+            this.countriesList = this.countriesList
+                .filter(country => !blockedCountryCodesArray?.includes(country.iso.toUpperCase()));
+        }
+    }
     onAfterRendering() {
         this._dropdown = this.getDropdown();
         this._dropdownList = this.getDropdownList();
@@ -102,19 +165,6 @@ let UDExPhoneNumberField = UDExPhoneNumberField_1 = class UDExPhoneNumberField e
             this._dropdownList.focusSelectedItem();
         }
     }
-    onClick() {
-        if (this.isButtonDisabled) {
-            return;
-        }
-        const button = this.getButton();
-        const dropdown = this.getDropdown();
-        if (dropdown.open) {
-            dropdown.onClose();
-        }
-        else {
-            dropdown.onOpen(button);
-        }
-    }
     _handleResize() {
         this._dropdown.style.setProperty("--udex-dropdown-pane-width", `${this.offsetWidth}px`);
     }
@@ -128,10 +178,11 @@ let UDExPhoneNumberField = UDExPhoneNumberField_1 = class UDExPhoneNumberField e
             this.autoSelectedIso = "";
             this.selectedIso = "";
         }
-        this.fireEvent("input");
     }
-    handleChange() {
-        this.fireEvent("change");
+    openDropdown() {
+        if (!this.isButtonDisabled) {
+            this._dropdown.open = !this._dropdown.open;
+        }
     }
     handleKeyUp() {
         if (this.isInputReadonly) {
@@ -166,22 +217,22 @@ let UDExPhoneNumberField = UDExPhoneNumberField_1 = class UDExPhoneNumberField e
             this.value = "";
         }
         if (!this.isInputReadonly) {
-            this.fireEvent("change");
+            this.fireDecoratorEvent("change");
         }
     }
     handleSelect(e) {
-        const dropdown = this.getDropdown();
-        dropdown.onClose();
+        this._dropdown.open = false;
         this.selectedIso = e.detail.item.id;
         this.applyPhoneMask();
         this.getInputField().focus();
+        this.fireDecoratorEvent("change");
     }
-    handleDropdownOpen() {
-        this.buttonIcon = OpenButtonIcon.iconUp;
+    dropdownBeforeOpen() {
+        this.buttonIcon = UDExOpenButtonIcon.iconUp;
         this._dropdownExpanded = true;
     }
-    handleDropdownClose() {
-        this.buttonIcon = OpenButtonIcon.iconDown;
+    dropdownBeforeClose() {
+        this.buttonIcon = UDExOpenButtonIcon.iconDown;
         this._dropdownExpanded = false;
     }
     autoSelectCountry(value) {
@@ -275,7 +326,7 @@ let UDExPhoneNumberField = UDExPhoneNumberField_1 = class UDExPhoneNumberField e
         return { "backgroundPosition": `${selectedCountry.flagX} ${selectedCountry.flagY}` };
     }
     get ariaInvalid() {
-        return this.fieldState === FieldState.Error ? "true" : null;
+        return this.valueState === "Error" ? "true" : null;
     }
     get isInputReadonly() {
         return this.readonly || this.displayonly;
@@ -299,14 +350,13 @@ let UDExPhoneNumberField = UDExPhoneNumberField_1 = class UDExPhoneNumberField e
             "Success": UDExPhoneNumberField_1.i18nBundle.getText(VALUE_STATE_SUCCESS),
             "Standard": UDExPhoneNumberField_1.i18nBundle.getText(VALUE_STATE_INFORMATION),
             "Error": UDExPhoneNumberField_1.i18nBundle.getText(VALUE_STATE_ERROR),
-            "Warning": UDExPhoneNumberField_1.i18nBundle.getText(VALUE_STATE_WARNING),
         };
     }
     get hasValueState() {
-        return this.fieldState !== FieldState.Standard;
+        return this.valueState !== "Standard";
     }
     get valueStateText() {
-        return this.fieldState !== FieldState.Standard ? this.valueStateTypeMappings[this.fieldState] : undefined;
+        return this.valueState !== "Standard" ? this.valueStateTypeMappings[this.valueState] : undefined;
     }
     get readOnlyStateText() {
         return UDExPhoneNumberField_1.i18nBundle.getText(READ_ONLY);
@@ -323,23 +373,21 @@ let UDExPhoneNumberField = UDExPhoneNumberField_1 = class UDExPhoneNumberField e
     get readOnlyStateTextId() {
         return this.readonly ? `${this._id}-stateReadOnlyDesc` : "";
     }
-    onBeforeRendering() {
-        this.applyPlaceholder();
-        if (this.blockedCountryCodes?.length) {
-            const blockedCountryCodesArray = this.blockedCountryCodes.split(",").map(code => code.trim().toUpperCase());
-            this.countriesList = this.countriesList
-                .filter(country => !blockedCountryCodesArray?.includes(country.iso.toUpperCase()));
-        }
+    get countrySelectorAriaLabel() {
+        return this.accessibleName || `${UDExPhoneNumberField_1.i18nBundle.getText(COUNTRY_SELECT)} ${this.label}`.trim();
+    }
+    get countryIso() {
+        return this.selectedIso || this.autoSelectedIso;
     }
 };
 __decorate([
-    property({ type: String, defaultValue: "" })
+    property({ type: String })
 ], UDExPhoneNumberField.prototype, "label", void 0);
 __decorate([
-    property({ type: FieldState, defaultValue: FieldState.Standard })
-], UDExPhoneNumberField.prototype, "fieldState", void 0);
+    property()
+], UDExPhoneNumberField.prototype, "valueState", void 0);
 __decorate([
-    property({ type: String, defaultValue: "" })
+    property({ type: String })
 ], UDExPhoneNumberField.prototype, "supportingText", void 0);
 __decorate([
     property({ type: Boolean })
@@ -354,10 +402,10 @@ __decorate([
     property({ type: Boolean })
 ], UDExPhoneNumberField.prototype, "displayonly", void 0);
 __decorate([
-    property({ type: String, defaultValue: "" })
+    property({ type: String })
 ], UDExPhoneNumberField.prototype, "selectedIso", void 0);
 __decorate([
-    property({ type: String, noAttribute: true, defaultValue: "" })
+    property({ type: String, noAttribute: true })
 ], UDExPhoneNumberField.prototype, "autoSelectedIso", void 0);
 __decorate([
     property({ type: String })
@@ -366,31 +414,31 @@ __decorate([
     property({ type: String })
 ], UDExPhoneNumberField.prototype, "height", void 0);
 __decorate([
-    property({ type: String, defaultValue: "" })
+    property({ type: String })
 ], UDExPhoneNumberField.prototype, "value", void 0);
 __decorate([
-    property({ type: String, noAttribute: true, defaultValue: OpenButtonIcon.iconDown })
+    property({ type: String, noAttribute: true })
 ], UDExPhoneNumberField.prototype, "buttonIcon", void 0);
 __decorate([
     property({ type: Boolean, noAttribute: true })
 ], UDExPhoneNumberField.prototype, "_dropdownExpanded", void 0);
 __decorate([
-    property({ type: String, defaultValue: initialPlaceholder, noAttribute: true })
+    property({ type: String, noAttribute: true })
 ], UDExPhoneNumberField.prototype, "phoneFormat", void 0);
 __decorate([
-    property({ validator: Integer })
+    property({ type: Number })
 ], UDExPhoneNumberField.prototype, "maxlength", void 0);
 __decorate([
     property()
 ], UDExPhoneNumberField.prototype, "accessibleName", void 0);
 __decorate([
-    property({ defaultValue: "" })
+    property()
 ], UDExPhoneNumberField.prototype, "accessibleNameRef", void 0);
 __decorate([
-    property({ type: String, multiple: true, noAttribute: true })
+    property({ type: String, noAttribute: true })
 ], UDExPhoneNumberField.prototype, "allowedKeys", void 0);
 __decorate([
-    property({ type: String, multiple: false, noAttribute: true })
+    property({ type: String, noAttribute: true })
 ], UDExPhoneNumberField.prototype, "previousKey", void 0);
 __decorate([
     property({ type: Boolean })
@@ -398,6 +446,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], UDExPhoneNumberField.prototype, "_isTouched", void 0);
+__decorate([
+    i18n("@sapudex/web-components")
+], UDExPhoneNumberField, "i18nBundle", void 0);
 UDExPhoneNumberField = UDExPhoneNumberField_1 = __decorate([
     customElement({
         tag: "udex-phone-number-field",
@@ -418,14 +469,14 @@ UDExPhoneNumberField = UDExPhoneNumberField_1 = __decorate([
        * @public
        */
     ,
-    event("input")
+    event("input", { bubbles: true })
     /**
        * Fired when the input operation has finished by pressing Enter or on focusout.
        *
        * @public
        */
     ,
-    event("change")
+    event("change", { bubbles: true })
 ], UDExPhoneNumberField);
 UDExPhoneNumberField.define();
 export default UDExPhoneNumberField;