@neovici/cosmoz-input 1.6.1 → 1.6.2
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/package.json +1 -1
- package/render.js +12 -6
- package/styles.js +40 -15
package/package.json
CHANGED
package/render.js
CHANGED
|
@@ -2,24 +2,30 @@ import { html, nothing } from 'lit-html';
|
|
|
2
2
|
import { styles } from './styles';
|
|
3
3
|
|
|
4
4
|
export const render = (control, { label, invalid, errorMessage }) => html`
|
|
5
|
-
<style
|
|
5
|
+
<style>
|
|
6
|
+
${styles}
|
|
7
|
+
</style>
|
|
6
8
|
<div class="float" part="float"> </div>
|
|
7
9
|
<div class="wrap" part="wrap">
|
|
8
10
|
<slot name="prefix"></slot>
|
|
9
11
|
<div class="control" part="control">
|
|
10
|
-
${
|
|
11
|
-
${
|
|
12
|
+
${control}
|
|
13
|
+
${label
|
|
14
|
+
? html`<label for="input" part="label">${label}</label>`
|
|
15
|
+
: nothing}
|
|
12
16
|
</div>
|
|
13
17
|
<slot name="suffix"></slot>
|
|
14
18
|
</div>
|
|
15
19
|
<div class="line" part="line"></div>
|
|
16
|
-
${
|
|
17
|
-
|
|
20
|
+
${invalid && errorMessage
|
|
21
|
+
? html`<div class="error" part="error">${errorMessage}</div>`
|
|
22
|
+
: nothing}
|
|
23
|
+
`,
|
|
18
24
|
attributes = [
|
|
19
25
|
'autocomplete',
|
|
20
26
|
'readonly',
|
|
21
27
|
'disabled',
|
|
22
28
|
'invalid',
|
|
23
29
|
'no-label-float',
|
|
24
|
-
'always-float-label'
|
|
30
|
+
'always-float-label',
|
|
25
31
|
];
|
package/styles.js
CHANGED
|
@@ -1,20 +1,43 @@
|
|
|
1
|
-
|
|
1
|
+
import { tagged as css } from '@neovici/cosmoz-utils';
|
|
2
|
+
export const styles = css`
|
|
2
3
|
:host {
|
|
3
|
-
--font-family: var(
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
--font-family: var(
|
|
5
|
+
--cosmoz-input-font-family,
|
|
6
|
+
var(--paper-font-subhead_-_font-family, "Roboto", "Noto", sans-serif)
|
|
7
|
+
);
|
|
8
|
+
--font-size: var(
|
|
9
|
+
--cosmoz-input-font-size,
|
|
10
|
+
var(--paper-font-subhead_-_font-size, 16px)
|
|
11
|
+
);
|
|
12
|
+
--line-height: var(
|
|
13
|
+
--cosmoz-input-line-height,
|
|
14
|
+
var(--paper-font-subhead_-_line-height, 24px)
|
|
15
|
+
);
|
|
6
16
|
--label-scale: var(--cosmoz-input-label-scale, 0.75);
|
|
7
|
-
--disabled-opacity: var(
|
|
8
|
-
|
|
9
|
-
|
|
17
|
+
--disabled-opacity: var(
|
|
18
|
+
--cosmoz-input-disabled-opacity,
|
|
19
|
+
var(--paper-input-container-disabled_-_opacity, 0.33)
|
|
20
|
+
);
|
|
21
|
+
--disabled-line-opacity: var(
|
|
22
|
+
--cosmoz-input-disabled-line-opacity,
|
|
23
|
+
var(--paper-input-container-underline-disabled_-_opacity, 1)
|
|
24
|
+
);
|
|
25
|
+
--invalid-color: var(
|
|
26
|
+
--cosmoz-input-invalid-color,
|
|
27
|
+
var(--paper-input-container-invalid-color, var(--error-color, #fc5c5b))
|
|
28
|
+
);
|
|
10
29
|
--bg: var(--cosmoz-input-background);
|
|
11
30
|
--focused-bg: var(--cosmoz-input-focused-background, var(--bg));
|
|
12
31
|
--color: var(--cosmoz-input-color, var(--secondary-text-color, #737373));
|
|
13
|
-
--focused-color: var(
|
|
32
|
+
--focused-color: var(
|
|
33
|
+
--cosmoz-input-focused-color,
|
|
34
|
+
var(--primary-color, #3f51b5)
|
|
35
|
+
);
|
|
14
36
|
|
|
15
37
|
display: block;
|
|
16
|
-
padding: 8px 0;
|
|
38
|
+
padding: var(--cosmoz-input-padding, 8px 0);
|
|
17
39
|
padding-top: var(--paper-input-container_-_padding-top, 8px);
|
|
40
|
+
padding-bottom: var(--paper-input-container_-_padding-bottom, 8px);
|
|
18
41
|
position: relative;
|
|
19
42
|
|
|
20
43
|
font-family: var(--font-family);
|
|
@@ -73,7 +96,8 @@ export const styles = `
|
|
|
73
96
|
|
|
74
97
|
:host([always-float-label]) label,
|
|
75
98
|
#input:not(:placeholder-shown) + label {
|
|
76
|
-
transform: translateY(calc(var(--label-scale) * -100%))
|
|
99
|
+
transform: translateY(calc(var(--label-scale) * -100%))
|
|
100
|
+
scale(var(--label-scale));
|
|
77
101
|
}
|
|
78
102
|
#input:not(:placeholder-shown):focus + label {
|
|
79
103
|
color: var(--focused-color);
|
|
@@ -85,7 +109,7 @@ export const styles = `
|
|
|
85
109
|
position: relative;
|
|
86
110
|
}
|
|
87
111
|
.line::before {
|
|
88
|
-
content:
|
|
112
|
+
content: "";
|
|
89
113
|
position: absolute;
|
|
90
114
|
display: block;
|
|
91
115
|
border-bottom: 2px solid transparent;
|
|
@@ -93,7 +117,7 @@ export const styles = `
|
|
|
93
117
|
left: 0;
|
|
94
118
|
right: 0;
|
|
95
119
|
top: 0;
|
|
96
|
-
transform: scale3d(0,1,1);
|
|
120
|
+
transform: scale3d(0, 1, 1);
|
|
97
121
|
transform-origin: center center;
|
|
98
122
|
z-index: 1;
|
|
99
123
|
}
|
|
@@ -102,7 +126,7 @@ export const styles = `
|
|
|
102
126
|
transition: 0.25s transform ease;
|
|
103
127
|
}
|
|
104
128
|
:host(:focus-within) .line {
|
|
105
|
-
border-bottom-color:
|
|
129
|
+
border-bottom-color: var(--focused-color);
|
|
106
130
|
}
|
|
107
131
|
:host([disabled]) .line {
|
|
108
132
|
border-bottom-style: dashed;
|
|
@@ -110,7 +134,7 @@ export const styles = `
|
|
|
110
134
|
}
|
|
111
135
|
|
|
112
136
|
:host([no-label-float]) .float,
|
|
113
|
-
:host([no-label-float]) #input:not(:placeholder-shown) + label
|
|
137
|
+
:host([no-label-float]) #input:not(:placeholder-shown) + label {
|
|
114
138
|
display: none;
|
|
115
139
|
}
|
|
116
140
|
|
|
@@ -122,7 +146,8 @@ export const styles = `
|
|
|
122
146
|
position: absolute;
|
|
123
147
|
max-width: 100%;
|
|
124
148
|
}
|
|
125
|
-
:host([invalid]) label,
|
|
149
|
+
:host([invalid]) label,
|
|
150
|
+
.error {
|
|
126
151
|
color: var(--invalid-color);
|
|
127
152
|
}
|
|
128
153
|
:host([invalid]) .line {
|