tyrell-components 1.0.0-RC7 → 1.0.0-RC9

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 (77) hide show
  1. package/dist/tyrell.js +1 -1
  2. package/lib/components/button.d.ts +9 -0
  3. package/lib/components/button.d.ts.map +1 -1
  4. package/lib/components/button.js +34 -1
  5. package/lib/components/button.js.map +1 -1
  6. package/lib/components/copy.js +1 -1
  7. package/lib/components/date-picker.js +1 -1
  8. package/lib/components/dropdown.d.ts +35 -13
  9. package/lib/components/dropdown.d.ts.map +1 -1
  10. package/lib/components/dropdown.js +130 -42
  11. package/lib/components/dropdown.js.map +1 -1
  12. package/lib/components/file-upload.d.ts +121 -0
  13. package/lib/components/file-upload.d.ts.map +1 -0
  14. package/lib/components/file-upload.js +441 -0
  15. package/lib/components/file-upload.js.map +1 -0
  16. package/lib/components/input.js +3 -3
  17. package/lib/components/input.js.map +1 -1
  18. package/lib/components/multiselect.d.ts +22 -22
  19. package/lib/components/multiselect.d.ts.map +1 -1
  20. package/lib/components/multiselect.js +123 -108
  21. package/lib/components/multiselect.js.map +1 -1
  22. package/lib/components/textarea.js +1 -1
  23. package/lib/components/wizard.js +9 -9
  24. package/lib/components/wizard.js.map +1 -1
  25. package/lib/index.d.ts +8 -0
  26. package/lib/index.d.ts.map +1 -1
  27. package/lib/index.js +3 -0
  28. package/lib/index.js.map +1 -1
  29. package/lib/styles/button.d.ts +1 -1
  30. package/lib/styles/button.d.ts.map +1 -1
  31. package/lib/styles/button.js +41 -0
  32. package/lib/styles/button.js.map +1 -1
  33. package/lib/styles/checkbox.d.ts +1 -1
  34. package/lib/styles/checkbox.d.ts.map +1 -1
  35. package/lib/styles/date-picker.d.ts +1 -1
  36. package/lib/styles/date-picker.d.ts.map +1 -1
  37. package/lib/styles/date-picker.js +7 -4
  38. package/lib/styles/date-picker.js.map +1 -1
  39. package/lib/styles/dropdown.d.ts +1 -1
  40. package/lib/styles/dropdown.d.ts.map +1 -1
  41. package/lib/styles/dropdown.js +104 -6
  42. package/lib/styles/dropdown.js.map +1 -1
  43. package/lib/styles/file-upload.d.ts +2 -0
  44. package/lib/styles/file-upload.d.ts.map +1 -0
  45. package/lib/styles/file-upload.js +241 -0
  46. package/lib/styles/file-upload.js.map +1 -0
  47. package/lib/styles/input.d.ts +1 -1
  48. package/lib/styles/input.d.ts.map +1 -1
  49. package/lib/styles/input.js +2 -2
  50. package/lib/styles/multiselect.d.ts +1 -1
  51. package/lib/styles/multiselect.d.ts.map +1 -1
  52. package/lib/styles/multiselect.js +147 -96
  53. package/lib/styles/multiselect.js.map +1 -1
  54. package/lib/styles/radio.d.ts +1 -1
  55. package/lib/styles/radio.d.ts.map +1 -1
  56. package/lib/styles/step.d.ts +1 -1
  57. package/lib/styles/step.d.ts.map +1 -1
  58. package/lib/styles/step.js +3 -3
  59. package/lib/styles/switch.d.ts +1 -1
  60. package/lib/styles/switch.d.ts.map +1 -1
  61. package/lib/styles/tag.d.ts +1 -1
  62. package/lib/styles/tag.d.ts.map +1 -1
  63. package/lib/styles/tag.js +1 -12
  64. package/lib/styles/tag.js.map +1 -1
  65. package/lib/styles/textarea.d.ts +1 -1
  66. package/lib/styles/textarea.js +1 -1
  67. package/lib/styles/wizard.d.ts +10 -15
  68. package/lib/styles/wizard.d.ts.map +1 -1
  69. package/lib/styles/wizard.js +149 -98
  70. package/lib/styles/wizard.js.map +1 -1
  71. package/lib/utils/loader-registry.d.ts +35 -0
  72. package/lib/utils/loader-registry.d.ts.map +1 -0
  73. package/lib/utils/loader-registry.js +43 -0
  74. package/lib/utils/loader-registry.js.map +1 -0
  75. package/lib/version.d.ts +1 -1
  76. package/lib/version.js +1 -1
  77. package/package.json +5 -1
