import { r as registerInstance, h, H as Host } from './index-b6f10a81.js';

const demo1 = `<dvn-badge
  scale="small"
  tint="danger"
>
  New Feature
</dvn-badge>`;
const demo2 = `<dvn-badge
  tint="primary"
>
  New Feature
</dvn-badge>`;
const demo3 = `<dvn-badge
  content="3"
  scale="large"
  tint="warning"
>
  Notifications
</dvn-badge>`;
const ShowcaseBadge = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
  }
  render() {
    return (h(Host, null, 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 })))));
  }
};

const demo1$1 = `<dvn-button
  tint="primary"
  leaned="true"
  leaned="true"
>
  View Details
</dvn-button>`;
const demo2$1 = `<dvn-button
  scale="large"
  view="outline"
  leaned="true"
>
  Sign Up
</dvn-button>`;
const demo3$1 = `<dvn-button
  tint="secondary"
  shape="circle"
  leaned="true"
>
  i
</dvn-button>`;
const demo4 = `<dvn-button
  tint="secondary"
  shape="rounded"
  view="flat"
  leaned="true"
>
  Activate
</dvn-button>`;
const demo5 = `<dvn-button
  tint="secondary"
  shape="rounded"
  progressing="true"
  disabled="true"
  leaned="true"
>
  Activate
</dvn-button>`;
const demo6 = `<dvn-button
  tint="secondary"
  shape="circle"
  progressing="true"
  leaned="true"
>
  i
</dvn-button>`;
const ShowcaseButton = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
  }
  render() {
    return (h(Host, null, h("h3", null, "Button"), h("dvn-card", { leaned: true }, h("div", { class: "d-flex" }, h("dvn-component-demo", { domString: demo1$1 }), h("dvn-component-demo", { domString: demo2$1 }), h("dvn-component-demo", { domString: demo3$1 }), h("dvn-component-demo", { domString: demo4 }), h("dvn-component-demo", { domString: demo5 }), h("dvn-component-demo", { domString: demo6 })))));
  }
};

