@energycap/components 0.36.5 → 0.37.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.
- package/esm2020/lib/controls/checkbox/checkbox.component.mjs +2 -2
- package/esm2020/lib/controls/combobox/combobox.component.mjs +2 -2
- package/esm2020/lib/controls/form-control-label/form-control-label.component.mjs +2 -2
- package/esm2020/lib/controls/form-group/form-group.component.mjs +2 -2
- package/esm2020/lib/controls/numericbox/numericbox.component.mjs +2 -2
- package/esm2020/lib/controls/radio-button/radio-button.component.mjs +2 -2
- package/esm2020/lib/controls/select/select.component.mjs +3 -3
- package/esm2020/lib/controls/textbox/textbox.component.mjs +3 -3
- package/esm2020/lib/display/table/table.component.mjs +2 -2
- package/fesm2015/energycap-components.mjs +18 -18
- package/fesm2015/energycap-components.mjs.map +1 -1
- package/fesm2020/energycap-components.mjs +18 -18
- package/fesm2020/energycap-components.mjs.map +1 -1
- package/package.json +1 -2
- package/src/styles/_base.scss +1 -1
- package/src/styles/_icons.scss +8 -18
- package/src/styles/mixins/_control-base.scss +4 -0
- package/src/styles/mixins/_form-control-base.scss +60 -2
- package/src/styles/mixins/_table-base.scss +13 -9
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@energycap/components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.37.0",
|
|
4
4
|
"dependencies": {
|
|
5
5
|
"tslib": "^2.0.0"
|
|
6
6
|
},
|
|
@@ -10,7 +10,6 @@
|
|
|
10
10
|
"@angular/forms": ">=15.2.0",
|
|
11
11
|
"@angular/router": ">=15.2.0",
|
|
12
12
|
"@angular/cdk": ">=15.2.0",
|
|
13
|
-
"@energycap/energycap-icons": "^4.0.0",
|
|
14
13
|
"@ngx-translate/core": "^14.0.0",
|
|
15
14
|
"popper.js": "~1.11.1",
|
|
16
15
|
"lodash": "^4.17.21",
|
package/src/styles/_base.scss
CHANGED
package/src/styles/_icons.scss
CHANGED
|
@@ -1,26 +1,16 @@
|
|
|
1
|
-
// TODO: replace these background image icons with icon font icons. Requires updating ng1 form controls in energycap project (ECAP-9608)
|
|
2
|
-
|
|
3
1
|
$icon-url-prefix: 'data:image/svg+xml;charset=utf8,';
|
|
4
2
|
|
|
5
|
-
// Deprecated SCSS variables for legacy background-image icons.
|
|
3
|
+
// Deprecated SCSS variables and functions for legacy background-image icons.
|
|
6
4
|
$icon-color-base: rgba(26, 26, 35, .66);
|
|
5
|
+
$required-icon: none; // Unused variable. Need to keep reference for backwards compatability. Overridden for ng1 controls in energycap repo.
|
|
6
|
+
$invalid-icon: none; // Unused variable. Need to keep reference for backwards compatability. Overridden for ng1 controls in energycap repo.
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
@function pending-icon($color: '#0084a9') {
|
|
13
|
-
@return str-replace(url('#{$icon-url-prefix}<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 50 50"><path fill="#{$color}" d="M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.8s" repeatCount="indefinite"/></path></svg>'), '#', '%23');
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
@function icon-sort-asc-bg($color: $icon-color-base) {
|
|
17
|
-
@return str-replace(url('#{$icon-url-prefix}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#{$color}" d="M14 8.828V27a2 2 0 1 0 4 0V8.828l4.586 4.586a2 2 0 0 0 2.828-2.828l-8-8a2 2 0 0 0-2.828 0l-8 8a2 2 0 0 0 2.828 2.828L14 8.828z"/></svg>'), '#', '%23');
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
@function icon-caret-down-bg($color: $icon-color-base) {
|
|
21
|
-
@return str-replace(url('#{$icon-url-prefix}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#{$color}" d="M32 8L16 24 0 8z"/></svg>'), '#', '%23');
|
|
22
|
-
}
|
|
8
|
+
// Unused function. Need to keep reference for backwards compatability. Overridden for ng1 controls in energycap repo.
|
|
9
|
+
@function pending-icon() {
|
|
10
|
+
@return '';
|
|
11
|
+
}
|
|
23
12
|
|
|
13
|
+
// Needed for backwards compatablity of ng1 form controls in energycap repo
|
|
24
14
|
@mixin icon-bg-image(
|
|
25
15
|
$icon,
|
|
26
16
|
$position: 0 50%,
|
|
@@ -37,6 +37,20 @@ $checkbox-indicator-size: $form-control-icon-size;
|
|
|
37
37
|
.textbox-group-input ::ng-deep .control input.ng-invalid,
|
|
38
38
|
.textbox-group-input ::ng-deep .control input.ng-valid {
|
|
39
39
|
@include form-control-state(invalid, input);
|
|
40
|
+
|
|
41
|
+
background-image: none;
|
|
42
|
+
|
|
43
|
+
& ~ .icon-invalid {
|
|
44
|
+
display: inline-flex;
|
|
45
|
+
position: absolute;
|
|
46
|
+
left: .5rem;
|
|
47
|
+
top: .5rem;
|
|
48
|
+
z-index: 1;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
& ~ .icon-required {
|
|
52
|
+
display: none
|
|
53
|
+
}
|
|
40
54
|
}
|
|
41
55
|
|
|
42
56
|
&:not(.open) {
|
|
@@ -78,7 +92,7 @@ $checkbox-indicator-size: $form-control-icon-size;
|
|
|
78
92
|
|
|
79
93
|
/// Pending
|
|
80
94
|
} @else if $state == pending {
|
|
81
|
-
@include form-control-input-icon(pending-icon(), $position: $icon-position)
|
|
95
|
+
@include form-control-input-icon(pending-icon(), $position: $icon-position);
|
|
82
96
|
|
|
83
97
|
/// Invalid
|
|
84
98
|
} @else if $state == invalid {
|
|
@@ -106,7 +120,7 @@ $checkbox-indicator-size: $form-control-icon-size;
|
|
|
106
120
|
|
|
107
121
|
/// The default form control element in the control component
|
|
108
122
|
/// @param {string} $tag [input] - The HTML tag name of the input element (e.g. input, textarea)
|
|
109
|
-
@mixin form-control-input($selector: input) {
|
|
123
|
+
@mixin form-control-input($selector: input, $new-state-icons: false) {
|
|
110
124
|
@include control-default;
|
|
111
125
|
@include form-control-input-base;
|
|
112
126
|
background-image: none;
|
|
@@ -125,6 +139,19 @@ $checkbox-indicator-size: $form-control-icon-size;
|
|
|
125
139
|
&:required {
|
|
126
140
|
&.is-empty {
|
|
127
141
|
@include form-control-state(required, $selector);
|
|
142
|
+
|
|
143
|
+
@if $new-state-icons {
|
|
144
|
+
background-image: none;
|
|
145
|
+
|
|
146
|
+
& ~ .icon-required {
|
|
147
|
+
display: inline-flex;
|
|
148
|
+
position: absolute;
|
|
149
|
+
left: .5rem;
|
|
150
|
+
top: .5rem;
|
|
151
|
+
z-index: 1;
|
|
152
|
+
color: var(--ec-color-yellow-4);
|
|
153
|
+
}
|
|
154
|
+
}
|
|
128
155
|
}
|
|
129
156
|
}
|
|
130
157
|
|
|
@@ -132,6 +159,22 @@ $checkbox-indicator-size: $form-control-icon-size;
|
|
|
132
159
|
&.ng-invalid {
|
|
133
160
|
&.ng-touched {
|
|
134
161
|
@include form-control-state(invalid, $selector);
|
|
162
|
+
|
|
163
|
+
@if $new-state-icons {
|
|
164
|
+
background-image: none;
|
|
165
|
+
|
|
166
|
+
& ~ .icon-invalid {
|
|
167
|
+
display: inline-flex;
|
|
168
|
+
position: absolute;
|
|
169
|
+
left: .5rem;
|
|
170
|
+
top: .5rem;
|
|
171
|
+
z-index: 1;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
& ~ .icon-required {
|
|
175
|
+
display: none
|
|
176
|
+
}
|
|
177
|
+
}
|
|
135
178
|
}
|
|
136
179
|
}
|
|
137
180
|
|
|
@@ -140,6 +183,21 @@ $checkbox-indicator-size: $form-control-icon-size;
|
|
|
140
183
|
&.ng-invalid,
|
|
141
184
|
&.ng-pending {
|
|
142
185
|
@include form-control-state(pending, $selector);
|
|
186
|
+
|
|
187
|
+
@if $new-state-icons {
|
|
188
|
+
& ~ .icon-loading {
|
|
189
|
+
display: inline-flex;
|
|
190
|
+
position: absolute;
|
|
191
|
+
left: .5rem;
|
|
192
|
+
top: .5rem;
|
|
193
|
+
z-index: 1;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
& ~ .icon-required,
|
|
197
|
+
& ~ .icon-invalid {
|
|
198
|
+
display: none;
|
|
199
|
+
}
|
|
200
|
+
}
|
|
143
201
|
}
|
|
144
202
|
}
|
|
145
203
|
|
|
@@ -138,14 +138,18 @@ $table-z-indexes: (
|
|
|
138
138
|
}
|
|
139
139
|
|
|
140
140
|
@mixin table-col-sort-icon() {
|
|
141
|
-
content: '';
|
|
142
|
-
background-repeat: no-repeat;
|
|
143
|
-
background-position: center;
|
|
144
141
|
width: .875rem;
|
|
145
142
|
height: .875rem;
|
|
146
143
|
margin: 0 .25rem;
|
|
147
|
-
|
|
144
|
+
font-size: .75rem;
|
|
148
145
|
display: none;
|
|
146
|
+
align-items: center;
|
|
147
|
+
justify-content: center;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
@mixin icon-sort-asc {
|
|
151
|
+
font: var(--fa-font-solid);
|
|
152
|
+
content: "\f063";
|
|
149
153
|
}
|
|
150
154
|
|
|
151
155
|
@mixin table-col-sort() {
|
|
@@ -167,8 +171,8 @@ $table-z-indexes: (
|
|
|
167
171
|
&.is-sorted-desc,
|
|
168
172
|
&.is-sorted-asc {
|
|
169
173
|
.content-wrapper::after {
|
|
170
|
-
|
|
171
|
-
display: inline-
|
|
174
|
+
@include icon-sort-asc;
|
|
175
|
+
display: inline-flex;
|
|
172
176
|
}
|
|
173
177
|
}
|
|
174
178
|
|
|
@@ -195,8 +199,8 @@ $table-z-indexes: (
|
|
|
195
199
|
&.is-sorted-desc,
|
|
196
200
|
&.is-sorted-asc {
|
|
197
201
|
&::after {
|
|
198
|
-
|
|
199
|
-
display: inline-
|
|
202
|
+
@include icon-sort-asc;
|
|
203
|
+
display: inline-flex;
|
|
200
204
|
}
|
|
201
205
|
}
|
|
202
206
|
|
|
@@ -217,7 +221,7 @@ $table-z-indexes: (
|
|
|
217
221
|
&.is-sorted-desc,
|
|
218
222
|
&.is-sorted-asc {
|
|
219
223
|
&::before {
|
|
220
|
-
|
|
224
|
+
@include icon-sort-asc;
|
|
221
225
|
display: inline-block;
|
|
222
226
|
}
|
|
223
227
|
}
|