import { Component, h, Prop, State } from "@stencil/core";
export class Skeleton {
  constructor() {
    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 (h("div", null,
      h("style", { type: "text/css" }, this.vanillaStyle),
      h("sl-skeleton", null)));
  }
  static get is() { return "sqm-skeleton"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "height": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Height (in pixels or %)",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "height",
      "reflect": false,
      "defaultValue": "\"100%\""
    },
    "width": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Width (in pixels or %)",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "width",
      "reflect": false,
      "defaultValue": "\"100%\""
    }
  }; }
  static get states() { return {
    "ignored": {}
  }; }
}
