@elderbyte/ngx-starter 14.4.0-beta.4 → 14.4.0-beta.5
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/components/select/multi/elder-multi-select-chips/elder-multi-select-chips.component.mjs +3 -3
- package/esm2020/lib/components/select/single/elder-select/elder-select.component.mjs +3 -3
- package/fesm2015/elderbyte-ngx-starter.mjs +4 -4
- package/fesm2015/elderbyte-ngx-starter.mjs.map +1 -1
- package/fesm2020/elderbyte-ngx-starter.mjs +4 -4
- package/fesm2020/elderbyte-ngx-starter.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/components/select/_elder-select-base.scss +39 -0
- package/src/lib/components/select/multi/elder-multi-select-chips/elder-multi-select-chips.component.scss +52 -17
- package/src/lib/components/select/single/elder-select/elder-select.component.scss +49 -41
- package/theming/_elder-common.scss +0 -38
- package/theming/_elder-typography-utils.scss +11 -0
package/package.json
CHANGED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
@use 'sass:map';
|
|
2
|
+
@use '@angular/material' as mat;
|
|
3
|
+
@use '../../../../theming/elder-typography-utils' as elder-typography;
|
|
4
|
+
|
|
5
|
+
@mixin typography($typography-config) {
|
|
6
|
+
$config: mat.private-typography-to-2014-config($typography-config);
|
|
7
|
+
// The unit-less line-height from the font config.
|
|
8
|
+
$line-height: mat.line-height($config, input);
|
|
9
|
+
$font-size: mat.font-size($config, input);
|
|
10
|
+
$line-height-em: elder-typography.coerce-unitless-to-em($line-height);
|
|
11
|
+
|
|
12
|
+
.elder-icon-button-small {
|
|
13
|
+
width: $line-height-em !important;
|
|
14
|
+
height: $line-height-em !important;
|
|
15
|
+
line-height: $line-height-em !important;
|
|
16
|
+
|
|
17
|
+
.mat-icon {
|
|
18
|
+
width: $line-height-em !important;
|
|
19
|
+
height: $line-height-em !important;
|
|
20
|
+
line-height: $line-height-em !important;
|
|
21
|
+
}
|
|
22
|
+
.material-icons {
|
|
23
|
+
font-size: $line-height-em !important;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.elder-input-prefix-icon-container {
|
|
28
|
+
height: $line-height-em !important;
|
|
29
|
+
min-width: $line-height-em !important;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.elder-icon-small {
|
|
33
|
+
width: $line-height-em !important;
|
|
34
|
+
height: $line-height-em !important;
|
|
35
|
+
line-height: $line-height-em !important;
|
|
36
|
+
font-size: $font-size !important;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
}
|
|
@@ -1,13 +1,45 @@
|
|
|
1
1
|
@use 'sass:map';
|
|
2
2
|
@use '@angular/material' as mat;
|
|
3
|
+
@use '../../../../../../theming/elder-typography-utils' as elder-typography;
|
|
4
|
+
@use '../../elder-select-base' as elder-select-base;
|
|
3
5
|
|
|
4
|
-
@mixin
|
|
5
|
-
$config: mat.
|
|
6
|
-
|
|
7
|
-
$
|
|
8
|
-
$
|
|
9
|
-
$
|
|
10
|
-
|
|
6
|
+
@mixin typography($typography-config) {
|
|
7
|
+
$config: mat.private-typography-to-2014-config($typography-config);
|
|
8
|
+
// The unit-less line-height from the font config.
|
|
9
|
+
$line-height: mat.line-height($config, input);
|
|
10
|
+
$font-size: mat.font-size($config, input);
|
|
11
|
+
$line-height-em: elder-typography.coerce-unitless-to-em($line-height);
|
|
12
|
+
|
|
13
|
+
@include elder-select-base.typography($typography-config);
|
|
14
|
+
|
|
15
|
+
.elder-multi-select {
|
|
16
|
+
font-family: mat.font-family($config);
|
|
17
|
+
|
|
18
|
+
.elder-select-input {
|
|
19
|
+
height: $line-height-em
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.elder-prefix-icon {
|
|
23
|
+
margin-left: 3px;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.elder-chip-input {
|
|
27
|
+
width: 144px;
|
|
28
|
+
min-width: 80px; // 180 - (prefix-icon) - (browser-icon)
|
|
29
|
+
max-width: 100%;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
@mixin color($color-config) {
|
|
38
|
+
$foreground: map.get($color-config, foreground);
|
|
39
|
+
$background: map.get($color-config, background);
|
|
40
|
+
$primary: map.get($color-config, primary);
|
|
41
|
+
$accent: map.get($color-config, accent);
|
|
42
|
+
$warn: map.get($color-config, warn);
|
|
11
43
|
|
|
12
44
|
.elder-select-value {
|
|
13
45
|
color: mat.get-color-from-palette($foreground, text);
|
|
@@ -51,18 +83,21 @@
|
|
|
51
83
|
}
|
|
52
84
|
}
|
|
53
85
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
86
|
+
@mixin theme($config-or-theme) {
|
|
87
|
+
$color: mat.get-color-config($config-or-theme);
|
|
88
|
+
$typography: mat.get-typography-config($config-or-theme);
|
|
89
|
+
|
|
90
|
+
// If no actual typography configuration has been specified, create a default one.
|
|
91
|
+
@if not $typography {
|
|
92
|
+
$typography: mat.define-typography-config();
|
|
93
|
+
}
|
|
58
94
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
height: 16px !important;
|
|
62
|
-
line-height: 16px !important;
|
|
95
|
+
@if $color != null {
|
|
96
|
+
@include color($color);
|
|
63
97
|
}
|
|
64
|
-
|
|
65
|
-
|
|
98
|
+
|
|
99
|
+
@if $typography != null {
|
|
100
|
+
@include typography($typography);
|
|
66
101
|
}
|
|
67
102
|
}
|
|
68
103
|
|
|
@@ -1,13 +1,40 @@
|
|
|
1
1
|
@use 'sass:map';
|
|
2
2
|
@use '@angular/material' as mat;
|
|
3
|
+
@use '../../../../../../theming/elder-typography-utils' as elder-typography;
|
|
4
|
+
@use '../../elder-select-base' as elder-select-base;
|
|
3
5
|
|
|
4
|
-
@mixin
|
|
5
|
-
$config: mat.
|
|
6
|
-
|
|
7
|
-
$
|
|
8
|
-
$
|
|
9
|
-
$
|
|
10
|
-
|
|
6
|
+
@mixin typography($typography-config) {
|
|
7
|
+
$config: mat.private-typography-to-2014-config($typography-config);
|
|
8
|
+
// The unit-less line-height from the font config.
|
|
9
|
+
$line-height: mat.line-height($config, input);
|
|
10
|
+
$font-size: mat.font-size($config, input);
|
|
11
|
+
$line-height-em: elder-typography.coerce-unitless-to-em($line-height);
|
|
12
|
+
|
|
13
|
+
@include elder-select-base.typography($typography-config);
|
|
14
|
+
|
|
15
|
+
.elder-select {
|
|
16
|
+
font-family: mat.font-family($config);
|
|
17
|
+
|
|
18
|
+
.elder-input-prefix-icon-container {
|
|
19
|
+
padding-right: 3px;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.elder-select-input {
|
|
24
|
+
height: $line-height-em
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.elder-select-arrow {
|
|
28
|
+
cursor: pointer;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
@mixin color($color-config) {
|
|
33
|
+
$foreground: map.get($color-config, foreground);
|
|
34
|
+
$background: map.get($color-config, background);
|
|
35
|
+
$primary: map.get($color-config, primary);
|
|
36
|
+
$accent: map.get($color-config, accent);
|
|
37
|
+
$warn: map.get($color-config, warn);
|
|
11
38
|
|
|
12
39
|
.elder-select-value {
|
|
13
40
|
color: mat.get-color-from-palette($foreground, text);
|
|
@@ -21,7 +48,6 @@
|
|
|
21
48
|
color: mat.get-color-from-palette($foreground, secondary-text);
|
|
22
49
|
}
|
|
23
50
|
|
|
24
|
-
|
|
25
51
|
.mat-form-field {
|
|
26
52
|
&.mat-focused {
|
|
27
53
|
&.mat-primary .elder-select-icon {
|
|
@@ -51,10 +77,22 @@
|
|
|
51
77
|
}
|
|
52
78
|
}
|
|
53
79
|
|
|
80
|
+
@mixin theme($config-or-theme) {
|
|
81
|
+
$color: mat.get-color-config($config-or-theme);
|
|
82
|
+
$typography: mat.get-typography-config($config-or-theme);
|
|
54
83
|
|
|
55
|
-
.
|
|
56
|
-
|
|
57
|
-
|
|
84
|
+
// If no actual typography configuration has been specified, create a default one.
|
|
85
|
+
@if not $typography {
|
|
86
|
+
$typography: mat.define-typography-config();
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
@if $color != null {
|
|
90
|
+
@include color($color);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
@if $typography != null {
|
|
94
|
+
@include typography($typography);
|
|
95
|
+
}
|
|
58
96
|
}
|
|
59
97
|
|
|
60
98
|
@keyframes shrink {
|
|
@@ -71,28 +109,6 @@
|
|
|
71
109
|
-webkit-animation: shrink 0.3s ease-in-out infinite alternate;
|
|
72
110
|
}
|
|
73
111
|
|
|
74
|
-
.prefix-padding {
|
|
75
|
-
padding-right: 4px;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
.leading-icon {
|
|
79
|
-
font-size: 16px;
|
|
80
|
-
width: 16px;
|
|
81
|
-
height: 16px;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
.suffix-icon {
|
|
85
|
-
font-size: 16px;
|
|
86
|
-
width: 16px;
|
|
87
|
-
height: 16px;
|
|
88
|
-
// padding-left: 4px;
|
|
89
|
-
.mat-icon {
|
|
90
|
-
font-size: 16px;
|
|
91
|
-
width: 16px;
|
|
92
|
-
height: 16px;
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
|
|
96
112
|
.clickable-icon {
|
|
97
113
|
cursor: pointer;
|
|
98
114
|
}
|
|
@@ -102,16 +118,8 @@
|
|
|
102
118
|
}
|
|
103
119
|
|
|
104
120
|
.elder-select-control {
|
|
105
|
-
height: 18px;
|
|
106
121
|
}
|
|
107
122
|
|
|
108
123
|
.elder-select-dropdown-input {
|
|
109
124
|
cursor: pointer;
|
|
110
125
|
}
|
|
111
|
-
|
|
112
|
-
.elder-select-arrow {
|
|
113
|
-
font-size: 18px;
|
|
114
|
-
width: 18px;
|
|
115
|
-
height: 18px;
|
|
116
|
-
cursor: pointer;
|
|
117
|
-
}
|
|
@@ -87,44 +87,6 @@
|
|
|
87
87
|
Material Form Controls
|
|
88
88
|
*******************************/
|
|
89
89
|
|
|
90
|
-
.elder-icon-button-small {
|
|
91
|
-
width: 18px !important;
|
|
92
|
-
height: 18px !important;
|
|
93
|
-
line-height: 18px !important;
|
|
94
|
-
|
|
95
|
-
.mat-icon {
|
|
96
|
-
width: 18px !important;
|
|
97
|
-
height: 18px !important;
|
|
98
|
-
line-height: 18px !important;
|
|
99
|
-
}
|
|
100
|
-
.material-icons {
|
|
101
|
-
font-size: 18px !important;
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
.elder-input-prefix-icon-container {
|
|
106
|
-
height: 18px !important;
|
|
107
|
-
min-width: 24px !important;
|
|
108
|
-
padding-right: 3px;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
.elder-icon-small-container {
|
|
112
|
-
height: 24px !important;
|
|
113
|
-
min-width: 24px !important;
|
|
114
|
-
padding: 3px;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
.elder-icon-small {
|
|
118
|
-
width: 18px !important;
|
|
119
|
-
height: 18px !important;
|
|
120
|
-
line-height: 18px !important;
|
|
121
|
-
font-size: 18px !important;
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
/******************************
|
|
125
|
-
Material Form Controls
|
|
126
|
-
*******************************/
|
|
127
|
-
|
|
128
90
|
.elder-form-control {
|
|
129
91
|
width: 180px;
|
|
130
92
|
overflow: hidden; // This allows flex items to shrink (min/max is not defaulting auto)
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
@use 'sass:list';
|
|
2
|
+
@use 'sass:map';
|
|
3
|
+
@use 'sass:math';
|
|
4
|
+
@use 'sass:meta';
|
|
5
|
+
@use 'sass:string';
|
|
6
|
+
|
|
7
|
+
/// Coerce a value to `em` if it is a unitless number, otherwise returns
|
|
8
|
+
/// the value provided.
|
|
9
|
+
@function coerce-unitless-to-em($value) {
|
|
10
|
+
@return if(math.is-unitless($value), 1em * $value, $value);
|
|
11
|
+
}
|