@tylertech/forge 2.8.0 → 2.10.0

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

@@ -1,978 +0,0 @@
-/**
- * @license
- * Copyright 2022 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import {
-  IconButtonComponent
-} from "./chunk.EBC2HGO3.js";
-import {
-  tylIconUnfoldMore
-} from "./chunk.GS2AXUCN.js";
-import {
-  TooltipComponent
-} from "./chunk.OXS2O7RG.js";
-import {
-  IconComponent,
-  IconRegistry
-} from "./chunk.WSH4S3GM.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.VXAPRFMK.js.map