@getflip/swirl-components 0.1.0 → 0.3.0

package/dist/esm/flip-option-list.entry.js

@@ -0,0 +1,172 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5a3b2828.js';
+import { q as querySelectorAllDeep } from './utils-b46bcd4f.js';
+
+const flipOptionListCss = ":host{display:block}:host *{box-sizing:border-box}";
+
+const FlipOptionList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.valueChange = createEvent(this, "valueChange", 7);
+    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))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "disabled": ["watchDisabled"],
+    "multiSelect": ["watchMultiSelect"],
+    "value": ["watchValue"]
+  }; }
+};
+FlipOptionList.style = flipOptionListCss;
+
+export { FlipOptionList as flip_option_list };
+
+//# sourceMappingURL=flip-option-list.entry.js.map

package/dist/esm/flip-option-list.entry.js.map

@@ -0,0 +1 @@
+{"file":"flip-option-list.entry.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,oDAAoD;;MCiBjE,cAAc;EAL3B;;;IAW2B,UAAK,GAAc,EAAE,CAAC;IAgCvC,YAAO,GAAG;MAChB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;KACnB,CAAC;IAEM,YAAO,GAAG,CAAC,KAAiB;MAClC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;MAC3C,MAAM,IAAI,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,CAAC,uBAAuB,CAAC,CAAC;MAEtD,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;QAClB,OAAO;OACR;MAED,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;KACtE,CAAC;IAEM,cAAS,GAAG,CAAC,KAAoB;MACvC,IAAI,KAAK,CAAC,IAAI,KAAK,WAAW,EAAE;QAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,aAAa,EAAE,CAAC;OACtB;WAAM,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS,EAAE;QACnC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,iBAAiB,EAAE,CAAC;OAC1B;WAAM,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;QACjC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,iBAAiB,EAAE,CAAC;OAC1B;WAAM,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,EAAE;QAChC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;OACnB;WAAM,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,EAAE;QAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;OACvC;WAAM,IACL,KAAK,CAAC,IAAI,KAAK,MAAM;SACpB,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC;QAChC,IAAI,CAAC,WAAW,EAChB;QACA,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,cAAc,EAAE,CAAC;OACvB;KACF,CAAC;GA6IH;EA9MC,gBAAgB;IACd,IAAI,CAAC,KAAK,GAAG,oBAAoB,CAC/B,IAAI,CAAC,EAAE,EACP,uBAAuB,CACxB,CAAC;IAEF,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC5B,IAAI,CAAC,cAAc,EAAE,CAAC;IACtB,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAGD,aAAa;IACX,IAAI,CAAC,oBAAoB,EAAE,CAAC;GAC7B;EAGD,gBAAgB;IACd,IAAI,CAAC,cAAc,EAAE,CAAC;GACvB;EAGD,UAAU;IACR,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EA2CO,oBAAoB;IAC1B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,MAAM,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;GAC/D;EAEO,cAAc;IACpB,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,MAAM,IAAI,CAAC,OAAO,GAAG,cAAc,CAAC,CAAC,CAAC;KAC/D;SAAM;MACL,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,MAAM,IAAI,CAAC,OAAO,GAAG,eAAe,CAAC,CAAC,CAAC;MAE/D,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;QACzB,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;OACnC;KACF;GACF;EAEO,UAAU,CAAC,KAAa;IAC9B,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,OAAO;KACR;IAED,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC/B,MAAM,qBAAqB,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAE9D,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;MACrB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;KACjB;IAED,IAAI,CAAC,qBAAqB,EAAE;MAC1B,IAAI,CAAC,WAAW,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;KAC/C;SAAM;MACL,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;KAC9D;GACF;EAEO,WAAW,CAAC,KAAe;IACjC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACnB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACnC;EAEO,iBAAiB;IACvB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC,EAAE;MACrD,OAAO;KACR;IAED,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC;GAC5C;EAEO,cAAc;IACpB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,OAAO;KACR;IAED,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,KAC5C,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAChC,CAAC;IAEF,IAAI,eAAe,EAAE;MACnB,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;KACtB;SAAM;MACL,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;KACxD;GACF;EAEO,kBAAkB;IACxB,IAAI,CAAC,KAAK,CAAC,OAAO,CAChB,CAAC,IAAI,MAAM,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAC5D,CAAC;GACH;EAEO,SAAS,CAAC,KAAa;IAC7B,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,OAAO;KACR;IAED,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,KACtB,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,UAAU,CAAC,CACxD,CAAC;IAEF,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAgB,CAAC;IAErE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;MAClB,OAAO;KACR;IAED,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;IACnC,IAAI,CAAC,KAAK,EAAE,CAAC;GACd;EAEO,aAAa;IACnB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,OAAO;KACR;IAED,MAAM,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAClD,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,eAAe,GAAG,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAEtE,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;GAC1B;EAEO,iBAAiB;IACvB,MAAM,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAClD,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,eAAe,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;IAElD,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;GAC1B;EAEO,kBAAkB;IACxB,OAAO,IAAI,CAAC,KAAK;OACd,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;OAC1C,SAAS,CACR,CAAC,IAAI;;MACH,OAAA,IAAI,KAAK,QAAQ,CAAC,aAAa;QAC/B,IAAI;WACF,MAAA,MAAA,QAAQ,CAAC,aAAa,0CAAE,UAAU,0CAAE,aAAa,CAAC,iBAAiB,CAAC,CAAA,CAAA;KAAA,CACzE,CAAC;GACL;EAED,MAAM;IACJ,MAAM,mBAAmB,GAAG,IAAI,CAAC,WAAW,GAAG,MAAM,GAAG,SAAS,CAAC;IAClE,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;IAExC,QACE,EAAC,IAAI,QACH,yBACc,IAAI,CAAC,KAAK,0BACA,mBAAmB,EACzC,KAAK,EAAC,aAAa,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAC,SAAS,EACd,QAAQ,EAAE,QAAQ,IAElB,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;","names":[],"sources":["./src/components/flip-option-list/flip-option-list.css?tag=flip-option-list&encapsulation=shadow","./src/components/flip-option-list/flip-option-list.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n","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"],"version":3}

package/dist/esm/flip-pagination.entry.js

@@ -0,0 +1,56 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-5a3b2828.js';
+import { c as classnames } from './index-6d2e18c6.js';
+import './_commonjsHelpers-44457d8d.js';
+
+const flipPaginationCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.pagination{display:block;width:100%}.pagination--variant-simple .pagination__list{gap:var(--s-space-4)}.pagination__list{display:flex;margin:0;padding:0;justify-content:flex-start;align-items:center;line-height:var(--s-line-height-base);list-style:none;gap:var(--s-space-8)}@media (--from-tablet){.pagination__list{gap:var(--s-space-16)}}.pagination__advanced-label{display:flex;align-items:center;gap:var(--s-space-8);white-space:nowrap}.pagination__page-select-container{position:relative}.pagination__page-select{display:inline-flex;padding-right:var(--s-space-16);border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:center;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.pagination__page-select:focus{outline-color:var(--s-focus-default)}.pagination__page-select-icon{position:absolute;top:50%;right:0;transform:translateY(-50%);pointer-events:none}";
+
+const FlipPagination = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.setPage = createEvent(this, "setPage", 7);
+    this.accessibleNextButtonLabel = "Next page";
+    this.accessiblePrevButtonLabel = "Previous page";
+    this.nextButtonLabel = "Next";
+    this.pageLabel = "out of";
+    this.prevButtonLabel = "Prev";
+    this.pageSelectLabel = "Select a page";
+    this.variant = "default";
+    this.onPrevButtonClick = () => {
+      const prevPage = Math.max(this.page - 1, 1);
+      if (this.page === prevPage) {
+        return;
+      }
+      this.setPage.emit(prevPage);
+    };
+    this.onNextButtonClick = () => {
+      const nextPage = Math.min(this.page + 1, this.pages);
+      if (this.page === nextPage) {
+        return;
+      }
+      this.setPage.emit(nextPage);
+    };
+    this.onSelect = (event) => {
+      const page = +event.target.value;
+      if (this.page === page) {
+        return;
+      }
+      this.setPage.emit(page);
+    };
+  }
+  render() {
+    const hideButtonLabels = this.variant !== "advanced";
+    const showPageLabel = this.variant !== "simple";
+    const showDropDown = this.variant === "advanced";
+    const ariaPageLabel = `${this.page} ${this.pageLabel} ${this.pages}`;
+    const className = classnames("pagination", `pagination--variant-${this.variant}`);
+    return (h(Host, null, h("nav", { "aria-label": this.label, class: className }, h("ul", { class: "pagination__list" }, h("li", { class: "pagination__list-item" }, h("flip-button", { class: "pagination__prev-button", disabled: this.page <= 1, flipAriaLabel: this.accessiblePrevButtonLabel, hideLabel: hideButtonLabels, icon: "<flip-icon-chevron-left></flip-icon-chevron-left>", intent: "primary", label: this.prevButtonLabel, onClick: this.onPrevButtonClick })), showPageLabel ? (h("li", { class: "pagination__list-item" }, h("span", null, showDropDown ? (h("span", { "aria-current": "page", class: "pagination__advanced-label" }, h("span", { class: "pagination__page-select-container" }, h("select", { "aria-label": this.pageSelectLabel, class: "pagination__page-select", onChange: this.onSelect }, new Array(this.pages)
+      .fill(undefined)
+      .map((_, index) => index + 1)
+      .map((page) => (h("option", { selected: this.page === page, value: String(page) }, page)))), h("flip-icon-expand-more", { "aria-hidden": "true", class: "pagination__page-select-icon", size: 16 })), h("span", { "aria-hidden": "true" }, this.pageLabel, " ", this.pages))) : (h("span", { "aria-current": "page" }, ariaPageLabel))))) : (h("li", { class: "pagination__list-item" }, h("flip-visually-hidden", null, h("span", { "aria-current": "page" }, ariaPageLabel)))), h("li", { class: "pagination__list-item" }, h("flip-button", { class: "pagination__next-button", disabled: this.page >= this.pages, flipAriaLabel: this.accessibleNextButtonLabel, hideLabel: hideButtonLabels, icon: "<flip-icon-chevron-right></flip-icon-chevron-right>", iconPosition: "end", intent: "primary", label: this.nextButtonLabel, onClick: this.onNextButtonClick }))))));
+  }
+};
+FlipPagination.style = flipPaginationCss;
+
+export { FlipPagination as flip_pagination };
+
+//# sourceMappingURL=flip-pagination.entry.js.map

