@getflip/swirl-components 0.2.0 → 0.3.0

package/dist/collection/components/flip-modal/flip-modal.stories.js

@@ -0,0 +1,60 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-modal.mdx";
+export default {
+  component: "flip-modal",
+  parameters: {
+    docs: {
+      page: Docs,
+      source: {
+        code: `<flip-modal id="modal" label="Dialog" primary-action-label="Primary" secondary-action-label="Cancel">
+  <flip-text>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+    clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+    amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+    diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+    sit amet.
+  </flip-text>
+</flip-modal>
+
+<script>
+  const modal = document.body.querySelector('#modal');
+  modal.open();
+</script>`,
+      },
+    },
+  },
+  title: "Components/FlipModal",
+};
+const Template = (args) => {
+  const container = document.createElement("div");
+  const trigger = document.createElement("flip-button");
+  const element = generateStoryElement("flip-modal", args);
+  trigger.label = "Open modal";
+  trigger.addEventListener("click", () => element.open());
+  element.innerHTML = `
+    <flip-text>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+      sit amet.
+    </flip-text>
+  `;
+  container.append(trigger, element);
+  return container;
+};
+export const FlipModal = Template.bind({});
+FlipModal.args = {
+  label: "Label",
+  primaryActionLabel: "Primary",
+  secondaryActionLabel: "Secondary",
+};
+//# sourceMappingURL=flip-modal.stories.js.map

package/dist/collection/components/flip-modal/flip-modal.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-modal.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-modal/flip-modal.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,kBAAkB,CAAC;AAEpC,eAAe;EACb,SAAS,EAAE,YAAY;EACvB,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;MACV,MAAM,EAAE;QACN,IAAI,EAAE;;;;;;;;;;;;;;;;;UAiBJ;OACH;KACF;GACF;EACD,KAAK,EAAE,sBAAsB;CAC9B,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;EAChD,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;EACtD,MAAM,OAAO,GAAG,oBAAoB,CAClC,YAAY,EACZ,IAAI,CACoB,CAAC;EAE3B,OAAO,CAAC,KAAK,GAAG,YAAY,CAAC;EAC7B,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC;EAExD,OAAO,CAAC,SAAS,GAAG;;;;;;;;;;;;GAYnB,CAAC;EAEF,SAAS,CAAC,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;EAEnC,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE3C,SAAS,CAAC,IAAI,GAAG;EACf,KAAK,EAAE,OAAO;EACd,kBAAkB,EAAE,SAAS;EAC7B,oBAAoB,EAAE,WAAW;CAClC,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-modal.mdx\";\n\nexport default {\n  component: \"flip-modal\",\n  parameters: {\n    docs: {\n      page: Docs,\n      source: {\n        code: `<flip-modal id=\"modal\" label=\"Dialog\" primary-action-label=\"Primary\" secondary-action-label=\"Cancel\">\n  <flip-text>\n    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n    voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet\n    clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit\n    amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam\n    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed\n    diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.\n    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor\n    sit amet.\n  </flip-text>\n</flip-modal>\n\n<script>\n  const modal = document.body.querySelector('#modal');\n  modal.open();\n</script>`,\n      },\n    },\n  },\n  title: \"Components/FlipModal\",\n};\n\nconst Template = (args) => {\n  const container = document.createElement(\"div\");\n  const trigger = document.createElement(\"flip-button\");\n  const element = generateStoryElement(\n    \"flip-modal\",\n    args\n  ) as HTMLFlipDialogElement;\n\n  trigger.label = \"Open modal\";\n  trigger.addEventListener(\"click\", () => element.open());\n\n  element.innerHTML = `\n    <flip-text>\n      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet\n      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit\n      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam\n      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed\n      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.\n      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor\n      sit amet.\n    </flip-text>\n  `;\n\n  container.append(trigger, element);\n\n  return container;\n};\n\nexport const FlipModal = Template.bind({});\n\nFlipModal.args = {\n  label: \"Label\",\n  primaryActionLabel: \"Primary\",\n  secondaryActionLabel: \"Secondary\",\n};\n"]}

