smoothly 0.1.100 → 0.1.101
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_48.cjs.entry.js +2 -2
- package/dist/cjs/smoothly-input.cjs.entry.js +2 -2
- package/dist/collection/components/input/index.js +2 -2
- package/dist/collection/components/input/style.css +19 -27
- package/dist/custom-elements/index.js +2 -2
- package/dist/esm/smoothly-accordion_48.entry.js +2 -2
- package/dist/esm/smoothly-input.entry.js +2 -2
- package/dist/smoothly/{p-a8cd3a7b.entry.js → p-1f7da568.entry.js} +1 -1
- package/dist/smoothly/smoothly-input.entry.js +2 -2
- package/package.json +1 -1
|
@@ -39675,7 +39675,7 @@ let SmoothlyIconDemo = class {
|
|
|
39675
39675
|
};
|
|
39676
39676
|
SmoothlyIconDemo.style = styleCss$s;
|
|
39677
39677
|
|
|
39678
|
-
const styleCss$r = ".sc-smoothly-input-h{display:block;position:relative;font-weight:var(--smoothly-font-weight);padding:var(--padding)}[hidden].sc-smoothly-input-h{display:none}label.sc-smoothly-input{position:absolute;left:0.4em;top:0.6em;color:rgb(var(--smoothly-
|
|
39678
|
+
const styleCss$r = ".sc-smoothly-input-h{display:block;position:relative;font-weight:var(--smoothly-font-weight);padding:var(--padding);overflow:hidden;background-color:rgb(var(--background-color));color:rgb(var(--text-color, var(--smoothly-default-contrast)))}[hidden].sc-smoothly-input-h{display:none}.sc-smoothly-input-h>div.sc-smoothly-input{position:relative;width:100%;height:100%}label.sc-smoothly-input{position:absolute;left:0.4em;top:0.6em;color:rgb(var(--text-color, var(--smoothly-default-contrast)));opacity:0.8;user-select:none;cursor:inherit;transition:font-size 0.1s;transition-timing-function:ease}.sc-smoothly-input-h:not([show-label]) label.sc-smoothly-input{display:none}.sc-smoothly-input-h:not([show-label]) input.sc-smoothly-input{padding:0.6em 0.2em 0.6em 0.2em}input.sc-smoothly-input{padding:1em 0.2em 0.2em 0.2em;box-sizing:border-box;width:100%;height:100%;background:none;border:0;z-index:1;position:relative;font-size:1rem;font-family:var(--smoothly-font-family);background-color:rgb(var(--background-color))}smoothly-icon.sc-smoothly-input{display:none;position:absolute;right:0.2em;top:0.6em}input.sc-smoothly-input:invalid+label.sc-smoothly-input+smoothly-icon.sc-smoothly-input{display:block}.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input{z-index:1;pointer-events:none}.has-value.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input{top:0.4em;font-size:60%}.sc-smoothly-input-h:focus-within>div.sc-smoothly-input>label.sc-smoothly-input{top:0.4em;font-size:60%}input.sc-smoothly-input:focus{outline:none}input.sc-smoothly-input:-webkit-autofill,input.sc-smoothly-input:-webkit-autofill:hover,input.sc-smoothly-input:-webkit-autofill:focus,input.sc-smoothly-input:-webkit-autofill:active{box-shadow:0 0 0 40em rgb(var(--background-color)) inset;-webkit-box-shadow:0 0 0 40em rgb(var(--background-color)) inset}input.sc-smoothly-input:-webkit-autofill,input.sc-smoothly-input:-webkit-autofill+label.sc-smoothly-input{-webkit-text-fill-color:rgb(var(--text-color, var(--smoothly-default-contrast)))}";
|
|
39679
39679
|
|
|
39680
39680
|
let SmoothlyInput = class {
|
|
39681
39681
|
constructor(hostRef) {
|
|
@@ -39854,7 +39854,7 @@ let SmoothlyInput = class {
|
|
|
39854
39854
|
}
|
|
39855
39855
|
render() {
|
|
39856
39856
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
39857
|
-
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) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, index.h("div", null, 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" })
|
|
39857
|
+
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) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, index.h("div", null, 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("label", { htmlFor: this.name }, index.h("slot", null)), index.h("smoothly-icon", { name: "alert-circle", color: "danger", fill: "clear", size: "small" }))));
|
|
39858
39858
|
}
|
|
39859
39859
|
static get watchers() { return {
|
|
39860
39860
|
"value": ["valueWatcher"],
|
|
@@ -7,7 +7,7 @@ const index$2 = require('./index-ac32385c.js');
|
|
|
7
7
|
const index$1 = require('./index-d66869d7.js');
|
|
8
8
|
require('./_commonjsHelpers-10109b76.js');
|
|
9
9
|
|
|
10
|
-
const styleCss = ".sc-smoothly-input-h{display:block;position:relative;font-weight:var(--smoothly-font-weight);padding:var(--padding)}[hidden].sc-smoothly-input-h{display:none}label.sc-smoothly-input{position:absolute;left:0.4em;top:0.6em;color:rgb(var(--smoothly-
|
|
10
|
+
const styleCss = ".sc-smoothly-input-h{display:block;position:relative;font-weight:var(--smoothly-font-weight);padding:var(--padding);overflow:hidden;background-color:rgb(var(--background-color));color:rgb(var(--text-color, var(--smoothly-default-contrast)))}[hidden].sc-smoothly-input-h{display:none}.sc-smoothly-input-h>div.sc-smoothly-input{position:relative;width:100%;height:100%}label.sc-smoothly-input{position:absolute;left:0.4em;top:0.6em;color:rgb(var(--text-color, var(--smoothly-default-contrast)));opacity:0.8;user-select:none;cursor:inherit;transition:font-size 0.1s;transition-timing-function:ease}.sc-smoothly-input-h:not([show-label]) label.sc-smoothly-input{display:none}.sc-smoothly-input-h:not([show-label]) input.sc-smoothly-input{padding:0.6em 0.2em 0.6em 0.2em}input.sc-smoothly-input{padding:1em 0.2em 0.2em 0.2em;box-sizing:border-box;width:100%;height:100%;background:none;border:0;z-index:1;position:relative;font-size:1rem;font-family:var(--smoothly-font-family);background-color:rgb(var(--background-color))}smoothly-icon.sc-smoothly-input{display:none;position:absolute;right:0.2em;top:0.6em}input.sc-smoothly-input:invalid+label.sc-smoothly-input+smoothly-icon.sc-smoothly-input{display:block}.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input{z-index:1;pointer-events:none}.has-value.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input{top:0.4em;font-size:60%}.sc-smoothly-input-h:focus-within>div.sc-smoothly-input>label.sc-smoothly-input{top:0.4em;font-size:60%}input.sc-smoothly-input:focus{outline:none}input.sc-smoothly-input:-webkit-autofill,input.sc-smoothly-input:-webkit-autofill:hover,input.sc-smoothly-input:-webkit-autofill:focus,input.sc-smoothly-input:-webkit-autofill:active{box-shadow:0 0 0 40em rgb(var(--background-color)) inset;-webkit-box-shadow:0 0 0 40em rgb(var(--background-color)) inset}input.sc-smoothly-input:-webkit-autofill,input.sc-smoothly-input:-webkit-autofill+label.sc-smoothly-input{-webkit-text-fill-color:rgb(var(--text-color, var(--smoothly-default-contrast)))}";
|
|
11
11
|
|
|
12
12
|
let SmoothlyInput = class {
|
|
13
13
|
constructor(hostRef) {
|
|
@@ -186,7 +186,7 @@ let SmoothlyInput = class {
|
|
|
186
186
|
}
|
|
187
187
|
render() {
|
|
188
188
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
189
|
-
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) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, index.h("div", null, 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" })
|
|
189
|
+
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) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, index.h("div", null, 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("label", { htmlFor: this.name }, index.h("slot", null)), index.h("smoothly-icon", { name: "alert-circle", color: "danger", fill: "clear", size: "small" }))));
|
|
190
190
|
}
|
|
191
191
|
static get watchers() { return {
|
|
192
192
|
"value": ["valueWatcher"],
|
|
@@ -179,9 +179,9 @@ export class SmoothlyInput {
|
|
|
179
179
|
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) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } },
|
|
180
180
|
h("div", null,
|
|
181
181
|
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) }),
|
|
182
|
-
h("smoothly-icon", { name: "alert-circle", color: "danger", fill: "clear", size: "small" }),
|
|
183
182
|
h("label", { htmlFor: this.name },
|
|
184
|
-
h("slot", null))
|
|
183
|
+
h("slot", null)),
|
|
184
|
+
h("smoothly-icon", { name: "alert-circle", color: "danger", fill: "clear", size: "small" }))));
|
|
185
185
|
}
|
|
186
186
|
static get is() { return "smoothly-input"; }
|
|
187
187
|
static get encapsulation() { return "scoped"; }
|
|
@@ -3,15 +3,23 @@
|
|
|
3
3
|
position: relative;
|
|
4
4
|
font-weight: var(--smoothly-font-weight);
|
|
5
5
|
padding: var(--padding);
|
|
6
|
+
overflow: hidden;
|
|
7
|
+
background-color: rgb(var(--background-color));
|
|
8
|
+
color: rgb(var(--text-color, var(--smoothly-default-contrast)));
|
|
6
9
|
}
|
|
7
10
|
:host[hidden] {
|
|
8
11
|
display: none;
|
|
9
12
|
}
|
|
13
|
+
:host > div {
|
|
14
|
+
position: relative;
|
|
15
|
+
width: 100%;
|
|
16
|
+
height: 100%;
|
|
17
|
+
}
|
|
10
18
|
label {
|
|
11
19
|
position: absolute;
|
|
12
20
|
left: 0.4em;
|
|
13
21
|
top: 0.6em;
|
|
14
|
-
color: rgb(var(--smoothly-
|
|
22
|
+
color: rgb(var(--text-color, var(--smoothly-default-contrast)));
|
|
15
23
|
opacity: 0.8;
|
|
16
24
|
user-select: none;
|
|
17
25
|
cursor: inherit;
|
|
@@ -26,13 +34,16 @@ label {
|
|
|
26
34
|
}
|
|
27
35
|
input {
|
|
28
36
|
padding: 1em 0.2em 0.2em 0.2em;
|
|
29
|
-
|
|
37
|
+
box-sizing: border-box;
|
|
38
|
+
width: 100%;
|
|
39
|
+
height: 100%;
|
|
30
40
|
background: none;
|
|
31
41
|
border: 0;
|
|
32
42
|
z-index: 1;
|
|
33
43
|
position: relative;
|
|
34
44
|
font-size: 1rem;
|
|
35
45
|
font-family: var(--smoothly-font-family);
|
|
46
|
+
background-color: rgb(var(--background-color));
|
|
36
47
|
}
|
|
37
48
|
smoothly-icon {
|
|
38
49
|
display: none;
|
|
@@ -40,12 +51,9 @@ smoothly-icon {
|
|
|
40
51
|
right: 0.2em;
|
|
41
52
|
top: 0.6em;
|
|
42
53
|
}
|
|
43
|
-
input:invalid + smoothly-icon {
|
|
54
|
+
input:invalid + label + smoothly-icon {
|
|
44
55
|
display: block;
|
|
45
56
|
}
|
|
46
|
-
:host > div {
|
|
47
|
-
position: relative;
|
|
48
|
-
}
|
|
49
57
|
:host > div > label {
|
|
50
58
|
z-index: 1;
|
|
51
59
|
pointer-events: none;
|
|
@@ -61,30 +69,14 @@ input:invalid + smoothly-icon {
|
|
|
61
69
|
input:focus {
|
|
62
70
|
outline: none;
|
|
63
71
|
}
|
|
64
|
-
/* Change the white to any color ;) */
|
|
65
72
|
input:-webkit-autofill,
|
|
66
73
|
input:-webkit-autofill:hover,
|
|
67
74
|
input:-webkit-autofill:focus,
|
|
68
75
|
input:-webkit-autofill:active {
|
|
69
|
-
|
|
70
|
-
box-shadow: 0 0 0
|
|
71
|
-
/* stylelint-disable-next-line declaration-no-important */
|
|
72
|
-
-webkit-box-shadow: 0 0 0 30px unset inset !important;
|
|
76
|
+
box-shadow: 0 0 0 40em rgb(var(--background-color)) inset;
|
|
77
|
+
-webkit-box-shadow: 0 0 0 40em rgb(var(--background-color)) inset;
|
|
73
78
|
}
|
|
74
|
-
input:-webkit-autofill
|
|
75
|
-
|
|
76
|
-
-webkit-text-fill-color:
|
|
77
|
-
}
|
|
78
|
-
input:-internal-autofill-previewed,
|
|
79
|
-
input:-internal-autofill-selected,
|
|
80
|
-
textarea:-internal-autofill-previewed,
|
|
81
|
-
textarea:-internal-autofill-selected,
|
|
82
|
-
select:-internal-autofill-previewed,
|
|
83
|
-
select:-internal-autofill-selected {
|
|
84
|
-
/* stylelint-disable-next-line declaration-no-important */
|
|
85
|
-
background-color: none !important;
|
|
86
|
-
/* stylelint-disable-next-line declaration-no-important */
|
|
87
|
-
background-image: none !important;
|
|
88
|
-
/* stylelint-disable-next-line declaration-no-important */
|
|
89
|
-
color: unset !important;
|
|
79
|
+
input:-webkit-autofill,
|
|
80
|
+
input:-webkit-autofill + label {
|
|
81
|
+
-webkit-text-fill-color: rgb(var(--text-color, var(--smoothly-default-contrast)));
|
|
90
82
|
}
|
|
@@ -42643,7 +42643,7 @@ let SmoothlyIconDemo$1 = class extends HTMLElement {
|
|
|
42643
42643
|
static get style() { return styleCss$w; }
|
|
42644
42644
|
};
|
|
42645
42645
|
|
|
42646
|
-
const styleCss$v = ".sc-smoothly-input-h{display:block;position:relative;font-weight:var(--smoothly-font-weight);padding:var(--padding)}[hidden].sc-smoothly-input-h{display:none}label.sc-smoothly-input{position:absolute;left:0.4em;top:0.6em;color:rgb(var(--smoothly-
|
|
42646
|
+
const styleCss$v = ".sc-smoothly-input-h{display:block;position:relative;font-weight:var(--smoothly-font-weight);padding:var(--padding);overflow:hidden;background-color:rgb(var(--background-color));color:rgb(var(--text-color, var(--smoothly-default-contrast)))}[hidden].sc-smoothly-input-h{display:none}.sc-smoothly-input-h>div.sc-smoothly-input{position:relative;width:100%;height:100%}label.sc-smoothly-input{position:absolute;left:0.4em;top:0.6em;color:rgb(var(--text-color, var(--smoothly-default-contrast)));opacity:0.8;user-select:none;cursor:inherit;transition:font-size 0.1s;transition-timing-function:ease}.sc-smoothly-input-h:not([show-label]) label.sc-smoothly-input{display:none}.sc-smoothly-input-h:not([show-label]) input.sc-smoothly-input{padding:0.6em 0.2em 0.6em 0.2em}input.sc-smoothly-input{padding:1em 0.2em 0.2em 0.2em;box-sizing:border-box;width:100%;height:100%;background:none;border:0;z-index:1;position:relative;font-size:1rem;font-family:var(--smoothly-font-family);background-color:rgb(var(--background-color))}smoothly-icon.sc-smoothly-input{display:none;position:absolute;right:0.2em;top:0.6em}input.sc-smoothly-input:invalid+label.sc-smoothly-input+smoothly-icon.sc-smoothly-input{display:block}.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input{z-index:1;pointer-events:none}.has-value.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input{top:0.4em;font-size:60%}.sc-smoothly-input-h:focus-within>div.sc-smoothly-input>label.sc-smoothly-input{top:0.4em;font-size:60%}input.sc-smoothly-input:focus{outline:none}input.sc-smoothly-input:-webkit-autofill,input.sc-smoothly-input:-webkit-autofill:hover,input.sc-smoothly-input:-webkit-autofill:focus,input.sc-smoothly-input:-webkit-autofill:active{box-shadow:0 0 0 40em rgb(var(--background-color)) inset;-webkit-box-shadow:0 0 0 40em rgb(var(--background-color)) inset}input.sc-smoothly-input:-webkit-autofill,input.sc-smoothly-input:-webkit-autofill+label.sc-smoothly-input{-webkit-text-fill-color:rgb(var(--text-color, var(--smoothly-default-contrast)))}";
|
|
42647
42647
|
|
|
42648
42648
|
let SmoothlyInput$1 = class extends HTMLElement {
|
|
42649
42649
|
constructor() {
|
|
@@ -42823,7 +42823,7 @@ let SmoothlyInput$1 = class extends HTMLElement {
|
|
|
42823
42823
|
}
|
|
42824
42824
|
render() {
|
|
42825
42825
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
42826
|
-
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) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, h("div", null, 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" })
|
|
42826
|
+
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) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, h("div", null, 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("label", { htmlFor: this.name }, h("slot", null)), h("smoothly-icon", { name: "alert-circle", color: "danger", fill: "clear", size: "small" }))));
|
|
42827
42827
|
}
|
|
42828
42828
|
static get watchers() { return {
|
|
42829
42829
|
"value": ["valueWatcher"],
|
|
@@ -39671,7 +39671,7 @@ let SmoothlyIconDemo = class {
|
|
|
39671
39671
|
};
|
|
39672
39672
|
SmoothlyIconDemo.style = styleCss$s;
|
|
39673
39673
|
|
|
39674
|
-
const styleCss$r = ".sc-smoothly-input-h{display:block;position:relative;font-weight:var(--smoothly-font-weight);padding:var(--padding)}[hidden].sc-smoothly-input-h{display:none}label.sc-smoothly-input{position:absolute;left:0.4em;top:0.6em;color:rgb(var(--smoothly-
|
|
39674
|
+
const styleCss$r = ".sc-smoothly-input-h{display:block;position:relative;font-weight:var(--smoothly-font-weight);padding:var(--padding);overflow:hidden;background-color:rgb(var(--background-color));color:rgb(var(--text-color, var(--smoothly-default-contrast)))}[hidden].sc-smoothly-input-h{display:none}.sc-smoothly-input-h>div.sc-smoothly-input{position:relative;width:100%;height:100%}label.sc-smoothly-input{position:absolute;left:0.4em;top:0.6em;color:rgb(var(--text-color, var(--smoothly-default-contrast)));opacity:0.8;user-select:none;cursor:inherit;transition:font-size 0.1s;transition-timing-function:ease}.sc-smoothly-input-h:not([show-label]) label.sc-smoothly-input{display:none}.sc-smoothly-input-h:not([show-label]) input.sc-smoothly-input{padding:0.6em 0.2em 0.6em 0.2em}input.sc-smoothly-input{padding:1em 0.2em 0.2em 0.2em;box-sizing:border-box;width:100%;height:100%;background:none;border:0;z-index:1;position:relative;font-size:1rem;font-family:var(--smoothly-font-family);background-color:rgb(var(--background-color))}smoothly-icon.sc-smoothly-input{display:none;position:absolute;right:0.2em;top:0.6em}input.sc-smoothly-input:invalid+label.sc-smoothly-input+smoothly-icon.sc-smoothly-input{display:block}.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input{z-index:1;pointer-events:none}.has-value.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input{top:0.4em;font-size:60%}.sc-smoothly-input-h:focus-within>div.sc-smoothly-input>label.sc-smoothly-input{top:0.4em;font-size:60%}input.sc-smoothly-input:focus{outline:none}input.sc-smoothly-input:-webkit-autofill,input.sc-smoothly-input:-webkit-autofill:hover,input.sc-smoothly-input:-webkit-autofill:focus,input.sc-smoothly-input:-webkit-autofill:active{box-shadow:0 0 0 40em rgb(var(--background-color)) inset;-webkit-box-shadow:0 0 0 40em rgb(var(--background-color)) inset}input.sc-smoothly-input:-webkit-autofill,input.sc-smoothly-input:-webkit-autofill+label.sc-smoothly-input{-webkit-text-fill-color:rgb(var(--text-color, var(--smoothly-default-contrast)))}";
|
|
39675
39675
|
|
|
39676
39676
|
let SmoothlyInput = class {
|
|
39677
39677
|
constructor(hostRef) {
|
|
@@ -39850,7 +39850,7 @@ let SmoothlyInput = class {
|
|
|
39850
39850
|
}
|
|
39851
39851
|
render() {
|
|
39852
39852
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
39853
|
-
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) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, h("div", null, 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" })
|
|
39853
|
+
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) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, h("div", null, 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("label", { htmlFor: this.name }, h("slot", null)), h("smoothly-icon", { name: "alert-circle", color: "danger", fill: "clear", size: "small" }))));
|
|
39854
39854
|
}
|
|
39855
39855
|
static get watchers() { return {
|
|
39856
39856
|
"value": ["valueWatcher"],
|
|
@@ -3,7 +3,7 @@ import { d as dist$1 } from './index-a5a08f46.js';
|
|
|
3
3
|
import { d as dist } from './index-401c6ce3.js';
|
|
4
4
|
import './_commonjsHelpers-8fe71198.js';
|
|
5
5
|
|
|
6
|
-
const styleCss = ".sc-smoothly-input-h{display:block;position:relative;font-weight:var(--smoothly-font-weight);padding:var(--padding)}[hidden].sc-smoothly-input-h{display:none}label.sc-smoothly-input{position:absolute;left:0.4em;top:0.6em;color:rgb(var(--smoothly-
|
|
6
|
+
const styleCss = ".sc-smoothly-input-h{display:block;position:relative;font-weight:var(--smoothly-font-weight);padding:var(--padding);overflow:hidden;background-color:rgb(var(--background-color));color:rgb(var(--text-color, var(--smoothly-default-contrast)))}[hidden].sc-smoothly-input-h{display:none}.sc-smoothly-input-h>div.sc-smoothly-input{position:relative;width:100%;height:100%}label.sc-smoothly-input{position:absolute;left:0.4em;top:0.6em;color:rgb(var(--text-color, var(--smoothly-default-contrast)));opacity:0.8;user-select:none;cursor:inherit;transition:font-size 0.1s;transition-timing-function:ease}.sc-smoothly-input-h:not([show-label]) label.sc-smoothly-input{display:none}.sc-smoothly-input-h:not([show-label]) input.sc-smoothly-input{padding:0.6em 0.2em 0.6em 0.2em}input.sc-smoothly-input{padding:1em 0.2em 0.2em 0.2em;box-sizing:border-box;width:100%;height:100%;background:none;border:0;z-index:1;position:relative;font-size:1rem;font-family:var(--smoothly-font-family);background-color:rgb(var(--background-color))}smoothly-icon.sc-smoothly-input{display:none;position:absolute;right:0.2em;top:0.6em}input.sc-smoothly-input:invalid+label.sc-smoothly-input+smoothly-icon.sc-smoothly-input{display:block}.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input{z-index:1;pointer-events:none}.has-value.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input{top:0.4em;font-size:60%}.sc-smoothly-input-h:focus-within>div.sc-smoothly-input>label.sc-smoothly-input{top:0.4em;font-size:60%}input.sc-smoothly-input:focus{outline:none}input.sc-smoothly-input:-webkit-autofill,input.sc-smoothly-input:-webkit-autofill:hover,input.sc-smoothly-input:-webkit-autofill:focus,input.sc-smoothly-input:-webkit-autofill:active{box-shadow:0 0 0 40em rgb(var(--background-color)) inset;-webkit-box-shadow:0 0 0 40em rgb(var(--background-color)) inset}input.sc-smoothly-input:-webkit-autofill,input.sc-smoothly-input:-webkit-autofill+label.sc-smoothly-input{-webkit-text-fill-color:rgb(var(--text-color, var(--smoothly-default-contrast)))}";
|
|
7
7
|
|
|
8
8
|
let SmoothlyInput = class {
|
|
9
9
|
constructor(hostRef) {
|
|
@@ -182,7 +182,7 @@ let SmoothlyInput = class {
|
|
|
182
182
|
}
|
|
183
183
|
render() {
|
|
184
184
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
185
|
-
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) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, h("div", null, 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" })
|
|
185
|
+
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) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, h("div", null, 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("label", { htmlFor: this.name }, h("slot", null)), h("smoothly-icon", { name: "alert-circle", color: "danger", fill: "clear", size: "small" }))));
|
|
186
186
|
}
|
|
187
187
|
static get watchers() { return {
|
|
188
188
|
"value": ["valueWatcher"],
|