import { r as registerInstance, h, H as Host } from './index-ecdfb761.js';
import { g as getInitials } from './utils-c4a3ab3b.js';
import { C as CompositeViewLinearConfig } from './composite-view-linear-config-24f36ec0.js';
import { A as AppConfig } from './app-config-5d14e7bf.js';
import { D as DvnAppViewConfig, A as AppViewType } from './view-config-2fc2ba10.js';
import './table-config-3820fb34.js';
import './FieldModelGenerator-03c7516c.js';
import './reference-field-a5b414d1.js';
import './BaseField-0b01dc2c.js';
import './index-61dcd269.js';
import './FieldGenerator-3ae403b2.js';
import './date-1bc489bd.js';
import './index-4e451db4.js';
import './index-32d8b974.js';
import './index-23baeeef.js';
import './index-09efdc01.js';
import './index-150b6a59.js';
import './data-model-f7ccf826.js';

const demo1$j = `<dvn-alert
  message="Defaults to primary."
/>`;
const demo2$j = `<dvn-alert
  tint="secondary"
  message="Also has I icon."
/>`;
const demo3$g = `<dvn-alert
  tint="warning"
  message="Has warning icon."
/>`;
const demo4$9 = `<dvn-alert
  tint="danger"
  message="Has error icon."
/>`;
const ShowcaseAlert = 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$j }), h("dvn-component-demo", { domString: demo2$j }), h("dvn-component-demo", { domString: demo3$g }), h("dvn-component-demo", { domString: demo4$9 })))));
  }
};

const demo1$i = `<dvn-badge
  scale="small"
  tint="danger"
>
  New Feature
</dvn-badge>`;
const demo2$i = `<dvn-badge
  tint="primary"
>
  New Feature
</dvn-badge>`;
const demo3$f = `<dvn-badge
  content="3"
  scale="large"
  tint="warning"
>
  Notifications
</dvn-badge>`;
const ShowcaseBadge$2 = 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$i }), h("dvn-component-demo", { domString: demo2$i }), h("dvn-component-demo", { domString: demo3$f })))));
  }
};

const demo1$h = `<dvn-button
  tint="primary"
  leaned="true"
  leaned="true"
>
  View Details
</dvn-button>`;
const demo2$h = `<dvn-button
  scale="large"
  view="outline"
  leaned="true"
>
  Sign Up
</dvn-button>`;
const demo3$e = `<dvn-button
  tint="secondary"
  shape="circle"
  leaned="true"
>
  i
</dvn-button>`;
const demo4$8 = `<dvn-button
  tint="secondary"
  shape="rounded"
  view="flat"
  leaned="true"
>
  Activate
</dvn-button>`;
const demo5$2 = `<dvn-button
  tint="secondary"
  shape="rounded"
  progressing="true"
  disabled="true"
  leaned="true"
>
  Activate
</dvn-button>`;
const demo6$2 = `<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$h }), h("dvn-component-demo", { domString: demo2$h }), h("dvn-component-demo", { domString: demo3$e }), h("dvn-component-demo", { domString: demo4$8 }), h("dvn-component-demo", { domString: demo5$2 }), h("dvn-component-demo", { domString: demo6$2 })))));
  }
};

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" leaned>
      </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" 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 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 card7 = `<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"
    image-size="48"
    title-position="right-of-image"
    image-position="bottom-left"
  ></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 card8 = `<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"
    image-size="48"
    title-position="below-cover"
    image-position="below-cover"
  ></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 card16 = `<dvn-card
  selectable
  leaned
  outlined
>Selectable</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,
  card7,
  card8,
  card11,
  card12,
  card13,
  card14,
  card15,
  card16,
};
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), renderSample('card7', show, this.showCode), renderSample('card8', show, this.showCode), renderSample('card16', show, this.showCode)));
  }
};

