@design.estate/dees-catalog 3.76.0 → 3.77.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 +477 -451
- package/dist_ts_web/00_commitinfo_data.js +1 -1
- package/dist_ts_web/elements/00group-dataview/dees-table/dees-table.js +28 -3
- package/dist_ts_web/elements/00group-dataview/dees-table/styles.js +28 -1
- package/dist_ts_web/elements/00group-dataview/dees-table/types.d.ts +15 -0
- package/dist_ts_web/elements/00group-input/dees-input-checkbox/dees-input-checkbox.demo.js +96 -94
- package/dist_ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.js +27 -31
- package/dist_ts_web/elements/00group-input/dees-input-fileupload/demo.js +36 -36
- package/dist_ts_web/elements/00group-input/dees-input-iban/dees-input-iban.demo.js +20 -24
- package/dist_ts_web/elements/00group-input/dees-input-list/dees-input-list.demo.js +22 -20
- package/dist_ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.demo.js +67 -65
- package/dist_ts_web/elements/00group-input/dees-input-phone/dees-input-phone.demo.js +20 -24
- package/dist_ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.demo.js +5 -11
- package/dist_ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.demo.js +54 -54
- package/dist_ts_web/elements/00group-input/dees-input-tags/dees-input-tags.demo.js +21 -19
- package/dist_ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.js +37 -41
- package/dist_ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.demo.js +35 -33
- package/dist_ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.demo.js +19 -25
- package/dist_watch/bundle.js +442 -449
- package/dist_watch/bundle.js.map +2 -2
- package/package.json +1 -1
- package/readme.md +19 -12
- package/ts_web/00_commitinfo_data.ts +1 -1
- package/ts_web/elements/00group-dataview/dees-table/dees-table.ts +28 -2
- package/ts_web/elements/00group-dataview/dees-table/styles.ts +33 -0
- package/ts_web/elements/00group-dataview/dees-table/types.ts +19 -0
- package/ts_web/elements/00group-input/dees-input-checkbox/dees-input-checkbox.demo.ts +95 -93
- package/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.ts +40 -44
- package/ts_web/elements/00group-input/dees-input-fileupload/demo.ts +35 -35
- package/ts_web/elements/00group-input/dees-input-iban/dees-input-iban.demo.ts +19 -23
- package/ts_web/elements/00group-input/dees-input-list/dees-input-list.demo.ts +21 -19
- package/ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.demo.ts +66 -64
- package/ts_web/elements/00group-input/dees-input-phone/dees-input-phone.demo.ts +19 -23
- package/ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.demo.ts +4 -10
- package/ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.demo.ts +53 -53
- package/ts_web/elements/00group-input/dees-input-tags/dees-input-tags.demo.ts +20 -18
- package/ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.ts +36 -40
- package/ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.demo.ts +34 -32
- package/ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.demo.ts +18 -24
package/dist_ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.demo.js
CHANGED
|
@@ -22,12 +22,6 @@ export const demoFunc = () => html `
|
|
|
22
22
|
margin-bottom: 0;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
.input-group {
|
|
26
|
-
display: flex;
|
|
27
|
-
flex-direction: column;
|
|
28
|
-
gap: 16px;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
25
|
.demo-grid {
|
|
32
26
|
display: grid;
|
|
33
27
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
@@ -47,25 +41,27 @@ export const demoFunc = () => html `
|
|
|
47
41
|
|
|
48
42
|
<div class="demo-container">
|
|
49
43
|
<dees-panel .title=${'1. Basic Radio Groups'} .subtitle=${'Simple string options for common use cases'}>
|
|
50
|
-
<
|
|
51
|
-
<
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
44
|
+
<dees-form>
|
|
45
|
+
<div class="demo-grid">
|
|
46
|
+
<dees-input-radiogroup
|
|
47
|
+
.label=${'Subscription Plan'}
|
|
48
|
+
.options=${['Basic - $9/month', 'Pro - $29/month', 'Enterprise - $99/month']}
|
|
49
|
+
.selectedOption=${'Pro - $29/month'}
|
|
50
|
+
.description=${'Choose your subscription tier'}
|
|
51
|
+
></dees-input-radiogroup>
|
|
52
|
+
|
|
53
|
+
<dees-input-radiogroup
|
|
54
|
+
.label=${'Priority Level'}
|
|
55
|
+
.options=${['High', 'Medium', 'Low']}
|
|
56
|
+
.selectedOption=${'Medium'}
|
|
57
|
+
.required=${true}
|
|
58
|
+
></dees-input-radiogroup>
|
|
59
|
+
</div>
|
|
60
|
+
</dees-form>
|
|
65
61
|
</dees-panel>
|
|
66
62
|
|
|
67
63
|
<dees-panel .title=${'2. Horizontal Layout'} .subtitle=${'Radio groups with horizontal arrangement'}>
|
|
68
|
-
<
|
|
64
|
+
<dees-form>
|
|
69
65
|
<dees-input-radiogroup
|
|
70
66
|
.label=${'Do you agree with the terms?'}
|
|
71
67
|
.options=${['Yes', 'No', 'Maybe']}
|
|
@@ -80,7 +76,7 @@ export const demoFunc = () => html `
|
|
|
80
76
|
.selectedOption=${'Intermediate'}
|
|
81
77
|
.description=${'Select your experience level with web development'}
|
|
82
78
|
></dees-input-radiogroup>
|
|
83
|
-
</
|
|
79
|
+
</dees-form>
|
|
84
80
|
</dees-panel>
|
|
85
81
|
|
|
86
82
|
<dees-panel .title=${'3. Advanced Options'} .subtitle=${'Using object format with keys and payloads'}>
|
|
@@ -105,41 +101,45 @@ export const demoFunc = () => html `
|
|
|
105
101
|
</dees-panel>
|
|
106
102
|
|
|
107
103
|
<dees-panel .title=${'4. Survey Example'} .subtitle=${'Multiple radio groups for surveys and forms'}>
|
|
108
|
-
<
|
|
109
|
-
<
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
104
|
+
<dees-form>
|
|
105
|
+
<div class="demo-grid">
|
|
106
|
+
<dees-input-radiogroup
|
|
107
|
+
.label=${'How satisfied are you?'}
|
|
108
|
+
.options=${['Very Satisfied', 'Satisfied', 'Neutral', 'Dissatisfied', 'Very Dissatisfied']}
|
|
109
|
+
.selectedOption=${'Satisfied'}
|
|
110
|
+
></dees-input-radiogroup>
|
|
111
|
+
|
|
112
|
+
<dees-input-radiogroup
|
|
113
|
+
.label=${'Would you recommend us?'}
|
|
114
|
+
.options=${['Definitely', 'Probably', 'Not Sure', 'Probably Not', 'Definitely Not']}
|
|
115
|
+
.selectedOption=${'Probably'}
|
|
116
|
+
></dees-input-radiogroup>
|
|
117
|
+
</div>
|
|
118
|
+
</dees-form>
|
|
121
119
|
</dees-panel>
|
|
122
120
|
|
|
123
121
|
<dees-panel .title=${'5. States & Validation'} .subtitle=${'Different states and validation examples'}>
|
|
124
|
-
<
|
|
125
|
-
<
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
122
|
+
<dees-form>
|
|
123
|
+
<div class="demo-grid">
|
|
124
|
+
<dees-input-radiogroup
|
|
125
|
+
.label=${'Required Selection'}
|
|
126
|
+
.options=${['Option A', 'Option B', 'Option C']}
|
|
127
|
+
.required=${true}
|
|
128
|
+
.description=${'This field is required'}
|
|
129
|
+
></dees-input-radiogroup>
|
|
130
|
+
|
|
131
|
+
<dees-input-radiogroup
|
|
132
|
+
.label=${'Disabled State'}
|
|
133
|
+
.options=${['Disabled Option 1', 'Disabled Option 2', 'Disabled Option 3']}
|
|
134
|
+
.selectedOption=${'Disabled Option 2'}
|
|
135
|
+
.disabled=${true}
|
|
136
|
+
></dees-input-radiogroup>
|
|
137
|
+
</div>
|
|
138
|
+
</dees-form>
|
|
139
139
|
</dees-panel>
|
|
140
140
|
|
|
141
141
|
<dees-panel .title=${'6. Settings Example'} .subtitle=${'Common patterns in application settings'}>
|
|
142
|
-
<
|
|
142
|
+
<dees-form>
|
|
143
143
|
<dees-input-radiogroup
|
|
144
144
|
.label=${'Theme Preference'}
|
|
145
145
|
.options=${[
|
|
@@ -164,7 +164,7 @@ export const demoFunc = () => html `
|
|
|
164
164
|
.selectedOption=${'English'}
|
|
165
165
|
.direction=${'horizontal'}
|
|
166
166
|
></dees-input-radiogroup>
|
|
167
|
-
</
|
|
167
|
+
</dees-form>
|
|
168
168
|
</dees-panel>
|
|
169
169
|
|
|
170
170
|
<dees-panel .title=${'7. Form Integration'} .subtitle=${'Works seamlessly with dees-form'}>
|
|
@@ -207,4 +207,4 @@ export const demoFunc = () => html `
|
|
|
207
207
|
</div>
|
|
208
208
|
</dees-demowrapper>
|
|
209
209
|
`;
|
|
210
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
210
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1pbnB1dC1yYWRpb2dyb3VwLmRlbW8uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1pbnB1dC9kZWVzLWlucHV0LXJhZGlvZ3JvdXAvZGVlcy1pbnB1dC1yYWRpb2dyb3VwLmRlbW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxHQUFHLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUN4RCxPQUFPLHdDQUF3QyxDQUFDO0FBQ2hELE9BQU8sK0NBQStDLENBQUM7QUFFdkQsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTs7O1FBRzFCLEdBQUcsQ0FBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7T0FnQ0o7Ozs7MkJBSW9CLHVCQUF1QixjQUFjLDRDQUE0Qzs7Ozt1QkFJckYsbUJBQW1CO3lCQUNqQixDQUFDLGtCQUFrQixFQUFFLGlCQUFpQixFQUFFLHdCQUF3QixDQUFDO2dDQUMxRCxpQkFBaUI7NkJBQ3BCLCtCQUErQjs7Ozt1QkFJckMsZ0JBQWdCO3lCQUNkLENBQUMsTUFBTSxFQUFFLFFBQVEsRUFBRSxLQUFLLENBQUM7Z0NBQ2xCLFFBQVE7MEJBQ2QsSUFBSTs7Ozs7OzJCQU1ILHNCQUFzQixjQUFjLDBDQUEwQzs7O3FCQUdwRiw4QkFBOEI7dUJBQzVCLENBQUMsS0FBSyxFQUFFLElBQUksRUFBRSxPQUFPLENBQUM7eUJBQ3BCLFlBQVk7OEJBQ1AsS0FBSzs7OztxQkFJZCxrQkFBa0I7dUJBQ2hCLENBQUMsVUFBVSxFQUFFLGNBQWMsRUFBRSxRQUFRLENBQUM7eUJBQ3BDLFlBQVk7OEJBQ1AsY0FBYzsyQkFDakIsbURBQW1EOzs7OzsyQkFLbkQscUJBQXFCLGNBQWMsNENBQTRDOzs7bUJBR3ZGLGVBQWU7cUJBQ2I7SUFDVCxFQUFFLE1BQU0sRUFBRSx5QkFBeUIsRUFBRSxH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
|
|
@@ -114,24 +114,26 @@ export const demoFunc = () => html `
|
|
|
114
114
|
</dees-panel>
|
|
115
115
|
|
|
116
116
|
<dees-panel .title=${'3. Limited Tags'} .subtitle=${'Restrict the number of tags users can add'}>
|
|
117
|
-
<
|
|
118
|
-
<
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
117
|
+
<dees-form>
|
|
118
|
+
<div class="grid-layout">
|
|
119
|
+
<dees-input-tags
|
|
120
|
+
.label=${'Top 3 Skills'}
|
|
121
|
+
.placeholder=${'Add up to 3 skills...'}
|
|
122
|
+
.maxTags=${3}
|
|
123
|
+
.value=${['Design', 'Development']}
|
|
124
|
+
.description=${'Maximum 3 tags allowed'}
|
|
125
|
+
></dees-input-tags>
|
|
126
|
+
|
|
127
|
+
<dees-input-tags
|
|
128
|
+
.label=${'Categories (Max 5)'}
|
|
129
|
+
.placeholder=${'Select categories...'}
|
|
130
|
+
.maxTags=${5}
|
|
131
|
+
.suggestions=${['Blog', 'Tutorial', 'News', 'Review', 'Guide', 'Case Study', 'Interview']}
|
|
132
|
+
.value=${['Tutorial', 'Guide']}
|
|
133
|
+
.description=${'Choose up to 5 categories'}
|
|
134
|
+
></dees-input-tags>
|
|
135
|
+
</div>
|
|
136
|
+
</dees-form>
|
|
135
137
|
</dees-panel>
|
|
136
138
|
|
|
137
139
|
<dees-panel .title=${'4. Required & Validation'} .subtitle=${'Tags input with validation requirements'}>
|
|
@@ -244,4 +246,4 @@ export const demoFunc = () => html `
|
|
|
244
246
|
</div>
|
|
245
247
|
</dees-demowrapper>
|
|
246
248
|
`;
|
|
247
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
249
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1pbnB1dC10YWdzLmRlbW8uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1pbnB1dC9kZWVzLWlucHV0LXRhZ3MvZGVlcy1pbnB1dC10YWdzLmRlbW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxHQUFHLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUN4RCxPQUFPLHdDQUF3QyxDQUFDO0FBQ2hELE9BQU8sK0NBQStDLENBQUM7QUFFdkQsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTs7O1FBRzFCLEdBQUcsQ0FBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O09BaUZKOzs7OzJCQUlvQixxQkFBcUIsY0FBYyxvREFBb0Q7O21CQUUvRix1QkFBdUI7eUJBQ2pCLG1CQUFtQjttQkFDekIsQ0FBQyxZQUFZLEVBQUUsWUFBWSxFQUFFLFFBQVEsRUFBRSxJQUFJLENBQUM7eUJBQ3RDLGtDQUFrQzs7OzsyQkFJaEMsMEJBQTBCLGNBQWMsNENBQTRDOzttQkFFNUYsWUFBWTt5QkFDTiw0QkFBNEI7eUJBQzVCO0lBQ2IsT0FBTyxFQUFFLEtBQUssRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLFdBQVc7SUFDMUUsU0FBUyxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsU0FBUyxFQUFFLFNBQVMsRUFBRSxTQUFTLEVBQUUsS0FBSztJQUNoRSxTQUFTLEVBQUUsWUFBWSxFQUFFLE9BQU8sRUFBRSxPQUFPLEVBQUUsUUFBUSxFQUFFLFdBQVc7SUFDaEUsUUFBUSxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxRQUFRLEVB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
|
|
@@ -28,12 +28,6 @@ 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
|
-
|
|
37
31
|
.grid-layout {
|
|
38
32
|
display: grid;
|
|
39
33
|
grid-template-columns: 1fr 1fr;
|
|
@@ -84,7 +78,7 @@ export const demoFunc = () => html `
|
|
|
84
78
|
}
|
|
85
79
|
}}>
|
|
86
80
|
<dees-panel .title=${'Basic Text Inputs'} .subtitle=${'Standard text inputs with labels and descriptions'}>
|
|
87
|
-
<
|
|
81
|
+
<dees-form>
|
|
88
82
|
<dees-input-text
|
|
89
83
|
.label=${'Username'}
|
|
90
84
|
.value=${'johndoe'}
|
|
@@ -105,7 +99,7 @@ export const demoFunc = () => html `
|
|
|
105
99
|
.value=${'secret123'}
|
|
106
100
|
.key=${'password'}
|
|
107
101
|
></dees-input-text>
|
|
108
|
-
</
|
|
102
|
+
</dees-form>
|
|
109
103
|
</dees-panel>
|
|
110
104
|
</dees-demowrapper>
|
|
111
105
|
|
|
@@ -131,28 +125,30 @@ export const demoFunc = () => html `
|
|
|
131
125
|
}
|
|
132
126
|
}}>
|
|
133
127
|
<dees-panel .title=${'Horizontal Layout'} .subtitle=${'Multiple inputs arranged horizontally for compact forms'}>
|
|
134
|
-
<
|
|
135
|
-
<
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
128
|
+
<dees-form>
|
|
129
|
+
<div class="horizontal-group">
|
|
130
|
+
<dees-input-text
|
|
131
|
+
.label=${'First Name'}
|
|
132
|
+
.value=${'John'}
|
|
133
|
+
.layoutMode=${'horizontal'}
|
|
134
|
+
.key=${'firstName'}
|
|
135
|
+
></dees-input-text>
|
|
136
|
+
|
|
137
|
+
<dees-input-text
|
|
138
|
+
.label=${'Last Name'}
|
|
139
|
+
.value=${'Doe'}
|
|
140
|
+
.layoutMode=${'horizontal'}
|
|
141
|
+
.key=${'lastName'}
|
|
142
|
+
></dees-input-text>
|
|
143
|
+
|
|
144
|
+
<dees-input-text
|
|
145
|
+
.label=${'Age'}
|
|
146
|
+
.value=${'28'}
|
|
147
|
+
.layoutMode=${'horizontal'}
|
|
148
|
+
.key=${'age'}
|
|
149
|
+
></dees-input-text>
|
|
150
|
+
</div>
|
|
151
|
+
</dees-form>
|
|
156
152
|
</dees-panel>
|
|
157
153
|
</dees-demowrapper>
|
|
158
154
|
|
|
@@ -170,7 +166,7 @@ export const demoFunc = () => html `
|
|
|
170
166
|
}
|
|
171
167
|
}}>
|
|
172
168
|
<dees-panel .title=${'Label Positions'} .subtitle=${'Different label positioning options for various layouts'}>
|
|
173
|
-
<
|
|
169
|
+
<dees-form>
|
|
174
170
|
<dees-input-text
|
|
175
171
|
.label=${'Label on Top (Default)'}
|
|
176
172
|
.value=${'Standard layout'}
|
|
@@ -184,25 +180,25 @@ export const demoFunc = () => html `
|
|
|
184
180
|
></dees-input-text>
|
|
185
181
|
|
|
186
182
|
<div class="grid-layout">
|
|
187
|
-
<dees-input-text
|
|
188
|
-
.label=${'City'}
|
|
189
|
-
.value=${'New York'}
|
|
183
|
+
<dees-input-text
|
|
184
|
+
.label=${'City'}
|
|
185
|
+
.value=${'New York'}
|
|
190
186
|
.labelPosition=${'left'}
|
|
191
187
|
></dees-input-text>
|
|
192
|
-
|
|
188
|
+
|
|
193
189
|
<dees-input-text
|
|
194
190
|
.label=${'ZIP Code'}
|
|
195
191
|
.value=${'10001'}
|
|
196
192
|
.labelPosition=${'left'}
|
|
197
193
|
></dees-input-text>
|
|
198
194
|
</div>
|
|
199
|
-
</
|
|
195
|
+
</dees-form>
|
|
200
196
|
</dees-panel>
|
|
201
197
|
</dees-demowrapper>
|
|
202
198
|
|
|
203
199
|
<dees-demowrapper>
|
|
204
200
|
<dees-panel .title=${'Validation & States'} .subtitle=${'Different validation states and input configurations'}>
|
|
205
|
-
<
|
|
201
|
+
<dees-form>
|
|
206
202
|
<dees-input-text
|
|
207
203
|
.label=${'Required Field'}
|
|
208
204
|
.required=${true}
|
|
@@ -226,7 +222,7 @@ export const demoFunc = () => html `
|
|
|
226
222
|
return { valid: false, message: 'Please enter a valid email address' };
|
|
227
223
|
}}
|
|
228
224
|
></dees-input-text>
|
|
229
|
-
</
|
|
225
|
+
</dees-form>
|
|
230
226
|
</dees-panel>
|
|
231
227
|
</dees-demowrapper>
|
|
232
228
|
|
|
@@ -253,7 +249,7 @@ export const demoFunc = () => html `
|
|
|
253
249
|
});
|
|
254
250
|
}}>
|
|
255
251
|
<dees-panel .title=${'Advanced Features'} .subtitle=${'Password visibility toggle and other advanced features'}>
|
|
256
|
-
<
|
|
252
|
+
<dees-form>
|
|
257
253
|
<dees-input-text
|
|
258
254
|
.label=${'Password with Toggle'}
|
|
259
255
|
.isPasswordBool=${true}
|
|
@@ -267,7 +263,7 @@ export const demoFunc = () => html `
|
|
|
267
263
|
.value=${'sk-1234567890abcdef'}
|
|
268
264
|
.infoText=${'Keep this key secure and never share it'}
|
|
269
265
|
></dees-input-text>
|
|
270
|
-
</
|
|
266
|
+
</dees-form>
|
|
271
267
|
</dees-panel>
|
|
272
268
|
</dees-demowrapper>
|
|
273
269
|
|
|
@@ -293,4 +289,4 @@ export const demoFunc = () => html `
|
|
|
293
289
|
</dees-demowrapper>
|
|
294
290
|
</div>
|
|
295
291
|
`;
|
|
296
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
292
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1pbnB1dC10ZXh0LmRlbW8uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1pbnB1dC9kZWVzLWlucHV0LXRleHQvZGVlcy1pbnB1dC10ZXh0LmRlbW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxHQUFHLEVBQUUsVUFBVSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDcEUsT0FBTyx3Q0FBd0MsQ0FBQztBQUNoRCxPQUFPLCtDQUErQyxDQUFDO0FBR3ZELE1BQU0sQ0FBQyxNQUFNLFFBQVEsR0FBRyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUE7O01BRTVCLEdBQUcsQ0FBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7c0JBc0NhLFVBQVUsQ0FBQyxPQUFPLENBQUMsb0JBQW9CLEVBQUUsc0JBQXNCLENBQUM7Ozs7Ozs7OztpQkFTckUsVUFBVSxDQUFDLE9BQU8sQ0FBQyxzQkFBc0IsRUFBRSxrQkFBa0IsQ0FBQzs7c0JBRXpELFVBQVUsQ0FBQyxPQUFPLENBQUMsa0JBQWtCLEVBQUUsc0JBQXNCLENBQUM7Ozs7S0FJL0U7Ozs7d0NBSW1DLEtBQUssRUFBRSxVQUF1QixFQUFFLEVBQUU7SUFDcEUsNkNBQTZDO0lBQzdDLE1BQU0sTUFBTSxHQUFHLFVBQVUsQ0FBQyxnQkFBZ0IsQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDO0lBRTlELE1BQU0sQ0FBQyxPQUFPLENBQUMsQ0FBQyxLQUFvQixFQUFFLEVBQUU7UUFDdEMsS0FBSyxDQUFDLGdCQUFnQixDQUFDLGVBQWUsRUFBRSxDQUFDLENBQUMsS0FBa0IsRUFBRSxFQUFFO1lBQzlELE9BQU8sQ0FBQyxHQUFHLENBQUMsVUFBVSxLQUFLLENBQUMsS0FBSyxlQUFlLEVBQUUsS0FBSyxDQUFDLFFBQVEsRUFBRSxDQUFDLENBQUM7UUFDdEUsQ0FBQyxDQUFrQixDQUFDLENB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
|
|
@@ -112,7 +112,7 @@ export const demoFunc = () => html `
|
|
|
112
112
|
|
|
113
113
|
<div class="demo-container">
|
|
114
114
|
<dees-panel .title=${'Basic Toggle'} .subtitle=${'Simple on/off toggle switch with drag support'}>
|
|
115
|
-
<
|
|
115
|
+
<dees-form>
|
|
116
116
|
<dees-input-toggle
|
|
117
117
|
.label=${'Enable feature'}
|
|
118
118
|
.value=${false}
|
|
@@ -131,12 +131,12 @@ export const demoFunc = () => html `
|
|
|
131
131
|
.description=${'This toggle has additional helper text explaining its purpose'}
|
|
132
132
|
.key=${'withDesc'}
|
|
133
133
|
></dees-input-toggle>
|
|
134
|
-
</
|
|
134
|
+
</dees-form>
|
|
135
135
|
<p class="drag-hint">Tip: You can drag the toggle knob to switch states</p>
|
|
136
136
|
</dees-panel>
|
|
137
137
|
|
|
138
138
|
<dees-panel .title=${'Toggle States'} .subtitle=${'Different toggle states and configurations'}>
|
|
139
|
-
<
|
|
139
|
+
<dees-form>
|
|
140
140
|
<dees-input-toggle
|
|
141
141
|
.label=${'Default (off)'}
|
|
142
142
|
.value=${false}
|
|
@@ -165,42 +165,44 @@ export const demoFunc = () => html `
|
|
|
165
165
|
.required=${true}
|
|
166
166
|
.description=${'This toggle cannot be turned off'}
|
|
167
167
|
></dees-input-toggle>
|
|
168
|
-
</
|
|
168
|
+
</dees-form>
|
|
169
169
|
</dees-panel>
|
|
170
170
|
|
|
171
171
|
<dees-panel .title=${'Horizontal Layout'} .subtitle=${'Toggles arranged horizontally for compact interfaces'}>
|
|
172
|
-
<
|
|
173
|
-
<
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
172
|
+
<dees-form>
|
|
173
|
+
<div class="horizontal-toggles">
|
|
174
|
+
<dees-input-toggle
|
|
175
|
+
.label=${'WiFi'}
|
|
176
|
+
.value=${true}
|
|
177
|
+
.layoutMode=${'horizontal'}
|
|
178
|
+
></dees-input-toggle>
|
|
178
179
|
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
180
|
+
<dees-input-toggle
|
|
181
|
+
.label=${'Bluetooth'}
|
|
182
|
+
.value=${false}
|
|
183
|
+
.layoutMode=${'horizontal'}
|
|
184
|
+
></dees-input-toggle>
|
|
184
185
|
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
186
|
+
<dees-input-toggle
|
|
187
|
+
.label=${'GPS'}
|
|
188
|
+
.value=${true}
|
|
189
|
+
.layoutMode=${'horizontal'}
|
|
190
|
+
></dees-input-toggle>
|
|
190
191
|
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
192
|
+
<dees-input-toggle
|
|
193
|
+
.label=${'NFC'}
|
|
194
|
+
.value=${false}
|
|
195
|
+
.layoutMode=${'horizontal'}
|
|
196
|
+
></dees-input-toggle>
|
|
197
|
+
</div>
|
|
198
|
+
</dees-form>
|
|
197
199
|
</dees-panel>
|
|
198
200
|
|
|
199
201
|
<dees-panel .title=${'Settings Example'} .subtitle=${'Toggles in a typical settings context'}>
|
|
200
202
|
<div class="settings-section">
|
|
201
203
|
<h4 class="section-title">Notification Settings</h4>
|
|
202
204
|
|
|
203
|
-
<
|
|
205
|
+
<dees-form>
|
|
204
206
|
<dees-input-toggle
|
|
205
207
|
.label=${'Push notifications'}
|
|
206
208
|
.value=${true}
|
|
@@ -228,7 +230,7 @@ export const demoFunc = () => html `
|
|
|
228
230
|
.description=${'Vibrate for notifications'}
|
|
229
231
|
.key=${'vibration'}
|
|
230
232
|
></dees-input-toggle>
|
|
231
|
-
</
|
|
233
|
+
</dees-form>
|
|
232
234
|
</div>
|
|
233
235
|
</dees-panel>
|
|
234
236
|
|
|
@@ -239,7 +241,7 @@ export const demoFunc = () => html `
|
|
|
239
241
|
</div>
|
|
240
242
|
|
|
241
243
|
<div class="feature-toggles">
|
|
242
|
-
<
|
|
244
|
+
<dees-form>
|
|
243
245
|
<dees-input-toggle
|
|
244
246
|
.label=${'Dark Mode'}
|
|
245
247
|
.value=${true}
|
|
@@ -269,12 +271,12 @@ export const demoFunc = () => html `
|
|
|
269
271
|
.value=${false}
|
|
270
272
|
.key=${'beta'}
|
|
271
273
|
></dees-input-toggle>
|
|
272
|
-
</
|
|
274
|
+
</dees-form>
|
|
273
275
|
</div>
|
|
274
276
|
</dees-panel>
|
|
275
277
|
|
|
276
278
|
<dees-panel .title=${'Interactive Example'} .subtitle=${'Toggle to see value changes in real-time'}>
|
|
277
|
-
<
|
|
279
|
+
<dees-form>
|
|
278
280
|
<dees-input-toggle
|
|
279
281
|
.label=${'Airplane mode'}
|
|
280
282
|
.value=${false}
|
|
@@ -296,7 +298,7 @@ export const demoFunc = () => html `
|
|
|
296
298
|
}
|
|
297
299
|
}}
|
|
298
300
|
></dees-input-toggle>
|
|
299
|
-
</
|
|
301
|
+
</dees-form>
|
|
300
302
|
|
|
301
303
|
<div class="interactive-section">
|
|
302
304
|
<div id="airplane-output" class="output-text">Airplane mode: OFF</div>
|
|
@@ -306,4 +308,4 @@ export const demoFunc = () => html `
|
|
|
306
308
|
</div>
|
|
307
309
|
</dees-demowrapper>
|
|
308
310
|
`;
|
|
309
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
311
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1pbnB1dC10b2dnbGUuZGVtby5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3RzX3dlYi9lbGVtZW50cy8wMGdyb3VwLWlucHV0L2RlZXMtaW5wdXQtdG9nZ2xlL2RlZXMtaW5wdXQtdG9nZ2xlLmRlbW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxHQUFHLEVBQUUsVUFBVSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDcEUsT0FBTyx3Q0FBd0MsQ0FBQztBQUNoRCxPQUFPLCtDQUErQyxDQUFDO0FBR3ZELE1BQU0sQ0FBQyxNQUFNLFFBQVEsR0FBRyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUE7c0NBQ0ksS0FBSyxFQUFFLFVBQXVCLEVBQUUsRUFBRTtJQUNwRSxzQ0FBc0M7SUFDdEMsTUFBTSxjQUFjLEdBQUcsVUFBVSxDQUFDLGFBQWEsQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO0lBQ2xFLE1BQU0sZUFBZSxHQUFHLFVBQVUsQ0FBQyxhQUFhLENBQUMsaUJBQWlCLENBQUMsQ0FBQztJQUNwRSxNQUFNLGNBQWMsR0FBRyxVQUFVLENBQUMsZ0JBQWdCLENBQUMsb0NBQW9DLENBQUMsQ0FBQztJQUV6RixJQUFJLGNBQWMsSUFBSSxlQUFlLEVBQUUsQ0FBQztRQUN0QyxjQUFjLENBQUMsZ0JBQWdCLENBQUMsT0FBTyxFQUFFLEdBQUcsRUFBRTtZQUM1QyxjQUFjLENBQUMsT0FBTyxDQUFDLENBQUMsTUFBTSxFQUFFLEVBQUU7Z0JBQ2hDLE1BQU0sQ0FBQyxHQUFHLE1BQW9DLENBQUM7Z0JBQy9DLElBQUksQ0FBQyxDQUFDLENBQUMsUUFBUSxJQUFJLENBQUMsQ0FBQyxDQUFDLFFBQVEsRUFBRSxDQUFDO29CQUMvQixDQUFDLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQztnQkFDakIsQ0FBQztZQUNILENBQUMsQ0FBQyxDQUFDO1FBQ0wsQ0FBQyxDQUFDLENBQUM7UUFFSCxlQUFl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
|