@infineon/infineon-design-system-stencil 33.3.1--canary.1824.9e747abc2c6c3dcc35abd2895ce37d503bd1f141.0 → 33.3.1--canary.1824.50827ca955b08d789008a9f3d4a7504db4145299.0

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 (16) hide show
  1. package/dist/cjs/ifx-file-upload.cjs.entry.js +1 -1
  2. package/dist/cjs/ifx-file-upload.cjs.entry.js.map +1 -1
  3. package/dist/collection/components/file-upload/file-upload.css +2 -1
  4. package/dist/collection/components/file-upload/file-upload.stories.js +198 -329
  5. package/dist/collection/components/file-upload/file-upload.stories.js.map +1 -1
  6. package/dist/components/ifx-file-upload.js +1 -1
  7. package/dist/components/ifx-file-upload.js.map +1 -1
  8. package/dist/esm/ifx-file-upload.entry.js +1 -1
  9. package/dist/esm/ifx-file-upload.entry.js.map +1 -1
  10. package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
  11. package/dist/infineon-design-system-stencil/p-a338e9c7.entry.js +2 -0
  12. package/dist/infineon-design-system-stencil/p-a338e9c7.entry.js.map +1 -0
  13. package/dist/types/components/file-upload/file-upload.stories.d.ts +5 -6
  14. package/package.json +1 -1
  15. package/dist/infineon-design-system-stencil/p-6b8deb4a.entry.js +0 -2
  16. package/dist/infineon-design-system-stencil/p-6b8deb4a.entry.js.map +0 -1
package/dist/collection/components/file-upload/file-upload.stories.js CHANGED
@@ -1,4 +1,38 @@
1
1
  import { action } from "@storybook/addon-actions";
2
+ const hideAllControlsExcept = (allowedKeys) => {
3
+ const allProps = [
4
+ 'dragAndDrop', 'label', 'required', 'labelRequiredError', 'disabled', 'maxFiles', 'maxFileSizeMB',
5
+ 'allowedFileTypes', 'additionalAllowedFileTypes', 'labelBrowseFiles', 'labelDragAndDrop',
6
+ 'labelUploadedFilesHeading', 'labelFileTooLarge', 'labelUnsupportedFileType', 'labelUploaded',
7
+ 'labelSupportedFormatsTemplate', 'labelFileSingular', 'labelFilePlural', 'labelMaxFilesInfo',
8
+ 'labelMaxFilesExceeded', 'labelUploadFailed', 'ariaLabelBrowseFiles', 'ariaLabelDropzone',
9
+ 'ariaLabelFileInput', 'ariaLabelRemoveFile', 'ariaLabelCancelUpload', 'ariaLabelRetryUpload',
10
+ 'ariaLabelUploadingStatus', 'ariaLabelUploadedStatus', 'ariaLabelUploadFailedStatus'
11
+ ];
12
+ const argTypes = {};
13
+ for (const prop of allProps) {
14
+ if (!allowedKeys.includes(prop)) {
15
+ argTypes[prop] = { table: { disable: true } };
16
+ }
17
+ }
18
+ return argTypes;
19
+ };
20
+ const disableCustomEventControls = {
21
+ ifxFileUploadAdd: { table: { disable: true } },
22
+ ifxFileUploadRemove: { table: { disable: true } },
23
+ ifxFileUploadChange: { table: { disable: true } },
24
+ ifxFileUploadError: { table: { disable: true } },
25
+ ifxFileUploadInvalid: { table: { disable: true } },
26
+ ifxFileUploadStart: { table: { disable: true } },
27
+ ifxFileUploadComplete: { table: { disable: true } },
28
+ ifxFileUploadAllComplete: { table: { disable: true } },
29
+ ifxFileUploadAbort: { table: { disable: true } },
30
+ ifxFileUploadDrop: { table: { disable: true } },
31
+ ifxFileUploadClick: { table: { disable: true } },
32
+ ifxFileUploadMaxFilesExceeded: { table: { disable: true } },
33
+ ifxFileUploadValidation: { table: { disable: true } },
34
+ ifxFileUploadRetry: { table: { disable: true } }
35
+ };
2
36
  const meta = {
3
37
  title: 'Components/File Upload',
4
38
  tags: ['autodocs'],
@@ -6,232 +40,230 @@ const meta = {
6
40
  controls: { expanded: true },
7
41
  docs: {
8
42
  description: {
9
- component: 'Upload component with different interaction styles: button or drag-and-drop area.'
10
- }
11
- }
43
+ component: 'Upload component with different interaction styles: button or drag-and-drop area.',
44
+ },
45
+ },
12
46
  },
