dap-design-system 0.62.1 → 0.62.2

package/dist/components/combobox/comboboxBase.d.ts

@@ -38,6 +38,12 @@ export default class ComboboxBaseElement extends GenericFormElement {
     /** True when the search input currently holds non-whitespace text. */
     private get hasSearchText();
     selectedItem: any;
+    /**
+     * Display text of the selected item. `selectedItem` is either an option element
+     * (has `optionText`) when set from `value`, or an option event detail (has `text`)
+     * when picked by the user; reading `.text` alone yields "undefined" for the former.
+     */
+    private get selectedItemText();
     selectedItems: any[];
     currentItem: any;
     selectedText: string;

package/dist/components/combobox/comboboxBase.js

@@ -1,20 +1,20 @@
 var w = Object.getPrototypeOf;
 var S = Reflect.get;
 var x = (m, e, t) => S(w(m), t, e);
-var o = (m, e, t) => new Promise((i, a) => {
+var h = (m, e, t) => new Promise((i, a) => {
   var n = (u) => {
     try {
       c(t.next(u));
     } catch (b) {
       a(b);
     }
-  }, h = (u) => {
+  }, o = (u) => {
     try {
       c(t.throw(u));
     } catch (b) {
       a(b);
     }
-  }, c = (u) => u.done ? i(u.value) : Promise.resolve(u.value).then(n, h);
+  }, c = (u) => u.done ? i(u.value) : Promise.resolve(u.value).then(n, o);
   c((t = t.apply(m, e)).next());
 });
 import { clsx as g } from "../../node_modules/clsx/dist/clsx.js";
@@ -26,54 +26,61 @@ import { state as v } from "../../node_modules/@lit/reactive-element/decorators/
 import { query as C } from "../../node_modules/@lit/reactive-element/decorators/query.js";
 import { ifDefined as p } from "../../node_modules/lit-html/directives/if-defined.js";
 import { html as d } from "../../node_modules/lit-html/static.js";
-import { getValidityStateObject as V } from "../../common/utils.js";
-import { GenericFormElement as $ } from "../../internal/mixin/genericFormElement.js";
+import { getValidityStateObject as D } from "../../common/utils.js";
+import { GenericFormElement as V } from "../../internal/mixin/genericFormElement.js";
 import "../../localization/localization.js";
-import D from "./combobox.scss.js";
+import $ from "./combobox.scss.js";
 import { t as y } from "../../node_modules/i18next/dist/esm/i18next.js";
 import { unsafeCSS as O } from "../../node_modules/@lit/reactive-element/css-tag.js";
 var T = Object.defineProperty, l = (m, e, t, i) => {
-  for (var a = void 0, n = m.length - 1, h; n >= 0; n--)
-    (h = m[n]) && (a = h(e, t, a) || a);
+  for (var a = void 0, n = m.length - 1, o; n >= 0; n--)
+    (o = m[n]) && (a = o(e, t, a) || a);
   return a && T(e, t, a), a;
 };
-const f = class f extends $ {
+const f = class f extends V {
   constructor() {
     super(...arguments), this.placement = "bottom-start", this.opened = !1, this.searchMode = "autocomplete", this.search = !1, this.clearButton = "true", this.allowManualInput = !1, this.searchForText = !1, this.searchOnValueSet = "false", this.loading = !1, this.selectable = "true", this.noAnimation = !1, this.textComplete = !1, this.openOnEmpty = !1, this.disableViewportAutoClose = !1, this.multiselect = !1, this.clearButtonTestId = "combobox-clear-button", this.searchButtonTestId = "combobox-search-button", this.disableSearchWhenEmpty = !1, this.selectedItems = [], this.optionListObserver = null, this.isUserInteraction = !1, this.pendingInitialValues = [], this.handleClick = () => {
       !this.getComboboxOptions().length && !this.openOnEmpty ? this.hideDropDown() : this.opened ? this.hideDropDown() : this.showDropDown();
-    }, this.handleKeyDown = (e) => o(this, null, function* () {
+    }, this.handleKeyDown = (e) => h(this, null, function* () {
       var t, i;
-      if (e.key !== "Tab") {
-        if (e.key === "Enter")
-          return this.handleEnterKey(e);
-        if (e.key === "Escape")
-          return this.hideDropDown(), this.focus();
-        if (e.key === "Backspace" && this.multiselect && (((t = this.triggerInput) == null ? void 0 : t.value) || "") === "" && this.selectedItems.length > 0) {
-          e.preventDefault();
-          const n = this.selectedItems[this.selectedItems.length - 1];
-          this.removeSelectedItem(n), this.emit("dds-change", {
-            value: this.selectedItems.map((h) => h.value).join(","),
-            selectedItems: this.selectedItems,
-            type: "remove",
-            item: n
-          }), this.setValidity();
-          return;
-        }
-        if ((e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft" || e.key === "ArrowRight") && this.isAutoComplete)
-          return this.handleArrowKeys(e);
-        if (this.isAutoComplete && ((i = this.triggerInput) != null && i.value) && !this.opened) {
-          const a = this.getComboboxOptions().length > 0;
-          (this.openOnEmpty || a) && this.showDropDown();
-        }
+      if (e.key === "Tab") {
+        this.hideDropDown({ skipFocus: !0 });
+        return;
+      }
+      if (e.key === "Enter")
+        return this.handleEnterKey(e);
+      if (e.key === "Escape")
+        return this.hideDropDown(), this.focus();
+      if (e.key === "Backspace" && this.multiselect && (((t = this.triggerInput) == null ? void 0 : t.value) || "") === "" && this.selectedItems.length > 0) {
+        e.preventDefault();
+        const n = this.selectedItems[this.selectedItems.length - 1];
+        this.removeSelectedItem(n), this.emit("dds-change", {
+          value: this.selectedItems.map((o) => o.value).join(","),
+          selectedItems: this.selectedItems,
+          type: "remove",
+          item: n
+        }), this.setValidity();
+        return;
+      }
+      if ((e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft" || e.key === "ArrowRight") && this.isAutoComplete)
+        return this.handleArrowKeys(e);
+      if (this.isAutoComplete && ((i = this.triggerInput) != null && i.value) && !this.opened) {
+        const a = this.getComboboxOptions().length > 0;
+        (this.openOnEmpty || a) && this.showDropDown();
       }
-    }), this.handleInput = (e) => o(this, null, function* () {
+    }), this.handleInput = (e) => h(this, null, function* () {
       const t = this.triggerInput;
       if (this.isUserInteraction = !0, e.inputType !== "deleteContentBackward" || e.inputType === "deleteContentBackward" && this.allowManualInput ? (this.selectedText = t.value, this.search && (this.value = t.value)) : this.search ? (this.selectedText = t.value, this.value = t.value) : t.value === "" && e.inputType === "deleteContentBackward" && this.clearSelection(), this.emit("dds-input", { input: t.value, originalEvent: e }), this.setValidity(), this.requestUpdate(), this.isAutoComplete && t.value && !this.opened) {
         const i = this.getComboboxOptions().length > 0;
         (this.openOnEmpty || i) && this.showDropDown();
       }
     }), this.handleListKeyDown = (e) => {
-      e.detail.key === "Escape" && (this.hideDropDown(), this.currentItem = this.selectedItem, this.selectedText = "", this.triggerInput.value = this.selectedItem.text, this.triggerInput.focus());
+      var t, i;
+      if (((t = e.detail) == null ? void 0 : t.key) === "Tab") {
+        this.hideDropDown({ skipFocus: !0 }), this.triggerInput.focus();
+        return;
+      }
+      ((i = e.detail) == null ? void 0 : i.key) === "Escape" && (this.hideDropDown(), this.currentItem = this.selectedItem, this.selectedText = "", this.selectedItem && (this.triggerInput.value = this.selectedItemText), this.triggerInput.focus());
     }, this.handleDocumentMouseDown = (e) => {
       const t = e.composedPath();
       this && !t.includes(this) && this.hideDropDown();
@@ -83,7 +90,7 @@ const f = class f extends $ {
       this.emit("dds-focus");
     }, this.handleBlur = () => {
       this.emit("dds-blur");
-    }, this.handleSelectedChange = (e) => o(this, null, function* () {
+    }, this.handleSelectedChange = (e) => h(this, null, function* () {
       var t;
       if (e.preventDefault(), e.stopPropagation(), this.searchForText)
         this.selectedText = e.detail.text, this.value = e.detail.text, this.triggerInput.value = e.detail.text, this.emit("dds-search", { search: this.selectedText }), this.requestUpdate(), this.setValidity();
@@ -130,11 +137,19 @@ const f = class f extends $ {
   }
   /** True when the search input currently holds non-whitespace text. */
   get hasSearchText() {
-    var t;
-    return (this.selectedText || ((t = this.selectedItem) == null ? void 0 : t.text) || this.value || "").trim().length > 0;
+    return (this.selectedText || this.selectedItemText || this.value || "").trim().length > 0;
+  }
+  /**
+   * Display text of the selected item. `selectedItem` is either an option element
+   * (has `optionText`) when set from `value`, or an option event detail (has `text`)
+   * when picked by the user; reading `.text` alone yields "undefined" for the former.
+   */
+  get selectedItemText() {
+    var e, t, i, a;
+    return (a = (i = (e = this.selectedItem) == null ? void 0 : e.text) != null ? i : (t = this.selectedItem) == null ? void 0 : t.optionText) != null ? a : "";
   }
   firstUpdated(e) {
-    return o(this, null, function* () {
+    return h(this, null, function* () {
       var a;
       x(f.prototype, this, "firstUpdated").call(this, e), yield this.optionList.updateComplete, yield new Promise((n) => requestAnimationFrame(n));
       const t = this.getComboboxOptions();
@@ -142,7 +157,7 @@ const f = class f extends $ {
       const i = x(f.prototype, this, "value");
       if (i)
         if (this.multiselect) {
-          const n = i.split(",").map((h) => h.trim()).filter((h) => h);
+          const n = i.split(",").map((o) => o.trim()).filter((o) => o);
           this.pendingInitialValues = n, this.updateMultipleSelectionsFromValues(n);
         } else
           this.selectedItem = (a = this.optionList) == null ? void 0 : a.getAllOptions().find((n) => n.value === i), this.selectedItem ? this.selectedText = this.selectedItem.optionText || "" : this.selectedText = "", !this.selectedText && (this.allowManualInput || this.searchMode === "none") && (this.selectedText = i);
@@ -179,9 +194,9 @@ const f = class f extends $ {
       e.forEach((i) => {
         if (i.type === "childList") {
           const a = Array.from(i.addedNodes).some(
-            (h) => h.nodeName === "DAP-DS-OPTION-ITEM"
+            (o) => o.nodeName === "DAP-DS-OPTION-ITEM"
           ), n = Array.from(i.removedNodes).some(
-            (h) => h.nodeName === "DAP-DS-OPTION-ITEM"
+            (o) => o.nodeName === "DAP-DS-OPTION-ITEM"
           );
           (a || n) && (t = !0);
         }
@@ -243,32 +258,32 @@ const f = class f extends $ {
     return this.placeholder && this.placeholder.trim() !== "" ? !1 : e === "";
   }
   handleEnterKey(e) {
-    return o(this, null, function* () {
+    return h(this, null, function* () {
       return e.preventDefault(), e.stopPropagation(), this.allowManualInput ? this.handleSearchEnter() : this.currentItem && this.opened ? this.handleCurrentItemEnter() : this.search && !this.isAutoComplete ? this.handleSearchEnter() : this.handleDefaultEnter();
     });
   }
   handleCurrentItemEnter() {
-    return o(this, null, function* () {
+    return h(this, null, function* () {
       var e, t;
       if (this.currentItem.value === ((e = this.selectedItem) == null ? void 0 : e.value)) {
-        this.hideDropDown(), this.triggerInput.value = this.selectedItem.text, this.triggerInput.focus();
+        this.hideDropDown(), this.triggerInput.value = this.selectedItemText, this.triggerInput.focus();
         return;
       }
       this.currentItem.value !== ((t = this.selectedItem) == null ? void 0 : t.value) && (this.searchForText ? yield this.handleTextSearch(this.currentItem.text) : yield this.handleSelectedItemChange(this.currentItem));
     });
   }
   handleSearchEnter() {
-    return o(this, null, function* () {
+    return h(this, null, function* () {
       return this.emit("dds-search", { search: this.selectedText }), this.setValidity(), this.hideDropDown();
     });
   }
   handleDefaultEnter() {
-    return o(this, null, function* () {
+    return h(this, null, function* () {
       return this.opened ? this.hideDropDown() : (this.openOnEmpty || this.getComboboxOptions().length || this.isAutoComplete) && this.showDropDown();
     });
   }
   handleSelectedItemChange(e) {
-    return o(this, null, function* () {
+    return h(this, null, function* () {
       this.selectedItem = e, this.emit("dds-change", {
         value: this.selectedItem.value,
         selectedItem: this.selectedItem,
@@ -277,12 +292,12 @@ const f = class f extends $ {
     });
   }
   handleTextSearch(e) {
-    return o(this, null, function* () {
+    return h(this, null, function* () {
       this.value = e, this.selectedText = e, this.triggerInput.value = e, this.triggerInput.focus(), this.emit("dds-search", { search: e }), this.setValidity();
     });
   }
   handleArrowKeys(e) {
-    return o(this, null, function* () {
+    return h(this, null, function* () {
       if (e.preventDefault(), !this.opened)
         if (this.openOnEmpty || this.getComboboxOptions().length || this.isAutoComplete)
           this.showDropDown();
@@ -292,7 +307,7 @@ const f = class f extends $ {
     });
   }
   clearSelection() {
-    return o(this, null, function* () {
+    return h(this, null, function* () {
       var t;
       this.isUserInteraction = !1;
       const e = !!(this.value || this.selectedText || (t = this.triggerInput) != null && t.value);
@@ -338,10 +353,10 @@ const f = class f extends $ {
     this.selectedItems.length === 0 && (this.selectedItems = []);
     let a = !1;
     e.forEach((n) => {
-      const h = t.find(
+      const o = t.find(
         (c) => c.value === n || c.getAttribute("value") === n
       );
-      h && (this.selectedItems.some((u) => u.value === n) || (this.selectedItems.push(h), a = !0));
+      o && (this.selectedItems.some((u) => u.value === n) || (this.selectedItems.push(o), a = !0));
     }), a && this.pendingInitialValues.length > 0 && (this.pendingInitialValues = []), this.requestUpdate();
   }
   /**
@@ -362,12 +377,12 @@ const f = class f extends $ {
       super.value = e;
   }
   showDropDown() {
-    return o(this, null, function* () {
+    return h(this, null, function* () {
       this.disabled || this.readonly || !this.isAutoComplete || this.opened || !this.openOnEmpty && !this.getComboboxOptions().length && !this.isAutoComplete || (this.opened = !0, document.addEventListener("mousedown", this.handleDocumentMouseDown));
     });
   }
   hideDropDown(e) {
-    return o(this, null, function* () {
+    return h(this, null, function* () {
       this.opened && (this.opened = !1, document.removeEventListener("mousedown", this.handleDocumentMouseDown), yield this.updateComplete, e != null && e.skipFocus || this.focus(), this.clearSelectionRange());
     });
   }
@@ -385,7 +400,10 @@ const f = class f extends $ {
     return this.multiselect ? this.getMultiSelectValidity() : this.isAutoComplete ? this.getAutoCompleteValidity() : this.getBasicValidity();
   }
   formResetCallback() {
-    this.internals.setValidity({}), this.internals.setFormValue(this.defaultValue), this.value = this.defaultValue, this.multiselect ? this.selectedItems = [] : this.selectedItem = this.defaultValue;
+    var e;
+    this.internals.setValidity({}), this.internals.setFormValue(this.defaultValue), this.value = this.defaultValue, this.multiselect ? this.selectedItems = [] : this.selectedItem = (e = this.getComboboxOptions().find(
+      (t) => t.value === this.defaultValue
+    )) != null ? e : null;
   }
   getMultiSelectValidity() {
     return !this.required || this.selectedItems.length > 0;
@@ -407,7 +425,7 @@ const f = class f extends $ {
   }
   // custom validation
   get validity() {
-    return this.internals.validity ? this.internals.validity : V({
+    return this.internals.validity ? this.internals.validity : D({
       valueMissing: this.required && !this.getValidity()
     });
   }
@@ -480,8 +498,8 @@ const f = class f extends $ {
     `;
   }
   renderInput() {
-    var t, i, a;
-    const e = this.multiselect ? this.selectedText : this.selectedText !== "" ? this.selectedText : ((t = this.selectedItem) == null ? void 0 : t.text) || "";
+    var t, i;
+    const e = this.multiselect ? this.selectedText : this.selectedText !== "" ? this.selectedText : this.selectedItemText;
     return d`<input
       id="input"
       part="input"
@@ -498,7 +516,7 @@ const f = class f extends $ {
       aria-disabled=${this.disabled}
       aria-autocomplete="both"
       aria-controls="option-list"
-      aria-activedescendant=${p((i = this.getActiveDescendant()) == null ? void 0 : i.id)}
+      aria-activedescendant=${p((t = this.getActiveDescendant()) == null ? void 0 : t.id)}
       aria-multiselectable=${this.multiselect ? "true" : "false"}
       ?required=${this.required}
       ?readonly=${this.readonly}
@@ -506,7 +524,7 @@ const f = class f extends $ {
       autocomplete=${this.autocomplete}
       ?disabled=${this.disabled}
       value=${e}
-      placeholder=${p((a = this.placeholder) != null ? a : "")}
+      placeholder=${p((i = this.placeholder) != null ? i : "")}
       type=${this.search ? "search" : "text"}
       @blur=${this.handleBlur}
       @focus=${this.handleFocus}
@@ -643,7 +661,7 @@ const f = class f extends $ {
       </div>`;
   }
 };
-f.styles = O(D);
+f.styles = O($);
 let s = f;
 l([
   C("input")