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

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

import { clsx as p } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import { nothing as m } from "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as i } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { state as u } from "../../node_modules/@lit/reactive-element/decorators/state.js";
import { query as y } from "../../node_modules/@lit/reactive-element/decorators/query.js";
import { ifDefined as h } from "../../node_modules/lit-html/directives/if-defined.js";
import { unsafeStatic as f, html as o } from "../../node_modules/lit-html/static.js";
import { DdsElement as b } from "../../internal/dds-hu-element.js";
import _ from "../icon/icon.component.js";
import g from "./command-item.scss.js";
import { unsafeCSS as $ } from "../../node_modules/@lit/reactive-element/css-tag.js";
var S = Object.defineProperty, s = (c, e, d, k) => {
  for (var a = void 0, l = c.length - 1, n; l >= 0; l--)
    (n = c[l]) && (a = n(e, d, a) || a);
  return a && S(e, d, a), a;
};
const r = class r extends b {
  constructor() {
    super(...arguments), this.disabled = !1, this.target = "_self", this.rel = "noreferrer noopener", this.selectable = !1, this.selected = !1, this.closeOnSelect = "true", this._isSelected = !1;
  }
  connectedCallback() {
    super.connectedCallback(), this._isSelected = this.selected;
  }
  updated(e) {
    super.updated(e), e.has("selected") && (this._isSelected = this.selected);
  }
  _handleClick(e) {
    e.stopPropagation(), !this.disabled && (this._isSelected = !this._isSelected, this.emit("dds-command-item-click", {
      value: this.value,
      closeOnSelect: this.closeOnSelect
    }));
  }
  _handleKeyDown(e) {
    (e.key === "Enter" || e.key === " ") && (this.href ? e.stopPropagation() : (e.preventDefault(), this._handleClick(e))), e.key === "Escape" && (e.preventDefault(), this.emit("dds-close"));
  }
  focus() {
    this._trigger && this._trigger.focus();
  }
  render() {
    return o`
      <${f(this.href ? "a" : "button")}
        part="base"
        id="trigger"
        class=${p("command-item", {
      "command-item--disabled": this.disabled,
      "command-item--selected": this.selectable && this._isSelected
    })}
        .disabled=${this.disabled}
        aria-disabled=${this.disabled}
        aria-label=${h(this.ariaLabel) || ""}
        aria-pressed=${h(this.href ? void 0 : this.selected)}
        href=${this.href}
        target=${this.target}
        rel=${this.rel}
        .autofocus=${this.autofocus}
        @click=${this._handleClick}
        @keydown=${this._handleKeyDown}>
        <span
          part="content"
          class=${p("command-item__content", {
      "command-item__content--selectable": this.selectable
    })}>
          ${this.selectable ? this._isSelected ? o`<slot name="check"
                    ><dap-ds-icon
                      name="check-line2"
                      aria-hidden="true"></dap-ds-icon
                  ></slot>` : o`<span class="sr-only"></span>` : m}
          <span part="label" class="command-item__label"><slot></slot></span>
        </span>
      </${f(this.href ? "a" : "button")}
    `;
  }
};
r.tagName = "dap-ds-command-item", r.dependencies = {
  "dap-ds-icon": _
}, r.styles = $(g);
let t = r;
s([
  y("#trigger")
], t.prototype, "_trigger");
s([
  i({ type: String })
], t.prototype, "value");
s([
  i({ type: Boolean })
], t.prototype, "disabled");
s([
  i()
], t.prototype, "name");
s([
  i()
], t.prototype, "href");
s([
  i()
], t.prototype, "target");
s([
  i()
], t.prototype, "rel");
s([
  i({ type: Boolean })
], t.prototype, "selectable");
s([
  i({ type: Boolean })
], t.prototype, "selected");
s([
  i({ type: String })
], t.prototype, "closeOnSelect");
s([
  u()
], t.prototype, "_isSelected");
export {
  t as default
};
//# sourceMappingURL=command-item.component.js.map