@thednp/color-picker 1.0.1 → 2.0.0-alpha10

package/src/{js/color-picker.js → ts/index.ts}

@@ -1,100 +1,103 @@
-import { addListener, removeListener } from '@thednp/event-listener/src/event-listener';
-
-import ariaDescription from 'shorter-js/src/strings/ariaDescription';
-import ariaSelected from 'shorter-js/src/strings/ariaSelected';
-import ariaExpanded from 'shorter-js/src/strings/ariaExpanded';
-import ariaValueText from 'shorter-js/src/strings/ariaValueText';
-import ariaValueNow from 'shorter-js/src/strings/ariaValueNow';
-import keyArrowDown from 'shorter-js/src/strings/keyArrowDown';
-import keyArrowUp from 'shorter-js/src/strings/keyArrowUp';
-import keyArrowLeft from 'shorter-js/src/strings/keyArrowLeft';
-import keyArrowRight from 'shorter-js/src/strings/keyArrowRight';
-import keyEnter from 'shorter-js/src/strings/keyEnter';
-import keySpace from 'shorter-js/src/strings/keySpace';
-import keyEscape from 'shorter-js/src/strings/keyEscape';
-import focusinEvent from 'shorter-js/src/strings/focusinEvent';
-import mouseclickEvent from 'shorter-js/src/strings/mouseclickEvent';
-import keydownEvent from 'shorter-js/src/strings/keydownEvent';
-import changeEvent from 'shorter-js/src/strings/changeEvent';
-
-import touchmoveEvent from 'shorter-js/src/strings/touchmoveEvent';
-import pointerdownEvent from 'shorter-js/src/strings/pointerdownEvent';
-import pointermoveEvent from 'shorter-js/src/strings/pointermoveEvent';
-import pointerupEvent from 'shorter-js/src/strings/pointerupEvent';
-
-import scrollEvent from 'shorter-js/src/strings/scrollEvent';
-import keyupEvent from 'shorter-js/src/strings/keyupEvent';
-import resizeEvent from 'shorter-js/src/strings/resizeEvent';
-import focusoutEvent from 'shorter-js/src/strings/focusoutEvent';
-
-import getDocument from 'shorter-js/src/get/getDocument';
-import getDocumentElement from 'shorter-js/src/get/getDocumentElement';
-import getElementStyle from 'shorter-js/src/get/getElementStyle';
-import getUID from 'shorter-js/src/get/getUID';
-import getBoundingClientRect from 'shorter-js/src/get/getBoundingClientRect';
-import getElementTransitionDuration from 'shorter-js/src/get/getElementTransitionDuration';
-import querySelector from 'shorter-js/src/selectors/querySelector';
-import closest from 'shorter-js/src/selectors/closest';
-import getElementsByClassName from 'shorter-js/src/selectors/getElementsByClassName';
-import dispatchEvent from 'shorter-js/src/misc/dispatchEvent';
-import ObjectAssign from 'shorter-js/src/misc/ObjectAssign';
-import Data, { getInstance } from 'shorter-js/src/misc/data';
-import setElementStyle from 'shorter-js/src/misc/setElementStyle';
-import normalizeOptions from 'shorter-js/src/misc/normalizeOptions';
-import reflow from 'shorter-js/src/misc/reflow';
-import focus from 'shorter-js/src/misc/focus';
-import hasClass from 'shorter-js/src/class/hasClass';
-import addClass from 'shorter-js/src/class/addClass';
-import removeClass from 'shorter-js/src/class/removeClass';
-import setAttribute from 'shorter-js/src/attr/setAttribute';
-import getAttribute from 'shorter-js/src/attr/getAttribute';
-import removeAttribute from 'shorter-js/src/attr/removeAttribute';
+import {
+  ariaDescription,
+  ariaSelected,
+  ariaValueNow,
+  ariaValueText,
+  ariaExpanded,
+  keyArrowDown,
+  keyArrowUp,
+  keyArrowLeft,
+  keyArrowRight,
+  keyEnter,
+  keySpace,
+  keyEscape,
+  focusinEvent,
+  mouseclickEvent,
+  keydownEvent,
+  changeEvent,
+  touchmoveEvent,
+  pointerdownEvent,
+  pointermoveEvent,
+  pointerupEvent,
+  tabindex,
+  focusoutEvent,
+  resizeEvent,
+  keyupEvent,
+  scrollEvent,
+  dispatchEvent,
+  getElementsByClassName,
+  closest,
+  querySelector,
+  getElementTransitionDuration,
+  getBoundingClientRect,
+  getUID,
+  getElementStyle,
+  getDocumentElement,
+  getDocument,
+  ObjectAssign,
+  ObjectFromEntries,
+  Data,
+  getInstance,
+  setElementStyle,
+  normalizeOptions,
+  reflow,
+  focus,
+  hasClass,
+  addClass,
+  removeClass,
+  setAttribute,
+  getAttribute,
+  removeAttribute,
+  isArray,
+  isString,
+  getWindow,
+  on,
+  off,
+} from '@thednp/shorty';
 
 // ColorPicker Util
 // ================
-import Color from './color';
-import ColorPalette from './color-palette';
+import Color from '@thednp/color';
+import type { RGBA, HWBA, HSLA, HSVA } from '@thednp/color';
+
+import ColorPalette from './colorPalette';
 import colorPickerLabels from './util/colorPickerLabels';
 import colorNames from './util/colorNames';
-import nonColors from './util/nonColors';
-import tabIndex from './util/tabindex';
 import isValidJSON from './util/isValidJSON';
-import roundPart from './util/roundPart';
 import setMarkup from './util/setMarkup';
-import Version from './util/version';
+
+import ColorPickerOptions from './interface/colorPickerOptions';
+import ColorPickerLabels from './interface/colorPickerLabels';
+import type ColorNames from './interface/ColorNames';
+import { version } from '../../package.json';
 
 // ColorPicker GC
 // ==============
 const colorPickerString = 'color-picker';
 const colorPickerSelector = `[data-function="${colorPickerString}"]`;
