@design.estate/dees-catalog 3.76.0 → 3.76.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 (30) hide show
  1. package/dist_bundle/bundle.js +429 -407
  2. package/dist_ts_web/00_commitinfo_data.js +1 -1
  3. package/dist_ts_web/elements/00group-input/dees-input-checkbox/dees-input-checkbox.demo.js +96 -94
  4. package/dist_ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.js +27 -25
  5. package/dist_ts_web/elements/00group-input/dees-input-fileupload/demo.js +36 -36
  6. package/dist_ts_web/elements/00group-input/dees-input-iban/dees-input-iban.demo.js +20 -18
  7. package/dist_ts_web/elements/00group-input/dees-input-list/dees-input-list.demo.js +22 -20
  8. package/dist_ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.demo.js +67 -65
  9. package/dist_ts_web/elements/00group-input/dees-input-phone/dees-input-phone.demo.js +20 -18
  10. package/dist_ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.demo.js +4 -4
  11. package/dist_ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.demo.js +54 -48
  12. package/dist_ts_web/elements/00group-input/dees-input-tags/dees-input-tags.demo.js +21 -19
  13. package/dist_ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.js +37 -35
  14. package/dist_ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.demo.js +35 -33
  15. package/dist_ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.demo.js +19 -19
  16. package/package.json +1 -1
  17. package/ts_web/00_commitinfo_data.ts +1 -1
  18. package/ts_web/elements/00group-input/dees-input-checkbox/dees-input-checkbox.demo.ts +95 -93
  19. package/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.ts +40 -38
  20. package/ts_web/elements/00group-input/dees-input-fileupload/demo.ts +35 -35
  21. package/ts_web/elements/00group-input/dees-input-iban/dees-input-iban.demo.ts +19 -17
  22. package/ts_web/elements/00group-input/dees-input-list/dees-input-list.demo.ts +21 -19
  23. package/ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.demo.ts +66 -64
  24. package/ts_web/elements/00group-input/dees-input-phone/dees-input-phone.demo.ts +19 -17
  25. package/ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.demo.ts +4 -4
  26. package/ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.demo.ts +53 -47
  27. package/ts_web/elements/00group-input/dees-input-tags/dees-input-tags.demo.ts +20 -18
  28. package/ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.ts +36 -34
  29. package/ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.demo.ts +34 -32
  30. package/ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.demo.ts +18 -18
