@ng-matero/ng-select 1.0.2 → 1.1.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/README.md +27 -0
- package/_index.scss +37 -39
- package/fesm2022/ng-matero-ng-select.mjs +66 -66
- package/fesm2022/ng-matero-ng-select.mjs.map +1 -1
- package/index.d.ts +1 -1
- package/package.json +1 -1
- package/src/lib/ng-select.scss +6 -5
package/README.md
CHANGED
|
@@ -36,6 +36,16 @@ npm install @ng-matero/ng-select --save
|
|
|
36
36
|
--ns-multi-value-background-color
|
|
37
37
|
--ns-multi-value-remove-hover-text-color
|
|
38
38
|
--ns-multi-value-remove-hover-background-color
|
|
39
|
+
--ns-multi-value-remove-icon-size
|
|
40
|
+
--ns-multi-value-remove-padding
|
|
41
|
+
--ns-multi-value-gap
|
|
42
|
+
--ns-multi-value-shape
|
|
43
|
+
--ns-multi-value-vertical-padding
|
|
44
|
+
--ns-multi-value-horizontal-padding
|
|
45
|
+
--ns-multi-value-text-size
|
|
46
|
+
--ns-multi-value-line-height
|
|
47
|
+
--ns-multi-value-label-padding
|
|
48
|
+
|
|
39
49
|
--ns-control-background-color
|
|
40
50
|
--ns-control-outline-color
|
|
41
51
|
--ns-control-hover-outline-color
|
|
@@ -43,18 +53,35 @@ npm install @ng-matero/ng-select --save
|
|
|
43
53
|
--ns-control-focus-shadow
|
|
44
54
|
--ns-control-disabled-outline-color
|
|
45
55
|
--ns-control-disabled-background-color
|
|
56
|
+
--ns-control-shape
|
|
57
|
+
--ns-control-min-height
|
|
46
58
|
--ns-placeholder-text-color
|
|
59
|
+
--ns-value-container-vertical-padding
|
|
60
|
+
--ns-value-container-horizontal-padding
|
|
61
|
+
|
|
47
62
|
--ns-indicator-color
|
|
48
63
|
--ns-indicator-hover-color
|
|
49
64
|
--ns-indicator-focus-color
|
|
50
65
|
--ns-indicator-focus-hover-color
|
|
66
|
+
--ns-indicator-padding
|
|
67
|
+
|
|
51
68
|
--ns-panel-background-color
|
|
52
69
|
--ns-panel-shadow
|
|
70
|
+
--ns-panel-shape
|
|
71
|
+
--ns-panel-vertical-padding
|
|
72
|
+
--ns-panel-vertical-margin
|
|
73
|
+
--ns-panel-max-height
|
|
74
|
+
|
|
53
75
|
--ns-option-hover-background-color
|
|
54
76
|
--ns-option-selected-text-color
|
|
55
77
|
--ns-option-selected-background-color
|
|
56
78
|
--ns-option-disabled-text-color
|
|
79
|
+
--ns-option-child-indent
|
|
80
|
+
--ns-optgroup-padding
|
|
57
81
|
--ns-optgroup-text-color
|
|
82
|
+
--ns-optgroup-text-size
|
|
83
|
+
--ns-option-padding
|
|
84
|
+
--ns-tag-option-gap
|
|
58
85
|
```
|
|
59
86
|
|
|
60
87
|
</details>
|
package/_index.scss
CHANGED
|
@@ -26,56 +26,50 @@
|
|
|
26
26
|
--ns-optgroup-text-color: light-dark(rgb(153, 153, 153), rgb(107, 119, 140));
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
-
.ng-select-single {
|
|
30
|
-
.ng-select-input-container {
|
|
31
|
-
padding: 0 8px;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
|
|
35
29
|
.ng-select-multiple {
|
|
36
30
|
.ng-select-value-container {
|
|
37
|
-
gap: 4px;
|
|
31
|
+
gap: var(--ns-multi-value-gap, 4px);
|
|
38
32
|
}
|
|
39
33
|
|
|
40
34
|
.ng-select-value {
|
|
41
|
-
|
|
35
|
+
padding: var(--ns-multi-value-vertical-padding, 3px)
|
|
36
|
+
var(--ns-multi-value-horizontal-padding, 3px);
|
|
42
37
|
color: var(--ns-multi-value-text-color, rgb(51, 51, 51));
|
|
43
38
|
background-color: var(--ns-multi-value-background-color, rgb(230, 230, 230));
|
|
44
|
-
border-radius: 2px;
|
|
39
|
+
border-radius: var(--ns-multi-value-shape, 2px);
|
|
40
|
+
font-size: var(--ns-multi-value-text-size, 85%);
|
|
41
|
+
line-height: var(--ns-multi-value-line-height, 16px);
|
|
45
42
|
}
|
|
46
43
|
|
|
47
44
|
.ng-select-value-label {
|
|
48
|
-
padding: 3px
|
|
49
|
-
padding-inline: 6px 3px;
|
|
50
|
-
line-height: 16px;
|
|
45
|
+
padding: var(--ns-multi-value-label-padding, 0 3px);
|
|
51
46
|
overflow: hidden;
|
|
52
47
|
}
|
|
53
48
|
|
|
54
|
-
&.ng-select-disabled,
|
|
55
|
-
.ng-select-value-disabled {
|
|
56
|
-
.ng-select-value-label {
|
|
57
|
-
padding-inline: 6px;
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
|
|
61
49
|
.ng-select-value-remove {
|
|
62
50
|
display: inline-flex;
|
|
63
51
|
align-items: center;
|
|
64
|
-
padding: 4px;
|
|
65
|
-
|
|
52
|
+
padding: var(--ns-multi-value-remove-padding, 4px);
|
|
53
|
+
margin-block: calc(var(--ns-multi-value-vertical-padding, 3px) * -1);
|
|
54
|
+
margin-inline-end: calc(var(--ns-multi-value-horizontal-padding, 3px) * -1);
|
|
55
|
+
border-radius: var(--ns-multi-value-shape, 2px);
|
|
66
56
|
|
|
67
57
|
&:hover {
|
|
68
58
|
color: var(--ns-multi-value-remove-hover-text-color, rgb(222, 53, 11));
|
|
69
59
|
background-color: var(--ns-multi-value-remove-hover-background-color, rgb(255, 189, 173));
|
|
70
60
|
}
|
|
71
61
|
}
|
|
62
|
+
|
|
63
|
+
.ng-select-input-container {
|
|
64
|
+
padding: 0;
|
|
65
|
+
}
|
|
72
66
|
}
|
|
73
67
|
|
|
74
68
|
.ng-select-control {
|
|
75
|
-
min-height: 38px;
|
|
69
|
+
min-height: var(--ns-control-min-height, 38px);
|
|
76
70
|
background-color: var(--ns-control-background-color, rgb(255, 255, 255));
|
|
77
71
|
border: 1px solid var(--ns-control-outline-color, rgb(204, 204, 204));
|
|
78
|
-
border-radius: 4px;
|
|
72
|
+
border-radius: var(--ns-control-shape, 4px);
|
|
79
73
|
|
|
80
74
|
&:hover {
|
|
81
75
|
border-color: var(--ns-control-hover-outline-color, rgb(179, 179, 179));
|
|
@@ -93,7 +87,8 @@
|
|
|
93
87
|
}
|
|
94
88
|
|
|
95
89
|
.ng-select-value-container {
|
|
96
|
-
padding: 2px
|
|
90
|
+
padding: var(--ns-value-container-vertical-padding, 2px)
|
|
91
|
+
var(--ns-value-container-horizontal-padding, 8px);
|
|
97
92
|
overflow: hidden;
|
|
98
93
|
}
|
|
99
94
|
|
|
@@ -108,12 +103,15 @@
|
|
|
108
103
|
color: var(--ns-placeholder-text-color, rgb(128, 128, 128));
|
|
109
104
|
}
|
|
110
105
|
|
|
106
|
+
.ng-select-input-container {
|
|
107
|
+
padding: 0 var(--ns-value-container-horizontal-padding, 8px);
|
|
108
|
+
}
|
|
109
|
+
|
|
111
110
|
.ng-select-clear,
|
|
112
111
|
.ng-select-arrow {
|
|
113
|
-
position: relative;
|
|
114
112
|
display: inline-flex;
|
|
115
113
|
align-items: center;
|
|
116
|
-
padding: 8px;
|
|
114
|
+
padding: var(--ns-indicator-padding, 8px);
|
|
117
115
|
color: var(--ns-indicator-color, rgb(204, 204, 204));
|
|
118
116
|
line-height: 1;
|
|
119
117
|
transition: color 150ms;
|
|
@@ -134,7 +132,7 @@
|
|
|
134
132
|
.ng-select-arrow::before {
|
|
135
133
|
content: '';
|
|
136
134
|
position: absolute;
|
|
137
|
-
inset-block: 8px;
|
|
135
|
+
inset-block: var(--ns-indicator-padding, 8px);
|
|
138
136
|
inset-inline-start: 0;
|
|
139
137
|
display: inline-block;
|
|
140
138
|
width: 1px;
|
|
@@ -142,19 +140,19 @@
|
|
|
142
140
|
}
|
|
143
141
|
|
|
144
142
|
.ng-select-panel {
|
|
145
|
-
border-radius: 4px;
|
|
143
|
+
border-radius: var(--ns-panel-shape, 4px);
|
|
146
144
|
background-color: var(--ns-panel-background-color, rgb(255, 255, 255));
|
|
147
145
|
box-shadow: var(--ns-panel-shadow, rgba(0, 0, 0, 0.1) 0 0 0 1px, rgba(0, 0, 0, 0.1) 0 4px 12px);
|
|
148
146
|
overflow: hidden;
|
|
149
147
|
|
|
150
148
|
&.ng-select-bottom {
|
|
151
149
|
top: 100%;
|
|
152
|
-
margin: 8px 0;
|
|
150
|
+
margin: var(--ns-panel-vertical-margin, 8px) 0;
|
|
153
151
|
}
|
|
154
152
|
|
|
155
153
|
&.ng-select-top {
|
|
156
154
|
bottom: 100%;
|
|
157
|
-
margin: 8px 0;
|
|
155
|
+
margin: var(--ns-panel-vertical-margin, 8px) 0;
|
|
158
156
|
}
|
|
159
157
|
|
|
160
158
|
&.ng-select-right {
|
|
@@ -169,23 +167,23 @@
|
|
|
169
167
|
}
|
|
170
168
|
|
|
171
169
|
.ng-select-panel-header {
|
|
172
|
-
padding: 8px 12px;
|
|
170
|
+
padding: var(--ns-option-padding, 8px 12px);
|
|
173
171
|
border-bottom: 1px solid var(--ns-control-outline-color, rgb(204, 204, 204));
|
|
174
172
|
}
|
|
175
173
|
|
|
176
174
|
.ng-select-panel-footer {
|
|
177
|
-
padding: 8px 12px;
|
|
175
|
+
padding: var(--ns-option-padding, 8px 12px);
|
|
178
176
|
border-top: 1px solid var(--ns-control-outline-color, rgb(204, 204, 204));
|
|
179
177
|
}
|
|
180
178
|
|
|
181
179
|
.ng-select-listbox {
|
|
182
|
-
padding: 4px 0;
|
|
180
|
+
padding: var(--ns-panel-vertical-padding, 4px) 0;
|
|
183
181
|
}
|
|
184
182
|
|
|
185
183
|
.ng-select-optgroup {
|
|
186
|
-
padding: 8px 10px;
|
|
184
|
+
padding: var(--ns-optgroup-padding, 8px 10px);
|
|
187
185
|
color: var(--ns-optgroup-text-color, rgb(153, 153, 153));
|
|
188
|
-
font-size: 75
|
|
186
|
+
font-size: var(--ns-optgroup-text-size, 75%);
|
|
189
187
|
|
|
190
188
|
&.ng-select-option-marked {
|
|
191
189
|
background-color: var(--ns-option-hover-background-color, rgb(222, 235, 255));
|
|
@@ -199,7 +197,7 @@
|
|
|
199
197
|
}
|
|
200
198
|
|
|
201
199
|
.ng-select-option {
|
|
202
|
-
padding: 8px 12px;
|
|
200
|
+
padding: var(--ns-option-padding, 8px 12px);
|
|
203
201
|
color: inherit;
|
|
204
202
|
background-color: transparent;
|
|
205
203
|
|
|
@@ -218,15 +216,15 @@
|
|
|
218
216
|
}
|
|
219
217
|
|
|
220
218
|
&.ng-select-option-child {
|
|
221
|
-
padding-inline-start: 20px;
|
|
219
|
+
padding-inline-start: var(--ns-option-child-indent, 20px);
|
|
222
220
|
}
|
|
223
221
|
}
|
|
224
222
|
|
|
225
223
|
.ng-select-tag-option {
|
|
226
224
|
display: flex;
|
|
227
|
-
gap: 8px;
|
|
225
|
+
gap: var(--ns-tag-option-gap, 8px);
|
|
228
226
|
}
|
|
229
227
|
|
|
230
228
|
.ng-select-virtual-scroll-content {
|
|
231
|
-
padding: 4px 0;
|
|
229
|
+
padding: var(--ns-panel-vertical-padding, 4px) 0;
|
|
232
230
|
}
|