package/dist/collection/components/flip-option-list/flip-option-list.css

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }

package/dist/collection/components/flip-option-list/flip-option-list.js

@@ -0,0 +1,263 @@
+import { Component, Element, Event, h, Host, Prop, Watch, } from "@stencil/core";
+import { querySelectorAllDeep } from "../../utils";
+export class FlipOptionList {
+  constructor() {
+    this.value = [];
+    this.onFocus = () => {
+      this.focusItem(0);
+    };
+    this.onClick = (event) => {
+      const target = event.target;
+      const item = target === null || target === void 0 ? void 0 : target.closest("flip-option-list-item");
+      if (!Boolean(item)) {
+        return;
+      }
+      this.selectItem(this.items.findIndex((i) => i.value === item.value));
+    };
+    this.onKeyDown = (event) => {
+      if (event.code === "ArrowDown") {
+        event.preventDefault();
+        this.focusNextItem();
+      }
+      else if (event.code === "ArrowUp") {
+        event.preventDefault();
+        this.focusPreviousItem();
+      }
+      else if (event.code === "Space") {
+        event.preventDefault();
+        this.selectFocusedItem();
+      }
+      else if (event.code === "Home") {
+        event.preventDefault();
+        this.focusItem(0);
+      }
+      else if (event.code === "End") {
+        event.preventDefault();
+        this.focusItem(this.items.length - 1);
+      }
+      else if (event.code === "KeyA" &&
+        (event.metaKey || event.ctrlKey) &&
+        this.multiSelect) {
+        event.preventDefault();
+        this.selectAllItems();
+      }
+    };
+  }
+  componentDidLoad() {
+    this.items = querySelectorAllDeep(this.el, "flip-option-list-item");
+    this.setItemDisabledState();
+    this.setItemContext();
+    this.syncItemsWithValue();
+  }
+  watchDisabled() {
+    this.setItemDisabledState();
+  }
+  watchMultiSelect() {
+    this.setItemContext();
+  }
+  watchValue() {
+    this.syncItemsWithValue();
+  }
+  setItemDisabledState() {
+    this.items.forEach((item) => (item.disabled = this.disabled));
+  }
+  setItemContext() {
+    if (this.multiSelect) {
+      this.items.forEach((item) => (item.context = "multi-select"));
+    }
+    else {
+      this.items.forEach((item) => (item.context = "single-select"));
+      if (this.value.length > 1) {
+        this.updateValue([this.value[0]]);
+      }
+    }
+  }
+  selectItem(index) {
+    if (this.disabled) {
+      return;
+    }
+    const item = this.items[index];
+    const itemIsAlreadySelected = this.value.includes(item.value);
+    if (!this.multiSelect) {
+      this.value = [];
+    }
+    if (!itemIsAlreadySelected) {
+      this.updateValue([...this.value, item.value]);
+    }
+    else {
+      this.updateValue(this.value.filter((v) => v !== item.value));
+    }
+  }
+  updateValue(value) {
+    this.value = value;
+    this.valueChange.emit(this.value);
+  }
+  selectFocusedItem() {
+    if (this.disabled || this.getActiveItemIndex() === -1) {
+      return;
+    }
+    this.selectItem(this.getActiveItemIndex());
+  }
+  selectAllItems() {
+    if (this.disabled) {
+      return;
+    }
+    const alreadySelected = this.items.every((item) => this.value.includes(item.value));
+    if (alreadySelected) {
+      this.updateValue([]);
+    }
+    else {
+      this.updateValue(this.items.map((item) => item.value));
+    }
+  }
+  syncItemsWithValue() {
+    this.items.forEach((item) => (item.selected = this.value.includes(item.value)));
+  }
+  focusItem(index) {
+    if (this.disabled) {
+      return;
+    }
+    this.items.forEach((item) => item.shadowRoot.children[0].removeAttribute("tabIndex"));
+    const item = this.items[index].shadowRoot.children[0];
+    if (!Boolean(item)) {
+      return;
+    }
+    item.setAttribute("tabIndex", "0");
+    item.focus();
+  }
+  focusNextItem() {
+    if (this.disabled) {
+      return;
+    }
+    const activeItemIndex = this.getActiveItemIndex();
+    const newIndex = Math.min(activeItemIndex + 1, this.items.length - 1);
+    this.focusItem(newIndex);
+  }
+  focusPreviousItem() {
+    const activeItemIndex = this.getActiveItemIndex();
+    const newIndex = Math.max(activeItemIndex - 1, 0);
+    this.focusItem(newIndex);
+  }
+  getActiveItemIndex() {
+    return this.items
+      .map((item) => item.shadowRoot.children[0])
+      .findIndex((item) => {
+      var _a, _b;
+      return item === document.activeElement ||
+        item ===
+          ((_b = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('[role="option"]'));
+    });
+  }
+  render() {
+    const ariaMultiselectable = this.multiSelect ? "true" : undefined;
+    const tabIndex = this.disabled ? -1 : 0;
+    return (h(Host, null,
+      h("div", { "aria-label": this.label, "aria-multiselectable": ariaMultiselectable, class: "option-list", onClick: this.onClick, onFocus: this.onFocus, onKeyDown: this.onKeyDown, role: "listbox", tabIndex: tabIndex },
+        h("slot", null))));
+  }
+  static get is() { return "flip-option-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-option-list.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-option-list.css"]
+  }; }
+  static get properties() { return {
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "multiSelect": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "multi-select",
+      "reflect": false
+    },
+    "value": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "string[]",
+        "resolved": "string[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "[]"
+    }
+  }; }
+  static get events() { return [{
+      "method": "valueChange",
+      "name": "valueChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "string[]",
+        "resolved": "string[]",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "disabled",
+      "methodName": "watchDisabled"
+    }, {
+      "propName": "multiSelect",
+      "methodName": "watchMultiSelect"
+    }, {
+      "propName": "value",
+      "methodName": "watchValue"
+    }]; }
+}
+//# sourceMappingURL=flip-option-list.js.map

