{"version":3,"file":"TextInput.6xQFjGYV.js","sources":["../../../../../../node_modules/@ctm/ui/src/components/Icons/Lock.svelte","../../../../../../node_modules/@ctm/ui/src/components/TextInput/options.js","../../../../../../node_modules/@ctm/ui/src/components/TextInput/TextInput.svelte"],"sourcesContent":["<svg class=\"icon\" width=\"100%\" height=\"100%\" viewBox=\"-9 -4 50 50\" focusable=\"false\" role=\"presentation\">\n  <path fill=\"currentColor\" d=\"M28,14 L26,14 L26,10 C26,4.48 21.52,0 16,0 C10.48,0 6,4.48 6,10 L6,14 L4,14 C1.8,14 0,15.8 0,18 L0,38 C0,40.2 1.8,42 4,42 L28,42 C30.2,42 32,40.2 32,38 L32,18 C32,15.8 30.2,14 28,14 Z M16,32 C13.8,32 12,30.2 12,28 C12,25.8 13.8,24 16,24 C18.2,24 20,25.8 20,28 C20,30.2 18.2,32 16,32 Z M22.2,14 L9.8,14 L9.8,10 C9.8,6.58 12.58,3.8 16,3.8 C19.42,3.8 22.2,6.58 22.2,10 L22.2,14 Z\"></path>\n</svg>\n","export default {\n  appearance: {\n    DEFAULT: 'default',\n    STANDOUT: 'standout',\n    STANDOUT_INVERTED: 'standoutInverted',\n  },\n\n  htmlType: {\n    TEXT: 'text',\n    NUMBER: 'number',\n    EMAIL: 'email',\n    PASSWORD: 'password'\n  }\n}\n","<script>\n  import { beforeUpdate, createEventDispatcher, onMount } from 'svelte';\n  import classnames from '../../helpers/classnames';\n  import Lock from '../Icons/Lock.svelte';\n  import options from './options'\n\n  const dispatch = createEventDispatcher();\n\n  export let id = undefined;\n  export let appearance = options.appearance.DEFAULT;\n  export let isDisabled = false;\n  export let hasPrependSlot = false;\n  export let showLock = false;\n  export let value = '';\n  export let name = '';\n  export let placeholder = '';\n  export let htmlAutocomplete = 'on';\n  export let htmlType = options.htmlType.TEXT;\n  export let isRequired = false;\n  export let autoFocus = false;\n  export let errors = [];\n  export let maxLength = undefined;\n  export let pattern = undefined;\n  export let isDirty = false;\n\n  let input = undefined;\n\n  export let ClassNames;\n  $: {\n    ClassNames = classnames(`appearance-${appearance}`,\n      {\n        disabled: isDisabled\n      }\n    );\n  }\n\n  export let InputClassNames;\n  $: {\n    InputClassNames = classnames({\n      hasPrependSlot,\n      hasAppend: showLock\n      // hasError: isDirty && errors.length > 0,\n      // hasSuccess: isDirty && errors.length === 0\n    });\n  }\n\n  export let Value;\n  $: {\n    Value = value === undefined ? '' : value;\n  }\n\n  function onError(event) {\n    errors = event.detail.errors || [];\n  }\n\n  function onInput(event) {\n    dispatch('input', event)\n    isDirty = true;\n    value = input.value;\n  }\n\n  function onChange(event) {\n    dispatch('change', event)\n    isDirty = true;\n    value = input.value;\n  }\n\n  let value_prev = undefined;\n\n  beforeUpdate(() => {\n    if (value && ((value.length > 0 && pattern && !pattern.test(value)) || value.length > maxLength)) {\n      value = value_prev;\n    }\n\n    value_prev = value;\n  });\n\n  onMount(() => {\n    hasPrependSlot = !!arguments[1].$$slots && !!arguments[1].$$slots.prepend;\n\n    if (autoFocus) {\n      setTimeout(() => {\n        input.focus();\n      });\n    }\n  });\n</script>\n\n<style>\n  .textInput {\n    position: relative;\n  }\n\n  input {\n    border: var(--CTM-TextInput-border, 1px solid var(--neutral_1));\n    border-radius: var(--CTM-TextInput-border-radius, 4px);\n    color: var(--CTM-TextInput-color, var(--neutral_7));\n    font-size: var(--CTM-TextInput-font-size, 14px);\n    line-height: var(--CTM-TextInput-line-height, 16px);\n    height: var(--CTM-TextInput-height, inherit);\n    display: block;\n    padding: var(--ctm-text-input-padding, 13px 16px);\n    outline: none;\n    width: 100%;\n  }\n\n  .appearance-standout input {\n    background: rgba(44, 62, 80, 0.08);\n    border-color: transparent;\n  }\n\n  .appearance-standoutInverted input {\n    background: rgba(44, 62, 80, 0.26);\n    border-color: transparent;\n    color: #fff;\n  }\n\n  input:hover {\n    border-color: var(--CTM-TextInput-input-hover-border-color, 1px solid var(--neutral_3));    \n  }\n\n  .appearance-standout input:hover,\n  .appearance-standoutInverted input:hover {\n    border-color: rgba(44, 62, 80, 0.12);\n  }\n\n  input:disabled {\n    background-color: rgba(0, 0, 0, 0.05);\n    border-color: rgba(0, 0, 0, 0.07);\n    color: #b2b8bf;\n  }\n\n  input:focus {\n    border-color: var(--CTM-TextInput-focus-border-color, var(--blue_5));\n  }\n\n  .appearance-standout input:focus,\n  .appearance-standoutInverted input:focus {\n    border-color: rgba(44, 62, 80, 0.22);\n  }\n\n  input.hasPrependSlot {\n    padding-left: 45px;\n  }\n\n  input.hasAppend {\n    padding-right: 45px;\n  }\n\n  input.hasError {\n    border-color: var(--pink_4) !important;\n  }\n\n  input.hasSuccess {\n    border-color: var(--green_4) !important;\n  }\n\n  input::-webkit-input-placeholder {\n    color: var(--neutral_3);\n  }\n\n  input:-ms-input-placeholder {\n    color: var(--neutral_3);\n  }\n\n  input::-moz-placeholder {\n    color: var(--neutral_3);\n  }\n\n  input:-moz-placeholder {\n    color: var(--neutral_3);\n  }\n\n  input:disabled::-webkit-input-placeholder {\n    color: var(--neutral_1);\n  }\n\n  input:disabled:-ms-input-placeholder {\n    color: var(--neutral_1);\n  }\n\n  input:disabled::-moz-placeholder {\n    color: var(--neutral_1);\n  }\n\n  input:disabled:-moz-placeholder {\n    color: var(--neutral_1);\n  }\n\n  .prepend {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    width: 48px;\n  }\n\n  .append {\n    color: #78848f;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: absolute;\n    top: 13px;\n    right: 13px;\n    bottom: 0;\n    width: 20px;\n    height: 20px;\n  }\n\n  .disabled .prepend,\n  .disabled .append {\n    opacity: 0.3;\n  }\n</style>\n\n<div class=\"textInput { ClassNames }\">\n  {#if hasPrependSlot}\n    <div class=\"prepend\">\n      <slot name=\"prepend\"></slot>\n    </div>\n  {/if}\n\n  <input\n    bind:this={input}\n    value=\"{ Value }\"\n    { id }\n    { name }\n    { placeholder }\n    autocomplete=\"{ htmlAutocomplete }\"\n    type=\"{ htmlType }\"\n    class=\"{ InputClassNames }\"\n    required=\"{ isRequired }\"\n    disabled=\"{ isDisabled }\"\n    on:$error=\"{onError}\"\n    on:blur=\"{event => dispatch('blur', event)}\"\n    on:input=\"{onInput}\"\n    on:change=\"{onChange}\"\n  />\n\n  {#if showLock}\n  <div class=\"append\">\n    <Lock />\n  </div>\n  {/if}\n</div>\n"],"names":["insert_hydration","target","svg","anchor","append_hydration","path","options","div","ctx","create_if_block_1","create_if_block","input_1","dispatch","createEventDispatcher","id","$$props","appearance","isDisabled","hasPrependSlot","showLock","value","name","placeholder","htmlAutocomplete","htmlType","isRequired","autoFocus","errors","maxLength","pattern","isDirty","input","ClassNames","InputClassNames","Value","onError","event","$$invalidate","onInput","onChange","value_prev","beforeUpdate","onMount","$$value","blur_handler","classnames"],"mappings":"uoCAAAA,EAEKC,EAAAC,EAAAC,CAAA,EADHC,EAA6ZF,EAAAG,CAAA,iGCD/Z,MAAeC,EAAA,CACb,WAAY,CACV,QAAS,UACT,SAAU,WACV,kBAAmB,kBACpB,EAED,SAAU,CACR,KAAM,OACN,OAAQ,SACR,MAAO,QACP,SAAU,UACX,CACH,wPCgNIN,EAEKC,EAAAM,EAAAJ,CAAA,qYAqBPH,EAEKC,EAAAM,EAAAJ,CAAA,kJA1BAK,EAAc,CAAA,GAAAC,EAAAD,CAAA,IAuBdA,EAAQ,CAAA,GAAAE,EAAA,yQAfFF,EAAK,CAAA,6EAIEA,EAAgB,CAAA,CAAA,aACxBA,EAAQ,EAAA,CAAA,kBACPA,EAAe,CAAA,CAAA,EAAA,gBAAA,aACZA,EAAU,EAAA,aACVA,EAAU,CAAA,6BAjBFA,EAAU,CAAA,EAAA,gBAAA,UAAlCR,EA6BKC,EAAAM,EAAAJ,CAAA,wBAtBHC,EAeCG,EAAAI,CAAA,0DAJaH,EAAO,EAAA,CAAA,gCAERA,EAAO,EAAA,CAAA,eACNA,EAAQ,EAAA,CAAA,mBApBjBA,EAAc,CAAA,iHAQRA,EAAK,CAAA,aAALA,EAAK,CAAA,iIAIEA,EAAgB,CAAA,CAAA,2BACxBA,EAAQ,EAAA,CAAA,qBACPA,EAAe,CAAA,CAAA,EAAA,6DACZA,EAAU,EAAA,2BACVA,EAAU,CAAA,GAOnBA,EAAQ,CAAA,mHAxBSA,EAAU,CAAA,EAAA,4LArN1B,MAAAI,EAAWC,KAEN,GAAA,CAAA,GAAAC,EAAK,MAAS,EAAAC,EACd,CAAA,WAAAC,EAAaV,EAAQ,WAAW,OAAO,EAAAS,EACvC,CAAA,WAAAE,EAAa,EAAK,EAAAF,EAClB,CAAA,eAAAG,EAAiB,EAAK,EAAAH,EACtB,CAAA,SAAAI,EAAW,EAAK,EAAAJ,EAChB,CAAA,MAAAK,EAAQ,EAAE,EAAAL,EACV,CAAA,KAAAM,EAAO,EAAE,EAAAN,EACT,CAAA,YAAAO,EAAc,EAAE,EAAAP,EAChB,CAAA,iBAAAQ,EAAmB,IAAI,EAAAR,EACvB,CAAA,SAAAS,EAAWlB,EAAQ,SAAS,IAAI,EAAAS,EAChC,CAAA,WAAAU,EAAa,EAAK,EAAAV,EAClB,CAAA,UAAAW,EAAY,EAAK,EAAAX,GACjB,OAAAY,EAAM,EAAA,EAAAZ,EACN,CAAA,UAAAa,EAAY,MAAS,EAAAb,EACrB,CAAA,QAAAc,EAAU,MAAS,EAAAd,EACnB,CAAA,QAAAe,EAAU,EAAK,EAAAf,EAEtBgB,GAEO,WAAAC,CAAU,EAAAjB,GASV,gBAAAkB,CAAe,EAAAlB,GAUf,MAAAmB,CAAK,EAAAnB,EAKP,SAAAoB,GAAQC,EAAK,CACpBC,EAAA,GAAAV,EAASS,EAAM,OAAO,QAAM,CAAA,CAAA,EAGrB,SAAAE,GAAQF,EAAK,CACpBxB,EAAS,QAASwB,CAAK,EACvBC,EAAA,GAAAP,EAAU,EAAI,OACdV,EAAQW,EAAM,KAAK,EAGZ,SAAAQ,GAASH,EAAK,CACrBxB,EAAS,SAAUwB,CAAK,EACxBC,EAAA,GAAAP,EAAU,EAAI,OACdV,EAAQW,EAAM,KAAK,EAGjB,IAAAS,EAEJC,GAAY,IAAA,CACNrB,IAAWA,EAAM,OAAS,GAAKS,GAAO,CAAKA,EAAQ,KAAKT,CAAK,GAAMA,EAAM,OAASQ,IACpFS,EAAA,GAAAjB,EAAQoB,CAAU,EAGpBA,EAAapB,IAGfsB,GAAO,IAAA,CACLL,EAAA,EAAAnB,EAAmB,CAAA,CAAA,UAAU,CAAC,EAAE,SAAa,CAAA,CAAA,UAAU,CAAC,EAAE,QAAQ,OAAO,EAErEQ,GACF,WAAU,IAAA,CACRK,EAAM,MAAK,iDAiJJA,EAAKY,YAWN,MAAAC,GAAAR,GAASxB,EAAS,OAAQwB,CAAK,uwBAjNzCC,EAAA,EAAAL,EAAaa,EAAU,cAAe7B,CAAU,GAAA,CAE5C,SAAUC,CAAA,CAAA,CAAA,iBAOdoB,EAAA,EAAAJ,EAAkBY,EAAU,CAC1B,eAAA3B,EACA,UAAWC,CAAA,CAAA,CAAA,qBAQbkB,EAAA,EAAAH,EAAQd,IAAU,OAAY,GAAKA,CAAK","x_google_ignoreList":[0,1,2]}