'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-8277cbb3.js');
const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');

const sqmFormMessageCss = "sl-alert::part(base){border:var(--sqm-border-thickness) solid;border-radius:var(--sqm-border-radius-normal);font-family:var(--sqm-primary-font)}.Error::part(base){color:var(--sqm-danger-color-text);background-color:var(--sqm-danger-color-background);border-color:var(--sqm-danger-color-border);font-size:14px}.Error #icon{color:var(--sqm-danger-color-icon);font-size:24px}.Warning::part(base){color:var(--sqm-warning-color-text);background-color:var(--sqm-warning-color-background);border-color:var(--sqm-warning-color-border)}.Warning #icon{color:var(--sqm-warning-color-icon);font-size:24px}.Success::part(base){color:var(--sqm-success-color-text);background-color:var(--sqm-success-color-background);border-color:var(--sqm-success-color-border)}.Success #icon{color:var(--sqm-success-color-icon);font-size:24px}.Info::part(base){color:var(--sqm-informative-color-text);background-color:var(--sqm-informative-color-background);border-color:var(--sqm-informative-color-border)}.Info #icon{color:var(--sqm-informative-color-icon);font-size:24px}.Transparent::part(base){background-color:transparent;border:none;color:var(--sqm-text);margin-left:-20px}::slotted(*){margin:0}::slotted(*[part=alert-title]){font-size:16px;font-weight:bold}::slotted(*[part=alert-description]),::slotted(*[part=erroralert-text]){font-size:14px}";

const FormMessage = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.ignored = true;
    /**
     * Loading state for the alert.
     *
     * @uiName Loading
     */
    this.loading = false;
    /**
     * Render the alert with transparent styles
     */
    this.transparent = false;
    domContextHooks_module.h$1(this);
  }
  disconnectedCallback() { }
  render() {
    if (this.loading) {
      return index.h("sqm-skeleton", { height: "90px", width: "100%" });
    }
    if (this.type === "error") {
      return (index.h("sl-alert", { exportparts: "base: erroralert-base, icon:erroralert-icon", class: `Error ${this.transparent ? "Transparent" : ""}`, type: "danger", open: true }, index.h("sl-icon", { id: "icon", slot: "icon", name: `${this.icon ? this.icon : "exclamation-octagon"}` }), index.h("slot", null)));
    }
    else if (this.type === "info") {
      return (index.h("sl-alert", { id: "icon", exportparts: "base: infoalert-base, icon:infoalert-icon", class: `Info ${this.transparent ? "Transparent" : ""}`, type: "info", open: true }, index.h("sl-icon", { id: "icon", slot: "icon", name: `${this.icon ? this.icon : "info-circle"}` }), index.h("slot", null)));
    }
    else if (this.type === "warning") {
      return (index.h("sl-alert", { exportparts: "base: warningalert-base, icon:warningalert-icon", class: `Warning ${this.transparent ? "Transparent" : ""}`, type: "warning", open: true }, index.h("sl-icon", { id: "icon", slot: "icon", name: `${this.icon ? this.icon : "exclamation-triangle"}` }), index.h("slot", null)));
    }
    else {
      return (index.h("sl-alert", { exportparts: "base: successalert-base, icon:successalert-icon", class: `Success ${this.transparent ? "Transparent" : ""}`, type: "success", open: true }, index.h("sl-icon", { id: "icon", slot: "icon", name: `${this.icon ? this.icon : "check2-circle"}` }), index.h("slot", null)));
    }
  }
};
FormMessage.style = sqmFormMessageCss;

const Skeleton = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.ignored = true;
    /**
     * @uiName Height (in pixels or %)
     */
    this.height = "100%";
    /**
     * @uiName Width (in pixels or %)
     */
    this.width = "100%";
    this.vanillaStyle = `
  sl-skeleton::part(indicator) {
    --sheen-color: var(--sqm-skeleton-animation-background);
    --color: var(--sqm-skeleton-background);
    border-radius: var(--sqm-border-radius-normal);
  }

  sl-skeleton::part(base) {
    height:${this.height};
    width:${this.width};
  }

  :host{
    display: block;
  }

  :host([hidden]) {
    display: none;
  }
  `;
  }
  disconnectedCallback() { }
  render() {
    return (index.h("div", null, index.h("style", { type: "text/css" }, this.vanillaStyle), index.h("sl-skeleton", null)));
  }
};

exports.sqm_form_message = FormMessage;
exports.sqm_skeleton = Skeleton;
