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

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

import { clsx as b } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import { nothing as p } from "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as a } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { state as f } from "../../node_modules/@lit/reactive-element/decorators/state.js";
import { queryAssignedNodes as u } from "../../node_modules/@lit/reactive-element/decorators/query-assigned-nodes.js";
import { html as c } from "../../node_modules/lit-html/static.js";
import "../../localization/localization.js";
import { DdsElement as v } from "../../internal/dds-hu-element.js";
import { SizedMixin as y } from "../../internal/mixin/sizedMixin.js";
import g from "../icon-button/icon-button.component.js";
import x from "../stack/stack.component.js";
import $ from "./chip.scss.js";
import { t as m } from "../../node_modules/i18next/dist/esm/i18next.js";
import { unsafeCSS as T } from "../../node_modules/@lit/reactive-element/css-tag.js";
var C = Object.defineProperty, o = (d, e, t, r) => {
  for (var i = void 0, n = d.length - 1, h; n >= 0; n--)
    (h = d[n]) && (i = h(e, t, i) || i);
  return i && C(e, t, i), i;
};
const k = y(v), l = class l extends k {
  constructor() {
    super(...arguments), this.removeable = !1, this.selectable = !1, this.selected = !1, this.disabled = !1, this.removeButtonTestId = "chip-remove-button", this._slotTextContent = "";
  }
  /** Maps effectiveSize from SizedMixin to the chip's two visual sizes (sm | lg). */
  get chipSize() {
    const e = this.effectiveSize;
    return e === "lg" || e === "md" ? "lg" : "sm";
  }
  /**
   * Gets the text content from the slot nodes
   */
  extractSlotTextContent(e) {
    return !e || e.length === 0 ? "" : e.map((t) => {
      var r, i;
      return t.nodeType === Node.TEXT_NODE ? ((r = t.textContent) == null ? void 0 : r.trim()) || "" : t.nodeType === Node.ELEMENT_NODE && ((i = t.textContent) == null ? void 0 : i.trim()) || "";
    }).filter((t) => t.length > 0).join(" ");
  }
  /**
   * Handles slot content changes
   */
  handleSlotChange() {
    this._slotNodes && (this._slotTextContent = this.extractSlotTextContent(this._slotNodes));
  }
  /**
   * Gets the aria-label for the chip when removable
   */
  getRemovableAriaLabel() {
    const e = m("chip.removable");
    return this._slotTextContent ? `${this._slotTextContent}, ${e}` : e;
  }
  updated(e) {
    super.updated(e), this._slotNodes && this._slotNodes.length > 0 && this.handleSlotChange(), (e.has("removeable") || e.has("selectable")) && this.removeable && this.selectable && (console.warn(
      "Chip cannot be both removeable and selectable at the same time."
    ), e.has("removeable") && this.removeable ? this.selectable = !1 : e.has("selectable") && this.selectable && (this.removeable = !1));
  }
  handleClick(e) {
    e.stopPropagation(), !this.disabled && this.selectable && (this.selected = !this.selected, this.emit("dds-select", { value: this.value, selected: this.selected }));
  }
  handleRemove(e) {
    var t;
    e.stopPropagation(), this.disabled || this.emit("dds-remove", { value: (t = this.value) != null ? t : "" });
  }
  handleKeyDown(e) {
    this.disabled || ((e.key === "Delete" || e.key === "Backspace") && this.removeable && (e.preventDefault(), e.stopPropagation(), this.handleRemove(e)), e.key === "Enter" && this.selectable && (e.preventDefault(), e.stopPropagation(), this.handleClick(e)));
  }
  render() {
    var e, t;
    return c`
      <div
        part="base"
        class=${b("chip", `chip--${this.chipSize}`, {
      "chip--selected": this.selectable && this.selected,
      "chip--disabled": this.disabled,
      "chip--selectable": this.selectable
    })}
        role="button"
        tabindex=${this.disabled ? "-1" : "0"}
        aria-disabled=${this.disabled}
        aria-pressed=${this.selected}
        aria-label=${this.removeable ? this.getRemovableAriaLabel() : (e = this.ariaLabel) != null ? e : p}
        @click=${this.handleClick}
        @keydown=${this.handleKeyDown}>
        <dap-ds-stack direction="row" spacing="200" part="content-container">
          <slot part="content" @slotchange=${this.handleSlotChange}></slot>
          ${this.removeable ? c`<dap-ds-icon-button
                icon="close-line"
                part="remove-button"
                data-testid=${this.removeButtonTestId}
                exportparts="base:remove-icon-base, icon:remove-icon, icon-base:remove-icon-base-base"
                aria-hidden="true"
                tabindex="-1"
                ?disabled=${this.disabled}
                size="sm"
                aria-label=${(t = this.deleteAriaLabel) != null ? t : m("chip.remove")}
                @click=${this.handleRemove}></dap-ds-icon-button>` : p}
        </dap-ds-stack>
      </div>
    `;
  }
};
l.tagName = "dap-ds-chip", l.dependencies = {
  "dap-ds-stack": x,
  "dap-ds-icon-button": g
}, l.styles = T($);
let s = l;
o([
  a({ type: Boolean })
], s.prototype, "removeable");
o([
  a({ type: Boolean })
], s.prototype, "selectable");
o([
  a({ type: Boolean, reflect: !0 })
], s.prototype, "selected");
o([
  a({ type: Boolean, reflect: !0 })
], s.prototype, "disabled");
o([
  a({ type: String })
], s.prototype, "value");
o([
  a({ type: String })
], s.prototype, "deleteAriaLabel");
o([
  a()
], s.prototype, "removeButtonTestId");
o([
  u({ slot: "", flatten: !0 })
], s.prototype, "_slotNodes");
o([
  f()
], s.prototype, "_slotTextContent");
export {
  s as default
};
//# sourceMappingURL=chip.component.js.map