package/dist/collection/components/flip-option-list/flip-option-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-option-list.js","sourceRoot":"","sources":["../../../../src/components/flip-option-list/flip-option-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from \"@stencil/core\";\nimport { FlipFormInput, querySelectorAllDeep } from \"../../utils\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-option-list.css\",\n  tag: \"flip-option-list\",\n})\nexport class FlipOptionList implements FlipFormInput<string[]> {\n  @Element() el: HTMLElement;\n\n  @Prop() disabled?: boolean;\n  @Prop() label?: string;\n  @Prop() multiSelect?: boolean;\n  @Prop({ mutable: true }) value?: string[] = [];\n\n  @Event() valueChange: EventEmitter<string[]>;\n\n  private items: HTMLFlipOptionListItemElement[];\n\n  componentDidLoad() {\n    this.items = querySelectorAllDeep<HTMLFlipOptionListItemElement>(\n      this.el,\n      \"flip-option-list-item\"\n    );\n\n    this.setItemDisabledState();\n    this.setItemContext();\n    this.syncItemsWithValue();\n  }\n\n  @Watch(\"disabled\")\n  watchDisabled() {\n    this.setItemDisabledState();\n  }\n\n  @Watch(\"multiSelect\")\n  watchMultiSelect() {\n    this.setItemContext();\n  }\n\n  @Watch(\"value\")\n  watchValue() {\n    this.syncItemsWithValue();\n  }\n\n  private onFocus = () => {\n    this.focusItem(0);\n  };\n\n  private onClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item = target?.closest(\"flip-option-list-item\");\n\n    if (!Boolean(item)) {\n      return;\n    }\n\n    this.selectItem(this.items.findIndex((i) => i.value === item.value));\n  };\n\n  private onKeyDown = (event: KeyboardEvent) => {\n    if (event.code === \"ArrowDown\") {\n      event.preventDefault();\n      this.focusNextItem();\n    } else if (event.code === \"ArrowUp\") {\n      event.preventDefault();\n      this.focusPreviousItem();\n    } else if (event.code === \"Space\") {\n      event.preventDefault();\n      this.selectFocusedItem();\n    } else if (event.code === \"Home\") {\n      event.preventDefault();\n      this.focusItem(0);\n    } else if (event.code === \"End\") {\n      event.preventDefault();\n      this.focusItem(this.items.length - 1);\n    } else if (\n      event.code === \"KeyA\" &&\n      (event.metaKey || event.ctrlKey) &&\n      this.multiSelect\n    ) {\n      event.preventDefault();\n      this.selectAllItems();\n    }\n  };\n\n  private setItemDisabledState() {\n    this.items.forEach((item) => (item.disabled = this.disabled));\n  }\n\n  private setItemContext() {\n    if (this.multiSelect) {\n      this.items.forEach((item) => (item.context = \"multi-select\"));\n    } else {\n      this.items.forEach((item) => (item.context = \"single-select\"));\n\n      if (this.value.length > 1) {\n        this.updateValue([this.value[0]]);\n      }\n    }\n  }\n\n  private selectItem(index: number) {\n    if (this.disabled) {\n      return;\n    }\n\n    const item = this.items[index];\n    const itemIsAlreadySelected = this.value.includes(item.value);\n\n    if (!this.multiSelect) {\n      this.value = [];\n    }\n\n    if (!itemIsAlreadySelected) {\n      this.updateValue([...this.value, item.value]);\n    } else {\n      this.updateValue(this.value.filter((v) => v !== item.value));\n    }\n  }\n\n  private updateValue(value: string[]) {\n    this.value = value;\n    this.valueChange.emit(this.value);\n  }\n\n  private selectFocusedItem() {\n    if (this.disabled || this.getActiveItemIndex() === -1) {\n      return;\n    }\n\n    this.selectItem(this.getActiveItemIndex());\n  }\n\n  private selectAllItems() {\n    if (this.disabled) {\n      return;\n    }\n\n    const alreadySelected = this.items.every((item) =>\n      this.value.includes(item.value)\n    );\n\n    if (alreadySelected) {\n      this.updateValue([]);\n    } else {\n      this.updateValue(this.items.map((item) => item.value));\n    }\n  }\n\n  private syncItemsWithValue() {\n    this.items.forEach(\n      (item) => (item.selected = this.value.includes(item.value))\n    );\n  }\n\n  private focusItem(index: number) {\n    if (this.disabled) {\n      return;\n    }\n\n    this.items.forEach((item) =>\n      item.shadowRoot.children[0].removeAttribute(\"tabIndex\")\n    );\n\n    const item = this.items[index].shadowRoot.children[0] as HTMLElement;\n\n    if (!Boolean(item)) {\n      return;\n    }\n\n    item.setAttribute(\"tabIndex\", \"0\");\n    item.focus();\n  }\n\n  private focusNextItem() {\n    if (this.disabled) {\n      return;\n    }\n\n    const activeItemIndex = this.getActiveItemIndex();\n    const newIndex = Math.min(activeItemIndex + 1, this.items.length - 1);\n\n    this.focusItem(newIndex);\n  }\n\n  private focusPreviousItem() {\n    const activeItemIndex = this.getActiveItemIndex();\n    const newIndex = Math.max(activeItemIndex - 1, 0);\n\n    this.focusItem(newIndex);\n  }\n\n  private getActiveItemIndex(): number {\n    return this.items\n      .map((item) => item.shadowRoot.children[0])\n      .findIndex(\n        (item) =>\n          item === document.activeElement ||\n          item ===\n            document.activeElement?.shadowRoot?.querySelector('[role=\"option\"]')\n      );\n  }\n\n  render() {\n    const ariaMultiselectable = this.multiSelect ? \"true\" : undefined;\n    const tabIndex = this.disabled ? -1 : 0;\n\n    return (\n      <Host>\n        <div\n          aria-label={this.label}\n          aria-multiselectable={ariaMultiselectable}\n          class=\"option-list\"\n          onClick={this.onClick}\n          onFocus={this.onFocus}\n          onKeyDown={this.onKeyDown}\n          role=\"listbox\"\n          tabIndex={tabIndex}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-option-list/flip-option-list.stories.js