-const colorPickerParentSelector = `.${colorPickerString},${colorPickerString}`;
-const colorPickerDefaults = {
+const colorPickerParentSelector = `.${colorPickerString}`;
+const colorPickerDefaults: ColorPickerOptions = {
   componentLabels: colorPickerLabels,
   colorLabels: colorNames,
   format: 'rgb',
   colorPresets: false,
   colorKeywords: false,
 };
+const { roundPart, nonColors } = Color;
 
 // ColorPicker Static Methods
 // ==========================
-
-/** @type {CP.GetInstance<ColorPicker, HTMLInputElement>} */
-const getColorPickerInstance = (element) => getInstance(element, colorPickerString);
-
-/** @type {CP.InitCallback<ColorPicker>} */
-const initColorPicker = (element) => new ColorPicker(element);
+const getColorPickerInstance = (element: HTMLInputElement) => getInstance<ColorPicker>(element, colorPickerString);
+const initColorPicker = (element: HTMLInputElement) => new ColorPicker(element);
 
 // ColorPicker Private Methods
 // ===========================
 
 /**
  * Add / remove `ColorPicker` main event listeners.
- * @param {ColorPicker} self
- * @param {boolean=} action
  */
-function toggleEvents(self, action) {
-  const fn = action ? addListener : removeListener;
+const toggleEvents = (self: ColorPicker, action?: boolean) => {
+  const fn = action ? on : off;
   const { input, pickerToggle, menuToggle } = self;
 
   fn(input, focusinEvent, self.showPicker);
@@ -103,67 +106,58 @@ function toggleEvents(self, action) {
   if (menuToggle) {
     fn(menuToggle, mouseclickEvent, self.toggleMenu);
   }
-}
+};
 
 /**
  * Add / remove `ColorPicker` event listeners active only when open.
- * @param {ColorPicker} self
- * @param {boolean=} action
  */
-function toggleEventsOnShown(self, action) {
-  const fn = action ? addListener : removeListener;
+const toggleEventsOnShown = (self: ColorPicker, action?: boolean) => {
+  const fn = action ? on : off;
   const { input, colorMenu, parent } = self;
   const doc = getDocument(input);
-  const win = doc.defaultView;
+  const win = getWindow(doc);
 
-  fn(self.controls, pointerdownEvent, self.pointerDown);
-  self.controlKnobs.forEach((x) => fn(x, keydownEvent, self.handleKnobs));
+  fn(self.controls, pointerdownEvent, self.pointerDown as EventListener);
+  self.controlKnobs.forEach(x => fn(x, keydownEvent, self.handleKnobs as EventListener));
 
   fn(win, scrollEvent, self.handleScroll);
   fn(win, resizeEvent, self.update);
 
-  [input, ...self.inputs].forEach((x) => fn(x, changeEvent, self.changeHandler));
+  [input, ...self.inputs].forEach(x => fn(x, changeEvent, self.changeHandler));
 
   if (colorMenu) {
     fn(colorMenu, mouseclickEvent, self.menuClickHandler);
-    fn(colorMenu, keydownEvent, self.menuKeyHandler);
+    fn(colorMenu, keydownEvent, self.menuKeyHandler as EventListener);
   }
 
-  fn(doc, pointermoveEvent, self.pointerMove);
-  fn(doc, pointerupEvent, self.pointerUp);
-  fn(parent, focusoutEvent, self.handleFocusOut);
-  fn(doc, keyupEvent, self.handleDismiss);
-}
+  fn(doc, pointermoveEvent, self.pointerMove as EventListener);
+  fn(doc, pointerupEvent, self.pointerUp as EventListener);
+  fn(parent, focusoutEvent, self.handleFocusOut as EventListener);
+  fn(doc, keyupEvent, self.handleDismiss as EventListener);
+};
 
 /**
  * Triggers the `ColorPicker` original event.
- * @param {ColorPicker} self
  */
-function firePickerChange(self) {
+const firePickerChange = (self: ColorPicker) => {
   dispatchEvent(self.input, new CustomEvent('colorpicker.change'));
-}
+};
 
 /**
  * Hides a visible dropdown.
- * @param {HTMLElement} element
- * @returns {void}
  */
-function removePosition(element) {
+const removePosition = (element: HTMLElement) => {
   /* istanbul ignore else */
   if (element) {
-    ['bottom', 'top'].forEach((x) => removeClass(element, x));
+    ['bottom', 'top'].forEach(x => removeClass(element, x));
   }
-}
+};
 
 /**
  * Shows a `ColorPicker` dropdown and close the curent open dropdown.
- * @param {ColorPicker} self
- * @param {HTMLElement | Element} dropdown
  */
-function showDropdown(self, dropdown) {
-  const {
-    colorPicker, colorMenu, menuToggle, pickerToggle, parent,
-  } = self;
+const showDropdown = (self: ColorPicker, dropdown: HTMLElement) => {
+  const { colorPicker, colorMenu, menuToggle, pickerToggle, parent } = self;
   const isPicker = dropdown === colorPicker;
   const openDropdown = isPicker ? colorMenu : colorPicker;
   const activeBtn = isPicker ? menuToggle : pickerToggle;
@@ -186,9 +180,9 @@ function showDropdown(self, dropdown) {
     toggleEventsOnShown(self, true);
     self.updateDropdownPosition();
     self.isOpen = true;
-    setAttribute(self.input, tabIndex, '0');
+    setAttribute(self.input, tabindex, '0');
     if (menuToggle) {
-      setAttribute(menuToggle, tabIndex, '0');
+      setAttribute(menuToggle, tabindex, '0');
     }
   }
 
@@ -196,208 +190,231 @@ function showDropdown(self, dropdown) {
   if (activeBtn) {
     setAttribute(activeBtn, ariaExpanded, 'false');
   }
-}
+};
 
 /**
  * Color Picker Web Component
+ *
  * @see http://thednp.github.io/color-picker
  */
 export default class ColorPicker {
+  // bring utils to staic
+  public static Color = Color;
+  public static ColorPalette = ColorPalette;
+  public static getInstance = getColorPickerInstance;
+  public static init = initColorPicker;
+  public static selector = colorPickerSelector;
+  // utils important for render
+  public static roundPart = roundPart;
+  public static setElementStyle = setElementStyle;
+  public static setAttribute = setAttribute;
+  public static getBoundingClientRect = getBoundingClientRect;
+  public static version = version;
+  public static colorNames = colorNames;
+  public static colorPickerLabels = colorPickerLabels;
+
+  id: number;
+  input: HTMLInputElement;
+  color: Color;
+  format = 'rgb';
+  parent: HTMLElement;
+  dragElement: HTMLElement | undefined;
+  isOpen = false;
+  controlPositions: {
+    c1x: number;
+    c1y: number;
+    c2y: number;
+    c3y: number;
+  };
+  colorLabels: ColorNames = ObjectFromEntries(colorNames.map(c => [c, c])) as ColorNames;
+  colorKeywords: string[] | false;
+  colorPresets: ColorPalette | string[] | false;
+  componentLabels: ColorPickerLabels;
+  pickerToggle: HTMLElement;
+  menuToggle: HTMLElement;
+  colorPicker: HTMLElement;
+  colorMenu: HTMLElement;
+  controls: HTMLElement;
+  inputs: HTMLInputElement[];
+  controlKnobs: HTMLElement[];
+  visuals: HTMLElement[];
+
   /**
    * Returns a new `ColorPicker` instance. The target of this constructor
    * must be an `HTMLInputElement`.
    *
-   * @param {HTMLInputElement | string} target the target `<input>` element
-   * @param {CP.ColorPickerOptions=} config instance options
+   * @param target the target `<input>` element
+   * @param config instance options
    */
-  constructor(target, config) {
-    const self = this;
-    /** @type {HTMLInputElement} */
-    const input = querySelector(target);
+  constructor(target: (HTMLElement & HTMLInputElement) | string, config?: Partial<ColorPickerOptions>) {
+    const input = querySelector(target) as HTMLInputElement;
 
     // invalidate
-    if (!input) throw new TypeError(`ColorPicker target "${target}" cannot be found.`);
-    self.input = input;
+    if (typeof target === 'undefined') throw new TypeError(`ColorPicker target not specified.`);
+    if (isString(target) && !input) throw new TypeError(`ColorPicker target "${target}" cannot be found.`);
+    this.input = input;
 
     const parent = closest(input, colorPickerParentSelector);
     if (!parent) throw new TypeError('ColorPicker requires a specific markup to work.');
 
-    /** @type {HTMLElement} */
-    self.parent = parent;
-
-    /** @type {number} */
-    self.id = getUID(input, colorPickerString);
-
-    // set initial state
-    /** @type {HTMLElement?} */
-    self.dragElement = null;
-    /** @type {boolean} */
-    self.isOpen = false;
-    /** @type {Record<string, number>} */
-    self.controlPositions = {
-      c1x: 0, c1y: 0, c2y: 0, c3y: 0,
+    this.parent = parent;
+    this.id = getUID(input, colorPickerString);
+    this.dragElement = undefined;
+    this.isOpen = false;
+    this.controlPositions = {
+      c1x: 0,
+      c1y: 0,
+      c2y: 0,
+      c3y: 0,
     };
-    /** @type {Record<string, string>} */
-    self.colorLabels = {};
-    /** @type {string[]=} */
-    self.colorKeywords = undefined;
-    /** @type {(ColorPalette | string[])=} */
-    self.colorPresets = undefined;
+    // this.colorLabels = {};
+    this.colorKeywords = false;
+    this.colorPresets = false;
 
     // process options
-    const {
-      format, componentLabels, colorLabels, colorKeywords, colorPresets,
-    } = normalizeOptions(this.isCE ? parent : input, colorPickerDefaults, config || {});
+    const { format, componentLabels, colorLabels, colorKeywords, colorPresets } = normalizeOptions(
+      input,
+      colorPickerDefaults,
+      config || {},
+    );
 
     let translatedColorLabels = colorNames;
     /* istanbul ignore else */
-    if (colorLabels instanceof Array && colorLabels.length === 17) {
+    if (isArray(colorLabels) && colorLabels.length === 17) {
       translatedColorLabels = colorLabels;
-    } else if (colorLabels && colorLabels.split(',').length === 17) {
+    } else if (isString(colorLabels) && colorLabels.split(',').length === 17) {
       translatedColorLabels = colorLabels.split(',');
     }
 
     // expose colour labels to all methods
-    colorNames.forEach((c, i) => {
-      self.colorLabels[c] = translatedColorLabels[i].trim();
-    });
+    ObjectAssign(this.colorLabels, ObjectFromEntries(translatedColorLabels.map((c, i) => [colorNames[i], c])));
 
     // update and expose component labels
-    const tempComponentLabels = componentLabels && isValidJSON(componentLabels)
-      ? JSON.parse(componentLabels) : componentLabels;
-
-    /** @type {Record<string, string>} */
-    self.componentLabels = ObjectAssign({ ...colorPickerLabels }, tempComponentLabels);
-
-    /** @type {Color} */
-    self.color = new Color(input.value || '#fff', format);
-
-    /** @type {CP.ColorFormats} */
-    self.format = format;
+    const tempComponentLabels =
+      isString(componentLabels) && isValidJSON(componentLabels)
+        ? (JSON.parse(componentLabels) as ColorPickerLabels)
+        : componentLabels;
+    this.componentLabels = ObjectAssign({ ...colorPickerLabels }, tempComponentLabels);
+    this.color = new Color(input.value || '#fff', format);
+    this.format = format;
 
     // set colour defaults
-    if (colorKeywords instanceof Array && colorKeywords.length) {
-      self.colorKeywords = colorKeywords;
-    } else if (typeof colorKeywords === 'string' && colorKeywords.length) {
-      self.colorKeywords = colorKeywords.split(',').map((x) => x.trim());
+    if (isArray(colorKeywords) && colorKeywords.length) {
+      this.colorKeywords = colorKeywords;
+    } else if (isString(colorKeywords) && colorKeywords.length) {
+      this.colorKeywords = colorKeywords.split(',').map(x => x.trim());
     }
 
     // set colour presets
-    if (colorPresets instanceof Array && colorPresets.length) {
-      self.colorPresets = colorPresets;
-    } else if (typeof colorPresets === 'string' && colorPresets.length) {
-      if (isValidJSON(colorPresets)) {
-        const { hue, hueSteps, lightSteps } = JSON.parse(colorPresets);
-        self.colorPresets = new ColorPalette(hue, hueSteps, lightSteps);
-      } else {
-        self.colorPresets = colorPresets.split(',').map((x) => x.trim());
-      }
+    if (isArray(colorPresets) && colorPresets.length) {
+      this.colorPresets = colorPresets;
+    } else if (colorPresets && isValidJSON(colorPresets)) {
+      const { hue, hueSteps, lightSteps, saturation } = JSON.parse(colorPresets) as {
+        hue: number;
+        hueSteps: number;
+        lightSteps: number;
+        saturation: number;
+      };
+      this.colorPresets = new ColorPalette(hue, hueSteps, lightSteps, saturation);
+    } else if (isString(colorPresets)) {
+      this.colorPresets = colorPresets.split(',').map((x: string) => x.trim());
     }
 
-    // bind events
-    self.showPicker = self.showPicker.bind(self);
-    self.togglePicker = self.togglePicker.bind(self);
-    self.toggleMenu = self.toggleMenu.bind(self);
-    self.menuClickHandler = self.menuClickHandler.bind(self);
-    self.menuKeyHandler = self.menuKeyHandler.bind(self);
-    self.pointerDown = self.pointerDown.bind(self);
-    self.pointerMove = self.pointerMove.bind(self);
-    self.pointerUp = self.pointerUp.bind(self);
-    self.update = self.update.bind(self);
-    self.handleScroll = self.handleScroll.bind(self);
-    self.handleFocusOut = self.handleFocusOut.bind(self);
-    self.changeHandler = self.changeHandler.bind(self);
-    self.handleDismiss = self.handleDismiss.bind(self);
-    self.handleKnobs = self.handleKnobs.bind(self);
-
     // generate markup
-    setMarkup(self);
+    setMarkup(this);
 
     const [colorPicker, colorMenu] = getElementsByClassName('color-dropdown', parent);
     // set main elements
-    /** @type {HTMLElement} */
-    self.pickerToggle = querySelector('.picker-toggle', parent);
-    /** @type {HTMLElement} */
-    self.menuToggle = querySelector('.menu-toggle', parent);
-    /** @type {HTMLElement} */
-    self.colorPicker = colorPicker;
-    /** @type {HTMLElement} */
-    self.colorMenu = colorMenu;
-    /** @type {HTMLInputElement[]} */
-    self.inputs = [...getElementsByClassName('color-input', parent)];
+    this.pickerToggle = querySelector('.picker-toggle', parent) as HTMLElement;
+    this.menuToggle = querySelector('.menu-toggle', parent) as HTMLElement;
+    this.colorPicker = colorPicker;
+    this.colorMenu = colorMenu;
+    this.inputs = [...getElementsByClassName('color-input', parent)] as HTMLInputElement[];
     const [controls] = getElementsByClassName('color-controls', parent);
-    self.controls = controls;
-    /** @type {(HTMLElement | Element)[]} */
-    self.controlKnobs = [...getElementsByClassName('knob', controls)];
-    /** @type {(HTMLElement)[]} */
-    self.visuals = [...getElementsByClassName('visual-control', controls)];
+    this.controls = controls;
+    this.controlKnobs = [...getElementsByClassName('knob', controls)];
+    this.visuals = [...getElementsByClassName('visual-control', controls)];
 
     // update colour picker controls, inputs and visuals
-    self.update();
+    this.update();
+    // console.log(this)
 
     // add main events listeners
-    toggleEvents(self, true);
+    toggleEvents(this, true);
 
     // set component data
-    Data.set(input, colorPickerString, self);
+    Data.set(input, colorPickerString, this);
   }
 
   /** Returns the current colour value */
-  get value() { return this.input.value; }
+  get value(): string {
+    return this.input.value;
+  }
 
   /**
    * Sets a new colour value.
+   *
    * @param {string} v new colour value
    */
-  set value(v) { this.input.value = v; }
+  set value(v: string) {
+    this.input.value = v;
+  }
 
   /** Check if the colour presets include any non-colour. */
-  get hasNonColor() {
-    return this.colorKeywords instanceof Array
-      && this.colorKeywords.some((x) => nonColors.includes(x));
+  get hasNonColor(): boolean {
+    return this.colorKeywords instanceof Array && this.colorKeywords.some(x => nonColors.includes(x));
   }
 
-  /** Check if the parent of the target is a `ColorPickerElement` instance. */
-  get isCE() { return this.parent.localName === colorPickerString; }
-
   /** Returns hexadecimal value of the current colour. */
-  get hex() { return this.color.toHex(true); }
+  get hex(): string {
+    return this.color.toHex(true);
+  }
 
   /** Returns the current colour value in {h,s,v,a} object format. */
-  get hsv() { return this.color.toHsv(); }
+  get hsv(): HSVA {
+    return this.color.toHsv();
+  }
 
   /** Returns the current colour value in {h,s,l,a} object format. */
-  get hsl() { return this.color.toHsl(); }
+  get hsl(): HSLA {
+    return this.color.toHsl();
+  }
 
   /** Returns the current colour value in {h,w,b,a} object format. */
-  get hwb() { return this.color.toHwb(); }
+  get hwb(): HWBA {
+    return this.color.toHwb();
+  }
 
   /** Returns the current colour value in {r,g,b,a} object format. */
-  get rgb() { return this.color.toRgb(); }
+  get rgb(): RGBA {
+    return this.color.toRgb();
+  }
 
   /** Returns the current colour brightness. */
-  get brightness() { return this.color.brightness; }
+  get brightness(): number {
+    return this.color.brightness;
+  }
 
   /** Returns the current colour luminance. */
-  get luminance() { return this.color.luminance; }
+  get luminance(): number {
+    return this.color.luminance;
+  }
 
   /** Checks if the current colour requires a light text colour. */
-  get isDark() {
+  get isDark(): boolean {
     const { color, brightness } = this;
     return brightness < 120 && color.a > 0.33;
   }
 
   /** Checks if the current input value is a valid colour. */
-  get isValid() {
+  get isValid(): boolean {
     const inputValue = this.input.value;
     return inputValue !== '' && new Color(inputValue).isValid;
   }
 
   /** Returns the colour appearance, usually the closest colour name for the current value. */
-  get appearance() {
-    const {
-      colorLabels, hsl, hsv, format,
-    } = this;
+  get appearance(): string {
+    const { colorLabels, hsl, hsv, format } = this;
 
     const hue = roundPart(hsl.h * 360);
     const saturationSource = format === 'hsl' ? hsl.s : hsv.s;
@@ -405,7 +422,7 @@ export default class ColorPicker {
     const lightness = roundPart(hsl.l * 100);
     const hsvl = hsv.v * 100;
 
-    let colorName;
+    let colorName = 'black';
 
     // determine color appearance
     /* istanbul ignore else */
@@ -443,21 +460,21 @@ export default class ColorPicker {
   }
 
   /** Updates `ColorPicker` visuals. */
-  updateVisuals() {
-    const self = this;
-    const {
-      controlPositions, visuals,
-    } = self;
+  updateVisuals(): void {
+    const { controlPositions, visuals } = this;
     const [v1, v2, v3] = visuals;
     const { offsetHeight } = v1;
     const hue = controlPositions.c2y / offsetHeight;
     const { r, g, b } = new Color({ h: hue, s: 1, l: 0.5 }).toRgb();
     const whiteGrad = 'linear-gradient(rgb(255,255,255) 0%, rgb(255,255,255) 100%)';
     const alpha = 1 - controlPositions.c3y / offsetHeight;
-    const roundA = roundPart((alpha * 100)) / 100;
+    const roundA = roundPart(alpha * 100) / 100;
 
     const fill = new Color({
-      h: hue, s: 1, l: 0.5, a: alpha,
+      h: hue,
+      s: 1,
+      l: 0.5,
+      a: alpha,
     }).toRgbString();
     const hueGradient = `linear-gradient(
       rgb(255,0,0) 0%, rgb(255,255,0) 16.67%,
@@ -478,63 +495,63 @@ export default class ColorPicker {
 
   /**
    * The `ColorPicker` *focusout* event listener when open.
-   * @param {FocusEvent} e
+   *
+   * @param e
    * @this {ColorPicker}
    */
-  handleFocusOut({ relatedTarget }) {
+  handleFocusOut = ({ relatedTarget }: FocusEvent & { relatedTarget: HTMLElement }): void => {
     if (relatedTarget && !this.parent.contains(relatedTarget)) {
       this.hide(true);
     }
-  }
+  };
 
   /**
    * The `ColorPicker` *keyup* event listener when open.
-   * @param {KeyboardEvent} e
+   *
+   * @param e
    * @this {ColorPicker}
    */
-  handleDismiss({ code }) {
-    const self = this;
-    if (self.isOpen && code === keyEscape) {
-      self.hide();
+  handleDismiss = ({ code }: KeyboardEvent): void => {
+    if (this.isOpen && code === keyEscape) {
+      this.hide();
     }
-  }
+  };
 
   /**
    * The `ColorPicker` *scroll* event listener when open.
-   * @param {Event} e
-   * @this {ColorPicker}
+   *
+   * @param e
    */
-  handleScroll(e) {
-    const self = this;
-    const { activeElement } = getDocument(self.input);
+  handleScroll = (e: Event) => {
+    const { activeElement } = getDocument(this.input);
 
-    self.updateDropdownPosition();
+    this.updateDropdownPosition();
 
     /* istanbul ignore next */
-    if (([pointermoveEvent, touchmoveEvent].includes(e.type) && self.dragElement)
-      || (activeElement && self.controlKnobs.includes(activeElement))) {
+    if (
+      ([pointermoveEvent, touchmoveEvent].includes(e.type) && this.dragElement) ||
+      (activeElement && this.controlKnobs.includes(activeElement as HTMLElement))
+    ) {
       e.stopPropagation();
       e.preventDefault();
     }
-  }
+  };
 
   /**
    * The `ColorPicker` keyboard event listener for menu navigation.
-   * @param {KeyboardEvent} e
-   * @this {ColorPicker}
+   *
+   * @param e
    */
-  menuKeyHandler(e) {
+  menuKeyHandler = (e: KeyboardEvent & { target: HTMLElement }) => {
     const { target, code } = e;
     const { previousElementSibling, nextElementSibling, parentElement } = target;
     const isColorOptionsMenu = parentElement && hasClass(parentElement, 'color-options');
-    const allSiblings = [...parentElement.children];
-    const columnsCount = isColorOptionsMenu
-      && getElementStyle(parentElement, 'grid-template-columns').split(' ').length;
+    const allSiblings = parentElement ? [...parentElement.children] : [];
+    const columnsCount =
+      isColorOptionsMenu && getElementStyle(parentElement, 'grid-template-columns').split(' ').length;
     const currentIndex = allSiblings.indexOf(target);
-    const previousElement = currentIndex > -1
-      && columnsCount && allSiblings[currentIndex - columnsCount];
-    const nextElement = currentIndex > -1
-      && columnsCount && allSiblings[currentIndex + columnsCount];
+    const previousElement = currentIndex > -1 && columnsCount && allSiblings[currentIndex - columnsCount];
+    const nextElement = currentIndex > -1 && columnsCount && allSiblings[currentIndex + columnsCount];
 
     if ([keyArrowDown, keyArrowUp, keySpace].includes(code)) {
       // prevent scroll when navigating the menu via arrow keys / Space
@@ -542,35 +559,35 @@ export default class ColorPicker {
     }
     if (isColorOptionsMenu) {
       if (previousElement && code === keyArrowUp) {
-        focus(previousElement);
+        focus(previousElement as HTMLElement);
       } else if (nextElement && code === keyArrowDown) {
-        focus(nextElement);
+        focus(nextElement as HTMLElement);
       } else if (previousElementSibling && code === keyArrowLeft) {
-        focus(previousElementSibling);
+        focus(previousElementSibling as HTMLElement);
       } else if (nextElementSibling && code === keyArrowRight) {
-        focus(nextElementSibling);
+        focus(nextElementSibling as HTMLElement);
       }
     } else if (previousElementSibling && [keyArrowLeft, keyArrowUp].includes(code)) {
-      focus(previousElementSibling);
+      focus(previousElementSibling as HTMLElement);
     } else if (nextElementSibling && [keyArrowRight, keyArrowDown].includes(code)) {
-      focus(nextElementSibling);
+      focus(nextElementSibling as HTMLElement);
     }
 
     if ([keyEnter, keySpace].includes(code)) {
-      this.menuClickHandler({ target });
+      this.menuClickHandler(e);
     }
-  }
+  };
 
   /**
    * The `ColorPicker` click event listener for the colour menu presets / defaults.
-   * @param {Event} e
+   *
+   * @param e
    * @this {ColorPicker}
    */
-  menuClickHandler(e) {
-    const self = this;
+  menuClickHandler = (e: Event) => {
     const { target } = e;
-    const { colorMenu } = self;
-    const newOption = (getAttribute(target, 'data-value') || '').trim();
+    const { colorMenu } = this;
+    const newOption = (getAttribute(target as HTMLElement, 'data-value') || '').trim();
     // invalidate for targets other than color options
     if (!newOption.length) return;
     const currentActive = querySelector('li.active', colorMenu);
@@ -578,15 +595,16 @@ export default class ColorPicker {
     newColor = nonColors.includes(newColor) ? 'white' : newColor;
     newColor = newColor === 'transparent' ? 'rgba(0,0,0,0)' : newColor;
 
-    const {
-      r, g, b, a,
-    } = new Color(newColor);
+    const { r, g, b, a } = new Color(newColor);
 
-    ObjectAssign(self.color, {
-      r, g, b, a,
+    ObjectAssign(this.color, {
+      r,
+      g,
+      b,
+      a,
     });
 
-    self.update();
+    this.update();
 
     /* istanbul ignore else */
     if (currentActive !== target) {
@@ -596,30 +614,28 @@ export default class ColorPicker {
         removeAttribute(currentActive, ariaSelected);
       }
 
-      addClass(target, 'active');
-      setAttribute(target, ariaSelected, 'true');
+      addClass(target as HTMLElement, 'active');
+      setAttribute(target as HTMLElement, ariaSelected, 'true');
 
       if (nonColors.includes(newOption)) {
-        self.value = newOption;
+        this.value = newOption;
       }
-      firePickerChange(self);
+      firePickerChange(this);
     }
-  }
+  };
 
   /**
    * The `ColorPicker` *touchstart* / *mousedown* events listener for control knobs.
-   * @param {PointerEvent} e
-   * @this {ColorPicker}
+   *
+   * @param e
    */
-  pointerDown(e) {
-    const self = this;
-    /** @type {*} */
+  pointerDown = (e: PointerEvent & { target: HTMLElement }) => {
+    if (e.button !== 0) return;
     const { target, pageX, pageY } = e;
-    const { colorMenu, visuals, controlKnobs } = self;
+    const { colorMenu, visuals, controlKnobs } = this;
     const [v1, v2, v3] = visuals;
     const [c1, c2, c3] = controlKnobs;
-    /** @type {HTMLElement} */
-    const visual = controlKnobs.includes(target) ? target.previousElementSibling : target;
+    const visual = controlKnobs.includes(target) ? (target.previousElementSibling as HTMLElement) : target;
     const visualRect = getBoundingClientRect(visual);
     const html = getDocumentElement(v1);
     const offsetX = pageX - html.scrollLeft - visualRect.left;
@@ -627,14 +643,14 @@ export default class ColorPicker {
 
     /* istanbul ignore else */
     if (target === v1 || target === c1) {
-      self.dragElement = visual;
-      self.changeControl1(offsetX, offsetY);
+      this.dragElement = visual;
+      this.changeControl1(offsetX, offsetY);
     } else if (target === v2 || target === c2) {
-      self.dragElement = visual;
-      self.changeControl2(offsetY);
+      this.dragElement = visual;
+      this.changeControl2(offsetY);
     } else if (target === v3 || target === c3) {
-      self.dragElement = visual;
-      self.changeAlpha(offsetY);
+      this.dragElement = visual;
+      this.changeAlpha(offsetY);
     }
 
     if (colorMenu) {
@@ -645,35 +661,34 @@ export default class ColorPicker {
       }
     }
     e.preventDefault();
-  }
+  };
 
   /**
    * The `ColorPicker` *touchend* / *mouseup* events listener for control knobs.
-   * @param {PointerEvent} e
-   * @this {ColorPicker}
+   *
+   * @param e
+   * @this
    */
-  pointerUp({ target }) {
-    const self = this;
-    const { parent } = self;
+  pointerUp = ({ target }: PointerEvent & { target: HTMLElement }) => {
+    const { parent } = this;
     const doc = getDocument(parent);
     const currentOpen = querySelector(`${colorPickerParentSelector}.open`, doc) !== null;
     const selection = doc.getSelection();
 
-    if (!self.dragElement && !selection.toString().length
-      && !parent.contains(target)) {
-      self.hide(currentOpen);
+    if (!this.dragElement && (!selection || !selection.toString().length) && !parent.contains(target)) {
+      this.hide(currentOpen);
     }
 
-    self.dragElement = null;
-  }
+    this.dragElement = undefined;
+  };
 
   /**
    * The `ColorPicker` *touchmove* / *mousemove* events listener for control knobs.
+   *
    * @param {PointerEvent} e
    */
-  pointerMove(e) {
-    const self = this;
-    const { dragElement, visuals } = self;
+  pointerMove = (e: PointerEvent) => {
+    const { dragElement, visuals } = this;
     const [v1, v2, v3] = visuals;
     const { pageX, pageY } = e;
 
@@ -685,35 +700,35 @@ export default class ColorPicker {
     const offsetY = pageY - win.scrollTop - controlRect.top;
 
     if (dragElement === v1) {
-      self.changeControl1(offsetX, offsetY);
+      this.changeControl1(offsetX, offsetY);
     }
 
     if (dragElement === v2) {
-      self.changeControl2(offsetY);
+      this.changeControl2(offsetY);
     }
 
     if (dragElement === v3) {
-      self.changeAlpha(offsetY);
+      this.changeAlpha(offsetY);
     }
-  }
+  };
 
   /**
    * The `ColorPicker` *keydown* event listener for control knobs.
-   * @param {KeyboardEvent} e
+   *
+   * @param e
    */
-  handleKnobs(e) {
+  handleKnobs = (e: Event & { code: string }) => {
     const { target, code } = e;
-    const self = this;
 
     // only react to arrow buttons
     if (![keyArrowUp, keyArrowDown, keyArrowLeft, keyArrowRight].includes(code)) return;
     e.preventDefault();
 
-    const { controlKnobs, visuals } = self;
+    const { controlKnobs, visuals } = this;
     const { offsetWidth, offsetHeight } = visuals[0];
     const [c1, c2, c3] = controlKnobs;
     const { activeElement } = getDocument(c1);
-    const currentKnob = controlKnobs.find((x) => x === activeElement);
+    const currentKnob = controlKnobs.find(x => x === activeElement);
     const yRatio = offsetHeight / 360;
 
     /* istanbul ignore else */
@@ -727,52 +742,45 @@ export default class ColorPicker {
 
         /* istanbul ignore else */
         if ([keyArrowLeft, keyArrowRight].includes(code)) {
-          self.controlPositions.c1x += code === keyArrowRight ? xRatio : -xRatio;
+          this.controlPositions.c1x += code === keyArrowRight ? xRatio : -xRatio;
         } else if ([keyArrowUp, keyArrowDown].includes(code)) {
-          self.controlPositions.c1y += code === keyArrowDown ? yRatio : -yRatio;
+          this.controlPositions.c1y += code === keyArrowDown ? yRatio : -yRatio;
         }
 
-        offsetX = self.controlPositions.c1x;
-        offsetY = self.controlPositions.c1y;
-        self.changeControl1(offsetX, offsetY);
+        offsetX = this.controlPositions.c1x;
+        offsetY = this.controlPositions.c1y;
+        this.changeControl1(offsetX, offsetY);
       } else if (target === c2) {
-        self.controlPositions.c2y += [keyArrowDown, keyArrowRight].includes(code)
-          ? yRatio
-          : -yRatio;
+        this.controlPositions.c2y += [keyArrowDown, keyArrowRight].includes(code) ? yRatio : -yRatio;
 
-        offsetY = self.controlPositions.c2y;
-        self.changeControl2(offsetY);
+        offsetY = this.controlPositions.c2y;
+        this.changeControl2(offsetY);
       } else if (target === c3) {
-        self.controlPositions.c3y += [keyArrowDown, keyArrowRight].includes(code)
-          ? yRatio
-          : -yRatio;
+        this.controlPositions.c3y += [keyArrowDown, keyArrowRight].includes(code) ? yRatio : -yRatio;
 
-        offsetY = self.controlPositions.c3y;
-        self.changeAlpha(offsetY);
+        offsetY = this.controlPositions.c3y;
+        this.changeAlpha(offsetY);
       }
-      self.handleScroll(e);
+      this.handleScroll(e);
     }
-  }
+  };
 
   /** The event listener of the colour form inputs. */
-  changeHandler() {
-    const self = this;
+  changeHandler = (): void => {
     let colorSource;
-    const {
-      inputs, format, value: currentValue, input, controlPositions, visuals,
-    } = self;
-    /** @type {*} */
+    const { inputs, format, value: currentValue, input, controlPositions, visuals } = this;
     const { activeElement } = getDocument(input);
     const { offsetHeight } = visuals[0];
-    const [i1,,, i4] = inputs;
-    const [v1, v2, v3, v4] = format === 'rgb'
-      ? inputs.map((i) => parseFloat(i.value) / (i === i4 ? 100 : 1))
-      : inputs.map((i) => parseFloat(i.value) / (i !== i1 ? 100 : 360));
-    const isNonColorValue = self.hasNonColor && nonColors.includes(currentValue);
-    const alpha = i4 ? v4 : (1 - controlPositions.c3y / offsetHeight);
+    const [i1, , , i4] = inputs;
+    const [v1, v2, v3, v4] =
+      format === 'rgb'
+        ? inputs.map(i => parseFloat(i.value) / (i === i4 ? 100 : 1))
+        : inputs.map(i => parseFloat(i.value) / (i !== i1 ? 100 : 360));
+    const isNonColorValue = this.hasNonColor && nonColors.includes(currentValue);
+    const alpha = i4 ? v4 : 1 - controlPositions.c3y / offsetHeight;
 
     /* istanbul ignore else */
-    if (activeElement === input || (activeElement && inputs.includes(activeElement))) {
+    if (activeElement === input || (activeElement && inputs.includes(activeElement as HTMLInputElement))) {
       if (activeElement === input) {
         if (isNonColorValue) {
           colorSource = currentValue === 'transparent' ? 'rgba(0,0,0,0)' : 'rgb(0,0,0)';
@@ -783,50 +791,59 @@ export default class ColorPicker {
         colorSource = i1.value;
       } else if (format === 'hsl') {
         colorSource = {
-          h: v1, s: v2, l: v3, a: alpha,
+          h: v1,
+          s: v2,
+          l: v3,
+          a: alpha,
         };
       } else if (format === 'hwb') {
         colorSource = {
-          h: v1, w: v2, b: v3, a: alpha,
+          h: v1,
+          w: v2,
+          b: v3,
+          a: alpha,
         };
       } else {
         colorSource = {
-          r: v1, g: v2, b: v3, a: alpha,
+          r: v1,
+          g: v2,
+          b: v3,
+          a: alpha,
         };
       }
 
-      const {
-        r, g, b, a,
-      } = new Color(colorSource);
+      const { r, g, b, a } = new Color(colorSource);
 
-      ObjectAssign(self.color, {
-        r, g, b, a,
+      ObjectAssign(this.color, {
+        r,
+        g,
+        b,
+        a,
       });
-      self.setControlPositions();
-      self.updateAppearance();
-      self.updateInputs();
-      self.updateControls();
-      self.updateVisuals();
+      this.setControlPositions();
+      this.updateAppearance();
+      this.updateInputs();
+      this.updateControls();
+      this.updateVisuals();
 
       // set non-color keyword
       if (activeElement === input && isNonColorValue) {
-        self.value = currentValue;
+        this.value = currentValue;
       }
     }
-  }
+  };
 
   /**
    * Updates `ColorPicker` first control:
    * * `lightness` and `saturation` for HEX/RGB;
    * * `lightness` and `hue` for HSL.
    *
-   * @param {number} X the X component of the offset
-   * @param {number} Y the Y component of the offset
+   * @param X the X component of the offset
+   * @param Y the Y component of the offset
    */
-  changeControl1(X, Y) {
-    const self = this;
+  changeControl1(X: number, Y: number): void {
     let [offsetX, offsetY] = [0, 0];
-    const { controlPositions, visuals } = self;
+    const { controlPositions, visuals } = this;
     const { offsetHeight, offsetWidth } = visuals[0];
 
     if (X > offsetWidth) offsetX = offsetWidth;
@@ -843,25 +860,29 @@ export default class ColorPicker {
     const alpha = 1 - controlPositions.c3y / offsetHeight;
 
     // new color
-    const {
-      r, g, b, a,
-    } = new Color({
-      h: hue, s: saturation, v: lightness, a: alpha,
+    const { r, g, b, a } = new Color({
+      h: hue,
+      s: saturation,
+      v: lightness,
+      a: alpha,
     });
 
-    ObjectAssign(self.color, {
-      r, g, b, a,
+    ObjectAssign(this.color, {
+      r,
+      g,
+      b,
+      a,
     });
 
     // new positions
-    self.controlPositions.c1x = offsetX;
-    self.controlPositions.c1y = offsetY;
+    this.controlPositions.c1x = offsetX;
+    this.controlPositions.c1y = offsetY;
 
     // update color picker
-    self.updateAppearance();
-    self.updateInputs();
-    self.updateControls();
-    self.updateVisuals();
+    this.updateAppearance();
+    this.updateInputs();
+    this.updateControls();
+    this.updateVisuals();
   }
 
   /**
@@ -869,13 +890,10 @@ export default class ColorPicker {
    * * `hue` for HEX/RGB/HWB;
    * * `saturation` for HSL.
    *
-   * @param {number} Y the Y offset
+   * @param Y the Y offset
    */
-  changeControl2(Y) {
-    const self = this;
-    const {
-      controlPositions, visuals,
-    } = self;
+  changeControl2(Y: number) {
+    const { controlPositions, visuals } = this;
     const { offsetHeight, offsetWidth } = visuals[0];
 
     let offsetY = 0;
@@ -889,34 +907,37 @@ export default class ColorPicker {
     const alpha = 1 - controlPositions.c3y / offsetHeight;
 
     // new color
-    const {
-      r, g, b, a,
-    } = new Color({
-      h: hue, s: saturation, v: lightness, a: alpha,
+    const { r, g, b, a } = new Color({
+      h: hue,
+      s: saturation,
+      v: lightness,
+      a: alpha,
     });
 
-    ObjectAssign(self.color, {
-      r, g, b, a,
+    ObjectAssign(this.color, {
+      r,
+      g,
+      b,
+      a,
     });
 
     // new position
-    self.controlPositions.c2y = offsetY;
+    this.controlPositions.c2y = offsetY;
     // update color picker
-    self.updateAppearance();
-    self.updateInputs();
-    self.updateControls();
-    self.updateVisuals();
+    this.updateAppearance();
+    this.updateInputs();
+    this.updateControls();
+    this.updateVisuals();
   }
 
   /**
    * Updates `ColorPicker` last control,
    * the `alpha` channel.
    *
-   * @param {number} Y
+   * @param Y
    */
-  changeAlpha(Y) {
-    const self = this;
-    const { visuals } = self;
+  changeAlpha(Y: number) {
+    const { visuals } = this;
     const { offsetHeight } = visuals[0];
     let offsetY = 0;
 
@@ -925,14 +946,14 @@ export default class ColorPicker {
 
     // update color alpha
     const alpha = 1 - offsetY / offsetHeight;
-    self.color.setAlpha(alpha);
+    this.color.setAlpha(alpha);
     // update position
-    self.controlPositions.c3y = offsetY;
+    this.controlPositions.c3y = offsetY;
     // update color picker
-    self.updateAppearance();
-    self.updateInputs();
-    self.updateControls();
-    self.updateVisuals();
+    this.updateAppearance();
+    this.updateInputs();
+    this.updateControls();
+    this.updateVisuals();
   }
 
   /**
@@ -940,20 +961,18 @@ export default class ColorPicker {
    * * initialization
    * * window resize
    */
-  update() {
-    const self = this;
-    self.updateDropdownPosition();
-    self.updateAppearance();
-    self.setControlPositions();
-    self.updateInputs(true);
-    self.updateControls();
-    self.updateVisuals();
-  }
+  update = () => {
+    this.updateDropdownPosition();
+    this.updateAppearance();
+    this.setControlPositions();
+    this.updateInputs(true);
+    this.updateControls();
+    this.updateVisuals();
+  };
 
   /** Updates the open dropdown position on *scroll* event. */
   updateDropdownPosition() {
-    const self = this;
-    const { input, colorPicker, colorMenu } = self;
+    const { input, colorPicker, colorMenu } = this;
     const elRect = getBoundingClientRect(input);
     const { top, bottom } = elRect;
     const { offsetHeight: elHeight } = input;
@@ -978,10 +997,7 @@ export default class ColorPicker {
 
   /** Updates control knobs' positions. */
   setControlPositions() {
-    const self = this;
-    const {
-      visuals, color, hsv,
-    } = self;
+    const { visuals, color, hsv } = this;
     const { offsetHeight, offsetWidth } = visuals[0];
     const alpha = color.a;
     const hue = hsv.h;
@@ -989,34 +1005,28 @@ export default class ColorPicker {
     const saturation = hsv.s;
     const lightness = hsv.v;
 
-    self.controlPositions.c1x = saturation * offsetWidth;
-    self.controlPositions.c1y = (1 - lightness) * offsetHeight;
-    self.controlPositions.c2y = hue * offsetHeight;
-    self.controlPositions.c3y = (1 - alpha) * offsetHeight;
+    this.controlPositions.c1x = saturation * offsetWidth;
+    this.controlPositions.c1y = (1 - lightness) * offsetHeight;
+    this.controlPositions.c2y = hue * offsetHeight;
+    this.controlPositions.c3y = (1 - alpha) * offsetHeight;
   }
 
   /** Update the visual appearance label and control knob labels. */
   updateAppearance() {
-    const self = this;
-    const {
-      componentLabels, color, parent,
-      hsv, hex, format, controlKnobs,
-    } = self;
-    const {
-      appearanceLabel, hexLabel, valueLabel,
-    } = componentLabels;
+    const { componentLabels, color, parent, hsv, hex, format, controlKnobs } = this;
+    const { appearanceLabel, hexLabel, valueLabel } = componentLabels;
     let { r, g, b } = color.toRgb();
     const [knob1, knob2, knob3] = controlKnobs;
     const hue = roundPart(hsv.h * 360);
     const alpha = color.a;
     const saturation = roundPart(hsv.s * 100);
     const lightness = roundPart(hsv.v * 100);
-    const colorName = self.appearance;
+    const colorName = this.appearance;
 
     let colorLabel = `${hexLabel} ${hex.split('').join(' ')}`;
 
     if (format === 'hwb') {
-      const { hwb } = self;
+      const { hwb } = this;
       const whiteness = roundPart(hwb.w * 100);
       const blackness = roundPart(hwb.b * 100);
       colorLabel = `HWB: ${hue}°, ${whiteness}%, ${blackness}%`;
@@ -1043,12 +1053,12 @@ export default class ColorPicker {
 
     // update the input backgroundColor
     const newColor = color.toString();
-    setElementStyle(self.input, { backgroundColor: newColor });
+    setElementStyle(this.input, { backgroundColor: newColor });
 
     // toggle dark/light classes will also style the placeholder
     // dark sets color white, light sets color black
     // isDark ? '#000' : '#fff'
-    if (!self.isDark) {
+    if (!this.isDark) {
       if (hasClass(parent, 'txt-dark')) removeClass(parent, 'txt-dark');
       if (!hasClass(parent, 'txt-light')) addClass(parent, 'txt-light');
     } else {
@@ -1060,59 +1070,57 @@ export default class ColorPicker {
   /** Updates the control knobs actual positions. */
   updateControls() {
     const { controlKnobs, controlPositions } = this;
-    let {
-      c1x, c1y, c2y, c3y,
-    } = controlPositions;
+    let { c1x, c1y, c2y, c3y } = controlPositions;
     const [control1, control2, control3] = controlKnobs;
     // round control positions
     [c1x, c1y, c2y, c3y] = [c1x, c1y, c2y, c3y].map(roundPart);
 
-    setElementStyle(control1, { transform: `translate3d(${c1x - 4}px,${c1y - 4}px,0)` });
+    setElementStyle(control1, {
+      transform: `translate3d(${c1x - 4}px,${c1y - 4}px,0)`,
+    });
     setElementStyle(control2, { transform: `translate3d(0,${c2y - 4}px,0)` });
     setElementStyle(control3, { transform: `translate3d(0,${c3y - 4}px,0)` });
   }
 
   /**
    * Updates all color form inputs.
-   * @param {boolean=} isPrevented when `true`, the component original event is prevented
+   *
+   * @param isPrevented when `true`, the component original event is prevented
    */
-  updateInputs(isPrevented) {
-    const self = this;
-    const {
-      value: oldColor, format, inputs, color, hsl,
-    } = self;
+  updateInputs(isPrevented?: boolean) {
+    const { value: oldColor, format, inputs, color, hsl } = this;
     const [i1, i2, i3, i4] = inputs;
     const alpha = roundPart(color.a * 100);
     const hue = roundPart(hsl.h * 360);
-    let newColor;
+    let newColor = color.toString();
 
     /* istanbul ignore else */
     if (format === 'hex') {
-      newColor = self.color.toHexString(true);
-      i1.value = self.hex;
+      newColor = this.color.toHexString(true);
+      i1.value = this.hex;
     } else if (format === 'hsl') {
       const lightness = roundPart(hsl.l * 100);
       const saturation = roundPart(hsl.s * 100);
-      newColor = self.color.toHslString();
+      newColor = this.color.toHslString();
       i1.value = `${hue}`;
       i2.value = `${saturation}`;
       i3.value = `${lightness}`;
       i4.value = `${alpha}`;
     } else if (format === 'hwb') {
-      const { w, b } = self.hwb;
+      const { w, b } = this.hwb;
       const whiteness = roundPart(w * 100);
       const blackness = roundPart(b * 100);
 
-      newColor = self.color.toHwbString();
+      newColor = this.color.toHwbString();
       i1.value = `${hue}`;
       i2.value = `${whiteness}`;
       i3.value = `${blackness}`;
       i4.value = `${alpha}`;
     } else if (format === 'rgb') {
-      let { r, g, b } = self.rgb;
+      let { r, g, b } = this.rgb;
       [r, g, b] = [r, g, b].map(roundPart);
 
-      newColor = self.color.toRgbString();
+      newColor = this.color.toRgbString();
       i1.value = `${r}`;
       i2.value = `${g}`;
       i3.value = `${b}`;
@@ -1120,74 +1128,70 @@ export default class ColorPicker {
     }
 
     // update the color value
-    self.value = `${newColor}`;
+    this.value = newColor;
 
     // don't trigger the custom event unless it's really changed
     if (!isPrevented && newColor !== oldColor) {
-      firePickerChange(self);
+      firePickerChange(this);
     }
   }
 
   /**
    * Toggle the `ColorPicker` dropdown visibility.
-   * @param {Event=} e
-   * @this {ColorPicker}
+   *
+   * @param e
    */
-  togglePicker(e) {
+  togglePicker = (e?: Event) => {
     if (e) e.preventDefault();
-    const self = this;
-    const { colorPicker } = self;
+    const { colorPicker } = this;
 
-    if (self.isOpen && hasClass(colorPicker, 'show')) {
-      self.hide(true);
+    if (this.isOpen && hasClass(colorPicker, 'show')) {
+      this.hide(true);
     } else {
-      showDropdown(self, colorPicker);
+      showDropdown(this, colorPicker);
     }
-  }
+  };
 
   /** Shows the `ColorPicker` dropdown. */
-  showPicker() {
-    const self = this;
-    const { colorPicker } = self;
+  showPicker = () => {
+    const { colorPicker } = this;
 
-    if (!['top', 'bottom'].some((c) => hasClass(colorPicker, c))) {
-      showDropdown(self, colorPicker);
+    if (!['top', 'bottom'].some(c => hasClass(colorPicker, c))) {
+      showDropdown(this, colorPicker);
     }
-  }
+  };
 
   /**
    * Toggles the visibility of the `ColorPicker` presets menu.
-   * @param {Event=} e
+   *
+   * @param e
    * @this {ColorPicker}
    */
-  toggleMenu(e) {
+  toggleMenu = (e?: Event) => {
     if (e) e.preventDefault();
-    const self = this;
-    const { colorMenu } = self;
+    const { colorMenu } = this;
 
-    if (self.isOpen && hasClass(colorMenu, 'show')) {
-      self.hide(true);
+    if (this.isOpen && hasClass(colorMenu, 'show')) {
+      this.hide(true);
     } else {
-      showDropdown(self, colorMenu);
+      showDropdown(this, colorMenu);
     }
-  }
+  };
 
   /**
    * Hides the currently open `ColorPicker` dropdown.
+   *
    * @param {boolean=} focusPrevented
    */
-  hide(focusPrevented) {
-    const self = this;
-    if (self.isOpen) {
-      const {
-        pickerToggle, menuToggle, colorPicker, colorMenu, parent, input,
-      } = self;
+  hide(focusPrevented?: boolean) {
+    if (this.isOpen) {
+      const { pickerToggle, menuToggle, colorPicker, colorMenu, parent, input } = this;
       const openPicker = hasClass(colorPicker, 'show');
       const openDropdown = openPicker ? colorPicker : colorMenu;
       const relatedBtn = openPicker ? pickerToggle : menuToggle;
       const animationDuration = openDropdown && getElementTransitionDuration(openDropdown);
 
-      self.value = self.color.toString(true);
+      this.value = this.color.toString(true);
 
       /* istanbul ignore else */
       if (openDropdown) {
@@ -1198,8 +1202,8 @@ export default class ColorPicker {
           /* istanbul ignore else */
           if (!querySelector('.show', parent)) {
             removeClass(parent, 'open');
-            toggleEventsOnShown(self);
-            self.isOpen = false;
+            toggleEventsOnShown(this);
+            this.isOpen = false;
           }
         }, animationDuration);
       }
@@ -1207,41 +1211,26 @@ export default class ColorPicker {
       if (!focusPrevented) {
         focus(pickerToggle);
       }
-      setAttribute(input, tabIndex, '-1');
+      setAttribute(input, tabindex, '-1');
       if (relatedBtn === menuToggle) {
-        setAttribute(menuToggle, tabIndex, '-1');
+        setAttribute(menuToggle, tabindex, '-1');
       }
     }
   }
 
   /** Removes `ColorPicker` from target `<input>`. */
   dispose() {
-    const self = this;
-    const { input, parent } = self;
-    self.hide(true);
-    toggleEvents(self);
-    [...parent.children].forEach((el) => {
+    const { input, parent } = this;
+    this.hide(true);
+    toggleEvents(this);
+    [...parent.children].forEach(el => {
       if (el !== input) el.remove();
     });
 
-    removeAttribute(input, tabIndex);
+    removeAttribute(input, tabindex);
     setElementStyle(input, { backgroundColor: '' });
 
-    ['txt-light', 'txt-dark'].forEach((c) => removeClass(parent, c));
+    ['txt-light', 'txt-dark'].forEach(c => removeClass(parent, c));
     Data.remove(input, colorPickerString);
   }
 }
-
-ObjectAssign(ColorPicker, {
-  Color,
-  ColorPalette,
-  Version,
-  getInstance: getColorPickerInstance,
-  init: initColorPicker,
-  selector: colorPickerSelector,
-  // utils important for render
-  roundPart,
-  setElementStyle,
-  setAttribute,
-  getBoundingClientRect,
-});