import { Component, h, Host, Prop } from '@stencil/core';
const demo1 = `<dvn-icon
  icon-name="uil uil-envelope"
  scale="small"
></dvn-icon>`;
const demo2 = `<dvn-icon
  icon-name="uil uil-envelope"
></dvn-icon>`;
const demo3 = `<dvn-icon
  icon-name="uil uil-envelope"
  scale="large"
></dvn-icon>`;
const demo4 = `<dvn-icon
  icon-name="uil uil-envelope"
  size="48"
></dvn-icon>`;
export class ShowcaseIcon {
  render() {
    return (h(Host, null,
      this.show === 'table' &&
        h("table", null,
          h("thead", null,
            h("tr", null,
              h("th", null,
                h("b", null, "Image")),
              h("th", null, "S"),
              h("th", null, "M"),
              h("th", null, "L"),
              h("th", null, "24px"),
              h("th", null, "32px"),
              h("th", null, "48px"))),
          h("tbody", null,
            h("tr", null,
              h("td", null, "Square"),
              h("td", null,
                h("dvn-icon", { iconName: "uil uil-envelope", scale: "small" })),
              h("td", null,
                h("dvn-icon", { iconName: "uil uil-envelope" })),
              h("td", null,
                h("dvn-icon", { iconName: "uil uil-envelope", scale: "large" })),
              h("td", null,
                h("dvn-icon", { iconName: "uil uil-envelope", size: 24 })),
              h("td", null,
                h("dvn-icon", { iconName: "uil uil-envelope", size: 32 })),
              h("td", null,
                h("dvn-icon", { iconName: "uil uil-envelope", size: 48 }))))),
      this.show !== 'table' &&
        h("dvn-card", { leaned: true },
          h("div", { class: "d-flex" },
            h("dvn-component-demo", { domString: demo1 }),
            h("dvn-component-demo", { domString: demo2 }),
            h("dvn-component-demo", { domString: demo3 }),
            h("dvn-component-demo", { domString: demo4 })))));
  }
  static get is() { return "showcase-icon"; }
  static get properties() { return {
    "show": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "show",
      "reflect": false
    }
  }; }
}
