'use strict';

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

const shared_tailwindElement_index = require('../../chunks/index-BxQ_0s_1.js');
const property = require('../../chunks/property-D6IL6zax.js');
const index = require('../../chunks/index-CaJky2qL.js');
const safeCustomElement = require('../../chunks/safe-custom-element-tQ-epw6h.js');
require('../lukso-icon/index.cjs');
require('../../chunks/index-BHAtoIlu.js');

const style = ":host {\n    display: flex\n}";

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 shared_tailwindElement_index.TailwindStyledElement(style) {
  constructor() {
    super(...arguments);
    this.variant = "info";
    this.hasIcon = false;
    this.title = "";
    this.description = "";
    this.styles = index.ce({
      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"
        }
      }
    });
  }
  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
    });
    return shared_tailwindElement_index.x`
      <div class=${styles}>
        ${this.hasIcon ? shared_tailwindElement_index.x`<lukso-icon
              pack="vuesax"
              name="${this.icon.name}"
              color="${this.icon.color}"
            ></lukso-icon>` : shared_tailwindElement_index.E}
        <div class="flex flex-col gap-1">
          ${this.title ? shared_tailwindElement_index.x`<div class="heading-inter-14-bold">${this.title}</div>` : shared_tailwindElement_index.E}
          ${this.description ? shared_tailwindElement_index.x`<lukso-sanitize
                class="paragraph-inter-12-regular"
                html-content="${this.description}"
              ></lukso-sanitize>` : shared_tailwindElement_index.E}
        </div>
      </div>
    `;
  }
};
__decorateClass([
  property.n({ type: String })
], exports.LuksoAlert.prototype, "variant", 2);
__decorateClass([
  property.n({ type: Boolean, attribute: "has-icon", reflect: true })
], exports.LuksoAlert.prototype, "hasIcon", 2);
__decorateClass([
  property.n({ type: String })
], exports.LuksoAlert.prototype, "title", 2);
__decorateClass([
  property.n({ type: String })
], exports.LuksoAlert.prototype, "description", 2);
exports.LuksoAlert = __decorateClass([
  safeCustomElement.safeCustomElement("lukso-alert")
], exports.LuksoAlert);
