@getflip/swirl-components-react 0.431.0 → 0.432.0

package/dist/swirl-search.entry.48ed65dd.js

@@ -0,0 +1,51 @@
+import { r as i, c as r, h as a, H as t } from "./index.3a2ee891.js";
+import { c } from "./index-orsBiyT_.fc4357c3.js";
+import { D as h } from "./media-query.service-BSiuFyfW.201120cc.js";
+import "react";
+import "react-dom";
+import "./utils-Dn2SWlGn.dbe5b17a.js";
+const o = ".sc-swirl-search-h{display:flex;width:100%}.sc-swirl-search-h *.sc-swirl-search{box-sizing:border-box}.search.sc-swirl-search{position:relative;display:flex;width:100%}.search--variant-outline.sc-swirl-search .search__input.sc-swirl-search{background-color:transparent;box-shadow:inset 0 0 0 var(--s-border-width-default) var(--s-border-strong)}.search--variant-ghost.sc-swirl-search .search__input.sc-swirl-search{background-color:transparent}.search--disabled.sc-swirl-search .search__icon.sc-swirl-search{color:var(--s-icon-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::placeholder{color:var(--s-text-disabled)}.search__icon.sc-swirl-search{position:absolute;top:50%;left:var(--s-space-12);display:inline-flex;width:1.5rem;height:1.5rem;color:var(--s-icon-default);transform:translateY(-50%)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.search__icon.sc-swirl-search{width:1.25rem;height:1.25rem}}.search__input.sc-swirl-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-swirl-search:focus:not(:focus-visible){outline:none}.search__input.sc-swirl-search:focus-visible{outline-color:var(--s-focus-default)}.search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::-webkit-search-decoration,.search__input.sc-swirl-search::-webkit-search-cancel-button,.search__input.sc-swirl-search::-webkit-search-results-button,.search__input.sc-swirl-search::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.search__input.sc-swirl-search:not(:-moz-placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}.search__input.sc-swirl-search:not(:placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.search__input.sc-swirl-search{height:2.25rem;padding-left:calc(var(--s-space-8) + 1.5rem + var(--s-space-8));font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.search__clear-button.sc-swirl-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%)}", l = class {
+  constructor(e) {
+    i(this, e), this.clear = r(this, "clear", 7), this.inputBlur = r(this, "inputBlur", 7), this.inputFocus = r(this, "inputFocus", 7), this.inputInput = r(this, "inputInput", 7), this.valueChange = r(this, "valueChange", 7), this.clearButtonLabel = "Clear search term", this.placeholder = "Search \u2026", this.variant = "filled", this.clearable = !0, this.mediaQueryUnsubscribe = () => {
+    }, this.handleClear = () => {
+      this.input.value = "", this.input.focus(), this.valueChange.emit(""), this.clear.emit();
+    }, this.onBlur = (s) => {
+      this.inputBlur.emit(s);
+    }, this.onChange = (s) => {
+      this.valueChange.emit(s.target.value);
+    }, this.onFocus = (s) => {
+      this.inputFocus.emit(s);
+    }, this.onInput = (s) => {
+      this.inputInput.emit(s.target.value);
+    };
+  }
+  componentDidLoad() {
+    this.mediaQueryUnsubscribe = h.subscribe((e) => {
+      this.forceIconProps(e);
+    }), this.autoFocus && setTimeout(() => {
+      this.input.focus();
+    });
+  }
+  disconnectedCallback() {
+    this.mediaQueryUnsubscribe();
+  }
+  forceIconProps(e) {
+    if (!Boolean(this.iconEl))
+      return;
+    const s = this.iconEl.children[0];
+    s == null || s.setAttribute("size", e ? "20" : "24");
+  }
+  onKeyDown(e) {
+    (e.code === "KeyK" || e.code === "Slash") && (e.ctrlKey || e.metaKey) && this.input.focus();
+  }
+  render() {
+    const e = c("search", `search--variant-${this.variant}`, {
+      "search--disabled": this.disabled
+    });
+    return a(t, { key: "27da92fda1488c9701c3fa0d6a044c5687220760" }, a("span", { key: "0d50a335824124697cfc2b378040f39a37a77c39", class: e, ref: (s) => this.iconEl = s }, a("swirl-icon-search", { key: "018ada07d234a51e9077328b0d777a79e3654352", "aria-hidden": "true", class: "search__icon" }), a("input", { key: "5910881c3c9922f586e3d5e26ac41836c5d755d3", "aria-disabled": this.disabled ? "true" : void 0, "aria-label": this.label, autoComplete: "off", autoFocus: this.autoFocus, class: "search__input", disabled: this.disabled, id: this.inputId, inputMode: "search", name: this.inputName, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (s) => this.input = s, type: "search", value: this.value }), !this.disabled && this.clearable && a("button", { key: "6d556d5c945c7b2d7a287d0d7a8e028f3e3a147a", "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.handleClear, type: "button" }, a("swirl-icon-cancel", { key: "0999c71c8ee253efd28b64d8c1484f5252fc6f6f" }))));
+  }
+};
+l.style = o;
+export {
+  l as swirl_search
+};

package/dist/swirl-select.entry.28a1bc37.js

@@ -0,0 +1,92 @@
+import { r as d, c as n, h as t, H as p, g as u } from "./index.3a2ee891.js";
+import { c as w } from "./index-orsBiyT_.fc4357c3.js";
+import { q as b } from "./utils-Dn2SWlGn.dbe5b17a.js";
+import "react";
+import "react-dom";
+const f = ".sc-swirl-select-h{display:block;width:100%}.sc-swirl-select-h *.sc-swirl-select{box-sizing:border-box}.select.sc-swirl-select{position:relative;display:flex;width:100%}.select.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:var(--s-space-16)}@media (min-width: 768px){.select.sc-swirl-select .sc-swirl-select::part(popover__scroll-container){padding-top:0}}.select--placement-top-start.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:-2.25rem}.select--multi.sc-swirl-select .select__input.sc-swirl-select{position:absolute;width:100%;height:100%;pointer-events:none;opacity:0}.select--multi.sc-swirl-select .select__multi-select-values.sc-swirl-select{display:flex}.select--disabled.sc-swirl-select .select__input.sc-swirl-select{color:var(--s-text-disabled)}.select--disabled.sc-swirl-select .select__indicator.sc-swirl-select{color:var(--s-icon-disabled)}.select--inline.sc-swirl-select .select__indicator.sc-swirl-select{transform:translateY(-50%)}.select--standalone.sc-swirl-select{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.select--standalone.sc-swirl-select .select__indicator.sc-swirl-select{position:relative;top:auto;right:auto;cursor:pointer;transform:none}.select--standalone.sc-swirl-select .select__input.sc-swirl-select{padding-right:var(--s-space-8);font-weight:var(--s-font-weight-medium);cursor:pointer}.select--standalone.sc-swirl-select .select__value-container.sc-swirl-select{width:-webkit-min-content;width:-moz-min-content;width:min-content}.select--search-loading.sc-swirl-select .select__search-input.sc-swirl-select{padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8))}.select__resize-helper.sc-swirl-select{display:block;width:auto;height:0;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));padding-right:var(--s-space-8);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left;white-space:pre;white-space:pre;vertical-align:top;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;opacity:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__resize-helper.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__input.sc-swirl-select{display:block;overflow:hidden;width:100%;height:1.25rem;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:default}.select__input.sc-swirl-select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__multi-select-values.sc-swirl-select{display:none;overflow:hidden;width:100%;min-height:1.25rem;padding-right:calc(1.5rem + var(--s-space-8));flex-wrap:wrap;flex-shrink:0;gap:var(--s-space-8)}.select__multi-select-values.sc-swirl-select .sc-swirl-select::part(tag){height:1.25rem;padding:0 var(--s-space-4)}.select__indicator.sc-swirl-select{position:absolute;top:50%;right:0;display:inline-flex;color:var(--s-icon-default);transform:translateY(calc(-50% - var(--s-space-8)))}.select__search.sc-swirl-select{position:relative;display:flex;width:100%;padding:0.0625rem var(--s-space-8);border-bottom:0.0625rem solid var(--s-border-default);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.select__search.sc-swirl-select{position:sticky;z-index:1;top:0;padding-top:var(--s-space-8);padding-right:0.0625rem;padding-left:0.0625rem}}.select__search-icon.sc-swirl-select{position:absolute;top:50%;left:calc(var(--s-space-8) * 2);display:inline-flex;color:var(--s-icon-default);transform:translateY(-50%)}@media (min-width: 768px){.select__search-icon.sc-swirl-select{left:var(--s-space-12);margin-top:var(--s-space-4);padding:0.0625rem}}.select__search-input.sc-swirl-select{width:100%;height:2.5rem;padding-right:var(--s-space-12);padding-left:calc(var(--s-space-12) + 1.25rem + var(--s-space-8));align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.select__search-input.sc-swirl-select:focus:not(:focus-visible){outline:none}.select__search-input.sc-swirl-select:focus-visible{outline-color:var(--s-focus-default)}.select__search-input.sc-swirl-select::-moz-placeholder{color:var(--s-text-subdued)}.select__search-input.sc-swirl-select::placeholder{color:var(--s-text-subdued)}.select__search-input.sc-swirl-select::-webkit-search-decoration,.select__search-input.sc-swirl-select::-webkit-search-cancel-button,.select__search-input.sc-swirl-select::-webkit-search-results-button,.select__search-input.sc-swirl-select::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__search-input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__search-spinner.sc-swirl-select{position:absolute;top:50%;right:var(--s-space-12);display:inline-flex;transform:translateY(-50%)}@media (min-width: 768px){.select__search-spinner.sc-swirl-select{margin-top:var(--s-space-4)}}.select__empty-list-label.sc-swirl-select{padding:var(--s-space-12) var(--s-space-12) 0}.select__empty-list-label.sc-swirl-select:not(:only-child){display:none}@media (min-width: 768px){.select__empty-list-label.sc-swirl-select{padding:var(--s-space-12) var(--s-space-12) var(--s-space-8)}}", v = class {
+  constructor(s) {
+    d(this, s), this.searchChange = n(this, "searchChange", 7), this.valueChange = n(this, "valueChange", 7), this.allowDeselect = !0, this.emptyListLabel = "No results found.", this.searchInputLabel = "Search options", this.selectId = Math.round(Math.random() * 1e6).toString(), this.options = [], this.select = (e) => {
+      e.stopPropagation(), this.value = e.detail, this.multiSelect || this.swirlPopover.close();
+    }, this.unselectOption = (e) => {
+      !this.allowDeselect || (this.value = this.value.filter((l) => l !== e));
+    }, this.onSlotChange = () => {
+      this.updateOptions();
+    }, this.onOpen = (e) => {
+      var l, a;
+      this.placement = (l = e.detail.position) == null ? void 0 : l.placement, this.open = !0, this.withSearch && Boolean(this.searchInput) ? this.searchInput.focus() : (a = this.optionList.querySelector('[tabIndex="0"]')) == null || a.focus();
+    }, this.onClose = () => {
+      Boolean(this.searchInput) && (this.searchInput.value = "", this.searchChange.emit("")), this.open = !1, this.input.focus();
+    }, this.onKeyDown = (e) => {
+      var l;
+      if (e.code === "Space" || e.code === "Enter") {
+        if (e.target === this.searchInput)
+          return;
+        e.preventDefault(), this.swirlPopover.open(this.el);
+      } else
+        e.code === "ArrowDown" && e.target === this.searchInput && ((l = this.optionList.querySelector('[tabIndex="0"]')) == null || l.focus());
+    }, this.onSearchInput = (e) => {
+      this.searchChange.emit(e.target.value);
+    };
+  }
+  componentWillLoad() {
+    queueMicrotask(() => {
+      this.updateOptions(), this.observeSlotChanges();
+    });
+  }
+  disconnectedCallback() {
+    var s;
+    (s = this.observer) == null || s.disconnect();
+  }
+  onWindowFocusIn(s) {
+    s.target === this.el.querySelector("input") && s.stopImmediatePropagation();
+  }
+  onValueChange(s, e) {
+    (s == null ? void 0 : s.length) === (e == null ? void 0 : e.length) && (s == null ? void 0 : s.every((a) => e == null ? void 0 : e.includes(a))) || this.valueChange.emit(this.value);
+  }
+  observeSlotChanges() {
+    this.observer = new MutationObserver(() => {
+      this.updateOptions();
+    }), this.observer.observe(this.el, {
+      childList: !0,
+      subtree: !0
+    });
+  }
+  updateOptions() {
+    this.options = b(this.el, "swirl-option-list-item");
+  }
+  getValueLabel() {
+    var s;
+    return Boolean(this.value) ? (s = this.value) == null ? void 0 : s.map((e) => {
+      var l;
+      return (l = this.options.find((a) => a.value === e)) == null ? void 0 : l.label;
+    }).join(", ") : "";
+  }
+  render() {
+    var c, r;
+    const s = this.getValueLabel(), e = this.invalid === !0 || this.invalid === !1 ? String(this.invalid) : void 0, l = this.el.closest("swirl-form-control"), a = this.standalone ? [-8, 0] : (l == null ? void 0 : l.inline) || (l == null ? void 0 : l.labelPosition) === "outside" ? [0, -12] : [0, -16], o = w("select", `select--placement-${this.placement}`, {
+      "select--disabled": this.disabled,
+      "select--inline": this.inline,
+      "select--multi": this.multiSelect,
+      "select--search-loading": this.searchLoading,
+      "select--standalone": this.standalone
+    });
+    return t(p, { key: "192563b542b5fcf47890b85a3b4f6eeb8643ceeb", onKeyDown: this.onKeyDown }, t("div", { key: "0d08184fbb210e2bf14b89c110320819f50a9058", class: o }, t("swirl-popover-trigger", { key: "f86deb6ee98e3c9125500e02d3e7d6d01507c4b3", swirlPopover: this.swirlPopover, setAriaAttributes: !1 }, t("swirl-stack", { key: "2c2d4394f906dd7c943407b71ecc7baf0817ecf3", class: "select__value-container" }, this.standalone && t("span", { key: "75fbe2856acd4c107a9ca2866ed4c98e9e04ac86", "aria-hidden": "true", class: "select__resize-helper" }, s), t("input", { key: "51b6d93c77c97c2e6fdb73f7c2db37417601b3af", "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : void 0, "aria-invalid": e, class: "select__input", disabled: this.disabled, readOnly: !0, ref: (i) => this.input = i, type: "text", value: s }))), t("span", { key: "be0c9c4009a4daa27a5a910436204a1bc12670c0", class: "select__multi-select-values" }, (r = (c = this.value) == null ? void 0 : c.map((i) => this.options.find((h) => h.value === i))) == null ? void 0 : r.map((i) => t("swirl-tag", {
+      "aria-hidden": "true",
+      label: i == null ? void 0 : i.label,
+      onRemove: () => this.unselectOption(i == null ? void 0 : i.value),
+      removable: !this.disabled && this.allowDeselect && !(i != null && i.disabled)
+    }))), t("span", { key: "caed95a74d53824c4693f86fd2a1fdd067226cb2", class: "select__indicator" }, this.open ? t("swirl-icon-expand-less", { size: this.standalone ? 20 : 24 }) : t("swirl-icon-expand-more", { size: this.standalone ? 20 : 24 })), t("swirl-popover", { key: "30784cef8427bf3f9655c4c6b138ff069063d617", animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: a, onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (i) => this.swirlPopover = i, useContainerWidth: this.standalone ? !1 : "swirl-form-control" }, this.withSearch && t("div", { key: "36d6cfa656a03a5299682a6633c9681f89037704", class: "select__search" }, t("swirl-icon-search", { key: "51e104dcb83f4777158f7d283b2a1c5d49ae1851", class: "select__search-icon", size: 20 }), t("input", { key: "945dc6a1739ee725ee9bc8433238e4a0ead2e403", "aria-label": this.searchInputLabel, class: "select__search-input", onInput: this.onSearchInput, placeholder: this.searchPlaceholder, ref: (i) => this.searchInput = i, type: "search" }), this.searchLoading && t("swirl-spinner", { key: "04297a47f0c5782c6d21d854ee8511b1b0a7d4a8", class: "select__search-spinner", size: "s" })), t("swirl-option-list", { key: "96d03f4be1217d2303208c140b6ea7da0c92e01d", allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (i) => this.optionList = i, value: this.value }, !this.searchLoading && t("div", { key: "1fbac42c9ba61e3c43573f3db538068ab7498f44", "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, t("swirl-text", { key: "5206dc2c5dab07e3a26ccb3c53657625d17d30b8", color: "subdued", weight: "medium" }, this.emptyListLabel)), t("slot", { key: "60d36bca8ac9af28689be28feff7b1a4261a42e0", onSlotchange: this.onSlotChange })))));
+  }
+  get el() {
+    return u(this);
+  }
+  static get watchers() {
+    return {
+      value: ["onValueChange"]
+    };
+  }
+};
+v.style = f;
+export {
+  v as swirl_select
+};

package/dist/swirl-separator.entry.841f337a.js

@@ -0,0 +1,29 @@
+import { r as e, h as r, F as s, H as i } from "./index.3a2ee891.js";
+import { c as l } from "./index-orsBiyT_.fc4357c3.js";
+import "react";
+import "react-dom";
+const c = ":host{display:flex;width:100%;align-items:center;gap:var(--s-space-8)}:host *{box-sizing:border-box}:host(.separator--orientation-vertical){display:inline-flex;width:auto;flex-direction:column}:host(.separator--orientation-vertical) .separator__line{width:var(--s-border-width-default);height:100%;min-height:1.125rem}:host(.separator--color-critical) .separator__line{background-color:var(--s-border-critical)}:host(.separator--color-critical) .separator__label{color:var(--s-text-subdued)}:host(.separator--color-strong) .separator__line{background-color:var(--s-border-strong)}:host(.separator--color-strong) .separator__label{color:var(--s-text-subdued)}:host(.separator--color-highlight) .separator__line{background-color:var(--s-border-highlight)}:host(.separator--color-highlight) .separator__label{color:var(--s-text-highlight)}.separator__line{display:block;width:100%;height:var(--s-border-width-default);background-color:var(--s-border-default)}.separator__label{flex-shrink:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;font-size:var(--s-font-size-sm);color:var(--s-text-disabled)}", n = class {
+  constructor(a) {
+    e(this, a), this.borderColor = "default", this.color = "default", this.orientation = "horizontal", this.semantics = "separator", this.spacing = "8";
+  }
+  componentWillLoad() {
+    this.forceColor();
+  }
+  forceColor() {
+    this.borderColor !== "default" && (console.warn('[Swirl] The "borderColor" prop of swirl-separator is deprecated and will be removed with the next major release. Please use the "color" prop to achieve the same result.'), this.color = this.borderColor);
+  }
+  render() {
+    const a = this.orientation === "horizontal" ? {
+      paddingTop: `var(--s-space-${this.spacing})`,
+      paddingBottom: `var(--s-space-${this.spacing})`
+    } : {
+      paddingRight: `var(--s-space-${this.spacing})`,
+      paddingLeft: `var(--s-space-${this.spacing})`
+    }, t = l("separator", `separator--color-${this.color}`, `separator--orientation-${this.orientation}`), o = this.semantics === "separator" ? { "aria-orientation": this.orientation } : {};
+    return r(i, { key: "23acb3a29638b92737838e75a54d7616e6c9150e", ...o, class: t, role: this.semantics, style: a }, r("span", { key: "3ebf80f47fb36438403551f560db91ecf7d7e559", class: "separator__line" }), this.label && r(s, { key: "84ac7960ba714ab27559751c11bd7c4b56ac3176" }, r("span", { key: "6f8dc3ad3bde938789e28ad05c67da657262a4d1", class: "separator__label" }, this.label), r("span", { key: "63ddb77ea887a890bb1731d12a939783b592e21a", class: "separator__line" })));
+  }
+};
+n.style = c;
+export {
+  n as swirl_separator
+};