import { r as L, c as f, h as l, H as B } from "./index.61732cef.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
};