const card1 = `<dvn-card leaned width="280px">
  <dvn-card-header title="Kapadokya" slot="header">
    <div slot="action">
      <dvn-icon-button icon-name="uil uil-favorite" tint="secondary" view="flat" leaned>
      </dvn-icon-button>
    </div>
  </dvn-card-header>

  <div>
    Cappadocia is a historical region in Central Anatolia.
    According to Herodotus, in the time of the Ionian Revolt (499 BC),
    the Cappadocians were reported as occupying a region from Mount
    Taurus to the vicinity of the Euxine (Black Sea).
  </div>

  <dvn-card-footer slot="footer" align-right>
    <dvn-button leaned tint="secondary" view="flat">
      Add to Favourites
    </dvn-button>
  </dvn-card-footer>
</dvn-card>`;
const card3 = `<dvn-card leaned width="280px">
  <dvn-card-header
    title="Kapadokya"
    cover-src="https://media.tacdn.com/media/attractions-splice-spp-674x446/06/6f/1f/d7.jpg"
    slot="header"
    show-cover
  >
    <div slot="action">
      <dvn-icon-button icon-name="uil uil-cloud-download">
      </dvn-icon-button>
      <dvn-icon-button icon-name="uil uil-favorite" tint="secondary" leaned >
      </dvn-icon-button>
    </div>
  </dvn-card-header>

  <div>
    Cappadocia is a historical region in Central Anatolia.
    According to Herodotus, in the time of the Ionian Revolt (499 BC),
    the Cappadocians were reported as occupying a region from Mount
    Taurus to the vicinity of the Euxine (Black Sea).
  </div>
</dvn-card>`;
const card2 = `<dvn-card leaned width="280px">
  <dvn-card-header title="Kapadokya" slot="header" separated>
    <div slot="action">
      <dvn-icon-button icon-name="uil uil-favorite" tint="secondary" view="flat" leaned >
      </dvn-icon-button>
      <dvn-icon-button icon-name="uil uil-cloud-download" view="flat" >
      </dvn-icon-button>
    </div>
  </dvn-card-header>

  <div>
    Cappadocia is a historical region in Central Anatolia.
    According to Herodotus, in the time of the Ionian Revolt (499 BC),
    the Cappadocians were reported as occupying a region from Mount
    Taurus to the vicinity of the Euxine (Black Sea).
  </div>

  <dvn-card-footer slot="footer" align-right separated>
    <dvn-button leaned tint="primary" view="flat">
      Add to Favourites
    </dvn-button>
  </dvn-card-footer>
</dvn-card>`;
const card4 = `<dvn-card leaned width="280px">
  <dvn-card-header
    image-src="https://bit.ly/2Tg0THm"
    slot="header"
    show-image
    title="Nykyta Korotkevych"
  ></dvn-card-header>

  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>

  <dvn-card-footer align-right slot="footer">
    <dvn-button leaned tint="primary" view="flat">
      Follow
    </dvn-button>
  </dvn-card-footer>
</dvn-card>`;
const card5 = `<dvn-card leaned width="280px">
  <dvn-card-header
    title="Nykyta Korotkevych"
    slot="header"
    show-cover
    cover-src="https://bit.ly/36goixD"
    show-image
    image-src="https://bit.ly/2Tg0THm"
    image-position="bottom-left"
  >
    <div slot="action">
      <dvn-icon-button icon-name="uil uil-envelope" tint="primary">
      </dvn-icon-button>
    </div>
  </dvn-card-header>

  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>

  <dvn-card-footer align-right slot="footer">
    <dvn-button leaned tint="secondary" view="flat">
      Follow
    </dvn-button>
  </dvn-card-footer>
</dvn-card>`;
const card6 = `<dvn-card leaned width="280px">
  <dvn-card-header
    title="Nykyta Korotkevych"
    slot="header"
    show-cover
    cover-src="https://bit.ly/36goixD"
    cover-size="120"
    show-image
    image-src="https://bit.ly/2Tg0THm"
  ></dvn-card-header>

  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>

  <dvn-card-footer align-right slot="footer">
    <dvn-button leaned tint="secondary" view="flat">
      Follow
    </dvn-button>
  </dvn-card-footer>
</dvn-card>`;
const card11 = `<dvn-card
  elevation="0"
  leaned
  height="60px"
  width="60px"
></dvn-card>`;
const card12 = `<dvn-card
  leaned
  height="60px"
  width="60px"
></dvn-card>`;
const card13 = `<dvn-card
  elevation="2"
  leaned
  height="60px"
  width="60px"
></dvn-card>`;
const card14 = `<dvn-card
  elevation="3"
  leaned
  height="60px"
  width="60px"
></dvn-card>`;
const card15 = `<dvn-card
  leaned
  outlined
  height="60px"
  width="60px"
></dvn-card>`;
const renderSample = (name, show, showCode = false, layout = 'horizontal') => {
  if (show && show !== name) {
    return null;
  }
  return (h("div", { style: { padding: 'calc(4 * var(--spacing-unit))' } }, showCode
    ? h("dvn-component-demo", { domString: samples[name], layout: layout })
    : h("div", { innerHTML: samples[name] })));
};
const samples = {
  card1,
  card2,
  card3,
  card4,
  card5,
  card6,
  card11,
  card12,
  card13,
  card14,
  card15,
};
const ShowcaseCard = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.showCode = true;
  }
  render() {
    const { show } = this;
    return (h(Host, { class: "row" }, h("div", { class: "d-flex mb-4" }, renderSample('card11', show, this.showCode, 'vertical'), renderSample('card12', show, this.showCode, 'vertical'), renderSample('card13', show, this.showCode, 'vertical'), renderSample('card14', show, this.showCode, 'vertical'), renderSample('card15', show, this.showCode, 'vertical')), renderSample('card1', show, this.showCode), renderSample('card2', show, this.showCode), renderSample('card3', show, this.showCode), renderSample('card4', show, this.showCode), renderSample('card5', show, this.showCode), renderSample('card6', show, this.showCode)));
  }
};

