import { Component, Host, h, Prop } from '@stencil/core';
export class UxplSpinner {
  constructor() {
    /*
    * appearance: light/medium/dark as per UXPL
     */
    this.appearance = 'light';
  }
  render() {
    return (h(Host, null,
      h("div", { class: {
          "pl-spinner": true,
          "DEMO-spinner-placer": true,
          "pl-spinner--color-light": this.appearance.toLowerCase() === 'light',
          "pl-spinner--color-dark": this.appearance.toLowerCase() === 'dark',
          "pl-spinner--color-medium": this.appearance.toLowerCase() === 'medium'
        } },
        h("div", { class: "pl-spinner__icon" }),
        h("div", { class: "pl-spinner__message", style: {
            "display": this.message ? 'inherit' : 'none'
          } }, this.message))));
  }
  static get is() { return "uxpl-spinner"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["uxpl-spinner.css"]
  }; }
  static get styleUrls() { return {
    "$": ["uxpl-spinner.css"]
  }; }
  static get properties() { return {
    "message": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "message",
      "reflect": false
    },
    "appearance": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "appearance",
      "reflect": false,
      "defaultValue": "'light'"
    }
  }; }
}
