@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
|
@@ -12,12 +12,6 @@ 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
|
-
|
|
21
15
|
.payment-group {
|
|
22
16
|
display: flex;
|
|
23
17
|
align-items: center;
|
|
@@ -29,7 +23,7 @@ export const demoFunc = () => html `
|
|
|
29
23
|
|
|
30
24
|
<div class="demo-container">
|
|
31
25
|
<dees-panel .title=${'Basic IBAN Input'} .subtitle=${'International Bank Account Number with automatic formatting'}>
|
|
32
|
-
<
|
|
26
|
+
<dees-form>
|
|
33
27
|
<dees-input-iban
|
|
34
28
|
.label=${'Bank Account IBAN'}
|
|
35
29
|
.infoText=${'Enter your International Bank Account Number'}
|
|
@@ -41,27 +35,29 @@ export const demoFunc = () => html `
|
|
|
41
35
|
.infoText=${'This IBAN has been verified'}
|
|
42
36
|
.value=${'DE89370400440532013000'}
|
|
43
37
|
></dees-input-iban>
|
|
44
|
-
</
|
|
38
|
+
</dees-form>
|
|
45
39
|
</dees-panel>
|
|
46
40
|
|
|
47
41
|
<dees-panel .title=${'Payment Information'} .subtitle=${'IBAN input with horizontal layout for payment forms'}>
|
|
48
|
-
<
|
|
49
|
-
<
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
42
|
+
<dees-form>
|
|
43
|
+
<div class="payment-group">
|
|
44
|
+
<dees-input-text
|
|
45
|
+
.label=${'Account Holder'}
|
|
46
|
+
.layoutMode=${'horizontal'}
|
|
47
|
+
.value=${'John Doe'}
|
|
48
|
+
></dees-input-text>
|
|
49
|
+
|
|
50
|
+
<dees-input-iban
|
|
51
|
+
.label=${'IBAN'}
|
|
52
|
+
.layoutMode=${'horizontal'}
|
|
53
|
+
.value=${'GB82WEST12345698765432'}
|
|
54
|
+
></dees-input-iban>
|
|
55
|
+
</div>
|
|
56
|
+
</dees-form>
|
|
61
57
|
</dees-panel>
|
|
62
58
|
|
|
63
59
|
<dees-panel .title=${'Validation & States'} .subtitle=${'Required fields and disabled states'}>
|
|
64
|
-
<
|
|
60
|
+
<dees-form>
|
|
65
61
|
<dees-input-iban
|
|
66
62
|
.label=${'Payment Account'}
|
|
67
63
|
.infoText=${'Required for processing payments'}
|
|
@@ -74,7 +70,7 @@ export const demoFunc = () => html `
|
|
|
74
70
|
.value=${'FR1420041010050500013M02606'}
|
|
75
71
|
.disabled=${true}
|
|
76
72
|
></dees-input-iban>
|
|
77
|
-
</
|
|
73
|
+
</dees-form>
|
|
78
74
|
</dees-panel>
|
|
79
75
|
|
|
80
76
|
<dees-panel .title=${'Bank Transfer Form'} .subtitle=${'Complete form example with IBAN validation'}>
|
|
@@ -88,4 +84,4 @@ export const demoFunc = () => html `
|
|
|
88
84
|
</div>
|
|
89
85
|
</dees-demowrapper>
|
|
90
86
|
`;
|
|
91
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
87
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1pbnB1dC1pYmFuLmRlbW8uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1pbnB1dC9kZWVzLWlucHV0LWliYW4vZGVlcy1pbnB1dC1pYmFuLmRlbW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxHQUFHLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUV4RCxNQUFNLENBQUMsTUFBTSxRQUFRLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBOzs7UUFHMUIsR0FBRyxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7O09BZ0JKOzs7OzJCQUlvQixrQkFBa0IsY0FBYyw2REFBNkQ7OztxQkFHbkcsbUJBQW1CO3dCQUNoQiw4Q0FBOEM7MkJBQzNDLCtDQUErQzs7OztxQkFJckQsZUFBZTt3QkFDWiw2QkFBNkI7cUJBQ2hDLHdCQUF3Qjs7Ozs7MkJBS2xCLHFCQUFxQixjQUFjLHFEQUFxRDs7Ozt1QkFJNUYsZ0JBQWdCOzRCQUNYLFlBQVk7dUJBQ2pCLFVBQVU7Ozs7dUJBSVYsTUFBTTs0QkFDRCxZQUFZO3VCQUNqQix3QkFBd0I7Ozs7OzsyQkFNcEIscUJBQXFCLGNBQWMscUNBQXFDOzs7cUJBRzlFLGlCQUFpQjt3QkFDZCxrQ0FBa0M7d0JBQ2xDLElBQUk7Ozs7cUJBSVAsYUFBYTt3QkFDViw2QkFBNkI7cUJBQ2hDLDZCQUE2Qjt3QkFDMUIsSUFBSTs7Ozs7MkJBS0Qsb0JBQW9CLGNBQWMsNENBQTRDOztvQ0FFckUsZ0JBQWdCLGNBQWMsSUFBSTtvQ0FDbEMsZ0JBQWdCLGNBQWMsSUFBSTtvQ0FDbEMsb0JBQW9CLGNBQWMscUNBQXFDO29DQUN2RSxRQUFRLGVBQWUsUUFBUSxjQUFjLElBQUk7Ozs7O0NBS3BGLENBQUMifQ==
|
|
@@ -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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1pbnB1dC1saXN0LmRlbW8uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1pbnB1dC9kZWVzLWlucHV0LWxpc3QvZGVlcy1pbnB1dC1saXN0LmRlbW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxHQUFHLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUN4RCxPQUFPLHdDQUF3QyxDQUFDO0FBQ2hELE9BQU8sK0NBQStDLENBQUM7QUFDdkQsT0FBTywyQ0FBMkMsQ0FBQztBQUNuRCxPQUFPLHVDQUF1QyxDQUFDO0FBQy9DLE9BQU8seURBQXlELENBQUM7QUFFakUsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTs7O1FBRzFCLEdBQUcsQ0FBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7T0FpRUo7Ozs7MkJBSW9CLHFCQUFxQixjQUFjLG1EQUFtRDs7bUJBRTlGLGVBQWU7eUJBQ1QsMEJBQTBCO21CQUNoQyxDQUFDLE1BQU0sRUFBRSxPQUFPLEVBQUUsTUFBTSxFQUFFLFFBQVEsQ0FBQzt5QkFDN0Isb0RBQW9EOzs7Ozs7OzJCQU9sRCxrQkFBa0IsY0FBYyxnQ0FBZ0M7O21CQUV4RSxlQUFlO3lCQUNULGVBQWU7c0JBQ2xCLElBQUk7bUJBQ1A7SUFDUCxzQkFBc0I7SUFDdEIsa0JBQWtCO0lBQ2xCLHNCQUFzQjtJQUN0QixzQkFBc0I7SUFDdEIsc0JBQXNCO0NBQ3ZCO3lCQUNjLDZDQUE2Qzs7Ozs7OzsyQkFPM0MsNkJBQTZCLGNBQWMsMkRBQTJEOzs7O3VCQUkxRyw2QkFBNkI7NkJBQ3ZCLG9CQUFvQjswQkFDdkIsQ0FBQzswQkFDRCxDQUFDO3VCQUNKLENBQUMsT0FBTyxFQUFFLEtBQUssQ0FBQzswQkFDYixJQUFJOzZC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
|
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=
|
|
@@ -12,12 +12,6 @@ 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
|
-
|
|
21
15
|
.horizontal-group {
|
|
22
16
|
display: flex;
|
|
23
17
|
align-items: center;
|
|
@@ -29,7 +23,7 @@ export const demoFunc = () => html `
|
|
|
29
23
|
|
|
30
24
|
<div class="demo-container">
|
|
31
25
|
<dees-panel .title=${'Basic Phone Input'} .subtitle=${'Automatic formatting for phone numbers'}>
|
|
32
|
-
<
|
|
26
|
+
<dees-form>
|
|
33
27
|
<dees-input-phone
|
|
34
28
|
.label=${'Phone Number'}
|
|
35
29
|
.infoText=${'Enter your phone number with country code'}
|
|
@@ -43,27 +37,29 @@ export const demoFunc = () => html `
|
|
|
43
37
|
.required=${true}
|
|
44
38
|
.placeholder=${'+1 (555) 000-0000'}
|
|
45
39
|
></dees-input-phone>
|
|
46
|
-
</
|
|
40
|
+
</dees-form>
|
|
47
41
|
</dees-panel>
|
|
48
42
|
|
|
49
43
|
<dees-panel .title=${'Horizontal Layout'} .subtitle=${'Phone inputs arranged horizontally'}>
|
|
50
|
-
<
|
|
51
|
-
<
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
44
|
+
<dees-form>
|
|
45
|
+
<div class="horizontal-group">
|
|
46
|
+
<dees-input-phone
|
|
47
|
+
.label=${'Mobile'}
|
|
48
|
+
.layoutMode=${'horizontal'}
|
|
49
|
+
.value=${'4155551234'}
|
|
50
|
+
></dees-input-phone>
|
|
51
|
+
|
|
52
|
+
<dees-input-phone
|
|
53
|
+
.label=${'Office'}
|
|
54
|
+
.layoutMode=${'horizontal'}
|
|
55
|
+
.placeholder=${'+1 (800) 555-0000'}
|
|
56
|
+
></dees-input-phone>
|
|
57
|
+
</div>
|
|
58
|
+
</dees-form>
|
|
63
59
|
</dees-panel>
|
|
64
60
|
|
|
65
61
|
<dees-panel .title=${'International Numbers'} .subtitle=${'Supports formatting for numbers with country codes'}>
|
|
66
|
-
<
|
|
62
|
+
<dees-form>
|
|
67
63
|
<dees-input-phone
|
|
68
64
|
.label=${'International Contact'}
|
|
69
65
|
.infoText=${'Automatically formats international numbers'}
|
|
@@ -75,7 +71,7 @@ export const demoFunc = () => html `
|
|
|
75
71
|
.value=${'911'}
|
|
76
72
|
.disabled=${true}
|
|
77
73
|
></dees-input-phone>
|
|
78
|
-
</
|
|
74
|
+
</dees-form>
|
|
79
75
|
</dees-panel>
|
|
80
76
|
|
|
81
77
|
<dees-panel .title=${'Form Integration'} .subtitle=${'Phone input as part of a contact form'}>
|
|
@@ -88,4 +84,4 @@ export const demoFunc = () => html `
|
|
|
88
84
|
</div>
|
|
89
85
|
</dees-demowrapper>
|
|
90
86
|
`;
|
|
91
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
87
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1pbnB1dC1waG9uZS5kZW1vLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vdHNfd2ViL2VsZW1lbnRzLzAwZ3JvdXAtaW5wdXQvZGVlcy1pbnB1dC1waG9uZS9kZWVzLWlucHV0LXBob25lLmRlbW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxHQUFHLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUV4RCxNQUFNLENBQUMsTUFBTSxRQUFRLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBOzs7UUFHMUIsR0FBRyxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7O09BZ0JKOzs7OzJCQUlvQixtQkFBbUIsY0FBYyx3Q0FBd0M7OztxQkFHL0UsY0FBYzt3QkFDWCwyQ0FBMkM7MkJBQ3hDLGdEQUFnRDtxQkFDdEQsWUFBWTs7OztxQkFJWixlQUFlO3dCQUNaLG1DQUFtQzt3QkFDbkMsSUFBSTsyQkFDRCxtQkFBbUI7Ozs7OzJCQUtuQixtQkFBbUIsY0FBYyxvQ0FBb0M7Ozs7dUJBSXpFLFFBQVE7NEJBQ0gsWUFBWTt1QkFDakIsWUFBWTs7Ozt1QkFJWixRQUFROzRCQUNILFlBQVk7NkJBQ1gsbUJBQW1COzs7Ozs7MkJBTXJCLHVCQUF1QixjQUFjLG9EQUFvRDs7O3FCQUcvRix1QkFBdUI7d0JBQ3BCLDZDQUE2QztxQkFDaEQsY0FBYzs7OztxQkFJZCxtQkFBbUI7cUJBQ25CLEtBQUs7d0JBQ0YsSUFBSTs7Ozs7MkJBS0Qsa0JBQWtCLGNBQWMsdUNBQXVDOztvQ0FFOUQsV0FBVyxjQUFjLElBQUk7cUNBQzVCLGNBQWMsY0FBYyxJQUFJO29DQUNqQyxPQUFPLGVBQWUsT0FBTzs7Ozs7Q0FLaEUsQ0FBQyJ9
|
|
@@ -13,12 +13,6 @@ export const demoFunc = () => html `
|
|
|
13
13
|
margin: 0 auto;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
.input-group {
|
|
17
|
-
display: flex;
|
|
18
|
-
flex-direction: column;
|
|
19
|
-
gap: 16px;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
16
|
.shopping-grid {
|
|
23
17
|
display: grid;
|
|
24
18
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
@@ -65,7 +59,7 @@ export const demoFunc = () => html `
|
|
|
65
59
|
|
|
66
60
|
<div class="demo-container">
|
|
67
61
|
<dees-panel .title=${'Basic Quantity Selector'} .subtitle=${'Simple quantity input with increment/decrement buttons'}>
|
|
68
|
-
<
|
|
62
|
+
<dees-form>
|
|
69
63
|
<dees-input-quantityselector
|
|
70
64
|
.label=${'Quantity'}
|
|
71
65
|
.infoText=${'Select the desired quantity'}
|
|
@@ -78,7 +72,7 @@ export const demoFunc = () => html `
|
|
|
78
72
|
.infoText=${'Adjust the quantity of items'}
|
|
79
73
|
.value=${3}
|
|
80
74
|
></dees-input-quantityselector>
|
|
81
|
-
</
|
|
75
|
+
</dees-form>
|
|
82
76
|
</dees-panel>
|
|
83
77
|
|
|
84
78
|
<dees-panel .title=${'Shopping Cart'} .subtitle=${'Modern e-commerce product cards with interactive quantity selectors'} .runAfterRender=${async (elementArg) => {
|
|
@@ -172,7 +166,7 @@ export const demoFunc = () => html `
|
|
|
172
166
|
</dees-panel>
|
|
173
167
|
|
|
174
168
|
<dees-panel .title=${'Required & Disabled States'} .subtitle=${'Different states for validation and restrictions'}>
|
|
175
|
-
<
|
|
169
|
+
<dees-form>
|
|
176
170
|
<dees-input-quantityselector
|
|
177
171
|
.label=${'Number of Licenses'}
|
|
178
172
|
.infoText=${'Select how many licenses you need'}
|
|
@@ -186,7 +180,7 @@ export const demoFunc = () => html `
|
|
|
186
180
|
.disabled=${true}
|
|
187
181
|
.value=${5}
|
|
188
182
|
></dees-input-quantityselector>
|
|
189
|
-
</
|
|
183
|
+
</dees-form>
|
|
190
184
|
</dees-panel>
|
|
191
185
|
|
|
192
186
|
<dees-panel .title=${'Order Form'} .subtitle=${'Complete order form with quantity selection'}>
|
|
@@ -211,4 +205,4 @@ export const demoFunc = () => html `
|
|
|
211
205
|
</div>
|
|
212
206
|
</dees-demowrapper>
|
|
213
207
|
`;
|
|
214
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
208
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1pbnB1dC1xdWFudGl0eXNlbGVjdG9yLmRlbW8uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1pbnB1dC9kZWVzLWlucHV0LXF1YW50aXR5c2VsZWN0b3IvZGVlcy1pbnB1dC1xdWFudGl0eXNlbGVjdG9yLmRlbW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxHQUFHLEVBQUUsVUFBVSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDcEUsT0FBTyw2RUFBNkUsQ0FBQztBQUVyRixNQUFNLENBQUMsTUFBTSxRQUFRLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBOzs7UUFHMUIsR0FBRyxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7O3dCQW1CYSxVQUFVLENBQUMsT0FBTyxDQUFDLG9CQUFvQixFQUFFLHNCQUFzQixDQUFDOzhCQUMxRCxVQUFVLENBQUMsT0FBTyxDQUFDLHdCQUF3QixFQUFFLHNCQUFzQixDQUFDOzs7Ozs7OzttQkFRL0UsVUFBVSxDQUFDLE9BQU8sQ0FBQyxjQUFjLEVBQUUsZUFBZSxDQUFDOzs7Ozs7Ozs7bUJBU25ELFVBQVUsQ0FBQyxPQUFPLENBQUMsc0JBQXNCLEVBQUUsd0JBQXdCLENBQUM7Ozs7Ozs7OztrQ0FTckQsVUFBVSxDQUFDLE9BQU8sQ0FBQyxpQkFBaUIsRUFBRSxpQkFBaUIsQ0FBQzs7O21CQUd2RSxVQUFVLENBQUMsT0FBTyxDQUFDLGNBQWMsRUFBRSxlQUFlLENBQUM7O09BRS9EOzs7OzJCQUlvQix5QkFBeUIsY0FBYyx3REFBd0Q7OztxQkFHckcsVUFBVTt3QkFDUCw2QkFBNkI7MkJBQzFCLGtDQUFrQztxQkFDeEMsQ0FBQzs7OztxQkFJRCxlQUFlO3dCQUNaLDhCQUE4QjtxQkFDakMsQ0FBQzs7Ozs7MkJBS0ssZUFBZSxjQUFjLHFFQUFxRSxvQkFBb0IsS0FBSyxFQUFFLFVBQXVCLEVBQUUsRUFBRTtJQUMzSyxNQUFNLGlCQUFpQixHQUFHLEdBQUcsRUFBRTtRQUM3QixNQUFNLEtBQUssR0FBRyxVQUFVLENBQUMsYUFBYSxDQUFDLGlCQUFpQixDQUFRLENBQUM7UUFDakUsTUFBTSxLQUFLLEdBQUcsVUFBVSxDQUFDLGFBQWEsQ0FBQyxZQUFZLENBQVEsQ0FBQztRQUM1RCxNQUFNLEtBQUssR0FBRyxVQUFVLENBQUMsYUFBYSxDQUFDLGVBQWUsQ0FBUSxDQUFDO1FBRS9ELE1BQU0sSUFBSSxHQUFHLEtBQUssRUFBRSxRQUFRLElBQUksQ0FBQyxDQUFDO1FBQ2xDLE1BQU0sSUFBSSxHQUFHLEtBQUssRUFBRSxRQUFRLElBQUksQ0FBQyxDQUFDO1FBQ2xDLE1BQU0sSUFBSSxHQUFHLEtBQUssRUFBRSxRQUFRLElBQUksQ0FBQyxDQUFDO1FBRWxDLE1BQU0sTUFBTSxHQUFHLE1BQU0sR0FBRyxJQUFJLENBQUM7UUFDN0IsTUFBTSxNQUFNLEdBQUcsS0FBSyxHQUFHLElBQUksQ0FBQztRQUM1QixNQUFNLE1BQU0sR0FBRyxLQUFLLEdBQUcsSUFBSSxDQUFDO1FBQzVCLE1BQU0sS0FBSyxHQUFHLE1BQU0sR0FBRyxNQUFNLEdBQUcsTUFBTSxDQUFDO1FBRXZDLE1BQU0sT0FBTyxHQUFHLFVBQVUsQ0FBQyxhQUFhLENBQUMsdUJBQXVCLENBQUMsQ0FBQztRQUNsRSxJQUFJLE9BQU8sRUFBRSxDQUFDO1lBQ1osT0FBTyxDQUFDLFNBQVMsR0FBRztnQkFDaEIsSUFBSSxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUM7eUNBQ2MsSUFBSTt5QkFDcEIsTUFBTSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUM7cUJBQ3JCLENBQUMsQ0FBQyxDQUFDLEVBQUU7Z0JBQ1YsSUFBSSxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUM7K0NBQ29CLElBQUk7eUJBQzFCLE1BQU0sQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDO3FCQUNyQixDQUFDLENBQUMsQ0FBQyxFQUFFO2dCQUNWLElBQUksR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDO3FDQUNVLElBQUk7eUJBQ2hCLE1BQU0sQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDO3FCQUNyQixDQUFDLENBQUMsQ0FBQyxFQUFFO2dCQUNWLEtBQUssS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLDBGQUEwRixDQUFDLENBQUMsQ0FBQyxFQUFFOzs7eUJBR3BHLEtBQUssQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDOzthQUU1QixDQUFDO1FBQ0osQ0FBQztJQUNILENBQUMsQ0FBQztJQUVGLGlCQUFpQjtJQUNqQixVQUFVLENBQUMsaUJBQWlCLEVBQUUsR0FBRyxDQUFDLENBQUM7SUFFbkMsbUJBQW1CO0lBQ25CLFVBQVUsQ0FBQyxnQkFBZ0IsQ0FBQywyQkFBMkIsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsRUFBRTtRQUN0RSxJQUFJLENBQUMsZ0JBQWdCLENBQUMsZ0JBQWdCLEVBQUUsaUJBQWlCLENBQUMsQ0FBQztJQUM3RCxDQUFDLENBQUMsQ0FBQztBQUNMLENBQUM7Ozs7MkJBSW9CO0lBQ2IsSUFBSSxFQUFFLHFDQUFxQztJQUMzQyxRQUFRLEVBQUUsT0FBTztJQUNqQixXQUFXLEVBQUUseURBQXlEO0lBQ3RFLEtBQUssRUFBRSxNQUFNO0lBQ2IsYUFBYSxFQUFFLE1BQU07SUFDckIsUUFBUSxFQUFFLG1CQUFtQjtDQUM5Qjt3QkFDVyxDQUFDOzs7OzsyQkFLRTtJQUNiLElBQUksRUFBRSx1QkFBdUI7SUFDN0IsUUFBUSxFQUFFLGFBQWE7SUFDdkIsV0FBVyxFQUFFLHNEQUFzRDtJQUNuRSxLQUFLLEVBQUUsS0FBSztJQUNaLFFBQVEsRUFBRSxzQkFBc0I7Q0FDakM7d0JBQ1csQ0FBQzs7Ozs7MkJBS0U7SUFDYixJQUFJLEVBQUUsMENBQTBDO0lBQ2hELFFBQVEsRUFBRSxXQUFXO0lBQ3JCLFdBQVcsRUFBRSxnREFBZ0Q7SUFDN0QsS0FBSyxFQUFFLEtBQUs7SUFDWixhQUFhLEVBQUUsS0FBSztJQUNwQixRQUFRLEVBQUUsaUJBQWlCO0NBQzVCO3dCQUNXLENBQUM7Ozs7Ozs7Ozs7OzsyQkFZRSw0QkFBNEIsY0FBYyxrREFBa0Q7OztxQkFHbEcsb0JBQW9CO3dCQUNqQixtQ0FBbUM7d0JBQ25DLElBQUk7cUJBQ1AsQ0FBQzs7OztxQkFJRCxnQkFBZ0I7d0JBQ2IsaUNBQWlDO3dCQUNqQyxJQUFJO3FCQUNQLENBQUM7Ozs7OzJCQUtLLFlBQVksY0FBYyw2Q0FBNkM7O29DQUU5RCxlQUFlLGNBQWMsSUFBSTs7cUJBRWhELFNBQVM7dUJBQ1AsQ0FBQyxZQUFZLEVBQUUsVUFBVSxFQUFFLGlCQUFpQixDQUFDO3dCQUM1QyxJQUFJOzs7cUJBR1AsVUFBVTt3QkFDUCxvQkFBb0I7cUJBQ3ZCLENBQUM7OztxQkFHRCxzQkFBc0I7eUJBQ2xCLFVBQVU7Ozs7OztDQU1sQyxDQUFDIn0=
|