@@ -0,0 +1,31 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-option-list.mdx";
+export default {
+  component: "flip-option-list",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipOptionList",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-option-list", args);
+  element.innerHTML = `
+    <flip-option-list-section label="Section 1">
+      <flip-option-list-item label="This is an option" value="1"></flip-option-list-item>
+      <flip-option-list-item label="This is an option" value="2"></flip-option-list-item>
+      <flip-option-list-item label="This is an option" value="3"></flip-option-list-item>
+    </flip-option-list-section>
+    <flip-option-list-section label="Section 2">
+      <flip-option-list-item label="This is an option" value="4"></flip-option-list-item>
+    </flip-option-list-section>
+`;
+  return element;
+};
+export const FlipOptionList = Template.bind({});
+FlipOptionList.args = {
+  label: "Option List",
+  value: ["2"],
+};
+//# sourceMappingURL=flip-option-list.stories.js.map

package/dist/collection/components/flip-option-list/flip-option-list.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-option-list.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-option-list/flip-option-list.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,wBAAwB,CAAC;AAE1C,eAAe;EACb,SAAS,EAAE,kBAAkB;EAC7B,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,2BAA2B;CACnC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAC;EAE/D,OAAO,CAAC,SAAS,GAAG;;;;;;;;;CASrB,CAAC;EAEA,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,cAAc,CAAC,IAAI,GAAG;EACpB,KAAK,EAAE,aAAa;EACpB,KAAK,EAAE,CAAC,GAAG,CAAC;CACb,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-option-list.mdx\";\n\nexport default {\n  component: \"flip-option-list\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipOptionList\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-option-list\", args);\n\n  element.innerHTML = `\n    <flip-option-list-section label=\"Section 1\">\n      <flip-option-list-item label=\"This is an option\" value=\"1\"></flip-option-list-item>\n      <flip-option-list-item label=\"This is an option\" value=\"2\"></flip-option-list-item>\n      <flip-option-list-item label=\"This is an option\" value=\"3\"></flip-option-list-item>\n    </flip-option-list-section>\n    <flip-option-list-section label=\"Section 2\">\n      <flip-option-list-item label=\"This is an option\" value=\"4\"></flip-option-list-item>\n    </flip-option-list-section>\n`;\n\n  return element;\n};\n\nexport const FlipOptionList = Template.bind({});\n\nFlipOptionList.args = {\n  label: \"Option List\",\n  value: [\"2\"],\n};\n"]}

