@keenmate/web-multiselect 1.5.1 → 1.6.1
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 +70 -51
- package/dist/multiselect.js +944 -900
- package/dist/multiselect.umd.js +12 -12
- package/dist/style.css +1 -1
- package/package.json +4 -5
- package/src/css/_badges-display.css +251 -0
- package/src/css/_base.css +43 -0
- package/src/css/_debug.css +57 -0
- package/src/css/_input-dropdown.css +263 -0
- package/src/css/_modifiers.css +32 -0
- package/src/css/_options.css +365 -0
- package/src/css/_rtl.css +150 -0
- package/src/css/_tooltips-popover.css +173 -0
- package/src/css/_variables.css +586 -0
- package/src/css/main.css +27 -0
- package/src/scss/_badges-display.scss +0 -247
- package/src/scss/_base.scss +0 -42
- package/src/scss/_css-variables.scss +0 -612
- package/src/scss/_debug.scss +0 -60
- package/src/scss/_input-dropdown.scss +0 -259
- package/src/scss/_modifiers.scss +0 -36
- package/src/scss/_options.scss +0 -358
- package/src/scss/_rtl.scss +0 -144
- package/src/scss/_tooltips-popover.scss +0 -172
- package/src/scss/_variables.scss +0 -520
- package/src/scss/main.scss +0 -28
package/src/css/_rtl.css
ADDED
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
/* ==============================================================================
|
|
2
|
+
RTL (Right-to-Left) SUPPORT
|
|
3
|
+
==============================================================================
|
|
4
|
+
Styles for RTL languages (Arabic, Hebrew, etc.)
|
|
5
|
+
Applied when .ms--rtl class is present
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
/* ==============================================================================
|
|
9
|
+
INPUT & TOGGLE ICON
|
|
10
|
+
==============================================================================
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
.ms--rtl .ms__input-wrapper {
|
|
14
|
+
direction: rtl;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.ms--rtl .ms__input {
|
|
18
|
+
text-align: right;
|
|
19
|
+
padding-left: var(--ms-input-padding-right);
|
|
20
|
+
padding-right: var(--ms-input-padding-h);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/* Move toggle icon to left side */
|
|
24
|
+
.ms--rtl .ms__toggle {
|
|
25
|
+
left: var(--ms-toggle-right) !important;
|
|
26
|
+
right: auto !important;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/* Move count badge to left side */
|
|
30
|
+
.ms--rtl .ms__counter {
|
|
31
|
+
left: var(--ms-counter-offset) !important;
|
|
32
|
+
right: auto !important;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/* ==============================================================================
|
|
36
|
+
DROPDOWN OPTIONS
|
|
37
|
+
==============================================================================
|
|
38
|
+
*/
|
|
39
|
+
|
|
40
|
+
.ms--rtl .ms__dropdown {
|
|
41
|
+
direction: rtl;
|
|
42
|
+
text-align: right;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* Checkbox on right side */
|
|
46
|
+
.ms--rtl .ms__option {
|
|
47
|
+
flex-direction: row-reverse;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.ms--rtl .ms__checkbox {
|
|
51
|
+
margin-left: var(--ms-spacing-sm);
|
|
52
|
+
margin-right: 0;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.ms--rtl .ms__option-content {
|
|
56
|
+
text-align: right;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.ms--rtl .ms__option-icon {
|
|
60
|
+
margin-left: var(--ms-spacing-xs);
|
|
61
|
+
margin-right: 0;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* ==============================================================================
|
|
65
|
+
BADGES LAYOUT
|
|
66
|
+
==============================================================================
|
|
67
|
+
*/
|
|
68
|
+
|
|
69
|
+
.ms--rtl .ms__badges {
|
|
70
|
+
direction: rtl;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/* Badges flow right-to-left */
|
|
74
|
+
.ms--rtl .ms__badge {
|
|
75
|
+
flex-direction: row-reverse;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* Remove button on left side of badge (RTL) */
|
|
79
|
+
.ms--rtl .ms__badge-remove {
|
|
80
|
+
border-radius: var(--ms-badge-border-radius) 0 0 var(--ms-badge-border-radius);
|
|
81
|
+
border-left: var(--ms-badge-remove-border);
|
|
82
|
+
border-right: none;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* Badge text rounded on right (RTL) */
|
|
86
|
+
.ms--rtl .ms__badge-text {
|
|
87
|
+
border-radius: 0 var(--ms-badge-border-radius) var(--ms-badge-border-radius) 0;
|
|
88
|
+
border-right: var(--ms-badge-text-border);
|
|
89
|
+
border-left: none;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
/* ==============================================================================
|
|
93
|
+
COUNT DISPLAY
|
|
94
|
+
==============================================================================
|
|
95
|
+
*/
|
|
96
|
+
|
|
97
|
+
.ms--rtl .ms__count-display {
|
|
98
|
+
direction: rtl;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.ms--rtl .ms__counter-wrapper {
|
|
102
|
+
flex-direction: row-reverse;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
/* ==============================================================================
|
|
106
|
+
SELECTED POPOVER
|
|
107
|
+
==============================================================================
|
|
108
|
+
*/
|
|
109
|
+
|
|
110
|
+
.ms--rtl .ms__selected-popover {
|
|
111
|
+
direction: rtl;
|
|
112
|
+
text-align: right;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
/* ==============================================================================
|
|
116
|
+
ACTIONS
|
|
117
|
+
==============================================================================
|
|
118
|
+
*/
|
|
119
|
+
|
|
120
|
+
.ms--rtl .ms__actions {
|
|
121
|
+
direction: rtl;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
/* ==============================================================================
|
|
125
|
+
GROUPS
|
|
126
|
+
==============================================================================
|
|
127
|
+
*/
|
|
128
|
+
|
|
129
|
+
.ms--rtl .ms__group-label {
|
|
130
|
+
text-align: right;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
/* ==============================================================================
|
|
134
|
+
EMPTY STATE
|
|
135
|
+
==============================================================================
|
|
136
|
+
*/
|
|
137
|
+
|
|
138
|
+
.ms--rtl .ms__empty {
|
|
139
|
+
text-align: right;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
/* ==============================================================================
|
|
143
|
+
HINT
|
|
144
|
+
==============================================================================
|
|
145
|
+
*/
|
|
146
|
+
|
|
147
|
+
.ms--rtl .ms__hint {
|
|
148
|
+
direction: rtl;
|
|
149
|
+
text-align: right;
|
|
150
|
+
}
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
/* ==============================================================================
|
|
2
|
+
TOOLTIPS & POPOVER
|
|
3
|
+
==============================================================================
|
|
4
|
+
Badge tooltips and selected items popover
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
/* ==============================================================================
|
|
8
|
+
BADGE TOOLTIPS
|
|
9
|
+
==============================================================================
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
.ms__badge-tooltip {
|
|
13
|
+
position: fixed;
|
|
14
|
+
z-index: var(--ms-tooltip-z-index);
|
|
15
|
+
opacity: 0;
|
|
16
|
+
visibility: hidden;
|
|
17
|
+
transition: opacity var(--ms-transition-normal) ease, visibility var(--ms-transition-normal) ease;
|
|
18
|
+
|
|
19
|
+
background: var(--ms-tooltip-background);
|
|
20
|
+
color: var(--ms-tooltip-text-color);
|
|
21
|
+
padding: var(--ms-tooltip-padding);
|
|
22
|
+
border-radius: var(--ms-tooltip-border-radius);
|
|
23
|
+
font-size: var(--ms-tooltip-font-size);
|
|
24
|
+
line-height: var(--ms-line-height-relaxed);
|
|
25
|
+
max-width: var(--ms-tooltip-max-width);
|
|
26
|
+
word-wrap: break-word;
|
|
27
|
+
white-space: pre-wrap;
|
|
28
|
+
box-shadow: var(--ms-tooltip-shadow);
|
|
29
|
+
pointer-events: none; /* Prevent tooltip from interfering with mouse events */
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.ms__badge-tooltip--visible {
|
|
33
|
+
opacity: 1;
|
|
34
|
+
visibility: visible;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/* ==============================================================================
|
|
38
|
+
SELECTED ITEMS POPOVER
|
|
39
|
+
==============================================================================
|
|
40
|
+
*/
|
|
41
|
+
|
|
42
|
+
/* Selected items popover (for count display mode) */
|
|
43
|
+
.ms__selected-popover {
|
|
44
|
+
display: none;
|
|
45
|
+
position: absolute;
|
|
46
|
+
z-index: var(--ms-z-index-popover);
|
|
47
|
+
background: var(--ms-selected-popover-background);
|
|
48
|
+
border: var(--ms-selected-popover-border);
|
|
49
|
+
border-radius: var(--ms-selected-popover-border-radius);
|
|
50
|
+
box-shadow: var(--ms-selected-popover-box-shadow);
|
|
51
|
+
width: var(--ms-selected-popover-width);
|
|
52
|
+
max-height: var(--ms-selected-popover-max-height);
|
|
53
|
+
overflow: hidden;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.ms__selected-popover--visible {
|
|
57
|
+
display: flex;
|
|
58
|
+
flex-direction: column;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.ms__selected-popover--virtual {
|
|
62
|
+
/* In virtual scroll mode, let the body container handle scrolling (matches dropdown pattern) */
|
|
63
|
+
display: block; /* Change from flex to block (like dropdown) */
|
|
64
|
+
overflow: visible;
|
|
65
|
+
max-height: none;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.ms__selected-popover-header {
|
|
69
|
+
display: flex;
|
|
70
|
+
align-items: center;
|
|
71
|
+
justify-content: space-between;
|
|
72
|
+
padding: var(--ms-selected-popover-header-padding);
|
|
73
|
+
background: var(--ms-selected-popover-header-background);
|
|
74
|
+
border-bottom: var(--ms-selected-popover-header-border-bottom);
|
|
75
|
+
font-size: var(--ms-selected-popover-header-font-size);
|
|
76
|
+
font-weight: var(--ms-selected-popover-header-font-weight);
|
|
77
|
+
color: var(--ms-selected-popover-header-color);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.ms__selected-popover-close {
|
|
81
|
+
display: flex;
|
|
82
|
+
align-items: center;
|
|
83
|
+
justify-content: center;
|
|
84
|
+
width: var(--ms-popover-close-size);
|
|
85
|
+
height: var(--ms-popover-close-size);
|
|
86
|
+
padding: 0;
|
|
87
|
+
border: none;
|
|
88
|
+
background: var(--ms-selected-popover-close-background);
|
|
89
|
+
color: var(--ms-selected-popover-close-color);
|
|
90
|
+
font-size: var(--ms-selected-popover-close-font-size);
|
|
91
|
+
line-height: var(--ms-line-height-none);
|
|
92
|
+
cursor: pointer;
|
|
93
|
+
border-radius: var(--ms-selected-popover-close-border-radius);
|
|
94
|
+
transition: all var(--ms-transition-fast) var(--ms-easing-snappy);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.ms__selected-popover-close:hover {
|
|
98
|
+
background: var(--ms-selected-popover-close-background-hover);
|
|
99
|
+
color: var(--ms-selected-popover-close-color-hover);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.ms__selected-popover-body {
|
|
103
|
+
display: flex;
|
|
104
|
+
flex-direction: column;
|
|
105
|
+
gap: var(--ms-selected-popover-body-gap);
|
|
106
|
+
padding: var(--ms-selected-popover-body-padding);
|
|
107
|
+
overflow-y: auto;
|
|
108
|
+
max-height: var(--ms-selected-popover-body-max-height);
|
|
109
|
+
|
|
110
|
+
/* Scrollbar styling */
|
|
111
|
+
scrollbar-width: thin; /* Firefox */
|
|
112
|
+
scrollbar-color: var(--ms-scrollbar-thumb-bg) var(--ms-scrollbar-track-bg);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.ms__selected-popover-body::-webkit-scrollbar {
|
|
116
|
+
width: var(--ms-scrollbar-width);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.ms__selected-popover-body::-webkit-scrollbar-track {
|
|
120
|
+
background: var(--ms-scrollbar-track-bg);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.ms__selected-popover-body::-webkit-scrollbar-thumb {
|
|
124
|
+
background: var(--ms-scrollbar-thumb-bg);
|
|
125
|
+
border-radius: var(--ms-scrollbar-thumb-border-radius);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.ms__selected-popover-body::-webkit-scrollbar-thumb:hover {
|
|
129
|
+
background: var(--ms-scrollbar-thumb-bg-hover);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
/* Badges inside popover (non-virtual mode) */
|
|
133
|
+
.ms__selected-popover-body .ms__badge {
|
|
134
|
+
width: 100%;
|
|
135
|
+
min-height: fit-content; /* Allow badges to expand based on content */
|
|
136
|
+
line-height: var(--ms-line-height-relaxed); /* Override line-height: 1 to allow multi-line content */
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.ms__selected-popover-body .ms__badge-text {
|
|
140
|
+
flex: 1;
|
|
141
|
+
min-width: 0; /* Allow proper flex sizing */
|
|
142
|
+
white-space: normal; /* Explicitly allow wrapping */
|
|
143
|
+
word-wrap: break-word; /* Break long words */
|
|
144
|
+
/* Remove overflow constraints to allow multi-line content */
|
|
145
|
+
/* overflow: hidden; */
|
|
146
|
+
/* text-overflow: ellipsis; */
|
|
147
|
+
/* white-space: nowrap; */
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
/* Virtual scroll mode */
|
|
151
|
+
.ms__selected-popover-body--virtual {
|
|
152
|
+
/* Let inline styles control overflow-y: auto (like dropdown does) */
|
|
153
|
+
display: block; /* Override flex display for virtual scroll */
|
|
154
|
+
max-height: none; /* Remove max-height constraint */
|
|
155
|
+
padding: 0; /* Remove padding as virtual scroll has its own spacing */
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.ms__selected-popover-body--virtual .ms__badge {
|
|
159
|
+
/* Fixed height for virtual scroll (default: 36px, configurable via badge-height attribute) */
|
|
160
|
+
height: var(--ms-badge-height-virtual, 36px);
|
|
161
|
+
min-height: var(--ms-badge-height-virtual, 36px);
|
|
162
|
+
max-height: var(--ms-badge-height-virtual, 36px);
|
|
163
|
+
margin-bottom: var(--ms-selected-popover-body-gap); /* Add gap between badges */
|
|
164
|
+
overflow: hidden;
|
|
165
|
+
box-sizing: border-box;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.ms__selected-popover-body--virtual .ms__badge-text {
|
|
169
|
+
/* Enforce single-line truncation for virtual scroll fixed heights */
|
|
170
|
+
white-space: nowrap;
|
|
171
|
+
overflow: hidden;
|
|
172
|
+
text-overflow: ellipsis;
|
|
173
|
+
}
|