dees-catalog/ts_web/elements/dees-chips.demo.ts

import { html } from '@design.estate/dees-element';

export const demoFunc = () => html`
  <style>
    .demoContainer {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      background: #222;
    }
  </style>
  <div class="demoContainer">
    <dees-chips
      selectionMode="none"
      .selectableChips=${[
        { key: 'account1', value: 'Payment Account 1' },
        { key: 'account2', value: 'PaymentAccount2' },
        { key: 'account3', value: 'Payment Account 3' },
      ]}
    ></dees-chips>
    <dees-chips
      selectionMode="single"
      chipsAreRemovable
      .selectableChips=${[
        { key: 'account1', value: 'Payment Account 1' },
        { key: 'account2', value: 'PaymentAccount2' },
        { key: 'account3', value: 'Payment Account 3' },
      ]}
    ></dees-chips>
    <dees-chips
      selectionMode="multiple"
      .selectableChips=${[
        { key: 'account1', value: 'Payment Account 1' },
        { key: 'account2', value: 'PaymentAccount2' },
        { key: 'account3', value: 'Payment Account 3' },
      ]}
    ></dees-chips>
  </div>
`;