@elliemae/ds-form 2.3.0-next.3 → 3.0.0-alpha.0

package/dist/esm/InputMask/mask_types/ZipCodeSearchInputMask.js

@@ -0,0 +1,185 @@
+import * as React from "react";
+import React2, { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { PropTypes } from "react-desc";
+import { DSTextBox } from "../../TextBox";
+import { setCaretPosition } from "../utils/setCaretPosition";
+const conformValue = (rawValue, cursorPos, lastkeycode) => {
+  const nextMaskedValue = rawValue.split("").filter((char) => char >= "0" && char <= "9").slice(0, 9);
+  let maskedPos = 0;
+  for (let i = 0; i < cursorPos; i += 1) {
+    if (nextMaskedValue[maskedPos] === rawValue[i])
+      maskedPos += 1;
+  }
+  const charactersToAdd = [["-", 5]];
+  charactersToAdd.forEach(([chars, pos]) => {
+    if (nextMaskedValue.length > pos) {
+      nextMaskedValue.splice(pos, 0, chars);
+      if (maskedPos >= pos)
+        maskedPos += chars.length;
+    }
+  });
+  if (lastkeycode !== 8 && maskedPos < nextMaskedValue.length) {
+    charactersToAdd.forEach(([chars, pos]) => {
+      if (maskedPos === pos)
+        maskedPos += chars.length;
+    });
+  } else if (lastkeycode === 8 && maskedPos) {
+    charactersToAdd.forEach(([chars, pos]) => {
+      if (maskedPos === pos + 1)
+        maskedPos -= chars.length;
+    });
+  }
+  return { nextMaskedValue: nextMaskedValue.join(""), maskedPos };
+};
+const ZipCodeSearchInputMask = ({
+  focus,
+  setFocus,
+  setRawMask,
+  cursorPosition,
+  setCursorPosition,
+  lastkey,
+  setLastkey,
+  setRawValue,
+  style,
+  disabled,
+  className,
+  name,
+  maxLength,
+  minLength,
+  fluidWidth,
+  placeholder,
+  onKeyDown,
+  onClick,
+  onChange,
+  onFocus,
+  onBlur,
+  onPaste,
+  onKeyUp,
+  hasError,
+  readOnly,
+  type,
+  innerRef,
+  clearable = false,
+  leftComponent,
+  rightComponent,
+  value,
+  ...rest
+}) => {
+  const inputRef = useRef();
+  const [maskedValue, setMaskedValue] = useState(value);
+  const conform = useCallback(({ rawValue, cursorPos, lastkeycode, shouldUpdateCursorPos = true }) => {
+    const { nextMaskedValue, maskedPos } = conformValue(rawValue, cursorPos, lastkeycode);
+    const event = {
+      target: {
+        value: nextMaskedValue,
+        originalValue: rawValue
+      }
+    };
+    if (onChange && nextMaskedValue !== maskedValue)
+      onChange(event);
+    setMaskedValue(nextMaskedValue);
+    setRawValue(nextMaskedValue);
+    if (shouldUpdateCursorPos)
+      setCursorPosition({ current: maskedPos });
+  }, [maskedValue, onChange]);
+  const handleOnChange = useCallback((e) => {
+    const { value: rawValue, selectionEnd } = e.target;
+    setRawMask(rawValue);
+    setRawValue(rawValue);
+    setCursorPosition({ current: selectionEnd });
+    setFocus(true);
+  }, [setRawMask, setRawValue, setCursorPosition, setFocus, lastkey.code]);
+  useLayoutEffect(() => {
+    if (focus)
+      setCaretPosition(inputRef.current, cursorPosition.current);
+  }, [focus, cursorPosition]);
+  useLayoutEffect(() => {
+    conform({
+      rawValue: value,
+      cursorPos: cursorPosition.current,
+      lastkeycode: lastkey.code,
+      shouldUpdateCursorPos: focus
+    });
+  }, [focus, value, cursorPosition.current]);
+  const handleKeyDown = useCallback((e) => {
+    e.stopPropagation();
+    setLastkey({ key: e.key, code: e.keyCode });
+    onKeyDown(e);
+  }, [onKeyDown]);
+  const handleBlur = useCallback((e) => {
+    setFocus(false);
+    onBlur(e);
+  }, [onBlur]);
+  return /* @__PURE__ */ React2.createElement(DSTextBox, {
+    ...rest,
+    className,
+    clearable,
+    disabled,
+    fluidWidth,
+    hasError,
+    innerRef: (ref) => {
+      inputRef.current = ref;
+      if (innerRef && typeof innerRef === "function")
+        innerRef(ref);
+    },
+    isActive: focus,
+    leftComponent,
+    maxLength,
+    minLength,
+    name,
+    onBlur: handleBlur,
+    onChange: handleOnChange,
+    onClick,
+    onFocus,
+    onKeyDown: handleKeyDown,
+    onKeyUp,
+    onPaste,
+    placeholder,
+    readOnly,
+    rightComponent,
+    style,
+    type,
+    value: maskedValue
+  });
+};
+ZipCodeSearchInputMask.propTypes = {
+  focus: PropTypes.bool,
+  setFocus: PropTypes.func,
+  setRawMask: PropTypes.func,
+  cursorPosition: PropTypes.shape({ current: PropTypes.number }),
+  setCursorPosition: PropTypes.func,
+  lastkey: PropTypes.shape({ code: PropTypes.number, key: PropTypes.string }),
+  setLastkey: PropTypes.func,
+  setRawValue: PropTypes.func,
+  style: PropTypes.object,
+  disabled: PropTypes.bool,
+  className: PropTypes.string,
+  name: PropTypes.string,
+  maxLength: PropTypes.number,
+  minLength: PropTypes.number,
+  fluidWidth: PropTypes.bool,
+  placeholder: PropTypes.string,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  leftComponent: PropTypes.element,
+  rightComponent: PropTypes.element,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  onPaste: PropTypes.func,
+  onKeyUp: PropTypes.func,
+  hasError: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  onClick: PropTypes.func,
+  clearable: PropTypes.bool,
+  type: PropTypes.string,
+  innerRef: PropTypes.any,
+  mask: PropTypes.any,
+  placeholderChar: PropTypes.string
+};
+var ZipCodeSearchInputMask_default = ZipCodeSearchInputMask;
+export {
+  ZipCodeSearchInputMask,
+  ZipCodeSearchInputMask_default as default
+};
+//# sourceMappingURL=ZipCodeSearchInputMask.js.map

package/dist/esm/InputMask/mask_types/ZipCodeSearchInputMask.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/InputMask/mask_types/ZipCodeSearchInputMask.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport React, { useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport { PropTypes } from 'react-desc';\nimport { DSTextBox } from '../../TextBox';\nimport { TCharsToAdd } from '../types';\nimport { setCaretPosition } from '../utils/setCaretPosition';\n\nconst conformValue = (rawValue, cursorPos, lastkeycode) => {\n  const nextMaskedValue = rawValue\n    .split('')\n    .filter((char) => char >= '0' && char <= '9')\n    .slice(0, 9);\n\n  let maskedPos = 0;\n  for (let i = 0; i < cursorPos; i += 1) {\n    if (nextMaskedValue[maskedPos] === rawValue[i]) maskedPos += 1;\n  }\n\n  // list of [string to add, position to add]\n  const charactersToAdd: TCharsToAdd = [['-', 5]];\n\n  charactersToAdd.forEach(([chars, pos]) => {\n    if (nextMaskedValue.length > pos) {\n      nextMaskedValue.splice(pos, 0, chars);\n      if (maskedPos >= pos) maskedPos += chars.length;\n    }\n  });\n\n  if (lastkeycode !== 8 && maskedPos < nextMaskedValue.length) {\n    charactersToAdd.forEach(([chars, pos]) => {\n      if (maskedPos === pos) maskedPos += chars.length;\n    });\n  } else if (lastkeycode === 8 && maskedPos) {\n    charactersToAdd.forEach(([chars, pos]) => {\n      if (maskedPos === pos + 1) maskedPos -= chars.length;\n    });\n  }\n  return { nextMaskedValue: nextMaskedValue.join(''), maskedPos };\n};\n\nconst ZipCodeSearchInputMask = ({\n  focus,\n  setFocus,\n  setRawMask,\n  cursorPosition,\n  setCursorPosition,\n  lastkey,\n  setLastkey,\n  setRawValue,\n  style,\n  disabled,\n  className,\n  name,\n  maxLength,\n  minLength,\n  fluidWidth,\n  placeholder,\n  onKeyDown,\n  onClick,\n  onChange,\n  onFocus,\n  onBlur,\n  onPaste,\n  onKeyUp,\n  hasError,\n  readOnly,\n  type,\n  innerRef,\n  clearable = false,\n  leftComponent,\n  rightComponent,\n  value,\n  ...rest\n}) => {\n  const inputRef = useRef();\n  const [maskedValue, setMaskedValue] = useState(value);\n\n  const conform = useCallback(\n    ({ rawValue, cursorPos, lastkeycode, shouldUpdateCursorPos = true }) => {\n      const { nextMaskedValue, maskedPos } = conformValue(\n        rawValue,\n        cursorPos,\n        lastkeycode,\n      );\n      const event = {\n        target: {\n          value: nextMaskedValue,\n          originalValue: rawValue,\n        },\n      };\n      if (onChange && nextMaskedValue !== maskedValue) onChange(event);\n\n      setMaskedValue(nextMaskedValue);\n      setRawValue(nextMaskedValue);\n\n      if (shouldUpdateCursorPos) setCursorPosition({ current: maskedPos });\n    },\n    [maskedValue, onChange],\n  );\n\n  const handleOnChange = useCallback(\n    (e) => {\n      const { value: rawValue, selectionEnd } = e.target;\n      setRawMask(rawValue);\n      setRawValue(rawValue);\n      setCursorPosition({ current: selectionEnd });\n      setFocus(true);\n    },\n    [setRawMask, setRawValue, setCursorPosition, setFocus, lastkey.code],\n  );\n\n  useLayoutEffect(() => {\n    if (focus) setCaretPosition(inputRef.current, cursorPosition.current);\n  }, [focus, cursorPosition]);\n\n  useLayoutEffect(() => {\n    // if the value changes, then re-conform the mask\n    conform({\n      rawValue: value,\n      cursorPos: cursorPosition.current,\n      lastkeycode: lastkey.code,\n      shouldUpdateCursorPos: focus,\n    });\n  }, [focus, value, cursorPosition.current]);\n\n  const handleKeyDown = useCallback(\n    (e) => {\n      e.stopPropagation();\n      setLastkey({ key: e.key, code: e.keyCode });\n      onKeyDown(e);\n    },\n    [onKeyDown],\n  );\n\n  const handleBlur = useCallback(\n    (e) => {\n      setFocus(false);\n      onBlur(e);\n    },\n    [onBlur],\n  );\n\n  return (\n    <DSTextBox\n      {...rest}\n      className={className}\n      clearable={clearable}\n      disabled={disabled}\n      fluidWidth={fluidWidth}\n      hasError={hasError}\n      innerRef={(ref) => {\n        inputRef.current = ref;\n        if (innerRef && typeof innerRef === 'function') innerRef(ref);\n      }}\n      isActive={focus}\n      leftComponent={leftComponent}\n      maxLength={maxLength}\n      minLength={minLength}\n      name={name}\n      onBlur={handleBlur}\n      onChange={handleOnChange}\n      onClick={onClick}\n      onFocus={onFocus}\n      onKeyDown={handleKeyDown}\n      onKeyUp={onKeyUp}\n      onPaste={onPaste}\n      placeholder={placeholder}\n      readOnly={readOnly}\n      rightComponent={rightComponent}\n      style={style}\n      type={type}\n      value={maskedValue}\n    />\n  );\n};\n\nZipCodeSearchInputMask.propTypes = {\n  focus: PropTypes.bool,\n  setFocus: PropTypes.func,\n  setRawMask: PropTypes.func,\n  cursorPosition: PropTypes.shape({ current: PropTypes.number }),\n  setCursorPosition: PropTypes.func,\n  lastkey: PropTypes.shape({ code: PropTypes.number, key: PropTypes.string }),\n  setLastkey: PropTypes.func,\n  setRawValue: PropTypes.func,\n  style: PropTypes.object,\n  disabled: PropTypes.bool,\n  className: PropTypes.string,\n  name: PropTypes.string,\n  maxLength: PropTypes.number,\n  minLength: PropTypes.number,\n  fluidWidth: PropTypes.bool,\n  placeholder: PropTypes.string,\n  value: PropTypes.string,\n  onChange: PropTypes.func,\n  onKeyDown: PropTypes.func,\n  leftComponent: PropTypes.element,\n  rightComponent: PropTypes.element,\n  onFocus: PropTypes.func,\n  onBlur: PropTypes.func,\n  onPaste: PropTypes.func,\n  onKeyUp: PropTypes.func,\n  hasError: PropTypes.bool,\n  readOnly: PropTypes.bool,\n  onClick: PropTypes.func,\n  clearable: PropTypes.bool,\n  type: PropTypes.string,\n  innerRef: PropTypes.any,\n  mask: PropTypes.any,\n  placeholderChar: PropTypes.string,\n};\n\nexport { ZipCodeSearchInputMask };\nexport default ZipCodeSearchInputMask;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/InputMask/mask_types/index.js

@@ -0,0 +1,101 @@
+import * as React from "react";
+import React2 from "react";
+import { DateInputMask } from "./DateInputMask";
+import { DateTimeInputMask } from "./DateTimeInputMask";
+import { DictionaryInputMask } from "./DictionaryInputMask";
+import { NumberInputMask } from "./NumberInputMask";
+import { PhoneInputMask } from "./PhoneInputMask";
+import { PhoneInternationalInputMask } from "./PhoneInternationalInputMask";
+import { SsnInputMask } from "./SsnInputMask";
+import { UsZipCodeInputMask } from "./UsZipCodeInputMask";
+import { ZipCodeSearchInputMask } from "./ZipCodeSearchInputMask";
+const dollarSign = "$";
+const percentSign = "%";
+const emptyString = "";
+const comma = ",";
+const period = ".";
+const OutOfTheBoxMaskTypes = {
+  "ds-mask-date": (props) => /* @__PURE__ */ React2.createElement(DateInputMask, {
+    ...props
+  }),
+  "ds-mask-date-time": (props) => /* @__PURE__ */ React2.createElement(DateTimeInputMask, {
+    ...props
+  }),
+  "ds-mask-dictionary": ({ ignoreCase = true, ...rest }) => /* @__PURE__ */ React2.createElement(DictionaryInputMask, {
+    ignoreCase,
+    ...rest
+  }),
+  "ds-mask-number": ({
+    prefix = dollarSign,
+    suffix = emptyString,
+    includeThousandsSeparator = true,
+    thousandsSeparatorSymbol = comma,
+    allowDecimal = false,
+    decimalSymbol = period,
+    decimalLimit = 2,
+    requireDecimal = false,
+    allowNegative = false,
+    allowLeadingZeroes = false,
+    integerLimit = null,
+    ...rest
+  }) => /* @__PURE__ */ React2.createElement(NumberInputMask, {
+    prefix,
+    suffix,
+    includeThousandsSeparator,
+    thousandsSeparatorSymbol,
+    allowDecimal,
+    decimalSymbol,
+    decimalLimit,
+    requireDecimal,
+    allowNegative,
+    allowLeadingZeroes,
+    integerLimit,
+    ...rest
+  }),
+  "ds-mask-percent": ({
+    prefix = emptyString,
+    suffix = percentSign,
+    includeThousandsSeparator = true,
+    thousandsSeparatorSymbol = comma,
+    allowDecimal = false,
+    decimalSymbol = period,
+    decimalLimit = 2,
+    requireDecimal = false,
+    allowNegative = false,
+    allowLeadingZeroes = false,
+    integerLimit = null,
+    ...rest
+  }) => /* @__PURE__ */ React2.createElement(NumberInputMask, {
+    prefix,
+    suffix,
+    includeThousandsSeparator,
+    thousandsSeparatorSymbol,
+    allowDecimal,
+    decimalSymbol,
+    decimalLimit,
+    requireDecimal,
+    allowNegative,
+    allowLeadingZeroes,
+    integerLimit,
+    ...rest
+  }),
+  "ds-mask-phone": (props) => /* @__PURE__ */ React2.createElement(PhoneInputMask, {
+    ...props
+  }),
+  "ds-mask-phone-international": (props) => /* @__PURE__ */ React2.createElement(PhoneInternationalInputMask, {
+    ...props
+  }),
+  "ds-mask-ssn": (props) => /* @__PURE__ */ React2.createElement(SsnInputMask, {
+    ...props
+  }),
+  "ds-mask-us-zip-code": (props) => /* @__PURE__ */ React2.createElement(UsZipCodeInputMask, {
+    ...props
+  }),
+  "ds-mask-zip-code-search": (props) => /* @__PURE__ */ React2.createElement(ZipCodeSearchInputMask, {
+    ...props
+  })
+};
+export {
+  OutOfTheBoxMaskTypes
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/InputMask/mask_types/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/InputMask/mask_types/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { DateInputMask } from './DateInputMask';\nimport { DateTimeInputMask } from './DateTimeInputMask';\nimport { DictionaryInputMask } from './DictionaryInputMask';\nimport { NumberInputMask } from './NumberInputMask';\nimport { PhoneInputMask } from './PhoneInputMask';\nimport { PhoneInternationalInputMask } from './PhoneInternationalInputMask';\nimport { SsnInputMask } from './SsnInputMask';\nimport { UsZipCodeInputMask } from './UsZipCodeInputMask';\nimport { ZipCodeSearchInputMask } from './ZipCodeSearchInputMask';\n\nconst dollarSign = '$';\nconst percentSign = '%';\nconst emptyString = '';\nconst comma = ',';\nconst period = '.';\n\nexport const OutOfTheBoxMaskTypes = {\n  'ds-mask-date': (props) => <DateInputMask {...props} />,\n  'ds-mask-date-time': (props) => <DateTimeInputMask {...props} />,\n  'ds-mask-dictionary': ({ ignoreCase = true, ...rest }) => (\n    <DictionaryInputMask ignoreCase={ignoreCase} {...rest} />\n  ),\n  'ds-mask-number': ({\n    prefix = dollarSign,\n    suffix = emptyString,\n    includeThousandsSeparator = true,\n    thousandsSeparatorSymbol = comma,\n    allowDecimal = false,\n    decimalSymbol = period,\n    decimalLimit = 2,\n    requireDecimal = false,\n    allowNegative = false,\n    allowLeadingZeroes = false,\n    integerLimit = null,\n    ...rest\n  }) => (\n    <NumberInputMask\n      prefix={prefix}\n      suffix={suffix}\n      includeThousandsSeparator={includeThousandsSeparator}\n      thousandsSeparatorSymbol={thousandsSeparatorSymbol}\n      allowDecimal={allowDecimal}\n      decimalSymbol={decimalSymbol}\n      decimalLimit={decimalLimit}\n      requireDecimal={requireDecimal}\n      allowNegative={allowNegative}\n      allowLeadingZeroes={allowLeadingZeroes}\n      integerLimit={integerLimit}\n      {...rest}\n    />\n  ),\n  'ds-mask-percent': ({\n    prefix = emptyString,\n    suffix = percentSign,\n    includeThousandsSeparator = true,\n    thousandsSeparatorSymbol = comma,\n    allowDecimal = false,\n    decimalSymbol = period,\n    decimalLimit = 2,\n    requireDecimal = false,\n    allowNegative = false,\n    allowLeadingZeroes = false,\n    integerLimit = null,\n    ...rest\n  }) => (\n    <NumberInputMask\n      prefix={prefix}\n      suffix={suffix}\n      includeThousandsSeparator={includeThousandsSeparator}\n      thousandsSeparatorSymbol={thousandsSeparatorSymbol}\n      allowDecimal={allowDecimal}\n      decimalSymbol={decimalSymbol}\n      decimalLimit={decimalLimit}\n      requireDecimal={requireDecimal}\n      allowNegative={allowNegative}\n      allowLeadingZeroes={allowLeadingZeroes}\n      integerLimit={integerLimit}\n      {...rest}\n    />\n  ),\n  'ds-mask-phone': (props) => <PhoneInputMask {...props} />,\n  'ds-mask-phone-international': (props) => (\n    <PhoneInternationalInputMask {...props} />\n  ),\n  'ds-mask-ssn': (props) => <SsnInputMask {...props} />,\n  'ds-mask-us-zip-code': (props) => <UsZipCodeInputMask {...props} />,\n  'ds-mask-zip-code-search': (props) => <ZipCodeSearchInputMask {...props} />,\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,aAAa;AACnB,MAAM,cAAc;AACpB,MAAM,cAAc;AACpB,MAAM,QAAQ;AACd,MAAM,SAAS;AAER,MAAM,uBAAuB;AAAA,EAClC,gBAAgB,CAAC,UAAU,qCAAC,eAAD;AAAA,OAAmB;AAAA;AAAA,EAC9C,qBAAqB,CAAC,UAAU,qCAAC,mBAAD;AAAA,OAAuB;AAAA;AAAA,EACvD,sBAAsB,CAAC,EAAE,aAAa,SAAS,WAC7C,qCAAC,qBAAD;AAAA,IAAqB;AAAA,OAA4B;AAAA;AAAA,EAEnD,kBAAkB,CAAC;AAAA,IACjB,SAAS;AAAA,IACT,SAAS;AAAA,IACT,4BAA4B;AAAA,IAC5B,2BAA2B;AAAA,IAC3B,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,iBAAiB;AAAA,IACjB,gBAAgB;AAAA,IAChB,qBAAqB;AAAA,IACrB,eAAe;AAAA,OACZ;AAAA,QAEH,qCAAC,iBAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,OACI;AAAA;AAAA,EAGR,mBAAmB,CAAC;AAAA,IAClB,SAAS;AAAA,IACT,SAAS;AAAA,IACT,4BAA4B;AAAA,IAC5B,2BAA2B;AAAA,IAC3B,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,iBAAiB;AAAA,IACjB,gBAAgB;AAAA,IAChB,qBAAqB;AAAA,IACrB,eAAe;AAAA,OACZ;AAAA,QAEH,qCAAC,iBAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,OACI;AAAA;AAAA,EAGR,iBAAiB,CAAC,UAAU,qCAAC,gBAAD;AAAA,OAAoB;AAAA;AAAA,EAChD,+BAA+B,CAAC,UAC9B,qCAAC,6BAAD;AAAA,OAAiC;AAAA;AAAA,EAEnC,eAAe,CAAC,UAAU,qCAAC,cAAD;AAAA,OAAkB;AAAA;AAAA,EAC5C,uBAAuB,CAAC,UAAU,qCAAC,oBAAD;AAAA,OAAwB;AAAA;AAAA,EAC1D,2BAA2B,CAAC,UAAU,qCAAC,wBAAD;AAAA,OAA4B;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/InputMask/props.js

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { PropTypes } from "react-desc";
+const inputProps = {
+  autoFocus: PropTypes.bool.description("Should component focus automatically"),
+  style: PropTypes.object.description("Set style for the input mask"),
+  disabled: PropTypes.bool.description("Whether the input mask is disabled or not"),
+  disableTooltip: PropTypes.bool.description("Whether to show a tooltip or not when text does not fit").defaultValue(true),
+  className: PropTypes.string.description("css class"),
+  name: PropTypes.string.description("html name prop for form"),
+  maxLength: PropTypes.number.description("Max length for the input mask"),
+  minLength: PropTypes.number.description("Min length for the input mask"),
+  fluidWidth: PropTypes.bool.description("Whether to make the content of the input mask fit the container or not"),
+  isShowElipsisActive: PropTypes.bool.description("Wheter to enable the ellipsis and tooltip functionality or not").defaultValue(true),
+  placeholder: PropTypes.node.description("Component that works as placeholder"),
+  onKeyDown: PropTypes.func.description("Allows a function that is triggered once a key is being pressed"),
+  onClick: PropTypes.func.description("Allows a function that is triggered once the input mask is clicked"),
+  onChange: PropTypes.func.description("Allows a function that is triggered once the input mask changes"),
+  onFocus: PropTypes.func.description("Allows a function that is triggered once the input mask is focused"),
+  onBlur: PropTypes.func.description("Allows a function that is triggered once the input mask loses focus"),
+  onPaste: PropTypes.func.description("Allows a function that is triggered once the input mask is pasted"),
+  onKeyUp: PropTypes.func.description("Allows a function that is triggered once in the input mask a keyboard key is released"),
+  value: PropTypes.string.description("Default value once the component is initialized"),
+  hasError: PropTypes.bool.description("Whether the input mask has error or not"),
+  readOnly: PropTypes.bool.description("Whether the input mask is read only or not"),
+  innerRef: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.any })
+  ]).description("Whether the input mask is read only or not"),
+  type: PropTypes.string.description("Type of input. Ex: 'text'"),
+  clearable: PropTypes.bool.description("Whether the input mask is clearable or not"),
+  leftComponent: PropTypes.node.description("Component to be added at the right side of the input"),
+  rightComponent: PropTypes.node.description("Component to be added at the right side of the input"),
+  mask: PropTypes.oneOfType([
+    PropTypes.array,
+    PropTypes.string,
+    PropTypes.func
+  ]).description("Mask that has to match with the input information entered. ['DATE', 'PHONE', 'PHONE_INTENATIONAL', 'SSN', 'US_ZIP_CODE', 'NUMBER', 'PERCENT', 'ZIP_CODE_SEARCH']"),
+  pipe: PropTypes.func.description("Expects pipe functions. i.e. autoCorrectedDatePipe"),
+  useSubfix: PropTypes.string.description("Put a sufix after the input mask"),
+  placeholderChar: PropTypes.string.description(`The placeholder character represents the fillable spot in the mask.
+ The default placeholder character is underscore, _.`).defaultValue("_")
+};
+export {
+  inputProps
+};
+//# sourceMappingURL=props.js.map

package/dist/esm/InputMask/props.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/InputMask/props.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from 'react-desc';\n\nexport const inputProps = {\n  /** Should component focus automatically */\n  autoFocus: PropTypes.bool.description('Should component focus automatically'),\n  /**\n   * Set style for the input mask\n   */\n  style: PropTypes.object.description('Set style for the input mask'),\n  /**\n   * Whether the input mask is disabled or not\n   */\n  disabled: PropTypes.bool.description(\n    'Whether the input mask is disabled or not',\n  ),\n  /** disableTooltip */\n  disableTooltip: PropTypes.bool\n    .description('Whether to show a tooltip or not when text does not fit')\n    .defaultValue(true),\n  /** css class */\n  className: PropTypes.string.description('css class'),\n  /** html name prop for form */\n  name: PropTypes.string.description('html name prop for form'),\n  /**\n   * Max length for the input mask\n   */\n  maxLength: PropTypes.number.description('Max length for the input mask'),\n  /**\n   * Min length for the input mask\n   */\n  minLength: PropTypes.number.description('Min length for the input mask'),\n  /**\n   * Whether to make the content of the input mask fit the container or not\n   */\n  fluidWidth: PropTypes.bool.description(\n    'Whether to make the content of the input mask fit the container or not',\n  ),\n  /** isShowElipsisActive */\n  isShowElipsisActive: PropTypes.bool\n    .description(\n      'Wheter to enable the ellipsis and tooltip functionality or not',\n    )\n    .defaultValue(true),\n  /**\n   * Component that works as placeholder\n   */\n  placeholder: PropTypes.node.description(\n    'Component that works as placeholder',\n  ),\n  /**\n   * Allows a function that is triggered once a key is being pressed\n   */\n  onKeyDown: PropTypes.func.description(\n    'Allows a function that is triggered once a key is being pressed',\n  ),\n  /**\n   * Allows a function that is triggered once the input mask is clicked\n   */\n  onClick: PropTypes.func.description(\n    'Allows a function that is triggered once the input mask is clicked',\n  ),\n  /**\n   * Allows a function that is triggered once the input mask changes\n   */\n  onChange: PropTypes.func.description(\n    'Allows a function that is triggered once the input mask changes',\n  ),\n  /**\n   * Allows a function that is triggered once the input mask is focused\n   */\n  onFocus: PropTypes.func.description(\n    'Allows a function that is triggered once the input mask is focused',\n  ),\n  /**\n   * Allows a function that is triggered once the input mask loses focus\n   */\n  onBlur: PropTypes.func.description(\n    'Allows a function that is triggered once the input mask loses focus',\n  ),\n  /**\n   * Allows a function that is triggered once the input mask is pasted\n   */\n  onPaste: PropTypes.func.description(\n    'Allows a function that is triggered once the input mask is pasted',\n  ),\n  /**\n   * Allows a function that is triggered once in the input mask a keyboard key is released\n   */\n  onKeyUp: PropTypes.func.description(\n    'Allows a function that is triggered once in the input mask a keyboard key is released',\n  ),\n  /**\n   * Default value once the component is initialized\n   */\n  value: PropTypes.string.description(\n    'Default value once the component is initialized',\n  ),\n  /**\n   * Whether the input mask has error or not\n   */\n  hasError: PropTypes.bool.description(\n    'Whether the input mask has error or not',\n  ),\n  /**\n   * Whether the input mask is read only or not\n   */\n  readOnly: PropTypes.bool.description(\n    'Whether the input mask is read only or not',\n  ),\n  innerRef: PropTypes.oneOfType([\n    PropTypes.func,\n    PropTypes.shape({ current: PropTypes.any }),\n  ]).description('Whether the input mask is read only or not'),\n  /**\n   * Type of input. Ex: 'text'\n   */\n  type: PropTypes.string.description(\"Type of input. Ex: 'text'\"),\n  /**\n   * Whether the input mask is clearable or not\n   */\n  clearable: PropTypes.bool.description(\n    'Whether the input mask is clearable or not',\n  ),\n  /**\n   * Component to be added at the right side of the input\n   */\n  leftComponent: PropTypes.node.description(\n    'Component to be added at the right side of the input',\n  ),\n  /**\n   * Component to be added at the right side of the input\n   */\n  rightComponent: PropTypes.node.description(\n    'Component to be added at the right side of the input',\n  ),\n  /**\n   * Mask that has to match with the input information entered\n   * ['DATE', 'PHONE', 'PHONE_INTENATIONAL', 'SSN', 'US_ZIP_CODE', 'NUMBER', 'PERCENT']\n   */\n  mask: PropTypes.oneOfType([\n    PropTypes.array,\n    PropTypes.string,\n    PropTypes.func,\n  ]).description(\n    \"Mask that has to match with the input information entered. ['DATE', 'PHONE', 'PHONE_INTENATIONAL', 'SSN', 'US_ZIP_CODE', 'NUMBER', 'PERCENT', 'ZIP_CODE_SEARCH']\",\n  ),\n  /**\n    Expects pipe functions. i.e. autoCorrectedDatePipe\n    link a docu de text-mask\n   */\n  pipe: PropTypes.func.description(\n    'Expects pipe functions. i.e. autoCorrectedDatePipe',\n  ),\n  /**\n   * Put a sufix after the input mask\n   */\n  useSubfix: PropTypes.string.description('Put a sufix after the input mask'),\n  /**\n   * The placeholder character represents the fillable spot in the mask.\n   * The default placeholder character is underscore, _\n   */\n  placeholderChar: PropTypes.string\n    .description(\n      `The placeholder character represents the fillable spot in the mask.\n The default placeholder character is underscore, _.`,\n    )\n    .defaultValue('_'),\n};\n"],
+  "mappings": "AAAA;ACAA;AAEO,MAAM,aAAa;AAAA,EAExB,WAAW,UAAU,KAAK,YAAY;AAAA,EAItC,OAAO,UAAU,OAAO,YAAY;AAAA,EAIpC,UAAU,UAAU,KAAK,YACvB;AAAA,EAGF,gBAAgB,UAAU,KACvB,YAAY,2DACZ,aAAa;AAAA,EAEhB,WAAW,UAAU,OAAO,YAAY;AAAA,EAExC,MAAM,UAAU,OAAO,YAAY;AAAA,EAInC,WAAW,UAAU,OAAO,YAAY;AAAA,EAIxC,WAAW,UAAU,OAAO,YAAY;AAAA,EAIxC,YAAY,UAAU,KAAK,YACzB;AAAA,EAGF,qBAAqB,UAAU,KAC5B,YACC,kEAED,aAAa;AAAA,EAIhB,aAAa,UAAU,KAAK,YAC1B;AAAA,EAKF,WAAW,UAAU,KAAK,YACxB;AAAA,EAKF,SAAS,UAAU,KAAK,YACtB;AAAA,EAKF,UAAU,UAAU,KAAK,YACvB;AAAA,EAKF,SAAS,UAAU,KAAK,YACtB;AAAA,EAKF,QAAQ,UAAU,KAAK,YACrB;AAAA,EAKF,SAAS,UAAU,KAAK,YACtB;AAAA,EAKF,SAAS,UAAU,KAAK,YACtB;AAAA,EAKF,OAAO,UAAU,OAAO,YACtB;AAAA,EAKF,UAAU,UAAU,KAAK,YACvB;AAAA,EAKF,UAAU,UAAU,KAAK,YACvB;AAAA,EAEF,UAAU,UAAU,UAAU;AAAA,IAC5B,UAAU;AAAA,IACV,UAAU,MAAM,EAAE,SAAS,UAAU;AAAA,KACpC,YAAY;AAAA,EAIf,MAAM,UAAU,OAAO,YAAY;AAAA,EAInC,WAAW,UAAU,KAAK,YACxB;AAAA,EAKF,eAAe,UAAU,KAAK,YAC5B;AAAA,EAKF,gBAAgB,UAAU,KAAK,YAC7B;AAAA,EAMF,MAAM,UAAU,UAAU;AAAA,IACxB,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,KACT,YACD;AAAA,EAMF,MAAM,UAAU,KAAK,YACnB;AAAA,EAKF,WAAW,UAAU,OAAO,YAAY;AAAA,EAKxC,iBAAiB,UAAU,OACxB,YACC;AAAA,uDAGD,aAAa;AAAA;",
+  "names": []
+}

package/dist/esm/InputMask/types/index.js

@@ -0,0 +1,2 @@
+import * as React from "react";
+//# sourceMappingURL=index.js.map

package/dist/esm/InputMask/types/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n"],
+  "mappings": "AAAA;",
+  "names": []
+}