package/dist/collection/components/flip-option-list-item/flip-option-list-item.css

@@ -0,0 +1,115 @@
+:host {
+  display: inline-flex;
+  width: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.option-list-item {
+  display: inline-flex;
+  width: 100%;
+  min-height: 3rem;
+  padding: var(--s-space-12) var(--s-space-16);
+  align-items: center;
+  background-color: var(--s-surface-overlay-default);
+  cursor: pointer;
+  gap: var(--s-space-12);
+}
+
+.option-list-item:hover:not(.option-list-item--disabled) {
+    background-color: var(--s-surface-overlay-hovered);
+  }
+
+.option-list-item:active:not(.option-list-item--disabled) {
+    background-color: var(--s-surface-overlay-pressed);
+  }
+
+.option-list-item:focus {
+    background-color: var(--s-surface-overlay-hovered);
+    outline: none;
+  }
+
+.option-list-item--selected .option-list-item__label {
+    color: var(--s-text-highlight);
+  }
+
+.option-list-item--selected .option-list-item__icon {
+    color: var(--s-icon-highlight);
+  }
+
+.option-list-item--selected .option-list-item__checkbox-box {
+    border-color: var(--s-icon-highlight);
+    color: var(--s-text-on-status);
+    background-color: var(--s-icon-highlight);
+  }
+
+.option-list-item--disabled {
+  cursor: default;
+}
+
+.option-list-item--disabled.option-list-item--selected .option-list-item__checkbox-box {
+      background-color: var(--s-icon-disabled);
+    }
+
+.option-list-item--disabled.option-list-item--selected .option-list-item__checkbox-icon {
+      color: var(--s-text-on-status);
+    }
+
+.option-list-item--disabled .option-list-item__label {
+    color: var(--s-text-disabled);
+  }
+
+.option-list-item--disabled .option-list-item__icon,
+  .option-list-item--disabled .option-list-item__selection-icon,
+  .option-list-item--disabled .option-list-item__checkbox-icon {
+    color: var(--s-icon-disabled);
+  }
+
+.option-list-item--disabled .option-list-item__checkbox-box {
+    border-color: var(--s-icon-disabled);
+    background-color: var(--s-surface-overlay-default);
+  }
+
+.option-list-item__label {
+  flex-grow: 1;
+  color: var(--s-text-default);
+  font-size: var(--s-font-size-base);
+  font-weight: var(--s-font-weight-medium);
+  line-height: var(--s-line-height-base);
+  text-align: left;
+}
+
+.option-list-item__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--s-icon-default);
+}
+
+.option-list-item__selection-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--s-icon-highlight);
+}
+
+.option-list-item__checkbox {
+  display: inline-flex;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: var(--s-space-2);
+}
+
+.option-list-item__checkbox-box {
+  display: inline-flex;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  border: 0.125rem solid var(--s-icon-default);
+  border-radius: var(--s-border-radius-s);
+}
+
+.option-list-item__checkbox-icon {
+  display: inline-flex;
+}