const demo1$g = `<dvn-checkbox
  checked="true"
  label="Football"
  scale="small"
  tint="danger"
  value="football"
/>`;
const demo2$g = `<dvn-checkbox
  checked="true"
  label="How I met your mother?"
  value="himym"
/>`;
const demo3$d = `<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$g }), h("dvn-component-demo", { domString: demo2$g }), h("dvn-component-demo", { domString: demo3$d })))));
  }
};

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$f = `<dvn-content-switcher
  options={[
    {
      label: 'Pairs',
      value: 'pairs'
    },
    {
      label: 'Requests',
      value: 'requests'
    }
  ]}
  onChange={(event: CustomEvent<string>) => this.selectedContent = event.detail}
  value={this.selectedContent}
/>
`;
const demo2$f = `<dvn-content-switcher
  options={[
    {
      icon: 'uil-sun',
      value: 'sun'
    },
    {
      icon: 'uil-moon',
      value: 'moon'
    },
    {
      icon: 'uil-cloud',
      value: 'cloud'
    }
  ]}
  onChange={e => this.selectedIcon = e.detail}
  value={this.selectedIcon}
  shape="rounded"
/>`;
const ShowcaseContentSwitcher = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.selectedContent = 'pairs';
    this.selectedIcon = 'moon';
  }
  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$f }, demo1$f)), h("br", null), h("br", null), h("div", null, h("dvn-content-switcher", { options: [
        {
          icon: 'uil-sun',
          value: 'sun'
        },
        {
          icon: 'uil-moon',
          value: 'moon'
        },
        {
          icon: 'uil-cloud',
          value: 'cloud'
        }
      ], onChange: e => this.selectedIcon = e.detail, value: this.selectedIcon, shape: "rounded" }), h("br", null), h("br", null), h("dvn-highlighted-code", { leaned: true, textToCopy: demo1$f }, demo2$f)))));
  }
};

function getDay(addition = 0) {
  const today = new Date();
  return new Date(today.getFullYear(), today.getMonth(), today.getDate() + addition);
}
const demo1$e = `<dvn-date-picker
  leaned
  placeholder="Select any date"
/>`;
const demo2$e = `<dvn-date-picker
  leaned
  date-format="DD MMM YYYY"
  placeholder="Specific date format"
/>`;
const demo3$c = `<dvn-date-picker
  leaned
  placeholder="Multiple months"
  multiple
  shown-month-count="2"
/>`;
const demo4$7 = `<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, clip: false }, h("div", { class: "d-flex" }, h("dvn-component-demo", { domString: demo1$e }), h("dvn-component-demo", { domString: demo2$e }), h("dvn-component-demo", { domString: demo3$c })), 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, clip: false }, h("dvn-component-demo", { domString: demo4$7 }), 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$d = `<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$d = `<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$d }), h("dvn-component-demo", { domString: demo2$d })))));
  }
};

const demo1$c = `<dvn-icon
  icon-name="uil uil-envelope"
  scale="small"
></dvn-icon>`;
const demo2$c = `<dvn-icon
  icon-name="uil uil-envelope"
></dvn-icon>`;
const demo3$b = `<dvn-icon
  icon-name="uil uil-envelope"
  scale="large"
></dvn-icon>`;
const demo4$6 = `<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$c }), h("dvn-component-demo", { domString: demo2$c }), h("dvn-component-demo", { domString: demo3$b }), h("dvn-component-demo", { domString: demo4$6 })))));
  }
};

const demo1$b = `<dvn-icon-button
  tint="primary"
  icon-name="uil uil-message"
  leaned="true"
/>`;
const demo2$b = `<dvn-icon-button
  tint="secondary"
  scale="large"
  view="outline"
  icon-name="uil uil-message"
  leaned="true"
/>`;
const demo3$a = `<dvn-icon-button
  view="flat"
  icon-name="uil uil-message"
  leaned="true"
/>`;
const demo4$5 = `<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$b }), h("dvn-component-demo", { domString: demo2$b }), h("dvn-component-demo", { domString: demo3$a }), h("dvn-component-demo", { domString: demo4$5 })))));
  }
};

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://randomuser.me/api/portraits/men/1.jpg',
  },
  {
    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$a = `<dvn-image
  leaned
  bordered
  size="64"
  src="https://bit.ly/2Tg0THm"
/>`;
const demo2$a = `<dvn-image
  leaned
  scale="large"
  src="https://bit.ly/2Tg0THm"
/>`;
const demo3$9 = `<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$a }), h("dvn-component-demo", { domString: demo3$9 }), h("dvn-component-demo", { domString: demo1$a })))));
  }
};

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$9 = `<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$9 })))));
  }
};