package/dist/esm/InputMask/utils/setCaretPosition.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+const setCaretPosition = (ctrl, pos) => {
+  if (ctrl?.setSelectionRange) {
+    ctrl?.focus();
+    ctrl?.setSelectionRange(pos, pos);
+  } else if (ctrl?.createTextRange) {
+    const range = ctrl?.createTextRange();
+    range?.collapse(true);
+    range?.moveEnd("character", pos);
+    range?.moveStart("character", pos);
+    range?.select();
+  }
+};
+var setCaretPosition_default = setCaretPosition;
+export {
+  setCaretPosition_default as default,
+  setCaretPosition
+};
+//# sourceMappingURL=setCaretPosition.js.map

package/dist/esm/InputMask/utils/setCaretPosition.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/InputMask/utils/setCaretPosition.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "const setCaretPosition = (ctrl, pos) => {\n  // Modern browsers\n  if (ctrl?.setSelectionRange) {\n    ctrl?.focus();\n    ctrl?.setSelectionRange(pos, pos);\n\n    // IE8 and below\n  } else if (ctrl?.createTextRange) {\n    const range = ctrl?.createTextRange();\n    range?.collapse(true);\n    range?.moveEnd('character', pos);\n    range?.moveStart('character', pos);\n    range?.select();\n  }\n};\n\nexport { setCaretPosition };\nexport default setCaretPosition;\n"],
+  "mappings": "AAAA;ACAA,MAAM,mBAAmB,CAAC,MAAM,QAAQ;AAEtC,MAAI,MAAM,mBAAmB;AAC3B,UAAM;AACN,UAAM,kBAAkB,KAAK;AAAA,aAGpB,MAAM,iBAAiB;AAChC,UAAM,QAAQ,MAAM;AACpB,WAAO,SAAS;AAChB,WAAO,QAAQ,aAAa;AAC5B,WAAO,UAAU,aAAa;AAC9B,WAAO;AAAA;AAAA;AAKX,IAAO,2BAAQ;",
+  "names": []
+}