package/dist/collection/components/flip-option-list-item/flip-option-list-item.js

@@ -0,0 +1,156 @@
+import { Component, h, Host, Prop } from "@stencil/core";
+import classnames from "classnames";
+export class FlipOptionListItem {
+  constructor() {
+    this.context = "single-select";
+    this.selected = false;
+  }
+  componentDidLoad() {
+    this.forceIconProps();
+  }
+  forceIconProps() {
+    if (!Boolean(this.iconEl)) {
+      return;
+    }
+    const icon = this.iconEl.children[0];
+    icon === null || icon === void 0 ? void 0 : icon.setAttribute("size", "24");
+  }
+  render() {
+    const ariaDisabled = this.disabled ? "true" : undefined;
+    const ariaSelected = String(this.selected);
+    const showCheckbox = this.context === "multi-select";
+    const showIcon = Boolean(this.icon) && this.context === "single-select";
+    const showSelectionIcon = this.selected && this.context === "single-select";
+    const className = classnames("option-list-item", `option-list-item--context-${this.context}`, {
+      "option-list-item--disabled": this.disabled,
+      "option-list-item--selected": this.selected,
+    });
+    return (h(Host, null,
+      h("div", { "aria-disabled": ariaDisabled, "aria-selected": ariaSelected, class: className, role: "option" },
+        showIcon && (h("span", { class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })),
+        showCheckbox && (h("span", { class: "option-list-item__checkbox" },
+          h("span", { class: "option-list-item__checkbox-box" }, this.selected && (h("flip-icon-check-strong", { class: "option-list-item__checkbox-icon", size: 16 }))))),
+        h("span", { class: "option-list-item__label" }, this.label),
+        showSelectionIcon && (h("span", { class: "option-list-item__selection-icon" },
+          h("flip-icon-check-small", null))))));
+  }
+  static get is() { return "flip-option-list-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-option-list-item.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-option-list-item.css"]
+  }; }
+  static get properties() { return {
+    "context": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "FlipOptionListItemContext",
+        "resolved": "\"multi-select\" | \"single-select\"",
+        "references": {
+          "FlipOptionListItemContext": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "context",
+      "reflect": false,
+      "defaultValue": "\"single-select\""
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "selected": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "selected",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false
+    }
+  }; }
+}
+//# sourceMappingURL=flip-option-list-item.js.map