const demo1$8 = `<dvn-input
  leaned
  placeholder="Email"
  type="email"
/>`;
const demo2$8 = `<dvn-input
  feedback="error"
  leaned
  placeholder="Password"
  scale="small"
  type="password"
/>`;
const demo3$8 = `<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$8 }), h("dvn-component-demo", { domString: demo2$8 }), h("dvn-component-demo", { domString: demo3$8 }), h("dvn-component-demo", { domString: demo4$4 })))));
  }
};

const demo1$7 = `<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$7 = `<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$7 = `<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$7 })), h("div", { class: "mb-3" }, h("dvn-component-demo", { domString: demo2$7 })), h("div", { class: "mb-3" }, h("dvn-component-demo", { domString: demo3$7 })))));
  }
};

const ShowcaseLinearCompositeView = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
  }
  render() {
    return (h(Host, null, h("dvn-app-view-composite-view-linear", { apiData: undefined, appConfig: AppConfig.decode({
        views: [
          DvnAppViewConfig.decode({
            _id: 'view-1',
            type: AppViewType.TestPlaceholderView,
          }),
          DvnAppViewConfig.decode({
            _id: 'view-2',
            type: AppViewType.TestPlaceholderView,
          }),
          DvnAppViewConfig.decode({
            _id: 'view-3',
            type: AppViewType.TestPlaceholderView,
          }),
          CompositeViewLinearConfig.decode({
            _id: 'view-4',
            type: AppViewType.CompositeViewLinear,
            ui: {
              layout: 'horizontal',
              views: [
                {
                  title: '1/6 SECTION',
                  viewId: 'view-1',
                  params: {
                    title: 'Allocates 1/6 of the width.',
                  },
                  weights: {
                    small: 1,
                  }
                },
                {
                  viewId: 'view-2',
                  params: {
                    title: 'This section does not have a title but the title space is allocated because the other siblings have title. Also, all siblings stretch to fit the height of the tallest child.',
                  },
                  weights: {
                    small: 2,
                  }
                },
                {
                  title: '3/6 SECTION',
                  viewId: 'view-3',
                  params: {
                    title: 'Allocates 3/6 of the width.',
                  },
                  weights: {
                    small: 3,
                  }
                },
              ],
            }
          }),
          CompositeViewLinearConfig.decode({
            _id: 'view-5',
            type: AppViewType.CompositeViewLinear,
            ui: {
              layout: 'horizontal',
              views: [
                {
                  viewId: 'view-1',
                  params: {
                    title: 'Content',
                  },
                  weights: {
                    small: 2,
                  }
                },
                {
                  viewId: 'view-2',
                  params: {
                    title: 'Content',
                  },
                  weights: {
                    small: 4,
                  }
                },
              ],
            }
          })
        ]
      }), params: {
      // itemId: userToViewId,
      }, view: CompositeViewLinearConfig.decode({
        type: AppViewType.CompositeViewLinear,
        params: undefined,
        ui: {
          layout: 'vertical',
          views: [
            {
              title: 'FIRST SECTION',
              viewId: 'view-1',
              params: {
                title: 'First content',
              },
              weights: {
                small: 1,
              }
            },
            {
              title: 'SECOND SECTION',
              description: 'This section has 150px fixed height.',
              viewId: 'view-2',
              params: {
                title: 'Second content',
              },
              weights: {
                small: 2,
              },
              height: '150px',
            },
            {
              viewId: 'view-4',
              weights: {
                small: 3,
              }
            },
            {
              title: 'ANOTHER SECTION',
              viewId: 'view-3',
              params: {
                title: 'To test the spacing after another composite view.',
              }
            },
            {
              title: '5. SECTION',
              description: 'This wrapper section has the title instead of the child sections. So that the description can cover all the wrapped children.',
              viewId: 'view-5'
            },
            {
              title: 'LAST SECTION',
              viewId: 'view-3',
              params: {
                title: 'Content',
              },
              weights: {
                small: 3,
              }
            },
          ],
        }
      }) })));
  }
};

