'use strict';

Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

const lit = require('lit');
const decorators_js = require('lit/decorators.js');
const tailwindVariants = require('tailwind-variants');
const safeCustomElement = require('../../shared/safe-custom-element.cjs');
const index = require('../../shared/tailwind-element/index.cjs');
require('../lukso-icon/index.cjs');
require('../lukso-sanitize/index.cjs');
const style = require('./style.css.cjs');

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result) __defProp(target, key, result);
  return result;
};
exports.LuksoAlert = class LuksoAlert extends index.TailwindStyledElement(style) {
  constructor() {
    super(...arguments);
    this.variant = "info";
    this.hasIcon = false;
    this.title = "";
    this.description = "";
    this.isFullWidth = false;
    this.styles = tailwindVariants.tv({
      base: "rounded-8 p-4 flex gap-3 items-center",
      variants: {
        variant: {
          info: "bg-blue-95 text-blue-40",
          warning: "bg-honey-92 text-yellow-25",
          error: "bg-red-95 text-red-55",
          success: "bg-green-95 text-green-45"
        },
        isFullWidth: {
          true: "w-full"
        }
      }
    });
  }
  get icon() {
    switch (this.variant) {
      case "warning":
        return { name: "info-circle", color: "yellow-25" };
      case "error":
        return { name: "danger", color: "red-55" };
      case "success":
        return { name: "tick-circle", color: "green-45" };
      default:
        return { name: "info-circle", color: "blue-40" };
    }
  }
  render() {
    const styles = this.styles({
      variant: this.variant,
      isFullWidth: this.isFullWidth
    });
    return lit.html`
      <div class=${styles}>
        ${this.hasIcon ? lit.html`<lukso-icon
              pack="vuesax"
              name="${this.icon.name}"
              color="${this.icon.color}"
            ></lukso-icon>` : lit.nothing}
        <div class="flex flex-col gap-1">
          ${this.title ? lit.html`<div class="heading-inter-14-bold">${this.title}</div>` : lit.nothing}
          ${this.description ? lit.html`<lukso-sanitize
                class="paragraph-inter-12-regular"
                html-content="${this.description}"
              ></lukso-sanitize>` : lit.nothing}
        </div>
      </div>
    `;
  }
};
__decorateClass([
  decorators_js.property({ type: String })
], exports.LuksoAlert.prototype, "variant", 2);
__decorateClass([
  decorators_js.property({ type: Boolean, attribute: "has-icon", reflect: true })
], exports.LuksoAlert.prototype, "hasIcon", 2);
__decorateClass([
  decorators_js.property({ type: String })
], exports.LuksoAlert.prototype, "title", 2);
__decorateClass([
  decorators_js.property({ type: String })
], exports.LuksoAlert.prototype, "description", 2);
__decorateClass([
  decorators_js.property({ type: Boolean, attribute: "is-full-width", reflect: true })
], exports.LuksoAlert.prototype, "isFullWidth", 2);
exports.LuksoAlert = __decorateClass([
  safeCustomElement.safeCustomElement("lukso-alert")
], exports.LuksoAlert);
