dap-design-system/dist/components/snackbar/snackbar-message.component.js

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

import { clsx as u } 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 e } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { state as h } from "../../node_modules/@lit/reactive-element/decorators/state.js";
import { ifDefined as a } from "../../node_modules/lit-html/directives/if-defined.js";
import { styleMap as b } from "../../node_modules/lit-html/directives/style-map.js";
import { html as o } from "../../node_modules/lit-html/static.js";
import { translate as y } from "../../node_modules/lit-i18n/src/lit-i18n.js";
import { DdsElement as g } from "../../internal/dds-hu-element.js";
import k from "../button/button.component.js";
import $ from "../icon/icon.component.js";
import _ from "../icon-button/icon-button.component.js";
import v from "../link/link.component.js";
import T from "../stack/stack.component.js";
import x from "./snackbar-message.scss.js";
import { unsafeCSS as B } from "../../node_modules/@lit/reactive-element/css-tag.js";
var C = Object.defineProperty, r = (m, t, c, l) => {
  for (var i = void 0, d = m.length - 1, f; d >= 0; d--)
    (f = m[d]) && (i = f(t, c, i) || i);
  return i && C(t, c, i), i;
};
const n = class n extends g {
  constructor() {
    super(...arguments), this.actions = [], this.message = "", this.closeButton = "true", this.alertType = "default", this.position = "bottom-right", this.closeButtonTestId = "snackbar-close-button", this.isClosing = !1;
  }
  getActions() {
    return this.actions && this.actions.length > 0 ? o`<dap-ds-stack
        part="actions"
        exportparts="base:actions-base"
        class="snackbar__actions"
        direction="row">
        ${this.actions.map((t, c) => {
      var l;
      return t && typeof t.func == "function" ? o`<dap-ds-button
              variant=${(l = t.variant) != null ? l : "primary"}
              data-testid=${`snackbar-action-${c}`}
              @click=${() => {
        t.func && t.func();
      }}
              >${a(t.text)}</dap-ds-button
            >` : o`<dap-ds-link
              class="snackbar__link"
              href=${a(t.href)}
              target="${a(t.target)}"
              rel=${a(t.target ? t.rel : void 0)}
              >${a(t.text)}</dap-ds-link
            >`;
    })}
      </dap-ds-stack>` : p;
  }
  getAlertTypeIcon() {
    let t = "";
    switch (this.alertType) {
      case "information":
        t = "information-2-fill";
        break;
      case "successful":
        t = "checkbox-circle-fill";
        break;
      case "error":
        t = "error-warning-fill";
        break;
    }
    return t.length > 0 ? o`<dap-ds-icon
          name=${t}
          size="lg"
          class="snackbar__alert-icon"></dap-ds-icon>` : p;
  }
  _close(t) {
    t && (this.isClosing = !0, setTimeout(() => {
      this.emit("dds-close", { id: t });
    }, 300));
  }
  render() {
    var t;
    return o`<div
      role="alert"
      aria-label=${this.message}
      part="base"
      class=${u(
      "snackbar",
      `snackbar--${this.alertType}`,
      `snackbar--position-${this.position}`,
      { "snackbar--closing": this.isClosing }
    )}
      style=${b((t = this.customStyle) != null ? t : {})}>
      <div class="snackbar__main">
        <div class="snackbar__left-group">
          ${this.getAlertTypeIcon()}
          <div class="snackbar__content">
            ${this.message ? o`<span part="text" class="snackbar__text"
                  >${this.message}</span
                >` : o`<slot></slot>`}
            ${this.actions ? o` ${this.getActions()}` : p}
          </div>
        </div>
        ${this.closeButton === "true" ? o`<dap-ds-icon-button
              @click=${() => this._close(this.id)}
              part="closebutton"
              data-testid=${this.closeButtonTestId}
              class="snackbar__close"
              aria-label=${y("close")}>
              <dap-ds-icon
                part="close-icon"
                class="snackbar__close-icon"
                name="close-line"></dap-ds-icon>
            </dap-ds-icon-button>` : p}
      </div>
    </div>`;
  }
};
n.tagName = "dap-ds-snackbar-message", n.dependencies = {
  "dap-ds-stack": T,
  "dap-ds-button": k,
  "dap-ds-link": v,
  "dap-ds-icon": $,
  "dap-ds-icon-button": _
}, n.styles = B(x);
let s = n;
r([
  e({ type: Array })
], s.prototype, "actions");
r([
  e({ type: String })
], s.prototype, "message");
r([
  e({ type: String, reflect: !0 })
], s.prototype, "closeButton");
r([
  e({ type: String })
], s.prototype, "alertType");
r([
  e({ type: Object })
], s.prototype, "customStyle");
r([
  e({ type: String })
], s.prototype, "position");
r([
  e()
], s.prototype, "closeButtonTestId");
r([
  h()
], s.prototype, "isClosing");
export {
  s as default
};
//# sourceMappingURL=snackbar-message.component.js.map