13
47
  argTypes: {
14
- // GENERAL
48
+ // --- FUNCTION ---
15
49
  dragAndDrop: {
50
+ description: 'Enables drag-and-drop upload area.',
16
51
  control: 'boolean',
17
- description: 'Enables drag-and-drop area. If false, a button-based upload is shown instead.'
52
+ table: { category: 'Function', defaultValue: { summary: 'false' } },
18
53
  },
19
54
  required: {
55
+ description: 'Marks the upload as required.',
20
56
  control: 'boolean',
21
- description: 'If set to true, at least one file must be uploaded. Validation fails if empty.'
57
+ table: { category: 'Function', defaultValue: { summary: 'false' } },
22
58
  },
23
59
  disabled: {
60
+ description: 'Disables the upload input.',
24
61
  control: 'boolean',
25
- description: 'Disables the component and prevents all interaction (upload, drag-and-drop, removal, etc.).',
62
+ table: { category: 'Function', defaultValue: { summary: 'false' } },
26
63
  },
27
64
  maxFileSizeMB: {
65
+ description: 'Maximum file size in MB.',
28
66
  control: 'number',
29
- description: 'Maximum file size allowed per file (in MB). Files larger than this will be rejected.'
67
+ table: { category: 'Function', defaultValue: { summary: '7' } },
30
68
  },
31
69
  allowedFileTypes: {
32
70
  control: { type: 'check' },
33
71
  options: ['jpg', 'png', 'pdf', 'mov', 'mp3', 'mp4'],
34
- description: 'Select one or more allowed file extensions. Internally mapped to MIME types.'
72
+ description: 'Select one or more allowed file extensions. Internally mapped to MIME types.',
73
+ table: { category: 'Function' },
35
74
  },
36
75
  additionalAllowedFileTypes: {
76
+ description: 'Custom MIME types (comma-separated).',
37
77
  control: 'text',
38
- description: 'Adds additional allowed file types using exact MIME types. Example: application/zip'
78
+ table: { category: 'Function' },
39
79
  },
40
80
  maxFiles: {
41
- control: { type: 'number', min: 1, step: 1 },
42
- description: 'Maximum number of files that can be uploaded in total. Must be at least 1. If unset, unlimited.'
81
+ description: 'Maximum number of allowed files.',
82
+ control: 'number',
83
+ table: { category: 'Function' },
43
84
  },
44
- // LABELS
85
+ // --- LABELS ---
45
86
  label: {
46
87
  control: 'text',
47
- description: 'Label shown above the upload area.',
48
- table: { category: 'LABELS' }
88
+ description: 'Main label shown above input.',
89
+ table: { category: 'Label' },
49
90
  },
50
91
  labelRequiredError: {
51
92
  control: 'text',
52
- description: 'Error message shown when no file is uploaded and `required` is true.',
53
- table: { category: 'LABELS' }
93
+ description: 'Shown when required and no file selected.',
94
+ table: { category: 'Label' },
54
95
  },
55
96
  labelBrowseFiles: {
56
97
  control: 'text',
57
- description: 'Text for the file selection button.',
58
- table: { category: 'LABELS' }
98
+ table: { category: 'Label' },
59
99
  },
60
100
  labelDragAndDrop: {
61
101
  control: 'text',
62
- description: 'Text shown inside the drag-and-drop area.',
63
- table: { category: 'LABELS' }
102
+ table: { category: 'Label' },
64
103
  },
65
104
  labelUploadedFilesHeading: {
66
105
  control: 'text',
67
- description: 'Heading above the uploaded files list.',
68
- table: { category: 'LABELS' }
106
+ table: { category: 'Label' },
69
107
  },
70
108
  labelFileTooLarge: {
71
109
  control: 'text',
72
- description: 'Shown when a file exceeds the allowed size. Use {{size}}.',
73
- table: { category: 'LABELS' }
110
+ table: { category: 'Label' },
74
111
  },
75
112
  labelUnsupportedFileType: {
76
113
  control: 'text',
77
- description: 'Shown when an unsupported file type is uploaded.',
78
- table: { category: 'LABELS' }
114
+ table: { category: 'Label' },
79
115
  },
80
116
  labelUploaded: {
81
117
  control: 'text',
82
- description: 'Label shown after successful upload.',
83
- table: { category: 'LABELS' }
84
- },
85
- labelUploadFailed: {
86
- control: 'text',
87
- description: 'Text shown when a file upload fails.',
88
- table: { category: 'LABELS' }
118
+ table: { category: 'Label' },
89
119
  },
90
120
  labelSupportedFormatsTemplate: {
91
121
  control: 'text',
92
- description: 'Template showing supported file formats. Use {{types}} and {{size}}.',
93
- table: { category: 'LABELS' }
122
+ table: { category: 'Label' },
94
123
  },
95
124
  labelFileSingular: {
96
125
  control: 'text',
97
- description: 'Singular word for file.',
98
- table: { category: 'LABELS' }
126
+ table: { category: 'Label' },
99
127
  },
100
128
  labelFilePlural: {
101
129
  control: 'text',
102
- description: 'Plural word for file.',
103
- table: { category: 'LABELS' }
130
+ table: { category: 'Label' },
104
131
  },
105
132
  labelMaxFilesInfo: {
106
133
  control: 'text',
107
- description: 'Message for max file info. Use {{count}}.',
108
- table: { category: 'LABELS' }
134
+ table: { category: 'Label' },
109
135
  },
110
136
  labelMaxFilesExceeded: {
111
137
  control: 'text',
112
- description: 'Error when exceeding max files. Use {{count}}.',
113
- table: { category: 'LABELS' }
138
+ table: { category: 'Label' },
139
+ },
140
+ labelUploadFailed: {
141
+ control: 'text',
142
+ table: { category: 'Label' },
114
143
  },
115
- // ARIA LABELS
144
+ // --- ARIA LABELS ---
116
145
  ariaLabelBrowseFiles: {
117
146
  control: 'text',
118
- description: 'ARIA label for the file upload button.',
119
- table: { category: 'ARIA LABELS' }
147
+ table: { category: 'Aria Labels' },
120
148
  },
121
149
  ariaLabelDropzone: {
122
150
  control: 'text',
123
- description: 'ARIA label for the dropzone.',
124
- table: { category: 'ARIA LABELS' }
151
+ table: { category: 'Aria Labels' },
125
152
  },
126
153
  ariaLabelFileInput: {
127
154
  control: 'text',
128
- description: 'ARIA label for the file input.',
129
- table: { category: 'ARIA LABELS' }
155
+ table: { category: 'Aria Labels' },
130
156
  },
131
157
  ariaLabelRemoveFile: {
132
158
  control: 'text',
133
- description: 'ARIA label for remove button.',
134
- table: { category: 'ARIA LABELS' }
159
+ table: { category: 'Aria Labels' },
135
160
  },
136
161
  ariaLabelCancelUpload: {
137
162
  control: 'text',
138
- description: 'ARIA label for cancel button.',
139
- table: { category: 'ARIA LABELS' }
163
+ table: { category: 'Aria Labels' },
140
164
  },
141
165
  ariaLabelRetryUpload: {
142
166
  control: 'text',
143
- description: 'ARIA label for retry button.',
144
- table: { category: 'ARIA LABELS' }
167
+ table: { category: 'Aria Labels' },
145
168
  },
146
169
  ariaLabelUploadingStatus: {
147
170
  control: 'text',
148
- description: 'ARIA status for uploading.',
149
- table: { category: 'ARIA LABELS' }
171
+ table: { category: 'Aria Labels' },
150
172
  },
151
173
  ariaLabelUploadedStatus: {
152
174
  control: 'text',
153
- description: 'ARIA status for success.',
154
- table: { category: 'ARIA LABELS' }
175
+ table: { category: 'Aria Labels' },
155
176
  },
156
177
  ariaLabelUploadFailedStatus: {
157
178
  control: 'text',
158
- description: 'ARIA status for failed upload.',
159
- table: { category: 'ARIA LABELS' }
179
+ table: { category: 'Aria Labels' },
160
180
  },
161
- // CUSTOM EVENTS
181
+ // --- CUSTOM EVENTS ---
162
182
  ifxFileUploadAdd: {
163
- description: 'Emitted when files are added.',
164
- table: { category: 'CUSTOM EVENTS' }
183
+ action: 'ifxFileUploadAdd',
184
+ table: { category: 'Custom Events' },
185
+ description: 'Triggered when valid files are added (via browse or drop).',
165
186
  },
166
187
  ifxFileUploadRemove: {
167
- description: 'Emitted when a file is removed.',
168
- table: { category: 'CUSTOM EVENTS' }
188
+ action: 'ifxFileUploadRemove',
189
+ table: { category: 'Custom Events' },
190
+ description: 'Fired when a user removes a file from the list.',
169
191
  },
170
192
  ifxFileUploadChange: {
171
- description: 'Emitted when file list changes.',
172
- table: { category: 'CUSTOM EVENTS' }
193
+ action: 'ifxFileUploadChange',
194
+ table: { category: 'Custom Events' },
195
+ description: 'Fired whenever the file list changes (add, remove, retry).',
173
196
  },
174
197
  ifxFileUploadError: {
175
- description: 'Emitted when an upload error occurs.',
176
- table: { category: 'CUSTOM EVENTS' }
198
+ action: 'ifxFileUploadError',
199
+ table: { category: 'Custom Events' },
200
+ description: 'Fired when a file is rejected or an upload fails.',
177
201
  },
178
202
  ifxFileUploadInvalid: {
179
- description: 'Emitted when file is invalid.',
180
- table: { category: 'CUSTOM EVENTS' }
203
+ action: 'ifxFileUploadInvalid',
204
+ table: { category: 'Custom Events' },
205
+ description: 'Fired for invalid files (e.g., wrong type or size).',
181
206
  },
182
207
  ifxFileUploadStart: {
183
- description: 'Emitted when upload starts.',
184
- table: { category: 'CUSTOM EVENTS' }
208
+ action: 'ifxFileUploadStart',
209
+ table: { category: 'Custom Events' },
210
+ description: 'Fired when an upload starts for a file.',
185
211
  },
186
212
  ifxFileUploadComplete: {
187
- description: 'Emitted when upload completes.',
188
- table: { category: 'CUSTOM EVENTS' }
213
+ action: 'ifxFileUploadComplete',
214
+ table: { category: 'Custom Events' },
215
+ description: 'Fired when a single file upload finishes successfully.',
189
216
  },
190
217
  ifxFileUploadAllComplete: {
191
- description: 'Emitted when all uploads are done.',
192
- table: { category: 'CUSTOM EVENTS' }
218
+ action: 'ifxFileUploadAllComplete',
219
+ table: { category: 'Custom Events' },
220
+ description: 'Fired when all current uploads have completed.',
193
221
  },
194
222
  ifxFileUploadAbort: {
195
- description: 'Emitted when an upload is cancelled.',
196
- table: { category: 'CUSTOM EVENTS' }
223
+ action: 'ifxFileUploadAbort',
224
+ table: { category: 'Custom Events' },
225
+ description: 'Fired when a user cancels an in-progress upload.',
197
226
  },
198
227
  ifxFileUploadDrop: {
199
- description: 'Emitted on file drop.',
200
- table: { category: 'CUSTOM EVENTS' }
228
+ action: 'ifxFileUploadDrop',
229
+ table: { category: 'Custom Events' },
230
+ description: 'Fired when files are dropped via drag-and-drop.',
201
231
  },
202
232
  ifxFileUploadClick: {
203
- description: 'Emitted on click.',
204
- table: { category: 'CUSTOM EVENTS' }
233
+ action: 'ifxFileUploadClick',
234
+ table: { category: 'Custom Events' },
235
+ description: 'Fired when the upload button or dropzone is clicked.',
205
236
  },
206
237
  ifxFileUploadMaxFilesExceeded: {
207
- description: 'Emitted when too many files added.',
208
- table: { category: 'CUSTOM EVENTS' }
238
+ action: 'ifxFileUploadMaxFilesExceeded',
239
+ table: { category: 'Custom Events' },
240
+ description: 'Fired when the selected files exceed the maxFiles limit.',
209
241
  },
210
242
  ifxFileUploadValidation: {
211
- description: 'Emitted after required validation.',
212
- table: { category: 'CUSTOM EVENTS' }
243
+ action: 'ifxFileUploadValidation',
244
+ table: { category: 'Custom Events' },
245
+ description: 'Fired after required validation is checked.',
213
246
  },
214
247
  ifxFileUploadRetry: {
215
- description: 'Emitted when retry is triggered.',
216
- table: { category: 'CUSTOM EVENTS' }
217
- }
248
+ action: 'ifxFileUploadRetry',
249
+ table: { category: 'Custom Events' },
250
+ description: 'Fired when the retry button is clicked for a failed upload.',
251
+ },
218
252
  }
