@tylertech/forge 2.0.0 → 2.1.0

package/dist/esm/chunks/chunk.ETQIBLKP.js

@@ -0,0 +1,978 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import {
+  IconButtonComponent
+} from "./chunk.7Y4NHCJH.js";
+import {
+  tylIconUnfoldMore
+} from "./chunk.GS2AXUCN.js";
+import {
+  TooltipComponent
+} from "./chunk.2F6PST3N.js";
+import {
+  IconComponent,
+  IconRegistry
+} from "./chunk.P43Z3YAS.js";
+import {
+  BaseAdapter
+} from "./chunk.KZATVOA6.js";
+import {
+  FoundationProperty
+} from "./chunk.MMIZOYAS.js";
+import {
+  COMPONENT_NAME_PREFIX,
+  CustomElement
+} from "./chunk.35U3UPDV.js";
+import {
+  BaseComponent
+} from "./chunk.VK6LIH3B.js";
+import {
+  attachShadowTemplate,
+  defineCustomElement,
+  getShadowElement
+} from "./chunk.K2PCTUVN.js";
+import {
+  coerceBoolean,
+  debounce,
+  isNumber
+} from "./chunk.MEFT5FQC.js";
+import {
+  __decorateClass,
+  __spreadValues
+} from "./chunk.LM5TVNZY.js";
+
+// dist/build/lib/staging/src/color-picker/color-picker-constants.ts
+var elementName = `${COMPONENT_NAME_PREFIX}color-picker`;
+var attributes = {
+  VALUE: "value",
+  ALLOW_OPACITY: "allow-opacity",
+  DEBOUNCE_CHANGE_EVENT: "debounce-change-event"
+};
+var classes = {
+  SLIDER_THUMB_ACTIVE: "forge-color-picker__slider-thumb--active",
+  GRADIENT_THUMB_ACTIVE: "forge-color-picker__gradient-thumb--active"
+};
+var selectors = {
+  GRADIENT: ".forge-color-picker__gradient",
+  GRADIENT_THUMB: ".forge-color-picker__gradient-thumb",
+  PREVIEW_COLOR: ".forge-color-picker__color-preview",
+  HEX_INPUT: "#forge-color-picker-hex-input",
+  RGBA_INPUT: "#forge-color-picker-rgba-input",
+  HSVA_INPUT: "#forge-color-picker-hsva-input",
+  HUE_SLIDER: ".forge-color-picker__hue-slider",
+  HUE_SLIDER_THUMB: "#forge-color-picker-hue-thumb",
+  OPACITY_SLIDER: ".forge-color-picker__opacity-slider",
+  OPACITY_SLIDER_THUMB: "#forge-color-picker-opacity-thumb",
+  SLIDER: ".forge-color-picker__slider",
+  SLIDER_THUMB: ".forge-color-picker__slider-thumb",
+  COLOR_VALUE_HEX_CONTAINER: ".forge-color-picker__color-hex",
+  COLOR_VALUE_RGBA_CONTAINER: ".forge-color-picker__color-rgba",
+  COLOR_VALUE_HSVA_CONTAINER: ".forge-color-picker__color-hsva",
+  TYPE_BUTTON: "#forge-color-picker-type-button",
+  COLOR_VALUE_RGBA_R: "#forge-color-picker-rgba-r-input",
+  COLOR_VALUE_RGBA_G: "#forge-color-picker-rgba-g-input",
+  COLOR_VALUE_RGBA_B: "#forge-color-picker-rgba-b-input",
+  COLOR_VALUE_RGBA_A: "#forge-color-picker-rgba-a-input",
+  COLOR_VALUE_HSVA_H: "#forge-color-picker-hsva-h-input",
+  COLOR_VALUE_HSVA_S: "#forge-color-picker-hsva-s-input",
+  COLOR_VALUE_HSVA_V: "#forge-color-picker-hsva-v-input",
+  COLOR_VALUE_HSVA_A: "#forge-color-picker-hsva-a-input"
+};
+var events = {
+  CHANGE: `${elementName}-change`
+};
+var numbers = {
+  CHANGE_EVENT_DEBOUNCE_THRESHOLD: 200
+};
+var COLOR_PICKER_CONSTANTS = {
+  elementName,
+  attributes,
+  events,
+  classes,
+  selectors,
+  numbers
+};
+var DEFAULT_COLOR = "000000";
+var ColorPickerValueType = /* @__PURE__ */ ((ColorPickerValueType2) => {
+  ColorPickerValueType2["HEX"] = "hex";
+  ColorPickerValueType2["RGB"] = "rgb";
+  ColorPickerValueType2["RGBA"] = "rgba";
+  ColorPickerValueType2["HSV"] = "hsv";
+  ColorPickerValueType2["HSVA"] = "hsva";
+  return ColorPickerValueType2;
+})(ColorPickerValueType || {});
+
+// dist/build/lib/staging/src/color-picker/color-picker-adapter.ts
+var ColorPickerAdapter = class extends BaseAdapter {
+  constructor(component) {
+    super(component);
+    this._gradientElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.GRADIENT);
+    this._previewColorElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.PREVIEW_COLOR);
+    this._hexInputElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.HEX_INPUT);
+    this._rgbaInputRElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.COLOR_VALUE_RGBA_R);
+    this._rgbaInputGElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.COLOR_VALUE_RGBA_G);
+    this._rgbaInputBElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.COLOR_VALUE_RGBA_B);
+    this._rgbaInputAElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.COLOR_VALUE_RGBA_A);
+    this._hsvaInputHElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.COLOR_VALUE_HSVA_H);
+    this._hsvaInputSElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.COLOR_VALUE_HSVA_S);
+    this._hsvaInputVElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.COLOR_VALUE_HSVA_V);
+    this._hsvaInputAElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.COLOR_VALUE_HSVA_A);
+    this._hueSliderElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.HUE_SLIDER);
+    this._hueSliderThumbElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.HUE_SLIDER_THUMB);
+    this._opacitySliderElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.OPACITY_SLIDER);
+    this._opacitySliderThumbElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.OPACITY_SLIDER_THUMB);
+    this._hexValueContainerElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.COLOR_VALUE_HEX_CONTAINER);
+    this._rgbaValueContainerElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.COLOR_VALUE_RGBA_CONTAINER);
+    this._hsvaValueContainerElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.COLOR_VALUE_HSVA_CONTAINER);
+    this._typeButtonElement = getShadowElement(component, COLOR_PICKER_CONSTANTS.selectors.TYPE_BUTTON);
+  }
+  setPreviewColor(rgbaStyle) {
+    this._previewColorElement.style.backgroundColor = rgbaStyle;
+  }
+  setHexInputValue(value) {
+    this._hexInputElement.value = value;
+  }
+  setRgbaInputValue(rgba) {
+    this._rgbaInputRElement.value = rgba.r.toString();
+    this._rgbaInputGElement.value = rgba.g.toString();
+    this._rgbaInputBElement.value = rgba.b.toString();
+    this._rgbaInputAElement.value = rgba.a.toString();
+  }
+  setHsvaInputValue(hsva) {
+    this._hsvaInputHElement.value = hsva.h.toString();
+    this._hsvaInputSElement.value = hsva.s.toString();
+    this._hsvaInputVElement.value = hsva.v.toString();
+    this._hsvaInputAElement.value = hsva.a.toString();
+  }
+  updateA11y(hueValue, opacityValue) {
+    this._hueSliderThumbElement.setAttribute("aria-valuenow", hueValue.toString());
+    this._hueSliderThumbElement.setAttribute("aria-valuetext", hueValue.toString());
+    this._opacitySliderThumbElement.setAttribute("aria-valuenow", opacityValue.toString());
+    this._opacitySliderThumbElement.setAttribute("aria-valuetext", opacityValue.toString());
+  }
+  setGradientColor(value) {
+    this._gradientElement.style.backgroundColor = value;
+  }
+  getHueSliderElement() {
+    return this._hueSliderElement;
+  }
+  getOpacitySliderElement() {
+    return this._opacitySliderElement;
+  }
+  getGradientElement() {
+    return this._gradientElement;
+  }
+  setActiveValueType(type) {
+    this._hexValueContainerElement.style.display = "none";
+    this._rgbaValueContainerElement.style.display = "none";
+    this._hsvaValueContainerElement.style.display = "none";
+    switch (type) {
+      case "hex" /* HEX */:
+        this._hexValueContainerElement.style.removeProperty("display");
+        break;
+      case "rgba" /* RGBA */:
+        this._rgbaValueContainerElement.style.removeProperty("display");
+        break;
+      case "hsva" /* HSVA */:
+        this._hsvaValueContainerElement.style.removeProperty("display");
+        break;
+    }
+  }
+  focusValueInput(type) {
+    switch (type) {
+      case "hex" /* HEX */:
+        this._hexInputElement.focus();
+        this._hexInputElement.select();
+        break;
+      case "rgba" /* RGBA */:
+        this._rgbaInputRElement.focus();
+        this._rgbaInputRElement.select();
+        break;
+      case "hsva" /* HSVA */:
+        this._hsvaInputHElement.focus();
+        this._hsvaInputHElement.select();
+        break;
+    }
+  }
+  setTypeClickListener(listener) {
+    this._typeButtonElement.addEventListener("click", listener);
+  }
+  removeTypeClickListener(listener) {
+    this._typeButtonElement.removeEventListener("click", listener);
+  }
+  setHexInputListener(type, listener) {
+    this._hexInputElement.addEventListener(type, listener);
+  }
+  removeHexInputListener(type, listener) {
+    this._hexInputElement.removeEventListener(type, listener);
+  }
+  getHexInputValue() {
+    return this._hexInputElement.value;
+  }
+  setRgbaInputListener(type, listener) {
+    this._rgbaInputRElement.addEventListener(type, listener);
+    this._rgbaInputGElement.addEventListener(type, listener);
+    this._rgbaInputBElement.addEventListener(type, listener);
+    this._rgbaInputAElement.addEventListener(type, listener);
+  }
+  removeRgbaInputListener(type, listener) {
+    this._rgbaInputRElement.removeEventListener(type, listener);
+    this._rgbaInputGElement.removeEventListener(type, listener);
+    this._rgbaInputBElement.removeEventListener(type, listener);
+    this._rgbaInputAElement.removeEventListener(type, listener);
+  }
+  getRgbaInputValue() {
+    return {
+      r: parseInt(this._rgbaInputRElement.value, 10),
+      g: parseInt(this._rgbaInputGElement.value, 10),
+      b: parseInt(this._rgbaInputBElement.value, 10),
+      a: parseFloat(this._rgbaInputAElement.value)
+    };
+  }
+  setHsvaInputListener(type, listener) {
+    this._hsvaInputHElement.addEventListener(type, listener);
+    this._hsvaInputSElement.addEventListener(type, listener);
+    this._hsvaInputVElement.addEventListener(type, listener);
+    this._hsvaInputAElement.addEventListener(type, listener);
+  }
+  removeHsvaInputListener(type, listener) {
+    this._hsvaInputHElement.removeEventListener(type, listener);
+    this._hsvaInputSElement.removeEventListener(type, listener);
+    this._hsvaInputVElement.removeEventListener(type, listener);
+    this._hsvaInputAElement.removeEventListener(type, listener);
+  }
+  getHsvaInputValue() {
+    return {
+      h: parseInt(this._hsvaInputHElement.value, 10),
+      s: parseInt(this._hsvaInputSElement.value, 10),
+      v: parseInt(this._hsvaInputVElement.value, 10),
+      a: parseFloat(this._hsvaInputAElement.value)
+    };
+  }
+  toggleOpacityControls(visible) {
+    if (visible) {
+      this._opacitySliderElement.style.removeProperty("display");
+      if (this._rgbaInputAElement.parentElement) {
+        this._rgbaInputAElement.parentElement.style.removeProperty("display");
+      }
+      if (this._hsvaInputAElement.parentElement) {
+        this._hsvaInputAElement.parentElement.style.removeProperty("display");
+      }
+    } else {
+      this._opacitySliderElement.style.display = "none";
+      if (this._rgbaInputAElement.parentElement) {
+        this._rgbaInputAElement.parentElement.style.display = "none";
+      }
+      if (this._hsvaInputAElement.parentElement) {
+        this._hsvaInputAElement.parentElement.style.display = "none";
+      }
+    }
+  }
+};
+
+// dist/build/lib/staging/src/color-picker/color-picker-utils.ts
+function relativeCoords(absX, absY, element) {
+  const bounds = element.getBoundingClientRect();
+  let x = absX - bounds.left;
+  let y = absY - bounds.top;
+  if (x > bounds.width) {
+    x = bounds.width;
+  } else if (x < 0) {
+    x = 0;
+  }
+  if (y > bounds.height) {
+    y = bounds.height;
+  } else if (y < 0) {
+    y = 0;
+  }
+  return { x, y, height: bounds.height, width: bounds.width };
+}
+function hsvaToRgba(hsva) {
+  let r;
+  let g;
+  let b;
+  const h = hsva.h / 60;
+  const s = hsva.s / 100;
+  const v = hsva.v / 100;
+  if (s === 0) {
+    r = g = b = v;
+    return {
+      r: Math.round(r * 255),
+      g: Math.round(g * 255),
+      b: Math.round(b * 255),
+      a: hsva.a
+    };
+  }
+  const i = Math.floor(h);
+  const f = h - i;
+  const p = v * (1 - s);
+  const q = v * (1 - s * f);
+  const t = v * (1 - s * (1 - f));
+  switch (i) {
+    case 0:
+      r = v;
+      g = t;
+      b = p;
+      break;
+    case 1:
+      r = q;
+      g = v;
+      b = p;
+      break;
+    case 2:
+      r = p;
+      g = v;
+      b = t;
+      break;
+    case 3:
+      r = p;
+      g = q;
+      b = v;
+      break;
+    case 4:
+      r = t;
+      g = p;
+      b = v;
+      break;
+    default:
+      r = v;
+      g = p;
+      b = q;
+  }
+  return {
+    r: Math.round(r * 255),
+    g: Math.round(g * 255),
+    b: Math.round(b * 255),
+    a: hsva.a
+  };
+}
+function rgbaToHex(rgba) {
+  return toHex(rgba.r) + toHex(rgba.g) + toHex(rgba.b) + (Math.round(rgba.a * 255) + 65536).toString(16).substr(-2);
+}
+function toHex(x) {
+  return ("0" + x.toString(16)).slice(-2);
+}
+function hexToRgba(hex) {
+  const isShorthand = hex.length === 3 || hex.length === 4;
+  const hexR = isShorthand ? `${hex.slice(0, 1)}${hex.slice(0, 1)}` : hex.slice(0, 2);
+  const hexG = isShorthand ? `${hex.slice(1, 2)}${hex.slice(1, 2)}` : hex.slice(2, 4);
+  const hexB = isShorthand ? `${hex.slice(2, 3)}${hex.slice(2, 3)}` : hex.slice(4, 6);
+  const hexA = (isShorthand ? `${hex.slice(3, 4)}${hex.slice(3, 4)}` : hex.slice(6, 8)) || "ff";
+  return {
+    r: parseInt(hexR, 16),
+    g: parseInt(hexG, 16),
+    b: parseInt(hexB, 16),
+    a: parseFloat((parseInt(hexA, 16) / 255).toFixed(2))
+  };
+}
+function formatRgba(rgba) {
+  return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`;
+}
+function formatHex(value, allowOpacity) {
+  let hex = value.replace(/^#/, "");
+  if (!allowOpacity) {
+    if (hex.length === 4) {
+      hex = hex.substring(0, 3);
+    } else if (hex.length === 8) {
+      hex = hex.substring(0, 6);
+    }
+  }
+  return `#${hex}`;
+}
+function rgbaToHsva(rgba) {
+  const r = rgba.r / 255;
+  const g = rgba.g / 255;
+  const b = rgba.b / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = max;
+  let s = max;
+  const v = max;
+  const d = max - min;
+  s = max === 0 ? 0 : d / max;
+  if (max === min) {
+    h = 0;
+  } else {
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+    h /= 6;
+  }
+  return {
+    h: Math.round(h * 360),
+    s: Math.round(s * 100),
+    v: Math.round(v * 100),
+    a: rgba.a
+  };
+}
+function isValidHex(value) {
+  if (!value || typeof value !== "string") {
+    return false;
+  }
+  if (value.substring(0, 1) === "#") {
+    value = value.substring(1);
+  }
+  switch (value.length) {
+    case 3:
+      return /^[0-9A-F]{3}$/i.test(value);
+    case 4:
+      return /^[0-9A-F]{4}$/i.test(value);
+    case 6:
+      return /^[0-9A-F]{6}$/i.test(value);
+    case 8:
+      return /^[0-9A-F]{8}$/i.test(value);
+    default:
+      return false;
+  }
+}
+function isValidRGBA(value) {
+  return isNumber(value.r) && value.r >= 0 && value.r <= 255 && isNumber(value.g) && value.g >= 0 && value.g <= 255 && isNumber(value.b) && value.b >= 0 && value.b <= 255 && isNumber(value.a) && value.a >= 0 && value.a <= 1;
+}
+function isValidHSVA(value) {
+  return isNumber(value.h) && value.h >= 0 && value.h <= 360 && isNumber(value.s) && value.s >= 0 && value.s <= 100 && isNumber(value.v) && value.v >= 0 && value.v <= 100 && isNumber(value.a) && value.a >= 0 && value.a <= 1;
+}
+
+// dist/build/lib/staging/src/color-picker/color-picker-gradient-slider.ts
+var ColorPickerGradientSlider = class {
+  constructor(_rootElement, _changeListener) {
+    this._rootElement = _rootElement;
+    this._changeListener = _changeListener;
+    this._keydownListener = (evt) => this._onKeydown(evt);
+    this._downListener = (evt) => this._onDown(evt);
+    this._moveListener = (evt) => this._onMove(evt);
+    this._upListener = (evt) => this._onUp(evt);
+    this._initialize();
+  }
+  destroy() {
+    this._unlisten();
+  }
+  setValue(saturation, value) {
+    window.requestAnimationFrame(() => {
+      const bounds = this._rootElement.getBoundingClientRect();
+      this._xPercent = Math.round(bounds.width * (saturation / 100));
+      this._yPercent = bounds.height - Math.round(bounds.height * (value / 100));
+      this._setThumbPosition(this._xPercent, this._yPercent);
+    });
+  }
+  _initialize() {
+    this._thumbElement = this._rootElement.querySelector(COLOR_PICKER_CONSTANTS.selectors.GRADIENT_THUMB);
+    this._listen();
+    this._setThumbPosition(this._xPercent, this._yPercent);
+  }
+  _listen() {
+    this._rootElement.addEventListener("keydown", this._keydownListener);
+    this._rootElement.addEventListener("mousedown", this._downListener);
+    this._rootElement.addEventListener("touchstart", this._downListener);
+  }
+  _unlisten() {
+    this._rootElement.removeEventListener("keydown", this._keydownListener);
+    this._rootElement.removeEventListener("mousedown", this._downListener);
+    this._rootElement.removeEventListener("touchstart", this._downListener);
+    document.removeEventListener("mousemove", this._moveListener);
+    document.removeEventListener("touchmove", this._moveListener);
+    document.removeEventListener("mouseup", this._upListener);
+    document.removeEventListener("touchend", this._upListener);
+  }
+  _onKeydown(evt) {
+    const isEnterKey = evt.key === "Enter" || evt.keyCode === 13;
+    const isArrowLeftKey = evt.key === "ArrowLeft" || evt.keyCode === 37;
+    const isArrowUpKey = evt.key === "ArrowUp" || evt.keyCode === 38;
+    const isArrowRightKey = evt.key === "ArrowRight" || evt.keyCode === 39;
+    const isArrowDownKey = evt.key === "ArrowDown" || evt.keyCode === 40;
+    const bounds = this._rootElement.getBoundingClientRect();
+    if (isArrowDownKey) {
+      evt.preventDefault();
+      this._yPercent++;
+    } else if (isArrowUpKey) {
+      evt.preventDefault();
+      this._yPercent--;
+    } else if (isArrowLeftKey) {
+      evt.preventDefault();
+      this._xPercent--;
+    } else if (isArrowRightKey) {
+      evt.preventDefault();
+      this._xPercent++;
+    } else if (isEnterKey) {
+      evt.preventDefault();
+    } else {
+      return;
+    }
+    if (this._xPercent > bounds.width) {
+      this._xPercent = bounds.width;
+    } else if (this._xPercent < 0) {
+      this._xPercent = 0;
+    }
+    if (this._yPercent > bounds.height) {
+      this._yPercent = bounds.height;
+    } else if (this._yPercent < 0) {
+      this._yPercent = 0;
+    }
+    this._setThumbPosition(this._xPercent, this._yPercent);
+    this._notify();
+  }
+  _onDown(evt) {
+    evt.preventDefault();
+    document.addEventListener("mousemove", this._moveListener);
+    document.addEventListener("touchmove", this._moveListener);
+    document.addEventListener("mouseup", this._upListener);
+    document.addEventListener("touchend", this._upListener);
+    this._updateThumbPosition(evt);
+  }
+  _onMove(evt) {
+    evt.preventDefault();
+    this._updateThumbPosition(evt);
+  }
+  _onUp(evt) {
+    document.removeEventListener("mousemove", this._moveListener);
+    document.removeEventListener("touchmove", this._moveListener);
+    document.removeEventListener("mouseup", this._upListener);
+    document.removeEventListener("touchend", this._upListener);
+    this._updateThumbPosition(evt);
+    this._thumbElement.focus();
+  }
+  _updateThumbPosition(evt) {
+    const isMouseEvent = /^mouse/.test(evt.type);
+    const x = isMouseEvent ? evt.clientX : evt.changedTouches[0].clientX;
+    const y = isMouseEvent ? evt.clientY : evt.changedTouches[0].clientY;
+    const coords = this._calculateSliderPercent(x, y);
+    this._setThumbPosition(coords.x, coords.y);
+    this._xPercent = parseInt((coords.x / coords.width * 100).toString(), 10);
+    this._yPercent = Math.abs(parseInt((coords.y / coords.height * 100).toString(), 10) - 100);
+    this._notify();
+  }
+  _calculateSliderPercent(absX, absY) {
+    return relativeCoords(absX, absY, this._rootElement);
+  }
+  _setThumbPosition(xPercent, yPercent) {
+    this._thumbElement.style.left = `${xPercent}px`;
+    this._thumbElement.style.top = `${yPercent}px`;
+  }
+  _notify() {
+    if (typeof this._changeListener === "function") {
+      this._changeListener(this._xPercent, this._yPercent);
+    }
+  }
+};
+
+// dist/build/lib/staging/src/color-picker/color-picker-slider.ts
+var ColorPickerSlider = class {
+  constructor(_rootElement, _changeListener) {
+    this._rootElement = _rootElement;
+    this._changeListener = _changeListener;
+    this._percent = 1;
+    this._min = 0;
+    this._max = 1;
+    this._step = 0.01;
+    this._keydownListener = (evt) => this._onKeydown(evt);
+    this._downListener = (evt) => this._onDown(evt);
+    this._moveListener = (evt) => this._onMove(evt);
+    this._upListener = (evt) => this._onUp(evt);
+    this._initialize();
+  }
+  destroy() {
+    this._unlisten();
+  }
+  setValue(value) {
+    this._percent = value;
+    this._setThumbPosition(this._percent);
+  }
+  _initialize() {
+    this._thumbElement = this._rootElement.querySelector(COLOR_PICKER_CONSTANTS.selectors.SLIDER_THUMB);
+    this._listen();
+    this._setThumbPosition(this._percent);
+  }
+  _listen() {
+    this._thumbElement.addEventListener("keydown", this._keydownListener);
+    this._rootElement.addEventListener("mousedown", this._downListener);
+    this._rootElement.addEventListener("touchstart", this._downListener);
+  }
+  _unlisten() {
+    this._thumbElement.removeEventListener("keydown", this._keydownListener);
+    this._rootElement.removeEventListener("mousedown", this._downListener);
+    this._rootElement.removeEventListener("touchstart", this._downListener);
+    document.removeEventListener("mousemove", this._moveListener);
+    document.removeEventListener("touchmove", this._moveListener);
+    document.removeEventListener("mouseup", this._upListener);
+    document.removeEventListener("touchend", this._upListener);
+  }
+  _onKeydown(evt) {
+    const isArrowLeftKey = evt.key === "ArrowLeft" || evt.keyCode === 37;
+    const isArrowRightKey = evt.key === "ArrowRight" || evt.keyCode === 39;
+    const isHomeKey = evt.key === "Home" || evt.keyCode === 36;
+    const isEndKey = evt.key === "End" || evt.keyCode === 35;
+    if (isArrowLeftKey) {
+      evt.preventDefault();
+      this._percent -= this._step;
+    } else if (isArrowRightKey) {
+      evt.preventDefault();
+      this._percent += this._step;
+    } else if (isHomeKey) {
+      evt.preventDefault();
+      this._percent = this._min;
+    } else if (isEndKey) {
+      evt.preventDefault();
+      this._percent = this._max;
+    }
+    if (this._percent < this._min) {
+      this._percent = this._min;
+    } else if (this._percent > this._max) {
+      this._percent = this._max;
+    }
+    this._setThumbPosition(this._percent);
+    this._notify();
+  }
+  _onDown(evt) {
+    evt.preventDefault();
+    document.addEventListener("mousemove", this._moveListener);
+    document.addEventListener("touchmove", this._moveListener);
+    document.addEventListener("mouseup", this._upListener);
+    document.addEventListener("touchend", this._upListener);
+    this._updateThumbPosition(evt);
+  }
+  _onMove(evt) {
+    evt.preventDefault();
+    this._thumbElement.classList.add(COLOR_PICKER_CONSTANTS.classes.SLIDER_THUMB_ACTIVE);
+    this._updateThumbPosition(evt);
+  }
+  _onUp(evt) {
+    this._thumbElement.classList.remove(COLOR_PICKER_CONSTANTS.classes.SLIDER_THUMB_ACTIVE);
+    document.removeEventListener("mousemove", this._moveListener);
+    document.removeEventListener("touchmove", this._moveListener);
+    document.removeEventListener("mouseup", this._upListener);
+    document.removeEventListener("touchend", this._upListener);
+    this._updateThumbPosition(evt);
+    this._thumbElement.focus();
+  }
+  _updateThumbPosition(evt) {
+    const x = /^mouse/.test(evt.type) ? evt.clientX : evt.changedTouches[0].clientX;
+    this._percent = this._calculateSliderPercent(x);
+    this._setThumbPosition(this._percent);
+    this._notify();
+  }
+  _calculateSliderPercent(absX) {
+    const coords = relativeCoords(absX, 0, this._rootElement);
+    return parseFloat((coords.x / coords.width).toFixed(2));
+  }
+  _setThumbPosition(percent) {
+    this._thumbElement.style.left = `${percent * 100}%`;
+  }
+  _notify() {
+    if (typeof this._changeListener === "function") {
+      this._changeListener(this._percent);
+    }
+  }
+};
+
+// dist/build/lib/staging/src/color-picker/color-picker-foundation.ts
+var ColorPickerFoundation = class {
+  constructor(_adapter) {
+    this._adapter = _adapter;
+    this._value = null;
+    this._allowOpacity = true;
+    this._hex = DEFAULT_COLOR;
+    this._hsva = { h: 0, s: 0, v: 0, a: 1 };
+    this._rgba = { r: 0, g: 0, b: 0, a: 1 };
+    this._debounceChangeEvent = false;
+    this._valueType = "hex" /* HEX */;
+    this._gradientSliderChangedListener = (x, y) => this._onGradientSliderChanged(x, y);
+    this._hueSliderChangedListener = (value) => this._onHueSliderChanged(value);
+    this._opacitySliderChangedListener = (value) => this._onOpacitySliderChanged(value);
+    this._typeClickListener = (evt) => this._onTypeClicked(evt);
+    this._hexInputChangedListener = (evt) => this._onHexInputChanged();
+    this._rgbaInputChangedListener = (evt) => this._onRgbaInputChanged();
+    this._hsvaInputChangedListener = (evt) => this._onHsvaInputChanged();
+  }
+  initialize() {
+    this._applyChangeEventTrigger();
+    this._adapter.setTypeClickListener(this._typeClickListener);
+    this._adapter.setHexInputListener("input", this._hexInputChangedListener);
+    this._adapter.setRgbaInputListener("input", this._rgbaInputChangedListener);
+    this._adapter.setHsvaInputListener("input", this._hsvaInputChangedListener);
+    this._gradientSlider = new ColorPickerGradientSlider(this._adapter.getGradientElement(), this._gradientSliderChangedListener);
+    this._hueSlider = new ColorPickerSlider(this._adapter.getHueSliderElement(), this._hueSliderChangedListener);
+    this._opacitySlider = new ColorPickerSlider(this._adapter.getOpacitySliderElement(), this._opacitySliderChangedListener);
+    this._initializeOpacity();
+    this._setColorFromHex();
+    this._adapter.setActiveValueType(this._valueType);
+  }
+  disconnect() {
+    this._adapter.removeTypeClickListener(this._typeClickListener);
+    this._adapter.removeHexInputListener("input", this._hexInputChangedListener);
+    this._adapter.removeRgbaInputListener("input", this._hexInputChangedListener);
+    this._adapter.removeHsvaInputListener("input", this._hexInputChangedListener);
+    this._gradientSlider.destroy();
+    this._hueSlider.destroy();
+    this._opacitySlider.destroy();
+  }
+  _applyChangeEventTrigger() {
+    if (this._debounceChangeEvent) {
+      this._triggerChangeEvent = debounce((type, source) => {
+        this._emitChangeEvent(type, source);
+      }, COLOR_PICKER_CONSTANTS.numbers.CHANGE_EVENT_DEBOUNCE_THRESHOLD, false);
+    } else {
+      this._triggerChangeEvent = (type, source) => this._emitChangeEvent(type, source);
+    }
+  }
+  _initializeOpacity() {
+    this._hsva.a = 1;
+    this._adapter.toggleOpacityControls(this._allowOpacity);
+    this._render();
+  }
+  _onTypeClicked(evt) {
+    if (this._valueType === "hex" /* HEX */) {
+      this._valueType = "rgba" /* RGBA */;
+    } else if (this._valueType === "rgba" /* RGBA */) {
+      this._valueType = "hsva" /* HSVA */;
+    } else if (this._valueType === "hsva" /* HSVA */) {
+      this._valueType = "hex" /* HEX */;
+    }
+    this._adapter.setActiveValueType(this._valueType);
+    this._adapter.focusValueInput(this._valueType);
+  }
+  _onHexInputChanged() {
+    const value = this._adapter.getHexInputValue();
+    if (isValidHex(value)) {
+      this.value = value;
+      this._triggerChangeEvent("input", "hex");
+    }
+  }
+  _onRgbaInputChanged() {
+    const value = this._adapter.getRgbaInputValue();
+    if (isValidRGBA(value)) {
+      this.value = rgbaToHex(value);
+      this._triggerChangeEvent("input", "rgba");
+    }
+  }
+  _onHsvaInputChanged() {
+    const value = this._adapter.getHsvaInputValue();
+    if (isValidHSVA(value)) {
+      this.value = rgbaToHex(hsvaToRgba(value));
+      this._triggerChangeEvent("input", "hsva");
+    }
+  }
+  _setColorFromHex() {
+    this._rgba = hexToRgba(this._hex);
+    this._hsva = rgbaToHsva(this._rgba);
+    this._gradientSlider.setValue(this._hsva.s, this._hsva.v);
+    this._hueSlider.setValue(parseFloat((this._hsva.h / 360).toFixed(2)));
+    this._opacitySlider.setValue(this._hsva.a);
+    this._render();
+  }
+  _onGradientSliderChanged(x, y) {
+    this._hsva.s = x;
+    this._hsva.v = y;
+    this._syncColors();
+    this._render();
+    this._triggerChangeEvent("slider", "gradient");
+  }
+  _onHueSliderChanged(value) {
+    this._hsva.h = parseInt((360 * value).toString(), 10);
+    this._syncColors();
+    this._setGradientColor();
+    this._render();
+    this._triggerChangeEvent("slider", "hue");
+  }
+  _onOpacitySliderChanged(value) {
+    this._hsva.a = value;
+    this._syncColors();
+    this._render();
+    this._triggerChangeEvent("slider", "opacity");
+  }
+  _setGradientColor() {
+    const rgba = hsvaToRgba({ h: this._hsva.h, s: 100, v: 100, a: 1 });
+    this._adapter.setGradientColor(`rgb(${rgba.r}, ${rgba.g}, ${rgba.b})`);
+  }
+  _syncColors() {
+    this._rgba = hsvaToRgba(this._hsva);
+    this._hex = rgbaToHex(this._rgba);
+    this._value = this._hex || null;
+  }
+  _render() {
+    this._setGradientColor();
+    this._adapter.setPreviewColor(formatRgba(this._rgba));
+    this._adapter.setHexInputValue(this._getFormattedHex());
+    this._adapter.setRgbaInputValue(this._rgba);
+    this._adapter.setHsvaInputValue(this._hsva);
+    this._adapter.updateA11y(this._hsva.h, Math.round(this._hsva.a * 100));
+  }
+  _getFormattedHex() {
+    return formatHex(this._hex, false);
+  }
+  _emitChangeEvent(type, source) {
+    const data = {
+      type,
+      source,
+      hex: formatHex(this._hex, false).replace(/^#/, ""),
+      rgba: this._rgba,
+      hsva: this._hsva
+    };
+    if (this._allowOpacity) {
+      data.alpha = this._hsva.a;
+    }
+    this._adapter.emitHostEvent(COLOR_PICKER_CONSTANTS.events.CHANGE, data);
+  }
+  get value() {
+    return this._getFormattedHex();
+  }
+  set value(value) {
+    if (this._value !== value) {
+      this._value = value || DEFAULT_COLOR;
+      if (!isValidHex(this._value)) {
+        throw new Error("Invalid hex value provided.");
+      }
+      this._hex = this._value.replace(/^#/, "");
+      this._setColorFromHex();
+      this._adapter.setHostAttribute(COLOR_PICKER_CONSTANTS.attributes.VALUE, this._value);
+    }
+  }
+  get rgba() {
+    return !!this._rgba ? __spreadValues({}, this._rgba) : null;
+  }
+  set rgba(value) {
+    if (value) {
+      if (isValidRGBA(value)) {
+        this.value = rgbaToHex(value);
+      }
+    } else {
+      this.value = null;
+    }
+  }
+  get hsva() {
+    return !!this._hsva ? __spreadValues({}, this._hsva) : null;
+  }
+  set hsva(value) {
+    if (value) {
+      if (isValidHSVA(value)) {
+        this.value = rgbaToHex(hsvaToRgba(value));
+      }
+    } else {
+      this.value = null;
+    }
+  }
+  get opacity() {
+    return this._hsva ? this._hsva.a : null;
+  }
+  set opacity(value) {
+    if (this._hsva.a !== value) {
+      if (value !== null && value !== void 0 && this._allowOpacity) {
+        if (value >= 0 && value <= 1) {
+          this._hsva.a = value;
+          this._opacitySlider.setValue(this._hsva.a);
+          this._syncColors();
+          this._render();
+        } else {
+          console.warn(`The provided opacity value (${value}) must be between 0 and 1.`);
+        }
+      }
+    }
+  }
+  get allowOpacity() {
+    return this._allowOpacity;
+  }
+  set allowOpacity(value) {
+    this._allowOpacity = value;
+    this._initializeOpacity();
+  }
+  get debounceChangeEvent() {
+    return this._debounceChangeEvent;
+  }
+  set debounceChangeEvent(value) {
+    if (this._debounceChangeEvent !== value) {
+      this._debounceChangeEvent = value;
+      this._applyChangeEventTrigger();
+    }
+  }
+};
+
+// dist/build/lib/staging/src/color-picker/color-picker.ts
+var template = '<template><div class="forge-color-picker" part="root"><input type="color" tabindex="-1" class="forge-color-picker__input" spellcheck="false" autocomplete="off" aria-label="Color picker value" part="input"><div class="forge-color-picker__container" part="container"><div class="forge-color-picker__gradient" tabindex="0" part="gradient"><div class="forge-color-picker__gradient-color" part="gradient-color"></div><div class="forge-color-picker__gradient-thumb" part="gradient-thumb"></div></div><div class="forge-color-picker__control-preview" part="controls-preview-container"><div class="forge-color-picker__controls" part="controls-container"><div class="forge-color-picker__slider-control" part="hue-control-container"><div class="forge-color-picker__slider forge-color-picker__hue-slider" part="hue-control-slider"><div class="forge-color-picker__slider-thumb" id="forge-color-picker-hue-thumb" part="hue-control-slider-thumb" tabindex="0" role="slider" aria-label="Change hue" aria-valuemin="0" aria-valuemax="360" aria-valuenow="0" aria-orientation="horizontal" aria-valuetext="0"></div></div></div><div class="forge-color-picker__slider-control" part="opacity-control-container"><div class="forge-color-picker__canvas" part="opacity-control-canvas"><div class="forge-color-picker__slider forge-color-picker__opacity-slider" part="opacity-control-slider"><div class="forge-color-picker__slider-thumb" id="forge-color-picker-opacity-thumb" part="opacity-control-slider-thumb" tabindex="0" role="slider" aria-label="Change opacity" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-orientation="horizontal" aria-valuetext="0"></div></div></div></div></div><div class="forge-color-picker__color-preview-container forge-color-picker__canvas" part="color-preview-container"><div class="forge-color-picker__color-preview" part="color-preview"></div></div></div><div class="forge-color-picker__value" part="value-container"><div class="forge-color-picker__color-types" part="types-container"><div class="forge-color-picker__color-hex" part="hex-type-container"><div part="hex-type-label-wrapper"><label for="forge-color-picker-hex-input" part="hex-label">HEX</label></div><input type="text" id="forge-color-picker-hex-input" part="hex-input" style="width: 88px;" maxlength="9" spellcheck="false" autocomplete="off" aria-label="HEX value"></div><div class="forge-color-picker__color-rgba" part="rgba-type-container"><div part="rgba-type-wrapper-r"><label for="forge-color-picker-rgba-r-input" part="rgba-type-label-r">R</label> <input type="number" id="forge-color-picker-rgba-r-input" part="rgba-type-input-r" min="0" max="255" maxlength="3" autocomplete="off" aria-label="Red"></div><div part="rgba-type-wrapper-g"><label for="forge-color-picker-rgba-g-input" part="rgba-type-label-g">G</label> <input type="number" id="forge-color-picker-rgba-g-input" part="rgba-type-input-g" min="0" max="255" maxlength="3" autocomplete="off" aria-label="Green"></div><div part="rgba-type-wrapper-b"><label for="forge-color-picker-rgba-b-input" part="rgba-type-label-b">B</label> <input type="number" id="forge-color-picker-rgba-b-input" part="rgba-type-input-b" min="0" max="255" maxlength="3" autocomplete="off" aria-label="Blue"></div><div part="rgba-type-wrapper-a"><label for="forge-color-picker-rgba-a-input" part="rgba-type-label-a">A</label> <input type="number" id="forge-color-picker-rgba-a-input" part="rgba-type-input-a" min="0" max="1" step="0.1" maxlength="3" autocomplete="off" aria-label="Alpha"></div></div><div class="forge-color-picker__color-hsva" part="hsva-type-container"><div part="hsva-type-wrapper-h"><label for="forge-color-picker-hsva-h-input" part="hsva-type-label-h">H</label> <input type="number" id="forge-color-picker-hsva-h-input" part="hsva-type-input-h" min="0" max="360" maxlength="3" autocomplete="off" aria-label="Hue"></div><div part="hsva-type-wrapper-s"><label for="forge-color-picker-hsva-s-input" part="hsva-type-label-s">S</label> <input type="number" id="forge-color-picker-hsva-s-input" part="hsva-type-input-s" min="0" max="100" maxlength="3" autocomplete="off" aria-label="Saturation"></div><div part="hsva-type-wrapper-v"><label for="forge-color-picker-hsva-v-input" part="hsva-type-label-v">V</label> <input type="number" id="forge-color-picker-hsva-v-input" part="hsva-type-input-v" min="0" max="100" maxlength="3" autocomplete="off" aria-label="Value"></div><div part="hsva-type-wrapper-a"><label for="forge-color-picker-hsva-a-input" part="hsva-type-label-a">A</label> <input type="number" id="forge-color-picker-hsva-a-input" part="hsva-type-input-a" min="0" max="1" step="0.1" maxlength="3" autocomplete="off" aria-label="Alpha"></div></div></div><div class="forge-color-picker__type-button" part="type-container"><forge-icon-button part="type-button"><button type="button" id="forge-color-picker-type-button" aria-labelledby="type-button-tooltip" part="type-button-element"><forge-icon name="unfold_more" part="type-button-icon"></forge-icon></button><forge-tooltip delay="500" position="bottom" id="type-button-tooltip">Change color format</forge-tooltip></forge-icon-button></div></div></div></div></template>';
+var styles = '.forge-icon-button{display:-webkit-inline-box;display:inline-flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;outline:0;background-color:transparent;fill:currentColor;color:inherit;font-size:24px;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:48px;height:48px;padding:12px}.forge-icon-button forge-icon,.forge-icon-button img,.forge-icon-button svg{width:24px;height:24px}.forge-icon-button:disabled{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38))}.forge-icon-button:disabled{cursor:default;pointer-events:none}.forge-icon-button__icon{display:inline-block}.forge-icon-button__icon.forge-icon-button__icon--on{display:none}.forge-icon-button--on .forge-icon-button__icon{display:none}.forge-icon-button--on .forge-icon-button__icon.forge-icon-button__icon--on{display:inline-block}@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.forge-icon-button{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity}.forge-icon-button::after,.forge-icon-button::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.forge-icon-button::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.forge-icon-button::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.forge-icon-button.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.forge-icon-button.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.forge-icon-button.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.forge-icon-button.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.forge-icon-button.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.forge-icon-button::after,.forge-icon-button::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.forge-icon-button.mdc-ripple-upgraded::after,.forge-icon-button.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-icon-button.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-icon-button::after,.forge-icon-button::before{background-color:#000;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-surface,#000))}.forge-icon-button.mdc-ripple-surface--hover::before,.forge-icon-button:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-icon-button.mdc-ripple-upgraded--background-focused::before,.forge-icon-button:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-icon-button:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-icon-button:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-icon-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}forge-icon-button{position:relative;display:inline-block;overflow:visible}.forge-icon-button--on{color:#3f51b5;color:var(--mdc-theme-primary,#3f51b5)}.forge-icon-button--on::after,.forge-icon-button--on::before{background-color:#3f51b5;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#3f51b5))}.forge-icon-button--on.mdc-ripple-surface--hover::before,.forge-icon-button--on:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-icon-button--on.mdc-ripple-upgraded--background-focused::before,.forge-icon-button--on:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-icon-button--on:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-icon-button--on:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-icon-button--on.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-icon-button--on::before{background-color:#3f51b5;background-color:var(--mdc-theme-primary,#3f51b5);opacity:.08}.forge-icon-button--dense{width:28px;height:28px;padding:2px;padding:0}.forge-icon-button--dense-1{width:44px;height:44px;padding:10px}.forge-icon-button--dense-2{width:40px;height:40px;padding:8px}.forge-icon-button--dense-3{width:36px;height:36px;padding:6px}.forge-icon-button--dense-4{width:32px;height:32px;padding:4px}.forge-icon-button--dense-5{width:28px;height:28px;padding:2px}.forge-icon-button--dense-6{width:24px;height:24px;padding:0}.forge-icon-button--with-badge forge-badge{z-index:1;z-index:var(--forge-z-index-surface,1);pointer-events:none;--forge-badge-max-width:32px;--forge-badge-border:1px solid transparent}.forge-icon-button--with-badge forge-badge[app-bar-context]{--forge-badge-border:2px solid var(--forge-app-bar-theme-background)}*{-webkit-box-sizing:border-box;box-sizing:border-box}.forge-color-picker{width:272px;width:var(--forge-color-picker-width,272px);position:relative;display:inline-block;overflow:hidden}.forge-color-picker__input{height:1px;opacity:0;position:absolute;width:1px}.forge-color-picker__gradient{position:relative;outline:0}.forge-color-picker__gradient-color{background:-webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(0,0,0,0)),to(#000)),-webkit-gradient(linear,left top,right top,color-stop(0,#fff),to(rgba(255,255,255,0)));background:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 100%),linear-gradient(to right,#fff 0,rgba(255,255,255,0) 100%);height:152px}.forge-color-picker__gradient-thumb{border:1px solid #fff;border-radius:50%;cursor:pointer;display:inline-block;height:10px;width:10px;margin-left:-5px;margin-top:-5px;position:absolute;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:left .2s cubic-bezier(.25, .8, .25, 1) 0s,top .2s cubic-bezier(.25, .8, .25, 1) 0s;transition:left .2s cubic-bezier(.25, .8, .25, 1) 0s,top .2s cubic-bezier(.25, .8, .25, 1) 0s}.forge-color-picker__control-preview{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;width:100%;padding:16px}.forge-color-picker__controls{-webkit-box-flex:1;flex:1;margin-right:16px}.forge-color-picker__slider{position:relative}.forge-color-picker__slider-thumb{outline:0;height:16px;width:16px;background-color:#fff;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.3);box-shadow:0 1px 2px rgba(0,0,0,.3);position:absolute;border-radius:50%;top:calc(50% - 8px);margin-left:-8px;-webkit-transition:left .4s cubic-bezier(.25, .8, .25, 1);transition:left .4s cubic-bezier(.25, .8, .25, 1)}.forge-color-picker__slider-thumb--active{-webkit-transition:none;transition:none}.forge-color-picker__slider-thumb:hover{cursor:pointer}.forge-color-picker__color-preview-container{border-radius:50%;-webkit-box-shadow:0 0 2px 0 rgba(0,0,0,.54) inset,0 0 2px 0 rgba(0,0,0,.54);box-shadow:0 0 2px 0 rgba(0,0,0,.54) inset,0 0 2px 0 rgba(0,0,0,.54);overflow:hidden}.forge-color-picker__color-preview{height:32px;width:32px;-webkit-transition:background-color .2s cubic-bezier(.25, .8, .25, 1);transition:background-color .2s cubic-bezier(.25, .8, .25, 1)}.forge-color-picker__value{display:-webkit-box;display:flex;width:100%;-webkit-box-align:center;align-items:center;padding:0 8px 16px 16px;font-size:12px}.forge-color-picker__color-types{-webkit-box-flex:1;flex:1}.forge-color-picker__color-types label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-light,rgba(0,0,0,.54))}.forge-color-picker__color-types input{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit)}.forge-color-picker__color-types input[type=number],.forge-color-picker__color-types input[type=text]{color:#000;color:var(--mdc-theme-on-surface,#000);border-color:#e0e0e0;border-color:var(--forge-theme-border-color,#e0e0e0);background-color:transparent;padding:4px 8px;border-width:1px;border-style:solid;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;outline:0;-webkit-transition:border-color .2s 0s cubic-bezier(0, 0, .2, 1),-webkit-box-shadow .2s 0s cubic-bezier(0, 0, .2, 1);transition:border-color .2s 0s cubic-bezier(0, 0, .2, 1),-webkit-box-shadow .2s 0s cubic-bezier(0, 0, .2, 1);transition:box-shadow .2s 0s cubic-bezier(0, 0, .2, 1),border-color .2s 0s cubic-bezier(0, 0, .2, 1);transition:box-shadow .2s 0s cubic-bezier(0, 0, .2, 1),border-color .2s 0s cubic-bezier(0, 0, .2, 1),-webkit-box-shadow .2s 0s cubic-bezier(0, 0, .2, 1)}.forge-color-picker__color-types input[type=number]:hover,.forge-color-picker__color-types input[type=text]:hover{border-color:rgba(0,0,0,.87);border-color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.forge-color-picker__color-types input[type=number]:focus,.forge-color-picker__color-types input[type=text]:focus{border-color:#3f51b5;border-color:var(--mdc-theme-primary,#3f51b5);-webkit-box-shadow:0 0 0 1px inset #3f51b5;box-shadow:0 0 0 1px inset #3f51b5;-webkit-box-shadow:0 0 0 1px inset var(--mdc-theme-primary,#3f51b5);box-shadow:0 0 0 1px inset var(--mdc-theme-primary,#3f51b5)}.forge-color-picker__color-types input[type=number]{text-align:center;-moz-appearance:textfield}.forge-color-picker__color-types input[type=number]::-webkit-inner-spin-button,.forge-color-picker__color-types input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.forge-color-picker__color-hex{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content:center;-webkit-box-align:space-between;align-items:space-between}.forge-color-picker__canvas{background-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCIgdmlld0JveD0iMCAwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTAgKDU0OTgzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCA5PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwLTkiPgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExIiBmaWxsPSIjRTBFMEUwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weS0yIiBmaWxsPSIjRkZGRkZGIiB4PSIwIiB5PSIzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weSIgZmlsbD0iI0ZGRkZGRiIgeD0iMyIgeT0iMCIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExLUNvcHktMyIgZmlsbD0iI0UwRTBFMCIgeD0iMyIgeT0iMyIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+")}.forge-color-picker__hue-slider{height:8px;background:-webkit-gradient(linear,left top,right top,color-stop(0,red),color-stop(16%,#ff0),color-stop(33%,#0f0),color-stop(50%,#0ff),color-stop(67%,#00f),color-stop(84%,#f0f),to(#ff0004));background:linear-gradient(to right,red 0,#ff0 16%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 84%,#ff0004 100%)}.forge-color-picker__opacity-slider{height:8px;margin-top:16px;background:-webkit-gradient(linear,left top,right top,from(rgba(255,0,0,0)),to(red));background:linear-gradient(to right,rgba(255,0,0,0) 0,red 100%)}.forge-color-picker__color-hsva,.forge-color-picker__color-rgba{display:-webkit-box;display:flex}.forge-color-picker__color-hsva div,.forge-color-picker__color-rgba div{margin-right:4px}.forge-color-picker__color-hsva label,.forge-color-picker__color-rgba label{display:block;text-align:center}.forge-color-picker__color-hsva input,.forge-color-picker__color-rgba input{width:44px}:host{display:inline-block}:host([hidden]){display:none}';
+var ColorPickerComponent = class extends BaseComponent {
+  constructor() {
+    super();
+    IconRegistry.define(tylIconUnfoldMore);
+    attachShadowTemplate(this, template, styles);
+    this._foundation = new ColorPickerFoundation(new ColorPickerAdapter(this));
+  }
+  static get observedAttributes() {
+    return [
+      COLOR_PICKER_CONSTANTS.attributes.VALUE,
+      COLOR_PICKER_CONSTANTS.attributes.ALLOW_OPACITY,
+      COLOR_PICKER_CONSTANTS.attributes.DEBOUNCE_CHANGE_EVENT
+    ];
+  }
+  connectedCallback() {
+    this._foundation.initialize();
+  }
+  disconnectedCallback() {
+    this._foundation.disconnect();
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    switch (name) {
+      case COLOR_PICKER_CONSTANTS.attributes.VALUE:
+        this.value = newValue;
+        break;
+      case COLOR_PICKER_CONSTANTS.attributes.ALLOW_OPACITY:
+        this.allowOpacity = coerceBoolean(newValue);
+        break;
+      case COLOR_PICKER_CONSTANTS.attributes.DEBOUNCE_CHANGE_EVENT:
+        this.debounceChangeEvent = coerceBoolean(newValue);
+        break;
+    }
+  }
+};
+__decorateClass([
+  FoundationProperty()
+], ColorPickerComponent.prototype, "value", 2);
+__decorateClass([
+  FoundationProperty()
+], ColorPickerComponent.prototype, "rgba", 2);
+__decorateClass([
+  FoundationProperty()
+], ColorPickerComponent.prototype, "hsva", 2);
+__decorateClass([
+  FoundationProperty()
+], ColorPickerComponent.prototype, "opacity", 2);
+__decorateClass([
+  FoundationProperty()
+], ColorPickerComponent.prototype, "allowOpacity", 2);
+__decorateClass([
+  FoundationProperty()
+], ColorPickerComponent.prototype, "debounceChangeEvent", 2);
+ColorPickerComponent = __decorateClass([
+  CustomElement({
+    name: COLOR_PICKER_CONSTANTS.elementName,
+    dependencies: [
+      IconButtonComponent,
+      TooltipComponent,
+      IconComponent
+    ]
+  })
+], ColorPickerComponent);
+
+// dist/build/lib/staging/src/color-picker/index.ts
+function defineColorPickerComponent() {
+  defineCustomElement(ColorPickerComponent);
+}
+
+export {
+  COLOR_PICKER_CONSTANTS,
+  DEFAULT_COLOR,
+  ColorPickerValueType,
+  ColorPickerAdapter,
+  ColorPickerFoundation,
+  ColorPickerComponent,
+  defineColorPickerComponent
+};
+//# sourceMappingURL=chunk.ETQIBLKP.js.map