@everymatrix/general-input-hsl 0.25.6 → 0.25.7

package/dist/cjs/checkbox-group-input_13.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-160616a9.js');
-const generalInputHsl = require('./general-input-hsl-263f2b8e.js');
+const generalInputHsl = require('./general-input-hsl-50b56f15.js');
 
 const tooltipIconSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iNiIgY3k9IjYiIHI9IjUuNSIgc3Ryb2tlPSIjOTc5Nzk3Ii8+CjxyZWN0IHg9IjUiIHk9IjUiIHdpZHRoPSIyIiBoZWlnaHQ9IjUiIGZpbGw9IiM5Nzk3OTciLz4KPGNpcmNsZSBjeD0iNiIgY3k9IjMiIHI9IjEiIGZpbGw9IiM5Nzk3OTciLz4KPC9zdmc+Cg==';
 
@@ -6478,6 +6478,7 @@ const SelectInput = class {
         this.options = [];
         this.validation = undefined;
         this.language = undefined;
+        this.localizeCountryNames = false;
         this.emitValue = undefined;
         this.clientStyling = '';
         this.errorMessage = undefined;
@@ -6518,15 +6519,28 @@ const SelectInput = class {
             value: option.value
         }));
     }
+    // The endpoint returns English country names, so they are translated by Alpha2Code for the current language.
+    getLocalizedCountryName(alpha2Code, fallbackName) {
+        try {
+            return new Intl.DisplayNames([this.language], { type: 'region' }).of(alpha2Code) || fallbackName;
+        }
+        catch (_a) {
+            return fallbackName;
+        }
+    }
     componentWillLoad() {
         if (this.action && !this.options.length) {
             if (this.action.split(" ")[0] == 'GET') {
                 const endpoint = this.action.split(" ")[1];
                 return this.getOptions(endpoint).then((options) => {
                     const firstKey = Object.keys(options)[0];
-                    this.displayedOptions = options[firstKey].map(option => {
-                        return { label: option.Name, value: option.Alpha2Code };
-                    });
+                    this.displayedOptions = options[firstKey].map(option => ({
+                        label: this.localizeCountryNames ? this.getLocalizedCountryName(option.Alpha2Code, option.Name) : option.Name,
+                        value: option.Alpha2Code
+                    }));
+                    if (this.localizeCountryNames) {
+                        this.displayedOptions.sort((a, b) => a.label.localeCompare(b.label, this.language));
+                    }
                 });
             }
         }
@@ -6603,8 +6617,8 @@ const SelectInput = class {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return index.h("div", { key: 'ec7d68885b1354f320075be819284bd43d651f5c', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''}  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'c718c36b80341506d0ad303541b21b60853424e9', class: 'select__wrapper--flex' }, index.h("label", { key: '6b90cad1ad83768ee4ad8495c1c7a0eb8e2d4941', class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), index.h("div", { key: 'bc98b947de3cfaf89a90f2be1e37bd01ac951261', class: 'select__wrapper--relative' }, this.tooltip &&
-            index.h("img", { key: 'ffae584b4cd766dc4285b8b216a09ecaeccafb95', class: 'select__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("vaadin-combo-box", { key: 'f385e1ee1b8cd2ae12049178f6be70c25408a6bf', name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass} ${this.autofilled ? 'select__input--autofilled' : ''}`, "item-label-path": "label", "item-value-path": "value", ref: (el) => this.vaadinCombo = el, readOnly: this.autofilled, required: (_a = this.validation) === null || _a === void 0 ? void 0 : _a.mandatory, value: this.value, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleComboChange, onBlur: this.handleBlur }), index.h("small", { key: '8473fb2ec7c5dfa24b0fda25c1d0918d48d0b7bf', class: 'select__error-message' }, this.errorMessage));
+        return index.h("div", { key: '33eea13cc24122999ccfdc7793c20e4746a3b93c', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''}  ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '6440da5de357c8957cb1b712ffd3efa13334a564', class: 'select__wrapper--flex' }, index.h("label", { key: 'dc43204b94bedd5777c87f8ba1c319ddfb5a4292', class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), index.h("div", { key: '529c7829fcfce6f0cc206a15b61fde6862f5b38d', class: 'select__wrapper--relative' }, this.tooltip &&
+            index.h("img", { key: '4280fb7bbe45621a69e1a7d78d8d8c766bf507ca', class: 'select__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("vaadin-combo-box", { key: '136d577141f6cdb1c06287b6eabe5bd9243d8058', name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass} ${this.autofilled ? 'select__input--autofilled' : ''}`, "item-label-path": "label", "item-value-path": "value", ref: (el) => this.vaadinCombo = el, readOnly: this.autofilled, required: (_a = this.validation) === null || _a === void 0 ? void 0 : _a.mandatory, value: this.value, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleComboChange, onBlur: this.handleBlur }), index.h("small", { key: '84f398b8235d9e57ea5408f6c5eb7032b89df862', class: 'select__error-message' }, this.errorMessage));
     }
     static get watchers() { return {
         "clientStyling": ["handleStylingChange"],
@@ -6625,7 +6639,11 @@ const TelInput = class {
         this.validationPattern = '';
         this.touched = false;
         this.handleInput = (event) => {
-            this.phoneValue = event.target.value;
+            const inputElement = event.target;
+            if (this.digitsOnly) {
+                inputElement.value = inputElement.value.replace(/\D/g, '');
+            }
+            this.phoneValue = inputElement.value;
             this.value = { prefix: this.prefixValue, phone: this.phoneValue };
             this.touched = true;
             if (this.debounceTime) {
@@ -6661,6 +6679,7 @@ const TelInput = class {
         this.language = undefined;
         this.emitValue = undefined;
         this.clientStyling = '';
+        this.digitsOnly = false;
         this.isValid = undefined;
         this.errorMessage = undefined;
         this.limitStylingAppends = false;
@@ -6782,8 +6801,8 @@ const TelInput = class {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return index.h("div", { key: 'c7d032ca77d84df7afa4c1e727096d78b2f4e648', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: 'df166d6dc5f020edc1d4502f20ede76b7796324e', class: 'tel__wrapper--flex-label' }, index.h("label", { key: '870d566c29df1a20d1bdc33d6e58e935f6f5c36f', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '7bc701596b6b06cd20c68e575af255468a4d0b1a', class: 'tel__wrapper--relative' }, this.tooltip &&
-            index.h("img", { key: '04d00cf8bfd06730abd304e8467ded4b0fa80e7c', class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("div", { key: 'aee77f8937b6d89f13f8bcc659d1c5e955ba7d13', class: `tel__wrapper--flex ${invalidClass}` }, index.h("vaadin-combo-box", { key: '02ef60a7235d38709c661eafe4094f5e43909ca5', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), index.h("input", { key: '11e7b3625d34789e59f5784c2a164d5322bab07d', type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: this.phoneValue, placeholder: `${this.placeholder}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onInput: this.handleInput, onBlur: this.handleBlur })), index.h("small", { key: '4c85018d23278bd3681dad20f22dc52168c121e4', class: 'tel__error-message' }, this.errorMessage));
+        return index.h("div", { key: '8a75a1a66dae4a9f453487be42c8563fc94c9338', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '01589400f59390352949240162a96874be011f03', class: 'tel__wrapper--flex-label' }, index.h("label", { key: '73beb8ce7ea80ea4fca24db633e021dbab04f9ba', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '56eaf52390a9dd93342324a1bf87a1b7a9f04b97', class: 'tel__wrapper--relative' }, this.tooltip &&
+            index.h("img", { key: '198fc851fb3ea4763607cfe2b0e08414e07adfe5', class: 'tel__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("div", { key: '4cbf87d5e3be55ce0d23ec1ab223e168e4991a9f', class: `tel__wrapper--flex ${invalidClass}` }, index.h("vaadin-combo-box", { key: '3898ad1468b4f03d4ebaf24d0898e70988663f6d', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), index.h("input", { key: '24794f3651771ffbb011ef2048b28b4bc7cba0c7', type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: this.phoneValue, placeholder: `${this.placeholder}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onInput: this.handleInput, onBlur: this.handleBlur })), index.h("small", { key: 'a33de6b2bec2b9dd79fa9960a7bbacc9845d8c51', class: 'tel__error-message' }, this.errorMessage));
     }
     static get watchers() { return {
         "clientStyling": ["handleStylingChange"],
@@ -6805,7 +6824,12 @@ const TextInput = class {
         this.validationPattern = [];
         this.duplicateInputValue = null;
         this.handleInput = (event) => {
-            this.value = event.target.value;
+            const inputElement = event.target;
+            if (this.blockedCharacters) {
+                const blocked = Array.from(this.blockedCharacters);
+                inputElement.value = Array.from(inputElement.value).filter(char => !blocked.includes(char)).join('');
+            }
+            this.value = inputElement.value;
             this.touched = true;
             if (this.debounceTime) {
                 clearTimeout(this.debounceTime);
@@ -6841,6 +6865,7 @@ const TextInput = class {
         this.emitValue = undefined;
         this.isDuplicateInput = undefined;
         this.clientStyling = '';
+        this.blockedCharacters = '';
         this.isValid = undefined;
         this.errorMessage = '';
         this.limitStylingAppends = false;
@@ -7002,8 +7027,8 @@ const TextInput = class {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return index.h("div", { key: 'ffb11cc58b71aac155a22e93e54cf3948cae9f09', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, index.h("div", { key: '6ddf3c4e3e3b2cdbc11f313addcfb3cb262a4c72', class: 'text__wrapper--flex' }, index.h("label", { key: 'ee86d8b65c8a32b749eb50023dfb2c483441d660', class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '578832b95dc33976f2b5b2f3b34a4fa068dcfda3', class: 'text__wrapper--relative' }, this.tooltip &&
-            index.h("img", { key: '9863f5b54e52a3373143b4072766b8c2eecf034c', class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: '1482a7689b99e2e0fc7d4b9d6d4ea3969ffcd7f0', name: this.name, id: `${this.name}__input`, value: this.defaultValue, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { key: '49591466fb0c965e87ee46dee2e14adf07fd8bbf', class: 'text__error-message' }, this.errorMessage));
+        return index.h("div", { key: '045e3183bdb1c7279abbd045043d789387956de5', class: `text__wrapper ${this.name}__input ${this.autofilled ? 'text__wrapper--autofilled' : ''}`, ref: el => this.stylingContainer = el }, index.h("div", { key: '3534d1261f9ccb9c0942f01d0758d9fd65743e40', class: 'text__wrapper--flex' }, index.h("label", { key: '171155d911e2c1048b003be8541671f0cdeb1ce5', class: `text__label  ${this.validation.mandatory ? 'text__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '8a0b0abe15eaf77b5efc5fa6374a8faeea24cf94', class: 'text__wrapper--relative' }, this.tooltip &&
+            index.h("img", { key: 'aa0b0b33cdb370289db8444c3dba915ef8eb77be', class: 'text__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("input", { key: 'cc47bb443384396eefd7bf61f767f8646f7e2639', name: this.name, id: `${this.name}__input`, value: this.defaultValue, type: 'text', class: `text__input ${invalidClass}`, placeholder: `${this.placeholder}`, ref: (el) => this.inputReference = el, readOnly: this.autofilled, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, onInput: this.handleInput, onBlur: this.handleBlur }), index.h("small", { key: 'ce7b97e0a7db8eb87c608690bad3cf99a565ba9f', class: 'text__error-message' }, this.errorMessage));
     }
     static get watchers() { return {
         "defaultValue": ["handleDefaultValueChange"],

package/dist/cjs/{general-input-hsl-263f2b8e.js → general-input-hsl-50b56f15.js}

@@ -6776,6 +6776,9 @@ const GeneralInputHsl = class {
         this.dateFormat = undefined;
         this.translationUrl = '';
         this.emitOnClick = false;
+        this.phoneDigitsOnly = false;
+        this.blockedCharacters = '';
+        this.localizeCountryNames = false;
         this.twofaDestination = undefined;
         this.twofaResendIntervalSeconds = 60;
     }
@@ -6788,7 +6791,7 @@ const GeneralInputHsl = class {
         var _a;
         switch ((_a = this.type) === null || _a === void 0 ? void 0 : _a.toLowerCase()) {
             case 'text':
-                return index.h("text-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder });
+                return index.h("text-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, blockedCharacters: this.blockedCharacters });
             case 'email':
                 return index.h("email-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder });
             case 'number':
@@ -6806,9 +6809,9 @@ const GeneralInputHsl = class {
             case 'radio':
                 return index.h("radio-input", { name: this.name, displayName: this.displayName, optionsGroup: this.options, validation: this.validation, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling });
             case 'tel':
-                return index.h("tel-input", { name: this.name, action: this.action, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, emitValue: this.emitValue, language: this.language, autofilled: this.autofilled, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder });
+                return index.h("tel-input", { name: this.name, action: this.action, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, emitValue: this.emitValue, language: this.language, autofilled: this.autofilled, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, digitsOnly: this.phoneDigitsOnly });
             case 'dropdown':
-                return index.h("select-input", { name: this.name, action: this.action, defaultValue: this.defaultValue, displayName: this.displayName, options: this.options, validation: this.validation, emitValue: this.emitValue, autofilled: this.autofilled, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder });
+                return index.h("select-input", { name: this.name, action: this.action, defaultValue: this.defaultValue, displayName: this.displayName, options: this.options, validation: this.validation, emitValue: this.emitValue, autofilled: this.autofilled, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, localizeCountryNames: this.localizeCountryNames });
             case 'twofa':
                 return index.h("twofa-input", { name: this.name, displayName: this.displayName, validation: this.validation, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, destination: this.twofaDestination, "resend-interval-seconds": this.twofaResendIntervalSeconds });
             default:
@@ -6816,7 +6819,7 @@ const GeneralInputHsl = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'b6eaf7e96d97d180aeae6b100072eaf91291c281', class: `general-input--${this.name}`, onClick: this.handleClick }, this.renderInput()));
+        return (index.h(index.Host, { key: 'c3779b15a91fe9698b84fd17531715de69c03cad', class: `general-input--${this.name}`, onClick: this.handleClick }, this.renderInput()));
     }
 };
 GeneralInputHsl.style = GeneralInputHslStyle0;

package/dist/cjs/general-input-hsl.cjs.js

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["checkbox-group-input_13.cjs",[[1,"general-input-hsl",{"type":[513],"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"action":[513],"validation":[16],"options":[520],"language":[513],"autofilled":[516],"tooltip":[513],"defaultValue":[520,"default-value"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"hidePasswordComplexity":[516,"hide-password-complexity"],"clientStyling":[520,"client-styling"],"dateFormat":[513,"date-format"],"translationUrl":[513,"translation-url"],"emitOnClick":[516,"emit-on-click"],"twofaDestination":[513,"twofa-destination"],"twofaResendIntervalSeconds":[514,"twofa-resend-interval-seconds"]}],[1,"toggle-checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"options":[16],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32],"showFields":[32]},[[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"]}],[1,"checkbox-group-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32],"selectedValues":[32],"showCheckboxes":[32]},[[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"selectedValues":["setValue"],"emitValue":["emitValueHandler"]}],[1,"checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"date-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"dateFormat":[513,"date-format"],"emitOnClick":[516,"emit-on-click"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"email-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[10,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"number-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"password-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"hidePasswordComplexity":[516,"hide-password-complexity"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32],"passwordComplexity":[32],"showPopup":[32],"value":[32]},[[16,"sendOriginalValidityState","originalValidityChangedHandler"],[16,"sendInputValue","valueChangedHandler"],[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"value":["valueChanged"],"emitValue":["emitValueHandler"]}],[1,"radio-input",{"name":[513],"displayName":[513,"display-name"],"optionsGroup":[16],"validation":[16],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"select-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"action":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"tel-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"showLabels":[516,"show-labels"],"action":[513],"validation":[16],"defaultValue":[520,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"text-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"checkValidity":[516,"check-validity"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32],"touched":[32]},[[10,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"],[16,"validationChange","handleValidationChange"]],{"defaultValue":["handleDefaultValueChange"],"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"twofa-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"destination":[513],"resendIntervalSeconds":[514,"resend-interval-seconds"],"clientStyling":[513,"client-styling"],"limitStylingAppends":[32],"isValid":[32],"isResendButtonAvailable":[32],"showTooltip":[32],"errorMessage":[32],"code":[32],"resendIntervalSecondsLeft":[32]},[[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}]]]], options);
+  return index.bootstrapLazy([["checkbox-group-input_13.cjs",[[1,"general-input-hsl",{"type":[513],"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"action":[513],"validation":[16],"options":[520],"language":[513],"autofilled":[516],"tooltip":[513],"defaultValue":[520,"default-value"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"hidePasswordComplexity":[516,"hide-password-complexity"],"clientStyling":[520,"client-styling"],"dateFormat":[513,"date-format"],"translationUrl":[513,"translation-url"],"emitOnClick":[516,"emit-on-click"],"phoneDigitsOnly":[516,"phone-digits-only"],"blockedCharacters":[513,"blocked-characters"],"localizeCountryNames":[516,"localize-country-names"],"twofaDestination":[513,"twofa-destination"],"twofaResendIntervalSeconds":[514,"twofa-resend-interval-seconds"]}],[1,"toggle-checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"options":[16],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32],"showFields":[32]},[[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"]}],[1,"checkbox-group-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32],"selectedValues":[32],"showCheckboxes":[32]},[[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"selectedValues":["setValue"],"emitValue":["emitValueHandler"]}],[1,"checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"date-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"dateFormat":[513,"date-format"],"emitOnClick":[516,"emit-on-click"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"email-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[10,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"number-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"password-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"hidePasswordComplexity":[516,"hide-password-complexity"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32],"passwordComplexity":[32],"showPopup":[32],"value":[32]},[[16,"sendOriginalValidityState","originalValidityChangedHandler"],[16,"sendInputValue","valueChangedHandler"],[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"value":["valueChanged"],"emitValue":["emitValueHandler"]}],[1,"radio-input",{"name":[513],"displayName":[513,"display-name"],"optionsGroup":[16],"validation":[16],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"select-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"action":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"options":[16],"validation":[16],"language":[513],"localizeCountryNames":[516,"localize-country-names"],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"tel-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"showLabels":[516,"show-labels"],"action":[513],"validation":[16],"defaultValue":[520,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"digitsOnly":[516,"digits-only"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"text-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"checkValidity":[516,"check-validity"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"blockedCharacters":[513,"blocked-characters"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32],"touched":[32]},[[10,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"],[16,"validationChange","handleValidationChange"]],{"defaultValue":["handleDefaultValueChange"],"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"twofa-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"destination":[513],"resendIntervalSeconds":[514,"resend-interval-seconds"],"clientStyling":[513,"client-styling"],"limitStylingAppends":[32],"isValid":[32],"isResendButtonAvailable":[32],"showTooltip":[32],"errorMessage":[32],"code":[32],"resendIntervalSecondsLeft":[32]},[[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const generalInputHsl = require('./general-input-hsl-263f2b8e.js');
+const generalInputHsl = require('./general-input-hsl-50b56f15.js');
 require('./index-160616a9.js');
 
 

package/dist/cjs/loader.cjs.js

@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["checkbox-group-input_13.cjs",[[1,"general-input-hsl",{"type":[513],"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"action":[513],"validation":[16],"options":[520],"language":[513],"autofilled":[516],"tooltip":[513],"defaultValue":[520,"default-value"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"hidePasswordComplexity":[516,"hide-password-complexity"],"clientStyling":[520,"client-styling"],"dateFormat":[513,"date-format"],"translationUrl":[513,"translation-url"],"emitOnClick":[516,"emit-on-click"],"twofaDestination":[513,"twofa-destination"],"twofaResendIntervalSeconds":[514,"twofa-resend-interval-seconds"]}],[1,"toggle-checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"options":[16],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32],"showFields":[32]},[[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"]}],[1,"checkbox-group-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32],"selectedValues":[32],"showCheckboxes":[32]},[[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"selectedValues":["setValue"],"emitValue":["emitValueHandler"]}],[1,"checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"date-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"dateFormat":[513,"date-format"],"emitOnClick":[516,"emit-on-click"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"email-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[10,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"number-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"password-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"hidePasswordComplexity":[516,"hide-password-complexity"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32],"passwordComplexity":[32],"showPopup":[32],"value":[32]},[[16,"sendOriginalValidityState","originalValidityChangedHandler"],[16,"sendInputValue","valueChangedHandler"],[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"value":["valueChanged"],"emitValue":["emitValueHandler"]}],[1,"radio-input",{"name":[513],"displayName":[513,"display-name"],"optionsGroup":[16],"validation":[16],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"select-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"action":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"tel-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"showLabels":[516,"show-labels"],"action":[513],"validation":[16],"defaultValue":[520,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"text-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"checkValidity":[516,"check-validity"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32],"touched":[32]},[[10,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"],[16,"validationChange","handleValidationChange"]],{"defaultValue":["handleDefaultValueChange"],"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"twofa-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"destination":[513],"resendIntervalSeconds":[514,"resend-interval-seconds"],"clientStyling":[513,"client-styling"],"limitStylingAppends":[32],"isValid":[32],"isResendButtonAvailable":[32],"showTooltip":[32],"errorMessage":[32],"code":[32],"resendIntervalSecondsLeft":[32]},[[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}]]]], options);
+  return index.bootstrapLazy([["checkbox-group-input_13.cjs",[[1,"general-input-hsl",{"type":[513],"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"action":[513],"validation":[16],"options":[520],"language":[513],"autofilled":[516],"tooltip":[513],"defaultValue":[520,"default-value"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"hidePasswordComplexity":[516,"hide-password-complexity"],"clientStyling":[520,"client-styling"],"dateFormat":[513,"date-format"],"translationUrl":[513,"translation-url"],"emitOnClick":[516,"emit-on-click"],"phoneDigitsOnly":[516,"phone-digits-only"],"blockedCharacters":[513,"blocked-characters"],"localizeCountryNames":[516,"localize-country-names"],"twofaDestination":[513,"twofa-destination"],"twofaResendIntervalSeconds":[514,"twofa-resend-interval-seconds"]}],[1,"toggle-checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"options":[16],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32],"showFields":[32]},[[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"]}],[1,"checkbox-group-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"options":[16],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32],"selectedValues":[32],"showCheckboxes":[32]},[[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"selectedValues":["setValue"],"emitValue":["emitValueHandler"]}],[1,"checkbox-input",{"name":[513],"displayName":[513,"display-name"],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"date-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"dateFormat":[513,"date-format"],"emitOnClick":[516,"emit-on-click"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"email-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[10,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"number-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"password-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"validation":[16],"language":[513],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"hidePasswordComplexity":[516,"hide-password-complexity"],"clientStyling":[513,"client-styling"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32],"passwordComplexity":[32],"showPopup":[32],"value":[32]},[[16,"sendOriginalValidityState","originalValidityChangedHandler"],[16,"sendInputValue","valueChangedHandler"],[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"value":["valueChanged"],"emitValue":["emitValueHandler"]}],[1,"radio-input",{"name":[513],"displayName":[513,"display-name"],"optionsGroup":[16],"validation":[16],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"select-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"action":[513],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"options":[16],"validation":[16],"language":[513],"localizeCountryNames":[516,"localize-country-names"],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"errorMessage":[32],"isValid":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"tel-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"showLabels":[516,"show-labels"],"action":[513],"validation":[16],"defaultValue":[520,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"clientStyling":[513,"client-styling"],"digitsOnly":[516,"digits-only"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32]},[[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"text-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"defaultValue":[513,"default-value"],"autofilled":[516],"tooltip":[513],"language":[513],"checkValidity":[516,"check-validity"],"emitValue":[516,"emit-value"],"isDuplicateInput":[516,"is-duplicate-input"],"clientStyling":[513,"client-styling"],"blockedCharacters":[513,"blocked-characters"],"isValid":[32],"errorMessage":[32],"limitStylingAppends":[32],"showTooltip":[32],"touched":[32]},[[10,"click","handleClickOutside"],[16,"sendInputValue","valueChangedHandler"],[16,"validationChange","handleValidationChange"]],{"defaultValue":["handleDefaultValueChange"],"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}],[1,"twofa-input",{"name":[513],"displayName":[513,"display-name"],"placeholder":[513],"validation":[16],"tooltip":[513],"language":[513],"emitValue":[516,"emit-value"],"destination":[513],"resendIntervalSeconds":[514,"resend-interval-seconds"],"clientStyling":[513,"client-styling"],"limitStylingAppends":[32],"isValid":[32],"isResendButtonAvailable":[32],"showTooltip":[32],"errorMessage":[32],"code":[32],"resendIntervalSecondsLeft":[32]},[[10,"click","handleClickOutside"]],{"clientStyling":["handleStylingChange"],"isValid":["validityChanged"],"emitValue":["emitValueHandler"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/general-input-hsl/general-input-hsl.js

@@ -27,6 +27,9 @@ export class GeneralInputHsl {
         this.dateFormat = undefined;
         this.translationUrl = '';
         this.emitOnClick = false;
+        this.phoneDigitsOnly = false;
+        this.blockedCharacters = '';
+        this.localizeCountryNames = false;
         this.twofaDestination = undefined;
         this.twofaResendIntervalSeconds = 60;
     }
@@ -39,7 +42,7 @@ export class GeneralInputHsl {
         var _a;
         switch ((_a = this.type) === null || _a === void 0 ? void 0 : _a.toLowerCase()) {
             case 'text':
-                return h("text-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder });
+                return h("text-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, blockedCharacters: this.blockedCharacters });
             case 'email':
                 return h("email-input", { name: this.name, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, autofilled: this.autofilled, emitValue: this.emitValue, language: this.language, isDuplicateInput: this.isDuplicateInput, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder });
             case 'number':
@@ -57,9 +60,9 @@ export class GeneralInputHsl {
             case 'radio':
                 return h("radio-input", { name: this.name, displayName: this.displayName, optionsGroup: this.options, validation: this.validation, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling });
             case 'tel':
-                return h("tel-input", { name: this.name, action: this.action, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, emitValue: this.emitValue, language: this.language, autofilled: this.autofilled, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder });
+                return h("tel-input", { name: this.name, action: this.action, displayName: this.displayName, validation: this.validation, defaultValue: this.defaultValue, emitValue: this.emitValue, language: this.language, autofilled: this.autofilled, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, digitsOnly: this.phoneDigitsOnly });
             case 'dropdown':
-                return h("select-input", { name: this.name, action: this.action, defaultValue: this.defaultValue, displayName: this.displayName, options: this.options, validation: this.validation, emitValue: this.emitValue, autofilled: this.autofilled, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder });
+                return h("select-input", { name: this.name, action: this.action, defaultValue: this.defaultValue, displayName: this.displayName, options: this.options, validation: this.validation, emitValue: this.emitValue, autofilled: this.autofilled, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, placeholder: this.placeholder, localizeCountryNames: this.localizeCountryNames });
             case 'twofa':
                 return h("twofa-input", { name: this.name, displayName: this.displayName, validation: this.validation, emitValue: this.emitValue, language: this.language, "client-styling": this.clientStyling, tooltip: this.tooltip, destination: this.twofaDestination, "resend-interval-seconds": this.twofaResendIntervalSeconds });
             default:
@@ -67,7 +70,7 @@ export class GeneralInputHsl {
         }
     }
     render() {
-        return (h(Host, { key: 'b6eaf7e96d97d180aeae6b100072eaf91291c281', class: `general-input--${this.name}`, onClick: this.handleClick }, this.renderInput()));
+        return (h(Host, { key: 'c3779b15a91fe9698b84fd17531715de69c03cad', class: `general-input--${this.name}`, onClick: this.handleClick }, this.renderInput()));
     }
     static get is() { return "general-input-hsl"; }
     static get encapsulation() { return "shadow"; }
@@ -398,6 +401,60 @@ export class GeneralInputHsl {
                 "reflect": true,
                 "defaultValue": "false"
             },
+            "phoneDigitsOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Only digits can be entered in `tel` inputs."
+                },
+                "attribute": "phone-digits-only",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "blockedCharacters": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Characters that cannot be entered in `text` inputs."
+                },
+                "attribute": "blocked-characters",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "localizeCountryNames": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Translate country names (dropdowns loaded from an action endpoint) to the current language."
+                },
+                "attribute": "localize-country-names",
+                "reflect": true,
+                "defaultValue": "false"
+            },
             "twofaDestination": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/select-input/select-input.js

@@ -52,6 +52,7 @@ export class SelectInput {
         this.options = [];
         this.validation = undefined;
         this.language = undefined;
+        this.localizeCountryNames = false;
         this.emitValue = undefined;
         this.clientStyling = '';
         this.errorMessage = undefined;
@@ -92,15 +93,28 @@ export class SelectInput {
             value: option.value
         }));
     }
+    // The endpoint returns English country names, so they are translated by Alpha2Code for the current language.
+    getLocalizedCountryName(alpha2Code, fallbackName) {
+        try {
+            return new Intl.DisplayNames([this.language], { type: 'region' }).of(alpha2Code) || fallbackName;
+        }
+        catch (_a) {
+            return fallbackName;
+        }
+    }
     componentWillLoad() {
         if (this.action && !this.options.length) {
             if (this.action.split(" ")[0] == 'GET') {
                 const endpoint = this.action.split(" ")[1];
                 return this.getOptions(endpoint).then((options) => {
                     const firstKey = Object.keys(options)[0];
-                    this.displayedOptions = options[firstKey].map(option => {
-                        return { label: option.Name, value: option.Alpha2Code };
-                    });
+                    this.displayedOptions = options[firstKey].map(option => ({
+                        label: this.localizeCountryNames ? this.getLocalizedCountryName(option.Alpha2Code, option.Name) : option.Name,
+                        value: option.Alpha2Code
+                    }));
+                    if (this.localizeCountryNames) {
+                        this.displayedOptions.sort((a, b) => a.label.localeCompare(b.label, this.language));
+                    }
                 });
             }
         }
@@ -177,8 +191,8 @@ export class SelectInput {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return h("div", { key: 'ec7d68885b1354f320075be819284bd43d651f5c', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''}  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: 'c718c36b80341506d0ad303541b21b60853424e9', class: 'select__wrapper--flex' }, h("label", { key: '6b90cad1ad83768ee4ad8495c1c7a0eb8e2d4941', class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), h("div", { key: 'bc98b947de3cfaf89a90f2be1e37bd01ac951261', class: 'select__wrapper--relative' }, this.tooltip &&
-            h("img", { key: 'ffae584b4cd766dc4285b8b216a09ecaeccafb95', class: 'select__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("vaadin-combo-box", { key: 'f385e1ee1b8cd2ae12049178f6be70c25408a6bf', name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass} ${this.autofilled ? 'select__input--autofilled' : ''}`, "item-label-path": "label", "item-value-path": "value", ref: (el) => this.vaadinCombo = el, readOnly: this.autofilled, required: (_a = this.validation) === null || _a === void 0 ? void 0 : _a.mandatory, value: this.value, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleComboChange, onBlur: this.handleBlur }), h("small", { key: '8473fb2ec7c5dfa24b0fda25c1d0918d48d0b7bf', class: 'select__error-message' }, this.errorMessage));
+        return h("div", { key: '33eea13cc24122999ccfdc7793c20e4746a3b93c', class: `select__wrapper ${this.autofilled ? 'select__wrapper--autofilled' : ''}  ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '6440da5de357c8957cb1b712ffd3efa13334a564', class: 'select__wrapper--flex' }, h("label", { key: 'dc43204b94bedd5777c87f8ba1c319ddfb5a4292', class: 'select__label', htmlFor: `${this.name}__input` }, `${this.displayName} ${this.validation.mandatory ? '*' : ''}`), h("div", { key: '529c7829fcfce6f0cc206a15b61fde6862f5b38d', class: 'select__wrapper--relative' }, this.tooltip &&
+            h("img", { key: '4280fb7bbe45621a69e1a7d78d8d8c766bf507ca', class: 'select__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("vaadin-combo-box", { key: '136d577141f6cdb1c06287b6eabe5bd9243d8058', name: this.name, id: `${this.name}__input`, class: `select__input ${invalidClass} ${this.autofilled ? 'select__input--autofilled' : ''}`, "item-label-path": "label", "item-value-path": "value", ref: (el) => this.vaadinCombo = el, readOnly: this.autofilled, required: (_a = this.validation) === null || _a === void 0 ? void 0 : _a.mandatory, value: this.value, placeholder: `${this.placeholder}`, items: this.displayedOptions, onChange: this.handleComboChange, onBlur: this.handleBlur }), h("small", { key: '84f398b8235d9e57ea5408f6c5eb7032b89df862', class: 'select__error-message' }, this.errorMessage));
     }
     static get is() { return "select-input"; }
     static get encapsulation() { return "shadow"; }
@@ -374,6 +388,24 @@ export class SelectInput {
                 "attribute": "language",
                 "reflect": true
             },
+            "localizeCountryNames": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, country names loaded from the action endpoint are translated to the current language."
+                },
+                "attribute": "localize-country-names",
+                "reflect": true,
+                "defaultValue": "false"
+            },
             "emitValue": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/tel-input/tel-input.js

@@ -6,7 +6,11 @@ export class TelInput {
         this.validationPattern = '';
         this.touched = false;
         this.handleInput = (event) => {
-            this.phoneValue = event.target.value;
+            const inputElement = event.target;
+            if (this.digitsOnly) {
+                inputElement.value = inputElement.value.replace(/\D/g, '');
+            }
+            this.phoneValue = inputElement.value;
             this.value = { prefix: this.prefixValue, phone: this.phoneValue };
             this.touched = true;
             if (this.debounceTime) {
@@ -42,6 +46,7 @@ export class TelInput {
         this.language = undefined;
         this.emitValue = undefined;
         this.clientStyling = '';
+        this.digitsOnly = false;
         this.isValid = undefined;
         this.errorMessage = undefined;
         this.limitStylingAppends = false;
@@ -163,8 +168,8 @@ export class TelInput {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return h("div", { key: 'c7d032ca77d84df7afa4c1e727096d78b2f4e648', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: 'df166d6dc5f020edc1d4502f20ede76b7796324e', class: 'tel__wrapper--flex-label' }, h("label", { key: '870d566c29df1a20d1bdc33d6e58e935f6f5c36f', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '7bc701596b6b06cd20c68e575af255468a4d0b1a', class: 'tel__wrapper--relative' }, this.tooltip &&
-            h("img", { key: '04d00cf8bfd06730abd304e8467ded4b0fa80e7c', class: 'tel__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("div", { key: 'aee77f8937b6d89f13f8bcc659d1c5e955ba7d13', class: `tel__wrapper--flex ${invalidClass}` }, h("vaadin-combo-box", { key: '02ef60a7235d38709c661eafe4094f5e43909ca5', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), h("input", { key: '11e7b3625d34789e59f5784c2a164d5322bab07d', type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: this.phoneValue, placeholder: `${this.placeholder}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onInput: this.handleInput, onBlur: this.handleBlur })), h("small", { key: '4c85018d23278bd3681dad20f22dc52168c121e4', class: 'tel__error-message' }, this.errorMessage));
+        return h("div", { key: '8a75a1a66dae4a9f453487be42c8563fc94c9338', class: `tel__wrapper ${this.autofilled ? 'tel__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '01589400f59390352949240162a96874be011f03', class: 'tel__wrapper--flex-label' }, h("label", { key: '73beb8ce7ea80ea4fca24db633e021dbab04f9ba', class: `tel__label ${this.validation.mandatory ? 'tel__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '56eaf52390a9dd93342324a1bf87a1b7a9f04b97', class: 'tel__wrapper--relative' }, this.tooltip &&
+            h("img", { key: '198fc851fb3ea4763607cfe2b0e08414e07adfe5', class: 'tel__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("div", { key: '4cbf87d5e3be55ce0d23ec1ab223e168e4991a9f', class: `tel__wrapper--flex ${invalidClass}` }, h("vaadin-combo-box", { key: '3898ad1468b4f03d4ebaf24d0898e70988663f6d', class: 'tel__prefix', items: this.phoneCodesOptions, value: this.prefixValue, readOnly: this.autofilled, onChange: (e) => this.handlePrefixInput(e) }), h("input", { key: '24794f3651771ffbb011ef2048b28b4bc7cba0c7', type: "tel", ref: (el) => this.inputReference = el, id: `${this.name}__input`, readOnly: this.autofilled, class: `tel__input`, value: this.phoneValue, placeholder: `${this.placeholder}`, required: this.validation.mandatory, minlength: this.validation.minLength, maxlength: this.validation.maxLength, pattern: this.validationPattern, onInput: this.handleInput, onBlur: this.handleBlur })), h("small", { key: 'a33de6b2bec2b9dd79fa9960a7bbacc9845d8c51', class: 'tel__error-message' }, this.errorMessage));
     }
     static get is() { return "tel-input"; }
     static get encapsulation() { return "shadow"; }
@@ -388,6 +393,24 @@ export class TelInput {
                 "attribute": "client-styling",
                 "reflect": true,
                 "defaultValue": "''"
+            },
+            "digitsOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, only digits can be entered in the phone number."
+                },
+                "attribute": "digits-only",
+                "reflect": true,
+                "defaultValue": "false"
             }
         };
     }