219
253
  };
220
254
  export default meta;
221
- const renderFileUpload = (args) => {
255
+ const BaseTemplate = (args) => {
256
+ var _a;
222
257
  const el = document.createElement('ifx-file-upload');
223
258
  if (args.dragAndDrop)
224
259
  el.setAttribute('drag-and-drop', '');
225
260
  el.setAttribute('max-file-size-m-b', args.maxFileSizeMB);
226
261
  const rawTypes = Array.isArray(args.allowedFileTypes)
227
262
  ? args.allowedFileTypes
228
- : args.allowedFileTypes.split(',');
229
- // Map 'jpg' ➜ ['jpg', 'jpeg']
230
- const mappedTypes = rawTypes.flatMap(type => {
231
- if (type === 'jpg')
232
- return ['jpg', 'jpeg'];
233
- return [type];
234
- });
263
+ : ((_a = args.allowedFileTypes) === null || _a === void 0 ? void 0 : _a.split(',')) || [];
264
+ const mappedTypes = rawTypes.flatMap(type => type === 'jpg' ? ['jpg', 'jpeg'] : [type]);
265
+ const uniqueTypes = Array.from(new Set(mappedTypes));
266
+ el.setAttribute('allowed-file-types', uniqueTypes.join(','));
235
267
  if (args.additionalAllowedFileTypes) {
236
268
  const value = Array.isArray(args.additionalAllowedFileTypes)
237
269
  ? args.additionalAllowedFileTypes.join(',')
@@ -241,20 +273,8 @@ const renderFileUpload = (args) => {
241
273
  if (args.maxFiles !== undefined && args.maxFiles !== null) {
242
274
  el.setAttribute('max-files', String(args.maxFiles));
243
275
  }
244
- if (args.required) {
245
- el.setAttribute('required', '');
246
- }
247
- else {
248
- el.removeAttribute('required');
249
- }
250
- if (args.disabled) {
251
- el.setAttribute('disabled', '');
252
- }
253
- else {
254
- el.removeAttribute('disabled');
255
- }
256
- const uniqueTypes = Array.from(new Set(mappedTypes));
257
- el.setAttribute('allowed-file-types', uniqueTypes.join(','));
276
+ args.required ? el.setAttribute('required', '') : el.removeAttribute('required');
277
+ args.disabled ? el.setAttribute('disabled', '') : el.removeAttribute('disabled');
258
278
  el.setAttribute('label', args.label);
259
279
  el.setAttribute('label-required-error', args.labelRequiredError);
260
280
  el.setAttribute('label-browse-files', args.labelBrowseFiles);
@@ -293,225 +313,74 @@ const renderFileUpload = (args) => {
293
313
  el.addEventListener('ifxFileUploadRetry', action('ifxFileUploadRetry'));
294
314
  return el;
295
315
  };
296
- export const UploadFileButton = {
297
- name: 'Upload File (Button)',
298
- args: {
299
- dragAndDrop: false,
300
- label: 'Label',
301
- required: false,
302
- labelRequiredError: 'You must upload at least one file.',
303
- disabled: false,
304
- maxFileSizeMB: 7,
305
- allowedFileTypes: ['jpg', 'png', 'pdf'],
306
- additionalAllowedFileTypes: 'application/zip,text/csv',
307
- labelBrowseFiles: 'Browse files',
308
- labelDragAndDrop: 'Drag & Drop or browse files to upload',
309
- labelUploadedFilesHeading: 'Uploaded files',
310
- labelFileTooLarge: 'Upload failed. Max file size: {{size}}MB.',
311
- labelUnsupportedFileType: 'Unsupported file type.',
312
- labelUploaded: 'Successfully uploaded',
313
- labelSupportedFormatsTemplate: 'Supported file formats: {{types}}. Max file size: {{size}}MB.',
314
- labelFileSingular: 'file',
315
- labelFilePlural: 'files',
316
- labelMaxFilesInfo: 'You can upload up to {{count}} {{files}}.',
317
- labelMaxFilesExceeded: 'You have exceeded the maximum of {{count}} {{files}}.',
318
- labelUploadFailed: 'Upload failed. Please try again.',
319
- ariaLabelBrowseFiles: 'Browse files',
320
- ariaLabelDropzone: 'Upload area. Click to browse or drag and drop files.',
321
- ariaLabelFileInput: 'Upload file',
322
- ariaLabelRemoveFile: 'Remove file',
323
- ariaLabelCancelUpload: 'Cancel upload',
324
- ariaLabelRetryUpload: 'Retry upload',
325
- ariaLabelUploadingStatus: 'Upload in progress',
326
- ariaLabelUploadedStatus: 'Upload completed',
327
- ariaLabelUploadFailedStatus: 'Upload failed'
328
- },
329
- render: renderFileUpload
316
+ export const Default = BaseTemplate.bind({});
317
+ Default.args = {
318
+ dragAndDrop: false,
319
+ label: 'Label',
320
+ required: false,
321
+ labelRequiredError: 'You must upload at least one file.',
322
+ disabled: false,
323
+ maxFileSizeMB: 7,
324
+ allowedFileTypes: ['jpg', 'png', 'pdf'],
325
+ additionalAllowedFileTypes: 'application/zip,text/csv',
326
+ labelBrowseFiles: 'Browse files',
327
+ labelDragAndDrop: 'Drag & Drop or browse files to upload',
328
+ labelUploadedFilesHeading: 'Uploaded files',
329
+ labelFileTooLarge: 'Upload failed. Max file size: {{size}}MB.',
330
+ labelUnsupportedFileType: 'Unsupported file type.',
331
+ labelUploaded: 'Successfully uploaded',
332
+ labelSupportedFormatsTemplate: 'Supported file formats: {{types}}. Max file size: {{size}}MB.',
333
+ labelFileSingular: 'file',
334
+ labelFilePlural: 'files',
335
+ labelMaxFilesInfo: 'You can upload up to {{count}} {{files}}.',
336
+ labelMaxFilesExceeded: 'You have exceeded the maximum of {{count}} {{files}}.',
337
+ labelUploadFailed: 'Upload failed. Please try again.',
338
+ ariaLabelBrowseFiles: 'Browse files',
339
+ ariaLabelDropzone: 'Upload area. Click to browse or drag and drop files.',
340
+ ariaLabelFileInput: 'Upload file',
341
+ ariaLabelRemoveFile: 'Remove file',
342
+ ariaLabelCancelUpload: 'Cancel upload',
343
+ ariaLabelRetryUpload: 'Retry upload',
344
+ ariaLabelUploadingStatus: 'Upload in progress',
345
+ ariaLabelUploadedStatus: 'Upload completed',
346
+ ariaLabelUploadFailedStatus: 'Upload failed'
330
347
  };
331
- export const UploadAreaDragDrop = {
332
- name: 'Upload Area (Drag&Drop)',
333
- args: {
334
- dragAndDrop: true,
335
- label: 'Label',
336
- required: false,
337
- labelRequiredError: 'You must upload at least one file.',
338
- disabled: false,
339
- maxFileSizeMB: 7,
340
- allowedFileTypes: ['jpg', 'png', 'pdf'],
341
- additionalAllowedFileTypes: 'application/zip,text/csv',
342
- labelBrowseFiles: 'Browse files',
343
- labelDragAndDrop: 'Drag & Drop or browse files to upload',
344
- labelUploadedFilesHeading: 'Uploaded files',
345
- labelFileTooLarge: 'Upload failed. Max file size: {{size}}MB.',
346
- labelUnsupportedFileType: 'Unsupported file type.',
347
- labelUploaded: 'Successfully uploaded',
348
- labelSupportedFormatsTemplate: 'Supported file formats: {{types}}. Max file size: {{size}}MB.',
349
- labelFileSingular: 'file',
350
- labelFilePlural: 'files',
351
- labelMaxFilesInfo: 'You can upload up to {{count}} {{files}}.',
352
- labelMaxFilesExceeded: 'You have exceeded the maximum of {{count}} {{files}}.',
353
- labelUploadFailed: 'Upload failed. Please try again.',
354
- ariaLabelBrowseFiles: 'Browse files',
355
- ariaLabelDropzone: 'Upload area. Click to browse or drag and drop files.',
356
- ariaLabelFileInput: 'Upload file',
357
- ariaLabelRemoveFile: 'Remove file',
358
- ariaLabelCancelUpload: 'Cancel upload',
359
- ariaLabelRetryUpload: 'Retry upload',
360
- ariaLabelUploadingStatus: 'Upload in progress',
361
- ariaLabelUploadedStatus: 'Upload completed',
362
- ariaLabelUploadFailedStatus: 'Upload failed'
363
- },
364
- render: renderFileUpload
365
- };
366
- export const UploadStatesDemo = {
367
- name: 'Upload States (Demo)',
368
- args: {
369
- dragAndDrop: false
370
- },
371
- parameters: {
372
- docs: {
373
- description: {
374
- story: 'Visual preview of all file states (success, upload in progress, rejected). Only the `dragAndDrop` control is available.'
375
- }
376
- },
377
- previewTabs: {
378
- 'canvas': { hidden: false },
379
- 'storybook/docs/panel': { hidden: false },
380
- 'storybook/actions/panel': { hidden: true },
381
- 'storybook/interactions/panel': { hidden: true }
348
+ export const UploadAreaDragDrop = BaseTemplate.bind({});
349
+ UploadAreaDragDrop.args = Object.assign(Object.assign({}, Default.args), { dragAndDrop: true });
350
+ // Demo UploadStatesDemo
351
+ export const UploadStatesDemo = BaseTemplate.bind({});
352
+ UploadStatesDemo.args = Object.assign(Object.assign({}, Default.args), { dragAndDrop: true });
353
+ UploadStatesDemo.parameters = {
354
+ docs: {
355
+ description: {
356
+ story: 'Visual preview of all file states (success, upload in progress, rejected).'
382
357
  }
383
- },
384
- argTypes: {
385
- dragAndDrop: { control: 'boolean' },
386
- // Disable all other controls
387
- disabled: { table: { disable: true } },
388
- labelUploadFailed: { table: { disable: true } },
389
- required: { table: { disable: true } },
390
- label: { table: { disable: true } },
391
- labelRequiredError: { table: { disable: true } },
392
- maxFileSizeMB: { table: { disable: true } },
393
- allowedFileTypes: { table: { disable: true } },
394
- additionalAllowedFileTypes: { table: { disable: true } },
395
- labelBrowseFiles: { table: { disable: true } },
396
- labelDragAndDrop: { table: { disable: true } },
397
- labelFileSingular: { table: { disable: true } },
398
- labelFilePlural: { table: { disable: true } },
399
- maxFiles: { table: { disable: true } },
400
- labelMaxFilesInfo: { table: { disable: true } },
401
- labelMaxFilesExceeded: { table: { disable: true } },
402
- labelUploadedFilesHeading: { table: { disable: true } },
403
- labelFileTooLarge: { table: { disable: true } },
404
- labelUnsupportedFileType: { table: { disable: true } },
405
- labelUploaded: { table: { disable: true } },
406
- labelSupportedFormatsTemplate: { table: { disable: true } },
407
- ifxFileUploadAdd: { table: { disable: true } },
408
- ifxFileUploadRemove: { table: { disable: true } },
409
- ifxFileUploadChange: { table: { disable: true } },
410
- ifxFileUploadError: { table: { disable: true } },
411
- ifxFileUploadInvalid: { table: { disable: true } },
412
- ifxFileUploadStart: { table: { disable: true } },
413
- ifxFileUploadComplete: { table: { disable: true } },
414
- ifxFileUploadAllComplete: { table: { disable: true } },
415
- ifxFileUploadAbort: { table: { disable: true } },
416
- ifxFileUploadDrop: { table: { disable: true } },
417
- ifxFileUploadClick: { table: { disable: true } },
418
- ifxFileUploadMaxFilesExceeded: { table: { disable: true } },
419
- ifxFileUploadValidation: { table: { disable: true } },
420
- ifxFileUploadRetry: { table: { disable: true } },
421
- // ARIA labels – disabled in demo
422
- ariaLabelBrowseFiles: { table: { disable: true } },
423
- ariaLabelDropzone: { table: { disable: true } },
424
- ariaLabelFileInput: { table: { disable: true } },
425
- ariaLabelRemoveFile: { table: { disable: true } },
426
- ariaLabelCancelUpload: { table: { disable: true } },
427
- ariaLabelRetryUpload: { table: { disable: true } },
428
- ariaLabelUploadingStatus: { table: { disable: true } },
429
- ariaLabelUploadedStatus: { table: { disable: true } },
430
- ariaLabelUploadFailedStatus: { table: { disable: true } },
431
- },
432
- render: (args) => {
433
- const el = document.createElement('ifx-file-upload');
434
- if (args.dragAndDrop) {
435
- el.setAttribute('drag-and-drop', '');
436
- }
437
- setTimeout(() => {
438
- var _a, _b;
439
- (_b = (_a = el).injectDemoState) === null || _b === void 0 ? void 0 : _b.call(_a);
440
- }, 0);
441
- return el;
442
358
  }
443
359
  };
444
- export const UploadRequiredError = {
445
- name: 'Upload Required Error (Demo)',
446
- args: {
447
- dragAndDrop: false
448
- },
449
- parameters: {
450
- docs: {
451
- description: {
452
- story: 'Demonstrates the error state when the upload is required but no files have been added. Only `dragAndDrop` is controllable in this demo.'
453
- }
454
- }
455
- },
456
- argTypes: {
457
- dragAndDrop: { control: 'boolean' },
458
- // Disable all other controls
459
- disabled: { table: { disable: true } },
460
- labelUploadFailed: { table: { disable: true } },
461
- required: { table: { disable: true } },
462
- label: { table: { disable: true } },
463
- labelRequiredError: { table: { disable: true } },
464
- maxFileSizeMB: { table: { disable: true } },
465
- allowedFileTypes: { table: { disable: true } },
466
- additionalAllowedFileTypes: { table: { disable: true } },
467
- labelBrowseFiles: { table: { disable: true } },
468
- labelDragAndDrop: { table: { disable: true } },
469
- labelFileSingular: { table: { disable: true } },
470
- labelFilePlural: { table: { disable: true } },
471
- maxFiles: { table: { disable: true } },
472
- labelMaxFilesInfo: { table: { disable: true } },
473
- labelMaxFilesExceeded: { table: { disable: true } },
474
- labelUploadedFilesHeading: { table: { disable: true } },
475
- labelFileTooLarge: { table: { disable: true } },
476
- labelUnsupportedFileType: { table: { disable: true } },
477
- labelUploaded: { table: { disable: true } },
478
- labelSupportedFormatsTemplate: { table: { disable: true } },
479
- ifxFileUploadAdd: { table: { disable: true } },
480
- ifxFileUploadRemove: { table: { disable: true } },
481
- ifxFileUploadChange: { table: { disable: true } },
482
- ifxFileUploadError: { table: { disable: true } },
483
- ifxFileUploadInvalid: { table: { disable: true } },
484
- ifxFileUploadStart: { table: { disable: true } },
485
- ifxFileUploadComplete: { table: { disable: true } },
486
- ifxFileUploadAllComplete: { table: { disable: true } },
487
- ifxFileUploadAbort: { table: { disable: true } },
488
- ifxFileUploadDrop: { table: { disable: true } },
489
- ifxFileUploadClick: { table: { disable: true } },
490
- ifxFileUploadMaxFilesExceeded: { table: { disable: true } },
491
- ifxFileUploadValidation: { table: { disable: true } },
492
- ifxFileUploadRetry: { table: { disable: true } },
493
- // ARIA labels – disabled in demo
494
- ariaLabelBrowseFiles: { table: { disable: true } },
495
- ariaLabelDropzone: { table: { disable: true } },
496
- ariaLabelFileInput: { table: { disable: true } },
497
- ariaLabelRemoveFile: { table: { disable: true } },
498
- ariaLabelCancelUpload: { table: { disable: true } },
499
- ariaLabelRetryUpload: { table: { disable: true } },
500
- ariaLabelUploadingStatus: { table: { disable: true } },
501
- ariaLabelUploadedStatus: { table: { disable: true } },
502
- ariaLabelUploadFailedStatus: { table: { disable: true } },
503
- },
504
- render: (args) => {
505
- const el = document.createElement('ifx-file-upload');
506
- if (args.dragAndDrop)
507
- el.setAttribute('drag-and-drop', '');
508
- el.setAttribute('required', '');
509
- // Fehlerzustand gezielt triggern
510
- setTimeout(() => {
511
- var _a, _b;
512
- (_b = (_a = el).triggerDemoValidation) === null || _b === void 0 ? void 0 : _b.call(_a);
513
- }, 100);
360
+ UploadStatesDemo.decorators = [
361
+ (storyFn) => {
362
+ const el = storyFn();
363
+ setTimeout(() => { var _a; return (_a = el === null || el === void 0 ? void 0 : el.injectDemoState) === null || _a === void 0 ? void 0 : _a.call(el); }, 0);
514
364
  return el;
515
365
  }
366
+ ];
367
+ UploadStatesDemo.argTypes = Object.assign(Object.assign({}, hideAllControlsExcept(['dragAndDrop'])), disableCustomEventControls);
368
+ // Demo UploadRequiredError
369
+ export const UploadRequiredError = BaseTemplate.bind({});
370
+ UploadRequiredError.args = Object.assign(Object.assign({}, Default.args), { required: true });
371
+ UploadRequiredError.parameters = {
372
+ docs: {
373
+ description: {
374
+ story: 'Demonstrates the error state when the upload is required but no files have been added.'
375
+ }
376
+ }
516
377
  };
378
+ UploadRequiredError.decorators = [
379
+ (storyFn) => {
380
+ const el = storyFn();
381
+ setTimeout(() => { var _a; return (_a = el === null || el === void 0 ? void 0 : el.triggerDemoValidation) === null || _a === void 0 ? void 0 : _a.call(el); }, 100);
382
+ return el;
383
+ }
384
+ ];
385
+ UploadRequiredError.argTypes = Object.assign(Object.assign({}, hideAllControlsExcept(['dragAndDrop'])), disableCustomEventControls);
517
386
  //# sourceMappingURL=file-upload.stories.js.map