Chameleon Multiselect

import { html, svg } from "lit-html";
import { withKnobs, text, boolean } from "@open-wc/demoing-storybook";
import "./chameleon-multiselect.js";

const options = [
  {
    value: "arch",
    label: "Gateway Arch",
    subLabel: "Historical Landmark",
    preLabel: html`
      <img
        src="https://upload.wikimedia.org/wikipedia/commons/0/00/St_Louis_night_expblend_cropped.jpg"
      />
    `,
    postLabel: "St. Louis, MO",
  },
  {
    value: "union-station",
    label: "Union Station",
    subLabel: "Historical Landmark",
    preLabel: html`
      <img
        src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/St._Louis_Union_Station_%2817577826564%29.jpg/320px-St._Louis_Union_Station_%2817577826564%29.jpg"
      />
    `,
    postLabel: "St. Louis, MO",
  },
  {
    value: "scott-joplin-house",
    label: "Scott Joplin House",
    subLabel: "Historical Landmark",
    preLabel: html`
      <img
        src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Scott_Joplin_House.jpg/568px-Scott_Joplin_House.jpg"
      />
    `,
    postLabel: "St. Louis, MO",
  },
];

const searchIcon = svg`
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    class="feather feather-search"
    slot="icon"
  >
    <circle cx="11" cy="11" r="8"></circle>
    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
  </svg>
`;

export default {
  title: "Components|Form Elements/Multiselect",
  component: "chameleon-multiselect",
  decorators: [withKnobs],
  options: { selectedPanel: "storybookjs/docs/panel" },
};

Properties

| Property Name | Type(s) | Default Value | Description | | -------------------- | ------- | ------------- | ----------------------------------------------------------------------------------- | | name | Boolean | false | The multiselect's form name | | options | Array | false | An array of the possible options to be selected | | filteredOptions | Array | false | An array of filtered options | | selectedOptions | Array | false | An array of the selected options | | active | Boolean | false | A Boolean attribute which, if present, displays the filtered options | | disabled | Boolean | false | A Boolean attribute which is present if the input should be disabled | | readonly | Boolean | false | A Boolean attribute which, if true, indicates that the multiselect cannot be edited | | required | Boolean | false | A Boolean attribute which, if true, indicates the input is required | | invalid | Boolean | false | A Boolean which, if true, indicates that the input is valid | | label | String | false | The input's label | | placeholder | String | false | The input's placeholder text | | instantSearch | Boolean | false | When true, allows instant search functionality | | instantSearchValue | String | false | The instant search text value | | loading | Boolean | false | Whether or not multiselect is loading | | validationMessage | String | false | The multiselect's error message |

Examples

Default

export const Default = () => {
  const disabled = boolean("Disabled", false);
  const readonly = boolean("Read Only", false);
  const required = boolean("Required", false);
  const loading = boolean("Loading", false);
  const invalid = boolean("Invalid", false);
  const label = text("Label", "Landmarks");
  const placeholder = text("Placeholder", "Select an option...");
  const error = text("Error", "");

  return html`
    <chameleon-multiselect
      ?disabled="${disabled}"
      ?readonly="${readonly}"
      ?required="${required}"
      ?loading="${loading}"
      ?invalid="${invalid}"
      .label="${label}"
      .placeholder="${placeholder}"
      .options="${options}"
      .validationMessage="${error}"
    ></chameleon-multiselect>
  `;
};

Icon

export const Icon = () => html`
  <chameleon-multiselect
    label="Landmarks"
    placeholder="Select an option..."
    .options="${options}"
  >
    ${searchIcon}
  </chameleon-multiselect>
`;

Error State

export const ErrorState = () => html`
  <chameleon-multiselect
    label="Landmarks"
    placeholder="Select an option..."
    .options="${options}"
    ?invalid="${true}"
    validationMessage="Please select an option"
  >
    ${searchIcon}
  </chameleon-multiselect>
`;