const demo1$2 = `<dvn-checkbox
  checked="true"
  label="Football"
  scale="small"
  tint="danger"
  value="football"
/>`;
const demo2$2 = `<dvn-checkbox
  checked="true"
  label="How I met your mother?"
  value="himym"
/>`;
const demo3$2 = `<dvn-checkbox
  checked="true"
  label="Istanbul"
  scale="large"
  tint="secondary"
  value="istanbul"
/>`;
const ShowcaseCheckbox = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
  }
  render() {
    return (h(Host, null, h("dvn-card", { leaned: true }, h("div", { class: "d-flex" }, h("dvn-component-demo", { domString: demo1$2 }), h("dvn-component-demo", { domString: demo2$2 }), h("dvn-component-demo", { domString: demo3$2 })))));
  }
};

const seriesOptions = [
  {
    label: 'How I met your mother?',
    value: 'himym',
  },
  {
    label: 'Stranger things',
    value: 'stranger-things',
  },
  {
    label: 'Black mirror',
    value: 'black-mirror',
  },
];
const ShowcaseCheckboxGroup = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.series = ['himym', 'black-mirror'];
  }
  render() {
    return (h(Host, null, h("dvn-card", { leaned: true }, h("dvn-checkbox-group", { onChange: (e) => this.series = e.detail, options: seriesOptions, value: this.series }), h("br", null), h("dvn-checkbox-group", { inline: true, onChange: (e) => this.series = e.detail, options: seriesOptions.map(o => o.value === 'black-mirror' ? (Object.assign(Object.assign({}, o), { disabled: true })) : o), tint: 'warning', value: this.series }))));
  }
};

const demo1$3 = `<dvn-content-switcher
  options={[
    {
      label: 'Pairs',
      value: 'pairs',
    },
    {
      label: 'Requests',
      value: 'requests',
    },
  ]}
  onChange={(event: CustomEvent<string>) => this.selectedContent = event.detail}
  value={this.selectedContent}
/>
`;
const ShowcaseContentSwitcher = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.selectedContent = 'pairs';
  }
  render() {
    return (h(Host, null, h("dvn-card", { leaned: true }, h("div", null, h("dvn-content-switcher", { options: [
        {
          label: 'Pairs',
          value: 'pairs',
        },
        {
          label: 'Received Requests',
          value: 'requests',
        },
        {
          label: 'Messages',
          value: 'messages',
        },
      ], onChange: (event) => this.selectedContent = event.detail, value: this.selectedContent }), h("br", null), h("br", null), h("dvn-highlighted-code", { leaned: true, textToCopy: demo1$3 }, demo1$3)))));
  }
};

function getDay(addition = 0) {
  const today = new Date();
  return new Date(today.getFullYear(), today.getMonth(), today.getDate() + addition);
}
const demo1$4 = `<dvn-date-picker
  leaned
  placeholder="Select any date"
/>`;
const demo2$3 = `<dvn-date-picker
  leaned
  date-format="DD MMM YYYY"
  placeholder="Specific date format"
/>`;
const demo3$3 = `<dvn-date-picker
  leaned
  placeholder="Multiple months"
  multiple
  shown-month-count="2"
/>`;
const demo4$1 = `<dvn-date-picker
  leaned
  embedded
/>`;
const demo5$1 = `<dvn-date-picker
  leaned
  embedded
  multiple
  shown-month-count="2"
/>`;
const demo6$1 = `<dvn-date-picker
  leaned
  placeholder="Multiple value"
  multiple
  shown-month-count="2"
/>`;
const ShowcaseDatePicker = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.series = ['himym', 'black-mirror'];
  }
  render() {
    return (h(Host, null, h("dvn-card", { leaned: true, clipOverflow: false }, h("div", { class: "d-flex" }, h("dvn-component-demo", { domString: demo1$4 }), h("dvn-component-demo", { domString: demo2$3 }), h("dvn-component-demo", { domString: demo3$3 })), h("div", { class: "mb-3 mt-4" }, "These examples contain non-plain JavaScript, they cannot be wrapped with the code snippet.", h("br", null), h("br", null), h("dvn-date-picker", { leaned: true, placeholder: "Select only this week", minDate: getDay(0), maxDate: getDay(7) }), "\u00A0", h("dvn-date-picker", { leaned: true, placeholder: "Pre-selected date", value: getDay(3) }))), h("br", null), h("br", null), h("dvn-card", { leaned: true, clipOverflow: false }, h("dvn-component-demo", { domString: demo4$1 }), h("dvn-component-demo", { domString: demo5$1 }), h("dvn-component-demo", { domString: demo6$1 }))));
  }
};

