@noctuatech/uswds 1.3.0 → 1.3.1

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 (9) hide show
  1. package/package.json +51 -16
  2. package/src/lib/file-input/file-input-preview/file-input-preview.element.ts +17 -14
  3. package/src/lib/file-input/file-input.element.ts +23 -33
  4. package/target/lib/file-input/file-input-preview/file-input-preview.element.d.ts +2 -2
  5. package/target/lib/file-input/file-input-preview/file-input-preview.element.js +8 -8
  6. package/target/lib/file-input/file-input-preview/file-input-preview.element.js.map +1 -1
  7. package/target/lib/file-input/file-input.element.d.ts +2 -2
  8. package/target/lib/file-input/file-input.element.js +18 -18
  9. package/target/lib/file-input/file-input.element.js.map +1 -1
package/package.json CHANGED
@@ -1,15 +1,21 @@
1
1
  {
2
2
  "name": "@noctuatech/uswds",
3
- "version": "1.3.0",
3
+ "version": "1.3.1",
4
4
  "type": "module",
5
- "workspaces": ["packages/**"],
5
+ "workspaces": [
6
+ "packages/**"
7
+ ],
6
8
  "main": "./target/lib.js",
7
9
  "module": "./target/lib.js",
8
10
  "exports": {
9
11
  ".": "./target/lib.js",
10
12
  "./*": "./target/lib/*"
11
13
  },
12
- "files": ["src", "target", "assets"],
14
+ "files": [
15
+ "src",
16
+ "target",
17
+ "assets"
18
+ ],
13
19
  "scripts": {
14
20
  "test": "wireit",
15
21
  "build": "wireit",
@@ -22,14 +28,23 @@
22
28
  "wireit": {
23
29
  "prepare": {
24
30
  "command": "husky",
25
- "dependencies": ["copy_icons"]
31
+ "dependencies": [
32
+ "copy_icons"
33
+ ]
26
34
  },
27
35
  "test": {
28
36
  "command": "wtr",
29
- "dependencies": ["tsc", "build_testing_library"]
37
+ "dependencies": [
38
+ "tsc",
39
+ "build_testing_library"
40
+ ]
30
41
  },
31
42
  "build": {
32
- "dependencies": ["tsc", "build_storybook", "minify_html_literals"]
43
+ "dependencies": [
44
+ "tsc",
45
+ "build_storybook",
46
+ "minify_html_literals"
47
+ ]
33
48
  },
34
49
  "preview": {
35
50
  "command": "eleventy --serve --incremental",
@@ -46,24 +61,42 @@
46
61
  },
47
62
  "build_testing_library": {
48
63
  "command": "./scripts/build_testing_library.sh",
49
- "files": ["node_modules/@testing-library/**"],
50
- "output": ["testing-library/**"]
64
+ "files": [
65
+ "node_modules/@testing-library/**"
66
+ ],
67
+ "output": [
68
+ "testing-library/**"
69
+ ]
51
70
  },
52
71
  "tsc": {
53
72
  "command": "tsc --build --pretty",
54
73
  "clean": "if-file-deleted",
55
- "files": ["src/**", "tsconfig.json"],
56
- "output": ["target/**", "tsconfig.tsbuildinfo"]
74
+ "files": [
75
+ "src/**",
76
+ "tsconfig.json"
77
+ ],
78
+ "output": [
79
+ "target/**",
80
+ "tsconfig.tsbuildinfo"
81
+ ]
57
82
  },
58
83
  "copy_icons": {
59
84
  "command": "./scripts/copy_usa_icons.sh",
60
- "files": ["node_modules/@uswds/uswds/dist/img/usa-icons/**"],
61
- "output": ["assets/usa-icon/**"]
85
+ "files": [
86
+ "node_modules/@uswds/uswds/dist/img/usa-icons/**"
87
+ ],
88
+ "output": [
89
+ "assets/usa-icon/**"
90
+ ]
62
91
  },
63
92
  "minify_html_literals": {
64
93
  "command": "./scripts/minify_html_literals.js",
65
- "files": ["target/**/*.js"],
66
- "dependencies": ["tsc"]
94
+ "files": [
95
+ "target/**/*.js"
96
+ ],
97
+ "dependencies": [
98
+ "tsc"
99
+ ]
67
100
  }
68
101
  },
69
102
  "author": "",
@@ -78,7 +111,6 @@
78
111
  },
79
112
  "devDependencies": {
80
113
  "@11ty/eleventy": "^3.0.0",
81
- "@biomejs/biome": "1.9.4",
82
114
  "@open-wc/testing": "^4.0.0",
83
115
  "@storybook/addon-essentials": "^8.6.0",
84
116
  "@storybook/web-components": "^8.6.0",
@@ -97,11 +129,14 @@
97
129
  "minify-literals": "^1.0.10",
98
130
  "mocha": "^11.0.0",
99
131
  "plop": "^4.0.1",
132
+ "prettier": "^3.5.3",
100
133
  "storybook": "^8.6.0",
101
134
  "typescript": "^5.8.0",
102
135
  "wireit": "^0.14.9"
103
136
  },
104
137
  "lint-staged": {
105
- "*": ["biome check --write --no-errors-on-unmatched"]
138
+ "*": [
139
+ "prettier --write --ignore-unknown"
140
+ ]
106
141
  }
107
142
  }
