@neovici/cosmoz-input 1.4.4 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +3 -4
  2. package/styles.js +52 -17
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neovici/cosmoz-input",
3
- "version": "1.4.4",
3
+ "version": "1.5.0",
4
4
  "description": "A input web component",
5
5
  "keywords": [
6
6
  "lit-html",
@@ -61,8 +61,8 @@
61
61
  "lit-html": "^1.4.0"
62
62
  },
63
63
  "devDependencies": {
64
- "@commitlint/cli": "^14.0.0",
65
- "@commitlint/config-conventional": "^14.0.0",
64
+ "@commitlint/cli": "^15.0.0",
65
+ "@commitlint/config-conventional": "^15.0.0",
66
66
  "@neovici/eslint-config": "^1.3.0",
67
67
  "@open-wc/demoing-storybook": "^2.1.0",
68
68
  "@open-wc/testing": "^2.5.0",
@@ -71,7 +71,6 @@
71
71
  "@storybook/storybook-deployer": "^2.8.5",
72
72
  "@web/test-runner": "^0.13.0",
73
73
  "@web/test-runner-selenium": "^0.5.0",
74
- "eslint": "^8.0.0",
75
74
  "husky": "^7.0.0",
76
75
  "semantic-release": "^18.0.0",
77
76
  "sinon": "^12.0.0",
package/styles.js CHANGED
@@ -1,23 +1,36 @@
1
1
  export const styles = `
2
2
  :host {
3
+ --font-family: var(--cosmoz-input-font-family, var(--paper-font-subhead_-_font-family, 'Roboto', 'Noto', sans-serif));
4
+ --font-size: var(--cosmoz-input-font-size, var(--paper-font-subhead_-_font-size, 16px));
5
+ --line-height: var(--cosmoz-input-line-height, var(--paper-font-subhead_-_line-height, 24px));
6
+ --label-scale: var(--cosmoz-input-label-scale, 0.75);
7
+ --disabled-opacity: var(--cosmoz-input-disabled-opacity, var(--paper-input-container-disabled_-_opacity, 0.33));
8
+ --disabled-line-opacity: var(--cosmoz-input-disabled-line-opacity, var(--paper-input-container-underline-disabled_-_opacity, 1));
9
+ --invalid-color: var(--cosmoz-input-invalid-color, var(--paper-input-container-invalid-color, var(--error-color, #fc5c5b)));
10
+ --bg: var(--cosmoz-input-background);
11
+ --focused-bg: var(--cosmoz-input-focused-background, var(--bg));
12
+ --color: var(--cosmoz-input-color, var(--secondary-text-color, #737373));
13
+ --focused-color: var(--cosmoz-input-focused-color, var(--primary-color, #3f51b5));
14
+
3
15
  display: block;
4
16
  padding: 8px 0;
5
17
  padding-top: var(--paper-input-container_-_padding-top, 8px);
6
18
  position: relative;
7
- }
8
19
 
9
- :host, label, #input {
10
- font-family: var(--cosmoz-subhead-font-family, var(--paper-font-subhead_-_font-family, 'Roboto', 'Noto', sans-serif));
11
- font-size: var(--cosmoz-subhead-font-size, var(--paper-font-subhead_-_font-size, 16px));
12
- line-height: var(--cosmoz-subhead-line-height, var(--paper-font-subhead_-_line-height, 24px));
13
- display: block;
20
+ font-family: var(--font-family);
21
+ font-size: var(--font-size);
22
+ line-height: var(--line-height);
14
23
  }
15
24
 
16
25
  :host([disabled]) {
17
- opacity: var(--cosmoz-input-disabled-opacity, var(--paper-input-container-disabled_-_opacity, 0.33));
26
+ opacity: var(--disabled-opacity);
18
27
  pointer-events: none;
19
28
  }
20
29
 
30
+ .float {
31
+ line-height: calc(var(--line-height) * var(--label-scale));
32
+ }
33
+
21
34
  .wrap {
22
35
  display: flex;
23
36
  align-items: center;
@@ -36,11 +49,14 @@ export const styles = `
36
49
  border: none;
37
50
  width: 100%;
38
51
  max-width: 100%;
39
- background: var(--cosmoz-input-background, initial);
52
+ display: block;
53
+ background: var(--bg);
54
+ line-height: inherit;
55
+ font-size: inherit;
40
56
  }
41
57
 
42
58
  :host(:focus-within) #input {
43
- background: var(--cosmoz-input-focused-background, var(--cosmoz-input-background, initial));
59
+ background: var(--focused-bg);
44
60
  }
45
61
  label {
46
62
  position: absolute;
@@ -49,7 +65,7 @@ export const styles = `
49
65
  width: 100%;
50
66
  transition: transform 0.25s, width 0.25s;
51
67
  transform-origin: left top;
52
- color: var(--secondary-text-color, #737373);
68
+ color: var(--color);
53
69
  white-space: nowrap;
54
70
  overflow: hidden;
55
71
  text-overflow: ellipsis;
@@ -57,21 +73,40 @@ export const styles = `
57
73
 
58
74
  :host([always-float-label]) label,
59
75
  #input:not(:placeholder-shown) + label {
60
- transform: translateY(-75%) scale(0.75);
76
+ transform: translateY(calc(var(--label-scale) * -100%)) scale(var(--label-scale));
61
77
  }
62
78
  #input:not(:placeholder-shown):focus + label {
63
- color: var(--primary-color, #3f51b5);
79
+ color: var(--focused-color);
64
80
  }
65
81
 
66
82
  .line {
67
- border-bottom: 2px solid var(--secondary-text-color, #737373);
83
+ padding-top: 1px;
84
+ border-bottom: 1px solid var(--color);
85
+ position: relative;
86
+ }
87
+ .line::before {
88
+ content: '';
89
+ position: absolute;
90
+ display: block;
91
+ border-bottom: 2px solid transparent;
92
+ border-bottom-color: inherit;
93
+ left: 0;
94
+ right: 0;
95
+ top: 0;
96
+ transform: scale3d(0,1,1);
97
+ transform-origin: center center;
98
+ z-index: 1;
99
+ }
100
+ :host(:focus-within) .line::before {
101
+ transform: none;
102
+ transition: 0.25s transform ease;
68
103
  }
69
104
  :host(:focus-within) .line {
70
- border-bottom-color: var(--primary-color, #3f51b5);
105
+ border-bottom-color: var(--focused-color);
71
106
  }
72
107
  :host([disabled]) .line {
73
108
  border-bottom-style: dashed;
74
- opacity: var(--cosmoz-input-disabled-line-opacity, var(--paper-input-container-underline-disabled_-_opacity, 1));
109
+ opacity: var(--disabled-line-opacity);
75
110
  }
76
111
 
77
112
  :host([no-label-float]) .float,
@@ -88,10 +123,10 @@ export const styles = `
88
123
  max-width: 100%;
89
124
  }
90
125
  :host([invalid]) label, .error {
91
- color: var(--paper-input-container-invalid-color, var(--error-color, #fc5c5b));
126
+ color: var(--invalid-color);
92
127
  }
93
128
  :host([invalid]) .line {
94
- border-bottom-color: var(--paper-input-container-invalid-color, var(--error-color, #fc5c5b));
129
+ border-bottom-color: var(--invalid-color);
95
130
  }
96
131
 
97
132
  #input::-webkit-inner-spin-button {