const ShowcaseDialog = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.showDialog1 = false;
    this.showDialog2 = false;
  }
  render() {
    return (h(Host, { class: "d-flex" }, this.show === undefined &&
      h("div", null, h("dvn-button", { onClick: () => this.showDialog1 = true }, "Show Dialog"), h("dvn-button", { onClick: () => this.showDialog2 = true }, "Show Raw Dialog"), h("dvn-dialog", { title: "Are you sure to exit?", shown: this.showDialog1, onDismiss: () => this.showDialog1 = false }, h("div", null, "This action is irreversible. You'll not be able to view this item if you confirm this action."), h("div", { slot: "actions" }, h("dvn-button", { tint: "primary", view: "flat", onClick: () => this.showDialog1 = false }, "Cancel"), h("dvn-button", { tint: "danger", view: "flat" }, "Yes, Delete"))), h("dvn-dialog", { shown: this.showDialog2, onDismiss: () => this.showDialog2 = false, raw: true }, h("p", { style: { padding: '0 1rem' } }, "This is a raw dialog, meaning that it will only act as a wrapper. Header, body and footers must be handled manually."))), this.show === 'first' &&
      h("dvn-dialog", { title: "Are you sure to exit?", shown: true }, h("div", null, "This action is irreversible. You'll not be able to view this item if you confirm this action."), h("div", { slot: "actions" }, h("dvn-button", { tint: "primary", view: "flat" }, "Cancel"), h("dvn-button", { tint: "danger", view: "flat" }, "Yes, Delete"))), this.show === 'second' &&
      h("dvn-dialog", { shown: true, raw: true }, h("p", { style: { padding: '0 1rem' } }, "This is a raw dialog, meaning that it will only act as a wrapper. Header, body and footers must be handled manually."))));
  }
};

const demo1$5 = `<dvn-dropdown
  placement="bottomLeft"
  trigger="hover"
>
  <dvn-button>
    Hover On Me
  </dvn-button>

  <div slot="content">
    <dvn-info-summary title="Settings">
    </dvn-info-summary>
    <dvn-info-summary title="Logout">
    </dvn-info-summary>
  </div>
</dvn-dropdown>`;
const demo2$4 = `<dvn-dropdown
  placement="rightTop"
  trigger="click"
>
  <dvn-button>
    Click On Me
  </dvn-button>

  <div slot="content">
    <dvn-info-summary title="Settings">
    </dvn-info-summary>
    <dvn-info-summary title="Logout">
    </dvn-info-summary>
  </div>
</dvn-dropdown>`;
const ShowcaseDropdown = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
  }
  render() {
    return (h(Host, null, h("dvn-card", { leaned: true }, h("div", { class: "d-flex" }, h("dvn-component-demo", { domString: demo1$5 }), h("dvn-component-demo", { domString: demo2$4 })))));
  }
};

const demo1$6 = `<dvn-icon
  icon-name="uil uil-envelope"
  scale="small"
></dvn-icon>`;
const demo2$5 = `<dvn-icon
  icon-name="uil uil-envelope"
></dvn-icon>`;
const demo3$4 = `<dvn-icon
  icon-name="uil uil-envelope"
  scale="large"
></dvn-icon>`;
const demo4$2 = `<dvn-icon
  icon-name="uil uil-envelope"
  size="48"
></dvn-icon>`;
const ShowcaseIcon = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
  }
  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$6 }), h("dvn-component-demo", { domString: demo2$5 }), h("dvn-component-demo", { domString: demo3$4 }), h("dvn-component-demo", { domString: demo4$2 })))));
  }
};