package/dist/esm/InputProtected/DSInputProtected.js

@@ -0,0 +1,79 @@
+import * as React from "react";
+import React2, { useState, useCallback, useEffect } from "react";
+import { describe } from "react-desc";
+import { LockUnlocked, LockLocked, VisibleView, InvisibleHide } from "@elliemae/ds-icons";
+import { DSButton } from "@elliemae/ds-button";
+import { DSInputGroup } from "../InputGroup";
+import { DSInputMask } from "../InputMask";
+import { inputProtectedProps } from "./props";
+import { defaultProps } from "./defaultProps";
+import { LEFT_ADDON_OPTIONS, RIGHT_ADDON_OPTIONS } from "./options";
+const ADDON_ICON_OPTIONS = {
+  LockUnlocked: /* @__PURE__ */ React2.createElement(LockUnlocked, null),
+  LockLocked: /* @__PURE__ */ React2.createElement(LockLocked, null),
+  VisibleView: /* @__PURE__ */ React2.createElement(VisibleView, null),
+  InvisibleHide: /* @__PURE__ */ React2.createElement(InvisibleHide, null)
+};
+const DSInputProtected = ({
+  leftAddon,
+  rightAddon,
+  onChange,
+  value,
+  readOnly,
+  mask,
+  type,
+  placeholderChar = void 0,
+  ...rest
+}) => {
+  const left = leftAddon && ADDON_ICON_OPTIONS[leftAddon];
+  const right = rightAddon && ADDON_ICON_OPTIONS[rightAddon];
+  const [inputLocked, setLocked] = useState(leftAddon === LEFT_ADDON_OPTIONS.LockLocked);
+  const [inputHidden, setHidden] = useState(rightAddon === RIGHT_ADDON_OPTIONS.InvisibleHide);
+  useEffect(() => {
+    setLocked(leftAddon === LEFT_ADDON_OPTIONS.LockLocked);
+    setHidden(rightAddon === RIGHT_ADDON_OPTIONS.InvisibleHide);
+  }, [leftAddon, rightAddon]);
+  const handleLeft = useCallback(() => {
+    setLocked(!inputLocked);
+  }, [leftAddon, inputLocked]);
+  const handleRight = useCallback(() => {
+    setHidden(!inputHidden);
+  }, [rightAddon, inputHidden]);
+  return /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement(DSInputGroup, {
+    leftAddon: left ? /* @__PURE__ */ React2.createElement(DSButton, {
+      "aria-label": `${inputLocked ? "Allow" : "Disallow"} Edition`,
+      buttonType: "secondary",
+      icon: ADDON_ICON_OPTIONS[inputLocked ? LEFT_ADDON_OPTIONS.LockUnlocked : LEFT_ADDON_OPTIONS.LockLocked],
+      onClick: handleLeft
+    }) : void 0,
+    readOnly: left ? inputLocked : readOnly,
+    rightAddon: right ? /* @__PURE__ */ React2.createElement(DSButton, {
+      "aria-label": `${inputHidden ? "Show" : "Hide"} Characters`,
+      buttonType: "secondary",
+      icon: ADDON_ICON_OPTIONS[inputHidden ? RIGHT_ADDON_OPTIONS.VisibleView : RIGHT_ADDON_OPTIONS.InvisibleHide],
+      onClick: handleRight,
+      containerProps: {
+        "data-testid": "inputprotected-show-hide-button"
+      }
+    }) : void 0
+  }, /* @__PURE__ */ React2.createElement(DSInputMask, {
+    ...rest,
+    mask,
+    placeholderChar,
+    onChange,
+    readOnly: left ? inputLocked : readOnly,
+    type: right && inputHidden ? "password" : type,
+    value
+  })));
+};
+DSInputProtected.propTypes = inputProtectedProps;
+DSInputProtected.defaultProps = defaultProps;
+const DSInputProtectedWithSchema = describe(DSInputProtected);
+DSInputProtectedWithSchema.propTypes = inputProtectedProps;
+var DSInputProtected_default = DSInputProtected;
+export {
+  DSInputProtected,
+  DSInputProtectedWithSchema,
+  DSInputProtected_default as default
+};
+//# sourceMappingURL=DSInputProtected.js.map

