@uplynk/lynk-design 1.17.1 → 1.18.0

package/dist/chunks/chunk.UNDQHDJV.js

@@ -0,0 +1,1063 @@
+import {
+  LynkVisuallyHidden
+} from "./chunk.XUJTWHQI.js";
+import {
+  drag
+} from "./chunk.A4SOQOK5.js";
+import {
+  clamp
+} from "./chunk.HF7GESMZ.js";
+import {
+  LynkInput
+} from "./chunk.IJYKONVW.js";
+import {
+  LynkDropdown
+} from "./chunk.2VEQIGIO.js";
+import {
+  LynkFormField
+} from "./chunk.OAZKEJDW.js";
+import {
+  color_picker_styles_default
+} from "./chunk.OZKINDDP.js";
+import {
+  defaultValue
+} from "./chunk.GI7VDIWX.js";
+import {
+  LynkButtonGroup
+} from "./chunk.BQLEZGRD.js";
+import {
+  LynkButton
+} from "./chunk.ILMZMVH2.js";
+import {
+  FormControlController
+} from "./chunk.HGPZOHO6.js";
+import {
+  HasSlotController
+} from "./chunk.OW5NIGGX.js";
+import {
+  LocalizeController
+} from "./chunk.NJBJM2FD.js";
+import {
+  LynkIcon
+} from "./chunk.6AB2BRLU.js";
+import {
+  watch
+} from "./chunk.GQZ7EGMM.js";
+import {
+  LynkElement
+} from "./chunk.XVGZ4RY7.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/color-picker/color-picker.component.ts
+import { TinyColor } from "@ctrl/tinycolor";
+import { html } from "lit";
+import { eventOptions, property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
+var hasEyeDropper = "EyeDropper" in window;
+var LynkColorPicker = class extends LynkElement {
+  constructor() {
+    super();
+    this.formControlController = new FormControlController(this);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "help-text",
+      "help-tip",
+      "label",
+      "label-end",
+      "help-text-end"
+    );
+    this.isSafeValue = false;
+    this.localize = new LocalizeController(this);
+    this.hasFocus = false;
+    this.isDraggingGridHandle = false;
+    this.isEmpty = false;
+    this.inputValue = "";
+    this.hue = 0;
+    this.saturation = 100;
+    this.brightness = 100;
+    this.alpha = 100;
+    this.value = "";
+    this.defaultValue = "";
+    this.label = "";
+    this.helpText = "";
+    this.labelEnd = "";
+    this.helpTextEnd = "";
+    this.helpTip = "";
+    this.state = "default";
+    this.dirty = false;
+    this.labelInline = false;
+    this.format = "hex";
+    this.inline = false;
+    this.size = "medium";
+    this.noFormatToggle = false;
+    this.name = "";
+    this.disabled = false;
+    this.readonly = false;
+    this.hoist = false;
+    this.opacity = false;
+    this.placement = "bottom-start";
+    this.uppercase = false;
+    this.swatches = "";
+    this.swatchesOnly = false;
+    this.form = "";
+    this.required = false;
+    this.optional = false;
+    this.handleFocusIn = () => {
+      this.hasFocus = true;
+      this.emit("ev-focus");
+    };
+    this.handleFocusOut = () => {
+      this.hasFocus = false;
+      this.emit("ev-blur");
+    };
+    this.addEventListener("focusin", this.handleFocusIn);
+    this.addEventListener("focusout", this.handleFocusOut);
+  }
+  /** Gets the validity state object */
+  get validity() {
+    return this.input.validity;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    return this.input.validationMessage;
+  }
+  firstUpdated() {
+    this.input.updateComplete.then(() => {
+      this.formControlController.updateValidity();
+    });
+  }
+  handleCopy() {
+    this.input.select();
+    document.execCommand("copy");
+    this.previewButton.focus();
+    this.previewButton.classList.add("color-picker__preview-color--copied");
+    this.previewButton.addEventListener("animationend", () => {
+      this.previewButton.classList.remove("color-picker__preview-color--copied");
+    });
+  }
+  handleFormatToggle() {
+    const formats = ["hex", "rgb", "hsl", "hsv"];
+    const nextIndex = (formats.indexOf(this.format) + 1) % formats.length;
+    this.format = formats[nextIndex];
+    this.setColor(this.value);
+    this.emit("ev-change");
+    this.emit("ev-input");
+  }
+  handleAlphaDrag(event) {
+    const container = this.shadowRoot.querySelector(".color-picker__slider.color-picker__alpha");
+    const handle = container.querySelector(".color-picker__slider-handle");
+    const { width } = container.getBoundingClientRect();
+    let initialValue = this.value;
+    let currentValue = this.value;
+    handle.focus();
+    event.preventDefault();
+    drag(container, {
+      onMove: (x) => {
+        this.alpha = clamp(x / width * 100, 0, 100);
+        this.syncValues();
+        if (this.value !== currentValue) {
+          currentValue = this.value;
+          this.emit("ev-input");
+        }
+      },
+      onStop: () => {
+        if (this.value !== initialValue) {
+          initialValue = this.value;
+          this.emit("ev-change");
+        }
+      },
+      initialEvent: event
+    });
+  }
+  handleHueDrag(event) {
+    const container = this.shadowRoot.querySelector(".color-picker__slider.color-picker__hue");
+    const handle = container.querySelector(".color-picker__slider-handle");
+    const { width } = container.getBoundingClientRect();
+    let initialValue = this.value;
+    let currentValue = this.value;
+    handle.focus();
+    event.preventDefault();
+    drag(container, {
+      onMove: (x) => {
+        this.hue = clamp(x / width * 360, 0, 360);
+        this.syncValues();
+        if (this.value !== currentValue) {
+          currentValue = this.value;
+          this.emit("ev-input");
+        }
+      },
+      onStop: () => {
+        if (this.value !== initialValue) {
+          initialValue = this.value;
+          this.emit("ev-change");
+        }
+      },
+      initialEvent: event
+    });
+  }
+  handleGridDrag(event) {
+    const grid = this.shadowRoot.querySelector(".color-picker__grid");
+    const handle = grid.querySelector(".color-picker__grid-handle");
+    const { width, height } = grid.getBoundingClientRect();
+    let initialValue = this.value;
+    let currentValue = this.value;
+    handle.focus();
+    event.preventDefault();
+    this.isDraggingGridHandle = true;
+    drag(grid, {
+      onMove: (x, y) => {
+        this.saturation = clamp(x / width * 100, 0, 100);
+        this.brightness = clamp(100 - y / height * 100, 0, 100);
+        this.syncValues();
+        if (this.value !== currentValue) {
+          currentValue = this.value;
+          this.emit("ev-input");
+        }
+      },
+      onStop: () => {
+        this.isDraggingGridHandle = false;
+        if (this.value !== initialValue) {
+          initialValue = this.value;
+          this.emit("ev-change");
+        }
+      },
+      initialEvent: event
+    });
+  }
+  handleAlphaKeyDown(event) {
+    const increment = event.shiftKey ? 10 : 1;
+    const oldValue = this.value;
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      this.alpha = clamp(this.alpha - increment, 0, 100);
+      this.syncValues();
+    }
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      this.alpha = clamp(this.alpha + increment, 0, 100);
+      this.syncValues();
+    }
+    if (event.key === "Home") {
+      event.preventDefault();
+      this.alpha = 0;
+      this.syncValues();
+    }
+    if (event.key === "End") {
+      event.preventDefault();
+      this.alpha = 100;
+      this.syncValues();
+    }
+    if (this.value !== oldValue) {
+      this.emit("ev-change");
+      this.emit("ev-input");
+    }
+  }
+  handleHueKeyDown(event) {
+    const increment = event.shiftKey ? 10 : 1;
+    const oldValue = this.value;
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      this.hue = clamp(this.hue - increment, 0, 360);
+      this.syncValues();
+    }
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      this.hue = clamp(this.hue + increment, 0, 360);
+      this.syncValues();
+    }
+    if (event.key === "Home") {
+      event.preventDefault();
+      this.hue = 0;
+      this.syncValues();
+    }
+    if (event.key === "End") {
+      event.preventDefault();
+      this.hue = 360;
+      this.syncValues();
+    }
+    if (this.value !== oldValue) {
+      this.emit("ev-change");
+      this.emit("ev-input");
+    }
+  }
+  handleGridKeyDown(event) {
+    const increment = event.shiftKey ? 10 : 1;
+    const oldValue = this.value;
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      this.saturation = clamp(this.saturation - increment, 0, 100);
+      this.syncValues();
+    }
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      this.saturation = clamp(this.saturation + increment, 0, 100);
+      this.syncValues();
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      this.brightness = clamp(this.brightness + increment, 0, 100);
+      this.syncValues();
+    }
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      this.brightness = clamp(this.brightness - increment, 0, 100);
+      this.syncValues();
+    }
+    if (this.value !== oldValue) {
+      this.emit("ev-change");
+      this.emit("ev-input");
+    }
+  }
+  handleInputChange(event) {
+    const target = event.target;
+    const oldValue = this.value;
+    event.stopPropagation();
+    if (this.input.value) {
+      this.setColor(target.value);
+      target.value = this.value;
+    } else {
+      this.value = "";
+    }
+    if (this.value !== oldValue) {
+      this.emit("ev-change");
+      this.emit("ev-input");
+    }
+  }
+  handleInputInput(event) {
+    this.formControlController.updateValidity();
+    event.stopPropagation();
+  }
+  handleInputKeyDown(event) {
+    if (event.key === "Enter") {
+      const oldValue = this.value;
+      if (this.input.value) {
+        this.setColor(this.input.value);
+        this.input.value = this.value;
+        if (this.value !== oldValue) {
+          this.emit("ev-change");
+          this.emit("ev-input");
+        }
+        setTimeout(() => this.input.select());
+      } else {
+        this.hue = 0;
+      }
+    }
+  }
+  handleInputInvalid(event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
+  handleTouchMove(event) {
+    event.preventDefault();
+  }
+  parseColor(colorString) {
+    const color = new TinyColor(colorString);
+    if (!color.isValid) {
+      return null;
+    }
+    const hslColor = color.toHsl();
+    const hsl = {
+      h: hslColor.h,
+      s: hslColor.s * 100,
+      l: hslColor.l * 100,
+      a: hslColor.a
+    };
+    const rgb = color.toRgb();
+    const hex = color.toHexString();
+    const hexa = color.toHex8String();
+    const hsvColor = color.toHsv();
+    const hsv = {
+      h: hsvColor.h,
+      s: hsvColor.s * 100,
+      v: hsvColor.v * 100,
+      a: hsvColor.a
+    };
+    return {
+      hsl: {
+        h: hsl.h,
+        s: hsl.s,
+        l: hsl.l,
+        string: this.setLetterCase(`hsl(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%)`)
+      },
+      hsla: {
+        h: hsl.h,
+        s: hsl.s,
+        l: hsl.l,
+        a: hsl.a,
+        string: this.setLetterCase(
+          `hsla(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%, ${hsl.a.toFixed(2).toString()})`
+        )
+      },
+      hsv: {
+        h: hsv.h,
+        s: hsv.s,
+        v: hsv.v,
+        string: this.setLetterCase(`hsv(${Math.round(hsv.h)}, ${Math.round(hsv.s)}%, ${Math.round(hsv.v)}%)`)
+      },
+      hsva: {
+        h: hsv.h,
+        s: hsv.s,
+        v: hsv.v,
+        a: hsv.a,
+        string: this.setLetterCase(
+          `hsva(${Math.round(hsv.h)}, ${Math.round(hsv.s)}%, ${Math.round(hsv.v)}%, ${hsv.a.toFixed(2).toString()})`
+        )
+      },
+      rgb: {
+        r: rgb.r,
+        g: rgb.g,
+        b: rgb.b,
+        string: this.setLetterCase(`rgb(${Math.round(rgb.r)}, ${Math.round(rgb.g)}, ${Math.round(rgb.b)})`)
+      },
+      rgba: {
+        r: rgb.r,
+        g: rgb.g,
+        b: rgb.b,
+        a: rgb.a,
+        string: this.setLetterCase(
+          `rgba(${Math.round(rgb.r)}, ${Math.round(rgb.g)}, ${Math.round(rgb.b)}, ${rgb.a.toFixed(2).toString()})`
+        )
+      },
+      hex: this.setLetterCase(hex),
+      hexa: this.setLetterCase(hexa)
+    };
+  }
+  setColor(colorString) {
+    const newColor = this.parseColor(colorString);
+    if (newColor === null) {
+      return false;
+    }
+    this.hue = newColor.hsva.h;
+    this.saturation = newColor.hsva.s;
+    this.brightness = newColor.hsva.v;
+    this.alpha = this.opacity ? newColor.hsva.a * 100 : 100;
+    this.syncValues();
+    return true;
+  }
+  setLetterCase(string) {
+    if (typeof string !== "string") {
+      return "";
+    }
+    return this.uppercase ? string.toUpperCase() : string.toLowerCase();
+  }
+  async syncValues() {
+    const currentColor = this.parseColor(
+      `hsva(${this.hue}, ${this.saturation}%, ${this.brightness}%, ${this.alpha / 100})`
+    );
+    if (currentColor === null) {
+      return;
+    }
+    if (this.format === "hsl") {
+      this.inputValue = this.opacity ? currentColor.hsla.string : currentColor.hsl.string;
+    } else if (this.format === "rgb") {
+      this.inputValue = this.opacity ? currentColor.rgba.string : currentColor.rgb.string;
+    } else if (this.format === "hsv") {
+      this.inputValue = this.opacity ? currentColor.hsva.string : currentColor.hsv.string;
+    } else {
+      this.inputValue = this.opacity ? currentColor.hexa : currentColor.hex;
+    }
+    this.isSafeValue = true;
+    this.value = this.inputValue;
+    await this.updateComplete;
+    this.isSafeValue = false;
+  }
+  handleAfterHide() {
+    this.previewButton.classList.remove("color-picker__preview-color--copied");
+  }
+  handleEyeDropper() {
+    if (!hasEyeDropper) {
+      return;
+    }
+    const eyeDropper = new EyeDropper();
+    eyeDropper.open().then((colorSelectionResult) => {
+      const oldValue = this.value;
+      this.setColor(colorSelectionResult.sRGBHex);
+      if (this.value !== oldValue) {
+        this.emit("ev-change");
+        this.emit("ev-input");
+      }
+    }).catch(() => {
+    });
+  }
+  selectSwatch(color) {
+    const oldValue = this.value;
+    if (!this.disabled) {
+      this.setColor(color);
+      if (this.value !== oldValue) {
+        this.emit("ev-change");
+        this.emit("ev-input");
+      }
+    }
+  }
+  /** Generates a hex string from HSV values. Hue must be 0-360. All other arguments must be 0-100. */
+  getHexString(hue, saturation, brightness, alpha = 100) {
+    const color = new TinyColor(`hsva(${hue}, ${saturation}%, ${brightness}%, ${alpha / 100})`);
+    if (!color.isValid) {
+      return "";
+    }
+    return color.toHex8String();
+  }
+  // Prevents nested components from leaking events
+  stopNestedEventPropagation(event) {
+    event.stopImmediatePropagation();
+  }
+  handleFormatChange() {
+    this.syncValues();
+  }
+  handleOpacityChange() {
+    this.alpha = 100;
+  }
+  handleValueChange(oldValue, newValue) {
+    this.isEmpty = !newValue;
+    if (!newValue) {
+      this.hue = 0;
+      this.saturation = 0;
+      this.brightness = 100;
+      this.alpha = 100;
+    }
+    if (!this.isSafeValue) {
+      const newColor = this.parseColor(newValue);
+      if (newColor !== null) {
+        this.inputValue = this.value;
+        this.hue = newColor.hsva.h;
+        this.saturation = newColor.hsva.s;
+        this.brightness = newColor.hsva.v;
+        this.alpha = newColor.hsva.a * 100;
+        this.syncValues();
+      } else {
+        this.inputValue = oldValue != null ? oldValue : "";
+      }
+    }
+  }
+  /** Sets focus on the color picker. */
+  focus(options) {
+    if (this.inline) {
+      this.base.focus(options);
+    } else {
+      this.trigger.focus(options);
+    }
+  }
+  /** Removes focus from the color picker. */
+  blur() {
+    var _a;
+    const elementToBlur = this.inline ? this.base : this.trigger;
+    if (this.hasFocus) {
+      elementToBlur.focus({ preventScroll: true });
+      elementToBlur.blur();
+    }
+    if ((_a = this.dropdown) == null ? void 0 : _a.open) {
+      this.dropdown.hide();
+    }
+  }
+  /** Returns the current value as a string in the specified format. */
+  getFormattedValue(format = "hex") {
+    const currentColor = this.parseColor(
+      `hsva(${this.hue}, ${this.saturation}%, ${this.brightness}%, ${this.alpha / 100})`
+    );
+    if (currentColor === null) {
+      return "";
+    }
+    switch (format) {
+      case "hex":
+        return currentColor.hex;
+      case "hexa":
+        return currentColor.hexa;
+      case "rgb":
+        return currentColor.rgb.string;
+      case "rgba":
+        return currentColor.rgba.string;
+      case "hsl":
+        return currentColor.hsl.string;
+      case "hsla":
+        return currentColor.hsla.string;
+      case "hsv":
+        return currentColor.hsv.string;
+      case "hsva":
+        return currentColor.hsva.string;
+      default:
+        return "";
+    }
+  }
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    return this.input.checkValidity();
+  }
+  /** Gets the associated form, if one exists. */
+  getForm() {
+    return this.formControlController.getForm();
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    if (!this.inline && !this.validity.valid) {
+      this.dropdown.show();
+      this.addEventListener("lynk-after-show", () => this.input.reportValidity(), { once: true });
+      if (!this.disabled) {
+        this.formControlController.emitInvalidEvent();
+      }
+      return false;
+    }
+    return this.input.reportValidity();
+  }
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message) {
+    this.input.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+  render() {
+    const gridHandleX = this.saturation;
+    const gridHandleY = 100 - this.brightness;
+    const swatches = Array.isArray(this.swatches) ? this.swatches : this.swatches.split(";").filter((color) => color.trim() !== "");
+    const colorPicker = html`
+      <div
+        part="base"
+        class=${classMap({
+      "color-picker": true,
+      "color-picker--inline": this.inline,
+      "color-picker--disabled": this.disabled,
+      "color-picker--focused": this.hasFocus
+    })}
+        aria-disabled=${this.disabled ? "true" : "false"}
+        aria-readonly=${this.readonly ? "true" : "false"}
+        aria-labelledby="label"
+        tabindex=${this.inline ? "0" : "-1"}
+      >
+        ${this.inline ? html`
+                <lynk-visually-hidden id="label">
+                  <slot name="label">${this.label}</slot>
+                </lynk-visually-hidden>
+              ` : null}
+        ${!this.swatchesOnly || swatches.length === 0 ? html`
+                <div
+                  part="grid"
+                  class="color-picker__grid"
+                  style=${styleMap({ backgroundColor: this.getHexString(this.hue, 100, 100) })}
+                  @pointerdown=${this.handleGridDrag}
+                  @touchmove=${this.handleTouchMove}
+                >
+                  <span
+                    part="grid-handle"
+                    class=${classMap({
+      "color-picker__grid-handle": true,
+      "color-picker__grid-handle--dragging": this.isDraggingGridHandle
+    })}
+                    style=${styleMap({
+      top: `${gridHandleY}%`,
+      left: `${gridHandleX}%`,
+      backgroundColor: this.getHexString(this.hue, this.saturation, this.brightness, this.alpha)
+    })}
+                    role="application"
+                    aria-label="HSV"
+                    tabindex=${ifDefined(this.disabled ? void 0 : "0")}
+                    @keydown=${this.handleGridKeyDown}
+                  ></span>
+                </div>
+
+                <div class="color-picker__controls">
+                  <div class="color-picker__sliders">
+                    <div
+                      part="slider hue-slider"
+                      class="color-picker__hue color-picker__slider"
+                      @pointerdown=${this.handleHueDrag}
+                      @touchmove=${this.handleTouchMove}
+                    >
+                      <span
+                        part="slider-handle hue-slider-handle"
+                        class="color-picker__slider-handle"
+                        style=${styleMap({
+      left: `${this.hue === 0 ? 0 : 100 / (360 / this.hue)}%`
+    })}
+                        role="slider"
+                        aria-label="hue"
+                        aria-orientation="horizontal"
+                        aria-valuemin="0"
+                        aria-valuemax="360"
+                        aria-valuenow=${`${Math.round(this.hue)}`}
+                        tabindex=${ifDefined(this.disabled ? void 0 : "0")}
+                        @keydown=${this.handleHueKeyDown}
+                      ></span>
+                    </div>
+
+                    ${this.opacity ? html`
+                            <div
+                              part="slider opacity-slider"
+                              class="color-picker__alpha color-picker__slider color-picker__transparent-bg"
+                              @pointerdown="${this.handleAlphaDrag}"
+                              @touchmove=${this.handleTouchMove}
+                            >
+                              <div
+                                class="color-picker__alpha-gradient"
+                                style=${styleMap({
+      backgroundImage: `linear-gradient(
+                          to right,
+                          ${this.getHexString(this.hue, this.saturation, this.brightness, 0)} 0%,
+                          ${this.getHexString(this.hue, this.saturation, this.brightness, 100)} 100%
+                        )`
+    })}
+                              ></div>
+                              <span
+                                part="slider-handle opacity-slider-handle"
+                                class="color-picker__slider-handle"
+                                style=${styleMap({
+      left: `${this.alpha}%`
+    })}
+                                role="slider"
+                                aria-label="alpha"
+                                aria-orientation="horizontal"
+                                aria-valuemin="0"
+                                aria-valuemax="100"
+                                aria-valuenow=${Math.round(this.alpha)}
+                                tabindex=${ifDefined(this.disabled ? void 0 : "0")}
+                                @keydown=${this.handleAlphaKeyDown}
+                              ></span>
+                            </div>
+                          ` : ""}
+                  </div>
+
+                  <button
+                    type="button"
+                    part="preview"
+                    class="color-picker__preview color-picker__transparent-bg"
+                    aria-label=${this.localize.term("copy")}
+                    style=${styleMap({
+      "--preview-color": this.getHexString(this.hue, this.saturation, this.brightness, this.alpha)
+    })}
+                    @click=${this.handleCopy}
+                  ></button>
+                </div>
+
+                <div class="color-picker__user-input" aria-live="polite">
+                  <lynk-input
+                    part="input"
+                    type="text"
+                    name=${this.name}
+                    autocomplete="off"
+                    autocorrect="off"
+                    autocapitalize="off"
+                    spellcheck="false"
+                    .size=${this.size === "small" ? "small" : "medium"}
+                    value=${this.isEmpty ? "" : this.inputValue}
+                    ?required=${this.required}
+                    ?disabled=${this.disabled}
+                    aria-label=${this.localize.term("currentValue")}
+                    @keydown=${this.handleInputKeyDown}
+                    @ev-change=${this.handleInputChange}
+                    @ev-input=${this.handleInputInput}
+                    @ev-invalid=${this.handleInputInvalid}
+                    @ev-blur=${this.stopNestedEventPropagation}
+                    @ev-focus=${this.stopNestedEventPropagation}
+                  ></lynk-input>
+
+                  <lynk-button-group>
+                    ${!this.noFormatToggle ? html`
+                            <lynk-button
+                              part="format-button"
+                              .size=${this.size === "small" ? "small" : "medium"}
+                              aria-label=${this.localize.term("toggleColorFormat")}
+                              exportparts="
+                      base:format-button__base,
+                      prefix:format-button__prefix,
+                      label:format-button__label,
+                      suffix:format-button__suffix,
+                      caret:format-button__caret
+                    "
+                              @click=${this.handleFormatToggle}
+                              @ev-blur=${this.stopNestedEventPropagation}
+                              @ev-focus=${this.stopNestedEventPropagation}
+                            >
+                              ${this.setLetterCase(this.format)}
+                            </lynk-button>
+                          ` : ""}
+                    ${hasEyeDropper ? html`
+                            <lynk-button
+                              part="eye-dropper-button"
+                              .size=${this.size === "small" ? "small" : "medium"}
+                              exportparts="
+                      base:eye-dropper-button__base,
+                      prefix:eye-dropper-button__prefix,
+                      label:eye-dropper-button__label,
+                      suffix:eye-dropper-button__suffix,
+                      caret:eye-dropper-button__caret
+                    "
+                              @click=${this.handleEyeDropper}
+                              @ev-blur=${this.stopNestedEventPropagation}
+                              @ev-focus=${this.stopNestedEventPropagation}
+                            >
+                              <lynk-icon
+                                library="system"
+                                name="eyedropper"
+                                label=${this.localize.term("selectAColorFromTheScreen")}
+                              ></lynk-icon>
+                            </lynk-button>
+                          ` : ""}
+                  </lynk-button-group>
+                </div>
+              ` : ""}
+        ${swatches.length > 0 ? html`
+                <div part="swatches" class="color-picker__swatches">
+                  ${swatches.map((swatch) => {
+      const parsedColor = this.parseColor(swatch);
+      if (!parsedColor) {
+        console.error(`Unable to parse swatch color: "${swatch}"`, this);
+        return "";
+      }
+      return html`
+                      <div
+                        part="swatch"
+                        class="color-picker__swatch color-picker__transparent-bg"
+                        tabindex=${ifDefined(this.disabled ? void 0 : "0")}
+                        role="button"
+                        aria-label=${swatch}
+                        @click=${() => this.selectSwatch(swatch)}
+                        @keydown=${(event) => !this.disabled && event.key === "Enter" && this.setColor(parsedColor.hexa)}
+                      >
+                        <div
+                          class="color-picker__swatch-color"
+                          style=${styleMap({ backgroundColor: parsedColor.hexa })}
+                        ></div>
+                      </div>
+                    `;
+    })}
+                </div>
+              ` : ""}
+      </div>
+    `;
+    if (this.inline) {
+      return html`
+        <lynk-form-field
+          .size=${this.size}
+          .state=${this.state}
+          .label=${this.hasSlotController.test("label") ? "" : this.label}
+          .helpText=${this.hasSlotController.test("help-text") ? "" : this.helpText}
+          .helpTip=${this.hasSlotController.test("help-tip") ? "" : this.helpTip}
+          .labelEnd=${this.hasSlotController.test("label-end") ? "" : this.labelEnd}
+          .helpTextEnd=${this.hasSlotController.test("help-text-end") ? "" : this.helpTextEnd}
+          .required=${this.required}
+          .optional=${this.optional}
+          .readonly=${this.readonly}
+          .dirty=${this.dirty}
+          .inline=${this.labelInline}
+          ?data-user-invalid=${this.hasAttribute("data-user-invalid")}
+          ?data-user-valid=${this.hasAttribute("data-user-valid")}
+          ?data-invalid=${this.hasAttribute("data-invalid")}
+          ?data-valid=${this.hasAttribute("data-valid")}
+        >
+          ${this.hasSlotController.test("label") ? html`<slot name="label" slot="label"></slot>` : ""}
+          ${this.hasSlotController.test("help-text") ? html`<slot name="help-text" slot="help-text"></slot>` : ""}
+          ${this.hasSlotController.test("help-tip") ? html`<slot name="help-tip" slot="help-tip"></slot>` : ""}
+          ${this.hasSlotController.test("label-end") ? html`<slot name="label-end" slot="label-end"></slot>` : ""}
+          ${this.hasSlotController.test("help-text-end") ? html`<slot name="help-text-end" slot="help-text-end"></slot>` : ""}
+          ${colorPicker}
+        </lynk-form-field>
+      `;
+    }
+    return html`
+      <lynk-form-field
+        .size=${this.size}
+        .state=${this.state}
+        .label=${this.hasSlotController.test("label") ? "" : this.label}
+        .helpText=${this.hasSlotController.test("help-text") ? "" : this.helpText}
+        .helpTip=${this.hasSlotController.test("help-tip") ? "" : this.helpTip}
+        .labelEnd=${this.hasSlotController.test("label-end") ? "" : this.labelEnd}
+        .helpTextEnd=${this.hasSlotController.test("help-text-end") ? "" : this.helpTextEnd}
+        .required=${this.required}
+        .optional=${this.optional}
+        .readonly=${this.readonly}
+        .dirty=${this.dirty}
+        .inline=${this.labelInline}
+        ?data-user-invalid=${this.hasAttribute("data-user-invalid")}
+        ?data-user-valid=${this.hasAttribute("data-user-valid")}
+        ?data-invalid=${this.hasAttribute("data-invalid")}
+        ?data-valid=${this.hasAttribute("data-valid")}
+      >
+        ${this.hasSlotController.test("label") ? html`<slot name="label" slot="label"></slot>` : ""}
+        ${this.hasSlotController.test("help-text") ? html`<slot name="help-text" slot="help-text"></slot>` : ""}
+        ${this.hasSlotController.test("help-tip") ? html`<slot name="help-tip" slot="help-tip"></slot>` : ""}
+        ${this.hasSlotController.test("label-end") ? html`<slot name="label-end" slot="label-end"></slot>` : ""}
+        ${this.hasSlotController.test("help-text-end") ? html`<slot name="help-text-end" slot="help-text-end"></slot>` : ""}
+        <lynk-dropdown
+          class="color-dropdown"
+          aria-disabled=${this.disabled ? "true" : "false"}
+          .containingElement=${this}
+          ?disabled=${this.disabled || this.readonly}
+          ?hoist=${this.hoist}
+          .placement=${this.placement}
+          @lynk-after-hide=${this.handleAfterHide}
+        >
+          <button
+            part="trigger"
+            slot="trigger"
+            class=${classMap({
+      "color-dropdown__trigger": true,
+      "color-dropdown__trigger--disabled": this.disabled,
+      "color-dropdown__trigger--small": this.size === "small",
+      "color-dropdown__trigger--medium": this.size === "medium",
+      "color-dropdown__trigger--large": this.size === "large",
+      "color-dropdown__trigger--empty": this.isEmpty,
+      "color-dropdown__trigger--focused": this.hasFocus,
+      "color-picker__transparent-bg": true
+    })}
+            style=${styleMap({
+      color: this.getHexString(this.hue, this.saturation, this.brightness, this.alpha)
+    })}
+            type="button"
+          >
+            <lynk-visually-hidden>
+              <slot name="label">${this.label}</slot>
+            </lynk-visually-hidden>
+          </button>
+          ${colorPicker}
+        </lynk-dropdown>
+      </lynk-form-field>
+    `;
+  }
+};
+LynkColorPicker.styles = [component_styles_default, color_picker_styles_default];
+LynkColorPicker.dependencies = {
+  "lynk-button-group": LynkButtonGroup,
+  "lynk-button": LynkButton,
+  "lynk-dropdown": LynkDropdown,
+  "lynk-form-field": LynkFormField,
+  "lynk-icon": LynkIcon,
+  "lynk-input": LynkInput,
+  "lynk-visually-hidden": LynkVisuallyHidden
+};
+__decorateClass([
+  query('[part~="base"]')
+], LynkColorPicker.prototype, "base", 2);
+__decorateClass([
+  query('[part~="input"]')
+], LynkColorPicker.prototype, "input", 2);
+__decorateClass([
+  query(".color-dropdown")
+], LynkColorPicker.prototype, "dropdown", 2);
+__decorateClass([
+  query('[part~="preview"]')
+], LynkColorPicker.prototype, "previewButton", 2);
+__decorateClass([
+  query('[part~="trigger"]')
+], LynkColorPicker.prototype, "trigger", 2);
+__decorateClass([
+  state()
+], LynkColorPicker.prototype, "hasFocus", 2);
+__decorateClass([
+  state()
+], LynkColorPicker.prototype, "isDraggingGridHandle", 2);
+__decorateClass([
+  state()
+], LynkColorPicker.prototype, "isEmpty", 2);
+__decorateClass([
+  state()
+], LynkColorPicker.prototype, "inputValue", 2);
+__decorateClass([
+  state()
+], LynkColorPicker.prototype, "hue", 2);
+__decorateClass([
+  state()
+], LynkColorPicker.prototype, "saturation", 2);
+__decorateClass([
+  state()
+], LynkColorPicker.prototype, "brightness", 2);
+__decorateClass([
+  state()
+], LynkColorPicker.prototype, "alpha", 2);
+__decorateClass([
+  property()
+], LynkColorPicker.prototype, "value", 2);
+__decorateClass([
+  defaultValue()
+], LynkColorPicker.prototype, "defaultValue", 2);
+__decorateClass([
+  property()
+], LynkColorPicker.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: "help-text" })
+], LynkColorPicker.prototype, "helpText", 2);
+__decorateClass([
+  property({ attribute: "label-end" })
+], LynkColorPicker.prototype, "labelEnd", 2);
+__decorateClass([
+  property({ attribute: "help-text-end" })
+], LynkColorPicker.prototype, "helpTextEnd", 2);
+__decorateClass([
+  property({ attribute: "help-tip" })
+], LynkColorPicker.prototype, "helpTip", 2);
+__decorateClass([
+  property({ reflect: true })
+], LynkColorPicker.prototype, "state", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkColorPicker.prototype, "dirty", 2);
+__decorateClass([
+  property({ attribute: "label-inline", type: Boolean, reflect: true })
+], LynkColorPicker.prototype, "labelInline", 2);
+__decorateClass([
+  property()
+], LynkColorPicker.prototype, "format", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkColorPicker.prototype, "inline", 2);
+__decorateClass([
+  property({ reflect: true })
+], LynkColorPicker.prototype, "size", 2);
+__decorateClass([
+  property({ attribute: "no-format-toggle", type: Boolean })
+], LynkColorPicker.prototype, "noFormatToggle", 2);
+__decorateClass([
+  property()
+], LynkColorPicker.prototype, "name", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkColorPicker.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkColorPicker.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: Boolean })
+], LynkColorPicker.prototype, "hoist", 2);
+__decorateClass([
+  property({ type: Boolean })
+], LynkColorPicker.prototype, "opacity", 2);
+__decorateClass([
+  property()
+], LynkColorPicker.prototype, "placement", 2);
+__decorateClass([
+  property({ type: Boolean })
+], LynkColorPicker.prototype, "uppercase", 2);
+__decorateClass([
+  property()
+], LynkColorPicker.prototype, "swatches", 2);
+__decorateClass([
+  property({ attribute: "swatches-only", type: Boolean })
+], LynkColorPicker.prototype, "swatchesOnly", 2);
+__decorateClass([
+  property({ reflect: true })
+], LynkColorPicker.prototype, "form", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkColorPicker.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkColorPicker.prototype, "optional", 2);
+__decorateClass([
+  eventOptions({ passive: false })
+], LynkColorPicker.prototype, "handleTouchMove", 1);
+__decorateClass([
+  watch("format", { waitUntilFirstUpdate: true })
+], LynkColorPicker.prototype, "handleFormatChange", 1);
+__decorateClass([
+  watch("opacity", { waitUntilFirstUpdate: true })
+], LynkColorPicker.prototype, "handleOpacityChange", 1);
+__decorateClass([
+  watch("value")
+], LynkColorPicker.prototype, "handleValueChange", 1);
+
+export {
+  LynkColorPicker
+};