smoothly 0.1.88 → 0.1.89
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-accordion_47.cjs.entry.js +3 -2
- package/dist/cjs/smoothly-input.cjs.entry.js +2 -2
- package/dist/cjs/smoothly-select-demo.cjs.entry.js +1 -0
- package/dist/collection/components/input/index.js +3 -3
- package/dist/collection/components/select-demo/index.js +1 -0
- package/dist/custom-elements/index.js +3 -2
- package/dist/esm/smoothly-accordion_47.entry.js +3 -2
- package/dist/esm/smoothly-input.entry.js +2 -2
- package/dist/esm/smoothly-select-demo.entry.js +1 -0
- package/dist/smoothly/{p-0286085b.entry.js → p-8a51635f.entry.js} +1 -1
- package/dist/smoothly/smoothly-input.entry.js +2 -2
- package/dist/smoothly/smoothly-select-demo.entry.js +1 -0
- package/package.json +1 -1
|
@@ -39792,8 +39792,8 @@ let SmoothlyInput = class {
|
|
|
39792
39792
|
this.value = this.lastValue = this.formatter.fromString(this.formatter.unformat(dist.StateEditor.copy(Object.assign({}, this.state))).value);
|
|
39793
39793
|
}
|
|
39794
39794
|
render() {
|
|
39795
|
-
var _a;
|
|
39796
|
-
return (index.h(index.Host, { class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != "" } }, index.h("input", { name: this.name, type: this.state.type, placeholder: this.placeholder, required: this.required, autocomplete: this.autocomplete ? this.state.autocomplete : "off", disabled: this.disabled, pattern: this.state.pattern && this.state.pattern.source, value: this.state.value, onInput: (e) => this.onInput(e), onFocus: e => this.onFocus(e), onClick: e => this.onClick(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeyDown(e), ref: (el) => (this.inputElement = el), onPaste: e => this.onPaste(e) }), index.h("smoothly-icon", { name: "alert-circle", color: "danger", fill: "clear", size: "small" }), index.h("label", { htmlFor: this.name }, index.h("slot", null))));
|
|
39795
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
39796
|
+
return (index.h(index.Host, { class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" } }, index.h("input", { name: this.name, type: (_c = this.state) === null || _c === void 0 ? void 0 : _c.type, placeholder: this.placeholder, required: this.required, autocomplete: this.autocomplete ? (_d = this.state) === null || _d === void 0 ? void 0 : _d.autocomplete : "off", disabled: this.disabled, pattern: ((_e = this.state) === null || _e === void 0 ? void 0 : _e.pattern) && ((_f = this.state) === null || _f === void 0 ? void 0 : _f.pattern.source), value: (_g = this.state) === null || _g === void 0 ? void 0 : _g.value, onInput: (e) => this.onInput(e), onFocus: e => this.onFocus(e), onClick: e => this.onClick(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeyDown(e), ref: (el) => (this.inputElement = el), onPaste: e => this.onPaste(e) }), index.h("smoothly-icon", { name: "alert-circle", color: "danger", fill: "clear", size: "small" }), index.h("label", { htmlFor: this.name }, index.h("slot", null))));
|
|
39797
39797
|
}
|
|
39798
39798
|
static get watchers() { return {
|
|
39799
39799
|
"value": ["valueWatcher"]
|
|
@@ -40416,6 +40416,7 @@ let SmoothlySelectDemo = class {
|
|
|
40416
40416
|
index.h("smoothly-select", { identifier: "currency" }, this.currencies.map(option => this.currency == option ? (index.h("option", { value: option, selected: true }, option)) : (index.h("option", { value: option }, option)))),
|
|
40417
40417
|
index.h("smoothly-select", { identifier: "language" }, index.h("optgroup", { label: "Nordic" }, index.h("option", { value: "sv" }, "Swedish"), index.h("option", { value: "da", selected: true }, "Danish"), index.h("option", { value: "no" }, "Norwegian")), index.h("optgroup", { label: "Other" }, index.h("option", { value: "en" }, "English"))),
|
|
40418
40418
|
index.h("smoothly-select", { identifier: "quantity", ref: e => (this.quantityElement = e) }, index.h("option", { value: "1" }, "1"), index.h("option", { value: "2" }, "2"), index.h("option", { value: "3" }, "3")),
|
|
40419
|
+
index.h("smoothly-input-date", null, "Date"),
|
|
40419
40420
|
index.h("smoothly-input-date", { value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"),
|
|
40420
40421
|
index.h("smoothly-input-date-range", { start: "2021-10-28", end: "2021-11-27", min: "2021-10-10", max: "2021-12-30" }),
|
|
40421
40422
|
index.h("smoothly-selector", null, index.h("smoothly-item", { value: "1" }, "January"), index.h("smoothly-item", { value: "2" }, "February"), index.h("smoothly-item", { value: "3" }, "March"), index.h("smoothly-item", { value: "4" }, "April"), index.h("smoothly-item", { value: "5" }, "May"), index.h("smoothly-item", { value: "6" }, "June"), index.h("smoothly-item", { value: "7" }, "July"), index.h("smoothly-item", { value: "8" }, "August"), index.h("smoothly-item", { value: "9" }, "September"), index.h("smoothly-item", { value: "10" }, "October"), index.h("smoothly-item", { value: "11" }, "November"), index.h("smoothly-item", { value: "12" }, "December")),
|
|
@@ -159,8 +159,8 @@ let SmoothlyInput = class {
|
|
|
159
159
|
this.value = this.lastValue = this.formatter.fromString(this.formatter.unformat(index$1.dist.StateEditor.copy(Object.assign({}, this.state))).value);
|
|
160
160
|
}
|
|
161
161
|
render() {
|
|
162
|
-
var _a;
|
|
163
|
-
return (index.h(index.Host, { class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != "" } }, index.h("input", { name: this.name, type: this.state.type, placeholder: this.placeholder, required: this.required, autocomplete: this.autocomplete ? this.state.autocomplete : "off", disabled: this.disabled, pattern: this.state.pattern && this.state.pattern.source, value: this.state.value, onInput: (e) => this.onInput(e), onFocus: e => this.onFocus(e), onClick: e => this.onClick(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeyDown(e), ref: (el) => (this.inputElement = el), onPaste: e => this.onPaste(e) }), index.h("smoothly-icon", { name: "alert-circle", color: "danger", fill: "clear", size: "small" }), index.h("label", { htmlFor: this.name }, index.h("slot", null))));
|
|
162
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
163
|
+
return (index.h(index.Host, { class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" } }, index.h("input", { name: this.name, type: (_c = this.state) === null || _c === void 0 ? void 0 : _c.type, placeholder: this.placeholder, required: this.required, autocomplete: this.autocomplete ? (_d = this.state) === null || _d === void 0 ? void 0 : _d.autocomplete : "off", disabled: this.disabled, pattern: ((_e = this.state) === null || _e === void 0 ? void 0 : _e.pattern) && ((_f = this.state) === null || _f === void 0 ? void 0 : _f.pattern.source), value: (_g = this.state) === null || _g === void 0 ? void 0 : _g.value, onInput: (e) => this.onInput(e), onFocus: e => this.onFocus(e), onClick: e => this.onClick(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeyDown(e), ref: (el) => (this.inputElement = el), onPaste: e => this.onPaste(e) }), index.h("smoothly-icon", { name: "alert-circle", color: "danger", fill: "clear", size: "small" }), index.h("label", { htmlFor: this.name }, index.h("slot", null))));
|
|
164
164
|
}
|
|
165
165
|
static get watchers() { return {
|
|
166
166
|
"value": ["valueWatcher"]
|
|
@@ -25,6 +25,7 @@ let SmoothlySelectDemo = class {
|
|
|
25
25
|
index.h("smoothly-select", { identifier: "currency" }, this.currencies.map(option => this.currency == option ? (index.h("option", { value: option, selected: true }, option)) : (index.h("option", { value: option }, option)))),
|
|
26
26
|
index.h("smoothly-select", { identifier: "language" }, index.h("optgroup", { label: "Nordic" }, index.h("option", { value: "sv" }, "Swedish"), index.h("option", { value: "da", selected: true }, "Danish"), index.h("option", { value: "no" }, "Norwegian")), index.h("optgroup", { label: "Other" }, index.h("option", { value: "en" }, "English"))),
|
|
27
27
|
index.h("smoothly-select", { identifier: "quantity", ref: e => (this.quantityElement = e) }, index.h("option", { value: "1" }, "1"), index.h("option", { value: "2" }, "2"), index.h("option", { value: "3" }, "3")),
|
|
28
|
+
index.h("smoothly-input-date", null, "Date"),
|
|
28
29
|
index.h("smoothly-input-date", { value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"),
|
|
29
30
|
index.h("smoothly-input-date-range", { start: "2021-10-28", end: "2021-11-27", min: "2021-10-10", max: "2021-12-30" }),
|
|
30
31
|
index.h("smoothly-selector", null, index.h("smoothly-item", { value: "1" }, "January"), index.h("smoothly-item", { value: "2" }, "February"), index.h("smoothly-item", { value: "3" }, "March"), index.h("smoothly-item", { value: "4" }, "April"), index.h("smoothly-item", { value: "5" }, "May"), index.h("smoothly-item", { value: "6" }, "June"), index.h("smoothly-item", { value: "7" }, "July"), index.h("smoothly-item", { value: "8" }, "August"), index.h("smoothly-item", { value: "9" }, "September"), index.h("smoothly-item", { value: "10" }, "October"), index.h("smoothly-item", { value: "11" }, "November"), index.h("smoothly-item", { value: "12" }, "December")),
|
|
@@ -149,9 +149,9 @@ export class SmoothlyInput {
|
|
|
149
149
|
this.value = this.lastValue = this.formatter.fromString(this.formatter.unformat(StateEditor.copy(Object.assign({}, this.state))).value);
|
|
150
150
|
}
|
|
151
151
|
render() {
|
|
152
|
-
var _a;
|
|
153
|
-
return (h(Host, { class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != "" } },
|
|
154
|
-
h("input", { name: this.name, type: this.state.type, placeholder: this.placeholder, required: this.required, autocomplete: this.autocomplete ? this.state.autocomplete : "off", disabled: this.disabled, pattern: this.state.pattern && this.state.pattern.source, value: this.state.value, onInput: (e) => this.onInput(e), onFocus: e => this.onFocus(e), onClick: e => this.onClick(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeyDown(e), ref: (el) => (this.inputElement = el), onPaste: e => this.onPaste(e) }),
|
|
152
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
153
|
+
return (h(Host, { class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" } },
|
|
154
|
+
h("input", { name: this.name, type: (_c = this.state) === null || _c === void 0 ? void 0 : _c.type, placeholder: this.placeholder, required: this.required, autocomplete: this.autocomplete ? (_d = this.state) === null || _d === void 0 ? void 0 : _d.autocomplete : "off", disabled: this.disabled, pattern: ((_e = this.state) === null || _e === void 0 ? void 0 : _e.pattern) && ((_f = this.state) === null || _f === void 0 ? void 0 : _f.pattern.source), value: (_g = this.state) === null || _g === void 0 ? void 0 : _g.value, onInput: (e) => this.onInput(e), onFocus: e => this.onFocus(e), onClick: e => this.onClick(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeyDown(e), ref: (el) => (this.inputElement = el), onPaste: e => this.onPaste(e) }),
|
|
155
155
|
h("smoothly-icon", { name: "alert-circle", color: "danger", fill: "clear", size: "small" }),
|
|
156
156
|
h("label", { htmlFor: this.name },
|
|
157
157
|
h("slot", null))));
|
|
@@ -26,6 +26,7 @@ export class SmoothlySelectDemo {
|
|
|
26
26
|
h("option", { value: "1" }, "1"),
|
|
27
27
|
h("option", { value: "2" }, "2"),
|
|
28
28
|
h("option", { value: "3" }, "3")),
|
|
29
|
+
h("smoothly-input-date", null, "Date"),
|
|
29
30
|
h("smoothly-input-date", { value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"),
|
|
30
31
|
h("smoothly-input-date-range", { start: "2021-10-28", end: "2021-11-27", min: "2021-10-10", max: "2021-12-30" }),
|
|
31
32
|
h("smoothly-selector", null,
|
|
@@ -42731,8 +42731,8 @@ let SmoothlyInput$1 = class extends HTMLElement {
|
|
|
42731
42731
|
this.value = this.lastValue = this.formatter.fromString(this.formatter.unformat(dist.StateEditor.copy(Object.assign({}, this.state))).value);
|
|
42732
42732
|
}
|
|
42733
42733
|
render() {
|
|
42734
|
-
var _a;
|
|
42735
|
-
return (h(Host, { class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != "" } }, h("input", { name: this.name, type: this.state.type, placeholder: this.placeholder, required: this.required, autocomplete: this.autocomplete ? this.state.autocomplete : "off", disabled: this.disabled, pattern: this.state.pattern && this.state.pattern.source, value: this.state.value, onInput: (e) => this.onInput(e), onFocus: e => this.onFocus(e), onClick: e => this.onClick(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeyDown(e), ref: (el) => (this.inputElement = el), onPaste: e => this.onPaste(e) }), h("smoothly-icon", { name: "alert-circle", color: "danger", fill: "clear", size: "small" }), h("label", { htmlFor: this.name }, h("slot", null))));
|
|
42734
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
42735
|
+
return (h(Host, { class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" } }, h("input", { name: this.name, type: (_c = this.state) === null || _c === void 0 ? void 0 : _c.type, placeholder: this.placeholder, required: this.required, autocomplete: this.autocomplete ? (_d = this.state) === null || _d === void 0 ? void 0 : _d.autocomplete : "off", disabled: this.disabled, pattern: ((_e = this.state) === null || _e === void 0 ? void 0 : _e.pattern) && ((_f = this.state) === null || _f === void 0 ? void 0 : _f.pattern.source), value: (_g = this.state) === null || _g === void 0 ? void 0 : _g.value, onInput: (e) => this.onInput(e), onFocus: e => this.onFocus(e), onClick: e => this.onClick(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeyDown(e), ref: (el) => (this.inputElement = el), onPaste: e => this.onPaste(e) }), h("smoothly-icon", { name: "alert-circle", color: "danger", fill: "clear", size: "small" }), h("label", { htmlFor: this.name }, h("slot", null))));
|
|
42736
42736
|
}
|
|
42737
42737
|
static get watchers() { return {
|
|
42738
42738
|
"value": ["valueWatcher"]
|
|
@@ -43485,6 +43485,7 @@ let SmoothlySelectDemo$1 = class extends HTMLElement {
|
|
|
43485
43485
|
h("smoothly-select", { identifier: "currency" }, this.currencies.map(option => this.currency == option ? (h("option", { value: option, selected: true }, option)) : (h("option", { value: option }, option)))),
|
|
43486
43486
|
h("smoothly-select", { identifier: "language" }, h("optgroup", { label: "Nordic" }, h("option", { value: "sv" }, "Swedish"), h("option", { value: "da", selected: true }, "Danish"), h("option", { value: "no" }, "Norwegian")), h("optgroup", { label: "Other" }, h("option", { value: "en" }, "English"))),
|
|
43487
43487
|
h("smoothly-select", { identifier: "quantity", ref: e => (this.quantityElement = e) }, h("option", { value: "1" }, "1"), h("option", { value: "2" }, "2"), h("option", { value: "3" }, "3")),
|
|
43488
|
+
h("smoothly-input-date", null, "Date"),
|
|
43488
43489
|
h("smoothly-input-date", { value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"),
|
|
43489
43490
|
h("smoothly-input-date-range", { start: "2021-10-28", end: "2021-11-27", min: "2021-10-10", max: "2021-12-30" }),
|
|
43490
43491
|
h("smoothly-selector", null, h("smoothly-item", { value: "1" }, "January"), h("smoothly-item", { value: "2" }, "February"), h("smoothly-item", { value: "3" }, "March"), h("smoothly-item", { value: "4" }, "April"), h("smoothly-item", { value: "5" }, "May"), h("smoothly-item", { value: "6" }, "June"), h("smoothly-item", { value: "7" }, "July"), h("smoothly-item", { value: "8" }, "August"), h("smoothly-item", { value: "9" }, "September"), h("smoothly-item", { value: "10" }, "October"), h("smoothly-item", { value: "11" }, "November"), h("smoothly-item", { value: "12" }, "December")),
|
|
@@ -39788,8 +39788,8 @@ let SmoothlyInput = class {
|
|
|
39788
39788
|
this.value = this.lastValue = this.formatter.fromString(this.formatter.unformat(dist.StateEditor.copy(Object.assign({}, this.state))).value);
|
|
39789
39789
|
}
|
|
39790
39790
|
render() {
|
|
39791
|
-
var _a;
|
|
39792
|
-
return (h(Host, { class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != "" } }, h("input", { name: this.name, type: this.state.type, placeholder: this.placeholder, required: this.required, autocomplete: this.autocomplete ? this.state.autocomplete : "off", disabled: this.disabled, pattern: this.state.pattern && this.state.pattern.source, value: this.state.value, onInput: (e) => this.onInput(e), onFocus: e => this.onFocus(e), onClick: e => this.onClick(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeyDown(e), ref: (el) => (this.inputElement = el), onPaste: e => this.onPaste(e) }), h("smoothly-icon", { name: "alert-circle", color: "danger", fill: "clear", size: "small" }), h("label", { htmlFor: this.name }, h("slot", null))));
|
|
39791
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
39792
|
+
return (h(Host, { class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" } }, h("input", { name: this.name, type: (_c = this.state) === null || _c === void 0 ? void 0 : _c.type, placeholder: this.placeholder, required: this.required, autocomplete: this.autocomplete ? (_d = this.state) === null || _d === void 0 ? void 0 : _d.autocomplete : "off", disabled: this.disabled, pattern: ((_e = this.state) === null || _e === void 0 ? void 0 : _e.pattern) && ((_f = this.state) === null || _f === void 0 ? void 0 : _f.pattern.source), value: (_g = this.state) === null || _g === void 0 ? void 0 : _g.value, onInput: (e) => this.onInput(e), onFocus: e => this.onFocus(e), onClick: e => this.onClick(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeyDown(e), ref: (el) => (this.inputElement = el), onPaste: e => this.onPaste(e) }), h("smoothly-icon", { name: "alert-circle", color: "danger", fill: "clear", size: "small" }), h("label", { htmlFor: this.name }, h("slot", null))));
|
|
39793
39793
|
}
|
|
39794
39794
|
static get watchers() { return {
|
|
39795
39795
|
"value": ["valueWatcher"]
|
|
@@ -40412,6 +40412,7 @@ let SmoothlySelectDemo = class {
|
|
|
40412
40412
|
h("smoothly-select", { identifier: "currency" }, this.currencies.map(option => this.currency == option ? (h("option", { value: option, selected: true }, option)) : (h("option", { value: option }, option)))),
|
|
40413
40413
|
h("smoothly-select", { identifier: "language" }, h("optgroup", { label: "Nordic" }, h("option", { value: "sv" }, "Swedish"), h("option", { value: "da", selected: true }, "Danish"), h("option", { value: "no" }, "Norwegian")), h("optgroup", { label: "Other" }, h("option", { value: "en" }, "English"))),
|
|
40414
40414
|
h("smoothly-select", { identifier: "quantity", ref: e => (this.quantityElement = e) }, h("option", { value: "1" }, "1"), h("option", { value: "2" }, "2"), h("option", { value: "3" }, "3")),
|
|
40415
|
+
h("smoothly-input-date", null, "Date"),
|
|
40415
40416
|
h("smoothly-input-date", { value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"),
|
|
40416
40417
|
h("smoothly-input-date-range", { start: "2021-10-28", end: "2021-11-27", min: "2021-10-10", max: "2021-12-30" }),
|
|
40417
40418
|
h("smoothly-selector", null, h("smoothly-item", { value: "1" }, "January"), h("smoothly-item", { value: "2" }, "February"), h("smoothly-item", { value: "3" }, "March"), h("smoothly-item", { value: "4" }, "April"), h("smoothly-item", { value: "5" }, "May"), h("smoothly-item", { value: "6" }, "June"), h("smoothly-item", { value: "7" }, "July"), h("smoothly-item", { value: "8" }, "August"), h("smoothly-item", { value: "9" }, "September"), h("smoothly-item", { value: "10" }, "October"), h("smoothly-item", { value: "11" }, "November"), h("smoothly-item", { value: "12" }, "December")),
|
|
@@ -155,8 +155,8 @@ let SmoothlyInput = class {
|
|
|
155
155
|
this.value = this.lastValue = this.formatter.fromString(this.formatter.unformat(dist.StateEditor.copy(Object.assign({}, this.state))).value);
|
|
156
156
|
}
|
|
157
157
|
render() {
|
|
158
|
-
var _a;
|
|
159
|
-
return (h(Host, { class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != "" } }, h("input", { name: this.name, type: this.state.type, placeholder: this.placeholder, required: this.required, autocomplete: this.autocomplete ? this.state.autocomplete : "off", disabled: this.disabled, pattern: this.state.pattern && this.state.pattern.source, value: this.state.value, onInput: (e) => this.onInput(e), onFocus: e => this.onFocus(e), onClick: e => this.onClick(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeyDown(e), ref: (el) => (this.inputElement = el), onPaste: e => this.onPaste(e) }), h("smoothly-icon", { name: "alert-circle", color: "danger", fill: "clear", size: "small" }), h("label", { htmlFor: this.name }, h("slot", null))));
|
|
158
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
159
|
+
return (h(Host, { class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" } }, h("input", { name: this.name, type: (_c = this.state) === null || _c === void 0 ? void 0 : _c.type, placeholder: this.placeholder, required: this.required, autocomplete: this.autocomplete ? (_d = this.state) === null || _d === void 0 ? void 0 : _d.autocomplete : "off", disabled: this.disabled, pattern: ((_e = this.state) === null || _e === void 0 ? void 0 : _e.pattern) && ((_f = this.state) === null || _f === void 0 ? void 0 : _f.pattern.source), value: (_g = this.state) === null || _g === void 0 ? void 0 : _g.value, onInput: (e) => this.onInput(e), onFocus: e => this.onFocus(e), onClick: e => this.onClick(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeyDown(e), ref: (el) => (this.inputElement = el), onPaste: e => this.onPaste(e) }), h("smoothly-icon", { name: "alert-circle", color: "danger", fill: "clear", size: "small" }), h("label", { htmlFor: this.name }, h("slot", null))));
|
|
160
160
|
}
|
|
161
161
|
static get watchers() { return {
|
|
162
162
|
"value": ["valueWatcher"]
|
|
@@ -21,6 +21,7 @@ let SmoothlySelectDemo = class {
|
|
|
21
21
|
h("smoothly-select", { identifier: "currency" }, this.currencies.map(option => this.currency == option ? (h("option", { value: option, selected: true }, option)) : (h("option", { value: option }, option)))),
|
|
22
22
|
h("smoothly-select", { identifier: "language" }, h("optgroup", { label: "Nordic" }, h("option", { value: "sv" }, "Swedish"), h("option", { value: "da", selected: true }, "Danish"), h("option", { value: "no" }, "Norwegian")), h("optgroup", { label: "Other" }, h("option", { value: "en" }, "English"))),
|
|
23
23
|
h("smoothly-select", { identifier: "quantity", ref: e => (this.quantityElement = e) }, h("option", { value: "1" }, "1"), h("option", { value: "2" }, "2"), h("option", { value: "3" }, "3")),
|
|
24
|
+
h("smoothly-input-date", null, "Date"),
|
|
24
25
|
h("smoothly-input-date", { value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"),
|
|
25
26
|
h("smoothly-input-date-range", { start: "2021-10-28", end: "2021-11-27", min: "2021-10-10", max: "2021-12-30" }),
|
|
26
27
|
h("smoothly-selector", null, h("smoothly-item", { value: "1" }, "January"), h("smoothly-item", { value: "2" }, "February"), h("smoothly-item", { value: "3" }, "March"), h("smoothly-item", { value: "4" }, "April"), h("smoothly-item", { value: "5" }, "May"), h("smoothly-item", { value: "6" }, "June"), h("smoothly-item", { value: "7" }, "July"), h("smoothly-item", { value: "8" }, "August"), h("smoothly-item", { value: "9" }, "September"), h("smoothly-item", { value: "10" }, "October"), h("smoothly-item", { value: "11" }, "November"), h("smoothly-item", { value: "12" }, "December")),
|