q2-tecton-elements 1.28.3 → 1.29.0

package/dist/components/index9.js

@@ -1,101 +1,3388 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { l as loc, h as handleAriaLabel } from './index15.js';
-import { s as shapes } from './shapes.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
+import { i as isMobile, d as createGuid, s as setMessageHeight, h as handleAriaLabel, o as overrideFocus, l as loc, a as isEventFromElement, j as labelDOM, m as messagesDOM } from './index16.js';
+import { d as defineCustomElement$4 } from './index4.js';
+import { d as defineCustomElement$3 } from './index5.js';
+import { d as defineCustomElement$2 } from './index8.js';
+import { d as defineCustomElement$1 } from './index10.js';
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch: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}.flex{display:flex}.flex-center{justify-content:center}.flex-left{justify-content:flex-start}.flex-right{justify-content:flex-end}.flex-v-center{align-items:center}.no-margin{margin:0}:host{display:block}:host([inline]),:host([modifiers*=inline]){display:inline-block}:host([hidden]){display:none}:host(:not([inline]):not([modifiers*=inline])){font-size:var(--tct-loading-spinner-size, var(--t-loading-spinner-size, var(--app-scale-12x, 60px)))}.q2-loading-animation{height:1em;width:1em}.half-circle-spinner,.half-circle-spinner *{box-sizing:border-box}.half-circle-spinner{border-radius:100%;position:relative}.half-circle-spinner .circle{position:absolute;width:100%;height:100%;border-radius:100%;border:0.0833333333em solid transparent}.half-circle-spinner .circle.circle-1{border-top-color:var(--tct-loading-primary-color, var(--t-loading-primary-color, var(--t-primary, #0079c1)));animation:half-circle-spinner-animation 1s infinite}.half-circle-spinner .circle.circle-2{border-bottom-color:var(--tct-loading-secondary-color, var(--t-loading-secondary-color, #9ddd4f));animation:half-circle-spinner-animation 1s infinite alternate}@keyframes half-circle-spinner-animation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.q2-loading-skeleton{position:relative;width:100%;height:100%;overflow:hidden;--comp-loading-skeleton-shimmer-color:var(--tct-loading-skeleton-shimmer-color, var(--t-base, rgba(255, 255, 255, 0.5)));--comp-loading-skeleton-vertical-gap:var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px));--comp-loading-skeleton-horizontal-gap:var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.q2-loading-skeleton-shimmer{position:absolute;width:1rem;height:100%;top:0;left:-100px;animation:skeletonShimmer 3s ease-in-out infinite;background-color:var(--comp-loading-skeleton-shimmer-color);box-shadow:0 0 25px 20px var(--comp-loading-skeleton-shimmer-color);transform:rotate(10deg)}.skeleton-shape.rectangle:not(.no-margin){margin:var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px)) var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.skeleton-shape.circle,.skeleton-shape.rectangle{background-color:var(--tct-loading-skeleton-element-bg, var(--tct-gray-l3, var(--t-gray-14, #f2f2f2)))}.skeleton-shape.rectangle{min-height:var(--tct-loading-skeleton-rectangle-min-height, 20px)}.skeleton-shape.circle{border-radius:50%;padding-top:100%}.flex .rectangle{flex-grow:1}.skeleton-table-row .rectangle{margin:var(--comp-loading-skeleton-vertical-gap) var(--comp-loading-skeleton-horizontal-gap)}.skeleton-table-row .rectangle:not(:first-child):not(:last-child){flex-grow:2}.skeleton-table-row-border .skeleton-shape{margin:0 var(--comp-loading-skeleton-horizontal-gap)}.form{flex-wrap:wrap}.form .field{margin:var(--comp-loading-skeleton-vertical-gap) 0}.form.columns-1 .field{flex-basis:100%}.form.columns-2 .field{flex-basis:50%}.form.columns-3 .field{flex-basis:33.3333%}.form.columns-4 .field{flex-basis:25%}.form.columns-5 .field{flex-basis:20%}.text .rectangle{margin-bottom:0}.text .header.center{margin:0 auto}.text .header.right{margin-left:auto}.text .header{height:1.5rem}.text .header.smaller{height:1rem}.detailed-item{flex-wrap:wrap}.detailed-item.right{flex-flow:row-reverse}.detailed-item-image{flex:0 0 auto;display:inline-flex}.center .detailed-item-image{flex-basis:100%;display:flex}.detailed-item-image .rectangle{flex-grow:0}.detailed-item-text>div{width:100%}.detailed-item-text{flex:1 1 auto}.detailed-item-text .text{margin-top:0;margin-bottom:0}.label-value{flex-wrap:wrap}.label-value .rectangle{flex-basis:calc(50% - 2 * var(--comp-loading-skeleton-horizontal-gap))}@keyframes skeletonShimmer{0%{left:-100px;opacity:1}70%{opacity:1}100%{left:800px;opacity:0}}";
+function formatNumber(val = '', options = {
+  prefix: '',
+  suffix: '',
+  decimals: 0,
+  decimalSeparator: '.',
+  thousandsSeparator: '',
+  allowDecimal: false,
+  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 = value.replace(/[^\d]/g, '');
+  let { integerString, decimalString } = splitValue(value, allowDecimal, options.decimals);
+  // define decimalString
+  let decimalSeparator = options.decimalSeparator;
+  if (!allowDecimal) {
+    decimalSeparator = '';
+    decimalString = '';
+  }
+  // define negative
+  const negativeSymbol = options.allowNegative && isNegative ? '-' : '';
+  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 fullyFormattedValue = negativeSymbol || integerString
+    ? `${negativeSymbol}${options.prefix}${integerString}${decimalSeparator}${decimalString}${options.suffix}`
+    : '';
+  let formattingCharacterCount = formattedValue.length - value.length;
+  if (decimalSeparator) {
+    formattingCharacterCount = formattingCharacterCount + options.decimalSeparator.length;
+  }
+  const prefix = options.prefix || options.suffix;
+  const maxlength = Number.MAX_SAFE_INTEGER.toString().length + formattingCharacterCount + decimalString.length;
+  const unformattedValue = `${integerString.replace(/[^0-9]/g, '')}${decimalString}`.replace(/^0+/, '');
+  return {
+    value,
+    formattedValue,
+    fullyFormattedValue,
+    prefix,
+    suffix: '',
+    formattingCharacterCount,
+    maxlength,
+    unformattedValue,
+  };
+}
+function splitValue(value, allowDecimal = false, decimals) {
+  if (!allowDecimal) {
+    return {
+      integerString: value,
+      decimalString: '',
+    };
+  }
+  const splitIndex = value.length - decimals;
+  let integerString = value.substring(0, splitIndex).padStart(1, '0');
+  if (integerString.length > 1 && integerString[0] === '0') {
+    integerString = integerString.substring(1);
+  }
+  const decimalString = value.substring(splitIndex).padStart(decimals, '0');
+  return {
+    integerString,
+    decimalString,
+  };
+}
+
+function formatValue(value = '', mask = '', options) {
+  const prefix = (options && options.prefix) || '';
+  const suffix = (options && options.suffix) || '';
+  if (!value || !mask) {
+    const fullyFormattedValue = `${prefix}${value}${suffix}`;
+    return {
+      value,
+      formattedValue: value,
+      fullyFormattedValue,
+      prefix: prefix.trim() || suffix.trim(),
+      formattingCharacterCount: 0,
+      unformattedValue: value,
+    };
+  }
+  const { unformattedValue, formattedValue, formattingCharacterCount } = generateMask(value, mask);
+  const fullyFormattedValue = `${prefix}${formattedValue}${suffix}`;
+  const maxlength = mask.length;
+  const minFormattedLength = getMinimumFormattedLength(mask, prefix, suffix);
+  return {
+    value: unformattedValue,
+    formattedValue,
+    fullyFormattedValue,
+    prefix: prefix.trim() || suffix.trim(),
+    formattingCharacterCount,
+    maxlength,
+    minFormattedLength,
+    unformattedValue,
+  };
+}
+const optionalValidatingChars = ['?'];
+function isOptionalValidatingChar(character) {
+  return optionalValidatingChars.includes(character);
+}
+const knownValidatingChars = ['#', '@', '*', ...optionalValidatingChars];
+function isKnownValidatingChar(character) {
+  return knownValidatingChars.includes(character);
+}
+function getStaticFormattingChars(mask) {
+  const knownChars = knownValidatingChars.join('|');
+  const formattingChars = mask.replace(new RegExp(`[${knownChars}]`, 'g'), '').split('');
+  return new Set(formattingChars);
+}
+function isStaticFormattingChar(character, formattingChars) {
+  return formattingChars.has(character);
+}
+function getValidatedChar(char, matcher) {
+  switch (matcher) {
+    case '#':
+      char = char.replace(/[^\d]/g, '');
+      break;
+    case '@':
+      char = char.toUpperCase().replace(/[^A-Z]+/g, ''); // allows only upper case
+      break;
+    case '*':
+      char = char.toUpperCase().replace(/[^\dA-Z]+/g, '');
+      break;
+    case '?':
+      char = char.replace(/[^\d]/g, '');
+      break;
+    default:
+      return char;
+  }
+  return char;
+}
+function generateMask(value, mask) {
+  const maskArray = mask.split('');
+  const formattingChars = getStaticFormattingChars(mask);
+  let currentValueIndex = 0;
+  let formattingCharacterCount = 0;
+  let unformattedValue = '';
+  const formattedValue = maskArray.reduce((acc, character) => {
+    if (currentValueIndex >= value.length) {
+      return acc;
+    }
+    if (isOptionalValidatingChar(character) && isStaticFormattingChar(value[currentValueIndex], formattingChars)) {
+      return acc;
+    }
+    if (isKnownValidatingChar(character)) {
+      // Step value index if formatting character pushed out of place by user input
+      currentValueIndex = getNextNonFormattingCharIndex(value, currentValueIndex, formattingChars);
+      if (currentValueIndex >= value.length) {
+        return acc;
+      }
+      const validChar = getValidatedChar(value[currentValueIndex], character);
+      acc += validChar;
+      unformattedValue += validChar;
+      currentValueIndex++;
+    }
+    else {
+      // Static formatting characters added directly to formatted string
+      acc += character;
+      formattingCharacterCount++;
+      if (character === value[currentValueIndex]) {
+        // Continue to walk value if next value at this index matches formatting character
+        currentValueIndex++;
+      }
+    }
+    return acc;
+  }, '');
+  return {
+    unformattedValue,
+    formattedValue,
+    formattingCharacterCount,
+  };
+}
+function getNextNonFormattingCharIndex(value, currentValueIndex, formattingChars) {
+  if (isStaticFormattingChar(value[currentValueIndex], formattingChars)) {
+    currentValueIndex++;
+    return getNextNonFormattingCharIndex(value, currentValueIndex, formattingChars);
+  }
+  return currentValueIndex;
+}
+function getMinimumFormattedLength(mask, prefix, suffix) {
+  return (mask.replace(new RegExp(`[${optionalValidatingChars.join('|')}]`, 'g'), '').length +
+    prefix.length +
+    suffix.length);
+}
+
+// decimal data source:  http://www.iso.org/iso/home/standards/currency_codes.htm  09/Nov/2016
+const currencyFormats = {
+  AED: {
+    prefix: '',
+    suffix: 'د.إ',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  AFN: {
+    prefix: '¤',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  ALL: {
+    prefix: 'L',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  AMD: {
+    prefix: 'դր.',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  ANG: {
+    prefix: 'ƒ',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  AOA: {
+    prefix: 'Kz',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  ARS: {
+    prefix: '$',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  AUD: {
+    prefix: '$',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  AWG: {
+    prefix: 'ƒ',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  AZN: {
+    prefix: '¤',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  BAM: {
+    prefix: 'КМ',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  BBD: {
+    prefix: '$',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  BDT: {
+    prefix: '৳',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  BGN: {
+    prefix: '৳',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  BHD: {
+    prefix: '',
+    suffix: 'ب.د',
+    decimals: 3,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  BIF: {
+    prefix: 'Fr',
+    suffix: '',
+    decimals: 0,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  BMD: {
+    prefix: '$',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  BND: {
+    prefix: '$',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  BOB: {
+    prefix: 'Bs.',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  BRL: {
+    prefix: 'R$',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  BSD: {
+    prefix: '$',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  BTN: {
+    prefix: '¤',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  BWP: {
+    prefix: 'P',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  BYN: {
+    prefix: 'Br',
+    suffix: '',
+    decimals: 0,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  BZD: {
+    prefix: '$',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  CAD: {
+    prefix: '$',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  CDF: {
+    prefix: 'Fr',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  CHF: {
+    prefix: 'Fr',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  CLF: {
+    prefix: 'Fr',
+    suffix: '',
+    decimals: 4,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  CLP: {
+    prefix: '$',
+    suffix: '',
+    decimals: 0,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  CNY: {
+    prefix: '¥',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  COP: {
+    prefix: '$',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  CRC: {
+    prefix: '₡',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  CUC: {
+    prefix: '$',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  CUP: {
+    prefix: '$',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  CVE: {
+    prefix: '$',
+    suffix: '',
+    decimals: 0,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  CZK: {
+    prefix: 'Kč',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  DJF: {
+    prefix: 'Fr',
+    suffix: '',
+    decimals: 0,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  DKK: {
+    prefix: 'kr',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  DOP: {
+    prefix: '$',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  DZD: {
+    prefix: '',
+    suffix: 'د.ج',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  EEK: {
+    prefix: 'KR',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  EGP: {
+    prefix: '£',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  ERN: {
+    prefix: 'Nfk',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  ETB: {
+    prefix: '¤',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  EUR: {
+    prefix: '€',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  FJD: {
+    prefix: '$',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  FKP: {
+    prefix: '£',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  GBP: {
+    prefix: '£',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  GEL: {
+    prefix: 'ლ',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  GHS: {
+    prefix: '¤',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  GIP: {
+    prefix: '£',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  GMD: {
+    prefix: 'D',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  GNF: {
+    prefix: 'Fr',
+    suffix: '',
+    decimals: 0,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  GTQ: {
+    prefix: 'Q',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  GYD: {
+    prefix: '$',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  HKD: {
+    prefix: '$',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  HNL: {
+    prefix: 'L',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  HRK: {
+    prefix: 'kn',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  HTG: {
+    prefix: 'G',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  HUF: {
+    prefix: 'Ft',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  IDR: {
+    prefix: 'Rs',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  ILS: {
+    prefix: '₪',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  INR: {
+    prefix: '₨',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  IQD: {
+    prefix: '',
+    suffix: 'ع.د',
+    decimals: 3,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  IRR: {
+    prefix: '¤',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  ISK: {
+    prefix: 'kr',
+    suffix: '',
+    decimals: 0,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  JMD: {
+    prefix: '$',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  JOD: {
+    prefix: '',
+    suffix: 'د.ا',
+    decimals: 3,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  JPY: {
+    prefix: '¥',
+    suffix: '',
+    decimals: 0,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  KES: {
+    prefix: 'Sh',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  KGS: {
+    prefix: '¤',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  KHR: {
+    prefix: '¤',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  KMF: {
+    prefix: 'Fr',
+    suffix: '',
+    decimals: 0,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  KPW: {
+    prefix: '₩',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  KRW: {
+    prefix: '₩',
+    suffix: '',
+    decimals: 0,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  KWD: {
+    prefix: 'د.ك',
+    suffix: '',
+    decimals: 3,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  KYD: {
+    prefix: '$',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  KZT: {
+    prefix: '〒',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  LAK: {
+    prefix: '₭',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  LBP: {
+    prefix: '',
+    suffix: 'ل.ل',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  LKR: {
+    prefix: 'Rs',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  LRD: {
+    prefix: '$',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  LSL: {
+    prefix: 'L',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  LTL: {
+    prefix: 'Lt',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  LVL: {
+    prefix: 'Ls',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  LYD: {
+    prefix: '',
+    suffix: 'ل.د',
+    decimals: 3,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  MAD: {
+    prefix: '',
+    suffix: 'د.م.',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  MDL: {
+    prefix: 'L',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  MGA: {
+    prefix: '¤',
+    suffix: '',
+    decimals: 1,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  MKD: {
+    prefix: 'ден',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  MMK: {
+    prefix: 'K',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  MNT: {
+    prefix: '₮',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  MOP: {
+    prefix: 'P',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  MRU: {
+    prefix: 'UM',
+    suffix: '',
+    decimals: 1,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  MUR: {
+    prefix: '₨',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  MVR: {
+    prefix: '¤',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  MWK: {
+    prefix: 'MK',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  MXN: {
+    prefix: '$',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  MYR: {
+    prefix: 'RM',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  MZN: {
+    prefix: 'MTn',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  NAD: {
+    prefix: '$',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  NGN: {
+    prefix: '₦',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  NIO: {
+    prefix: 'C$',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  NOK: {
+    prefix: 'kr',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  NPR: {
+    prefix: '₨',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  NZD: {
+    prefix: '$',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  OMR: {
+    prefix: '',
+    suffix: 'ر.ع.',
+    decimals: 3,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  PAB: {
+    prefix: 'B/.',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  PEN: {
+    prefix: 'S/.',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  PGK: {
+    prefix: 'K',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  PHP: {
+    prefix: 'p',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  PKR: {
+    prefix: '₨',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  PLN: {
+    prefix: 'zł',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  PYG: {
+    prefix: '¤',
+    suffix: '',
+    decimals: 0,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  QAR: {
+    prefix: '',
+    suffix: 'ر.ق',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  RON: {
+    prefix: 'L',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  RSD: {
+    prefix: 'дин.',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  RUB: {
+    prefix: 'руб.',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  RWF: {
+    prefix: 'Fr',
+    suffix: '',
+    decimals: 0,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  SAR: {
+    prefix: '',
+    suffix: 'ر.س',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  SBD: {
+    prefix: '$',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  SCR: {
+    prefix: '₨',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  SDG: {
+    prefix: '£',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  SEK: {
+    prefix: 'kr',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  SGD: {
+    prefix: '$',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  SHP: {
+    prefix: '£',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  SKK: {
+    prefix: 'Sk',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  SLL: {
+    prefix: 'Le',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  SOS: {
+    prefix: 'Sh',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  SRD: {
+    prefix: '$',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  STN: {
+    prefix: 'Db',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  SVC: {
+    prefix: '₡',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  SYP: {
+    prefix: '£',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  SZL: {
+    prefix: 'L',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  THB: {
+    prefix: '฿',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  TJS: {
+    prefix: 'ЅМ',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  TMM: {
+    prefix: 'm',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  TND: {
+    prefix: '',
+    suffix: 'د.ت',
+    decimals: 3,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  TOP: {
+    prefix: 'T$',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  TRY: {
+    prefix: 'YTL',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  TTD: {
+    prefix: '$',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  TWD: {
+    prefix: '$',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  TZS: {
+    prefix: 'Sh',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  UAH: {
+    prefix: '¤',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  UGX: {
+    prefix: 'Sh',
+    suffix: '',
+    decimals: 0,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  USD: {
+    prefix: '$',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  UYU: {
+    prefix: '$',
+    suffix: '',
+    decimals: 0,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  UZS: {
+    prefix: '¤',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  VEF: {
+    prefix: 'Bs F',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  VND: {
+    prefix: '₫',
+    suffix: '',
+    decimals: 0,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  VUV: {
+    prefix: 'Vt',
+    suffix: '',
+    decimals: 0,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  WST: {
+    prefix: 'T',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  XAF: {
+    prefix: 'Fr',
+    suffix: '',
+    decimals: 0,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  XCD: {
+    prefix: '$',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  XOF: {
+    prefix: 'Fr',
+    suffix: '',
+    decimals: 0,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  XPF: {
+    prefix: 'Fr',
+    suffix: '',
+    decimals: 0,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  YER: {
+    prefix: '¤',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  ZAR: {
+    prefix: 'R',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  ZMW: {
+    prefix: 'ZK',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  },
+  ZWD: {
+    prefix: '$',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+  }, // '$9,999.99'
+};
+function formatCurrency(value, currencyCode = 'USD', explicit = false) {
+  let processedCurrencyCode = currencyCode || '';
+  let allowDecimal = true;
+  if (processedCurrencyCode.includes('-integer')) {
+    processedCurrencyCode = processedCurrencyCode.split('-integer')[0];
+    allowDecimal = false;
+  }
+  const currencyFormat = currencyFormats[processedCurrencyCode];
+  if (!currencyFormat) {
+    return formatValue(value);
+  }
+  const options = Object.assign(Object.assign({}, currencyFormat), { allowDecimal: allowDecimal && currencyFormat.decimals > 0, allowNegative: false });
+  return formatNumber(value, options, explicit);
+}
+
+const phoneNumberFormats = {
+  AF: {
+    mask: '(##) #######',
+    prefix: '+93 ',
+  },
+  AL: {
+    mask: '#######',
+    prefix: '+355 ',
+  },
+  DZ: {
+    mask: '(##) ###-###',
+    prefix: '+213 ',
+  },
+  // AS
+  AD: {
+    mask: '(#) #####',
+    prefix: '+376 ',
+  },
+  AO: {
+    mask: '#########',
+    prefix: '+244 ',
+  },
+  AI: {
+    mask: '(###) ###-####',
+    prefix: '+1 ',
+  },
+  AG: {
+    mask: '(###) ###-####',
+    prefix: '+1 ',
+  },
+  AR: {
+    mask: '##########',
+    prefix: '+54 ',
+  },
+  AM: {
+    mask: '########',
+    prefix: '+375 ',
+  },
+  AQ: {
+    mask: '##-####',
+    prefix: '+672 ',
+  },
+  AW: {
+    mask: '###-####',
+    prefix: '+297 ',
+  },
+  AU: {
+    mask: '(##) ####-####',
+    prefix: '+61 ',
+  },
+  /* AT: {
+      mask:'####?????????',
+      prefix: ''
+  }, */
+  AT: {
+    mask: '#############',
+    prefix: '+43 ',
+  },
+  /* AZ: {
+      mask:'########?',
+      prefix: ''
+  }, */
+  AZ: {
+    mask: '#########',
+    prefix: '+994 ',
+  },
+  BS: {
+    mask: '(###) ###-####',
+    prefix: '+1 ',
+  },
+  BH: {
+    mask: '####-####',
+    prefix: '+973 ',
+  },
+  /* BD: {
+      mask:'#######??',
+      prefix: ''
+  }, */
+  BD: {
+    mask: '#########',
+    prefix: '+880 ',
+  },
+  BB: {
+    mask: '(###) ###-####',
+    prefix: '+1 ',
+  },
+  BY: {
+    mask: '#########',
+    prefix: '+375 ',
+  },
+  BE: {
+    mask: '########??',
+    prefix: '+32 ',
+  },
+  BZ: {
+    mask: '#######',
+    prefix: '+501 ',
+  },
+  BJ: {
+    mask: '(##) ###-###',
+    prefix: '+229 ',
+  },
+  BM: {
+    mask: '(###) ###-####',
+    prefix: '+1 ',
+  },
+  BT: {
+    mask: '(#) ###-###',
+    prefix: '+975 ',
+  },
+  BO: {
+    mask: '(#) ###-####',
+    prefix: '+591 ',
+  },
+  BA: {
+    mask: '(##) ##-##-##',
+    prefix: '+387 ',
+  },
+  /* BW: {
+      mask:'#######?',
+      prefix: ''
+  }, */
+  BW: {
+    mask: '########',
+    prefix: '+267 ',
+  },
+  BR: {
+    mask: '(##) ####-####',
+    prefix: '+55 ',
+  },
+  BN: {
+    mask: '###-####',
+    prefix: '+673 ',
+  },
+  BG: {
+    mask: '#######?',
+    prefix: '+359 ',
+  },
+  BF: {
+    mask: '##-##-##-##',
+    prefix: '+226 ',
+  },
+  BI: {
+    mask: '####-####',
+    prefix: '+257 ',
+  },
+  KH: {
+    mask: '(##) ######',
+    prefix: '+855 ',
+  },
+  CM: {
+    mask: '####-####',
+    prefix: '+237 ',
+  },
+  CA: {
+    mask: '(###) ###-####',
+    prefix: '+1 ',
+  },
+  CV: {
+    mask: '###-####',
+    prefix: '+238 ',
+  },
+  KY: {
+    mask: '(###) ###-####',
+    prefix: '+1 ',
+  },
+  CF: {
+    mask: '###-###',
+    prefix: '+236 ',
+  },
+  TD: {
+    mask: '###-##-##',
+    prefix: '+235 ',
+  },
+  /* CL: {
+      mask:'########?',
+      prefix: ''
+  }, */
+  CL: {
+    mask: '#########',
+    prefix: '+56 ',
+  },
+  /* CN: {
+      mask:'########???',
+      prefix: ''
+  }, */
+  CN: {
+    mask: '###########',
+    prefix: '+86 ',
+  },
+  /* CO: {
+      mask:'########??',
+      prefix: ''
+  }, */
+  CO: {
+    mask: '##########',
+    prefix: '57 ',
+  },
+  KM: {
+    mask: '###-####',
+    prefix: '+269 ',
+  },
+  CD: {
+    mask: '###-####',
+    prefix: '+243 ',
+  },
+  CG: {
+    mask: '###-####',
+    prefix: '+242 ',
+  },
+  // CK
+  CR: {
+    mask: '####-####',
+    prefix: '+506 ',
+  },
+  CI: {
+    mask: '####-####',
+    prefix: '+225 ',
+  },
+  HR: {
+    mask: '########?',
+    prefix: '+385 ',
+  },
+  /* CU: {
+      mask:'#####?ID:?????',
+      prefix: ''
+  }, */
+  CU: {
+    mask: '###########',
+    prefix: '+53 ',
+  },
+  CY: {
+    mask: '####-####',
+    prefix: '+357 ',
+  },
+  CZ: {
+    mask: '#########',
+    prefix: '+420 ',
+  },
+  DK: {
+    mask: '####-####',
+    prefix: '+45 ',
+  },
+  DJ: {
+    mask: '##-##-##-##',
+    prefix: '+253 ',
+  },
+  DM: {
+    mask: '(###) ###-####',
+    prefix: '+1 ',
+  },
+  DO: {
+    mask: '(###) ###-####',
+    prefix: '+1 ',
+  },
+  TL: {
+    mask: '###-####',
+    prefix: '+670 ',
+  },
+  EC: {
+    mask: '(##) ###-####',
+    prefix: '+593 ',
+  },
+  /* EG: {
+      mask:'########??',
+      prefix: ''
+  }, */
+  EG: {
+    mask: '##########',
+    prefix: '+20 ',
+  },
+  SV: {
+    mask: '####-####',
+    prefix: '+503 ',
+  },
+  GQ: {
+    mask: '##-####',
+    prefix: '+240 ',
+  },
+  // ER:
+  EE: {
+    mask: '#######?',
+    prefix: '+372 ',
+  },
+  ET: {
+    mask: '(##) ###-####',
+    prefix: '+251 ',
+  },
+  FK: {
+    mask: '#####',
+    prefix: '+500 ',
+  },
+  FO: {
+    mask: '######',
+    prefix: '+298 ',
+  },
+  FJ: {
+    mask: '###-####',
+    prefix: '+679 ',
+  },
+  /* FI: {
+      mask:'#####???????',
+      prefix: ''
+  }, */
+  FI: {
+    mask: '############',
+    prefix: '+358 ',
+  },
+  FR: {
+    mask: '#########',
+    prefix: '+33 ',
+  },
+  /* GF: {
+      mask:'#########?',
+      prefix: ''
+  }, */
+  GF: {
+    mask: '##########',
+    prefix: '+594 ',
+  },
+  PF: {
+    mask: '######',
+    prefix: '+689 ',
+  },
+  GA: {
+    mask: '######?',
+    prefix: '+241 ',
+  },
+  GM: {
+    mask: '###-####',
+    prefix: '+220 ',
+  },
+  GE: {
+    mask: '########',
+    prefix: '+995 ',
+  },
+  /* DE: {
+      mask:'######?????',
+      prefix: ''
+  }, */
+  DE: {
+    mask: '###########',
+    prefix: '+49 ',
+  },
+  /* GH: {
+      mask:'########?',
+      prefix: ''
+  }, */
+  GH: {
+    mask: '#########',
+    prefix: '+233 ',
+  },
+  GI: {
+    mask: '####-####',
+    prefix: '+350 ',
+  },
+  GR: {
+    mask: '##########',
+    prefix: '+30 ',
+  },
+  GL: {
+    mask: '###-###',
+    prefix: '+299 ',
+  },
+  GD: {
+    mask: '(###) ###-####',
+    prefix: '+1 ',
+  },
+  GP: {
+    mask: '##########',
+    prefix: '+590 ',
+  },
+  GU: {
+    mask: '(###) ###-####',
+    prefix: '+1 ',
+  },
+  GT: {
+    mask: '####-####',
+    prefix: '+502 ',
+  },
+  GN: {
+    mask: '####-####',
+    prefix: '+224 ',
+  },
+  GW: {
+    mask: '###-####',
+    prefix: '+245 ',
+  },
+  GY: {
+    mask: '(###) ####',
+    prefix: '+592 ',
+  },
+  HK: {
+    mask: '####-####',
+    prefix: '+852 ',
+  },
+  HN: {
+    mask: '########',
+    prefix: '+504 ',
+  },
+  HT: {
+    mask: '####-####',
+    prefix: '+509 ',
+  },
+  HU: {
+    mask: '########??',
+    prefix: '+36 ',
+  },
+  /* IS: {
+      mask:'#######??',
+      prefix: ''
+  }, */
+  IS: {
+    mask: '#########',
+    prefix: '+354 ',
+  },
+  IN: {
+    mask: '##########',
+    prefix: '+91 ',
+  },
+  /* ID: {
+      mask:'#######???',
+      prefix: ''
+  }, */
+  ID: {
+    mask: '#######??????',
+    prefix: '+62 ',
+  },
+  IR: {
+    mask: '##########',
+    prefix: '+98 ',
+  },
+  /* IQ: {
+      mask:'########??',
+      prefix: ''
+  }, */
+  IQ: {
+    mask: '##########',
+    prefix: '+964 ',
+  },
+  /* IE: {
+      mask:'#######??',
+      prefix: ''
+  }, */
+  IE: {
+    mask: '#########',
+    prefix: '+353 ',
+  },
+  /* IL: {
+      mask:'########?',
+      prefix: ''
+  }, */
+  IL: {
+    mask: '#########',
+    prefix: '+972 ',
+  },
+  /* IT: {
+      mask:'######????',
+      prefix: ''
+  }, */
+  IT: {
+    mask: '##########',
+    prefix: '+39 ',
+  },
+  JM: {
+    mask: '(###) ###-####',
+    prefix: '+1 ',
+  },
+  JP: {
+    mask: '#########',
+    prefix: '+81 ',
+  },
+  /* JO: {
+      mask:'#######??',
+      prefix: ''
+  }, */
+  JO: {
+    mask: '#########',
+    prefix: '+962 ',
+  },
+  KZ: {
+    mask: '(###) ####-###',
+    prefix: '+7 ',
+  },
+  /* KE: {
+      mask:'######????',
+      prefix: ''
+  }, */
+  KE: {
+    mask: '##########',
+    prefix: '+254 ',
+  },
+  KI: {
+    mask: '##-###',
+    prefix: '+686 ',
+  },
+  // kp
+  /* KR: {
+      mask:'####??????',
+      prefix: ''
+  }, */
+  KR: {
+    mask: '##########',
+    prefix: '+82 ',
+  },
+  KW: {
+    mask: '####-####',
+    prefix: '+965 ',
+  },
+  KG: {
+    mask: '#########',
+    prefix: '+996 ',
+  },
+  LA: {
+    mask: '########?',
+    prefix: '+856 ',
+  },
+  LV: {
+    mask: '####-####',
+    prefix: '+371 ',
+  },
+  LB: {
+    mask: '#######?',
+    prefix: '+961 ',
+  },
+  LS: {
+    mask: '##-###-###',
+    prefix: '+266 ',
+  },
+  // LR
+  /* LY: {
+      mask:'########?',
+      prefix: ''
+  }, */
+  LY: {
+    mask: '########?',
+    prefix: '+218 ',
+  },
+  LI: {
+    mask: '###-####',
+    prefix: '+423 ',
+  },
+  LT: {
+    mask: '########',
+    prefix: '+370 ',
+  },
+  /* LU: {
+      mask:'#####??????',
+      prefix: '+352 '
+  }, */
+  LU: {
+    mask: '###########',
+    prefix: '+352 ',
+  },
+  MO: {
+    mask: '####-####',
+    prefix: '+853 ',
+  },
+  MK: {
+    mask: '########',
+    prefix: '+389 ',
+  },
+  MG: {
+    mask: '##-##-###-##',
+    prefix: '+261 ',
+  },
+  /* MW: {
+      mask:'#######??',
+      prefix: '+265 '
+  }, */
+  MW: {
+    mask: '#########',
+    prefix: '+265 ',
+  },
+  /* MY: {
+      mask:'#######???',
+      prefix: '+60 '
+  }, */
+  MY: {
+    mask: '##########',
+    prefix: '+60 ',
+  },
+  MV: {
+    mask: '###-####',
+    prefix: '+960 ',
+  },
+  ML: {
+    mask: '####-####',
+    prefix: '+223 ',
+  },
+  MT: {
+    mask: '##-##-##-##',
+    prefix: '+356 ',
+  },
+  MH: {
+    mask: '###-####',
+    prefix: '+692 ',
+  },
+  MQ: {
+    mask: '###-######',
+    prefix: '+596 ',
+  },
+  // MR
+  MU: {
+    mask: '###-####',
+    prefix: '+230 ',
+  },
+  // YT
+  MX: {
+    mask: '(###) ###-####',
+    prefix: '+52 ',
+  },
+  // FM
+  MD: {
+    mask: '########',
+    prefix: '+373 ',
+  },
+  MC: {
+    mask: '####-####',
+    prefix: '+377 ',
+  },
+  /* MN: {
+      mask:'######?????',
+      prefix: '+976 '
+  }, */
+  MN: {
+    mask: '###########',
+    prefix: '+976 ',
+  },
+  MS: {
+    mask: '(###) ###-####',
+    prefix: '+1 ',
+  },
+  MA: {
+    mask: '#########?',
+    prefix: '+212 ',
+  },
+  /* MZ: {
+      mask:'########?',
+      prefix: '+258 '
+  }, */
+  MZ: {
+    mask: '#########',
+    prefix: '+258 ',
+  },
+  /* MM: {
+      mask:'#######?',
+      prefix: '+95 '
+  }, */
+  MM: {
+    mask: '########',
+    prefix: '+95 ',
+  },
+  /* NA: {
+      mask:'######????',
+      prefix: '+264 '
+  }, */
+  NA: {
+    mask: '##########',
+    prefix: '+264 ',
+  },
+  // NR
+  /* NP: {
+      mask:'########??',
+      prefix: '+977 '
+  }, */
+  NP: {
+    mask: '##########',
+    prefix: '+977 ',
+  },
+  NL: {
+    mask: '#########',
+    prefix: '+31 ',
+  },
+  /* AN: {
+      mask:'#######?',
+      prefix: '+599 '
+  }, */
+  AN: {
+    mask: '########',
+    prefix: '+599 ',
+  },
+  NC: {
+    mask: '###-###',
+    prefix: '+687 ',
+  },
+  /* NZ: {
+      mask:'########??',
+      prefix: '+64 '
+  }, */
+  NZ: {
+    mask: '##########',
+    prefix: '+64 ',
+  },
+  NI: {
+    mask: '####-####',
+    prefix: '+505 ',
+  },
+  NE: {
+    mask: '##-###-###',
+    prefix: '+227 ',
+  },
+  /* NG: {
+      mask:'########??',
+      prefix: '+234 '
+  }, */
+  NG: {
+    mask: '##########',
+    prefix: '+234 ',
+  },
+  // NU
+  MP: {
+    mask: '(###) ###-####',
+    prefix: '+1 ',
+  },
+  NO: {
+    mask: '####-####',
+    prefix: '+47 ',
+  },
+  OM: {
+    mask: '####-####',
+    prefix: '+968 ',
+  },
+  /* PK: {
+      mask:'#########?',
+      prefix: '+92 '
+  }, */
+  PK: {
+    mask: '##########',
+    prefix: '+92 ',
+  },
+  PW: {
+    mask: '###-####',
+    prefix: '+680 ',
+  },
+  /* PA: {
+      mask:'#######?',
+      prefix: '+507 '
+  }, */
+  PA: {
+    mask: '########',
+    prefix: '+507 ',
+  },
+  /* PG: {
+      mask:'#######?',
+      prefix: '+675 '
+  }, */
+  PG: {
+    mask: '########',
+    prefix: '+675 ',
+  },
+  // PY
+  /* PE: {
+      mask:'#######????',
+      prefix: '+51 '
+  }, */
+  PE: {
+    mask: '###########',
+    prefix: '+51 ',
+  },
+  /* PH: {
+      mask:'########??',
+      prefix: '+63 '
+  }, */
+  PH: {
+    mask: '##########',
+    prefix: '+63 ',
+  },
+  PL: {
+    mask: '#########',
+    prefix: '+48 ',
+  },
+  PT: {
+    mask: '#-####-####',
+    prefix: '+351 ',
+  },
+  PR: {
+    mask: '(###) ###-####',
+    prefix: '+1 ',
+  },
+  QA: {
+    mask: '###-####',
+    prefix: '+974 ',
+  },
+  RE: {
+    mask: '###-###-###',
+    prefix: '+262 ',
+  },
+  RO: {
+    mask: '#########',
+    prefix: '+40 ',
+  },
+  RU: {
+    mask: '##########',
+    prefix: '+7 ',
+  },
+  RW: {
+    mask: '###-###-###',
+    prefix: '+250 ',
+  },
+  SH: {
+    mask: '#-###',
+    prefix: '+290 ',
+  },
+  // PM
+  KN: {
+    mask: '(###) ###-####',
+    prefix: '+1 ',
+  },
+  LC: {
+    mask: '(###) ###-####',
+    prefix: '+1 ',
+  },
+  VC: {
+    mask: '(###) ###-####',
+    prefix: '+1 ',
+  },
+  // WS
+  // SM
+  ST: {
+    mask: '##-####',
+    prefix: '+239 ',
+  },
+  /* SA: {
+      mask:'########?',
+      prefix: '+966 '
+  }, */
+  SA: {
+    mask: '#########',
+    prefix: '+966 ',
+  },
+  SN: {
+    mask: '##-###-####',
+    prefix: '+221 ',
+  },
+  SC: {
+    mask: '###-###',
+    prefix: '+248 ',
+  },
+  SL: {
+    mask: '(##) ###-###',
+    prefix: '+232 ',
+  },
+  SG: {
+    mask: '####-####',
+    prefix: '+65 ',
+  },
+  SK: {
+    mask: '#########',
+    prefix: '+421 ',
+  },
+  SI: {
+    mask: '########',
+    prefix: '+386 ',
+  },
+  SB: {
+    mask: '##-###',
+    prefix: '+677 ',
+  },
+  // SO
+  ZA: {
+    mask: '(##) ###-####',
+    prefix: '+27 ',
+  },
+  ES: {
+    mask: '###-###-###',
+    prefix: '+34 ',
+  },
+  LK: {
+    mask: '(##) ###-####',
+    prefix: '+94 ',
+  },
+  SD: {
+    mask: '##-###-####',
+    prefix: '+249 ',
+  },
+  SR: {
+    mask: '######?',
+    prefix: '+597 ',
+  },
+  SZ: {
+    mask: '###-####',
+    prefix: '+268 ',
+  },
+  /* SE: {
+      mask:'######?????',
+      prefix: '+46 '
+  }, */
+  SE: {
+    mask: '###########',
+    prefix: '+46 ',
+  },
+  CH: {
+    mask: '(##) ###-####',
+    prefix: '+41 ',
+  },
+  /* SY: {
+      mask:'########?',
+      prefix: '+963 '
+  }, */
+  SY: {
+    mask: '#########',
+    prefix: '+963 ',
+  },
+  TJ: {
+    mask: '#########',
+    prefix: '+992 ',
+  },
+  TZ: {
+    mask: '#########',
+    prefix: '+255 ',
+  },
+  /* TH: {
+      mask:'########?',
+      prefix: '+66 '
+  }, */
+  TH: {
+    mask: '#########',
+    prefix: '+66 ',
+  },
+  TG: {
+    mask: '###-####',
+    prefix: '+228 ',
+  },
+  // TK
+  // TO
+  TT: {
+    mask: '(###) ###-####',
+    prefix: '+1 ',
+  },
+  TN: {
+    mask: '##-###-###',
+    prefix: '+216 ',
+  },
+  TR: {
+    mask: '(###) ###-####',
+    prefix: '+90 ',
+  },
+  TM: {
+    mask: '########',
+    prefix: '+993 ',
+  },
+  TC: {
+    mask: '(###) ###-####',
+    prefix: '+1 ',
+  },
+  // TV
+  UG: {
+    mask: '#########',
+    prefix: '+256 ',
+  },
+  UA: {
+    mask: '(##) ###-####',
+    prefix: '+380 ',
+  },
+  /* AE: {
+      mask:'########?',
+      prefix: '+971 '
+  }, */
+  AE: {
+    mask: '#########',
+    prefix: '+971 ',
+  },
+  /* GB: {
+      mask:'##########???',
+      prefix: '+44 '
+  }, */
+  GB: {
+    mask: '#########????',
+    prefix: '+44 ',
+  },
+  UY: {
+    mask: '########?',
+    prefix: '+598 ',
+  },
+  UZ: {
+    mask: '(##) ###-####',
+    prefix: '+998 ',
+  },
+  // VU
+  // VA
+  VE: {
+    mask: '(###) ###-####',
+    prefix: '+58 ',
+  },
+  VN: {
+    mask: '#######????',
+    prefix: '+84 ',
+  },
+  VG: {
+    mask: '(###) ###-####',
+    prefix: '+1 ',
+  },
+  VI: {
+    mask: '(###) ###-####',
+    prefix: '+1 ',
+  },
+  // WF
+  /* YE: {
+      mask:'#######??',
+      prefix: '+967 '
+  }, */
+  YE: {
+    mask: '#########',
+    prefix: '+967 ',
+  },
+  // YU
+  ZM: {
+    mask: '#########',
+    prefix: '+260 ',
+  },
+  /* ZW: {
+      mask:'####?????',
+      prefix: '+263 '
+  }, */
+  ZW: {
+    mask: '#########',
+    prefix: '+263 ',
+  },
+  AC: {
+    mask: '####',
+    prefix: '+247 ',
+  },
+  ME: {
+    mask: '(##) ###-####',
+    prefix: '+382 ',
+  },
+  /* PS: {
+      mask:'########?',
+      prefix: '+970 '
+  }, */
+  PS: {
+    mask: '#########',
+    prefix: '+970 ',
+  },
+  /* RS: {
+      mask:'#######??',
+      prefix: '+381 '
+  }, */
+  RS: {
+    mask: '#########',
+    prefix: '+381 ',
+  },
+  /* TW: {
+      mask:'########?',
+      prefix: '+886 '
+  }, */
+  TW: {
+    mask: '#########',
+    prefix: '+886 ',
+  },
+  CW: {
+    mask: '#-###-####',
+    prefix: '+599 ',
+  },
+  US: {
+    mask: '(###) ###-####',
+    prefix: '',
+  },
+};
+function formatPhoneNumber(value, isoCode = 'US') {
+  const { mask, prefix } = phoneNumberFormats[isoCode] || phoneNumberFormats.US;
+  const options = {
+    prefix,
+  };
+  const val = value || '';
+  // Brazil need edge case handle, mobile: (xx) xxxxx-xxxx, land phone: (xx) xxxx-xxxx
+  if (isoCode === 'BR' && val.replace(/[^0-9]/g, '').length === 11) {
+    return formatValue(val, '(##) #####-####', options);
+  }
+  else {
+    return formatValue(val, mask, options);
+  }
+}
+
+function formatSSN(value) {
+  return formatValue(value, '###-##-####');
+}
+
+function formatAlphanumeric(value) {
+  const val = (value || '').replace(/[^\da-zA-Z]/g, '');
+  return formatValue(val);
+}
+
+function formatAlpha(value, modifier) {
+  let val = value || '';
+  if (modifier === 'spaced') {
+    val = val.replace(/[^a-zA-Z ]/g, '');
+  }
+  else {
+    val = val.replace(/[^a-zA-Z]/g, '');
+  }
+  return formatValue(val);
+}
+
+const numberFormats = {
+  delimited: {
+    prefix: '',
+    suffix: '',
+    decimals: 0,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+    allowDecimal: false,
+    allowNegative: true,
+  },
+  integer: {
+    prefix: '',
+    suffix: '',
+    decimals: 0,
+    decimalSeparator: '.',
+    thousandsSeparator: '',
+    allowDecimal: true,
+    allowNegative: true,
+  },
+  dec: {
+    prefix: '',
+    suffix: '',
+    decimals: 2,
+    decimalSeparator: '.',
+    thousandsSeparator: ',',
+    allowDecimal: true,
+    allowNegative: true,
+  },
+};
+function getNumberFormat(key) {
+  let decimals;
+  if (key.includes('dec')) {
+    decimals = Number(key.replace('dec', ''));
+    key = 'dec';
+  }
+  let numberFormat = numberFormats[key];
+  if (!numberFormat) {
+    return;
+  }
+  numberFormat = Object.assign({}, numberFormat);
+  if (decimals) {
+    numberFormat.decimals = decimals;
+  }
+  return numberFormat;
+}
+function formatNumeric(value = '', modifier = '', explicit = false) {
+  const numberFormat = getNumberFormat(modifier);
+  if (!numberFormat) {
+    const val = (value || '').replace(/[^\d.,-]/g, '');
+    return formatValue(val);
+  }
+  return formatNumber(value, numberFormat, explicit);
+}
+function formatPercentage(value = '', modifier = '', explicit = false) {
+  const numberFormat = getNumberFormat(modifier);
+  if (!numberFormat) {
+    const val = (value || '').replace(/[^\d.,-]/g, '');
+    return formatValue(val, undefined, { suffix: '%' });
+  }
+  numberFormat.suffix = '%';
+  return formatNumber(value, numberFormat, explicit);
+}
+
+const postalCodeFormats = {
+  AF: '####',
+  AL: '####',
+  DZ: '#####',
+  AC: 'ASCN 1ZZ',
+  AD: 'AD###',
+  AR: '####',
+  'AR+': '@####@@@',
+  AI: 'AI-2640',
+  AM: '####',
+  AS: '#####',
+  'AS+4': '#####-####',
+  AU: '####',
+  AT: '####',
+  AZ: 'AZ ####',
+  BH: '###?',
+  BD: '####',
+  BB: 'BB#####',
+  BY: '######',
+  BE: '####',
+  BM: '@@ **',
+  BT: '#####',
+  BA: '######',
+  BR: '#####',
+  'BR+3': '#####-###',
+  VG: 'VG####',
+  BN: '@@####',
+  BG: '####',
+  KH: '#####',
+  KY: 'KY#-####',
+  CA: '@#@ #@#',
+  CL: '###-####',
+  CN: '######',
+  CX: '####',
+  CC: '####',
+  CO: '######',
+  CR: '#####',
+  'CR+4': '#####-####',
+  CV: '####',
+  HR: '#####',
+  CU: '#####',
+  CY: '####',
+  CZ: '### ##',
+  DK: '####',
+  DO: '#####',
+  EC: '######',
+  SV: '####',
+  EG: '#####',
+  EE: '#####',
+  ET: '####',
+  FK: 'FIQQ 1ZZ',
+  FO: '###',
+  FI: '#####',
+  FR: '#####',
+  GF: '973##',
+  PF: '987##',
+  GI: 'GX11 1AA',
+  GE: '####',
+  DE: '#####',
+  GR: '### ##',
+  GL: '####',
+  GP: '971##',
+  GU: '#####',
+  'GU+4': '#####-####',
+  GT: '#####',
+  GG: 'GY#? #@@',
+  GN: '###',
+  GS: 'SIQQ 1ZZ',
+  GW: '####',
+  HT: '####',
+  HN: '@@####',
+  'HN-': '#####',
+  HU: '####',
+  IS: '###',
+  IN: '### ###',
+  ID: '#####',
+  IE: '*** ****',
+  IR: '##########',
+  IQ: '#####',
+  IM: 'IM#? #@@',
+  IL: '#######',
+  IT: '#####',
+  JM: '##',
+  JP: '###-####',
+  JE: 'JE#? #@@',
+  JO: '#####',
+  KZ: '######',
+  KE: '#####',
+  KR: '#####',
+  KN: 'KN####',
+  XK: '#####',
+  KW: '#####',
+  KG: '######',
+  LA: '#####',
+  LV: 'LV-####',
+  LB: '####? ????',
+  LS: '###',
+  LR: '####',
+  LI: '####',
+  LT: '#####',
+  LU: '####',
+  MK: '####',
+  MG: '###',
+  MY: '#####',
+  MV: '#####',
+  MT: '@@@ ####',
+  MH: '#####',
+  'MH+4': '#####-####',
+  MU: '#####',
+  MQ: '972##',
+  MW: '######',
+  YT: '976##',
+  MX: '#####',
+  FM: '#####',
+  'FM+4': '#####-####',
+  MD: '####',
+  MC: '980##',
+  MN: '#####',
+  ME: '#####',
+  MA: '#####',
+  MZ: '####',
+  MM: '#####',
+  NA: '#####',
+  NP: '#####',
+  NC: '988##',
+  NZ: '####',
+  NI: '#####',
+  NE: '####',
+  NG: '######',
+  NF: '####',
+  MP: '#####',
+  NO: '####',
+  OM: '###',
+  PK: '#####',
+  PW: '#####',
+  'PW+4': '#####-####',
+  PS: '###',
+  PA: '####',
+  PG: '###',
+  PY: '####',
+  PE: '#####',
+  'PE+': '####',
+  PH: '####',
+  PL: '##-###',
+  PT: '####',
+  'PT+3': '####-###',
+  PR: '#####',
+  'PR+4': '#####-####',
+  RE: '974##',
+  PM: '975##',
+  PN: 'PCRN 1ZZ',
+  RO: '######',
+  RU: '######',
+  LC: 'LC## ###',
+  VC: '####',
+  WS: '####',
+  SM: '4879#',
+  SA: '#####',
+  'SA+4': '#####-####',
+  SN: '#####',
+  RS: '#####',
+  SG: '######',
+  SH: '@@@@ 1ZZ',
+  SK: '### ##',
+  SI: '####',
+  SO: '@@ #####',
+  ZA: '####',
+  ES: '#####',
+  LK: '#####',
+  SD: '#####',
+  SZ: '@###',
+  SE: '### ##',
+  CH: '####',
+  SJ: '####',
+  TW: '###',
+  'TW+2': '###-##?',
+  TJ: '######',
+  TZ: '#####',
+  TH: '#####',
+  TT: '######',
+  TN: '####',
+  TR: '#####',
+  TM: '######',
+  UA: '#####',
+  UY: '#####',
+  VI: '#####',
+  'VI+4': '#####-####',
+  UZ: '######',
+  VE: '####',
+  'VE-': '####-@',
+  VN: '#####?',
+  YU: '#####',
+  WF: '986##',
+  ZM: '#####',
+  US: '#####',
+  'US+4': '#####-####',
+};
+function formatPostalCode(value, modifier = 'US') {
+  const mask = postalCodeFormats[modifier];
+  if (!mask) {
+    return formatAlphanumeric(value);
+  }
+  return formatValue(value, mask);
+}
+
+const dateFormats = {
+  'MM/DD/YYYY': '##/##/####',
+  'M/D/YYYY': '#?/#?/####',
+  'MM/DD/YY': '##/##/##',
+  'M/D/YY': '#?/#?/##',
+  'MM/YY': '##/##',
+  'M/YY': '#?/##',
+  'DD/MM/YYYY': '##/##/####',
+  'D/M/YYYY': '#?/#?/####',
+  'DD/MM/YY': '##/##/##',
+  'D/M/YY': '#?/#?/##',
+  'MM-DD-YYYY': '##-##-####',
+  'M-D-YYYY': '#?-#?-####',
+  'MM-DD-YY': '##-##-##',
+  'M-D-YY': '#?-#?-##',
+  'MM-YY': '##-##',
+  'M-YY': '#?-##',
+  'DD-MM-YYYY': '##-##-####',
+  'D-M-YYYY': '#?-#?-####',
+  'DD-MM-YY': '##-##-##',
+  'D-M-YY': '#?-#?-##',
+};
+function formatDate(value, format = 'MM/DD/YYYY') {
+  const mask = dateFormats[format] || dateFormats['MM/DD/YYYY'];
+  const formattedValueObject = formatValue(value, mask);
+  return Object.assign(Object.assign({}, formattedValueObject), { value: formattedValueObject.formattedValue });
+}
+
+function format(value) {
+  // 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') {
+    formattedValueObject.leftIcon = 'card';
+  }
+  return formattedValueObject;
+}
+const unknownFormatter = function unknownFn(value) {
+  const valueObject = formatValue(value, '#### #### #### ####');
+  return Object.assign(Object.assign({}, valueObject), { type: 'unknown', leftIcon: 'card-unknown', leftIconMuted: value.length < 16 });
+};
+const amexFormatter = function amexFn(value) {
+  const valueObject = formatValue(value, '#### ###### #####');
+  return Object.assign(Object.assign({}, valueObject), { type: 'amex', leftIcon: 'card-amex-color', leftIconMuted: value.length < 15 });
+};
+const discoverFormatter = function discoverFn(value) {
+  const valueObject = formatValue(value, '#### #### #### ####');
+  return Object.assign(Object.assign({}, valueObject), { type: 'discover', leftIcon: 'card-discover-color', leftIconMuted: value.length < 16 });
+};
+const masterCardFormatter = function masterCardFn(value) {
+  const valueObject = formatValue(value, '#### #### #### ####');
+  return Object.assign(Object.assign({}, valueObject), { type: 'masterCard', leftIcon: 'card-mastercard-color', leftIconMuted: value.length < 16 });
+};
+const visaFormatter = function visaFn(value) {
+  const valueObject = formatValue(value, '#### #### #### ####');
+  return Object.assign(Object.assign({}, valueObject), { type: 'visa', leftIcon: 'card-visa-color', leftIconMuted: value.length < 16 });
+};
+const dinersClubInternationalFormatter = function dinersClub(value) {
+  const valueObject = formatValue(value, '#### ###### ####');
+  return Object.assign(Object.assign({}, valueObject), { type: 'dinersClub', leftIcon: 'card-dinersclub-color', leftIconMuted: value.length < 14 });
+};
+const creditCardFormatters = {
+  discover: discoverFormatter,
+  amex: amexFormatter,
+  masterCard: masterCardFormatter,
+  visa: visaFormatter,
+  dinersClub: dinersClubInternationalFormatter,
+  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
+  const firstInt = parseInt(value.charAt(0));
+  const secondInt = parseInt(value.charAt(1));
+  switch (firstInt) {
+    case 2:
+      if (secondInt > 1 && secondInt < 8) {
+        if (value.length >= 4) {
+          const firstfour = parseInt(value.substr(0, 4));
+          if (firstfour >= 2221 && firstfour < 2721) {
+            return 'masterCard';
+          }
+        }
+        else {
+          return 'masterCard';
+        }
+      }
+      break;
+    case 3:
+      if (secondInt === 4 || secondInt === 7) {
+        return 'amex';
+      }
+      if (secondInt === 0) {
+        if (value.length > 2) {
+          const thirdInt = parseInt(value.charAt(2));
+          if (thirdInt < 6 || thirdInt === 9) {
+            return 'dinersClub';
+          }
+        }
+        else {
+          return 'dinersClub';
+        }
+      }
+      if (secondInt === 6 || secondInt === 8 || secondInt === 9) {
+        return 'dinersClub';
+      }
+      break;
+    case 4:
+      return 'visa';
+    case 5:
+      if (secondInt > 0 && secondInt < 6) {
+        return 'masterCard';
+      }
+      break;
+    case 6:
+      if (secondInt === 0) {
+        if (value.length > 3) {
+          const firstfour = value.substr(0, 4);
+          if (firstfour === '6011') {
+            return 'discover';
+          }
+        }
+        else {
+          return 'discover';
+        }
+      }
+      if (secondInt === 4) {
+        if (value.length > 2) {
+          const firstthree = parseInt(value.substr(0, 3));
+          if (firstthree > 643) {
+            return 'discover';
+          }
+        }
+        else {
+          return 'discover';
+        }
+      }
+      if (secondInt === 5) {
+        return 'discover';
+      }
+      if (secondInt === 2) {
+        if (value.length > 5) {
+          const firstsix = parseInt(value.substr(0, 6));
+          if (firstsix >= 622126 && firstsix <= 622925) {
+            return 'discover';
+          }
+        }
+        else {
+          return 'discover';
+        }
+      }
+      break;
+    default:
+      return 'unknown';
+  }
+  return 'unknown';
+}
+/* tslint:enable:cyclomatic-complexity */
+const formatCreditCard = {
+  detectCreditCardTypeFromValue,
+  format,
+  amexFormatter,
+  dinersClubInternationalFormatter,
+  discoverFormatter,
+  masterCardFormatter,
+  visaFormatter,
+  unknownFormatter,
+};
+
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch: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-1x, 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-1x, 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:var(--tct-input-background, var(--t-input-background, var(--tct-input-bg, var(--t-input-bg, var(--t-gray-14, #fcfcfd)))));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) var(--comp-input-border-top-right-radius)\n      var(--comp-input-border-bottom-right-radius) var(--comp-input-border-bottom-left-radius);--comp-input-border-width:var(--tct-input-border-top-width, 1px) var(--tct-input-border-right-width, 1px)\n      var(--tct-input-border-bottom-width, 1px) 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) var(--tct-input-focus-border-bottom-width, 1px)\n      var(--tct-input-focus-border-left-width, 1px);--comp-input-prefix-clearance:calc(3 * var(--tct-input-prefix-font-size, 14px) + var(--tct-scale-1, 5px));--comp-input-icon-clearance:34px;--comp-input-min-height:var(--tct-input-min-height, var(--t-input-min-height, 44px));--comp-input-max-height:var(--tct-input-max-height, var(--t-input-max-height));border-width:var(--comp-input-border-width);border-style:solid;border-color:var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #949494)));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]:not([disabled=false])) .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);max-height:var(--comp-input-max-height);overflow-y:hidden;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-2x, 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\");font-weight:var(--tct-input-font-weight, var(--t-input-font-weight, 400));}.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]:not([disabled=false]){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}.has-custom-display .input-field:is(button){height:auto;padding:0}.input-field:is(button) span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.custom-display-container{max-width:100%}.has-custom-display .custom-display-container{--comp-default-padding:var(--app-scale-2x, 10px) var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);padding:var(--tct-input-padding, var(--t-input-padding, var(--comp-default-padding)));width:100%}.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(--t-a11y-active-gray-color-AA, #404040)));box-shadow:var(--const-double-focus-ring), 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-container{min-width:0;flex:1}.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)) - 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-2x, 10px))}.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(--t-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(--t-a11y-gray-color-AA, #949494)))))}";
 
-const Q2Loading = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const inputTypeMap = {
+  text: 'text',
+  tel: 'tel',
+  number: 'number',
+  password: 'text',
+  search: 'search',
+  url: 'url',
+  email: 'email',
+  currency: 'text',
+  phone: 'tel',
+  ssn: 'text',
+  alphanumeric: 'text',
+  alpha: 'text',
+  numeric: 'text',
+  percentage: 'text',
+  postal: 'text',
+  date: 'text',
+  'credit-card': 'text',
+};
+const Q2Input = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.halfCircleSpinner = () => {
-      return (h("div", { class: "q2-loading-animation half-circle-spinner", "aria-label": this.localizedLabel }, h("div", { class: "circle circle-1" }), h("div", { class: "circle circle-2" })));
+    this.input = createEvent(this, "input", 7);
+    this.change = createEvent(this, "change", 7);
+    this.clear = createEvent(this, "clear", 7);
+    this.scheduledAfterRender = [];
+    this.isMobile = isMobile();
+    this.guid = createGuid();
+    ///// ACTIONS ////////
+    this.onToggleVisibility = () => {
+      this.textHidden = !this.textHidden;
     };
-    this.spinner = () => {
-      return this.halfCircleSpinner();
+    this.onInputClick = () => {
+      if (this.shouldCursorStayAtEnd)
+        this.placeCursorAtEnd();
     };
-    this.skeletonLoader = () => {
-      return (h("div", { class: "q2-loading-skeleton", "aria-label": this.localizedLabel }, this.shape === 'custom' ? h("slot", null) : this.skeletonShape, h("div", { class: "q2-loading-skeleton-shimmer" })));
+    this.onInputFocus = () => {
+      this.scheduledAfterRender.push(() => this.shouldCursorStayAtEnd
+        ? this.placeCursorAtEnd()
+        : this.setCursorPosition(this.calculateCursorPositionOnFocus()));
+      this.hasFocus = true;
+      setMessageHeight(this);
+      this.valueOnFocus = this.value;
     };
-    this.type = undefined;
-    this.shape = undefined;
-    this.modifiers = undefined;
-    this.counts = undefined;
+    this.onInputBlur = () => {
+      this.hasFocus = false;
+      setMessageHeight(this);
+      if (this.valueOnFocus !== this.formattedValueObject.value) {
+        this.valueOnFocus = this.formattedValueObject.value;
+        this.change.emit(Object.assign({ value: this.formattedValueObject.value, formattedValue: this.formattedValueObject.fullyFormattedValue, minFormattedLength: this.formattedValueObject.minFormattedLength }, (this.formattedValueObject.type && { type: this.formattedValueObject.type })));
+      }
+    };
+    this.onInputInput = (event) => {
+      event.stopPropagation();
+      const newFormattedValue = this.getFormattedValue(event.target.value, false);
+      this.handleDataInput(newFormattedValue);
+    };
+    this.onInputPaste = (event) => {
+      if (this.type === 'currency') {
+        const clipboardData = event.clipboardData.getData('text');
+        const newFormattedValue = this.getFormattedValue(clipboardData, true);
+        event.preventDefault();
+        this.handleDataInput(newFormattedValue);
+      }
+    };
+    this.onInputKeydown = (event) => {
+      const keysThatMoveCursor = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'];
+      const { key } = event;
+      if (this.shouldCursorStayAtEnd && keysThatMoveCursor.includes(key))
+        event.preventDefault();
+      if (key === 'Enter' && this.valueOnFocus !== this.formattedValueObject.value) {
+        this.valueOnFocus = this.formattedValueObject.value;
+        this.change.emit(Object.assign({ value: this.formattedValueObject.value, formattedValue: this.formattedValueObject.fullyFormattedValue, minFormattedLength: this.formattedValueObject.minFormattedLength }, (this.formattedValueObject.type && { type: this.formattedValueObject.type })));
+      }
+    };
+    this.onClearInput = () => {
+      const eventDetail = {
+        value: '',
+        formattedValue: '',
+        minFormattedLength: this.formattedValueObject.minFormattedLength,
+      };
+      this.input.emit(eventDetail);
+      this.change.emit(eventDetail);
+      this.clear.emit();
+      this.inputField.focus();
+    };
+    this.value = undefined;
     this.label = undefined;
-    this.inline = undefined;
+    this.hideLabel = undefined;
+    this.type = 'text';
+    this.placeholder = undefined;
+    this.disabled = false;
+    this.autocomplete = undefined;
+    this.autocorrect = undefined;
+    this.autocapitalize = undefined;
+    this.hideMessages = undefined;
+    this.iconLeft = undefined;
+    this.iconRight = undefined;
+    this.readonly = undefined;
+    this.clearable = undefined;
+    this.optional = undefined;
+    this.min = undefined;
+    this.max = undefined;
+    this.step = undefined;
+    this.formatModifier = undefined;
+    this.maxlength = undefined;
+    this.pseudo = undefined;
+    this.showVisibilityToggle = false;
+    this.textHidden = undefined;
+    this.badgeValue = undefined;
+    this.badgeTheme = undefined;
+    this.role = undefined;
+    this.ariaControls = undefined;
+    this.ariaOwns = undefined;
+    this.ariaHaspopup = undefined;
+    this.ariaExpanded = undefined;
+    this.ariaActivedescendant = undefined;
+    this.current = undefined;
     this.ariaLabel = undefined;
+    this.errors = undefined;
+    this.hints = undefined;
+    this.formattedValueObject = undefined;
+    this.hasFocus = undefined;
   }
-  get loader() {
-    const loaderMap = {
-      default: this.spinner,
-      spinner: this.spinner,
-      skeleton: this.skeletonLoader,
+  /////// LIFECYCLE HOOKS ////////
+  componentWillLoad() {
+    if (isNaN(this.maxlength)) {
+      this.maxlength = undefined;
+    }
+    this.formattedValueObject = this.getFormattedValue(this.stringValue, true);
+    handleAriaLabel(this);
+    if (this.textHidden === undefined) {
+      this.textHidden = this.type === 'password';
+    }
+  }
+  componentDidLoad() {
+    if (!this.pseudo) {
+      this.inputField.value = this.formattedValueObject.formattedValue;
+    }
+    overrideFocus(this.hostElement);
+  }
+  componentDidRender() {
+    this.scheduledAfterRender.forEach(fn => fn());
+    this.scheduledAfterRender = [];
+  }
+  getFormattedValue(value, valueChangedFromProperty) {
+    const formattingFunctions = {
+      currency: formatCurrency,
+      phone: formatPhoneNumber,
+      ssn: formatSSN,
+      alphanumeric: formatAlphanumeric,
+      alpha: formatAlpha,
+      numeric: formatNumeric,
+      percentage: formatPercentage,
+      postal: formatPostalCode,
+      date: formatDate,
+      'credit-card': formatCreditCard.format,
     };
-    return loaderMap[this.type] || loaderMap.default;
+    if (formattingFunctions[this.type]) {
+      return formattingFunctions[this.type](value, this.formatModifier, valueChangedFromProperty);
+    }
+    return {
+      value,
+      formattedValue: value,
+      fullyFormattedValue: value,
+      formattingCharacterCount: 0,
+      unformattedValue: value,
+    };
+  }
+  get canClear() {
+    return this.clearable && !!this.value;
+  }
+  get shouldCursorStayAtEnd() {
+    return this.isMobile && this.type === 'currency';
+  }
+  get hasError() {
+    return Array.isArray(this.errors) && this.errors.length > 0;
   }
-  get modifiersSet() {
-    if (this.type !== 'skeleton' || !this.modifiers) {
-      return undefined;
+  get messages() {
+    return ((this.errors && this.errors.length > 0 && this.errors) ||
+      (this.hints && this.hints.length > 0 && this.hints) ||
+      []);
+  }
+  get inputField() {
+    return this.hostElement.shadowRoot.querySelector('.input-field');
+  }
+  get showMessages() {
+    return this.messages.length > 0 && !this.hideMessages;
+  }
+  get inputId() {
+    return `input-guid-${this.guid}`;
+  }
+  get inputDescribedBy() {
+    return this.showMessages ? `${this.inputId}-description` : undefined;
+  }
+  get isMaskedType() {
+    const maskedTypes = [
+      'currency',
+      'phone',
+      'ssn',
+      'alphanumeric',
+      'alpha',
+      'numeric',
+      'percentage',
+      'postal',
+      'date',
+      'credit-card',
+    ];
+    return maskedTypes.includes(this.type);
+  }
+  get wrapperClasses() {
+    const classNames = ['field-container'];
+    if (this.hasError)
+      classNames.push('has-error');
+    if (!!this.value)
+      classNames.push('has-value');
+    if (this.clearable && !!this.value)
+      classNames.push('has-clear');
+    if (this.hasFocus)
+      classNames.push('has-focus');
+    if (this.formattedValueObject.prefix)
+      classNames.push('has-prefix');
+    if (this.computedIconLeft)
+      classNames.push('has-icon-left');
+    if (this.showIconSeparator)
+      classNames.push('has-icon-separator');
+    if (this.formattedValueObject.suffix)
+      classNames.push('has-suffix');
+    if (!this.formattedValueObject.suffix && this.iconRight)
+      classNames.push('has-icon-right');
+    if (this.type === 'currency')
+      classNames.push('right-aligned');
+    else
+      classNames.push('left-aligned');
+    if (this.hasCustomDisplaySlot)
+      classNames.push('has-custom-display');
+    return classNames.join(' ');
+  }
+  get computedType() {
+    if (['password', 'text', 'ssn'].includes(this.type) && this.textHidden) {
+      return 'password';
+    }
+    else {
+      return (this.type && inputTypeMap[this.type]) || 'text';
+    }
+  }
+  get computedAutocomplete() {
+    // force off for currency type
+    if (this.type === 'currency')
+      return 'transaction-amount';
+    return this.autocomplete || 'off';
+  }
+  get computedIconLeft() {
+    if (this.formattedValueObject.prefix) {
+      return;
+    }
+    if (this.type === 'search') {
+      return 'search';
+    }
+    if (this.formattedValueObject.leftIcon) {
+      return this.formattedValueObject.leftIcon;
     }
-    return new Set(this.modifiers.split('-'));
+    return this.iconLeft;
   }
-  get countsArray() {
-    if (this.type !== 'skeleton' || !this.counts) {
-      return undefined;
+  get showIconSeparator() {
+    return this.type === 'credit-card' || !!this.formattedValueObject.prefix;
+  }
+  get computedClassForIconLeft() {
+    let className = 'icon-left';
+    if (this.formattedValueObject.leftIconMuted) {
+      className += ' icon-left-muted';
     }
-    return this.counts.split('x').map(Number);
+    return className;
   }
-  get skeletonShape() {
-    var _a, _b;
-    return (_b = (_a = shapes[this.shape]) === null || _a === void 0 ? void 0 : _a.call(shapes, this.countsArray, this.modifiersSet)) !== null && _b !== void 0 ? _b : '';
+  get stringValue() {
+    return (this.value && String(this.value)) || '';
   }
-  get spinnerShape() {
-    const spinnerMap = {
-      default: this.halfCircleSpinner,
-      'half-circle': this.halfCircleSpinner,
-    };
-    return spinnerMap[this.type] || spinnerMap.default;
+  get canSetSelection() {
+    // email and number type don't support setSelectionRange
+    return !['email', 'number'].includes(this.computedType);
   }
-  get localizedLabel() {
-    return loc(this.label || 'tecton.element.loading.ariaLabel');
+  get visibilityToggleText() {
+    return loc(`tecton.element.input.toggle.${this.textHidden ? 'show' : 'hide'}`);
   }
-  componentWillLoad() {
-    handleAriaLabel(this);
+  formatAndUpdateValueFromProp() {
+    this.formattedValueObject = this.getFormattedValue(this.stringValue, true);
+    if (!this.pseudo) {
+      const setValue = () => {
+        this.inputField.value = this.formattedValueObject.formattedValue;
+      };
+      this.inputField ? setValue() : this.scheduledAfterRender.push(() => setValue());
+    }
+  }
+  get inputMode() {
+    const inputModeMap = {
+      currency: 'numeric',
+      ssn: 'numeric',
+      numeric: 'decimal',
+      percentage: 'decimal',
+      postal: 'numeric',
+      date: 'numeric',
+      'credit-card': 'numeric',
+    };
+    return (this.type && inputModeMap[this.type]) || undefined;
   }
+  //////// OBSERVERS //////////
   ariaLabelObserver() {
     handleAriaLabel(this);
   }
+  valueObserver() {
+    this.formatAndUpdateValueFromProp();
+  }
+  typeObserver() {
+    this.formatAndUpdateValueFromProp();
+  }
+  formatModifierObserver() {
+    this.formatAndUpdateValueFromProp();
+  }
+  hintsObserver() {
+    this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));
+  }
+  errorsObserver() {
+    this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));
+  }
+  ///////// HOST ELEMENT EVENTS //////
+  onHostElementFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    this.inputField.focus();
+  }
+  onHostElementChange(event) {
+    if (event.target === this.hostElement && !this.hostElement.onchange) {
+      this.value = event.detail.value;
+    }
+  }
+  handleDataInput(newFormattedValue) {
+    if (this.maxlength === undefined ||
+      newFormattedValue.unformattedValue.length <= this.maxlength ||
+      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
+    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 })));
+    this.setCursorPosition(cursorPosition);
+  }
+  /////// VIEW METHODS ///////
   render() {
-    return this.loader();
+    return (h("div", { class: this.wrapperClasses }, labelDOM(this), this.inputContainerDOM(), messagesDOM(this)));
+  }
+  get hasCustomDisplaySlot() {
+    return !!this.hostElement.querySelector('[slot=custom-display]');
+  }
+  /* tslint:disable:cyclomatic-complexity */
+  inputContainerDOM() {
+    return (h("div", { class: "input-container", tabindex: -1, "test-id": "inputContainer" }, 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.showIconSeparator && h("div", { class: "vertical-separator" }), this.hasError && this.type === 'currency' && (h("q2-icon", { type: "error", class: "icon-error", "test-id": "iconError" }))), this.pseudo ? this.pseudoInputDOM() : this.standardInputDOM(), 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', 'ssn'].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.badgeValue && (h("q2-badge", { size: "large", theme: this.badgeTheme }, this.badgeValue)), 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 */
+  /* tslint:disable:cyclomatic-complexity */
+  standardInputDOM() {
+    const { hasCustomDisplaySlot } = this;
+    const inputClasses = ['input-field'];
+    if (hasCustomDisplaySlot)
+      inputClasses.push('sr');
+    return (h(Fragment, null, hasCustomDisplaySlot && (h("div", { class: "custom-display-container" }, h("slot", { name: "custom-display" }))), h("input", { class: inputClasses.join(' '), id: this.inputId, type: this.computedType, size: this.formattedValueObject.prefix ? 10 : undefined, max: this.max, min: this.min, step: this.step, "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.computedAutocomplete, autocapitalize: this.autocapitalize, 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, onClick: this.onInputClick, onKeyDown: this.onInputKeydown, onInput: this.onInputInput, onPaste: this.onInputPaste, inputmode: this.inputMode })));
+  }
+  /* tslint:enable:cyclomatic-complexity */
+  pseudoInputDOM() {
+    const showPlaceholder = !this.value && !!this.placeholder;
+    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-container" }, h("button", { class: "input-field", type: "button", id: this.inputId, "aria-describedby": this.inputDescribedBy, "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 === 'true' ? 'true' : 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("div", { class: "custom-display-container" }, h("slot", { name: "custom-display" }, h("span", { class: showPlaceholder ? 'placeholder-text' : '' }, showPlaceholder ? this.placeholder : this.value))))));
+  }
+  placeCursorAtEnd() {
+    const { inputField } = this;
+    inputField.selectionStart = inputField.selectionEnd = inputField.value.length;
+  }
+  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) || defaultPosition,
+      valueLength: formattedLength,
+      previousValueLength: input && currentValueLength,
+      hasSelection: false,
+    };
+  }
+  calculateCursorPositionOnFocus() {
+    var _a, _b, _c;
+    const { inputField } = this;
+    const valueLength = (_b = (_a = inputField === null || inputField === void 0 ? void 0 : inputField.value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+    const startingPosition = (_c = inputField === null || inputField === void 0 ? void 0 : inputField.selectionStart) !== null && _c !== void 0 ? _c : valueLength;
+    return {
+      startingPosition,
+      valueLength,
+      previousValueLength: valueLength,
+      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') {
+        input.setSelectionRange(valueLength, valueLength);
+      }
+      else {
+        const difference = valueLength - previousValueLength;
+        // Never allow the cursor to move in reverse
+        const newPosition = startingPosition + (difference > 0 ? difference : 0);
+        input.setSelectionRange(newPosition, newPosition);
+      }
+    }
   }
   get hostElement() { return this; }
   static get watchers() { return {
-    "ariaLabel": ["ariaLabelObserver"]
+    "ariaLabel": ["ariaLabelObserver"],
+    "value": ["valueObserver"],
+    "type": ["typeObserver"],
+    "formatModifier": ["formatModifierObserver"],
+    "hints": ["hintsObserver"],
+    "errors": ["errorsObserver"]
   }; }
   static get style() { return stylesCss; }
-}, [1, "q2-loading", {
-    "type": [513],
-    "shape": [513],
-    "modifiers": [513],
-    "counts": [513],
+}, [1, "q2-input", {
+    "value": [1025],
     "label": [1537],
-    "inline": [516],
-    "ariaLabel": [1537, "aria-label"]
-  }]);
+    "hideLabel": [1540, "hide-label"],
+    "type": [513],
+    "placeholder": [513],
+    "disabled": [516],
+    "autocomplete": [513],
+    "autocorrect": [513],
+    "autocapitalize": [513],
+    "hideMessages": [516, "hide-messages"],
+    "iconLeft": [513, "icon-left"],
+    "iconRight": [513, "icon-right"],
+    "readonly": [516],
+    "clearable": [516],
+    "optional": [516],
+    "min": [514],
+    "max": [514],
+    "step": [514],
+    "formatModifier": [513, "format-modifier"],
+    "maxlength": [1538],
+    "pseudo": [516],
+    "showVisibilityToggle": [516, "show-visibility-toggle"],
+    "textHidden": [1540, "text-hidden"],
+    "badgeValue": [513, "badge-value"],
+    "badgeTheme": [513, "badge-theme"],
+    "role": [1],
+    "ariaControls": [1, "aria-controls"],
+    "ariaOwns": [1, "aria-owns"],
+    "ariaHaspopup": [1, "aria-haspopup"],
+    "ariaExpanded": [1, "aria-expanded"],
+    "ariaActivedescendant": [8, "aria-activedescendant"],
+    "current": [1],
+    "ariaLabel": [1537, "aria-label"],
+    "errors": [16],
+    "hints": [16],
+    "formattedValueObject": [32],
+    "hasFocus": [32]
+  }, [[0, "focus", "onHostElementFocus"], [0, "change", "onHostElementChange"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["q2-loading"];
+  const components = ["q2-input", "q2-badge", "q2-btn", "q2-icon", "q2-loading"];
   components.forEach(tagName => { switch (tagName) {
+    case "q2-input":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2Input);
+      }
+      break;
+    case "q2-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "q2-btn":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "q2-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
     case "q2-loading":
       if (!customElements.get(tagName)) {
-        customElements.define(tagName, Q2Loading);
+        defineCustomElement$1();
       }
       break;
   } });
 }
 defineCustomElement();
 
-export { Q2Loading as Q, defineCustomElement as d };
+export { Q2Input as Q, defineCustomElement as d };