package/dist/esm/InputProtected/DSInputProtected.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/InputProtected/DSInputProtected.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-unresolved */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport React, { useState, useCallback, useEffect } from 'react';\nimport { describe } from 'react-desc';\nimport { LockUnlocked, LockLocked, VisibleView, InvisibleHide } from '@elliemae/ds-icons';\nimport { DSButton } from '@elliemae/ds-button';\nimport { DSInputGroup } from '../InputGroup';\nimport { DSInputMask } from '../InputMask';\nimport { inputProtectedProps } from './props';\nimport { defaultProps } from './defaultProps';\nimport { LEFT_ADDON_OPTIONS, RIGHT_ADDON_OPTIONS } from './options';\n\nconst ADDON_ICON_OPTIONS = {\n  LockUnlocked: <LockUnlocked />,\n  LockLocked: <LockLocked />,\n  VisibleView: <VisibleView />,\n  InvisibleHide: <InvisibleHide />,\n};\n\nconst DSInputProtected = ({\n  leftAddon,\n  rightAddon,\n  onChange,\n  value,\n  readOnly,\n  mask,\n  type,\n  placeholderChar = undefined,\n  ...rest\n}) => {\n  const left = leftAddon && ADDON_ICON_OPTIONS[leftAddon];\n  const right = rightAddon && ADDON_ICON_OPTIONS[rightAddon];\n  const [inputLocked, setLocked] = useState(leftAddon === LEFT_ADDON_OPTIONS.LockLocked);\n  const [inputHidden, setHidden] = useState(rightAddon === RIGHT_ADDON_OPTIONS.InvisibleHide);\n\n  useEffect(() => {\n    setLocked(leftAddon === LEFT_ADDON_OPTIONS.LockLocked);\n    setHidden(rightAddon === RIGHT_ADDON_OPTIONS.InvisibleHide);\n  }, [leftAddon, rightAddon]);\n\n  const handleLeft = useCallback(() => {\n    setLocked(!inputLocked);\n  }, [leftAddon, inputLocked]);\n  const handleRight = useCallback(() => {\n    setHidden(!inputHidden);\n  }, [rightAddon, inputHidden]);\n\n  return (\n    <div>\n      <DSInputGroup\n        leftAddon={\n          left ? (\n            <DSButton\n              aria-label={`${inputLocked ? 'Allow' : 'Disallow'} Edition`}\n              buttonType=\"secondary\"\n              icon={ADDON_ICON_OPTIONS[inputLocked ? LEFT_ADDON_OPTIONS.LockUnlocked : LEFT_ADDON_OPTIONS.LockLocked]}\n              onClick={handleLeft}\n            />\n          ) : undefined\n        }\n        readOnly={left ? inputLocked : readOnly}\n        rightAddon={\n          right ? (\n            <DSButton\n              aria-label={`${inputHidden ? 'Show' : 'Hide'} Characters`}\n              buttonType=\"secondary\"\n              icon={\n                ADDON_ICON_OPTIONS[inputHidden ? RIGHT_ADDON_OPTIONS.VisibleView : RIGHT_ADDON_OPTIONS.InvisibleHide]\n              }\n              onClick={handleRight}\n              containerProps={{\n                'data-testid': 'inputprotected-show-hide-button',\n              }}\n            />\n          ) : undefined\n        }\n      >\n        <DSInputMask\n          {...rest}\n          mask={mask}\n          placeholderChar={placeholderChar}\n          onChange={onChange}\n          readOnly={left ? inputLocked : readOnly}\n          type={right && inputHidden ? 'password' : type}\n          value={value}\n        />\n      </DSInputGroup>\n    </div>\n  );\n};\n\nDSInputProtected.propTypes = inputProtectedProps;\nDSInputProtected.defaultProps = defaultProps;\n\nconst DSInputProtectedWithSchema = describe(DSInputProtected);\nDSInputProtectedWithSchema.propTypes = inputProtectedProps;\n\nexport { DSInputProtectedWithSchema, DSInputProtected };\nexport default DSInputProtected;\n"],
+  "mappings": "AAAA;ACGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,qBAAqB;AAAA,EACzB,cAAc,qCAAC,cAAD;AAAA,EACd,YAAY,qCAAC,YAAD;AAAA,EACZ,aAAa,qCAAC,aAAD;AAAA,EACb,eAAe,qCAAC,eAAD;AAAA;AAGjB,MAAM,mBAAmB,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,KACf;AAAA,MACC;AACJ,QAAM,OAAO,aAAa,mBAAmB;AAC7C,QAAM,QAAQ,cAAc,mBAAmB;AAC/C,QAAM,CAAC,aAAa,aAAa,SAAS,cAAc,mBAAmB;AAC3E,QAAM,CAAC,aAAa,aAAa,SAAS,eAAe,oBAAoB;AAE7E,YAAU,MAAM;AACd,cAAU,cAAc,mBAAmB;AAC3C,cAAU,eAAe,oBAAoB;AAAA,KAC5C,CAAC,WAAW;AAEf,QAAM,aAAa,YAAY,MAAM;AACnC,cAAU,CAAC;AAAA,KACV,CAAC,WAAW;AACf,QAAM,cAAc,YAAY,MAAM;AACpC,cAAU,CAAC;AAAA,KACV,CAAC,YAAY;AAEhB,SACE,qCAAC,OAAD,MACE,qCAAC,cAAD;AAAA,IACE,WACE,OACE,qCAAC,UAAD;AAAA,MACE,cAAY,GAAG,cAAc,UAAU;AAAA,MACvC,YAAW;AAAA,MACX,MAAM,mBAAmB,cAAc,mBAAmB,eAAe,mBAAmB;AAAA,MAC5F,SAAS;AAAA,SAET;AAAA,IAEN,UAAU,OAAO,cAAc;AAAA,IAC/B,YACE,QACE,qCAAC,UAAD;AAAA,MACE,cAAY,GAAG,cAAc,SAAS;AAAA,MACtC,YAAW;AAAA,MACX,MACE,mBAAmB,cAAc,oBAAoB,cAAc,oBAAoB;AAAA,MAEzF,SAAS;AAAA,MACT,gBAAgB;AAAA,QACd,eAAe;AAAA;AAAA,SAGjB;AAAA,KAGN,qCAAC,aAAD;AAAA,OACM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,OAAO,cAAc;AAAA,IAC/B,MAAM,SAAS,cAAc,aAAa;AAAA,IAC1C;AAAA;AAAA;AAOV,iBAAiB,YAAY;AAC7B,iBAAiB,eAAe;AAEhC,MAAM,6BAA6B,SAAS;AAC5C,2BAA2B,YAAY;AAGvC,IAAO,2BAAQ;",
+  "names": []
+}

package/dist/esm/InputProtected/defaultProps.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { RIGHT_ADDON_OPTIONS } from "./options";
+const defaultProps = {
+  rightAddon: RIGHT_ADDON_OPTIONS.InvisibleHide,
+  mask: (data) => new Array(data.length).fill(/./)
+};
+export {
+  defaultProps
+};
+//# sourceMappingURL=defaultProps.js.map

package/dist/esm/InputProtected/defaultProps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/InputProtected/defaultProps.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { RIGHT_ADDON_OPTIONS } from './options';\n\nexport const defaultProps = {\n  rightAddon: RIGHT_ADDON_OPTIONS.InvisibleHide,\n  mask: (data) => new Array(data.length).fill(/./),\n};\n"],
+  "mappings": "AAAA;ACAA;AAEO,MAAM,eAAe;AAAA,EAC1B,YAAY,oBAAoB;AAAA,EAChC,MAAM,CAAC,SAAS,IAAI,MAAM,KAAK,QAAQ,KAAK;AAAA;",
+  "names": []
+}

package/dist/esm/InputProtected/index.js

@@ -0,0 +1,4 @@
+import * as React from "react";
+export * from "./DSInputProtected";
+export * from "./options";
+//# sourceMappingURL=index.js.map

package/dist/esm/InputProtected/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/InputProtected/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSInputProtected';\nexport * from './options';\n"],
+  "mappings": "AAAA;ACAA;AACA;",
+  "names": []
+}