const demo1$6 = `<dvn-linear-progress
  percent="90"
  scale="large"
  stroke-color="#588D60"
/>`;
const demo2$6 = `<dvn-linear-progress
  show-percent="true"
  percent="50"
  scale="medium"
  tint="secondary"
/>`;
const demo3$6 = `<dvn-linear-progress
  percent="20"
  scale="small"
  status="error"
  tint="primary"
/>`;
const demo4$3 = `<dvn-linear-progress
  percent="50"
  scale="small"
  tint="secondary"
  status="success"
/>`;
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$6 }), h("dvn-component-demo", { domString: demo2$6 }), h("dvn-component-demo", { domString: demo3$6 }), h("dvn-component-demo", { domString: demo4$3 })))));
  }
};

const demo1$5 = `<dvn-menu>
  <dvn-menu-item highlighted>
    Home
  </dvn-menu-item>
  <dvn-menu-item>
    Notifications
  </dvn-menu-item>
</dvn-menu>`;
const demo2$5 = `<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$5 = `<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$2 = `<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$5 }), h("dvn-component-demo", { domString: demo2$5 }), h("dvn-component-demo", { domString: demo3$5 }), h("dvn-component-demo", { domString: demo4$2 }))));
  }
};

const demo1$4 = `<dvn-progress
  indefinite="true"
  tint="primary"
/>`;
const demo2$4 = `<dvn-progress
  percent="40"
  tint="secondary"
/>`;
const demo3$4 = `<dvn-progress
  percent="80"
  tint="danger"
  scale="small"
/>`;
const demo4$1 = `<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$4 }), h("dvn-component-demo", { domString: demo2$4 }), h("dvn-component-demo", { domString: demo3$4 }), h("dvn-component-demo", { domString: demo4$1 })))));
  }
};

const demo1$3 = `<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$3 = `<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$3 = `<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$3 }), h("dvn-component-demo", { domString: demo2$3 }), h("dvn-component-demo", { domString: demo3$3 })))));
  }
};

const ShowcaseRichEditor = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.content = sampleData;
  }
  render() {
    return (h(Host, { class: "d-flex" }, h("div", { class: "m-1", style: { flex: '29' } }, h("h5", null, "Editor"), h("dvn-rich-editor", { value: this.content, onChange: (e) => this.content = e.detail })), h("div", { class: "m-1", style: { flex: '25' } }, h("h5", null, "Readonly"), h("dvn-rich-content", { value: this.content }))));
  }
};
const sampleData = [
  {
    type: 'h1',
    id: 'h1-1',
    value: {
      text: 'Rich Text Editor',
    },
  },
  {
    type: 'text',
    id: 'text-1',
    value: {
      text: 'This is a rich text editor created for providing a <b>beautiful</b> and <i>easy to use</i> scripting experience to users. It supports <strong>bold</strong>, <em>italic</em>, <u>underline</u> and <s>strike-through</s> text formatting for paragraphs and also <a href="devingen.io" rel="noopener noreferrer" target="_blank">supports links</a>.',
    },
  },
  {
    type: 'h2',
    id: 'h2-1',
    value: {
      text: 'Formatting Text',
    },
  },
  {
    type: 'text',
    id: 'text-2',
    value: {
      text: 'There are two ways of formatting text. First one is the keyboard shortcuts. You can use the common key combinations used for all text editors. For example Cmd+b (Ctrl for Windows) converts the cursor to bold text.'
    },
  },
  {
    type: 'h2',
    id: 'h2-2',
    value: {
      text: 'Lists',
    },
  },
  {
    type: 'h3',
    id: 'h3-1',
    value: {
      text: 'Unordered Lists',
    },
  },
  {
    type: 'text',
    id: 'text-3',
    value: {
      text: '<p>You can create an unordered list by using the - character in the beginning of a new line and adding a space after it. The line will be directly converted to a list item. The subsequent lines will be list items as well.</p><ul><li>First line</li><li>Second line</li></ul>'
    },
  },
  {
    type: 'h3',
    id: 'h3-2',
    value: {
      text: 'Ordered List',
    },
  },
  {
    type: 'text',
    id: 'text-4',
    value: {
      text: '<p>To create an ordered list, type 1. at the beginning of the line.</p><ol><li>The first ordered item</li><li>And the second one</li></ol>'
    },
  },
  {
    type: 'h2',
    id: 'h2-3',
    value: {
      text: 'TODO',
    },
  },
  {
    type: 'text',
    id: 'text-5',
    value: {
      text: '<ul><li><s>Paragraph with rich formatting</s></li><li><s>Headings</s></li><li>Separator</li><li>Embedding video</li><li>Image with URL</li><li>Image by uploading a new file</li></ul>'
    },
  },
];

const demo1$2 = `<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$2 = `<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$2 = `<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$2 }), h("dvn-component-demo", { domString: demo2$2 }), h("dvn-component-demo", { domString: demo3$2 })))));
  }
};

