smoothly 1.2.1-alpha.15 → 1.2.1-alpha.16
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/cjs/smoothly-app_106.cjs.entry.js +11 -13
- package/dist/cjs/smoothly-app_106.cjs.entry.js.map +1 -1
- package/dist/collection/components/button/style.css +6 -6
- package/dist/collection/components/input/clear/style.css +6 -6
- package/dist/collection/components/input/demo/index.js +5 -7
- package/dist/collection/components/input/demo/index.js.map +1 -1
- package/dist/collection/components/input/edit/style.css +6 -6
- package/dist/collection/components/input/reset/style.css +6 -6
- package/dist/collection/components/input/submit/style.css +6 -6
- package/dist/collection/components/submit/style.css +6 -6
- package/dist/components/{p-65b4faa9.js → p-04c6f4c5.js} +5 -5
- package/dist/components/{p-65b4faa9.js.map → p-04c6f4c5.js.map} +1 -1
- package/dist/components/{p-5b9429be.js → p-0d428888.js} +6 -6
- package/dist/components/{p-5b9429be.js.map → p-0d428888.js.map} +1 -1
- package/dist/components/{p-24dcd271.js → p-1e225024.js} +2 -2
- package/dist/components/{p-24dcd271.js.map → p-1e225024.js.map} +1 -1
- package/dist/components/{p-9e4a7b5b.js → p-1fe5f6ae.js} +3 -3
- package/dist/components/{p-9e4a7b5b.js.map → p-1fe5f6ae.js.map} +1 -1
- package/dist/components/{p-bc953568.js → p-20435e42.js} +2 -2
- package/dist/components/{p-bc953568.js.map → p-20435e42.js.map} +1 -1
- package/dist/components/{p-2939bb2b.js → p-31ca8d3f.js} +3 -3
- package/dist/components/{p-2939bb2b.js.map → p-31ca8d3f.js.map} +1 -1
- package/dist/components/{p-005bb52a.js → p-36cf532a.js} +4 -4
- package/dist/components/{p-005bb52a.js.map → p-36cf532a.js.map} +1 -1
- package/dist/components/{p-1df9e1e6.js → p-40242809.js} +5 -5
- package/dist/components/{p-1df9e1e6.js.map → p-40242809.js.map} +1 -1
- package/dist/components/{p-31af2db0.js → p-67221d28.js} +3 -3
- package/dist/components/{p-31af2db0.js.map → p-67221d28.js.map} +1 -1
- package/dist/components/{p-582e4f8c.js → p-6b9d18a3.js} +3 -3
- package/dist/components/{p-582e4f8c.js.map → p-6b9d18a3.js.map} +1 -1
- package/dist/components/{p-abba2d2f.js → p-6da87c78.js} +2 -2
- package/dist/components/p-6da87c78.js.map +1 -0
- package/dist/components/{p-d314ee84.js → p-762fa4c0.js} +4 -4
- package/dist/components/{p-d314ee84.js.map → p-762fa4c0.js.map} +1 -1
- package/dist/components/{p-1e63134f.js → p-7b715e6a.js} +2 -2
- package/dist/components/{p-1e63134f.js.map → p-7b715e6a.js.map} +1 -1
- package/dist/components/{p-0a7ea113.js → p-7f090deb.js} +4 -4
- package/dist/components/{p-0a7ea113.js.map → p-7f090deb.js.map} +1 -1
- package/dist/components/{p-1729ec54.js → p-7f7ea2e8.js} +3 -3
- package/dist/components/{p-1729ec54.js.map → p-7f7ea2e8.js.map} +1 -1
- package/dist/components/{p-28965e50.js → p-8711cea9.js} +4 -4
- package/dist/components/{p-28965e50.js.map → p-8711cea9.js.map} +1 -1
- package/dist/components/{p-f551738d.js → p-8866a061.js} +5 -5
- package/dist/components/{p-f551738d.js.map → p-8866a061.js.map} +1 -1
- package/dist/components/{p-99edb420.js → p-8c1999fd.js} +2 -2
- package/dist/components/{p-99edb420.js.map → p-8c1999fd.js.map} +1 -1
- package/dist/components/{p-9e69db0b.js → p-b2b22306.js} +5 -5
- package/dist/components/{p-9e69db0b.js.map → p-b2b22306.js.map} +1 -1
- package/dist/components/{p-b5511a5f.js → p-b3e54eb0.js} +5 -5
- package/dist/components/{p-b5511a5f.js.map → p-b3e54eb0.js.map} +1 -1
- package/dist/components/{p-1c2f35c9.js → p-b84979c7.js} +14 -16
- package/dist/components/p-b84979c7.js.map +1 -0
- package/dist/components/{p-b28af62c.js → p-ca004e42.js} +2 -2
- package/dist/components/{p-b28af62c.js.map → p-ca004e42.js.map} +1 -1
- package/dist/components/{p-e5613a72.js → p-cb0be10a.js} +3 -3
- package/dist/components/{p-e5613a72.js.map → p-cb0be10a.js.map} +1 -1
- package/dist/components/{p-e8815ca4.js → p-dd060f84.js} +4 -4
- package/dist/components/{p-e8815ca4.js.map → p-dd060f84.js.map} +1 -1
- package/dist/components/{p-275491c7.js → p-e8216e38.js} +3 -3
- package/dist/components/{p-275491c7.js.map → p-e8216e38.js.map} +1 -1
- package/dist/components/{p-1de54888.js → p-ef188cb4.js} +2 -2
- package/dist/components/{p-1de54888.js.map → p-ef188cb4.js.map} +1 -1
- package/dist/components/{p-476fd3b1.js → p-fdbc15d4.js} +8 -8
- package/dist/components/{p-476fd3b1.js.map → p-fdbc15d4.js.map} +1 -1
- package/dist/components/{p-5d0f105a.js → p-ff43eec2.js} +18 -18
- package/dist/components/{p-5d0f105a.js.map → p-ff43eec2.js.map} +1 -1
- package/dist/components/smoothly-app-demo.js +28 -28
- package/dist/components/smoothly-button-confirm.js +1 -1
- package/dist/components/smoothly-button-demo.js +1 -1
- package/dist/components/smoothly-button.js +1 -1
- package/dist/components/smoothly-display-demo.js +1 -1
- package/dist/components/smoothly-form-demo-all.js +1 -1
- package/dist/components/smoothly-form-demo-card.js +1 -1
- package/dist/components/smoothly-form-demo-controlled.js +1 -1
- package/dist/components/smoothly-form-demo-date-range.js +1 -1
- package/dist/components/smoothly-form-demo-date.js +1 -1
- package/dist/components/smoothly-form-demo-login.js +1 -1
- package/dist/components/smoothly-form-demo-pet.js +1 -1
- package/dist/components/smoothly-form-demo-prices.js +1 -1
- package/dist/components/smoothly-form-demo-transparent.js +1 -1
- package/dist/components/smoothly-form-demo-typed.js +1 -1
- package/dist/components/smoothly-form-demo.js +1 -1
- package/dist/components/smoothly-icon-demo.js +1 -1
- package/dist/components/smoothly-input-checkbox-demo.js +7 -7
- package/dist/components/smoothly-input-clear.js +1 -1
- package/dist/components/smoothly-input-demo-standard.js +1 -1
- package/dist/components/smoothly-input-demo.js +1 -1
- package/dist/components/smoothly-input-edit.js +1 -1
- package/dist/components/smoothly-input-file.js +1 -1
- package/dist/components/smoothly-input-range-demo.js +1 -1
- package/dist/components/smoothly-input-reset.js +1 -1
- package/dist/components/smoothly-input-submit.js +1 -1
- package/dist/components/smoothly-submit.js +1 -1
- package/dist/components/smoothly-table-demo.js +1 -1
- package/dist/components/smoothly-table-testing.js +1 -1
- package/dist/components/smoothly-theme-demo.js +1 -1
- package/dist/esm/smoothly-app_106.entry.js +11 -13
- package/dist/esm/smoothly-app_106.entry.js.map +1 -1
- package/dist/smoothly/p-29b9a128.entry.js +2 -0
- package/dist/smoothly/p-29b9a128.entry.js.map +1 -0
- package/dist/smoothly/smoothly.esm.js +1 -1
- package/package.json +1 -1
- package/dist/components/p-1c2f35c9.js.map +0 -1
- package/dist/components/p-abba2d2f.js.map +0 -1
- package/dist/smoothly/p-8051b9d5.entry.js +0 -2
- package/dist/smoothly/p-8051b9d5.entry.js.map +0 -1
|
@@ -70,17 +70,17 @@
|
|
|
70
70
|
|
|
71
71
|
|
|
72
72
|
:host {
|
|
73
|
-
--border-radius: 0.5rem;
|
|
73
|
+
--smoothly-button-border-radius: 0.5rem;
|
|
74
74
|
display: inline-block;
|
|
75
75
|
box-sizing: border-box;
|
|
76
|
-
border-radius: var(--border-radius);
|
|
76
|
+
border-radius: var(--smoothly-button-border-radius);
|
|
77
77
|
cursor: pointer;
|
|
78
78
|
border: none;
|
|
79
79
|
outline: none;
|
|
80
80
|
position: relative;
|
|
81
81
|
}
|
|
82
82
|
:host([shape=rounded]) {
|
|
83
|
-
--border-radius: 2rem;
|
|
83
|
+
--smoothly-button-border-radius: 2rem;
|
|
84
84
|
}
|
|
85
85
|
|
|
86
86
|
:host([type=link]) {
|
|
@@ -114,7 +114,7 @@
|
|
|
114
114
|
justify-content: center;
|
|
115
115
|
height: 100%;
|
|
116
116
|
width: 100%;
|
|
117
|
-
border-radius: var(--border-radius);
|
|
117
|
+
border-radius: var(--smoothly-button-border-radius);
|
|
118
118
|
align-items: center;
|
|
119
119
|
}
|
|
120
120
|
|
|
@@ -171,7 +171,7 @@
|
|
|
171
171
|
:host([expand=full]) {
|
|
172
172
|
border-left: none;
|
|
173
173
|
border-right: none;
|
|
174
|
-
--border-radius: 0;
|
|
174
|
+
--smoothly-button-border-radius: 0;
|
|
175
175
|
}
|
|
176
176
|
|
|
177
177
|
:host([fill=outline])>button {
|
|
@@ -195,7 +195,7 @@
|
|
|
195
195
|
position: absolute;
|
|
196
196
|
border: 2px solid rgb(var(--smoothly-button-focus-border));
|
|
197
197
|
inset: -1px;
|
|
198
|
-
border-radius: var(--border-radius);
|
|
198
|
+
border-radius: var(--smoothly-button-border-radius);
|
|
199
199
|
}
|
|
200
200
|
|
|
201
201
|
:host(:not([fill=clear]):not([fill=outline]))>button:hover,
|
|
@@ -70,17 +70,17 @@
|
|
|
70
70
|
|
|
71
71
|
|
|
72
72
|
:host {
|
|
73
|
-
--border-radius: 0.5rem;
|
|
73
|
+
--smoothly-button-border-radius: 0.5rem;
|
|
74
74
|
display: inline-block;
|
|
75
75
|
box-sizing: border-box;
|
|
76
|
-
border-radius: var(--border-radius);
|
|
76
|
+
border-radius: var(--smoothly-button-border-radius);
|
|
77
77
|
cursor: pointer;
|
|
78
78
|
border: none;
|
|
79
79
|
outline: none;
|
|
80
80
|
position: relative;
|
|
81
81
|
}
|
|
82
82
|
:host([shape=rounded]) {
|
|
83
|
-
--border-radius: 2rem;
|
|
83
|
+
--smoothly-button-border-radius: 2rem;
|
|
84
84
|
}
|
|
85
85
|
|
|
86
86
|
:host([type=link]) {
|
|
@@ -114,7 +114,7 @@
|
|
|
114
114
|
justify-content: center;
|
|
115
115
|
height: 100%;
|
|
116
116
|
width: 100%;
|
|
117
|
-
border-radius: var(--border-radius);
|
|
117
|
+
border-radius: var(--smoothly-button-border-radius);
|
|
118
118
|
align-items: center;
|
|
119
119
|
}
|
|
120
120
|
|
|
@@ -171,7 +171,7 @@
|
|
|
171
171
|
:host([expand=full]) {
|
|
172
172
|
border-left: none;
|
|
173
173
|
border-right: none;
|
|
174
|
-
--border-radius: 0;
|
|
174
|
+
--smoothly-button-border-radius: 0;
|
|
175
175
|
}
|
|
176
176
|
|
|
177
177
|
:host([fill=outline])>button {
|
|
@@ -195,7 +195,7 @@
|
|
|
195
195
|
position: absolute;
|
|
196
196
|
border: 2px solid rgb(var(--smoothly-button-focus-border));
|
|
197
197
|
inset: -1px;
|
|
198
|
-
border-radius: var(--border-radius);
|
|
198
|
+
border-radius: var(--smoothly-button-border-radius);
|
|
199
199
|
}
|
|
200
200
|
|
|
201
201
|
:host(:not([fill=clear]):not([fill=outline]))>button:hover,
|
|
@@ -6,19 +6,17 @@ export class SmoothlyInputDemo {
|
|
|
6
6
|
this.alphanumeric = "!@##";
|
|
7
7
|
}
|
|
8
8
|
render() {
|
|
9
|
-
return (h(Host, { key: '60dd1e6b3944fc22f37e5b2f5d44e7fcf2833a84' }, h("smoothly-input-demo-standard", { key: '2de6bb4b669536a5f7a15e4a600af1b2e1a9af0c' }), h("div", { key: 'b78fe28ebc5c9d4d9dabcb4f6f5c80dd78f77d5c', class: "inputs" }, h("h2", { key: '3446b75ffe04fc341d3dcc072a4f9e06db26785c' }, "Calendar"), h("smoothly-input-date", { key: 'fcf59b2cc974165f4f695c02b52b704d3d74d6f3', name: "some-date" }, "Calendar"), h("h2", { key: 'a156ab1d3aca8be94908453872a2134c831d88c0' }, "Date Range"), h("smoothly-input-date-range", { key: '271a5188c679eb550c5c05ca2e1595ef136e684e', name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-01", max: "2025-01-31" }), h("smoothly-input-date-range", { key: '1e52949912d2a75db26c7540c3a9706e06e557e2', name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2024-12-30" }, h("smoothly-input-reset", { key: '5c127ccb828b1040525b18bd663bf750c8ff6eb5', slot: "end", size: "icon" })), h("smoothly-input-date-range", { key: '
|
|
9
|
+
return (h(Host, { key: '60dd1e6b3944fc22f37e5b2f5d44e7fcf2833a84' }, h("smoothly-input-demo-standard", { key: '2de6bb4b669536a5f7a15e4a600af1b2e1a9af0c' }), h("div", { key: 'b78fe28ebc5c9d4d9dabcb4f6f5c80dd78f77d5c', class: "inputs" }, h("h2", { key: '3446b75ffe04fc341d3dcc072a4f9e06db26785c' }, "Calendar"), h("smoothly-input-date", { key: 'fcf59b2cc974165f4f695c02b52b704d3d74d6f3', name: "some-date" }, "Calendar"), h("h2", { key: 'a156ab1d3aca8be94908453872a2134c831d88c0' }, "Date Range"), h("smoothly-input-date-range", { key: '271a5188c679eb550c5c05ca2e1595ef136e684e', name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-01", max: "2025-01-31" }), h("smoothly-input-date-range", { key: '1e52949912d2a75db26c7540c3a9706e06e557e2', name: "testing", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2024-12-30" }, h("smoothly-input-reset", { key: '5c127ccb828b1040525b18bd663bf750c8ff6eb5', slot: "end", size: "icon" })), h("smoothly-input-date-range", { key: 'f7d55eba1eb762f7361faff2abf7955fac195f6f', looks: "grid", start: isoly.Date.now(), end: isoly.Date.nextMonth(isoly.Date.now()), min: "2021-10-10", max: "2025-12-30", showLabel: false, style: {
|
|
10
10
|
"--smoothly-input-border-radius": "0.5rem",
|
|
11
|
-
|
|
12
|
-
"--input-width": "12ch",
|
|
13
|
-
} }, h("smoothly-input-clear", { key: '3c293347358cb6c439d46a7b8538899e1a77992f', slot: "end", size: "icon" })), h("h2", { key: 'ed7c2c30b8060ac6e021dcc07a7839d7cdded20b' }, "Date"), h("smoothly-input-date", { key: 'a793def080aebfaef852e887470e21bf55148215' }, "Date"), h("smoothly-input-date", { key: '0c4401d2a28786499bb3eff800322a04d010257d', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), h("smoothly-input-date", { key: 'b9eda80eec7369c9c4604774f244edfb38cfbf30', value: "2021-10-28" }, "Date", h("smoothly-input-reset", { key: 'a94977968c6249be32060d9e0b7f40ef017e38d4', slot: "end", size: "icon" })), h("smoothly-input-date", { key: 'a1af27dc2ff52582cc0ce406d546c71348835456', value: "2021-10-28" }, "Date", h("smoothly-input-clear", { key: 'd4e1ef84c8be48a88f9862be0c89a9931c2bc042', slot: "end", size: "icon" })), h("h2", { key: '36930f18237fa1db19293f3c2ebdb99925a82fda' }, "Select"), h("div", { key: 'c5e885b52da1a9e5039408ba9610230b0b28baae', class: "select-div" }, h("smoothly-input-select", { key: '1f15e7a4854e82363ce88ff900340e74584c14b8', name: "select-dessert", looks: "border" }, h("label", { key: 'd54885a3eac40d13e94728e56a811e6538ff7069', slot: "label" }, "Select with clear button"), h("smoothly-item", { key: '9b20457b0c78867875c95435e24d4749c3123990', value: "1" }, "Ice cream"), h("smoothly-item", { key: '01dea695573f6792c102661cf22f344a797001ff', value: "2" }, "Sponge cake"), h("smoothly-item", { key: '3543d2c4b4851c522451bac5a3acd293bfb21fa6', value: "3" }, "Cookie"), h("smoothly-item", { key: 'f62c295d7148d3fa2b86806c2e17934410650064', value: "4" }, "Croissant"), h("smoothly-item", { key: 'a124a8d1d0ce21e4c3cc55560517ffa9202d9a9c', value: "5" }, "Chocolate fondue"), h("smoothly-input-clear", { key: 'de389d553a40b4c3a6d17bbbdbf28e55aa4b8d7d', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '41fbb70990c191aebc260fefd9df0797d69e0738', multiple: true, name: "select-dessert-multiple", looks: "border" }, h("label", { key: '434522359659f3ed97b703b36af261764e6f9ab4', slot: "label" }, "Select multiple with reset button"), h("smoothly-item", { key: '384de05f22ef4c3dc91b44ade6746e2ee7683565', value: "ice cream" }, "Ice cream"), h("smoothly-item", { key: '606d9343d3de36fbca2519ba083acfe7063a51c8', value: "sponge cake" }, "Sponge cake"), h("smoothly-item", { key: '796ac9d456606cae955bc5eb4d7c413ee67e3ba1', selected: true, value: "cookie" }, "Cookie"), h("smoothly-item", { key: '51d77cd08f175867b22da38d01df8310e8d16e4c', value: "croissant" }, "Croissant"), h("smoothly-item", { key: '2c6a518b714b79f58557b505bb042805045932cb', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), h("smoothly-input-reset", { key: 'feb637cab56c2f5024188c34d7508358a787c4c8', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '57cd5ae780288c69d148795508f7fcdd40f2a099', name: "spirit-animals", looks: "border", mutable: true }, h("label", { key: '24951468fe43b42a5e410184cc2d122ceb1559ad', slot: "label" }, "Select or add new options"), h("smoothly-item", { key: 'd1330ba6f34bbd76ef5aba2bde55c135373a2b7b', value: "manatee" }, "Manatee"), h("smoothly-item", { key: '61082a363a53fb71be3f9e8e6ab4e2be2693803c', selected: true, value: "cthulu" }, "Cthulu")), h("smoothly-input-select", { key: '837d3330f39f40c2666d6faa497671d5899b8f37', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: 'abd9760dc7f60c174618ab718a2ca2793a7c6bd7', value: "folder", selected: true }, h("smoothly-icon", { key: '723699de937708f91e2520e8af0b2575754869b9', size: "small", name: "folder-outline" })), h("smoothly-item", { key: '898afabc6f86383162426d971ee625bad2c10981', value: "camera" }, h("smoothly-icon", { key: '5d22ea6043cfd3298f897e472ec579cdc3171190', size: "small", name: "camera-outline" }))), h("smoothly-input-select", { key: '7dfeb8b080ea8c743f5d8e501af1d2182607fd0a', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: 'c372c32bd7b05a7aa86f1b330f4c4f9e2c2eeeb2', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
|
|
11
|
+
} }, h("smoothly-input-clear", { key: '42cc2fff5a1c16fdd944d0ca991c4ec62beaba7d', slot: "end", size: "icon" })), h("h2", { key: 'c27fc483bad0afb666ca74c429f7ccae1a2221f2' }, "Date"), h("smoothly-input-date", { key: '3d3aaa26f231d651fa32f0fab84a154a11a76626' }, "Date"), h("smoothly-input-date", { key: '76c3bb73b29cfa08cb050a214f3350e66d11db4c', showLabel: false, value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"), h("smoothly-input-date", { key: '9faa09cb1639f3bd2cdaa2f778b3089f9b2a28db', value: "2021-10-28" }, "Date", h("smoothly-input-reset", { key: 'b23977afa3336103cdac903ce7bb41e85aa1b5d2', slot: "end", size: "icon" })), h("smoothly-input-date", { key: '07531f044374101bc1b8b7412ab95c99fc0c0821', value: "2021-10-28" }, "Date", h("smoothly-input-clear", { key: '9412380e4b99a089e2a27033f2d907fdf632870f', slot: "end", size: "icon" })), h("h2", { key: 'f49350d7cd4c67861d6f68cf84cbe1c55a7b57c6' }, "Select"), h("div", { key: '1e065be44b7e8cd703e2224eff99590b6312eef9', class: "select-div" }, h("smoothly-input-select", { key: '2b7c5dc15f3e3d1b7fb305c19bd2fdc3dde9e5ad', name: "select-dessert", looks: "border" }, h("label", { key: '88520ce4cf5e3fca70d6bc53ba09c85ca69f0886', slot: "label" }, "Select with clear button"), h("smoothly-item", { key: 'b3933f46e484bb4088bb127ff9d5934383f6718a', value: "1" }, "Ice cream"), h("smoothly-item", { key: 'ec7c81c9a7175925fb934c4c4649a9583406ba8e', value: "2" }, "Sponge cake"), h("smoothly-item", { key: 'dee107a78eb7d633c2649f01423e1fb648d75f6a', value: "3" }, "Cookie"), h("smoothly-item", { key: '3574cf96bbeb79378ab2ff2f51cf6d9037ad1636', value: "4" }, "Croissant"), h("smoothly-item", { key: '4a828f6722f5b224aa1270a37224d8ad417cfda8', value: "5" }, "Chocolate fondue"), h("smoothly-input-clear", { key: '9fe902f304044ba4d151339ec32a513b206eea6a', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '25e44de9e1d06060ff29256e43b9ec6fd64c4d00', multiple: true, name: "select-dessert-multiple", looks: "border" }, h("label", { key: '01b6f70c32864d0230f5eaf9328e7b2e1c90548f', slot: "label" }, "Select multiple with reset button"), h("smoothly-item", { key: 'c7114fce4a9a38fb65b5965204703c6d122fda37', value: "ice cream" }, "Ice cream"), h("smoothly-item", { key: '62b0e1adedbb41617e9209bb371b6487695f0d95', value: "sponge cake" }, "Sponge cake"), h("smoothly-item", { key: 'f4a274d856a67bdfe40e8c4ff2f7522a75022807', selected: true, value: "cookie" }, "Cookie"), h("smoothly-item", { key: '7ff4c8d48432b01b1233e826912015350dbd1471', value: "croissant" }, "Croissant"), h("smoothly-item", { key: '91f9cf259e2bf3a9a2fc11e24f81c6a343d1c6ce', selected: true, value: "chocolate fondue" }, "Chocolate fondue"), h("smoothly-input-reset", { key: 'a3fd01d729cce520d94a847ba9ac1e329d645fb3', size: "icon", slot: "end" })), h("smoothly-input-select", { key: '789d978ebedffce68f1ba8afa75b9760342c524c', name: "spirit-animals", looks: "border", mutable: true }, h("label", { key: 'f6797eedb62b38f18f4bdbfe26449b23ca42ca20', slot: "label" }, "Select or add new options"), h("smoothly-item", { key: '683df95a98d45de4a4af6ccedcd985cd81ed4e2c', value: "manatee" }, "Manatee"), h("smoothly-item", { key: '538ffed77e6ef496b79cfee0815a728e18c1fcdc', selected: true, value: "cthulu" }, "Cthulu")), h("smoothly-input-select", { key: 'ac967e2053f91aa34b8e47456bcde12715808c5e', name: "select-icon", clearable: false, showSelected: false }, h("smoothly-item", { key: '2db3a5e0b4d0deacce03c63525a4412b8f7808d4', value: "folder", selected: true }, h("smoothly-icon", { key: 'a7117932c22979d76a24c07d722e3a117716e394', size: "small", name: "folder-outline" })), h("smoothly-item", { key: 'a6d257fbf551b79326dd9700dae69cd8f0ea6f74', value: "camera" }, h("smoothly-icon", { key: '2140114c4691fab40d456fa8d37baa5904eadcba', size: "small", name: "camera-outline" }))), h("smoothly-input-select", { key: 'fa1526c0fe3c83df1f1ff97b240be85d4ed59c4b', ordered: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: '536cbe805f9baacb7f8752b2b5cdcfb32915af87', slot: "label" }, "Alphabet ordered select"), Array.from({ length: 26 })
|
|
14
12
|
.map((_, i) => String.fromCharCode(i + 65))
|
|
15
|
-
.map(char => (h("smoothly-item", { value: char, selected: char == "H" }, char)))), h("smoothly-input-select", { key: '
|
|
13
|
+
.map(char => (h("smoothly-item", { value: char, selected: char == "H" }, char)))), h("smoothly-input-select", { key: '9a54121c3c2c4a54dfec67f162715e85693bd644', multiple: true, menuHeight: "7.5items", placeholder: "Select...", name: "select-month" }, h("label", { key: '7dc86bf58e320f8d3b88ab302c1405e23baf3573', slot: "label" }, "Month multiple select"), h("smoothly-item", { key: '4d36b73ad961841f704d424953b52862f17aab7c', value: "1" }, "January"), h("smoothly-item", { key: '34c54bfc6b913bcfe311f58e95997df5bf6cf556', value: "2" }, "February"), h("smoothly-item", { key: '36c318142cf3e4c96746a0ea6db0e47efb905ff1', value: "3" }, "March"), h("smoothly-item", { key: '71a0e0338a684afc95372afe0e73476ae4c6b92e', value: "4" }, "April"), h("smoothly-item", { key: 'f886245dd9028cedf7b5b4c8a92d8145404e7b48', value: "5" }, "May"), h("smoothly-item", { key: 'baf3dfd66dabd46ab53e08f32eee4c9f40beed86', value: "6" }, "June"), h("smoothly-item", { key: '23902edc851bbd38d91aeb492be1588080ec8e35', value: "7" }, "July"), h("smoothly-item", { key: '070013888d298a0411cf11451896cdeebd5faefd', value: "8" }, "August"), h("smoothly-item", { key: 'f118909abf6d4f79a24794ff834dcd93f6f359bb', value: "9" }, "September"), h("smoothly-item", { key: 'fe43d7d6282c2879bd75749ba22a884e5fc9360d', value: "10" }, "October"), h("smoothly-item", { key: '5483b77005e252cfb5aa6ef1921a1fa8ff342a8f', value: "11" }, "November"), h("smoothly-item", { key: '9ae0ea26b94e91f40ad46315ca5706408ba94e60', value: "12" }, "December"))), h("h2", { key: 'a0d9abd40b02df85804a063340651dd341637539' }, "Duration"), h("smoothly-input", { key: 'ab34411fc2c3f2580e88c3f80229d38619c92922', name: "duration", type: "duration", placeholder: "hh:mm", value: this.duration, onSmoothlyInput: e => {
|
|
16
14
|
const duration = e.detail.duration;
|
|
17
15
|
this.duration = duration;
|
|
18
|
-
} }, "Duration"), h("smoothly-input", { key: '
|
|
16
|
+
} }, "Duration"), h("smoothly-input", { key: 'd79ab5f9b188a7e7997b7632528d9b7b7d3a4e17', name: "duration", type: "duration", value: this.duration, placeholder: "-hh:mm", onSmoothlyInput: e => {
|
|
19
17
|
const duration = e.detail.duration;
|
|
20
18
|
this.duration = duration;
|
|
21
|
-
} }, "Duration"), h("h2", { key: '
|
|
19
|
+
} }, "Duration"), h("h2", { key: '77659fae36b8baf78144e6bdf8114468bbbcce63' }, "Invalid text with warning icon and tooltip"), h("smoothly-input", { key: '36ec2d01a0eff284ac9c9ca029de977ca377b4d4', name: "alphanumeric", invalid: !/^[a-zA-Z0-9]+$/.test(this.alphanumeric), errorMessage: "Only alphanumeric allowed", value: this.alphanumeric, onSmoothlyInput: e => (this.alphanumeric = e.detail.alphanumeric) }, "Alphanumeric"), h("h2", { key: 'f932f037b870016f7c9cbdb6005667dc7128a0e5' }, "Identifiers"), h("smoothly-input", { key: 'c01d348ad7da08d7f4d79b81940d93c6d487dc73', type: "identifier-code" }, "Code"), h("smoothly-input", { key: '6f04219c7620dbf62ea636cef4cb57b5eaa92620', type: "identifier-attribute" }, "Attribute"), h("smoothly-input", { key: '238ccb9cf5b3af202a7e78afb5af3825388a4ecc', type: "identifier-snake" }, "Snake"), h("smoothly-input", { key: '80c20c17cae2e98e28cf868a8804a03b5bb47d96', type: "identifier-pascal" }, "Pascal"), h("smoothly-input", { key: 'e2bf4532f7f684d52446a79065ac80da72c90f22', type: "identifier-camel" }, "Camel"), h("h2", { key: 'a1881af9a04d1ba6ff914280cb897d4007ca9782' }, "Input Alternatives"), h("smoothly-input", { key: '726f60d54ecc61f3b837ecc7c66d3764d0a757b1', type: "text", name: "name.last", onSmoothlyChange: e => console.log("smoothly change event") }, h("smoothly-icon", { key: '9674ac3e67095c3709eacc60ecabb7ff88074a0c', name: "checkmark-circle", slot: "start" }), "First Name"), h("smoothly-input", { key: '18ab4455f475fbf78f554aa3305eb1189c206b4f', type: "text", name: "name.first", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", h("smoothly-icon", { key: '7c4ffa8dd88b3e34e1b7f2844974272f56ca47c7', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: 'f556a8cdeaa4c2f9475bc78dad3d9f26a90d7bea', type: "text", name: "name.first", placeholder: "Smith", onSmoothlyChange: e => console.log("smoothly change event") }, "Last Name", h("smoothly-icon", { key: 'e896f71cbeaa26e8aa2c6647b37ca9ab60d6ed4c', name: "checkmark-circle", slot: "end" })), h("smoothly-input", { key: '3542b034172c61acc999fc9822ad33cc2cdccaf7', placeholder: "test" }), h("smoothly-input-submit", { key: 'a42187c08d5fe2853d052d6844c7cc6bcad18c26', slot: "submit", fill: "solid", onSubmit: (e) => alert(e), color: "success" }), h("h4", { key: '8664ce9045837f7d7463faef8709049344a00dc3' }, "Smoothly checkboxes"), h("div", { key: '04b2ec0bc402d30fbeda397d94af55deb373fc72', class: "checkbox-group" }, h("smoothly-input-checkbox", { key: '575a1dc529da494f9e75cf118265bc0c7de98ed8', disabled: true, name: "first-checkbox" }, h("smoothly-icon", { key: '53de5dc29a3abeb050b37d90303e2af61c480fe2', name: "checkmark-circle", slot: "start", size: "tiny" }), "First"), h("smoothly-input-checkbox", { key: 'b0de8f61c270597d0a3d678b460c352a5ab1c292', name: "second-checkbox", checked: true }, h("smoothly-icon", { key: '8c28814145da88c5985389dd2bd857546cd95dac', name: "checkmark-circle", slot: "start", size: "tiny" }), "second", h("smoothly-input-clear", { key: 'b9adc0e43251e6351699705c90e30328e6fe90e3', size: "icon", slot: "end" })), h("smoothly-input-checkbox", { key: 'fccdafc99185802b6aebef7db0e013d3c2bf7b7a', name: "third-checkbox" }, "3rd")), h("h4", { key: '02546922407a4eb0cd79fd0df59ca964023339c6' }, "Smoothly Radio Buttons"), h("smoothly-input-radio", { key: '8a571b06744975ad89cb98531dabb186fd174d34', clearable: true, name: "radioFirstInput" }, h("smoothly-icon", { key: 'a16d89da7d35337d960e8c84cc35c1d5685b090c', name: "checkmark-circle", slot: "start" }), h("label", { key: '01b331334090300561788e9275e7d4c6953b1819', slot: "label" }, "Clearable"), h("smoothly-input-radio-item", { key: 'fcefd1e0e2d57f7e88eb1e11d57347f176a62840', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: '42385195aff79e62b89ab6fcf4272d03c388e5eb', selected: true, value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: '422b734be7f7e2f682ecbe4aaba7ea911fbc2f31', value: "third" }, "Label 3"), h("smoothly-input-clear", { key: 'f01b73ad270339303318232fce8381b84d7820ee', size: "icon", slot: "end" })), h("smoothly-input-radio", { key: '18a80016d74b795c4776571becf06aaa5b252cfb', name: "radioSecondInput" }, h("label", { key: '00b38c06274eb23a05a3b8ad164bab3599210b64', slot: "label" }, "Not clearable"), h("smoothly-input-radio-item", { key: '6fb088a2296577c80cac0bb6de0739f09bf86562', value: "first" }, "Label 1"), h("smoothly-input-radio-item", { key: 'd05e7d3e74e8715998f69a4aab8fba2f37ed977d', value: "second" }, "Label 2"), h("smoothly-input-radio-item", { key: 'd03c3fb5bd3c78db4454a25ddd4632b34ed0f02b', value: "third" }, "Label 3"), h("smoothly-input-radio-item", { key: 'ab22cadf0659c3f5c5f413257204cac7591a8de8', value: "fourth" }, "Label 4"), h("smoothly-input-radio-item", { key: '79116a6a56bb33a639a20ba42b2b5e9ccd08c305', value: "fifth" }, "Label 5"), h("smoothly-input-radio-item", { key: 'a1c12af0a76770978442fb89eea781fb4e07bf30', value: "sixth" }, "Label 6")), h("smoothly-input-range-demo", { key: 'bfec9553edd15ed9cbe0e6f17889f437308a644b' }), h("smoothly-input-color-demo", { key: 'e6a5a06f852534958c4985d83295bf59c527826f' }), h("smoothly-input-price-demo", { key: 'becbde45aeea68315b69aad6d9ba887070e6d36b' }), h("smoothly-back-to-top", { key: '969d495c56d6caf1c7ea392a714f3e647d2e8ea5' }))));
|
|
22
20
|
}
|
|
23
21
|
static get is() { return "smoothly-input-demo"; }
|
|
24
22
|
static get encapsulation() { return "scoped"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/input/demo/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, State } from \"@stencil/core\"\nimport { isoly } from \"isoly\"\n\n@Component({\n\ttag: \"smoothly-input-demo\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputDemo {\n\t@State() duration: isoly.TimeSpan = { hours: 8 }\n\t@State() alphanumeric: string = \"!@##\"\n\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<smoothly-input-demo-standard />\n\t\t\t\t<div class=\"inputs\">\n\t\t\t\t\t<h2>Calendar</h2>\n\t\t\t\t\t<smoothly-input-date name=\"some-date\">Calendar</smoothly-input-date>\n\t\t\t\t\t<h2>Date Range</h2>\n\t\t\t\t\t<smoothly-input-date-range\n\t\t\t\t\t\tname=\"testing\"\n\t\t\t\t\t\tstart={isoly.Date.now()}\n\t\t\t\t\t\tend={isoly.Date.nextMonth(isoly.Date.now())}\n\t\t\t\t\t\tmin=\"2021-10-01\"\n\t\t\t\t\t\tmax=\"2025-01-31\"></smoothly-input-date-range>\n\t\t\t\t\t<smoothly-input-date-range\n\t\t\t\t\t\tname=\"testing\"\n\t\t\t\t\t\tstart={isoly.Date.now()}\n\t\t\t\t\t\tend={isoly.Date.nextMonth(isoly.Date.now())}\n\t\t\t\t\t\tmin=\"2021-10-10\"\n\t\t\t\t\t\tmax=\"2024-12-30\">\n\t\t\t\t\t\t<smoothly-input-reset slot=\"end\" size=\"icon\"></smoothly-input-reset>\n\t\t\t\t\t</smoothly-input-date-range>\n\t\t\t\t\t<smoothly-input-date-range\n\t\t\t\t\t\tlooks=\"grid\"\n\t\t\t\t\t\tstart={isoly.Date.now()}\n\t\t\t\t\t\tend={isoly.Date.nextMonth(isoly.Date.now())}\n\t\t\t\t\t\tmin=\"2021-10-10\"\n\t\t\t\t\t\tmax=\"2025-12-30\"\n\t\t\t\t\t\tshowLabel={false}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\"--smoothly-input-border-radius\": \"0.5rem\",\n\t\t\t\t\t\t\t\"--padding\": \"0 0.75em\",\n\t\t\t\t\t\t\t\"--input-width\": \"12ch\",\n\t\t\t\t\t\t}}>\n\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" size=\"icon\"></smoothly-input-clear>\n\t\t\t\t\t</smoothly-input-date-range>\n\t\t\t\t\t<h2>Date</h2>\n\t\t\t\t\t<smoothly-input-date>Date</smoothly-input-date>\n\t\t\t\t\t<smoothly-input-date showLabel={false} value=\"2021-10-28\" max=\"2021-12-30\" min=\"2021-10-10\">\n\t\t\t\t\t\tDate\n\t\t\t\t\t</smoothly-input-date>\n\t\t\t\t\t<smoothly-input-date value=\"2021-10-28\">\n\t\t\t\t\t\tDate\n\t\t\t\t\t\t<smoothly-input-reset slot=\"end\" size=\"icon\"></smoothly-input-reset>\n\t\t\t\t\t</smoothly-input-date>\n\t\t\t\t\t<smoothly-input-date value=\"2021-10-28\">\n\t\t\t\t\t\tDate\n\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" size=\"icon\"></smoothly-input-clear>\n\t\t\t\t\t</smoothly-input-date>\n\t\t\t\t\t<h2>Select</h2>\n\t\t\t\t\t<div class=\"select-div\">\n\t\t\t\t\t\t<smoothly-input-select name=\"select-dessert\" looks=\"border\">\n\t\t\t\t\t\t\t<label slot=\"label\">Select with clear button</label>\n\t\t\t\t\t\t\t<smoothly-item value=\"1\">Ice cream</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"2\">Sponge cake</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"3\">Cookie</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"4\">Croissant</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"5\">Chocolate fondue</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-input-clear size=\"icon\" slot=\"end\"></smoothly-input-clear>\n\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t\t<smoothly-input-select multiple name=\"select-dessert-multiple\" looks=\"border\">\n\t\t\t\t\t\t\t<label slot=\"label\">Select multiple with reset button</label>\n\t\t\t\t\t\t\t<smoothly-item value=\"ice cream\">Ice cream</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"sponge cake\">Sponge cake</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item selected value=\"cookie\">\n\t\t\t\t\t\t\t\tCookie\n\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"croissant\">Croissant</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item selected value=\"chocolate fondue\">\n\t\t\t\t\t\t\t\tChocolate fondue\n\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-input-reset size=\"icon\" slot=\"end\"></smoothly-input-reset>\n\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t\t<smoothly-input-select name=\"spirit-animals\" looks=\"border\" mutable>\n\t\t\t\t\t\t\t<label slot=\"label\">Select or add new options</label>\n\t\t\t\t\t\t\t<smoothly-item value=\"manatee\">Manatee</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item selected value=\"cthulu\">\n\t\t\t\t\t\t\t\tCthulu\n\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t\t<smoothly-input-select name=\"select-icon\" clearable={false} showSelected={false}>\n\t\t\t\t\t\t\t<smoothly-item value=\"folder\" selected>\n\t\t\t\t\t\t\t\t<smoothly-icon size=\"small\" name=\"folder-outline\" />\n\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"camera\">\n\t\t\t\t\t\t\t\t<smoothly-icon size=\"small\" name=\"camera-outline\" />\n\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t\t<smoothly-input-select ordered menuHeight=\"7.5items\" placeholder=\"Select...\" name=\"select-month\">\n\t\t\t\t\t\t\t<label slot=\"label\">Alphabet ordered select</label>\n\t\t\t\t\t\t\t{Array.from({ length: 26 })\n\t\t\t\t\t\t\t\t.map((_, i) => String.fromCharCode(i + 65))\n\t\t\t\t\t\t\t\t.map(char => (\n\t\t\t\t\t\t\t\t\t<smoothly-item value={char} selected={char == \"H\"}>\n\t\t\t\t\t\t\t\t\t\t{char}\n\t\t\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t\t<smoothly-input-select multiple menuHeight=\"7.5items\" placeholder=\"Select...\" name=\"select-month\">\n\t\t\t\t\t\t\t<label slot=\"label\">Month multiple select</label>\n\t\t\t\t\t\t\t<smoothly-item value=\"1\">January</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"2\">February</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"3\">March</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"4\">April</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"5\">May</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"6\">June</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"7\">July</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"8\">August</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"9\">September</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"10\">October</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"11\">November</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"12\">December</smoothly-item>\n\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t</div>\n\t\t\t\t\t<h2>Duration</h2>\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\tname=\"duration\"\n\t\t\t\t\t\ttype=\"duration\"\n\t\t\t\t\t\tplaceholder=\"hh:mm\"\n\t\t\t\t\t\tvalue={this.duration}\n\t\t\t\t\t\tonSmoothlyInput={e => {\n\t\t\t\t\t\t\tconst duration = e.detail.duration\n\t\t\t\t\t\t\tthis.duration = duration\n\t\t\t\t\t\t}}>\n\t\t\t\t\t\tDuration\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\tname=\"duration\"\n\t\t\t\t\t\ttype=\"duration\"\n\t\t\t\t\t\tvalue={this.duration}\n\t\t\t\t\t\tplaceholder=\"-hh:mm\"\n\t\t\t\t\t\tonSmoothlyInput={e => {\n\t\t\t\t\t\t\tconst duration = e.detail.duration\n\t\t\t\t\t\t\tthis.duration = duration\n\t\t\t\t\t\t}}>\n\t\t\t\t\t\tDuration\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<h2>Invalid text with warning icon and tooltip</h2>\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\tname=\"alphanumeric\"\n\t\t\t\t\t\tinvalid={!/^[a-zA-Z0-9]+$/.test(this.alphanumeric)}\n\t\t\t\t\t\terrorMessage={\"Only alphanumeric allowed\"}\n\t\t\t\t\t\tvalue={this.alphanumeric}\n\t\t\t\t\t\tonSmoothlyInput={e => (this.alphanumeric = e.detail.alphanumeric)}>\n\t\t\t\t\t\tAlphanumeric\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<h2>Identifiers</h2>\n\t\t\t\t\t<smoothly-input type=\"identifier-code\">Code</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"identifier-attribute\">Attribute</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"identifier-snake\">Snake</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"identifier-pascal\">Pascal</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"identifier-camel\">Camel</smoothly-input>\n\t\t\t\t\t<h2>Input Alternatives</h2>\n\t\t\t\t\t<smoothly-input type=\"text\" name=\"name.last\" onSmoothlyChange={e => console.log(\"smoothly change event\")}>\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"start\"></smoothly-icon>\n\t\t\t\t\t\tFirst Name\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"text\" name=\"name.first\" onSmoothlyChange={e => console.log(\"smoothly change event\")}>\n\t\t\t\t\t\tLast Name\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"end\"></smoothly-icon>\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tname=\"name.first\"\n\t\t\t\t\t\tplaceholder=\"Smith\"\n\t\t\t\t\t\tonSmoothlyChange={e => console.log(\"smoothly change event\")}>\n\t\t\t\t\t\tLast Name\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"end\"></smoothly-icon>\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input placeholder=\"test\"></smoothly-input>\n\t\t\t\t\t<smoothly-input-submit\n\t\t\t\t\t\tslot=\"submit\"\n\t\t\t\t\t\tfill=\"solid\"\n\t\t\t\t\t\tonSubmit={(e: Event) => alert(e)}\n\t\t\t\t\t\tcolor=\"success\"></smoothly-input-submit>\n\t\t\t\t\t<h4>Smoothly checkboxes</h4>\n\t\t\t\t\t<div class=\"checkbox-group\">\n\t\t\t\t\t\t<smoothly-input-checkbox disabled name=\"first-checkbox\">\n\t\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"start\" size=\"tiny\" />\n\t\t\t\t\t\t\tFirst\n\t\t\t\t\t\t</smoothly-input-checkbox>\n\t\t\t\t\t\t<smoothly-input-checkbox name=\"second-checkbox\" checked>\n\t\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"start\" size=\"tiny\" />\n\t\t\t\t\t\t\tsecond\n\t\t\t\t\t\t\t<smoothly-input-clear size=\"icon\" slot=\"end\"></smoothly-input-clear>\n\t\t\t\t\t\t</smoothly-input-checkbox>\n\t\t\t\t\t\t<smoothly-input-checkbox name=\"third-checkbox\">3rd</smoothly-input-checkbox>\n\t\t\t\t\t</div>\n\t\t\t\t\t<h4>Smoothly Radio Buttons</h4>\n\t\t\t\t\t<smoothly-input-radio clearable name=\"radioFirstInput\">\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"start\" />\n\t\t\t\t\t\t<label slot=\"label\">Clearable</label>\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"first\"}>Label 1</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item selected value={\"second\"}>\n\t\t\t\t\t\t\tLabel 2\n\t\t\t\t\t\t</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"third\"}>Label 3</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-clear size=\"icon\" slot=\"end\" />\n\t\t\t\t\t</smoothly-input-radio>\n\t\t\t\t\t<smoothly-input-radio name=\"radioSecondInput\">\n\t\t\t\t\t\t<label slot=\"label\">Not clearable</label>\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"first\"}>Label 1</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"second\"}>Label 2</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"third\"}>Label 3</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"fourth\"}>Label 4</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"fifth\"}>Label 5</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"sixth\"}>Label 6</smoothly-input-radio-item>\n\t\t\t\t\t</smoothly-input-radio>\n\t\t\t\t\t<smoothly-input-range-demo />\n\t\t\t\t\t<smoothly-input-color-demo />\n\t\t\t\t\t<smoothly-input-price-demo />\n\t\t\t\t\t<smoothly-back-to-top />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/input/demo/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, State } from \"@stencil/core\"\nimport { isoly } from \"isoly\"\n\n@Component({\n\ttag: \"smoothly-input-demo\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputDemo {\n\t@State() duration: isoly.TimeSpan = { hours: 8 }\n\t@State() alphanumeric: string = \"!@##\"\n\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<smoothly-input-demo-standard />\n\t\t\t\t<div class=\"inputs\">\n\t\t\t\t\t<h2>Calendar</h2>\n\t\t\t\t\t<smoothly-input-date name=\"some-date\">Calendar</smoothly-input-date>\n\t\t\t\t\t<h2>Date Range</h2>\n\t\t\t\t\t<smoothly-input-date-range\n\t\t\t\t\t\tname=\"testing\"\n\t\t\t\t\t\tstart={isoly.Date.now()}\n\t\t\t\t\t\tend={isoly.Date.nextMonth(isoly.Date.now())}\n\t\t\t\t\t\tmin=\"2021-10-01\"\n\t\t\t\t\t\tmax=\"2025-01-31\"></smoothly-input-date-range>\n\t\t\t\t\t<smoothly-input-date-range\n\t\t\t\t\t\tname=\"testing\"\n\t\t\t\t\t\tstart={isoly.Date.now()}\n\t\t\t\t\t\tend={isoly.Date.nextMonth(isoly.Date.now())}\n\t\t\t\t\t\tmin=\"2021-10-10\"\n\t\t\t\t\t\tmax=\"2024-12-30\">\n\t\t\t\t\t\t<smoothly-input-reset slot=\"end\" size=\"icon\"></smoothly-input-reset>\n\t\t\t\t\t</smoothly-input-date-range>\n\t\t\t\t\t<smoothly-input-date-range\n\t\t\t\t\t\tlooks=\"grid\"\n\t\t\t\t\t\tstart={isoly.Date.now()}\n\t\t\t\t\t\tend={isoly.Date.nextMonth(isoly.Date.now())}\n\t\t\t\t\t\tmin=\"2021-10-10\"\n\t\t\t\t\t\tmax=\"2025-12-30\"\n\t\t\t\t\t\tshowLabel={false}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\"--smoothly-input-border-radius\": \"0.5rem\",\n\t\t\t\t\t\t}}>\n\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" size=\"icon\"></smoothly-input-clear>\n\t\t\t\t\t</smoothly-input-date-range>\n\t\t\t\t\t<h2>Date</h2>\n\t\t\t\t\t<smoothly-input-date>Date</smoothly-input-date>\n\t\t\t\t\t<smoothly-input-date showLabel={false} value=\"2021-10-28\" max=\"2021-12-30\" min=\"2021-10-10\">\n\t\t\t\t\t\tDate\n\t\t\t\t\t</smoothly-input-date>\n\t\t\t\t\t<smoothly-input-date value=\"2021-10-28\">\n\t\t\t\t\t\tDate\n\t\t\t\t\t\t<smoothly-input-reset slot=\"end\" size=\"icon\"></smoothly-input-reset>\n\t\t\t\t\t</smoothly-input-date>\n\t\t\t\t\t<smoothly-input-date value=\"2021-10-28\">\n\t\t\t\t\t\tDate\n\t\t\t\t\t\t<smoothly-input-clear slot=\"end\" size=\"icon\"></smoothly-input-clear>\n\t\t\t\t\t</smoothly-input-date>\n\t\t\t\t\t<h2>Select</h2>\n\t\t\t\t\t<div class=\"select-div\">\n\t\t\t\t\t\t<smoothly-input-select name=\"select-dessert\" looks=\"border\">\n\t\t\t\t\t\t\t<label slot=\"label\">Select with clear button</label>\n\t\t\t\t\t\t\t<smoothly-item value=\"1\">Ice cream</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"2\">Sponge cake</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"3\">Cookie</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"4\">Croissant</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"5\">Chocolate fondue</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-input-clear size=\"icon\" slot=\"end\"></smoothly-input-clear>\n\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t\t<smoothly-input-select multiple name=\"select-dessert-multiple\" looks=\"border\">\n\t\t\t\t\t\t\t<label slot=\"label\">Select multiple with reset button</label>\n\t\t\t\t\t\t\t<smoothly-item value=\"ice cream\">Ice cream</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"sponge cake\">Sponge cake</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item selected value=\"cookie\">\n\t\t\t\t\t\t\t\tCookie\n\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"croissant\">Croissant</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item selected value=\"chocolate fondue\">\n\t\t\t\t\t\t\t\tChocolate fondue\n\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-input-reset size=\"icon\" slot=\"end\"></smoothly-input-reset>\n\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t\t<smoothly-input-select name=\"spirit-animals\" looks=\"border\" mutable>\n\t\t\t\t\t\t\t<label slot=\"label\">Select or add new options</label>\n\t\t\t\t\t\t\t<smoothly-item value=\"manatee\">Manatee</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item selected value=\"cthulu\">\n\t\t\t\t\t\t\t\tCthulu\n\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t\t<smoothly-input-select name=\"select-icon\" clearable={false} showSelected={false}>\n\t\t\t\t\t\t\t<smoothly-item value=\"folder\" selected>\n\t\t\t\t\t\t\t\t<smoothly-icon size=\"small\" name=\"folder-outline\" />\n\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"camera\">\n\t\t\t\t\t\t\t\t<smoothly-icon size=\"small\" name=\"camera-outline\" />\n\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t\t<smoothly-input-select ordered menuHeight=\"7.5items\" placeholder=\"Select...\" name=\"select-month\">\n\t\t\t\t\t\t\t<label slot=\"label\">Alphabet ordered select</label>\n\t\t\t\t\t\t\t{Array.from({ length: 26 })\n\t\t\t\t\t\t\t\t.map((_, i) => String.fromCharCode(i + 65))\n\t\t\t\t\t\t\t\t.map(char => (\n\t\t\t\t\t\t\t\t\t<smoothly-item value={char} selected={char == \"H\"}>\n\t\t\t\t\t\t\t\t\t\t{char}\n\t\t\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t\t<smoothly-input-select multiple menuHeight=\"7.5items\" placeholder=\"Select...\" name=\"select-month\">\n\t\t\t\t\t\t\t<label slot=\"label\">Month multiple select</label>\n\t\t\t\t\t\t\t<smoothly-item value=\"1\">January</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"2\">February</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"3\">March</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"4\">April</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"5\">May</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"6\">June</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"7\">July</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"8\">August</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"9\">September</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"10\">October</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"11\">November</smoothly-item>\n\t\t\t\t\t\t\t<smoothly-item value=\"12\">December</smoothly-item>\n\t\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t</div>\n\t\t\t\t\t<h2>Duration</h2>\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\tname=\"duration\"\n\t\t\t\t\t\ttype=\"duration\"\n\t\t\t\t\t\tplaceholder=\"hh:mm\"\n\t\t\t\t\t\tvalue={this.duration}\n\t\t\t\t\t\tonSmoothlyInput={e => {\n\t\t\t\t\t\t\tconst duration = e.detail.duration\n\t\t\t\t\t\t\tthis.duration = duration\n\t\t\t\t\t\t}}>\n\t\t\t\t\t\tDuration\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\tname=\"duration\"\n\t\t\t\t\t\ttype=\"duration\"\n\t\t\t\t\t\tvalue={this.duration}\n\t\t\t\t\t\tplaceholder=\"-hh:mm\"\n\t\t\t\t\t\tonSmoothlyInput={e => {\n\t\t\t\t\t\t\tconst duration = e.detail.duration\n\t\t\t\t\t\t\tthis.duration = duration\n\t\t\t\t\t\t}}>\n\t\t\t\t\t\tDuration\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<h2>Invalid text with warning icon and tooltip</h2>\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\tname=\"alphanumeric\"\n\t\t\t\t\t\tinvalid={!/^[a-zA-Z0-9]+$/.test(this.alphanumeric)}\n\t\t\t\t\t\terrorMessage={\"Only alphanumeric allowed\"}\n\t\t\t\t\t\tvalue={this.alphanumeric}\n\t\t\t\t\t\tonSmoothlyInput={e => (this.alphanumeric = e.detail.alphanumeric)}>\n\t\t\t\t\t\tAlphanumeric\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<h2>Identifiers</h2>\n\t\t\t\t\t<smoothly-input type=\"identifier-code\">Code</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"identifier-attribute\">Attribute</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"identifier-snake\">Snake</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"identifier-pascal\">Pascal</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"identifier-camel\">Camel</smoothly-input>\n\t\t\t\t\t<h2>Input Alternatives</h2>\n\t\t\t\t\t<smoothly-input type=\"text\" name=\"name.last\" onSmoothlyChange={e => console.log(\"smoothly change event\")}>\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"start\"></smoothly-icon>\n\t\t\t\t\t\tFirst Name\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input type=\"text\" name=\"name.first\" onSmoothlyChange={e => console.log(\"smoothly change event\")}>\n\t\t\t\t\t\tLast Name\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"end\"></smoothly-icon>\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tname=\"name.first\"\n\t\t\t\t\t\tplaceholder=\"Smith\"\n\t\t\t\t\t\tonSmoothlyChange={e => console.log(\"smoothly change event\")}>\n\t\t\t\t\t\tLast Name\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"end\"></smoothly-icon>\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input placeholder=\"test\"></smoothly-input>\n\t\t\t\t\t<smoothly-input-submit\n\t\t\t\t\t\tslot=\"submit\"\n\t\t\t\t\t\tfill=\"solid\"\n\t\t\t\t\t\tonSubmit={(e: Event) => alert(e)}\n\t\t\t\t\t\tcolor=\"success\"></smoothly-input-submit>\n\t\t\t\t\t<h4>Smoothly checkboxes</h4>\n\t\t\t\t\t<div class=\"checkbox-group\">\n\t\t\t\t\t\t<smoothly-input-checkbox disabled name=\"first-checkbox\">\n\t\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"start\" size=\"tiny\" />\n\t\t\t\t\t\t\tFirst\n\t\t\t\t\t\t</smoothly-input-checkbox>\n\t\t\t\t\t\t<smoothly-input-checkbox name=\"second-checkbox\" checked>\n\t\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"start\" size=\"tiny\" />\n\t\t\t\t\t\t\tsecond\n\t\t\t\t\t\t\t<smoothly-input-clear size=\"icon\" slot=\"end\"></smoothly-input-clear>\n\t\t\t\t\t\t</smoothly-input-checkbox>\n\t\t\t\t\t\t<smoothly-input-checkbox name=\"third-checkbox\">3rd</smoothly-input-checkbox>\n\t\t\t\t\t</div>\n\t\t\t\t\t<h4>Smoothly Radio Buttons</h4>\n\t\t\t\t\t<smoothly-input-radio clearable name=\"radioFirstInput\">\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"start\" />\n\t\t\t\t\t\t<label slot=\"label\">Clearable</label>\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"first\"}>Label 1</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item selected value={\"second\"}>\n\t\t\t\t\t\t\tLabel 2\n\t\t\t\t\t\t</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"third\"}>Label 3</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-clear size=\"icon\" slot=\"end\" />\n\t\t\t\t\t</smoothly-input-radio>\n\t\t\t\t\t<smoothly-input-radio name=\"radioSecondInput\">\n\t\t\t\t\t\t<label slot=\"label\">Not clearable</label>\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"first\"}>Label 1</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"second\"}>Label 2</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"third\"}>Label 3</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"fourth\"}>Label 4</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"fifth\"}>Label 5</smoothly-input-radio-item>\n\t\t\t\t\t\t<smoothly-input-radio-item value={\"sixth\"}>Label 6</smoothly-input-radio-item>\n\t\t\t\t\t</smoothly-input-radio>\n\t\t\t\t\t<smoothly-input-range-demo />\n\t\t\t\t\t<smoothly-input-color-demo />\n\t\t\t\t\t<smoothly-input-price-demo />\n\t\t\t\t\t<smoothly-back-to-top />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
|
|
@@ -70,17 +70,17 @@
|
|
|
70
70
|
|
|
71
71
|
|
|
72
72
|
:host {
|
|
73
|
-
--border-radius: 0.5rem;
|
|
73
|
+
--smoothly-button-border-radius: 0.5rem;
|
|
74
74
|
display: inline-block;
|
|
75
75
|
box-sizing: border-box;
|
|
76
|
-
border-radius: var(--border-radius);
|
|
76
|
+
border-radius: var(--smoothly-button-border-radius);
|
|
77
77
|
cursor: pointer;
|
|
78
78
|
border: none;
|
|
79
79
|
outline: none;
|
|
80
80
|
position: relative;
|
|
81
81
|
}
|
|
82
82
|
:host([shape=rounded]) {
|
|
83
|
-
--border-radius: 2rem;
|
|
83
|
+
--smoothly-button-border-radius: 2rem;
|
|
84
84
|
}
|
|
85
85
|
|
|
86
86
|
:host([type=link]) {
|
|
@@ -114,7 +114,7 @@
|
|
|
114
114
|
justify-content: center;
|
|
115
115
|
height: 100%;
|
|
116
116
|
width: 100%;
|
|
117
|
-
border-radius: var(--border-radius);
|
|
117
|
+
border-radius: var(--smoothly-button-border-radius);
|
|
118
118
|
align-items: center;
|
|
119
119
|
}
|
|
120
120
|
|
|
@@ -171,7 +171,7 @@
|
|
|
171
171
|
:host([expand=full]) {
|
|
172
172
|
border-left: none;
|
|
173
173
|
border-right: none;
|
|
174
|
-
--border-radius: 0;
|
|
174
|
+
--smoothly-button-border-radius: 0;
|
|
175
175
|
}
|
|
176
176
|
|
|
177
177
|
:host([fill=outline])>button {
|
|
@@ -195,7 +195,7 @@
|
|
|
195
195
|
position: absolute;
|
|
196
196
|
border: 2px solid rgb(var(--smoothly-button-focus-border));
|
|
197
197
|
inset: -1px;
|
|
198
|
-
border-radius: var(--border-radius);
|
|
198
|
+
border-radius: var(--smoothly-button-border-radius);
|
|
199
199
|
}
|
|
200
200
|
|
|
201
201
|
:host(:not([fill=clear]):not([fill=outline]))>button:hover,
|
|
@@ -70,17 +70,17 @@
|
|
|
70
70
|
|
|
71
71
|
|
|
72
72
|
:host {
|
|
73
|
-
--border-radius: 0.5rem;
|
|
73
|
+
--smoothly-button-border-radius: 0.5rem;
|
|
74
74
|
display: inline-block;
|
|
75
75
|
box-sizing: border-box;
|
|
76
|
-
border-radius: var(--border-radius);
|
|
76
|
+
border-radius: var(--smoothly-button-border-radius);
|
|
77
77
|
cursor: pointer;
|
|
78
78
|
border: none;
|
|
79
79
|
outline: none;
|
|
80
80
|
position: relative;
|
|
81
81
|
}
|
|
82
82
|
:host([shape=rounded]) {
|
|
83
|
-
--border-radius: 2rem;
|
|
83
|
+
--smoothly-button-border-radius: 2rem;
|
|
84
84
|
}
|
|
85
85
|
|
|
86
86
|
:host([type=link]) {
|
|
@@ -114,7 +114,7 @@
|
|
|
114
114
|
justify-content: center;
|
|
115
115
|
height: 100%;
|
|
116
116
|
width: 100%;
|
|
117
|
-
border-radius: var(--border-radius);
|
|
117
|
+
border-radius: var(--smoothly-button-border-radius);
|
|
118
118
|
align-items: center;
|
|
119
119
|
}
|
|
120
120
|
|
|
@@ -171,7 +171,7 @@
|
|
|
171
171
|
:host([expand=full]) {
|
|
172
172
|
border-left: none;
|
|
173
173
|
border-right: none;
|
|
174
|
-
--border-radius: 0;
|
|
174
|
+
--smoothly-button-border-radius: 0;
|
|
175
175
|
}
|
|
176
176
|
|
|
177
177
|
:host([fill=outline])>button {
|
|
@@ -195,7 +195,7 @@
|
|
|
195
195
|
position: absolute;
|
|
196
196
|
border: 2px solid rgb(var(--smoothly-button-focus-border));
|
|
197
197
|
inset: -1px;
|
|
198
|
-
border-radius: var(--border-radius);
|
|
198
|
+
border-radius: var(--smoothly-button-border-radius);
|
|
199
199
|
}
|
|
200
200
|
|
|
201
201
|
:host(:not([fill=clear]):not([fill=outline]))>button:hover,
|
|
@@ -70,17 +70,17 @@
|
|
|
70
70
|
|
|
71
71
|
|
|
72
72
|
:host {
|
|
73
|
-
--border-radius: 0.5rem;
|
|
73
|
+
--smoothly-button-border-radius: 0.5rem;
|
|
74
74
|
display: inline-block;
|
|
75
75
|
box-sizing: border-box;
|
|
76
|
-
border-radius: var(--border-radius);
|
|
76
|
+
border-radius: var(--smoothly-button-border-radius);
|
|
77
77
|
cursor: pointer;
|
|
78
78
|
border: none;
|
|
79
79
|
outline: none;
|
|
80
80
|
position: relative;
|
|
81
81
|
}
|
|
82
82
|
:host([shape=rounded]) {
|
|
83
|
-
--border-radius: 2rem;
|
|
83
|
+
--smoothly-button-border-radius: 2rem;
|
|
84
84
|
}
|
|
85
85
|
|
|
86
86
|
:host([type=link]) {
|
|
@@ -114,7 +114,7 @@
|
|
|
114
114
|
justify-content: center;
|
|
115
115
|
height: 100%;
|
|
116
116
|
width: 100%;
|
|
117
|
-
border-radius: var(--border-radius);
|
|
117
|
+
border-radius: var(--smoothly-button-border-radius);
|
|
118
118
|
align-items: center;
|
|
119
119
|
}
|
|
120
120
|
|
|
@@ -171,7 +171,7 @@
|
|
|
171
171
|
:host([expand=full]) {
|
|
172
172
|
border-left: none;
|
|
173
173
|
border-right: none;
|
|
174
|
-
--border-radius: 0;
|
|
174
|
+
--smoothly-button-border-radius: 0;
|
|
175
175
|
}
|
|
176
176
|
|
|
177
177
|
:host([fill=outline])>button {
|
|
@@ -195,7 +195,7 @@
|
|
|
195
195
|
position: absolute;
|
|
196
196
|
border: 2px solid rgb(var(--smoothly-button-focus-border));
|
|
197
197
|
inset: -1px;
|
|
198
|
-
border-radius: var(--border-radius);
|
|
198
|
+
border-radius: var(--smoothly-button-border-radius);
|
|
199
199
|
}
|
|
200
200
|
|
|
201
201
|
:host(:not([fill=clear]):not([fill=outline]))>button:hover,
|
|
@@ -70,17 +70,17 @@
|
|
|
70
70
|
|
|
71
71
|
|
|
72
72
|
:host {
|
|
73
|
-
--border-radius: 0.5rem;
|
|
73
|
+
--smoothly-button-border-radius: 0.5rem;
|
|
74
74
|
display: inline-block;
|
|
75
75
|
box-sizing: border-box;
|
|
76
|
-
border-radius: var(--border-radius);
|
|
76
|
+
border-radius: var(--smoothly-button-border-radius);
|
|
77
77
|
cursor: pointer;
|
|
78
78
|
border: none;
|
|
79
79
|
outline: none;
|
|
80
80
|
position: relative;
|
|
81
81
|
}
|
|
82
82
|
:host([shape=rounded]) {
|
|
83
|
-
--border-radius: 2rem;
|
|
83
|
+
--smoothly-button-border-radius: 2rem;
|
|
84
84
|
}
|
|
85
85
|
|
|
86
86
|
:host([type=link]) {
|
|
@@ -114,7 +114,7 @@
|
|
|
114
114
|
justify-content: center;
|
|
115
115
|
height: 100%;
|
|
116
116
|
width: 100%;
|
|
117
|
-
border-radius: var(--border-radius);
|
|
117
|
+
border-radius: var(--smoothly-button-border-radius);
|
|
118
118
|
align-items: center;
|
|
119
119
|
}
|
|
120
120
|
|
|
@@ -171,7 +171,7 @@
|
|
|
171
171
|
:host([expand=full]) {
|
|
172
172
|
border-left: none;
|
|
173
173
|
border-right: none;
|
|
174
|
-
--border-radius: 0;
|
|
174
|
+
--smoothly-button-border-radius: 0;
|
|
175
175
|
}
|
|
176
176
|
|
|
177
177
|
:host([fill=outline])>button {
|
|
@@ -195,7 +195,7 @@
|
|
|
195
195
|
position: absolute;
|
|
196
196
|
border: 2px solid rgb(var(--smoothly-button-focus-border));
|
|
197
197
|
inset: -1px;
|
|
198
|
-
border-radius: var(--border-radius);
|
|
198
|
+
border-radius: var(--smoothly-button-border-radius);
|
|
199
199
|
}
|
|
200
200
|
|
|
201
201
|
:host(:not([fill=clear]):not([fill=outline]))>button:hover,
|
|
@@ -3,17 +3,17 @@ import { A as Alpha2, D as Date } from './p-99f89f10.js';
|
|
|
3
3
|
import { f as from } from './p-876d64b3.js';
|
|
4
4
|
import { o as object, s as string } from './p-82c01297.js';
|
|
5
5
|
import { n as number, f as fromIs } from './p-ca19ed60.js';
|
|
6
|
-
import { d as defineCustomElement$d } from './p-
|
|
7
|
-
import { d as defineCustomElement$c } from './p-
|
|
6
|
+
import { d as defineCustomElement$d } from './p-6da87c78.js';
|
|
7
|
+
import { d as defineCustomElement$c } from './p-ef188cb4.js';
|
|
8
8
|
import { d as defineCustomElement$b } from './p-ff043e81.js';
|
|
9
9
|
import { d as defineCustomElement$a } from './p-be596a9e.js';
|
|
10
10
|
import { d as defineCustomElement$9 } from './p-8a02ff30.js';
|
|
11
11
|
import { d as defineCustomElement$8 } from './p-100d067e.js';
|
|
12
12
|
import { d as defineCustomElement$7 } from './p-c4644edc.js';
|
|
13
13
|
import { d as defineCustomElement$6 } from './p-4e624488.js';
|
|
14
|
-
import { d as defineCustomElement$5 } from './p-
|
|
14
|
+
import { d as defineCustomElement$5 } from './p-6b9d18a3.js';
|
|
15
15
|
import { d as defineCustomElement$4 } from './p-3e87d17f.js';
|
|
16
|
-
import { d as defineCustomElement$3 } from './p-
|
|
16
|
+
import { d as defineCustomElement$3 } from './p-7f090deb.js';
|
|
17
17
|
import { d as defineCustomElement$2 } from './p-9c14be4b.js';
|
|
18
18
|
import { d as defineCustomElement$1 } from './p-7b6e9ca3.js';
|
|
19
19
|
|
|
@@ -122,4 +122,4 @@ defineCustomElement();
|
|
|
122
122
|
|
|
123
123
|
export { SmoothlyFormDemoTyped as S, defineCustomElement as d };
|
|
124
124
|
|
|
125
|
-
//# sourceMappingURL=p-
|
|
125
|
+
//# sourceMappingURL=p-04c6f4c5.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-04c6f4c5.js","mappings":";;;;;;;;;;;;;;;;;;;IASiB,OAAO,CAOvB;AAPD,WAAiB,OAAO;IACV,YAAI,GAAGA,MAAW,CAAU;QACxC,IAAI,EAAEA,MAAW,CAAkB,EAAE,KAAK,EAAEC,MAAW,EAAE,EAAE,MAAM,EAAEA,MAAW,EAAE,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAEA,MAAW,EAAE,EAAE,CAAC;QACnH,GAAG,EAAEC,MAAW,CAAC,GAAG,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,CAAC;QAChD,OAAO,EAAEC,MAAW,CAAC,aAAa,EAAEC,MAAwB,CAAC,EAAE,CAAC;QAChE,QAAQ,EAAED,MAAW,CAAC,MAAM,EAAEE,IAAU,CAAC,EAAE,CAAC;KAC5C,CAAC,CAAA;AACH,CAAC,EAPgB,OAAO,KAAP,OAAO;;ACTxB,MAAM,QAAQ,GAAG,EAAE,CAAC;AACpB,oCAAe,QAAQ;;MCQV,qBAAqB;;;;;IACjC,MAAM;QACL,QACC,EAAC,IAAI,uDACJ,6EAAsB,EACtB,sEAAe,SAAS,EAAE,OAAO,CAAC,IAAI,IACrC,uEAAgB,IAAI,EAAC,YAAY,iBAA4B,EAC7D,uEAAgB,IAAI,EAAC,aAAa,6BAAwC,EAC1E,uEAAgB,IAAI,EAAC,WAAW,gBAA2B,EAC3D,uEAAgB,IAAI,EAAC,KAAK,EAAC,IAAI,EAAC,SAAS,mBAExB,EACjB,8EAAuB,IAAI,EAAC,SAAS,IACpC,6DAAM,IAAI,EAAC,OAAO,cAAe,EAChCD,MAAwB,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,KAC1C,qBAAe,KAAK,EAAE,OAAO,IAAGE,IAA8B,CAAC,OAAO,CAAC,CAAiB,CACxF,CAAC,CACqB,EACxB,4EAAqB,IAAI,EAAC,UAAU,oBAAoC,EACxE,6EAAsB,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,GAAI,EACrF,8EAAuB,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,GAAI,CAC1D,CACV,EACP;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["isly.object","isly.string","isly.number","isly.fromIs","isoly.CountryCode.Alpha2","isoly.Date","isoly.CountryCode.Name.en.from"],"sources":["src/components/form/demo/typed/Contact.ts","src/components/form/demo/typed/style.css?tag=smoothly-form-demo-typed&encapsulation=scoped","src/components/form/demo/typed/index.tsx"],"sourcesContent":["import { isoly } from \"isoly\"\nimport { isly } from \"isly\"\n\nexport interface Contact {\n\tname: { first: string; middle?: string; last: string }\n\tage: number\n\tcountry: isoly.CountryCode.Alpha2\n\tbirthday: isoly.Date\n}\nexport namespace Contact {\n\texport const type = isly.object<Contact>({\n\t\tname: isly.object<Contact[\"name\"]>({ first: isly.string(), middle: isly.string().optional(), last: isly.string() }),\n\t\tage: isly.number(age => 18 <= age && age <= 120),\n\t\tcountry: isly.fromIs(\"CountryCode\", isoly.CountryCode.Alpha2.is),\n\t\tbirthday: isly.fromIs(\"Date\", isoly.Date.is),\n\t})\n}\n","\n","import { Component, h, Host, VNode } from \"@stencil/core\"\nimport { isoly } from \"isoly\"\nimport { Contact } from \"./Contact\"\n\n@Component({\n\ttag: \"smoothly-form-demo-typed\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyFormDemoTyped {\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<h2>Typed Contact</h2>\n\t\t\t\t<smoothly-form validator={Contact.type}>\n\t\t\t\t\t<smoothly-input name=\"name.first\">First Name</smoothly-input>\n\t\t\t\t\t<smoothly-input name=\"name.middle\">Middle Name (optional)</smoothly-input>\n\t\t\t\t\t<smoothly-input name=\"name.last\">Last Name</smoothly-input>\n\t\t\t\t\t<smoothly-input name=\"age\" type=\"integer\">\n\t\t\t\t\t\tAge (18-120)\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input-select name=\"country\">\n\t\t\t\t\t\t<span slot=\"label\">Country</span>\n\t\t\t\t\t\t{isoly.CountryCode.Alpha2.types.map(country => (\n\t\t\t\t\t\t\t<smoothly-item value={country}>{isoly.CountryCode.Name.en.from(country)}</smoothly-item>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t<smoothly-input-date name=\"birthday\">Date of birth</smoothly-input-date>\n\t\t\t\t\t<smoothly-input-reset slot={\"reset\"} type={\"form\"} size={\"icon\"} color={\"warning\"} />\n\t\t\t\t\t<smoothly-input-submit slot={\"submit\"} size={\"icon\"} color={\"success\"} />\n\t\t\t\t</smoothly-form>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h, d as Host } from './p-f765921a.js';
|
|
2
2
|
import { D as Date, C as Currency } from './p-99f89f10.js';
|
|
3
|
-
import { d as defineCustomElement$c } from './p-
|
|
4
|
-
import { d as defineCustomElement$b } from './p-
|
|
3
|
+
import { d as defineCustomElement$c } from './p-6da87c78.js';
|
|
4
|
+
import { d as defineCustomElement$b } from './p-ef188cb4.js';
|
|
5
5
|
import { d as defineCustomElement$a } from './p-be596a9e.js';
|
|
6
6
|
import { d as defineCustomElement$9 } from './p-8a02ff30.js';
|
|
7
7
|
import { d as defineCustomElement$8 } from './p-100d067e.js';
|
|
8
|
-
import { d as defineCustomElement$7 } from './p-
|
|
8
|
+
import { d as defineCustomElement$7 } from './p-cb0be10a.js';
|
|
9
9
|
import { d as defineCustomElement$6 } from './p-4e624488.js';
|
|
10
|
-
import { d as defineCustomElement$5 } from './p-
|
|
10
|
+
import { d as defineCustomElement$5 } from './p-6b9d18a3.js';
|
|
11
11
|
import { d as defineCustomElement$4 } from './p-3e87d17f.js';
|
|
12
|
-
import { d as defineCustomElement$3 } from './p-
|
|
12
|
+
import { d as defineCustomElement$3 } from './p-7f090deb.js';
|
|
13
13
|
import { d as defineCustomElement$2 } from './p-9c14be4b.js';
|
|
14
14
|
import { d as defineCustomElement$1 } from './p-7b6e9ca3.js';
|
|
15
15
|
|
|
@@ -135,4 +135,4 @@ defineCustomElement();
|
|
|
135
135
|
|
|
136
136
|
export { SmoothlyFormDemoControlled as S, defineCustomElement as d };
|
|
137
137
|
|
|
138
|
-
//# sourceMappingURL=p-
|
|
138
|
+
//# sourceMappingURL=p-0d428888.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-0d428888.js","mappings":"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","names":["isoly.Date","isoly.Currency"],"sources":["src/components/form/demo/controlled/index.tsx"],"sourcesContent":["import { Component, h, Host, State, VNode, Watch } from \"@stencil/core\"\nimport { isoly } from \"isoly\"\nimport { SmoothlyFormCustomEvent } from \"../../../../components\"\nimport { Data } from \"../../../../model\"\n\n@Component({\n\ttag: \"smoothly-form-demo-controlled\",\n\tscoped: true,\n})\nexport class SmoothlyFormDemoControlled {\n\t@State() name = \"Initial name\"\n\t@State() currency: isoly.Currency = \"EUR\"\n\t@State() date: isoly.Date = isoly.Date.now()\n\tprivate currencies: isoly.Currency[] = [\"GBP\", \"SEK\", \"EUR\", \"USD\"]\n\n\t@Watch(\"name\")\n\tnameChanged(current: string, previous: string): void {\n\t\tconsole.log(`updated name from '${previous}' to '${current}'`)\n\t}\n\n\tasync submitHandler(\n\t\tevent: SmoothlyFormCustomEvent<{ result: (result: boolean) => void; value: Data }>\n\t): Promise<void> {\n\t\tevent.stopPropagation()\n\t\tconsole.log(\"Received event. Processing...\", event.detail)\n\t\tif (!(typeof event.detail.value.name == \"string\")) {\n\t\t\tconsole.error(\"Bad input. Resolving false.\")\n\t\t} else if (!(typeof event.detail.value.date == \"string\"))\n\t\t\tconsole.error(\"Bad input. Resolving false.\")\n\t\telse if (!isoly.Currency.is(event.detail.value.currency))\n\t\t\tconsole.error(\"Bad input. Resolving false.\")\n\t\telse {\n\t\t\tawait new Promise(resolve => window.setTimeout(resolve, 1_000))\n\t\t\tthis.name = event.detail.value.name\n\t\t\tthis.date = event.detail.value.date\n\t\t\tthis.currency = event.detail.value.currency\n\t\t\tconsole.log(\"Finished processing successfully. Resolving true.\")\n\t\t\tevent.detail.result(true)\n\t\t}\n\t\tevent.detail.result(false)\n\t}\n\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<h2>Controlled</h2>\n\t\t\t\t<smoothly-form readonly looks={\"grid\"} onSmoothlyFormSubmit={e => this.submitHandler(e)}>\n\t\t\t\t\t<smoothly-input type={\"text\"} name={\"name\"} value={this.name}>\n\t\t\t\t\t\tName\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<smoothly-input-select name={\"currency\"}>\n\t\t\t\t\t\t<span slot={\"label\"}>Currency</span>\n\t\t\t\t\t\t{this.currencies.map(currency => (\n\t\t\t\t\t\t\t<smoothly-item selected={currency == this.currency} value={currency}>\n\t\t\t\t\t\t\t\t{currency}\n\t\t\t\t\t\t\t</smoothly-item>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</smoothly-input-select>\n\t\t\t\t\t<smoothly-input>Dummy</smoothly-input>\n\t\t\t\t\t<smoothly-input-month name={\"date\"} value={this.date} next previous>\n\t\t\t\t\t\t<span slot={\"year-label\"}>Year</span>\n\t\t\t\t\t\t<span slot={\"month-label\"}>Month</span>\n\t\t\t\t\t</smoothly-input-month>\n\t\t\t\t\t<smoothly-input-edit slot={\"edit\"} size={\"icon\"} color={\"primary\"} fill={\"default\"} />\n\t\t\t\t\t<smoothly-input-reset slot={\"reset\"} size={\"icon\"} color={\"warning\"} fill={\"default\"} />\n\t\t\t\t\t<smoothly-input-submit slot={\"submit\"} size={\"icon\"} color={\"success\"} />\n\t\t\t\t</smoothly-form>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"],"version":3}
|