package/dist/esm/InputProtected/options.js

@@ -0,0 +1,14 @@
+import * as React from "react";
+const LEFT_ADDON_OPTIONS = {
+  LockUnlocked: "LockUnlocked",
+  LockLocked: "LockLocked"
+};
+const RIGHT_ADDON_OPTIONS = {
+  VisibleView: "VisibleView",
+  InvisibleHide: "InvisibleHide"
+};
+export {
+  LEFT_ADDON_OPTIONS,
+  RIGHT_ADDON_OPTIONS
+};
+//# sourceMappingURL=options.js.map

package/dist/esm/InputProtected/options.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/InputProtected/options.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const LEFT_ADDON_OPTIONS = {\n  LockUnlocked: 'LockUnlocked',\n  LockLocked: 'LockLocked',\n};\n\nexport const RIGHT_ADDON_OPTIONS = {\n  VisibleView: 'VisibleView',\n  InvisibleHide: 'InvisibleHide',\n};\n"],
+  "mappings": "AAAA;ACAO,MAAM,qBAAqB;AAAA,EAChC,cAAc;AAAA,EACd,YAAY;AAAA;AAGP,MAAM,sBAAsB;AAAA,EACjC,aAAa;AAAA,EACb,eAAe;AAAA;",
+  "names": []
+}

