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

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

import { clsx as m } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import { nothing as f } 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 { query as h } from "../../node_modules/@lit/reactive-element/decorators/query.js";
import { queryAssignedElements as b } from "../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
import { html as r } from "../../node_modules/lit-html/static.js";
import { translate as u } from "../../node_modules/lit-i18n/src/lit-i18n.js";
import { DdsElement as v } from "../../internal/dds-hu-element.js";
import y from "../card/card.component.js";
import g from "../card/card-content.component.js";
import _ from "../icon/icon.component.js";
import C from "../icon-button/icon-button.component.js";
import S from "./banner.scss.js";
import { unsafeCSS as $ } from "../../node_modules/@lit/reactive-element/css-tag.js";
var x = Object.defineProperty, e = (p, i, n, c) => {
  for (var t = void 0, l = p.length - 1, d; l >= 0; l--)
    (d = p[l]) && (t = d(i, n, t) || t);
  return t && x(i, n, t), t;
};
const E = {
  brand: "information-2-fill",
  info: "information-fill",
  positive: "checkbox-circle-fill",
  warning: "alert-fill",
  negative: "error-warning-fill"
}, s = class s extends v {
  constructor() {
    super(...arguments), this.variant = "brand", this.opened = "true", this.closeButtonLabel = "close", this.closeButtonTestId = "banner-close-button";
  }
  firstUpdated(i) {
    var n, c;
    (n = this.actionSlot) != null && n.length && ((c = this.actionSlot) != null && c.length && this.variant !== "warning" ? this.actionSlot.forEach((t) => {
      t.setAttribute("variant", "inverted");
    }) : this.actionSlot.forEach((t) => {
      t.setAttribute("variant", "warning");
    })), this.actionSlot && !this.actionSlot.length && this.actionContainer && (this.actionContainer.style.display = "none");
  }
  onCloseClick() {
    this.emit("dds-close");
  }
  render() {
    var n;
    const i = E[this.variant];
    return this.opened === "false" ? f : r`
      <dap-ds-card size="lg">
        <dap-ds-card-content
          class=${m(`banner--${this.variant}`)}
          part="card-base"
          spacing="none">
          <div class=${m("banner", `banner--${this.variant}`)} part="base">
            <div class="banner__icon-container">
              ${this.icon || i ? r`<slot part="icon" name="icon">
                    <dap-ds-icon
                      part="icon"
                      exportparts="icon:icon-element, base:icon-base"
                      class="banner__icon"
                      aria-hidden="true"
                      name="${this.icon || i}">
                    </dap-ds-icon
                  ></slot>` : r`<slot name="icon" part="icon"></slot>`}
            </div>
            <div>
              <slot class="banner__content"></slot>

              <div class="banner__actions">
                <slot name="actions" part="actions"></slot>
              </div>
            </div>

            ${this.closeable ? r`
                  <dap-ds-icon-button
                    class="banner__close"
                    part="close-button"
                    data-testid=${this.closeButtonTestId}
                    exportparts="icon-base:close-icon-element, base:close-icon-base"
                    variant="inverted"
                    clean
                    size="md"
                    icon="close-line"
                    part="closebutton"
                    @click="${this.onCloseClick}"
                    aria-label=${(n = this.closeButtonLabel) != null ? n : u("close")}>
                  </dap-ds-icon-button>
                ` : f}
          </div>
        </dap-ds-card-content>
      </dap-ds-card>
    `;
  }
};
s.tagName = "dap-ds-banner", s.dependencies = {
  "dap-ds-card": y,
  "dap-ds-card-content": g,
  "dap-ds-icon": _,
  "dap-ds-icon-button": C
}, s.styles = $(S);
let o = s;
e([
  b({ slot: "actions" })
], o.prototype, "actionSlot");
e([
  h(".banner__actions")
], o.prototype, "actionContainer");
e([
  a()
], o.prototype, "variant");
e([
  a({ type: Boolean })
], o.prototype, "closeable");
e([
  a({ reflect: !0 })
], o.prototype, "opened");
e([
  a({ type: String })
], o.prototype, "closeButtonLabel");
e([
  a()
], o.prototype, "closeButtonTestId");
e([
  a({ type: String })
], o.prototype, "icon");
export {
  o as default
};
//# sourceMappingURL=banner.component.js.map