package/src/lib/file-input/file-input-preview/file-input-preview.element.ts CHANGED
@@ -1,17 +1,17 @@
1
- import "@joist/templating/define.js";
1
+ import '@joist/templating/define.js';
2
2
 
3
- import { css, element, html } from "@joist/element";
4
- import { observe } from "@joist/observable";
5
- import { bind } from "@joist/templating";
3
+ import { css, element, html } from '@joist/element';
4
+ import { observe } from '@joist/observable';
5
+ import { bind } from '@joist/templating';
6
6
 
7
7
  declare global {
8
8
  interface HTMLElementTagNameMap {
9
- "usa-file-input-preview": USAFileInputPreviewElement;
9
+ 'usa-file-input-preview': USAFileInputPreviewElement;
10
10
  }
11
11
  }
12
12
 
13
13
  @element({
14
- tagName: "usa-file-input-preview",
14
+ tagName: 'usa-file-input-preview',
15
15
  shadowDom: [
16
16
  css`
17
17
  * {
@@ -26,7 +26,7 @@ declare global {
26
26
  text-align: left;
27
27
  word-wrap: anywhere;
28
28
  z-index: 3;
29
- border-radius: var(--usa-input-radius);
29
+ border-radius: 0;
30
30
  overflow: hidden;
31
31
  }
32
32
 
@@ -45,8 +45,8 @@ declare global {
45
45
  }
46
46
 
47
47
  .preview-heading {
48
+ background: #d9e8f6;
48
49
  align-items: center;
49
- background: var(--usa-input-bg-color);
50
50
  display: flex;
51
51
  pointer-events: none;
52
52
  position: relative;
@@ -55,23 +55,26 @@ declare global {
55
55
  justify-content: space-between;
56
56
  padding: 0.5rem;
57
57
  text-align: left;
58
+ font-size: 0.93rem;
59
+ line-height: 1.6;
58
60
  }
59
61
 
60
62
  .preview-item {
63
+ background: #d9e8f6;
61
64
  align-items: center;
62
- background: var(--usa-input-bg-color);
63
65
  display: flex;
64
66
  padding: 0.5rem;
65
67
  width: 100%;
66
68
  margin-top: 1px;
69
+ margin-bottom: 1px;
67
70
  }
68
71
  `,
69
72
  html`
70
- <slot class="preview-heading"></slot>
71
-
73
+ <slot class="preview-heading" part="heading"></slot>
74
+
72
75
  <j-for bind="fileEntries" key="src">
73
76
  <template>
74
- <div class="preview-item">
77
+ <div class="preview-item" part="item">
75
78
  <j-if bind="each.value.isImage">
76
79
  <template>
77
80
  <j-props>
@@ -83,7 +86,7 @@ declare global {
83
86
  <usa-icon icon="file_present"></usa-icon>
84
87
  </template>
85
88
  </j-if>
86
-
89
+
87
90
  <j-value bind="each.value.file.name"></j-value>
88
91
  </div>
89
92
  </template>
@@ -103,7 +106,7 @@ export class USAFileInputPreviewElement extends HTMLElement {
103
106
  return Array.from(i.files).map((file) => ({
104
107
  file,
105
108
  src: URL.createObjectURL(file),
106
- isImage: file.type.startsWith("image"),
109
+ isImage: file.type.startsWith('image'),
107
110
  }));
108
111
  })
109
112
  accessor fileEntries: FileEntry[] = [];
package/src/lib/file-input/file-input.element.ts CHANGED
@@ -1,17 +1,17 @@
1
- import "@joist/templating/define.js";
1
+ import '@joist/templating/define.js';
2
2
 
3
- import { attr, css, element, html, listen, query } from "@joist/element";
4
- import { effect } from "@joist/observable";
5
- import { bind } from "@joist/templating";
3
+ import { attr, css, element, html, listen, query } from '@joist/element';
4
+ import { effect } from '@joist/observable';
5
+ import { bind } from '@joist/templating';
6
6
 
7
7
  declare global {
8
8
  interface HTMLElementTagNameMap {
9
- "usa-file-input": USAFileInputElement;
9
+ 'usa-file-input': USAFileInputElement;
10
10
  }
11
11
  }
12
12
 
13
13
  @element({
14
- tagName: "usa-file-input",
14
+ tagName: 'usa-file-input',
15
15
  shadowDom: [
16
16
  css`
17
17
  * {
@@ -81,12 +81,12 @@ declare global {
81
81
  <slot class="label"></slot>
82
82
 
83
83
  <div class="container">
84
- <input type="file" tabindex="0"/>
84
+ <input type="file" tabindex="0" />
85
85
 
86
86
  <j-if bind="filesVisible">
87
87
  <template>
88
88
  <j-props>
89
- <usa-file-input-preview $.files="files" part="preview">
89
+ <usa-file-input-preview $.files="files" part="preview" exportparts="heading, item">
90
90
  Selected file <usa-link>Change file</usa-link>
91
91
  </usa-file-input-preview>
92
92
  </j-props>
@@ -94,9 +94,7 @@ declare global {
94
94
 
95
95
  <template else>
96
96
  <div class="box" part="input">
97
- <slot name="description">
98
- Drag file here or <usa-link>choose from folder</usa-link>
99
- </slot>
97
+ <slot name="description"> Drag file here or <usa-link>choose from folder</usa-link> </slot>
100
98
  </div>
101
99
  </template>
102
100
  </j-if>
@@ -109,13 +107,13 @@ export class USAFileInputElement extends HTMLElement {
109
107
  static formAssociated = true;
110
108
 
111
109
  @attr()
112
- accessor name = "";
110
+ accessor name = '';
113
111
 
114
112
  @attr()
115
113
  accessor multiple = true;
116
114
 
117
115
  @attr()
118
- accessor accept = "";
116
+ accessor accept = '';
119
117
 
120
118
  @attr()
121
119
  accessor required = false;
@@ -127,7 +125,7 @@ export class USAFileInputElement extends HTMLElement {
127
125
  accessor filesVisible = false;
128
126
 
129
127
  #internals = this.attachInternals();
130
- #input = query("input");
128
+ #input = query('input');
131
129
 
132
130
  attributeChangedCallback() {
133
131
  this.#input({
@@ -142,11 +140,7 @@ export class USAFileInputElement extends HTMLElement {
142
140
  const input = this.#input();
143
141
 
144
142
  if (input.validationMessage) {
145
- this.#internals.setValidity(
146
- { customError: true },
147
- input.validationMessage,
148
- input,
149
- );
143
+ this.#internals.setValidity({ customError: true }, input.validationMessage, input);
150
144
  }
151
145
  }
152
146
 
@@ -165,38 +159,34 @@ export class USAFileInputElement extends HTMLElement {
165
159
  this.#internals.setFormValue(formData);
166
160
 
167
161
  if (input.validationMessage) {
168
- this.#internals.setValidity(
169
- { customError: true },
170
- input.validationMessage,
171
- input,
172
- );
162
+ this.#internals.setValidity({ customError: true }, input.validationMessage, input);
173
163
  } else {
174
164
  this.#internals.setValidity({});
175
165
  }
176
166
  }
177
167
 
178
- @listen("change")
168
+ @listen('change')
179
169
  onInputChange() {
180
170
  const input = this.#input();
181
171
 
182
172
  this.files = input.files;
183
173
 
184
- this.dispatchEvent(new Event("change"));
174
+ this.dispatchEvent(new Event('change'));
185
175
  }
186
176
 
187
- @listen("dragenter")
177
+ @listen('dragenter')
188
178
  onDragEnter() {
189
- this.classList.add("dragenter");
179
+ this.classList.add('dragenter');
190
180
  }
191
181
 
192
- @listen("dragleave")
182
+ @listen('dragleave')
193
183
  onDragLeave() {
194
- this.classList.remove("dragenter");
184
+ this.classList.remove('dragenter');
195
185
  }
196
186
 
197
- @listen("drop")
187
+ @listen('drop')
198
188
  onDrop(e: DragEvent) {
199
- this.classList.remove("dragenter");
189
+ this.classList.remove('dragenter');
200
190
 
201
191
  if (e.dataTransfer?.items) {
202
192
  e.preventDefault();
@@ -204,7 +194,7 @@ export class USAFileInputElement extends HTMLElement {
204
194
  const data = new DataTransfer();
205
195
 
206
196
  for (const item of e.dataTransfer.items) {
207
- if (item.kind === "file") {
197
+ if (item.kind === 'file') {
208
198
  const file = item.getAsFile();
209
199
 
210
200
  if (file) {
package/target/lib/file-input/file-input-preview/file-input-preview.element.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- import "@joist/templating/define.js";
1
+ import '@joist/templating/define.js';
2
2
  declare global {
3
3
  interface HTMLElementTagNameMap {
4
- "usa-file-input-preview": USAFileInputPreviewElement;
4
+ 'usa-file-input-preview': USAFileInputPreviewElement;
5
5
  }
6
6
  }
7
7
  export declare class USAFileInputPreviewElement extends HTMLElement {
package/target/lib/file-input/file-input-preview/file-input-preview.element.js CHANGED
@@ -1,14 +1,14 @@
1
1
  import { __esDecorate, __runInitializers } from "tslib";
2
- import "@joist/templating/define.js";
3
- import { css, element, html } from "@joist/element";
4
- import { observe } from "@joist/observable";
5
- import { bind } from "@joist/templating";
2
+ import '@joist/templating/define.js';
3
+ import { css, element, html } from '@joist/element';
4
+ import { observe } from '@joist/observable';
5
+ import { bind } from '@joist/templating';
6
6
  let USAFileInputPreviewElement = (() => {
7
7
  let _classDecorators = [element({
8
- tagName: "usa-file-input-preview",
8
+ tagName: 'usa-file-input-preview',
9
9
  shadowDom: [
10
- css `*{box-sizing:border-box}:host{display:block;font-size:.87rem;pointer-events:none;position:relative;text-align:left;word-wrap:anywhere;z-index:3;border-radius:var(--usa-input-radius);overflow:hidden}:host([hidden]){display:none}img{border:0;display:block;height:2.5rem;margin-right:.5rem;-o-object-fit:contain;object-fit:contain;width:2.5rem}.preview-heading{align-items:center;background:var(--usa-input-bg-color);display:flex;pointer-events:none;position:relative;z-index:3;font-weight:700;justify-content:space-between;padding:.5rem;text-align:left}.preview-item{align-items:center;background:var(--usa-input-bg-color);display:flex;padding:.5rem;width:100%;margin-top:1px}`,
11
- html `<slot class="preview-heading"></slot><j-for bind="fileEntries" key="src"><template><div class="preview-item"><j-if bind="each.value.isImage"><template><j-props><img height="40" width="40" aria-hidden="true" $.src="each.value.src"></j-props></template><template else><usa-icon icon="file_present"></usa-icon></template></j-if><j-value bind="each.value.file.name"></j-value></div></template></j-for>`,
10
+ css `*{box-sizing:border-box}:host{display:block;font-size:.87rem;pointer-events:none;position:relative;text-align:left;word-wrap:anywhere;z-index:3;border-radius:0;overflow:hidden}:host([hidden]){display:none}img{border:0;display:block;height:2.5rem;margin-right:.5rem;-o-object-fit:contain;object-fit:contain;width:2.5rem}.preview-heading{background:#d9e8f6;align-items:center;display:flex;pointer-events:none;position:relative;z-index:3;font-weight:700;justify-content:space-between;padding:.5rem;text-align:left;font-size:.93rem;line-height:1.6}.preview-item{background:#d9e8f6;align-items:center;display:flex;padding:.5rem;width:100%;margin-top:1px;margin-bottom:1px}`,
11
+ html `<slot class="preview-heading" part="heading"></slot><j-for bind="fileEntries" key="src"><template><div class="preview-item" part="item"><j-if bind="each.value.isImage"><template><j-props><img height="40" width="40" aria-hidden="true" $.src="each.value.src"></j-props></template><template else><usa-icon icon="file_present"></usa-icon></template></j-if><j-value bind="each.value.file.name"></j-value></div></template></j-for>`,
12
12
  ],
13
13
  })];
14
14
  let _classDescriptor;
@@ -33,7 +33,7 @@ let USAFileInputPreviewElement = (() => {
33
33
  return Array.from(i.files).map((file) => ({
34
34
  file,
35
35
  src: URL.createObjectURL(file),
36
- isImage: file.type.startsWith("image"),
36
+ isImage: file.type.startsWith('image'),
37
37
  }));
38
38
  })];
39
39
  __esDecorate(this, null, _files_decorators, { kind: "accessor", name: "files", static: false, private: false, access: { has: obj => "files" in obj, get: obj => obj.files, set: (obj, value) => { obj.files = value; } }, metadata: _metadata }, _files_initializers, _files_extraInitializers);
package/target/lib/file-input/file-input-preview/file-input-preview.element.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"file-input-preview.element.js","sourceRoot":"","sources":["../../../../src/lib/file-input/file-input-preview/file-input-preview.element.ts"],"names":[],"mappings":";AAAA,OAAO,6BAA6B,CAAC;AAErC,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;IAyF5B,0BAA0B;4BAjFtC,OAAO,CAAC;YACP,OAAO,EAAE,wBAAwB;YACjC,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoDF;gBACD,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;KAsBH;aACF;SACF,CAAC;;;;sBAC8C,WAAW;;;;;;;0CAAnB,SAAQ,WAAW;;;;iCACxD,OAAO,EAAE;uCAGT,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE;oBACV,IAAI,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;wBACrC,OAAO,EAAE,CAAC;oBACZ,CAAC;oBAED,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;wBACxC,IAAI;wBACJ,GAAG,EAAE,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC;wBAC9B,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC;qBACvC,CAAC,CAAC,CAAC;gBACN,CAAC,CAAC;YAZF,oKAAS,KAAK,6BAAL,KAAK,qFAAyB;YAavC,sLAAS,WAAW,6BAAX,WAAW,iGAAmB;YAfzC,6KAgBC;;;YAhBY,uDAA0B;;QAErC,uEAAkC,IAAI,EAAC;QAAvC,IAAS,KAAK,2CAAyB;QAAvC,IAAS,KAAK,iDAAyB;QAavC,uIAAoC,EAAE,GAAC;QAAvC,IAAS,WAAW,iDAAmB;QAAvC,IAAS,WAAW,uDAAmB;;;;;;;;SAf5B,0BAA0B"}
1
+ {"version":3,"file":"file-input-preview.element.js","sourceRoot":"","sources":["../../../../src/lib/file-input/file-input-preview/file-input-preview.element.ts"],"names":[],"mappings":";AAAA,OAAO,6BAA6B,CAAC;AAErC,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;IA4F5B,0BAA0B;4BApFtC,OAAO,CAAC;YACP,OAAO,EAAE,wBAAwB;YACjC,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuDF;gBACD,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;KAsBH;aACF;SACF,CAAC;;;;sBAC8C,WAAW;;;;;;;0CAAnB,SAAQ,WAAW;;;;iCACxD,OAAO,EAAE;uCAGT,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE;oBACV,IAAI,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;wBACrC,OAAO,EAAE,CAAC;oBACZ,CAAC;oBAED,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;wBACxC,IAAI;wBACJ,GAAG,EAAE,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC;wBAC9B,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC;qBACvC,CAAC,CAAC,CAAC;gBACN,CAAC,CAAC;YAZF,oKAAS,KAAK,6BAAL,KAAK,qFAAyB;YAavC,sLAAS,WAAW,6BAAX,WAAW,iGAAmB;YAfzC,6KAgBC;;;YAhBY,uDAA0B;;QAErC,uEAAkC,IAAI,EAAC;QAAvC,IAAS,KAAK,2CAAyB;QAAvC,IAAS,KAAK,iDAAyB;QAavC,uIAAoC,EAAE,GAAC;QAAvC,IAAS,WAAW,iDAAmB;QAAvC,IAAS,WAAW,uDAAmB;;;;;;;;SAf5B,0BAA0B"}
package/target/lib/file-input/file-input.element.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- import "@joist/templating/define.js";
1
+ import '@joist/templating/define.js';
2
2
  declare global {
3
3
  interface HTMLElementTagNameMap {
4
- "usa-file-input": USAFileInputElement;
4
+ 'usa-file-input': USAFileInputElement;
5
5
  }
6
6
  }
7
7
  export declare class USAFileInputElement extends HTMLElement {
package/target/lib/file-input/file-input.element.js CHANGED
@@ -1,14 +1,14 @@
1
1
  import { __esDecorate, __runInitializers } from "tslib";
2
- import "@joist/templating/define.js";
3
- import { attr, css, element, html, listen, query } from "@joist/element";
4
- import { effect } from "@joist/observable";
5
- import { bind } from "@joist/templating";
2
+ import '@joist/templating/define.js';
3
+ import { attr, css, element, html, listen, query } from '@joist/element';
4
+ import { effect } from '@joist/observable';
5
+ import { bind } from '@joist/templating';
6
6
  let USAFileInputElement = (() => {
7
7
  let _classDecorators = [element({
8
- tagName: "usa-file-input",
8
+ tagName: 'usa-file-input',
9
9
  shadowDom: [
10
10
  css `*{box-sizing:border-box}:host{display:block;max-width:30rem;position:relative;margin-bottom:1.5rem}label{display:block}input{cursor:pointer;left:0;margin:0;max-width:none;position:absolute;text-indent:-999em;width:100%;z-index:1;bottom:0;top:0}input:focus{outline:.25rem solid #2491ff;outline-offset:0}label slot.label{font-size:1.06rem;line-height:1.3;display:block;font-weight:400;margin-bottom:.5rem}:host(.dragenter) .box{border-color:#2491ff}.box{border:1px dashed #adadad;border-radius:0;display:flex;font-size:.93rem;position:relative;text-align:center;width:100%;height:5.2rem;align-items:center;justify-content:center}.container{position:relative}`,
11
- html `<label><slot class="label"></slot><div class="container"><input type="file" tabindex="0"><j-if bind="filesVisible"><template><j-props><usa-file-input-preview $.files="files" part="preview">Selected file<usa-link>Change file</usa-link></usa-file-input-preview></j-props></template><template else><div class="box" part="input"><slot name="description">Drag file here or<usa-link>choose from folder</usa-link></slot></div></template></j-if></div></label>`,
11
+ html `<label><slot class="label"></slot><div class="container"><input type="file" tabindex="0"><j-if bind="filesVisible"><template><j-props><usa-file-input-preview $.files="files" part="preview" exportparts="heading, item">Selected file<usa-link>Change file</usa-link></usa-file-input-preview></j-props></template><template else><div class="box" part="input"><slot name="description">Drag file here or<usa-link>choose from folder</usa-link></slot></div></template></j-if></div></label>`,
12
12
  ],
13
13
  })];
14
14
  let _classDescriptor;
@@ -50,10 +50,10 @@ let USAFileInputElement = (() => {
50
50
  _files_decorators = [bind()];
51
51
  _filesVisible_decorators = [bind((i) => !!i.files?.length)];
52
52
  _syncFormValues_decorators = [effect()];
53
- _onInputChange_decorators = [listen("change")];
54
- _onDragEnter_decorators = [listen("dragenter")];
55
- _onDragLeave_decorators = [listen("dragleave")];
56
- _onDrop_decorators = [listen("drop")];
53
+ _onInputChange_decorators = [listen('change')];
54
+ _onDragEnter_decorators = [listen('dragenter')];
55
+ _onDragLeave_decorators = [listen('dragleave')];
56
+ _onDrop_decorators = [listen('drop')];
57
57
  __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);
58
58
  __esDecorate(this, null, _multiple_decorators, { kind: "accessor", name: "multiple", static: false, private: false, access: { has: obj => "multiple" in obj, get: obj => obj.multiple, set: (obj, value) => { obj.multiple = value; } }, metadata: _metadata }, _multiple_initializers, _multiple_extraInitializers);
59
59
  __esDecorate(this, null, _accept_decorators, { kind: "accessor", name: "accept", static: false, private: false, access: { has: obj => "accept" in obj, get: obj => obj.accept, set: (obj, value) => { obj.accept = value; } }, metadata: _metadata }, _accept_initializers, _accept_extraInitializers);
@@ -70,13 +70,13 @@ let USAFileInputElement = (() => {
70
70
  if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
71
71
  }
72
72
  static formAssociated = true;
73
- #name_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _name_initializers, ""));
73
+ #name_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _name_initializers, ''));
74
74
  get name() { return this.#name_accessor_storage; }
75
75
  set name(value) { this.#name_accessor_storage = value; }
76
76
  #multiple_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _multiple_initializers, true));
77
77
  get multiple() { return this.#multiple_accessor_storage; }
78
78
  set multiple(value) { this.#multiple_accessor_storage = value; }
79
- #accept_accessor_storage = (__runInitializers(this, _multiple_extraInitializers), __runInitializers(this, _accept_initializers, ""));
79
+ #accept_accessor_storage = (__runInitializers(this, _multiple_extraInitializers), __runInitializers(this, _accept_initializers, ''));
80
80
  get accept() { return this.#accept_accessor_storage; }
81
81
  set accept(value) { this.#accept_accessor_storage = value; }
82
82
  #required_accessor_storage = (__runInitializers(this, _accept_extraInitializers), __runInitializers(this, _required_initializers, false));
@@ -89,7 +89,7 @@ let USAFileInputElement = (() => {
89
89
  get filesVisible() { return this.#filesVisible_accessor_storage; }
90
90
  set filesVisible(value) { this.#filesVisible_accessor_storage = value; }
91
91
  #internals = (__runInitializers(this, _filesVisible_extraInitializers), this.attachInternals());
92
- #input = query("input");
92
+ #input = query('input');
93
93
  attributeChangedCallback() {
94
94
  this.#input({
95
95
  name: this.name,
@@ -123,21 +123,21 @@ let USAFileInputElement = (() => {
123
123
  onInputChange() {
124
124
  const input = this.#input();
125
125
  this.files = input.files;
126
- this.dispatchEvent(new Event("change"));
126
+ this.dispatchEvent(new Event('change'));
127
127
  }
128
128
  onDragEnter() {
129
- this.classList.add("dragenter");
129
+ this.classList.add('dragenter');
130
130
  }
131
131
  onDragLeave() {
132
- this.classList.remove("dragenter");
132
+ this.classList.remove('dragenter');
133
133
  }
134
134
  onDrop(e) {
135
- this.classList.remove("dragenter");
135
+ this.classList.remove('dragenter');
136
136
  if (e.dataTransfer?.items) {
137
137
  e.preventDefault();
138
138
  const data = new DataTransfer();
139
139
  for (const item of e.dataTransfer.items) {
140
- if (item.kind === "file") {
140
+ if (item.kind === 'file') {
141
141
  const file = item.getAsFile();
142
142
  if (file) {
143
143
  data.items.add(file);
package/target/lib/file-input/file-input.element.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"file-input.element.js","sourceRoot":"","sources":["../../../src/lib/file-input/file-input.element.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"file-input.element.js","sourceRoot":"","sources":["../../../src/lib/file-input/file-input.element.ts"],"names":[],"mappings":"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"}