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

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

import { clsx as l } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import { nothing as p, html as a } from "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as s } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { state as u } from "../../node_modules/@lit/reactive-element/decorators/state.js";
import { queryAssignedElements as m } from "../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
import { DdsElement as x } from "../../internal/dds-hu-element.js";
import { SizedMixin as b } from "../../internal/mixin/sizedMixin.js";
import _ from "../icons/system/system-check-line/system-check-line.component.js";
import v from "../stack/stack.component.js";
import y from "./option-item.scss.js";
import { unsafeCSS as k } from "../../node_modules/@lit/reactive-element/css-tag.js";
var $ = Object.defineProperty, i = (f, t, r, c) => {
  for (var o = void 0, n = f.length - 1, h; n >= 0; n--)
    (h = f[n]) && (o = h(t, r, o) || o);
  return o && $(t, r, o), o;
};
const d = class d extends b(x) {
  constructor() {
    super(...arguments), this.selectable = "true", this.selectedIconPosition = "suffix", this._hasPrefix = !1, this._hasSuffix = !1;
  }
  firstUpdated(t) {
    super.firstUpdated(t), this._hasPrefix = !!this._prefixNode.length, this._hasSuffix = !!this._postfixNode.length, this.addEventListener("click", this.handleClick), this.setAttribute("role", "option");
  }
  updated(t) {
    super.updated(t), t.has("disabled") && (this.setAttribute("tabindex", this.disabled ? "-1" : "0"), this.setAttribute("aria-disabled", this.disabled ? "true" : "false")), t.has("selected") && this.setAttribute("aria-selected", this.selected ? "true" : "false");
  }
  handleClick(t) {
    this.disabled && (t.preventDefault(), t.stopPropagation());
  }
  get optionText() {
    var t, r, c;
    return (c = (r = this.label) != null ? r : (t = this.textContent) == null ? void 0 : t.trim()) != null ? c : "";
  }
  render() {
    return a`
      <div
        part="base"
        class=${l("option-item", `option-item--${this.size}`, {
      "option-item--selected": this.selected,
      "option-item--disabled": this.disabled,
      "option-item--focused": this.focused
    })}>
        <dap-ds-stack direction="row" class="option-item__stack">
          ${this.selectable === "true" && this.selectedIconPosition === "prefix" ? a`<div class=${"selected-icon"}>
                ${this.selected ? a`<dap-ds-icon-check-line
                      size="16"></dap-ds-icon-check-line>` : p}
              </div>` : p}
          <div
            part="prefix"
            class=${l("option-item__prefix", {
      "option-item__prefix--visible": !!this._hasPrefix
    })}>
            <slot name="prefix"></slot>
          </div>
          <div part="label" class="label">
            <slot></slot>
          </div>
          <div
            part="suffix"
            class=${l("option-item__suffix", {
      "option-item__suffix--visible": !!this._hasSuffix
    })}>
            <slot name="suffix"></slot>
          </div>
        </dap-ds-stack>
        ${this.selectable === "true" && this.selectedIconPosition === "suffix" ? a`<div class=${"selected-icon-suffix"}>
              ${this.selected ? a`<dap-ds-icon-check-line
                    size="16"></dap-ds-icon-check-line>` : p}
            </div>` : p}
        <span
          part="high-contrast"
          class=${l("option-item__high-contrast", {
      "option-item__high-contrast--disabled": this.disabled
    })}></span>
      </div>
    `;
  }
};
d.tagName = "dap-ds-option-item", d.dependencies = {
  "dap-ds-stack": v,
  "dap-ds-icon-check-line": _
}, d.styles = k(y);
let e = d;
i([
  s({ type: Boolean, reflect: !0 })
], e.prototype, "selected");
i([
  s({ type: String })
], e.prototype, "selectable");
i([
  s({ type: String })
], e.prototype, "selectedIconPosition");
i([
  s({ reflect: !0 })
], e.prototype, "value");
i([
  s({ type: Boolean, reflect: !0 })
], e.prototype, "disabled");
i([
  s({ type: Boolean })
], e.prototype, "focused");
i([
  s()
], e.prototype, "label");
i([
  m({ slot: "prefix" })
], e.prototype, "_prefixNode");
i([
  m({ slot: "suffix" })
], e.prototype, "_postfixNode");
i([
  u()
], e.prototype, "_hasPrefix");
i([
  u()
], e.prototype, "_hasSuffix");
export {
  e as default
};
//# sourceMappingURL=option-item.component.js.map