@sapudex/web-components 2.1.0 → 2.1.1

package/cypress/specs/Upload.cy.tsx

@@ -33,7 +33,7 @@ const singleUpload = <UDExUpload
   uploadButtonText="Choose file(s)"
   uploadTitle="Upload title"
   multiple={false}
-  errorText="Only one attachment is allowed">
+  supportingText="Only one attachment is allowed">
     <UDExUploadItem fileName="File1" uploadState="Uploading" uploadPercentage={33}></UDExUploadItem>
 </UDExUpload>
 
@@ -86,7 +86,7 @@ describe("Upload", () => {
       .find("#fileUploader").click()
 
      cy.get("#singleUpload").shadow()
-      .find(".udex-upload__error").should("have.text", "Only one attachment is allowed")
+      .find(".udex-upload__supporting-error-text").should("have.text", "Only one attachment is allowed")
     });
   })
 
@@ -100,7 +100,7 @@ describe("Upload", () => {
       uploadTitle="Upload title"
       multiple={false}
       onFileDelete={handleDelete}
-      errorText="Only one attachment is allowed">
+      supportingText="Only one attachment is allowed">
           <UDExUploadItem fileName="File1" uploadState="Uploading" uploadPercentage={33}></UDExUploadItem>
       </UDExUpload>
     );

package/dist/Checkbox.d.ts

@@ -1,6 +1,9 @@
 import CheckBox from "@ui5/webcomponents/dist/CheckBox.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import UDExCheckboxValueState from "./types/Checkbox.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import WrappingType from "@ui5/webcomponents/dist/types/WrappingType.js";
+import type Label from "@ui5/webcomponents/dist/Label.js";
 /**
  * @class
  *
@@ -29,8 +32,22 @@ declare class UDExCheckbox extends CheckBox {
      */
     /** @ts-expect-error */
     valueState: `${UDExCheckboxValueState}`;
+    /**
+     * Defines whether the component text wraps when there is not enough space..
+     *
+     * @default "None"
+     * @public
+     */
+    wrappingType: `${WrappingType}`;
     static i18nBundle: I18nBundle;
+    _handleResizeBound: ResizeObserverCallback;
+    constructor();
+    onEnterDOM(): void;
+    onExitDOM(): void;
     valueStateMappings(): Record<string, string>;
+    _handleResize(): void;
     get valueStateText(): string | undefined;
+    get label(): Label | null;
+    get labelHeight(): number;
 }
 export default UDExCheckbox;

package/dist/Checkbox.js

@@ -12,8 +12,11 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import { VALUE_STATE_ERROR, VALUE_STATE_SUCCESS } from "./generated/i18n/i18n-defaults.js";
 import UDExCheckboxValueState from "./types/Checkbox.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 // Styles
 import CheckboxCss from "./generated/themes/Checkbox.css.js";
+import WrappingType from "@ui5/webcomponents/dist/types/WrappingType.js";
+const LABEL_TEXT_HEIGHT = 18.5;
 /**
  * @class
  *
@@ -35,7 +38,7 @@ import CheckboxCss from "./generated/themes/Checkbox.css.js";
  */
 let UDExCheckbox = UDExCheckbox_1 = class UDExCheckbox extends CheckBox {
     constructor() {
-        super(...arguments);
+        super();
         /**
          * Defines the value state of the component.
          *
@@ -43,6 +46,20 @@ let UDExCheckbox = UDExCheckbox_1 = class UDExCheckbox extends CheckBox {
          * @public
          */
         this.valueState = UDExCheckboxValueState.None;
+        /**
+         * Defines whether the component text wraps when there is not enough space..
+         *
+         * @default "None"
+         * @public
+         */
+        this.wrappingType = WrappingType.None;
+        this._handleResizeBound = this._handleResize.bind(this);
+    }
+    onEnterDOM() {
+        ResizeHandler.register(this, this._handleResizeBound);
+    }
+    onExitDOM() {
+        ResizeHandler.deregister(this, this._handleResizeBound);
     }
     valueStateMappings() {
         return {
@@ -50,16 +67,34 @@ let UDExCheckbox = UDExCheckbox_1 = class UDExCheckbox extends CheckBox {
             [UDExCheckboxValueState.Success]: UDExCheckbox_1.i18nBundle.getText(VALUE_STATE_SUCCESS),
         };
     }
+    _handleResize() {
+        const labelOverflows = this.labelHeight > LABEL_TEXT_HEIGHT;
+        if (labelOverflows && this.wrappingType === WrappingType.Normal) {
+            this.label?.classList.add("udex-checkbox__label-multiline");
+        }
+        else {
+            this.label?.classList.remove("udex-checkbox__label-multiline");
+        }
+    }
     get valueStateText() {
         if (this.valueState !== UDExCheckboxValueState.None) {
             return this.valueStateMappings()[this.valueState];
         }
     }
+    get label() {
+        return this.shadowRoot.querySelector("[ui5-label]");
+    }
+    get labelHeight() {
+        return this.label?.getBoundingClientRect().height || 0;
+    }
 };
 __decorate([
     property()
     /** @ts-expect-error */
 ], UDExCheckbox.prototype, "valueState", void 0);
+__decorate([
+    property()
+], UDExCheckbox.prototype, "wrappingType", void 0);
 __decorate([
     i18n("@sapudex/web-components")
 ], UDExCheckbox, "i18nBundle", void 0);

package/dist/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../src/Checkbox.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,QAAQ,MAAM,qCAAqC,CAAC;AAC3D,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AAE3F,OAAO,sBAAsB,MAAM,qBAAqB,CAAC;AAEzD,SAAS;AACT,OAAO,WAAW,MAAM,oCAAoC,CAAC;AAE7D;;;;;;;;;;;;;;;;;;GAkBG;AAOH,IAAM,YAAY,oBAAlB,MAAM,YAAa,SAAQ,QAAQ;IAAnC;;QACE;;;;;WAKG;QAGD,eAAU,GAAgC,sBAAsB,CAAC,IAAI,CAAC;IAiB1E,CAAC;IAZC,kBAAkB;QAChB,OAAO;YACL,CAAC,sBAAsB,CAAC,KAAK,CAAC,EAAE,cAAY,CAAC,UAAU,CAAC,OAAO,CAAC,iBAAiB,CAAC;YAClF,CAAC,sBAAsB,CAAC,OAAO,CAAC,EAAE,cAAY,CAAC,UAAU,CAAC,OAAO,CAAC,mBAAmB,CAAC;SACvF,CAAC;IACJ,CAAC;IAED,IAAI,cAAc;QAChB,IAAI,IAAI,CAAC,UAAU,KAAK,sBAAsB,CAAC,IAAI,EAAE,CAAC;YACpD,OAAO,IAAI,CAAC,kBAAkB,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACpD,CAAC;IACH,CAAC;CACF,CAAA;AAjBG;IAFD,QAAQ,EAAE;IACX,uBAAuB;gDACiD;AAGjE;IADN,IAAI,CAAC,yBAAyB,CAAC;sCACF;AAZ1B,YAAY;IANjB,aAAa,CAAC;QACb,GAAG,EAAE,eAAe;QACpB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAC;KACvC,CAAC;GAEI,YAAY,CA0BjB;AAED,YAAY,CAAC,MAAM,EAAE,CAAC;AAEtB,eAAe,YAAY,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport CheckBox from \"@ui5/webcomponents/dist/CheckBox.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport { VALUE_STATE_ERROR, VALUE_STATE_SUCCESS } from \"./generated/i18n/i18n-defaults.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport UDExCheckboxValueState from \"./types/Checkbox.js\";\n\n// Styles\nimport CheckboxCss from \"./generated/themes/Checkbox.css.js\";\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-checkbox</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Checkbox.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends CheckBox\n * @tagname udex-checkbox\n * @public\n */\n@customElement({\n  tag: \"udex-checkbox\",\n  renderer: jsxRenderer,\n  styles: [CheckBox.styles, CheckboxCss],\n})\n\nclass UDExCheckbox extends CheckBox {\n  /**\n   * Defines the value state of the component.\n   *\n   * @default \"None\"\n   * @public\n   */\n  @property()\n  /** @ts-expect-error */\n    valueState: `${UDExCheckboxValueState}` = UDExCheckboxValueState.None;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  valueStateMappings(): Record<string, string> {\n    return {\n      [UDExCheckboxValueState.Error]: UDExCheckbox.i18nBundle.getText(VALUE_STATE_ERROR),\n      [UDExCheckboxValueState.Success]: UDExCheckbox.i18nBundle.getText(VALUE_STATE_SUCCESS),\n    };\n  }\n\n  get valueStateText(): string | undefined {\n    if (this.valueState !== UDExCheckboxValueState.None) {\n      return this.valueStateMappings()[this.valueState];\n    }\n  }\n}\n\nUDExCheckbox.define();\n\nexport default UDExCheckbox;\n"]}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../src/Checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport CheckBox from \"@ui5/webcomponents/dist/CheckBox.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport { VALUE_STATE_ERROR, VALUE_STATE_SUCCESS } from \"./generated/i18n/i18n-defaults.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport UDExCheckboxValueState from \"./types/Checkbox.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\n\n// Styles\nimport CheckboxCss from \"./generated/themes/Checkbox.css.js\";\nimport WrappingType from \"@ui5/webcomponents/dist/types/WrappingType.js\";\nimport type Label from \"@ui5/webcomponents/dist/Label.js\";\n\nconst LABEL_TEXT_HEIGHT = 18.5;\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-checkbox</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Checkbox.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends CheckBox\n * @tagname udex-checkbox\n * @public\n */\n@customElement({\n  tag: \"udex-checkbox\",\n  renderer: jsxRenderer,\n  styles: [CheckBox.styles, CheckboxCss],\n})\n\nclass UDExCheckbox extends CheckBox {\n  /**\n   * Defines the value state of the component.\n   *\n   * @default \"None\"\n   * @public\n   */\n  @property()\n  /** @ts-expect-error */\n    valueState: `${UDExCheckboxValueState}` = UDExCheckboxValueState.None;\n\n  /**\n   * Defines whether the component text wraps when there is not enough space..\n   *\n   * @default \"None\"\n   * @public\n   */\n  @property()\n    wrappingType: `${WrappingType}` = WrappingType.None;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  _handleResizeBound: ResizeObserverCallback;\n\n  constructor() {\n    super();\n    this._handleResizeBound = this._handleResize.bind(this);\n  }\n\n  onEnterDOM(): void {\n    ResizeHandler.register(this, this._handleResizeBound);\n  }\n\n  onExitDOM(): void {\n    ResizeHandler.deregister(this, this._handleResizeBound);\n  }\n\n  valueStateMappings(): Record<string, string> {\n    return {\n      [UDExCheckboxValueState.Error]: UDExCheckbox.i18nBundle.getText(VALUE_STATE_ERROR),\n      [UDExCheckboxValueState.Success]: UDExCheckbox.i18nBundle.getText(VALUE_STATE_SUCCESS),\n    };\n  }\n\n  _handleResize(): void {\n    const labelOverflows = this.labelHeight > LABEL_TEXT_HEIGHT;\n\n    if (labelOverflows && this.wrappingType === WrappingType.Normal) {\n      this.label?.classList.add(\"udex-checkbox__label-multiline\");\n    } else {\n      this.label?.classList.remove(\"udex-checkbox__label-multiline\");\n    }\n  }\n\n  get valueStateText(): string | undefined {\n    if (this.valueState !== UDExCheckboxValueState.None) {\n      return this.valueStateMappings()[this.valueState];\n    }\n  }\n\n  get label(): Label | null {\n    return this.shadowRoot!.querySelector<Label>(\"[ui5-label]\");\n  }\n\n  get labelHeight(): number {\n    return this.label?.getBoundingClientRect().height || 0;\n  }\n}\n\nUDExCheckbox.define();\n\nexport default UDExCheckbox;\n"]}