package/dist/esm/flip-pagination.entry.js.map

@@ -0,0 +1 @@
+{"file":"flip-pagination.entry.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,q+BAAq+B;;MCUl/B,cAAc;EAL3B;;;IAMU,8BAAyB,GAAY,WAAW,CAAC;IACjD,8BAAyB,GAAY,eAAe,CAAC;IACrD,oBAAe,GAAY,MAAM,CAAC;IAClC,cAAS,GAAY,QAAQ,CAAC;IAC9B,oBAAe,GAAY,MAAM,CAAC;IAIlC,oBAAe,GAAY,eAAe,CAAC;IAC3C,YAAO,GAA2B,SAAS,CAAC;IAI5C,sBAAiB,GAAG;MAC1B,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;MAE5C,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;QAC1B,OAAO;OACR;MAED,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAC7B,CAAC;IAEM,sBAAiB,GAAG;MAC1B,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;MAErD,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;QAC1B,OAAO;OACR;MAED,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAC7B,CAAC;IAEM,aAAQ,GAAG,CAAC,KAAY;MAC9B,MAAM,IAAI,GAAG,CAAE,KAAK,CAAC,MAA4B,CAAC,KAAK,CAAC;MAExD,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,EAAE;QACtB,OAAO;OACR;MAED,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACzB,CAAC;GAgGH;EA9FC,MAAM;IACJ,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC;IACrD,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,KAAK,QAAQ,CAAC;IAChD,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC;IAEjD,MAAM,aAAa,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;IAErE,MAAM,SAAS,GAAG,UAAU,CAC1B,YAAY,EACZ,uBAAuB,IAAI,CAAC,OAAO,EAAE,CACtC,CAAC;IAEF,QACE,EAAC,IAAI,QACH,yBAAiB,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,IAC3C,UAAI,KAAK,EAAC,kBAAkB,IAC1B,UAAI,KAAK,EAAC,uBAAuB,IAC/B,mBACE,KAAK,EAAC,yBAAyB,EAC/B,QAAQ,EAAE,IAAI,CAAC,IAAI,IAAI,CAAC,EACxB,aAAa,EAAE,IAAI,CAAC,yBAAyB,EAC7C,SAAS,EAAE,gBAAgB,EAC3B,IAAI,EAAC,mDAAmD,EACxD,MAAM,EAAC,SAAS,EAChB,KAAK,EAAE,IAAI,CAAC,eAAe,EAC3B,OAAO,EAAE,IAAI,CAAC,iBAAiB,GAClB,CACZ,EACJ,aAAa,IACZ,UAAI,KAAK,EAAC,uBAAuB,IAC/B,gBACG,YAAY,IACX,4BACe,MAAM,EACnB,KAAK,EAAC,4BAA4B,IAElC,YAAM,KAAK,EAAC,mCAAmC,IAC7C,4BACc,IAAI,CAAC,eAAe,EAChC,KAAK,EAAC,yBAAyB,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEtB,IAAI,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;OACnB,IAAI,CAAC,SAAS,CAAC;OACf,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,KAAK,GAAG,CAAC,CAAC;OAC5B,GAAG,CAAC,CAAC,IAAI,MACR,cACE,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,EAC5B,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,IAElB,IAAI,CACE,CACV,CAAC,CACG,EACT,4CACc,MAAM,EAClB,KAAK,EAAC,8BAA8B,EACpC,IAAI,EAAE,EAAE,GACe,CACpB,EACP,2BAAkB,MAAM,IACrB,IAAI,CAAC,SAAS,OAAG,IAAI,CAAC,KAAK,CACvB,CACF,KAEP,4BAAmB,MAAM,IAAE,aAAa,CAAQ,CACjD,CACI,CACJ,KAEL,UAAI,KAAK,EAAC,uBAAuB,IAC/B,gCACE,4BAAmB,MAAM,IAAE,aAAa,CAAQ,CAC3B,CACpB,CACN,EACD,UAAI,KAAK,EAAC,uBAAuB,IAC/B,mBACE,KAAK,EAAC,yBAAyB,EAC/B,QAAQ,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EACjC,aAAa,EAAE,IAAI,CAAC,yBAAyB,EAC7C,SAAS,EAAE,gBAAgB,EAC3B,IAAI,EAAC,qDAAqD,EAC1D,YAAY,EAAC,KAAK,EAClB,MAAM,EAAC,SAAS,EAChB,KAAK,EAAE,IAAI,CAAC,eAAe,EAC3B,OAAO,EAAE,IAAI,CAAC,iBAAiB,GAClB,CACZ,CACF,CACD,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/flip-pagination/flip-pagination.css?tag=flip-pagination&encapsulation=shadow","./src/components/flip-pagination/flip-pagination.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.pagination {\n  display: block;\n  width: 100%;\n}\n\n.pagination--variant-simple {\n  & .pagination__list {\n    gap: var(--s-space-4);\n  }\n}\n\n.pagination__list {\n  display: flex;\n  margin: 0;\n  padding: 0;\n  justify-content: flex-start;\n  align-items: center;\n  line-height: var(--s-line-height-base);\n  list-style: none;\n  gap: var(--s-space-8);\n\n  @media (--from-tablet) {\n    gap: var(--s-space-16);\n  }\n}\n\n.pagination__advanced-label {\n  display: flex;\n  align-items: center;\n  gap: var(--s-space-8);\n  white-space: nowrap;\n}\n\n.pagination__page-select-container {\n  position: relative;\n}\n\n.pagination__page-select {\n  display: inline-flex;\n  padding-right: var(--s-space-16);\n  border: none;\n  background-color: transparent;\n  font: inherit;\n  line-height: var(--s-line-height-base);\n  text-align: center;\n  cursor: pointer;\n  appearance: none;\n\n  &:focus {\n    outline-color: var(--s-focus-default);\n  }\n}\n\n.pagination__page-select-icon {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  transform: translateY(-50%);\n  pointer-events: none;\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipPaginationVariant = \"default\" | \"simple\" | \"advanced\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-pagination.css\",\n  tag: \"flip-pagination\",\n})\nexport class FlipPagination {\n  @Prop() accessibleNextButtonLabel?: string = \"Next page\";\n  @Prop() accessiblePrevButtonLabel?: string = \"Previous page\";\n  @Prop() nextButtonLabel?: string = \"Next\";\n  @Prop() pageLabel?: string = \"out of\";\n  @Prop() prevButtonLabel?: string = \"Prev\";\n  @Prop() label!: string;\n  @Prop() page!: number;\n  @Prop() pages!: number;\n  @Prop() pageSelectLabel?: string = \"Select a page\";\n  @Prop() variant?: FlipPaginationVariant = \"default\";\n\n  @Event() setPage: EventEmitter<number>;\n\n  private onPrevButtonClick = () => {\n    const prevPage = Math.max(this.page - 1, 1);\n\n    if (this.page === prevPage) {\n      return;\n    }\n\n    this.setPage.emit(prevPage);\n  };\n\n  private onNextButtonClick = () => {\n    const nextPage = Math.min(this.page + 1, this.pages);\n\n    if (this.page === nextPage) {\n      return;\n    }\n\n    this.setPage.emit(nextPage);\n  };\n\n  private onSelect = (event: Event) => {\n    const page = +(event.target as HTMLSelectElement).value;\n\n    if (this.page === page) {\n      return;\n    }\n\n    this.setPage.emit(page);\n  };\n\n  render() {\n    const hideButtonLabels = this.variant !== \"advanced\";\n    const showPageLabel = this.variant !== \"simple\";\n    const showDropDown = this.variant === \"advanced\";\n\n    const ariaPageLabel = `${this.page} ${this.pageLabel} ${this.pages}`;\n\n    const className = classnames(\n      \"pagination\",\n      `pagination--variant-${this.variant}`\n    );\n\n    return (\n      <Host>\n        <nav aria-label={this.label} class={className}>\n          <ul class=\"pagination__list\">\n            <li class=\"pagination__list-item\">\n              <flip-button\n                class=\"pagination__prev-button\"\n                disabled={this.page <= 1}\n                flipAriaLabel={this.accessiblePrevButtonLabel}\n                hideLabel={hideButtonLabels}\n                icon=\"<flip-icon-chevron-left></flip-icon-chevron-left>\"\n                intent=\"primary\"\n                label={this.prevButtonLabel}\n                onClick={this.onPrevButtonClick}\n              ></flip-button>\n            </li>\n            {showPageLabel ? (\n              <li class=\"pagination__list-item\">\n                <span>\n                  {showDropDown ? (\n                    <span\n                      aria-current=\"page\"\n                      class=\"pagination__advanced-label\"\n                    >\n                      <span class=\"pagination__page-select-container\">\n                        <select\n                          aria-label={this.pageSelectLabel}\n                          class=\"pagination__page-select\"\n                          onChange={this.onSelect}\n                        >\n                          {new Array(this.pages)\n                            .fill(undefined)\n                            .map((_, index) => index + 1)\n                            .map((page) => (\n                              <option\n                                selected={this.page === page}\n                                value={String(page)}\n                              >\n                                {page}\n                              </option>\n                            ))}\n                        </select>\n                        <flip-icon-expand-more\n                          aria-hidden=\"true\"\n                          class=\"pagination__page-select-icon\"\n                          size={16}\n                        ></flip-icon-expand-more>\n                      </span>\n                      <span aria-hidden=\"true\">\n                        {this.pageLabel} {this.pages}\n                      </span>\n                    </span>\n                  ) : (\n                    <span aria-current=\"page\">{ariaPageLabel}</span>\n                  )}\n                </span>\n              </li>\n            ) : (\n              <li class=\"pagination__list-item\">\n                <flip-visually-hidden>\n                  <span aria-current=\"page\">{ariaPageLabel}</span>\n                </flip-visually-hidden>\n              </li>\n            )}\n            <li class=\"pagination__list-item\">\n              <flip-button\n                class=\"pagination__next-button\"\n                disabled={this.page >= this.pages}\n                flipAriaLabel={this.accessibleNextButtonLabel}\n                hideLabel={hideButtonLabels}\n                icon=\"<flip-icon-chevron-right></flip-icon-chevron-right>\"\n                iconPosition=\"end\"\n                intent=\"primary\"\n                label={this.nextButtonLabel}\n                onClick={this.onNextButtonClick}\n              ></flip-button>\n            </li>\n          </ul>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/flip-progress-indicator.entry.js

@@ -0,0 +1,27 @@
+import { r as registerInstance, h, H as Host } from './index-5a3b2828.js';
+import { c as classnames } from './index-6d2e18c6.js';
+import './_commonjsHelpers-44457d8d.js';
+
+const flipProgressIndicatorCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}:host(.circle){display:inline-flex;width:auto}.progress-indicator--variant-bar{display:block;width:100%;height:0.25rem;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.progress-indicator--variant-bar::-webkit-progress-bar{border-radius:0.125rem;background-color:var(--s-surface-raised-default)}.progress-indicator--variant-bar::-webkit-progress-value{border-radius:0.125rem;background-color:var(--s-surface-highlight-default);-webkit-transition:width 0.25s;transition:width 0.25s}.progress-indicator--variant-bar::-moz-progress-bar{height:0.25rem;border-radius:0.125rem;background-color:var(--s-surface-highlight-default);-moz-transition:width 0.25s;transition:width 0.25s}@media (prefers-reduced-motion){.progress-indicator--variant-bar::-moz-progress-bar{-moz-transition:none;transition:none}}.progress-indicator--variant-bar.progress-indicator--size-s{height:0.125rem}.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-bar{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-value{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-s::-moz-progress-bar{height:0.125rem;border-radius:0.0625rem}.progress-indicator--variant-circle{position:relative;display:inline-flex;overflow:hidden;width:3rem;height:3rem}.progress-indicator--variant-circle.progress-indicator--size-s{width:1.5rem;height:1.5rem}.progress-indicator__circle{position:absolute;width:100%;height:100%;transform:rotate(-90deg);inset:0}.progress-indicator__circle-background{stroke:var(--s-border-default);stroke-linecap:round}.progress-indicator__circle-value{transition:stroke-dashoffset 0.25s;stroke:var(--s-interactive-primary-default);stroke-linecap:round}@media (prefers-reduced-motion){.progress-indicator__circle-value{transition:none}}";
+
+const FlipProgressIndicator = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.size = "m";
+    this.value = 0;
+    this.variant = "bar";
+  }
+  render() {
+    const className = classnames("progress-indicator", `progress-indicator--size-${this.size}`, `progress-indicator--variant-${this.variant}`);
+    const strokeWidth = this.size === "m" ? 4 : 2;
+    const radius = this.size === "m" ? 20 : 10;
+    const circumference = Math.round(radius * 2 * Math.PI);
+    const dashOffset = Math.round(circumference * ((100 - this.value) / 100));
+    return (h(Host, { class: this.variant }, this.variant === "bar" && (h("progress", { "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className, max: 100, value: this.value })), this.variant === "circle" && (h("span", { role: "progressbar", "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className }, h("svg", { class: "progress-indicator__circle", focusable: "false", viewBox: `0 0 ${(radius + strokeWidth) * 2} ${(radius + strokeWidth) * 2}` }, h("circle", { class: "progress-indicator__circle-background", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth }), h("circle", { class: "progress-indicator__circle-value", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth, "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))))));
+  }
+};
+FlipProgressIndicator.style = flipProgressIndicatorCss;
+
+export { FlipProgressIndicator as flip_progress_indicator };
+
+//# sourceMappingURL=flip-progress-indicator.entry.js.map

package/dist/esm/flip-progress-indicator.entry.js.map

@@ -0,0 +1 @@
+{"file":"flip-progress-indicator.entry.js","mappings":";;;;AAAA,MAAM,wBAAwB,GAAG,i3DAAi3D;;MCYr4D,qBAAqB;EALlC;;IAOU,SAAI,GAA+B,GAAG,CAAC;IACvC,UAAK,GAAY,CAAC,CAAC;IACnB,YAAO,GAAkC,KAAK,CAAC;GAmExD;EAjEC,MAAM;IACJ,MAAM,SAAS,GAAG,UAAU,CAC1B,oBAAoB,EACpB,4BAA4B,IAAI,CAAC,IAAI,EAAE,EACvC,+BAA+B,IAAI,CAAC,OAAO,EAAE,CAC9C,CAAC;IAEF,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;IAC9C,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,EAAE,GAAG,EAAE,CAAC;IAC3C,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC;IACvD,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,CAAC,CAAC;IAE1E,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,OAAO,IACtB,IAAI,CAAC,OAAO,KAAK,KAAK,KACrB,8BACc,IAAI,CAAC,KAAK,mBACP,GAAG,mBACH,CAAC,mBACD,IAAI,CAAC,KAAK,EACzB,KAAK,EAAE,SAAS,EAChB,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,IAAI,CAAC,KAAK,GACP,CACb,EACA,IAAI,CAAC,OAAO,KAAK,QAAQ,KACxB,YACE,IAAI,EAAC,aAAa,gBACN,IAAI,CAAC,KAAK,mBACP,GAAG,mBACH,CAAC,mBACD,IAAI,CAAC,KAAK,EACzB,KAAK,EAAE,SAAS,IAEhB,WACE,KAAK,EAAC,4BAA4B,EAClC,SAAS,EAAC,OAAO,EACjB,OAAO,EAAE,OAAO,CAAC,MAAM,GAAG,WAAW,IAAI,CAAC,IACxC,CAAC,MAAM,GAAG,WAAW,IAAI,CAC3B,EAAE,IAEF,cACE,KAAK,EAAC,uCAAuC,EAC7C,EAAE,EAAE,MAAM,GAAG,WAAW,EACxB,EAAE,EAAE,MAAM,GAAG,WAAW,EACxB,CAAC,EAAE,MAAM,EACT,IAAI,EAAC,MAAM,kBACG,WAAW,GACzB,EACF,cACE,KAAK,EAAC,kCAAkC,EACxC,EAAE,EAAE,MAAM,GAAG,WAAW,EACxB,EAAE,EAAE,MAAM,GAAG,WAAW,EACxB,CAAC,EAAE,MAAM,EACT,IAAI,EAAC,MAAM,kBACG,WAAW,sBACP,aAAa,uBACZ,UAAU,GAC7B,CACE,CACD,CACR,CACI,EACP;GACH;;;;;;","names":[],"sources":["./src/components/flip-progress-indicator/flip-progress-indicator.css?tag=flip-progress-indicator&encapsulation=shadow","./src/components/flip-progress-indicator/flip-progress-indicator.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n:host(.circle) {\n  display: inline-flex;\n  width: auto;\n}\n\n.progress-indicator {\n}\n\n.progress-indicator--variant-bar {\n  display: block;\n  width: 100%;\n  height: 0.25rem;\n  border: none;\n  appearance: none;\n\n  &::-webkit-progress-bar {\n    border-radius: 0.125rem;\n    background-color: var(--s-surface-raised-default);\n  }\n\n  &::-webkit-progress-value {\n    border-radius: 0.125rem;\n    background-color: var(--s-surface-highlight-default);\n    transition: width 0.25s;\n  }\n\n  &::-moz-progress-bar {\n    height: 0.25rem;\n    border-radius: 0.125rem;\n    background-color: var(--s-surface-highlight-default);\n    transition: width 0.25s;\n\n    @media (prefers-reduced-motion) {\n      transition: none;\n    }\n  }\n\n  &.progress-indicator--size-s {\n    height: 0.125rem;\n\n    &::-webkit-progress-bar {\n      border-radius: 0.0625rem;\n    }\n\n    &::-webkit-progress-value {\n      border-radius: 0.0625rem;\n    }\n\n    &::-moz-progress-bar {\n      height: 0.125rem;\n      border-radius: 0.0625rem;\n    }\n  }\n}\n\n.progress-indicator--variant-circle {\n  position: relative;\n  display: inline-flex;\n  overflow: hidden;\n  width: 3rem;\n  height: 3rem;\n\n  &.progress-indicator--size-s {\n    width: 1.5rem;\n    height: 1.5rem;\n  }\n}\n\n.progress-indicator__circle {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  transform: rotate(-90deg);\n  inset: 0;\n}\n\n.progress-indicator__circle-background {\n  stroke: var(--s-border-default);\n  stroke-linecap: round;\n}\n\n.progress-indicator__circle-value {\n  transition: stroke-dashoffset 0.25s;\n  stroke: var(--s-interactive-primary-default);\n  stroke-linecap: round;\n\n  @media (prefers-reduced-motion) {\n    transition: none;\n  }\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipProgressIndicatorSize = \"s\" | \"m\";\n\nexport type FlipProgressIndicatorVariant = \"bar\" | \"circle\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-progress-indicator.css\",\n  tag: \"flip-progress-indicator\",\n})\nexport class FlipProgressIndicator {\n  @Prop() label!: string;\n  @Prop() size?: FlipProgressIndicatorSize = \"m\";\n  @Prop() value?: number = 0;\n  @Prop() variant?: FlipProgressIndicatorVariant = \"bar\";\n\n  render() {\n    const className = classnames(\n      \"progress-indicator\",\n      `progress-indicator--size-${this.size}`,\n      `progress-indicator--variant-${this.variant}`\n    );\n\n    const strokeWidth = this.size === \"m\" ? 4 : 2;\n    const radius = this.size === \"m\" ? 20 : 10;\n    const circumference = Math.round(radius * 2 * Math.PI);\n    const dashOffset = Math.round(circumference * ((100 - this.value) / 100));\n\n    return (\n      <Host class={this.variant}>\n        {this.variant === \"bar\" && (\n          <progress\n            aria-label={this.label}\n            aria-valuemax={100}\n            aria-valuemin={0}\n            aria-valuenow={this.value}\n            class={className}\n            max={100}\n            value={this.value}\n          ></progress>\n        )}\n        {this.variant === \"circle\" && (\n          <span\n            role=\"progressbar\"\n            aria-label={this.label}\n            aria-valuemax={100}\n            aria-valuemin={0}\n            aria-valuenow={this.value}\n            class={className}\n          >\n            <svg\n              class=\"progress-indicator__circle\"\n              focusable=\"false\"\n              viewBox={`0 0 ${(radius + strokeWidth) * 2} ${\n                (radius + strokeWidth) * 2\n              }`}\n            >\n              <circle\n                class=\"progress-indicator__circle-background\"\n                cx={radius + strokeWidth}\n                cy={radius + strokeWidth}\n                r={radius}\n                fill=\"none\"\n                stroke-width={strokeWidth}\n              />\n              <circle\n                class=\"progress-indicator__circle-value\"\n                cx={radius + strokeWidth}\n                cy={radius + strokeWidth}\n                r={radius}\n                fill=\"none\"\n                stroke-width={strokeWidth}\n                stroke-dasharray={circumference}\n                stroke-dashoffset={dashOffset}\n              />\n            </svg>\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/flip-radio-group.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-36517fab.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5a3b2828.js';
 
 const flipRadioGroupCss = ".sc-flip-radio-group-h{display:block}.sc-flip-radio-group-h *.sc-flip-radio-group{box-sizing:border-box}.radio-group.sc-flip-radio-group{display:flex;flex-direction:column;gap:var(--s-space-4)}";
 
@@ -27,6 +27,7 @@ const FlipRadioGroup = class {
       radio.addEventListener("valueChange", () => {
         if (radio.checked === true || radio.checked === "true") {
           this.valueChange.emit(radio.value);
+          this.value = radio.value;
           this.radioButtons.forEach((r, k) => {
             if (String(k) === key) {
               return;
@@ -38,10 +39,12 @@ const FlipRadioGroup = class {
     }
   }
   render() {
-    return (h(Host, { role: "radiogroup" }, h("div", { class: "radio-group" }, h("slot", null))));
+    return (h(Host, { "aria-describedby": this.flipAriaDescribedby, role: "radiogroup" }, h("div", { class: "radio-group" }, h("slot", null))));
   }
   get el() { return getElement(this); }
 };
 FlipRadioGroup.style = flipRadioGroupCss;
 
 export { FlipRadioGroup as flip_radio_group };
+
+//# sourceMappingURL=flip-radio-group.entry.js.map

package/dist/esm/flip-radio-group.entry.js.map

@@ -0,0 +1 @@
+{"file":"flip-radio-group.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,mMAAmM;;MCsBhN,cAAc;;;;;EAUzB,gBAAgB;IACd,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC,CAAC;IACvE,IAAI,CAAC,SAAS,EAAE,CAAC;IACjB,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAEO,SAAS;IACf,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;MAC5B,OAAO;KACR;IAED,MAAM,cAAc,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAC3C,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CACtC,CAAC;IAEF,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE;MAC5B,OAAO;KACR;IAED,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC;GAC/B;EAEO,kBAAkB;IACxB,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE;MAC5D,KAAK,CAAC,gBAAgB,CAAC,aAAa,EAAE;QACpC,IAAI,KAAK,CAAC,OAAO,KAAK,IAAI,IAAI,KAAK,CAAC,OAAO,KAAK,MAAM,EAAE;UACtD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;UACnC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;UAEzB,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;YAC7B,IAAI,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE;cACrB,OAAO;aACR;YAED,CAAC,CAAC,OAAO,GAAG,KAAK,CAAC;WACnB,CAAC,CAAC;SACJ;OACF,CAAC,CAAC;KACJ;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,wBAAmB,IAAI,CAAC,mBAAmB,EAAE,IAAI,EAAC,YAAY,IACjE,WAAK,KAAK,EAAC,aAAa,IACtB,eAAa,CACT,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/flip-radio-group/flip-radio-group.css?tag=flip-radio-group&encapsulation=scoped","./src/components/flip-radio-group/flip-radio-group.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.radio-group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-space-4);\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from \"@stencil/core\";\n\n@Component({\n  /**\n   * Form controls in shadow dom can still not be associated with labels in the\n   * light dom, cross browser. So for now we disable shadow dom for form\n   * controls (inputs, buttons, selects, etc.). Instead we use Stencil's scoping.\n   * https://caniuse.com/?search=attachInternals\n   */\n  scoped: true,\n  shadow: false,\n  styleUrl: \"flip-radio-group.css\",\n  tag: \"flip-radio-group\",\n})\nexport class FlipRadioGroup {\n  @Element() el: HTMLElement;\n\n  @Prop() flipAriaDescribedby?: string;\n  @Prop({ mutable: true, reflect: true }) value?: string;\n\n  @Event() valueChange: EventEmitter<string>;\n\n  private radioButtons: HTMLFlipRadioElement[];\n\n  componentDidLoad() {\n    this.radioButtons = Array.from(this.el.querySelectorAll(\"flip-radio\"));\n    this.initValue();\n    this.handleValueChanges();\n  }\n\n  private initValue() {\n    if (this.value === undefined) {\n      return;\n    }\n\n    const radioWithValue = this.radioButtons.find(\n      (radio) => radio.value === this.value\n    );\n\n    if (!Boolean(radioWithValue)) {\n      return;\n    }\n\n    radioWithValue.checked = true;\n  }\n\n  private handleValueChanges() {\n    for (const [key, radio] of Object.entries(this.radioButtons)) {\n      radio.addEventListener(\"valueChange\", () => {\n        if (radio.checked === true || radio.checked === \"true\") {\n          this.valueChange.emit(radio.value);\n          this.value = radio.value;\n\n          this.radioButtons.forEach((r, k) => {\n            if (String(k) === key) {\n              return;\n            }\n\n            r.checked = false;\n          });\n        }\n      });\n    }\n  }\n\n  render() {\n    return (\n      <Host aria-describedby={this.flipAriaDescribedby} role=\"radiogroup\">\n        <div class=\"radio-group\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/flip-radio.entry.js

@@ -1,5 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-36517fab.js';
-import { c as classnames } from './index-3c78bcaf.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-5a3b2828.js';
+import { c as classnames } from './index-6d2e18c6.js';
+import './_commonjsHelpers-44457d8d.js';
 
 const flipRadioCss = ".sc-flip-radio-h{display:inline-flex}.sc-flip-radio-h *.sc-flip-radio{box-sizing:border-box}.radio.sc-flip-radio{display:inline-flex;cursor:pointer;line-height:var(--s-line-height-base)}.radio.sc-flip-radio:focus-within .radio__box.sc-flip-radio{box-shadow:0 0 0 0.0625rem var(--s-background-default),\n      0 0 0 0.1875rem var(--s-focus-default)}.radio--checked.sc-flip-radio .radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.radio--checked.sc-flip-radio .radio__box.sc-flip-radio{position:relative;border-color:var(--s-icon-highlight);background-color:var(--s-icon-highlight)}.radio--checked.sc-flip-radio .radio__box.sc-flip-radio:after{position:absolute;top:50%;left:50%;width:0.5rem;height:0.5rem;border-radius:50%;background-color:var(--s-background-default);content:\"\";transform:translate3d(-50%, -50%, 0)}.radio--invalid.radio--checked.sc-flip-radio .radio__box.sc-flip-radio,.radio--invalid.radio--indeterminate.sc-flip-radio .radio__box.sc-flip-radio{background-color:var(--s-icon-critical)}.radio--invalid.sc-flip-radio .radio__box.sc-flip-radio{border-color:var(--s-icon-critical)}.radio--disabled.sc-flip-radio{cursor:default}.radio--disabled.radio--checked.sc-flip-radio .radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{border-color:var(--s-icon-disabled);background-color:transparent}.radio--disabled.radio--checked.sc-flip-radio .radio__box.sc-flip-radio{border-color:var(--s-icon-disabled);background-color:var(--s-background-default)}.radio--disabled.radio--checked.sc-flip-radio .radio__box.sc-flip-radio:after{background-color:var(--s-icon-disabled)}.radio--disabled.sc-flip-radio .radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{background-color:transparent}.radio--disabled.sc-flip-radio .radio__box.sc-flip-radio{border-color:var(--s-icon-disabled);backround-color:var(--s-icon-disabled)}.radio--disabled.sc-flip-radio .radio__description.sc-flip-radio,.radio--disabled.sc-flip-radio .radio__label.sc-flip-radio{color:var(--s-text-disabled)}.radio__control.sc-flip-radio{position:relative;display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{background-color:var(--s-action-neutral-hovered)}.radio__box.sc-flip-radio{position:relative;display:flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:50%}.radio__label-container.sc-flip-radio{display:inline-flex;margin-left:var(--s-space-12);padding-top:var(--s-space-2);flex-direction:column}.radio__label.sc-flip-radio{font-weight:var(--s-font-weight-medium)}.radio__description.sc-flip-radio{color:var(--s-text-subdued)}";
 
@@ -31,3 +32,5 @@ const FlipRadio = class {
 FlipRadio.style = flipRadioCss;
 
 export { FlipRadio as flip_radio };
+
+//# sourceMappingURL=flip-radio.entry.js.map

package/dist/esm/flip-radio.entry.js.map

@@ -0,0 +1 @@
+{"file":"flip-radio.entry.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,0vFAA0vF;;MCiBlwF,SAAS;EAZtB;;;IAa2B,YAAO,GAAoB,KAAK,CAAC;IAElD,aAAQ,GAAa,KAAK,CAAC;IAS3B,aAAQ,GAAG;MACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;MACpB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACnC,CAAC;GA8CH;EA5CC,MAAM;IACJ,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,KAAK,KAAK,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,CAAC;IACrE,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,KAAK,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC;IAEjE,MAAM,gBAAgB,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;IAC1E,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC;IAEjC,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,EAAE;MACpC,gBAAgB,EAAE,OAAO;MACzB,iBAAiB,EAAE,IAAI,CAAC,QAAQ;MAChC,gBAAgB,EAAE,IAAI,CAAC,OAAO;MAC9B,kBAAkB,EAAE,SAAS;KAC9B,CAAC,CAAC;IAEH,QACE,EAAC,IAAI,QACH,aAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IAC5C,YAAM,KAAK,EAAC,gBAAgB,IAC1B,gCACE,6BACgB,gBAAgB,kBAChB,WAAW,EACzB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAC,cAAc,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,CACmB,EACvB,2BAAkB,MAAM,EAAC,KAAK,EAAC,YAAY,GAAQ,CAC9C,EACP,YAAM,KAAK,EAAC,wBAAwB,IACjC,IAAI,CAAC,KAAK,IAAI,YAAM,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC5D,IAAI,CAAC,WAAW,KACf,YAAM,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC3D,CACI,CACD,CACH,EACP;GACH;;;;;;","names":[],"sources":["./src/components/flip-radio/flip-radio.css?tag=flip-radio&encapsulation=scoped","./src/components/flip-radio/flip-radio.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.radio {\n  display: inline-flex;\n  cursor: pointer;\n  line-height: var(--s-line-height-base);\n\n  &:focus-within .radio__box {\n    box-shadow: 0 0 0 0.0625rem var(--s-background-default),\n      0 0 0 0.1875rem var(--s-focus-default);\n  }\n}\n\n.radio--checked {\n  & .radio__control {\n    &:hover {\n      & .radio__box {\n        border-color: var(--s-interactive-primary-hovered);\n        background-color: var(--s-interactive-primary-hovered);\n      }\n    }\n  }\n\n  & .radio__box {\n    position: relative;\n    border-color: var(--s-icon-highlight);\n    background-color: var(--s-icon-highlight);\n\n    &:after {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      width: 0.5rem;\n      height: 0.5rem;\n      border-radius: 50%;\n      background-color: var(--s-background-default);\n      content: \"\";\n      transform: translate3d(-50%, -50%, 0);\n    }\n  }\n}\n\n.radio--invalid {\n  &.radio--checked,\n  &.radio--indeterminate {\n    & .radio__box {\n      background-color: var(--s-icon-critical);\n    }\n  }\n\n  & .radio__box {\n    border-color: var(--s-icon-critical);\n  }\n}\n\n.radio--disabled {\n  cursor: default;\n\n  &.radio--checked {\n    & .radio__control {\n      &:hover {\n        & .radio__box {\n          border-color: var(--s-icon-disabled);\n          background-color: transparent;\n        }\n      }\n    }\n\n    & .radio__box {\n      border-color: var(--s-icon-disabled);\n      background-color: var(--s-background-default);\n\n      &:after {\n        background-color: var(--s-icon-disabled);\n      }\n    }\n  }\n\n  & .radio__control {\n    &:hover {\n      & .radio__box {\n        background-color: transparent;\n      }\n    }\n  }\n\n  & .radio__box {\n    border-color: var(--s-icon-disabled);\n    backround-color: var(--s-icon-disabled);\n  }\n\n  & .radio__description,\n  & .radio__label {\n    color: var(--s-text-disabled);\n  }\n}\n\n.radio__control {\n  position: relative;\n  display: inline-flex;\n  width: 1.5rem;\n  height: 1.5rem;\n  padding: var(--s-space-2);\n  flex-shrink: 0;\n\n  &:hover {\n    & .radio__box {\n      background-color: var(--s-action-neutral-hovered);\n    }\n  }\n}\n\n.radio__box {\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n  border: 0.125rem solid var(--s-icon-default);\n  border-radius: 50%;\n}\n\n.radio__label-container {\n  display: inline-flex;\n  margin-left: var(--s-space-12);\n  padding-top: var(--s-space-2);\n  flex-direction: column;\n}\n\n.radio__label {\n  font-weight: var(--s-font-weight-medium);\n}\n\n.radio__description {\n  color: var(--s-text-subdued);\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipRadioState = boolean | \"true\" | \"false\";\n\n@Component({\n  /**\n   * Form controls in shadow dom can still not be associated with labels in the\n   * light dom, cross browser. So for now we disable shadow dom for form\n   * controls (inputs, buttons, selects, etc.). Instead we use Stencil's scoping.\n   * https://caniuse.com/?search=attachInternals\n   */\n  scoped: true,\n  shadow: false,\n  styleUrl: \"flip-radio.css\",\n  tag: \"flip-radio\",\n})\nexport class FlipRadio {\n  @Prop({ mutable: true }) checked?: FlipRadioState = false;\n  @Prop() description?: string;\n  @Prop() disabled?: boolean = false;\n  @Prop() inputId!: string;\n  @Prop() inputName!: string;\n  @Prop() invalid?: boolean;\n  @Prop() label?: string;\n  @Prop() value!: string;\n\n  @Event() valueChange: EventEmitter<string>;\n\n  private onChange = () => {\n    this.checked = true;\n    this.valueChange.emit(this.value);\n  };\n\n  render() {\n    const unchecked = this.checked === false || this.checked === \"false\";\n    const checked = this.checked === true || this.checked === \"true\";\n\n    const ariaCheckedLabel = checked ? \"true\" : unchecked ? \"false\" : \"mixed\";\n    const ariaInvalid = this.invalid;\n\n    const className = classnames(\"radio\", {\n      \"radio--checked\": checked,\n      \"radio--disabled\": this.disabled,\n      \"radio--invalid\": this.invalid,\n      \"radio--unchecked\": unchecked,\n    });\n\n    return (\n      <Host>\n        <label class={className} htmlFor={this.inputId}>\n          <span class=\"radio__control\">\n            <flip-visually-hidden>\n              <input\n                aria-checked={ariaCheckedLabel}\n                aria-invalid={ariaInvalid}\n                checked={checked}\n                class=\"radio__input\"\n                disabled={this.disabled}\n                id={this.inputId}\n                name={this.inputName}\n                onChange={this.onChange}\n                type=\"radio\"\n                value={this.value}\n              />\n            </flip-visually-hidden>\n            <span aria-hidden=\"true\" class=\"radio__box\"></span>\n          </span>\n          <span class=\"radio__label-container\">\n            {this.label && <span class=\"radio__label\">{this.label}</span>}\n            {this.description && (\n              <span class=\"radio__description\">{this.description}</span>\n            )}\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/flip-resource-list-file-item.entry.js

@@ -0,0 +1,29 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-5a3b2828.js';
+import { c as classnames } from './index-6d2e18c6.js';
+import './_commonjsHelpers-44457d8d.js';
+
+const flipResourceListFileItemCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-file-item{position:relative;display:flex;width:100%;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-background-default);line-height:var(--s-line-height-base);gap:var(--s-space-12)}.resource-list-file-item:focus{background-color:var(--s-background-hovered);outline:none}.resource-list-file-item--has-control .resource-list-file-item__label-container{padding-right:calc(var(--s-space-12) + 2.5rem)}.resource-list-file-item__icon{color:var(--s-icon-highlight)}.resource-list-file-item__label-container{position:relative;display:flex;min-width:0;min-height:2.875rem;flex-grow:1;justify-content:center;flex-direction:column}.resource-list-file-item__label-container:after{position:absolute;right:0;bottom:calc(-1 * var(--s-space-12));left:0;height:0.0625rem;background-color:var(--s-border-default);content:\"\"}.resource-list-file-item__label{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__description{overflow:hidden;margin-top:var(--s-space-2);color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__error-message{margin-top:var(--s-space-2)}.resource-list-file-item__remove-button{position:absolute;top:50%;right:var(--s-space-16);display:inline-flex;transform:translateY(-50%)}.resource-list-file-item__spinner{position:absolute;top:50%;right:var(--s-space-24);display:inline-flex;transform:translateY(-50%)}";
+
+const FlipResourceListFileItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.remove = createEvent(this, "remove", 7);
+    this.icon = "<flip-icon-file></flip-icon-file>";
+    this.removeButtonLabel = "Remove file";
+  }
+  render() {
+    const showError = Boolean(this.errorMessage);
+    const showDescription = !showError && Boolean(this.description);
+    const showSpinner = !showError && this.loading;
+    const showRemoveButton = this.removable && !showSpinner;
+    const className = classnames("resource-list-file-item", {
+      "resource-list-file-item--has-control": showSpinner || showRemoveButton,
+    });
+    return (h(Host, { role: "row" }, h("div", { class: className, role: "gridcell" }, h("span", { class: "resource-list-file-item__icon", innerHTML: this.icon }), h("span", { class: "resource-list-file-item__label-container" }, h("span", { class: "resource-list-file-item__label", id: "label" }, this.label), showDescription && (h("span", { class: "resource-list-file-item__description" }, this.description)), showError && (h("span", { "aria-live": "polite", class: "resource-list-file-item__error-message" }, h("flip-inline-error", { message: this.errorMessage, size: "s" })))), showSpinner && (h("span", { class: "resource-list-file-item__spinner" }, h("flip-spinner", { size: "s" }))), showRemoveButton && (h("span", { class: "resource-list-file-item__remove-button" }, h("flip-button", { hideLabel: true, icon: "<flip-icon-close></flip-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))))));
+  }
+};
+FlipResourceListFileItem.style = flipResourceListFileItemCss;
+
+export { FlipResourceListFileItem as flip_resource_list_file_item };
+
+//# sourceMappingURL=flip-resource-list-file-item.entry.js.map

package/dist/esm/flip-resource-list-file-item.entry.js.map

@@ -0,0 +1 @@
+{"file":"flip-resource-list-file-item.entry.js","mappings":";;;;AAAA,MAAM,2BAA2B,GAAG,2kDAA2kD;;MCQlmD,wBAAwB;EALrC;;;IAQU,SAAI,GAAY,mCAAmC,CAAC;IAIpD,sBAAiB,GAAY,aAAa,CAAC;GA6DpD;EAzDC,MAAM;IACJ,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC7C,MAAM,eAAe,GAAG,CAAC,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAChE,MAAM,WAAW,GAAG,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC;IAC/C,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,IAAI,CAAC,WAAW,CAAC;IAExD,MAAM,SAAS,GAAG,UAAU,CAAC,yBAAyB,EAAE;MACtD,sCAAsC,EAAE,WAAW,IAAI,gBAAgB;KACxE,CAAC,CAAC;IAEH,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,KAAK,IACd,WAAK,KAAK,EAAE,SAAS,EAAE,IAAI,EAAC,UAAU,IACpC,YACE,KAAK,EAAC,+BAA+B,EACrC,SAAS,EAAE,IAAI,CAAC,IAAI,GACd,EACR,YAAM,KAAK,EAAC,0CAA0C,IACpD,YAAM,KAAK,EAAC,gCAAgC,EAAC,EAAE,EAAC,OAAO,IACpD,IAAI,CAAC,KAAK,CACN,EACN,eAAe,KACd,YAAM,KAAK,EAAC,sCAAsC,IAC/C,IAAI,CAAC,WAAW,CACZ,CACR,EACA,SAAS,KACR,yBACY,QAAQ,EAClB,KAAK,EAAC,wCAAwC,IAE9C,yBACE,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,IAAI,EAAC,GAAG,GACW,CAChB,CACR,CACI,EACN,WAAW,KACV,YAAM,KAAK,EAAC,kCAAkC,IAC5C,oBAAc,IAAI,EAAC,GAAG,GAAgB,CACjC,CACR,EACA,gBAAgB,KACf,YAAM,KAAK,EAAC,wCAAwC,IAClD,mBACE,SAAS,QACT,IAAI,EAAC,qCAAqC,EAC1C,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAC7B,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,GACZ,CACV,CACR,CACG,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/flip-resource-list-file-item/flip-resource-list-file-item.css?tag=flip-resource-list-file-item&encapsulation=shadow","./src/components/flip-resource-list-file-item/flip-resource-list-file-item.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.resource-list-file-item {\n  position: relative;\n  display: flex;\n  width: 100%;\n  padding: var(--s-space-12) var(--s-space-16);\n  align-items: center;\n  background-color: var(--s-background-default);\n  line-height: var(--s-line-height-base);\n  gap: var(--s-space-12);\n\n  &:focus {\n    background-color: var(--s-background-hovered);\n    outline: none;\n  }\n}\n\n.resource-list-file-item--has-control {\n  & .resource-list-file-item__label-container {\n    padding-right: calc(var(--s-space-12) + 2.5rem);\n  }\n}\n\n.resource-list-file-item__icon {\n  color: var(--s-icon-highlight);\n}\n\n.resource-list-file-item__label-container {\n  position: relative;\n  display: flex;\n  min-width: 0;\n  min-height: 2.875rem;\n  flex-grow: 1;\n  justify-content: center;\n  flex-direction: column;\n\n  &:after {\n    position: absolute;\n    right: 0;\n    bottom: calc(-1 * var(--s-space-12));\n    left: 0;\n    height: 0.0625rem;\n    background-color: var(--s-border-default);\n    content: \"\";\n  }\n}\n\n.resource-list-file-item__label {\n  overflow: hidden;\n  font-weight: var(--s-font-weight-medium);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.resource-list-file-item__description {\n  overflow: hidden;\n  margin-top: var(--s-space-2);\n  color: var(--s-text-subdued);\n  font-size: var(--s-font-size-sm);\n  line-height: var(--s-line-height-sm);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.resource-list-file-item__error-message {\n  margin-top: var(--s-space-2);\n}\n\n.resource-list-file-item__remove-button {\n  position: absolute;\n  top: 50%;\n  right: var(--s-space-16);\n  display: inline-flex;\n  transform: translateY(-50%);\n}\n\n.resource-list-file-item__spinner {\n  position: absolute;\n  top: 50%;\n  right: var(--s-space-24);\n  display: inline-flex;\n  transform: translateY(-50%);\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-resource-list-file-item.css\",\n  tag: \"flip-resource-list-file-item\",\n})\nexport class FlipResourceListFileItem {\n  @Prop() description?: string;\n  @Prop() errorMessage?: string;\n  @Prop() icon?: string = \"<flip-icon-file></flip-icon-file>\";\n  @Prop() label!: string;\n  @Prop() loading: boolean;\n  @Prop() removable?: boolean;\n  @Prop() removeButtonLabel?: string = \"Remove file\";\n\n  @Event() remove: EventEmitter<MouseEvent>;\n\n  render() {\n    const showError = Boolean(this.errorMessage);\n    const showDescription = !showError && Boolean(this.description);\n    const showSpinner = !showError && this.loading;\n    const showRemoveButton = this.removable && !showSpinner;\n\n    const className = classnames(\"resource-list-file-item\", {\n      \"resource-list-file-item--has-control\": showSpinner || showRemoveButton,\n    });\n\n    return (\n      <Host role=\"row\">\n        <div class={className} role=\"gridcell\">\n          <span\n            class=\"resource-list-file-item__icon\"\n            innerHTML={this.icon}\n          ></span>\n          <span class=\"resource-list-file-item__label-container\">\n            <span class=\"resource-list-file-item__label\" id=\"label\">\n              {this.label}\n            </span>\n            {showDescription && (\n              <span class=\"resource-list-file-item__description\">\n                {this.description}\n              </span>\n            )}\n            {showError && (\n              <span\n                aria-live=\"polite\"\n                class=\"resource-list-file-item__error-message\"\n              >\n                <flip-inline-error\n                  message={this.errorMessage}\n                  size=\"s\"\n                ></flip-inline-error>\n              </span>\n            )}\n          </span>\n          {showSpinner && (\n            <span class=\"resource-list-file-item__spinner\">\n              <flip-spinner size=\"s\"></flip-spinner>\n            </span>\n          )}\n          {showRemoveButton && (\n            <span class=\"resource-list-file-item__remove-button\">\n              <flip-button\n                hideLabel\n                icon=\"<flip-icon-close></flip-icon-close>\"\n                label={this.removeButtonLabel}\n                onClick={this.remove.emit}\n              ></flip-button>\n            </span>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/flip-resource-list-item.entry.js

@@ -0,0 +1,72 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5a3b2828.js';
+import { c as classnames } from './index-6d2e18c6.js';
+import './_commonjsHelpers-44457d8d.js';
+
+const flipResourceListItemCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-item{position:relative;width:100%}.resource-list-item--checked .resource-list-item__checkbox{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.resource-list-item--has-menu .resource-list-item__label-container{padding-right:calc(var(--s-space-16) + 2.5rem + var(--s-space-12))}@media (--from-tablet){.resource-list-item--selectable .resource-list-item__content{padding-left:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}}.resource-list-item--selectable .resource-list-item__label-container{padding-right:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}@media (--from-tablet){.resource-list-item--selectable .resource-list-item__label-container{padding-right:var(--s-space-16)}}.resource-list-item--hide-divider .resource-list-item__label-container:after{display:none}.resource-list-item__content{--flip-avatar-group-border-color:var(--s-background-default);--flip-badge-border-color:var(--s-background-default);display:flex;width:100%;padding-top:var(--s-space-12);padding-right:0;padding-bottom:var(--s-space-12);padding-left:var(--s-space-16);align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-background-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;text-decoration:none;cursor:pointer;gap:var(--s-space-12)}.resource-list-item__content:hover:not(:disabled){background-color:var(--s-background-hovered)}.resource-list-item__content:hover:not(:disabled) .resource-list-item__media{--flip-avatar-group-border-color:var(--s-background-hovered);--flip-badge-border-color:var(--s-background-hovered)}.resource-list-item__content:active:not(:disabled){background-color:var(--s-background-pressed)}.resource-list-item__content:active:not(:disabled) .resource-list-item__media{--flip-avatar-group-border-color:var(--s-background-pressed);--flip-badge-border-color:var(--s-background-pressed)}.resource-list-item__content:focus{background-color:var(--s-background-hovered);outline:none}.resource-list-item__content:focus .resource-list-item__media{--flip-avatar-group-border-color:var(--s-background-hovered);--flip-badge-border-color:var(--s-background-hovered)}.resource-list-item__content:disabled{color:var(--s-text-disabled);background-color:var(--s-background-default);cursor:default}.resource-list-item__content:disabled .resource-list-item__description{color:var(--s-text-disabled)}.resource-list-item__media{display:inline-flex}.resource-list-item__label-container{position:relative;display:flex;min-width:0;min-height:2.875rem;padding-right:var(--s-space-16);flex-grow:1;justify-content:center;flex-direction:column}.resource-list-item__label-container:after{position:absolute;right:0;bottom:calc(-1 * var(--s-space-12));left:0;height:0.0625rem;background-color:var(--s-border-default);content:\"\"}.resource-list-item__label{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__description{overflow:hidden;margin-top:var(--s-space-2);color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__menu-trigger{position:absolute;top:50%;right:var(--s-space-16);transform:translateY(-50%)}.resource-list-item__checkbox{position:absolute;top:50%;right:var(--s-space-16);display:flex;width:1.25rem;height:1.25rem;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s);transform:translateY(-50%)}@media (--from-tablet){.resource-list-item__checkbox{right:auto;left:var(--s-space-16)}}.resource-list-item__checkbox-icon{display:inline-flex;width:1.0625rem;height:1.0625rem}.resource-list-item__checkbox-icon>*::part(icon){width:1.0625rem;height:1.0625rem}.resource-list-item__meta{position:absolute;top:calc(var(--s-space-12) + var(--s-space-4));right:var(--s-space-16);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}";
+
+const FlipResourceListItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.valueChange = createEvent(this, "valueChange", 7);
+    this.checked = false;
+    this.menuTriggerLabel = "Options";
+    this.onClick = () => {
+      if (!this.selectable) {
+        return;
+      }
+      this.checked = !this.checked;
+      this.valueChange.emit(this.checked);
+    };
+    this.onMenuTriggerClick = (event) => {
+      if (this.disabled && !Boolean(this.href)) {
+        event.stopPropagation();
+      }
+    };
+  }
+  componentDidLoad() {
+    this.forceAvatarProps();
+    this.forceThumbnailProps();
+  }
+  forceAvatarProps() {
+    const avatarEl = this.el.querySelector("flip-avatar");
+    if (!Boolean(avatarEl)) {
+      return;
+    }
+    avatarEl.removeAttribute("interactive");
+    avatarEl.removeAttribute("show-label");
+    avatarEl.removeAttribute("variant");
+    avatarEl.setAttribute("size", "l");
+  }
+  forceThumbnailProps() {
+    const thumbnailEl = this.el.querySelector("flip-thumbnail");
+    if (!Boolean(thumbnailEl)) {
+      return;
+    }
+    thumbnailEl.setAttribute("format", "landscape");
+    if (!["s", "m"].includes(thumbnailEl.getAttribute("size"))) {
+      thumbnailEl.setAttribute("size", "m");
+    }
+  }
+  render() {
+    const Tag = Boolean(this.href) && !this.selectable ? "a" : "button";
+    const disabled = this.disabled && !Boolean(this.href);
+    const hasMenu = Boolean(this.menuTriggerId);
+    const showMenu = hasMenu && !Boolean(this.meta) && !this.selectable;
+    const showMeta = Boolean(this.meta) && !this.selectable;
+    const ariaChecked = this.selectable ? String(this.checked) : undefined;
+    const role = this.selectable ? "checkbox" : undefined;
+    const className = classnames("resource-list-item", {
+      "resource-list-item--checked": this.checked,
+      "resource-list-item--has-menu": hasMenu,
+      "resource-list-item--hide-divider": this.hideDivider,
+      "resource-list-item--selectable": this.selectable,
+    });
+    return (h(Host, { role: "row" }, h("div", { class: className, role: "gridcell" }, h(Tag, { "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-labelledby": "label", class: "resource-list-item__content", href: this.href, disabled: disabled, onClick: this.onClick, role: role, tabIndex: 0 }, Boolean(this.media) && (h("span", { class: "resource-list-item__media", innerHTML: this.media })), h("span", { class: "resource-list-item__label-container" }, h("span", { class: "resource-list-item__label", id: "label" }, this.label), this.description && (h("span", { class: "resource-list-item__description" }, this.description)))), this.selectable && (h("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { class: "resource-list-item__checkbox-icon" }, this.checked && (h("flip-icon-check-strong", null))))), showMeta && (h("span", { class: "resource-list-item__meta" }, this.meta)), showMenu && (h("flip-button", { "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<flip-icon-more-horizontal></flip-icon-more-horizontal>", id: this.menuTriggerId, intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))));
+  }
+  get el() { return getElement(this); }
+};
+FlipResourceListItem.style = flipResourceListItemCss;
+
+export { FlipResourceListItem as flip_resource_list_item };
+
+//# sourceMappingURL=flip-resource-list-item.entry.js.map

package/dist/esm/flip-resource-list-item.entry.js.map

@@ -0,0 +1 @@
+{"file":"flip-resource-list-item.entry.js","mappings":";;;;AAAA,MAAM,uBAAuB,GAAG,w+HAAw+H;;MCgB3/H,oBAAoB;EALjC;;;IAQ2B,YAAO,GAAa,KAAK,CAAC;IAQ3C,qBAAgB,GAAY,SAAS,CAAC;IAwCtC,YAAO,GAAG;MAChB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;QACpB,OAAO;OACR;MAED,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;MAC7B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACrC,CAAC;IAEM,uBAAkB,GAAG,CAAC,KAAiB;MAC7C,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;QACxC,KAAK,CAAC,eAAe,EAAE,CAAC;OACzB;KACF,CAAC;GAgFH;EA9HC,gBAAgB;IACd,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACxB,IAAI,CAAC,mBAAmB,EAAE,CAAC;GAC5B;EAEO,gBAAgB;IACtB,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IAEtD,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;MACtB,OAAO;KACR;IAED,QAAQ,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;IACxC,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;IACvC,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;IAEpC,QAAQ,CAAC,YAAY,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;GACpC;EAEO,mBAAmB;IACzB,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAE5D,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE;MACzB,OAAO;KACR;IAED,WAAW,CAAC,YAAY,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;IAEhD,IAAI,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,EAAE;MAC1D,WAAW,CAAC,YAAY,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;KACvC;GACF;EAiBD,MAAM;IACJ,MAAM,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,GAAG,GAAG,QAAQ,CAAC;IAEpE,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACtD,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAC5C,MAAM,QAAQ,GAAG,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC;IACpE,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC;IAExD,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC;IACvE,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;IAEtD,MAAM,SAAS,GAAG,UAAU,CAAC,oBAAoB,EAAE;MACjD,6BAA6B,EAAE,IAAI,CAAC,OAAO;MAC3C,8BAA8B,EAAE,OAAO;MACvC,kCAAkC,EAAE,IAAI,CAAC,WAAW;MACpD,gCAAgC,EAAE,IAAI,CAAC,UAAU;KAClD,CAAC,CAAC;IAEH,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,KAAK,IACd,WAAK,KAAK,EAAE,SAAS,EAAE,IAAI,EAAC,UAAU,IACpC,EAAC,GAAG,oBACY,WAAW,mBACV,QAAQ,GAAG,MAAM,GAAG,SAAS,qBAC5B,OAAO,EACvB,KAAK,EAAC,6BAA6B,EACnC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,IAEV,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,KAClB,YACE,KAAK,EAAC,2BAA2B,EACjC,SAAS,EAAE,IAAI,CAAC,KAAK,GACf,CACT,EACD,YAAM,KAAK,EAAC,qCAAqC,IAC/C,YAAM,KAAK,EAAC,2BAA2B,EAAC,EAAE,EAAC,OAAO,IAC/C,IAAI,CAAC,KAAK,CACN,EACN,IAAI,CAAC,WAAW,KACf,YAAM,KAAK,EAAC,iCAAiC,IAC1C,IAAI,CAAC,WAAW,CACZ,CACR,CACI,CACH,EACL,IAAI,CAAC,UAAU,KACd,2BAAkB,MAAM,EAAC,KAAK,EAAC,8BAA8B,IAC3D,YAAM,KAAK,EAAC,mCAAmC,IAC5C,IAAI,CAAC,OAAO,KACX,iCAAiD,CAClD,CACI,CACF,CACR,EACA,QAAQ,KACP,YAAM,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,IAAI,CAAQ,CAC1D,EACA,QAAQ,KACP,oCACiB,QAAQ,GAAG,MAAM,GAAG,SAAS,EAC5C,KAAK,EAAC,kCAAkC,EACxC,QAAQ,EAAE,QAAQ,EAClB,SAAS,QACT,IAAI,EAAC,yDAAyD,EAC9D,EAAE,EAAE,IAAI,CAAC,aAAa,EACtB,MAAM,EAAC,SAAS,EAChB,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAC5B,OAAO,EAAE,IAAI,CAAC,kBAAkB,GACnB,CAChB,CACG,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/flip-resource-list-item/flip-resource-list-item.css?tag=flip-resource-list-item&encapsulation=shadow","./src/components/flip-resource-list-item/flip-resource-list-item.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.resource-list-item {\n  position: relative;\n  width: 100%;\n}\n\n.resource-list-item--checked {\n  & .resource-list-item__checkbox {\n    border-color: var(--s-icon-highlight);\n    color: var(--s-text-on-status);\n    background-color: var(--s-icon-highlight);\n  }\n}\n\n.resource-list-item--has-menu {\n  & .resource-list-item__label-container {\n    padding-right: calc(var(--s-space-16) + 2.5rem + var(--s-space-12));\n  }\n}\n\n.resource-list-item--selectable {\n  & .resource-list-item__content {\n    @media (--from-tablet) {\n      padding-left: calc(var(--s-space-16) + 1.5rem + var(--s-space-12));\n    }\n  }\n\n  & .resource-list-item__label-container {\n    padding-right: calc(var(--s-space-16) + 1.5rem + var(--s-space-12));\n\n    @media (--from-tablet) {\n      padding-right: var(--s-space-16);\n    }\n  }\n}\n\n.resource-list-item--hide-divider {\n  & .resource-list-item__label-container:after {\n    display: none;\n  }\n}\n\n.resource-list-item__content {\n  --flip-avatar-group-border-color: var(--s-background-default);\n  --flip-badge-border-color: var(--s-background-default);\n\n  display: flex;\n  width: 100%;\n  padding-top: var(--s-space-12);\n  padding-right: 0;\n  padding-bottom: var(--s-space-12);\n  padding-left: var(--s-space-16);\n  align-items: center;\n  border: none;\n  color: var(--s-text-default);\n  background-color: var(--s-background-default);\n  font: inherit;\n  line-height: var(--s-line-height-base);\n  text-align: left;\n  text-decoration: none;\n  cursor: pointer;\n  gap: var(--s-space-12);\n\n  &:hover:not(:disabled) {\n    background-color: var(--s-background-hovered);\n\n    & .resource-list-item__media {\n      --flip-avatar-group-border-color: var(--s-background-hovered);\n      --flip-badge-border-color: var(--s-background-hovered);\n    }\n  }\n\n  &:active:not(:disabled) {\n    background-color: var(--s-background-pressed);\n\n    & .resource-list-item__media {\n      --flip-avatar-group-border-color: var(--s-background-pressed);\n      --flip-badge-border-color: var(--s-background-pressed);\n    }\n  }\n\n  &:focus {\n    background-color: var(--s-background-hovered);\n    outline: none;\n\n    & .resource-list-item__media {\n      --flip-avatar-group-border-color: var(--s-background-hovered);\n      --flip-badge-border-color: var(--s-background-hovered);\n    }\n  }\n\n  &:disabled {\n    color: var(--s-text-disabled);\n    background-color: var(--s-background-default);\n    cursor: default;\n\n    & .resource-list-item__description {\n      color: var(--s-text-disabled);\n    }\n  }\n}\n\n.resource-list-item__media {\n  display: inline-flex;\n}\n\n.resource-list-item__label-container {\n  position: relative;\n  display: flex;\n  min-width: 0;\n  min-height: 2.875rem;\n  padding-right: var(--s-space-16);\n  flex-grow: 1;\n  justify-content: center;\n  flex-direction: column;\n\n  &:after {\n    position: absolute;\n    right: 0;\n    bottom: calc(-1 * var(--s-space-12));\n    left: 0;\n    height: 0.0625rem;\n    background-color: var(--s-border-default);\n    content: \"\";\n  }\n}\n\n.resource-list-item__label {\n  overflow: hidden;\n  font-weight: var(--s-font-weight-medium);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.resource-list-item__description {\n  overflow: hidden;\n  margin-top: var(--s-space-2);\n  color: var(--s-text-subdued);\n  font-size: var(--s-font-size-sm);\n  line-height: var(--s-line-height-sm);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.resource-list-item__menu-trigger {\n  position: absolute;\n  top: 50%;\n  right: var(--s-space-16);\n  transform: translateY(-50%);\n}\n\n.resource-list-item__checkbox {\n  position: absolute;\n  top: 50%;\n  right: var(--s-space-16);\n  display: flex;\n  width: 1.25rem;\n  height: 1.25rem;\n  justify-content: center;\n  align-items: center;\n  border: 0.125rem solid var(--s-icon-default);\n  border-radius: var(--s-border-radius-s);\n  transform: translateY(-50%);\n\n  @media (--from-tablet) {\n    right: auto;\n    left: var(--s-space-16);\n  }\n}\n\n.resource-list-item__checkbox-icon {\n  display: inline-flex;\n  width: 1.0625rem;\n  height: 1.0625rem;\n\n  & > *::part(icon) {\n    width: 1.0625rem;\n    height: 1.0625rem;\n  }\n}\n\n.resource-list-item__meta {\n  position: absolute;\n  top: calc(var(--s-space-12) + var(--s-space-4));\n  right: var(--s-space-16);\n  color: var(--s-text-subdued);\n  font-size: var(--s-font-size-sm);\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-resource-list-item.css\",\n  tag: \"flip-resource-list-item\",\n})\nexport class FlipResourceListItem {\n  @Element() el: HTMLElement;\n\n  @Prop({ mutable: true }) checked?: boolean = false;\n  @Prop() description?: string;\n  @Prop() disabled?: boolean;\n  @Prop() hideDivider?: boolean;\n  @Prop() href?: string;\n  @Prop() label!: string;\n  @Prop() media?: string;\n  @Prop() menuTriggerId?: string;\n  @Prop() menuTriggerLabel?: string = \"Options\";\n  @Prop() meta?: string;\n  @Prop() selectable?: boolean;\n  @Prop() value?: string;\n\n  @Event() valueChange: EventEmitter<boolean>;\n\n  componentDidLoad() {\n    this.forceAvatarProps();\n    this.forceThumbnailProps();\n  }\n\n  private forceAvatarProps() {\n    const avatarEl = this.el.querySelector(\"flip-avatar\");\n\n    if (!Boolean(avatarEl)) {\n      return;\n    }\n\n    avatarEl.removeAttribute(\"interactive\");\n    avatarEl.removeAttribute(\"show-label\");\n    avatarEl.removeAttribute(\"variant\");\n\n    avatarEl.setAttribute(\"size\", \"l\");\n  }\n\n  private forceThumbnailProps() {\n    const thumbnailEl = this.el.querySelector(\"flip-thumbnail\");\n\n    if (!Boolean(thumbnailEl)) {\n      return;\n    }\n\n    thumbnailEl.setAttribute(\"format\", \"landscape\");\n\n    if (![\"s\", \"m\"].includes(thumbnailEl.getAttribute(\"size\"))) {\n      thumbnailEl.setAttribute(\"size\", \"m\");\n    }\n  }\n\n  private onClick = () => {\n    if (!this.selectable) {\n      return;\n    }\n\n    this.checked = !this.checked;\n    this.valueChange.emit(this.checked);\n  };\n\n  private onMenuTriggerClick = (event: MouseEvent) => {\n    if (this.disabled && !Boolean(this.href)) {\n      event.stopPropagation();\n    }\n  };\n\n  render() {\n    const Tag = Boolean(this.href) && !this.selectable ? \"a\" : \"button\";\n\n    const disabled = this.disabled && !Boolean(this.href);\n    const hasMenu = Boolean(this.menuTriggerId);\n    const showMenu = hasMenu && !Boolean(this.meta) && !this.selectable;\n    const showMeta = Boolean(this.meta) && !this.selectable;\n\n    const ariaChecked = this.selectable ? String(this.checked) : undefined;\n    const role = this.selectable ? \"checkbox\" : undefined;\n\n    const className = classnames(\"resource-list-item\", {\n      \"resource-list-item--checked\": this.checked,\n      \"resource-list-item--has-menu\": hasMenu,\n      \"resource-list-item--hide-divider\": this.hideDivider,\n      \"resource-list-item--selectable\": this.selectable,\n    });\n\n    return (\n      <Host role=\"row\">\n        <div class={className} role=\"gridcell\">\n          <Tag\n            aria-checked={ariaChecked}\n            aria-disabled={disabled ? \"true\" : undefined}\n            aria-labelledby=\"label\"\n            class=\"resource-list-item__content\"\n            href={this.href}\n            disabled={disabled}\n            onClick={this.onClick}\n            role={role}\n            tabIndex={0}\n          >\n            {Boolean(this.media) && (\n              <span\n                class=\"resource-list-item__media\"\n                innerHTML={this.media}\n              ></span>\n            )}\n            <span class=\"resource-list-item__label-container\">\n              <span class=\"resource-list-item__label\" id=\"label\">\n                {this.label}\n              </span>\n              {this.description && (\n                <span class=\"resource-list-item__description\">\n                  {this.description}\n                </span>\n              )}\n            </span>\n          </Tag>\n          {this.selectable && (\n            <span aria-hidden=\"true\" class=\"resource-list-item__checkbox\">\n              <span class=\"resource-list-item__checkbox-icon\">\n                {this.checked && (\n                  <flip-icon-check-strong></flip-icon-check-strong>\n                )}\n              </span>\n            </span>\n          )}\n          {showMeta && (\n            <span class=\"resource-list-item__meta\">{this.meta}</span>\n          )}\n          {showMenu && (\n            <flip-button\n              aria-disabled={disabled ? \"true\" : undefined}\n              class=\"resource-list-item__menu-trigger\"\n              disabled={disabled}\n              hideLabel\n              icon=\"<flip-icon-more-horizontal></flip-icon-more-horizontal>\"\n              id={this.menuTriggerId}\n              intent=\"primary\"\n              label={this.menuTriggerLabel}\n              onClick={this.onMenuTriggerClick}\n            ></flip-button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}