const demo1$7 = `<dvn-icon-button
  tint="primary"
  icon-name="uil uil-message"
  leaned="true"
/>`;
const demo2$6 = `<dvn-icon-button
  tint="secondary"
  scale="large"
  view="outline"
  icon-name="uil uil-message"
  leaned="true"
/>`;
const demo3$5 = `<dvn-icon-button
  view="flat"
  icon-name="uil uil-message"
  leaned="true"
/>`;
const demo4$3 = `<dvn-icon-button
  tint="primary"
  shape="square"
  progressing="true"
  disabled="true"
  leaned="true"
  icon-name="uil uil-message"
/>`;
const ShowcaseIconButton = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
  }
  render() {
    return (h(Host, null, h("h3", null, "Icon Button"), h("dvn-card", { leaned: true }, h("div", { class: "d-flex" }, h("dvn-component-demo", { domString: demo1$7 }), h("dvn-component-demo", { domString: demo2$6 }), h("dvn-component-demo", { domString: demo3$5 }), h("dvn-component-demo", { domString: demo4$3 })))));
  }
};

const getInitials = ({ firstName, lastName }) => `${firstName[0]}${lastName[0]}`;

const users = [
  {
    email: 'loren@devingen.com',
    firstName: 'Loren',
    lastName: 'Spears',
    imageUrl: 'https://images.unsplash.com/photo-1476493279419-b785d41e38d8?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=61eaea85f1aa3d065400179c78163f15',
  },
  {
    email: 'nykyta@devingen.com',
    firstName: 'Nykyta',
    lastName: 'Korotkevych',
    imageUrl: 'https://pbs.twimg.com/profile_images/974603248119222272/N5PLzyan.jpg',
    bio: 'Design Director at Collegium Red',
  },
  {
    email: 'sasha@devingen.com',
    firstName: 'Sasha',
    lastName: 'Ho',
    imageUrl: 'https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?h=350&auto=compress&cs=tinysrgb',
    bio: 'Product Manager'
  },
  {
    email: 'erwan@devingen.com',
    firstName: 'Erwan',
    lastName: 'Gauthier',
    imageUrl: 'https://tinyfac.es/data/avatars/BA0CB1F2-8C79-4376-B13B-DD5FB8772537-200w.jpeg',
  },
  {
    email: 'eliana@devingen.com',
    firstName: 'Eliana',
    lastName: 'Stout',
    imageUrl: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=046c29138c1335ef8edee7daf521ba50',
    bio: 'Marketing Intern'
  },
  {
    email: 'ghost@devingen.com',
    firstName: 'Kevin',
    lastName: 'Ghost',
    imageUrl: '',
  },
  {
    email: 'kayley@devingen.com',
    firstName: 'Kayley',
    lastName: 'Dwyer',
    imageUrl: 'https://images.unsplash.com/photo-1503467913725-8484b65b0715?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=cf7f82093012c4789841f570933f88e3',
  },
  {
    email: 'krunal@devingen.com',
    firstName: 'Krunal',
    lastName: 'Sojitra',
    imageUrl: 'https://pbs.twimg.com/profile_images/702865642295152641/tXpSCC2T.jpg',
  },
  {
    email: 'casper@devingen.com',
    firstName: 'Casper',
    lastName: 'White',
    imageUrl: '',
  },
];
const demo1$8 = `<dvn-image
  leaned
  bordered
  size="64"
  src="https://bit.ly/2Tg0THm"
/>`;
const demo2$7 = `<dvn-image
  leaned
  scale="large"
  src="https://bit.ly/2Tg0THm"
/>`;
const demo3$6 = `<dvn-image
  leaned
  bordered
  shape="circle"
  text="AB"
/>`;
const ShowcaseImage = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
  }
  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, "48px"), h("th", null, "56px"))), h("tbody", null, h("tr", null, h("td", null, "Square"), h("td", null, h("dvn-image", { src: users[0].imageUrl, scale: "small" })), h("td", null, h("dvn-image", { src: users[1].imageUrl })), h("td", null, h("dvn-image", { src: users[2].imageUrl, scale: "large" })), h("td", null, h("dvn-image", { src: users[3].imageUrl, size: 48 })), h("td", null, h("dvn-image", { src: users[4].imageUrl, size: 56 }))), h("tr", null, h("td", null, "Circle"), h("td", null, h("dvn-image", { src: users[0].imageUrl, shape: "circle", scale: "small" })), h("td", null, h("dvn-image", { src: users[1].imageUrl, shape: "circle" })), h("td", null, h("dvn-image", { src: users[2].imageUrl, shape: "circle", scale: "large" })), h("td", null, h("dvn-image", { src: users[3].imageUrl, shape: "circle", size: 48 })), h("td", null, h("dvn-image", { src: users[4].imageUrl, shape: "circle", size: 56 }))), h("tr", null, h("td", null, "Bordered"), h("td", null, h("dvn-image", { bordered: true, src: users[0].imageUrl, shape: "circle", scale: "small" })), h("td", null, h("dvn-image", { bordered: true, src: users[1].imageUrl, shape: "circle" })), h("td", null, h("dvn-image", { bordered: true, src: users[2].imageUrl, shape: "circle", scale: "large" })), h("td", null, h("dvn-image", { bordered: true, src: users[3].imageUrl, shape: "circle", size: 48 })), h("td", null, h("dvn-image", { bordered: true, src: users[4].imageUrl, shape: "circle", size: 56 }))), h("tr", null, h("td", null, "Letters WB"), h("td", null, h("dvn-image", { shape: "circle", text: getInitials(users[0]), bordered: true, scale: "small" })), h("td", null, h("dvn-image", { shape: "circle", text: getInitials(users[1]), bordered: true })), h("td", null, h("dvn-image", { shape: "circle", text: getInitials(users[2]), bordered: true, scale: "large" })), h("td", null, h("dvn-image", { shape: "circle", text: getInitials(users[3]), bordered: true, size: 48 })), h("td", null, h("dvn-image", { shape: "circle", text: getInitials(users[4]), bordered: true, size: 56 }))), h("tr", null, h("td", null, "Letters WOB"), h("td", null, h("dvn-image", { shape: "circle", text: getInitials(users[0]), scale: "small" })), h("td", null, h("dvn-image", { shape: "circle", text: getInitials(users[1]) })), h("td", null, h("dvn-image", { shape: "circle", text: getInitials(users[2]), scale: "large" })), h("td", null, h("dvn-image", { shape: "circle", text: getInitials(users[3]), size: 48 })), h("td", null, h("dvn-image", { shape: "circle", text: getInitials(users[4]), size: 56 }))))), this.show !== 'table' &&
      h("dvn-card", { leaned: true }, h("div", { class: "d-flex" }, h("dvn-component-demo", { domString: demo2$7 }), h("dvn-component-demo", { domString: demo3$6 }), h("dvn-component-demo", { domString: demo1$8 })))));
  }
};

