import { withHooks } from "@saasquatch/stencil-hooks";
import { Component, h, Prop, State } from "@stencil/core";
/**
 * @uiName Form Message
 * @slots [{"name":"","title":"Message Content"}]
 */
export class FormMessage {
  constructor() {
    this.ignored = true;
    /**
     * Loading state for the alert.
     *
     * @uiName Loading
     */
    this.loading = false;
    /**
     * Render the alert with transparent styles
     */
    this.transparent = false;
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    if (this.loading) {
      return h("sqm-skeleton", { height: "90px", width: "100%" });
    }
    if (this.type === "error") {
      return (h("sl-alert", { exportparts: "base: erroralert-base, icon:erroralert-icon", class: `Error ${this.transparent ? "Transparent" : ""}`, type: "danger", open: true },
        h("sl-icon", { id: "icon", slot: "icon", name: `${this.icon ? this.icon : "exclamation-octagon"}` }),
        h("slot", null)));
    }
    else if (this.type === "info") {
      return (h("sl-alert", { id: "icon", exportparts: "base: infoalert-base, icon:infoalert-icon", class: `Info ${this.transparent ? "Transparent" : ""}`, type: "info", open: true },
        h("sl-icon", { id: "icon", slot: "icon", name: `${this.icon ? this.icon : "info-circle"}` }),
        h("slot", null)));
    }
    else if (this.type === "warning") {
      return (h("sl-alert", { exportparts: "base: warningalert-base, icon:warningalert-icon", class: `Warning ${this.transparent ? "Transparent" : ""}`, type: "warning", open: true },
        h("sl-icon", { id: "icon", slot: "icon", name: `${this.icon ? this.icon : "exclamation-triangle"}` }),
        h("slot", null)));
    }
    else {
      return (h("sl-alert", { exportparts: "base: successalert-base, icon:successalert-icon", class: `Success ${this.transparent ? "Transparent" : ""}`, type: "success", open: true },
        h("sl-icon", { id: "icon", slot: "icon", name: `${this.icon ? this.icon : "check2-circle"}` }),
        h("slot", null)));
    }
  }
  static get is() { return "sqm-form-message"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["sqm-form-message.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sqm-form-message.css"]
  }; }
  static get properties() { return {
    "type": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Alert type",
            "name": "uiName"
          }],
        "text": "Options include \"success\", \"info\", \"warning\", and \"error\""
      },
      "attribute": "type",
      "reflect": false
    },
    "loading": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Loading",
            "name": "uiName"
          }],
        "text": "Loading state for the alert."
      },
      "attribute": "loading",
      "reflect": false,
      "defaultValue": "false"
    },
    "icon": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Icon",
            "name": "uiName"
          }],
        "text": "Icon to use in alert. Use icon values from Shoelace (e.g. \"star\" or \"heart\") at https://shoelace.style/components/icon"
      },
      "attribute": "icon",
      "reflect": false
    },
    "transparent": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "Render the alert with transparent styles"
      },
      "attribute": "transparent",
      "reflect": false,
      "defaultValue": "false"
    }
  }; }
  static get states() { return {
    "ignored": {}
  }; }
}
