@dnb/eufemia 10.15.0 → 10.16.0

package/es/components/input-masked/InputMaskedUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputMaskedUtils.js","names":["format","getDecimalSeparator","getThousandsSeparator","warn","IS_ANDROID","IS_IOS","safeSetSelection","enableLocaleSupportWhen","enableNumberMaskWhen","invisibleSpace","isRequestingLocaleSupport","props","Object","entries","some","k","v","includes","isRequestingNumberMask","correctNumberValue","localValue","locale","maskParams","value","String","isNaN","parseFloat","decimalPos","indexOf","integerLimit","limit","integers","split","isNegative","length","decimals","slice","shouldHaveDecimals","allowDecimal","decimalLimit","number_format","options","_objectSpread","decimalSymbol","replace","localNumberValue","numberValue","endsWithDecimal","endsWith","endsWithZeroAndDecimal","startsWith","test","correctCaretPosition","element","correction","suffix","prefix","start","selectionStart","end","selectionEnd","suffixStart","suffixEnd","pos","undefined","placeholderChar","prefixStart","prefixEnd","char","mask","chars","l","i","RegExp","n","_mask$test","call","e","window","requestAnimationFrame","handlePercentMask","_String","_String$match","percent","match","handleCurrencyMask","mask_options","currency_mask","showMask","fix","currency","handleNumberMask","number_mask","getInputModeFromMask","allowNegative","instanceOf","handleThousandsSeparator","handleDecimalSeparator","fromJSON","str","fallback","JSON","parse"],"sources":["../../../../src/components/input-masked/InputMaskedUtils.js"],"sourcesContent":["/**\n * Web InputMasked Component\n *\n */\n\nimport {\n  format,\n  getDecimalSeparator,\n  getThousandsSeparator,\n} from '../number-format/NumberUtils'\nimport { warn } from '../../shared/component-helper'\nimport { IS_ANDROID, IS_IOS } from '../../shared/helpers'\nimport { safeSetSelection } from './text-mask/createTextMaskInputElement'\n\nconst enableLocaleSupportWhen = ['as_number', 'as_percent', 'as_currency']\nconst enableNumberMaskWhen = [\n  'as_number',\n  'as_percent',\n  'as_currency',\n  'number_mask',\n  'currency_mask',\n]\n\nexport const invisibleSpace = '\\u200B'\n\n/**\n * Will return true if a prop needs Locale support\n *\n * @param {object} props object with given component props\n * @returns boolean\n */\nexport const isRequestingLocaleSupport = (props) => {\n  return Object.entries(props).some(\n    ([k, v]) => v && enableLocaleSupportWhen.includes(k)\n  )\n}\n\n/**\n * Will return true if a prop will enable the internal NumberMask\n *\n * @param {object} props object with given component props\n * @returns boolean\n */\nexport const isRequestingNumberMask = (props) => {\n  return Object.entries(props).some(\n    ([k, v]) => v && enableNumberMaskWhen.includes(k)\n  )\n}\n\n/**\n * Probably the most complex part of this component\n * It will modify a given value based on certain criteria's\n *\n * @param {object} param0 object with properties\n * @property {string} localValue optional – if given, it will uses its ending to determine of what to return\n * @property {number|string} value component property value\n * @property {object} context Eufemia Context\n * @property {string} locale Eufemia locale (either from component or context)\n * @property {object} maskParams predefined mask parameters\n * @returns string Value\n */\nexport const correctNumberValue = ({\n  localValue = null,\n  props,\n  locale,\n  maskParams,\n}) => {\n  let value = props.value === null ? null : String(props.value)\n\n  if (isNaN(parseFloat(value))) {\n    return value\n  }\n\n  const decimalPos = value.indexOf('.')\n\n  if (\n    maskParams.integerLimit &&\n    typeof maskParams.integerLimit === 'number'\n  ) {\n    const limit = maskParams.integerLimit\n    const integers = value.split('.')[0]\n    const isNegative = parseFloat(integers) < 0\n    if (integers.length - (isNegative ? 1 : 0) > limit) {\n      const decimals = decimalPos > 0 ? value.slice(decimalPos) : ''\n      value = integers.slice(0, limit + (isNegative ? 1 : 0)) + decimals\n    }\n  }\n\n  const shouldHaveDecimals =\n    maskParams.allowDecimal ||\n    (maskParams.decimalLimit > 0 && maskParams.allowDecimal !== false)\n\n  if (!shouldHaveDecimals) {\n    if (decimalPos > -1) {\n      value = value.slice(0, decimalPos)\n    }\n  }\n\n  /**\n   * This only runs IF \"number_format\" is set – we do not use it else\n   */\n  if (props.number_format) {\n    const options = {\n      locale,\n      decimals: 0,\n      ...props.number_format,\n    }\n    if (shouldHaveDecimals) {\n      options.decimals = maskParams.decimalLimit\n    }\n    value = format(value, options)\n  }\n\n  const decimalSymbol = maskParams.decimalSymbol\n  value = value.replace('.', decimalSymbol)\n\n  if (localValue !== null) {\n    const localNumberValue = localValue.replace(/[^\\d,.-]/g, '')\n    const numberValue = value.replace(/[^\\d,.-]/g, '')\n\n    const endsWithDecimal = localNumberValue.endsWith(decimalSymbol)\n    const endsWithZeroAndDecimal = localNumberValue.endsWith(\n      `${decimalSymbol}0`\n    )\n\n    if (endsWithDecimal) {\n      value = `${value}${decimalSymbol}`\n    } else if (\n      endsWithZeroAndDecimal &&\n      !numberValue.endsWith(`${decimalSymbol}0`)\n    ) {\n      /**\n       * When the users has 20,02, then hits \"backspace\",\n       * the returned {numberValue} in the onChange event would then be \"20\",\n       * but we want it to be 20,0\n       */\n      value = `${value}${decimalSymbol}0`\n    }\n\n    /**\n     * If the user removes a leading digit and we have left a leading zero.\n     *\n     * The users enters these steps:\n     * Step 1. 1012\n     * Step 2. 012 -> user removes 1, now use \"localValue\"\n     * Step 3. 2012\n     *\n     * If a dev listens on_change and sends the number value back in,\n     * for this, we also ensure that \"numberValue\" and \"localNumberValue\" is the same.\n     */\n    if (\n      localNumberValue !== '0' &&\n      localNumberValue.startsWith('0') &&\n      parseFloat(numberValue.replace(decimalSymbol, '.')) ===\n        parseFloat(localNumberValue.replace(decimalSymbol, '.'))\n    ) {\n      value = localValue\n    }\n\n    /**\n     * While typing;\n     * If the local value is - or -0 we use it.\n     * Also, because of invisible whitespace we remove everything else\n     */\n    if (/^(-|-0)$/.test(localValue.replace(/[^\\d-0]/g, ''))) {\n      value = localValue\n    } else if (localNumberValue === '' && numberValue === '0') {\n      value = ''\n    }\n  }\n\n  return value\n}\n\n/**\n * This is a helper for setting the cursor position,\n * when it is on a not allowed position\n *\n * @param {Element} element Input Element\n * @param {Object} maskParams Mask parameters, containing eventually suffix or prefix\n */\nexport const correctCaretPosition = (element, maskParams, props) => {\n  const correction = () => {\n    try {\n      const suffix = maskParams?.suffix\n      const prefix = maskParams?.prefix\n\n      const start = element.selectionStart\n      const end = element.selectionEnd\n\n      if (start !== end) {\n        return // stop here\n      }\n\n      if (suffix || prefix) {\n        const suffixStart = element.value.indexOf(suffix)\n        const suffixEnd = suffixStart + suffix?.length\n        let pos = undefined\n\n        if (start >= suffixStart && start <= suffixEnd) {\n          pos = suffixStart\n\n          // If there is a placeholder,\n          // and the user clicks after the suffix\n          // we want the position to be \"before\" the placeholderChar\n          if (\n            maskParams.placeholderChar !== invisibleSpace &&\n            element.value.length - 1 === String(suffix + prefix).length\n          ) {\n            pos = pos - 1\n          }\n        } else {\n          const prefixStart = element.value.indexOf(prefix)\n          const prefixEnd = prefixStart + prefix?.length || 0\n\n          if (start >= prefixStart && start <= prefixEnd) {\n            pos = prefixEnd\n          }\n        }\n\n        const char = element.value.slice(pos - 1, pos)\n        if (char === invisibleSpace) {\n          pos = suffixStart - 1\n        }\n\n        if (!isNaN(parseFloat(pos))) {\n          safeSetSelection(element, pos)\n        }\n      } else if (props?.mask && element.value.length === end) {\n        const chars = element.value.split('')\n\n        for (let l = chars.length, i = l - 1; i >= 0; i--) {\n          const char = chars[i]\n          const mask = props.mask[i]\n          if (\n            char &&\n            char !== invisibleSpace &&\n            mask instanceof RegExp &&\n            mask.test(char)\n          ) {\n            for (let n = i + 1; n < l; n++) {\n              const mask = props.mask[n]\n              if (mask?.test?.(mask) === false) {\n                safeSetSelection(element, n)\n                break\n              }\n            }\n\n            break\n          }\n        }\n      }\n    } catch (e) {\n      warn(e)\n    }\n  }\n\n  if (typeof window !== 'undefined') {\n    window.requestAnimationFrame(correction)\n  }\n}\n\n/**\n * Manipulate needed mask for handle: percent\n *\n * @param {object} param0 object with properties\n * @property {object} props Component property\n * @property {string} locale Eufemia locale (either from component or context)\n * @property {object} maskParams predefined mask parameters\n * @returns object maskParams\n */\nexport const handlePercentMask = ({ props, locale, maskParams }) => {\n  const value = format(props.value, { locale, percent: true })\n  maskParams.suffix = String(value)?.match(/((\\s|)%)$/g, '$1')?.[0] || ' %'\n\n  return maskParams\n}\n\n/**\n * Return needed mask for handle: currency\n *\n * @param {object} param0 object with properties\n * @property {object} context Eufemia context\n * @property {object} mask_options Component property for change the mask parameters\n * @property {object} currency_mask Component property for change the currency parameters\n * @returns object maskParams\n */\nexport const handleCurrencyMask = ({ mask_options, currency_mask }) => {\n  const maskParams = {\n    showMask: true,\n    placeholderChar: null,\n    allowDecimal: true,\n    decimalLimit: 2,\n    decimalSymbol: ',',\n    ...mask_options,\n    ...currency_mask,\n  }\n\n  const fix =\n    typeof currency_mask === 'string'\n      ? currency_mask\n      : typeof maskParams.currency === 'string'\n      ? maskParams.currency\n      : 'kr'\n\n  maskParams.suffix = ` ${fix}`\n\n  return maskParams\n}\n\n/**\n * Return needed mask for handle: number\n *\n * @param {object} param0 object with properties\n * @property {object} context Eufemia context\n * @property {object} mask_options Component property for change the mask parameters\n * @property {object} number_mask Component property for change the number parameters\n * @returns object maskParams\n */\nexport const handleNumberMask = ({ mask_options, number_mask }) => {\n  const maskParams = {\n    decimalSymbol: ',',\n    ...mask_options,\n    ...number_mask,\n  }\n\n  if (typeof maskParams.allowDecimal === 'undefined') {\n    maskParams.allowDecimal = maskParams.decimalLimit > 0\n  }\n\n  return maskParams\n}\n\n/**\n * Returns the type of what inputMode should be used\n *\n * @param {function} mask mask function\n * @returns undefined|decimal|numeric\n */\nexport function getInputModeFromMask(mask) {\n  const maskParams = mask?.maskParams\n\n  // because of the missing minus key, we still have to use text on Android and iOS\n  if ((IS_ANDROID || IS_IOS) && maskParams?.allowNegative !== false) {\n    return undefined\n  }\n\n  if (maskParams && mask?.instanceOf === 'createNumberMask') {\n    return maskParams.allowDecimal && maskParams.decimalLimit !== 0\n      ? 'decimal'\n      : 'numeric'\n  }\n  return undefined\n}\n\n/**\n * Returns the thousands separator character\n *\n * @param {string} locale Component or context locale\n * @returns string\n */\nexport function handleThousandsSeparator(locale) {\n  return getThousandsSeparator(locale).replace(' ', ' ') // replace non-breaking space with a regular space\n}\n\n/**\n * Returns the decimal separator character\n *\n * @param {string} locale Component or context locale\n * @returns string\n */\nexport function handleDecimalSeparator(locale) {\n  let decimalSymbol = getDecimalSeparator(locale)\n\n  return decimalSymbol\n}\n\n/**\n * Will take a JSON and return it parsed\n *\n * @param {string} str\n * @param {*} fallback optional fallback\n * @returns parsed json\n */\nexport function fromJSON(str, fallback = null) {\n  if (typeof str === 'string' && str[0] === '{') {\n    return JSON.parse(str)\n  }\n\n  return str || fallback\n}\n"],"mappings":"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"}
+{"version":3,"file":"InputMaskedUtils.js","names":["format","getDecimalSeparator","getThousandsSeparator","warn","IS_IOS","safeSetSelection","enableLocaleSupportWhen","enableNumberMaskWhen","invisibleSpace","isRequestingLocaleSupport","props","Object","entries","some","k","v","includes","isRequestingNumberMask","correctNumberValue","localValue","locale","maskParams","value","String","isNaN","parseFloat","decimalPos","indexOf","integerLimit","limit","integers","split","isNegative","length","decimals","slice","shouldHaveDecimals","allowDecimal","decimalLimit","number_format","options","_objectSpread","decimalSymbol","replace","localNumberValue","numberValue","endsWithDecimal","endsWith","endsWithZeroAndDecimal","startsWith","test","correctCaretPosition","element","correction","suffix","prefix","start","selectionStart","end","selectionEnd","suffixStart","suffixEnd","pos","undefined","placeholderChar","prefixStart","prefixEnd","char","mask","chars","l","i","RegExp","n","_mask$test","call","e","window","requestAnimationFrame","handlePercentMask","_String","_String$match","percent","match","handleCurrencyMask","mask_options","currency_mask","showMask","fix","currency","handleNumberMask","number_mask","getSoftKeyboardAttributes","instanceOf","allowNegative","inputMode","handleThousandsSeparator","handleDecimalSeparator","fromJSON","str","fallback","JSON","parse"],"sources":["../../../../src/components/input-masked/InputMaskedUtils.js"],"sourcesContent":["/**\n * Web InputMasked Component\n *\n */\n\nimport {\n  format,\n  getDecimalSeparator,\n  getThousandsSeparator,\n} from '../number-format/NumberUtils'\nimport { warn } from '../../shared/component-helper'\nimport { IS_IOS } from '../../shared/helpers'\nimport { safeSetSelection } from './text-mask/createTextMaskInputElement'\n\nconst enableLocaleSupportWhen = ['as_number', 'as_percent', 'as_currency']\nconst enableNumberMaskWhen = [\n  'as_number',\n  'as_percent',\n  'as_currency',\n  'number_mask',\n  'currency_mask',\n]\n\nexport const invisibleSpace = '\\u200B'\n\n/**\n * Will return true if a prop needs Locale support\n *\n * @param {object} props object with given component props\n * @returns boolean\n */\nexport const isRequestingLocaleSupport = (props) => {\n  return Object.entries(props).some(\n    ([k, v]) => v && enableLocaleSupportWhen.includes(k)\n  )\n}\n\n/**\n * Will return true if a prop will enable the internal NumberMask\n *\n * @param {object} props object with given component props\n * @returns boolean\n */\nexport const isRequestingNumberMask = (props) => {\n  return Object.entries(props).some(\n    ([k, v]) => v && enableNumberMaskWhen.includes(k)\n  )\n}\n\n/**\n * Probably the most complex part of this component\n * It will modify a given value based on certain criteria's\n *\n * @param {object} param0 object with properties\n * @property {string} localValue optional – if given, it will uses its ending to determine of what to return\n * @property {number|string} value component property value\n * @property {object} context Eufemia Context\n * @property {string} locale Eufemia locale (either from component or context)\n * @property {object} maskParams predefined mask parameters\n * @returns string Value\n */\nexport const correctNumberValue = ({\n  localValue = null,\n  props,\n  locale,\n  maskParams,\n}) => {\n  let value = props.value === null ? null : String(props.value)\n\n  if (isNaN(parseFloat(value))) {\n    return value\n  }\n\n  const decimalPos = value.indexOf('.')\n\n  if (\n    maskParams.integerLimit &&\n    typeof maskParams.integerLimit === 'number'\n  ) {\n    const limit = maskParams.integerLimit\n    const integers = value.split('.')[0]\n    const isNegative = parseFloat(integers) < 0\n    if (integers.length - (isNegative ? 1 : 0) > limit) {\n      const decimals = decimalPos > 0 ? value.slice(decimalPos) : ''\n      value = integers.slice(0, limit + (isNegative ? 1 : 0)) + decimals\n    }\n  }\n\n  const shouldHaveDecimals =\n    maskParams.allowDecimal ||\n    (maskParams.decimalLimit > 0 && maskParams.allowDecimal !== false)\n\n  if (!shouldHaveDecimals) {\n    if (decimalPos > -1) {\n      value = value.slice(0, decimalPos)\n    }\n  }\n\n  /**\n   * This only runs IF \"number_format\" is set – we do not use it else\n   */\n  if (props.number_format) {\n    const options = {\n      locale,\n      decimals: 0,\n      ...props.number_format,\n    }\n    if (shouldHaveDecimals) {\n      options.decimals = maskParams.decimalLimit\n    }\n    value = format(value, options)\n  }\n\n  const decimalSymbol = maskParams.decimalSymbol\n  value = value.replace('.', decimalSymbol)\n\n  if (localValue !== null) {\n    const localNumberValue = localValue.replace(/[^\\d,.-]/g, '')\n    const numberValue = value.replace(/[^\\d,.-]/g, '')\n\n    const endsWithDecimal = localNumberValue.endsWith(decimalSymbol)\n    const endsWithZeroAndDecimal = localNumberValue.endsWith(\n      `${decimalSymbol}0`\n    )\n\n    if (endsWithDecimal) {\n      value = `${value}${decimalSymbol}`\n    } else if (\n      endsWithZeroAndDecimal &&\n      !numberValue.endsWith(`${decimalSymbol}0`)\n    ) {\n      /**\n       * When the users has 20,02, then hits \"backspace\",\n       * the returned {numberValue} in the onChange event would then be \"20\",\n       * but we want it to be 20,0\n       */\n      value = `${value}${decimalSymbol}0`\n    }\n\n    /**\n     * If the user removes a leading digit and we have left a leading zero.\n     *\n     * The users enters these steps:\n     * Step 1. 1012\n     * Step 2. 012 -> user removes 1, now use \"localValue\"\n     * Step 3. 2012\n     *\n     * If a dev listens on_change and sends the number value back in,\n     * for this, we also ensure that \"numberValue\" and \"localNumberValue\" is the same.\n     */\n    if (\n      localNumberValue !== '0' &&\n      localNumberValue.startsWith('0') &&\n      parseFloat(numberValue.replace(decimalSymbol, '.')) ===\n        parseFloat(localNumberValue.replace(decimalSymbol, '.'))\n    ) {\n      value = localValue\n    }\n\n    /**\n     * While typing;\n     * If the local value is - or -0 we use it.\n     * Also, because of invisible whitespace we remove everything else\n     */\n    if (/^(-|-0)$/.test(localValue.replace(/[^\\d-0]/g, ''))) {\n      value = localValue\n    } else if (localNumberValue === '' && numberValue === '0') {\n      value = ''\n    }\n  }\n\n  return value\n}\n\n/**\n * This is a helper for setting the cursor position,\n * when it is on a not allowed position\n *\n * @param {Element} element Input Element\n * @param {Object} maskParams Mask parameters, containing eventually suffix or prefix\n */\nexport const correctCaretPosition = (element, maskParams, props) => {\n  const correction = () => {\n    try {\n      const suffix = maskParams?.suffix\n      const prefix = maskParams?.prefix\n\n      const start = element.selectionStart\n      const end = element.selectionEnd\n\n      if (start !== end) {\n        return // stop here\n      }\n\n      if (suffix || prefix) {\n        const suffixStart = element.value.indexOf(suffix)\n        const suffixEnd = suffixStart + suffix?.length\n        let pos = undefined\n\n        if (start >= suffixStart && start <= suffixEnd) {\n          pos = suffixStart\n\n          // If there is a placeholder,\n          // and the user clicks after the suffix\n          // we want the position to be \"before\" the placeholderChar\n          if (\n            maskParams.placeholderChar !== invisibleSpace &&\n            element.value.length - 1 === String(suffix + prefix).length\n          ) {\n            pos = pos - 1\n          }\n        } else {\n          const prefixStart = element.value.indexOf(prefix)\n          const prefixEnd = prefixStart + prefix?.length || 0\n\n          if (start >= prefixStart && start <= prefixEnd) {\n            pos = prefixEnd\n          }\n        }\n\n        const char = element.value.slice(pos - 1, pos)\n        if (char === invisibleSpace) {\n          pos = suffixStart - 1\n        }\n\n        if (!isNaN(parseFloat(pos))) {\n          safeSetSelection(element, pos)\n        }\n      } else if (props?.mask && element.value.length === end) {\n        const chars = element.value.split('')\n\n        for (let l = chars.length, i = l - 1; i >= 0; i--) {\n          const char = chars[i]\n          const mask = props.mask[i]\n          if (\n            char &&\n            char !== invisibleSpace &&\n            mask instanceof RegExp &&\n            mask.test(char)\n          ) {\n            for (let n = i + 1; n < l; n++) {\n              const mask = props.mask[n]\n              if (mask?.test?.(mask) === false) {\n                safeSetSelection(element, n)\n                break\n              }\n            }\n\n            break\n          }\n        }\n      }\n    } catch (e) {\n      warn(e)\n    }\n  }\n\n  if (typeof window !== 'undefined') {\n    window.requestAnimationFrame(correction)\n  }\n}\n\n/**\n * Manipulate needed mask for handle: percent\n *\n * @param {object} param0 object with properties\n * @property {object} props Component property\n * @property {string} locale Eufemia locale (either from component or context)\n * @property {object} maskParams predefined mask parameters\n * @returns object maskParams\n */\nexport const handlePercentMask = ({ props, locale, maskParams }) => {\n  const value = format(props.value, { locale, percent: true })\n  maskParams.suffix = String(value)?.match(/((\\s|)%)$/g, '$1')?.[0] || ' %'\n\n  return maskParams\n}\n\n/**\n * Return needed mask for handle: currency\n *\n * @param {object} param0 object with properties\n * @property {object} context Eufemia context\n * @property {object} mask_options Component property for change the mask parameters\n * @property {object} currency_mask Component property for change the currency parameters\n * @returns object maskParams\n */\nexport const handleCurrencyMask = ({ mask_options, currency_mask }) => {\n  const maskParams = {\n    showMask: true,\n    placeholderChar: null,\n    allowDecimal: true,\n    decimalLimit: 2,\n    decimalSymbol: ',',\n    ...mask_options,\n    ...currency_mask,\n  }\n\n  const fix =\n    typeof currency_mask === 'string'\n      ? currency_mask\n      : typeof maskParams.currency === 'string'\n      ? maskParams.currency\n      : 'kr'\n\n  maskParams.suffix = ` ${fix}`\n\n  return maskParams\n}\n\n/**\n * Return needed mask for handle: number\n *\n * @param {object} param0 object with properties\n * @property {object} context Eufemia context\n * @property {object} mask_options Component property for change the mask parameters\n * @property {object} number_mask Component property for change the number parameters\n * @returns object maskParams\n */\nexport const handleNumberMask = ({ mask_options, number_mask }) => {\n  const maskParams = {\n    decimalSymbol: ',',\n    ...mask_options,\n    ...number_mask,\n  }\n\n  if (typeof maskParams.allowDecimal === 'undefined') {\n    maskParams.allowDecimal = maskParams.decimalLimit > 0\n  }\n\n  return maskParams\n}\n\n/**\n * Returns the type of what inputMode or type attribute should be used\n *\n * @param {function} mask mask function\n * @returns undefined|decimal|numeric\n */\nexport function getSoftKeyboardAttributes(mask) {\n  if (mask?.instanceOf !== 'createNumberMask') {\n    return undefined\n  }\n\n  const maskParams = mask?.maskParams\n\n  // because of the missing minus key, we still have to use text on iOS\n  if (IS_IOS && maskParams?.allowNegative !== false) {\n    return undefined\n  }\n\n  return {\n    inputMode:\n      maskParams.allowDecimal && maskParams.decimalLimit !== 0\n        ? 'decimal'\n        : 'numeric',\n  }\n}\n\n/**\n * Returns the thousands separator character\n *\n * @param {string} locale Component or context locale\n * @returns string\n */\nexport function handleThousandsSeparator(locale) {\n  return getThousandsSeparator(locale).replace(' ', ' ') // replace non-breaking space with a regular space\n}\n\n/**\n * Returns the decimal separator character\n *\n * @param {string} locale Component or context locale\n * @returns string\n */\nexport function handleDecimalSeparator(locale) {\n  let decimalSymbol = getDecimalSeparator(locale)\n\n  return decimalSymbol\n}\n\n/**\n * Will take a JSON and return it parsed\n *\n * @param {string} str\n * @param {*} fallback optional fallback\n * @returns parsed json\n */\nexport function fromJSON(str, fallback = null) {\n  if (typeof str === 'string' && str[0] === '{') {\n    return JSON.parse(str)\n  }\n\n  return str || fallback\n}\n"],"mappings":"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"}

package/es/components/input-masked/MultiInputMask.d.ts

@@ -64,7 +64,7 @@ export type MultiInputMaskProps<T extends string> = {
      */
     suffix?: React.ReactNode;
 } & Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'ref' | 'value' | 'label'> & SpacingProps;
-declare function MultiInputMask<T extends string>({ label, labelDirection, inputs, delimiter, onChange: onChangeExternal, disabled, status, statusState, values: defaultValues, className, stretch, suffix, ...props }: MultiInputMaskProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function MultiInputMask<T extends string>({ label, labelDirection, inputs, delimiter, onChange: onChangeExternal, disabled, status, statusState, values: defaultValues, className, stretch, inputMode, suffix, ...props }: MultiInputMaskProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace MultiInputMask {
     var _formElement: boolean;
     var _supportsSpacingProps: boolean;

package/es/components/input-masked/MultiInputMask.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["label", "labelDirection", "inputs", "delimiter", "onChange", "disabled", "status", "statusState", "values", "className", "stretch", "suffix"],
+const _excluded = ["label", "labelDirection", "inputs", "delimiter", "onChange", "disabled", "status", "statusState", "values", "className", "stretch", "inputMode", "suffix"],
   _excluded2 = ["id", "label", "value", "mask", "placeholderCharacter", "delimiter", "disabled", "inputRef", "onKeyDown", "onChange"];
 import React, { useRef } from 'react';
 import Input from '../Input';
@@ -26,6 +26,7 @@ function MultiInputMask(_ref) {
       values: defaultValues,
       className,
       stretch,
+      inputMode,
       suffix
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -57,6 +58,7 @@ function MultiInputMask(_ref) {
     input_element: inputs.map((input, index) => React.createElement(MultiInputMaskInput, _extends({
       key: input.id
     }, input, {
+      inputMode: inputMode,
       value: values[input.id],
       delimiter: index !== inputs.length - 1 ? delimiter : undefined,
       onKeyDown: onKeyDown,
@@ -119,7 +121,7 @@ function MultiInputMaskInput(_ref2) {
   return React.createElement(React.Fragment, null, React.createElement(TextMask, _extends({
     id: `${markupId}__input`,
     "data-mask-id": id,
-    className: "dnb-input__input dnb-multi-input-mask__input" + (value ? " dnb-multi-input-mask__input--highlight" : ""),
+    className: "dnb-input__input dnb-multi-input-mask__input" + (/\d+/.test(value) ? " dnb-multi-input-mask__input--highlight" : ""),
     disabled: disabled,
     size: mask.length,
     mask: mask,

package/es/components/input-masked/MultiInputMask.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiInputMask.js","names":["React","useRef","Input","TextMask","useHandleCursorPosition","classnames","FormLabel","createSpacingClasses","useMultiInputValue","makeUniqueId","MultiInputMask","_ref","label","labelDirection","inputs","delimiter","onChange","onChangeExternal","disabled","status","statusState","values","defaultValues","className","stretch","suffix","props","_objectWithoutProperties","_excluded","callback","inputRefs","onKeyDown","current","getKeysToHandle","WrapperElement","createElement","element","onClick","onLegendClick","vertical","_extends","status_state","input_element","map","input","index","MultiInputMaskInput","key","id","value","length","undefined","inputRef","getInputRef","firstInput","focus","setSelectionRange","ref","includes","push","uniqueMasks","getUniqueMasks","size","pattern","next","replace","RegExp","reduce","keys","mask","masks","Set","forEach","add","String","_ref2","placeholderCharacter","attributes","_excluded2","markupId","Fragment","placeholderChar","guide","showMask","keepCharPositions","onFocus","event","removePlaceholder","target","htmlFor","hidden","placeholder","select","_formElement","_supportsSpacingProps"],"sources":["../../../../src/components/input-masked/MultiInputMask.tsx"],"sourcesContent":["import React, { Fragment, MutableRefObject, useRef } from 'react'\nimport Input from '../Input'\nimport TextMask from './TextMask'\nimport useHandleCursorPosition from './hooks/useHandleCursorPosition'\nimport classnames from 'classnames'\nimport FormLabel from '../FormLabel'\nimport { SpacingProps } from '../space/types'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport { FormStatusState, FormStatusText } from '../FormStatus'\nimport { useMultiInputValue } from './hooks/useMultiInputValues'\nimport { makeUniqueId } from '../../shared/component-helper'\n\nexport type MultiInputMaskInput<T extends string> = {\n  /**\n   * Defines the id for the input. This id is also used to map the input value to the correct property on the objects used for `values` and `onChange` parameters.\n   */\n  id: T\n  /**\n   * Label used by the input. The label itself is hidden, but required to uphold accessibility standards for screen readers.\n   */\n  label: React.ReactNode\n  /**\n   * Each RegExp item in the array defines what the mask should be for each subsequent character in the input. The length sets the size of the input, so an array of two items would produce an input of two characters\n   */\n  mask: RegExp[]\n  /**\n   * Sets the placeholder character used for the input.\n   */\n  placeholderCharacter: string\n} & Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'ref'>\n\nexport type MultiInputMaskValue<T extends string> = {\n  // eslint-disable-next-line no-unused-vars\n  [K in T]: string\n}\n\nexport type MultiInputMaskProps<T extends string> = {\n  /**\n   * The label describing the group of inputs inside the components.\n   */\n  label?: React.ReactNode\n  /**\n   * Use to change the label layout direction. Defaults to `horizontal`.\n   */\n  labelDirection?: 'vertical' | 'horizontal'\n  /**\n   * Used to define the different inputs representing the inputs in the component. The id's defined here is used to map input value to correct property in `values` parameters used in `onChange`\n   */\n  inputs: MultiInputMaskInput<T>[]\n  /**\n   * Values used for the inputs inside the component. Expects an object with keys matching the id's defined in `inputs`\n   */\n  values?: MultiInputMaskValue<T>\n  /**\n   * Defines the delimiter used to separate the inputs inside the component.\n   */\n  delimiter?: string\n  /**\n   * Runs when the input value changes. Has an object parameter with keys matching the id's defined in `inputs`. i.e. `{month: string, year: string}`\n   */\n  onChange?: (values: MultiInputMaskValue<T>) => void\n  /**\n   * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.\n   */\n  status?: FormStatusText\n  /**\n   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.\n   */\n  statusState?: FormStatusState\n  /**\n   * Set it to `true` in order to stretch the input to the available space. Defaults to false.\n   */\n  stretch?: boolean\n  /**\n   * Text describing the content of the input more than the label. you can also send in a React component, so it gets wrapped inside the Input component.\n   */\n  suffix?: React.ReactNode\n} & Omit<\n  React.HTMLProps<HTMLInputElement>,\n  'onChange' | 'ref' | 'value' | 'label'\n> &\n  SpacingProps\n\nfunction MultiInputMask<T extends string>({\n  label,\n  labelDirection = 'horizontal',\n  inputs,\n  delimiter,\n  onChange: onChangeExternal,\n  disabled,\n  status,\n  statusState,\n  values: defaultValues,\n  className,\n  stretch,\n  suffix,\n  ...props\n}: MultiInputMaskProps<T>) {\n  const [values, onChange] = useMultiInputValue({\n    inputs,\n    defaultValues,\n    callback: onChangeExternal,\n  })\n\n  const inputRefs = useRef<Array<MutableRefObject<HTMLInputElement>>>([])\n\n  const { onKeyDown } = useHandleCursorPosition(\n    inputRefs.current,\n    getKeysToHandle()\n  )\n\n  const WrapperElement = label ? 'fieldset' : 'div'\n\n  return (\n    <WrapperElement\n      className={classnames(\n        'dnb-multi-input-mask__fieldset',\n        labelDirection === 'horizontal' &&\n          'dnb-multi-input-mask__fieldset--horizontal',\n        createSpacingClasses(props)\n      )}\n    >\n      {label && (\n        <FormLabel\n          className={classnames(\n            'dnb-multi-input-mask__legend',\n            labelDirection === 'horizontal' &&\n              'dnb-multi-input-mask__legend--horizontal'\n          )}\n          element=\"legend\"\n          onClick={onLegendClick}\n          disabled={disabled}\n          vertical={labelDirection === 'vertical'}\n        >\n          {/* This <span/> wrapper is needed to make hover work in Safari Desktop */}\n          <span>{label}</span>\n        </FormLabel>\n      )}\n      <Input\n        {...props}\n        className={classnames('dnb-multi-input-mask', className)}\n        disabled={disabled}\n        status={status}\n        status_state={statusState}\n        suffix={suffix}\n        stretch={stretch}\n        input_element={inputs.map((input, index) => (\n          <MultiInputMaskInput\n            key={input.id}\n            {...input}\n            value={values[input.id]}\n            delimiter={index !== inputs.length - 1 ? delimiter : undefined}\n            onKeyDown={onKeyDown}\n            onChange={onChange}\n            disabled={disabled}\n            inputRef={getInputRef}\n          />\n        ))}\n      />\n    </WrapperElement>\n  )\n\n  // Event handlers\n  function onLegendClick() {\n    if (disabled) {\n      return\n    }\n\n    const firstInput = inputRefs.current[0].current\n\n    firstInput.focus()\n    firstInput.setSelectionRange(0, 0)\n  }\n\n  // Utilities\n  function getInputRef(ref: any) {\n    const inputRef = ref?.inputRef\n\n    if (inputRef && !inputRefs.current.includes(inputRef)) {\n      inputRefs.current.push(inputRef)\n    }\n  }\n\n  function getKeysToHandle() {\n    const uniqueMasks = getUniqueMasks()\n\n    // Return the only one RegExp since all the inputs are using the same mask\n    if (uniqueMasks.size === 1) {\n      const pattern = uniqueMasks.values().next().value.replace(/\\//g, '')\n      return new RegExp(pattern)\n    }\n\n    // If there are multiple types of masks used, then map the maps to an object based on input ids\n    // So that useHandleCursorPosition can do a per character test to see if the pressed key should be handled or not\n    return inputs.reduce(\n      (keys, { id, mask }) => {\n        keys[id] = mask\n\n        return keys\n      },\n      {} as Record<T, RegExp[]>\n    )\n  }\n\n  function getUniqueMasks() {\n    const masks = new Set()\n\n    inputs.forEach((input) => {\n      input.mask.forEach((pattern) => masks.add(String(pattern)))\n    })\n\n    return masks\n  }\n}\n\ntype MultiInputMaskInputProps<T extends string> =\n  MultiInputMaskInput<T> & {\n    id: MultiInputMaskInput<T>['id']\n    label: MultiInputMaskInput<T>['label']\n    value: string\n    mask: MultiInputMaskInput<T>['mask']\n    placeholderCharacter: MultiInputMaskInput<T>['placeholderCharacter']\n    delimiter?: MultiInputMaskProps<T>['delimiter']\n    disabled: boolean\n    onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void\n    onChange: (\n      id: string,\n      placeholderCharacter: MultiInputMaskInput<T>['placeholderCharacter']\n    ) => void\n    inputRef: any\n  }\n\nfunction MultiInputMaskInput<T extends string>({\n  id,\n  label,\n  value,\n  mask,\n  placeholderCharacter,\n  delimiter,\n  disabled,\n  inputRef,\n  onKeyDown,\n  onChange,\n  ...attributes\n}: MultiInputMaskInputProps<T>) {\n  const markupId = `${id}-${makeUniqueId()}`\n\n  return (\n    <>\n      <TextMask\n        id={`${markupId}__input`}\n        data-mask-id={id}\n        className={classnames(\n          'dnb-input__input',\n          'dnb-multi-input-mask__input',\n          value && 'dnb-multi-input-mask__input--highlight'\n        )}\n        disabled={disabled}\n        size={mask.length}\n        mask={mask}\n        value={value ?? ''}\n        placeholderChar={placeholderCharacter}\n        guide={true}\n        showMask={true}\n        keepCharPositions={false} // so we can overwrite next value, if it already exists\n        aria-labelledby={`${markupId}__label`}\n        ref={inputRef}\n        onKeyDown={onKeyDown}\n        onFocus={onFocus}\n        onChange={(event) => {\n          onChange(\n            id,\n            removePlaceholder(event.target.value, placeholderCharacter)\n          )\n        }}\n        {...attributes}\n      />\n      <label\n        id={`${markupId}__label`}\n        htmlFor={`${markupId}__input`}\n        hidden\n      >\n        {label}\n      </label>\n      {delimiter && (\n        <span\n          aria-hidden\n          className={classnames(\n            'dnb-multi-input-mask__delimiter',\n            value && 'dnb-multi-input-mask__delimiter--highlight'\n          )}\n        >\n          {delimiter}\n        </span>\n      )}\n    </>\n  )\n\n  function removePlaceholder(value: string, placeholder: string) {\n    return value.replace(RegExp(placeholder, 'gm'), '')\n  }\n\n  function onFocus({ target }: React.FocusEvent<HTMLInputElement>) {\n    target.focus()\n    target.select()\n  }\n}\n\nexport default MultiInputMask\n\nMultiInputMask._formElement = true\nMultiInputMask._supportsSpacingProps = true\n"],"mappings":"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"}
+{"version":3,"file":"MultiInputMask.js","names":["React","useRef","Input","TextMask","useHandleCursorPosition","classnames","FormLabel","createSpacingClasses","useMultiInputValue","makeUniqueId","MultiInputMask","_ref","label","labelDirection","inputs","delimiter","onChange","onChangeExternal","disabled","status","statusState","values","defaultValues","className","stretch","inputMode","suffix","props","_objectWithoutProperties","_excluded","callback","inputRefs","onKeyDown","current","getKeysToHandle","WrapperElement","createElement","element","onClick","onLegendClick","vertical","_extends","status_state","input_element","map","input","index","MultiInputMaskInput","key","id","value","length","undefined","inputRef","getInputRef","firstInput","focus","setSelectionRange","ref","includes","push","uniqueMasks","getUniqueMasks","size","pattern","next","replace","RegExp","reduce","keys","mask","masks","Set","forEach","add","String","_ref2","placeholderCharacter","attributes","_excluded2","markupId","Fragment","test","placeholderChar","guide","showMask","keepCharPositions","onFocus","event","removePlaceholder","target","htmlFor","hidden","placeholder","select","_formElement","_supportsSpacingProps"],"sources":["../../../../src/components/input-masked/MultiInputMask.tsx"],"sourcesContent":["import React, { Fragment, MutableRefObject, useRef } from 'react'\nimport Input from '../Input'\nimport TextMask from './TextMask'\nimport useHandleCursorPosition from './hooks/useHandleCursorPosition'\nimport classnames from 'classnames'\nimport FormLabel from '../FormLabel'\nimport { SpacingProps } from '../space/types'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport { FormStatusState, FormStatusText } from '../FormStatus'\nimport { useMultiInputValue } from './hooks/useMultiInputValues'\nimport { makeUniqueId } from '../../shared/component-helper'\n\nexport type MultiInputMaskInput<T extends string> = {\n  /**\n   * Defines the id for the input. This id is also used to map the input value to the correct property on the objects used for `values` and `onChange` parameters.\n   */\n  id: T\n  /**\n   * Label used by the input. The label itself is hidden, but required to uphold accessibility standards for screen readers.\n   */\n  label: React.ReactNode\n  /**\n   * Each RegExp item in the array defines what the mask should be for each subsequent character in the input. The length sets the size of the input, so an array of two items would produce an input of two characters\n   */\n  mask: RegExp[]\n  /**\n   * Sets the placeholder character used for the input.\n   */\n  placeholderCharacter: string\n} & Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'ref'>\n\nexport type MultiInputMaskValue<T extends string> = {\n  // eslint-disable-next-line no-unused-vars\n  [K in T]: string\n}\n\nexport type MultiInputMaskProps<T extends string> = {\n  /**\n   * The label describing the group of inputs inside the components.\n   */\n  label?: React.ReactNode\n  /**\n   * Use to change the label layout direction. Defaults to `horizontal`.\n   */\n  labelDirection?: 'vertical' | 'horizontal'\n  /**\n   * Used to define the different inputs representing the inputs in the component. The id's defined here is used to map input value to correct property in `values` parameters used in `onChange`\n   */\n  inputs: MultiInputMaskInput<T>[]\n  /**\n   * Values used for the inputs inside the component. Expects an object with keys matching the id's defined in `inputs`\n   */\n  values?: MultiInputMaskValue<T>\n  /**\n   * Defines the delimiter used to separate the inputs inside the component.\n   */\n  delimiter?: string\n  /**\n   * Runs when the input value changes. Has an object parameter with keys matching the id's defined in `inputs`. i.e. `{month: string, year: string}`\n   */\n  onChange?: (values: MultiInputMaskValue<T>) => void\n  /**\n   * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.\n   */\n  status?: FormStatusText\n  /**\n   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.\n   */\n  statusState?: FormStatusState\n  /**\n   * Set it to `true` in order to stretch the input to the available space. Defaults to false.\n   */\n  stretch?: boolean\n  /**\n   * Text describing the content of the input more than the label. you can also send in a React component, so it gets wrapped inside the Input component.\n   */\n  suffix?: React.ReactNode\n} & Omit<\n  React.HTMLProps<HTMLInputElement>,\n  'onChange' | 'ref' | 'value' | 'label'\n> &\n  SpacingProps\n\nfunction MultiInputMask<T extends string>({\n  label,\n  labelDirection = 'horizontal',\n  inputs,\n  delimiter,\n  onChange: onChangeExternal,\n  disabled,\n  status,\n  statusState,\n  values: defaultValues,\n  className,\n  stretch,\n  inputMode,\n  suffix,\n  ...props\n}: MultiInputMaskProps<T>) {\n  const [values, onChange] = useMultiInputValue({\n    inputs,\n    defaultValues,\n    callback: onChangeExternal,\n  })\n\n  const inputRefs = useRef<Array<MutableRefObject<HTMLInputElement>>>([])\n\n  const { onKeyDown } = useHandleCursorPosition(\n    inputRefs.current,\n    getKeysToHandle()\n  )\n\n  const WrapperElement = label ? 'fieldset' : 'div'\n\n  return (\n    <WrapperElement\n      className={classnames(\n        'dnb-multi-input-mask__fieldset',\n        labelDirection === 'horizontal' &&\n          'dnb-multi-input-mask__fieldset--horizontal',\n        createSpacingClasses(props)\n      )}\n    >\n      {label && (\n        <FormLabel\n          className={classnames(\n            'dnb-multi-input-mask__legend',\n            labelDirection === 'horizontal' &&\n              'dnb-multi-input-mask__legend--horizontal'\n          )}\n          element=\"legend\"\n          onClick={onLegendClick}\n          disabled={disabled}\n          vertical={labelDirection === 'vertical'}\n        >\n          {/* This <span/> wrapper is needed to make hover work in Safari Desktop */}\n          <span>{label}</span>\n        </FormLabel>\n      )}\n      <Input\n        {...props}\n        className={classnames('dnb-multi-input-mask', className)}\n        disabled={disabled}\n        status={status}\n        status_state={statusState}\n        suffix={suffix}\n        stretch={stretch}\n        input_element={inputs.map((input, index) => (\n          <MultiInputMaskInput\n            key={input.id}\n            {...input}\n            inputMode={inputMode}\n            value={values[input.id]}\n            delimiter={index !== inputs.length - 1 ? delimiter : undefined}\n            onKeyDown={onKeyDown}\n            onChange={onChange}\n            disabled={disabled}\n            inputRef={getInputRef}\n          />\n        ))}\n      />\n    </WrapperElement>\n  )\n\n  // Event handlers\n  function onLegendClick() {\n    if (disabled) {\n      return\n    }\n\n    const firstInput = inputRefs.current[0].current\n\n    firstInput.focus()\n    firstInput.setSelectionRange(0, 0)\n  }\n\n  // Utilities\n  function getInputRef(ref: any) {\n    const inputRef = ref?.inputRef\n\n    if (inputRef && !inputRefs.current.includes(inputRef)) {\n      inputRefs.current.push(inputRef)\n    }\n  }\n\n  function getKeysToHandle() {\n    const uniqueMasks = getUniqueMasks()\n\n    // Return the only one RegExp since all the inputs are using the same mask\n    if (uniqueMasks.size === 1) {\n      const pattern = uniqueMasks.values().next().value.replace(/\\//g, '')\n      return new RegExp(pattern)\n    }\n\n    // If there are multiple types of masks used, then map the maps to an object based on input ids\n    // So that useHandleCursorPosition can do a per character test to see if the pressed key should be handled or not\n    return inputs.reduce(\n      (keys, { id, mask }) => {\n        keys[id] = mask\n\n        return keys\n      },\n      {} as Record<T, RegExp[]>\n    )\n  }\n\n  function getUniqueMasks() {\n    const masks = new Set()\n\n    inputs.forEach((input) => {\n      input.mask.forEach((pattern) => masks.add(String(pattern)))\n    })\n\n    return masks\n  }\n}\n\ntype MultiInputMaskInputProps<T extends string> =\n  MultiInputMaskInput<T> & {\n    id: MultiInputMaskInput<T>['id']\n    label: MultiInputMaskInput<T>['label']\n    value: string\n    mask: MultiInputMaskInput<T>['mask']\n    placeholderCharacter: MultiInputMaskInput<T>['placeholderCharacter']\n    delimiter?: MultiInputMaskProps<T>['delimiter']\n    disabled: boolean\n    onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void\n    onChange: (\n      id: string,\n      placeholderCharacter: MultiInputMaskInput<T>['placeholderCharacter']\n    ) => void\n    inputRef: any\n  }\n\nfunction MultiInputMaskInput<T extends string>({\n  id,\n  label,\n  value,\n  mask,\n  placeholderCharacter,\n  delimiter,\n  disabled,\n  inputRef,\n  onKeyDown,\n  onChange,\n  ...attributes\n}: MultiInputMaskInputProps<T>) {\n  const markupId = `${id}-${makeUniqueId()}`\n\n  return (\n    <>\n      <TextMask\n        id={`${markupId}__input`}\n        data-mask-id={id}\n        className={classnames(\n          'dnb-input__input',\n          'dnb-multi-input-mask__input',\n          /\\d+/.test(value) && 'dnb-multi-input-mask__input--highlight'\n        )}\n        disabled={disabled}\n        size={mask.length}\n        mask={mask}\n        value={value ?? ''}\n        placeholderChar={placeholderCharacter}\n        guide={true}\n        showMask={true}\n        keepCharPositions={false} // so we can overwrite next value, if it already exists\n        aria-labelledby={`${markupId}__label`}\n        ref={inputRef}\n        onKeyDown={onKeyDown}\n        onFocus={onFocus}\n        onChange={(event) => {\n          onChange(\n            id,\n            removePlaceholder(event.target.value, placeholderCharacter)\n          )\n        }}\n        {...attributes}\n      />\n      <label\n        id={`${markupId}__label`}\n        htmlFor={`${markupId}__input`}\n        hidden\n      >\n        {label}\n      </label>\n      {delimiter && (\n        <span\n          aria-hidden\n          className={classnames(\n            'dnb-multi-input-mask__delimiter',\n            value && 'dnb-multi-input-mask__delimiter--highlight'\n          )}\n        >\n          {delimiter}\n        </span>\n      )}\n    </>\n  )\n\n  function removePlaceholder(value: string, placeholder: string) {\n    return value.replace(RegExp(placeholder, 'gm'), '')\n  }\n\n  function onFocus({ target }: React.FocusEvent<HTMLInputElement>) {\n    target.focus()\n    target.select()\n  }\n}\n\nexport default MultiInputMask\n\nMultiInputMask._formElement = true\nMultiInputMask._supportsSpacingProps = true\n"],"mappings":"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"}

package/es/components/input-masked/TextMask.js

@@ -7,6 +7,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React from 'react';
 import PropTypes from 'prop-types';
 import createTextMaskInputElement from './text-mask/createTextMaskInputElement';
+import InputModeNumber from './text-mask/InputModeNumber';
 import { isNil } from './text-mask/utilities';
 export default class TextMask extends React.PureComponent {
   constructor(props) {
@@ -22,17 +23,28 @@ export default class TextMask extends React.PureComponent {
   componentDidMount() {
     this.initTextMask();
   }
+  componentWillUnmount() {
+    var _this$inputMode;
+    (_this$inputMode = this.inputMode) === null || _this$inputMode === void 0 ? void 0 : _this$inputMode.remove();
+  }
   initTextMask() {
+    var _this$inputMode2;
     const {
       props,
       props: {
-        value
+        value,
+        inputMode
       }
     } = this;
+    const inputElement = this.inputRef.current;
     this.textMaskInputElement = createTextMaskInputElement(_objectSpread(_objectSpread({}, props), {}, {
-      inputElement: this.inputRef.current
+      inputElement
     }));
     this.textMaskInputElement.update(value);
+    if (!inputMode && inputMode !== 'none') {
+      this.inputMode = new InputModeNumber();
+    }
+    (_this$inputMode2 = this.inputMode) === null || _this$inputMode2 === void 0 ? void 0 : _this$inputMode2.setElement(inputElement);
   }
   componentDidUpdate(prevProps) {
     const {
@@ -72,8 +84,7 @@ export default class TextMask extends React.PureComponent {
       } = _this$props,
       props = _objectWithoutProperties(_this$props, _excluded);
     const params = _objectSpread({
-      onChange: this.onChange,
-      defaultValue: this.props.value
+      onChange: this.onChange
     }, props);
     return inputElement ? React.cloneElement(inputElement, params) : React.createElement("input", _extends({
       ref: this.inputRef

package/es/components/input-masked/TextMask.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextMask.js","names":["React","PropTypes","createTextMaskInputElement","isNil","TextMask","PureComponent","constructor","props","_defineProperty","event","textMaskInputElement","update","onChange","inputRef","createRef","componentDidMount","initTextMask","value","_objectSpread","inputElement","current","componentDidUpdate","prevProps","pipe","mask","guide","placeholderChar","showMask","settings","isPipeChanged","toString","isMaskChanged","isSettingChanged","Object","keys","some","prop","isValueChanged","render","_this$props","keepCharPositions","_objectWithoutProperties","_excluded","params","defaultValue","cloneElement","createElement","_extends","ref","process","env","NODE_ENV","propTypes","oneOfType","array","func","bool","shape","isRequired","object","node","string","number"],"sources":["../../../../src/components/input-masked/TextMask.js"],"sourcesContent":["import React from 'react'\nimport PropTypes from 'prop-types'\nimport createTextMaskInputElement from './text-mask/createTextMaskInputElement'\nimport { isNil } from './text-mask/utilities'\n\nexport default class TextMask extends React.PureComponent {\n  static propTypes = {\n    mask: PropTypes.oneOfType([\n      PropTypes.array,\n      PropTypes.func,\n      PropTypes.bool,\n      PropTypes.shape({\n        mask: PropTypes.oneOfType([PropTypes.array, PropTypes.func]),\n        pipe: PropTypes.func,\n      }),\n    ]).isRequired,\n    inputRef: PropTypes.object,\n    inputElement: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n    onChange: PropTypes.func,\n    guide: PropTypes.bool,\n    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    pipe: PropTypes.func,\n    placeholderChar: PropTypes.string,\n    keepCharPositions: PropTypes.bool,\n    showMask: PropTypes.bool,\n  }\n\n  static defaultProps = {\n    inputElement: null,\n    inputRef: null,\n    onChange: null,\n    guide: null,\n    value: null,\n    pipe: null,\n    placeholderChar: null,\n    keepCharPositions: null,\n    showMask: null,\n  }\n\n  constructor(props) {\n    super(props)\n\n    this.inputRef = props.inputRef || React.createRef()\n  }\n\n  componentDidMount() {\n    this.initTextMask()\n  }\n\n  initTextMask() {\n    const {\n      props,\n      props: { value },\n    } = this\n\n    this.textMaskInputElement = createTextMaskInputElement({\n      ...props,\n      inputElement: this.inputRef.current,\n    })\n    this.textMaskInputElement.update(value)\n  }\n\n  onChange = (event) => {\n    this.textMaskInputElement.update()\n\n    if (typeof this.props.onChange === 'function') {\n      return this.props.onChange(event)\n    }\n  }\n\n  componentDidUpdate(prevProps) {\n    // Getting props affecting value\n    const { value, pipe, mask, guide, placeholderChar, showMask } =\n      this.props\n\n    // Сalculate that settings was changed:\n    // - `pipe` converting to string, to compare function content\n    // - `mask` converting to string, to compare values or function content\n    // - `keepCharPositions` excludes, because it affect only cursor position\n    const settings = { guide, placeholderChar, showMask }\n    const isPipeChanged =\n      typeof pipe === 'function' && typeof prevProps.pipe === 'function'\n        ? pipe.toString() !== prevProps.pipe.toString()\n        : (isNil(pipe) && !isNil(prevProps.pipe)) ||\n          (!isNil(pipe) && isNil(prevProps.pipe))\n    const isMaskChanged = mask.toString() !== prevProps.mask.toString()\n    const isSettingChanged =\n      Object.keys(settings).some(\n        (prop) => settings[prop] !== prevProps[prop]\n      ) ||\n      isMaskChanged ||\n      isPipeChanged\n\n    // Сalculate that value was changed\n    const isValueChanged =\n      value !== this.inputRef.current.value || prevProps.value !== value\n\n    // Check value and settings to prevent duplicating update() call\n    if (isValueChanged || isSettingChanged) {\n      this.initTextMask()\n    }\n  }\n\n  render() {\n    const {\n      inputElement,\n      inputRef, // eslint-disable-line\n      mask, // eslint-disable-line\n      guide, // eslint-disable-line\n      pipe, // eslint-disable-line\n      placeholderChar, // eslint-disable-line\n      keepCharPositions, // eslint-disable-line\n      value, // eslint-disable-line\n      onChange, // eslint-disable-line\n      showMask, // eslint-disable-line\n\n      ...props\n    } = this.props\n\n    const params = {\n      onChange: this.onChange,\n      defaultValue: this.props.value,\n      ...props,\n    }\n\n    return inputElement ? (\n      React.cloneElement(inputElement, params)\n    ) : (\n      <input ref={this.inputRef} {...params} />\n    )\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"TextMask.js","names":["React","PropTypes","createTextMaskInputElement","InputModeNumber","isNil","TextMask","PureComponent","constructor","props","_defineProperty","event","textMaskInputElement","update","onChange","inputRef","createRef","componentDidMount","initTextMask","componentWillUnmount","_this$inputMode","inputMode","remove","_this$inputMode2","value","inputElement","current","_objectSpread","setElement","componentDidUpdate","prevProps","pipe","mask","guide","placeholderChar","showMask","settings","isPipeChanged","toString","isMaskChanged","isSettingChanged","Object","keys","some","prop","isValueChanged","render","_this$props","keepCharPositions","_objectWithoutProperties","_excluded","params","cloneElement","createElement","_extends","ref","process","env","NODE_ENV","propTypes","oneOfType","array","func","bool","shape","isRequired","object","node","string","number"],"sources":["../../../../src/components/input-masked/TextMask.js"],"sourcesContent":["import React from 'react'\nimport PropTypes from 'prop-types'\nimport createTextMaskInputElement from './text-mask/createTextMaskInputElement'\nimport InputModeNumber from './text-mask/InputModeNumber'\nimport { isNil } from './text-mask/utilities'\n\nexport default class TextMask extends React.PureComponent {\n  static propTypes = {\n    mask: PropTypes.oneOfType([\n      PropTypes.array,\n      PropTypes.func,\n      PropTypes.bool,\n      PropTypes.shape({\n        mask: PropTypes.oneOfType([PropTypes.array, PropTypes.func]),\n        pipe: PropTypes.func,\n      }),\n    ]).isRequired,\n    inputRef: PropTypes.object,\n    inputElement: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n    onChange: PropTypes.func,\n    guide: PropTypes.bool,\n    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    pipe: PropTypes.func,\n    placeholderChar: PropTypes.string,\n    keepCharPositions: PropTypes.bool,\n    showMask: PropTypes.bool,\n  }\n\n  static defaultProps = {\n    inputElement: null,\n    inputRef: null,\n    onChange: null,\n    guide: null,\n    value: null,\n    pipe: null,\n    placeholderChar: null,\n    keepCharPositions: null,\n    showMask: null,\n  }\n\n  constructor(props) {\n    super(props)\n\n    this.inputRef = props.inputRef || React.createRef()\n  }\n\n  componentDidMount() {\n    this.initTextMask()\n  }\n\n  componentWillUnmount() {\n    this.inputMode?.remove()\n  }\n\n  initTextMask() {\n    const {\n      props,\n      props: { value, inputMode },\n    } = this\n\n    const inputElement = this.inputRef.current\n    this.textMaskInputElement = createTextMaskInputElement({\n      ...props,\n      inputElement,\n    })\n    this.textMaskInputElement.update(value)\n\n    if (!inputMode && inputMode !== 'none') {\n      this.inputMode = new InputModeNumber()\n    }\n\n    this.inputMode?.setElement(inputElement)\n  }\n\n  onChange = (event) => {\n    this.textMaskInputElement.update()\n\n    if (typeof this.props.onChange === 'function') {\n      return this.props.onChange(event)\n    }\n  }\n\n  componentDidUpdate(prevProps) {\n    // Getting props affecting value\n    const { value, pipe, mask, guide, placeholderChar, showMask } =\n      this.props\n\n    // Сalculate that settings was changed:\n    // - `pipe` converting to string, to compare function content\n    // - `mask` converting to string, to compare values or function content\n    // - `keepCharPositions` excludes, because it affect only cursor position\n    const settings = { guide, placeholderChar, showMask }\n    const isPipeChanged =\n      typeof pipe === 'function' && typeof prevProps.pipe === 'function'\n        ? pipe.toString() !== prevProps.pipe.toString()\n        : (isNil(pipe) && !isNil(prevProps.pipe)) ||\n          (!isNil(pipe) && isNil(prevProps.pipe))\n    const isMaskChanged = mask.toString() !== prevProps.mask.toString()\n    const isSettingChanged =\n      Object.keys(settings).some(\n        (prop) => settings[prop] !== prevProps[prop]\n      ) ||\n      isMaskChanged ||\n      isPipeChanged\n\n    // Сalculate that value was changed\n    const isValueChanged =\n      value !== this.inputRef.current.value || prevProps.value !== value\n\n    // Check value and settings to prevent duplicating update() call\n    if (isValueChanged || isSettingChanged) {\n      this.initTextMask()\n    }\n  }\n\n  render() {\n    const {\n      inputElement,\n      inputRef, // eslint-disable-line\n      mask, // eslint-disable-line\n      guide, // eslint-disable-line\n      pipe, // eslint-disable-line\n      placeholderChar, // eslint-disable-line\n      keepCharPositions, // eslint-disable-line\n      value, // eslint-disable-line\n      onChange, // eslint-disable-line\n      showMask, // eslint-disable-line\n\n      ...props\n    } = this.props\n\n    const params = {\n      onChange: this.onChange,\n      ...props,\n    }\n\n    return inputElement ? (\n      React.cloneElement(inputElement, params)\n    ) : (\n      <input ref={this.inputRef} {...params} />\n    )\n  }\n}\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,0BAA0B,MAAM,wCAAwC;AAC/E,OAAOC,eAAe,MAAM,6BAA6B;AACzD,SAASC,KAAK,QAAQ,uBAAuB;AAE7C,eAAe,MAAMC,QAAQ,SAASL,KAAK,CAACM,aAAa,CAAC;EAkCxDC,WAAWA,CAACC,KAAK,EAAE;IACjB,KAAK,CAACA,KAAK,CAAC;IAAAC,eAAA,mBAiCFC,KAAK,IAAK;MACpB,IAAI,CAACC,oBAAoB,CAACC,MAAM,CAAC,CAAC;MAElC,IAAI,OAAO,IAAI,CAACJ,KAAK,CAACK,QAAQ,KAAK,UAAU,EAAE;QAC7C,OAAO,IAAI,CAACL,KAAK,CAACK,QAAQ,CAACH,KAAK,CAAC;MACnC;IACF,CAAC;IArCC,IAAI,CAACI,QAAQ,GAAGN,KAAK,CAACM,QAAQ,IAAId,KAAK,CAACe,SAAS,CAAC,CAAC;EACrD;EAEAC,iBAAiBA,CAAA,EAAG;IAClB,IAAI,CAACC,YAAY,CAAC,CAAC;EACrB;EAEAC,oBAAoBA,CAAA,EAAG;IAAA,IAAAC,eAAA;IACrB,CAAAA,eAAA,OAAI,CAACC,SAAS,cAAAD,eAAA,uBAAdA,eAAA,CAAgBE,MAAM,CAAC,CAAC;EAC1B;EAEAJ,YAAYA,CAAA,EAAG;IAAA,IAAAK,gBAAA;IACb,MAAM;MACJd,KAAK;MACLA,KAAK,EAAE;QAAEe,KAAK;QAAEH;MAAU;IAC5B,CAAC,GAAG,IAAI;IAER,MAAMI,YAAY,GAAG,IAAI,CAACV,QAAQ,CAACW,OAAO;IAC1C,IAAI,CAACd,oBAAoB,GAAGT,0BAA0B,CAAAwB,aAAA,CAAAA,aAAA,KACjDlB,KAAK;MACRgB;IAAY,EACb,CAAC;IACF,IAAI,CAACb,oBAAoB,CAACC,MAAM,CAACW,KAAK,CAAC;IAEvC,IAAI,CAACH,SAAS,IAAIA,SAAS,KAAK,MAAM,EAAE;MACtC,IAAI,CAACA,SAAS,GAAG,IAAIjB,eAAe,CAAC,CAAC;IACxC;IAEA,CAAAmB,gBAAA,OAAI,CAACF,SAAS,cAAAE,gBAAA,uBAAdA,gBAAA,CAAgBK,UAAU,CAACH,YAAY,CAAC;EAC1C;EAUAI,kBAAkBA,CAACC,SAAS,EAAE;IAE5B,MAAM;MAAEN,KAAK;MAAEO,IAAI;MAAEC,IAAI;MAAEC,KAAK;MAAEC,eAAe;MAAEC;IAAS,CAAC,GAC3D,IAAI,CAAC1B,KAAK;IAMZ,MAAM2B,QAAQ,GAAG;MAAEH,KAAK;MAAEC,eAAe;MAAEC;IAAS,CAAC;IACrD,MAAME,aAAa,GACjB,OAAON,IAAI,KAAK,UAAU,IAAI,OAAOD,SAAS,CAACC,IAAI,KAAK,UAAU,GAC9DA,IAAI,CAACO,QAAQ,CAAC,CAAC,KAAKR,SAAS,CAACC,IAAI,CAACO,QAAQ,CAAC,CAAC,GAC5CjC,KAAK,CAAC0B,IAAI,CAAC,IAAI,CAAC1B,KAAK,CAACyB,SAAS,CAACC,IAAI,CAAC,IACrC,CAAC1B,KAAK,CAAC0B,IAAI,CAAC,IAAI1B,KAAK,CAACyB,SAAS,CAACC,IAAI,CAAE;IAC7C,MAAMQ,aAAa,GAAGP,IAAI,CAACM,QAAQ,CAAC,CAAC,KAAKR,SAAS,CAACE,IAAI,CAACM,QAAQ,CAAC,CAAC;IACnE,MAAME,gBAAgB,GACpBC,MAAM,CAACC,IAAI,CAACN,QAAQ,CAAC,CAACO,IAAI,CACvBC,IAAI,IAAKR,QAAQ,CAACQ,IAAI,CAAC,KAAKd,SAAS,CAACc,IAAI,CAC7C,CAAC,IACDL,aAAa,IACbF,aAAa;IAGf,MAAMQ,cAAc,GAClBrB,KAAK,KAAK,IAAI,CAACT,QAAQ,CAACW,OAAO,CAACF,KAAK,IAAIM,SAAS,CAACN,KAAK,KAAKA,KAAK;IAGpE,IAAIqB,cAAc,IAAIL,gBAAgB,EAAE;MACtC,IAAI,CAACtB,YAAY,CAAC,CAAC;IACrB;EACF;EAEA4B,MAAMA,CAAA,EAAG;IACP,MAAAC,WAAA,GAaI,IAAI,CAACtC,KAAK;MAbR;QACJgB,YAAY;QACZV,QAAQ;QACRiB,IAAI;QACJC,KAAK;QACLF,IAAI;QACJG,eAAe;QACfc,iBAAiB;QACjBxB,KAAK;QACLV,QAAQ;QACRqB;MAGF,CAAC,GAAAY,WAAA;MADItC,KAAK,GAAAwC,wBAAA,CAAAF,WAAA,EAAAG,SAAA;IAGV,MAAMC,MAAM,GAAAxB,aAAA;MACVb,QAAQ,EAAE,IAAI,CAACA;IAAQ,GACpBL,KAAK,CACT;IAED,OAAOgB,YAAY,GACjBxB,KAAK,CAACmD,YAAY,CAAC3B,YAAY,EAAE0B,MAAM,CAAC,GAExClD,KAAA,CAAAoD,aAAA,UAAAC,QAAA;MAAOC,GAAG,EAAE,IAAI,CAACxC;IAAS,GAAKoC,MAAM,CAAG,CACzC;EACH;AACF;AAACzC,eAAA,CAxIoBJ,QAAQ,kBAsBL;EACpBmB,YAAY,EAAE,IAAI;EAClBV,QAAQ,EAAE,IAAI;EACdD,QAAQ,EAAE,IAAI;EACdmB,KAAK,EAAE,IAAI;EACXT,KAAK,EAAE,IAAI;EACXO,IAAI,EAAE,IAAI;EACVG,eAAe,EAAE,IAAI;EACrBc,iBAAiB,EAAE,IAAI;EACvBb,QAAQ,EAAE;AACZ,CAAC;AAAAqB,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAhCkBpD,QAAQ,CACpBqD,SAAS,GAAG;EACjB3B,IAAI,EAAE9B,SAAS,CAAC0D,SAAS,CAAC,CACxB1D,SAAS,CAAC2D,KAAK,EACf3D,SAAS,CAAC4D,IAAI,EACd5D,SAAS,CAAC6D,IAAI,EACd7D,SAAS,CAAC8D,KAAK,CAAC;IACdhC,IAAI,EAAE9B,SAAS,CAAC0D,SAAS,CAAC,CAAC1D,SAAS,CAAC2D,KAAK,EAAE3D,SAAS,CAAC4D,IAAI,CAAC,CAAC;IAC5D/B,IAAI,EAAE7B,SAAS,CAAC4D;EAClB,CAAC,CAAC,CACH,CAAC,CAACG,UAAU;EACblD,QAAQ,EAAEb,SAAS,CAACgE,MAAM;EAC1BzC,YAAY,EAAEvB,SAAS,CAAC0D,SAAS,CAAC,CAAC1D,SAAS,CAACiE,IAAI,EAAEjE,SAAS,CAAC4D,IAAI,CAAC,CAAC;EACnEhD,QAAQ,EAAEZ,SAAS,CAAC4D,IAAI;EACxB7B,KAAK,EAAE/B,SAAS,CAAC6D,IAAI;EACrBvC,KAAK,EAAEtB,SAAS,CAAC0D,SAAS,CAAC,CAAC1D,SAAS,CAACkE,MAAM,EAAElE,SAAS,CAACmE,MAAM,CAAC,CAAC;EAChEtC,IAAI,EAAE7B,SAAS,CAAC4D,IAAI;EACpB5B,eAAe,EAAEhC,SAAS,CAACkE,MAAM;EACjCpB,iBAAiB,EAAE9C,SAAS,CAAC6D,IAAI;EACjC5B,QAAQ,EAAEjC,SAAS,CAAC6D;AACtB,CAAC"}

package/es/components/input-masked/style/dnb-input-masked.css

@@ -8,6 +8,9 @@
 .dnb-input-masked--guide {
   font-family: var(--font-family-monospace);
 }
+.dnb-input-masked input::placeholder {
+  color: inherit;
+}
 
 .dnb-multi-input-mask__fieldset {
   margin: 0;
@@ -18,7 +21,6 @@
   display: inline-flex;
   flex-flow: row wrap;
   align-items: baseline;
-  grid-gap: 1rem;
   gap: 1rem;
 }
 

package/es/components/input-masked/style/dnb-input-masked.min.css

@@ -1 +1 @@
-.dnb-input-masked--guide{font-family:var(--font-family-monospace)}.dnb-multi-input-mask__fieldset{border:none;margin:0;padding:0}.dnb-multi-input-mask__fieldset--horizontal{grid-gap:1rem;align-items:baseline;display:inline-flex;flex-flow:row wrap;gap:1rem}.dnb-multi-input-mask__input.dnb-input__input{background:transparent;border:none;display:inline-block;font-family:var(--font-family-monospace);margin:0;outline:none;overflow:visible;padding:0 .125rem;text-align:center;transform:translateY(0);white-space:nowrap;width:auto}.dnb-multi-input-mask__input.dnb-input__input:first-of-type{padding-left:.5rem}.dnb-multi-input-mask__input.dnb-input__input:last-of-type{padding-right:.5rem}.dnb-multi-input-mask{width:-moz-fit-content;width:fit-content}.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__delimiter,.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__input{color:var(--color-black-55)}.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__delimiter--highlight,.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__input--highlight{color:var(--color-black)}.dnb-multi-input-mask .dnb-input__shell:focus-within{box-shadow:0 0 0 var(--input-border-width--focus) var(--input-border-color--hover)}.dnb-multi-input-mask__legend--horizontal.dnb-form-label{display:contents}.dnb-multi-input-mask__legend:not([disabled]):hover~.dnb-multi-input-mask .dnb-input__shell{box-shadow:0 0 0 var(--input-border-width--focus) var(--input-border-color--hover)}
+.dnb-input-masked--guide{font-family:var(--font-family-monospace)}.dnb-input-masked input::placeholder{color:inherit}.dnb-multi-input-mask__fieldset{border:none;margin:0;padding:0}.dnb-multi-input-mask__fieldset--horizontal{align-items:baseline;display:inline-flex;flex-flow:row wrap;gap:1rem}.dnb-multi-input-mask__input.dnb-input__input{background:transparent;border:none;display:inline-block;font-family:var(--font-family-monospace);margin:0;outline:none;overflow:visible;padding:0 .125rem;text-align:center;transform:translateY(0);white-space:nowrap;width:auto}.dnb-multi-input-mask__input.dnb-input__input:first-of-type{padding-left:.5rem}.dnb-multi-input-mask__input.dnb-input__input:last-of-type{padding-right:.5rem}.dnb-multi-input-mask{width:-moz-fit-content;width:fit-content}.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__delimiter,.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__input{color:var(--color-black-55)}.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__delimiter--highlight,.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__input--highlight{color:var(--color-black)}.dnb-multi-input-mask .dnb-input__shell:focus-within{box-shadow:0 0 0 var(--input-border-width--focus) var(--input-border-color--hover)}.dnb-multi-input-mask__legend--horizontal.dnb-form-label{display:contents}.dnb-multi-input-mask__legend:not([disabled]):hover~.dnb-multi-input-mask .dnb-input__shell{box-shadow:0 0 0 var(--input-border-width--focus) var(--input-border-color--hover)}

package/es/components/input-masked/style/dnb-input-masked.scss

@@ -9,6 +9,11 @@
   &--guide {
     font-family: var(--font-family-monospace);
   }
+
+  // Used on iOS when faking the inputMode to be type of number during focus – this fix avoids a flickering
+  input::placeholder {
+    color: inherit;
+  }
 }
 
 // MultiInputMask

package/es/components/input-masked/text-mask/InputModeNumber.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="node" />
+/**
+ * This is a helper function (hack),
+ * that will evoke a good numeric keyboard (on iOS) that supports decimals and minus keys.
+ */
+export default class InputModeNumber {
+    inputElement: HTMLInputElement;
+    labelElement: HTMLLabelElement;
+    timeout: NodeJS.Timer;
+    hasFocus: boolean;
+    focusEventName: string;
+    blurEventName: string;
+    setElement(element: HTMLInputElement): void;
+    handleLabel(): void;
+    add(): void;
+    removeEvent(element: HTMLInputElement | HTMLLabelElement): void;
+    remove(): void;
+    onBlur: () => void;
+    onFocus: () => void;
+}

package/es/components/input-masked/text-mask/InputModeNumber.js

@@ -0,0 +1,84 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { IS_IOS } from '../../../shared/helpers';
+export default class InputModeNumber {
+  constructor() {
+    _defineProperty(this, "inputElement", void 0);
+    _defineProperty(this, "labelElement", void 0);
+    _defineProperty(this, "timeout", void 0);
+    _defineProperty(this, "hasFocus", void 0);
+    _defineProperty(this, "focusEventName", void 0);
+    _defineProperty(this, "blurEventName", void 0);
+    _defineProperty(this, "onBlur", () => {
+      this.hasFocus = false;
+    });
+    _defineProperty(this, "onFocus", () => {
+      if (this.hasFocus || !this.inputElement) {
+        return;
+      }
+      this.hasFocus = true;
+      const type = this.inputElement.type;
+      if (type === 'number') {
+        return;
+      }
+      const value = this.inputElement.value;
+      const placeholder = this.inputElement.placeholder;
+      this.inputElement.placeholder = value;
+      this.inputElement.type = 'number';
+      clearTimeout(this.timeout);
+      this.timeout = setTimeout(() => {
+        var _this$inputElement$ru, _this$inputElement;
+        this.inputElement.type = type;
+        this.inputElement.value = value;
+        this.inputElement.placeholder = placeholder;
+        (_this$inputElement$ru = (_this$inputElement = this.inputElement)['runCorrectCaretPosition']) === null || _this$inputElement$ru === void 0 ? void 0 : _this$inputElement$ru.call(_this$inputElement);
+      }, 5);
+    });
+  }
+  setElement(element) {
+    if (!IS_IOS) {
+      return;
+    }
+    this.focusEventName = 'mouseenter';
+    this.blurEventName = 'blur';
+    if (!this.inputElement) {
+      this.inputElement = element;
+      this.add();
+      this.handleLabel();
+    }
+  }
+  handleLabel() {
+    var _this$inputElement2;
+    const id = (_this$inputElement2 = this.inputElement) === null || _this$inputElement2 === void 0 ? void 0 : _this$inputElement2.id;
+    if (!id) {
+      return;
+    }
+    this.labelElement = document.querySelector(`[for="${id}"]`);
+    if (this.labelElement) {
+      this.labelElement.addEventListener('mousedown', this.onFocus);
+    }
+  }
+  add() {
+    var _this$inputElement3;
+    const fnId = '__getCorrectCaretPosition';
+    if (this.inputElement && !((_this$inputElement3 = this.inputElement) !== null && _this$inputElement3 !== void 0 && _this$inputElement3[fnId])) {
+      this.inputElement[fnId] = true;
+      this.inputElement.addEventListener(this.focusEventName, this.onFocus);
+      this.inputElement.addEventListener(this.blurEventName, this.onBlur);
+    }
+  }
+  removeEvent(element) {
+    if (element) {
+      element.removeEventListener(this.focusEventName, this.onFocus);
+      element.removeEventListener(this.blurEventName, this.onBlur);
+      element.removeEventListener('mousedown', this.onFocus);
+    }
+  }
+  remove() {
+    clearTimeout(this.timeout);
+    this.removeEvent(this.inputElement);
+    this.removeEvent(this.labelElement);
+    delete this.inputElement;
+    delete this.labelElement;
+  }
+}
+//# sourceMappingURL=InputModeNumber.js.map

package/es/components/input-masked/text-mask/InputModeNumber.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputModeNumber.js","names":["IS_IOS","InputModeNumber","constructor","_defineProperty","hasFocus","inputElement","type","value","placeholder","clearTimeout","timeout","setTimeout","_this$inputElement$ru","_this$inputElement","call","setElement","element","focusEventName","blurEventName","add","handleLabel","_this$inputElement2","id","labelElement","document","querySelector","addEventListener","onFocus","_this$inputElement3","fnId","onBlur","removeEvent","removeEventListener","remove"],"sources":["../../../../../src/components/input-masked/text-mask/InputModeNumber.ts"],"sourcesContent":["import { IS_IOS } from '../../../shared/helpers'\n\n/**\n * This is a helper function (hack),\n * that will evoke a good numeric keyboard (on iOS) that supports decimals and minus keys.\n */\nexport default class InputModeNumber {\n  inputElement: HTMLInputElement\n  labelElement: HTMLLabelElement\n  timeout: NodeJS.Timer\n  hasFocus: boolean\n  focusEventName: string\n  blurEventName: string\n\n  setElement(element: HTMLInputElement) {\n    if (!IS_IOS) {\n      return // stop here\n    }\n\n    /**\n     * Why use \"mouseenter\" and not \"focus\", \"mousedown\" or \"touchstart\"?\n     * - Because \"touchstart\" has unexpected behavior when holding the finger down before releasing.\n     * - And because \"focus\" and \"mousedown\" is too late, we then can't change the type anymore.\n     */\n    this.focusEventName = 'mouseenter'\n    this.blurEventName = 'blur'\n\n    if (!this.inputElement) {\n      this.inputElement = element\n      this.add()\n      this.handleLabel()\n    }\n  }\n  handleLabel() {\n    const id = this.inputElement?.id\n    if (!id) {\n      return\n    }\n\n    this.labelElement = document.querySelector(\n      `[for=\"${id}\"]`\n    ) as HTMLLabelElement\n\n    if (this.labelElement) {\n      this.labelElement.addEventListener('mousedown', this.onFocus)\n    }\n  }\n  add() {\n    const fnId = '__getCorrectCaretPosition'\n    if (this.inputElement && !this.inputElement?.[fnId]) {\n      this.inputElement[fnId] = true\n\n      this.inputElement.addEventListener(this.focusEventName, this.onFocus)\n      this.inputElement.addEventListener(this.blurEventName, this.onBlur)\n    }\n  }\n  removeEvent(element: HTMLInputElement | HTMLLabelElement) {\n    if (element) {\n      element.removeEventListener(this.focusEventName, this.onFocus)\n      element.removeEventListener(this.blurEventName, this.onBlur)\n      element.removeEventListener('mousedown', this.onFocus)\n    }\n  }\n  remove() {\n    clearTimeout(this.timeout)\n\n    this.removeEvent(this.inputElement)\n    this.removeEvent(this.labelElement)\n\n    delete this.inputElement\n    delete this.labelElement\n  }\n  onBlur = () => {\n    this.hasFocus = false\n  }\n  onFocus = () => {\n    if (this.hasFocus || !this.inputElement) {\n      return\n    }\n\n    this.hasFocus = true\n\n    const type = this.inputElement.type\n\n    if (type === 'number') {\n      return // stop here\n    }\n\n    const value = this.inputElement.value\n    const placeholder = this.inputElement.placeholder\n\n    // To prevent flickering, show the placeholder, while the input value is \"empty\".\n    this.inputElement.placeholder = value\n\n    // Changing the type, will remove the current input value to show as \"empty\".\n    this.inputElement.type = 'number'\n\n    // Reset the input again\n    clearTimeout(this.timeout)\n    this.timeout = setTimeout(() => {\n      this.inputElement.type = type\n      this.inputElement.value = value // set the input value\n      this.inputElement.placeholder = placeholder\n      this.inputElement['runCorrectCaretPosition']?.()\n    }, 5)\n  }\n}\n"],"mappings":"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"}

package/es/components/input-masked/text-mask/createTextMaskInputElement.js

@@ -129,7 +129,7 @@ export function safeSetSelection(element, selectionPosition) {
     if (isAndroid) {
       defer(() => element.setSelectionRange(selectionPosition, selectionPosition), 0);
     } else {
-      element.setSelectionRange(selectionPosition, selectionPosition);
+      element === null || element === void 0 ? void 0 : element.setSelectionRange(selectionPosition, selectionPosition);
     }
   }
 }

package/es/components/input-masked/text-mask/createTextMaskInputElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"createTextMaskInputElement.js","names":["adjustCaretPosition","conformToMask","convertMaskToPlaceholder","isString","isNumber","processCaretTraps","placeholderChar","defaultPlaceholderChar","strFunction","emptyString","strObject","isAndroid","navigator","test","userAgent","defer","requestAnimationFrame","setTimeout","createTextMaskInputElement","config","state","previousConformedValue","undefined","previousPlaceholder","update","rawValue","inputElement","mask","providedMask","guide","pipe","keepCharPositions","showMask","value","placeholder","Array","safeRawValue","getSafeRawValue","currentCaretPosition","selectionEnd","caretTrapIndexes","maskWithoutCaretTraps","indexes","conformToMaskConfig","conformedValue","piped","pipeResults","_objectSpread","rejected","finalConformedValue","adjustedCaretPosition","indexesOfPipedChars","inputValueShouldBeEmpty","emptyValue","inputElementValue","safeSetSelection","element","selectionPosition","_element$setSelection","document","activeElement","setSelectionRange","name","inputValue","String","Error","JSON","stringify"],"sources":["../../../../../src/components/input-masked/text-mask/createTextMaskInputElement.js"],"sourcesContent":["/**\n * Source for a non maintained repo:\n * https://github.com/text-mask/text-mask/tree/master/core/src\n */\n\nimport adjustCaretPosition from './adjustCaretPosition'\nimport conformToMask from './conformToMask'\nimport {\n  convertMaskToPlaceholder,\n  isString,\n  isNumber,\n  processCaretTraps,\n} from './utilities'\nimport {\n  placeholderChar as defaultPlaceholderChar,\n  strFunction,\n} from './constants'\n\nconst emptyString = ''\nconst strObject = 'object'\nconst isAndroid =\n  typeof navigator !== 'undefined' && /Android/i.test(navigator.userAgent)\nconst defer =\n  typeof requestAnimationFrame !== 'undefined'\n    ? requestAnimationFrame\n    : setTimeout\n\nexport default function createTextMaskInputElement(config) {\n  // Anything that we will need to keep between `update` calls, we will store in this `state` object.\n  const state = {\n    previousConformedValue: undefined,\n    previousPlaceholder: undefined,\n  }\n\n  return {\n    state,\n\n    // `update` is called by framework components whenever they want to update the `value` of the input element.\n    // The caller can send a `rawValue` to be conformed and set on the input element. However, the default use-case\n    // is for this to be read from the `inputElement` directly.\n    update(\n      rawValue,\n      {\n        inputElement,\n        mask: providedMask,\n        guide,\n        pipe,\n        placeholderChar = defaultPlaceholderChar,\n        keepCharPositions = false,\n        showMask = false,\n      } = config\n    ) {\n      // if `rawValue` is `undefined`, read from the `inputElement`\n      if (typeof rawValue === 'undefined') {\n        rawValue = inputElement.value\n      }\n\n      // If `rawValue` equals `state.previousConformedValue`, we don't need to change anything. So, we return.\n      // This check is here to handle controlled framework components that repeat the `update` call on every render.\n      if (rawValue === state.previousConformedValue) {\n        return\n      }\n\n      // Text Mask accepts masks that are a combination of a `mask` and a `pipe` that work together. If such a `mask` is\n      // passed, we destructure it below, so the rest of the code can work normally as if a separate `mask` and a `pipe`\n      // were passed.\n      if (\n        typeof providedMask === strObject &&\n        providedMask.pipe !== undefined &&\n        providedMask.mask !== undefined\n      ) {\n        pipe = providedMask.pipe\n        providedMask = providedMask.mask\n      }\n\n      // The `placeholder` is an essential piece of how Text Mask works. For a mask like `(111)`, the placeholder would\n      // be `(___)` if the `placeholderChar` is set to `_`.\n      let placeholder\n\n      // We don't know what the mask would be yet. If it is an array, we take it as is, but if it's a function, we will\n      // have to call that function to get the mask array.\n      let mask\n\n      // If the provided mask is an array, we can call `convertMaskToPlaceholder` here once and we'll always have the\n      // correct `placeholder`.\n      if (providedMask instanceof Array) {\n        placeholder = convertMaskToPlaceholder(\n          providedMask,\n          placeholderChar\n        )\n      }\n\n      // In framework components that support reactivity, it's possible to turn off masking by passing\n      // `false` for `mask` after initialization. See https://github.com/text-mask/text-mask/pull/359\n      if (providedMask === false) {\n        return\n      }\n\n      // We check the provided `rawValue` before moving further.\n      // If it's something we can't work with `getSafeRawValue` will throw.\n      const safeRawValue = getSafeRawValue(rawValue)\n\n      // `selectionEnd` indicates to us where the caret position is after the user has typed into the input\n      const currentCaretPosition = inputElement?.selectionEnd\n\n      // We need to know what the `previousConformedValue` and `previousPlaceholder` is from the previous `update` call\n      const { previousConformedValue, previousPlaceholder } = state\n\n      let caretTrapIndexes\n\n      // If the `providedMask` is a function. We need to call it at every `update` to get the `mask` array.\n      // Then we also need to get the `placeholder`\n      if (typeof providedMask === strFunction) {\n        mask = providedMask(safeRawValue, {\n          currentCaretPosition,\n          previousConformedValue,\n          placeholderChar,\n        })\n\n        // disable masking if `mask` is `false`\n        if (mask === false) {\n          return\n        }\n\n        // mask functions can setup caret traps to have some control over how the caret moves. We need to process\n        // the mask for any caret traps. `processCaretTraps` will remove the caret traps from the mask and return\n        // the indexes of the caret traps.\n        const { maskWithoutCaretTraps, indexes } = processCaretTraps(mask)\n\n        mask = maskWithoutCaretTraps // The processed mask is what we're interested in\n        caretTrapIndexes = indexes // And we need to store these indexes because they're needed by `adjustCaretPosition`\n\n        placeholder = convertMaskToPlaceholder(mask, placeholderChar)\n\n        // If the `providedMask` is not a function, we just use it as-is.\n      } else {\n        mask = providedMask\n      }\n\n      // The following object will be passed to `conformToMask` to determine how the `rawValue` will be conformed\n      const conformToMaskConfig = {\n        previousConformedValue,\n        guide,\n        placeholderChar,\n        pipe,\n        placeholder,\n        currentCaretPosition,\n        keepCharPositions,\n      }\n\n      // `conformToMask` returns `conformedValue` as part of an object for future API flexibility\n      const { conformedValue } = conformToMask(\n        safeRawValue,\n        mask,\n        conformToMaskConfig\n      )\n\n      // The following few lines are to support the `pipe` feature.\n      const piped = typeof pipe === strFunction\n\n      let pipeResults = {}\n\n      // If `pipe` is a function, we call it.\n      if (piped) {\n        // `pipe` receives the `conformedValue` and the configurations with which `conformToMask` was called.\n        pipeResults = pipe(conformedValue, {\n          rawValue: safeRawValue,\n          ...conformToMaskConfig,\n        })\n\n        // `pipeResults` should be an object. But as a convenience, we allow the pipe author to just return `false` to\n        // indicate rejection. Or return just a string when there are no piped characters.\n        // If the `pipe` returns `false` or a string, the block below turns it into an object that the rest\n        // of the code can work with.\n        if (pipeResults === false) {\n          // If the `pipe` rejects `conformedValue`, we use the `previousConformedValue`, and set `rejected` to `true`.\n          pipeResults = { value: previousConformedValue, rejected: true }\n        } else if (isString(pipeResults)) {\n          pipeResults = { value: pipeResults }\n        }\n      }\n\n      // Before we proceed, we need to know which conformed value to use, the one returned by the pipe or the one\n      // returned by `conformToMask`.\n      const finalConformedValue = piped\n        ? pipeResults.value\n        : conformedValue\n\n      // After determining the conformed value, we will need to know where to set\n      // the caret position. `adjustCaretPosition` will tell us.\n      const adjustedCaretPosition = adjustCaretPosition({\n        previousConformedValue,\n        previousPlaceholder,\n        conformedValue: finalConformedValue,\n        placeholder,\n        rawValue: safeRawValue,\n        currentCaretPosition,\n        placeholderChar,\n        indexesOfPipedChars: pipeResults.indexesOfPipedChars,\n        caretTrapIndexes,\n      })\n\n      // Text Mask sets the input value to an empty string when the condition below is set. It provides a better UX.\n      const inputValueShouldBeEmpty =\n        finalConformedValue === placeholder && adjustedCaretPosition === 0\n      const emptyValue = showMask ? placeholder : emptyString\n      const inputElementValue = inputValueShouldBeEmpty\n        ? emptyValue\n        : finalConformedValue\n\n      state.previousConformedValue = inputElementValue // store value for access for next time\n      state.previousPlaceholder = placeholder\n\n      // In some cases, this `update` method will be repeatedly called with a raw value that has already been conformed\n      // and set to `inputElement.value`. The below check guards against needlessly readjusting the input state.\n      // See https://github.com/text-mask/text-mask/issues/231\n      if (inputElement.value === inputElementValue) {\n        return\n      }\n\n      inputElement.value = inputElementValue // set the input value\n      safeSetSelection(inputElement, adjustedCaretPosition) // adjust caret position\n    },\n  }\n}\n\nexport function safeSetSelection(element, selectionPosition) {\n  if (\n    document.activeElement === element ||\n    element?.setSelectionRange?.name === 'mockConstructor'\n  ) {\n    if (isAndroid) {\n      defer(\n        () =>\n          element.setSelectionRange(selectionPosition, selectionPosition),\n        0\n      )\n    } else {\n      element.setSelectionRange(selectionPosition, selectionPosition)\n    }\n  }\n}\n\nfunction getSafeRawValue(inputValue) {\n  if (isString(inputValue)) {\n    return inputValue\n  } else if (isNumber(inputValue)) {\n    return String(inputValue)\n  } else if (inputValue === undefined || inputValue === null) {\n    return emptyString\n  } else {\n    throw new Error(\n      \"The 'value' provided to Text Mask needs to be a string or a number. The value \" +\n        `received was:\\n\\n ${JSON.stringify(inputValue)}`\n    )\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"createTextMaskInputElement.js","names":["adjustCaretPosition","conformToMask","convertMaskToPlaceholder","isString","isNumber","processCaretTraps","placeholderChar","defaultPlaceholderChar","strFunction","emptyString","strObject","isAndroid","navigator","test","userAgent","defer","requestAnimationFrame","setTimeout","createTextMaskInputElement","config","state","previousConformedValue","undefined","previousPlaceholder","update","rawValue","inputElement","mask","providedMask","guide","pipe","keepCharPositions","showMask","value","placeholder","Array","safeRawValue","getSafeRawValue","currentCaretPosition","selectionEnd","caretTrapIndexes","maskWithoutCaretTraps","indexes","conformToMaskConfig","conformedValue","piped","pipeResults","_objectSpread","rejected","finalConformedValue","adjustedCaretPosition","indexesOfPipedChars","inputValueShouldBeEmpty","emptyValue","inputElementValue","safeSetSelection","element","selectionPosition","_element$setSelection","document","activeElement","setSelectionRange","name","inputValue","String","Error","JSON","stringify"],"sources":["../../../../../src/components/input-masked/text-mask/createTextMaskInputElement.js"],"sourcesContent":["/**\n * Source for a non maintained repo:\n * https://github.com/text-mask/text-mask/tree/master/core/src\n */\n\nimport adjustCaretPosition from './adjustCaretPosition'\nimport conformToMask from './conformToMask'\nimport {\n  convertMaskToPlaceholder,\n  isString,\n  isNumber,\n  processCaretTraps,\n} from './utilities'\nimport {\n  placeholderChar as defaultPlaceholderChar,\n  strFunction,\n} from './constants'\n\nconst emptyString = ''\nconst strObject = 'object'\nconst isAndroid =\n  typeof navigator !== 'undefined' && /Android/i.test(navigator.userAgent)\nconst defer =\n  typeof requestAnimationFrame !== 'undefined'\n    ? requestAnimationFrame\n    : setTimeout\n\nexport default function createTextMaskInputElement(config) {\n  // Anything that we will need to keep between `update` calls, we will store in this `state` object.\n  const state = {\n    previousConformedValue: undefined,\n    previousPlaceholder: undefined,\n  }\n\n  return {\n    state,\n\n    // `update` is called by framework components whenever they want to update the `value` of the input element.\n    // The caller can send a `rawValue` to be conformed and set on the input element. However, the default use-case\n    // is for this to be read from the `inputElement` directly.\n    update(\n      rawValue,\n      {\n        inputElement,\n        mask: providedMask,\n        guide,\n        pipe,\n        placeholderChar = defaultPlaceholderChar,\n        keepCharPositions = false,\n        showMask = false,\n      } = config\n    ) {\n      // if `rawValue` is `undefined`, read from the `inputElement`\n      if (typeof rawValue === 'undefined') {\n        rawValue = inputElement.value\n      }\n\n      // If `rawValue` equals `state.previousConformedValue`, we don't need to change anything. So, we return.\n      // This check is here to handle controlled framework components that repeat the `update` call on every render.\n      if (rawValue === state.previousConformedValue) {\n        return\n      }\n\n      // Text Mask accepts masks that are a combination of a `mask` and a `pipe` that work together. If such a `mask` is\n      // passed, we destructure it below, so the rest of the code can work normally as if a separate `mask` and a `pipe`\n      // were passed.\n      if (\n        typeof providedMask === strObject &&\n        providedMask.pipe !== undefined &&\n        providedMask.mask !== undefined\n      ) {\n        pipe = providedMask.pipe\n        providedMask = providedMask.mask\n      }\n\n      // The `placeholder` is an essential piece of how Text Mask works. For a mask like `(111)`, the placeholder would\n      // be `(___)` if the `placeholderChar` is set to `_`.\n      let placeholder\n\n      // We don't know what the mask would be yet. If it is an array, we take it as is, but if it's a function, we will\n      // have to call that function to get the mask array.\n      let mask\n\n      // If the provided mask is an array, we can call `convertMaskToPlaceholder` here once and we'll always have the\n      // correct `placeholder`.\n      if (providedMask instanceof Array) {\n        placeholder = convertMaskToPlaceholder(\n          providedMask,\n          placeholderChar\n        )\n      }\n\n      // In framework components that support reactivity, it's possible to turn off masking by passing\n      // `false` for `mask` after initialization. See https://github.com/text-mask/text-mask/pull/359\n      if (providedMask === false) {\n        return\n      }\n\n      // We check the provided `rawValue` before moving further.\n      // If it's something we can't work with `getSafeRawValue` will throw.\n      const safeRawValue = getSafeRawValue(rawValue)\n\n      // `selectionEnd` indicates to us where the caret position is after the user has typed into the input\n      const currentCaretPosition = inputElement?.selectionEnd\n\n      // We need to know what the `previousConformedValue` and `previousPlaceholder` is from the previous `update` call\n      const { previousConformedValue, previousPlaceholder } = state\n\n      let caretTrapIndexes\n\n      // If the `providedMask` is a function. We need to call it at every `update` to get the `mask` array.\n      // Then we also need to get the `placeholder`\n      if (typeof providedMask === strFunction) {\n        mask = providedMask(safeRawValue, {\n          currentCaretPosition,\n          previousConformedValue,\n          placeholderChar,\n        })\n\n        // disable masking if `mask` is `false`\n        if (mask === false) {\n          return\n        }\n\n        // mask functions can setup caret traps to have some control over how the caret moves. We need to process\n        // the mask for any caret traps. `processCaretTraps` will remove the caret traps from the mask and return\n        // the indexes of the caret traps.\n        const { maskWithoutCaretTraps, indexes } = processCaretTraps(mask)\n\n        mask = maskWithoutCaretTraps // The processed mask is what we're interested in\n        caretTrapIndexes = indexes // And we need to store these indexes because they're needed by `adjustCaretPosition`\n\n        placeholder = convertMaskToPlaceholder(mask, placeholderChar)\n\n        // If the `providedMask` is not a function, we just use it as-is.\n      } else {\n        mask = providedMask\n      }\n\n      // The following object will be passed to `conformToMask` to determine how the `rawValue` will be conformed\n      const conformToMaskConfig = {\n        previousConformedValue,\n        guide,\n        placeholderChar,\n        pipe,\n        placeholder,\n        currentCaretPosition,\n        keepCharPositions,\n      }\n\n      // `conformToMask` returns `conformedValue` as part of an object for future API flexibility\n      const { conformedValue } = conformToMask(\n        safeRawValue,\n        mask,\n        conformToMaskConfig\n      )\n\n      // The following few lines are to support the `pipe` feature.\n      const piped = typeof pipe === strFunction\n\n      let pipeResults = {}\n\n      // If `pipe` is a function, we call it.\n      if (piped) {\n        // `pipe` receives the `conformedValue` and the configurations with which `conformToMask` was called.\n        pipeResults = pipe(conformedValue, {\n          rawValue: safeRawValue,\n          ...conformToMaskConfig,\n        })\n\n        // `pipeResults` should be an object. But as a convenience, we allow the pipe author to just return `false` to\n        // indicate rejection. Or return just a string when there are no piped characters.\n        // If the `pipe` returns `false` or a string, the block below turns it into an object that the rest\n        // of the code can work with.\n        if (pipeResults === false) {\n          // If the `pipe` rejects `conformedValue`, we use the `previousConformedValue`, and set `rejected` to `true`.\n          pipeResults = { value: previousConformedValue, rejected: true }\n        } else if (isString(pipeResults)) {\n          pipeResults = { value: pipeResults }\n        }\n      }\n\n      // Before we proceed, we need to know which conformed value to use, the one returned by the pipe or the one\n      // returned by `conformToMask`.\n      const finalConformedValue = piped\n        ? pipeResults.value\n        : conformedValue\n\n      // After determining the conformed value, we will need to know where to set\n      // the caret position. `adjustCaretPosition` will tell us.\n      const adjustedCaretPosition = adjustCaretPosition({\n        previousConformedValue,\n        previousPlaceholder,\n        conformedValue: finalConformedValue,\n        placeholder,\n        rawValue: safeRawValue,\n        currentCaretPosition,\n        placeholderChar,\n        indexesOfPipedChars: pipeResults.indexesOfPipedChars,\n        caretTrapIndexes,\n      })\n\n      // Text Mask sets the input value to an empty string when the condition below is set. It provides a better UX.\n      const inputValueShouldBeEmpty =\n        finalConformedValue === placeholder && adjustedCaretPosition === 0\n      const emptyValue = showMask ? placeholder : emptyString\n      const inputElementValue = inputValueShouldBeEmpty\n        ? emptyValue\n        : finalConformedValue\n\n      state.previousConformedValue = inputElementValue // store value for access for next time\n      state.previousPlaceholder = placeholder\n\n      // In some cases, this `update` method will be repeatedly called with a raw value that has already been conformed\n      // and set to `inputElement.value`. The below check guards against needlessly readjusting the input state.\n      // See https://github.com/text-mask/text-mask/issues/231\n      if (inputElement.value === inputElementValue) {\n        return\n      }\n\n      inputElement.value = inputElementValue // set the input value\n      safeSetSelection(inputElement, adjustedCaretPosition) // adjust caret position\n    },\n  }\n}\n\nexport function safeSetSelection(element, selectionPosition) {\n  if (\n    document.activeElement === element ||\n    element?.setSelectionRange?.name === 'mockConstructor'\n  ) {\n    if (isAndroid) {\n      defer(\n        () =>\n          element.setSelectionRange(selectionPosition, selectionPosition),\n        0\n      )\n    } else {\n      element?.setSelectionRange(selectionPosition, selectionPosition)\n    }\n  }\n}\n\nfunction getSafeRawValue(inputValue) {\n  if (isString(inputValue)) {\n    return inputValue\n  } else if (isNumber(inputValue)) {\n    return String(inputValue)\n  } else if (inputValue === undefined || inputValue === null) {\n    return emptyString\n  } else {\n    throw new Error(\n      \"The 'value' provided to Text Mask needs to be a string or a number. The value \" +\n        `received was:\\n\\n ${JSON.stringify(inputValue)}`\n    )\n  }\n}\n"],"mappings":"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"}

package/es/components/pagination/style/dnb-pagination.css

@@ -46,7 +46,6 @@
   align-items: flex-end;
 }
 .dnb-pagination__bar__inner {
-  grid-gap: 0.5rem;
   gap: 0.5rem;
 }
 .dnb-pagination__button {

package/es/components/pagination/style/dnb-pagination.min.css

@@ -1 +1 @@
-.dnb-pagination{display:flex;flex-direction:column-reverse}.dnb-pagination__bar,.dnb-pagination__bar__inner,.dnb-pagination__loadbar{align-items:center;display:flex;flex-wrap:wrap}.dnb-pagination__loadbar,.dnb-pagination__page{min-height:6rem}.dnb-pagination__bar{margin-bottom:1rem;margin-top:1rem}.dnb-pagination--left .dnb-pagination__bar{justify-content:flex-start}.dnb-pagination--center .dnb-pagination__bar{justify-content:center}@media screen and (max-width:40em){.dnb-pagination--center .dnb-pagination__bar{justify-content:flex-start}}.dnb-pagination--right .dnb-pagination__bar{justify-content:flex-end}.dnb-pagination__bar__wrapper{display:flex;flex-flow:column-reverse wrap}.dnb-pagination--center .dnb-pagination__bar__wrapper{align-items:center}.dnb-pagination--right .dnb-pagination__bar__wrapper{align-items:flex-end}.dnb-pagination__bar__inner{grid-gap:.5rem;gap:.5rem}.dnb-pagination__button{max-width:3.5rem}.dnb-pagination__button--large-number{max-width:unset}.dnb-pagination__loadbar{align-items:center;cursor:default;display:flex;justify-content:center}.dnb-pagination__indicator{cursor:default;display:flex;flex-direction:column;justify-content:center;min-height:inherit}.dnb-pagination__indicator__inner{align-items:center;animation:show-page .3s ease-out forwards;display:flex;flex-direction:column;justify-content:center}.dnb-pagination__dots{align-self:flex-end}.dnb-pagination__marker{height:1px;margin:-1px 0 0 -1px;overflow:hidden;pointer-events:none;position:relative;width:1px}.dnb-pagination__marker td,.dnb-pagination__marker__inner{height:1px;opacity:0;padding:0!important;width:1px}.dnb-pagination__bar__skip{margin-top:.5rem}.dnb-pagination__bar__skip .dnb-button:first-of-type{margin-right:1.5rem}@keyframes show-page{0%{opacity:.1;transform:translate3d(0,-8px,0)}to{opacity:1;transform:translateZ(0)}}
+.dnb-pagination{display:flex;flex-direction:column-reverse}.dnb-pagination__bar,.dnb-pagination__bar__inner,.dnb-pagination__loadbar{align-items:center;display:flex;flex-wrap:wrap}.dnb-pagination__loadbar,.dnb-pagination__page{min-height:6rem}.dnb-pagination__bar{margin-bottom:1rem;margin-top:1rem}.dnb-pagination--left .dnb-pagination__bar{justify-content:flex-start}.dnb-pagination--center .dnb-pagination__bar{justify-content:center}@media screen and (max-width:40em){.dnb-pagination--center .dnb-pagination__bar{justify-content:flex-start}}.dnb-pagination--right .dnb-pagination__bar{justify-content:flex-end}.dnb-pagination__bar__wrapper{display:flex;flex-flow:column-reverse wrap}.dnb-pagination--center .dnb-pagination__bar__wrapper{align-items:center}.dnb-pagination--right .dnb-pagination__bar__wrapper{align-items:flex-end}.dnb-pagination__bar__inner{gap:.5rem}.dnb-pagination__button{max-width:3.5rem}.dnb-pagination__button--large-number{max-width:unset}.dnb-pagination__loadbar{align-items:center;cursor:default;display:flex;justify-content:center}.dnb-pagination__indicator{cursor:default;display:flex;flex-direction:column;justify-content:center;min-height:inherit}.dnb-pagination__indicator__inner{align-items:center;animation:show-page .3s ease-out forwards;display:flex;flex-direction:column;justify-content:center}.dnb-pagination__dots{align-self:flex-end}.dnb-pagination__marker{height:1px;margin:-1px 0 0 -1px;overflow:hidden;pointer-events:none;position:relative;width:1px}.dnb-pagination__marker td,.dnb-pagination__marker__inner{height:1px;opacity:0;padding:0!important;width:1px}.dnb-pagination__bar__skip{margin-top:.5rem}.dnb-pagination__bar__skip .dnb-button:first-of-type{margin-right:1.5rem}@keyframes show-page{0%{opacity:.1;transform:translate3d(0,-8px,0)}to{opacity:1;transform:translateZ(0)}}