const demo1$9 = `<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$8 = `<dvn-info-summary title="Home">
  <dvn-icon
    slot="media"
    icon-name="uil uil-home-alt"
  />
</dvn-info-summary>`;
const ShowcaseInfoSummary = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
  }
  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$9 }), h("dvn-component-demo", { domString: demo2$8 })))));
  }
};

const demo1$a = `<dvn-input
  leaned
  placeholder="Email"
  type="email"
/>`;
const demo2$9 = `<dvn-input
  feedback="error"
  leaned
  placeholder="Password"
  scale="small"
  type="password"
/>`;
const demo3$7 = `<dvn-input
  disabled
  feedback="warning"
  leaned
  placeholder="Address"
  scale="large"
/>`;
const demo4$4 = `<dvn-input
  progressing
  leaned
  placeholder="Address"
/>`;
const ShowcaseInput = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
  }
  render() {
    return (h(Host, null, h("dvn-card", { leaned: true }, h("div", { class: "d-flex" }, h("dvn-component-demo", { domString: demo1$a }), h("dvn-component-demo", { domString: demo2$9 }), h("dvn-component-demo", { domString: demo3$7 }), h("dvn-component-demo", { domString: demo4$4 })))));
  }
};

const demo1$b = `<dvn-input-group leaned>
  <dvn-input placeholder="Email" type="email"></dvn-input>
  <dvn-input placeholder="Password" type="password"></dvn-input>
  <dvn-button tint="primary">Login</dvn-button>
</dvn-input-group>`;
const demo3$8 = `<dvn-input-group leaned>
  <dvn-select width="50px" hide-caret="true" hide-check="true">
    <dvn-select-option>HH</dvn-select-option>
    <dvn-select-option value="0">0</dvn-select-option>
    <dvn-select-option value="6">6</dvn-select-option>
    <dvn-select-option value="12">12</dvn-select-option>
    <dvn-select-option value="18">18</dvn-select-option>
  </dvn-select>
  <dvn-select width="50px" hide-caret="true" hide-check="true">
    <dvn-select-option>mm</dvn-select-option>
    <dvn-select-option value="0">0</dvn-select-option>
    <dvn-select-option value="15">15</dvn-select-option>
    <dvn-select-option value="30">30</dvn-select-option>
    <dvn-select-option value="45">45</dvn-select-option>
  </dvn-select>