package/ts_web/elements/00group-input/dees-input-checkbox/dees-input-checkbox.demo.ts CHANGED
@@ -111,90 +111,92 @@ export const demoFunc = () => html`
111
111
 
112
112
  <div class="demo-container">
113
113
  <dees-panel .title=${'Basic Checkboxes'} .subtitle=${'Simple checkbox examples with various labels'}>
114
- <div class="checkbox-group">
115
- <dees-input-checkbox
116
- .label=${'I agree to the Terms and Conditions'}
114
+ <dees-form>
115
+ <dees-input-checkbox
116
+ .label=${'I agree to the Terms and Conditions'}
117
117
  .value=${true}
118
118
  .key=${'terms'}
119
119
  ></dees-input-checkbox>
120
-
121
- <dees-input-checkbox
122
- .label=${'Subscribe to newsletter'}
120
+
121
+ <dees-input-checkbox
122
+ .label=${'Subscribe to newsletter'}
123
123
  .value=${false}
124
124
  .key=${'newsletter'}
125
125
  ></dees-input-checkbox>
126
-
127
- <dees-input-checkbox
128
- .label=${'Enable notifications'}
126
+
127
+ <dees-input-checkbox
128
+ .label=${'Enable notifications'}
129
129
  .value=${false}
130
130
  .description=${'Receive email updates about your account'}
131
131
  .key=${'notifications'}
132
132
  ></dees-input-checkbox>
133
- </div>
133
+ </dees-form>
134
134
  </dees-panel>
135
135
 
136
136
  <dees-panel .title=${'Checkbox States'} .subtitle=${'Different checkbox states and configurations'}>
137
- <div class="checkbox-group">
138
- <dees-input-checkbox
139
- .label=${'Default state'}
137
+ <dees-form>
138
+ <dees-input-checkbox
139
+ .label=${'Default state'}
140
140
  .value=${false}
141
141
  ></dees-input-checkbox>
142
-
143
- <dees-input-checkbox
144
- .label=${'Checked state'}
142
+
143
+ <dees-input-checkbox
144
+ .label=${'Checked state'}
145
145
  .value=${true}
146
146
  ></dees-input-checkbox>
147
-
148
- <dees-input-checkbox
149
- .label=${'Disabled unchecked'}
147
+
148
+ <dees-input-checkbox
149
+ .label=${'Disabled unchecked'}
150
150
  .value=${false}
151
151
  .disabled=${true}
152
152
  ></dees-input-checkbox>
153
-
154
- <dees-input-checkbox
155
- .label=${'Disabled checked'}
153
+
154
+ <dees-input-checkbox
155
+ .label=${'Disabled checked'}
156
156
  .value=${true}
157
157
  .disabled=${true}
158
158
  ></dees-input-checkbox>
159
-
160
- <dees-input-checkbox
161
- .label=${'Required checkbox'}
159
+
160
+ <dees-input-checkbox
161
+ .label=${'Required checkbox'}
162
162
  .required=${true}
163
163
  .key=${'required'}
164
164
  ></dees-input-checkbox>
165
- </div>
165
+ </dees-form>
166
166
  </dees-panel>
167
167
 
168
168
  <dees-panel .title=${'Horizontal Layout'} .subtitle=${'Checkboxes arranged horizontally for compact forms'}>
169
- <div class="horizontal-checkboxes">
170
- <dees-input-checkbox
171
- .label=${'Option A'}
172
- .value=${false}
173
- .layoutMode=${'horizontal'}
174
- .key=${'optionA'}
175
- ></dees-input-checkbox>
176
-
177
- <dees-input-checkbox
178
- .label=${'Option B'}
179
- .value=${true}
180
- .layoutMode=${'horizontal'}
181
- .key=${'optionB'}
182
- ></dees-input-checkbox>
183
-
184
- <dees-input-checkbox
185
- .label=${'Option C'}
186
- .value=${false}
187
- .layoutMode=${'horizontal'}
188
- .key=${'optionC'}
189
- ></dees-input-checkbox>
190
-
191
- <dees-input-checkbox
192
- .label=${'Option D'}
193
- .value=${true}
194
- .layoutMode=${'horizontal'}
195
- .key=${'optionD'}
196
- ></dees-input-checkbox>
197
- </div>
169
+ <dees-form>
170
+ <div class="horizontal-checkboxes">
171
+ <dees-input-checkbox
172
+ .label=${'Option A'}
173
+ .value=${false}
174
+ .layoutMode=${'horizontal'}
175
+ .key=${'optionA'}
176
+ ></dees-input-checkbox>
177
+
178
+ <dees-input-checkbox
179
+ .label=${'Option B'}
180
+ .value=${true}
181
+ .layoutMode=${'horizontal'}
182
+ .key=${'optionB'}
183
+ ></dees-input-checkbox>
184
+
185
+ <dees-input-checkbox
186
+ .label=${'Option C'}
187
+ .value=${false}
188
+ .layoutMode=${'horizontal'}
189
+ .key=${'optionC'}
190
+ ></dees-input-checkbox>
191
+
192
+ <dees-input-checkbox
193
+ .label=${'Option D'}
194
+ .value=${true}
195
+ .layoutMode=${'horizontal'}
196
+ .key=${'optionD'}
197
+ ></dees-input-checkbox>
198
+ </div>
199
+ </dees-form>
198
200
  </dees-panel>
199
201
 
200
202
  <dees-panel .title=${'Feature Selection Example'} .subtitle=${'Common use case for feature toggles with batch operations'}>
@@ -204,76 +206,76 @@ export const demoFunc = () => html`
204
206
  </div>
205
207
 
206
208
  <div class="feature-list">
207
- <div class="checkbox-group">
208
- <dees-input-checkbox
209
- .label=${'Dark Mode Support'}
209
+ <dees-form>
210
+ <dees-input-checkbox
211
+ .label=${'Dark Mode Support'}
210
212
  .value=${true}
211
213
  .key=${'feature1'}
212
214
  ></dees-input-checkbox>
213
-
214
- <dees-input-checkbox
215
- .label=${'Email Notifications'}
215
+
216
+ <dees-input-checkbox
217
+ .label=${'Email Notifications'}
216
218
  .value=${true}
217
219
  .key=${'feature2'}
218
220
  ></dees-input-checkbox>
219
-
220
- <dees-input-checkbox
221
- .label=${'Two-Factor Authentication'}
221
+
222
+ <dees-input-checkbox
223
+ .label=${'Two-Factor Authentication'}
222
224
  .value=${false}
