@noctuatech/uswds 0.0.26 → 0.0.28

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 (253) hide show
  1. package/package.json +5 -5
  2. package/src/lib/file-input/file-input-preview/file-input-preview.element.ts +11 -2
  3. package/src/lib/file-input/file-input.element.ts +15 -15
  4. package/assets/uswds.min.js +0 -1
  5. package/target/lib/accordion/accordion.element.d.ts +0 -19
  6. package/target/lib/accordion/accordion.element.js +0 -166
  7. package/target/lib/accordion/accordion.element.js.map +0 -1
  8. package/target/lib/accordion/accordion.stories.d.ts +0 -12
  9. package/target/lib/accordion/accordion.stories.js +0 -42
  10. package/target/lib/accordion/accordion.stories.js.map +0 -1
  11. package/target/lib/accordion/accordion.test.d.ts +0 -1
  12. package/target/lib/accordion/accordion.test.js +0 -113
  13. package/target/lib/accordion/accordion.test.js.map +0 -1
  14. package/target/lib/alert/alert-types.d.ts +0 -7
  15. package/target/lib/alert/alert-types.js +0 -25
  16. package/target/lib/alert/alert-types.js.map +0 -1
  17. package/target/lib/alert/alert.element.d.ts +0 -11
  18. package/target/lib/alert/alert.element.js +0 -122
  19. package/target/lib/alert/alert.element.js.map +0 -1
  20. package/target/lib/alert/alert.stories.d.ts +0 -11
  21. package/target/lib/alert/alert.stories.js +0 -56
  22. package/target/lib/alert/alert.stories.js.map +0 -1
  23. package/target/lib/alert/alert.test.d.ts +0 -1
  24. package/target/lib/alert/alert.test.js +0 -20
  25. package/target/lib/alert/alert.test.js.map +0 -1
  26. package/target/lib/button/button.element.d.ts +0 -20
  27. package/target/lib/button/button.element.js +0 -263
  28. package/target/lib/button/button.element.js.map +0 -1
  29. package/target/lib/button/button.stories.d.ts +0 -12
  30. package/target/lib/button/button.stories.js +0 -22
  31. package/target/lib/button/button.stories.js.map +0 -1
  32. package/target/lib/button/button.test.d.ts +0 -1
  33. package/target/lib/button/button.test.js +0 -14
  34. package/target/lib/button/button.test.js.map +0 -1
  35. package/target/lib/card/card-body/card-body.element.d.ts +0 -7
  36. package/target/lib/card/card-body/card-body.element.js +0 -35
  37. package/target/lib/card/card-body/card-body.element.js.map +0 -1
  38. package/target/lib/card/card-footer/card-footer.element.d.ts +0 -7
  39. package/target/lib/card/card-footer/card-footer.element.js +0 -33
  40. package/target/lib/card/card-footer/card-footer.element.js.map +0 -1
  41. package/target/lib/card/card-group/card-group.element.d.ts +0 -8
  42. package/target/lib/card/card-group/card-group.element.js +0 -51
  43. package/target/lib/card/card-group/card-group.element.js.map +0 -1
  44. package/target/lib/card/card-header/card-header.element.d.ts +0 -7
  45. package/target/lib/card/card-header/card-header.element.js +0 -43
  46. package/target/lib/card/card-header/card-header.element.js.map +0 -1
  47. package/target/lib/card/card-media/card-media.element.d.ts +0 -8
  48. package/target/lib/card/card-media/card-media.element.js +0 -71
  49. package/target/lib/card/card-media/card-media.element.js.map +0 -1
  50. package/target/lib/card/card.element.d.ts +0 -9
  51. package/target/lib/card/card.element.js +0 -79
  52. package/target/lib/card/card.element.js.map +0 -1
  53. package/target/lib/card/card.stories.d.ts +0 -12
  54. package/target/lib/card/card.stories.js +0 -126
  55. package/target/lib/card/card.stories.js.map +0 -1
  56. package/target/lib/card/card.test.d.ts +0 -6
  57. package/target/lib/card/card.test.js +0 -33
  58. package/target/lib/card/card.test.js.map +0 -1
  59. package/target/lib/checkbox/checkbox.element.d.ts +0 -17
  60. package/target/lib/checkbox/checkbox.element.js +0 -206
  61. package/target/lib/checkbox/checkbox.element.js.map +0 -1
  62. package/target/lib/checkbox/checkbox.stories.d.ts +0 -31
  63. package/target/lib/checkbox/checkbox.stories.js +0 -46
  64. package/target/lib/checkbox/checkbox.stories.js.map +0 -1
  65. package/target/lib/checkbox/checkbox.test.d.ts +0 -1
  66. package/target/lib/checkbox/checkbox.test.js +0 -52
  67. package/target/lib/checkbox/checkbox.test.js.map +0 -1
  68. package/target/lib/config/config.element.d.ts +0 -6
  69. package/target/lib/config/config.element.js +0 -53
  70. package/target/lib/config/config.element.js.map +0 -1
  71. package/target/lib/config/config.test.d.ts +0 -1
  72. package/target/lib/config/config.test.js +0 -11
  73. package/target/lib/config/config.test.js.map +0 -1
  74. package/target/lib/define.d.ts +0 -32
  75. package/target/lib/define.js +0 -33
  76. package/target/lib/define.js.map +0 -1
  77. package/target/lib/description/description.element.d.ts +0 -7
  78. package/target/lib/description/description.element.js +0 -34
  79. package/target/lib/description/description.element.js.map +0 -1
  80. package/target/lib/description/description.test.d.ts +0 -1
  81. package/target/lib/description/description.test.js +0 -11
  82. package/target/lib/description/description.test.js.map +0 -1
  83. package/target/lib/file-input/file-input-preview/file-input-preview.element.d.ts +0 -12
  84. package/target/lib/file-input/file-input-preview/file-input-preview.element.js +0 -144
  85. package/target/lib/file-input/file-input-preview/file-input-preview.element.js.map +0 -1
  86. package/target/lib/file-input/file-input-preview/file-input-preview.test.d.ts +0 -2
  87. package/target/lib/file-input/file-input-preview/file-input-preview.test.js +0 -67
  88. package/target/lib/file-input/file-input-preview/file-input-preview.test.js.map +0 -1
  89. package/target/lib/file-input/file-input.element.d.ts +0 -16
  90. package/target/lib/file-input/file-input.element.js +0 -182
  91. package/target/lib/file-input/file-input.element.js.map +0 -1
  92. package/target/lib/file-input/file-input.stories.d.ts +0 -12
  93. package/target/lib/file-input/file-input.stories.js +0 -34
  94. package/target/lib/file-input/file-input.stories.js.map +0 -1
  95. package/target/lib/file-input/file-input.test.d.ts +0 -1
  96. package/target/lib/file-input/file-input.test.js +0 -37
  97. package/target/lib/file-input/file-input.test.js.map +0 -1
  98. package/target/lib/icon/icon-types.d.ts +0 -2
  99. package/target/lib/icon/icon-types.js +0 -262
  100. package/target/lib/icon/icon-types.js.map +0 -1
  101. package/target/lib/icon/icon.element.d.ts +0 -13
  102. package/target/lib/icon/icon.element.js +0 -72
  103. package/target/lib/icon/icon.element.js.map +0 -1
  104. package/target/lib/icon/icon.stories.d.ts +0 -12
  105. package/target/lib/icon/icon.stories.js +0 -39
  106. package/target/lib/icon/icon.stories.js.map +0 -1
  107. package/target/lib/input/input.element.d.ts +0 -24
  108. package/target/lib/input/input.element.js +0 -235
  109. package/target/lib/input/input.element.js.map +0 -1
  110. package/target/lib/input/input.stories.d.ts +0 -12
  111. package/target/lib/input/input.stories.js +0 -25
  112. package/target/lib/input/input.stories.js.map +0 -1
  113. package/target/lib/input/input.test.d.ts +0 -1
  114. package/target/lib/input/input.test.js +0 -50
  115. package/target/lib/input/input.test.js.map +0 -1
  116. package/target/lib/input-mask/format.d.ts +0 -15
  117. package/target/lib/input-mask/format.js +0 -47
  118. package/target/lib/input-mask/format.js.map +0 -1
  119. package/target/lib/input-mask/input-mask.element.d.ts +0 -12
  120. package/target/lib/input-mask/input-mask.element.js +0 -106
  121. package/target/lib/input-mask/input-mask.element.js.map +0 -1
  122. package/target/lib/input-mask/input-mask.stories.d.ts +0 -14
  123. package/target/lib/input-mask/input-mask.stories.js +0 -30
  124. package/target/lib/input-mask/input-mask.stories.js.map +0 -1
  125. package/target/lib/input-mask/input-mask.test.d.ts +0 -2
  126. package/target/lib/input-mask/input-mask.test.js +0 -89
  127. package/target/lib/input-mask/input-mask.test.js.map +0 -1
  128. package/target/lib/input-mask/maskable.element.d.ts +0 -5
  129. package/target/lib/input-mask/maskable.element.js +0 -2
  130. package/target/lib/input-mask/maskable.element.js.map +0 -1
  131. package/target/lib/link/link.element.d.ts +0 -13
  132. package/target/lib/link/link.element.js +0 -93
  133. package/target/lib/link/link.element.js.map +0 -1
  134. package/target/lib/link/link.stories.d.ts +0 -16
  135. package/target/lib/link/link.stories.js +0 -23
  136. package/target/lib/link/link.stories.js.map +0 -1
  137. package/target/lib/modal/modal-close/modal-close.element.d.ts +0 -8
  138. package/target/lib/modal/modal-close/modal-close.element.js +0 -76
  139. package/target/lib/modal/modal-close/modal-close.element.js.map +0 -1
  140. package/target/lib/modal/modal-close/modal-close.test.d.ts +0 -1
  141. package/target/lib/modal/modal-close/modal-close.test.js +0 -11
  142. package/target/lib/modal/modal-close/modal-close.test.js.map +0 -1
  143. package/target/lib/modal/modal-heading/modal-heading.element.d.ts +0 -7
  144. package/target/lib/modal/modal-heading/modal-heading.element.js +0 -50
  145. package/target/lib/modal/modal-heading/modal-heading.element.js.map +0 -1
  146. package/target/lib/modal/modal-heading/modal-heading.test.d.ts +0 -1
  147. package/target/lib/modal/modal-heading/modal-heading.test.js +0 -11
  148. package/target/lib/modal/modal-heading/modal-heading.test.js.map +0 -1
  149. package/target/lib/modal/modal.element.d.ts +0 -13
  150. package/target/lib/modal/modal.element.js +0 -91
  151. package/target/lib/modal/modal.element.js.map +0 -1
  152. package/target/lib/modal/modal.stories.d.ts +0 -12
  153. package/target/lib/modal/modal.stories.js +0 -34
  154. package/target/lib/modal/modal.stories.js.map +0 -1
  155. package/target/lib/modal/modal.test.d.ts +0 -3
  156. package/target/lib/modal/modal.test.js +0 -21
  157. package/target/lib/modal/modal.test.js.map +0 -1
  158. package/target/lib/radio/context.d.ts +0 -7
  159. package/target/lib/radio/context.js +0 -3
  160. package/target/lib/radio/context.js.map +0 -1
  161. package/target/lib/radio/radio-option/radio-option.element.d.ts +0 -12
  162. package/target/lib/radio/radio-option/radio-option.element.js +0 -89
  163. package/target/lib/radio/radio-option/radio-option.element.js.map +0 -1
  164. package/target/lib/radio/radio-option/radio-option.test.d.ts +0 -2
  165. package/target/lib/radio/radio-option/radio-option.test.js +0 -15
  166. package/target/lib/radio/radio-option/radio-option.test.js.map +0 -1
  167. package/target/lib/radio/radio.element.d.ts +0 -17
  168. package/target/lib/radio/radio.element.js +0 -169
  169. package/target/lib/radio/radio.element.js.map +0 -1
  170. package/target/lib/radio/radio.stories.d.ts +0 -17
  171. package/target/lib/radio/radio.stories.js +0 -46
  172. package/target/lib/radio/radio.stories.js.map +0 -1
  173. package/target/lib/radio/radio.test.d.ts +0 -2
  174. package/target/lib/radio/radio.test.js +0 -143
  175. package/target/lib/radio/radio.test.js.map +0 -1
  176. package/target/lib/select/context.d.ts +0 -6
  177. package/target/lib/select/context.js +0 -3
  178. package/target/lib/select/context.js.map +0 -1
  179. package/target/lib/select/select-option/select-option.element.d.ts +0 -14
  180. package/target/lib/select/select-option/select-option.element.js +0 -74
  181. package/target/lib/select/select-option/select-option.element.js.map +0 -1
  182. package/target/lib/select/select.element.d.ts +0 -17
  183. package/target/lib/select/select.element.js +0 -141
  184. package/target/lib/select/select.element.js.map +0 -1
  185. package/target/lib/select/select.stories.d.ts +0 -12
  186. package/target/lib/select/select.stories.js +0 -26
  187. package/target/lib/select/select.stories.js.map +0 -1
  188. package/target/lib/select/select.test.d.ts +0 -2
  189. package/target/lib/select/select.test.js +0 -105
  190. package/target/lib/select/select.test.js.map +0 -1
  191. package/target/lib/services/http.service.d.ts +0 -3
  192. package/target/lib/services/http.service.js +0 -24
  193. package/target/lib/services/http.service.js.map +0 -1
  194. package/target/lib/services/icon.service.d.ts +0 -4
  195. package/target/lib/services/icon.service.js +0 -60
  196. package/target/lib/services/icon.service.js.map +0 -1
  197. package/target/lib/services/icon.service.test.d.ts +0 -1
  198. package/target/lib/services/icon.service.test.js +0 -52
  199. package/target/lib/services/icon.service.test.js.map +0 -1
  200. package/target/lib/side-nav/side-nav-item/side-nav-item.element.d.ts +0 -8
  201. package/target/lib/side-nav/side-nav-item/side-nav-item.element.js +0 -107
  202. package/target/lib/side-nav/side-nav-item/side-nav-item.element.js.map +0 -1
  203. package/target/lib/side-nav/side-nav.element.d.ts +0 -8
  204. package/target/lib/side-nav/side-nav.element.js +0 -47
  205. package/target/lib/side-nav/side-nav.element.js.map +0 -1
  206. package/target/lib/side-nav/side-nav.stories.d.ts +0 -12
  207. package/target/lib/side-nav/side-nav.stories.js +0 -55
  208. package/target/lib/side-nav/side-nav.stories.js.map +0 -1
  209. package/target/lib/side-nav/side-nav.test.d.ts +0 -3
  210. package/target/lib/side-nav/side-nav.test.js +0 -93
  211. package/target/lib/side-nav/side-nav.test.js.map +0 -1
  212. package/target/lib/step-indicator/step/step.element.d.ts +0 -10
  213. package/target/lib/step-indicator/step/step.element.js +0 -151
  214. package/target/lib/step-indicator/step/step.element.js.map +0 -1
  215. package/target/lib/step-indicator/step-indicator.element.d.ts +0 -8
  216. package/target/lib/step-indicator/step-indicator.element.js +0 -48
  217. package/target/lib/step-indicator/step-indicator.element.js.map +0 -1
  218. package/target/lib/step-indicator/step-indicator.stories.d.ts +0 -21
  219. package/target/lib/step-indicator/step-indicator.stories.js +0 -45
  220. package/target/lib/step-indicator/step-indicator.stories.js.map +0 -1
  221. package/target/lib/step-indicator/step-indicator.test.d.ts +0 -2
  222. package/target/lib/step-indicator/step-indicator.test.js +0 -18
  223. package/target/lib/step-indicator/step-indicator.test.js.map +0 -1
  224. package/target/lib/summary-box/summary-box.element.d.ts +0 -7
  225. package/target/lib/summary-box/summary-box.element.js +0 -40
  226. package/target/lib/summary-box/summary-box.element.js.map +0 -1
  227. package/target/lib/summary-box/summary-box.stories.d.ts +0 -12
  228. package/target/lib/summary-box/summary-box.stories.js +0 -17
  229. package/target/lib/summary-box/summary-box.stories.js.map +0 -1
  230. package/target/lib/summary-box/summary-box.test.d.ts +0 -1
  231. package/target/lib/summary-box/summary-box.test.js +0 -11
  232. package/target/lib/summary-box/summary-box.test.js.map +0 -1
  233. package/target/lib/tag/tag.element.d.ts +0 -10
  234. package/target/lib/tag/tag.element.js +0 -57
  235. package/target/lib/tag/tag.element.js.map +0 -1
  236. package/target/lib/tag/tag.stories.d.ts +0 -19
  237. package/target/lib/tag/tag.stories.js +0 -25
  238. package/target/lib/tag/tag.stories.js.map +0 -1
  239. package/target/lib/tag/tag.test.d.ts +0 -1
  240. package/target/lib/tag/tag.test.js +0 -11
  241. package/target/lib/tag/tag.test.js.map +0 -1
  242. package/target/lib/textarea/textarea.element.d.ts +0 -19
  243. package/target/lib/textarea/textarea.element.js +0 -171
  244. package/target/lib/textarea/textarea.element.js.map +0 -1
  245. package/target/lib/textarea/textarea.stories.d.ts +0 -12
  246. package/target/lib/textarea/textarea.stories.js +0 -17
  247. package/target/lib/textarea/textarea.stories.js.map +0 -1
  248. package/target/lib/textarea/textarea.test.d.ts +0 -1
  249. package/target/lib/textarea/textarea.test.js +0 -50
  250. package/target/lib/textarea/textarea.test.js.map +0 -1
  251. package/target/lib.d.ts +0 -32
  252. package/target/lib.js +0 -33
  253. package/target/lib.js.map +0 -1
