q2-tecton-elements 1.13.0-alpha.0 → 1.13.0

package/dist/esm/q2-input.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-be8376c0.js';
-import { c as createGuid, b as setMessageHeight, h as handleAriaLabel, o as overrideFocus, l as loc, i as isEventFromElement, m as messagesDOM, d as labelDOM } from './index-ec6660af.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-dbfb3ecc.js';
+import { c as createGuid, d as setMessageHeight, h as handleAriaLabel, o as overrideFocus, l as loc, i as isEventFromElement, m as messagesDOM, e as labelDOM } from './index-0ff8de52.js';
 
 function formatNumber(val = '', options = {
   prefix: '',
@@ -8,15 +8,14 @@ function formatNumber(val = '', options = {
   decimalSeparator: '.',
   thousandsSeparator: '',
   allowDecimal: false,
-  allowNegative: true
+  allowNegative: true,
 }, explicit = false) {
   const isNegative = val[0] === '-';
   let value = val;
   const allowDecimal = !!options.allowDecimal && !!options.decimals;
   if (explicit) {
     const parsedValue = value.replace(/[^\d.]/g, '');
-    value =
-      (parsedValue && Number(parsedValue).toFixed(allowDecimal ? options.decimals : 0)) || '';
+    value = (parsedValue && Number(parsedValue).toFixed(allowDecimal ? options.decimals : 0)) || '';
   }
   value = value.replace(/[^\d]/g, '');
   let { integerString, decimalString } = splitValue(value, allowDecimal, options.decimals);
@@ -31,9 +30,7 @@ function formatNumber(val = '', options = {
   value = `${negativeSymbol}${integerString}${decimalSeparator}${decimalString}`;
   // format integerString
   integerString = integerString.replace(/\B(?=(\d{3})+(?!\d))/g, options.thousandsSeparator);
-  const formattedValue = negativeSymbol || integerString
-    ? `${negativeSymbol}${integerString}${decimalSeparator}${decimalString}`
-    : '';
+  const formattedValue = negativeSymbol || integerString ? `${negativeSymbol}${integerString}${decimalSeparator}${decimalString}` : '';
   const fullyFormattedValue = negativeSymbol || integerString
     ? `${negativeSymbol}${options.prefix}${integerString}${decimalSeparator}${decimalString}${options.suffix}`
     : '';
@@ -52,14 +49,14 @@ function formatNumber(val = '', options = {
     suffix: '',
     formattingCharacterCount,
     maxlength,
-    unformattedValue
+    unformattedValue,
   };
 }
 function splitValue(value, allowDecimal = false, decimals) {
   if (!allowDecimal) {
     return {
       integerString: value,
-      decimalString: ''
+      decimalString: '',
     };
   }
   const splitIndex = value.length - decimals;
@@ -70,7 +67,7 @@ function splitValue(value, allowDecimal = false, decimals) {
   const decimalString = value.substring(splitIndex).padStart(decimals, '0');
   return {
     integerString,
-    decimalString
+    decimalString,
   };
 }
 
@@ -85,7 +82,7 @@ function formatValue(value = '', mask = '', options) {
       fullyFormattedValue,
       prefix: prefix.trim() || suffix.trim(),
       formattingCharacterCount: 0,
-      unformattedValue: value
+      unformattedValue: value,
     };
   }
   const { unformattedValue, formattedValue, formattingCharacterCount } = generateMask(value, mask);
@@ -100,7 +97,7 @@ function formatValue(value = '', mask = '', options) {
     formattingCharacterCount,
     maxlength,
     minFormattedLength,
-    unformattedValue
+    unformattedValue,
   };
 }
 const optionalValidatingChars = ['?'];
@@ -112,8 +109,8 @@ function isKnownValidatingChar(character) {
   return knownValidatingChars.includes(character);
 }
 function getStaticFormattingChars(mask) {
-  let knownChars = knownValidatingChars.join('|');
-  let formattingChars = mask.replace(new RegExp(`[${knownChars}]`, 'g'), '').split('');
+  const knownChars = knownValidatingChars.join('|');
+  const formattingChars = mask.replace(new RegExp(`[${knownChars}]`, 'g'), '').split('');
   return new Set(formattingChars);
 }
 function isStaticFormattingChar(character, formattingChars) {
@@ -140,7 +137,7 @@ function getValidatedChar(char, matcher) {
 }
 function generateMask(value, mask) {
   const maskArray = mask.split('');
-  let formattingChars = getStaticFormattingChars(mask);
+  const formattingChars = getStaticFormattingChars(mask);
   let currentValueIndex = 0;
   let formattingCharacterCount = 0;
   let unformattedValue = '';
@@ -148,8 +145,7 @@ function generateMask(value, mask) {
     if (currentValueIndex >= value.length) {
       return acc;
     }
-    if (isOptionalValidatingChar(character) &&
-      isStaticFormattingChar(value[currentValueIndex], formattingChars)) {
+    if (isOptionalValidatingChar(character) && isStaticFormattingChar(value[currentValueIndex], formattingChars)) {
       return acc;
     }
     if (isKnownValidatingChar(character)) {
@@ -177,7 +173,7 @@ function generateMask(value, mask) {
   return {
     unformattedValue,
     formattedValue,
-    formattingCharacterCount
+    formattingCharacterCount,
   };
 }
 function getNextNonFormattingCharIndex(value, currentValueIndex, formattingChars) {
@@ -200,1128 +196,1128 @@ const currencyFormats = {
     suffix: 'د.إ',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   AFN: {
     prefix: '¤',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   ALL: {
     prefix: 'L',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   AMD: {
     prefix: 'դր.',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   ANG: {
     prefix: 'ƒ',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   AOA: {
     prefix: 'Kz',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   ARS: {
     prefix: '$',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   AUD: {
     prefix: '$',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   AWG: {
     prefix: 'ƒ',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   AZN: {
     prefix: '¤',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   BAM: {
     prefix: 'КМ',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   BBD: {
     prefix: '$',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   BDT: {
     prefix: '৳',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   BGN: {
     prefix: '৳',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   BHD: {
     prefix: '',
     suffix: 'ب.د',
     decimals: 3,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   BIF: {
     prefix: 'Fr',
     suffix: '',
     decimals: 0,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   BMD: {
     prefix: '$',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   BND: {
     prefix: '$',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   BOB: {
     prefix: 'Bs.',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   BRL: {
     prefix: 'R$',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   BSD: {
     prefix: '$',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   BTN: {
     prefix: '¤',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   BWP: {
     prefix: 'P',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   BYN: {
     prefix: 'Br',
     suffix: '',
     decimals: 0,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   BZD: {
     prefix: '$',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   CAD: {
     prefix: '$',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   CDF: {
     prefix: 'Fr',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   CHF: {
     prefix: 'Fr',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   CLF: {
     prefix: 'Fr',
     suffix: '',
     decimals: 4,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   CLP: {
     prefix: '$',
     suffix: '',
     decimals: 0,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   CNY: {
     prefix: '¥',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   COP: {
     prefix: '$',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   CRC: {
     prefix: '₡',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   CUC: {
     prefix: '$',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   CUP: {
     prefix: '$',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   CVE: {
     prefix: '$',
     suffix: '',
     decimals: 0,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   CZK: {
     prefix: 'Kč',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   DJF: {
     prefix: 'Fr',
     suffix: '',
     decimals: 0,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   DKK: {
     prefix: 'kr',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   DOP: {
     prefix: '$',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   DZD: {
     prefix: '',
     suffix: 'د.ج',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   EEK: {
     prefix: 'KR',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   EGP: {
     prefix: '£',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   ERN: {
     prefix: 'Nfk',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   ETB: {
     prefix: '¤',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   EUR: {
     prefix: '€',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   FJD: {
     prefix: '$',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   FKP: {
     prefix: '£',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   GBP: {
     prefix: '£',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   GEL: {
     prefix: 'ლ',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   GHS: {
     prefix: '¤',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   GIP: {
     prefix: '£',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   GMD: {
     prefix: 'D',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   GNF: {
     prefix: 'Fr',
     suffix: '',
     decimals: 0,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   GTQ: {
     prefix: 'Q',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   GYD: {
     prefix: '$',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   HKD: {
     prefix: '$',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   HNL: {
     prefix: 'L',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   HRK: {
     prefix: 'kn',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   HTG: {
     prefix: 'G',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   HUF: {
     prefix: 'Ft',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   IDR: {
     prefix: 'Rs',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   ILS: {
     prefix: '₪',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   INR: {
     prefix: '₨',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   IQD: {
     prefix: '',
     suffix: 'ع.د',
     decimals: 3,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   IRR: {
     prefix: '¤',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   ISK: {
     prefix: 'kr',
     suffix: '',
     decimals: 0,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   JMD: {
     prefix: '$',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   JOD: {
     prefix: '',
     suffix: 'د.ا',
     decimals: 3,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   JPY: {
     prefix: '¥',
     suffix: '',
     decimals: 0,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   KES: {
     prefix: 'Sh',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   KGS: {
     prefix: '¤',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   KHR: {
     prefix: '¤',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   KMF: {
     prefix: 'Fr',
     suffix: '',
     decimals: 0,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   KPW: {
     prefix: '₩',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   KRW: {
     prefix: '₩',
     suffix: '',
     decimals: 0,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   KWD: {
     prefix: 'د.ك',
     suffix: '',
     decimals: 3,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   KYD: {
     prefix: '$',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   KZT: {
     prefix: '〒',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   LAK: {
     prefix: '₭',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   LBP: {
     prefix: '',
     suffix: 'ل.ل',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   LKR: {
     prefix: 'Rs',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   LRD: {
     prefix: '$',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   LSL: {
     prefix: 'L',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   LTL: {
     prefix: 'Lt',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   LVL: {
     prefix: 'Ls',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   LYD: {
     prefix: '',
     suffix: 'ل.د',
     decimals: 3,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   MAD: {
     prefix: '',
     suffix: 'د.م.',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   MDL: {
     prefix: 'L',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   MGA: {
     prefix: '¤',
     suffix: '',
     decimals: 1,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   MKD: {
     prefix: 'ден',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   MMK: {
     prefix: 'K',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   MNT: {
     prefix: '₮',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   MOP: {
     prefix: 'P',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   MRU: {
     prefix: 'UM',
     suffix: '',
     decimals: 1,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   MUR: {
     prefix: '₨',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   MVR: {
     prefix: '¤',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   MWK: {
     prefix: 'MK',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   MXN: {
     prefix: '$',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   MYR: {
     prefix: 'RM',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   MZN: {
     prefix: 'MTn',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   NAD: {
     prefix: '$',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   NGN: {
     prefix: '₦',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   NIO: {
     prefix: 'C$',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   NOK: {
     prefix: 'kr',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   NPR: {
     prefix: '₨',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   NZD: {
     prefix: '$',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   OMR: {
     prefix: '',
     suffix: 'ر.ع.',
     decimals: 3,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   PAB: {
     prefix: 'B/.',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   PEN: {
     prefix: 'S/.',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   PGK: {
     prefix: 'K',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   PHP: {
     prefix: 'p',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   PKR: {
     prefix: '₨',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   PLN: {
     prefix: 'zł',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   PYG: {
     prefix: '¤',
     suffix: '',
     decimals: 0,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   QAR: {
     prefix: '',
     suffix: 'ر.ق',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   RON: {
     prefix: 'L',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   RSD: {
     prefix: 'дин.',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   RUB: {
     prefix: 'руб.',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   RWF: {
     prefix: 'Fr',
     suffix: '',
     decimals: 0,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   SAR: {
     prefix: '',
     suffix: 'ر.س',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   SBD: {
     prefix: '$',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   SCR: {
     prefix: '₨',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   SDG: {
     prefix: '£',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   SEK: {
     prefix: 'kr',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   SGD: {
     prefix: '$',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   SHP: {
     prefix: '£',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   SKK: {
     prefix: 'Sk',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   SLL: {
     prefix: 'Le',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   SOS: {
     prefix: 'Sh',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   SRD: {
     prefix: '$',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   STN: {
     prefix: 'Db',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   SVC: {
     prefix: '₡',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   SYP: {
     prefix: '£',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   SZL: {
     prefix: 'L',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   THB: {
     prefix: '฿',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   TJS: {
     prefix: 'ЅМ',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   TMM: {
     prefix: 'm',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   TND: {
     prefix: '',
     suffix: 'د.ت',
     decimals: 3,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   TOP: {
     prefix: 'T$',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   TRY: {
     prefix: 'YTL',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   TTD: {
     prefix: '$',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   TWD: {
     prefix: '$',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   TZS: {
     prefix: 'Sh',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   UAH: {
     prefix: '¤',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   UGX: {
     prefix: 'Sh',
     suffix: '',
     decimals: 0,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   USD: {
     prefix: '$',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   UYU: {
     prefix: '$',
     suffix: '',
     decimals: 0,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   UZS: {
     prefix: '¤',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   VEF: {
     prefix: 'Bs F',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   VND: {
     prefix: '₫',
     suffix: '',
     decimals: 0,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   VUV: {
     prefix: 'Vt',
     suffix: '',
     decimals: 0,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   WST: {
     prefix: 'T',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   XAF: {
     prefix: 'Fr',
     suffix: '',
     decimals: 0,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   XCD: {
     prefix: '$',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   XOF: {
     prefix: 'Fr',
     suffix: '',
     decimals: 0,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   XPF: {
     prefix: 'Fr',
     suffix: '',
     decimals: 0,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   YER: {
     prefix: '¤',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   ZAR: {
     prefix: 'R',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   ZMW: {
     prefix: 'ZK',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
+    thousandsSeparator: ',',
   },
   ZWD: {
     prefix: '$',
     suffix: '',
     decimals: 2,
     decimalSeparator: '.',
-    thousandsSeparator: ','
-  } // '$9,999.99'
+    thousandsSeparator: ',',
+  }, // '$9,999.99'
 };
 function formatCurrency(value, currencyCode = 'USD', explicit = false) {
   let processedCurrencyCode = currencyCode || '';
@@ -1341,52 +1337,52 @@ function formatCurrency(value, currencyCode = 'USD', explicit = false) {
 const phoneNumberFormats = {
   AF: {
     mask: '(##) #######',
-    prefix: '+93 '
+    prefix: '+93 ',
   },
   AL: {
     mask: '#######',
-    prefix: '+355 '
+    prefix: '+355 ',
   },
   DZ: {
     mask: '(##) ###-###',
-    prefix: '+213 '
+    prefix: '+213 ',
   },
   // AS
   AD: {
     mask: '(#) #####',
-    prefix: '+376 '
+    prefix: '+376 ',
   },
   AO: {
     mask: '#########',
-    prefix: '+244 '
+    prefix: '+244 ',
   },
   AI: {
     mask: '(###) ###-####',
-    prefix: '+1 '
+    prefix: '+1 ',
   },
   AG: {
     mask: '(###) ###-####',
-    prefix: '+1 '
+    prefix: '+1 ',
   },
   AR: {
     mask: '##########',
-    prefix: '+54 '
+    prefix: '+54 ',
   },
   AM: {
     mask: '########',
-    prefix: '+375 '
+    prefix: '+375 ',
   },
   AQ: {
     mask: '##-####',
-    prefix: '+672 '
+    prefix: '+672 ',
   },
   AW: {
     mask: '###-####',
-    prefix: '+297 '
+    prefix: '+297 ',
   },
   AU: {
     mask: '(##) ####-####',
-    prefix: '+61 '
+    prefix: '+61 ',
   },
   /* AT: {
       mask:'####?????????',
@@ -1394,7 +1390,7 @@ const phoneNumberFormats = {
   }, */
   AT: {
     mask: '#############',
-    prefix: '+43 '
+    prefix: '+43 ',
   },
   /* AZ: {
       mask:'########?',
@@ -1402,15 +1398,15 @@ const phoneNumberFormats = {
   }, */
   AZ: {
     mask: '#########',
-    prefix: '+994 '
+    prefix: '+994 ',
   },
   BS: {
     mask: '(###) ###-####',
-    prefix: '+1 '
+    prefix: '+1 ',
   },
   BH: {
     mask: '####-####',
-    prefix: '+973 '
+    prefix: '+973 ',
   },
   /* BD: {
       mask:'#######??',
@@ -1418,43 +1414,43 @@ const phoneNumberFormats = {
   }, */
   BD: {
     mask: '#########',
-    prefix: '+880 '
+    prefix: '+880 ',
   },
   BB: {
     mask: '(###) ###-####',
-    prefix: '+1 '
+    prefix: '+1 ',
   },
   BY: {
     mask: '#########',
-    prefix: '+375 '
+    prefix: '+375 ',
   },
   BE: {
     mask: '########??',
-    prefix: '+32 '
+    prefix: '+32 ',
   },
   BZ: {
     mask: '#######',
-    prefix: '+501 '
+    prefix: '+501 ',
   },
   BJ: {
     mask: '(##) ###-###',
-    prefix: '+229 '
+    prefix: '+229 ',
   },
   BM: {
     mask: '(###) ###-####',
-    prefix: '+1 '
+    prefix: '+1 ',
   },
   BT: {
     mask: '(#) ###-###',
-    prefix: '+975 '
+    prefix: '+975 ',
   },
   BO: {
     mask: '(#) ###-####',
-    prefix: '+591 '
+    prefix: '+591 ',
   },
   BA: {
     mask: '(##) ##-##-##',
-    prefix: '+387 '
+    prefix: '+387 ',
   },
   /* BW: {
       mask:'#######?',
@@ -1462,55 +1458,55 @@ const phoneNumberFormats = {
   }, */
   BW: {
     mask: '########',
-    prefix: '+267 '
+    prefix: '+267 ',
   },
   BR: {
     mask: '(##) ####-####',
-    prefix: '+55 '
+    prefix: '+55 ',
   },
   BN: {
     mask: '###-####',
-    prefix: '+673 '
+    prefix: '+673 ',
   },
   BG: {
     mask: '#######?',
-    prefix: '+359 '
+    prefix: '+359 ',
   },
   BF: {
     mask: '##-##-##-##',
-    prefix: '+226 '
+    prefix: '+226 ',
   },
   BI: {
     mask: '####-####',
-    prefix: '+257 '
+    prefix: '+257 ',
   },
   KH: {
     mask: '(##) ######',
-    prefix: '+855 '
+    prefix: '+855 ',
   },
   CM: {
     mask: '####-####',
-    prefix: '+237 '
+    prefix: '+237 ',
   },
   CA: {
     mask: '(###) ###-####',
-    prefix: '+1 '
+    prefix: '+1 ',
   },
   CV: {
     mask: '###-####',
-    prefix: '+238 '
+    prefix: '+238 ',
   },
   KY: {
     mask: '(###) ###-####',
-    prefix: '+1 '
+    prefix: '+1 ',
   },
   CF: {
     mask: '###-###',
-    prefix: '+236 '
+    prefix: '+236 ',
   },
   TD: {
     mask: '###-##-##',
-    prefix: '+235 '
+    prefix: '+235 ',
   },
   /* CL: {
       mask:'########?',
@@ -1518,7 +1514,7 @@ const phoneNumberFormats = {
   }, */
   CL: {
     mask: '#########',
-    prefix: '+56 '
+    prefix: '+56 ',
   },
   /* CN: {
       mask:'########???',
@@ -1526,7 +1522,7 @@ const phoneNumberFormats = {
   }, */
   CN: {
     mask: '###########',
-    prefix: '+86 '
+    prefix: '+86 ',
   },
   /* CO: {
       mask:'########??',
@@ -1534,32 +1530,32 @@ const phoneNumberFormats = {
   }, */
   CO: {
     mask: '##########',
-    prefix: '57 '
+    prefix: '57 ',
   },
   KM: {
     mask: '###-####',
-    prefix: '+269 '
+    prefix: '+269 ',
   },
   CD: {
     mask: '###-####',
-    prefix: '+243 '
+    prefix: '+243 ',
   },
   CG: {
     mask: '###-####',
-    prefix: '+242 '
+    prefix: '+242 ',
   },
   // CK
   CR: {
     mask: '####-####',
-    prefix: '+506 '
+    prefix: '+506 ',
   },
   CI: {
     mask: '####-####',
-    prefix: '+225 '
+    prefix: '+225 ',
   },
   HR: {
     mask: '########?',
-    prefix: '+385 '
+    prefix: '+385 ',
   },
   /* CU: {
       mask:'#####?ID:?????',
@@ -1567,39 +1563,39 @@ const phoneNumberFormats = {
   }, */
   CU: {
     mask: '###########',
-    prefix: '+53 '
+    prefix: '+53 ',
   },
   CY: {
     mask: '####-####',
-    prefix: '+357 '
+    prefix: '+357 ',
   },
   CZ: {
     mask: '#########',
-    prefix: '+420 '
+    prefix: '+420 ',
   },
   DK: {
     mask: '####-####',
-    prefix: '+45 '
+    prefix: '+45 ',
   },
   DJ: {
     mask: '##-##-##-##',
-    prefix: '+253 '
+    prefix: '+253 ',
   },
   DM: {
     mask: '(###) ###-####',
-    prefix: '+1 '
+    prefix: '+1 ',
   },
   DO: {
     mask: '(###) ###-####',
-    prefix: '+1 '
+    prefix: '+1 ',
   },
   TL: {
     mask: '###-####',
-    prefix: '+670 '
+    prefix: '+670 ',
   },
   EC: {
     mask: '(##) ###-####',
-    prefix: '+593 '
+    prefix: '+593 ',
   },
   /* EG: {
       mask:'########??',
@@ -1607,36 +1603,36 @@ const phoneNumberFormats = {
   }, */
   EG: {
     mask: '##########',
-    prefix: '+20 '
+    prefix: '+20 ',
   },
   SV: {
     mask: '####-####',
-    prefix: '+503 '
+    prefix: '+503 ',
   },
   GQ: {
     mask: '##-####',
-    prefix: '+240 '
+    prefix: '+240 ',
   },
-  //ER:
+  // ER:
   EE: {
     mask: '#######?',
-    prefix: '+372 '
+    prefix: '+372 ',
   },
   ET: {
     mask: '(##) ###-####',
-    prefix: '+251 '
+    prefix: '+251 ',
   },
   FK: {
     mask: '#####',
-    prefix: '+500 '
+    prefix: '+500 ',
   },
   FO: {
     mask: '######',
-    prefix: '+298 '
+    prefix: '+298 ',
   },
   FJ: {
     mask: '###-####',
-    prefix: '+679 '
+    prefix: '+679 ',
   },
   /* FI: {
       mask:'#####???????',
@@ -1644,11 +1640,11 @@ const phoneNumberFormats = {
   }, */
   FI: {
     mask: '############',
-    prefix: '+358 '
+    prefix: '+358 ',
   },
   FR: {
     mask: '#########',
-    prefix: '+33 '
+    prefix: '+33 ',
   },
   /* GF: {
       mask:'#########?',
@@ -1656,23 +1652,23 @@ const phoneNumberFormats = {
   }, */
   GF: {
     mask: '##########',
-    prefix: '+594 '
+    prefix: '+594 ',
   },
   PF: {
     mask: '######',
-    prefix: '+689 '
+    prefix: '+689 ',
   },
   GA: {
     mask: '######?',
-    prefix: '+241 '
+    prefix: '+241 ',
   },
   GM: {
     mask: '###-####',
-    prefix: '+220 '
+    prefix: '+220 ',
   },
   GE: {
     mask: '########',
-    prefix: '+995 '
+    prefix: '+995 ',
   },
   /* DE: {
       mask:'######?????',
@@ -1680,7 +1676,7 @@ const phoneNumberFormats = {
   }, */
   DE: {
     mask: '###########',
-    prefix: '+49 '
+    prefix: '+49 ',
   },
   /* GH: {
       mask:'########?',
@@ -1688,63 +1684,63 @@ const phoneNumberFormats = {
   }, */
   GH: {
     mask: '#########',
-    prefix: '+233 '
+    prefix: '+233 ',
   },
   GI: {
     mask: '####-####',
-    prefix: '+350 '
+    prefix: '+350 ',
   },
   GR: {
     mask: '##########',
-    prefix: '+30 '
+    prefix: '+30 ',
   },
   GL: {
     mask: '###-###',
-    prefix: '+299 '
+    prefix: '+299 ',
   },
   GD: {
     mask: '(###) ###-####',
-    prefix: '+1 '
+    prefix: '+1 ',
   },
   GP: {
     mask: '##########',
-    prefix: '+590 '
+    prefix: '+590 ',
   },
   GU: {
     mask: '(###) ###-####',
-    prefix: '+1 '
+    prefix: '+1 ',
   },
   GT: {
     mask: '####-####',
-    prefix: '+502 '
+    prefix: '+502 ',
   },
   GN: {
     mask: '####-####',
-    prefix: '+224 '
+    prefix: '+224 ',
   },
   GW: {
     mask: '###-####',
-    prefix: '+245 '
+    prefix: '+245 ',
   },
   GY: {
     mask: '(###) ####',
-    prefix: '+592 '
+    prefix: '+592 ',
   },
   HK: {
     mask: '####-####',
-    prefix: '+852 '
+    prefix: '+852 ',
   },
   HN: {
     mask: '########',
-    prefix: '+504 '
+    prefix: '+504 ',
   },
   HT: {
     mask: '####-####',
-    prefix: '+509 '
+    prefix: '+509 ',
   },
   HU: {
     mask: '########??',
-    prefix: '+36 '
+    prefix: '+36 ',
   },
   /* IS: {
       mask:'#######??',
@@ -1752,11 +1748,11 @@ const phoneNumberFormats = {
   }, */
   IS: {
     mask: '#########',
-    prefix: '+354 '
+    prefix: '+354 ',
   },
   IN: {
     mask: '##########',
-    prefix: '+91 '
+    prefix: '+91 ',
   },
   /* ID: {
       mask:'#######???',
@@ -1764,11 +1760,11 @@ const phoneNumberFormats = {
   }, */
   ID: {
     mask: '##########',
-    prefix: '+62 '
+    prefix: '+62 ',
   },
   IR: {
     mask: '##########',
-    prefix: '+98 '
+    prefix: '+98 ',
   },
   /* IQ: {
       mask:'########??',
@@ -1776,7 +1772,7 @@ const phoneNumberFormats = {
   }, */
   IQ: {
     mask: '##########',
-    prefix: '+964 '
+    prefix: '+964 ',
   },
   /* IE: {
       mask:'#######??',
@@ -1784,7 +1780,7 @@ const phoneNumberFormats = {
   }, */
   IE: {
     mask: '#########',
-    prefix: '+353 '
+    prefix: '+353 ',
   },
   /* IL: {
       mask:'########?',
@@ -1792,7 +1788,7 @@ const phoneNumberFormats = {
   }, */
   IL: {
     mask: '#########',
-    prefix: '+972 '
+    prefix: '+972 ',
   },
   /* IT: {
       mask:'######????',
@@ -1800,15 +1796,15 @@ const phoneNumberFormats = {
   }, */
   IT: {
     mask: '##########',
-    prefix: '+39 '
+    prefix: '+39 ',
   },
   JM: {
     mask: '(###) ###-####',
-    prefix: '+1 '
+    prefix: '+1 ',
   },
   JP: {
     mask: '#########',
-    prefix: '+81 '
+    prefix: '+81 ',
   },
   /* JO: {
       mask:'#######??',
@@ -1816,11 +1812,11 @@ const phoneNumberFormats = {
   }, */
   JO: {
     mask: '#########',
-    prefix: '+962 '
+    prefix: '+962 ',
   },
   KZ: {
     mask: '(###) ####-###',
-    prefix: '+7 '
+    prefix: '+7 ',
   },
   /* KE: {
       mask:'######????',
@@ -1828,44 +1824,44 @@ const phoneNumberFormats = {
   }, */
   KE: {
     mask: '##########',
-    prefix: '+254 '
+    prefix: '+254 ',
   },
   KI: {
     mask: '##-###',
-    prefix: '+686 '
+    prefix: '+686 ',
   },
-  //kp
+  // kp
   /* KR: {
       mask:'####??????',
       prefix: ''
   }, */
   KR: {
     mask: '##########',
-    prefix: '+82 '
+    prefix: '+82 ',
   },
   KW: {
     mask: '####-####',
-    prefix: '+965 '
+    prefix: '+965 ',
   },
   KG: {
     mask: '#########',
-    prefix: '+996 '
+    prefix: '+996 ',
   },
   LA: {
     mask: '########?',
-    prefix: '+856 '
+    prefix: '+856 ',
   },
   LV: {
     mask: '####-####',
-    prefix: '+371 '
+    prefix: '+371 ',
   },
   LB: {
     mask: '#######?',
-    prefix: '+961 '
+    prefix: '+961 ',
   },
   LS: {
     mask: '##-###-###',
-    prefix: '+266 '
+    prefix: '+266 ',
   },
   // LR
   /* LY: {
@@ -1874,15 +1870,15 @@ const phoneNumberFormats = {
   }, */
   LY: {
     mask: '########?',
-    prefix: '+218 '
+    prefix: '+218 ',
   },
   LI: {
     mask: '###-####',
-    prefix: '+423 '
+    prefix: '+423 ',
   },
   LT: {
     mask: '########',
-    prefix: '+370 '
+    prefix: '+370 ',
   },
   /* LU: {
       mask:'#####??????',
@@ -1890,19 +1886,19 @@ const phoneNumberFormats = {
   }, */
   LU: {
     mask: '###########',
-    prefix: '+352 '
+    prefix: '+352 ',
   },
   MO: {
     mask: '####-####',
-    prefix: '+853 '
+    prefix: '+853 ',
   },
   MK: {
     mask: '########',
-    prefix: '+389 '
+    prefix: '+389 ',
   },
   MG: {
     mask: '##-##-###-##',
-    prefix: '+261 '
+    prefix: '+261 ',
   },
   /* MW: {
       mask:'#######??',
@@ -1910,7 +1906,7 @@ const phoneNumberFormats = {
   }, */
   MW: {
     mask: '#########',
-    prefix: '+265 '
+    prefix: '+265 ',
   },
   /* MY: {
       mask:'#######???',
@@ -1918,46 +1914,46 @@ const phoneNumberFormats = {
   }, */
   MY: {
     mask: '##########',
-    prefix: '+60 '
+    prefix: '+60 ',
   },
   MV: {
     mask: '###-####',
-    prefix: '+960 '
+    prefix: '+960 ',
   },
   ML: {
     mask: '####-####',
-    prefix: '+223 '
+    prefix: '+223 ',
   },
   MT: {
     mask: '##-##-##-##',
-    prefix: '+356 '
+    prefix: '+356 ',
   },
   MH: {
     mask: '###-####',
-    prefix: '+692 '
+    prefix: '+692 ',
   },
   MQ: {
     mask: '###-######',
-    prefix: '+596 '
+    prefix: '+596 ',
   },
   // MR
   MU: {
     mask: '###-####',
-    prefix: '+230 '
+    prefix: '+230 ',
   },
   // YT
   MX: {
     mask: '(###) ###-####',
-    prefix: '+52 '
+    prefix: '+52 ',
   },
   // FM
   MD: {
     mask: '########',
-    prefix: '+373 '
+    prefix: '+373 ',
   },
   MC: {
     mask: '####-####',
-    prefix: '+377 '
+    prefix: '+377 ',
   },
   /* MN: {
       mask:'######?????',
@@ -1965,15 +1961,15 @@ const phoneNumberFormats = {
   }, */
   MN: {
     mask: '###########',
-    prefix: '+976 '
+    prefix: '+976 ',
   },
   MS: {
     mask: '(###) ###-####',
-    prefix: '+1 '
+    prefix: '+1 ',
   },
   MA: {
     mask: '##-###-####',
-    prefix: '+212 '
+    prefix: '+212 ',
   },
   /* MZ: {
       mask:'########?',
@@ -1981,7 +1977,7 @@ const phoneNumberFormats = {
   }, */
   MZ: {
     mask: '#########',
-    prefix: '+258 '
+    prefix: '+258 ',
   },
   /* MM: {
       mask:'#######?',
@@ -1989,7 +1985,7 @@ const phoneNumberFormats = {
   }, */
   MM: {
     mask: '########',
-    prefix: '+95 '
+    prefix: '+95 ',
   },
   /* NA: {
       mask:'######????',
@@ -1997,7 +1993,7 @@ const phoneNumberFormats = {
   }, */
   NA: {
     mask: '##########',
-    prefix: '+264 '
+    prefix: '+264 ',
   },
   // NR
   /* NP: {
@@ -2006,11 +2002,11 @@ const phoneNumberFormats = {
   }, */
   NP: {
     mask: '##########',
-    prefix: '+977 '
+    prefix: '+977 ',
   },
   NL: {
     mask: '#########',
-    prefix: '+31 '
+    prefix: '+31 ',
   },
   /* AN: {
       mask:'#######?',
@@ -2018,11 +2014,11 @@ const phoneNumberFormats = {
   }, */
   AN: {
     mask: '########',
-    prefix: '+599 '
+    prefix: '+599 ',
   },
   NC: {
     mask: '###-###',
-    prefix: '+687 '
+    prefix: '+687 ',
   },
   /* NZ: {
       mask:'########??',
@@ -2030,15 +2026,15 @@ const phoneNumberFormats = {
   }, */
   NZ: {
     mask: '##########',
-    prefix: '+64 '
+    prefix: '+64 ',
   },
   NI: {
     mask: '####-####',
-    prefix: '+505 '
+    prefix: '+505 ',
   },
   NE: {
     mask: '##-###-###',
-    prefix: '+227 '
+    prefix: '+227 ',
   },
   /* NG: {
       mask:'########??',
@@ -2046,20 +2042,20 @@ const phoneNumberFormats = {
   }, */
   NG: {
     mask: '##########',
-    prefix: '+234 '
+    prefix: '+234 ',
   },
   // NU
   MP: {
     mask: '(###) ###-####',
-    prefix: '+1 '
+    prefix: '+1 ',
   },
   NO: {
     mask: '####-####',
-    prefix: '+47 '
+    prefix: '+47 ',
   },
   OM: {
     mask: '####-####',
-    prefix: '+968 '
+    prefix: '+968 ',
   },
   /* PK: {
       mask:'#########?',
@@ -2067,11 +2063,11 @@ const phoneNumberFormats = {
   }, */
   PK: {
     mask: '##########',
-    prefix: '+92 '
+    prefix: '+92 ',
   },
   PW: {
     mask: '###-####',
-    prefix: '+680 '
+    prefix: '+680 ',
   },
   /* PA: {
       mask:'#######?',
@@ -2079,7 +2075,7 @@ const phoneNumberFormats = {
   }, */
   PA: {
     mask: '########',
-    prefix: '+507 '
+    prefix: '+507 ',
   },
   /* PG: {
       mask:'#######?',
@@ -2087,7 +2083,7 @@ const phoneNumberFormats = {
   }, */
   PG: {
     mask: '########',
-    prefix: '+675 '
+    prefix: '+675 ',
   },
   // PY
   /* PE: {
@@ -2096,7 +2092,7 @@ const phoneNumberFormats = {
   }, */
   PE: {
     mask: '###########',
-    prefix: '+51 '
+    prefix: '+51 ',
   },
   /* PH: {
       mask:'########??',
@@ -2104,62 +2100,62 @@ const phoneNumberFormats = {
   }, */
   PH: {
     mask: '##########',
-    prefix: '+63 '
+    prefix: '+63 ',
   },
   PL: {
     mask: '#########',
-    prefix: '+48 '
+    prefix: '+48 ',
   },
   PT: {
     mask: '#-####-####',
-    prefix: '+351 '
+    prefix: '+351 ',
   },
   PR: {
     mask: '(###) ###-####',
-    prefix: '+1 '
+    prefix: '+1 ',
   },
   QA: {
     mask: '###-####',
-    prefix: '+974 '
+    prefix: '+974 ',
   },
   RE: {
     mask: '###-###-###',
-    prefix: '+262 '
+    prefix: '+262 ',
   },
   RO: {
     mask: '#########',
-    prefix: '+40 '
+    prefix: '+40 ',
   },
   RU: {
     mask: '##########',
-    prefix: '+7 '
+    prefix: '+7 ',
   },
   RW: {
     mask: '###-###-###',
-    prefix: '+250 '
+    prefix: '+250 ',
   },
   SH: {
     mask: '#-###',
-    prefix: '+290 '
+    prefix: '+290 ',
   },
   // PM
   KN: {
     mask: '(###) ###-####',
-    prefix: '+1 '
+    prefix: '+1 ',
   },
   LC: {
     mask: '(###) ###-####',
-    prefix: '+1 '
+    prefix: '+1 ',
   },
   VC: {
     mask: '(###) ###-####',
-    prefix: '+1 '
+    prefix: '+1 ',
   },
   // WS
   // SM
   ST: {
     mask: '##-####',
-    prefix: '+239 '
+    prefix: '+239 ',
   },
   /* SA: {
       mask:'########?',
@@ -2167,60 +2163,60 @@ const phoneNumberFormats = {
   }, */
   SA: {
     mask: '#########',
-    prefix: '+966 '
+    prefix: '+966 ',
   },
   SN: {
     mask: '##-###-####',
-    prefix: '+221 '
+    prefix: '+221 ',
   },
   SC: {
     mask: '###-###',
-    prefix: '+248 '
+    prefix: '+248 ',
   },
   SL: {
     mask: '(##) ###-###',
-    prefix: '+232 '
+    prefix: '+232 ',
   },
   SG: {
     mask: '####-####',
-    prefix: '+65 '
+    prefix: '+65 ',
   },
   SK: {
     mask: '#########',
-    prefix: '+421 '
+    prefix: '+421 ',
   },
   SI: {
     mask: '########',
-    prefix: '+386 '
+    prefix: '+386 ',
   },
   SB: {
     mask: '##-###',
-    prefix: '+677 '
+    prefix: '+677 ',
   },
   // SO
   ZA: {
     mask: '(##) ###-####',
-    prefix: '+27 '
+    prefix: '+27 ',
   },
   ES: {
     mask: '###-###-###',
-    prefix: '+34 '
+    prefix: '+34 ',
   },
   LK: {
     mask: '(##) ###-####',
-    prefix: '+94 '
+    prefix: '+94 ',
   },
   SD: {
     mask: '##-###-####',
-    prefix: '+249 '
+    prefix: '+249 ',
   },
   SR: {
     mask: '######?',
-    prefix: '+597 '
+    prefix: '+597 ',
   },
   SZ: {
     mask: '###-####',
-    prefix: '+268 '
+    prefix: '+268 ',
   },
   /* SE: {
       mask:'######?????',
@@ -2228,11 +2224,11 @@ const phoneNumberFormats = {
   }, */
   SE: {
     mask: '###########',
-    prefix: '+46 '
+    prefix: '+46 ',
   },
   CH: {
     mask: '(##) ###-####',
-    prefix: '+41 '
+    prefix: '+41 ',
   },
   /* SY: {
       mask:'########?',
@@ -2240,15 +2236,15 @@ const phoneNumberFormats = {
   }, */
   SY: {
     mask: '#########',
-    prefix: '+963 '
+    prefix: '+963 ',
   },
   TJ: {
     mask: '#########',
-    prefix: '+992 '
+    prefix: '+992 ',
   },
   TZ: {
     mask: '#########',
-    prefix: '+255 '
+    prefix: '+255 ',
   },
   /* TH: {
       mask:'########?',
@@ -2256,42 +2252,42 @@ const phoneNumberFormats = {
   }, */
   TH: {
     mask: '#########',
-    prefix: '+66 '
+    prefix: '+66 ',
   },
   TG: {
     mask: '###-####',
-    prefix: '+228 '
+    prefix: '+228 ',
   },
   // TK
   // TO
   TT: {
     mask: '(###) ###-####',
-    prefix: '+1 '
+    prefix: '+1 ',
   },
   TN: {
     mask: '##-###-###',
-    prefix: '+216 '
+    prefix: '+216 ',
   },
   TR: {
     mask: '(###) ###-####',
-    prefix: '+90 '
+    prefix: '+90 ',
   },
   TM: {
     mask: '########',
-    prefix: '+993 '
+    prefix: '+993 ',
   },
   TC: {
     mask: '(###) ###-####',
-    prefix: '+1 '
+    prefix: '+1 ',
   },
   // TV
   UG: {
     mask: '#########',
-    prefix: '+256 '
+    prefix: '+256 ',
   },
   UA: {
     mask: '(##) ###-####',
-    prefix: '+380 '
+    prefix: '+380 ',
   },
   /* AE: {
       mask:'########?',
@@ -2299,7 +2295,7 @@ const phoneNumberFormats = {
   }, */
   AE: {
     mask: '#########',
-    prefix: '+971 '
+    prefix: '+971 ',
   },
   /* GB: {
       mask:'##########???',
@@ -2307,33 +2303,33 @@ const phoneNumberFormats = {
   }, */
   GB: {
     mask: '#############',
-    prefix: '+44 '
+    prefix: '+44 ',
   },
   UY: {
     mask: '########?',
-    prefix: '+598 '
+    prefix: '+598 ',
   },
   UZ: {
     mask: '(##) ###-####',
-    prefix: '+998 '
+    prefix: '+998 ',
   },
   // VU
   // VA
   VE: {
     mask: '(###) ###-####',
-    prefix: '+58 '
+    prefix: '+58 ',
   },
   VN: {
     mask: '#######????',
-    prefix: '+84 '
+    prefix: '+84 ',
   },
   VG: {
     mask: '(###) ###-####',
-    prefix: '+1 '
+    prefix: '+1 ',
   },
   VI: {
     mask: '(###) ###-####',
-    prefix: '+1 '
+    prefix: '+1 ',
   },
   // WF
   /* YE: {
@@ -2342,12 +2338,12 @@ const phoneNumberFormats = {
   }, */
   YE: {
     mask: '#########',
-    prefix: '+967 '
+    prefix: '+967 ',
   },
   // YU
   ZM: {
     mask: '#########',
-    prefix: '+260 '
+    prefix: '+260 ',
   },
   /* ZW: {
       mask:'####?????',
@@ -2355,15 +2351,15 @@ const phoneNumberFormats = {
   }, */
   ZW: {
     mask: '#########',
-    prefix: '+263 '
+    prefix: '+263 ',
   },
   AC: {
     mask: '####',
-    prefix: '+247 '
+    prefix: '+247 ',
   },
   ME: {
     mask: '(##) ###-####',
-    prefix: '+382 '
+    prefix: '+382 ',
   },
   /* PS: {
       mask:'########?',
@@ -2371,7 +2367,7 @@ const phoneNumberFormats = {
   }, */
   PS: {
     mask: '#########',
-    prefix: '+970 '
+    prefix: '+970 ',
   },
   /* RS: {
       mask:'#######??',
@@ -2379,7 +2375,7 @@ const phoneNumberFormats = {
   }, */
   RS: {
     mask: '#########',
-    prefix: '+381 '
+    prefix: '+381 ',
   },
   /* TW: {
       mask:'########?',
@@ -2387,23 +2383,23 @@ const phoneNumberFormats = {
   }, */
   TW: {
     mask: '#########',
-    prefix: '+886 '
+    prefix: '+886 ',
   },
   CW: {
     mask: '#-###-####',
-    prefix: '+599 '
+    prefix: '+599 ',
   },
   US: {
     mask: '(###) ###-####',
-    prefix: ''
-  }
+    prefix: '',
+  },
 };
 function formatPhoneNumber(value, isoCode = 'US') {
-  const { mask, prefix } = phoneNumberFormats[isoCode] || phoneNumberFormats['US'];
+  const { mask, prefix } = phoneNumberFormats[isoCode] || phoneNumberFormats.US;
   const options = {
-    prefix
+    prefix,
   };
-  let val = value || '';
+  const val = value || '';
   return formatValue(val, mask, options);
 }
 
@@ -2435,7 +2431,7 @@ const numberFormats = {
     decimalSeparator: '.',
     thousandsSeparator: ',',
     allowDecimal: false,
-    allowNegative: true
+    allowNegative: true,
   },
   integer: {
     prefix: '',
@@ -2444,7 +2440,7 @@ const numberFormats = {
     decimalSeparator: '.',
     thousandsSeparator: '',
     allowDecimal: true,
-    allowNegative: true
+    allowNegative: true,
   },
   dec: {
     prefix: '',
@@ -2453,8 +2449,8 @@ const numberFormats = {
     decimalSeparator: '.',
     thousandsSeparator: ',',
     allowDecimal: true,
-    allowNegative: true
-  }
+    allowNegative: true,
+  },
 };
 function getNumberFormat(key) {
   let decimals;
@@ -2481,7 +2477,7 @@ function formatNumeric(value = '', modifier = '', explicit = false) {
   return formatNumber(value, numberFormat, explicit);
 }
 function formatPercentage(value = '', modifier = '', explicit = false) {
-  let numberFormat = getNumberFormat(modifier);
+  const numberFormat = getNumberFormat(modifier);
   if (!numberFormat) {
     const val = (value || '').replace(/[^\d.,-]/g, '');
     return formatValue(val, undefined, { suffix: '%' });
@@ -2685,7 +2681,7 @@ const postalCodeFormats = {
   WF: '986##',
   ZM: '#####',
   US: '#####',
-  'US+4': '#####-####'
+  'US+4': '#####-####',
 };
 function formatPostalCode(value, modifier = 'US') {
   const mask = postalCodeFormats[modifier];
@@ -2715,7 +2711,7 @@ const dateFormats = {
   'DD-MM-YYYY': '##-##-####',
   'D-M-YYYY': '#?-#?-####',
   'DD-MM-YY': '##-##-##',
-  'D-M-YY': '#?-#?-##'
+  'D-M-YY': '#?-#?-##',
 };
 function formatDate(value, format = 'MM/DD/YYYY') {
   const mask = dateFormats[format] || dateFormats['MM/DD/YYYY'];
@@ -2724,10 +2720,10 @@ function formatDate(value, format = 'MM/DD/YYYY') {
 }
 
 function format(value) {
-  //have a initial generic mask which then converts to specific mask
+  // have a initial generic mask which then converts to specific mask
   const detectedType = formatCreditCard.detectCreditCardTypeFromValue(value);
   const formattedValueObject = creditCardFormatters[detectedType](value);
-  if (value.length < 2 && detectedType == 'unknown') {
+  if (value.length < 2 && detectedType === 'unknown') {
     formattedValueObject.leftIcon = 'card';
   }
   return formattedValueObject;
@@ -2762,8 +2758,9 @@ const creditCardFormatters = {
   masterCard: masterCardFormatter,
   visa: visaFormatter,
   dinersClub: dinersClubInternationalFormatter,
-  unknown: unknownFormatter
+  unknown: unknownFormatter,
 };
+/* tslint:disable:cyclomatic-complexity */
 function detectCreditCardTypeFromValue(value) {
   // use value and some algorithm from the internet to detect and return card type based on string
   // return string 'unknown' if algorithm cannot detect or returns a type that is not one of our 5 supported types
@@ -2784,13 +2781,13 @@ function detectCreditCardTypeFromValue(value) {
       }
       break;
     case 3:
-      if (secondInt == 4 || secondInt == 7) {
+      if (secondInt === 4 || secondInt === 7) {
         return 'amex';
       }
-      if (secondInt == 0) {
+      if (secondInt === 0) {
         if (value.length > 2) {
           const thirdInt = parseInt(value.charAt(2));
-          if (thirdInt < 6 || thirdInt == 9) {
+          if (thirdInt < 6 || thirdInt === 9) {
             return 'dinersClub';
           }
         }
@@ -2798,7 +2795,7 @@ function detectCreditCardTypeFromValue(value) {
           return 'dinersClub';
         }
       }
-      if (secondInt == 6 || secondInt == 8 || secondInt == 9) {
+      if (secondInt === 6 || secondInt === 8 || secondInt === 9) {
         return 'dinersClub';
       }
       break;
@@ -2810,10 +2807,10 @@ function detectCreditCardTypeFromValue(value) {
       }
       break;
     case 6:
-      if (secondInt == 0) {
+      if (secondInt === 0) {
         if (value.length > 3) {
           const firstfour = value.substr(0, 4);
-          if (firstfour == '6011') {
+          if (firstfour === '6011') {
             return 'discover';
           }
         }
@@ -2821,7 +2818,7 @@ function detectCreditCardTypeFromValue(value) {
           return 'discover';
         }
       }
-      if (secondInt == 4) {
+      if (secondInt === 4) {
         if (value.length > 2) {
           const firstthree = parseInt(value.substr(0, 3));
           if (firstthree > 643) {
@@ -2832,10 +2829,10 @@ function detectCreditCardTypeFromValue(value) {
           return 'discover';
         }
       }
-      if (secondInt == 5) {
+      if (secondInt === 5) {
         return 'discover';
       }
-      if (secondInt == 2) {
+      if (secondInt === 2) {
         if (value.length > 5) {
           const firstsix = parseInt(value.substr(0, 6));
           if (firstsix >= 622126 && firstsix <= 622925) {
@@ -2852,6 +2849,7 @@ function detectCreditCardTypeFromValue(value) {
   }
   return 'unknown';
 }
+/* tslint:enable:cyclomatic-complexity */
 const formatCreditCard = {
   detectCreditCardTypeFromValue,
   format,
@@ -2860,10 +2858,10 @@ const formatCreditCard = {
   discoverFormatter,
   masterCardFormatter,
   visaFormatter,
-  unknownFormatter
+  unknownFormatter,
 };
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;margin-top:var(--tct-input-margin-top, var(--t-input-margin-top, var(--app-scale-6x, 30px)));margin-bottom:var(--tct-input-margin-bottom, var(--t-input-margin-bottom, var(--app-scale-6x, 30px)));font-size:var(--tct-input-font-size, var(--t-input-font-size, var(--app-font-size, inherit)))}:host([hidden]){display:none}.field-container,.input-container{position:relative}.field-container{--comp-input-tween:var(--tct-input-tween, var(--t-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))))}label{display:block;padding-left:var(--tct-input-label-padding-left, var(--t-input-label-padding-left, 0));padding-right:var(--tct-input-label-padding-right, var(--t-input-label-padding-right, 0));margin-top:var(--tct-input-label-margin-top, var(--t-input-label-margin-top, 0));margin-bottom:var(--tct-input-label-margin-bottom, var(--t-input-label-margin-bottom, var(--tct-scale-1, var(--app-scale-1, 5px))));color:var(--tct-input-label-font-color, var(--t-input-label-font-color, inherit));font-size:var(--tct-input-label-font-size, var(--t-input-label-font-size, inherit));font-weight:var(--tct-input-label-font-weight, var(--t-input-label-font-weight, 600));text-transform:var(--tct-input-label-text-transform, var(--t-input-label-text-transform, none));letter-spacing:var(--tct-input-label-letter-spacing, var(--t-input-label-letter-spacing, normal));transition:color var(--comp-input-tween)}.optional-tag{margin-left:var(--tct-input-label-optional-margin-left, var(--t-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1, 5px))));color:var(--tct-input-label-optional-font-color, var(--t-input-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-input-label-optional-font-size, var(--t-input-label-optional-font-size, 12px));font-weight:var(--tct-input-label-optional-font-weight, var(--t-input-label-optional-font-weight, 400))}.input-container{background-color:var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2))));display:flex;align-items:center;--comp-input-horizontal-gap:var(--tct-input-horizontal-gap, var(--t-input-horizontal-gap, 8px));--comp-input-border-top-left-radius:var(--tct-input-border-top-left-radius, var(--t-input-border-top-left-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));--comp-input-border-top-right-radius:var(--tct-input-border-top-right-radius, var(--t-input-border-top-right-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));--comp-input-border-bottom-right-radius:var(--tct-input-border-bottom-right-radius, var(--t-input-border-bottom-right-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));--comp-input-border-bottom-left-radius:var(--tct-input-border-bottom-left-radius, var(--t-input-border-bottom-left-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));--comp-input-border-radius:var(--comp-input-border-top-left-radius)\n      var(--comp-input-border-top-right-radius) var(--comp-input-border-bottom-right-radius)\n      var(--comp-input-border-bottom-left-radius);--comp-input-border-width:var(--tct-input-border-top-width, 1px)\n      var(--tct-input-border-right-width, 1px) var(--tct-input-border-bottom-width, 1px)\n      var(--tct-input-border-left-width, 1px);--comp-input-focus-border-width:var(--tct-input-focus-border-top-width, 1px)\n      var(--tct-input-focus-border-right-width, 1px)\n      var(--tct-input-focus-border-bottom-width, 1px)\n      var(--tct-input-focus-border-left-width, 1px);--comp-input-prefix-clearance:calc(\n      3 * var(--tct-input-prefix-font-size, 14px) + var(--tct-scale-1, 5px)\n  );--comp-input-icon-clearance:34px;--comp-input-min-height:44px;border-width:var(--comp-input-border-width);border-style:solid;border-color:var(--tct-input-border-color, var(--t-input-border-color, var(--tct-gray-11, var(--t-gray-11, #cccccc))));border-radius:var(--comp-input-border-radius);box-shadow:var(--tct-input-box-shadow, var(--t-input-box-shadow, none));transition:border-width var(--comp-input-tween), border-color var(--comp-input-tween), box-shadow var(--comp-input-tween)}:host([disabled]) .input-container{cursor:not-allowed;opacity:var(--tct-input-disabled-opacity, var(--t-input-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}.input-field{flex:1;border:0;-webkit-appearance:none;appearance:none;box-sizing:border-box;min-height:var(--comp-input-min-height);height:var(--tct-input-height, var(--t-input-height, 44px));width:100%;padding:0 var(--tct-input-horizontal-padding, var(--t-input-horizontal-padding, var(--tct-scale-2, var(--app-scale-2, 10px))));background-color:transparent;color:var(--tct-input-font-color, var(--t-input-font-color, var(--t-text, inherit)));}.input-field:focus{outline:none;box-shadow:none}.input-field::-webkit-outer-spin-button,.input-field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-field[type=number]{-moz-appearance:textfield}.input-field[disabled]{cursor:not-allowed}.right-aligned .input-field{text-align:right}.input-container:focus-within{border-width:var(--comp-input-focus-border-width, 1px);border-color:var(--tct-input-focus-border-color, var(--t-input-focus-border-color, var(--tct-gray-9, var(--t-gray-9, #999999))));box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff)), var(--tct-input-focus-box-shadow, var(--t-input-focus-box-shadow, 0 0 transparent))}input{display:inline-block}input::-ms-clear{display:none}input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input::placeholder,.placeholder-text{color:var(--tct-input-placeholder-font-color, var(--t-input-placeholder-font-color, var(--t-textA, var(--app-gray-d1, rgba(77, 77, 77, 0.77)))))}.pseudo-input{display:inline-flex;align-items:center}.pseudo-input span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.input-icons-container-left,.input-icons-container-right{display:flex;flex-direction:row;align-items:center;gap:var(--comp-input-horizontal-gap)}.input-icons-container-left:empty,.input-icons-container-right:empty{display:none}.input-icons-container-left{padding-left:var(--comp-input-horizontal-gap)}.input-icons-container-right{padding-right:var(--comp-input-horizontal-gap)}.input-icons-container-right .btn-visibility-toggle{color:var(--tct-primary, var(--t-primary, #006eb2));font-size:12px}q2-icon{margin-top:calc(var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) / 2);margin-bottom:calc(var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) / 2);pointer-events:none;color:var(--tct-input-icon-stroke-primary, var(--t-input-icon-stroke-primary, var(--t-textA, var(--app-gray, rgba(77, 77, 77, 0.77)))));--tct-icon-stroke-primary:var(--tct-input-icon-stroke-primary, var(--t-input-icon-stroke-primary, var(--t-textA, var(--app-gray, rgba(77, 77, 77, 0.77)))))}.icon-left-muted{opacity:0.5}.input-prefix,.input-suffix{margin-left:calc(var(--comp-input-horizontal-gap) * -1);margin-right:calc(var(--comp-input-horizontal-gap) * -1);width:3em;display:inline-flex;align-items:center;justify-content:center;min-height:calc(\n        var(--comp-input-min-height) - var(--tct-input-focus-border-top-width, var(--t-input-focus-border-top-width, 1px)) -\n            var(--tct-input-focus-border-bottom-width, var(--t-input-focus-border-bottom-width, 1px))\n    );height:calc(\n        var(--tct-input-height, var(--t-input-height, 44px)) - var(--tct-input-focus-border-top-width, var(--t-input-focus-border-top-width, 1px)) - var(--tct-input-focus-border-bottom-width, var(--t-input-focus-border-bottom-width, 1px))\n    );font-size:var(--tct-input-prefix-font-size, var(--t-input-prefix-font-size, inherit));color:var(--tct-input-prefix-font-color, var(--t-input-prefix-font-color, inherit));background-color:var(--tct-input-prefix-bg, var(--t-input-prefix-bg, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2))))));transition:color var(--comp-input-tween), background-color var(--comp-input-tween)}.input-prefix{border-top-left-radius:calc(\n        var(--comp-input-border-top-left-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px))\n    );border-bottom-left-radius:calc(\n        var(--comp-input-border-bottom-left-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px))\n    );pointer-events:none;}.input-suffix{border-top-right-radius:calc(\n        var(--comp-input-border-top-right-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px))\n    );border-bottom-right-radius:calc(\n        var(--comp-input-border-bottom-right-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px))\n    )}.icon-error{color:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}.pw-show{position:absolute;margin-right:var(--tct-scale-2, var(--app-scale-2, 20px))}.btn-clear{margin-top:calc(var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) / 2);margin-bottom:calc(var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) / 2);height:22px;--tct-btn-icon-width:17px;--tct-btn-icon-height:22px;--tct-icon-size:17px}.messages-container{height:0px;overflow:hidden;background-color:var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));box-shadow:var(--tct-input-message-box-shadow, var(--t-input-message-box-shadow, var(--tct-box-shadow-1, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3)))));transition:height var(--tct-input-messages-tween, var(--t-input-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));margin-top:2px;z-index:1;position:absolute;width:100%;color:var(--tct-input-messages-font-color, var(--t-input-messages-font-color, inherit))}.has-error label{color:var(--tct-input-error-label-font-color, var(--t-input-error-label-font-color, var(--tct-input-label-font-color, var(--t-input-label-font-color, inherit))))}.has-error:not(.has-focus) .input-prefix,.has-error:not(.has-focus) .input-suffix{color:var(--tct-input-error-prefix-font-color, var(--t-input-error-prefix-font-color, inherit));background-color:var(--tct-input-error-prefix-bg, var(--t-input-error-prefix-bg, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))))))}.has-error .input-container:not(:focus-within){border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000))}.icon-left{width:26px;height:26px}.vertical-separator{height:calc(var(--comp-input-min-height) - 2px);border-right:1px solid var(--tct-input-prefix-border-color, var(--t-input-prefix-border-color, var(--tct-input-border-color, var(--t-input-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))))))}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;margin-top:var(--tct-input-margin-top, var(--t-input-margin-top, var(--app-scale-6x, 30px)));margin-bottom:var(--tct-input-margin-bottom, var(--t-input-margin-bottom, var(--app-scale-6x, 30px)));font-size:var(--tct-input-font-size, var(--t-input-font-size, var(--app-font-size, inherit)))}:host([hidden]){display:none}.field-container,.input-container{position:relative}.field-container{--comp-input-tween:var(--tct-input-tween, var(--t-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))))}label{display:block;padding-left:var(--tct-input-label-padding-left, var(--t-input-label-padding-left, 0));padding-right:var(--tct-input-label-padding-right, var(--t-input-label-padding-right, 0));margin-top:var(--tct-input-label-margin-top, var(--t-input-label-margin-top, 0));margin-bottom:var(--tct-input-label-margin-bottom, var(--t-input-label-margin-bottom, var(--tct-scale-1, var(--app-scale-1, 5px))));color:var(--tct-input-label-font-color, var(--t-input-label-font-color, inherit));font-size:var(--tct-input-label-font-size, var(--t-input-label-font-size, inherit));font-weight:var(--tct-input-label-font-weight, var(--t-input-label-font-weight, 600));text-transform:var(--tct-input-label-text-transform, var(--t-input-label-text-transform, none));letter-spacing:var(--tct-input-label-letter-spacing, var(--t-input-label-letter-spacing, normal));transition:color var(--comp-input-tween)}.optional-tag{margin-left:var(--tct-input-label-optional-margin-left, var(--t-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1, 5px))));color:var(--tct-input-label-optional-font-color, var(--t-input-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-input-label-optional-font-size, var(--t-input-label-optional-font-size, 12px));font-weight:var(--tct-input-label-optional-font-weight, var(--t-input-label-optional-font-weight, 400))}.input-container{background-color:var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2))));display:flex;align-items:center;--comp-input-horizontal-gap:var(--tct-input-horizontal-gap, var(--t-input-horizontal-gap, 8px));--comp-input-border-top-left-radius:var(--tct-input-border-top-left-radius, var(--t-input-border-top-left-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));--comp-input-border-top-right-radius:var(--tct-input-border-top-right-radius, var(--t-input-border-top-right-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));--comp-input-border-bottom-right-radius:var(--tct-input-border-bottom-right-radius, var(--t-input-border-bottom-right-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));--comp-input-border-bottom-left-radius:var(--tct-input-border-bottom-left-radius, var(--t-input-border-bottom-left-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));--comp-input-border-radius:var(--comp-input-border-top-left-radius)\n      var(--comp-input-border-top-right-radius) var(--comp-input-border-bottom-right-radius)\n      var(--comp-input-border-bottom-left-radius);--comp-input-border-width:var(--tct-input-border-top-width, 1px)\n      var(--tct-input-border-right-width, 1px) var(--tct-input-border-bottom-width, 1px)\n      var(--tct-input-border-left-width, 1px);--comp-input-focus-border-width:var(--tct-input-focus-border-top-width, 1px)\n      var(--tct-input-focus-border-right-width, 1px)\n      var(--tct-input-focus-border-bottom-width, 1px)\n      var(--tct-input-focus-border-left-width, 1px);--comp-input-prefix-clearance:calc(\n      3 * var(--tct-input-prefix-font-size, 14px) + var(--tct-scale-1, 5px)\n  );--comp-input-icon-clearance:34px;--comp-input-min-height:var(--tct-input-min-height, 44px);border-width:var(--comp-input-border-width);border-style:solid;border-color:var(--tct-input-border-color, var(--t-input-border-color, var(--tct-gray-11, var(--t-gray-11, #cccccc))));border-radius:var(--comp-input-border-radius);box-shadow:var(--tct-input-box-shadow, var(--t-input-box-shadow, none));transition:border-width var(--comp-input-tween), border-color var(--comp-input-tween), box-shadow var(--comp-input-tween)}:host([disabled]) .input-container{cursor:not-allowed;opacity:var(--tct-input-disabled-opacity, var(--t-input-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}.input-field{flex:1;border:0;-webkit-appearance:none;appearance:none;box-sizing:border-box;min-height:var(--comp-input-min-height);height:var(--tct-input-height, var(--t-input-height, 44px));width:100%;padding:0 var(--tct-input-horizontal-padding, var(--t-input-horizontal-padding, var(--tct-scale-2, var(--app-scale-2, 10px))));background-color:transparent;color:var(--tct-input-font-color, var(--t-input-font-color, var(--t-text, inherit)));display:inline-block;text-align:var(--tct-input-align, \"start\");}.input-field:focus{outline:none;box-shadow:none}.input-field::-webkit-outer-spin-button,.input-field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-field[type=number]{-moz-appearance:textfield}.input-field::-ms-clear{display:none}.input-field[type=search]::-webkit-search-decoration,.input-field[type=search]::-webkit-search-cancel-button,.input-field[type=search]::-webkit-search-results-button,.input-field[type=search]::-webkit-search-results-decoration{display:none}.input-field[disabled]{cursor:not-allowed}.right-aligned .input-field{text-align:right}.input-field:is(input){flex:1}.input-field:is(button){display:inline-flex;align-items:center}.input-container:focus-within{border-width:var(--comp-input-focus-border-width, 1px);border-color:var(--tct-input-focus-border-color, var(--t-input-focus-border-color, var(--tct-gray-9, var(--t-gray-9, #999999))));box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff)), var(--tct-input-focus-box-shadow, var(--t-input-focus-box-shadow, 0 0 transparent))}.input-field::placeholder,.placeholder-text{color:var(--tct-input-placeholder-font-color, var(--t-input-placeholder-font-color, var(--t-textA, var(--app-gray-d1, rgba(77, 77, 77, 0.77)))))}.pseudo-input{min-width:0;flex:1}.pseudo-input span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.input-icons-container-left,.input-icons-container-right{display:flex;flex-direction:row;align-items:center;gap:var(--comp-input-horizontal-gap)}.input-icons-container-left:empty,.input-icons-container-right:empty{display:none}.input-icons-container-left{padding-left:var(--comp-input-horizontal-gap)}.input-icons-container-right{padding-right:var(--comp-input-horizontal-gap)}.input-icons-container-right .btn-visibility-toggle{color:var(--tct-primary, var(--t-primary, #006eb2));font-size:12px}q2-icon{margin-top:calc(var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) / 2);margin-bottom:calc(var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) / 2);pointer-events:none;color:var(--tct-input-icon-stroke-primary, var(--t-input-icon-stroke-primary, var(--t-textA, var(--app-gray, rgba(77, 77, 77, 0.77)))));--tct-icon-stroke-primary:var(--tct-input-icon-stroke-primary, var(--t-input-icon-stroke-primary, var(--t-textA, var(--app-gray, rgba(77, 77, 77, 0.77)))))}.icon-left-muted{opacity:0.5}.input-prefix,.input-suffix{margin-left:calc(var(--comp-input-horizontal-gap) * -1);margin-right:calc(var(--comp-input-horizontal-gap) * -1);width:3em;display:inline-flex;align-items:center;justify-content:center;min-height:calc(\n        var(--comp-input-min-height) - var(--tct-input-focus-border-top-width, var(--t-input-focus-border-top-width, 1px)) -\n            var(--tct-input-focus-border-bottom-width, var(--t-input-focus-border-bottom-width, 1px))\n    );height:calc(\n        var(--tct-input-height, var(--t-input-height, 44px)) - var(--tct-input-focus-border-top-width, var(--t-input-focus-border-top-width, 1px)) - var(--tct-input-focus-border-bottom-width, var(--t-input-focus-border-bottom-width, 1px))\n    );font-size:var(--tct-input-prefix-font-size, var(--t-input-prefix-font-size, inherit));color:var(--tct-input-prefix-font-color, var(--t-input-prefix-font-color, inherit));background-color:var(--tct-input-prefix-bg, var(--t-input-prefix-bg, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2))))));transition:color var(--comp-input-tween), background-color var(--comp-input-tween)}.input-prefix{border-top-left-radius:calc(\n        var(--comp-input-border-top-left-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px))\n    );border-bottom-left-radius:calc(\n        var(--comp-input-border-bottom-left-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px))\n    );pointer-events:none;}.input-suffix{border-top-right-radius:calc(\n        var(--comp-input-border-top-right-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px))\n    );border-bottom-right-radius:calc(\n        var(--comp-input-border-bottom-right-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px))\n    )}.icon-error{color:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}.pw-show{position:absolute;margin-right:var(--tct-scale-2, var(--app-scale-2, 20px))}.btn-clear{margin-top:calc(var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) / 2);margin-bottom:calc(var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) / 2);height:22px;--tct-btn-icon-width:17px;--tct-btn-icon-height:22px;--tct-icon-size:17px}.messages-container{height:0px;overflow:hidden;background-color:var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));box-shadow:var(--tct-input-message-box-shadow, var(--t-input-message-box-shadow, var(--tct-box-shadow-1, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3)))));transition:height var(--tct-input-messages-tween, var(--t-input-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));margin-top:2px;z-index:1;position:absolute;width:100%;color:var(--tct-input-messages-font-color, var(--t-input-messages-font-color, inherit))}.has-error label{color:var(--tct-input-error-label-font-color, var(--t-input-error-label-font-color, var(--tct-input-label-font-color, var(--t-input-label-font-color, inherit))))}.has-error:not(.has-focus) .input-prefix,.has-error:not(.has-focus) .input-suffix{color:var(--tct-input-error-prefix-font-color, var(--t-input-error-prefix-font-color, inherit));background-color:var(--tct-input-error-prefix-bg, var(--t-input-error-prefix-bg, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))))))}.has-error .input-container:not(:focus-within){border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000))}.icon-left{width:26px;height:26px}.vertical-separator{height:calc(var(--comp-input-min-height) - 2px);border-right:1px solid var(--tct-input-prefix-border-color, var(--t-input-prefix-border-color, var(--tct-input-border-color, var(--t-input-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))))))}";
 
 const Q2Input = class {
   constructor(hostRef) {
@@ -2918,7 +2916,7 @@ const Q2Input = class {
       const eventDetail = {
         value: '',
         formattedValue: '',
-        minFormattedLength: this.formattedValueObject.minFormattedLength
+        minFormattedLength: this.formattedValueObject.minFormattedLength,
       };
       this.input.emit(eventDetail);
       this.change.emit(eventDetail);
@@ -2957,17 +2955,17 @@ const Q2Input = class {
       percentage: formatPercentage,
       postal: formatPostalCode,
       date: formatDate,
-      'credit-card': formatCreditCard.format
+      'credit-card': formatCreditCard.format,
     };
     if (formattingFunctions[this.type]) {
       return formattingFunctions[this.type](value, this.formatModifier, valueChangedFromProperty);
     }
     return {
-      value: value,
+      value,
       formattedValue: value,
       fullyFormattedValue: value,
       formattingCharacterCount: 0,
-      unformattedValue: value
+      unformattedValue: value,
     };
   }
   get canClear() {
@@ -3004,7 +3002,7 @@ const Q2Input = class {
       'percentage',
       'postal',
       'date',
-      'credit-card'
+      'credit-card',
     ];
     return maskedTypes.includes(this.type);
   }
@@ -3039,7 +3037,7 @@ const Q2Input = class {
       percentage: 'tel',
       postal: 'tel',
       date: 'tel',
-      'credit-card': 'tel'
+      'credit-card': 'tel',
     };
     if (['password', 'text'].includes(this.type) && this.textHidden) {
       return 'password';
@@ -3119,15 +3117,14 @@ const Q2Input = class {
   handleDataInput(newFormattedValue) {
     if (this.maxlength === undefined ||
       newFormattedValue.unformattedValue.length <= this.maxlength ||
-      newFormattedValue.unformattedValue.length <=
-        this.formattedValueObject.unformattedValue.length) {
+      newFormattedValue.unformattedValue.length <= this.formattedValueObject.unformattedValue.length) {
       this.formattedValueObject = newFormattedValue;
     }
     else if (this.maxlength) {
       newFormattedValue = this.getFormattedValue(newFormattedValue.unformattedValue.substring(0, this.maxlength), false);
       this.formattedValueObject = newFormattedValue;
     }
-    //ORDER IMPORTANT:  calculate cursor position -> set value -> set cursor position
+    // ORDER IMPORTANT:  calculate cursor position -> set value -> set cursor position
     const cursorPosition = this.calculateCursorPositionOnInput();
     this.inputField.value = this.formattedValueObject.formattedValue;
     this.input.emit(Object.assign({ value: this.formattedValueObject.value, formattedValue: this.formattedValueObject.fullyFormattedValue, minFormattedLength: this.formattedValueObject.minFormattedLength }, (this.formattedValueObject.type && { type: this.formattedValueObject.type })));
@@ -3137,25 +3134,32 @@ const Q2Input = class {
   render() {
     return (h("div", { class: this.wrapperClasses }, labelDOM(this), this.inputDOM(), messagesDOM(this)));
   }
+  /* tslint:disable:cyclomatic-complexity */
   inputDOM() {
-    return (h("div", { class: "input-container" }, h("div", { class: "input-icons-container-left" }, this.formattedValueObject.prefix && (h("span", { class: "input-prefix" }, this.formattedValueObject.prefix)), this.computedIconLeft && (h("q2-icon", { type: this.computedIconLeft, class: this.computedClassForIconLeft })), this.showIconSeperator && h("div", { class: "vertical-separator" }), this.hasError && this.type === 'currency' && (h("q2-icon", { type: "error", class: "icon-error" }))), this.pseudo ? (this.pseudoInputDOM()) : (h("input", { class: "input-field", id: this.inputId, type: this.computedType, size: this.formattedValueObject.prefix ? 10 : undefined, "aria-describedby": this.inputDescribedBy, "aria-required": `${!this.optional}`, "aria-invalid": `${this.hasError}`, "aria-controls": (this.ariaControls && `${this.ariaControls}`) || undefined, "aria-owns": (this.ariaOwns && `${this.ariaOwns}`) || undefined, "aria-haspopup": (this.ariaHaspopup && `${this.ariaHaspopup}`) || undefined, "aria-expanded": (!!this.ariaExpanded && `${!!this.ariaExpanded}`) || undefined, "aria-activedescendant": this.ariaActivedescendant && `${this.ariaActivedescendant}`, "aria-label": this.hideLabel && this.label ? loc(this.label) : undefined, autocomplete: this.autocomplete ? this.autocomplete : 'off', autocapitalize: this.autocapitalize === 'on' ? 'on' : 'off', autocorrect: this.autocorrect === 'on' ? 'on' : 'off', placeholder: (this.placeholder && loc(this.placeholder)) || undefined, role: (this.role && `${this.role}`) || undefined, "test-id": "inputField", readonly: !!this.readonly, disabled: !!this.disabled, onFocus: this.onInputFocus, onBlur: this.onInputBlur, onKeyDown: this.onInputKeydown, onInput: this.onInputInput, onPaste: this.onInputPaste })), h("div", { class: "input-icons-container-right" }, this.canClear && (h("q2-btn", { class: "btn-clear", ariaLabel: loc('tecton.element.input.clear', [this.label]), "test-id": "clearButton", onClick: this.onClearInput }, h("q2-icon", { type: "close", class: "icon-clear" }))), ['password', 'text'].includes(this.type) && this.showVisibilityToggle && (h("q2-btn", { class: "btn-visibility-toggle", "test-id": "toggleVisibilityButton", onClick: this.onToggleVisibility }, this.visibilityToggleText)), this.formattedValueObject.suffix && (h("span", { class: "input-suffix" }, this.formattedValueObject.suffix)), this.iconRight && !this.formattedValueObject.suffix && (h("q2-icon", { type: this.iconRight, class: "icon-right" })), this.hasError && this.type !== 'currency' && (h("q2-icon", { type: "error", class: "icon-error" })))));
+    return (h("div", { class: "input-container" }, h("div", { class: "input-icons-container-left" }, this.formattedValueObject.prefix && (h("span", { class: "input-prefix" }, this.formattedValueObject.prefix)), this.computedIconLeft && (h("q2-icon", { type: this.computedIconLeft, class: this.computedClassForIconLeft })), this.showIconSeperator && h("div", { class: "vertical-separator" }), this.hasError && this.type === 'currency' && (h("q2-icon", { type: "error", class: "icon-error" }))), this.pseudo ? (this.pseudoInputDOM()) : (h("input", { class: "input-field", id: this.inputId, type: this.computedType, size: this.formattedValueObject.prefix ? 10 : undefined, max: this.max, min: this.min, "aria-current": this.current || undefined, "aria-describedby": this.inputDescribedBy, "aria-required": `${!this.optional}`, "aria-invalid": `${this.hasError}`, "aria-controls": (this.ariaControls && `${this.ariaControls}`) || undefined, "aria-owns": (this.ariaOwns && `${this.ariaOwns}`) || undefined, "aria-haspopup": (this.ariaHaspopup && `${this.ariaHaspopup}`) || undefined, "aria-expanded": (!!this.ariaExpanded && `${!!this.ariaExpanded}`) || undefined, "aria-activedescendant": this.ariaActivedescendant && `${this.ariaActivedescendant}`, "aria-label": this.hideLabel && this.label ? loc(this.label) : undefined, autocomplete: this.autocomplete ? this.autocomplete : 'off', autocapitalize: this.autocapitalize === 'on' ? 'on' : 'off', autocorrect: this.autocorrect === 'on' ? 'on' : 'off', placeholder: (this.placeholder && loc(this.placeholder)) || undefined, role: (this.role && `${this.role}`) || undefined, "test-id": "inputField", readonly: !!this.readonly, disabled: !!this.disabled, onFocus: this.onInputFocus, onBlur: this.onInputBlur, onKeyDown: this.onInputKeydown, onInput: this.onInputInput, onPaste: this.onInputPaste })), h("div", { class: "input-icons-container-right" }, this.canClear && (h("q2-btn", { class: "btn-clear", ariaLabel: loc('tecton.element.input.clear', [this.label]), "test-id": "clearButton", onClick: this.onClearInput }, h("q2-icon", { type: "close", class: "icon-clear" }))), ['password', 'text'].includes(this.type) && this.showVisibilityToggle && (h("q2-btn", { class: "btn-visibility-toggle", "test-id": "toggleVisibilityButton", onClick: this.onToggleVisibility }, this.visibilityToggleText)), this.formattedValueObject.suffix && (h("span", { class: "input-suffix" }, this.formattedValueObject.suffix)), this.iconRight && !this.formattedValueObject.suffix && (h("q2-icon", { type: this.iconRight, class: "icon-right" })), this.hasError && this.type !== 'currency' && (h("q2-icon", { type: "error", class: "icon-error" })))));
   }
+  /* tslint:enable:cyclomatic-complexity */
   pseudoInputDOM() {
     const showPlaceholder = !this.value && !!this.placeholder;
-    return (h("button", { class: "pseudo-input input-field", type: "button", id: this.inputId, "aria-describedby": this.inputDescribedBy, "aria-required": `${!this.optional}`, "aria-invalid": `${this.hasError}`, "aria-controls": (this.ariaControls && `${this.ariaControls}`) || undefined, "aria-owns": (this.ariaOwns && `${this.ariaOwns}`) || undefined, "aria-haspopup": (this.ariaHaspopup && `${this.ariaHaspopup}`) || undefined, "aria-expanded": (!!this.ariaExpanded && `${!!this.ariaExpanded}`) || undefined, "aria-activedescendant": this.ariaActivedescendant && `${this.ariaActivedescendant}`, "aria-label": `${this.value}, ${(this.label && loc(this.label)) || ''}${(this
-        .optional &&
-        loc('tecton.element.input.optional')) ||
-        ''}`, role: (this.role && `${this.role}`) || undefined, disabled: !!this.disabled, "test-id": "q2InputInnerClearButton" }, h("span", { class: showPlaceholder ? 'placeholder-text' : '' }, showPlaceholder ? this.placeholder : this.value)));
+    let ariaLabelSuffix = '';
+    if (this.optional) {
+      ariaLabelSuffix = loc('tecton.element.input.optional');
+    }
+    if (this.readonly) {
+      ariaLabelSuffix = loc('tecton.element.input.readonly');
+    }
+    return (h("div", { class: "pseudo-input" }, h("button", { class: "input-field", type: "button", id: this.inputId, "aria-describedby": this.inputDescribedBy, "aria-required": `${!this.optional}`, "aria-invalid": `${this.hasError}`, "aria-controls": (this.ariaControls && `${this.ariaControls}`) || undefined, "aria-owns": (this.ariaOwns && `${this.ariaOwns}`) || undefined, "aria-haspopup": (this.ariaHaspopup && `${this.ariaHaspopup}`) || undefined, "aria-expanded": (!!this.ariaExpanded && `${!!this.ariaExpanded}`) || undefined, "aria-activedescendant": this.ariaActivedescendant && `${this.ariaActivedescendant}`, "aria-label": `${this.value}, ${(this.label && loc(this.label)) || ''}${ariaLabelSuffix}`, role: (this.role && `${this.role}`) || undefined, disabled: !!this.disabled, "test-id": "q2InputInnerClearButton" }, h("span", { class: showPlaceholder ? 'placeholder-text' : '' }, showPlaceholder ? this.placeholder : this.value))));
   }
   calculateCursorPositionOnInput() {
     const input = this.inputField;
     const formattedLength = this.formattedValueObject.formattedValue.length;
     const currentValueLength = input.value.length;
+    const defaultPosition = this.type === 'currency' ? formattedLength : 0;
     return {
-      startingPosition: (input && input.selectionStart) || formattedLength,
+      startingPosition: (input && input.selectionStart) || defaultPosition,
       valueLength: formattedLength,
       previousValueLength: input && currentValueLength,
-      hasSelection: false
+      hasSelection: false,
     };
   }
   calculateCursorPositionOnFocus() {
@@ -3166,16 +3170,14 @@ const Q2Input = class {
       startingPosition,
       valueLength,
       previousValueLength: valueLength,
-      hasSelection: getSelection().toString().length > 0
+      hasSelection: getSelection().toString().length > 0,
     };
   }
   setCursorPosition(cursorData) {
     if (this.canSetSelection && !cursorData.hasSelection) {
       const input = this.inputField;
       const { valueLength, previousValueLength, startingPosition } = cursorData;
-      if (startingPosition === valueLength &&
-        valueLength >= previousValueLength &&
-        this.type === 'currency') {
+      if (startingPosition === valueLength && valueLength >= previousValueLength && this.type === 'currency') {
         input.setSelectionRange(valueLength, valueLength);
       }
       else {