223
225
  .key=${'feature3'}
224
226
  ></dees-input-checkbox>
225
-
226
- <dees-input-checkbox
227
- .label=${'API Access'}
227
+
228
+ <dees-input-checkbox
229
+ .label=${'API Access'}
228
230
  .value=${true}
229
231
  .key=${'feature4'}
230
232
  ></dees-input-checkbox>
231
-
232
- <dees-input-checkbox
233
- .label=${'Advanced Analytics'}
233
+
234
+ <dees-input-checkbox
235
+ .label=${'Advanced Analytics'}
234
236
  .value=${false}
235
237
  .key=${'feature5'}
236
238
  ></dees-input-checkbox>
237
- </div>
239
+ </dees-form>
238
240
  </div>
239
241
  </dees-panel>
240
242
 
241
243
  <dees-panel .title=${'Privacy Settings Example'} .subtitle=${'Checkboxes in a typical form context'}>
242
244
  <div class="form-section">
243
245
  <h4 class="section-title">Privacy Preferences</h4>
244
-
245
- <div class="checkbox-group">
246
- <dees-input-checkbox
247
- .label=${'Share analytics data'}
246
+
247
+ <dees-form>
248
+ <dees-input-checkbox
249
+ .label=${'Share analytics data'}
248
250
  .value=${true}
249
251
  .description=${'Help us improve by sharing anonymous usage data'}
250
252
  ></dees-input-checkbox>
251
-
252
- <dees-input-checkbox
253
- .label=${'Personalized recommendations'}
253
+
254
+ <dees-input-checkbox
255
+ .label=${'Personalized recommendations'}
254
256
  .value=${true}
255
257
  .description=${'Get suggestions based on your activity'}
256
258
  ></dees-input-checkbox>
257
-
258
- <dees-input-checkbox
259
- .label=${'Marketing communications'}
259
+
260
+ <dees-input-checkbox
261
+ .label=${'Marketing communications'}
260
262
  .value=${false}
261
263
  .description=${'Receive promotional emails and special offers'}
262
264
  ></dees-input-checkbox>
263
-
264
- <dees-input-checkbox
265
- .label=${'Third-party integrations'}
265
+
266
+ <dees-input-checkbox
267
+ .label=${'Third-party integrations'}
266
268
  .value=${false}
267
269
  .description=${'Allow approved partners to access your data'}
268
270
  ></dees-input-checkbox>
269
- </div>
271
+ </dees-form>
270
272
  </div>
271
273
  </dees-panel>
272
274
 
273
275
  <dees-panel .title=${'Interactive Example'} .subtitle=${'Click checkboxes to see value changes'}>
274
- <div class="checkbox-group">
275
- <dees-input-checkbox
276
- .label=${'Feature toggle'}
276
+ <dees-form>
277
+ <dees-input-checkbox
278
+ .label=${'Feature toggle'}
277
279
  .value=${false}
278
280
  @changeSubject=${(event: CustomEvent) => {
279
281
  const output = document.querySelector('#checkbox-output');
@@ -283,9 +285,9 @@ export const demoFunc = () => html`
283
285
  }
284
286
  }}
285
287
  ></dees-input-checkbox>
286
-
287
- <dees-input-checkbox
288
- .label=${'Debug mode'}
288
+
289
+ <dees-input-checkbox
290
+ .label=${'Debug mode'}
289
291
  .value=${false}
290
292
  @changeSubject=${(event: CustomEvent) => {
291
293
  const output = document.querySelector('#debug-output');
@@ -295,8 +297,8 @@ export const demoFunc = () => html`
295
297
  }
296
298
  }}
297
299
  ></dees-input-checkbox>
298
- </div>
299
-
300
+ </dees-form>
301
+
300
302
  <div class="interactive-section">
301
303
  <div id="checkbox-output" class="output-text">Feature is disabled</div>
302
304
  <div id="debug-output" class="output-text" style="margin-top: 8px;">Debug mode: OFF</div>
package/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.ts CHANGED
@@ -69,7 +69,7 @@ export const demoFunc = () => html`
69
69
  }
70
70
  }}>
71
71
  <dees-panel .title=${'1. Basic Dropdowns'} .subtitle=${'Standard dropdown with search functionality and various options'}>
72
- <div class="input-group">
72
+ <dees-form>
73
73
  <dees-input-dropdown
74
74
  .label=${'Select Country'}
75
75
  .description=${'Choose the country where your business is registered'}
@@ -95,7 +95,7 @@ export const demoFunc = () => html`
95
95
  { option: 'Guest', key: 'guest' }
