@getflip/swirl-components-react 0.11.0 → 0.12.0

package/dist/swirl-form-control.entry.89293c5d.js

@@ -1,65 +0,0 @@
-import { r as i, h as o, H as n, g as a } from "./index.9489626d.js";
-import { c } from "./index-c3028f7d.557956d2.js";
-import "react";
-import "react-dom";
-import "./_commonjsHelpers-44457d8d.ba94af77.js";
-const m = ".sc-swirl-form-control-h{display:block;width:100%}.sc-swirl-form-control-h *.sc-swirl-form-control{box-sizing:border-box}.form-control.sc-swirl-form-control{display:block;width:100%;line-height:var(--s-line-height-sm)}.form-control.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-highlight);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select) .form-control__input.sc-swirl-form-control{overflow:hidden;max-height:0}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select) .form-control__label-text.sc-swirl-form-control{bottom:50%;font-size:var(--s-font-size-base);transform:translateY(50%)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select) .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .select__label.sc-swirl-form-control{overflow:hidden;max-height:0;pointer-events:none}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{bottom:50%;font-size:var(--s-font-size-base);transform:translateY(50%)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control--invalid.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--invalid.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical)}.form-control--disabled.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-disabled);color:var(--s-text-disabled)}.form-control--disabled.sc-swirl-form-control .form-control__description.sc-swirl-form-control{color:var(--s-text-disabled)}.form-control__label.sc-swirl-form-control{position:relative;display:flex;width:100%;min-height:4.375rem;padding:calc(var(--s-space-12) + 1.25rem) var(--s-space-16) var(--s-space-12);justify-content:center;border:var(--s-border-width-default) solid var(--s-border-strong);border-radius:var(--s-border-radius-sm);color:var(--s-text-subdued);flex-direction:column;gap:var(--s-space-2)}.form-control__label-text.sc-swirl-form-control{position:absolute;right:var(--s-space-16);bottom:calc(100% - 1.25rem - var(--s-space-12));left:var(--s-space-16);overflow:hidden;font-size:var(--s-font-size-sm);white-space:nowrap;text-overflow:ellipsis;transition:font-size 0.15s, transform 0.15s, top 0.15s;transform:none}.form-control__description.sc-swirl-form-control{display:block;margin-top:var(--s-space-4);padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}.form-control__error-message.sc-swirl-form-control{display:block;margin-top:var(--s-space-4);padding-left:var(--s-space-4)}", h = class {
-  constructor(r) {
-    i(this, r), this.descriptionId = `form-control-description-${Math.round(Math.random() * 1e5)}`, this.listenToInputValueChanges = () => {
-      this.inputEl.addEventListener("valueChange", this.checkInputValue);
-    }, this.checkInputValue = () => {
-      var t;
-      this.inputValue = (t = this.inputEl) === null || t === void 0 ? void 0 : t.value;
-    }, this.onFocusIn = () => {
-      this.hasFocus = !0;
-    }, this.onFocusOut = () => {
-      !this.hasFocus || (this.hasFocus = !1);
-    };
-  }
-  componentWillLoad() {
-    this.inputEl = this.el.children[0], this.associateDescriptionWithInputElement(), this.setInputElementDisabledState(), this.setInputElementInvalidState(), this.setInputElementLabel(), this.checkInputValue(), this.listenToInputValueChanges();
-  }
-  associateDescriptionWithInputElement() {
-    !Boolean(this.description) || !Boolean(this.inputEl) || this.inputEl.setAttribute("swirl-aria-describedby", this.descriptionId);
-  }
-  setInputElementDisabledState() {
-    !Boolean(this.inputEl) || (this.disabled ? this.inputEl.setAttribute("disabled", "true") : this.inputEl.removeAttribute("disabled"));
-  }
-  setInputElementInvalidState() {
-    !Boolean(this.inputEl) || (this.invalid ? this.inputEl.setAttribute("invalid", "true") : this.inputEl.removeAttribute("invalid"));
-  }
-  setInputElementLabel() {
-    !Boolean(this.inputEl) || this.inputEl.setAttribute("label", this.label);
-  }
-  onWindowClick(r) {
-    if (!this.hasFocus)
-      return;
-    const t = r.target;
-    this.el.contains(t) || (this.hasFocus = !1);
-  }
-  render() {
-    const r = Boolean(this.errorMessage), t = Boolean(this.description) && !r, s = Array.isArray(this.inputValue) ? this.inputValue.length > 0 : Boolean(this.inputValue), e = this.inputEl.tagName === "SWIRL-SELECT", l = c("form-control", {
-      "form-control--disabled": this.disabled,
-      "form-control--has-focus": this.hasFocus,
-      "form-control--has-value": s,
-      "form-control--invalid": this.invalid,
-      "form-control--is-select": e
-    });
-    return o(n, { onFocusin: this.onFocusIn, onFocusout: this.onFocusOut }, o("div", { class: l, role: "group" }, o("label", { class: "form-control__label" }, o("span", { class: "form-control__label-text" }, this.label), o("span", { class: "form-control__input" }, o("slot", null))), t && o("span", { class: "form-control__description", id: this.descriptionId }, this.description), r && o("span", { "aria-live": "polite", class: "form-control__error-message", id: this.descriptionId }, o("swirl-inline-error", { message: this.errorMessage, size: "s" }))));
-  }
-  get el() {
-    return a(this);
-  }
-  static get watchers() {
-    return {
-      description: ["associateDescriptionWithInputElement"],
-      disabled: ["setInputElementDisabledState"],
-      invalid: ["setInputElementInvalidState"],
-      label: ["setInputElementLabel"]
-    };
-  }
-};
-h.style = m;
-export {
-  h as swirl_form_control
-};

