@design.estate/dees-catalog 3.42.0 → 3.43.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.
- package/dist_bundle/bundle.js +1568 -1473
- package/dist_ts_web/00_commitinfo_data.js +1 -1
- package/dist_ts_web/elements/00group-chart/dees-chart-area/component.d.ts +15 -1
- package/dist_ts_web/elements/00group-chart/dees-chart-area/component.js +1 -1
- package/dist_ts_web/elements/00group-dataview/dees-table/dees-table.js +7 -7
- package/dist_ts_web/elements/00group-form/dees-form/dees-form.d.ts +2 -1
- package/dist_ts_web/elements/00group-form/dees-form/dees-form.js +18 -7
- package/dist_ts_web/elements/00group-input/dees-input-base/dees-input-base.js +2 -19
- package/dist_ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.js +33 -23
- package/dist_ts_web/elements/00group-input/dees-input-iban/dees-input-iban.demo.js +33 -23
- package/dist_ts_web/elements/00group-input/dees-input-phone/dees-input-phone.demo.js +34 -24
- package/dist_ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.demo.js +35 -25
- package/dist_ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.demo.js +45 -35
- package/dist_ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.js +81 -67
- package/dist_ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.demo.js +44 -32
- package/dist_watch/bundle.js +1566 -1471
- package/dist_watch/bundle.js.map +3 -3
- package/package.json +5 -5
- package/ts_web/00_commitinfo_data.ts +1 -1
- package/ts_web/elements/00group-chart/dees-chart-area/component.ts +10 -0
- package/ts_web/elements/00group-dataview/dees-table/dees-table.ts +6 -6
- package/ts_web/elements/00group-form/dees-form/dees-form.ts +18 -5
- package/ts_web/elements/00group-input/dees-input-base/dees-input-base.ts +1 -18
- package/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.ts +52 -42
- package/ts_web/elements/00group-input/dees-input-iban/dees-input-iban.demo.ts +32 -22
- package/ts_web/elements/00group-input/dees-input-phone/dees-input-phone.demo.ts +33 -23
- package/ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.demo.ts +34 -24
- package/ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.demo.ts +48 -38
- package/ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.ts +80 -66
- package/ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.demo.ts +43 -31
|
@@ -28,6 +28,12 @@ export const demoFunc = () => html `
|
|
|
28
28
|
flex-wrap: wrap;
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
+
.input-group {
|
|
32
|
+
display: flex;
|
|
33
|
+
flex-direction: column;
|
|
34
|
+
gap: 16px;
|
|
35
|
+
}
|
|
36
|
+
|
|
31
37
|
.grid-layout {
|
|
32
38
|
display: grid;
|
|
33
39
|
grid-template-columns: 1fr 1fr;
|
|
@@ -78,25 +84,27 @@ export const demoFunc = () => html `
|
|
|
78
84
|
}
|
|
79
85
|
}}>
|
|
80
86
|
<dees-panel .title=${'Basic Text Inputs'} .subtitle=${'Standard text inputs with labels and descriptions'}>
|
|
81
|
-
<
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
87
|
+
<div class="input-group">
|
|
88
|
+
<dees-input-text
|
|
89
|
+
.label=${'Username'}
|
|
90
|
+
.value=${'johndoe'}
|
|
91
|
+
.key=${'username'}
|
|
92
|
+
></dees-input-text>
|
|
93
|
+
|
|
94
|
+
<dees-input-text
|
|
95
|
+
.label=${'Email Address'}
|
|
96
|
+
.value=${'john@example.com'}
|
|
97
|
+
.description=${'We will never share your email with anyone'}
|
|
98
|
+
.key=${'email'}
|
|
99
|
+
></dees-input-text>
|
|
100
|
+
|
|
101
|
+
<dees-input-text
|
|
102
|
+
.label=${'Password'}
|
|
103
|
+
.isPasswordBool=${true}
|
|
104
|
+
.value=${'secret123'}
|
|
105
|
+
.key=${'password'}
|
|
106
|
+
></dees-input-text>
|
|
107
|
+
</div>
|
|
100
108
|
</dees-panel>
|
|
101
109
|
</dees-demowrapper>
|
|
102
110
|
|
|
@@ -161,31 +169,33 @@ export const demoFunc = () => html `
|
|
|
161
169
|
}
|
|
162
170
|
}}>
|
|
163
171
|
<dees-panel .title=${'Label Positions'} .subtitle=${'Different label positioning options for various layouts'}>
|
|
164
|
-
<
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
172
|
+
<div class="input-group">
|
|
173
|
+
<dees-input-text
|
|
174
|
+
.label=${'Label on Top (Default)'}
|
|
175
|
+
.value=${'Standard layout'}
|
|
176
|
+
.labelPosition=${'top'}
|
|
177
|
+
></dees-input-text>
|
|
178
|
+
|
|
179
|
+
<dees-input-text
|
|
180
|
+
.label=${'Label on Left'}
|
|
181
|
+
.value=${'Inline label'}
|
|
182
|
+
.labelPosition=${'left'}
|
|
183
|
+
></dees-input-text>
|
|
184
|
+
|
|
185
|
+
<div class="grid-layout">
|
|
177
186
|
<dees-input-text
|
|
178
187
|
.label=${'City'}
|
|
179
188
|
.value=${'New York'}
|
|
180
189
|
.labelPosition=${'left'}
|
|
181
190
|
></dees-input-text>
|
|
182
191
|
|
|
183
|
-
<dees-input-text
|
|
184
|
-
.label=${'ZIP Code'}
|
|
185
|
-
.value=${'10001'}
|
|
192
|
+
<dees-input-text
|
|
193
|
+
.label=${'ZIP Code'}
|
|
194
|
+
.value=${'10001'}
|
|
186
195
|
.labelPosition=${'left'}
|
|
187
196
|
></dees-input-text>
|
|
188
197
|
</div>
|
|
198
|
+
</div>
|
|
189
199
|
</dees-panel>
|
|
190
200
|
</dees-demowrapper>
|
|
191
201
|
|
|
@@ -219,24 +229,26 @@ export const demoFunc = () => html `
|
|
|
219
229
|
}
|
|
220
230
|
}}>
|
|
221
231
|
<dees-panel .title=${'Validation & States'} .subtitle=${'Different validation states and input configurations'}>
|
|
222
|
-
<
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
232
|
+
<div class="input-group">
|
|
233
|
+
<dees-input-text
|
|
234
|
+
.label=${'Required Field'}
|
|
235
|
+
.required=${true}
|
|
236
|
+
.key=${'requiredField'}
|
|
237
|
+
></dees-input-text>
|
|
238
|
+
|
|
239
|
+
<dees-input-text
|
|
240
|
+
.label=${'Disabled Field'}
|
|
241
|
+
.value=${'Cannot edit this'}
|
|
242
|
+
.disabled=${true}
|
|
243
|
+
></dees-input-text>
|
|
244
|
+
|
|
245
|
+
<dees-input-text
|
|
246
|
+
.label=${'Field with Error'}
|
|
247
|
+
.value=${'invalid@'}
|
|
248
|
+
.validationText=${'Please enter a valid email address'}
|
|
249
|
+
.validationState=${'invalid'}
|
|
250
|
+
></dees-input-text>
|
|
251
|
+
</div>
|
|
240
252
|
</dees-panel>
|
|
241
253
|
</dees-demowrapper>
|
|
242
254
|
|
|
@@ -262,19 +274,21 @@ export const demoFunc = () => html `
|
|
|
262
274
|
});
|
|
263
275
|
}}>
|
|
264
276
|
<dees-panel .title=${'Advanced Features'} .subtitle=${'Password visibility toggle and other advanced features'}>
|
|
265
|
-
<
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
277
|
+
<div class="input-group">
|
|
278
|
+
<dees-input-text
|
|
279
|
+
.label=${'Password with Toggle'}
|
|
280
|
+
.isPasswordBool=${true}
|
|
281
|
+
.value=${'mySecurePassword123'}
|
|
282
|
+
.description=${'Click the eye icon to show/hide password'}
|
|
283
|
+
></dees-input-text>
|
|
284
|
+
|
|
285
|
+
<dees-input-text
|
|
286
|
+
.label=${'API Key'}
|
|
287
|
+
.isPasswordBool=${true}
|
|
288
|
+
.value=${'sk-1234567890abcdef'}
|
|
289
|
+
.description=${'Keep this key secure and never share it'}
|
|
290
|
+
></dees-input-text>
|
|
291
|
+
</div>
|
|
278
292
|
</dees-panel>
|
|
279
293
|
</dees-demowrapper>
|
|
280
294
|
|
|
@@ -316,4 +330,4 @@ export const demoFunc = () => html `
|
|
|
316
330
|
</dees-demowrapper>
|
|
317
331
|
</div>
|
|
318
332
|
`;
|
|
319
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
333
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1pbnB1dC10ZXh0LmRlbW8uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1pbnB1dC9kZWVzLWlucHV0LXRleHQvZGVlcy1pbnB1dC10ZXh0LmRlbW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxHQUFHLEVBQUUsVUFBVSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDcEUsT0FBTyx3Q0FBd0MsQ0FBQztBQUNoRCxPQUFPLCtDQUErQyxDQUFDO0FBR3ZELE1BQU0sQ0FBQyxNQUFNLFFBQVEsR0FBRyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUE7O01BRTVCLEdBQUcsQ0FBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7c0JBNENhLFVBQVUsQ0FBQyxPQUFPLENBQUMsb0JBQW9CLEVBQUUsc0JBQXNCLENBQUM7Ozs7Ozs7OztpQkFTckUsVUFBVSxDQUFDLE9BQU8sQ0FBQyxzQkFBc0IsRUFBRSxrQkFBa0IsQ0FBQzs7c0JBRXpELFVBQVUsQ0FBQyxPQUFPLENBQUMsa0JBQWtCLEVBQUUsc0JBQXNCLENBQUM7Ozs7S0FJL0U7Ozs7d0NBSW1DLEtBQUssRUFBRSxVQUF1QixFQUFFLEVBQUU7SUFDcEUsNkNBQTZDO0lBQzdDLE1BQU0sTUFBTSxHQUFHLFVBQVUsQ0FBQyxnQkFBZ0IsQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDO0lBRTlELE1BQU0sQ0FBQyxPQUFPLENBQUMsQ0FBQyxLQUFvQixFQUFFLEVBQUU7UUFDdEMsS0FBSyxDQUFDLGdCQUFnQixDQUFDLGVBQWUsRUFBRSxDQUFDLEtBQWtCLEVBQUUsRUFBRTtZQUM3RCxPQUFPLENBQUMsR0FBRyxDQUFDLFVBQVUsS0FBSyxDQUFDLEtBQUssZUFBZSxFQUFFLEtBQUssQ0FBQyxRQUFRLEVBQUUsQ0FBQyxDQUFDO1FBQ3RFLENBQUMsQ0FBQyxDQUFDO1FB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
|
|
@@ -12,6 +12,12 @@ export const demoFunc = () => html `
|
|
|
12
12
|
margin: 0 auto;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
+
.input-group {
|
|
16
|
+
display: flex;
|
|
17
|
+
flex-direction: column;
|
|
18
|
+
gap: 16px;
|
|
19
|
+
}
|
|
20
|
+
|
|
15
21
|
.horizontal-group {
|
|
16
22
|
display: flex;
|
|
17
23
|
gap: 24px;
|
|
@@ -38,27 +44,30 @@ export const demoFunc = () => html `
|
|
|
38
44
|
|
|
39
45
|
<div class="demo-container">
|
|
40
46
|
<dees-panel .title=${'Basic Type List'} .subtitle=${'Add and remove items from a list'}>
|
|
41
|
-
<
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
47
|
+
<div class="input-group">
|
|
48
|
+
<dees-input-typelist
|
|
49
|
+
.label=${'Tags'}
|
|
50
|
+
.description=${'Add tags by typing and pressing Enter'}
|
|
51
|
+
.value=${['javascript', 'typescript', 'web-components']}
|
|
52
|
+
></dees-input-typelist>
|
|
53
|
+
|
|
54
|
+
<dees-input-typelist
|
|
55
|
+
.label=${'Team Members'}
|
|
56
|
+
.description=${'Add email addresses of team members'}
|
|
57
|
+
.value=${['alice@example.com', 'bob@example.com']}
|
|
58
|
+
></dees-input-typelist>
|
|
59
|
+
</div>
|
|
52
60
|
</dees-panel>
|
|
53
61
|
|
|
54
62
|
<dees-panel .title=${'Skills & Keywords'} .subtitle=${'Manage lists of skills and keywords'}>
|
|
55
|
-
<
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
63
|
+
<div class="input-group">
|
|
64
|
+
<dees-input-typelist
|
|
65
|
+
.label=${'Your Skills'}
|
|
66
|
+
.description=${'List your professional skills'}
|
|
67
|
+
.value=${['HTML', 'CSS', 'JavaScript', 'Node.js', 'React']}
|
|
68
|
+
></dees-input-typelist>
|
|
69
|
+
|
|
70
|
+
<div class="horizontal-group">
|
|
62
71
|
<dees-input-typelist
|
|
63
72
|
.label=${'Categories'}
|
|
64
73
|
.layoutMode=${'horizontal'}
|
|
@@ -71,22 +80,25 @@ export const demoFunc = () => html `
|
|
|
71
80
|
.value=${['innovation', 'startup', 'growth']}
|
|
72
81
|
></dees-input-typelist>
|
|
73
82
|
</div>
|
|
83
|
+
</div>
|
|
74
84
|
</dees-panel>
|
|
75
85
|
|
|
76
86
|
<dees-panel .title=${'Required & Disabled States'} .subtitle=${'Different input states for validation'}>
|
|
77
|
-
<
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
87
|
+
<div class="input-group">
|
|
88
|
+
<dees-input-typelist
|
|
89
|
+
.label=${'Project Dependencies'}
|
|
90
|
+
.description=${'List all required npm packages'}
|
|
91
|
+
.required=${true}
|
|
92
|
+
.value=${['@design.estate/dees-element', '@design.estate/dees-domtools']}
|
|
93
|
+
></dees-input-typelist>
|
|
94
|
+
|
|
95
|
+
<dees-input-typelist
|
|
96
|
+
.label=${'System Tags'}
|
|
97
|
+
.description=${'These tags are managed by the system'}
|
|
98
|
+
.disabled=${true}
|
|
99
|
+
.value=${['system', 'protected', 'readonly']}
|
|
100
|
+
></dees-input-typelist>
|
|
101
|
+
</div>
|
|
90
102
|
</dees-panel>
|
|
91
103
|
|
|
92
104
|
<dees-panel .title=${'Article Publishing Form'} .subtitle=${'Complete form with tag management'}>
|
|
@@ -115,4 +127,4 @@ export const demoFunc = () => html `
|
|
|
115
127
|
</div>
|
|
116
128
|
</dees-demowrapper>
|
|
117
129
|
`;
|
|
118
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
130
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1pbnB1dC10eXBlbGlzdC5kZW1vLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vdHNfd2ViL2VsZW1lbnRzLzAwZ3JvdXAtaW5wdXQvZGVlcy1pbnB1dC10eXBlbGlzdC9kZWVzLWlucHV0LXR5cGVsaXN0LmRlbW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxHQUFHLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUV4RCxNQUFNLENBQUMsTUFBTSxRQUFRLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBOzs7UUFHMUIsR0FBRyxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O09BcUNKOzs7OzJCQUlvQixpQkFBaUIsY0FBYyxrQ0FBa0M7OztxQkFHdkUsTUFBTTsyQkFDQSx1Q0FBdUM7cUJBQzdDLENBQUMsWUFBWSxFQUFFLFlBQVksRUFBRSxnQkFBZ0IsQ0FBQzs7OztxQkFJOUMsY0FBYzsyQkFDUixxQ0FBcUM7cUJBQzNDLENBQUMsbUJBQW1CLEVBQUUsaUJBQWlCLENBQUM7Ozs7OzJCQUtsQyxtQkFBbUIsY0FBYyxxQ0FBcUM7OztxQkFHNUUsYUFBYTsyQkFDUCwrQkFBK0I7cUJBQ3JDLENBQUMsTUFBTSxFQUFFLEtBQUssRUFBRSxZQUFZLEVBQUUsU0FBUyxFQUFFLE9BQU8sQ0FBQzs7Ozs7cUJBS2pELFlBQVk7MEJBQ1AsWUFBWTtxQkFDakIsQ0FBQyxZQUFZLEVBQUUsUUFBUSxFQUFFLFVBQVUsQ0FBQzs7OztxQkFJcEMsVUFBVTswQkFDTCxZQUFZO3FCQUNqQixDQUFDLFlBQVksRUFBRSxTQUFTLEVBQUUsUUFBUSxDQUFDOzs7Ozs7MkJBTTdCLDRCQUE0QixjQUFjLHVDQUF1Qzs7O3FCQUd2RixzQkFBc0I7MkJBQ2hCLGdDQUFnQzt3QkFDbkMsSUFBSTtxQkFDUCxDQUFDLDZCQUE2QixFQUFFLDhCQUE4QixDQUFDOzs7O3FCQUkvRCxhQUFhOzJCQUNQLHNDQUFzQzt3QkFDekMsSUFBSTtxQkFDUCxDQUFDLFFBQVEsRUFBRSxXQUFXLEVBQUUsVUFBVSxDQUFDOzs7OzsyQkFLN0IseUJBQXlCLGNBQWMsbUNBQW1DOztvQ0FFakUsZUFBZSxjQUFjLElBQUk7O3FCQUVoRCxTQUFTO3lCQUNMLFVBQVU7MkJBQ1Isa0NBQWtDOzs7cUJBR3hDLE1BQU07MkJBQ0EsOENBQThDO3FCQUNwRCxDQUFDLFVBQVUsRUFBRSxpQkFBaUIsQ0FBQzs7O3FCQUcvQixZQUFZOzJCQUNOLG1DQUFtQzs7Ozs7Ozs7OztDQVU3RCxDQUFDIn0=
|