const demo1$1 = `<dvn-switch />`;
const demo2$1 = `<dvn-switch
  shape="rounded"
  value="true"
/>`;
const demo3$1 = `<dvn-switch
  shape="rounded"
  tint="warning"
/>`;
const demo4 = `<dvn-switch
  tint="secondary"
  scale="small"
/>`;
const demo5 = `<dvn-switch
  tint="danger"
  scale="large"
  shape="rounded"
/>`;
const demo6 = `<dvn-switch
  disabled
/>`;
const demo7 = `<dvn-switch
  disabled
  checked
/>`;
const ShowcaseSwitch = 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$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 }), h("dvn-component-demo", { domString: demo7 })))));
  }
};

const demo1 = `<p>
Can be used on a
<dvn-tooltip
  content="However, a picture is worth a million words."
>
  <b>word</b>
</dvn-tooltip>
in a paragraph.
</p>`;
const demo2 = `<dvn-tooltip
  content="Or on an element."
>
  <dvn-icon-button
    icon-name="uil uil-favorite"
    tint="secondary"
  />
</dvn-tooltip>`;
const demo3 = `<dvn-tooltip
  content="Setting a width makes it have multiple lines. Otherwise it stays single line."
  width="200px"
>
  <dvn-icon-button
    icon-name="uil uil-favorite"
    tint="secondary"
  />
</dvn-tooltip>`;
const ShowcaseTooltip = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
  }
  render() {
    return (h(Host, null, h("dvn-card", { leaned: true, clip: false }, h("div", { class: "p-3" }, h("dvn-tooltip", { content: "On the left.", placement: "left", offset: "0px" }, h("dvn-icon-button", { view: "outline", "icon-name": "uil uil-arrow-left" })), h("dvn-tooltip", { content: "On the top.", placement: "top", offset: "0px" }, h("dvn-icon-button", { view: "outline", "icon-name": "uil uil-arrow-up" })), h("dvn-tooltip", { content: "On the bottom.", placement: "bottom", offset: "0px" }, h("dvn-icon-button", { view: "outline", "icon-name": "uil uil-arrow-down" })), h("dvn-tooltip", { content: "On the right.", placement: "right", offset: "0px" }, h("dvn-icon-button", { view: "outline", "icon-name": "uil uil-arrow-right" }))), h("div", { class: "d-flex" }, h("dvn-component-demo", { domString: demo1 }), h("dvn-component-demo", { domString: demo2 })), h("div", { class: "d-flex mt-3" }, h("dvn-component-demo", { domString: demo3 })))));
  }
};

export { ShowcaseAlert as showcase_alert, ShowcaseBadge$2 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, ShowcaseLinearCompositeView as showcase_linear_composite_view, ShowcaseBadge as showcase_linear_progress, ShowcaseMenu as showcase_menu, ShowcaseProgress as showcase_progress, ShowcaseRadio as showcase_radio, ShowcaseRichEditor as showcase_rich_editor, ShowcaseSelect as showcase_select, ShowcaseSwitch as showcase_switch, ShowcaseTooltip as showcase_tooltip };