package/dist/Link.d.ts

@@ -1,4 +1,4 @@
-import UI5Link from "@ui5/webcomponents/dist/Link.js";
+import Link from "@ui5/webcomponents/dist/Link.js";
 export type AttributeValuePair = {
     attribute: string;
     value: string;
@@ -17,12 +17,11 @@ export type AttributeValuePair = {
  * <code>import "@sapudex/web-components/dist/Link.js";</code>
  *
  * @constructor
- * @author SAP SE
- * @extends UI5Link
+ * @extends Link
  * @tagname udex-link
  * @public
  */
-declare class UDExLink extends UI5Link {
+declare class UDExLink extends Link {
     onEnterDOM(): void;
     _setCustomAttributes(attributes: AttributeValuePair[]): void;
 }

package/dist/Link.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
-import UI5Link from "@ui5/webcomponents/dist/Link.js";
+import Link from "@ui5/webcomponents/dist/Link.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 // Styles
 import LinkCss from "./generated/themes/Link.css.js";
@@ -24,12 +24,11 @@ import LinkCss from "./generated/themes/Link.css.js";
  * <code>import "@sapudex/web-components/dist/Link.js";</code>
  *
  * @constructor
- * @author SAP SE
- * @extends UI5Link
+ * @extends Link
  * @tagname udex-link
  * @public
  */
-let UDExLink = class UDExLink extends UI5Link {
+let UDExLink = class UDExLink extends Link {
     onEnterDOM() {
         if (isDesktop()) {
             this.setAttribute("desktop", "");
@@ -46,7 +45,7 @@ UDExLink = __decorate([
     customElement({
         tag: "udex-link",
         renderer: jsxRenderer,
-        styles: [UI5Link.styles, LinkCss],
+        styles: [Link.styles, LinkCss],
     })
 ], UDExLink);
 UDExLink.define();

package/dist/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sourceRoot":"","sources":["../src/Link.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,OAAO,MAAM,iCAAiC,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AAEnE,SAAS;AACT,OAAO,OAAO,MAAM,gCAAgC,CAAC;AAOrD;;;;;;;;;;;;;;;;;;GAkBG;AAOH,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,OAAO;IAC5B,UAAU;QACR,IAAI,SAAS,EAAE,EAAE,CAAC;YAChB,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;QACnC,CAAC;IACH,CAAC;IAED,oBAAoB,CAAC,UAAgC;QACnD,IAAI,UAAU,EAAE,CAAC;YACf,MAAM,IAAI,GAAG,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC,GAAG,CAAE,CAAC;YAClD,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QAC5E,CAAC;IACH,CAAC;CACF,CAAA;AAbK,QAAQ;IANb,aAAa,CAAC;QACb,GAAG,EAAE,WAAW;QAChB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,OAAO,CAAC;KAClC,CAAC;GAEI,QAAQ,CAab;AAED,QAAQ,CAAC,MAAM,EAAE,CAAC;AAElB,eAAe,QAAQ,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport UI5Link from \"@ui5/webcomponents/dist/Link.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\n\n// Styles\nimport LinkCss from \"./generated/themes/Link.css.js\";\n\nexport type AttributeValuePair = {\n  attribute: string,\n  value: string\n};\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-link</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Link.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Link\n * @tagname udex-link\n * @public\n */\n@customElement({\n  tag: \"udex-link\",\n  renderer: jsxRenderer,\n  styles: [UI5Link.styles, LinkCss],\n})\n\nclass UDExLink extends UI5Link {\n  onEnterDOM(): void {\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n  }\n\n  _setCustomAttributes(attributes: AttributeValuePair[]) {\n    if (attributes) {\n      const link = this.shadowRoot!.querySelector(\"a\")!;\n      attributes.forEach(pair => link.setAttribute(pair.attribute, pair.value));\n    }\n  }\n}\n\nUDExLink.define();\n\nexport default UDExLink;\n"]}
+{"version":3,"file":"Link.js","sourceRoot":"","sources":["../src/Link.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AAEnE,SAAS;AACT,OAAO,OAAO,MAAM,gCAAgC,CAAC;AAOrD;;;;;;;;;;;;;;;;;GAiBG;AAOH,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,IAAI;IACzB,UAAU;QACR,IAAI,SAAS,EAAE,EAAE,CAAC;YAChB,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;QACnC,CAAC;IACH,CAAC;IAED,oBAAoB,CAAC,UAAgC;QACnD,IAAI,UAAU,EAAE,CAAC;YACf,MAAM,IAAI,GAAG,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC,GAAG,CAAE,CAAC;YAClD,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QAC5E,CAAC;IACH,CAAC;CACF,CAAA;AAbK,QAAQ;IANb,aAAa,CAAC;QACb,GAAG,EAAE,WAAW;QAChB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC;KAC/B,CAAC;GAEI,QAAQ,CAab;AAED,QAAQ,CAAC,MAAM,EAAE,CAAC;AAElB,eAAe,QAAQ,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport Link from \"@ui5/webcomponents/dist/Link.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\n\n// Styles\nimport LinkCss from \"./generated/themes/Link.css.js\";\n\nexport type AttributeValuePair = {\n  attribute: string,\n  value: string\n};\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-link</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Link.js\";</code>\n *\n * @constructor\n * @extends Link\n * @tagname udex-link\n * @public\n */\n@customElement({\n  tag: \"udex-link\",\n  renderer: jsxRenderer,\n  styles: [Link.styles, LinkCss],\n})\n\nclass UDExLink extends Link {\n  onEnterDOM(): void {\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n  }\n\n  _setCustomAttributes(attributes: AttributeValuePair[]) {\n    if (attributes) {\n      const link = this.shadowRoot!.querySelector(\"a\")!;\n      attributes.forEach(pair => link.setAttribute(pair.attribute, pair.value));\n    }\n  }\n}\n\nUDExLink.define();\n\nexport default UDExLink;\n"]}

package/dist/PasswordField.d.ts

@@ -11,6 +11,10 @@ export declare enum UDExIconType {
     Hide = "hide",
     Show = "show"
 }
+export declare enum UDExPasswordFieldAutoComplete {
+    On = "on",
+    Off = "off"
+}
 /**
  * @class
  *
@@ -37,6 +41,12 @@ declare class UDExPasswordField extends UI5Element {
      * @private
      */
     type: UDExInputType;
+    /**
+     * Defines the behaviour of autocomplete.
+     *
+     * @public
+     */
+    autocomplete: `${UDExPasswordFieldAutoComplete}`;
     /**
      * Defines whether the component is in disabled state.
      * <br><br>

package/dist/PasswordField.js

@@ -24,6 +24,11 @@ export var UDExIconType;
     UDExIconType["Hide"] = "hide";
     UDExIconType["Show"] = "show";
 })(UDExIconType || (UDExIconType = {}));
+export var UDExPasswordFieldAutoComplete;
+(function (UDExPasswordFieldAutoComplete) {
+    UDExPasswordFieldAutoComplete["On"] = "on";
+    UDExPasswordFieldAutoComplete["Off"] = "off";
+})(UDExPasswordFieldAutoComplete || (UDExPasswordFieldAutoComplete = {}));
 /**
  * @class
  *
@@ -52,6 +57,12 @@ let UDExPasswordField = class UDExPasswordField extends UI5Element {
          * @private
          */
         this.type = UDExInputType.Password;
+        /**
+         * Defines the behaviour of autocomplete.
+         *
+         * @public
+         */
+        this.autocomplete = "off";
         /**
          * Defines the value state of the component.
          *
@@ -85,6 +96,9 @@ let UDExPasswordField = class UDExPasswordField extends UI5Element {
 __decorate([
     property({ type: String, noAttribute: true })
 ], UDExPasswordField.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], UDExPasswordField.prototype, "autocomplete", void 0);
 __decorate([
     property({ type: Boolean })
 ], UDExPasswordField.prototype, "disabled", void 0);

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 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"]}
+{"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\nexport enum UDExPasswordFieldAutoComplete {\n  On = \"on\",\n  Off = \"off\",\n}\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 the behaviour of autocomplete.\n   *\n   * @public\n   */\n  @property({ type: String })\n    autocomplete: `${UDExPasswordFieldAutoComplete}` = \"off\";\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

@@ -204,6 +204,7 @@ declare class UDExPhoneNumberField extends UI5Element {
     handleSelect(e: CustomEvent): void;
     dropdownBeforeOpen(): void;
     dropdownBeforeClose(): void;
+    calculateMaxLength(prefix: string, mask: string): number;
     autoSelectCountry(value: string): void;
     applyPhoneMask(): void;
     applyPlaceholder(): void;

package/dist/PhoneNumberField.js

@@ -33,6 +33,10 @@ export var UDExOpenButtonIcon;
     UDExOpenButtonIcon["iconDown"] = "slim-arrow-down";
 })(UDExOpenButtonIcon || (UDExOpenButtonIcon = {}));
 const initialPlaceholder = "+X XXX-XXX-XXXX";
+/**
+ * Maximum number of possible digits based on international standard https://en.wikipedia.org/wiki/E.164
+ */
+const digitsLimit = 15;
 /**
  * @class
  *
@@ -235,6 +239,12 @@ let UDExPhoneNumberField = UDExPhoneNumberField_1 = class UDExPhoneNumberField e
         this.buttonIcon = UDExOpenButtonIcon.iconDown;
         this._dropdownExpanded = false;
     }
+    calculateMaxLength(prefix, mask) {
+        const prefixNonDigitCount = prefix.replace(/[\d]/g, "").length;
+        const maskNonDigitCount = mask.replace(/X/g, "").length;
+        const maxLength = digitsLimit + prefixNonDigitCount + maskNonDigitCount;
+        return maxLength;
+    }
     autoSelectCountry(value) {
         const countryToSelect = this.updatedCountriesList.find(country => {
             const valuePhonePrefix = value.substring(0, country.phonePrefix.length);
@@ -244,7 +254,7 @@ let UDExPhoneNumberField = UDExPhoneNumberField_1 = class UDExPhoneNumberField e
             this.autoSelectedIso = countryToSelect.iso;
         }
         if (this.selectedPhonePrefix && this.selectedPlaceholder) {
-            this.maxlength = this.selectedPhonePrefix.length + this.selectedPlaceholder.length;
+            this.maxlength = this.calculateMaxLength(this.selectedPhonePrefix, this.selectedPlaceholder);
         }
     }
     applyPhoneMask() {
@@ -256,6 +266,7 @@ let UDExPhoneNumberField = UDExPhoneNumberField_1 = class UDExPhoneNumberField e
         if (isNewPrefixEntered) {
             return;
         }
+        const maskLength = this.selectedPhonePrefix.length + this.selectedPlaceholder.length;
         const mask = this.selectedPhonePrefix + this.selectedPlaceholder;
         const maskSymbols = [" ", "-", "(", ")"];
         const valueWithMask = this.value.split("").map((char, index) => {
@@ -270,6 +281,9 @@ let UDExPhoneNumberField = UDExPhoneNumberField_1 = class UDExPhoneNumberField e
             }
             return char;
         }).join("");
+        if (this.value.length >= maskLength) {
+            return;
+        }
         this.value = valueWithMask;
         if (this.value.length > this.maxlength) {
             this.value = this.value.substring(0, this.maxlength);

package/dist/PhoneNumberField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneNumberField.js","sourceRoot":"","sources":["../src/PhoneNumberField.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 event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport {\n  COUNTRY_SELECT, READ_ONLY, VALUE_STATE_ERROR, VALUE_STATE_INFORMATION, VALUE_STATE_SUCCESS,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport type { Country } from \"./data/CountryListISO3166.js\";\nimport { CountryListDB } from \"./data/CountryListISO3166.js\";\nimport UDExDropdown from \"./Dropdown.js\";\nimport UDExList from \"./List.js\";\nimport UDExListItem from \"./ListItem.js\";\nimport UDExButton from \"./Button.js\";\nimport UDExStatusMessage from \"./StatusMessage.js\";\n\nimport \"@ui5/webcomponents/dist/Icon.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-up.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-down.js\";\n\nimport PhoneNumberFieldTemplate from \"./generated/templates/PhoneNumberFieldTemplate.lit.js\";\nimport type UDExValueState from \"./types/common.js\";\n\n// Styles\nimport PhoneNumberFieldCss from \"./generated/themes/PhoneNumberField.css.js\";\nimport { isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\n\nexport interface ExtendedCountriesListPhoneNumberData extends Country {\n  selected?: boolean;\n}\n\nexport enum UDExOpenButtonIcon {\n  iconUp = \"slim-arrow-up\",\n  iconDown = \"slim-arrow-down\",\n}\n\nexport type UDExPhoneNumberFieldValueState = Exclude<UDExValueState, \"Warning\">\n\nconst initialPlaceholder: string = \"+X XXX-XXX-XXXX\";\n\n/**\n * @class\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-phone-number-field\n * @public\n */\n@customElement({\n  tag: \"udex-phone-number-field\",\n  renderer: litRender,\n  styles: PhoneNumberFieldCss,\n  template: PhoneNumberFieldTemplate,\n  dependencies: [\n    UDExDropdown,\n    UDExList,\n    UDExListItem,\n    UDExButton,\n    UDExStatusMessage,\n  ],\n})\n/**\n   * Fired when the value of the component changes at each keystroke.\n   *\n   * @public\n   */\n@event(\"input\", { bubbles: true })\n/**\n   * Fired when the input operation has finished by pressing Enter or on focusout.\n   *\n   * @public\n   */\n@event(\"change\", { bubbles: true })\nclass UDExPhoneNumberField extends UI5Element {\n  eventDetails!: {\n    \"input\": void,\n    \"change\": void,\n  };\n  /**\n   * Defines label text for the textarea field.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    label: string = \"\";\n\n  /**\n   * Defines the value state of the component.\n   *\n   * @default \"Standard\"\n   * @public\n   */\n  @property()\n    valueState: `${UDExPhoneNumberFieldValueState}` = \"Standard\";\n\n  /**\n   * Defines supporting text under the input field.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    supportingText: string = \"\";\n\n  /**\n   * Defines whether the component is required.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    required!: boolean;\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 whether the component is read-only.\n   * <br><br>\n   * <b>Note:</b> A read-only component is not editable,\n   * but still provides visual feedback upon user interaction.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    readonly!: boolean;\n\n  /**\n   * Defines whether the component is display-only.\n   * <br><br>\n   * <b>Note:</b> A display-only component is not editable,\n   * but still provides visual feedback upon user interaction, input border is not visible.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    displayonly!: boolean;\n\n  /**\n   * Defines the country iso code selected by the user\n   * <br><br>\n   * Note: should be used two-letter country codes, e.g.: \"DE\" | \"PL\" | \"UA\" | \"US\"\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    selectedIso: string = \"\";\n\n  /**\n   * Defines the autoselected country iso code\n   *\n   * @default \"\"\n   * @private\n   */\n  @property({ type: String, noAttribute: true })\n    autoSelectedIso: string = \"\";\n\n  /**\n   * Allows to define the list of blocked country.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    blockedCountryCodes?: string;\n\n  /**\n   * Allows control over the height.\n   *\n   * @public\n   */\n  @property({ type: String })\n    height?: string;\n\n  /**\n   * Defines the value of the component.\n   *\n   * @default \"\"\n   */\n  @property({ type: String })\n    value: string = \"\";\n\n  /**\n   * Defines the open button icon\n   *\n   * @private\n   */\n  @property({ type: String, noAttribute: true })\n    buttonIcon: string = UDExOpenButtonIcon.iconDown;\n\n  /**\n   * Defines the open button icon\n   *\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    _dropdownExpanded: boolean = false;\n\n  /**\n   * Defines the phone format of the input\n   *\n   * @private\n   */\n  @property({ type: String, noAttribute: true })\n    phoneFormat: string = initialPlaceholder;\n\n  /**\n   * Defines the maxlength of the input\n   *\n   * @private\n   */\n  @property({ type: Number })\n    maxlength!: number;\n\n  /**\n   * Defines the accessible ARIA name of the component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\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()\n    accessibleNameRef: string = \"\";\n\n  /**\n   * Defines the allowed keys for the input\n   *\n   * @private\n   */\n  @property({ type: String, noAttribute: true })\n    allowedKeys: string[] = [\n      \"Backspace\",\n      \"Delete\",\n      \"ArrowLeft\",\n      \"ArrowRight\",\n      \"Tab\",\n      \"Enter\",\n      \"Home\",\n      \"End\",\n      \"Escape\",\n    ];\n\n  /**\n   * Keeps the value of previously pressed key\n   *\n   * @private\n   */\n  @property({ type: String, noAttribute: true })\n    previousKey!: string;\n\n  /**\n   * Defines the active (focus)\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    active!: boolean;\n\n  /**\n   * Defines is it the touch of the input field (only for mobile devices).\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    _isTouched!: boolean;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  _dropdown!: UDExDropdown;\n  _dropdownList!: UDExList;\n  _handleResizeBound: ResizeObserverCallback;\n  countriesList: ExtendedCountriesListPhoneNumberData[] = CountryListDB;\n\n  constructor() {\n    super();\n    this._handleResizeBound = this._handleResize.bind(this);\n  }\n\n  onEnterDOM(): void {\n    ResizeHandler.register(this, this._handleResizeBound);\n  }\n\n  onExitDOM(): void {\n    ResizeHandler.deregister(this, this._handleResizeBound);\n  }\n\n  onBeforeRendering() {\n    this.applyPlaceholder();\n\n    if (this.blockedCountryCodes?.length) {\n      const blockedCountryCodesArray = this.blockedCountryCodes.split(\",\").map(code => code.trim().toUpperCase());\n      this.countriesList = this.countriesList\n        .filter(country => !blockedCountryCodesArray?.includes(country.iso.toUpperCase()));\n    }\n  }\n\n  onAfterRendering() {\n    this._dropdown = this.getDropdown();\n    this._dropdownList = this.getDropdownList();\n    if (this.countryIso) {\n      this._dropdownList.focusSelectedItem();\n    }\n  }\n\n  _handleResize() {\n    this._dropdown.style.setProperty(\"--udex-dropdown-pane-width\", `${this.offsetWidth}px`);\n  }\n\n  handleInput(e: InputEvent) {\n    this.value = (e.target as HTMLInputElement)?.value.trim();\n    this.applyPhoneMask();\n\n    if (!this.value.startsWith(this.selectedPhonePrefix)) {\n      this.selectedIso = \"\";\n    }\n\n    if (this.value.length === 0 || this.value === \"+\") {\n      this.autoSelectedIso = \"\";\n      this.selectedIso = \"\";\n    }\n  }\n\n  openDropdown(): void {\n    if (!this.isButtonDisabled) {\n      this._dropdown.open = !this._dropdown.open;\n    }\n  }\n\n  handleKeyDown = (e: KeyboardEvent) => {\n    const isKeyAllowed = e.key && (e.key.match(/\\d/)\n      || this.allowedKeys.includes(e.key)\n      || e.metaKey\n      || e.ctrlKey);\n\n    if (!isKeyAllowed) {\n      e.preventDefault();\n    }\n\n    if (isEnter(e)) {\n      this.fireDecoratorEvent(\"change\");\n    }\n\n    e.stopPropagation();\n    this.previousKey = e.key;\n  };\n\n  handleKeyUp() {\n    if (this.isInputReadonly) {\n      return;\n    }\n\n    this.value = this.value.replace(/[^\\d+ ()-]/g, \"\").trim();\n    this.applyPhoneMask();\n  }\n\n  handleFocus() {\n    this.active = !this.displayonly;\n    if (this.countryIso.length === 0) {\n      this.phoneFormat = initialPlaceholder;\n    }\n\n    if ((this.value.length === 0 || this.value === \"+\") && !this.isInputReadonly) {\n      this.value = this.selectedPhonePrefix;\n    }\n  }\n\n  handleClick(): void {\n    if (!isDesktop()) {\n      this._isTouched = true;\n    }\n  }\n\n  handleBlur() {\n    this.active = false;\n    this._isTouched = false;\n    this.applyPlaceholder();\n\n    const prefixLength = this.selectedPhonePrefix.length;\n    const enteredPrefix = this.value.substring(0, prefixLength);\n    const isIncorrectPrefixEntered = enteredPrefix !== this.selectedPhonePrefix;\n\n    const isIncorrectNumberEntered = !this.countryIso || this.value.length <= prefixLength || isIncorrectPrefixEntered;\n    if (isIncorrectNumberEntered) {\n      this.value = \"\";\n    }\n\n    if (!this.isInputReadonly) {\n      this.fireDecoratorEvent(\"change\");\n    }\n  }\n\n  handleSelect(e: CustomEvent) {\n    this._dropdown.open = false;\n    this.selectedIso = e.detail.item.id;\n    this.applyPhoneMask();\n    this.getInputField().focus();\n    this.fireDecoratorEvent(\"change\");\n  }\n\n  dropdownBeforeOpen() {\n    this.buttonIcon = UDExOpenButtonIcon.iconUp;\n    this._dropdownExpanded = true;\n  }\n\n  dropdownBeforeClose() {\n    this.buttonIcon = UDExOpenButtonIcon.iconDown;\n    this._dropdownExpanded = false;\n  }\n\n  autoSelectCountry(value: string) {\n    const countryToSelect = this.updatedCountriesList.find(country => {\n      const valuePhonePrefix = value.substring(0, country.phonePrefix.length);\n\n      return country.phonePrefix === valuePhonePrefix;\n    });\n\n    if (countryToSelect) {\n      this.autoSelectedIso = countryToSelect.iso;\n    }\n\n    if (this.selectedPhonePrefix && this.selectedPlaceholder) {\n      this.maxlength = this.selectedPhonePrefix.length + this.selectedPlaceholder.length;\n    }\n  }\n\n  applyPhoneMask() {\n    const isNewPrefixEntered = this.value.substring(0, this.selectedPhonePrefix.length) !== this.selectedPhonePrefix;\n    if (this.value.split(\"\")[0] !== \"+\") {\n      this.value = `+${this.value}`;\n    }\n\n    this.autoSelectCountry(this.value);\n\n    if (isNewPrefixEntered) {\n      return;\n    }\n\n    const mask = this.selectedPhonePrefix + this.selectedPlaceholder;\n    const maskSymbols = [\" \", \"-\", \"(\", \")\"];\n\n    const valueWithMask = this.value.split(\"\").map((char, index) => {\n      if (maskSymbols.includes(char) && char === mask[index]) {\n        return char;\n      }\n      if (maskSymbols.includes(char) && char !== mask[index]) {\n        return \"\";\n      }\n      if (maskSymbols.includes(mask[index]) && char !== mask[index]) {\n        return `${mask[index]}${char}`;\n      }\n      return char;\n    }).join(\"\");\n\n    this.value = valueWithMask;\n\n    if (this.value.length > this.maxlength) {\n      this.value = this.value.substring(0, this.maxlength);\n    }\n  }\n\n  applyPlaceholder() {\n    this.phoneFormat = this.countryIso.length > 0\n      ? this.selectedPhonePrefix + this.selectedPlaceholder : initialPlaceholder;\n  }\n\n  getDropdownList(): UDExList {\n    return this.shadowRoot!.querySelector<UDExList>(\n      \"[udex-list]\",\n    )!;\n  }\n\n  getDropdown(): UDExDropdown {\n    return this.shadowRoot!.querySelector<UDExDropdown>(\n      \"[udex-dropdown]\",\n    )!;\n  }\n\n  getButton(): UDExButton {\n    return this.shadowRoot!.querySelector<UDExButton>(\n      \"[udex-button]\",\n    )!;\n  }\n\n  getInputField() {\n    return this.shadowRoot!.querySelector<HTMLFormElement>(\n      \"input\",\n    )!;\n  }\n\n  get inputTabIndex(): number | undefined {\n    return this.displayonly || this.disabled ? -1 : undefined;\n  }\n\n  get selectedPhonePrefix(): string {\n    if (!this.countryIso) {\n      return \"\";\n    }\n\n    return this.updatedCountriesList.filter(country => country.iso === this.countryIso)[0]?.phonePrefix\n    || this.updatedCountriesList[0]?.phonePrefix;\n  }\n\n  get selectedPlaceholder(): string {\n    if (!this.countryIso) {\n      return \"\";\n    }\n\n    return this.updatedCountriesList.filter(country => country.iso === this.countryIso)[0]?.phoneFmt\n      || this.updatedCountriesList[0]?.phoneFmt;\n  }\n\n  get selectedCountryName(): string {\n    if (!this.countryIso) {\n      return \"None\";\n    }\n\n    return this.updatedCountriesList.filter(country => country.iso === this.countryIso)[0]?.countryName\n      || this.updatedCountriesList[0]?.countryName;\n  }\n\n  get selectedFlagBackgroundPosition() {\n    if (!this.countryIso) {\n      return {};\n    }\n\n    const selectedCountry = this.updatedCountriesList.filter(country => country.iso === this.countryIso)[0];\n\n    if (!selectedCountry) {\n      return {};\n    }\n\n    return { \"backgroundPosition\": `${selectedCountry.flagX} ${selectedCountry.flagY}` };\n  }\n\n  get ariaInvalid(): string | null {\n    return this.valueState === \"Error\" ? \"true\" : null;\n  }\n\n  get isInputReadonly(): boolean {\n    return this.readonly || this.displayonly;\n  }\n\n  get isButtonDisabled(): boolean {\n    return this.disabled || this.isInputReadonly;\n  }\n\n  get updatedCountriesList(): ExtendedCountriesListPhoneNumberData[] {\n    return this.countriesList.map(country => {\n      if (country.selected) {\n        delete country.selected;\n      }\n\n      if (country.iso === this.countryIso) {\n        country.selected = true;\n      }\n\n      return country;\n    });\n  }\n\n  get valueStateTypeMappings(): Record<UDExPhoneNumberFieldValueState, string> {\n    return {\n      \"Success\": UDExPhoneNumberField.i18nBundle.getText(VALUE_STATE_SUCCESS),\n      \"Standard\": UDExPhoneNumberField.i18nBundle.getText(VALUE_STATE_INFORMATION),\n      \"Error\": UDExPhoneNumberField.i18nBundle.getText(VALUE_STATE_ERROR),\n    };\n  }\n\n  get hasValueState(): boolean {\n    return this.valueState !== \"Standard\";\n  }\n\n  get valueStateText(): string | undefined {\n    return this.valueState !== \"Standard\" ? this.valueStateTypeMappings[this.valueState] : undefined;\n  }\n\n  get readOnlyStateText() {\n    return UDExPhoneNumberField.i18nBundle.getText(READ_ONLY);\n  }\n\n  get ariaDescribedById(): string {\n    return `${this.supportingTextId} ${this.valueStateTextId} ${this.readOnlyStateTextId}`.trim();\n  }\n\n  get supportingTextId(): string {\n    return this.supportingText ? `${this._id}-supportingTextDesc` : \"\";\n  }\n\n  get valueStateTextId(): string {\n    return this.hasValueState ? `${this._id}-valueStateDesc` : \"\";\n  }\n\n  get readOnlyStateTextId(): string {\n    return this.readonly ? `${this._id}-stateReadOnlyDesc` : \"\";\n  }\n\n  get countrySelectorAriaLabel(): string {\n    return this.accessibleName || `${UDExPhoneNumberField.i18nBundle.getText(COUNTRY_SELECT)} ${this.label}`.trim();\n  }\n\n  get countryIso(): string {\n    return this.selectedIso || this.autoSelectedIso;\n  }\n}\n\nUDExPhoneNumberField.define();\n\nexport default UDExPhoneNumberField;\n"]}
+{"version":3,"file":"PhoneNumberField.js","sourceRoot":"","sources":["../src/PhoneNumberField.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 event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport {\n  COUNTRY_SELECT, READ_ONLY, VALUE_STATE_ERROR, VALUE_STATE_INFORMATION, VALUE_STATE_SUCCESS,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport type { Country } from \"./data/CountryListISO3166.js\";\nimport { CountryListDB } from \"./data/CountryListISO3166.js\";\nimport UDExDropdown from \"./Dropdown.js\";\nimport UDExList from \"./List.js\";\nimport UDExListItem from \"./ListItem.js\";\nimport UDExButton from \"./Button.js\";\nimport UDExStatusMessage from \"./StatusMessage.js\";\n\nimport \"@ui5/webcomponents/dist/Icon.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-up.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-down.js\";\n\nimport PhoneNumberFieldTemplate from \"./generated/templates/PhoneNumberFieldTemplate.lit.js\";\nimport type UDExValueState from \"./types/common.js\";\n\n// Styles\nimport PhoneNumberFieldCss from \"./generated/themes/PhoneNumberField.css.js\";\nimport { isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\n\nexport interface ExtendedCountriesListPhoneNumberData extends Country {\n  selected?: boolean;\n}\n\nexport enum UDExOpenButtonIcon {\n  iconUp = \"slim-arrow-up\",\n  iconDown = \"slim-arrow-down\",\n}\n\nexport type UDExPhoneNumberFieldValueState = Exclude<UDExValueState, \"Warning\">\n\nconst initialPlaceholder: string = \"+X XXX-XXX-XXXX\";\n/**\n * Maximum number of possible digits based on international standard https://en.wikipedia.org/wiki/E.164\n */\nconst digitsLimit: number = 15;\n\n/**\n * @class\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-phone-number-field\n * @public\n */\n@customElement({\n  tag: \"udex-phone-number-field\",\n  renderer: litRender,\n  styles: PhoneNumberFieldCss,\n  template: PhoneNumberFieldTemplate,\n  dependencies: [\n    UDExDropdown,\n    UDExList,\n    UDExListItem,\n    UDExButton,\n    UDExStatusMessage,\n  ],\n})\n/**\n   * Fired when the value of the component changes at each keystroke.\n   *\n   * @public\n   */\n@event(\"input\", { bubbles: true })\n/**\n   * Fired when the input operation has finished by pressing Enter or on focusout.\n   *\n   * @public\n   */\n@event(\"change\", { bubbles: true })\nclass UDExPhoneNumberField extends UI5Element {\n  eventDetails!: {\n    \"input\": void,\n    \"change\": void,\n  };\n  /**\n   * Defines label text for the textarea field.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    label: string = \"\";\n\n  /**\n   * Defines the value state of the component.\n   *\n   * @default \"Standard\"\n   * @public\n   */\n  @property()\n    valueState: `${UDExPhoneNumberFieldValueState}` = \"Standard\";\n\n  /**\n   * Defines supporting text under the input field.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    supportingText: string = \"\";\n\n  /**\n   * Defines whether the component is required.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    required!: boolean;\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 whether the component is read-only.\n   * <br><br>\n   * <b>Note:</b> A read-only component is not editable,\n   * but still provides visual feedback upon user interaction.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    readonly!: boolean;\n\n  /**\n   * Defines whether the component is display-only.\n   * <br><br>\n   * <b>Note:</b> A display-only component is not editable,\n   * but still provides visual feedback upon user interaction, input border is not visible.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    displayonly!: boolean;\n\n  /**\n   * Defines the country iso code selected by the user\n   * <br><br>\n   * Note: should be used two-letter country codes, e.g.: \"DE\" | \"PL\" | \"UA\" | \"US\"\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    selectedIso: string = \"\";\n\n  /**\n   * Defines the autoselected country iso code\n   *\n   * @default \"\"\n   * @private\n   */\n  @property({ type: String, noAttribute: true })\n    autoSelectedIso: string = \"\";\n\n  /**\n   * Allows to define the list of blocked country.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    blockedCountryCodes?: string;\n\n  /**\n   * Allows control over the height.\n   *\n   * @public\n   */\n  @property({ type: String })\n    height?: string;\n\n  /**\n   * Defines the value of the component.\n   *\n   * @default \"\"\n   */\n  @property({ type: String })\n    value: string = \"\";\n\n  /**\n   * Defines the open button icon\n   *\n   * @private\n   */\n  @property({ type: String, noAttribute: true })\n    buttonIcon: string = UDExOpenButtonIcon.iconDown;\n\n  /**\n   * Defines the open button icon\n   *\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    _dropdownExpanded: boolean = false;\n\n  /**\n   * Defines the phone format of the input\n   *\n   * @private\n   */\n  @property({ type: String, noAttribute: true })\n    phoneFormat: string = initialPlaceholder;\n\n  /**\n   * Defines the maxlength of the input\n   *\n   * @private\n   */\n  @property({ type: Number })\n    maxlength!: number;\n\n  /**\n   * Defines the accessible ARIA name of the component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\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()\n    accessibleNameRef: string = \"\";\n\n  /**\n   * Defines the allowed keys for the input\n   *\n   * @private\n   */\n  @property({ type: String, noAttribute: true })\n    allowedKeys: string[] = [\n      \"Backspace\",\n      \"Delete\",\n      \"ArrowLeft\",\n      \"ArrowRight\",\n      \"Tab\",\n      \"Enter\",\n      \"Home\",\n      \"End\",\n      \"Escape\",\n    ];\n\n  /**\n   * Keeps the value of previously pressed key\n   *\n   * @private\n   */\n  @property({ type: String, noAttribute: true })\n    previousKey!: string;\n\n  /**\n   * Defines the active (focus)\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    active!: boolean;\n\n  /**\n   * Defines is it the touch of the input field (only for mobile devices).\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    _isTouched!: boolean;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  _dropdown!: UDExDropdown;\n  _dropdownList!: UDExList;\n  _handleResizeBound: ResizeObserverCallback;\n  countriesList: ExtendedCountriesListPhoneNumberData[] = CountryListDB;\n\n  constructor() {\n    super();\n    this._handleResizeBound = this._handleResize.bind(this);\n  }\n\n  onEnterDOM(): void {\n    ResizeHandler.register(this, this._handleResizeBound);\n  }\n\n  onExitDOM(): void {\n    ResizeHandler.deregister(this, this._handleResizeBound);\n  }\n\n  onBeforeRendering() {\n    this.applyPlaceholder();\n\n    if (this.blockedCountryCodes?.length) {\n      const blockedCountryCodesArray = this.blockedCountryCodes.split(\",\").map(code => code.trim().toUpperCase());\n      this.countriesList = this.countriesList\n        .filter(country => !blockedCountryCodesArray?.includes(country.iso.toUpperCase()));\n    }\n  }\n\n  onAfterRendering() {\n    this._dropdown = this.getDropdown();\n    this._dropdownList = this.getDropdownList();\n    if (this.countryIso) {\n      this._dropdownList.focusSelectedItem();\n    }\n  }\n\n  _handleResize() {\n    this._dropdown.style.setProperty(\"--udex-dropdown-pane-width\", `${this.offsetWidth}px`);\n  }\n\n  handleInput(e: InputEvent) {\n    this.value = (e.target as HTMLInputElement)?.value.trim();\n    this.applyPhoneMask();\n\n    if (!this.value.startsWith(this.selectedPhonePrefix)) {\n      this.selectedIso = \"\";\n    }\n\n    if (this.value.length === 0 || this.value === \"+\") {\n      this.autoSelectedIso = \"\";\n      this.selectedIso = \"\";\n    }\n  }\n\n  openDropdown(): void {\n    if (!this.isButtonDisabled) {\n      this._dropdown.open = !this._dropdown.open;\n    }\n  }\n\n  handleKeyDown = (e: KeyboardEvent) => {\n    const isKeyAllowed = e.key && (e.key.match(/\\d/)\n      || this.allowedKeys.includes(e.key)\n      || e.metaKey\n      || e.ctrlKey);\n\n    if (!isKeyAllowed) {\n      e.preventDefault();\n    }\n\n    if (isEnter(e)) {\n      this.fireDecoratorEvent(\"change\");\n    }\n\n    e.stopPropagation();\n    this.previousKey = e.key;\n  };\n\n  handleKeyUp() {\n    if (this.isInputReadonly) {\n      return;\n    }\n\n    this.value = this.value.replace(/[^\\d+ ()-]/g, \"\").trim();\n    this.applyPhoneMask();\n  }\n\n  handleFocus() {\n    this.active = !this.displayonly;\n    if (this.countryIso.length === 0) {\n      this.phoneFormat = initialPlaceholder;\n    }\n\n    if ((this.value.length === 0 || this.value === \"+\") && !this.isInputReadonly) {\n      this.value = this.selectedPhonePrefix;\n    }\n  }\n\n  handleClick(): void {\n    if (!isDesktop()) {\n      this._isTouched = true;\n    }\n  }\n\n  handleBlur() {\n    this.active = false;\n    this._isTouched = false;\n    this.applyPlaceholder();\n\n    const prefixLength = this.selectedPhonePrefix.length;\n    const enteredPrefix = this.value.substring(0, prefixLength);\n    const isIncorrectPrefixEntered = enteredPrefix !== this.selectedPhonePrefix;\n\n    const isIncorrectNumberEntered = !this.countryIso || this.value.length <= prefixLength || isIncorrectPrefixEntered;\n    if (isIncorrectNumberEntered) {\n      this.value = \"\";\n    }\n\n    if (!this.isInputReadonly) {\n      this.fireDecoratorEvent(\"change\");\n    }\n  }\n\n  handleSelect(e: CustomEvent) {\n    this._dropdown.open = false;\n    this.selectedIso = e.detail.item.id;\n    this.applyPhoneMask();\n    this.getInputField().focus();\n    this.fireDecoratorEvent(\"change\");\n  }\n\n  dropdownBeforeOpen() {\n    this.buttonIcon = UDExOpenButtonIcon.iconUp;\n    this._dropdownExpanded = true;\n  }\n\n  dropdownBeforeClose() {\n    this.buttonIcon = UDExOpenButtonIcon.iconDown;\n    this._dropdownExpanded = false;\n  }\n\n  calculateMaxLength(prefix: string, mask: string): number {\n    const prefixNonDigitCount = prefix.replace(/[\\d]/g, \"\").length;\n    const maskNonDigitCount = mask.replace(/X/g, \"\").length;\n\n    const maxLength = digitsLimit + prefixNonDigitCount + maskNonDigitCount;\n\n    return maxLength;\n  }\n\n  autoSelectCountry(value: string) {\n    const countryToSelect = this.updatedCountriesList.find(country => {\n      const valuePhonePrefix = value.substring(0, country.phonePrefix.length);\n\n      return country.phonePrefix === valuePhonePrefix;\n    });\n\n    if (countryToSelect) {\n      this.autoSelectedIso = countryToSelect.iso;\n    }\n\n    if (this.selectedPhonePrefix && this.selectedPlaceholder) {\n      this.maxlength = this.calculateMaxLength(this.selectedPhonePrefix, this.selectedPlaceholder);\n    }\n  }\n\n  applyPhoneMask() {\n    const isNewPrefixEntered = this.value.substring(0, this.selectedPhonePrefix.length) !== this.selectedPhonePrefix;\n    if (this.value.split(\"\")[0] !== \"+\") {\n      this.value = `+${this.value}`;\n    }\n\n    this.autoSelectCountry(this.value);\n\n    if (isNewPrefixEntered) {\n      return;\n    }\n\n    const maskLength = this.selectedPhonePrefix.length + this.selectedPlaceholder.length;\n    const mask = this.selectedPhonePrefix + this.selectedPlaceholder;\n    const maskSymbols = [\" \", \"-\", \"(\", \")\"];\n\n    const valueWithMask = this.value.split(\"\").map((char, index) => {\n      if (maskSymbols.includes(char) && char === mask[index]) {\n        return char;\n      }\n      if (maskSymbols.includes(char) && char !== mask[index]) {\n        return \"\";\n      }\n      if (maskSymbols.includes(mask[index]) && char !== mask[index]) {\n        return `${mask[index]}${char}`;\n      }\n      return char;\n    }).join(\"\");\n\n    if (this.value.length >= maskLength) {\n      return;\n    }\n\n    this.value = valueWithMask;\n\n    if (this.value.length > this.maxlength) {\n      this.value = this.value.substring(0, this.maxlength);\n    }\n  }\n\n  applyPlaceholder() {\n    this.phoneFormat = this.countryIso.length > 0\n      ? this.selectedPhonePrefix + this.selectedPlaceholder : initialPlaceholder;\n  }\n\n  getDropdownList(): UDExList {\n    return this.shadowRoot!.querySelector<UDExList>(\n      \"[udex-list]\",\n    )!;\n  }\n\n  getDropdown(): UDExDropdown {\n    return this.shadowRoot!.querySelector<UDExDropdown>(\n      \"[udex-dropdown]\",\n    )!;\n  }\n\n  getButton(): UDExButton {\n    return this.shadowRoot!.querySelector<UDExButton>(\n      \"[udex-button]\",\n    )!;\n  }\n\n  getInputField() {\n    return this.shadowRoot!.querySelector<HTMLFormElement>(\n      \"input\",\n    )!;\n  }\n\n  get inputTabIndex(): number | undefined {\n    return this.displayonly || this.disabled ? -1 : undefined;\n  }\n\n  get selectedPhonePrefix(): string {\n    if (!this.countryIso) {\n      return \"\";\n    }\n\n    return this.updatedCountriesList.filter(country => country.iso === this.countryIso)[0]?.phonePrefix\n    || this.updatedCountriesList[0]?.phonePrefix;\n  }\n\n  get selectedPlaceholder(): string {\n    if (!this.countryIso) {\n      return \"\";\n    }\n\n    return this.updatedCountriesList.filter(country => country.iso === this.countryIso)[0]?.phoneFmt\n      || this.updatedCountriesList[0]?.phoneFmt;\n  }\n\n  get selectedCountryName(): string {\n    if (!this.countryIso) {\n      return \"None\";\n    }\n\n    return this.updatedCountriesList.filter(country => country.iso === this.countryIso)[0]?.countryName\n      || this.updatedCountriesList[0]?.countryName;\n  }\n\n  get selectedFlagBackgroundPosition() {\n    if (!this.countryIso) {\n      return {};\n    }\n\n    const selectedCountry = this.updatedCountriesList.filter(country => country.iso === this.countryIso)[0];\n\n    if (!selectedCountry) {\n      return {};\n    }\n\n    return { \"backgroundPosition\": `${selectedCountry.flagX} ${selectedCountry.flagY}` };\n  }\n\n  get ariaInvalid(): string | null {\n    return this.valueState === \"Error\" ? \"true\" : null;\n  }\n\n  get isInputReadonly(): boolean {\n    return this.readonly || this.displayonly;\n  }\n\n  get isButtonDisabled(): boolean {\n    return this.disabled || this.isInputReadonly;\n  }\n\n  get updatedCountriesList(): ExtendedCountriesListPhoneNumberData[] {\n    return this.countriesList.map(country => {\n      if (country.selected) {\n        delete country.selected;\n      }\n\n      if (country.iso === this.countryIso) {\n        country.selected = true;\n      }\n\n      return country;\n    });\n  }\n\n  get valueStateTypeMappings(): Record<UDExPhoneNumberFieldValueState, string> {\n    return {\n      \"Success\": UDExPhoneNumberField.i18nBundle.getText(VALUE_STATE_SUCCESS),\n      \"Standard\": UDExPhoneNumberField.i18nBundle.getText(VALUE_STATE_INFORMATION),\n      \"Error\": UDExPhoneNumberField.i18nBundle.getText(VALUE_STATE_ERROR),\n    };\n  }\n\n  get hasValueState(): boolean {\n    return this.valueState !== \"Standard\";\n  }\n\n  get valueStateText(): string | undefined {\n    return this.valueState !== \"Standard\" ? this.valueStateTypeMappings[this.valueState] : undefined;\n  }\n\n  get readOnlyStateText() {\n    return UDExPhoneNumberField.i18nBundle.getText(READ_ONLY);\n  }\n\n  get ariaDescribedById(): string {\n    return `${this.supportingTextId} ${this.valueStateTextId} ${this.readOnlyStateTextId}`.trim();\n  }\n\n  get supportingTextId(): string {\n    return this.supportingText ? `${this._id}-supportingTextDesc` : \"\";\n  }\n\n  get valueStateTextId(): string {\n    return this.hasValueState ? `${this._id}-valueStateDesc` : \"\";\n  }\n\n  get readOnlyStateTextId(): string {\n    return this.readonly ? `${this._id}-stateReadOnlyDesc` : \"\";\n  }\n\n  get countrySelectorAriaLabel(): string {\n    return this.accessibleName || `${UDExPhoneNumberField.i18nBundle.getText(COUNTRY_SELECT)} ${this.label}`.trim();\n  }\n\n  get countryIso(): string {\n    return this.selectedIso || this.autoSelectedIso;\n  }\n}\n\nUDExPhoneNumberField.define();\n\nexport default UDExPhoneNumberField;\n"]}

package/dist/RadioButton.d.ts

@@ -16,6 +16,7 @@ import RadioButtonValueState from "./types/RadioButton.js";
  *
  * @constructor
  * @extends RadioButton
+ * @tagname udex-radio-button
  * @public
  */
 declare class UDExRadioButton extends RadioButton {

package/dist/RadioButton.js

@@ -28,6 +28,7 @@ import RadioButtonCss from "./generated/themes/RadioButton.css.js";
  *
  * @constructor
  * @extends RadioButton
+ * @tagname udex-radio-button
  * @public
  */
 let UDExRadioButton = class UDExRadioButton extends RadioButton {

package/dist/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","sourceRoot":"","sources":["../src/RadioButton.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAEnE,OAAO,EACL,iBAAiB,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,mBAAmB,GACrF,MAAM,mCAAmC,CAAC;AAC3C,OAAO,WAAW,MAAM,wCAAwC,CAAC;AACjE,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,qBAAqB,MAAM,wBAAwB,CAAC;AAE3D,SAAS;AACT,OAAO,cAAc,MAAM,uCAAuC,CAAC;AAEnE;;;;;;;;;;;;;;;;GAgBG;AAOH,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,WAAW;IAAzC;;QAUE;;;;WAIG;QAGD,eAAU,GAAgC,qBAAqB,CAAC,IAAI,CAAC;IAwBzE,CAAC;IAnBC,gBAAgB;QACd,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,CAAC;QAClD,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAED,IAAI,cAAc;QAChB,QAAQ,IAAI,CAAC,UAAU,EAAE,CAAC;YAC1B,KAAK,qBAAqB,CAAC,KAAK;gBAC9B,OAAO,WAAW,CAAC,UAAU,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;YAC3D,KAAK,qBAAqB,CAAC,OAAO;gBAChC,OAAO,WAAW,CAAC,UAAU,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC;YAC7D,KAAK,qBAAqB,CAAC,WAAW;gBACpC,OAAO,WAAW,CAAC,UAAU,CAAC,OAAO,CAAC,uBAAuB,CAAC,CAAC;YACjE,KAAK,qBAAqB,CAAC,OAAO;gBAChC,OAAO,WAAW,CAAC,UAAU,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC;YAC7D;gBACE,OAAO,EAAE,CAAC;QACZ,CAAC;IACH,CAAC;CACF,CAAA;AAjCG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDACJ;AAStB;IAFD,QAAQ,EAAE;IACX,uBAAuB;mDACgD;AAGhE;IADN,IAAI,CAAC,yBAAyB,CAAC;yCACF;AApB1B,eAAe;IANpB,aAAa,CAAC;QACb,GAAG,EAAE,mBAAmB;QACxB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,WAAW,CAAC,MAAM,EAAE,cAAc,CAAC;KAC7C,CAAC;GAEI,eAAe,CAyCpB;AAED,eAAe,CAAC,MAAM,EAAE,CAAC;AAEzB,eAAe,eAAe,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport {\n  VALUE_STATE_ERROR, VALUE_STATE_SUCCESS, VALUE_STATE_INFORMATION, VALUE_STATE_WARNING,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport RadioButton from \"@ui5/webcomponents/dist/RadioButton.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport RadioButtonValueState from \"./types/RadioButton.js\";\n\n// Styles\nimport RadioButtonCss from \"./generated/themes/RadioButton.css.js\";\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-radio-button</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/RadioButton.js\";</code>\n *\n * @constructor\n * @extends RadioButton\n * @public\n */\n@customElement({\n  tag: \"udex-radio-button\",\n  renderer: jsxRenderer,\n  styles: [RadioButton.styles, RadioButtonCss],\n})\n\nclass UDExRadioButton extends RadioButton {\n  /**\n   * Define if arrow icons for last and first page are visible.\n   *\n   * @public\n   * @default false\n   */\n  @property({ type: Boolean })\n    displayOnly!: boolean;\n\n  /**\n   * Defines the value state of the component.\n   * @default \"None\"\n   * @public\n   */\n  @property()\n  /** @ts-expect-error */\n    valueState!: `${RadioButtonValueState}` = RadioButtonValueState.None;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  onAfterRendering(): void {\n    this.readonly = this.readonly || this.displayOnly;\n    this.syncGroup();\n  }\n\n  get valueStateText(): string {\n    switch (this.valueState) {\n    case RadioButtonValueState.Error:\n      return RadioButton.i18nBundle.getText(VALUE_STATE_ERROR);\n    case RadioButtonValueState.Success:\n      return RadioButton.i18nBundle.getText(VALUE_STATE_SUCCESS);\n    case RadioButtonValueState.Information:\n      return RadioButton.i18nBundle.getText(VALUE_STATE_INFORMATION);\n    case RadioButtonValueState.Warning:\n      return RadioButton.i18nBundle.getText(VALUE_STATE_WARNING);\n    default:\n      return \"\";\n    }\n  }\n}\n\nUDExRadioButton.define();\n\nexport default UDExRadioButton;\n"]}
+{"version":3,"file":"RadioButton.js","sourceRoot":"","sources":["../src/RadioButton.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAEnE,OAAO,EACL,iBAAiB,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,mBAAmB,GACrF,MAAM,mCAAmC,CAAC;AAC3C,OAAO,WAAW,MAAM,wCAAwC,CAAC;AACjE,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,qBAAqB,MAAM,wBAAwB,CAAC;AAE3D,SAAS;AACT,OAAO,cAAc,MAAM,uCAAuC,CAAC;AAEnE;;;;;;;;;;;;;;;;;GAiBG;AAOH,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,WAAW;IAAzC;;QAUE;;;;WAIG;QAGD,eAAU,GAAgC,qBAAqB,CAAC,IAAI,CAAC;IAwBzE,CAAC;IAnBC,gBAAgB;QACd,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,CAAC;QAClD,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAED,IAAI,cAAc;QAChB,QAAQ,IAAI,CAAC,UAAU,EAAE,CAAC;YAC1B,KAAK,qBAAqB,CAAC,KAAK;gBAC9B,OAAO,WAAW,CAAC,UAAU,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;YAC3D,KAAK,qBAAqB,CAAC,OAAO;gBAChC,OAAO,WAAW,CAAC,UAAU,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC;YAC7D,KAAK,qBAAqB,CAAC,WAAW;gBACpC,OAAO,WAAW,CAAC,UAAU,CAAC,OAAO,CAAC,uBAAuB,CAAC,CAAC;YACjE,KAAK,qBAAqB,CAAC,OAAO;gBAChC,OAAO,WAAW,CAAC,UAAU,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC;YAC7D;gBACE,OAAO,EAAE,CAAC;QACZ,CAAC;IACH,CAAC;CACF,CAAA;AAjCG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDACJ;AAStB;IAFD,QAAQ,EAAE;IACX,uBAAuB;mDACgD;AAGhE;IADN,IAAI,CAAC,yBAAyB,CAAC;yCACF;AApB1B,eAAe;IANpB,aAAa,CAAC;QACb,GAAG,EAAE,mBAAmB;QACxB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,WAAW,CAAC,MAAM,EAAE,cAAc,CAAC;KAC7C,CAAC;GAEI,eAAe,CAyCpB;AAED,eAAe,CAAC,MAAM,EAAE,CAAC;AAEzB,eAAe,eAAe,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport {\n  VALUE_STATE_ERROR, VALUE_STATE_SUCCESS, VALUE_STATE_INFORMATION, VALUE_STATE_WARNING,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport RadioButton from \"@ui5/webcomponents/dist/RadioButton.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport RadioButtonValueState from \"./types/RadioButton.js\";\n\n// Styles\nimport RadioButtonCss from \"./generated/themes/RadioButton.css.js\";\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-radio-button</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/RadioButton.js\";</code>\n *\n * @constructor\n * @extends RadioButton\n * @tagname udex-radio-button\n * @public\n */\n@customElement({\n  tag: \"udex-radio-button\",\n  renderer: jsxRenderer,\n  styles: [RadioButton.styles, RadioButtonCss],\n})\n\nclass UDExRadioButton extends RadioButton {\n  /**\n   * Define if arrow icons for last and first page are visible.\n   *\n   * @public\n   * @default false\n   */\n  @property({ type: Boolean })\n    displayOnly!: boolean;\n\n  /**\n   * Defines the value state of the component.\n   * @default \"None\"\n   * @public\n   */\n  @property()\n  /** @ts-expect-error */\n    valueState!: `${RadioButtonValueState}` = RadioButtonValueState.None;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  onAfterRendering(): void {\n    this.readonly = this.readonly || this.displayOnly;\n    this.syncGroup();\n  }\n\n  get valueStateText(): string {\n    switch (this.valueState) {\n    case RadioButtonValueState.Error:\n      return RadioButton.i18nBundle.getText(VALUE_STATE_ERROR);\n    case RadioButtonValueState.Success:\n      return RadioButton.i18nBundle.getText(VALUE_STATE_SUCCESS);\n    case RadioButtonValueState.Information:\n      return RadioButton.i18nBundle.getText(VALUE_STATE_INFORMATION);\n    case RadioButtonValueState.Warning:\n      return RadioButton.i18nBundle.getText(VALUE_STATE_WARNING);\n    default:\n      return \"\";\n    }\n  }\n}\n\nUDExRadioButton.define();\n\nexport default UDExRadioButton;\n"]}

package/dist/TextField.d.ts

@@ -137,6 +137,12 @@ declare class UDExTextField extends UI5Element {
      * @public
      */
     active: boolean;
+    /**
+     * Defines the behaviour of autocomplete.
+     * @default "off"
+     * @public
+     */
+    autocomplete: string;
     /**
      * Defines the inner stored show password button tooltip.
      *
@@ -219,6 +225,8 @@ declare class UDExTextField extends UI5Element {
     get valueStateTextId(): string;
     get readOnlyStateTextId(): string;
     get accInfo(): AccInfo;
+    get inputRole(): string | undefined;
+    get isAutoCompleteDisabled(): boolean;
     handleKeydown(e: KeyboardEvent): void;
     handleChange: () => void;
     handleInput: (inputEvent: InputEvent) => void;