dap-design-system/dist/components/command/command.component.js

Official design system for the DÁP (dap.gov.hu)

var w = Object.getPrototypeOf;
var y = Reflect.get;
var m = (n, e, t) => y(w(n), t, e);
var h = (n, e, t) => new Promise((s, i) => {
  var l = (o) => {
    try {
      u(t.next(o));
    } catch (c) {
      i(c);
    }
  }, p = (o) => {
    try {
      u(t.throw(o));
    } catch (c) {
      i(c);
    }
  }, u = (o) => o.done ? s(o.value) : Promise.resolve(o.value).then(l, p);
  u((t = t.apply(n, e)).next());
});
import { clsx as b } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import { nothing as k } from "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as g } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { state as _ } from "../../node_modules/@lit/reactive-element/decorators/state.js";
import { queryAssignedElements as C } from "../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
import { html as D } from "../../node_modules/lit-html/static.js";
import { createKeyboardNavigationHandler as v } from "../../internal/keyboard-navigation.js";
import f from "../popup/popup.component.js";
import $ from "./command.scss.js";
import { unsafeCSS as A } from "../../node_modules/@lit/reactive-element/css-tag.js";
var E = Object.defineProperty, d = (n, e, t, s) => {
  for (var i = void 0, l = n.length - 1, p; l >= 0; l--)
    (p = n[l]) && (i = p(e, t, i) || i);
  return i && E(e, t, i), i;
};
const a = class a extends f {
  constructor() {
    super(), this.value = null, this.fullWidth = !1, this._lastClickedItem = null, this._keyboardNavigation = null, this._handlePopupAutoClose = () => {
      this.hideDropDown({ skipFocus: !0 });
    }, this.placement = "bottom-start", this.overflow = !0;
  }
  connectedCallback() {
    return h(this, null, function* () {
      yield m(a.prototype, this, "connectedCallback").call(this), this.addEventListener("keydown", this._handleKeyDown), this.handleClick = this.handleClick.bind(this), this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
    });
  }
  disconnectedCallback() {
    super.disconnectedCallback(), this.removeEventListener("keydown", this._handleKeyDown), document.removeEventListener("mousedown", this.handleDocumentMouseDown);
  }
  firstUpdated(e) {
    if (super.firstUpdated(e), this.value) {
      const t = this.querySelector(
        `dap-ds-command-item[value="${this.value}"]`
      );
      t && (this._lastClickedItem = t, this._lastClickedItem.focus());
    }
  }
  updated(e) {
    return h(this, null, function* () {
      yield m(a.prototype, this, "updated").call(this, e), e.has("opened") && this.opened && (yield this.updateComplete, this._initializeKeyboardNavigation());
    });
  }
  _initializeKeyboardNavigation() {
    this._keyboardNavigation = v(this, {
      enabledSelector: "dap-ds-command-item:not([disabled])",
      onItemClick: (e) => {
        this._lastClickedItem = e;
      }
    }), this.updateComplete.then(() => {
      var e;
      (e = this._keyboardNavigation) == null || e.initializeFocus(
        this._lastClickedItem || void 0
      );
    });
  }
  _handleKeyDown(e) {
    var t;
    switch (e.key) {
      case "ArrowDown":
      case "ArrowUp":
      case "Home":
      case "End":
      case "Enter":
      case " ":
        if (!this.opened) {
          (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.showDropDown());
          return;
        }
        (t = this._keyboardNavigation) != null && t.handleKeyDown(e) && (e.key === "Enter" || e.key === " ") && this._handleFocusOut();
        break;
      case "Escape":
        e.preventDefault(), this._handleFocusOut();
        break;
    }
  }
  _handleMenuItemClick(e) {
    const { value: t, closeOnSelect: s } = e.detail;
    this.emit("dds-change", { value: t }), s === "true" && (this._lastClickedItem = e.target, this._handleFocusOut());
  }
  handleClick(e) {
    e.preventDefault(), e.stopPropagation(), this.opened ? this.hideDropDown() : this.showDropDown();
  }
  handleDocumentMouseDown(e) {
    const t = e.composedPath();
    this && !t.includes(this) && this.hideDropDown();
  }
  showDropDown() {
    return h(this, null, function* () {
      var e;
      this.opened || (this.opened = !0, (e = this._trigger[0]) == null || e.setAttribute("aria-expanded", "true"), document.addEventListener("mousedown", this.handleDocumentMouseDown), yield this.updateComplete);
    });
  }
  hideDropDown(e) {
    return h(this, null, function* () {
      var t, s;
      this.opened && (this.opened = !1, (t = this._trigger[0]) == null || t.setAttribute("aria-expanded", "false"), document.removeEventListener("mousedown", this.handleDocumentMouseDown), (s = this._keyboardNavigation) == null || s.reset(), yield this.updateComplete, e != null && e.skipFocus || this.focus());
    });
  }
  _handleFocusOut() {
    this.hideDropDown(), this.focus();
  }
  focus() {
    if (this._trigger && this._trigger.length > 0) {
      const e = this._trigger[0], t = e.getBoundingClientRect();
      t.top >= 0 && t.left >= 0 && t.bottom <= window.innerHeight && t.right <= window.innerWidth && e.focus({ preventScroll: !0 });
    }
  }
  _handleTriggerChange() {
    this._trigger && this._trigger.length > 0 && (this._trigger[0].setAttribute("aria-controls", "popup"), this._trigger[0].setAttribute(
      "aria-expanded",
      this.opened ? "true" : "false"
    ));
  }
  _handleDefaultSlotChange() {
    var e;
    (e = this._keyboardNavigation) == null || e.invalidateCache();
  }
  render() {
    return D`
      <dap-ds-popup
        part="popup-base"
        id="popup"
        role="menu"
        aria-label=${this.ariaLabel || "Command menu"}
        aria-labelledby=${this.ariaLabelledBy || k}
        aria-orientation="vertical"
        ?opened=${this.opened}
        exportparts="popup"
        class=${b("command")}
        placement=${this.placement}
        ?disabled=${this.disabled}
        @click=${this.handleClick}
        maxHeight=${this.maxHeight}
        ?overflow=${this.overflow}
        offset=${this.offset}
        ?sync=${this.sync}
        ?hasArrow=${this.hasArrow}
        ?fullWidth=${this.fullWidth}
        ?disableViewportAutoClose=${this.disableViewportAutoClose}
        floatingStrategy=${this.floatingStrategy}
        @dds-close=${this._handlePopupAutoClose}
        @dds-command-item-click=${this._handleMenuItemClick}>
        <slot
          name="trigger"
          slot="trigger"
          @slotchange=${this._handleTriggerChange}></slot>
        <slot @slotchange=${this._handleDefaultSlotChange}></slot>
      </dap-ds-popup>
    `;
  }
};
a.tagName = "dap-ds-command", a.dependencies = {
  "dap-ds-popup": f
}, a.styles = A($);
let r = a;
d([
  C({ slot: "trigger" })
], r.prototype, "_trigger");
d([
  g({ type: String })
], r.prototype, "value");
d([
  g({ type: Boolean })
], r.prototype, "fullWidth");
d([
  g({ type: String, attribute: "aria-labelledby" })
], r.prototype, "ariaLabelledBy");
d([
  _()
], r.prototype, "_lastClickedItem");
export {
  r as default
};
//# sourceMappingURL=command.component.js.map