@@ -0,0 +1,121 @@
1
+ /**
2
+ * TyFileUpload Web Component
3
+ *
4
+ * Drop zone + file picker primitive. Replaces `<input type="file">` with
5
+ * a styleable, drag-and-drop-capable equivalent that works everywhere.
6
+ *
7
+ * - Click to browse or drag-and-drop
8
+ * - Multiple file support
9
+ * - Accept filter passed to the underlying file input
10
+ * - Emits `change` with `{ files, names }` on every selection
11
+ * - Form-associated: participates in FormData and form.reset()
12
+ *
13
+ * @example
14
+ * <ty-file-upload name="avatar" accept="image/*" label="Profile photo"></ty-file-upload>
15
+ * <ty-file-upload name="docs" multiple accept=".pdf,.docx" label="Attachments"></ty-file-upload>
16
+ */
17
+ import { TyComponent } from "../base/ty-component.js";
18
+ import type { PropertyChange } from "../utils/property-manager.js";
19
+ interface FileUploadState {
20
+ listenersSetup: boolean;
21
+ }
22
+ export interface TyFileUploadElement extends HTMLElement {
23
+ multiple: boolean;
24
+ accept: string;
25
+ name: string;
26
+ disabled: boolean;
27
+ required: boolean;
28
+ label: string;
29
+ placeholder: string;
30
+ error: string;
31
+ files: File[];
32
+ form: HTMLFormElement | null;
33
+ }
34
+ export declare class TyFileUpload extends TyComponent<FileUploadState> implements TyFileUploadElement {
35
+ static formAssociated: boolean;
36
+ protected static properties: {
37
+ multiple: {
38
+ type: "boolean";
39
+ visual: boolean;
40
+ default: boolean;
41
+ };
42
+ accept: {
43
+ type: "string";
44
+ visual: boolean;
45
+ default: string;
46
+ };
47
+ name: {
48
+ type: "string";
49
+ default: string;
50
+ };
51
+ disabled: {
52
+ type: "boolean";
53
+ visual: boolean;
54
+ default: boolean;
55
+ };
56
+ required: {
57
+ type: "boolean";
58
+ visual: boolean;
59
+ default: boolean;
60
+ };
61
+ label: {
62
+ type: "string";
63
+ visual: boolean;
64
+ default: string;
65
+ };
66
+ placeholder: {
67
+ type: "string";
68
+ visual: boolean;
69
+ default: string;
70
+ };
71
+ error: {
72
+ type: "string";
73
+ visual: boolean;
74
+ default: string;
75
+ };
76
+ };
77
+ private _files;
78
+ private _isDragging;
79
+ private _listenersSetup;
80
+ private _dropZoneClickHandler;
81
+ private _dropZoneKeydownHandler;
82
+ private _dropZoneFocusHandler;
83
+ private _dropZoneBlurHandler;
84
+ private _dragoverHandler;
85
+ private _dragleaveHandler;
86
+ private _dropHandler;
87
+ private _inputChangeHandler;
88
+ constructor();
89
+ protected onConnect(): void;
90
+ protected onDisconnect(): void;
91
+ protected onPropertiesChanged(_changes: PropertyChange[]): void;
92
+ protected onFormReset(): void;
93
+ protected getFormValue(): FormData | string | null;
94
+ get files(): File[];
95
+ get multiple(): boolean;
96
+ set multiple(v: boolean);
97
+ get accept(): string;
98
+ set accept(v: string);
99
+ get name(): string;
100
+ set name(v: string);
101
+ get disabled(): boolean;
102
+ set disabled(v: boolean);
103
+ get required(): boolean;
104
+ set required(v: boolean);
105
+ get label(): string;
106
+ set label(v: string);
107
+ get placeholder(): string;
108
+ set placeholder(v: string);
109
+ get error(): string;
110
+ set error(v: string);
111
+ get form(): HTMLFormElement | null;
112
+ private setFiles;
113
+ private removeFile;
114
+ private setupEventListeners;
115
+ private removeEventListeners;
116
+ private buildDropZoneClasses;
117
+ private renderFileList;
118
+ protected render(): void;
119
+ }
120
+ export {};
121
+ //# sourceMappingURL=file-upload.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../src/components/file-upload.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAInE,UAAU,eAAe;IACvB,cAAc,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,IAAI,EAAE,eAAe,GAAG,IAAI,CAAC;CAC9B;AAeD,qBAAa,YACX,SAAQ,WAAW,CAAC,eAAe,CACnC,YAAW,mBAAmB;IAE9B,MAAM,CAAC,cAAc,UAAQ;IAE7B,SAAS,CAAC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAwCzB;IAEF,OAAO,CAAC,MAAM,CAAc;IAC5B,OAAO,CAAC,WAAW,CAAkB;IACrC,OAAO,CAAC,eAAe,CAAkB;IAEzC,OAAO,CAAC,qBAAqB,CAAqC;IAClE,OAAO,CAAC,uBAAuB,CAA6C;IAC5E,OAAO,CAAC,qBAAqB,CAA6B;IAC1D,OAAO,CAAC,oBAAoB,CAA6B;IACzD,OAAO,CAAC,gBAAgB,CAAyC;IACjE,OAAO,CAAC,iBAAiB,CAAyC;IAClE,OAAO,CAAC,YAAY,CAAyC;IAC7D,OAAO,CAAC,mBAAmB,CAAqC;;IAOhE,SAAS,CAAC,SAAS,IAAI,IAAI;IAE3B,SAAS,CAAC,YAAY,IAAI,IAAI;IAI9B,SAAS,CAAC,mBAAmB,CAAC,QAAQ,EAAE,cAAc,EAAE,GAAG,IAAI;IAE/D,SAAS,CAAC,WAAW,IAAI,IAAI;IAW7B,SAAS,CAAC,YAAY,IAAI,QAAQ,GAAG,MAAM,GAAG,IAAI;IAclD,IAAI,KAAK,IAAI,IAAI,EAAE,CAElB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,CAAC,EAAE,OAAO,EAEtB;IAED,IAAI,MAAM,IAAI,MAAM,CAEnB;IACD,IAAI,MAAM,CAAC,CAAC,EAAE,MAAM,EAEnB;IAED,IAAI,IAAI,IAAI,MAAM,CAEjB;IACD,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,EAEjB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,CAAC,EAAE,OAAO,EAEtB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,CAAC,EAAE,OAAO,EAEtB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAElB;IAED,IAAI,WAAW,IAAI,MAAM,CAExB;IACD,IAAI,WAAW,CAAC,CAAC,EAAE,MAAM,EAExB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAElB;IAED,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAMD,OAAO,CAAC,QAAQ;IAkBhB,OAAO,CAAC,UAAU;IAelB,OAAO,CAAC,mBAAmB;IAmF3B,OAAO,CAAC,oBAAoB;IA0C5B,OAAO,CAAC,oBAAoB;IAS5B,OAAO,CAAC,cAAc;IAyCtB,SAAS,CAAC,MAAM,IAAI,IAAI;CAmHzB"}
@@ -0,0 +1,441 @@
1
+ /**
2
+ * TyFileUpload Web Component
3
+ *
4
+ * Drop zone + file picker primitive. Replaces `<input type="file">` with
5
+ * a styleable, drag-and-drop-capable equivalent that works everywhere.
6
+ *
7
+ * - Click to browse or drag-and-drop
8
+ * - Multiple file support
9
+ * - Accept filter passed to the underlying file input
10
+ * - Emits `change` with `{ files, names }` on every selection
11
+ * - Form-associated: participates in FormData and form.reset()
12
+ *
13
+ * @example
14
+ * <ty-file-upload name="avatar" accept="image/*" label="Profile photo"></ty-file-upload>
15
+ * <ty-file-upload name="docs" multiple accept=".pdf,.docx" label="Attachments"></ty-file-upload>
16
+ */
17
+ import { TyComponent } from "../base/ty-component.js";
18
+ import { ensureStyles } from "../utils/styles.js";
19
+ import { fileUploadStyles } from "../styles/file-upload.js";
20
+ const UPLOAD_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>`;
21
+ const FILE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>`;
22
+ const X_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>`;
23
+ function formatBytes(bytes) {
24
+ if (bytes < 1024)
25
+ return `${bytes} B`;
26
+ if (bytes < 1024 * 1024)
27
+ return `${(bytes / 1024).toFixed(1)} KB`;
28
+ if (bytes < 1024 * 1024 * 1024)
29
+ return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
30
+ return `${(bytes / 1024 / 1024 / 1024).toFixed(1)} GB`;
31
+ }
32
+ export class TyFileUpload extends TyComponent {
33
+ constructor() {
34
+ super();
35
+ this._files = [];
36
+ this._isDragging = false;
37
+ this._listenersSetup = false;
38
+ this._dropZoneClickHandler = null;
39
+ this._dropZoneKeydownHandler = null;
40
+ this._dropZoneFocusHandler = null;
41
+ this._dropZoneBlurHandler = null;
42
+ this._dragoverHandler = null;
43
+ this._dragleaveHandler = null;
44
+ this._dropHandler = null;
45
+ this._inputChangeHandler = null;
46
+ ensureStyles(this.shadowRoot, { css: fileUploadStyles, id: "ty-file-upload" });
47
+ }
48
+ onConnect() { }
49
+ onDisconnect() {
50
+ this.removeEventListeners();
51
+ }
52
+ onPropertiesChanged(_changes) { }
53
+ onFormReset() {
54
+ this._files = [];
55
+ this.updateFormValue();
56
+ if (this._connected)
57
+ this.render();
58
+ const fileInput = this.shadowRoot?.querySelector(".file-input");
59
+ if (fileInput)
60
+ fileInput.value = "";
61
+ }
62
+ getFormValue() {
63
+ if (this._files.length === 0)
64
+ return null;
65
+ const fd = new FormData();
66
+ const fieldName = this.name || "files";
67
+ for (const file of this._files) {
68
+ fd.append(fieldName, file);
69
+ }
70
+ return fd;
71
+ }
72
+ // ============================================================================
73
+ // PUBLIC API
74
+ // ============================================================================
75
+ get files() {
76
+ return [...this._files];
77
+ }
78
+ get multiple() {
79
+ return this.getProperty("multiple");
80
+ }
81
+ set multiple(v) {
82
+ this.setProperty("multiple", v);
83
+ }
84
+ get accept() {
85
+ return this.getProperty("accept");
86
+ }
87
+ set accept(v) {
88
+ this.setProperty("accept", v);
89
+ }
90
+ get name() {
91
+ return this.getProperty("name");
92
+ }
93
+ set name(v) {
94
+ this.setProperty("name", v);
95
+ }
96
+ get disabled() {
97
+ return this.getProperty("disabled");
98
+ }
99
+ set disabled(v) {
100
+ this.setProperty("disabled", v);
101
+ }
102
+ get required() {
103
+ return this.getProperty("required");
104
+ }
105
+ set required(v) {
106
+ this.setProperty("required", v);
107
+ }
108
+ get label() {
109
+ return this.getProperty("label");
110
+ }
111
+ set label(v) {
112
+ this.setProperty("label", v);
113
+ }
114
+ get placeholder() {
115
+ return this.getProperty("placeholder");
116
+ }
117
+ set placeholder(v) {
118
+ this.setProperty("placeholder", v);
119
+ }
120
+ get error() {
121
+ return this.getProperty("error");
122
+ }
123
+ set error(v) {
124
+ this.setProperty("error", v);
125
+ }
126
+ get form() {
127
+ return this._internals.form;
128
+ }
129
+ // ============================================================================
130
+ // INTERNAL FILE MANAGEMENT
131
+ // ============================================================================
132
+ setFiles(newFiles) {
133
+ this._files = this.multiple ? newFiles : newFiles.slice(0, 1);
134
+ this.updateFormValue();
135
+ this.render();
136
+ const detail = {
137
+ value: this._files,
138
+ files: this._files,
139
+ names: this._files.map((f) => f.name),
140
+ };
141
+ setTimeout(() => {
142
+ this.dispatchEvent(new CustomEvent("change", { detail, bubbles: true, composed: true }));
143
+ }, 0);
144
+ }
145
+ removeFile(index) {
146
+ const updated = [...this._files];
147
+ updated.splice(index, 1);
148
+ this.setFiles(updated);
149
+ const fileInput = this.shadowRoot?.querySelector(".file-input");
150
+ if (fileInput)
151
+ fileInput.value = "";
152
+ }
153
+ // ============================================================================
154
+ // EVENT LISTENERS
155
+ // ============================================================================
156
+ setupEventListeners() {
157
+ if (this._listenersSetup)
158
+ return;
159
+ const shadow = this.shadowRoot;
160
+ const dropZone = shadow.querySelector(".drop-zone");
161
+ const fileInput = shadow.querySelector(".file-input");
162
+ this._dropZoneClickHandler = (e) => {
163
+ if (this.disabled)
164
+ return;
165
+ if (e.target.closest(".file-remove"))
166
+ return;
167
+ fileInput.click();
168
+ };
169
+ this._dropZoneKeydownHandler = (e) => {
170
+ if (this.disabled)
171
+ return;
172
+ if (e.key === "Enter" || e.key === " ") {
173
+ e.preventDefault();
174
+ fileInput.click();
175
+ }
176
+ };
177
+ this._dropZoneFocusHandler = () => {
178
+ dropZone.classList.add("focused");
179
+ };
180
+ this._dropZoneBlurHandler = () => {
181
+ dropZone.classList.remove("focused");
182
+ };
183
+ this._dragoverHandler = (e) => {
184
+ if (this.disabled)
185
+ return;
186
+ e.preventDefault();
187
+ e.stopPropagation();
188
+ if (!this._isDragging) {
189
+ this._isDragging = true;
190
+ dropZone.classList.add("drag-active");
191
+ }
192
+ };
193
+ this._dragleaveHandler = (e) => {
194
+ if (!dropZone.contains(e.relatedTarget)) {
195
+ this._isDragging = false;
196
+ dropZone.classList.remove("drag-active");
197
+ }
198
+ };
199
+ this._dropHandler = (e) => {
200
+ if (this.disabled)
201
+ return;
202
+ e.preventDefault();
203
+ e.stopPropagation();
204
+ this._isDragging = false;
205
+ dropZone.classList.remove("drag-active");
206
+ const files = Array.from(e.dataTransfer?.files ?? []);
207
+ if (files.length > 0)
208
+ this.setFiles(files);
209
+ };
210
+ this._inputChangeHandler = (e) => {
211
+ const input = e.target;
212
+ if (input.files && input.files.length > 0) {
213
+ this.setFiles(Array.from(input.files));
214
+ }
215
+ };
216
+ dropZone.addEventListener("click", this._dropZoneClickHandler);
217
+ dropZone.addEventListener("keydown", this._dropZoneKeydownHandler);
218
+ dropZone.addEventListener("focus", this._dropZoneFocusHandler);
219
+ dropZone.addEventListener("blur", this._dropZoneBlurHandler);
220
+ dropZone.addEventListener("dragover", this._dragoverHandler);
221
+ dropZone.addEventListener("dragleave", this._dragleaveHandler);
222
+ dropZone.addEventListener("drop", this._dropHandler);
223
+ fileInput.addEventListener("change", this._inputChangeHandler);
224
+ this._listenersSetup = true;
225
+ }
226
+ removeEventListeners() {
227
+ if (!this._listenersSetup)
228
+ return;
229
+ const shadow = this.shadowRoot;
230
+ if (!shadow)
231
+ return;
232
+ const dropZone = shadow.querySelector(".drop-zone");
233
+ const fileInput = shadow.querySelector(".file-input");
234
+ if (!dropZone || !fileInput)
235
+ return;
236
+ if (this._dropZoneClickHandler)
237
+ dropZone.removeEventListener("click", this._dropZoneClickHandler);
238
+ if (this._dropZoneKeydownHandler)
239
+ dropZone.removeEventListener("keydown", this._dropZoneKeydownHandler);
240
+ if (this._dropZoneFocusHandler)
241
+ dropZone.removeEventListener("focus", this._dropZoneFocusHandler);
242
+ if (this._dropZoneBlurHandler)
243
+ dropZone.removeEventListener("blur", this._dropZoneBlurHandler);
244
+ if (this._dragoverHandler)
245
+ dropZone.removeEventListener("dragover", this._dragoverHandler);
246
+ if (this._dragleaveHandler)
247
+ dropZone.removeEventListener("dragleave", this._dragleaveHandler);
248
+ if (this._dropHandler)
249
+ dropZone.removeEventListener("drop", this._dropHandler);
250
+ if (this._inputChangeHandler)
251
+ fileInput.removeEventListener("change", this._inputChangeHandler);
252
+ this._listenersSetup = false;
253
+ }
254
+ // ============================================================================
255
+ // RENDERING
256
+ // ============================================================================
257
+ buildDropZoneClasses() {
258
+ const classes = ["drop-zone"];
259
+ if (this._isDragging)
260
+ classes.push("drag-active");
261
+ if (this._files.length > 0)
262
+ classes.push("has-files");
263
+ if (this.disabled)
264
+ classes.push("disabled");
265
+ if (this.error)
266
+ classes.push("error");
267
+ return classes.join(" ");
268
+ }
269
+ renderFileList(fileList) {
270
+ fileList.innerHTML = "";
271
+ for (let i = 0; i < this._files.length; i++) {
272
+ const file = this._files[i];
273
+ const item = document.createElement("div");
274
+ item.className = "file-item";
275
+ const icon = document.createElement("span");
276
+ icon.className = "file-icon";
277
+ icon.innerHTML = FILE_ICON;
278
+ const name = document.createElement("span");
279
+ name.className = "file-name";
280
+ name.textContent = file.name;
281
+ name.title = file.name;
282
+ const size = document.createElement("span");
283
+ size.className = "file-size";
284
+ size.textContent = formatBytes(file.size);
285
+ const removeBtn = document.createElement("button");
286
+ removeBtn.className = "file-remove";
287
+ removeBtn.type = "button";
288
+ removeBtn.innerHTML = X_ICON;
289
+ removeBtn.setAttribute("aria-label", `Remove ${file.name}`);
290
+ const capturedIndex = i;
291
+ removeBtn.addEventListener("click", (e) => {
292
+ e.stopPropagation();
293
+ this.removeFile(capturedIndex);
294
+ });
295
+ item.appendChild(icon);
296
+ item.appendChild(name);
297
+ item.appendChild(size);
298
+ item.appendChild(removeBtn);
299
+ fileList.appendChild(item);
300
+ }
301
+ }
302
+ render() {
303
+ const shadow = this.shadowRoot;
304
+ let container = shadow.querySelector(".file-upload-container");
305
+ if (!container) {
306
+ container = document.createElement("div");
307
+ container.className = "file-upload-container";
308
+ const labelEl = document.createElement("div");
309
+ labelEl.className = "upload-label";
310
+ container.appendChild(labelEl);
311
+ const dropZone = document.createElement("div");
312
+ dropZone.className = "drop-zone";
313
+ dropZone.setAttribute("role", "button");
314
+ const fileInput = document.createElement("input");
315
+ fileInput.type = "file";
316
+ fileInput.className = "file-input";
317
+ fileInput.style.display = "none";
318
+ dropZone.appendChild(fileInput);
319
+ const uploadIcon = document.createElement("div");
320
+ uploadIcon.className = "upload-icon";
321
+ uploadIcon.innerHTML = UPLOAD_ICON;
322
+ dropZone.appendChild(uploadIcon);
323
+ const hintEl = document.createElement("div");
324
+ hintEl.className = "upload-hint";
325
+ dropZone.appendChild(hintEl);
326
+ const subHintEl = document.createElement("div");
327
+ subHintEl.className = "upload-sub-hint";
328
+ dropZone.appendChild(subHintEl);
329
+ container.appendChild(dropZone);
330
+ const fileList = document.createElement("div");
331
+ fileList.className = "file-list";
332
+ container.appendChild(fileList);
333
+ const errorEl = document.createElement("div");
334
+ errorEl.className = "error-message";
335
+ container.appendChild(errorEl);
336
+ shadow.appendChild(container);
337
+ this.setupEventListeners();
338
+ }
339
+ // Label
340
+ const labelEl = container.querySelector(".upload-label");
341
+ if (this.label) {
342
+ labelEl.style.display = "";
343
+ labelEl.innerHTML = "";
344
+ labelEl.appendChild(document.createTextNode(this.label));
345
+ if (this.required) {
346
+ const req = document.createElement("span");
347
+ req.className = "required-icon";
348
+ req.textContent = "*";
349
+ req.setAttribute("aria-hidden", "true");
350
+ labelEl.appendChild(req);
351
+ }
352
+ }
353
+ else {
354
+ labelEl.style.display = "none";
355
+ }
356
+ // Drop zone
357
+ const dropZone = container.querySelector(".drop-zone");
358
+ dropZone.className = this.buildDropZoneClasses();
359
+ dropZone.tabIndex = this.disabled ? -1 : 0;
360
+ dropZone.setAttribute("aria-disabled", String(this.disabled));
361
+ dropZone.setAttribute("aria-label", this.placeholder || "Upload files");
362
+ // File input
363
+ const fileInput = container.querySelector(".file-input");
364
+ fileInput.multiple = this.multiple;
365
+ fileInput.accept = this.accept;
366
+ fileInput.disabled = this.disabled;
367
+ // Upload icon — hide once files are selected to give room to the compact zone
368
+ const uploadIcon = container.querySelector(".upload-icon");
369
+ uploadIcon.style.display = this._files.length > 0 ? "none" : "";
370
+ // Hint text
371
+ const hintEl = container.querySelector(".upload-hint");
372
+ if (this._files.length > 0) {
373
+ hintEl.innerHTML = `<strong>${this._files.length} file${this._files.length !== 1 ? "s" : ""} selected</strong>`;
374
+ }
375
+ else {
376
+ hintEl.innerHTML = `Drop files here or <span class="browse-link">click to browse</span>`;
377
+ }
378
+ // Sub-hint
379
+ const subHintEl = container.querySelector(".upload-sub-hint");
380
+ if (this.accept && this._files.length === 0) {
381
+ subHintEl.textContent = `Accepted: ${this.accept}`;
382
+ subHintEl.style.display = "";
383
+ }
384
+ else {
385
+ subHintEl.style.display = "none";
386
+ }
387
+ // File list
388
+ const fileList = container.querySelector(".file-list");
389
+ this.renderFileList(fileList);
390
+ // Error message
391
+ const errorEl = container.querySelector(".error-message");
392
+ errorEl.textContent = this.error;
393
+ errorEl.style.display = this.error ? "" : "none";
394
+ }
395
+ }
396
+ TyFileUpload.formAssociated = true;
397
+ TyFileUpload.properties = {
398
+ multiple: {
399
+ type: "boolean",
400
+ visual: true,
401
+ default: false,
402
+ },
403
+ accept: {
404
+ type: "string",
405
+ visual: true,
406
+ default: "",
407
+ },
408
+ name: {
409
+ type: "string",
410
+ default: "",
411
+ },
412
+ disabled: {
413
+ type: "boolean",
414
+ visual: true,
415
+ default: false,
416
+ },
417
+ required: {
418
+ type: "boolean",
419
+ visual: true,
420
+ default: false,
421
+ },
422
+ label: {
423
+ type: "string",
424
+ visual: true,
425
+ default: "",
426
+ },
427
+ placeholder: {
428
+ type: "string",
429
+ visual: true,
430
+ default: "Drop files here or click to browse",
431
+ },
432
+ error: {
433
+ type: "string",
434
+ visual: true,
435
+ default: "",
436
+ },
437
+ };
438
+ if (!customElements.get("ty-file-upload")) {
439
+ customElements.define("ty-file-upload", TyFileUpload);
440
+ }
441
+ //# sourceMappingURL=file-upload.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"file-upload.js","sourceRoot":"","sources":["../../src/components/file-upload.ts"],"names":[],"mappings":"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"}
@@ -453,7 +453,7 @@ export class TyInput extends TyComponent {
453
453
  const shadow = this.shadowRoot;
454
454
  const existingInput = shadow.querySelector('input');
455
455
  const existingWrapper = shadow.querySelector('.input-wrapper');
456
- const existingLabel = shadow.querySelector('.input-label');
456
+ const existingLabel = shadow.querySelector('.ty-field-label');
457
457
  const existingError = shadow.querySelector('.error-message');
458
458
  const classes = this.buildClassList();
459
459
  // Map input type (all numeric types use 'text' in DOM, others pass through)
@@ -507,7 +507,7 @@ export class TyInput extends TyComponent {
507
507
  else {
508
508
  // Label doesn't exist but we need one - CREATE IT!
509
509
  const labelEl = document.createElement('label');
510
- labelEl.className = 'input-label';
510
+ labelEl.className = 'ty-field-label';
511
511
  labelEl.innerHTML = `${this.label}${this.required ? `<span class="required-icon">${REQUIRED_ICON_SVG}</span>` : ''}`;
512
512
  // Insert label BEFORE the input-wrapper
513
513
  const container = shadow.querySelector('.input-container');
@@ -540,7 +540,7 @@ export class TyInput extends TyComponent {
540
540
  else {
541
541
  // Create initial structure with wrapper and slots
542
542
  const labelHtml = this.label ? `
543
- <label class="input-label">
543
+ <label class="ty-field-label">
544
544
  ${this.label}
545
545
  ${this.required ? `<span class="required-icon">${REQUIRED_ICON_SVG}</span>` : ''}
546
546
  </label>