import { Component, h, Host, Prop } from '@stencil/core';
const demo1 = `<dvn-info-summary
  title="Mustafa Kemal Atatürk"
  sub-title="Founder of Modern Turkey"
  leaned
>
  <dvn-image
    slot="media"
    src="https://bit.ly/2ZHWG39"
  />
</dvn-info-summary>`;
const demo2 = `<dvn-info-summary title="Home">
  <dvn-icon
    slot="media"
    icon-name="uil uil-home-alt"
  />
</dvn-info-summary>`;
export class ShowcaseInfoSummary {
  render() {
    return (h(Host, { class: "d-flex" },
      this.show === 'table' &&
        h("div", null,
          h("dvn-info-summary", { title: "Mustafa Kemal Atat\u00FCrk", subTitle: "Founder of Modern Turkey" },
            h("dvn-image", { slot: "media", src: "https://bit.ly/2ZHWG39" })),
          h("dvn-info-summary", { title: "Home" },
            h("dvn-icon", { slot: "media", iconName: 'uil uil-home-alt', size: 32 }))),
      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 })))));
  }
  static get is() { return "showcase-info-summary"; }
  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
    }
  }; }
}
