@six-group/ui-library 0.0.0-insider.388e2a7 → 0.0.0-insider.46b7c93

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (214) hide show
  1. package/README.md +9 -0
  2. package/dist/cjs/{form-control-d369af14.js → form-control-9769b310.js} +10 -7
  3. package/dist/cjs/form-control-9769b310.js.map +1 -0
  4. package/dist/cjs/index-900437fc.js +214 -1
  5. package/dist/cjs/index-900437fc.js.map +1 -1
  6. package/dist/cjs/loader.cjs.js +1 -1
  7. package/dist/cjs/six-checkbox.cjs.entry.js +6 -3
  8. package/dist/cjs/six-checkbox.cjs.entry.js.map +1 -1
  9. package/dist/cjs/six-datepicker.cjs.entry.js +2 -7
  10. package/dist/cjs/six-datepicker.cjs.entry.js.map +1 -1
  11. package/dist/cjs/six-dropdown_2.cjs.entry.js +1 -1
  12. package/dist/cjs/six-dropdown_2.cjs.entry.js.map +1 -1
  13. package/dist/cjs/six-error.cjs.entry.js +21 -0
  14. package/dist/cjs/six-error.cjs.entry.js.map +1 -0
  15. package/dist/cjs/six-group-label.cjs.entry.js +2 -2
  16. package/dist/cjs/six-group-label.cjs.entry.js.map +1 -1
  17. package/dist/cjs/six-input.cjs.entry.js +6 -3
  18. package/dist/cjs/six-input.cjs.entry.js.map +1 -1
  19. package/dist/cjs/six-range.cjs.entry.js +6 -3
  20. package/dist/cjs/six-range.cjs.entry.js.map +1 -1
  21. package/dist/cjs/six-select.cjs.entry.js +6 -3
  22. package/dist/cjs/six-select.cjs.entry.js.map +1 -1
  23. package/dist/cjs/six-sidebar.cjs.entry.js +1 -1
  24. package/dist/cjs/six-sidebar.cjs.entry.js.map +1 -1
  25. package/dist/cjs/six-switch.cjs.entry.js +22 -4
  26. package/dist/cjs/six-switch.cjs.entry.js.map +1 -1
  27. package/dist/cjs/six-textarea.cjs.entry.js +6 -3
  28. package/dist/cjs/six-textarea.cjs.entry.js.map +1 -1
  29. package/dist/cjs/six-timepicker.cjs.entry.js +4 -9
  30. package/dist/cjs/six-timepicker.cjs.entry.js.map +1 -1
  31. package/dist/cjs/ui-library.cjs.js +2 -2
  32. package/dist/cjs/ui-library.cjs.js.map +1 -1
  33. package/dist/collection/collection-manifest.json +2 -1
  34. package/dist/collection/components/six-checkbox/six-checkbox.css +1 -1
  35. package/dist/collection/components/six-checkbox/six-checkbox.js +25 -4
  36. package/dist/collection/components/six-checkbox/six-checkbox.js.map +1 -1
  37. package/dist/collection/components/six-checkbox/test/six-checkbox.spec.js +6 -2
  38. package/dist/collection/components/six-checkbox/test/six-checkbox.spec.js.map +1 -1
  39. package/dist/collection/components/six-datepicker/six-datepicker.js +22 -11
  40. package/dist/collection/components/six-datepicker/six-datepicker.js.map +1 -1
  41. package/dist/collection/components/six-datepicker/test/six-datepicker.spec.js +1 -1
  42. package/dist/collection/components/six-datepicker/test/six-datepicker.spec.js.map +1 -1
  43. package/dist/collection/components/six-dropdown/six-dropdown.css +2 -1
  44. package/dist/collection/components/six-error/six-error.css +5 -0
  45. package/dist/collection/components/six-error/six-error.js +25 -0
  46. package/dist/collection/components/six-error/six-error.js.map +1 -0
  47. package/dist/collection/components/six-group-label/six-group-label.css +1 -1
  48. package/dist/collection/components/six-group-label/test/six-group-label.spec.js +3 -1
  49. package/dist/collection/components/six-group-label/test/six-group-label.spec.js.map +1 -1
  50. package/dist/collection/components/six-input/six-input.css +1 -1
  51. package/dist/collection/components/six-input/six-input.js +27 -4
  52. package/dist/collection/components/six-input/six-input.js.map +1 -1
  53. package/dist/collection/components/six-input/test/six-input.spec.js +3 -1
  54. package/dist/collection/components/six-input/test/six-input.spec.js.map +1 -1
  55. package/dist/collection/components/six-range/six-range.css +1 -1
  56. package/dist/collection/components/six-range/six-range.js +24 -3
  57. package/dist/collection/components/six-range/six-range.js.map +1 -1
  58. package/dist/collection/components/six-range/test/six-range.spec.js +3 -1
  59. package/dist/collection/components/six-range/test/six-range.spec.js.map +1 -1
  60. package/dist/collection/components/six-select/six-select.css +1 -1
  61. package/dist/collection/components/six-select/six-select.js +24 -3
  62. package/dist/collection/components/six-select/six-select.js.map +1 -1
  63. package/dist/collection/components/six-select/test/six-select.spec.js +6 -2
  64. package/dist/collection/components/six-select/test/six-select.spec.js.map +1 -1
  65. package/dist/collection/components/six-sidebar/six-sidebar.css +1 -0
  66. package/dist/collection/components/six-switch/six-switch.css +1 -1
  67. package/dist/collection/components/six-switch/six-switch.js +45 -4
  68. package/dist/collection/components/six-switch/six-switch.js.map +1 -1
  69. package/dist/collection/components/six-switch/test/six-switch.spec.js +6 -2
  70. package/dist/collection/components/six-switch/test/six-switch.spec.js.map +1 -1
  71. package/dist/collection/components/six-textarea/six-textarea.css +1 -1
  72. package/dist/collection/components/six-textarea/six-textarea.js +25 -4
  73. package/dist/collection/components/six-textarea/six-textarea.js.map +1 -1
  74. package/dist/collection/components/six-textarea/test/six-textarea.spec.js +3 -1
  75. package/dist/collection/components/six-textarea/test/six-textarea.spec.js.map +1 -1
  76. package/dist/collection/components/six-timepicker/six-timepicker.js +24 -12
  77. package/dist/collection/components/six-timepicker/six-timepicker.js.map +1 -1
  78. package/dist/collection/components/six-timepicker/test/six-timepicker.spec.js +15 -15
  79. package/dist/collection/components/six-timepicker/test/six-timepicker.spec.js.map +1 -1
  80. package/dist/collection/functional-components/form-control/form-control.js +8 -6
  81. package/dist/collection/functional-components/form-control/form-control.js.map +1 -1
  82. package/dist/components/form-control.js +9 -6
  83. package/dist/components/form-control.js.map +1 -1
  84. package/dist/components/index.js +2 -0
  85. package/dist/components/index.js.map +1 -1
  86. package/dist/components/six-checkbox.js +14 -3
  87. package/dist/components/six-checkbox.js.map +1 -1
  88. package/dist/components/six-datepicker.js +10 -8
  89. package/dist/components/six-datepicker.js.map +1 -1
  90. package/dist/components/six-dropdown2.js +8 -2
  91. package/dist/components/six-dropdown2.js.map +1 -1
  92. package/dist/components/six-error.d.ts +11 -0
  93. package/dist/components/six-error.js +8 -0
  94. package/dist/components/six-error.js.map +1 -0
  95. package/dist/components/six-error2.js +32 -0
  96. package/dist/components/six-error2.js.map +1 -0
  97. package/dist/components/six-group-label.js +8 -2
  98. package/dist/components/six-group-label.js.map +1 -1
  99. package/dist/components/six-header.js +8 -2
  100. package/dist/components/six-header.js.map +1 -1
  101. package/dist/components/six-input2.js +14 -3
  102. package/dist/components/six-input2.js.map +1 -1
  103. package/dist/components/six-range.js +14 -3
  104. package/dist/components/six-range.js.map +1 -1
  105. package/dist/components/six-search-field.js +7 -1
  106. package/dist/components/six-search-field.js.map +1 -1
  107. package/dist/components/six-select.js +15 -4
  108. package/dist/components/six-select.js.map +1 -1
  109. package/dist/components/six-sidebar.js +1 -1
  110. package/dist/components/six-sidebar.js.map +1 -1
  111. package/dist/components/six-switch.js +30 -4
  112. package/dist/components/six-switch.js.map +1 -1
  113. package/dist/components/six-textarea.js +14 -3
  114. package/dist/components/six-textarea.js.map +1 -1
  115. package/dist/components/six-timepicker2.js +12 -10
  116. package/dist/components/six-timepicker2.js.map +1 -1
  117. package/dist/components.json +413 -49
  118. package/dist/esm/{form-control-32cb533f.js → form-control-b0febe88.js} +10 -7
  119. package/dist/esm/form-control-b0febe88.js.map +1 -0
  120. package/dist/esm/index-8a74f992.js +214 -1
  121. package/dist/esm/index-8a74f992.js.map +1 -1
  122. package/dist/esm/loader.js +1 -1
  123. package/dist/esm/six-checkbox.entry.js +6 -3
  124. package/dist/esm/six-checkbox.entry.js.map +1 -1
  125. package/dist/esm/six-datepicker.entry.js +2 -7
  126. package/dist/esm/six-datepicker.entry.js.map +1 -1
  127. package/dist/esm/six-dropdown_2.entry.js +1 -1
  128. package/dist/esm/six-dropdown_2.entry.js.map +1 -1
  129. package/dist/esm/six-error.entry.js +17 -0
  130. package/dist/esm/six-error.entry.js.map +1 -0
  131. package/dist/esm/six-group-label.entry.js +2 -2
  132. package/dist/esm/six-group-label.entry.js.map +1 -1
  133. package/dist/esm/six-input.entry.js +6 -3
  134. package/dist/esm/six-input.entry.js.map +1 -1
  135. package/dist/esm/six-range.entry.js +6 -3
  136. package/dist/esm/six-range.entry.js.map +1 -1
  137. package/dist/esm/six-select.entry.js +6 -3
  138. package/dist/esm/six-select.entry.js.map +1 -1
  139. package/dist/esm/six-sidebar.entry.js +1 -1
  140. package/dist/esm/six-sidebar.entry.js.map +1 -1
  141. package/dist/esm/six-switch.entry.js +22 -4
  142. package/dist/esm/six-switch.entry.js.map +1 -1
  143. package/dist/esm/six-textarea.entry.js +6 -3
  144. package/dist/esm/six-textarea.entry.js.map +1 -1
  145. package/dist/esm/six-timepicker.entry.js +4 -9
  146. package/dist/esm/six-timepicker.entry.js.map +1 -1
  147. package/dist/esm/ui-library.js +2 -2
  148. package/dist/esm/ui-library.js.map +1 -1
  149. package/dist/types/components/six-checkbox/six-checkbox.d.ts +4 -1
  150. package/dist/types/components/six-datepicker/six-datepicker.d.ts +4 -2
  151. package/dist/types/components/six-error/six-error.d.ts +9 -0
  152. package/dist/types/components/six-input/six-input.d.ts +7 -2
  153. package/dist/types/components/six-range/six-range.d.ts +4 -1
  154. package/dist/types/components/six-select/six-select.d.ts +4 -1
  155. package/dist/types/components/six-switch/six-switch.d.ts +8 -1
  156. package/dist/types/components/six-textarea/six-textarea.d.ts +4 -1
  157. package/dist/types/components/six-timepicker/six-timepicker.d.ts +5 -2
  158. package/dist/types/components.d.ts +109 -16
  159. package/dist/types/functional-components/form-control/form-control.d.ts +6 -2
  160. package/dist/ui-library/{p-ed381ad9.entry.js → p-14c1ec31.entry.js} +2 -2
  161. package/dist/ui-library/p-14c1ec31.entry.js.map +1 -0
  162. package/dist/ui-library/p-25bb1752.entry.js +2 -0
  163. package/dist/ui-library/p-25bb1752.entry.js.map +1 -0
  164. package/dist/ui-library/p-2a141e10.entry.js +2 -0
  165. package/dist/ui-library/p-2a141e10.entry.js.map +1 -0
  166. package/dist/ui-library/p-4435ff73.entry.js +2 -0
  167. package/dist/ui-library/p-4435ff73.entry.js.map +1 -0
  168. package/dist/ui-library/p-538f3c50.entry.js +2 -0
  169. package/dist/ui-library/p-538f3c50.entry.js.map +1 -0
  170. package/dist/ui-library/p-6153045b.js.map +1 -1
  171. package/dist/ui-library/p-a457fee8.entry.js +2 -0
  172. package/dist/ui-library/p-a457fee8.entry.js.map +1 -0
  173. package/dist/ui-library/p-ab91c2a9.entry.js +2 -0
  174. package/dist/ui-library/p-ab91c2a9.entry.js.map +1 -0
  175. package/dist/ui-library/p-b57afbe4.entry.js +2 -0
  176. package/dist/ui-library/p-b57afbe4.entry.js.map +1 -0
  177. package/dist/ui-library/p-b6f47c9d.entry.js +2 -0
  178. package/dist/ui-library/p-b6f47c9d.entry.js.map +1 -0
  179. package/dist/ui-library/p-db34a6cc.entry.js +2 -0
  180. package/dist/ui-library/p-db34a6cc.entry.js.map +1 -0
  181. package/dist/ui-library/p-db936ad7.entry.js +2 -0
  182. package/dist/ui-library/{p-d367f4f9.entry.js.map → p-db936ad7.entry.js.map} +1 -1
  183. package/dist/ui-library/p-e5020f0d.js +2 -0
  184. package/dist/ui-library/p-e5020f0d.js.map +1 -0
  185. package/dist/ui-library/p-e775dcb4.entry.js +2 -0
  186. package/dist/ui-library/p-e775dcb4.entry.js.map +1 -0
  187. package/dist/ui-library/ui-library.esm.js +1 -1
  188. package/dist/ui-library/ui-library.esm.js.map +1 -1
  189. package/package.json +3 -3
  190. package/dist/cjs/form-control-d369af14.js.map +0 -1
  191. package/dist/esm/form-control-32cb533f.js.map +0 -1
  192. package/dist/ui-library/p-02981b91.entry.js +0 -2
  193. package/dist/ui-library/p-02981b91.entry.js.map +0 -1
  194. package/dist/ui-library/p-314b2096.entry.js +0 -2
  195. package/dist/ui-library/p-314b2096.entry.js.map +0 -1
  196. package/dist/ui-library/p-330a4988.entry.js +0 -2
  197. package/dist/ui-library/p-330a4988.entry.js.map +0 -1
  198. package/dist/ui-library/p-3d9de119.entry.js +0 -2
  199. package/dist/ui-library/p-3d9de119.entry.js.map +0 -1
  200. package/dist/ui-library/p-4abed9df.entry.js +0 -2
  201. package/dist/ui-library/p-4abed9df.entry.js.map +0 -1
  202. package/dist/ui-library/p-5d6b7353.entry.js +0 -2
  203. package/dist/ui-library/p-5d6b7353.entry.js.map +0 -1
  204. package/dist/ui-library/p-9f0b43f9.entry.js +0 -2
  205. package/dist/ui-library/p-9f0b43f9.entry.js.map +0 -1
  206. package/dist/ui-library/p-bf87464b.entry.js +0 -2
  207. package/dist/ui-library/p-bf87464b.entry.js.map +0 -1
  208. package/dist/ui-library/p-d367f4f9.entry.js +0 -2
  209. package/dist/ui-library/p-d42c2025.js +0 -2
  210. package/dist/ui-library/p-d42c2025.js.map +0 -1
  211. package/dist/ui-library/p-ed381ad9.entry.js.map +0 -1
  212. package/dist/ui-library/p-ff90ffd1.entry.js +0 -2
  213. package/dist/ui-library/p-ff90ffd1.entry.js.map +0 -1
  214. package/readme.md +0 -156
