@luzmo/lucero 1.0.1-alpha.15 → 1.0.1-alpha.17

package/components/color-slider/index.cjs

@@ -15,4 +15,588 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../index-BwxgAdzi.cjs");exports.LuzmoColorSlider=e.LuzmoColorSlider;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tinycolor = require("@ctrl/tinycolor");
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const ifDefined_js = require("lit/directives/if-defined.js");
+const styleMap_js = require("lit/directives/style-map.js");
+require("../color-handle/index.cjs");
+const focusable = require("../focusable-BPrTcZPd.cjs");
+const languageResolution = require("../language-resolution-iN9EImbb.cjs");
+const streamingListener = require("../streaming-listener-D4sHaMub.cjs");
+const extractHueAndSaturationRegExp = /^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/;
+const replaceHueAndSaturationRegExp = /(^hs[v|l]a?\s?\()\d{1,3}\.?\d*?(,?\s?)\d{1,3}/;
+const replaceHueRegExp = /(^hs[v|l]a?\()\d{1,3}/;
+const getHexValue = (color, isString) => isString ? color.toHexString() : color.toHex();
+class ColorController {
+  constructor(host, {
+    applyColorToState,
+    extractColorFromState,
+    maintains
+  }) {
+    this.maintains = "hue";
+    this._hue = 0;
+    this._opacity = 1;
+    this.getColorProcesses = {
+      rgb: (color, isString) => isString ? color.toRgbString() : color.toRgb(),
+      prgb: (color, isString) => isString ? color.toPercentageRgbString() : color.toPercentageRgb(),
+      hex8: (color, isString) => isString ? color.toHex8String() : color.toHex8(),
+      name: (color) => color.toName() || color.toRgbString(),
+      hsl: (color, isString) => {
+        if (this.maintains === "hue") {
+          if (isString) {
+            const hslString = color.toHslString();
+            return hslString.replace(replaceHueRegExp, `$1${this.hue}`);
+          }
+          const { s: s2, l: l2, a: a2 } = color.toHsl();
+          return { h: this.hue, s: s2, l: l2, a: a2 };
+        }
+        if (isString) {
+          const hslString = color.toHslString();
+          return hslString.replace(
+            replaceHueAndSaturationRegExp,
+            `$1${this.hue}$2${this.saturation}`
+          );
+        }
+        const { s, l, a } = color.toHsl();
+        return { h: this.hue, s, l, a };
+      },
+      hsv: (color, isString) => {
+        if (this.maintains === "hue") {
+          if (isString) {
+            const hsvString = color.toHsvString();
+            return hsvString.replace(replaceHueRegExp, `$1${this.hue}`);
+          }
+          const { s: s2, v: v2, a: a2 } = color.toHsv();
+          return { h: this.hue, s: s2, v: v2, a: a2 };
+        }
+        if (isString) {
+          const hsvString = color.toHsvString();
+          return hsvString.replace(
+            replaceHueAndSaturationRegExp,
+            `$1${this.hue}$2${this.saturation}`
+          );
+        }
+        const { s, v, a } = color.toHsv();
+        return { h: this.hue, s, v, a };
+      },
+      hex: getHexValue,
+      hex3: getHexValue,
+      hex4: getHexValue,
+      hex6: getHexValue
+    };
+    this._color = new tinycolor.TinyColor({ h: 0, s: 1, v: 1 });
+    this._previousColor = new tinycolor.TinyColor({ h: 0, s: 1, v: 1 });
+    this._format = {
+      format: "",
+      isString: false
+    };
+    this.host = host;
+    this.applyColorToState = applyColorToState;
+    this.extractColorFromState = extractColorFromState;
+    this.maintains = maintains || this.maintains;
+  }
+  setColorProcess(currentColor, nextColor, format, isString) {
+    if (this.maintains === "hue") {
+      this.setColorMaintainHue(currentColor, nextColor, format, isString);
+    } else if (this.maintains === "saturation") {
+      this.setColorMaintainSaturation(
+        currentColor,
+        nextColor,
+        format,
+        isString
+      );
+    }
+  }
+  setColorMaintainHue(currentColor, nextColor, format, isString) {
+    const { h, s, v, a } = this._color.toHsv();
+    let originalHue;
+    if (isString && format.startsWith("hs")) {
+      const values = extractHueAndSaturationRegExp.exec(nextColor);
+      if (values !== null) {
+        const [, h2] = values;
+        originalHue = Number(h2);
+      }
+    } else if (!isString && format.startsWith("hs")) {
+      const colorInput = currentColor.originalInput;
+      const colorValues = Object.values(colorInput);
+      originalHue = colorValues[0];
+    }
+    this.hue = originalHue || h;
+    this.opacity = a ?? 1;
+    this.applyColorToState({ h, s, v, a });
+  }
+  setColorMaintainSaturation(currentColor, nextColor, format, isString) {
+    const { a } = this._color.toHsv();
+    if (isString && format.startsWith("hs")) {
+      const values = extractHueAndSaturationRegExp.exec(nextColor);
+      if (values !== null) {
+        const [, h, s] = values;
+        this.hue = Number(h);
+        this.saturation = Number(s);
+      }
+    } else if (!isString && format.startsWith("hs")) {
+      const colorInput = currentColor.originalInput;
+      const colorValues = Object.values(colorInput);
+      this.hue = colorValues[0];
+      this.saturation = colorValues[1];
+    } else {
+      const { h } = currentColor.toHsv();
+      this.hue = h;
+    }
+    this.opacity = a ?? 1;
+    this.applyColorToState(currentColor.toHsv());
+  }
+  applyColorFromState() {
+    this._color = new tinycolor.TinyColor(this.extractColorFromState(this));
+  }
+  get hue() {
+    return this._hue;
+  }
+  set hue(value) {
+    const hue = Math.min(360, Math.max(0, value));
+    if (hue === this.hue) {
+      return;
+    }
+    const oldValue = this.hue;
+    const { s, v, a } = this._color.toHsv();
+    this._color = new tinycolor.TinyColor({ h: hue, s, v, a });
+    this._hue = hue;
+    this.host.requestUpdate("hue", oldValue);
+  }
+  get opacity() {
+    return this._opacity;
+  }
+  set opacity(value) {
+    const opacity = Math.min(1, Math.max(0, value));
+    if (opacity === this.opacity) {
+      return;
+    }
+    const oldValue = this.opacity;
+    const { h, s, v } = this._color.toHsv();
+    this._color = new tinycolor.TinyColor({ h, s, v, a: opacity });
+    this._opacity = opacity;
+    this.host.requestUpdate("opacity", oldValue);
+  }
+  /* c8 ignore next 3 */
+  get value() {
+    return this.color;
+  }
+  get color() {
+    return this.getColorProcesses[this._format.format || "hex"](
+      this._color,
+      this._format.isString
+    );
+  }
+  set color(color) {
+    if (color === this.color) {
+      return;
+    }
+    const oldValue = this._color;
+    this._color = new tinycolor.TinyColor(color);
+    const format = this._color.format;
+    let isString = typeof color === "string" || color instanceof String;
+    if (format.startsWith("hex")) {
+      isString = color.startsWith("#");
+    }
+    this._format = {
+      format,
+      isString
+    };
+    this.setColorProcess(this._color, color, format, isString);
+    this.host.requestUpdate("color", oldValue);
+  }
+  getColor(format) {
+    const formatOptions = {
+      hsl: "toHsl"
+    };
+    return this._color[formatOptions[format]]();
+  }
+  setColor(color) {
+    this._color = color;
+    const isString = typeof this._color.originalInput === "string" || this._color.originalInput instanceof String;
+    this.setColorProcess(this._color, color, this._color.format, isString);
+  }
+  getHslString() {
+    return this._color.toHslString();
+  }
+  savePreviousColor() {
+    this._previousColor = this._color.clone();
+  }
+  restorePreviousColor() {
+    this.setColor(this._previousColor);
+  }
+}
+const styles = '.opacity-checkerboard{position:absolute;block-size:100%;inline-size:100%;background:repeating-conic-gradient(var(--luzmo-color-loupe-checkerboard-light, rgb(255, 255, 255)) 0 25%,var(--luzmo-color-loupe-checkerboard-dark, rgb(230, 230, 230)) 0 50%) var(--luzmo-color-loupe-checkerboard-position, left top)/calc(var(--luzmo-color-loupe-checkerboard-size, 8px) * 2) calc(var(--luzmo-color-loupe-checkerboard-size, 8px) * 2)}:host{--luzmo-color-slider-gradient-fallback: rgb(255 0 0) 0%, rgb(255 255 0) 17%, rgb(0 255 0) 33%, rgb(0 255 255) 50%, rgb(0 0 255) 67%, rgb(255 0 255) 83%, rgb(255 0 0) 100%;touch-action:none}:host([vertical]) .handle{inset-block-start:unset;inset-block-end:0}:host([vertical]) .slider{-webkit-appearance:slider-vertical;-moz-appearance:slider-vertical;appearance:slider-vertical}:host(:focus){outline:none}.gradient{overflow:hidden}::slotted(*){width:100%;height:100%}@media (forced-colors: active){:host{--highcontrast-color-slider-border-color: CanvasText;--highcontrast-color-slider-border-color-disabled: GrayText;--highcontrast-color-slider-background-color-disabled: Canvas;forced-color-adjust:none}}:host{--luzmo-color-handle-hitarea-border-radius: var( --luzmo-color-slider-handle-hitarea-border-radius, 0px );min-inline-size:var(--luzmo-color-slider-minimum-length, 80px);inline-size:var(--luzmo-color-slider-length, 192px);block-size:var(--luzmo-color-slider-control-track-width, 24px);-webkit-user-select:none;user-select:none;cursor:default;display:block;position:relative}:host([focused]){z-index:2}:host([disabled]){pointer-events:none}:host([disabled]) .gradient{display:none}:host([vertical]){min-block-size:var(--luzmo-color-slider-vertical-minimum-height, var(--luzmo-color-slider-minimum-length, 80px));block-size:var(--luzmo-color-slider-vertical-height, var(--luzmo-color-slider-length, 192px));min-inline-size:0;inline-size:var(--luzmo-color-slider-vertical-control-track-width, var(--luzmo-color-slider-control-track-height, 24px));display:inline-block}:host([vertical]) .handle{inset-inline-start:50%}.handle{inset-block-start:50%;inset-inline-start:0}.checkerboard{--luzmo-color-slider-border-color-local: var( --highcontrast-color-slider-border-color, var(--luzmo-color-slider-border-color, var(--luzmo-border-color)) )}.checkerboard:before{content:"";z-index:1;box-shadow:inset 0 0 0 var(--luzmo-color-slider-border-width, var(--luzmo-border-width)) var(--luzmo-color-slider-border-color-local);border-radius:var(--luzmo-color-slider-border-rounding, var(--luzmo-border-radius-s));position:absolute;top:0;right:0;bottom:0;left:0}:host([disabled]) .checkerboard{--luzmo-color-slider-border-color-local: var( --highcontrast-color-slider-border-color-disabled, var(--luzmo-color-slider-border-color-disabled, var(--luzmo-dimmed-color)) );background:var(--highcontrast-color-slider-background-color-disabled, var(--luzmo-color-slider-background-color-disabled, var(--luzmo-dimmed-color)))}.checkerboard,.gradient{inline-size:100%;block-size:100%;border-radius:var(--luzmo-color-slider-border-rounding, var(--luzmo-border-radius-s))}.gradient:dir(rtl),:host([dir=rtl]) .gradient{transform:scaleX(-1)}.slider{opacity:0;inline-size:100%;block-size:100%;z-index:0;pointer-events:none;margin:0;position:absolute;inset-block-start:0;inset-inline-start:0}';
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+class LuzmoColorSlider extends focusable.Focusable {
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+    this.focused = false;
+    this.label = "hue";
+    this.vertical = false;
+    this.languageResolver = new languageResolution.LanguageResolutionController(this);
+    this.colorController = new ColorController(this, {
+      /* c8 ignore next 3 */
+      applyColorToState: () => {
+        if (this.mode === "opacity") {
+          const color = new tinycolor.TinyColor(this.colorController.color);
+          this.sliderHandlePosition = 100 * color.getAlpha();
+        } else {
+          this.sliderHandlePosition = 100 * (this.colorController.hue / 360);
+        }
+      },
+      extractColorFromState: (controller) => {
+        if (this.mode === "opacity") {
+          return {
+            ...controller.getColor("hsl"),
+            a: this.value
+          };
+        }
+        return {
+          ...controller.getColor("hsl"),
+          h: this.value
+        };
+      },
+      maintains: "saturation"
+    });
+    this.sliderHandlePosition = 0;
+    this.step = 1;
+    this.isLTR = true;
+    this._altered = 0;
+    this._pointerDown = false;
+  }
+  static get styles() {
+    return [lit.unsafeCSS(styles)];
+  }
+  get value() {
+    if (this.mode === "opacity") {
+      return this.colorController.opacity;
+    }
+    return this.colorController.hue;
+  }
+  set value(value) {
+    if (this.mode === "opacity") {
+      this.colorController.opacity = value;
+    } else {
+      this.colorController.hue = value;
+    }
+  }
+  get color() {
+    return this.colorController.color;
+  }
+  set color(color) {
+    this.colorController.color = color;
+  }
+  get altered() {
+    return this._altered;
+  }
+  set altered(altered) {
+    this._altered = altered;
+    this.step = Math.max(1, this.altered * 10);
+  }
+  get focusElement() {
+    return this.input;
+  }
+  handleKeydown(event) {
+    const { key } = event;
+    this.focused = true;
+    this.altered = [event.shiftKey, event.ctrlKey, event.altKey].filter(
+      (_key) => !!_key
+    ).length;
+    let delta = 0;
+    switch (key) {
+      case "ArrowUp": {
+        delta = this.step;
+        break;
+      }
+      case "ArrowDown": {
+        delta = -this.step;
+        break;
+      }
+      case "ArrowLeft": {
+        delta = this.step * (this.isLTR ? -1 : 1);
+        break;
+      }
+      case "ArrowRight": {
+        delta = this.step * (this.isLTR ? 1 : -1);
+        break;
+      }
+      default: {
+        return;
+      }
+    }
+    event.preventDefault();
+    const range = this.mode === "opacity" ? 100 : 360;
+    const mult = 100 / range;
+    this.sliderHandlePosition = Math.min(
+      100,
+      Math.max(0, this.sliderHandlePosition + delta * mult)
+    );
+    this.value = this.mode === "opacity" ? Math.min(1, Math.max(0, this.value + delta / 100)) : Math.min(360, Math.max(0, this.value + delta));
+    this.colorController.applyColorFromState();
+    if (delta !== 0) {
+      this.dispatchEvent(
+        new Event("input", {
+          bubbles: true,
+          composed: true
+        })
+      );
+      this.dispatchEvent(
+        new Event("change", {
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+  }
+  handleInput(event) {
+    const { valueAsNumber } = event.target;
+    this.value = valueAsNumber;
+    this.sliderHandlePosition = 100 * (this.mode === "opacity" ? this.value : this.value / 360);
+    this.colorController.applyColorFromState();
+  }
+  handleChange(event) {
+    this.handleInput(event);
+    this.dispatchEvent(
+      new Event("change", {
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  focus(focusOptions = {}) {
+    super.focus(focusOptions);
+    this.forwardFocus();
+  }
+  forwardFocus() {
+    this.input.focus();
+  }
+  handleFocus() {
+    this.focused = true;
+  }
+  handleBlur() {
+    if (this._pointerDown) {
+      return;
+    }
+    this.altered = 0;
+    this.focused = false;
+  }
+  handlePointerdown(event) {
+    if (event.button !== 0) {
+      event.preventDefault();
+      return;
+    }
+    this._pointerDown = true;
+    this.colorController.savePreviousColor();
+    this.boundingClientRect = this.getBoundingClientRect();
+    event.target.setPointerCapture(event.pointerId);
+    if (event.pointerType === "mouse") {
+      this.focused = true;
+    }
+  }
+  handlePointermove(event) {
+    this.sliderHandlePosition = this.calculateHandlePosition(event);
+    this.value = (this.mode === "opacity" ? 1 : 360) * (this.sliderHandlePosition / 100);
+    this.colorController.applyColorFromState();
+    this.dispatchEvent(
+      new Event("input", {
+        bubbles: true,
+        composed: true,
+        cancelable: true
+      })
+    );
+  }
+  handlePointerup(event) {
+    this._pointerDown = false;
+    event.target.releasePointerCapture(event.pointerId);
+    const applyDefault = this.dispatchEvent(
+      new Event("change", {
+        bubbles: true,
+        composed: true,
+        cancelable: true
+      })
+    );
+    if (!applyDefault) {
+      this.colorController.restorePreviousColor();
+    }
+    this.focus();
+    if (event.pointerType === "mouse") {
+      this.focused = false;
+    }
+  }
+  /**
+   * Returns the value under the cursor
+   * @param: PointerEvent on slider
+   * @return: Slider value that correlates to the position under the pointer
+   */
+  calculateHandlePosition(event) {
+    if (!this.boundingClientRect) {
+      return this.sliderHandlePosition;
+    }
+    const rect = this.boundingClientRect;
+    const minOffset = this.vertical ? rect.top : rect.left;
+    const offset = this.vertical ? event.clientY : event.clientX;
+    const size = this.vertical ? rect.height : rect.width;
+    const percent = Math.max(0, Math.min(1, (offset - minOffset) / size));
+    const sliderHandlePosition = this.vertical || !this.isLTR ? 100 - 100 * percent : 100 * percent;
+    return sliderHandlePosition;
+  }
+  handleGradientPointerdown(event) {
+    if (event.button !== 0) {
+      return;
+    }
+    event.stopPropagation();
+    event.preventDefault();
+    this.handle.dispatchEvent(new PointerEvent("pointerdown", event));
+    this.handlePointermove(event);
+  }
+  get handlePositionStyles() {
+    return `${this.vertical ? "inset-block-end" : "inset-inline-start"}: ${this.sliderHandlePosition}%`;
+  }
+  get getColorSliderStyle() {
+    const orientation = this.vertical ? "top" : "right";
+    if (this.mode === "opacity") {
+      const color = new tinycolor.TinyColor(this.colorController.color).setAlpha(1).toRgbString();
+      return {
+        background: `linear-gradient(to ${orientation}, transparent, ${color})`
+      };
+    }
+    return {
+      background: `linear-gradient(to ${orientation}, var(--luzmo-color-slider-gradient, var(--luzmo-color-slider-gradient-fallback)))`
+    };
+  }
+  render() {
+    return lit.html`
+      <div
+        class="opacity-checkerboard checkerboard"
+        role="presentation"
+        @pointerdown=${this.handleGradientPointerdown}
+      >
+        <div
+          class="gradient"
+          role="presentation"
+          style=${styleMap_js.styleMap(this.getColorSliderStyle)}
+        >
+          <slot name="gradient"></slot>
+        </div>
+      </div>
+      <luzmo-color-handle
+        tabindex=${ifDefined_js.ifDefined(this.focused ? void 0 : "0")}
+        @focus=${this.forwardFocus}
+        ?focused=${this.focused}
+        class="handle"
+        color=${this.mode === "opacity" ? this.color : "hsl(" + this.value + ", 100%, 50%)"}
+        ?disabled=${this.disabled}
+        style=${this.handlePositionStyles}
+        ${streamingListener.streamingListener({
+      start: ["pointerdown", this.handlePointerdown],
+      streamInside: ["pointermove", this.handlePointermove],
+      end: [
+        ["pointerup", "pointercancel", "pointerleave"],
+        this.handlePointerup
+      ]
+    })}
+      ></luzmo-color-handle>
+      <input
+        type="range"
+        class="slider"
+        min="0"
+        max=${this.mode === "opacity" ? "100" : "360"}
+        aria-orientation=${ifDefined_js.ifDefined(this.vertical ? "vertical" : void 0)}
+        orient=${ifDefined_js.ifDefined(this.vertical ? "vertical" : void 0)}
+        step=${this.step}
+        aria-label=${this.label}
+        .value=${String(
+      this.mode === "opacity" ? this.value * 100 : this.value
+    )}
+        aria-valuetext=${`${new Intl.NumberFormat(
+      this.languageResolver.language,
+      {
+        maximumFractionDigits: 0,
+        minimumIntegerDigits: 1,
+        style: "unit",
+        unit: this.mode === "opacity" ? "percent" : "degree",
+        unitDisplay: "narrow"
+      }
+    ).format(this.mode === "opacity" ? this.value * 100 : this.value)}`}
+        @input=${this.handleInput}
+        @change=${this.handleChange}
+        @keydown=${this.handleKeydown}
+      />
+    `;
+  }
+  firstUpdated(changed) {
+    super.firstUpdated(changed);
+    this.boundingClientRect = this.getBoundingClientRect();
+    this.addEventListener("focus", this.handleFocus);
+    this.addEventListener("blur", this.handleBlur);
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("mode")) {
+      this.handle.style.insetInlineStart = "";
+      this.handle.style.insetBlockEnd = "";
+      if (this.mode === "opacity") {
+        this.colorController.color = new tinycolor.TinyColor(
+          this.colorController.color
+        ).toRgbString();
+        this.handle.style.insetInlineStart = 100 * this.colorController.opacity + "%";
+      }
+    }
+  }
+}
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], LuzmoColorSlider.prototype, "dir", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], LuzmoColorSlider.prototype, "mode", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoColorSlider.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoColorSlider.prototype, "focused", 2);
+__decorateClass([
+  decorators_js.query(".handle")
+], LuzmoColorSlider.prototype, "handle", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], LuzmoColorSlider.prototype, "label", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoColorSlider.prototype, "vertical", 2);
+__decorateClass([
+  decorators_js.property({ type: Number })
+], LuzmoColorSlider.prototype, "value", 1);
+__decorateClass([
+  decorators_js.property({ type: Number, reflect: true })
+], LuzmoColorSlider.prototype, "sliderHandlePosition", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], LuzmoColorSlider.prototype, "color", 1);
+__decorateClass([
+  decorators_js.property({ type: Number })
+], LuzmoColorSlider.prototype, "step", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, attribute: "is-ltr" })
+], LuzmoColorSlider.prototype, "isLTR", 2);
+__decorateClass([
+  decorators_js.query("input")
+], LuzmoColorSlider.prototype, "input", 2);
+if (!customElements.get("luzmo-color-slider")) {
+  customElements.define("luzmo-color-slider", LuzmoColorSlider);
+}
+exports.LuzmoColorSlider = LuzmoColorSlider;