package/dist/esm/InputProtected/props.js

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { PropTypes } from "react-desc";
+import { LEFT_ADDON_OPTIONS, RIGHT_ADDON_OPTIONS } from "./options";
+const inputProtectedProps = {
+  leftAddon: PropTypes.oneOf([
+    LEFT_ADDON_OPTIONS.LockLocked,
+    LEFT_ADDON_OPTIONS.LockUnlocked
+  ]).description("left addon component to display"),
+  rightAddon: PropTypes.oneOf([
+    RIGHT_ADDON_OPTIONS.VisibleView,
+    RIGHT_ADDON_OPTIONS.InvisibleHide
+  ]).description("right addon component to display").defaultValue(RIGHT_ADDON_OPTIONS.InvisibleHide),
+  onChange: PropTypes.func.description("Function executed when input s value changes"),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description("input s value"),
+  readOnly: PropTypes.bool.description("Whether the input is read-only or not").defaultValue(false),
+  mask: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.string),
+    PropTypes.func
+  ]).description("mask to apply"),
+  type: PropTypes.oneOf(["password", "number", "text"]).description("type of input"),
+  placeholderChar: PropTypes.string.description(`The placeholder character represents the fillable spot in the mask.
+  * The default placeholder character is underscore, _.`)
+};
+export {
+  inputProtectedProps
+};
+//# sourceMappingURL=props.js.map