package/dist/swirl-icon-check-small_3.entry.b2362b00.js

@@ -1,153 +0,0 @@
-import { r as a, h as i, F as n, c as u, H as c, g as m } from "./index.9489626d.js";
-import { c as r } from "./index-c3028f7d.557956d2.js";
-import { q as p, g as v } from "./utils-7efaa1c6.4a9c3721.js";
-import "react";
-import "react-dom";
-import "./_commonjsHelpers-44457d8d.ba94af77.js";
-const b = ":host{display:inline-flex}", f = class {
-  constructor(t) {
-    a(this, t), this.size = 24;
-  }
-  render() {
-    const t = this.size === 20 ? 24 : this.size, e = r("swirl-icon", `swirl-icon--size-${this.size}`);
-    return i("svg", { class: e, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${t} ${t}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && i(n, null, i("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.4142 4.91924C12.8047 5.30976 12.8047 5.94293 12.4142 6.33345L7.08086 11.6667C6.69033 12.0572 6.05717 12.0572 5.66664 11.6667L3.70711 9.70707C3.31658 9.31655 3.31658 8.68338 3.70711 8.29286C4.09763 7.90233 4.7308 7.90233 5.12132 8.29286L6.37375 9.54539L11 4.91924C11.3905 4.52871 12.0237 4.52871 12.4142 4.91924Z", fill: "currentColor" })), (this.size === 20 || this.size === 24) && i(n, null, i("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M18.6213 7.37879C19.2071 7.96458 19.2071 8.91433 18.6213 9.50011L10.6213 17.5C10.0355 18.0858 9.08577 18.0858 8.49998 17.5L5.56068 14.5605C4.97489 13.9748 4.97489 13.025 5.56068 12.4392C6.14646 11.8534 7.09621 11.8534 7.682 12.4392L9.56064 14.318L16.5 7.37879C17.0858 6.79301 18.0355 6.79301 18.6213 7.37879Z", fill: "currentColor" })), this.size === 28 && i(n, null, i("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M21.7248 8.60863C22.4083 9.29205 22.4083 10.4001 21.7248 11.0835L12.3915 20.4167C11.7081 21.1001 10.6001 21.1001 9.91663 20.4167L6.48744 16.9873C5.80403 16.3039 5.80403 15.1959 6.48744 14.5125C7.17086 13.8291 8.2789 13.8291 8.96232 14.5125L11.1541 16.7044L19.25 8.60863C19.9334 7.92521 21.0414 7.92521 21.7248 8.60863Z", fill: "currentColor" })));
-  }
-};
-f.style = b;
-const x = ".sc-swirl-option-list-h{display:block}.sc-swirl-option-list-h *.sc-swirl-option-list{box-sizing:border-box}", g = class {
-  constructor(t) {
-    a(this, t), this.valueChange = u(this, "valueChange", 7), this.value = [], this.onFocus = () => {
-      Boolean(this.focusedItem) ? this.focusItem(this.getActiveItemIndex()) : this.focusItem(0);
-    }, this.onClick = (e) => {
-      e.preventDefault();
-      const s = e.target, o = s == null ? void 0 : s.closest("swirl-option-list-item");
-      !Boolean(o) || this.selectItem(this.items.findIndex((l) => l.value === o.value));
-    }, this.onKeyDown = (e) => {
-      e.code === "ArrowDown" ? (e.preventDefault(), this.focusNextItem()) : e.code === "ArrowUp" ? (e.preventDefault(), this.focusPreviousItem()) : e.code === "Space" || e.code === "Enter" ? (e.preventDefault(), this.selectFocusedItem()) : e.code === "Home" ? (e.preventDefault(), this.focusItem(0)) : e.code === "End" ? (e.preventDefault(), this.focusItem(this.items.length - 1)) : e.code === "KeyA" && (e.metaKey || e.ctrlKey) && this.multiSelect && (e.preventDefault(), this.selectAllItems());
-    };
-  }
-  componentDidLoad() {
-    this.updateItems(), this.observeSlotChanges(), this.setItemDisabledState(), this.setItemContext(), this.syncItemsWithValue();
-  }
-  disconnectedCallback() {
-    var t;
-    (t = this.observer) === null || t === void 0 || t.disconnect();
-  }
-  watchDisabled() {
-    this.setItemDisabledState();
-  }
-  watchMultiSelect() {
-    this.setItemContext();
-  }
-  watchValue() {
-    this.syncItemsWithValue();
-  }
-  observeSlotChanges() {
-    this.observer = new MutationObserver(() => {
-      this.updateItems();
-    }), this.observer.observe(this.listboxEl, { childList: !0 });
-  }
-  updateItems() {
-    this.items = p(this.el, "swirl-option-list-item");
-  }
-  setItemDisabledState() {
-    this.items.forEach((t) => t.disabled = this.disabled);
-  }
-  setItemContext() {
-    this.multiSelect ? this.items.forEach((t) => t.context = "multi-select") : (this.items.forEach((t) => t.context = "single-select"), this.value.length > 1 && this.updateValue([this.value[0]]));
-  }
-  selectItem(t) {
-    if (this.disabled)
-      return;
-    const e = this.items[t];
-    if (e.disabled)
-      return;
-    const s = this.value.includes(e.value);
-    this.multiSelect || (this.value = []), s ? this.updateValue(this.value.filter((o) => o !== e.value)) : this.updateValue([...this.value, e.value]);
-  }
-  updateValue(t) {
-    this.value = t, this.valueChange.emit(this.value);
-  }
-  selectFocusedItem() {
-    this.disabled || this.getActiveItemIndex() === -1 || this.selectItem(this.getActiveItemIndex());
-  }
-  selectAllItems() {
-    if (this.disabled)
-      return;
-    this.items.every((e) => this.value.includes(e.value)) ? this.updateValue([]) : this.updateValue(this.items.map((e) => e.value));
-  }
-  syncItemsWithValue() {
-    this.items.forEach((t) => t.selected = this.value.includes(t.value));
-  }
-  focusItem(t) {
-    if (this.disabled)
-      return;
-    this.items.forEach((s) => s.shadowRoot.querySelector('[role="option"]').removeAttribute("tabIndex"));
-    const e = this.items[t].shadowRoot.querySelector('[role="option"]');
-    !Boolean(e) || (e.setAttribute("tabIndex", "0"), e.focus(), this.focusedItem = e);
-  }
-  focusNextItem() {
-    if (this.disabled)
-      return;
-    const t = this.getActiveItemIndex(), e = Math.min(t + 1, this.items.length - 1);
-    this.focusItem(e);
-  }
-  focusPreviousItem() {
-    const t = this.getActiveItemIndex(), e = Math.max(t - 1, 0);
-    this.focusItem(e);
-  }
-  getActiveItemIndex() {
-    return this.items.map((t) => t.shadowRoot.querySelector('[role="option"]')).findIndex((t) => t === this.focusedItem);
-  }
-  render() {
-    const t = this.multiSelect ? "true" : void 0, e = this.disabled ? -1 : 0;
-    return i(c, null, i("div", { "aria-label": this.label, "aria-multiselectable": t, class: "option-list", id: this.optionListId, onClick: this.onClick, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (s) => this.listboxEl = s, role: "listbox", tabIndex: e }, i("slot", null)));
-  }
-  get el() {
-    return m(this);
-  }
-  static get watchers() {
-    return {
-      disabled: ["watchDisabled"],
-      multiSelect: ["watchMultiSelect"],
-      value: ["watchValue"]
-    };
-  }
-};
-g.style = x;
-const I = ":host{display:inline-flex;width:100%}:host *{box-sizing:border-box}.option-list-item{display:inline-flex;width:100%;min-height:3rem;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-surface-overlay-default);cursor:pointer;gap:var(--s-space-12)}.option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-hovered)}.option-list-item:active:not(.option-list-item--disabled){background-color:var(--s-surface-overlay-pressed)}.option-list-item:focus{outline:none}.option-list-item:focus-visible{background-color:var(--s-surface-overlay-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item{min-height:0;padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-8)}}.option-list-item--selected .option-list-item__label{color:var(--s-text-highlight)}.option-list-item--selected .option-list-item__icon{color:var(--s-icon-highlight)}.option-list-item--selected .option-list-item__checkbox-box{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.option-list-item--disabled{cursor:default}.option-list-item--disabled.option-list-item--selected .option-list-item__checkbox-box{background-color:var(--s-icon-disabled)}.option-list-item--disabled.option-list-item--selected .option-list-item__checkbox-icon{color:var(--s-text-on-status)}.option-list-item--disabled .option-list-item__label{color:var(--s-text-disabled)}.option-list-item--disabled .option-list-item__icon,.option-list-item--disabled .option-list-item__selection-icon,.option-list-item--disabled .option-list-item__checkbox-icon{color:var(--s-icon-disabled)}.option-list-item--disabled .option-list-item__checkbox-box{border-color:var(--s-icon-disabled);background-color:var(--s-surface-overlay-default)}.option-list-item__label{flex-grow:1;color:var(--s-text-default);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__label{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__icon{display:inline-flex;flex-shrink:0;color:var(--s-icon-default)}.option-list-item__selection-icon{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}.option-list-item__checkbox{display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2)}.option-list-item__checkbox-box{display:inline-flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s)}.option-list-item__checkbox-icon{display:inline-flex}", _ = class {
-  constructor(t) {
-    a(this, t), this.context = "single-select", this.selected = !1, this.iconSize = 24, this.desktopMediaQuery = v(), this.desktopMediaQueryHandler = (e) => {
-      this.forceIconProps(e.matches), this.updateIconSize(e.matches);
-    };
-  }
-  componentDidLoad() {
-    var t, e;
-    this.forceIconProps(this.desktopMediaQuery.matches), this.updateIconSize(this.desktopMediaQuery.matches), (e = (t = this.desktopMediaQuery).addEventListener) === null || e === void 0 || e.call(t, "change", this.desktopMediaQueryHandler);
-  }
-  disconnectedCallback() {
-    var t, e;
-    (e = (t = this.desktopMediaQuery).removeEventListener) === null || e === void 0 || e.call(t, "change", this.desktopMediaQueryHandler);
-  }
-  forceIconProps(t) {
-    var e;
-    const s = (e = this.iconEl) === null || e === void 0 ? void 0 : e.children[0];
-    s == null || s.setAttribute("size", t ? "20" : "24");
-  }
-  updateIconSize(t) {
-    this.iconSize = t ? 20 : 24;
-  }
-  render() {
-    const t = this.disabled ? "true" : void 0, e = String(this.selected), s = this.context === "multi-select", o = Boolean(this.icon) && this.context === "single-select", l = this.selected && this.context === "single-select", d = r("option-list-item", `option-list-item--context-${this.context}`, {
-      "option-list-item--disabled": this.disabled,
-      "option-list-item--selected": this.selected
-    });
-    return i(c, null, i("div", { "aria-disabled": t, "aria-selected": e, class: d, part: "option-list-item", role: "option" }, o && i("span", { class: "option-list-item__icon", innerHTML: this.icon, ref: (h) => this.iconEl = h }), s && i("span", { class: "option-list-item__checkbox" }, i("span", { class: "option-list-item__checkbox-box" }, this.selected && i("swirl-icon-check-strong", { class: "option-list-item__checkbox-icon", size: 16 }))), i("span", { class: "option-list-item__label", part: "option-list-item__label" }, this.label), l && i("span", { class: "option-list-item__selection-icon" }, i("swirl-icon-check-small", { size: this.iconSize }))));
-  }
-};
-_.style = I;
-export {
-  f as swirl_icon_check_small,
-  g as swirl_option_list,
-  _ as swirl_option_list_item
-};