@@ -1,12 +0,0 @@
1
- import type { StoryObj } from "@storybook/web-components";
2
- import type { USAIconElement } from "./icon.element.js";
3
- declare const meta: {
4
- title: string;
5
- tags: never[];
6
- render(args: USAIconElement): import("lit-html").TemplateResult<1>;
7
- argTypes: {};
8
- args: {};
9
- };
10
- export default meta;
11
- type Story = StoryObj<USAIconElement>;
12
- export declare const AllIcons: Story;
@@ -1,39 +0,0 @@
1
- import { html } from "lit";
2
- import { ICON_TYPES } from "./icon-types.js";
3
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
4
- const meta = {
5
- title: "usa-icon",
6
- tags: [],
7
- render(args) {
8
- return html `<usa-icon icon=${args.icon}></usa-icon>`;
9
- },
10
- argTypes: {},
11
- args: {},
12
- };
13
- export default meta;
14
- export const AllIcons = {
15
- render() {
16
- async function copyIcon(icon) {
17
- try {
18
- await navigator.clipboard.writeText(`<usa-icon icon=${icon}></usa-icon>`);
19
- alert(`copied markup for ${icon}`);
20
- }
21
- catch (err) {
22
- console.error("Failed to copy: ", err);
23
- }
24
- }
25
- return html `<div style="display: flex; flex-wrap: wrap; gap: .75rem;">
26
- ${html `${ICON_TYPES.map((icon) => html `
27
- <button
28
- @click=${() => copyIcon(icon)}
29
- style="padding: .5rem 1rem .5rem .5rem; cursor: pointer; background: #fff; border-radius: 4px; gap: .5rem; display: flex; align-items: center"
30
- >
31
- <usa-icon icon=${icon}></usa-icon>
32
-
33
- ${icon}
34
- </button>
35
- `)}`}
36
- </div>`;
37
- },
38
- };
39
- //# sourceMappingURL=icon.stories.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"icon.stories.js","sourceRoot":"","sources":["../../../src/lib/icon/icon.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAG7C,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,UAAU;IACjB,IAAI,EAAE,EAAE;IACR,MAAM,CAAC,IAAI;QACT,OAAO,IAAI,CAAA,kBAAkB,IAAI,CAAC,IAAI,cAAc,CAAC;IACvD,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACsB,CAAC;AAEjC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM;QACJ,KAAK,UAAU,QAAQ,CAAC,IAAY;YAClC,IAAI,CAAC;gBACH,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CACjC,kBAAkB,IAAI,cAAc,CACrC,CAAC;gBACF,KAAK,CAAC,qBAAqB,IAAI,EAAE,CAAC,CAAC;YACrC,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC;gBACb,OAAO,CAAC,KAAK,CAAC,kBAAkB,EAAE,GAAG,CAAC,CAAC;YACzC,CAAC;QACH,CAAC;QAED,OAAO,IAAI,CAAA;QACP,IAAI,CAAA,GAAG,UAAU,CAAC,GAAG,CACrB,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;qBAED,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;;;6BAGZ,IAAI;;cAEnB,IAAI;;SAET,CACF,EAAE;WACE,CAAC;IACV,CAAC;CACF,CAAC"}
@@ -1,24 +0,0 @@
1
- import { type Changes } from "@joist/observable";
2
- import type { MaskableElement } from "../input-mask/maskable.element.js";
3
- declare global {
4
- interface HTMLElementTagNameMap {
5
- "usa-input": USATextInputElement;
6
- }
7
- }
8
- export declare class USATextInputElement extends HTMLElement implements MaskableElement {
9
- #private;
10
- static formAssociated: boolean;
11
- accessor name: string;
12
- accessor autocomplete: AutoFill;
13
- accessor placeholder: string;
14
- accessor required: boolean;
15
- accessor detail: "pfx" | "sfx" | "";
16
- accessor value: string;
17
- accessor selectionStart: number | null;
18
- accessor selectionEnd: number | null;
19
- onReady(): void;
20
- connectedCallback(): void;
21
- onChange(changes: Changes<this>): void;
22
- onInputChange(): void;
23
- attributeChangedCallback(attr: string): void;
24
- }
@@ -1,235 +0,0 @@
1
- import { __esDecorate, __runInitializers } from "tslib";
2
- import { attr, css, element, html, listen, query, ready } from "@joist/element";
3
- import { effect, observe } from "@joist/observable";
4
- let USATextInputElement = (() => {
5
- let _classDecorators = [element({
6
- tagName: "usa-input",
7
- shadowDomOpts: {
8
- mode: "open",
9
- delegatesFocus: true,
10
- },
11
- shadowDom: [
12
- css `
13
- * {
14
- box-sizing: border-box;
15
- }
16
-
17
- :host {
18
- font-size: 1.06rem;
19
- line-height: 1.3;
20
- display: block;
21
- font-weight: 400;
22
- max-width: 30rem;
23
- margin-bottom: 1.5rem;
24
- position: relative;
25
- }
26
-
27
- input {
28
- border-width: 1px;
29
- border-color: #5c5c5c;
30
- border-style: solid;
31
- border-radius: 0;
32
- color: #1b1b1b;
33
- display: block;
34
- height: 2.5rem;
35
- line-height: 1.3;
36
- font-size: 1.06rem;
37
- margin-top: 0.5rem;
38
- padding: 0.5rem;
39
- width: 100%;
40
- }
41
-
42
- input:not(:disabled):focus {
43
- outline: 0.25rem solid #2491ff;
44
- outline-offset: 0;
45
- }
46
-
47
- slot[name="detail"]::slotted(*) {
48
- color: #757575;
49
- }
50
-
51
- slot[name="detail"]::slotted(usa-icon) {
52
- width: 1.5rem;
53
- height: 1.5rem;
54
- }
55
-
56
- slot[name="detail"] {
57
- display: block;
58
- position: absolute;
59
- bottom: 0.21rem;
60
- left: 0.5rem;
61
- }
62
-
63
- :host([detail="pfx"]) input {
64
- padding-left: 2.5rem;
65
- }
66
-
67
- :host([detail="sfx"]) input {
68
- padding-right: 2.5rem;
69
- }
70
-
71
- :host([detail="sfx"]) slot[name="detail"] {
72
- right: 0.5rem;
73
- left: auto;
74
- }
75
- `,
76
- html `
77
- <label>
78
- <slot name="detail"></slot>
79
-
80
- <slot></slot>
81
-
82
- <input tabindex="0" />
83
- </label>
84
- `,
85
- ],
86
- })];
87
- let _classDescriptor;
88
- let _classExtraInitializers = [];
89
- let _classThis;
90
- let _classSuper = HTMLElement;
91
- let _instanceExtraInitializers = [];
92
- let _name_decorators;
93
- let _name_initializers = [];
94
- let _name_extraInitializers = [];
95
- let _autocomplete_decorators;
96
- let _autocomplete_initializers = [];
97
- let _autocomplete_extraInitializers = [];
98
- let _placeholder_decorators;
99
- let _placeholder_initializers = [];
100
- let _placeholder_extraInitializers = [];
101
- let _required_decorators;
102
- let _required_initializers = [];
103
- let _required_extraInitializers = [];
104
- let _detail_decorators;
105
- let _detail_initializers = [];
106
- let _detail_extraInitializers = [];
107
- let _value_decorators;
108
- let _value_initializers = [];
109
- let _value_extraInitializers = [];
110
- let _selectionStart_decorators;
111
- let _selectionStart_initializers = [];
112
- let _selectionStart_extraInitializers = [];
113
- let _selectionEnd_decorators;
114
- let _selectionEnd_initializers = [];
115
- let _selectionEnd_extraInitializers = [];
116
- let _onReady_decorators;
117
- let _onChange_decorators;
118
- let _onInputChange_decorators;
119
- var USATextInputElement = class extends _classSuper {
120
- static { _classThis = this; }
121
- static {
122
- const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
123
- _name_decorators = [attr()];
124
- _autocomplete_decorators = [attr()];
125
- _placeholder_decorators = [attr()];
126
- _required_decorators = [attr()];
127
- _detail_decorators = [attr({
128
- observed: false,
129
- })];
130
- _value_decorators = [attr({
131
- reflect: false,
132
- }), observe()];
133
- _selectionStart_decorators = [observe()];
134
- _selectionEnd_decorators = [observe()];
135
- _onReady_decorators = [ready()];
136
- _onChange_decorators = [effect()];
137
- _onInputChange_decorators = [listen("input")];
138
- __esDecorate(this, null, _name_decorators, { kind: "accessor", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
139
- __esDecorate(this, null, _autocomplete_decorators, { kind: "accessor", name: "autocomplete", static: false, private: false, access: { has: obj => "autocomplete" in obj, get: obj => obj.autocomplete, set: (obj, value) => { obj.autocomplete = value; } }, metadata: _metadata }, _autocomplete_initializers, _autocomplete_extraInitializers);
140
- __esDecorate(this, null, _placeholder_decorators, { kind: "accessor", name: "placeholder", static: false, private: false, access: { has: obj => "placeholder" in obj, get: obj => obj.placeholder, set: (obj, value) => { obj.placeholder = value; } }, metadata: _metadata }, _placeholder_initializers, _placeholder_extraInitializers);
141
- __esDecorate(this, null, _required_decorators, { kind: "accessor", name: "required", static: false, private: false, access: { has: obj => "required" in obj, get: obj => obj.required, set: (obj, value) => { obj.required = value; } }, metadata: _metadata }, _required_initializers, _required_extraInitializers);
142
- __esDecorate(this, null, _detail_decorators, { kind: "accessor", name: "detail", static: false, private: false, access: { has: obj => "detail" in obj, get: obj => obj.detail, set: (obj, value) => { obj.detail = value; } }, metadata: _metadata }, _detail_initializers, _detail_extraInitializers);
143
- __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
144
- __esDecorate(this, null, _selectionStart_decorators, { kind: "accessor", name: "selectionStart", static: false, private: false, access: { has: obj => "selectionStart" in obj, get: obj => obj.selectionStart, set: (obj, value) => { obj.selectionStart = value; } }, metadata: _metadata }, _selectionStart_initializers, _selectionStart_extraInitializers);
145
- __esDecorate(this, null, _selectionEnd_decorators, { kind: "accessor", name: "selectionEnd", static: false, private: false, access: { has: obj => "selectionEnd" in obj, get: obj => obj.selectionEnd, set: (obj, value) => { obj.selectionEnd = value; } }, metadata: _metadata }, _selectionEnd_initializers, _selectionEnd_extraInitializers);
146
- __esDecorate(this, null, _onReady_decorators, { kind: "method", name: "onReady", static: false, private: false, access: { has: obj => "onReady" in obj, get: obj => obj.onReady }, metadata: _metadata }, null, _instanceExtraInitializers);
147
- __esDecorate(this, null, _onChange_decorators, { kind: "method", name: "onChange", static: false, private: false, access: { has: obj => "onChange" in obj, get: obj => obj.onChange }, metadata: _metadata }, null, _instanceExtraInitializers);
148
- __esDecorate(this, null, _onInputChange_decorators, { kind: "method", name: "onInputChange", static: false, private: false, access: { has: obj => "onInputChange" in obj, get: obj => obj.onInputChange }, metadata: _metadata }, null, _instanceExtraInitializers);
149
- __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
150
- USATextInputElement = _classThis = _classDescriptor.value;
151
- if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
152
- }
153
- static formAssociated = true;
154
- #name_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _name_initializers, ""));
155
- get name() { return this.#name_accessor_storage; }
156
- set name(value) { this.#name_accessor_storage = value; }
157
- #autocomplete_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _autocomplete_initializers, "on"));
158
- get autocomplete() { return this.#autocomplete_accessor_storage; }
159
- set autocomplete(value) { this.#autocomplete_accessor_storage = value; }
160
- #placeholder_accessor_storage = (__runInitializers(this, _autocomplete_extraInitializers), __runInitializers(this, _placeholder_initializers, ""));
161
- get placeholder() { return this.#placeholder_accessor_storage; }
162
- set placeholder(value) { this.#placeholder_accessor_storage = value; }
163
- #required_accessor_storage = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _required_initializers, false));
164
- get required() { return this.#required_accessor_storage; }
165
- set required(value) { this.#required_accessor_storage = value; }
166
- #detail_accessor_storage = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _detail_initializers, ""));
167
- get detail() { return this.#detail_accessor_storage; }
168
- set detail(value) { this.#detail_accessor_storage = value; }
169
- #value_accessor_storage = (__runInitializers(this, _detail_extraInitializers), __runInitializers(this, _value_initializers, ""));
170
- get value() { return this.#value_accessor_storage; }
171
- set value(value) { this.#value_accessor_storage = value; }
172
- #selectionStart_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _selectionStart_initializers, null));
173
- get selectionStart() { return this.#selectionStart_accessor_storage; }
174
- set selectionStart(value) { this.#selectionStart_accessor_storage = value; }
175
- #selectionEnd_accessor_storage = (__runInitializers(this, _selectionStart_extraInitializers), __runInitializers(this, _selectionEnd_initializers, null));
176
- get selectionEnd() { return this.#selectionEnd_accessor_storage; }
177
- set selectionEnd(value) { this.#selectionEnd_accessor_storage = value; }
178
- #internals = (__runInitializers(this, _selectionEnd_extraInitializers), this.attachInternals());
179
- #input = query("input");
180
- onReady() {
181
- const input = this.#input();
182
- input.autofocus = this.autofocus;
183
- }
184
- connectedCallback() {
185
- this.#syncFormState();
186
- }
187
- onChange(changes) {
188
- const input = this.#input();
189
- input.value = this.value;
190
- if (changes.has("selectionStart")) {
191
- input.selectionStart = this.selectionStart;
192
- }
193
- if (changes.has("selectionEnd")) {
194
- input.selectionEnd = this.selectionEnd;
195
- }
196
- this.#syncFormState();
197
- }
198
- onInputChange() {
199
- const input = this.#input();
200
- this.value = input.value;
201
- this.selectionStart = input.selectionStart;
202
- this.selectionEnd = input.selectionEnd;
203
- }
204
- attributeChangedCallback(attr) {
205
- const input = this.#input();
206
- switch (attr) {
207
- case "autocomplete":
208
- input.autocomplete = this.autocomplete;
209
- break;
210
- case "placeholder":
211
- input.placeholder = this.placeholder;
212
- break;
213
- case "name":
214
- input.name = this.name;
215
- break;
216
- }
217
- }
218
- #syncFormState() {
219
- const input = this.#input();
220
- this.#internals.setFormValue(input.value);
221
- if (this.required && !input.value) {
222
- this.#internals.setValidity({ valueMissing: true }, "Required", input);
223
- }
224
- else {
225
- this.#internals.setValidity({});
226
- }
227
- }
228
- static {
229
- __runInitializers(_classThis, _classExtraInitializers);
230
- }
231
- };
232
- return USATextInputElement = _classThis;
233
- })();
234
- export { USATextInputElement };
235
- //# sourceMappingURL=input.element.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"input.element.js","sourceRoot":"","sources":["../../../src/lib/input/input.element.ts"],"names":[],"mappings":"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"}
@@ -1,12 +0,0 @@
1
- import type { StoryObj } from "@storybook/web-components";
2
- import type { USATextInputElement } from "./input.element.js";
3
- declare const meta: {
4
- title: string;
5
- tags: string[];
6
- render(): import("lit-html").TemplateResult<1>;
7
- argTypes: {};
8
- args: {};
9
- };
10
- export default meta;
11
- type Story = StoryObj<USATextInputElement>;
12
- export declare const Primary: Story;
@@ -1,25 +0,0 @@
1
- import { html } from "lit";
2
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
3
- const meta = {
4
- title: "usa-input",
5
- tags: ["autodocs"],
6
- render() {
7
- return html `
8
- <form>
9
- <usa-input name="fname" value="Danny" autocomplete="off" detail="pfx">
10
- <usa-icon icon="credit_card" slot="detail"></usa-icon>
11
-
12
- First name
13
- </usa-input>
14
-
15
- <usa-button type="submit">Submit</usa-button>
16
- </form>
17
- `;
18
- },
19
- argTypes: {},
20
- args: {},
21
- };
22
- export default meta;
23
- // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
24
- export const Primary = {};
25
- //# sourceMappingURL=input.stories.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"input.stories.js","sourceRoot":"","sources":["../../../src/lib/input/input.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,WAAW;IAClB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;KAUV,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CAC2B,CAAC;AAEtC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,CAAC"}
@@ -1 +0,0 @@
1
- import "./input.element.js";
@@ -1,50 +0,0 @@
1
- import "./input.element.js";
2
- import { fireEvent } from "@noctuatech-uswds/testing";
3
- import { assert, fixture, html } from "@open-wc/testing";
4
- describe("usa-input", () => {
5
- it("should be accessible", async () => {
6
- const form = await fixture(html `
7
- <usa-input name="fname" value="Foo">Hello World</usa-input>
8
- `);
9
- return assert.isAccessible(form);
10
- });
11
- it("should submit form with default values", async () => {
12
- const form = await fixture(html `
13
- <form>
14
- <usa-input name="fname" value="Foo">Hello World</usa-input>
15
-
16
- <button>Submit</button>
17
- </form>
18
- `);
19
- const value = new FormData(form);
20
- assert.equal(value.get("fname"), "Foo");
21
- });
22
- it("should update form value as input value changed", async () => {
23
- const form = await fixture(html `
24
- <form>
25
- <usa-input name="fname">Hello World</usa-input>
26
-
27
- <button>Submit</button>
28
- </form>
29
- `);
30
- const input = form.querySelector("usa-input");
31
- const nativeInput = input?.shadowRoot?.querySelector("input");
32
- if (nativeInput) {
33
- nativeInput.value = "Bar";
34
- await fireEvent.input(nativeInput, { bubbles: true });
35
- }
36
- const value = new FormData(form);
37
- assert.equal(value.get("fname"), "Bar");
38
- });
39
- it("should not submit when not valid", async () => {
40
- const form = await fixture(html `
41
- <form>
42
- <usa-input name="fname" required>Hello World</usa-input>
43
-
44
- <button>Submit</button>
45
- </form>
46
- `);
47
- assert.equal(form.checkValidity(), false);
48
- });
49
- });
50
- //# sourceMappingURL=input.test.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"input.test.js","sourceRoot":"","sources":["../../../src/lib/input/input.test.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAE5B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEzD,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,IAAI,GAAG,MAAM,OAAO,CAAkB,IAAI,CAAA;;KAE/C,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;QACtD,MAAM,IAAI,GAAG,MAAM,OAAO,CAAkB,IAAI,CAAA;;;;;;KAM/C,CAAC,CAAC;QAEH,MAAM,KAAK,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEjC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iDAAiD,EAAE,KAAK,IAAI,EAAE;QAC/D,MAAM,IAAI,GAAG,MAAM,OAAO,CAAkB,IAAI,CAAA;;;;;;KAM/C,CAAC,CAAC;QAEH,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;QAC9C,MAAM,WAAW,GAAG,KAAK,EAAE,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;QAE9D,IAAI,WAAW,EAAE,CAAC;YAChB,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;YAE1B,MAAM,SAAS,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACxD,CAAC;QAED,MAAM,KAAK,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEjC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,IAAI,GAAG,MAAM,OAAO,CAAkB,IAAI,CAAA;;;;;;KAM/C,CAAC,CAAC;QAEH,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,KAAK,CAAC,CAAC;IAC5C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
@@ -1,15 +0,0 @@
1
- export declare enum PatternChar {
2
- Any = "*",
3
- Number = "9",
4
- Letter = "A"
5
- }
6
- export declare const PATTERN_CHARS: PatternChar[];
7
- export declare const REG_EXPS: {
8
- Letters: RegExp;
9
- Numbers: RegExp;
10
- };
11
- export interface FormattedResult {
12
- raw: string;
13
- formatted: string;
14
- }
15
- export declare function format(value: string, pattern: string): FormattedResult;
@@ -1,47 +0,0 @@
1
- export var PatternChar;
2
- (function (PatternChar) {
3
- PatternChar["Any"] = "*";
4
- PatternChar["Number"] = "9";
5
- PatternChar["Letter"] = "A";
6
- })(PatternChar || (PatternChar = {}));
7
- export const PATTERN_CHARS = Object.values(PatternChar);
8
- export const REG_EXPS = {
9
- Letters: /^[a-z]/i,
10
- Numbers: /^[0-9]/i,
11
- };
12
- export function format(value, pattern) {
13
- const raw = value.replace(/[^a-z0-9]/gi, ""); // remove all special chars
14
- const chars = raw.split("");
15
- let count = 0;
16
- let formatted = "";
17
- for (let i = 0; i < pattern.length; i++) {
18
- const patternChar = pattern[i];
19
- const char = chars[count];
20
- if (char && patternChar) {
21
- if (patternChar === PatternChar.Any) {
22
- // Any letter or number
23
- formatted += char;
24
- count++;
25
- }
26
- else if (patternChar === PatternChar.Number) {
27
- // Numbers only
28
- if (/^[0-9]/i.test(char)) {
29
- formatted += char;
30
- }
31
- count++;
32
- }
33
- else if (patternChar === PatternChar.Letter) {
34
- // Letters only
35
- if (/^[a-z]/i.test(char)) {
36
- formatted += char;
37
- }
38
- count++;
39
- }
40
- else {
41
- formatted += patternChar;
42
- }
43
- }
44
- }
45
- return { raw, formatted };
46
- }
47
- //# sourceMappingURL=format.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"format.js","sourceRoot":"","sources":["../../../src/lib/input-mask/format.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,WAIX;AAJD,WAAY,WAAW;IACrB,wBAAS,CAAA;IACT,2BAAY,CAAA;IACZ,2BAAY,CAAA;AACd,CAAC,EAJW,WAAW,KAAX,WAAW,QAItB;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;AAExD,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;CACnB,CAAC;AAOF,MAAM,UAAU,MAAM,CAAC,KAAa,EAAE,OAAe;IACnD,MAAM,GAAG,GAAG,KAAK,CAAC,OAAO,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC,CAAC,2BAA2B;IACzE,MAAM,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAE5B,IAAI,KAAK,GAAG,CAAC,CAAC;IACd,IAAI,SAAS,GAAG,EAAE,CAAC;IAEnB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACxC,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;QAC/B,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;QAE1B,IAAI,IAAI,IAAI,WAAW,EAAE,CAAC;YACxB,IAAI,WAAW,KAAK,WAAW,CAAC,GAAG,EAAE,CAAC;gBACpC,uBAAuB;gBACvB,SAAS,IAAI,IAAI,CAAC;gBAClB,KAAK,EAAE,CAAC;YACV,CAAC;iBAAM,IAAI,WAAW,KAAK,WAAW,CAAC,MAAM,EAAE,CAAC;gBAC9C,eAAe;gBACf,IAAI,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;oBACzB,SAAS,IAAI,IAAI,CAAC;gBACpB,CAAC;gBAED,KAAK,EAAE,CAAC;YACV,CAAC;iBAAM,IAAI,WAAW,KAAK,WAAW,CAAC,MAAM,EAAE,CAAC;gBAC9C,eAAe;gBACf,IAAI,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;oBACzB,SAAS,IAAI,IAAI,CAAC;gBACpB,CAAC;gBAED,KAAK,EAAE,CAAC;YACV,CAAC;iBAAM,CAAC;gBACN,SAAS,IAAI,WAAW,CAAC;YAC3B,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC;AAC5B,CAAC"}
@@ -1,12 +0,0 @@
1
- declare global {
2
- interface HTMLElementTagNameMap {
3
- "usa-input-mask": USAInputMaskElement;
4
- }
5
- }
6
- export declare class USAInputMaskElement extends HTMLElement {
7
- #private;
8
- accessor mask: string;
9
- connectedCallback(): void;
10
- onInput(e: Event): void;
11
- onKeyDown(e: KeyboardEvent): void;
12
- }
@@ -1,106 +0,0 @@
1
- import { __esDecorate, __runInitializers } from "tslib";
2
- import { attr, css, element, html, listen } from "@joist/element";
3
- import { PATTERN_CHARS, PatternChar, REG_EXPS, format } from "./format.js";
4
- let USAInputMaskElement = (() => {
5
- let _classDecorators = [element({
6
- tagName: "usa-input-mask",
7
- shadowDom: [
8
- css `
9
- :host {
10
- display: contents;
11
- }
12
- `,
13
- html `<slot></slot>`,
14
- ],
15
- })];
16
- let _classDescriptor;
17
- let _classExtraInitializers = [];
18
- let _classThis;
19
- let _classSuper = HTMLElement;
20
- let _instanceExtraInitializers = [];
21
- let _mask_decorators;
22
- let _mask_initializers = [];
23
- let _mask_extraInitializers = [];
24
- let _onInput_decorators;
25
- let _onKeyDown_decorators;
26
- var USAInputMaskElement = class extends _classSuper {
27
- static { _classThis = this; }
28
- static {
29
- const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
30
- _mask_decorators = [attr()];
31
- _onInput_decorators = [listen("input")];
32
- _onKeyDown_decorators = [listen("keydown")];
33
- __esDecorate(this, null, _mask_decorators, { kind: "accessor", name: "mask", static: false, private: false, access: { has: obj => "mask" in obj, get: obj => obj.mask, set: (obj, value) => { obj.mask = value; } }, metadata: _metadata }, _mask_initializers, _mask_extraInitializers);
34
- __esDecorate(this, null, _onInput_decorators, { kind: "method", name: "onInput", static: false, private: false, access: { has: obj => "onInput" in obj, get: obj => obj.onInput }, metadata: _metadata }, null, _instanceExtraInitializers);
35
- __esDecorate(this, null, _onKeyDown_decorators, { kind: "method", name: "onKeyDown", static: false, private: false, access: { has: obj => "onKeyDown" in obj, get: obj => obj.onKeyDown }, metadata: _metadata }, null, _instanceExtraInitializers);
36
- __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
37
- USAInputMaskElement = _classThis = _classDescriptor.value;
38
- if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
39
- __runInitializers(_classThis, _classExtraInitializers);
40
- }
41
- #mask_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _mask_initializers, ""));
42
- get mask() { return this.#mask_accessor_storage; }
43
- set mask(value) { this.#mask_accessor_storage = value; }
44
- connectedCallback() {
45
- for (const input of this.querySelectorAll("[mask]")) {
46
- const { formatted } = format(input.value, this.#getMaskFor(input));
47
- if (formatted) {
48
- input.value = formatted;
49
- }
50
- }
51
- }
52
- onInput(e) {
53
- const input = e.target;
54
- const selectionStart = input.selectionStart || 0;
55
- const prev = input.value;
56
- const mask = this.#getMaskFor(input);
57
- const { formatted } = format(input.value, mask);
58
- input.value = formatted;
59
- const offset = input.value.length - prev.length;
60
- const maskChar = mask[selectionStart - 1];
61
- // check if the current value is not a space for characters and has an offset greater then 0
62
- if (maskChar && !PATTERN_CHARS.includes(maskChar) && offset > 0) {
63
- input.selectionStart = selectionStart + offset;
64
- input.selectionEnd = selectionStart + offset;
65
- }
66
- else {
67
- input.selectionStart = selectionStart;
68
- input.selectionEnd = selectionStart;
69
- }
70
- }
71
- onKeyDown(e) {
72
- const input = e.target;
73
- const mask = this.#getMaskFor(input);
74
- const patternChar = mask[input.selectionStart || 0];
75
- if (e.key.length === 1 && /^[a-z0-9]/i.test(e.key)) {
76
- // check that the key is a single character and that it is a letter or number
77
- if (input.value.length >= mask.length) {
78
- // prevent default once value is the same as the mask length
79
- e.preventDefault();
80
- }
81
- else if (patternChar === PatternChar.Number) {
82
- if (!REG_EXPS.Numbers.test(e.key)) {
83
- // if pattern char specifies number and is not
84
- e.preventDefault();
85
- }
86
- }
87
- else if (patternChar === PatternChar.Letter) {
88
- if (!REG_EXPS.Letters.test(e.key)) {
89
- // if pattern char specifies letter and is not
90
- e.preventDefault();
91
- }
92
- }
93
- }
94
- }
95
- #getMaskFor(input) {
96
- return this.mask || input.getAttribute("mask") || "";
97
- }
98
- constructor() {
99
- super(...arguments);
100
- __runInitializers(this, _mask_extraInitializers);
101
- }
102
- };
103
- return USAInputMaskElement = _classThis;
104
- })();
105
- export { USAInputMaskElement };
106
- //# sourceMappingURL=input-mask.element.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"input-mask.element.js","sourceRoot":"","sources":["../../../src/lib/input-mask/input-mask.element.ts"],"names":[],"mappings":"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"}
@@ -1,14 +0,0 @@
1
- import type { StoryObj } from "@storybook/web-components";
2
- import type { USAInputMaskElement } from "./input-mask.element.js";
3
- declare const meta: {
4
- title: string;
5
- tags: string[];
6
- render(args: USAInputMaskElement): import("lit-html").TemplateResult<1>;
7
- argTypes: {};
8
- args: {
9
- mask: string;
10
- };
11
- };
12
- export default meta;
13
- type Story = StoryObj<USAInputMaskElement>;
14
- export declare const Primary: Story;