@uplynk/lynk-design 1.17.0 → 1.18.0

package/dist/chunks/chunk.KEMAAFDG.js

@@ -1,1040 +0,0 @@
-import {
-  LynkVisuallyHidden
-} from "./chunk.5DYOLD7S.js";
-import {
-  drag
-} from "./chunk.A4SOQOK5.js";
-import {
-  clamp
-} from "./chunk.HF7GESMZ.js";
-import {
-  LynkInput
-} from "./chunk.BLR5VHEA.js";
-import {
-  LynkDropdown
-} from "./chunk.56FN6S3X.js";
-import {
-  LynkFormField
-} from "./chunk.4TYSVWDO.js";
-import {
-  color_picker_styles_default
-} from "./chunk.OZKINDDP.js";
-import {
-  defaultValue
-} from "./chunk.GI7VDIWX.js";
-import {
-  LynkButtonGroup
-} from "./chunk.HT3X7CC6.js";
-import {
-  LynkButton
-} from "./chunk.I2EJENZE.js";
-import {
-  FormControlController
-} from "./chunk.HGPZOHO6.js";
-import {
-  LocalizeController
-} from "./chunk.NJBJM2FD.js";
-import {
-  LynkIcon
-} from "./chunk.MFQRG6PF.js";
-import {
-  HasSlotController
-} from "./chunk.OW5NIGGX.js";
-import {
-  watch
-} from "./chunk.GQZ7EGMM.js";
-import {
-  LynkElement
-} from "./chunk.V4JS4TJ7.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");
-    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.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}
-          .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>` : ""}
-          ${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}
-        .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>` : ""}
-        <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: "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
-};