</dvn-input-group>`;
const demo2$a = `<dvn-input-group leaned>
  <dvn-input placeholder="Amount" type="number" width="100px"></dvn-input>
  <dvn-select width="50px">
    <dvn-select-option>?</dvn-select-option>
    <dvn-select-option value="gbp">£</dvn-select-option>
    <dvn-select-option value="try">₺</dvn-select-option>
    <dvn-select-option value="usd">$</dvn-select-option>
  </dvn-select>
</dvn-input-group>`;
const ShowcaseBadge$1 = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
  }
  render() {
    return (h(Host, null, h("dvn-card", { leaned: true }, h("div", { class: "mb-3" }, h("dvn-component-demo", { domString: demo1$b })), h("div", { class: "mb-3" }, h("dvn-component-demo", { domString: demo2$a })), h("div", { class: "mb-3" }, h("dvn-component-demo", { domString: demo3$8 })))));
  }
};

const demo1$c = `<dvn-menu>
  <dvn-menu-item highlighted>
    Home
  </dvn-menu-item>
  <dvn-menu-item>
    Notifications
  </dvn-menu-item>
</dvn-menu>`;
const demo2$b = `<dvn-menu>
  <dvn-menu-section
    section-title="Members"
  >
    <dvn-menu-item>
      Mentors
    </dvn-menu-item>
    <dvn-menu-item highlighted>
      Students
    </dvn-menu-item>
  </dvn-menu-section>
  <dvn-menu-section
    section-title="Settings"
  >
    <dvn-menu-item>
      Notifications
    </dvn-menu-item>
    <dvn-menu-item>
      Info
    </dvn-menu-item>
  </dvn-menu-section>
</dvn-menu>`;
const demo3$9 = `<dvn-menu>
  <dvn-menu-section
    section-title="Members"
  >
    <dvn-menu-item>
      Mentors
    </dvn-menu-item>
    <dvn-menu-item highlighted>
      Students
      <div slot="sub-menu">
        <dvn-menu-sub-item>
          List
        </dvn-menu-sub-item>
        <dvn-menu-sub-item highlighted>
          Sessions
        </dvn-menu-sub-item>
      </div>
    </dvn-menu-item>
  </dvn-menu-section>
  <dvn-menu-section
    section-title="Settings"
  >
    <dvn-menu-item>
      Notifications
    </dvn-menu-item>
    <dvn-menu-item>
      Info
    </dvn-menu-item>
  </dvn-menu-section>
</dvn-menu>`;
const demo4$5 = `<dvn-menu>
  <dvn-menu-item>
    Home
  </dvn-menu-item>
  <dvn-menu-item highlighted>
    Settings
    <div slot="sub-menu">
      <dvn-menu-sub-item>
        Profile
      </dvn-menu-sub-item>
      <dvn-menu-sub-item highlighted>
        Notifications
      </dvn-menu-sub-item>
    </div>
  </dvn-menu-item>
</dvn-menu>`;
const ShowcaseMenu = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
  }
  render() {
    return (h(Host, null, h("div", { class: "d-flex" }, h("dvn-component-demo", { domString: demo1$c }), h("dvn-component-demo", { domString: demo2$b }), h("dvn-component-demo", { domString: demo3$9 }), h("dvn-component-demo", { domString: demo4$5 }))));
  }
};

const demo1$d = `<dvn-progress
  indefinite="true"
  tint="primary"
/>`;
const demo2$c = `<dvn-progress
  percent="40"
  tint="secondary"
/>`;
const demo3$a = `<dvn-progress
  percent="80"
  tint="danger"
  scale="small"
/>`;
const demo4$6 = `<dvn-progress
  percent="81"
  size="48"
  stroke-width="2"