96
96
  ]}
97
97
  ></dees-input-dropdown>
98
- </div>
98
+ </dees-form>
99
99
  </dees-panel>
100
100
  </dees-demowrapper>
101
101
 
@@ -136,40 +136,42 @@ export const demoFunc = () => html`
136
136
  });
137
137
  }}>
138
138
  <dees-panel .title=${'3. Horizontal Layout'} .subtitle=${'Multiple dropdowns in a horizontal layout for compact forms'}>
139
- <div class="horizontal-group">
140
- <dees-input-dropdown
141
- .label=${'Department'}
142
- .layoutMode=${'horizontal'}
143
- .options=${[
144
- { option: 'Engineering', key: 'eng' },
145
- { option: 'Design', key: 'design' },
146
- { option: 'Marketing', key: 'marketing' },
147
- { option: 'Sales', key: 'sales' }
148
- ]}
149
- ></dees-input-dropdown>
150
-
151
- <dees-input-dropdown
152
- .label=${'Team Size'}
153
- .layoutMode=${'horizontal'}
154
- .enableSearch=${false}
155
- .options=${[
156
- { option: '1-5', key: 'small' },
157
- { option: '6-20', key: 'medium' },
158
- { option: '21-50', key: 'large' },
159
- { option: '50+', key: 'xlarge' }
160
- ]}
161
- ></dees-input-dropdown>
162
-
163
- <dees-input-dropdown
164
- .label=${'Location'}
165
- .layoutMode=${'horizontal'}
166
- .options=${[
167
- { option: 'Remote', key: 'remote' },
168
- { option: 'On-site', key: 'onsite' },
169
- { option: 'Hybrid', key: 'hybrid' }
170
- ]}
171
- ></dees-input-dropdown>
172
- </div>
139
+ <dees-form>
140
+ <div class="horizontal-group">
141
+ <dees-input-dropdown
142
+ .label=${'Department'}
143
+ .layoutMode=${'horizontal'}
144
+ .options=${[
145
+ { option: 'Engineering', key: 'eng' },
146
+ { option: 'Design', key: 'design' },
147
+ { option: 'Marketing', key: 'marketing' },
148
+ { option: 'Sales', key: 'sales' }
149
+ ]}
150
+ ></dees-input-dropdown>
151
+
152
+ <dees-input-dropdown
153
+ .label=${'Team Size'}
154
+ .layoutMode=${'horizontal'}
155
+ .enableSearch=${false}
156
+ .options=${[
157
+ { option: '1-5', key: 'small' },
158
+ { option: '6-20', key: 'medium' },
159
+ { option: '21-50', key: 'large' },
160
+ { option: '50+', key: 'xlarge' }
161
+ ]}
162
+ ></dees-input-dropdown>
163
+
164
+ <dees-input-dropdown
165
+ .label=${'Location'}
166
+ .layoutMode=${'horizontal'}
167
+ .options=${[
168
+ { option: 'Remote', key: 'remote' },
169
+ { option: 'On-site', key: 'onsite' },
170
+ { option: 'Hybrid', key: 'hybrid' }
171
+ ]}
172
+ ></dees-input-dropdown>
173
+ </div>
174
+ </dees-form>
173
175
  </dees-panel>
174
176
  </dees-demowrapper>
175
177
 
@@ -185,7 +187,7 @@ export const demoFunc = () => html`
185
187
  }
186
188
  }}>
187
189
  <dees-panel .title=${'4. States'} .subtitle=${'Different states and configurations'}>
188
- <div class="input-group">
190
+ <dees-form>
189
191
  <dees-input-dropdown
190
192
  .label=${'Required Field'}
191
193
  .required=${true}
@@ -204,7 +206,7 @@ export const demoFunc = () => html`
204
206
  ]}
205
207
  .selectedOption=${{ option: 'Cannot Select', key: 'disabled' }}
206
208
  ></dees-input-dropdown>
207
- </div>
209
+ </dees-form>
208
210
  </dees-panel>
209
211
  </dees-demowrapper>
210
212
 
package/ts_web/elements/00group-input/dees-input-fileupload/demo.ts CHANGED
@@ -55,41 +55,43 @@ export const demoFunc = () => html`
55
55
  .title=${'Modern file uploader'}
56
56
  .subtitle=${'Shadcn-inspired layout with drag & drop, previews and validation'}