package/dist/swirl-text.entry.ec8c8813.js

@@ -1,18 +0,0 @@
-import { r as s, h as e, H as o } from "./index.9489626d.js";
-import { c as n } from "./index-c3028f7d.557956d2.js";
-import "react";
-import "react-dom";
-import "./_commonjsHelpers-44457d8d.ba94af77.js";
-const a = ":host{display:block;max-width:100%}:host *{box-sizing:border-box}.text{margin:0;padding:0}.text--align-start{text-align:start}.text--align-center{text-align:center}.text--align-end{text-align:end}.text--color-default{color:var(--s-text-default)}.text--color-subdued{color:var(--s-text-subdued)}.text--color-critical{color:var(--s-text-critical)}.text--color-success{color:var(--s-text-success)}.text--color-warning{color:var(--s-text-warning)}.text--size-sm{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}.text--size-base{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text--size-base{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text--size-lg{font-size:var(--s-font-size-lg);line-height:var(--s-line-height-lg)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text--size-lg{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}}.text--weight-normal{font-weight:var(--s-font-weight-normal)}.text--weight-medium{font-weight:var(--s-font-weight-medium)}.text--weight-semibold{font-weight:var(--s-font-weight-semibold)}.text--weight-bold{font-weight:var(--s-font-weight-bold)}.text--font-style-normal{font-style:normal}.text--font-style-italic{font-style:italic}.text--truncate{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}", r = class {
-  constructor(t) {
-    s(this, t), this.align = "start", this.as = "p", this.color = "default", this.fontStyle = "normal", this.size = "base", this.weight = "normal";
-  }
-  render() {
-    const t = this.as, i = n("text", `text--align-${this.align}`, `text--color-${this.color}`, `text--font-style-${this.fontStyle}`, `text--size-${this.size}`, `text--weight-${this.weight}`, { "text--truncate": this.truncate });
-    return e(o, null, e(t, { class: i, part: i }, e("slot", null)));
-  }
-};
-r.style = a;
-export {
-  r as swirl_text
-};