/>`;
const ShowcaseProgress = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
  }
  render() {
    return (h(Host, null, h("h3", null, "Progress"), h("dvn-card", { leaned: true }, h("div", { class: "d-flex" }, h("dvn-component-demo", { domString: demo1$d }), h("dvn-component-demo", { domString: demo2$c }), h("dvn-component-demo", { domString: demo3$a }), h("dvn-component-demo", { domString: demo4$6 })))));
  }
};

const demo1$e = `<dvn-radio
  label="Basketball"
  name="sport"
  scale="small"
  tint="danger"
  value="basketball"
></dvn-radio>
<dvn-radio
  label="Football"
  name="sport"
  scale="small"
  tint="danger"
  value="football"
></dvn-radio>`;
const demo2$d = `<dvn-radio
  label="How I met your mother?"
  name="tv-show"
  value="himym"
></dvn-radio>
<dvn-radio
  label="Stranger Things"
  name="tv-show"
  value="stranger-things"
></dvn-radio>`;
const demo3$b = `<dvn-radio
  label="Istanbul"
  leaned
  name="city"
  scale="large"
  tint="secondary"
  value="istanbul"
></dvn-radio>
<dvn-radio
  label="London"
  leaned
  name="city"
  scale="large"
  tint="secondary"
  value="london"
></dvn-radio>`;
const ShowcaseRadio = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
  }
  render() {
    return (h(Host, null, h("dvn-card", { leaned: true }, h("div", { class: "d-flex" }, h("dvn-component-demo", { domString: demo1$e }), h("dvn-component-demo", { domString: demo2$d }), h("dvn-component-demo", { domString: demo3$b })))));
  }
};

const demo1$f = `<dvn-select
  leaned
>
  <dvn-select-option>
    Select a brand
  </dvn-select-option>
  <dvn-select-option
    value="audi"
  >
    Audi
  </dvn-select-option>
  <dvn-select-option
    value="chrysler"
  >
    Chrysler
  </dvn-select-option>
  <dvn-select-option
    value="volvo"
  >
    Volvo
  </dvn-select-option>
</dvn-select>`;
const demo2$e = `<dvn-select
  feedback="error"
  leaned
  value="volvo"
>
  <dvn-select-option
    value="audi"
  >
    Audi
  </dvn-select-option>
  <dvn-select-option
    value="chrysler"
  >
    Chrysler
  </dvn-select-option>
  <dvn-select-option
    value="volvo"
  >
    Volvo
  </dvn-select-option>
</dvn-select>`;
const demo3$c = `<dvn-select
  enable-search
  feedback="warning"
  leaned
>
  <dvn-select-option
    value="audi"
  >
    Audi
  </dvn-select-option>
  <dvn-select-option
    value="bmw"
  >
    BMW
  </dvn-select-option>
  <dvn-select-option
    value="chrysler"
  >
    Chrysler
  </dvn-select-option>
  <dvn-select-option
    value="mercedes"
  >
    Mercedes
  </dvn-select-option>
  <dvn-select-option
    value="volvo"
  >
    Volvo
  </dvn-select-option>
</dvn-select>`;
const ShowcaseSelect = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
  }
  render() {
    return (h(Host, null, h("dvn-card", { leaned: true }, h("div", { class: "d-flex" }, h("dvn-component-demo", { domString: demo1$f }), h("dvn-component-demo", { domString: demo2$e }), h("dvn-component-demo", { domString: demo3$c })))));
  }
};

export { ShowcaseBadge as showcase_badge, ShowcaseButton as showcase_button, ShowcaseCard as showcase_card, ShowcaseCheckbox as showcase_checkbox, ShowcaseCheckboxGroup as showcase_checkbox_group, ShowcaseContentSwitcher as showcase_content_switcher, ShowcaseDatePicker as showcase_date_picker, ShowcaseDialog as showcase_dialog, ShowcaseDropdown as showcase_dropdown, ShowcaseIcon as showcase_icon, ShowcaseIconButton as showcase_icon_button, ShowcaseImage as showcase_image, ShowcaseInfoSummary as showcase_info_summary, ShowcaseInput as showcase_input, ShowcaseBadge$1 as showcase_input_group, ShowcaseMenu as showcase_menu, ShowcaseProgress as showcase_progress, ShowcaseRadio as showcase_radio, ShowcaseSelect as showcase_select };
