@descope/web-components-ui 1.0.239 → 1.0.240
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +1418 -894
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +1401 -877
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/1438.js +374 -0
- package/dist/umd/1438.js.LICENSE.txt +5 -0
- package/dist/umd/1940.js +303 -0
- package/dist/umd/{849.js → 4595.js} +5 -5
- package/dist/umd/63.js +2 -0
- package/dist/umd/63.js.LICENSE.txt +5 -0
- package/dist/umd/6687.js +9 -0
- package/dist/umd/6687.js.LICENSE.txt +5 -0
- package/dist/umd/7583.js +113 -0
- package/dist/umd/{5977.js.LICENSE.txt → 7583.js.LICENSE.txt} +0 -6
- package/dist/umd/8866.js +183 -0
- package/dist/umd/8866.js.LICENSE.txt +11 -0
- package/dist/umd/9558.js +1 -1
- package/dist/umd/descope-combo-box-index-js.js +1 -1
- package/dist/umd/descope-grid-index-js.js +1 -1
- package/dist/umd/descope-modal-index-js.js +1 -1
- package/dist/umd/descope-multi-select-combo-box-index-js.js +1 -0
- package/dist/umd/index.js +1 -1
- package/dist/umd/phone-fields-descope-phone-field-index-js.js +1 -1
- package/dist/umd/phone-fields-descope-phone-input-box-field-index-js.js +1 -1
- package/package.json +2 -1
- package/src/components/descope-multi-select-combo-box/MultiSelectComboBoxClass.js +488 -0
- package/src/components/descope-multi-select-combo-box/index.js +6 -0
- package/src/theme/components/index.js +2 -0
- package/src/theme/components/inputWrapper.js +4 -4
- package/src/theme/components/multiSelectComboBox.js +57 -0
- package/dist/umd/1932.js +0 -310
- package/dist/umd/5977.js +0 -294
- /package/dist/umd/{1932.js.LICENSE.txt → 1940.js.LICENSE.txt} +0 -0
- /package/dist/umd/{849.js.LICENSE.txt → 4595.js.LICENSE.txt} +0 -0
package/dist/umd/1438.js
ADDED
@@ -0,0 +1,374 @@
|
|
1
|
+
/*! For license information please see 1438.js.LICENSE.txt */
|
2
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[1438],{1438:(e,t,o)=>{o(6687),o(1195),o(1735),o(9416),o(9849),o(4173);var i=o(4398),s=o(6570);const l=s.iv`
|
3
|
+
:host {
|
4
|
+
font-size: var(--lumo-font-size-xxs);
|
5
|
+
line-height: 1;
|
6
|
+
color: var(--lumo-body-text-color);
|
7
|
+
border-radius: var(--lumo-border-radius-s);
|
8
|
+
background-color: var(--lumo-contrast-20pct);
|
9
|
+
cursor: var(--lumo-clickable-cursor);
|
10
|
+
-webkit-font-smoothing: antialiased;
|
11
|
+
-moz-osx-font-smoothing: grayscale;
|
12
|
+
}
|
13
|
+
|
14
|
+
:host([focused]) [part='remove-button'] {
|
15
|
+
color: inherit;
|
16
|
+
}
|
17
|
+
|
18
|
+
:host([slot='overflow']) {
|
19
|
+
position: relative;
|
20
|
+
min-width: var(--lumo-size-xxs);
|
21
|
+
margin-inline-start: var(--lumo-space-s);
|
22
|
+
}
|
23
|
+
|
24
|
+
:host([slot='overflow'])::before,
|
25
|
+
:host([slot='overflow'])::after {
|
26
|
+
position: absolute;
|
27
|
+
content: '';
|
28
|
+
width: 100%;
|
29
|
+
height: 100%;
|
30
|
+
border-left: calc(var(--lumo-space-s) / 4) solid;
|
31
|
+
border-radius: var(--lumo-border-radius-s);
|
32
|
+
border-color: var(--lumo-contrast-30pct);
|
33
|
+
}
|
34
|
+
|
35
|
+
:host([slot='overflow'])::before {
|
36
|
+
left: calc(-1 * var(--lumo-space-s) / 2);
|
37
|
+
}
|
38
|
+
|
39
|
+
:host([slot='overflow'])::after {
|
40
|
+
left: calc(-1 * var(--lumo-space-s));
|
41
|
+
}
|
42
|
+
|
43
|
+
:host([count='2']) {
|
44
|
+
margin-inline-start: calc(var(--lumo-space-s) / 2);
|
45
|
+
}
|
46
|
+
|
47
|
+
:host([count='2'])::after {
|
48
|
+
display: none;
|
49
|
+
}
|
50
|
+
|
51
|
+
:host([count='1']) {
|
52
|
+
margin-inline-start: 0;
|
53
|
+
}
|
54
|
+
|
55
|
+
:host([count='1'])::before,
|
56
|
+
:host([count='1'])::after {
|
57
|
+
display: none;
|
58
|
+
}
|
59
|
+
|
60
|
+
[part='label'] {
|
61
|
+
font-weight: 500;
|
62
|
+
line-height: 1.25;
|
63
|
+
}
|
64
|
+
|
65
|
+
[part='remove-button'] {
|
66
|
+
display: flex;
|
67
|
+
align-items: center;
|
68
|
+
justify-content: center;
|
69
|
+
margin-top: -0.3125em;
|
70
|
+
margin-bottom: -0.3125em;
|
71
|
+
margin-inline-start: auto;
|
72
|
+
width: 1.25em;
|
73
|
+
height: 1.25em;
|
74
|
+
font-size: 1.5em;
|
75
|
+
transition: none;
|
76
|
+
}
|
77
|
+
|
78
|
+
[part='remove-button']::before {
|
79
|
+
content: var(--lumo-icons-cross);
|
80
|
+
}
|
81
|
+
|
82
|
+
:host([disabled]) [part='label'] {
|
83
|
+
color: var(--lumo-disabled-text-color);
|
84
|
+
-webkit-text-fill-color: var(--lumo-disabled-text-color);
|
85
|
+
pointer-events: none;
|
86
|
+
}
|
87
|
+
`;(0,s.hC)("vaadin-multi-select-combo-box-chip",[i.q,l],{moduleId:"lumo-multi-select-combo-box-chip"}),o(1578);var a=o(8900),r=o(3891),n=o(7026),d=o(2279),c=o(8168),h=o(6754),u=o(510);const p=s.iv`
|
88
|
+
@media (any-hover: hover) {
|
89
|
+
:host(:hover[readonly]) {
|
90
|
+
background-color: transparent;
|
91
|
+
cursor: default;
|
92
|
+
}
|
93
|
+
}
|
94
|
+
`;(0,s.hC)("vaadin-multi-select-combo-box-item",[n.w,a.V,p],{moduleId:"lumo-multi-select-combo-box-item"}),(0,s.hC)("vaadin-multi-select-combo-box-overlay",[u.I,h.e,r.G,c._,r.p,s.iv`
|
95
|
+
:host {
|
96
|
+
--_vaadin-multi-select-combo-box-items-container-border-width: var(--lumo-space-xs);
|
97
|
+
--_vaadin-multi-select-combo-box-items-container-border-style: solid;
|
98
|
+
}
|
99
|
+
`],{moduleId:"lumo-multi-select-combo-box-overlay"}),(0,s.hC)("vaadin-multi-select-combo-box-container",s.iv`
|
100
|
+
:host([auto-expand-vertically]) {
|
101
|
+
padding-block: var(--lumo-space-xs);
|
102
|
+
}
|
103
|
+
`,{moduleId:"lumo-multi-select-combo-box-container"});const m=s.iv`
|
104
|
+
:host([has-value]) {
|
105
|
+
padding-inline-start: 0;
|
106
|
+
}
|
107
|
+
|
108
|
+
:host([has-value]) ::slotted(input:placeholder-shown) {
|
109
|
+
caret-color: var(--lumo-body-text-color) !important;
|
110
|
+
}
|
111
|
+
|
112
|
+
[part='label'] {
|
113
|
+
flex-shrink: 0;
|
114
|
+
}
|
115
|
+
|
116
|
+
/* Override input-container styles */
|
117
|
+
::slotted([slot='chip']),
|
118
|
+
::slotted([slot='overflow']) {
|
119
|
+
min-height: auto;
|
120
|
+
padding: 0.3125em calc(0.5em + var(--lumo-border-radius-s) / 4);
|
121
|
+
color: var(--lumo-body-text-color);
|
122
|
+
-webkit-mask-image: none;
|
123
|
+
mask-image: none;
|
124
|
+
}
|
125
|
+
|
126
|
+
:host([auto-expand-vertically]) ::slotted([slot='chip']) {
|
127
|
+
margin-block: calc(var(--lumo-space-xs) / 2);
|
128
|
+
}
|
129
|
+
|
130
|
+
::slotted([slot='chip']:not([readonly]):not([disabled])) {
|
131
|
+
padding-inline-end: 0;
|
132
|
+
}
|
133
|
+
|
134
|
+
:host([auto-expand-vertically]) ::slotted([slot='input']) {
|
135
|
+
min-height: calc(var(--lumo-text-field-size, var(--lumo-size-m)) - 2 * var(--lumo-space-xs));
|
136
|
+
}
|
137
|
+
|
138
|
+
::slotted([slot='chip']:not(:last-of-type)),
|
139
|
+
::slotted([slot='overflow']:not(:last-of-type)) {
|
140
|
+
margin-inline-end: var(--lumo-space-xs);
|
141
|
+
}
|
142
|
+
|
143
|
+
::slotted([slot='chip'][focused]) {
|
144
|
+
background-color: var(--vaadin-selection-color, var(--lumo-primary-color));
|
145
|
+
color: var(--lumo-primary-contrast-color);
|
146
|
+
}
|
147
|
+
|
148
|
+
[part='toggle-button']::before {
|
149
|
+
content: var(--lumo-icons-dropdown);
|
150
|
+
}
|
151
|
+
|
152
|
+
:host([readonly][has-value]) [part='toggle-button'] {
|
153
|
+
color: var(--lumo-contrast-60pct);
|
154
|
+
cursor: var(--lumo-clickable-cursor);
|
155
|
+
}
|
156
|
+
`;(0,s.hC)("vaadin-multi-select-combo-box",[d.J,m],{moduleId:"lumo-multi-select-combo-box"});var v=o(4241),b=o(2807);class _ extends((0,s.Tb)(v.H3)){static get is(){return"vaadin-multi-select-combo-box-chip"}static get properties(){return{disabled:{type:Boolean,reflectToAttribute:!0},readonly:{type:Boolean,reflectToAttribute:!0},label:{type:String},item:{type:Object}}}static get template(){return v.dy`
|
157
|
+
<style>
|
158
|
+
:host {
|
159
|
+
display: inline-flex;
|
160
|
+
align-items: center;
|
161
|
+
align-self: center;
|
162
|
+
white-space: nowrap;
|
163
|
+
box-sizing: border-box;
|
164
|
+
}
|
165
|
+
|
166
|
+
[part='label'] {
|
167
|
+
overflow: hidden;
|
168
|
+
text-overflow: ellipsis;
|
169
|
+
}
|
170
|
+
|
171
|
+
:host([hidden]),
|
172
|
+
:host(:is([readonly], [disabled], [slot='overflow'])) [part='remove-button'] {
|
173
|
+
display: none !important;
|
174
|
+
}
|
175
|
+
|
176
|
+
@media (forced-colors: active) {
|
177
|
+
:host {
|
178
|
+
outline: 1px solid;
|
179
|
+
outline-offset: -1px;
|
180
|
+
}
|
181
|
+
}
|
182
|
+
</style>
|
183
|
+
<div part="label">[[label]]</div>
|
184
|
+
<div part="remove-button" on-click="_onRemoveClick"></div>
|
185
|
+
`}_onRemoveClick(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent("item-removed",{detail:{item:this.item},bubbles:!0,composed:!0}))}}(0,b.M)(_);var f=o(3553);let g;(0,s.hC)("vaadin-multi-select-combo-box-container",s.iv`
|
186
|
+
#wrapper {
|
187
|
+
display: flex;
|
188
|
+
width: 100%;
|
189
|
+
min-width: 0;
|
190
|
+
}
|
191
|
+
|
192
|
+
:host([auto-expand-vertically]) #wrapper {
|
193
|
+
flex-wrap: wrap;
|
194
|
+
}
|
195
|
+
`,{moduleId:"vaadin-multi-select-combo-box-container-styles"});class y extends f.f{static get is(){return"vaadin-multi-select-combo-box-container"}static get template(){if(!g){g=super.template.cloneNode(!0);const e=g.content,t=e.querySelectorAll("slot"),o=document.createElement("div");o.setAttribute("id","wrapper"),e.insertBefore(o,t[2]),o.appendChild(t[0]),o.appendChild(t[1])}return g}static get properties(){return{autoExpandVertically:{type:Boolean,reflectToAttribute:!0}}}}(0,b.M)(y);var x=o(5115),I=o(1914);class w extends((0,x.O)((0,s.Tb)((0,I.U)(v.H3)))){static get is(){return"vaadin-multi-select-combo-box-item"}static get template(){return v.dy`
|
196
|
+
<style>
|
197
|
+
:host {
|
198
|
+
display: block;
|
199
|
+
}
|
200
|
+
|
201
|
+
:host([hidden]) {
|
202
|
+
display: none !important;
|
203
|
+
}
|
204
|
+
</style>
|
205
|
+
<span part="checkmark" aria-hidden="true"></span>
|
206
|
+
<div part="content">
|
207
|
+
<slot></slot>
|
208
|
+
</div>
|
209
|
+
`}}(0,b.M)(w);var C=o(3515),A=o(3423);let E;(0,s.hC)("vaadin-multi-select-combo-box-overlay",s.iv`
|
210
|
+
#overlay {
|
211
|
+
width: var(
|
212
|
+
--vaadin-multi-select-combo-box-overlay-width,
|
213
|
+
var(--_vaadin-multi-select-combo-box-overlay-default-width, auto)
|
214
|
+
);
|
215
|
+
}
|
216
|
+
|
217
|
+
[part='content'] {
|
218
|
+
display: flex;
|
219
|
+
flex-direction: column;
|
220
|
+
height: 100%;
|
221
|
+
}
|
222
|
+
`,{moduleId:"vaadin-multi-select-combo-box-overlay-styles"});class B extends((0,C.H)(A.a)){static get is(){return"vaadin-multi-select-combo-box-overlay"}static get template(){if(!E){E=super.template.cloneNode(!0);const e=E.content.querySelector('[part~="overlay"]');e.removeAttribute("tabindex");const t=document.createElement("div");t.setAttribute("part","loader"),e.insertBefore(t,e.firstElementChild)}return E}}(0,b.M)(B);var S=o(4843),k=o(6557);class $ extends((0,k.t)(v.H3)){static get is(){return"vaadin-multi-select-combo-box-scroller"}static get template(){return v.dy`
|
223
|
+
<style>
|
224
|
+
:host {
|
225
|
+
display: block;
|
226
|
+
min-height: 1px;
|
227
|
+
overflow: auto;
|
228
|
+
|
229
|
+
/* Fixes item background from getting on top of scrollbars on Safari */
|
230
|
+
transform: translate3d(0, 0, 0);
|
231
|
+
|
232
|
+
/* Enable momentum scrolling on iOS */
|
233
|
+
-webkit-overflow-scrolling: touch;
|
234
|
+
|
235
|
+
/* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
|
236
|
+
box-shadow: 0 0 0 white;
|
237
|
+
}
|
238
|
+
|
239
|
+
#selector {
|
240
|
+
border-width: var(--_vaadin-multi-select-combo-box-items-container-border-width);
|
241
|
+
border-style: var(--_vaadin-multi-select-combo-box-items-container-border-style);
|
242
|
+
border-color: var(--_vaadin-multi-select-combo-box-items-container-border-color, transparent);
|
243
|
+
position: relative;
|
244
|
+
}
|
245
|
+
</style>
|
246
|
+
<div id="selector">
|
247
|
+
<slot></slot>
|
248
|
+
</div>
|
249
|
+
`}ready(){super.ready(),this.setAttribute("aria-multiselectable","true")}_isItemSelected(e,t,o){return!(e instanceof S.h)&&!this.owner.readonly&&this.owner._findIndex(e,this.owner.selectedItems,o)>-1}_updateElement(e,t){super._updateElement(e,t),e.toggleAttribute("readonly",this.owner.readonly)}}(0,b.M)($);var V=o(9031),P=o(2589);class F extends((0,V.Y)((0,P.t)((0,s.Tb)(v.H3)))){static get is(){return"vaadin-multi-select-combo-box-internal"}static get template(){return v.dy`
|
250
|
+
<style>
|
251
|
+
:host([opened]) {
|
252
|
+
pointer-events: auto;
|
253
|
+
}
|
254
|
+
</style>
|
255
|
+
|
256
|
+
<slot></slot>
|
257
|
+
|
258
|
+
<vaadin-multi-select-combo-box-overlay
|
259
|
+
id="overlay"
|
260
|
+
opened="[[_overlayOpened]]"
|
261
|
+
loading$="[[loading]]"
|
262
|
+
theme$="[[_theme]]"
|
263
|
+
position-target="[[_target]]"
|
264
|
+
no-vertical-overlap
|
265
|
+
restore-focus-node="[[inputElement]]"
|
266
|
+
></vaadin-multi-select-combo-box-overlay>
|
267
|
+
`}static get properties(){return{filteredItems:{type:Array,notify:!0},loading:{type:Boolean,notify:!0},size:{type:Number,notify:!0},selectedItems:{type:Array,value:()=>[]},selectedItemsOnTop:{type:Boolean,value:!1},lastFilter:{type:String,notify:!0},topGroup:{type:Array,observer:"_topGroupChanged"},_target:{type:Object}}}get clearElement(){return this.querySelector('[part="clear-button"]')}get _tagNamePrefix(){return"vaadin-multi-select-combo-box"}open(){this.disabled||this.readonly&&0===this.selectedItems.length||(this.opened=!0)}ready(){super.ready(),this._target=this,this._toggleElement=this.querySelector(".toggle-button")}_setDropdownItems(e){if(this.readonly)this._dropdownItems=this.selectedItems;else if(!this.filter&&this.selectedItemsOnTop)if(e&&e.length&&this.topGroup&&this.topGroup.length){const t=e.filter((e=>-1===this._comboBox._findIndex(e,this.topGroup,this.itemIdPath)));this._dropdownItems=this.topGroup.concat(t)}else this._dropdownItems=e;else this._dropdownItems=e}_topGroupChanged(e){e&&this._setDropdownItems(this.filteredItems)}_initScroller(){const e=this.getRootNode().host;this._comboBox=e,super._initScroller(e)}_onEnter(e){if(this.opened){if(e.preventDefault(),e.stopPropagation(),this.readonly)this.close();else if(this._hasValidInputValue()){const e=this._dropdownItems[this._focusedIndex];this._commitValue(),this._focusedIndex=this._dropdownItems.indexOf(e)}}else super._onEnter(e)}_onEscape(e){if(this.readonly)return e.stopPropagation(),void(this.opened&&this.close());super._onEscape(e)}_commitValue(){this.lastFilter=this.filter,super._commitValue()}_onArrowDown(){this.readonly?this.opened||this.open():super._onArrowDown()}_onArrowUp(){this.readonly?this.opened||this.open():super._onArrowUp()}_setFocused(e){e||(this._ignoreCommitValue=!0),super._setFocused(e),e||!this.readonly||this._closeOnBlurIsPrevented||this.close()}_detectAndDispatchChange(){if(this._ignoreCommitValue)return this._ignoreCommitValue=!1,this.selectedItem=null,void(this._inputElementValue="");super._detectAndDispatchChange()}_overlaySelectedItemChanged(e){e.stopPropagation(),this.readonly||e.detail.item instanceof S.h||this.opened&&this.dispatchEvent(new CustomEvent("combo-box-item-selected",{detail:{item:e.detail.item}}))}_shouldLoadPage(e){return!this.readonly&&super._shouldLoadPage(e)}clearCache(){this.readonly||super.clearCache()}}(0,b.M)(F);var T=o(63),z=o(2521),L=o(9680),O=o(9229),D=o(262),q=o(4463),G=o(1174),W=o(3208),R=o(6729),H=o(2743);const M=s.iv`
|
268
|
+
:host {
|
269
|
+
--input-min-width: var(--vaadin-multi-select-combo-box-input-min-width, 4em);
|
270
|
+
--_chip-min-width: var(--vaadin-multi-select-combo-box-chip-min-width, 50px);
|
271
|
+
}
|
272
|
+
|
273
|
+
#chips {
|
274
|
+
display: flex;
|
275
|
+
align-items: center;
|
276
|
+
}
|
277
|
+
|
278
|
+
::slotted(input) {
|
279
|
+
box-sizing: border-box;
|
280
|
+
flex: 1 0 var(--input-min-width);
|
281
|
+
}
|
282
|
+
|
283
|
+
::slotted([slot='chip']),
|
284
|
+
::slotted([slot='overflow']) {
|
285
|
+
flex: 0 1 auto;
|
286
|
+
}
|
287
|
+
|
288
|
+
::slotted([slot='chip']) {
|
289
|
+
overflow: hidden;
|
290
|
+
}
|
291
|
+
|
292
|
+
:host(:is([readonly], [disabled])) ::slotted(input) {
|
293
|
+
flex-grow: 0;
|
294
|
+
flex-basis: 0;
|
295
|
+
padding: 0;
|
296
|
+
}
|
297
|
+
|
298
|
+
:host([auto-expand-vertically]) #chips {
|
299
|
+
display: contents;
|
300
|
+
}
|
301
|
+
|
302
|
+
:host([auto-expand-horizontally]) [class$='container'] {
|
303
|
+
width: auto;
|
304
|
+
}
|
305
|
+
`;(0,s.hC)("vaadin-multi-select-combo-box",[H.J,M],{moduleId:"vaadin-multi-select-combo-box-styles"});class N extends((0,L.F)((0,G.L)((0,s.Tb)((0,z.S)(v.H3))))){static get is(){return"vaadin-multi-select-combo-box"}static get template(){return v.dy`
|
306
|
+
<div class="vaadin-multi-select-combo-box-container">
|
307
|
+
<div part="label">
|
308
|
+
<slot name="label"></slot>
|
309
|
+
<span part="required-indicator" aria-hidden="true" on-click="focus"></span>
|
310
|
+
</div>
|
311
|
+
|
312
|
+
<vaadin-multi-select-combo-box-internal
|
313
|
+
id="comboBox"
|
314
|
+
items="[[__effectiveItems]]"
|
315
|
+
item-id-path="[[itemIdPath]]"
|
316
|
+
item-label-path="[[itemLabelPath]]"
|
317
|
+
item-value-path="[[itemValuePath]]"
|
318
|
+
disabled="[[disabled]]"
|
319
|
+
readonly="[[readonly]]"
|
320
|
+
auto-open-disabled="[[autoOpenDisabled]]"
|
321
|
+
allow-custom-value="[[allowCustomValue]]"
|
322
|
+
overlay-class="[[overlayClass]]"
|
323
|
+
data-provider="[[dataProvider]]"
|
324
|
+
filter="{{filter}}"
|
325
|
+
last-filter="{{_lastFilter}}"
|
326
|
+
loading="{{loading}}"
|
327
|
+
size="{{size}}"
|
328
|
+
filtered-items="[[__effectiveFilteredItems]]"
|
329
|
+
selected-items="[[selectedItems]]"
|
330
|
+
selected-items-on-top="[[selectedItemsOnTop]]"
|
331
|
+
top-group="[[_topGroup]]"
|
332
|
+
opened="{{opened}}"
|
333
|
+
renderer="[[renderer]]"
|
334
|
+
theme$="[[_theme]]"
|
335
|
+
on-combo-box-item-selected="_onComboBoxItemSelected"
|
336
|
+
on-change="_onComboBoxChange"
|
337
|
+
on-custom-value-set="_onCustomValueSet"
|
338
|
+
on-filtered-items-changed="_onFilteredItemsChanged"
|
339
|
+
>
|
340
|
+
<vaadin-multi-select-combo-box-container
|
341
|
+
part="input-field"
|
342
|
+
auto-expand-vertically="[[autoExpandVertically]]"
|
343
|
+
readonly="[[readonly]]"
|
344
|
+
disabled="[[disabled]]"
|
345
|
+
invalid="[[invalid]]"
|
346
|
+
theme$="[[_theme]]"
|
347
|
+
>
|
348
|
+
<slot name="overflow" slot="prefix"></slot>
|
349
|
+
<div id="chips" part="chips" slot="prefix">
|
350
|
+
<slot name="chip"></slot>
|
351
|
+
</div>
|
352
|
+
<slot name="input"></slot>
|
353
|
+
<div
|
354
|
+
id="clearButton"
|
355
|
+
part="clear-button"
|
356
|
+
slot="suffix"
|
357
|
+
on-touchend="_onClearButtonTouchend"
|
358
|
+
aria-hidden="true"
|
359
|
+
></div>
|
360
|
+
<div id="toggleButton" class="toggle-button" part="toggle-button" slot="suffix" aria-hidden="true"></div>
|
361
|
+
</vaadin-multi-select-combo-box-container>
|
362
|
+
</vaadin-multi-select-combo-box-internal>
|
363
|
+
|
364
|
+
<div part="helper-text">
|
365
|
+
<slot name="helper"></slot>
|
366
|
+
</div>
|
367
|
+
|
368
|
+
<div part="error-message">
|
369
|
+
<slot name="error-message"></slot>
|
370
|
+
</div>
|
371
|
+
</div>
|
372
|
+
|
373
|
+
<slot name="tooltip"></slot>
|
374
|
+
`}static get properties(){return{autoExpandHorizontally:{type:Boolean,value:!1,reflectToAttribute:!0,observer:"_autoExpandHorizontallyChanged"},autoExpandVertically:{type:Boolean,value:!1,reflectToAttribute:!0,observer:"_autoExpandVerticallyChanged"},autoOpenDisabled:Boolean,clearButtonVisible:{type:Boolean,reflectToAttribute:!0,observer:"_clearButtonVisibleChanged",value:!1},items:{type:Array},itemLabelPath:{type:String,value:"label"},itemValuePath:{type:String,value:"value"},itemIdPath:{type:String},i18n:{type:Object,value:()=>({cleared:"Selection cleared",focused:"focused. Press Backspace to remove",selected:"added to selection",deselected:"removed from selection",total:"{count} items selected"})},loading:{type:Boolean,value:!1,reflectToAttribute:!0},overlayClass:{type:String},readonly:{type:Boolean,value:!1,observer:"_readonlyChanged",reflectToAttribute:!0},selectedItems:{type:Array,value:()=>[],notify:!0},opened:{type:Boolean,notify:!0,value:!1,reflectToAttribute:!0},size:{type:Number},pageSize:{type:Number,value:50,observer:"_pageSizeChanged"},dataProvider:{type:Object},allowCustomValue:{type:Boolean,value:!1},placeholder:{type:String,value:"",observer:"_placeholderChanged"},renderer:Function,filter:{type:String,value:"",notify:!0},filteredItems:Array,selectedItemsOnTop:{type:Boolean,value:!1},value:{type:String},__effectiveItems:{type:Array,computed:"__computeEffectiveItems(items, selectedItems, readonly)"},__effectiveFilteredItems:{type:Array,computed:"__computeEffectiveFilteredItems(items, filteredItems, selectedItems, readonly)"},_overflowItems:{type:Array,value:()=>[]},_focusedChipIndex:{type:Number,value:-1,observer:"_focusedChipIndexChanged"},_lastFilter:{type:String},_topGroup:{type:Array}}}static get observers(){return["_selectedItemsChanged(selectedItems, selectedItems.*)","__updateOverflowChip(_overflow, _overflowItems, disabled, readonly)","__updateTopGroup(selectedItemsOnTop, selectedItems, opened)"]}get slotStyles(){const e=this.localName;return[...super.slotStyles,`\n ${e}[has-value] input::placeholder {\n color: transparent !important;\n forced-color-adjust: none;\n }\n `]}get clearElement(){return this.$.clearButton}get _chips(){return[...this.querySelectorAll('[slot="chip"]')]}get _hasValue(){return this.selectedItems&&this.selectedItems.length>0}ready(){super.ready(),this.addController(new W.b(this,(e=>{this._setInputElement(e),this._setFocusElement(e),this.stateTarget=e,this.ariaTarget=e}))),this.addController(new R.v(this.inputElement,this._labelController)),this._tooltipController=new q.f(this),this.addController(this._tooltipController),this._tooltipController.setPosition("top"),this._tooltipController.setAriaTarget(this.inputElement),this._tooltipController.setShouldShow((e=>!e.opened)),this._inputField=this.shadowRoot.querySelector('[part="input-field"]'),this._overflowController=new O.n(this,"overflow","vaadin-multi-select-combo-box-chip",{initializer:e=>{e.addEventListener("mousedown",(e=>this._preventBlur(e))),this._overflow=e}}),this.addController(this._overflowController),this.__updateChips(),(0,D.k)(this)}checkValidity(){return!(this.required&&!this.readonly)||this._hasValue}clear(){this.__updateSelection([]),(0,T.x)(this.i18n.cleared)}clearCache(){this.$&&this.$.comboBox&&this.$.comboBox.clearCache()}requestContentUpdate(){this.$&&this.$.comboBox&&this.$.comboBox.requestContentUpdate()}_disabledChanged(e,t){super._disabledChanged(e,t),(e||t)&&this.__updateChips()}_inputElementChanged(e){super._inputElementChanged(e),e&&this.$.comboBox._setInputElement(e)}_setFocused(e){super._setFocused(e),!e&&document.hasFocus()&&(this._focusedChipIndex=-1,this.validate())}_onResize(){this.__updateChips()}_delegateAttribute(e,t){this.stateTarget&&("required"!==e?super._delegateAttribute(e,t):this._delegateAttribute("aria-required",!!t&&"true"))}_autoExpandHorizontallyChanged(e,t){(e||t)&&this.__updateChips()}_autoExpandVerticallyChanged(e,t){(e||t)&&this.__updateChips()}_clearButtonVisibleChanged(e,t){(e||t)&&this.__updateChips()}_onFilteredItemsChanged(e){const{value:t}=e.detail;(Array.isArray(t)||null==t)&&(this.filteredItems=t)}_readonlyChanged(e,t){(e||t)&&this.__updateChips(),this.dataProvider&&this.clearCache()}_pageSizeChanged(e,t){(Math.floor(e)!==e||e<=0)&&(this.pageSize=t,console.error('"pageSize" value must be an integer > 0')),this.$.comboBox.pageSize=this.pageSize}_placeholderChanged(e){const t=this.__tmpA11yPlaceholder;t!==e&&(this.__savedPlaceholder=e,t&&(this.placeholder=t))}_selectedItemsChanged(e){if(this._toggleHasValue(this._hasValue),this._hasValue){const t=this._mergeItemLabels(e);this.__tmpA11yPlaceholder=t,this.placeholder=t}else delete this.__tmpA11yPlaceholder,this.placeholder=this.__savedPlaceholder;this.__updateChips(),this.requestContentUpdate(),this.opened&&this.$.comboBox.$.overlay._updateOverlayWidth()}_getItemLabel(e){return this.$.comboBox._getItemLabel(e)}_mergeItemLabels(e){return e.map((e=>this._getItemLabel(e))).join(", ")}_findIndex(e,t,o){if(o&&e){for(let i=0;i<t.length;i++)if(t[i]&&t[i][o]===e[o])return i;return-1}return t.indexOf(e)}__clearFilter(){this.filter="",this.$.comboBox.clear()}__announceItem(e,t,o){const i=t?"selected":"deselected",s=this.i18n.total.replace("{count}",o||0);(0,T.x)(`${e} ${this.i18n[i]} ${s}`)}__removeItem(e){const t=[...this.selectedItems];t.splice(t.indexOf(e),1),this.__updateSelection(t);const o=this._getItemLabel(e);this.__announceItem(o,!1,t.length)}__selectItem(e){const t=[...this.selectedItems],o=this._findIndex(e,t,this.itemIdPath),i=this._getItemLabel(e);let s=!1;if(-1!==o){const e=this._lastFilter;if(e&&e.toLowerCase()===i.toLowerCase())return void this.__clearFilter();t.splice(o,1)}else t.push(e),s=!0;this.__updateSelection(t),this.__clearFilter(),this.__announceItem(i,s,t.length)}__updateSelection(e){this.selectedItems=e,this.validate(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0}))}__updateTopGroup(e,t,o){e?o||(this._topGroup=[...t]):this._topGroup=[]}__createChip(e){const t=document.createElement("vaadin-multi-select-combo-box-chip");t.setAttribute("slot","chip"),t.item=e,t.disabled=this.disabled,t.readonly=this.readonly;const o=this._getItemLabel(e);return t.label=o,t.setAttribute("title",o),t.addEventListener("item-removed",(e=>this._onItemRemoved(e))),t.addEventListener("mousedown",(e=>this._preventBlur(e))),t}__getOverflowWidth(){const e=this._overflow;e.style.visibility="hidden",e.removeAttribute("hidden");const t=e.getAttribute("count");e.setAttribute("count","99");const o=getComputedStyle(e),i=e.clientWidth+parseInt(o.marginInlineStart);return e.setAttribute("count",t),e.setAttribute("hidden",""),e.style.visibility="",i}__updateChips(){if(!this._inputField||!this.inputElement)return;this._chips.forEach((e=>{e.remove()}));const e=[...this.selectedItems],t=this._inputField.$.wrapper.clientWidth,o=parseInt(getComputedStyle(this.inputElement).flexBasis);let i=t-o;e.length>1&&(i-=this.__getOverflowWidth());const s=parseInt(getComputedStyle(this).getPropertyValue("--_chip-min-width"));if(this.autoExpandHorizontally){const t=[];for(let o=e.length-1,i=null;o>=0;o--){const s=this.__createChip(e[o]);this.insertBefore(s,i),i=s,t.unshift(s)}const l=[],a=this._inputField.$.wrapper.clientWidth-this.$.chips.clientWidth;if(!this.autoExpandVertically&&a<o){for(;t.length>1;){t.pop().remove(),l.unshift(e.pop());const i=l.length>0?o+this.__getOverflowWidth():o;if(this._inputField.$.wrapper.clientWidth-this.$.chips.clientWidth>=i)break}1===t.length&&(t[0].style.maxWidth=`${Math.max(s,i)}px`)}this._overflowItems=l}else{for(let t=e.length-1,o=null;t>=0;t--){const l=this.__createChip(e[t]);if(this.insertBefore(l,o),!this.autoExpandVertically&&this.$.chips.clientWidth>i){if(null!==o){l.remove();break}l.style.maxWidth=`${Math.max(s,i)}px`}e.pop(),o=l}this._overflowItems=e}}__updateOverflowChip(e,t,o,i){if(e){const s=t.length;e.label=`${s}`,e.setAttribute("count",`${s}`),e.setAttribute("title",this._mergeItemLabels(t)),e.toggleAttribute("hidden",0===s),e.disabled=o,e.readonly=i}}_onClearButtonTouchend(e){e.preventDefault(),e.stopPropagation(),this.clear()}_onClearButtonClick(e){e.stopPropagation(),this.clear()}_onChange(e){e.stopPropagation()}_onEscape(e){this.clearButtonVisible&&this.selectedItems&&this.selectedItems.length&&(e.stopPropagation(),this.selectedItems=[])}_onKeyDown(e){super._onKeyDown(e);const t=this._chips;if(!this.readonly&&t.length>0)switch(e.key){case"Backspace":this._onBackSpace(t);break;case"ArrowLeft":this._onArrowLeft(t,e);break;case"ArrowRight":this._onArrowRight(t,e);break;default:this._focusedChipIndex=-1}}_onArrowLeft(e,t){if(0!==this.inputElement.selectionStart)return;const o=this._focusedChipIndex;let i;-1!==o&&t.preventDefault(),this.__isRTL?o===e.length-1?i=-1:o>-1&&(i=o+1):-1===o?i=e.length-1:o>0&&(i=o-1),void 0!==i&&(this._focusedChipIndex=i)}_onArrowRight(e,t){if(0!==this.inputElement.selectionStart)return;const o=this._focusedChipIndex;let i;-1!==o&&t.preventDefault(),this.__isRTL?-1===o?i=e.length-1:o>0&&(i=o-1):o===e.length-1?i=-1:o>-1&&(i=o+1),void 0!==i&&(this._focusedChipIndex=i)}_onBackSpace(e){if(0!==this.inputElement.selectionStart)return;const t=this._focusedChipIndex;-1===t?this._focusedChipIndex=e.length-1:(this.__removeItem(e[t].item),this._focusedChipIndex=-1)}_focusedChipIndexChanged(e,t){if(e>-1||t>-1){const t=this._chips;if(t.forEach(((t,o)=>{t.toggleAttribute("focused",o===e)})),e>-1){const o=t[e].item,i=this._getItemLabel(o);(0,T.x)(`${i} ${this.i18n.focused}`)}}}_onComboBoxChange(){const e=this.$.comboBox.selectedItem;e&&this.__selectItem(e)}_onComboBoxItemSelected(e){this.__selectItem(e.detail.item)}_onCustomValueSet(e){e.preventDefault(),e.stopPropagation(),this.__clearFilter(),this.dispatchEvent(new CustomEvent("custom-value-set",{detail:e.detail,composed:!0,bubbles:!0}))}_onItemRemoved(e){this.__removeItem(e.detail.item)}_preventBlur(e){e.preventDefault()}__computeEffectiveItems(e,t,o){return e&&o?t:e}__computeEffectiveFilteredItems(e,t,o,i){return!e&&i?o:t}}(0,b.M)(N)}}]);
|