package/dist/utils-7efaa1c6.4a9c3721.js

@@ -1,42 +0,0 @@
-const u = () => document.documentElement.classList.contains("disable-desktop-style-tweaks") ? window.matchMedia(null) : window.matchMedia("(min-width: 992px) and (max-width: 1439px) and (hover: hover), (min-width: 1440px)");
-function p(i, l, e = !1) {
-  let s;
-  return async function() {
-    const t = this, a = arguments, n = function() {
-      s = null, e || i.apply(t, a);
-    }, c = e && !Boolean(s);
-    clearTimeout(s), s = setTimeout(n, l), c && i.apply(t, a);
-  };
-}
-function f(i, l) {
-  const e = l.scrollTop, s = e + l.clientHeight, o = l.getBoundingClientRect(), t = i.getBoundingClientRect(), n = {
-    top: t.top - o.top,
-    right: t.right - o.right,
-    bottom: t.bottom - o.bottom,
-    left: t.left - o.left
-  }.top + e, c = n + i.offsetHeight, r = n < e ? e : n;
-  return (c > s ? s : c) - r;
-}
-function w() {
-  return !window.matchMedia("(min-width: 768px)").matches;
-}
-function g(i, l) {
-  function e(o, t) {
-    if (!Boolean(t))
-      return [];
-    const a = Array.from(t.querySelectorAll(o)), n = Boolean(window.HTMLSlotElement) && t instanceof HTMLSlotElement ? t.assignedElements() : [], c = [...Array.from(t.children), ...n], r = t.shadowRoot, d = e(o, r);
-    return [
-      ...a,
-      ...c.map((m) => e(o, m)).flat(),
-      ...d
-    ];
-  }
-  return e(l, i).filter((o, t, a) => !a.some((n, c) => n.isSameNode(o) && c > t));
-}
-export {
-  f as a,
-  p as d,
-  u as g,
-  w as i,
-  g as q
-};