@@ -0,0 +1 @@
1
+ {"version":3,"names":["sixInputCss","ICON_SIZES","large","medium","small","id","SixInput","this","inputId","labelId","helpTextId","errorTextId","eventListeners","EventListeners","handleChange","event","stopPropagation","nativeInput","value","sixChange","emit","handleInput","sixInput","handleBlur","hasFocus","sixBlur","handleFocus","sixFocus","handleClearClick","sixClear","focus","handleKeyDown","hasModifier","metaKey","ctrlKey","shiftKey","altKey","key","setTimeout","defaultPrevented","isComposing","submitForm","host","handlePasswordToggle","isPasswordVisible","handleSlotChange","hasHelpTextSlot","hasSlot","hasLabelSlot","hasErrorSlot","handleLabelChange","handleValueChange","getValue","connectedCallback","_a","shadowRoot","addEventListener","forward","componentWillLoad","disconnectedCallback","removeEventListener","removeAll","setFocus","options","removeFocus","blur","select","setSelectionRange","selectionStart","selectionEnd","selectionDirection","setRangeText","replacement","start","end","selectMode","toString","render","h","FormControl","label","helpText","errorText","errorTextCount","hasErrorTextSlot","size","disabled","required","displayError","invalid","part","class","input","line","pill","length","name","ref","el","input__control","input__control__prefix","type","placeholder","readonly","minLength","minlength","maxLength","maxlength","min","max","step","autoCapitalize","autocapitalize","autoComplete","autocomplete","autoCorrect","autocorrect","autoFocus","autofocus","spellcheck","pattern","inputMode","inputmode","onChange","onInput","onFocus","onBlur","onKeyDown","clearable","onClick","tabindex","togglePassword"],"sources":["src/components/six-input/six-input.scss?tag=six-input&encapsulation=shadow","src/components/six-input/six-input.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n display: block;\n}\n\n.input {\n display: inline-flex;\n align-items: stretch;\n justify-content: start;\n position: relative;\n width: 100%;\n font-family: var(--six-font-family);\n font-weight: var(--six-input-font-weight);\n letter-spacing: var(--six-input-letter-spacing);\n background-color: var(--six-input-background-color);\n border: solid var(--six-border-width) var(--six-input-border-color);\n vertical-align: middle;\n overflow: hidden;\n transition: var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n cursor: text;\n\n &--line {\n border: none;\n border-bottom: solid var(--six-border-width) var(--six-input-border-color);\n }\n\n &:hover:not(.input--disabled) {\n background-color: var(--six-input-background-color-hover);\n border-color: var(--six-input-border-color-hover);\n\n .input__control {\n color: var(--six-input-color-hover);\n }\n }\n\n &.input--focused:not(.input--disabled) {\n background-color: var(--six-input-background-color-focus);\n\n border-bottom-color: var(--six-input-border-color-focus);\n box-shadow: 0 1px 0 0 var(--six-input-border-color-focus);\n\n &:not(.input--line) {\n border-color: var(--six-input-border-color-focus);\n box-shadow: var(--six-input-focus-shadow);\n }\n\n .input__control {\n color: var(--six-input-color-focus);\n }\n }\n\n &.input--disabled {\n background-color: var(--six-input-background-color-disabled);\n border-color: var(--six-input-border-color-disabled);\n cursor: not-allowed;\n\n .input__control {\n color: var(--six-input-color-disabled);\n\n &::placeholder {\n color: var(--six-input-placeholder-color-disabled);\n }\n }\n }\n\n &.input--invalid:not(.input--disabled):not(.input--focused) {\n border-bottom-color: var(--six-input-border-color-danger);\n\n &:not(.input--line) {\n border-color: var(--six-input-border-color-danger);\n }\n }\n}\n\n.input__control {\n flex: 1 1 auto;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n min-width: 0;\n color: var(--six-input-color);\n border: none;\n background: none;\n box-shadow: none;\n padding: 0;\n margin: 0;\n cursor: inherit;\n -webkit-appearance: none;\n\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus,\n &:-webkit-autofill:active {\n box-shadow: 0 0 0 var(--six-height-large) var(--six-input-background-color-hover) inset !important;\n -webkit-text-fill-color: var(--six-color-primary-500);\n }\n\n &::placeholder {\n color: var(--six-input-placeholder-color);\n user-select: none;\n }\n\n &:focus {\n outline: none;\n }\n\n &::-ms-reveal {\n display: none;\n }\n}\n\n.input__prefix,\n.input__suffix {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n cursor: default;\n\n ::slotted(six-icon) {\n color: var(--six-input-icon-color);\n }\n}\n\n.input {\n &.input--disabled {\n ::slotted(six-icon) {\n cursor: not-allowed;\n }\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.input--small {\n border-radius: var(--six-input-border-radius-small);\n font-size: var(--six-input-font-size-small);\n height: var(--six-height-small);\n\n .input__control {\n height: calc(var(--six-height-small) - var(--six-border-width) * 2);\n margin: 0 var(--six-input-spacing-small);\n }\n\n .input__control__prefix {\n margin: 0 var(--six-input-prefix-spacing-small);\n }\n\n .input__clear,\n .input__password-toggle {\n margin-right: var(--six-input-spacing-small);\n }\n\n .input__prefix ::slotted(*) {\n margin-left: var(--six-input-prefix-spacing-small);\n }\n\n .input__suffix ::slotted(*) {\n margin-right: var(--six-input-prefix-spacing-small);\n }\n}\n\n.input--medium {\n border-radius: var(--six-input-border-radius-medium);\n font-size: var(--six-input-font-size-medium);\n height: var(--six-height-medium);\n\n .input__control {\n height: calc(var(--six-height-medium) - var(--six-border-width) * 2);\n margin: 0 var(--six-input-spacing-medium);\n }\n\n .input__control__prefix {\n margin: 0 var(--six-input-prefix-spacing-medium);\n }\n\n .input__clear,\n .input__password-toggle {\n margin-right: var(--six-input-spacing-medium);\n }\n\n .input__prefix ::slotted(*) {\n margin-left: var(--six-input-prefix-spacing-medium);\n }\n\n .input__suffix ::slotted(*) {\n margin-right: var(--six-input-prefix-spacing-medium);\n }\n}\n\n.input--large {\n border-radius: var(--six-input-border-radius-large);\n font-size: var(--six-input-font-size-large);\n height: var(--six-height-large);\n\n .input__control {\n height: calc(var(--six-height-large) - var(--six-border-width) * 2);\n margin: 0 var(--six-input-spacing-large);\n }\n\n .input__control__prefix {\n margin: 0 var(--six-input-prefix-spacing-large);\n }\n\n .input__clear,\n .input__password-toggle {\n margin-right: var(--six-input-spacing-large);\n }\n\n .input__prefix ::slotted(*) {\n margin-left: var(--six-input-prefix-spacing-large);\n }\n\n .input__suffix ::slotted(*) {\n margin-right: var(--six-input-prefix-spacing-large);\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.input--pill {\n &.input--small {\n border-radius: var(--six-height-small);\n }\n\n &.input--medium {\n border-radius: var(--six-height-medium);\n }\n\n &.input--large {\n border-radius: var(--six-height-large);\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Clearable + Password Toggle\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.input__clear,\n.input__password-toggle {\n display: inline-flex;\n align-items: center;\n font-size: inherit;\n color: var(--six-input-icon-color);\n border: none;\n background: none;\n padding: 0;\n transition: var(--six-transition-fast) color;\n cursor: pointer;\n\n &:hover {\n color: var(--six-input-icon-color-hover);\n }\n\n &:focus {\n outline: none;\n }\n}\n\n.input--empty .input__clear {\n visibility: hidden;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { submitForm } from '../../utils/form';\n\nconst ICON_SIZES: Record<'small' | 'medium' | 'large', 'xSmall' | 'small' | 'medium'> = {\n large: 'medium',\n medium: 'small',\n small: 'xSmall',\n};\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot label - The input's label. Alternatively, you can use the label prop.\n * @slot prefix - Used to prepend an icon or similar element to the input.\n * @slot suffix - Used to append an icon or similar element to the input.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot show-password-icon - An icon to use in lieu of the default show password icon.\n * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.\n * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n * @slot error-text - Error text that is shown when the status is set to invalid. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part form-control - The form control that wraps the label, input, error-text and help-text.\n * @part label - The input label.\n * @part input - The input control.\n * @part prefix - The input prefix container.\n * @part clear-button - The clear button.\n * @part password-toggle-button - The password toggle button.\n * @part suffix - The input suffix container.\n * @part help-text - The input help text.\n * @part error-text - The input error text.\n */\n\n@Component({\n tag: 'six-input',\n styleUrl: 'six-input.scss',\n shadow: true,\n})\nexport class SixInput {\n private inputId = `input-${++id}`;\n private labelId = `input-label-${id}`;\n private helpTextId = `input-help-text-${id}`;\n private errorTextId = `input-error-text-${id}`;\n private nativeInput?: HTMLInputElement;\n private eventListeners = new EventListeners();\n\n @Element() host!: HTMLSixInputElement;\n\n @State() hasFocus = false;\n @State() hasHelpTextSlot = false;\n @State() hasLabelSlot = false;\n @State() hasErrorSlot = false;\n @State() isPasswordVisible = false;\n\n /** The input's type. */\n @Prop({ reflect: true }) type: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' = 'text';\n\n /** The input's size. */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /** The input's name attribute. */\n @Prop({ reflect: true }) name = '';\n\n /** The input's value attribute. */\n @Prop({ mutable: true, reflect: true }) value = '';\n\n /** Set to true to draw a pill-style input with rounded edges. */\n @Prop({ reflect: true }) pill = false;\n\n /** The input's help text. Alternatively, you can use the help-text slot. */\n @Prop() helpText = '';\n\n /** The input's placeholder text. */\n @Prop() placeholder?: string;\n\n /** Set to true to disable the input. */\n @Prop({ reflect: true }) disabled = false;\n\n /** Set to true to make the input readonly. */\n @Prop({ reflect: true }) readonly = false;\n\n /** The minimum length of input that will be considered valid. */\n @Prop({ reflect: true }) minlength?: number;\n\n /** The maximum length of input that will be considered valid. */\n @Prop({ reflect: true }) maxlength?: number;\n\n /** The input's minimum value. */\n @Prop({ reflect: true }) min?: number;\n\n /** The input's maximum value. */\n @Prop({ reflect: true }) max?: number;\n\n /** The input's step attribute. */\n @Prop({ reflect: true }) step?: number;\n\n /** A pattern to validate input against. */\n @Prop({ reflect: true }) pattern?: string;\n\n /** Set to true to show an asterisk beneath the label. */\n @Prop() required = false;\n\n /** The input's autocaptialize attribute. */\n @Prop() autocapitalize = 'off';\n\n /** The input's autocorrect attribute. */\n @Prop() autocorrect: 'on' | 'off' = 'off';\n\n /** The input's autocomplete attribute. */\n @Prop() autocomplete = 'off';\n\n /** The input's autofocus attribute. */\n @Prop() autofocus = false;\n\n /** Enables spell checking on the input. */\n @Prop() spellcheck = false;\n\n /** The label text. */\n @Prop() label = '';\n\n /** The error message shown, if `invalid` is set to true. */\n @Prop() errorText: string | string[] = '';\n\n /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */\n @Prop() errorTextCount?: number;\n\n /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed. */\n @Prop({ reflect: true }) invalid = false;\n\n /** Set to true to add a clear button when the input is populated. */\n @Prop() clearable = false;\n\n /** Set to true to add a password toggle button for password inputs. */\n @Prop() togglePassword = false;\n\n /** The input's inputmode attribute. */\n @Prop() inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n\n /** Set to render as line */\n @Prop() line = false;\n\n @Watch('helpText')\n @Watch('errorText')\n @Watch('label')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n @Watch('value')\n handleValueChange() {\n this.value = this.getValue();\n if (this.nativeInput != null && this.nativeInput.value !== this.value) {\n this.nativeInput.value = this.value;\n }\n }\n\n /** Emitted when the control's value changes. Access the new value via event.target.value. */\n @Event({ eventName: 'six-input-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n /** Emitted when the clear button is activated. */\n @Event({ eventName: 'six-input-clear' }) sixClear!: EventEmitter<EmptyPayload>;\n\n /** Emitted when the control receives input. Access the new value via event.target.value. */\n @Event({ eventName: 'six-input-input' }) sixInput!: EventEmitter<EmptyPayload>;\n\n /** Emitted when the control gains focus. */\n @Event({ eventName: 'six-input-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n /** Emitted when the control loses focus. Access the new value via event.target.value. */\n @Event({ eventName: 'six-input-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.forward('six-input-input', 'input', this.host);\n this.eventListeners.forward('six-input-change', 'change', this.host);\n this.eventListeners.forward('six-input-focus', 'focus', this.host);\n this.eventListeners.forward('six-input-blur', 'blur', this.host);\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n disconnectedCallback() {\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.removeAll();\n }\n\n /** Sets focus on the input. */\n @Method()\n async setFocus(options?: FocusOptions) {\n this.nativeInput?.focus(options);\n }\n\n /** Removes focus from the input. */\n @Method()\n async removeFocus() {\n this.nativeInput?.blur();\n }\n\n /** Selects all the text in the input. */\n @Method()\n async select() {\n return this.nativeInput?.select();\n }\n\n /** Sets the start and end positions of the text selection (0-based). */\n @Method()\n async setSelectionRange(\n selectionStart: number,\n selectionEnd: number,\n selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n ) {\n return this.nativeInput?.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n }\n\n /** Replaces a range of text with a new string. */\n @Method()\n async setRangeText(\n replacement: string,\n start: number,\n end: number,\n selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve'\n ) {\n if (this.nativeInput == null) {\n return;\n }\n this.nativeInput.setRangeText(replacement, start, end, selectMode);\n if (this.getValue() !== this.nativeInput.value) {\n this.value = this.nativeInput.value;\n this.sixChange.emit();\n this.sixInput.emit();\n }\n }\n\n private handleChange = (event: Event) => {\n event.stopPropagation();\n if (this.nativeInput != null) {\n this.value = this.nativeInput.value;\n this.sixChange.emit();\n }\n };\n\n private handleInput = (event: Event) => {\n event.stopPropagation();\n if (this.nativeInput != null) {\n this.value = this.nativeInput.value;\n this.sixInput.emit();\n }\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit();\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleClearClick = (event: MouseEvent) => {\n this.value = '';\n this.sixClear.emit();\n this.sixInput.emit();\n this.sixChange.emit();\n if (this.nativeInput != null) {\n this.nativeInput.focus();\n }\n event.stopPropagation();\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n if (event.key === 'Enter' && !hasModifier) {\n setTimeout(() => {\n if (!event.defaultPrevented && !event.isComposing) {\n submitForm(this.host);\n }\n });\n }\n };\n\n private handlePasswordToggle = () => {\n this.isPasswordVisible = !this.isPasswordVisible;\n };\n\n private handleSlotChange = () => {\n this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n this.hasLabelSlot = hasSlot(this.host, 'label');\n this.hasErrorSlot = hasSlot(this.host, 'error-text');\n };\n\n private getValue(): string {\n return (this.value ?? '').toString();\n }\n\n render() {\n return (\n <FormControl\n inputId={this.inputId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={this.hasLabelSlot}\n helpTextId={this.helpTextId}\n helpText={this.helpText}\n hasHelpTextSlot={this.hasHelpTextSlot}\n errorTextId={this.errorTextId}\n errorText={this.errorText}\n errorTextCount={this.errorTextCount}\n hasErrorTextSlot={this.hasErrorSlot}\n size={this.size}\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <div\n part=\"base\"\n class={{\n input: true,\n\n // Sizes\n 'input--small': this.size === 'small',\n 'input--medium': this.size === 'medium',\n 'input--large': this.size === 'large',\n\n // States\n 'input--line': this.line,\n 'input--pill': this.pill,\n 'input--disabled': this.disabled,\n 'input--focused': this.hasFocus,\n 'input--empty': this.getValue().length === 0,\n 'input--invalid': this.invalid,\n }}\n >\n <span part=\"prefix\" class=\"input__prefix\">\n <slot name=\"prefix\" />\n </span>\n\n <input\n part=\"input\"\n ref={(el) => (this.nativeInput = el)}\n id={this.inputId}\n size={1} // needed for firefox to overrule the default of 20\n class={{\n input__control: true,\n input__control__prefix: hasSlot(this.host, 'prefix'),\n }}\n type={this.type === 'password' && this.isPasswordVisible ? 'text' : this.type}\n name={this.name}\n placeholder={this.placeholder}\n disabled={this.disabled}\n readonly={this.readonly}\n minLength={this.minlength}\n maxLength={this.maxlength}\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.getValue()}\n autoCapitalize={this.autocapitalize}\n autoComplete={this.autocomplete}\n autoCorrect={this.autocorrect}\n autoFocus={this.autofocus}\n spellcheck={this.spellcheck}\n pattern={this.pattern}\n required={this.required}\n inputMode={this.inputmode}\n aria-labelledby={this.labelId}\n aria-describedby={this.helpTextId}\n aria-invalid={this.invalid ? 'true' : 'false'}\n onChange={this.handleChange}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n onKeyDown={this.handleKeyDown}\n data-testid=\"input-control\"\n />\n\n {this.clearable && (\n <button\n part=\"clear-button\"\n class=\"input__clear\"\n type=\"button\"\n onClick={this.handleClearClick}\n tabindex=\"-1\"\n data-testid=\"input-clear-button\"\n >\n <slot name=\"clear-icon\">\n <six-icon size={ICON_SIZES[this.size]}>clear</six-icon>\n </slot>\n </button>\n )}\n\n {this.togglePassword && (\n <button\n part=\"password-toggle-button\"\n class=\"input__password-toggle\"\n type=\"button\"\n onClick={this.handlePasswordToggle}\n tabindex=\"-1\"\n >\n {this.isPasswordVisible ? (\n <slot name=\"show-password-icon\">\n <six-icon size={ICON_SIZES[this.size]}>visibility_off</six-icon>\n </slot>\n ) : (\n <slot name=\"hide-password-icon\">\n <six-icon size={ICON_SIZES[this.size]}>visibility</six-icon>\n </slot>\n )}\n </button>\n )}\n\n <span part=\"suffix\" class=\"input__suffix\">\n <slot name=\"suffix\" />\n </span>\n </div>\n </FormControl>\n );\n }\n}\n"],"mappings":"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"}