57
57
  >
58
- <div class="demo-grid demo-grid--two">
59
- <div class="demo-stack">
60
- <dees-input-fileupload
61
- .label=${'Attachments'}
62
- .infoText=${'Upload supporting documents for your request'}
63
- .description=${'Accepted formats: images, PDF, and ZIP archives up to 10MB'}
64
- .accept=${'image/*,.pdf,.zip'}
65
- .maxSize=${10 * 1024 * 1024}
66
- ></dees-input-fileupload>
67
-
68
- <dees-input-fileupload
69
- .label=${'Brand assets'}
70
- .infoText=${'Upload high-resolution imagery (JPG/PNG)'}
71
- .accept=${'image/jpeg,image/png'}
72
- .multiple=${false}
73
- .maxSize=${5 * 1024 * 1024}
74
- .buttonText=${'Select cover image'}
75
- ></dees-input-fileupload>
76
- </div>
58
+ <dees-form>
59
+ <div class="demo-grid demo-grid--two">
60
+ <div class="demo-stack">
61
+ <dees-input-fileupload
62
+ .label=${'Attachments'}
63
+ .infoText=${'Upload supporting documents for your request'}
64
+ .description=${'Accepted formats: images, PDF, and ZIP archives up to 10MB'}
65
+ .accept=${'image/*,.pdf,.zip'}
66
+ .maxSize=${10 * 1024 * 1024}
67
+ ></dees-input-fileupload>
68
+
69
+ <dees-input-fileupload
70
+ .label=${'Brand assets'}
71
+ .infoText=${'Upload high-resolution imagery (JPG/PNG)'}
72
+ .accept=${'image/jpeg,image/png'}
73
+ .multiple=${false}
74
+ .maxSize=${5 * 1024 * 1024}
75
+ .buttonText=${'Select cover image'}
76
+ ></dees-input-fileupload>
77
+ </div>
77
78
 
78
- <div class="demo-stack">
79
- <dees-input-fileupload
80
- .label=${'Audio uploads'}
81
- .infoText=${'Share podcast drafts (MP3/WAV, max 25MB each)'}
82
- .accept=${'audio/*'}
83
- .maxSize=${25 * 1024 * 1024}
84
- ></dees-input-fileupload>
85
-
86
- <dees-input-fileupload
87
- .label=${'Disabled example'}
88
- .infoText=${'Uploader is disabled while moderation is pending'}
89
- .disabled=${true}
90
- ></dees-input-fileupload>
79
+ <div class="demo-stack">
80
+ <dees-input-fileupload
81
+ .label=${'Audio uploads'}
82
+ .infoText=${'Share podcast drafts (MP3/WAV, max 25MB each)'}
83
+ .accept=${'audio/*'}
84
+ .maxSize=${25 * 1024 * 1024}
85
+ ></dees-input-fileupload>
86
+
87
+ <dees-input-fileupload
88
+ .label=${'Disabled example'}
89
+ .infoText=${'Uploader is disabled while moderation is pending'}
90
+ .disabled=${true}
91
+ ></dees-input-fileupload>
92
+ </div>
91
93
  </div>
92
- </div>
94
+ </dees-form>
93
95
  </dees-panel>
94
96
 
95
97
  <dees-panel
@@ -98,7 +100,6 @@ export const demoFunc = () => html`
98
100
  >
99
101
  <div class="demo-grid">
100
102
  <dees-form>
101
- <div class="demo-stack">
102
103
  <dees-input-text
103
104
  .label=${'Project name'}
104
105
  .infoText=${'How should we refer to this project internally?'}
@@ -140,7 +141,6 @@ export const demoFunc = () => html`
140
141
  ></dees-input-text>
141
142
 
142
143
  <dees-form-submit .text=${'Submit briefing'}></dees-form-submit>
143
- </div>
144
144
  </dees-form>
145
145
 
146
146
  <div class="demo-note">
package/ts_web/elements/00group-input/dees-input-iban/dees-input-iban.demo.ts CHANGED
@@ -30,7 +30,7 @@ export const demoFunc = () => html`
30
30
 
31
31
  <div class="demo-container">
32
32
  <dees-panel .title=${'Basic IBAN Input'} .subtitle=${'International Bank Account Number with automatic formatting'}>
33
- <div class="input-group">
33
+ <dees-form>
34
34
  <dees-input-iban
35
35
  .label=${'Bank Account IBAN'}
36
36
  .infoText=${'Enter your International Bank Account Number'}
@@ -42,27 +42,29 @@ export const demoFunc = () => html`
42
42
  .infoText=${'This IBAN has been verified'}
