@keenmate/web-multiselect 1.0.0 → 1.2.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 +166 -110
- package/dist/multiselect.js +1121 -1088
- package/dist/multiselect.umd.js +43 -43
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/scss/_badges-display.scss +76 -76
- package/src/scss/_css-variables.scss +387 -215
- package/src/scss/_input-dropdown.scss +101 -70
- package/src/scss/_modifiers.scss +38 -38
- package/src/scss/_options.scss +75 -70
- package/src/scss/_rtl.scss +31 -31
- package/src/scss/_tooltips-popover.scss +51 -51
- package/src/scss/_variables.scss +34 -2
package/src/scss/_rtl.scss
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
// RTL (Right-to-Left) SUPPORT
|
|
3
3
|
// ==============================================================================
|
|
4
4
|
// Styles for RTL languages (Arabic, Hebrew, etc.)
|
|
5
|
-
// Applied when .
|
|
5
|
+
// Applied when .ms--rtl class is present
|
|
6
6
|
|
|
7
7
|
@use 'variables' as *;
|
|
8
8
|
|
|
@@ -10,26 +10,26 @@
|
|
|
10
10
|
// INPUT & TOGGLE ICON
|
|
11
11
|
// ==============================================================================
|
|
12
12
|
|
|
13
|
-
.
|
|
14
|
-
.
|
|
13
|
+
.ms--rtl {
|
|
14
|
+
.ms__input-wrapper {
|
|
15
15
|
direction: rtl;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
.
|
|
18
|
+
.ms__input {
|
|
19
19
|
text-align: right;
|
|
20
|
-
padding-left: var(--
|
|
21
|
-
padding-right: var(--
|
|
20
|
+
padding-left: var(--ms-input-padding-right, $ml-input-padding-right);
|
|
21
|
+
padding-right: var(--ms-input-padding-h, $ml-input-padding-h);
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
// Move toggle icon to left side
|
|
25
|
-
.
|
|
26
|
-
left: var(--
|
|
25
|
+
.ms__toggle {
|
|
26
|
+
left: var(--ms-toggle-right, $ml-toggle-right) !important;
|
|
27
27
|
right: auto !important;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
// Move count badge to left side
|
|
31
|
-
.
|
|
32
|
-
left: var(--
|
|
31
|
+
.ms__counter {
|
|
32
|
+
left: var(--ms-counter-offset, $ml-counter-offset) !important;
|
|
33
33
|
right: auto !important;
|
|
34
34
|
}
|
|
35
35
|
|
|
@@ -37,27 +37,27 @@
|
|
|
37
37
|
// DROPDOWN OPTIONS
|
|
38
38
|
// ==============================================================================
|
|
39
39
|
|
|
40
|
-
.
|
|
40
|
+
.ms__dropdown {
|
|
41
41
|
direction: rtl;
|
|
42
42
|
text-align: right;
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
// Checkbox on right side
|
|
46
|
-
.
|
|
46
|
+
.ms__option {
|
|
47
47
|
flex-direction: row-reverse;
|
|
48
48
|
}
|
|
49
49
|
|
|
50
|
-
.
|
|
51
|
-
margin-left: var(--
|
|
50
|
+
.ms__checkbox {
|
|
51
|
+
margin-left: var(--ms-spacing-sm, $ml-spacing-sm);
|
|
52
52
|
margin-right: 0;
|
|
53
53
|
}
|
|
54
54
|
|
|
55
|
-
.
|
|
55
|
+
.ms__option-content {
|
|
56
56
|
text-align: right;
|
|
57
57
|
}
|
|
58
58
|
|
|
59
|
-
.
|
|
60
|
-
margin-left: var(--
|
|
59
|
+
.ms__option-icon {
|
|
60
|
+
margin-left: var(--ms-spacing-xs, $ml-spacing-xs);
|
|
61
61
|
margin-right: 0;
|
|
62
62
|
}
|
|
63
63
|
|
|
@@ -65,36 +65,36 @@
|
|
|
65
65
|
// BADGES LAYOUT
|
|
66
66
|
// ==============================================================================
|
|
67
67
|
|
|
68
|
-
.
|
|
68
|
+
.ms__badges {
|
|
69
69
|
direction: rtl;
|
|
70
70
|
}
|
|
71
71
|
|
|
72
72
|
// Badges flow right-to-left
|
|
73
|
-
.
|
|
73
|
+
.ms__badge {
|
|
74
74
|
flex-direction: row-reverse;
|
|
75
75
|
}
|
|
76
76
|
|
|
77
77
|
// Remove button on left side of badge
|
|
78
|
-
.
|
|
79
|
-
border-radius: var(--
|
|
80
|
-
border-left: var(--
|
|
78
|
+
.ms__badge-remove {
|
|
79
|
+
border-radius: var(--ms-badge-remove-border-radius-rtl, $ml-badge-border-radius) 0 0 var(--ms-badge-remove-border-radius-rtl, $ml-badge-border-radius);
|
|
80
|
+
border-left: var(--ms-badge-remove-border, $ml-badge-remove-border);
|
|
81
81
|
border-right: none;
|
|
82
82
|
}
|
|
83
83
|
|
|
84
84
|
// Badge text rounded on right
|
|
85
|
-
.
|
|
86
|
-
border-radius: 0 var(--
|
|
85
|
+
.ms__badge-text {
|
|
86
|
+
border-radius: 0 var(--ms-badge-text-border-radius-rtl, $ml-badge-border-radius) var(--ms-badge-text-border-radius-rtl, $ml-badge-border-radius) 0;
|
|
87
87
|
}
|
|
88
88
|
|
|
89
89
|
// ==============================================================================
|
|
90
90
|
// COUNT DISPLAY
|
|
91
91
|
// ==============================================================================
|
|
92
92
|
|
|
93
|
-
.
|
|
93
|
+
.ms__count-display {
|
|
94
94
|
direction: rtl;
|
|
95
95
|
}
|
|
96
96
|
|
|
97
|
-
.
|
|
97
|
+
.ms__counter-wrapper {
|
|
98
98
|
flex-direction: row-reverse;
|
|
99
99
|
}
|
|
100
100
|
|
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
// SELECTED POPOVER
|
|
103
103
|
// ==============================================================================
|
|
104
104
|
|
|
105
|
-
.
|
|
105
|
+
.ms__selected-popover {
|
|
106
106
|
direction: rtl;
|
|
107
107
|
text-align: right;
|
|
108
108
|
}
|
|
@@ -111,7 +111,7 @@
|
|
|
111
111
|
// ACTIONS
|
|
112
112
|
// ==============================================================================
|
|
113
113
|
|
|
114
|
-
.
|
|
114
|
+
.ms__actions {
|
|
115
115
|
direction: rtl;
|
|
116
116
|
}
|
|
117
117
|
|
|
@@ -119,7 +119,7 @@
|
|
|
119
119
|
// GROUPS
|
|
120
120
|
// ==============================================================================
|
|
121
121
|
|
|
122
|
-
.
|
|
122
|
+
.ms__group-label {
|
|
123
123
|
text-align: right;
|
|
124
124
|
}
|
|
125
125
|
|
|
@@ -127,7 +127,7 @@
|
|
|
127
127
|
// EMPTY STATE
|
|
128
128
|
// ==============================================================================
|
|
129
129
|
|
|
130
|
-
.
|
|
130
|
+
.ms__empty {
|
|
131
131
|
text-align: right;
|
|
132
132
|
}
|
|
133
133
|
|
|
@@ -135,7 +135,7 @@
|
|
|
135
135
|
// HINT
|
|
136
136
|
// ==============================================================================
|
|
137
137
|
|
|
138
|
-
.
|
|
138
|
+
.ms__hint {
|
|
139
139
|
direction: rtl;
|
|
140
140
|
text-align: right;
|
|
141
141
|
}
|
|
@@ -9,23 +9,23 @@
|
|
|
9
9
|
// BADGE TOOLTIPS
|
|
10
10
|
// ==============================================================================
|
|
11
11
|
|
|
12
|
-
.
|
|
12
|
+
.ms__badge-tooltip {
|
|
13
13
|
position: fixed;
|
|
14
|
-
z-index: var(--
|
|
14
|
+
z-index: var(--ms-tooltip-z-index, $ml-tooltip-z-index);
|
|
15
15
|
opacity: 0;
|
|
16
16
|
visibility: hidden;
|
|
17
|
-
transition: opacity var(--
|
|
18
|
-
|
|
19
|
-
background: var(--
|
|
20
|
-
color: var(--
|
|
21
|
-
padding: var(--
|
|
22
|
-
border-radius: var(--
|
|
23
|
-
font-size: var(--
|
|
24
|
-
line-height: var(--
|
|
25
|
-
max-width: var(--
|
|
17
|
+
transition: opacity var(--ms-transition-normal, $ml-transition-normal) ease, visibility var(--ms-transition-normal, $ml-transition-normal) ease;
|
|
18
|
+
|
|
19
|
+
background: var(--ms-tooltip-background, $ml-tooltip-bg);
|
|
20
|
+
color: var(--ms-tooltip-text-color, $ml-tooltip-color);
|
|
21
|
+
padding: var(--ms-tooltip-padding, $ml-tooltip-padding);
|
|
22
|
+
border-radius: var(--ms-tooltip-border-radius, $ml-tooltip-border-radius);
|
|
23
|
+
font-size: var(--ms-tooltip-font-size, $ml-tooltip-font-size);
|
|
24
|
+
line-height: var(--ms-line-height-relaxed, $ml-line-height-relaxed);
|
|
25
|
+
max-width: var(--ms-tooltip-max-width, $ml-tooltip-max-width);
|
|
26
26
|
word-wrap: break-word;
|
|
27
27
|
white-space: pre-wrap;
|
|
28
|
-
box-shadow: var(--
|
|
28
|
+
box-shadow: var(--ms-tooltip-shadow, $ml-tooltip-shadow);
|
|
29
29
|
pointer-events: none; // Prevent tooltip from interfering with mouse events
|
|
30
30
|
|
|
31
31
|
&--visible {
|
|
@@ -39,16 +39,16 @@
|
|
|
39
39
|
// ==============================================================================
|
|
40
40
|
|
|
41
41
|
// Selected items popover (for count display mode)
|
|
42
|
-
.
|
|
42
|
+
.ms__selected-popover {
|
|
43
43
|
display: none;
|
|
44
44
|
position: absolute;
|
|
45
|
-
z-index: var(--
|
|
46
|
-
background: var(--
|
|
47
|
-
border: var(--
|
|
48
|
-
border-radius: var(--
|
|
49
|
-
box-shadow: var(--
|
|
50
|
-
width: var(--
|
|
51
|
-
max-height: var(--
|
|
45
|
+
z-index: var(--ms-z-index-popover, $ml-z-index-popover);
|
|
46
|
+
background: var(--ms-selected-popover-background, $ml-selected-popover-bg);
|
|
47
|
+
border: var(--ms-selected-popover-border, $ml-selected-popover-border);
|
|
48
|
+
border-radius: var(--ms-selected-popover-border-radius, $ml-selected-popover-border-radius);
|
|
49
|
+
box-shadow: var(--ms-selected-popover-box-shadow, $ml-selected-popover-box-shadow);
|
|
50
|
+
width: var(--ms-selected-popover-width, $ml-selected-popover-width);
|
|
51
|
+
max-height: var(--ms-selected-popover-max-height, $ml-selected-popover-max-height);
|
|
52
52
|
overflow: hidden;
|
|
53
53
|
|
|
54
54
|
&--visible {
|
|
@@ -64,56 +64,56 @@
|
|
|
64
64
|
}
|
|
65
65
|
}
|
|
66
66
|
|
|
67
|
-
.
|
|
67
|
+
.ms__selected-popover-header {
|
|
68
68
|
display: flex;
|
|
69
69
|
align-items: center;
|
|
70
70
|
justify-content: space-between;
|
|
71
|
-
padding: var(--
|
|
72
|
-
background: var(--
|
|
73
|
-
border-bottom: var(--
|
|
74
|
-
font-size: var(--
|
|
75
|
-
font-weight: var(--
|
|
76
|
-
color: var(--
|
|
71
|
+
padding: var(--ms-selected-popover-header-padding, $ml-selected-popover-header-padding);
|
|
72
|
+
background: var(--ms-selected-popover-header-background, $ml-selected-popover-header-bg);
|
|
73
|
+
border-bottom: var(--ms-selected-popover-header-border-bottom, $ml-selected-popover-header-border-bottom);
|
|
74
|
+
font-size: var(--ms-selected-popover-header-font-size, $ml-selected-popover-header-font-size);
|
|
75
|
+
font-weight: var(--ms-selected-popover-header-font-weight, $ml-selected-popover-header-font-weight);
|
|
76
|
+
color: var(--ms-selected-popover-header-color, $ml-selected-popover-header-color);
|
|
77
77
|
}
|
|
78
78
|
|
|
79
|
-
.
|
|
79
|
+
.ms__selected-popover-close {
|
|
80
80
|
display: flex;
|
|
81
81
|
align-items: center;
|
|
82
82
|
justify-content: center;
|
|
83
|
-
width: var(--
|
|
84
|
-
height: var(--
|
|
83
|
+
width: var(--ms-popover-close-size, $ml-popover-close-size);
|
|
84
|
+
height: var(--ms-popover-close-size, $ml-popover-close-size);
|
|
85
85
|
padding: 0;
|
|
86
86
|
border: none;
|
|
87
|
-
background: var(--
|
|
88
|
-
color: var(--
|
|
89
|
-
font-size: var(--
|
|
90
|
-
line-height: var(--
|
|
87
|
+
background: var(--ms-selected-popover-close-background, $ml-selected-popover-close-bg);
|
|
88
|
+
color: var(--ms-selected-popover-close-color, $ml-selected-popover-close-color);
|
|
89
|
+
font-size: var(--ms-selected-popover-close-font-size, $ml-selected-popover-close-font-size);
|
|
90
|
+
line-height: var(--ms-line-height-none, $ml-line-height-none);
|
|
91
91
|
cursor: pointer;
|
|
92
|
-
border-radius: var(--
|
|
93
|
-
transition: all var(--
|
|
92
|
+
border-radius: var(--ms-selected-popover-close-border-radius, $ml-selected-popover-close-border-radius);
|
|
93
|
+
transition: all var(--ms-transition-fast, $ml-transition-fast) var(--ms-easing-snappy, $ml-easing-snappy);
|
|
94
94
|
|
|
95
95
|
&:hover {
|
|
96
|
-
background: var(--
|
|
97
|
-
color: var(--
|
|
96
|
+
background: var(--ms-selected-popover-close-background-hover, $ml-selected-popover-close-bg-hover);
|
|
97
|
+
color: var(--ms-selected-popover-close-color-hover, $ml-selected-popover-close-color-hover);
|
|
98
98
|
}
|
|
99
99
|
}
|
|
100
100
|
|
|
101
|
-
.
|
|
101
|
+
.ms__selected-popover-body {
|
|
102
102
|
display: flex;
|
|
103
103
|
flex-direction: column;
|
|
104
|
-
gap: var(--
|
|
105
|
-
padding: var(--
|
|
104
|
+
gap: var(--ms-selected-popover-body-gap, $ml-selected-popover-body-gap);
|
|
105
|
+
padding: var(--ms-selected-popover-body-padding, $ml-selected-popover-body-padding);
|
|
106
106
|
overflow-y: auto;
|
|
107
|
-
max-height: var(--
|
|
107
|
+
max-height: var(--ms-selected-popover-body-max-height, $ml-selected-popover-body-max-height);
|
|
108
108
|
|
|
109
109
|
// Badges inside popover (non-virtual mode)
|
|
110
|
-
.
|
|
110
|
+
.ms__badge {
|
|
111
111
|
width: 100%;
|
|
112
112
|
min-height: fit-content; // Allow badges to expand based on content
|
|
113
|
-
line-height: var(--
|
|
113
|
+
line-height: var(--ms-line-height-relaxed, $ml-line-height-relaxed); // Override line-height: 1 to allow multi-line content
|
|
114
114
|
}
|
|
115
115
|
|
|
116
|
-
.
|
|
116
|
+
.ms__badge-text {
|
|
117
117
|
flex: 1;
|
|
118
118
|
min-width: 0; // Allow proper flex sizing
|
|
119
119
|
white-space: normal; // Explicitly allow wrapping
|
|
@@ -131,17 +131,17 @@
|
|
|
131
131
|
max-height: none; // Remove max-height constraint
|
|
132
132
|
padding: 0; // Remove padding as virtual scroll has its own spacing
|
|
133
133
|
|
|
134
|
-
.
|
|
134
|
+
.ms__badge {
|
|
135
135
|
// Fixed height for virtual scroll (default: 36px, configurable via badge-height attribute)
|
|
136
|
-
height: var(--
|
|
137
|
-
min-height: var(--
|
|
138
|
-
max-height: var(--
|
|
139
|
-
margin-bottom: var(--
|
|
136
|
+
height: var(--ms-badge-height-virtual, 36px);
|
|
137
|
+
min-height: var(--ms-badge-height-virtual, 36px);
|
|
138
|
+
max-height: var(--ms-badge-height-virtual, 36px);
|
|
139
|
+
margin-bottom: var(--ms-selected-popover-body-gap, $ml-selected-popover-body-gap); // Add gap between badges
|
|
140
140
|
overflow: hidden;
|
|
141
141
|
box-sizing: border-box;
|
|
142
142
|
}
|
|
143
143
|
|
|
144
|
-
.
|
|
144
|
+
.ms__badge-text {
|
|
145
145
|
// Enforce single-line truncation for virtual scroll fixed heights
|
|
146
146
|
white-space: nowrap;
|
|
147
147
|
overflow: hidden;
|
package/src/scss/_variables.scss
CHANGED
|
@@ -114,8 +114,8 @@ $ml-input-icon-spacing: 2.5rem !default;
|
|
|
114
114
|
$ml-counter-offset: 2rem !default;
|
|
115
115
|
$ml-option-icon-size: 1.25rem !default;
|
|
116
116
|
$ml-count-clear-size: 1rem !default;
|
|
117
|
-
$ml-badge-height: 1.
|
|
118
|
-
$ml-badge-remove-width: 1.
|
|
117
|
+
$ml-badge-height: 1.7rem !default;
|
|
118
|
+
$ml-badge-remove-width: 1.7rem !default;
|
|
119
119
|
$ml-popover-close-size: 1.5rem !default;
|
|
120
120
|
|
|
121
121
|
$ml-options-max-height: 20rem !default;
|
|
@@ -179,6 +179,35 @@ $ml-input-padding-right: $ml-input-icon-spacing !default;
|
|
|
179
179
|
$ml-input-placeholder-color: $ml-color-neutral-dark !default;
|
|
180
180
|
$ml-input-bg-disabled: rgba($ml-color-neutral-dark, $ml-opacity-disabled-bg) !default;
|
|
181
181
|
|
|
182
|
+
// Input Size Variants
|
|
183
|
+
// ==============================================================================
|
|
184
|
+
// All values in px for consistent sizing across different root font sizes
|
|
185
|
+
// Heights: xs=24px, sm=28px, md=35px, lg=42px, xl=50px
|
|
186
|
+
$ms-input-size-xs-font: 12px !default;
|
|
187
|
+
$ms-input-size-xs-padding-v: 4px !default;
|
|
188
|
+
$ms-input-size-xs-padding-h: 8px !default;
|
|
189
|
+
$ms-input-size-xs-height: 24px !default;
|
|
190
|
+
|
|
191
|
+
$ms-input-size-sm-font: 13px !default;
|
|
192
|
+
$ms-input-size-sm-padding-v: 5px !default;
|
|
193
|
+
$ms-input-size-sm-padding-h: 8px !default;
|
|
194
|
+
$ms-input-size-sm-height: 28px !default;
|
|
195
|
+
|
|
196
|
+
$ms-input-size-md-font: 14px !default;
|
|
197
|
+
$ms-input-size-md-padding-v: 8px !default;
|
|
198
|
+
$ms-input-size-md-padding-h: 12px !default;
|
|
199
|
+
$ms-input-size-md-height: 35px !default;
|
|
200
|
+
|
|
201
|
+
$ms-input-size-lg-font: 16px !default;
|
|
202
|
+
$ms-input-size-lg-padding-v: 10px !default;
|
|
203
|
+
$ms-input-size-lg-padding-h: 14px !default;
|
|
204
|
+
$ms-input-size-lg-height: 42px !default;
|
|
205
|
+
|
|
206
|
+
$ms-input-size-xl-font: 18px !default;
|
|
207
|
+
$ms-input-size-xl-padding-v: 12px !default;
|
|
208
|
+
$ms-input-size-xl-padding-h: 16px !default;
|
|
209
|
+
$ms-input-size-xl-height: 50px !default;
|
|
210
|
+
|
|
182
211
|
// Text Colors
|
|
183
212
|
// ==============================================================================
|
|
184
213
|
$ml-text-primary: $ml-color-neutral-darkest !default;
|
|
@@ -455,6 +484,9 @@ $ml-selected-popover-body-padding: $ml-spacing-sm !default;
|
|
|
455
484
|
// ==============================================================================
|
|
456
485
|
$ml-checkbox-offset: 0.125rem !default;
|
|
457
486
|
$ml-checkbox-margin-top: $ml-checkbox-offset !default;
|
|
487
|
+
$ml-checkbox-margin-right: 0 !default; // Horizontal spacing handled by flexbox gap
|
|
488
|
+
$ml-checkbox-margin-bottom: 0 !default;
|
|
489
|
+
$ml-checkbox-margin-left: 0 !default;
|
|
458
490
|
$ml-checkbox-size: 16px !default; // Width and height of checkbox
|
|
459
491
|
$ml-checkbox-scale: 1 !default; // Scale multiplier for checkbox size
|
|
460
492
|
|