npm - @getflip/swirl-components - Versions diffs - 0.2.0 → 0.3.0 - Mend

@getflip/swirl-components 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1766) hide show

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

@@ -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 ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"flip-option-list.entry.js","mappings":"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","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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"flip-pagination.entry.js","mappings":"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","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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-64709274.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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -1,5 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-64709274.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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -1,7 +1,8 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-64709274.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 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) + 0.0625rem);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 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) {
@@ -24,3 +25,5 @@ const FlipResourceListFileItem = class {
 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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -1,7 +1,8 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-64709274.js';
-import { c as classnames } from './index-3c78bcaf.js';
+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) + 0.0625rem);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 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) {
@@ -67,3 +68,5 @@ const FlipResourceListItem = class {
 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 ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"flip-resource-list-item.entry.js","mappings":"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","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}

package/dist/esm/flip-resource-list.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-64709274.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-5a3b2828.js';
 const flipResourceListCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}";
@@ -61,3 +61,5 @@ const FlipResourceList = class {
 FlipResourceList.style = flipResourceListCss;
 export { FlipResourceList as flip_resource_list };
+//# sourceMappingURL=flip-resource-list.entry.js.map

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

@@ -0,0 +1 @@

+ {"file":"flip-resource-list.entry.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,+DAA+D;;MCO9E,gBAAgB;EAL7B;;IAUU,iBAAY,GAAG,CAAC,CAAC;IA6CjB,YAAO,GAAG;MAChB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KAC1C,CAAC;IAEM,cAAS,GAAG,CAAC,KAAoB;MACvC,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;QAC7B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;OACpE;WAAM,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE;QAClC,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,MAAM,SAAS,GACb,IAAI,CAAC,YAAY,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;QAE1E,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;OAClC;WAAM,IAAI,KAAK,CAAC,GAAG,KAAK,MAAM,EAAE;QAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC;OAC1B;WAAM,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;QAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;OAC9C;KACF,CAAC;GAgBH;EAlFC,gBAAgB;IACd,IAAI,CAAC,YAAY,EAAE,CAAC;IACpB,IAAI,CAAC,uBAAuB,EAAE,CAAC;GAChC;EAEO,YAAY;IAClB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CACrB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CACtB,uDAAuD,CACxD,CACF,CAAC;GACH;EAEO,uBAAuB;IAC7B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI;;MACtB,OAAA,MAAA,MAAA,IAAI,CAAC,UAAU,0CACX,aAAa,CACb,wDAAwD,CACzD,0CACC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAA;KAAA,CACnC,CAAC;GACH;EAEO,gBAAgB,CAAC,KAAa;IACpC,IAAI,CAAC,uBAAuB,EAAE,CAAC;IAE/B,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAE/B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;MAClB,OAAO;KACR;IAED,MAAM,kBAAkB,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CACtD,wDAAwD,CACzD,CAAC;IAEF,kBAAkB,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;IACjD,kBAAkB,CAAC,KAAK,EAAE,CAAC;IAE3B,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;GAC3B;EA4BD,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,SAAS,EAAE,IAAI,CAAC,SAAS,IAC7B,gCACc,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,CAAC,IAEX,eAAa,CACF,CACR,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/flip-resource-list/flip-resource-list.css?tag=flip-resource-list&encapsulation=shadow","./src/components/flip-resource-list/flip-resource-list.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n\n & * {\n box-sizing: border-box;\n }\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\n@Component({\n shadow: true,\n styleUrl: \"flip-resource-list.css\",\n tag: \"flip-resource-list\",\n})\nexport class FlipResourceList {\n @Element() el: HTMLElement;\n\n @Prop() label?: string;\n\n private focusedIndex = 0;\n private items: HTMLFlipResourceListItemElement[];\n\n componentDidLoad() {\n this.collectItems();\n this.removeItemsFromTabOrder();\n }\n\n private collectItems() {\n this.items = Array.from(\n this.el.querySelectorAll(\n \"flip-resource-list-item, flip-resource-list-file-item\"\n )\n );\n }\n\n private removeItemsFromTabOrder() {\n this.items.forEach((item) =>\n item.shadowRoot\n ?.querySelector(\n \".resource-list-item__content, .resource-list-file-item\"\n )\n ?.setAttribute(\"tabIndex\", \"-1\")\n );\n }\n\n private focusItemAtIndex(index: number) {\n this.removeItemsFromTabOrder();\n\n const item = this.items[index];\n\n if (!Boolean(item)) {\n return;\n }\n\n const interactiveElement = item.shadowRoot.querySelector<HTMLElement>(\n \".resource-list-item__content, .resource-list-file-item\"\n );\n\n interactiveElement.setAttribute(\"tabIndex\", \"0\");\n interactiveElement.focus();\n\n this.focusedIndex = index;\n }\n\n private onFocus = () => {\n this.focusItemAtIndex(this.focusedIndex);\n };\n\n private onKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"ArrowDown\") {\n event.preventDefault();\n this.focusItemAtIndex((this.focusedIndex + 1) % this.items.length);\n } else if (event.key === \"ArrowUp\") {\n event.preventDefault();\n\n const prevIndex =\n this.focusedIndex === 0 ? this.items.length - 1 : this.focusedIndex - 1;\n\n this.focusItemAtIndex(prevIndex);\n } else if (event.key === \"Home\") {\n event.preventDefault();\n\n this.focusItemAtIndex(0);\n } else if (event.key === \"End\") {\n event.preventDefault();\n\n this.focusItemAtIndex(this.items.length - 1);\n }\n };\n\n render() {\n return (\n <Host onKeyDown={this.onKeyDown}>\n <flip-stack\n aria-label={this.label}\n onFocus={this.onFocus}\n role=\"grid\"\n tabIndex={0}\n >\n <slot></slot>\n </flip-stack>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/flip-search.entry.js CHANGED Viewed

@@ -1,5 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-64709274.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 flipSearchCss = ".sc-flip-search-h{display:flex;width:100%}.sc-flip-search-h *.sc-flip-search{box-sizing:border-box}.search.sc-flip-search{position:relative;display:flex;width:100%}.search--disabled.sc-flip-search .search__icon.sc-flip-search{color:var(--s-icon-disabled)}.search--disabled.sc-flip-search .search__input.sc-flip-search{color:var(--s-text-disabled)}.search--disabled.sc-flip-search .search__input.sc-flip-search::-moz-placeholder{color:var(--s-text-disabled)}.search--disabled.sc-flip-search .search__input.sc-flip-search::placeholder{color:var(--s-text-disabled)}.search__icon.sc-flip-search{position:absolute;top:50%;left:var(--s-space-12);display:inline-flex;color:var(--s-icon-default);transform:translateY(-50%)}.search__input.sc-flip-search{width:100%;height:2.5rem;padding-top:var(--s-space-8);padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));padding-bottom:var(--s-space-8);padding-left:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));border:none;border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--s-surface-raised-default);font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.search__input.sc-flip-search:focus{outline-color:var(--s-focus-default)}.search__input.sc-flip-search::-moz-placeholder{color:var(--s-text-subdued)}.search__input.sc-flip-search::placeholder{color:var(--s-text-subdued)}.search__input.sc-flip-search::-webkit-search-decoration,.search__input.sc-flip-search::-webkit-search-cancel-button,.search__input.sc-flip-search::-webkit-search-results-button,.search__input.sc-flip-search::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.search__input.sc-flip-search:not(:-moz-placeholder-shown)+.search__clear-button.sc-flip-search{display:inline-flex}.search__input.sc-flip-search:not(:placeholder-shown)+.search__clear-button.sc-flip-search{display:inline-flex}.search__clear-button.sc-flip-search{position:absolute;top:50%;right:var(--s-space-12);display:none;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer;transform:translateY(-50%)}";
@@ -41,3 +42,5 @@ const FlipSearch = class {
 FlipSearch.style = flipSearchCss;
 export { FlipSearch as flip_search };
+//# sourceMappingURL=flip-search.entry.js.map

package/dist/esm/flip-search.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"flip-search.entry.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,ulEAAulE;;MCuBhmE,UAAU;EAZvB;;;;;IAcU,qBAAgB,GAAY,mBAAmB,CAAC;IAKhD,gBAAW,GAAY,UAAU,CAAC;IAmBlC,UAAK,GAAG;MACd,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;MACtB,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;KACpB,CAAC;IAEM,WAAM,GAAG,CAAC,KAAiB;MACjC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC5B,CAAC;IAEM,aAAQ,GAAG,CAAC,KAAY;MAC9B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAE,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC;KACjE,CAAC;IAEM,YAAO,GAAG,CAAC,KAAiB;MAClC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC7B,CAAC;GA2CH;EAnEC,SAAS,CAAC,KAAoB;IAC5B,IACE,CAAC,KAAK,CAAC,IAAI,KAAK,MAAM,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO;OAC/C,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,EAChC;MACA,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;KACpB;GACF;EAmBD,MAAM;IACJ,MAAM,SAAS,GAAG,UAAU,CAAC,QAAQ,EAAE;MACrC,kBAAkB,EAAE,IAAI,CAAC,QAAQ;KAClC,CAAC,CAAC;IAEH,QACE,EAAC,IAAI,QACH,YAAM,KAAK,EAAE,SAAS,IACpB,wBAAkB,KAAK,EAAC,cAAc,GAAoB,EAC1D,8BACiB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,gBACrC,IAAI,CAAC,KAAK,EACtB,YAAY,EAAC,KAAK,EAClB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAC,eAAe,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,SAAS,EAAC,QAAQ,EAClB,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAC9B,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,EACD,CAAC,IAAI,CAAC,QAAQ,KACb,4BACc,IAAI,CAAC,gBAAgB,EACjC,KAAK,EAAC,sBAAsB,EAC5B,OAAO,EAAE,IAAI,CAAC,KAAK,EACnB,IAAI,EAAC,QAAQ,IAEb,2BAAqC,CAC9B,CACV,CACI,CACF,EACP;GACH;;;;;;","names":[],"sources":["./src/components/flip-search/flip-search.css?tag=flip-search&encapsulation=scoped","./src/components/flip-search/flip-search.tsx"],"sourcesContent":[":host {\n display: flex;\n width: 100%;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.search {\n position: relative;\n display: flex;\n width: 100%;\n}\n\n.search--disabled {\n & .search__icon {\n color: var(--s-icon-disabled);\n }\n\n & .search__input {\n color: var(--s-text-disabled);\n\n &::placeholder {\n color: var(--s-text-disabled);\n }\n }\n}\n\n.search__icon {\n position: absolute;\n top: 50%;\n left: var(--s-space-12);\n display: inline-flex;\n color: var(--s-icon-default);\n transform: translateY(-50%);\n}\n\n.search__input {\n width: 100%;\n height: 2.5rem;\n padding-top: var(--s-space-8);\n padding-right: calc(var(--s-space-12) + 1.5rem + var(--s-space-8));\n padding-bottom: var(--s-space-8);\n padding-left: calc(var(--s-space-12) + 1.5rem + var(--s-space-8));\n border: none;\n border-radius: var(--s-border-radius-base);\n color: var(--s-text-default);\n background-color: var(--s-surface-raised-default);\n font: inherit;\n line-height: var(--s-line-height-base);\n caret-color: var(--s-border-highlight);\n\n &:focus {\n outline-color: var(--s-focus-default);\n }\n\n &::placeholder {\n color: var(--s-text-subdued);\n }\n\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n appearance: none;\n }\n\n &:not(:placeholder-shown) {\n & + .search__clear-button {\n display: inline-flex;\n }\n }\n}\n\n.search__clear-button {\n position: absolute;\n top: 50%;\n right: var(--s-space-12);\n display: none;\n padding: 0;\n border: none;\n color: var(--s-icon-default);\n background-color: transparent;\n cursor: pointer;\n transform: translateY(-50%);\n}\n","import {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\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-search.css\",\n tag: \"flip-search\",\n})\nexport class FlipSearch {\n @Prop() autoFocus?: boolean;\n @Prop() clearButtonLabel?: string = \"Clear search term\";\n @Prop() disabled?: boolean;\n @Prop() inputName?: string;\n @Prop() inputId?: string;\n @Prop() label?: string;\n @Prop() placeholder?: string = \"Search …\";\n @Prop({ mutable: true }) value?: string;\n\n @Event() inputBlur: EventEmitter<FocusEvent>;\n @Event() inputFocus: EventEmitter<FocusEvent>;\n @Event() valueChange: EventEmitter<string>;\n\n private input: HTMLInputElement;\n\n @Listen(\"keydown\", { target: \"window\" })\n onKeyDown(event: KeyboardEvent) {\n if (\n (event.code === \"KeyK\" || event.code === \"Slash\") &&\n (event.ctrlKey || event.metaKey)\n ) {\n this.input.focus();\n }\n }\n\n private clear = () => {\n this.input.value = \"\";\n this.input.focus();\n };\n\n private onBlur = (event: FocusEvent) => {\n this.inputBlur.emit(event);\n };\n\n private onChange = (event: Event) => {\n this.valueChange.emit((event.target as HTMLInputElement).value);\n };\n\n private onFocus = (event: FocusEvent) => {\n this.inputFocus.emit(event);\n };\n\n render() {\n const className = classnames(\"search\", {\n \"search--disabled\": this.disabled,\n });\n\n return (\n <Host>\n <span class={className}>\n <flip-icon-search class=\"search__icon\"></flip-icon-search>\n <input\n aria-disabled={this.disabled ? \"true\" : undefined}\n aria-label={this.label}\n autoComplete=\"off\"\n autoFocus={this.autoFocus}\n class=\"search__input\"\n disabled={this.disabled}\n id={this.inputId}\n inputMode=\"search\"\n name={this.inputName}\n onBlur={this.onBlur}\n onChange={this.onChange}\n onFocus={this.onFocus}\n placeholder={this.placeholder}\n ref={(el) => (this.input = el)}\n type=\"search\"\n value={this.value}\n />\n {!this.disabled && (\n <button\n aria-label={this.clearButtonLabel}\n class=\"search__clear-button\"\n onClick={this.clear}\n type=\"button\"\n >\n <flip-icon-cancel></flip-icon-cancel>\n </button>\n )}\n </span>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/flip-stack.entry.js CHANGED Viewed

@@ -1,5 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-64709274.js';
-import { c as classnames } from './index-3c78bcaf.js';
+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 flipStackCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.stack{display:flex;width:100%;max-width:100%}.stack ::slotted(*){min-width:0;max-width:100%;flex-basis:auto;flex-grow:0;flex-shrink:0}.stack--align-start{align-items:flex-start}.stack--align-center{align-items:center}.stack--align-end{align-items:flex-end}.stack--align-stretch{align-items:stretch}.stack--justify-start{justify-content:flex-start}.stack--justify-center{justify-content:center}.stack--justify-end{justify-content:flex-end}.stack--justify-space-between{justify-content:space-between}.stack--justify-space-around{justify-content:space-around}.stack--justify-space-evenly{justify-content:space-evenly}.stack--justify-stretch{justify-content:stretch}.stack--justify-stretch ::slotted(*){flex-grow:1}.stack--orientation-vertical{flex-direction:column}.stack--orientation-horizontal{flex-direction:row}.stack--wrap{flex-wrap:wrap}";
@@ -22,3 +23,5 @@ const FlipStack = class {
 FlipStack.style = flipStackCss;
 export { FlipStack as flip_stack };
+//# sourceMappingURL=flip-stack.entry.js.map

package/dist/esm/flip-stack.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"flip-stack.entry.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,w4BAAw4B;;MC+Bh5B,SAAS;EALtB;;IAMU,UAAK,GAAoB,OAAO,CAAC;IACjC,OAAE,GAAY,KAAK,CAAC;IACpB,YAAO,GAAsB,OAAO,CAAC;IACrC,gBAAW,GAA0B,UAAU,CAAC;IAChD,YAAO,GAAsB,GAAG,CAAC;IACjC,SAAI,GAAa,KAAK,CAAC;GAwBhC;EAtBC,MAAM;IACJ,MAAM,GAAG,GAAG,IAAI,CAAC,EAAE,CAAC;IAEpB,MAAM,SAAS,GAAG,UAAU,CAC1B,OAAO,EACP,gBAAgB,IAAI,CAAC,KAAK,EAAE,EAC5B,kBAAkB,IAAI,CAAC,OAAO,EAAE,EAChC,sBAAsB,IAAI,CAAC,WAAW,EAAE,EACxC,EAAE,aAAa,EAAE,IAAI,CAAC,IAAI,EAAE,CAC7B,CAAC;IAEF,QACE,EAAC,IAAI,QACH,EAAC,GAAG,IACF,KAAK,EAAE,SAAS,EAChB,KAAK,EAAE,EAAE,GAAG,EAAE,iBAAiB,IAAI,CAAC,OAAO,GAAG,EAAE,IAEhD,eAAa,CACT,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/flip-stack/flip-stack.css?tag=flip-stack&encapsulation=shadow","./src/components/flip-stack/flip-stack.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.stack {\n display: flex;\n width: 100%;\n max-width: 100%;\n\n & ::slotted(*) {\n min-width: 0;\n max-width: 100%;\n flex-basis: auto;\n flex-grow: 0;\n flex-shrink: 0;\n }\n}\n\n.stack--align-start {\n align-items: flex-start;\n}\n\n.stack--align-center {\n align-items: center;\n}\n\n.stack--align-end {\n align-items: flex-end;\n}\n\n.stack--align-stretch {\n align-items: stretch;\n}\n\n.stack--justify-start {\n justify-content: flex-start;\n}\n\n.stack--justify-center {\n justify-content: center;\n}\n\n.stack--justify-end {\n justify-content: flex-end;\n}\n\n.stack--justify-space-between {\n justify-content: space-between;\n}\n\n.stack--justify-space-around {\n justify-content: space-around;\n}\n\n.stack--justify-space-evenly {\n justify-content: space-evenly;\n}\n\n.stack--justify-stretch {\n justify-content: stretch;\n\n & ::slotted(*) {\n flex-grow: 1;\n }\n}\n\n.stack--orientation-vertical {\n flex-direction: column;\n}\n\n.stack--orientation-horizontal {\n flex-direction: row;\n}\n\n.stack--wrap {\n flex-wrap: wrap;\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipStackAlign = \"start\" | \"center\" | \"end\" | \"stretch\";\n\nexport type FlipStackJustify =\n | \"start\"\n | \"center\"\n | \"end\"\n | \"space-between\"\n | \"space-around\"\n | \"space-evenly\"\n | \"stretch\";\n\nexport type FlipStackOrientation = \"horizontal\" | \"vertical\";\n\nexport type FlipStackSpacing =\n | \"0\"\n | \"2\"\n | \"4\"\n | \"8\"\n | \"12\"\n | \"16\"\n | \"24\"\n | \"32\";\n\n@Component({\n shadow: true,\n styleUrl: \"flip-stack.css\",\n tag: \"flip-stack\",\n})\nexport class FlipStack {\n @Prop() align?: FlipStackAlign = \"start\";\n @Prop() as?: string = \"div\";\n @Prop() justify?: FlipStackJustify = \"start\";\n @Prop() orientation?: FlipStackOrientation = \"vertical\";\n @Prop() spacing?: FlipStackSpacing = \"0\";\n @Prop() wrap?: boolean = false;\n\n render() {\n const Tag = this.as;\n\n const className = classnames(\n \"stack\",\n `stack--align-${this.align}`,\n `stack--justify-${this.justify}`,\n `stack--orientation-${this.orientation}`,\n { \"stack--wrap\": this.wrap }\n );\n\n return (\n <Host>\n <Tag\n class={className}\n style={{ gap: `var(--s-space-${this.spacing})` }}\n >\n <slot></slot>\n </Tag>\n </Host>\n );\n }\n}\n"],"version":3}