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

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

import { clsx as c } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import { nothing as d } from "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as e } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { query as f } from "../../node_modules/@lit/reactive-element/decorators/query.js";
import { queryAssignedElements as _ } from "../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
import { ifDefined as y } from "../../node_modules/lit-html/directives/if-defined.js";
import { html as a } from "../../node_modules/lit-html/static.js";
import { DdsElement as $ } from "../../internal/dds-hu-element.js";
import b from "../card/card.component.js";
import g from "../card/card-content.component.js";
import v from "../icon/icon.component.js";
import u from "./list-item.scss.js";
import { unsafeCSS as k } from "../../node_modules/@lit/reactive-element/css-tag.js";
var C = Object.defineProperty, i = (m, n, p, o) => {
  for (var r = void 0, s = m.length - 1, h; s >= 0; s--)
    (h = m[s]) && (r = h(n, p, r) || r);
  return r && C(n, p, r), r;
};
const l = class l extends $ {
  constructor() {
    super(...arguments), this.variant = "info", this.shade = "base", this.status = "neutral", this.alignment = "horizontal", this.target = "_self", this.rel = "noreferrer noopener", this.renderAs = "a", this.getIcon = (n, p, o, r) => {
      let s;
      if (n)
        return a`
        <dap-ds-icon
          class=${c("list-item__icon", {
          [`list-item__icon--${o}`]: o
        })}
          name="${n}"></dap-ds-icon>
      `;
      if (p === "number")
        return a`
        <div
          class=${c("list-item__icon", {
          [`list-item__icon--${o}`]: o
        })}>
          ${r}
        </div>
      `;
      switch (p) {
        case "info":
          s = "lightbulb-fill";
          break;
        case "pass":
          s = "checkbox-circle-fill";
          break;
        case "fail":
          s = "close-circle-fill";
          break;
        case "notapplicable":
          s = "forbid-fill";
          break;
        case "empty":
          s = "checkbox-blank-circle-line";
          break;
        default:
          s = "lightbulb-fill";
          break;
      }
      return a`
      <dap-ds-icon
        class=${c("list-item__icon", {
        [`list-item__icon--${o}`]: o
      })}
        name="${s}"></dap-ds-icon>
    `;
    };
  }
  firstUpdated(n) {
    this.actionSlot && !this.actionSlot.length && this.actionContainer && (this.actionContainer.style.display = "none");
  }
  render() {
    return a`
      <dap-ds-card
        noBorder
        ?interactive=${this.interactive}
        renderAs=${this.renderAs}
        target=${this.target}
        href=${y(this.href)}
        rel=${this.target}
        ?noPadding=${this.noPadding}
        part="base"
        exportparts="base:list-item-base"
        class=${c(
      "list-item",
      `list-item--${this.variant}`,
      `list-item--${this.status}`,
      `list-item--${this.shade}`,
      `list-item--${this.alignment}`
    )}>
        <dap-ds-card-content spacing="none" exportparts="base:card-base">
          <div class=${c("list-item__container")} part="container">
            ${this.noIcon ? d : a`<div class="list-item__icon" part="icon-container">
                  <slot part="icon" name="icon">
                    ${this.getIcon(
      this.icon,
      this.variant,
      this.status,
      this.number
    )}
                  </slot>
                </div>`}
            <div class=${c("list-item__content")}>
              ${this.title ? a`<span
                    part="title"
                    class="list-item__title"
                    part="title-container">
                    <slot name="title">${this.title}</slot>
                  </span>` : d}
              <span
                part="description"
                class="list-item__description"
                part="description-container">
                <slot></slot>
              </span>
              <span
                part="actions"
                class="list-item__actions"
                part="actions-container">
                <slot name="actions" part="actions"></slot>
              </span>
            </div>
            ${this.interactive ? a`<div
                  class="list-item__iteractive-indicator"
                  part="iteractive-indicator-container">
                  <dap-ds-icon name="arrow-right-l-line"></dap-ds-icon>
                </div>` : d}
          </div>
        </dap-ds-card-content>
      </dap-ds-card>
    `;
  }
};
l.tagName = "dap-ds-list-item", l.dependencies = {
  "dap-ds-icon": v,
  "dap-ds-card": b,
  "dap-ds-card-content": g
}, l.styles = k(u);
let t = l;
i([
  _({ slot: "actions" })
], t.prototype, "actionSlot");
i([
  f(".list-item__actions")
], t.prototype, "actionContainer");
i([
  e()
], t.prototype, "variant");
i([
  e()
], t.prototype, "shade");
i([
  e()
], t.prototype, "status");
i([
  e()
], t.prototype, "alignment");
i([
  e()
], t.prototype, "title");
i([
  e()
], t.prototype, "icon");
i([
  e({ type: Number })
], t.prototype, "number");
i([
  e({ type: Boolean })
], t.prototype, "interactive");
i([
  e()
], t.prototype, "target");
i([
  e()
], t.prototype, "href");
i([
  e()
], t.prototype, "rel");
i([
  e({ type: Boolean })
], t.prototype, "noIcon");
i([
  e({ type: Boolean })
], t.prototype, "noPadding");
i([
  e({ type: String })
], t.prototype, "renderAs");
export {
  t as default
};
//# sourceMappingURL=list-item.component.js.map