@sebgroup/green-core 1.4.5 → 1.4.6

package/components/dropdown/dropdown.d.ts

@@ -77,13 +77,6 @@ export declare class GdsDropdown<ValueT = any> extends GdsFormControlElement<Val
      * are still readable and apply appropriate custom layout or truncation if neccecary.
      */
     syncPopoverWidth: boolean;
-    private _tStyles?;
-    private elTriggerBtn;
-    private elTriggerBtnAsync;
-    private elListbox;
-    private elSearchInput;
-    constructor();
-    connectedCallback(): void;
     /**
      * Get the options of the dropdown.
      */
@@ -98,6 +91,13 @@ export declare class GdsDropdown<ValueT = any> extends GdsFormControlElement<Val
      * If the dropdown is in multiple mode, this will be a comma separated list of the selected values.
      */
     get displayValue(): string;
+    private _tStyles?;
+    private _elTriggerBtn;
+    private _elTriggerBtnAsync;
+    private _elListbox;
+    private _elSearchInput;
+    constructor();
+    connectedCallback(): void;
     render(): any;
     /**
      * Update value assignment and request update when the light DOM changes.

package/index.js

@@ -94,9 +94,13 @@ function watch(propertyName, options) {
 }
 
 // libs/core/src/utils/decorators/observe-light-dom.ts
-function observeLightDOM() {
+function observeLightDOM(observerConfig = {
+  attributes: true,
+  childList: true,
+  subtree: false,
+  characterData: true
+}) {
   return (proto, _propertyKey, descriptor) => {
-    const observerConfig = { attributes: true, childList: true, subtree: false };
     let observer;
     const connectedCallback = proto.connectedCallback;
     const disconnectedCallback = proto.disconnectedCallback;
@@ -139,7 +143,7 @@ function watchMediaQuery(q) {
 // libs/core/src/utils/helpers/custom-element-scoping.ts
 import { html as litHtml } from "lit";
 import { customElement } from "lit/decorators.js";
-var VER_SUFFIX = "-6cf221";
+var VER_SUFFIX = "-a568b5";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var gdsCustomElement = (tagName) => {
   if (globalThis.GDS_DISABLE_VERSIONED_ELEMENTS) {
@@ -1285,7 +1289,7 @@ var GdsDropdown = class extends GdsFormControlElement {
      * @param e The keyboard event.
      */
     __privateAdd(this, _handleSearchFieldKeyUp, (e) => {
-      const input = this.elSearchInput;
+      const input = this._elSearchInput;
       const options = Array.from(__privateGet(this, _optionElements));
       options.forEach((o) => o.hidden = false);
       if (!input.value)
@@ -1300,11 +1304,13 @@ var GdsDropdown = class extends GdsFormControlElement {
      * If found, focus should be moved to the listbox.
      */
     __privateAdd(this, _handleSearchFieldKeyDown, (e) => {
-      if (e.key === "ArrowDown" || e.key === "Tab") {
-        e.preventDefault();
-        this.elListbox?.focus();
-        return;
-      }
+      this._elListbox?.then((listbox) => {
+        if (e.key === "ArrowDown" || e.key === "Tab") {
+          e.preventDefault();
+          listbox.focus();
+          return;
+        }
+      });
     });
     /**
      * Check for Tab in the listbox.
@@ -1313,12 +1319,12 @@ var GdsDropdown = class extends GdsFormControlElement {
     __privateAdd(this, _handleListboxKeyDown, (e) => {
       if (e.key === "Tab" && this.searchable) {
         e.preventDefault();
-        this.elSearchInput?.focus();
+        this._elSearchInput?.focus();
         return;
       }
     });
     __privateAdd(this, _handleOptionFocusChange, (e) => {
-      const triggerButton = this.elTriggerBtn;
+      const triggerButton = this._elTriggerBtn;
       if (triggerButton)
         triggerButton.ariaActiveDescendantElement = e.target;
     });
@@ -1334,7 +1340,7 @@ var GdsDropdown = class extends GdsFormControlElement {
       if (e.key === "Tab" && !this.searchable) {
         e.preventDefault();
         this.open = false;
-        this.elTriggerBtn?.focus();
+        this._elTriggerBtn?.focus();
       }
     });
     constrainSlots(this);
@@ -1343,14 +1349,6 @@ var GdsDropdown = class extends GdsFormControlElement {
       getScopedTagName("gds-option")
     ));
   }
-  connectedCallback() {
-    super.connectedCallback();
-    TransitionalStyles.instance.apply(this, "gds-dropdown");
-    this.updateComplete.then(() => {
-      this._handleLightDOMChange();
-      this._handleValueChange();
-    });
-  }
   /**
    * Get the options of the dropdown.
    */
@@ -1384,6 +1382,14 @@ var GdsDropdown = class extends GdsFormControlElement {
     }
     return displayValue || this.placeholder?.innerHTML || "";
   }
+  connectedCallback() {
+    super.connectedCallback();
+    TransitionalStyles.instance.apply(this, "gds-dropdown");
+    this.updateComplete.then(() => {
+      this._handleLightDOMChange();
+      this._handleValueChange();
+    });
+  }
   render() {
     return html`
       ${this._tStyles}
@@ -1413,7 +1419,7 @@ var GdsDropdown = class extends GdsFormControlElement {
       <gds-popover
         .label=${this.label}
         .open=${this.open}
-        .triggerRef=${this.elTriggerBtnAsync}
+        .triggerRef=${this._elTriggerBtnAsync}
         .calcMaxWidth=${(trigger) => this.syncPopoverWidth ? `${trigger.offsetWidth}px` : `auto`}
         @gds-ui-state=${(e) => this.open = e.detail.open}
       >
@@ -1444,27 +1450,31 @@ var GdsDropdown = class extends GdsFormControlElement {
   }
   _handleLightDOMChange() {
     this.requestUpdate();
-    this._handleValueChange();
-    if (this.multiple)
+    if (this.multiple) {
+      this._handleValueChange();
       return;
+    }
     if (!this.value) {
       if (this.placeholder)
         this.value = this.placeholder.value;
       else
         this.value = this.options[0]?.value;
-    } else if (!this.placeholder && this.options.find((o) => o.value === this.value) === void 0) {
+    } else if (!this.placeholder && this.options.find(
+      (o) => this.compareWith(o.value, this.value)
+    ) === void 0) {
       this.options[0] && (this.options[0].selected = true);
       this.value = this.options[0]?.value;
     }
   }
   _handleValueChange() {
-    const listbox = this.elListbox;
-    if (listbox) {
-      if (Array.isArray(this.value))
-        listbox.selection = this.value;
-      else
-        listbox.selection = [this.value];
-    }
+    this._elListbox.then((listbox) => {
+      if (listbox) {
+        if (Array.isArray(this.value))
+          listbox.selection = this.value;
+        else
+          listbox.selection = [this.value];
+      }
+    });
   }
   _onOpenChange() {
     const open = this.open;
@@ -1473,7 +1483,7 @@ var GdsDropdown = class extends GdsFormControlElement {
       __privateMethod(this, _registerAutoCloseListener, registerAutoCloseListener_fn).call(this);
     else {
       __privateMethod(this, _unregisterAutoCloseListener, unregisterAutoCloseListener_fn).call(this);
-      this.elSearchInput && (this.elSearchInput.value = "");
+      this._elSearchInput && (this._elSearchInput.value = "");
     }
     this.dispatchEvent(
       new CustomEvent("gds-ui-state", {
@@ -1491,23 +1501,22 @@ _handleListboxKeyDown = new WeakMap();
 _handleOptionFocusChange = new WeakMap();
 _handleSelectionChange = new WeakSet();
 handleSelectionChange_fn = function() {
-  const listbox = this.elListbox;
-  if (!listbox)
-    return;
-  if (this.multiple)
-    this.value = listbox.selection.map((s) => s.value);
-  else {
-    this.value = listbox.selection[0]?.value;
-    this.open = false;
-    setTimeout(() => this.elTriggerBtn?.focus(), 0);
-  }
-  this.dispatchEvent(
-    new CustomEvent("change", {
-      detail: { value: this.value },
-      bubbles: true,
-      composed: true
-    })
-  );
+  this._elListbox.then((listbox) => {
+    if (this.multiple)
+      this.value = listbox.selection.map((s) => s.value);
+    else {
+      this.value = listbox.selection[0]?.value;
+      this.open = false;
+      setTimeout(() => this._elTriggerBtn?.focus(), 0);
+    }
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true
+      })
+    );
+  });
 };
 _registerAutoCloseListener = new WeakSet();
 registerAutoCloseListener_fn = function() {
@@ -1554,18 +1563,23 @@ __decorateClass([
 ], GdsDropdown.prototype, "_tStyles", 2);
 __decorateClass([
   query("#trigger")
-], GdsDropdown.prototype, "elTriggerBtn", 2);
+], GdsDropdown.prototype, "_elTriggerBtn", 2);
 __decorateClass([
   queryAsync("#trigger")
-], GdsDropdown.prototype, "elTriggerBtnAsync", 2);
+], GdsDropdown.prototype, "_elTriggerBtnAsync", 2);
 __decorateClass([
-  query("#listbox")
-], GdsDropdown.prototype, "elListbox", 2);
+  queryAsync("#listbox")
+], GdsDropdown.prototype, "_elListbox", 2);
 __decorateClass([
   query("#searchinput")
-], GdsDropdown.prototype, "elSearchInput", 2);
+], GdsDropdown.prototype, "_elSearchInput", 2);
 __decorateClass([
-  observeLightDOM()
+  observeLightDOM({
+    attributes: true,
+    childList: true,
+    subtree: true,
+    characterData: true
+  })
 ], GdsDropdown.prototype, "_handleLightDOMChange", 1);
 __decorateClass([
   watch("value")

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sebgroup/green-core",
   "description": "A carefully crafted set of Web Components, laying the foundation of the Green Design System.",
-  "version": "1.4.5",
+  "version": "1.4.6",
   "main": "index.js",
   "module": "index.js",
   "type": "module",
@@ -18,7 +18,8 @@
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
-    "access": "public"
+    "access": "public",
+    "directory": "../../dist/libs/core/src"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.5.4",

package/transitional-styles.js

@@ -3212,7 +3212,7 @@ function register6() {
 // libs/core/src/utils/helpers/custom-element-scoping.ts
 import { html as litHtml } from "lit";
 import { customElement } from "lit/decorators.js";
-var VER_SUFFIX = "-6cf221";
+var VER_SUFFIX = "-a568b5";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var templateCache = /* @__PURE__ */ new WeakMap();
 function applyElementScoping(strings, ...values) {

package/utils/decorators/observe-light-dom.d.ts

@@ -3,5 +3,5 @@ declare type Handler = () => void;
 /**
  * Runs when the light DOM children of the component changes.
  */
-export declare function observeLightDOM(): <ElemClass extends LitElement>(proto: ElemClass, _propertyKey: string, descriptor: TypedPropertyDescriptor<Handler>) => void;
+export declare function observeLightDOM(observerConfig?: MutationObserverInit): <ElemClass extends LitElement>(proto: ElemClass, _propertyKey: string, descriptor: TypedPropertyDescriptor<Handler>) => void;
 export {};