@getflip/swirl-components-react 0.470.1 → 0.471.0

package/dist/swirl-color-input.entry.e71ad88b.js

@@ -0,0 +1,272 @@
+import { r as L, c as f, h as l, H as B } from "./index.a5e4c7a8.js";
+import { c as T } from "./index-orsBiyT_.fc4357c3.js";
+import { v as z } from "./v4-DD3477fe.2624487e.js";
+import "react";
+import "react-dom";
+const u = (e, t = 0, o = 1) => e > o ? o : e < t ? t : e, i = (e, t = 0, o = Math.pow(10, t)) => Math.round(o * e) / o, F = (e) => O(v(e)), v = (e) => (e[0] === "#" && (e = e.substring(1)), e.length < 6 ? {
+  r: parseInt(e[0] + e[0], 16),
+  g: parseInt(e[1] + e[1], 16),
+  b: parseInt(e[2] + e[2], 16),
+  a: e.length === 4 ? i(parseInt(e[3] + e[3], 16) / 255, 2) : 1
+} : {
+  r: parseInt(e.substring(0, 2), 16),
+  g: parseInt(e.substring(2, 4), 16),
+  b: parseInt(e.substring(4, 6), 16),
+  a: e.length === 8 ? i(parseInt(e.substring(6, 8), 16) / 255, 2) : 1
+}), A = (e) => D(q(e)), P = ({ h: e, s: t, v: o, a: s }) => {
+  const r = (200 - t) * o / 100;
+  return {
+    h: i(e),
+    s: i(r > 0 && r < 200 ? t * o / 100 / (r <= 100 ? r : 200 - r) * 100 : 0),
+    l: i(r / 2),
+    a: i(s, 2)
+  };
+}, w = (e) => {
+  const { h: t, s: o, l: s } = P(e);
+  return `hsl(${t}, ${o}%, ${s}%)`;
+}, q = ({ h: e, s: t, v: o, a: s }) => {
+  e = e / 360 * 6, t = t / 100, o = o / 100;
+  const r = Math.floor(e), n = o * (1 - t), a = o * (1 - (e - r) * t), p = o * (1 - (1 - e + r) * t), b = r % 6;
+  return {
+    r: i([o, a, n, n, p, o][b] * 255),
+    g: i([p, o, o, a, n, n][b] * 255),
+    b: i([n, n, p, o, o, a][b] * 255),
+    a: i(s, 2)
+  };
+}, d = (e) => {
+  const t = e.toString(16);
+  return t.length < 2 ? "0" + t : t;
+}, D = ({ r: e, g: t, b: o, a: s }) => {
+  const r = s < 1 ? d(i(s * 255)) : "";
+  return "#" + d(e) + d(t) + d(o) + r;
+}, O = ({ r: e, g: t, b: o, a: s }) => {
+  const r = Math.max(e, t, o), n = r - Math.min(e, t, o), a = n ? r === e ? (t - o) / n : r === t ? 2 + (o - e) / n : 4 + (e - t) / n : 0;
+  return {
+    h: i(60 * (a < 0 ? a + 6 : a)),
+    s: i(r ? n / r * 100 : 0),
+    v: i(r / 255 * 100),
+    a: s
+  };
+}, I = (e, t) => {
+  if (e === t)
+    return !0;
+  for (const o in e)
+    if (e[o] !== t[o])
+      return !1;
+  return !0;
+}, N = (e, t) => e.toLowerCase() === t.toLowerCase() ? !0 : I(v(e), v(t)), y = {}, M = (e) => {
+  let t = y[e];
+  return t || (t = document.createElement("template"), t.innerHTML = e, y[e] = t), t;
+}, x = (e, t, o) => {
+  e.dispatchEvent(new CustomEvent(t, {
+    bubbles: !0,
+    detail: o
+  }));
+};
+let c = !1;
+const k = (e) => "touches" in e, R = (e) => c && !k(e) ? !1 : (c || (c = k(e)), !0), C = (e, t) => {
+  const o = k(t) ? t.touches[0] : t, s = e.el.getBoundingClientRect();
+  x(e.el, "move", e.getMove({
+    x: u((o.pageX - (s.left + window.pageXOffset)) / s.width),
+    y: u((o.pageY - (s.top + window.pageYOffset)) / s.height)
+  }));
+}, V = (e, t) => {
+  const o = t.keyCode;
+  o > 40 || e.xy && o < 37 || o < 33 || (t.preventDefault(), x(e.el, "move", e.getMove({
+    x: o === 39 ? 0.01 : o === 37 ? -0.01 : o === 34 ? 0.05 : o === 33 ? -0.05 : o === 35 ? 1 : o === 36 ? -1 : 0,
+    y: o === 40 ? 0.01 : o === 38 ? -0.01 : 0
+  }, !0)));
+};
+class _ {
+  constructor(t, o, s, r) {
+    const n = M(`<div role="slider" tabindex="0" part="${o}" ${s}><div part="${o}-pointer"></div></div>`);
+    t.appendChild(n.content.cloneNode(!0));
+    const a = t.querySelector(`[part=${o}]`);
+    a.addEventListener("mousedown", this), a.addEventListener("touchstart", this), a.addEventListener("keydown", this), this.el = a, this.xy = r, this.nodes = [a.firstChild, a];
+  }
+  set dragging(t) {
+    const o = t ? document.addEventListener : document.removeEventListener;
+    o(c ? "touchmove" : "mousemove", this), o(c ? "touchend" : "mouseup", this);
+  }
+  handleEvent(t) {
+    switch (t.type) {
+      case "mousedown":
+      case "touchstart":
+        if (t.preventDefault(), !R(t) || !c && t.button != 0)
+          return;
+        this.el.focus(), C(this, t), this.dragging = !0;
+        break;
+      case "mousemove":
+      case "touchmove":
+        t.preventDefault(), C(this, t);
+        break;
+      case "mouseup":
+      case "touchend":
+        this.dragging = !1;
+        break;
+      case "keydown":
+        V(this, t);
+        break;
+    }
+  }
+  style(t) {
+    t.forEach((o, s) => {
+      for (const r in o)
+        this.nodes[s].style.setProperty(r, o[r]);
+    });
+  }
+}
+class j extends _ {
+  constructor(t) {
+    super(t, "hue", 'aria-label="Hue" aria-valuemin="0" aria-valuemax="360"', !1);
+  }
+  update({ h: t }) {
+    this.h = t, this.style([
+      {
+        left: `${t / 360 * 100}%`,
+        color: w({ h: t, s: 100, v: 100, a: 1 })
+      }
+    ]), this.el.setAttribute("aria-valuenow", `${i(t)}`);
+  }
+  getMove(t, o) {
+    return { h: o ? u(this.h + t.x * 360, 0, 360) : 360 * t.x };
+  }
+}
+class X extends _ {
+  constructor(t) {
+    super(t, "saturation", 'aria-label="Color"', !0);
+  }
+  update(t) {
+    this.hsva = t, this.style([
+      {
+        top: `${100 - t.v}%`,
+        left: `${t.s}%`,
+        color: w(t)
+      },
+      {
+        "background-color": w({ h: t.h, s: 100, v: 100, a: 1 })
+      }
+    ]), this.el.setAttribute("aria-valuetext", `Saturation ${i(t.s)}%, Brightness ${i(t.v)}%`);
+  }
+  getMove(t, o) {
+    return {
+      s: o ? u(this.hsva.s + t.x * 100, 0, 100) : t.x * 100,
+      v: o ? u(this.hsva.v - t.y * 100, 0, 100) : Math.round(100 - t.y * 100)
+    };
+  }
+}
+var Y = ':host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:"";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}', G = "[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}", J = "[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}";
+const h = Symbol("same"), g = Symbol("color"), $ = Symbol("hsva"), m = Symbol("update"), E = Symbol("parts"), H = Symbol("css"), S = Symbol("sliders");
+class K extends HTMLElement {
+  static get observedAttributes() {
+    return ["color"];
+  }
+  get [H]() {
+    return [Y, G, J];
+  }
+  get [S]() {
+    return [X, j];
+  }
+  get color() {
+    return this[g];
+  }
+  set color(t) {
+    if (!this[h](t)) {
+      const o = this.colorModel.toHsva(t);
+      this[m](o), this[g] = t;
+    }
+  }
+  constructor() {
+    super();
+    const t = M(`<style>${this[H].join("")}</style>`), o = this.attachShadow({ mode: "open" });
+    o.appendChild(t.content.cloneNode(!0)), o.addEventListener("move", this), this[E] = this[S].map((s) => new s(o));
+  }
+  connectedCallback() {
+    if (this.hasOwnProperty("color")) {
+      const t = this.color;
+      delete this.color, this.color = t;
+    } else
+      this.color || (this.color = this.colorModel.defaultColor);
+  }
+  attributeChangedCallback(t, o, s) {
+    const r = this.colorModel.fromAttr(s);
+    this[h](r) || (this.color = r);
+  }
+  handleEvent(t) {
+    const o = this[$], s = { ...o, ...t.detail };
+    this[m](s);
+    let r;
+    !I(s, o) && !this[h](r = this.colorModel.fromHsva(s)) && (this[g] = r, x(this, "color-changed", { value: r }));
+  }
+  [h](t) {
+    return this.color && this.colorModel.equal(t, this.color);
+  }
+  [m](t) {
+    this[$] = t, this[E].forEach((o) => o.update(t));
+  }
+}
+const Q = {
+  defaultColor: "#000",
+  toHsva: F,
+  fromHsva: ({ h: e, s: t, v: o }) => A({ h: e, s: t, v: o, a: 1 }),
+  equal: N,
+  fromAttr: (e) => e
+};
+class U extends K {
+  get colorModel() {
+    return Q;
+  }
+}
+class W extends U {
+}
+customElements.define("hex-color-picker", W);
+const Z = () => ".sc-swirl-color-input-h{display:block;width:100%}.sc-swirl-color-input-h *.sc-swirl-color-input{box-sizing:border-box}.color-input.sc-swirl-color-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm);cursor:text}.color-input--inline.sc-swirl-color-input .color-input__preview-button.sc-swirl-color-input{width:1.5rem;height:1.5rem;margin-top:-0.125rem;margin-right:-0.25rem;margin-bottom:-0.125rem}.color-input__input.sc-swirl-color-input{display:inline-flex;width:100%;margin:0;padding:0;flex-grow:1;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.color-input__input.sc-swirl-color-input:focus{outline:none}.color-input__input.sc-swirl-color-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.color-input__input.sc-swirl-color-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.color-input__preview-button.sc-swirl-color-input{width:2.75rem;height:2.75rem;margin-top:-1.25rem;flex-shrink:0;border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-s);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}", tt = class {
+  constructor(e) {
+    L(this, e), this.inputBlur = f(this, "inputBlur", 7), this.inputFocus = f(this, "inputFocus", 7), this.valueChange = f(this, "valueChange", 7), this.pickerButtonLabel = "Open color picker", this.pickerLabel = "Color picker", this.pickerId = `color-picker-${z()}`, this.onPickerChange = (t) => {
+      this.value = t.detail.value;
+    }, this.onChange = (t) => {
+      const o = t.target;
+      this.value = o.value;
+    }, this.onBlur = (t) => {
+      this.inputBlur.emit(t);
+    }, this.onFocus = (t) => {
+      this.inputFocus.emit(t), this.handleAutoSelect(t);
+    }, this.onInput = (t) => {
+      this.onChange(t);
+    };
+  }
+  componentDidLoad() {
+    this.autoFocus && setTimeout(() => {
+      this.inputEl.focus();
+    }), this.picker.addEventListener("color-changed", this.onPickerChange);
+  }
+  disconnectedCallback() {
+    var e;
+    (e = this.picker) == null || e.removeEventListener("color-changed", this.onPickerChange);
+  }
+  watchValue(e, t) {
+    e !== t && this.valueChange.emit(e);
+  }
+  handleAutoSelect(e) {
+    !this.autoSelect || e.target.select();
+  }
+  render() {
+    const e = this.invalid === !0 || this.invalid === !1 ? String(this.invalid) : void 0, t = T("color-input", {
+      "color-input--inline": this.inline
+    });
+    return l(B, { key: "2ed3d40d8b69af36b2226c911cc5dae84742f0cb" }, l("div", { key: "ef197f8e0a01ddf121df8f47a99691040663f286", class: t }, l("input", { key: "34f8ae5eb9aaa8e664a6b47fac63917a2f7e2039", "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : void 0, "aria-invalid": e, autoFocus: this.autoFocus, class: "color-input__input", disabled: this.disabled, maxLength: 7, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (o) => this.inputEl = o, required: this.required, spellcheck: "false", type: "text", value: this.value, readonly: this.readonly }), l("swirl-popover-trigger", { key: "3e11abdfdf445802e84cf3e87de2499c3a402f9a", swirlPopover: this.pickerId }, l("button", { key: "e99eb09576d3843aebd5c8803e0d9235bbb0139e", disabled: this.readonly, "aria-label": this.pickerButtonLabel, class: "color-input__preview-button", style: {
+      backgroundColor: this.disabled ? "var(--s-border-subdued)" : this.value
+    }, type: "button" })), l("swirl-popover", { key: "b60e4424b971f6f76b5e0adc9d7b155cd7a0fdac", animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, l("swirl-box", { key: "756f20986aeb68b92bd03649623b64f210b1f846", centerInline: !0, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, l("hex-color-picker", { key: "5410df4ccf4537763171af4b15ab26898e007ff4", color: this.value, ref: (o) => this.picker = o })))));
+  }
+  static get watchers() {
+    return {
+      value: [{
+        watchValue: 0
+      }]
+    };
+  }
+};
+tt.style = Z();
+export {
+  tt as swirl_color_input
+};

package/dist/swirl-columns.entry.1ef1354f.js

@@ -0,0 +1,18 @@
+import { r as o, h as s, H as r } from "./index.a5e4c7a8.js";
+import "react";
+import "react-dom";
+const t = () => ":host{display:block}:host *{box-sizing:border-box}.columns{display:grid;width:100%}", a = class {
+  constructor(e) {
+    o(this, e), this.columns = "repeat(3, minmax(0, 1fr))";
+  }
+  render() {
+    return s(r, { key: "38f01f098c3a0cd7ca18731450796a5c9724e053" }, s("div", { key: "35e0b361dde0251c2b720863a86eba6e55fdc8e9", class: "columns", style: {
+      gridTemplateColumns: this.columns,
+      gap: `var(--s-space-${this.spacing})`
+    } }, s("slot", { key: "0847d324dd44000299e7b12d1701860ad30f4dde" })));
+  }
+};
+a.style = t();
+export {
+  a as swirl_columns
+};