43
43
  .value=${'DE89370400440532013000'}
44
44
  ></dees-input-iban>
45
- </div>
45
+ </dees-form>
46
46
  </dees-panel>
47
47
 
48
48
  <dees-panel .title=${'Payment Information'} .subtitle=${'IBAN input with horizontal layout for payment forms'}>
49
- <div class="payment-group">
50
- <dees-input-text
51
- .label=${'Account Holder'}
52
- .layoutMode=${'horizontal'}
53
- .value=${'John Doe'}
54
- ></dees-input-text>
55
-
56
- <dees-input-iban
57
- .label=${'IBAN'}
58
- .layoutMode=${'horizontal'}
59
- .value=${'GB82WEST12345698765432'}
60
- ></dees-input-iban>
61
- </div>
49
+ <dees-form>
50
+ <div class="payment-group">
51
+ <dees-input-text
52
+ .label=${'Account Holder'}
53
+ .layoutMode=${'horizontal'}
54
+ .value=${'John Doe'}
55
+ ></dees-input-text>
56
+
57
+ <dees-input-iban
58
+ .label=${'IBAN'}
59
+ .layoutMode=${'horizontal'}
60
+ .value=${'GB82WEST12345698765432'}
61
+ ></dees-input-iban>
62
+ </div>
63
+ </dees-form>
62
64
  </dees-panel>
63
65
 
64
66
  <dees-panel .title=${'Validation & States'} .subtitle=${'Required fields and disabled states'}>
65
- <div class="input-group">
67
+ <dees-form>
66
68
  <dees-input-iban
67
69
  .label=${'Payment Account'}
68
70
  .infoText=${'Required for processing payments'}
@@ -75,7 +77,7 @@ export const demoFunc = () => html`
75
77
  .value=${'FR1420041010050500013M02606'}
76
78
  .disabled=${true}
77
79
  ></dees-input-iban>
78
- </div>
80
+ </dees-form>
79
81
  </dees-panel>
80
82
 
81
83
  <dees-panel .title=${'Bank Transfer Form'} .subtitle=${'Complete form example with IBAN validation'}>
package/ts_web/elements/00group-input/dees-input-list/dees-input-list.demo.ts CHANGED
@@ -109,25 +109,27 @@ export const demoFunc = () => html`
109
109
  </dees-panel>
110
110
 
111
111
  <dees-panel .title=${'3. Validation & Constraints'} .subtitle=${'Lists with minimum/maximum items and duplicate prevention'}>
112
- <div class="grid-layout">
113
- <dees-input-list
114
- .label=${'Team Members (Min 2, Max 5)'}
115
- .placeholder=${'Add team member...'}
116
- .minItems=${2}
117
- .maxItems=${5}
118
- .value=${['Alice', 'Bob']}
119
- .required=${true}
120
- .description=${'Add 2-5 team members'}
121
- ></dees-input-list>
122
-
123
- <dees-input-list
124
- .label=${'Unique Tags (No Duplicates)'}
125
- .placeholder=${'Add unique tag...'}
126
- .allowDuplicates=${false}
127
- .value=${['frontend', 'backend', 'database']}
128
- .description=${'Duplicate items are not allowed'}
129
- ></dees-input-list>
130
- </div>
112
+ <dees-form>
113
+ <div class="grid-layout">
114
+ <dees-input-list
115
+ .label=${'Team Members (Min 2, Max 5)'}
116
+ .placeholder=${'Add team member...'}
117
+ .minItems=${2}
118
+ .maxItems=${5}
119
+ .value=${['Alice', 'Bob']}
120
+ .required=${true}
121
+ .description=${'Add 2-5 team members'}
122
+ ></dees-input-list>
123
+
124
+ <dees-input-list
125
+ .label=${'Unique Tags (No Duplicates)'}
126
+ .placeholder=${'Add unique tag...'}
127
+ .allowDuplicates=${false}
128
+ .value=${['frontend', 'backend', 'database']}
129
+ .description=${'Duplicate items are not allowed'}
130
+ ></dees-input-list>
131
+ </div>
132
+ </dees-form>
131
133
  </dees-panel>
132
134
 
133
135
  <dees-panel .title=${'4. Delete Confirmation'} .subtitle=${'Require confirmation before deleting items'}>