@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.
- package/dist_bundle/bundle.js +429 -407
- package/dist_ts_web/00_commitinfo_data.js +1 -1
- 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 -25
- 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 -18
- 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 -18
- package/dist_ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.demo.js +4 -4
- package/dist_ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.demo.js +54 -48
- 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 -35
- 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 -19
- package/package.json +1 -1
- package/ts_web/00_commitinfo_data.ts +1 -1
- 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 -38
- 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 -17
- 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 -17
- package/ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.demo.ts +4 -4
- package/ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.demo.ts +53 -47
- 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 -34
- 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 -18
|
@@ -108,25 +108,27 @@ export const demoFunc = () => html `
|
|
|
108
108
|
</dees-panel>
|
|
109
109
|
|
|
110
110
|
<dees-panel .title=${'3. Validation & Constraints'} .subtitle=${'Lists with minimum/maximum items and duplicate prevention'}>
|
|
111
|
-
<
|
|
112
|
-
<
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
111
|
+
<dees-form>
|
|
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>
|
|
131
|
+
</dees-form>
|
|
130
132
|
</dees-panel>
|
|
131
133
|
|
|
132
134
|
<dees-panel .title=${'4. Delete Confirmation'} .subtitle=${'Require confirmation before deleting items'}>
|
|
@@ -350,4 +352,4 @@ export const demoFunc = () => html `
|
|
|
350
352
|
</div>
|
|
351
353
|
</dees-demowrapper>
|
|
352
354
|
`;
|
|
353
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
355
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1pbnB1dC1saXN0LmRlbW8uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1pbnB1dC9kZWVzLWlucHV0LWxpc3QvZGVlcy1pbnB1dC1saXN0LmRlbW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxHQUFHLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUN4RCxPQUFPLHdDQUF3QyxDQUFDO0FBQ2hELE9BQU8sK0NBQStDLENBQUM7QUFDdkQsT0FBTywyQ0FBMkMsQ0FBQztBQUNuRCxPQUFPLHVDQUF1QyxDQUFDO0FBQy9DLE9BQU8seURBQXlELENBQUM7QUFFakUsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTs7O1FBRzFCLEdBQUcsQ0FBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7T0FpRUo7Ozs7MkJBSW9CLHFCQUFxQixjQUFjLG1EQUFtRDs7bUJBRTlGLGVBQWU7eUJBQ1QsMEJBQTBCO21CQUNoQyxDQUFDLE1BQU0sRUFBRSxPQUFPLEVBQUUsTUFBTSxFQUFFLFFBQVEsQ0FBQzt5QkFDN0Isb0RBQW9EOzs7Ozs7OzJCQU9sRCxrQkFBa0IsY0FBYyxnQ0FBZ0M7O21CQUV4RSxlQUFlO3lCQUNULGVBQWU7c0JBQ2xCLElBQUk7bUJBQ1A7SUFDUCxzQkFBc0I7SUFDdEIsa0JBQWtCO0lBQ2xCLHNCQUFzQjtJQUN0QixzQkFBc0I7SUFDdEIsc0JBQXNCO0NBQ3ZCO3lCQUNjLDZDQUE2Qzs7Ozs7OzsyQkFPM0MsNkJBQTZCLGNBQWMsMkRBQTJEOzs7O3VCQUkxRyw2QkFBNkI7NkJBQ3ZCLG9CQUFvQjswQkFDdkIsQ0FBQzswQkFDRCxDQUFDO3VCQUNKLENBQUMsT0FBTyxFQUFFLEtBQUssQ0FBQzswQkFDYixJQUFJOzZCQUNELHNCQUFzQjs7Ozt1QkFJNUIsNkJBQTZCOzZCQUN2QixtQkFBbUI7aUNBQ2YsS0FBSzt1QkFDZixDQUFDLFVBQVUsRUFBRSxTQUFTLEVBQUUsVUFBVSxDQUFDOzZCQUM3QixpQ0FBaUM7Ozs7OzsyQkFNbkMsd0JBQXdCLGNBQWMsNENBQTRDOzttQkFFMUYscUJBQXFCO3lCQUNmLHNCQUFzQjsyQkFDcEIsSUFBSTttQkFDWjtJQUNQLG1CQUFtQjtJQUNuQiwwQkFBMEI7SUFDMUIsdUJBQXVCO0lBQ3ZCLG1CQUFtQjtDQUNwQjt5QkFDYywyQ0FBMkM7Ozs7MkJBSXpDLG1CQUFtQixjQUFjLHdCQUF3Qjs7bUJBRWpFLGlCQUFpQjttQkFDakIsQ0FBQyxtQkFBbUIsRUFBRSxtQkFBbUIsRUFBRSxtQkFBbUIsQ0FBQztzQkFDNUQsSUFBSTt5QkFDRCxnQ0FBZ0M7Ozs7MkJBSTlCLHFCQUFxQixjQUFjLDBDQUEwQzs7O3FCQUduRixhQUFhOzJCQUNQLG1CQUFtQjt3QkFDdEIsSUFBSTttQkFDVCxNQUFNOzs7Ozt1QkFLRixhQUFhOzZCQUNQLG1CQUFtQjswQkFDdEIsSUFBSTswQkFDSixDQUFDO3FCQUNOLGFBQWE7MEJBQ1IsSUFBSTt1QkFDUDtJQUNQLGNBQWM7SUFDZCxhQUFhO0lBQ2IsUUFBUTtDQUNUOzZCQUNjLDRCQUE0Qjs7Ozt1QkFJbEMsY0FBYzs2QkFDUix5QkFBeUI7MEJBQzVCLElBQUk7MEJBQ0osQ0FBQztxQkFDTixjQUFjOzBCQUNULElBQUk7dUJBQ1A7SUFDUCx1QkFBdUI7SUFDdkIscUJBQXFCO0NBQ3RCOzZCQUNjLG1DQUFtQzs7Ozs7cUJBSzNDLE9BQU87eUJBQ0gsVUFBVTsyQkFDUiw4QkFBOEI7bUJBQ3RDLE9BQU87OztvQ0FHVSxhQUFhOzs7OzJCQUl0QixxQkFBcUIsY0FBYyw4Q0FBOEM7OzttQkFHekYsa0JBQWtCO3lCQUNaLGtCQUFrQjtzQkFDckIsSUFBSTsyQkFDQyxLQUFLOzZCQUNILEtBQUs7c0JBQ1osRUFBRTtvQkFDSixDQUFDLENBQWMsRUFBRSxFQUFFO0lBQzNCLE1BQU0sT0FBTyxHQUFHLFFBQVEsQ0FBQyxhQUFhLENBQUMsWUFBWSxDQUFDLENBQUM7SUFDckQsSUFBSSxPQUFPLEVBQUUsQ0FBQztRQUNaLE1BQU0sSUFBSSxHQUFHO1lBQ1gsS0FBSyxFQUFFLENBQUMsQ0FBQyxNQUFNLENBQUMsS0FBSztZQUNyQixLQUFLLEVBQUUsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsTUFBTTtZQUM1QixTQUFTLEVBQUUsSUFBSSxJQUFJLEVBQUUsQ0FBQyxXQUFXLEVBQUU7U0FDcEMsQ0FBQztRQUNGLE9BQU8sQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDO0lBQ3RELENBQUM7QUFDSCxDQUFDOzs7Ozs7OzRCQU9pQixJQUFJLElBQUksRUFBRSxDQUFDLFdBQVcsRUFBRTs7Ozs7Ozs7OzJCQVN6QiwyQkFBMkIsY0FBYyw0Q0FBNEM7O21CQUU3RixvQkFBb0I7eUJBQ2Qsa0JBQWtCO21CQUN4QjtJQUNQLDBCQUEwQjtJQUMxQixtQ0FBbUM7SUFDbkMseUJBQXlCO0lBQ3pCLGlDQUFpQztJQUNqQywyQkFBMkI7SUFDM0Isc0JBQXNCO0NBQ3ZCO3NCQUNXLElBQUk7MkJBQ0MsSUFBSTs2QkFDRixLQUFLO3NCQUNaLENBQUM7c0JBQ0QsRUFBRTtzQkFDRixJQUFJO3lCQUNELGlFQUFpRTs7OzsyQkFJL0QsbUNBQW1DLGNBQWMsNkRBQTZEOzs7O3FCQUlwSCxxQkFBcUI7MkJBQ2Ysa0NBQWtDOzBCQUNuQztJQUNaLEVBQUUsT0FBTyxFQUFFLGFBQWEsRUFBRSxPQUFPLEVBQUUsRUFBRSxFQUFFLEVBQUUsQ0FBQyxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUsVUFBVSxFQUFFLFVBQVUsRUFBRSxFQUFFO0lBQ3hGLEVBQUUsT0FBTyxFQUFFLGFBQWEsRUFBRSxPQUFPLEVBQUUsRUFBRSxFQUFFLEVBQUUsQ0FBQyxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUsVUFBVSxFQUFFLElBQUksRUFBRSxFQUFFO0lBQ2xGLEVBQUUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE9BQU8sRUFBRSxFQUFFLEVBQUUsRUFBRSxDQUFDLEVBQUUsSUFBSSxFQUFFLGlCQUFpQixFQUFFLFVBQVUsRUFBRSxTQUFTLEVBQUUsRUFBRTtJQUNqRyxFQUFFLE9BQU8sRUFBRSxhQUFhLEVBQUUsT0FBTyxFQUFFLEVBQUUsRUFBRSxFQUFFLENBQUMsRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLFVBQVUsRUFBRSxTQUFTLEVBQUUsRUFBRTtJQUN2RixFQUFFLE9BQU8sRUFBRSxXQUFXLEVBQUUsT0FBTyxFQUFFLEVBQUUsRUFBRSxFQUFFLENBQUMsRUFBRSxJQUFJLEVBQUUsYUFBYSxFQUFFLFVBQVUsRUFBRSxTQUFTLEVBQUUsRUFBRTtJQUN4RixFQUFFLE9BQU8sRUFBRSxjQUFjLEVBQUUsT0FBTyxFQUFFLEVBQUUsRUFBRSxFQUFFLENBQUMsRUFBRSxJQUFJLEVBQUUsUUFBUSxFQUFFLFVBQVUsRUFBRSxnQkFBZ0IsRUFBRSxFQUFFO0lBQzdGLEVBQUUsT0FBTyxFQUFFLGNBQWMsRUFBRSxPQUFPLEVBQUUsRUFBRSxFQUFFLEVBQUUsQ0FBQyxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUsVUFBVSxFQUFFLElBQUksRUFBRSxFQUFFO0lBQ25GLEVBQUUsT0FBTyxFQUFFLGFBQWEsRUFBRSxPQUFPLEVBQUUsRUFBRSxFQUFFLEVBQUUsQ0FBQyxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUsVUFBVSxFQUFFLFVBQVUsRUFBRSxFQUFFO0NBQ3pGO3FCQUNRLENBQUMsYUFBYSxFQUFFLGdCQUFnQixDQUFDO3dCQUM5QixDQUFDOzJCQUNFLGdGQUFnRjtzQkFDckYsQ0FBQyxDQUFjLEVBQUUsRUFBRTtJQUMzQixNQUFNLE9BQU8sR0FBRyxRQUFRLENBQUMsYUFBYSxDQUFDLGlCQUFpQixDQUFDLENBQUM7SUFDMUQsSUFBSSxPQUFPLEVBQUUsQ0FBQztRQUNaLE1BQU0sSUFBSSxHQUFJLENBQUMsQ0FBQyxNQUFjLENBQUM7UUFDL0IsTUFBTSxVQUFVLEdBQUcsSUFBSSxDQUFDLGtCQUFrQixFQUFFLENBQUM7UUFDN0MsT0FBTyxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDLFVBQVUsRUFBRSxJQUFJLEVBQUUsQ0FBQyxDQUFDLENBQUM7SUFDNUQsQ0FBQztBQUNILENBQUM7Ozs7Ozs7Ozs7Ozs7MkJBYWMsc0JBQXNCLGNBQWMsOENBQThDOzttQkFFMUYscUJBQXFCO3lCQUNmLHlCQUF5Qjt3QkFDMUI7SUFDWixFQUFFLE9BQU8sRUFBRSxZQUFZLEVBQUUsT0FBTyxFQUFFLEVBQUUsUUFBUSxFQUFFLFVBQVUsRUFBRSxFQUFFO0lBQzVELEVBQUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxPQUFPLEVBQUUsRUFBRSxRQUFRLEVBQUUsV0FBVyxFQUFFLEVBQUU7SUFDeEQsRUFBRSxPQUFPLEVBQUUsUUFBUSxFQUFFLE9BQU8sRUFBRSxFQUFFLFFBQVEsRUFBRSxXQUFXLEVBQUUsRUFBRTtJQUN6RCxFQUFFLE9BQU8sRUFBRSxTQUFTLEVBQUUsT0FBTyxFQUFFLEVBQUUsUUFBUSxFQUFFLFdBQVcsRUFBRSxFQUFFO0lBQzFELEVBQUUsT0FBTyxFQUFFLFNBQVMsRUFBRSxPQUFPLEVBQUUsRUFBRSxRQUFRLEVBQUUsU0FBUyxFQUFFLEVBQUU7SUFDeEQsRUFBRSxPQUFPLEVBQUUsTUFBTSxFQUFFLE9BQU8sRUFBRSxFQUFFLFFBQVEsRUFBRSxTQUFTLEVBQUUsRUFBRTtJQUNyRCxFQUFFLE9BQU8sRUFBRSxRQUFRLEVBQUUsT0FBTyxFQUFFLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxFQUFFO0lBQ3RELEVBQUUsT0FBTyxFQUFFLFlBQVksRUFBRSxPQUFPLEVBQUUsRUFBRSxRQUFRLEVBQUUsVUFBVSxFQUFFLEVBQUU7SUFDNUQsRUFBRSxPQUFPLEVBQUUsU0FBUyxFQUFFLE9BQU8sRUFBRSxFQUFFLFFBQVEsRUFBRSxVQUFVLEVBQUUsRUFBRTtJQUN6RCxFQUFFLE9BQU8sRUFBRSxPQUFPLEVBQUUsT0FBTyxFQUFFLEVBQUUsUUFBUSxFQUFFLFVBQVUsRUFBRSxFQUFFO0lBQ3ZELEVBQUUsT0FBTyxFQUFFLFlBQVksRUFBRSxPQUFPLEVBQUUsRUFBRSxRQUFRLEVBQUUsUUFBUSxFQUFFLEVBQUU7Q0FDM0Q7eUJBQ2MseUVBQXlFOzs7OzJCQUl2RSwyQkFBMkIsY0FBYywyRUFBMkU7O21CQUU1SCxNQUFNO3lCQUNBLGtDQUFrQzsyQkFDaEMsSUFBSTt3QkFDUDtJQUNaLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxPQUFPLEVBQUUsRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLEVBQUU7SUFDN0MsRUFBRSxPQUFPLEVBQUUsU0FBUyxFQUFFLE9BQU8sRUFBRSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsRUFBRTtJQUNsRCxFQUFFLE9BQU8sRUFBRSxNQUFNLEVBQUUsT0FBTyxFQUFFLEVBQUUsS0FBSyxFQUFFLE9BQU8sRUFBRSxFQUFFO0lBQ2hELEVBQUUsT0FBTyxFQUFFLFVBQVUsRUFBRSxPQUFPLEVBQUUsRUFBRSxLQUFLLEVBQUUsUUFBUSxFQUFFLEVBQUU7SUFDckQsRUFBRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE9BQU8sRUFBRSxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUUsRUFBRTtJQUN4RCxFQUFFLE9BQU8sRUFBRSxVQUFVLEVBQUUsT0FBTyxFQUFFLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxFQUFFO0NBQ25EO21CQUNRLENBQUMsS0FBSyxFQUFFLGVBQWUsRUFBRSxTQUFTLENBQUM7eUJBQzdCLHNHQUFzRzs7OzsyQkFJcEcsaUJBQWlCLGNBQWMsdUNBQXVDOzttQkFFOUUsWUFBWTt5QkFDTixxQkFBcUI7bUJBQzNCLEVBQUU7eUJBQ0ksdUNBQXVDOzs7OztDQUsvRCxDQUFDIn0=
|
package/dist_ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.demo.js
CHANGED
|
@@ -51,81 +51,83 @@ export const demoFunc = () => html `
|
|
|
51
51
|
<div class="section">
|
|
52
52
|
<div class="section-title">Multi-Option Toggle</div>
|
|
53
53
|
<div class="section-description">Select from multiple options with a smooth sliding indicator animation.</div>
|
|
54
|
-
|
|
55
|
-
<dees-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
54
|
+
|
|
55
|
+
<dees-form>
|
|
56
|
+
<dees-input-multitoggle
|
|
57
|
+
.label=${'Display Mode'}
|
|
58
|
+
.infoText=${'Choose how content is displayed'}
|
|
59
|
+
.description=${'This setting affects how items appear on your dashboard'}
|
|
60
|
+
.options=${['List View', 'Grid View', 'Compact']}
|
|
61
|
+
.selectedOption=${'Grid View'}
|
|
62
|
+
></dees-input-multitoggle>
|
|
63
|
+
|
|
64
|
+
<dees-input-multitoggle
|
|
65
|
+
.label=${'T-Shirt Size'}
|
|
66
|
+
.infoText=${'Select your preferred size'}
|
|
67
|
+
.options=${['XS', 'S', 'M', 'L', 'XL', 'XXL']}
|
|
68
|
+
.selectedOption=${'M'}
|
|
69
|
+
></dees-input-multitoggle>
|
|
70
|
+
</dees-form>
|
|
71
71
|
</div>
|
|
72
72
|
|
|
73
73
|
<div class="section">
|
|
74
74
|
<div class="section-title">Boolean Toggle</div>
|
|
75
75
|
<div class="section-description">Simple on/off switches with customizable labels for clearer context.</div>
|
|
76
|
-
|
|
77
|
-
<dees-
|
|
78
|
-
.label=${'Notifications'}
|
|
79
|
-
.infoText=${'Enable or disable push notifications'}
|
|
80
|
-
.type=${'boolean'}
|
|
81
|
-
.selectedOption=${'true'}
|
|
82
|
-
></dees-input-multitoggle>
|
|
83
|
-
|
|
84
|
-
<br><br>
|
|
85
|
-
|
|
86
|
-
<dees-input-multitoggle
|
|
87
|
-
.label=${'Theme Mode'}
|
|
88
|
-
.infoText=${'Switch between light and dark theme'}
|
|
89
|
-
.type=${'boolean'}
|
|
90
|
-
.booleanTrueName=${'Dark'}
|
|
91
|
-
.booleanFalseName=${'Light'}
|
|
92
|
-
.selectedOption=${'Dark'}
|
|
93
|
-
></dees-input-multitoggle>
|
|
94
|
-
</div>
|
|
95
|
-
|
|
96
|
-
<div class="section">
|
|
97
|
-
<div class="section-title">Settings Grid</div>
|
|
98
|
-
<div class="section-description">Configuration options arranged in a responsive grid layout.</div>
|
|
99
|
-
|
|
100
|
-
<div class="settings-grid">
|
|
76
|
+
|
|
77
|
+
<dees-form>
|
|
101
78
|
<dees-input-multitoggle
|
|
102
|
-
.label=${'
|
|
79
|
+
.label=${'Notifications'}
|
|
80
|
+
.infoText=${'Enable or disable push notifications'}
|
|
103
81
|
.type=${'boolean'}
|
|
104
|
-
.
|
|
105
|
-
.booleanFalseName=${'Disabled'}
|
|
106
|
-
.selectedOption=${'Enabled'}
|
|
82
|
+
.selectedOption=${'true'}
|
|
107
83
|
></dees-input-multitoggle>
|
|
108
|
-
|
|
84
|
+
|
|
109
85
|
<dees-input-multitoggle
|
|
110
|
-
.label=${'
|
|
111
|
-
.
|
|
112
|
-
.selectedOption=${'English'}
|
|
113
|
-
></dees-input-multitoggle>
|
|
114
|
-
|
|
115
|
-
<dees-input-multitoggle
|
|
116
|
-
.label=${'Quality'}
|
|
117
|
-
.options=${['Low', 'Medium', 'High', 'Ultra']}
|
|
118
|
-
.selectedOption=${'High'}
|
|
119
|
-
></dees-input-multitoggle>
|
|
120
|
-
|
|
121
|
-
<dees-input-multitoggle
|
|
122
|
-
.label=${'Privacy'}
|
|
86
|
+
.label=${'Theme Mode'}
|
|
87
|
+
.infoText=${'Switch between light and dark theme'}
|
|
123
88
|
.type=${'boolean'}
|
|
124
|
-
.booleanTrueName=${'
|
|
125
|
-
.booleanFalseName=${'
|
|
126
|
-
.selectedOption=${'
|
|
89
|
+
.booleanTrueName=${'Dark'}
|
|
90
|
+
.booleanFalseName=${'Light'}
|
|
91
|
+
.selectedOption=${'Dark'}
|
|
127
92
|
></dees-input-multitoggle>
|
|
128
|
-
</
|
|
93
|
+
</dees-form>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
<div class="section">
|
|
97
|
+
<div class="section-title">Settings Grid</div>
|
|
98
|
+
<div class="section-description">Configuration options arranged in a responsive grid layout.</div>
|
|
99
|
+
|
|
100
|
+
<dees-form>
|
|
101
|
+
<div class="settings-grid">
|
|
102
|
+
<dees-input-multitoggle
|
|
103
|
+
.label=${'Auto-Save'}
|
|
104
|
+
.type=${'boolean'}
|
|
105
|
+
.booleanTrueName=${'Enabled'}
|
|
106
|
+
.booleanFalseName=${'Disabled'}
|
|
107
|
+
.selectedOption=${'Enabled'}
|
|
108
|
+
></dees-input-multitoggle>
|
|
109
|
+
|
|
110
|
+
<dees-input-multitoggle
|
|
111
|
+
.label=${'Language'}
|
|
112
|
+
.options=${['English', 'German', 'French', 'Spanish']}
|
|
113
|
+
.selectedOption=${'English'}
|
|
114
|
+
></dees-input-multitoggle>
|
|
115
|
+
|
|
116
|
+
<dees-input-multitoggle
|
|
117
|
+
.label=${'Quality'}
|
|
118
|
+
.options=${['Low', 'Medium', 'High', 'Ultra']}
|
|
119
|
+
.selectedOption=${'High'}
|
|
120
|
+
></dees-input-multitoggle>
|
|
121
|
+
|
|
122
|
+
<dees-input-multitoggle
|
|
123
|
+
.label=${'Privacy'}
|
|
124
|
+
.type=${'boolean'}
|
|
125
|
+
.booleanTrueName=${'Private'}
|
|
126
|
+
.booleanFalseName=${'Public'}
|
|
127
|
+
.selectedOption=${'Private'}
|
|
128
|
+
></dees-input-multitoggle>
|
|
129
|
+
</div>
|
|
130
|
+
</dees-form>
|
|
129
131
|
</div>
|
|
130
132
|
|
|
131
133
|
<div class="section">
|
|
@@ -161,4 +163,4 @@ export const demoFunc = () => html `
|
|
|
161
163
|
</div>
|
|
162
164
|
</dees-demowrapper>
|
|
163
165
|
`;
|
|
164
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
166
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1pbnB1dC1tdWx0aXRvZ2dsZS5kZW1vLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vdHNfd2ViL2VsZW1lbnRzLzAwZ3JvdXAtaW5wdXQvZGVlcy1pbnB1dC1tdWx0aXRvZ2dsZS9kZWVzLWlucHV0LW11bHRpdG9nZ2xlLmRlbW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxHQUFHLEVBQUUsVUFBVSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFFcEUsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTs7O1FBRzFCLEdBQUcsQ0FBQTs7Ozs7O3dCQU1hLFVBQVUsQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQzs7Ozs7d0JBS3hDLFVBQVUsQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQzs4QkFDbEMsVUFBVSxDQUFDLE9BQU8sQ0FBQyxTQUFTLEVBQUUsU0FBUyxDQUFDOzs7Ozs7Ozs7O21CQVVuRCxVQUFVLENBQUMsT0FBTyxDQUFDLFNBQVMsRUFBRSxTQUFTLENBQUM7Ozs7O21CQUt4QyxVQUFVLENBQUMsT0FBTyxDQUFDLFNBQVMsRUFBRSxTQUFTLENBQUM7Ozs7Ozs7Ozs7Ozs7OztPQWVwRDs7Ozs7Ozs7OztxQkFVYyxjQUFjO3dCQUNYLGlDQUFpQzsyQkFDOUIseURBQXlEO3VCQUM3RCxDQUFDLFdBQVcsRUFBRSxXQUFXLEVBQUUsU0FBUyxDQUFDOzhCQUM5QixXQUFXOzs7O3FCQUlwQixjQUFjO3dCQUNYLDRCQUE0Qjt1QkFDN0IsQ0FBQyxJQUFJLEVBQUUsR0FBRyxFQUFFLEdBQUcsRUFBRSxHQUFHLEVBQUUsSUFBSSxFQUFFLEtBQUssQ0FBQzs4QkFDM0IsR0FBRzs7Ozs7Ozs7Ozs7cUJBV1osZUFBZTt3QkFDWixzQ0FBc0M7b0JBQzFDLFNBQVM7OEJBQ0MsTUFBTTs7OztxQkFJZixZQUFZO3dCQUNULHFDQUFxQztvQkFDekMsU0FBUzsrQkFDRSxNQUFNO2dDQUNMLE9BQU87OEJBQ1QsTUFBTTs7Ozs7Ozs7Ozs7O3VCQVliLFdBQVc7c0JBQ1osU0FBUztpQ0FDRSxTQUFTO2tDQUNSLFVBQVU7Z0NBQ1osU0FBUzs7Ozt1QkFJbEIsVUFBVTt5QkFDUixDQUFDLFNBQVMsRUFBRSxRQUFRLEVBQUUsUUFBUSxFQUFFLFNBQVMsQ0FBQztnQ0FDbkMsU0FBUzs7Ozt1QkFJbEIsU0FBUzt5QkFDUCxDQUFDLEtBQUssRUFBRSxRQUFRLEVBQUUsTUFBTSxFQUFFLE9BQU8sQ0FBQztnQ0FDM0IsTUFBTTs7Ozt1QkFJZixTQUFTO3NCQUNWLFNBQVM7aUNBQ0UsU0FBUztrQ0FDUixRQUFRO2dDQUNWLFNBQVM7Ozs7Ozs7Ozs7O21CQVd0QixjQUFjO3NCQUNYLHdCQUF3QjtxQkFDekIsQ0FBQyxNQUFNLEVBQUUsS0FBSyxFQUFFLFlBQVksQ0FBQzs0QkFDdEIsWUFBWTtzQkFDbEIsSUFBSTs7Ozs7O29DQU1VLGNBQWMsY0FBYyxJQUFJOztxQkFFL0MsWUFBWTtvQkFDYixTQUFTOytCQUNFLFFBQVE7Z0NBQ1AsU0FBUzs4QkFDWCxTQUFTOzs7cUJBR2xCLFNBQVM7dUJBQ1AsQ0FBQyxLQUFLLEVBQUUsWUFBWSxFQUFFLFFBQVEsRUFBRSxhQUFhLENBQUM7OEJBQ3ZDLEtBQUs7Ozs7OztDQU1sQyxDQUFDIn0=
|
|
@@ -29,7 +29,7 @@ export const demoFunc = () => html `
|
|
|
29
29
|
|
|
30
30
|
<div class="demo-container">
|
|
31
31
|
<dees-panel .title=${'Basic Phone Input'} .subtitle=${'Automatic formatting for phone numbers'}>
|
|
32
|
-
<
|
|
32
|
+
<dees-form>
|
|
33
33
|
<dees-input-phone
|
|
34
34
|
.label=${'Phone Number'}
|
|
35
35
|
.infoText=${'Enter your phone number with country code'}
|
|
@@ -43,27 +43,29 @@ export const demoFunc = () => html `
|
|
|
43
43
|
.required=${true}
|
|
44
44
|
.placeholder=${'+1 (555) 000-0000'}
|
|
45
45
|
></dees-input-phone>
|
|
46
|
-
</
|
|
46
|
+
</dees-form>
|
|
47
47
|
</dees-panel>
|
|
48
48
|
|
|
49
49
|
<dees-panel .title=${'Horizontal Layout'} .subtitle=${'Phone inputs arranged horizontally'}>
|
|
50
|
-
<
|
|
51
|
-
<
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
50
|
+
<dees-form>
|
|
51
|
+
<div class="horizontal-group">
|
|
52
|
+
<dees-input-phone
|
|
53
|
+
.label=${'Mobile'}
|
|
54
|
+
.layoutMode=${'horizontal'}
|
|
55
|
+
.value=${'4155551234'}
|
|
56
|
+
></dees-input-phone>
|
|
57
|
+
|
|
58
|
+
<dees-input-phone
|
|
59
|
+
.label=${'Office'}
|
|
60
|
+
.layoutMode=${'horizontal'}
|
|
61
|
+
.placeholder=${'+1 (800) 555-0000'}
|
|
62
|
+
></dees-input-phone>
|
|
63
|
+
</div>
|
|
64
|
+
</dees-form>
|
|
63
65
|
</dees-panel>
|
|
64
66
|
|
|
65
67
|
<dees-panel .title=${'International Numbers'} .subtitle=${'Supports formatting for numbers with country codes'}>
|
|
66
|
-
<
|
|
68
|
+
<dees-form>
|
|
67
69
|
<dees-input-phone
|
|
68
70
|
.label=${'International Contact'}
|
|
69
71
|
.infoText=${'Automatically formats international numbers'}
|
|
@@ -75,7 +77,7 @@ export const demoFunc = () => html `
|
|
|
75
77
|
.value=${'911'}
|
|
76
78
|
.disabled=${true}
|
|
77
79
|
></dees-input-phone>
|
|
78
|
-
</
|
|
80
|
+
</dees-form>
|
|
79
81
|
</dees-panel>
|
|
80
82
|
|
|
81
83
|
<dees-panel .title=${'Form Integration'} .subtitle=${'Phone input as part of a contact form'}>
|
|
@@ -88,4 +90,4 @@ export const demoFunc = () => html `
|
|
|
88
90
|
</div>
|
|
89
91
|
</dees-demowrapper>
|
|
90
92
|
`;
|
|
91
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
93
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1pbnB1dC1waG9uZS5kZW1vLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vdHNfd2ViL2VsZW1lbnRzLzAwZ3JvdXAtaW5wdXQvZGVlcy1pbnB1dC1waG9uZS9kZWVzLWlucHV0LXBob25lLmRlbW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxHQUFHLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUV4RCxNQUFNLENBQUMsTUFBTSxRQUFRLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBOzs7UUFHMUIsR0FBRyxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O09Bc0JKOzs7OzJCQUlvQixtQkFBbUIsY0FBYyx3Q0FBd0M7OztxQkFHL0UsY0FBYzt3QkFDWCwyQ0FBMkM7MkJBQ3hDLGdEQUFnRDtxQkFDdEQsWUFBWTs7OztxQkFJWixlQUFlO3dCQUNaLG1DQUFtQzt3QkFDbkMsSUFBSTsyQkFDRCxtQkFBbUI7Ozs7OzJCQUtuQixtQkFBbUIsY0FBYyxvQ0FBb0M7Ozs7dUJBSXpFLFFBQVE7NEJBQ0gsWUFBWTt1QkFDakIsWUFBWTs7Ozt1QkFJWixRQUFROzRCQUNILFlBQVk7NkJBQ1gsbUJBQW1COzs7Ozs7MkJBTXJCLHVCQUF1QixjQUFjLG9EQUFvRDs7O3FCQUcvRix1QkFBdUI7d0JBQ3BCLDZDQUE2QztxQkFDaEQsY0FBYzs7OztxQkFJZCxtQkFBbUI7cUJBQ25CLEtBQUs7d0JBQ0YsSUFBSTs7Ozs7MkJBS0Qsa0JBQWtCLGNBQWMsdUNBQXVDOztvQ0FFOUQsV0FBVyxjQUFjLElBQUk7cUNBQzVCLGNBQWMsY0FBYyxJQUFJO29DQUNqQyxPQUFPLGVBQWUsT0FBTzs7Ozs7Q0FLaEUsQ0FBQyJ9
|
|
@@ -65,7 +65,7 @@ export const demoFunc = () => html `
|
|
|
65
65
|
|
|
66
66
|
<div class="demo-container">
|
|
67
67
|
<dees-panel .title=${'Basic Quantity Selector'} .subtitle=${'Simple quantity input with increment/decrement buttons'}>
|
|
68
|
-
<
|
|
68
|
+
<dees-form>
|
|
69
69
|
<dees-input-quantityselector
|
|
70
70
|
.label=${'Quantity'}
|
|
71
71
|
.infoText=${'Select the desired quantity'}
|
|
@@ -78,7 +78,7 @@ export const demoFunc = () => html `
|
|
|
78
78
|
.infoText=${'Adjust the quantity of items'}
|
|
79
79
|
.value=${3}
|
|
80
80
|
></dees-input-quantityselector>
|
|
81
|
-
</
|
|
81
|
+
</dees-form>
|
|
82
82
|
</dees-panel>
|
|
83
83
|
|
|
84
84
|
<dees-panel .title=${'Shopping Cart'} .subtitle=${'Modern e-commerce product cards with interactive quantity selectors'} .runAfterRender=${async (elementArg) => {
|
|
@@ -172,7 +172,7 @@ export const demoFunc = () => html `
|
|
|
172
172
|
</dees-panel>
|
|
173
173
|
|
|
174
174
|
<dees-panel .title=${'Required & Disabled States'} .subtitle=${'Different states for validation and restrictions'}>
|
|
175
|
-
<
|
|
175
|
+
<dees-form>
|
|
176
176
|
<dees-input-quantityselector
|
|
177
177
|
.label=${'Number of Licenses'}
|
|
178
178
|
.infoText=${'Select how many licenses you need'}
|
|
@@ -186,7 +186,7 @@ export const demoFunc = () => html `
|
|
|
186
186
|
.disabled=${true}
|
|
187
187
|
.value=${5}
|
|
188
188
|
></dees-input-quantityselector>
|
|
189
|
-
</
|
|
189
|
+
</dees-form>
|
|
190
190
|
</dees-panel>
|
|
191
191
|
|
|
192
192
|
<dees-panel .title=${'Order Form'} .subtitle=${'Complete order form with quantity selection'}>
|
package/dist_ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.demo.js
CHANGED
|
@@ -47,25 +47,27 @@ export const demoFunc = () => html `
|
|
|
47
47
|
|
|
48
48
|
<div class="demo-container">
|
|
49
49
|
<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
|
-
|
|
50
|
+
<dees-form>
|
|
51
|
+
<div class="demo-grid">
|
|
52
|
+
<dees-input-radiogroup
|
|
53
|
+
.label=${'Subscription Plan'}
|
|
54
|
+
.options=${['Basic - $9/month', 'Pro - $29/month', 'Enterprise - $99/month']}
|
|
55
|
+
.selectedOption=${'Pro - $29/month'}
|
|
56
|
+
.description=${'Choose your subscription tier'}
|
|
57
|
+
></dees-input-radiogroup>
|
|
58
|
+
|
|
59
|
+
<dees-input-radiogroup
|
|
60
|
+
.label=${'Priority Level'}
|
|
61
|
+
.options=${['High', 'Medium', 'Low']}
|
|
62
|
+
.selectedOption=${'Medium'}
|
|
63
|
+
.required=${true}
|
|
64
|
+
></dees-input-radiogroup>
|
|
65
|
+
</div>
|
|
66
|
+
</dees-form>
|
|
65
67
|
</dees-panel>
|
|
66
68
|
|
|
67
69
|
<dees-panel .title=${'2. Horizontal Layout'} .subtitle=${'Radio groups with horizontal arrangement'}>
|
|
68
|
-
<
|
|
70
|
+
<dees-form>
|
|
69
71
|
<dees-input-radiogroup
|
|
70
72
|
.label=${'Do you agree with the terms?'}
|
|
71
73
|
.options=${['Yes', 'No', 'Maybe']}
|
|
@@ -80,7 +82,7 @@ export const demoFunc = () => html `
|
|
|
80
82
|
.selectedOption=${'Intermediate'}
|
|
81
83
|
.description=${'Select your experience level with web development'}
|
|
82
84
|
></dees-input-radiogroup>
|
|
83
|
-
</
|
|
85
|
+
</dees-form>
|
|
84
86
|
</dees-panel>
|
|
85
87
|
|
|
86
88
|
<dees-panel .title=${'3. Advanced Options'} .subtitle=${'Using object format with keys and payloads'}>
|
|
@@ -105,41 +107,45 @@ export const demoFunc = () => html `
|
|
|
105
107
|
</dees-panel>
|
|
106
108
|
|
|
107
109
|
<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
|
-
|
|
110
|
+
<dees-form>
|
|
111
|
+
<div class="demo-grid">
|
|
112
|
+
<dees-input-radiogroup
|
|
113
|
+
.label=${'How satisfied are you?'}
|
|
114
|
+
.options=${['Very Satisfied', 'Satisfied', 'Neutral', 'Dissatisfied', 'Very Dissatisfied']}
|
|
115
|
+
.selectedOption=${'Satisfied'}
|
|
116
|
+
></dees-input-radiogroup>
|
|
117
|
+
|
|
118
|
+
<dees-input-radiogroup
|
|
119
|
+
.label=${'Would you recommend us?'}
|
|
120
|
+
.options=${['Definitely', 'Probably', 'Not Sure', 'Probably Not', 'Definitely Not']}
|
|
121
|
+
.selectedOption=${'Probably'}
|
|
122
|
+
></dees-input-radiogroup>
|
|
123
|
+
</div>
|
|
124
|
+
</dees-form>
|
|
121
125
|
</dees-panel>
|
|
122
126
|
|
|
123
127
|
<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
|
-
|
|
128
|
+
<dees-form>
|
|
129
|
+
<div class="demo-grid">
|
|
130
|
+
<dees-input-radiogroup
|
|
131
|
+
.label=${'Required Selection'}
|
|
132
|
+
.options=${['Option A', 'Option B', 'Option C']}
|
|
133
|
+
.required=${true}
|
|
134
|
+
.description=${'This field is required'}
|
|
135
|
+
></dees-input-radiogroup>
|
|
136
|
+
|
|
137
|
+
<dees-input-radiogroup
|
|
138
|
+
.label=${'Disabled State'}
|
|
139
|
+
.options=${['Disabled Option 1', 'Disabled Option 2', 'Disabled Option 3']}
|
|
140
|
+
.selectedOption=${'Disabled Option 2'}
|
|
141
|
+
.disabled=${true}
|
|
142
|
+
></dees-input-radiogroup>
|
|
143
|
+
</div>
|
|
144
|
+
</dees-form>
|
|
139
145
|
</dees-panel>
|
|
140
146
|
|
|
141
147
|
<dees-panel .title=${'6. Settings Example'} .subtitle=${'Common patterns in application settings'}>
|
|
142
|
-
<
|
|
148
|
+
<dees-form>
|
|
143
149
|
<dees-input-radiogroup
|
|
144
150
|
.label=${'Theme Preference'}
|
|
145
151
|
.options=${[
|
|
@@ -164,7 +170,7 @@ export const demoFunc = () => html `
|
|
|
164
170
|
.selectedOption=${'English'}
|
|
165
171
|
.direction=${'horizontal'}
|
|
166
172
|
></dees-input-radiogroup>
|
|
167
|
-
</
|
|
173
|
+
</dees-form>
|
|
168
174
|
</dees-panel>
|
|
169
175
|
|
|
170
176
|
<dees-panel .title=${'7. Form Integration'} .subtitle=${'Works seamlessly with dees-form'}>
|
|
@@ -207,4 +213,4 @@ export const demoFunc = () => html `
|
|
|
207
213
|
</div>
|
|
208
214
|
</dees-demowrapper>
|
|
209
215
|
`;
|
|
210
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
216
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1pbnB1dC1yYWRpb2dyb3VwLmRlbW8uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1pbnB1dC9kZWVzLWlucHV0LXJhZGlvZ3JvdXAvZGVlcy1pbnB1dC1yYWRpb2dyb3VwLmRlbW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxHQUFHLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUN4RCxPQUFPLHdDQUF3QyxDQUFDO0FBQ2hELE9BQU8sK0NBQStDLENBQUM7QUFFdkQsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTs7O1FBRzFCLEdBQUcsQ0FBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7T0FzQ0o7Ozs7MkJBSW9CLHVCQUF1QixjQUFjLDRDQUE0Qzs7Ozt1QkFJckYsbUJBQW1CO3lCQUNqQixDQUFDLGtCQUFrQixFQUFFLGlCQUFpQixFQUFFLHdCQUF3QixDQUFDO2dDQUMxRCxpQkFBaUI7NkJBQ3BCLCtCQUErQjs7Ozt1QkFJckMsZ0JBQWdCO3lCQUNkLENBQUMsTUFBTSxFQUFFLFFBQVEsRUFBRSxLQUFLLENBQUM7Z0NBQ2xCLFFBQVE7MEJBQ2QsSUFBSTs7Ozs7OzJCQU1ILHNCQUFzQixjQUFjLDBDQUEwQzs7O3FCQUdwRiw4QkFBOEI7dUJBQzVCLENBQUMsS0FBSyxFQUFFLElBQUksRUFBRSxPQUFPLENBQUM7eUJBQ3BCLFlBQVk7OEJBQ1AsS0FBSzs7OztxQkFJZCxrQkFBa0I7dUJBQ2hCLENBQUMsVUFBVSxFQUFFLGNBQWMsRUFBRSxRQUFRLENBQUM7eUJBQ3BDLFlBQVk7OEJBQ1AsY0FBYzsyQkFDakIsbURBQW1EOzs7OzsyQkFLbkQscUJBQXFCLGNBQWMsNENBQTRDOzs7bUJBR3ZGLGVBQWU7cUJBQ2I7SUFDVCxFQUFFLE1BQU0sRUFBRSx5QkFBeUIs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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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1pbnB1dC10YWdzLmRlbW8uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1pbnB1dC9kZWVzLWlucHV0LXRhZ3MvZGVlcy1pbnB1dC10YWdzLmRlbW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxHQUFHLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUN4RCxPQUFPLHdDQUF3QyxDQUFDO0FBQ2hELE9BQU8sK0NBQStDLENBQUM7QUFFdkQsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTs7O1FBRzFCLEdBQUcsQ0FBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O09BaUZKOzs7OzJCQUlvQixxQkFBcUIsY0FBYyxvREFBb0Q7O21CQUUvRix1QkFBdUI7eUJBQ2pCLG1CQUFtQjttQkFDekIsQ0FBQyxZQUFZLEVBQUUsWUFBWSxFQUFFLFFBQVEsRUFBRSxJQUFJLENBQUM7eUJBQ3RDLGtDQUFrQzs7OzsyQkFJaEMsMEJBQTBCLGNBQWMsNENBQTRDOzttQkFFNUYsWUFBWTt5QkFDTiw0QkFBNEI7eUJBQzVCO0lBQ2IsT0FBTyxFQUFFLEtBQUssRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLFdBQVc7SUFDMUUsU0FBUyxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsU0FBUyxFQUFFLFNBQVMsRUFBRSxTQUFTLEVBQUUsS0FBSztJQUNoRSxTQUFTLEVBQUUsWUFBWSxFQUFFLE9BQU8sRUFBRSxPQUFPLEVBQUUsUUFBUSxFQUFFLFdBQVc7SUFDaEUsUUFBUSxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUUsU0FBUztDQUNuRTttQkFDUSxDQUFDLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLFFBQVEsQ0FBQzt5QkFDdEMsMkRBQTJEOzs7OzJCQUl6RCxpQkFBaUIsY0FBYywyQ0FBMkM7Ozs7dUJBSTlFLGNBQWM7NkJBQ1IsdUJBQXVCO3lCQUMzQixDQUFDO3VCQUNILENBQUMsUUFBUSxFQUFFLGFBQWEsQ0FBQzs2QkFDbkIsd0JBQXdCOzs7O3VCQUk5QixvQkFBb0I7NkJBQ2Qsc0JBQXNCO3lCQUMxQixDQUFDOzZCQUNHLENBQUMsTUFBTSxFQUFFLFVBQVUsRUFBRSxNQUFNLEVBQUUsUUFBUSxFQUFFLE9BQU8sRUFBRSxZQUFZLEVBQUUsV0FBVyxDQUFDO3VCQUNoRixDQUFDLFVBQVUsRUFBRSxPQUFPLENBQUM7NkJBQ2YsMkJBQTJCOzs7Ozs7MkJBTTdCLDBCQUEwQixjQUFjLHlDQUF5Qzs7bUJBRXpGLGNBQWM7eUJBQ1IseUJBQXlCO3NCQUM1QixJQUFJO3lCQUNELCtDQUErQzs7OzsyQkFJN0MsbUJBQW1CLGNBQWMsd0JBQXdCOzttQkFFakUsYUFBYTttQkFDYixDQUFDLFFBQVEsRUFBRSxXQUFXLEVBQUUsV0FBVyxFQUFFLFNBQVMsQ0FBQztzQkFDNUMsSUFBSTt5QkFDRCwrQkFBK0I7Ozs7MkJBSTdCLHFCQUFxQixjQUFjLDBDQUEwQzs7O3FCQUduRixjQUFjOzJCQUNSLG9CQUFvQjt3QkFDdkIsSUFBSTttQkFDVCxNQUFNOzs7Ozt1QkFLRixtQkFBbUI7NkJBQ2IscUJBQXFCOzBCQUN4QixJQUFJO3FCQUNULGNBQWM7NkJBQ047SUFDYixZQUFZLEVBQUUsWUFBWSxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUUsTUFBTTtJQUNsRCxPQUFPLEVBQUUsS0FBSyxFQUFFLFNBQVMsRUFBRSxRQUFRO0lBQ25DLFNBQVMsRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLFNBQVM7Q0FDeEM7Ozs7dUJBSVEsY0FBYzs2QkFDUix5QkFBeUI7cUJBQ2pDLE1BQU07eUJBQ0YsRUFBRTs2QkFDRTtJQUNiLFVBQVUsRUFBRSxTQUFTLEVBQUUsV0FBVyxFQUFFLFFBQVEsRUFBRSxTQUFTO0lBQ3ZELEtBQUssRUFBRSxLQUFLLEVBQUUsVUFBVSxFQUFFLFFBQVEsRUFBRSxPQUFPO0lBQzNDLFlBQVksRUFBRSxNQUFNLEVBQUUsWUFBWSxFQUFFLFNBQVM7Q0FDOUM7Ozs7O3FCQUtNLGFBQWE7eUJBQ1QsVUFBVTsyQkFDUiwwQkFBMEI7bUJBQ2xDLGFBQWE7OztvQ0FHSSxnQkFBZ0I7Ozs7MkJBSXpCLHFCQUFxQixjQUFjLDhDQUE4Qzs7O21CQUd6RixnQkFBZ0I7eUJBQ1Ysd0JBQXdCO3lCQUN4QjtJQUNiLE9BQU8sRUFBRSxRQUFRLEVBQUUsT0FBTyxFQUFFLFFBQVEsRUFBRSxhQUFhO0lBQ25ELFNBQVMsRUFBRSxRQUFRLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRSxZQUFZO0lBQ2xELFNBQVMsRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLFNBQVMsRUFBRSxTQUFTO0NBQ3JEO29CQUNTLENBQUMsQ0FBYyxFQUFFLEVBQUU7SUFDM0IsTUFBTSxPQUFPLEdBQUcsUUFBUSxDQUFDLGFBQWEsQ0FBQyxlQUFlLENBQUMsQ0FBQztJQUN4RCxNQUFNLElBQUksR0FBRyxDQUFDLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQztJQUM1QixJQUFJLE9BQU8sRUFBRSxDQUFDO1FBQ1osSUFBSSxJQUFJLENBQUMsTUFBTSxLQUFLLENBQUMsRUFBRSxDQUFDO1lBQ3RCLE9BQU8sQ0FBQyxTQUFTLEdBQUcsb0RBQW9ELENBQUM7UUFDM0UsQ0FBQzthQUFNLENBQUM7WUFDTixPQUFPLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxHQUFXLEVBQUUsRUFBRSxDQUMzQyxrQ0FBa0MsR0FBRyxTQUFTLENBQy9DLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDO1FBQ2IsQ0FBQztJQUNILENBQUM7QUFDSCxDQUFDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Q0F3QlYsQ0FBQyJ9
|