@sebgroup/green-core 1.69.4 → 1.70.1

package/components/dropdown/dropdown.component.js

@@ -0,0 +1,554 @@
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet
+} from "../../chunks/chunk.QTSIPXV3.js";
+var _optionElements, _renderCombobox, _renderTriggerButton, _calcMaxHeight, _dispatchUISateEvent, _handlePopoverStateChange, _handleSearchFieldInput, _handleSearchFieldKeyDown, _handleListboxKeyDown, _handleOptionFocusChange, _handleSelectionChange, handleSelectionChange_fn, _dispatchInputEvent, _dispatchChangeEvent, _registerAutoCloseListener, registerAutoCloseListener_fn, _unregisterAutoCloseListener, unregisterAutoCloseListener_fn, _blurCloseListener, _tabCloseListener;
+import { localized, msg, str } from "@lit/localize";
+import { property, query, queryAsync } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { when } from "lit/directives/when.js";
+import { flip, offset } from "@floating-ui/dom";
+import { GdsFieldBase } from "../../primitives/field-base/field-base.component";
+import { GdsFormControlFooter } from "../../primitives/form-control-footer/form-control-footer.component";
+import { GdsFormControlHeader } from "../../primitives/form-control-header/form-control-header.component";
+import { GdsListbox } from "../../primitives/listbox/listbox.component";
+import { gdsCustomElement, html } from "../../scoping";
+import { tokens } from "../../tokens.style";
+import { observeLightDOM } from "../../utils/decorators/observe-light-dom";
+import { watch } from "../../utils/decorators/watch";
+import { GdsFormControlElement } from "../form/form-control";
+import { IconCheckmark } from "../icon/icons/checkmark.component";
+import { IconChevronBottom } from "../icon/icons/chevron-bottom.component";
+import { GdsPopover } from "../popover/popover.component";
+import styles from "./dropdown.styles";
+export * from "../../primitives/listbox/option.component";
+let GdsDropdown = class extends GdsFormControlElement {
+  constructor() {
+    super(...arguments);
+    /**
+     * Selects an option in the dropdown.
+     *
+     * @fires change
+     */
+    __privateAdd(this, _handleSelectionChange);
+    __privateAdd(this, _registerAutoCloseListener);
+    __privateAdd(this, _unregisterAutoCloseListener);
+    this.supportingText = "";
+    this.open = false;
+    this.searchable = false;
+    this.multiple = false;
+    this.combobox = false;
+    this.compareWith = (a, b) => a === b;
+    this.searchFilter = (q, o) => o.innerHTML.toLowerCase().includes(q.toLowerCase());
+    this.syncPopoverWidth = false;
+    this.maxHeight = 500;
+    this.size = "medium";
+    this.hideLabel = false;
+    this.disableMobileStyles = false;
+    __privateAdd(this, _optionElements, void 0);
+    __privateAdd(this, _renderCombobox, () => {
+      return html`
+      <input
+        id="trigger"
+        role="combobox"
+        aria-expanded="${this.open}"
+        aria-owns="listbox"
+        aria-haspopup="listbox"
+        aria-controls="listbox"
+        placeholder="${this.placeholder?.innerHTML}"
+        name="trigger"
+        aria-label="${this.label} ${this.displayValue}"
+        aria-describedby="supporting-text extended-supporting-text sub-label message"
+        aria-invalid="${this.invalid}"
+        aria-required="${this.required}"
+        aria-disabled="${this.disabled}"
+        .value=${this.value}
+        @click=${(e) => {
+        e.stopImmediatePropagation();
+      }}
+        @input=${(e) => {
+        this.value = e.target.value;
+        __privateGet(this, _dispatchInputEvent).call(this);
+        __privateGet(this, _handleSearchFieldInput).call(this, e);
+        __privateGet(this, _dispatchUISateEvent).call(this, true, "show") && (this.open = true);
+      }}
+        @keydown=${(e) => {
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          __privateGet(this, _dispatchUISateEvent).call(this, true, "show") && (this.open = true);
+          this._elListbox.then((listbox) => listbox.focus());
+        }
+        if (e.key === "Enter") {
+          __privateGet(this, _dispatchChangeEvent).call(this);
+        }
+      }}
+      />
+    `;
+    });
+    __privateAdd(this, _renderTriggerButton, () => {
+      return html`
+      <button
+        id="trigger"
+        role="combobox"
+        aria-expanded="${this.open}"
+        aria-owns="listbox"
+        aria-haspopup="listbox"
+        aria-controls="listbox"
+        name="trigger"
+        aria-label="${this.label} ${this.displayValue}"
+        aria-describedby="supporting-text extended-supporting-text sub-label message"
+        aria-invalid="${this.invalid}"
+        aria-required="${this.required}"
+        aria-disabled="${this.disabled}"
+      >
+        <slot name="trigger">
+          <span>${unsafeHTML(this.displayValue)}</span>
+        </slot>
+      </button>
+    `;
+    });
+    __privateAdd(this, _calcMaxHeight, (trigger) => {
+      if (this.combobox) {
+        const triggerRect = trigger.getBoundingClientRect();
+        const windowHeight = window.innerHeight;
+        const bottomSpace = windowHeight - triggerRect.bottom;
+        const topSpace = triggerRect.top;
+        let height2 = Math.min(topSpace, this.maxHeight);
+        if (bottomSpace > topSpace)
+          height2 = Math.min(bottomSpace, this.maxHeight);
+        return `${height2 - 16}px`;
+      }
+      const height = Math.min(window.innerHeight, this.maxHeight);
+      return `${height - 16}px`;
+    });
+    __privateAdd(this, _dispatchUISateEvent, (toState, reason) => this.dispatchEvent(
+      new CustomEvent("gds-ui-state", {
+        detail: { reason, open: toState },
+        bubbles: false,
+        composed: false,
+        cancelable: true
+      })
+    ));
+    __privateAdd(this, _handlePopoverStateChange, (e) => {
+      if (__privateGet(this, _dispatchUISateEvent).call(this, e.detail.open, e.detail.reason)) {
+        this.open = e.detail.open;
+      }
+    });
+    /**
+     * Event handler for filtering the options in the dropdown.
+     *
+     * @param e The input event.
+     */
+    __privateAdd(this, _handleSearchFieldInput, (e) => {
+      if (!e.currentTarget)
+        return;
+      e.stopPropagation();
+      const wasCancelled = !this.dispatchEvent(
+        new CustomEvent("gds-filter-input", {
+          detail: { value: e.currentTarget.value },
+          cancelable: true
+        })
+      );
+      if (wasCancelled)
+        return;
+      const input = e.currentTarget;
+      this.options.forEach((o) => o.hidden = false);
+      if (!input.value)
+        return;
+      const filteredOptions = this.options.filter(
+        (o) => !this.searchFilter(input.value, o)
+      );
+      filteredOptions.forEach((o) => o.hidden = true);
+    });
+    /**
+     * Check for ArrowDown or Tab in the search field.
+     * If found, focus should be moved to the listbox.
+     */
+    __privateAdd(this, _handleSearchFieldKeyDown, (e) => {
+      this._elListbox?.then((listbox) => {
+        if (e.key === "ArrowDown" || e.key === "Tab") {
+          e.preventDefault();
+          listbox.focus();
+          return;
+        }
+      });
+    });
+    /**
+     * Check for Tab in the listbox.
+     * If found, focus should be moved to the search field.
+     */
+    __privateAdd(this, _handleListboxKeyDown, (e) => {
+      if (e.key === "Tab" && this.searchable) {
+        e.preventDefault();
+        this._elSearchInput?.focus();
+        return;
+      }
+    });
+    __privateAdd(this, _handleOptionFocusChange, (e) => {
+      const triggerButton = this._elTriggerBtn;
+      if (triggerButton)
+        triggerButton.ariaActiveDescendantElement = e.target;
+    });
+    __privateAdd(this, _dispatchInputEvent, () => {
+      this.dispatchEvent(
+        new Event("input", {
+          bubbles: true,
+          composed: true
+        })
+      );
+    });
+    __privateAdd(this, _dispatchChangeEvent, () => {
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: { value: this.value },
+          bubbles: true,
+          composed: true
+        })
+      );
+    });
+    /**
+     * A listener to close the dropdown when any other element is focused.
+     */
+    __privateAdd(this, _blurCloseListener, (e) => {
+      const isFocusOutside = e instanceof FocusEvent && e.relatedTarget && !this.contains(e.relatedTarget);
+      if (isFocusOutside && __privateGet(this, _dispatchUISateEvent).call(this, false, "close"))
+        this.open = false;
+    });
+    __privateAdd(this, _tabCloseListener, (e) => {
+      if (e.key === "Tab" && !this.searchable && __privateGet(this, _dispatchUISateEvent).call(this, false, "close")) {
+        e.preventDefault();
+        this.open = false;
+        this._elTriggerBtn?.focus();
+      }
+    });
+  }
+  get type() {
+    return "gds-dropdown";
+  }
+  /**
+   * Get the options of the dropdown.
+   */
+  get options() {
+    if (!__privateGet(this, _optionElements))
+      return [];
+    return Array.from(__privateGet(this, _optionElements)).filter(
+      (o) => !o.hasAttribute("isplaceholder")
+    );
+  }
+  /**
+   * Return the first option with a isPlaceholder attribute.
+   * If no placeholder is found, this will be undefined.
+   */
+  get placeholder() {
+    if (!__privateGet(this, _optionElements))
+      return;
+    return Array.from(__privateGet(this, _optionElements)).find(
+      (o) => o.hasAttribute("isplaceholder")
+    );
+  }
+  /**
+   * Returns the display value as a string.
+   * If the dropdown is in multiple mode, this will be a comma separated list of the selected values.
+   */
+  get displayValue() {
+    let displayValue;
+    if (Array.isArray(this.value)) {
+      this.value.length > 2 ? displayValue = msg(str`${this.value.length} selected`) : displayValue = this.value.reduce(
+        (acc, cur) => acc + this.options.find((v) => v.value === cur)?.innerHTML + ", ",
+        ""
+      ).slice(0, -2);
+    } else {
+      displayValue = this.options.find((v) => v.selected)?.innerHTML;
+    }
+    return displayValue || this.placeholder?.innerHTML || "";
+  }
+  /**
+   * Moves focus to this element.
+   */
+  focus() {
+    this._getValidityAnchor().focus();
+  }
+  /**
+   * A reference to the field element. This does not refer to the trigger button element itself,
+   * but the wrapper that makes up the visual field.
+   * Intended for use in integration tests.
+   */
+  test_getFieldElement() {
+    return this.shadowRoot?.querySelector("#field");
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateComplete.then(() => {
+      this._handleLightDOMChange();
+      this._handleValueChange();
+      this._handleOpenChange();
+    });
+  }
+  render() {
+    return html`
+      ${when(
+      !this.hideLabel,
+      () => html`
+          <gds-form-control-header class="size-${this.size}">
+            <label id="label" for="trigger" slot="label">${this.label}</label>
+            ${when(
+        this.supportingText.length > 0,
+        () => html`<span slot="supporting-text" id="supporting-text">
+                  ${this.supportingText}
+                </span>`
+      )}
+            <slot
+              id="extended-supporting-text"
+              name="extended-supporting-text"
+              slot="extended-supporting-text"
+            ></slot>
+            <!-- @deprecated: use 'supporting-text' slot instead. Remove in 2.0 release. -->
+            <slot id="sub-label" name="sub-label" slot="supporting-text"></slot>
+          </gds-form-control-header>
+        `
+    )}
+      <gds-popover
+        .autofocus=${!this.combobox}
+        .label=${this.label}
+        .open=${this.open}
+        .calcMaxWidth=${(trigger) => this.syncPopoverWidth ? `${trigger.offsetWidth}px` : `auto`}
+        .calcMaxHeight=${__privateGet(this, _calcMaxHeight)}
+        .disableMobileStyles=${this.disableMobileStyles || this.combobox}
+        .nonmodal=${this.combobox}
+        .floatingUIMiddleware=${this.combobox ? [offset(8), flip()] : GdsPopover.DefaultMiddleware}
+        @gds-ui-state=${__privateGet(this, _handlePopoverStateChange)}
+      >
+        <gds-field-base
+          .size=${this.size}
+          .disabled=${this.disabled}
+          .invalid=${this.invalid}
+          slot="trigger"
+          id="field"
+        >
+          <slot name="lead" slot="lead"></slot>
+          ${this.combobox && !this.multiple ? __privateGet(this, _renderCombobox).call(this) : __privateGet(this, _renderTriggerButton).call(this)}
+          <gds-icon-chevron-bottom
+            slot="trail"
+            label=${msg("Expand")}
+          ></gds-icon-chevron-bottom>
+        </gds-field-base>
+
+        ${when(
+      this.searchable,
+      () => html`<input
+              id="searchinput"
+              type="text"
+              aria-label="${msg("Filter available options")}"
+              placeholder="${msg("Search")}"
+              @keydown=${__privateGet(this, _handleSearchFieldKeyDown)}
+              @input=${__privateGet(this, _handleSearchFieldInput)}
+            />`
+    )}
+        <gds-listbox
+          id="listbox"
+          .multiple="${ifDefined(this.multiple)}"
+          .compareWith="${this.compareWith}"
+          @change="${__privateMethod(this, _handleSelectionChange, handleSelectionChange_fn)}"
+          @gds-focus="${__privateGet(this, _handleOptionFocusChange)}"
+          @keydown=${__privateGet(this, _handleListboxKeyDown)}
+        >
+          <slot></slot>
+        </gds-listbox>
+      </gds-popover>
+
+      ${when(
+      !this.hideLabel,
+      () => html`
+          <gds-form-control-footer class="size-${this.size}">
+            ${when(
+        this.invalid,
+        // @deprecated
+        // Wrapped in a slot for backwards compatibility with the deprecated message slot
+        // Remove for 2.0 release
+        () => html`
+                <slot id="message" name="message" slot="message">
+                  <gds-icon-triangle-exclamation
+                    solid
+                  ></gds-icon-triangle-exclamation>
+                  ${this.errorMessage || this.validationMessage}
+                </slot>
+              `
+      )}
+          </gds-form-control-footer>
+        `
+    )}
+    `;
+  }
+  _getValidityAnchor() {
+    return this._elTriggerBtn;
+  }
+  _handleLightDOMChange() {
+    this.requestUpdate();
+    __privateSet(this, _optionElements, this.querySelectorAll("[gds-element=gds-option]"));
+    if (this.multiple) {
+      this._handleValueChange();
+      return;
+    }
+    if (this.value === void 0) {
+      if (this.placeholder)
+        this.value = this.placeholder.value;
+      else
+        this.value = this.options[0]?.value;
+    } else if (!this.combobox && !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() {
+    this._elListbox.then((listbox) => {
+      if (listbox) {
+        if (Array.isArray(this.value))
+          listbox.selection = this.value;
+        else
+          listbox.selection = [this.value];
+      }
+    });
+  }
+  _handleOpenChange() {
+    const open = this.open;
+    this.options.forEach((o) => o.hidden = !open);
+    if (open)
+      __privateMethod(this, _registerAutoCloseListener, registerAutoCloseListener_fn).call(this);
+    else {
+      __privateMethod(this, _unregisterAutoCloseListener, unregisterAutoCloseListener_fn).call(this);
+      this._elSearchInput && (this._elSearchInput.value = "");
+    }
+    const selectedOption = this.options.find((option) => option.selected);
+    requestAnimationFrame(async () => {
+      await this.updateComplete;
+      selectedOption?.scrollIntoView({
+        block: "center"
+      });
+    });
+  }
+};
+_optionElements = new WeakMap();
+_renderCombobox = new WeakMap();
+_renderTriggerButton = new WeakMap();
+_calcMaxHeight = new WeakMap();
+_dispatchUISateEvent = new WeakMap();
+_handlePopoverStateChange = new WeakMap();
+_handleSearchFieldInput = new WeakMap();
+_handleSearchFieldKeyDown = new WeakMap();
+_handleListboxKeyDown = new WeakMap();
+_handleOptionFocusChange = new WeakMap();
+_handleSelectionChange = new WeakSet();
+handleSelectionChange_fn = function() {
+  this._elListbox.then((listbox) => {
+    if (this.multiple)
+      this.value = listbox.selection.map((s) => s.value);
+    else {
+      this.value = listbox.selection[0]?.value;
+      if (__privateGet(this, _dispatchUISateEvent).call(this, false, "close")) {
+        this.open = false;
+        setTimeout(() => this._elTriggerBtn?.focus(), 0);
+      }
+    }
+    __privateGet(this, _dispatchInputEvent).call(this);
+    __privateGet(this, _dispatchChangeEvent).call(this);
+  });
+};
+_dispatchInputEvent = new WeakMap();
+_dispatchChangeEvent = new WeakMap();
+_registerAutoCloseListener = new WeakSet();
+registerAutoCloseListener_fn = function() {
+  this.addEventListener("blur", __privateGet(this, _blurCloseListener));
+  this.addEventListener("gds-blur", __privateGet(this, _blurCloseListener));
+  this.addEventListener("keydown", __privateGet(this, _tabCloseListener));
+};
+_unregisterAutoCloseListener = new WeakSet();
+unregisterAutoCloseListener_fn = function() {
+  this.removeEventListener("blur", __privateGet(this, _blurCloseListener));
+  this.removeEventListener("gds-blur", __privateGet(this, _blurCloseListener));
+  this.removeEventListener("keydown", __privateGet(this, _tabCloseListener));
+};
+_blurCloseListener = new WeakMap();
+_tabCloseListener = new WeakMap();
+GdsDropdown.styles = [tokens, styles];
+__decorateClass([
+  property({ attribute: "supporting-text" })
+], GdsDropdown.prototype, "supportingText", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], GdsDropdown.prototype, "open", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], GdsDropdown.prototype, "searchable", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], GdsDropdown.prototype, "multiple", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], GdsDropdown.prototype, "combobox", 2);
+__decorateClass([
+  property()
+], GdsDropdown.prototype, "compareWith", 2);
+__decorateClass([
+  property()
+], GdsDropdown.prototype, "searchFilter", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "sync-popover-width" })
+], GdsDropdown.prototype, "syncPopoverWidth", 2);
+__decorateClass([
+  property({ type: Number, attribute: "max-height" })
+], GdsDropdown.prototype, "maxHeight", 2);
+__decorateClass([
+  property()
+], GdsDropdown.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "hide-label" })
+], GdsDropdown.prototype, "hideLabel", 2);
+__decorateClass([
+  property()
+], GdsDropdown.prototype, "disableMobileStyles", 2);
+__decorateClass([
+  query("#trigger")
+], GdsDropdown.prototype, "_elTriggerBtn", 2);
+__decorateClass([
+  queryAsync("#listbox")
+], GdsDropdown.prototype, "_elListbox", 2);
+__decorateClass([
+  query("#searchinput")
+], GdsDropdown.prototype, "_elSearchInput", 2);
+__decorateClass([
+  observeLightDOM({
+    attributes: true,
+    childList: true,
+    subtree: true,
+    characterData: true
+  })
+], GdsDropdown.prototype, "_handleLightDOMChange", 1);
+__decorateClass([
+  watch("value")
+], GdsDropdown.prototype, "_handleValueChange", 1);
+__decorateClass([
+  watch("open")
+], GdsDropdown.prototype, "_handleOpenChange", 1);
+GdsDropdown = __decorateClass([
+  gdsCustomElement("gds-dropdown", {
+    dependsOn: [
+      GdsFormControlHeader,
+      GdsFormControlFooter,
+      GdsFieldBase,
+      GdsListbox,
+      GdsPopover,
+      IconCheckmark,
+      IconChevronBottom
+    ]
+  }),
+  localized()
+], GdsDropdown);
+export {
+  GdsDropdown
+};