@cas-smartdesign/combo-box 7.2.11 → 7.3.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/dist/combo-box-with-externals.js +12 -12
- package/dist/combo-box-with-externals.js.map +3 -3
- package/dist/combo-box.d.ts +7 -0
- package/dist/combo-box.mjs +93 -54
- package/dist/combo-box.mjs.map +1 -1
- package/dist/docs/2_basic-examples.js +1 -1
- package/dist/docs/doc.mjs +63 -56
- package/package.json +7 -6
- package/readme.md +2 -0
package/dist/combo-box.d.ts
CHANGED
|
@@ -45,6 +45,7 @@ export default class ComboBox extends SDInput {
|
|
|
45
45
|
allowCustomValue: boolean;
|
|
46
46
|
triggerOnly: boolean;
|
|
47
47
|
nullSettingDisallowed: boolean;
|
|
48
|
+
showIcon: boolean;
|
|
48
49
|
displayValuePath: string;
|
|
49
50
|
filterProperty: string;
|
|
50
51
|
id: string;
|
|
@@ -65,6 +66,7 @@ export default class ComboBox extends SDInput {
|
|
|
65
66
|
private _openedByFilterTextChange;
|
|
66
67
|
private _lastRequestedPage;
|
|
67
68
|
private _lastRequestedFilterText;
|
|
69
|
+
private _icon;
|
|
68
70
|
constructor();
|
|
69
71
|
get clearFilterOnLazyLoadedSelection(): boolean;
|
|
70
72
|
/**
|
|
@@ -92,6 +94,11 @@ export default class ComboBox extends SDInput {
|
|
|
92
94
|
firstUpdated(changedProperties: PropertyValues): void;
|
|
93
95
|
private updateComboBoxValueFromValue;
|
|
94
96
|
updated(changedProperties: PropertyValues): void;
|
|
97
|
+
private initIconWrapper;
|
|
98
|
+
private updateIconFromCurrentValue;
|
|
99
|
+
private updateIcon;
|
|
100
|
+
private updateHasValue;
|
|
101
|
+
protected shouldFloat(): any;
|
|
95
102
|
private initClearButtton;
|
|
96
103
|
private initToggleButtton;
|
|
97
104
|
private debouncedFilterItemsInMemory;
|
package/dist/combo-box.mjs
CHANGED
|
@@ -1,20 +1,21 @@
|
|
|
1
|
-
import { css as g, unsafeCSS as x, html as
|
|
1
|
+
import { css as g, unsafeCSS as x, html as b } from "lit";
|
|
2
2
|
import { property as r } from "lit/decorators/property.js";
|
|
3
|
-
import { createPopper as
|
|
3
|
+
import { createPopper as v } from "@popperjs/core";
|
|
4
4
|
import _ from "@cas-smartdesign/lit-input";
|
|
5
5
|
import p, { ListDataProvider as y, SelectionType as u } from "@cas-smartdesign/virtual-list";
|
|
6
6
|
import { generator as w } from "@cas-smartdesign/list-item";
|
|
7
|
-
|
|
7
|
+
import I from "@cas-smartdesign/image-tools";
|
|
8
|
+
const V = ":host{display:inline-flex;position:relative;cursor:text;font-family:Segoe UI,Lucida Sans,Arial,sans-serif;font-size:16px;color:#111;contain:layout style;flex-direction:column}:host([hidden]),:host([type=hidden]){display:none!important}:host([effective-disabled]){opacity:.6;cursor:default;filter:grayscale(100%)}:host([effective-disabled]) .unfocused-line,:host([effective-disabled]) .focused-line{border-bottom-style:dashed}:host(:not([effective-disabled]):focus) .focused-line,:host(:not([effective-disabled])[focused]) .focused-line{transform:none;transition:transform .25s}:host(:not([effective-disabled]):focus) .label.float,:host(:not([effective-disabled])[focused]) .label.float{color:var(--sd-input-focused-color, #1467ba)}:host([inactive]) .input{pointer-events:none}:host([effective-disabled]:focus),:host([effective-disabled][focused]){box-shadow:0 0 0 1px #111}:host(:not([effective-disabled])[validationlevel]) .focused-line,:host(:not([effective-disabled]):invalid) .focused-line{transform:none;transition:transform .25s}:host([validationlevel=warn i]) .focused-line{border-bottom-color:var(--sd-input-validation-color, #555555)}:host([validationlevel=warn i]) .label,:host([validationlevel=warn i]) .validation-message{color:var(--sd-input-validation-color, #555555)!important}:host([validationlevel=suggest i]) .focused-line{border-bottom-color:var(--sd-input-validation-color, #bf8800)}:host([validationlevel=suggest i]) .label,:host([validationlevel=suggest i]) .validation-message{color:var(--sd-input-validation-color, #bf8800)!important}:host([validationlevel=error i]) .focused-line,:host(:not([validationlevel]):invalid) .focused-line{border-bottom-color:var(--sd-input-validation-color, #cc0017)}:host([validationlevel=error i]) .label,:host([validationlevel=error i]) .validation-message,:host(:not([validationlevel]):invalid) .label,:host(:not([validationlevel]):invalid) .validation-message{color:var(--sd-input-validation-color, #cc0017)!important}.validation-message-wrapper{position:relative}.validation-message{position:absolute;left:0;right:0}.label.float{transform:translateY(-75%) scale(.75);width:133%}.label:not(.float){max-width:100%}.floated-label-placeholder{height:20px;width:100%}.label{position:absolute;top:0;left:0;line-height:24px;pointer-events:none;color:var(--sd-input-color, #767676);transition:transform .25s,width .25s;transform-origin:left top}.input-wrapper{position:relative;display:flex;flex-direction:row;align-items:center;background-color:var(--input-wrapper-background-color)}:host([extended-prefix]:focus-within:not([effective-disabled])) .input-wrapper{flex-direction:column;align-items:baseline}:host([extended-prefix]:focus-within:not([effective-disabled])) .input-container{width:100%}:host([extended-prefix]:not(:focus-within)) .input-container,:host([extended-prefix][effective-disabled]) .input-container{width:0px}.input-container{line-height:var(--sd-input-line-height, 24px);flex:1 1 auto}.input{width:100%;background:var(--sd-input-background, transparent);font-family:inherit;font-size:inherit;text-align:inherit;color:inherit;border:none;outline:none;resize:none;padding-left:0;padding-right:0}.input:-webkit-autofill{animation-name:onautofillstart}.input:not(:-webkit-autofill){animation-name:onautofillcancel}@keyframes onautofillstart{0%{outline:none}}@keyframes onautofillcancel{0%{outline:none}}.label,input.input,.validation-message{text-overflow:ellipsis;overflow-x:hidden;white-space:nowrap}.input::placeholder{color:var(--sd-input-color, #767676)}.underline{height:2px;width:100%;position:relative}.unfocused-line,.focused-line{position:absolute;top:0;right:0;bottom:0;left:0}.unfocused-line{border-bottom:1px solid var(--sd-input-underline-color, #959595)}.focused-line{border-bottom:2px solid var(--sd-input-focused-color, #1467ba);transform-origin:center center;transform:scale3d(0,1,1)}.prefix,.suffix{display:flex;flex-wrap:nowrap;max-width:100%}.prefix ::slotted(*),.suffix ::slotted(*){display:flex}:host(:focus){outline:none}.suffix ::slotted(.clear-button),.suffix ::slotted(.toggle-button){cursor:pointer;width:16px;height:32px;padding:0 8px;margin-top:-8px;margin-bottom:-8px;fill:#666;outline:none;flex-shrink:0}.suffix ::slotted(.toggle-button){transition:transform .2s}:host([opened]) .suffix ::slotted(.toggle-button){transform:rotate(180deg)}:host([disabled]) .suffix ::slotted(.clear-button),:host([disabled]) .suffix ::slotted(.toggle-button){display:none!important}.prefix ::slotted(.icon-wrapper){width:32px;height:32px;padding-right:4px;margin-top:-8px;margin-bottom:-8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}:host(:not([has-value])) .suffix ::slotted(.clear-button),:host([null-setting-disallowed]) .suffix ::slotted(.clear-button){display:none!important}:host(:not([allow-custom-value]):not([trigger-only])) .input{caret-color:transparent}:host(:not([allow-custom-value]):not([disabled])) .input{cursor:pointer}#default-slot{display:none}", C = `<svg xmlns="http://www.w3.org/2000/svg" class="toggle-button" slot="suffix" viewBox="0 0 16 16">\r
|
|
8
9
|
<path d="M13 4v2l-5 5-5-5v-2l5 5z"/>\r
|
|
9
10
|
</svg>\r
|
|
10
|
-
`,
|
|
11
|
+
`, B = `<svg xmlns="http://www.w3.org/2000/svg" class="clear-button" slot="suffix" viewBox="0 0 16 16">\r
|
|
11
12
|
<path d="M12.96 4.46l-1.42-1.42-3.54 3.55-3.54-3.55-1.42 1.42 3.55 3.54-3.55 3.54 1.42 1.42 3.54-3.55 3.54 3.55 1.42-1.42-3.55-3.54 3.55-3.54z"/>\r
|
|
12
13
|
</svg>\r
|
|
13
14
|
`;
|
|
14
|
-
var
|
|
15
|
-
for (var s = i > 1 ? void 0 : i ?
|
|
16
|
-
(
|
|
17
|
-
return i && s &&
|
|
15
|
+
var P = Object.defineProperty, S = Object.getOwnPropertyDescriptor, d = (h, t, e, i) => {
|
|
16
|
+
for (var s = i > 1 ? void 0 : i ? S(t, e) : t, n = h.length - 1, a; n >= 0; n--)
|
|
17
|
+
(a = h[n]) && (s = (i ? a(t, e, s) : a(s)) || s);
|
|
18
|
+
return i && s && P(t, e, s), s;
|
|
18
19
|
};
|
|
19
20
|
const D = "sd-combo-box";
|
|
20
21
|
function f(h, t) {
|
|
@@ -23,11 +24,11 @@ function f(h, t) {
|
|
|
23
24
|
e != null && clearTimeout(e), e = window.setTimeout(() => h(...i), t);
|
|
24
25
|
};
|
|
25
26
|
}
|
|
26
|
-
let
|
|
27
|
+
let L = 0;
|
|
27
28
|
var o;
|
|
28
|
-
const
|
|
29
|
+
const l = (o = class extends _ {
|
|
29
30
|
constructor() {
|
|
30
|
-
super(), this.opened = !1, this.itemHeight = 50, this.displayValuePath = "caption", this.id = o.ID + "_" +
|
|
31
|
+
super(), this.opened = !1, this.itemHeight = 50, this.displayValuePath = "caption", this.id = o.ID + "_" + L++, this.inMemoryFilter = (t, e) => {
|
|
31
32
|
if (!t)
|
|
32
33
|
return !0;
|
|
33
34
|
const i = t.toLowerCase();
|
|
@@ -106,7 +107,7 @@ const a = (o = class extends _ {
|
|
|
106
107
|
return this._comboBoxValue;
|
|
107
108
|
}
|
|
108
109
|
set comboBoxValue(t) {
|
|
109
|
-
this._comboBoxValue = t, this.updateInputValue(null);
|
|
110
|
+
this._comboBoxValue = t, this.updateInputValue(null), this.updateHasValue();
|
|
110
111
|
}
|
|
111
112
|
get selectedIndex() {
|
|
112
113
|
return this.isCustomValue(this.comboBoxValue) || !this.comboBoxValue ? -1 : this.comboBoxValue.index;
|
|
@@ -120,7 +121,7 @@ const a = (o = class extends _ {
|
|
|
120
121
|
static get styles() {
|
|
121
122
|
return [
|
|
122
123
|
g`
|
|
123
|
-
${x(
|
|
124
|
+
${x(V)}
|
|
124
125
|
`
|
|
125
126
|
];
|
|
126
127
|
}
|
|
@@ -128,7 +129,7 @@ const a = (o = class extends _ {
|
|
|
128
129
|
super.disconnectedCallback(), this._popper && (this._popper.destroy(), this._popper = null);
|
|
129
130
|
}
|
|
130
131
|
render() {
|
|
131
|
-
return
|
|
132
|
+
return b`
|
|
132
133
|
${super.render()}
|
|
133
134
|
<slot @slotchange=${this.onDefaultSlotChange} id="default-slot"></slot>
|
|
134
135
|
`;
|
|
@@ -152,7 +153,7 @@ const a = (o = class extends _ {
|
|
|
152
153
|
}
|
|
153
154
|
firstUpdated(t) {
|
|
154
155
|
super.firstUpdated(t), this.value && !this.comboBoxValue && this.updateComboBoxValueFromValue(), window.requestAnimationFrame(() => {
|
|
155
|
-
this.initClearButtton(), this.initToggleButtton(), this.addEventListener("click", () => {
|
|
156
|
+
this.initClearButtton(), this.initToggleButtton(), this.updateHasValue(), this.addEventListener("click", () => {
|
|
156
157
|
this.disabled || (this.opened = !this.opened);
|
|
157
158
|
}), this.addEventListener("keydown", (e) => {
|
|
158
159
|
this.disabled || this.handleKeyDown(e);
|
|
@@ -161,22 +162,47 @@ const a = (o = class extends _ {
|
|
|
161
162
|
}
|
|
162
163
|
updateComboBoxValueFromValue() {
|
|
163
164
|
if (this.value) {
|
|
164
|
-
const t = this._itemCache.findIndex(
|
|
165
|
-
|
|
165
|
+
const t = this._itemCache.findIndex(
|
|
166
|
+
(e) => (e[this.displayValuePath] ?? "") === this.value
|
|
167
|
+
);
|
|
168
|
+
t > -1 ? this._comboBoxValue = { index: t, item: this._itemCache[t] } : this.allowCustomValue ? this._comboBoxValue = this.value : this._comboBoxValue = null, this.updateHasValue(), this.updateIconFromCurrentValue();
|
|
166
169
|
}
|
|
167
170
|
}
|
|
168
171
|
updated(t) {
|
|
169
|
-
super.updated(t), t.has("
|
|
172
|
+
super.updated(t), t.has("showIcon") && (this.showIcon ? this._icon == null && this.initIconWrapper() : this._icon != null && (this._icon.remove(), this._icon = null)), t.has("currentText") && this.updateHasValue(), t.has("triggerOnly") && this._list && (this._list.selectionType = this.triggerOnly ? u.TriggerOnly : u.Single);
|
|
173
|
+
}
|
|
174
|
+
initIconWrapper() {
|
|
175
|
+
this._icon = document.createElement("div"), this._icon.className = "icon-wrapper", this._icon.role = "img";
|
|
176
|
+
const t = document.createElement("div");
|
|
177
|
+
t.style.backgroundRepeat = "no-repeat", t.style.backgroundPosition = "center", t.style.backgroundSize = "cover", t.style.height = "24px", t.style.width = "24px", this._icon.appendChild(t), this._icon.slot = "prefix", this.appendChild(this._icon), this.updateIconFromCurrentValue();
|
|
178
|
+
}
|
|
179
|
+
updateIconFromCurrentValue() {
|
|
180
|
+
var t;
|
|
181
|
+
this.isCustomValue(this.comboBoxValue) ? this.updateIcon(null) : this.updateIcon((t = this.comboBoxValue) == null ? void 0 : t.item);
|
|
182
|
+
}
|
|
183
|
+
updateIcon(t) {
|
|
184
|
+
if (this._icon)
|
|
185
|
+
if (t && (t.icon || t.iconPlaceholder)) {
|
|
186
|
+
const e = t;
|
|
187
|
+
e.attributes == null ? (this._icon.title = "", this._icon.ariaLabel = "") : (this._icon.title = e.attributes["icon-attr-title"] ?? "", this._icon.ariaLabel = e.attributes["icon-attr-aria-label"] ?? ""), this._icon.style.backgroundColor = e.iconBackgroundColor, this._icon.style.display = "", I.showImage(this._icon.querySelector("div"), t.icon, t.iconPlaceholder);
|
|
188
|
+
} else
|
|
189
|
+
this._icon && (this._icon.style.display = "none");
|
|
190
|
+
}
|
|
191
|
+
updateHasValue() {
|
|
192
|
+
this.currentText || this.comboBoxValue != null && this.comboBoxValue != "" ? (this.setAttribute("has-value", ""), this._clearButton && (this._clearButton.style.display = "")) : this.removeAttribute("has-value");
|
|
193
|
+
}
|
|
194
|
+
shouldFloat() {
|
|
195
|
+
return super.shouldFloat() || this.comboBoxValue != null && this.comboBoxValue != "";
|
|
170
196
|
}
|
|
171
197
|
initClearButtton() {
|
|
172
198
|
const t = document.createElement("template");
|
|
173
|
-
t.innerHTML =
|
|
199
|
+
t.innerHTML = B, this._clearButton = t.content.firstChild, this.appendChild(this._clearButton), this._clearButton.addEventListener("click", (e) => {
|
|
174
200
|
e.preventDefault(), e.stopPropagation(), this.opened = !1, this.clearValue();
|
|
175
201
|
});
|
|
176
202
|
}
|
|
177
203
|
initToggleButtton() {
|
|
178
204
|
const t = document.createElement("template");
|
|
179
|
-
t.innerHTML =
|
|
205
|
+
t.innerHTML = C, this._toggleButton = t.content.firstChild, this.appendChild(this._toggleButton), this._toggleButton.addEventListener("click", (e) => {
|
|
180
206
|
e.preventDefault(), e.stopPropagation(), this.opened = !this.opened, this.select();
|
|
181
207
|
});
|
|
182
208
|
}
|
|
@@ -208,7 +234,7 @@ const a = (o = class extends _ {
|
|
|
208
234
|
overflowY: "auto"
|
|
209
235
|
}), this._list.addEventListener("selection", this.handleSelection), this._dataProvider.connectList(this._list)), !this._popper) {
|
|
210
236
|
const t = this;
|
|
211
|
-
this._popper =
|
|
237
|
+
this._popper = v(this, this._list, {
|
|
212
238
|
placement: "bottom-start",
|
|
213
239
|
modifiers: [
|
|
214
240
|
{
|
|
@@ -259,7 +285,7 @@ const a = (o = class extends _ {
|
|
|
259
285
|
if (this.inputElement.setAttribute("aria-expanded", String(this.opened)), this.opened) {
|
|
260
286
|
if (!this.disabled) {
|
|
261
287
|
this.ensureListAndPopperInitialized();
|
|
262
|
-
const t = (this.filterText
|
|
288
|
+
const t = (this.filterText ?? "") !== (this._lastRequestedFilterText ?? "");
|
|
263
289
|
this.isLazyLoadConfigured && (this.items.length == 0 || t) && this.requestData(0, t), this.updateDropdownSizes(), this.ownerDocument.body.appendChild(this._list), this.updateFocusAndSelectedIndexFromValue(), window.requestAnimationFrame(() => {
|
|
264
290
|
this._popper && this._popper.update();
|
|
265
291
|
}), window.addEventListener("pointerdown", this.handleWindowPointerDown), !this.allowCustomValue && !this._openedByFilterTextChange && this.select();
|
|
@@ -269,27 +295,37 @@ const a = (o = class extends _ {
|
|
|
269
295
|
await this._list.updateComplete, this._popper && await this._popper.update, this.ownerDocument.body.removeChild(this._list), window.removeEventListener("pointerdown", this.handleWindowPointerDown), this.updateValueOnClose(), this.clearFilter(), this.setSelectionRange(0, 0), this.inputElement.removeAttribute("aria-activedescendant"), this._popper && (this._popper.destroy(), this._popper = null);
|
|
270
296
|
}
|
|
271
297
|
updateValueOnClose() {
|
|
272
|
-
|
|
298
|
+
var e;
|
|
299
|
+
const t = this.comboBoxValue ?? "";
|
|
273
300
|
if (this.nullSettingDisallowed && !this.value && this.comboBoxValue)
|
|
274
301
|
this.restorePreviousSelection();
|
|
275
|
-
else if (this.value !== this.convertToDisplayValue(null)) {
|
|
276
|
-
const
|
|
277
|
-
if (
|
|
278
|
-
if (
|
|
302
|
+
else if (this.value !== (this.convertToDisplayValue(null) ?? "")) {
|
|
303
|
+
const i = this._dataProvider.items[this._list.focusIndex];
|
|
304
|
+
if (i && (i[this.displayValuePath] ?? "") === this.value) {
|
|
305
|
+
if (i.disabled) {
|
|
279
306
|
this.restorePreviousSelection();
|
|
280
307
|
return;
|
|
281
308
|
}
|
|
282
|
-
this.comboBoxValue = { index: this._itemCache.indexOf(
|
|
309
|
+
this.comboBoxValue = { index: this._itemCache.indexOf(i), item: i };
|
|
283
310
|
} else if (this.allowCustomValue || !this.value)
|
|
284
311
|
this.comboBoxValue = this.value;
|
|
285
312
|
else {
|
|
286
|
-
const
|
|
287
|
-
(
|
|
313
|
+
const s = this._itemCache.findIndex(
|
|
314
|
+
(n) => (n[this.displayValuePath] ?? "") === this.value && !n.disabled
|
|
288
315
|
);
|
|
289
|
-
|
|
316
|
+
s > -1 ? this.comboBoxValue = { index: s, item: this._itemCache[s] } : this.restorePreviousSelection();
|
|
317
|
+
}
|
|
318
|
+
} else {
|
|
319
|
+
const i = this._dataProvider.items[this._list.focusIndex];
|
|
320
|
+
if (i && i.id != null) {
|
|
321
|
+
if (i.disabled) {
|
|
322
|
+
this.restorePreviousSelection();
|
|
323
|
+
return;
|
|
324
|
+
}
|
|
325
|
+
(!this.comboBoxValue || this.isCustomValue(this.comboBoxValue) || this.comboBoxValue.item.id != i.id) && (this.comboBoxValue = { index: this._itemCache.indexOf(i), item: i });
|
|
290
326
|
}
|
|
291
327
|
}
|
|
292
|
-
t !== (this.comboBoxValue
|
|
328
|
+
t !== (this.comboBoxValue ?? "") && this.dispatchSelectionChangeEvent(), this.updateIcon(this.isCustomValue(this.comboBoxValue) ? null : (e = this.comboBoxValue) == null ? void 0 : e.item);
|
|
293
329
|
}
|
|
294
330
|
restorePreviousSelection() {
|
|
295
331
|
this.updateInputValue(null);
|
|
@@ -318,7 +354,7 @@ const a = (o = class extends _ {
|
|
|
318
354
|
}
|
|
319
355
|
updateInputValue(t) {
|
|
320
356
|
this.updateComplete.then(() => {
|
|
321
|
-
this.value = this.convertToDisplayValue(t);
|
|
357
|
+
this.value = this.convertToDisplayValue(t), t ? this.updateIcon(t) : this.updateIconFromCurrentValue();
|
|
322
358
|
});
|
|
323
359
|
}
|
|
324
360
|
convertToDisplayValue(t) {
|
|
@@ -326,15 +362,15 @@ const a = (o = class extends _ {
|
|
|
326
362
|
}
|
|
327
363
|
fireValueChange(t) {
|
|
328
364
|
if (t && this.filterText !== this.value) {
|
|
329
|
-
const e = (this.filterText
|
|
330
|
-
this.filterText = this.value, this.opened || (this._openedByFilterTextChange = !0, this.opened = !0), e && (this.dispatchFilterChangeEvent(), this.debouncedFilterItemsInMemory());
|
|
365
|
+
const e = (this.filterText ?? "") !== this.value;
|
|
366
|
+
this.filterText = this.value, this.updateIcon(null), this.opened || (this._openedByFilterTextChange = !0, this.opened = !0), e && (this.dispatchFilterChangeEvent(), this.debouncedFilterItemsInMemory());
|
|
331
367
|
}
|
|
332
368
|
}
|
|
333
369
|
clearValue() {
|
|
334
|
-
this.nullSettingDisallowed || (this.value = null, this.inputElement.removeAttribute("aria-activedescendant"), this._list && (this._list.selectedIndices = []), this.clearFilter(), this.comboBoxValue && (this.comboBoxValue = null, this.dispatchSelectionChangeEvent()));
|
|
370
|
+
this.nullSettingDisallowed || (this.value = null, this.inputElement.removeAttribute("aria-activedescendant"), this._list && (this._list.selectedIndices = []), this.clearFilter(), this.comboBoxValue && (this.comboBoxValue = null, this.dispatchSelectionChangeEvent()), this.requestUpdate());
|
|
335
371
|
}
|
|
336
372
|
clearFilter() {
|
|
337
|
-
this.filterText != null && (this.filterText = void 0, this.filterItemsInMemory(), this.dispatchFilterChangeEvent());
|
|
373
|
+
this.filterText != null && (this.filterText = void 0, this.filterItemsInMemory(), this.dispatchFilterChangeEvent(), this.updateIconFromCurrentValue());
|
|
338
374
|
}
|
|
339
375
|
updateDropdownSizes() {
|
|
340
376
|
const e = ((window.innerHeight || document.documentElement.clientHeight) - this.offsetHeight) * 0.5;
|
|
@@ -364,7 +400,7 @@ const a = (o = class extends _ {
|
|
|
364
400
|
this.comboBoxValue = null;
|
|
365
401
|
else {
|
|
366
402
|
const e = this.comboBoxValue;
|
|
367
|
-
|
|
403
|
+
this.isCustomValue(e) ? this.setFormValue(e) : this.setFormValue((t = e == null ? void 0 : e.item) == null ? void 0 : t.caption);
|
|
368
404
|
}
|
|
369
405
|
}).catch((t) => {
|
|
370
406
|
console.error("Could not dispatch selection change event due to:", t);
|
|
@@ -382,7 +418,7 @@ const a = (o = class extends _ {
|
|
|
382
418
|
return !!this._onDataRequest;
|
|
383
419
|
}
|
|
384
420
|
requestData(t, e) {
|
|
385
|
-
if (e == null && (e = (this.filterText
|
|
421
|
+
if (e == null && (e = (this.filterText ?? "") !== (this._lastRequestedFilterText ?? "")), this.isLazyLoadConfigured) {
|
|
386
422
|
if (!this.opened) {
|
|
387
423
|
e && (this._dataProvider.items = [], this._itemCache = []);
|
|
388
424
|
return;
|
|
@@ -398,12 +434,12 @@ const a = (o = class extends _ {
|
|
|
398
434
|
if (this.comboBoxValue && !this.isCustomValue(this.comboBoxValue)) {
|
|
399
435
|
const n = this.comboBoxValue.item;
|
|
400
436
|
if (this._list.selectedIndices.length == 0 || this.items[this._list.selectedIndices[0]] != n) {
|
|
401
|
-
let
|
|
402
|
-
if (
|
|
437
|
+
let a = this.items.indexOf(n);
|
|
438
|
+
if (a == -1) {
|
|
403
439
|
const c = n.id;
|
|
404
|
-
c != null && (
|
|
440
|
+
c != null && (a = this.items.findIndex((m) => m.id == c));
|
|
405
441
|
}
|
|
406
|
-
this.comboBoxValue.index =
|
|
442
|
+
this.comboBoxValue.index = a, this._list.selectedIndices = a == -1 ? [] : [a];
|
|
407
443
|
}
|
|
408
444
|
}
|
|
409
445
|
this.updateDropdownSizes(), this._popper.update();
|
|
@@ -434,31 +470,34 @@ ${s}`
|
|
|
434
470
|
}, o.formAssociated = !0, o.DATA_REQUEST_CANCELLED = "cancel_data_request", o);
|
|
435
471
|
d([
|
|
436
472
|
r({ type: Boolean, reflect: !0 })
|
|
437
|
-
],
|
|
473
|
+
], l.prototype, "opened", 2);
|
|
438
474
|
d([
|
|
439
475
|
r({ type: Number, attribute: "item-height" })
|
|
440
|
-
],
|
|
476
|
+
], l.prototype, "itemHeight", 2);
|
|
441
477
|
d([
|
|
442
478
|
r({ type: Boolean, attribute: "allow-custom-value", reflect: !0 })
|
|
443
|
-
],
|
|
479
|
+
], l.prototype, "allowCustomValue", 2);
|
|
444
480
|
d([
|
|
445
481
|
r({ type: Boolean, attribute: "trigger-only", reflect: !0 })
|
|
446
|
-
],
|
|
482
|
+
], l.prototype, "triggerOnly", 2);
|
|
447
483
|
d([
|
|
448
484
|
r({ type: Boolean, attribute: "null-setting-disallowed", reflect: !0 })
|
|
449
|
-
],
|
|
485
|
+
], l.prototype, "nullSettingDisallowed", 2);
|
|
486
|
+
d([
|
|
487
|
+
r({ type: Boolean, attribute: "show-icon", reflect: !0 })
|
|
488
|
+
], l.prototype, "showIcon", 2);
|
|
450
489
|
d([
|
|
451
490
|
r({ type: String, attribute: "display-value-path", noAccessor: !0 })
|
|
452
|
-
],
|
|
491
|
+
], l.prototype, "displayValuePath", 2);
|
|
453
492
|
d([
|
|
454
493
|
r({ type: String, attribute: "filter-property", noAccessor: !0 })
|
|
455
|
-
],
|
|
494
|
+
], l.prototype, "filterProperty", 2);
|
|
456
495
|
d([
|
|
457
496
|
r({ type: String, attribute: !0, reflect: !0 })
|
|
458
|
-
],
|
|
459
|
-
let
|
|
460
|
-
|
|
497
|
+
], l.prototype, "id", 2);
|
|
498
|
+
let E = l;
|
|
499
|
+
E.ensureDefined();
|
|
461
500
|
export {
|
|
462
|
-
|
|
501
|
+
E as default
|
|
463
502
|
};
|
|
464
503
|
//# sourceMappingURL=combo-box.mjs.map
|