pyro/dist/colorpicker.js

Pyro custom elements

import { i as u, r as s, x as d, t as h } from "./custom-element-CWJsDAat.js";
import { n as c } from "./property-Bf-I6Ep_.js";
var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, p = (t, e, i, a) => {
  for (var r = a > 1 ? void 0 : a ? y(e, i) : e, n = t.length - 1, l; n >= 0; n--)
    (l = t[n]) && (r = (a ? l(e, i, r) : l(r)) || r);
  return a && r && v(e, i, r), r;
};
let o = class extends s {
  constructor() {
    super(...arguments), this.value = "#000000", this.circle = !1, this["with-input"] = !1;
  }
  handleChange({ target: t }) {
    /^#[0-9A-F]{6}[0-9a-f]{0,2}$/i.test(t.value) && (this.value = t.value, this.renderRoot.querySelectorAll("input").forEach((e) => {
      e.value = this.value;
    }), this.dispatchEvent(
      new CustomEvent("change", {
        bubbles: !0,
        cancelable: !1,
        composed: !0,
        detail: { value: this.value }
      })
    ));
  }
  render() {
    return d`
      <input style="background: ${this.value};" type="color" .value=${this.value} @input=${this.handleChange} />
      <input type="text" minlength="4" maxlength="9" size="9" @input=${this.handleChange} />
    `;
  }
};
o.styles = u`
    :host {
      display: flex;
      gap: var(--pyro-colorpicker-spacing, var(--pyro-spacing));
    }
    input[type='text'] {
      border: var(--pyro-colorpicker-border, var(--pyro-border));
      border-radius: var(--pyro-colorpicker-border-radius, var(--pyro-border-radius));
      background: var(--pyro-colorpicker-surface-color, var(--pyro-surface-color));
    }
    input:focus {
      outline: none;
      box-shadow: none;
    }
    input[type='color'] {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      width: 1.5em;
      height: 1.5em;
      background: transparent;
      border: var(--pyro-colorpicker-border, var(--pyro-border));
      border-radius: var(--pyro-colorpicker-border-radius, var(--pyro-border-radius));
      cursor: pointer;
    }
    input[type='color']::-webkit-color-swatch {
      border-radius: var(--pyro-colorpicker-border-radius, var(--pyro-border-radius));
      border: none;
    }
    input[type='color']::-moz-color-swatch {
      border-radius: var(--pyro-colorpicker-border-radius, var(--pyro-border-radius));
      border: none;
    }
    :host([circle]) input[type='color'] {
      border-radius: 50% !important;
    }
    :host(:not([with-input])) input[type='text'] {
      display: none;
    }
  `;
p([
  c({ reflect: !0 })
], o.prototype, "value", 2);
p([
  c({ type: Boolean, reflect: !0 })
], o.prototype, "circle", 2);
p([
  c({ type: Boolean, reflect: !0 })
], o.prototype, "with-input", 2);
o = p([
  h("pyro-colorpicker")
], o);
export {
  o as PyroColorpicker
};