package/dist/esm/InputProtected/props.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/InputProtected/props.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from 'react-desc';\nimport { LEFT_ADDON_OPTIONS, RIGHT_ADDON_OPTIONS } from './options';\n\nexport const inputProtectedProps = {\n  leftAddon: PropTypes.oneOf([\n    LEFT_ADDON_OPTIONS.LockLocked,\n    LEFT_ADDON_OPTIONS.LockUnlocked,\n  ]).description('left addon component to display'),\n  rightAddon: PropTypes.oneOf([\n    RIGHT_ADDON_OPTIONS.VisibleView,\n    RIGHT_ADDON_OPTIONS.InvisibleHide,\n  ])\n    .description('right addon component to display')\n    .defaultValue(RIGHT_ADDON_OPTIONS.InvisibleHide),\n  onChange: PropTypes.func.description(\n    'Function executed when input s value changes',\n  ),\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n    'input s value',\n  ),\n  readOnly: PropTypes.bool\n    .description('Whether the input is read-only or not')\n    .defaultValue(false),\n  mask: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.string),\n    PropTypes.func,\n  ]).description('mask to apply'),\n  type: PropTypes.oneOf(['password', 'number', 'text']).description(\n    'type of input',\n  ),\n  /**\n   * PlaceholderChar: The placeholder character represents the fillable spot in the mask.\n   * The default placeholder character is underscore, _.\n   */\n  placeholderChar: PropTypes.string.description(\n    `The placeholder character represents the fillable spot in the mask.\n  * The default placeholder character is underscore, _.`,\n  ),\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEO,MAAM,sBAAsB;AAAA,EACjC,WAAW,UAAU,MAAM;AAAA,IACzB,mBAAmB;AAAA,IACnB,mBAAmB;AAAA,KAClB,YAAY;AAAA,EACf,YAAY,UAAU,MAAM;AAAA,IAC1B,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,KAEnB,YAAY,oCACZ,aAAa,oBAAoB;AAAA,EACpC,UAAU,UAAU,KAAK,YACvB;AAAA,EAEF,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SAAS,YAC/D;AAAA,EAEF,UAAU,UAAU,KACjB,YAAY,yCACZ,aAAa;AAAA,EAChB,MAAM,UAAU,UAAU;AAAA,IACxB,UAAU,QAAQ,UAAU;AAAA,IAC5B,UAAU;AAAA,KACT,YAAY;AAAA,EACf,MAAM,UAAU,MAAM,CAAC,YAAY,UAAU,SAAS,YACpD;AAAA,EAMF,iBAAiB,UAAU,OAAO,YAChC;AAAA;AAAA;",
+  "names": []
+}