@thednp/color-picker 1.0.1 → 2.0.0-alpha10

package/src/ts/interface/ColorNames.ts

@@ -0,0 +1,20 @@
+export default interface ColorNames {
+  white: string;
+  black: string;
+  grey: string;
+  red: string;
+  orange: string;
+  brown: string;
+  gold: string;
+  olive: string;
+  yellow: string;
+  lime: string;
+  green: string;
+  teal: string;
+  cyan: string;
+  blue: string;
+  violet: string;
+  magenta: string;
+  pink: string;
+  [key: string]: string;
+}

package/src/ts/interface/colorPickerLabels.ts

@@ -0,0 +1,20 @@
+export default interface ColorPickerLabels {
+  pickerLabel: string;
+  appearanceLabel: string;
+  valueLabel: string;
+  toggleLabel: string;
+  presetsLabel: string;
+  defaultsLabel: string;
+  formatLabel: string;
+  alphaLabel: string;
+  hexLabel: string;
+  hueLabel: string;
+  whitenessLabel: string;
+  blacknessLabel: string;
+  saturationLabel: string;
+  lightnessLabel: string;
+  redLabel: string;
+  greenLabel: string;
+  blueLabel: string;
+  [key: string]: string;
+}

package/src/ts/interface/colorPickerOptions.ts

@@ -0,0 +1,11 @@
+import type { ColorFormats } from '@thednp/color';
+import ColorPickerLabels from './colorPickerLabels';
+import ColorPalette from '../colorPalette';
+
+export default interface ColorPickerOptions {
+  colorLabels: string | string[];
+  componentLabels: ColorPickerLabels;
+  format: ColorFormats;
+  colorPresets: string | string[] | ColorPalette | false;
+  colorKeywords: string | string[] | false;
+}

package/src/ts/interface/paletteOptions.ts

@@ -0,0 +1,6 @@
+export default interface PaletteOptions {
+  hue: number;
+  hueSteps: number;
+  lightSteps: number;
+  saturation: number;
+}

package/src/ts/util/colorNames.ts

@@ -0,0 +1,21 @@
+/** A list of 17 color names used for WAI-ARIA compliance. */
+const colorNames: string[] = [
+  'white',
+  'black',
+  'grey',
+  'red',
+  'orange',
+  'brown',
+  'gold',
+  'olive',
+  'yellow',
+  'lime',
+  'green',
+  'teal',
+  'cyan',
+  'blue',
+  'violet',
+  'magenta',
+  'pink',
+];
+export default colorNames;

package/src/{js/util/colorPickerLabels.js → ts/util/colorPickerLabels.ts}

@@ -1,5 +1,7 @@
-/** @type {Record<string, string>} */
-const colorPickerLabels = {
+import ColorPickerLabels from '../interface/colorPickerLabels';
+
+/** The labels presented to the user. */
+const colorPickerLabels: ColorPickerLabels = {
   pickerLabel: 'Colour Picker',
   appearanceLabel: 'Colour Appearance',
   valueLabel: 'Colour Value',

package/src/ts/util/getColorControls.ts

@@ -0,0 +1,90 @@
+import { createElement } from '@thednp/shorty';
+
+import ColorPicker from '..';
+
+/**
+ * Returns all color controls for `ColorPicker`.
+ *
+ * @param self the `ColorPicker` instance
+ * @returns color controls
+ */
+const getColorControls = (self: ColorPicker): HTMLElement => {
+  const { format, componentLabels } = self;
+  const { hueLabel, alphaLabel, lightnessLabel, saturationLabel, whitenessLabel, blacknessLabel } = componentLabels;
+
+  const max1 = format === 'hsl' ? 360 : 100;
+  const max2 = format === 'hsl' ? 100 : 360;
+  const max3 = 100;
+
+  let ctrl1Label = format === 'hsl' ? `${hueLabel} & ${lightnessLabel}` : `${lightnessLabel} & ${saturationLabel}`;
+
+  ctrl1Label = format === 'hwb' ? `${whitenessLabel} & ${blacknessLabel}` : ctrl1Label;
+
+  const ctrl2Label = format === 'hsl' ? `${saturationLabel}` : `${hueLabel}`;
+
+  const colorControls = createElement({
+    tagName: 'div',
+    className: `color-controls ${format}`,
+  }) as HTMLElement;
+
+  const colorPointer = 'color-pointer';
+  const colorSlider = 'color-slider';
+
+  const controls = [
+    {
+      i: 1,
+      c: colorPointer,
+      l: ctrl1Label,
+      min: 0,
+      max: max1,
+    },
+    {
+      i: 2,
+      c: colorSlider,
+      l: ctrl2Label,
+      min: 0,
+      max: max2,
+    },
+    {
+      i: 3,
+      c: colorSlider,
+      l: alphaLabel,
+      min: 0,
+      max: max3,
+    },
+  ];
+
+  controls.forEach(template => {
+    const { i, c, l, min, max } = template;
+    const control = createElement({
+      tagName: 'div',
+      className: 'color-control',
+      role: 'presentation',
+    }) as HTMLElement;
+
+    control.append(
+      createElement({
+        tagName: 'div',
+        className: `visual-control visual-control${i}`,
+      }) as HTMLElement,
+    );
+
+    const knob = createElement({
+      tagName: 'div',
+      className: `${c} knob`,
+      ariaLive: 'polite',
+      ariaLabel: l,
+      role: 'slider',
+      tabIndex: 0,
+      ariaValueMin: `${min}`,
+      ariaValueMax: `${max}`,
+    }) as HTMLElement;
+
+    control.append(knob);
+    colorControls.append(control);
+  });
+
+  return colorControls;
+};
+
+export default getColorControls;

package/src/{js/util/getColorForm.js → ts/util/getColorForm.ts}

@@ -1,37 +1,43 @@
-import createElement from 'shorter-js/src/misc/createElement';
-import setAttribute from 'shorter-js/src/attr/setAttribute';
-import ObjectAssign from 'shorter-js/src/misc/ObjectAssign';
-import toUpperCase from 'shorter-js/src/misc/toUpperCase';
+import { createElement, setAttribute, ObjectAssign, toUpperCase } from '@thednp/shorty';
 
 import vHidden from './vHidden';
+import ColorPicker from '../index';
 
 /**
  * Returns the color form for `ColorPicker`.
  *
- * @param {CP.ColorPicker} self the `ColorPicker` instance
- * @returns {HTMLElement | Element} a new `<div>` element with color component `<input>`
+ * @param self the `ColorPicker` instance
+ * @returns a new `<div>` element with color component `<input>`
  */
-export default function getColorForm(self) {
+const getColorForm = (self: ColorPicker): HTMLElement => {
   const { format, id, componentLabels } = self;
   const colorForm = createElement({
     tagName: 'div',
     className: `color-form ${format}`,
-  });
+  }) as HTMLElement;
 
   let components = ['hex'];
   if (format === 'rgb') components = ['red', 'green', 'blue', 'alpha'];
   else if (format === 'hsl') components = ['hue', 'saturation', 'lightness', 'alpha'];
   else if (format === 'hwb') components = ['hue', 'whiteness', 'blackness', 'alpha'];
 
-  components.forEach((c) => {
+  components.forEach((c: string): void => {
     const [C] = format === 'hex' ? ['#'] : toUpperCase(c).split('');
     const cID = `color_${format}_${c}_${id}`;
     const formatLabel = componentLabels[`${c}Label`];
-    const cInputLabel = createElement({ tagName: 'label' });
+    const cInputLabel = createElement({ tagName: 'label' }) as HTMLElement;
     setAttribute(cInputLabel, 'for', cID);
     cInputLabel.append(
-      createElement({ tagName: 'span', ariaHidden: 'true', innerText: `${C}:` }),
-      createElement({ tagName: 'span', className: vHidden, innerText: formatLabel }),
+      createElement({
+        tagName: 'span',
+        ariaHidden: 'true',
+        innerText: `${C}:`,
+      }) as HTMLElement,
+      createElement({
+        tagName: 'span',
+        className: vHidden,
+        innerText: formatLabel,
+      }) as HTMLElement,
     );
     const cInput = createElement({
       tagName: 'input',
@@ -40,18 +46,20 @@ export default function getColorForm(self) {
       type: format === 'hex' ? 'text' : 'number',
       value: c === 'alpha' ? '100' : '0',
       className: `color-input ${c}`,
-    });
-    setAttribute(cInput, 'autocomplete', 'off');
-    setAttribute(cInput, 'spellcheck', 'false');
+      autocomplete: 'off',
+      spellcheck: false,
+    } as Partial<HTMLInputElement>) as HTMLInputElement;
 
     // alpha
     let max = '100';
     let step = '1';
     if (c !== 'alpha') {
       if (format === 'rgb') {
-        max = '255'; step = '1';
+        max = '255';
+        step = '1';
       } else if (c === 'hue') {
-        max = '360'; step = '1';
+        max = '360';
+        step = '1';
       }
     }
     ObjectAssign(cInput, {
@@ -62,4 +70,6 @@ export default function getColorForm(self) {
     colorForm.append(cInputLabel, cInput);
   });
   return colorForm;
-}
+};
+
+export default getColorForm;

package/src/{js/util/getColorMenu.js → ts/util/getColorMenu.ts}

@@ -1,23 +1,13 @@
-import ariaLabel from 'shorter-js/src/strings/ariaLabel';
-import ariaSelected from 'shorter-js/src/strings/ariaSelected';
-import setAttribute from 'shorter-js/src/attr/setAttribute';
-import getAttribute from 'shorter-js/src/attr/getAttribute';
-import createElement from 'shorter-js/src/misc/createElement';
-import setElementStyle from 'shorter-js/src/misc/setElementStyle';
+import { setAttribute, getAttribute, createElement, setElementStyle } from '@thednp/shorty';
 
-import setCSSProperties from './setCSSProperties';
-import tabIndex from './tabindex';
-import Color from '../color';
-import ColorPalette from '../color-palette';
+import Color from '@thednp/color';
+import ColorPalette from '../colorPalette';
+import ColorPicker from '../index';
 
 /**
  * Returns a color-defaults with given values and class.
- * @param {CP.ColorPicker} self
- * @param {CP.ColorPalette | string[]} colorsSource
- * @param {string} menuClass
- * @returns {HTMLElement | Element}
  */
-export default function getColorMenu(self, colorsSource, menuClass) {
+const getColorMenu = (self: ColorPicker, colorsSource: ColorPalette | string[], menuClass: string): HTMLElement => {
   const { input, format, componentLabels } = self;
   const { defaultsLabel, presetsLabel } = componentLabels;
   const isOptionsMenu = menuClass === 'color-options';
@@ -26,7 +16,7 @@ export default function getColorMenu(self, colorsSource, menuClass) {
   const colorsArray = isPalette ? colorsSource.colors : colorsSource;
   const colorsCount = colorsArray.length;
   const { lightSteps } = isPalette ? colorsSource : { lightSteps: null };
-  const fit = lightSteps || [9, 10].find((x) => colorsCount >= x * 2 && !(colorsCount % x)) || 5;
+  const fit = lightSteps || [9, 10].find(x => colorsCount >= x * 2 && !(colorsCount % x)) || 5;
   const isMultiLine = isOptionsMenu && colorsCount > fit;
   let rowCountHover = 2;
   rowCountHover = isMultiLine && colorsCount > fit * 2 ? 3 : rowCountHover;
@@ -42,26 +32,26 @@ export default function getColorMenu(self, colorsSource, menuClass) {
   optionSize = fit > 5 && isMultiLine ? 1.5 : optionSize;
   const menuHeight = `${rowCount * optionSize}rem`;
   const menuHeightHover = `calc(${rowCountHover} * ${optionSize}rem + ${rowCountHover - 1} * ${gap})`;
-  /** @type {HTMLUListElement} */
-  // @ts-ignore -- <UL> is an `HTMLElement`
+
+  // <UL> is an `HTMLElement`
   const menu = createElement({
     tagName: 'ul',
     className: finalClass,
-  });
-  setAttribute(menu, 'role', 'listbox');
-  setAttribute(menu, ariaLabel, menuLabel);
+    role: 'listbox',
+    ariaLabel: menuLabel,
+  }) as HTMLElement;
 
   if (isScrollable) {
-    setCSSProperties(menu, {
+    setElementStyle(menu, {
       '--grid-item-size': `${optionSize}rem`,
-      '--grid-fit': fit,
+      '--grid-fit': `${fit}`,
       '--grid-gap': gap,
       '--grid-height': menuHeight,
       '--grid-hover-height': menuHeightHover,
     });
   }
 
-  colorsArray.forEach((x) => {
+  colorsArray.forEach(x => {
     let [value, label] = typeof x === 'string' ? x.trim().split(':') : [];
     if (x instanceof Color) {
       value = x.toHexString();
@@ -75,12 +65,11 @@ export default function getColorMenu(self, colorsSource, menuClass) {
       tagName: 'li',
       className: `color-option${active}`,
       innerText: `${label || value}`,
-    });
-
-    setAttribute(option, tabIndex, '0');
+      tabIndex: 0,
+      role: 'option',
+      ariaSelected: isActive ? 'true' : 'false',
+    }) as HTMLElement;
     setAttribute(option, 'data-value', `${value}`);
-    setAttribute(option, 'role', 'option');
-    setAttribute(option, ariaSelected, isActive ? 'true' : 'false');
 
     if (isOptionsMenu) {
       setElementStyle(option, { backgroundColor: value });
@@ -89,4 +78,6 @@ export default function getColorMenu(self, colorsSource, menuClass) {
     menu.append(option);
   });
   return menu;
-}
+};
+
+export default getColorMenu;

package/src/ts/util/isValidJSON.ts

@@ -0,0 +1,19 @@
+import { isString } from '@thednp/shorty';
+
+/**
+ * Check if a string is valid JSON string.
+ *
+ * @param str the string input
+ * @returns the query result
+ */
+const isValidJSON = (str: unknown): str is string => {
+  if (!isString(str)) return false;
+  try {
+    JSON.parse(str);
+  } catch (e) {
+    return false;
+  }
+  return true;
+};
+
+export default isValidJSON;

package/src/{js/util/setMarkup.js → ts/util/setMarkup.ts}

@@ -1,36 +1,33 @@
-import getAttribute from 'shorter-js/src/attr/getAttribute';
-import setAttribute from 'shorter-js/src/attr/setAttribute';
-import toUpperCase from 'shorter-js/src/misc/toUpperCase';
-// import ariaLabel from 'shorter-js/src/strings/ariaLabel';
-import ariaExpanded from 'shorter-js/src/strings/ariaExpanded';
-import ariaHasPopup from 'shorter-js/src/strings/ariaHasPopup';
-import ariaHidden from 'shorter-js/src/strings/ariaHidden';
-import ariaLabelledBy from 'shorter-js/src/strings/ariaLabelledBy';
-import createElement from 'shorter-js/src/misc/createElement';
-import createElementNS from 'shorter-js/src/misc/createElementNS';
+import {
+  getAttribute,
+  setAttribute,
+  toUpperCase,
+  ariaHidden,
+  tabindex,
+  createElement,
+  createElementNS,
+} from '@thednp/shorty';
+
+import Color from '@thednp/color';
 
 import getColorForm from './getColorForm';
 import getColorControls from './getColorControls';
 import getColorMenu from './getColorMenu';
-import nonColors from './nonColors';
 import vHidden from './vHidden';
-import tabIndex from './tabindex';
 
-import Color from '../color';
+import ColorPicker from '../index';
 
 /**
-* Generate HTML markup and update instance properties.
-* @param {CP.ColorPicker} self
-*/
-export default function setMarkup(self) {
-  const {
-    input, parent, format, id, componentLabels, colorKeywords, colorPresets,
-  } = self;
+ * Generate HTML markup and update instance properties.
+ *
+ * @param self
+ */
+const setMarkup = (self: ColorPicker) => {
+  const { input, parent, format, id, componentLabels, colorKeywords, colorPresets } = self;
   const colorValue = getAttribute(input, 'value') || '#fff';
+  const { nonColors } = Color;
 
-  const {
-    toggleLabel, pickerLabel, formatLabel, hexLabel,
-  } = componentLabels;
+  const { toggleLabel, pickerLabel, formatLabel, hexLabel } = componentLabels;
 
   // update color
   const color = nonColors.includes(colorValue) ? '#fff' : colorValue;
@@ -39,25 +36,29 @@ export default function setMarkup(self) {
   // set initial controls dimensions
   const formatString = format === 'hex' ? hexLabel : toUpperCase(format);
 
-  const pickerBtn = createElement({
+  const pickerBtn = createElement<HTMLButtonElement>({
     id: `picker-btn-${id}`,
     tagName: 'button',
+    type: 'button',
     className: 'picker-toggle btn-appearance',
-  });
-  setAttribute(pickerBtn, ariaExpanded, 'false');
-  setAttribute(pickerBtn, ariaHasPopup, 'true');
-  pickerBtn.append(createElement({
-    tagName: 'span',
-    className: vHidden,
-    innerText: `${pickerLabel}. ${formatLabel}: ${formatString}`,
-  }));
+    ariaExpanded: 'false',
+    ariaHasPopup: 'true',
+  }) as HTMLButtonElement;
+
+  pickerBtn.append(
+    createElement({
+      tagName: 'span',
+      className: vHidden,
+      innerText: `${pickerLabel}. ${formatLabel}: ${formatString}`,
+    }) as HTMLElement,
+  );
 
   const pickerDropdown = createElement({
     tagName: 'div',
     className: 'color-dropdown picker',
-  });
-  setAttribute(pickerDropdown, ariaLabelledBy, `picker-btn-${id}`);
-  setAttribute(pickerDropdown, 'role', 'group');
+    role: 'group',
+    ariaLabelledBy: `picker-btn-${id}`,
+  } as Partial<HTMLElement> & { ariaLabelledBy: string }) as HTMLElement;
 
   const colorControls = getColorControls(self);
   const colorForm = getColorForm(self);
@@ -71,7 +72,7 @@ export default function setMarkup(self) {
     const presetsDropdown = createElement({
       tagName: 'div',
       className: 'color-dropdown scrollable menu',
-    });
+    }) as HTMLElement;
 
     // color presets
     if (colorPresets) {
@@ -84,29 +85,37 @@ export default function setMarkup(self) {
       presetsDropdown.append(getColorMenu(self, colorKeywords, 'color-defaults'));
     }
 
-    const presetsBtn = createElement({
+    const presetsBtn = createElement<HTMLButtonElement>({
       tagName: 'button',
+      type: 'button',
       className: 'menu-toggle btn-appearance',
-    });
-    setAttribute(presetsBtn, tabIndex, '-1');
-    setAttribute(presetsBtn, ariaExpanded, 'false');
-    setAttribute(presetsBtn, ariaHasPopup, 'true');
+      tabIndex: -1,
+      ariaExpanded: 'false',
+      ariaHasPopup: 'true',
+    }) as HTMLButtonElement;
 
     const xmlns = encodeURI('http://www.w3.org/2000/svg');
-    const presetsIcon = createElementNS(xmlns, { tagName: 'svg' });
+    const presetsIcon = createElementNS(xmlns, {
+      tagName: 'svg',
+    }) as HTMLElement;
     setAttribute(presetsIcon, 'xmlns', xmlns);
     setAttribute(presetsIcon, 'viewBox', '0 0 512 512');
     setAttribute(presetsIcon, ariaHidden, 'true');
 
-    const path = createElementNS(xmlns, { tagName: 'path' });
+    const path = createElementNS(xmlns, {
+      tagName: 'path',
+    }) as HTMLElement;
     setAttribute(path, 'd', 'M98,158l157,156L411,158l27,27L255,368L71,185L98,158z');
     setAttribute(path, 'fill', '#fff');
     presetsIcon.append(path);
-    presetsBtn.append(createElement({
-      tagName: 'span',
-      className: vHidden,
-      innerText: `${toggleLabel}`,
-    }), presetsIcon);
+    presetsBtn.append(
+      createElement({
+        tagName: 'span',
+        className: vHidden,
+        innerText: `${toggleLabel}`,
+      }) as HTMLElement,
+      presetsIcon,
+    );
 
     parent.append(presetsBtn, presetsDropdown);
   }
@@ -115,5 +124,7 @@ export default function setMarkup(self) {
   if (colorKeywords && nonColors.includes(colorValue)) {
     self.value = colorValue;
   }
-  setAttribute(input, tabIndex, '-1');
-}
+  setAttribute(input, tabindex, '-1');
+};
+
+export default setMarkup;

package/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  // https://janessagarrow.com/blog/typescript-and-esbuild/
+ "compilerOptions": {
+   "lib": ["DOM", "ESNext", "DOM.Iterable"],
+   "types": ["vite", "vite/client", "@thednp/shorty", "@thednp/color"],
+   "rootDir": "./",
+   "baseUrl": "./",
+   "module": "ESNext",
+   "target": "ESNext",
+   "moduleResolution": "Node",
+   "allowJs": true,
+   "forceConsistentCasingInFileNames": true,
+   "useDefineForClassFields": true,
+   "strict": true,
+   "sourceMap": true,
+   "resolveJsonModule": true,
+   "esModuleInterop": true,
+   "isolatedModules": true,
+   "noUnusedLocals": true,
+   "noUnusedParameters": true,
+   "noImplicitReturns": true,
+   "removeComments": false,
+   "allowSyntheticDefaultImports": true,
+   "noEmit": true,
+   "skipLibCheck": true // allows dts-bundle-generator to import from package.json
+ },
+ "include": ["src/*", "src/**/*"],
+ "exclude": ["node_modules", "experiments", "coverage", "dist"],
+}

package/vite.config.ts

@@ -0,0 +1,34 @@
+"use strict";
+import { resolve } from 'path';
+import { defineConfig } from 'vite';
+import { name } from './package.json';
+
+const getPackageName = () => {
+  return name.includes('@') ? name.split('/')[1] : name;
+};
+
+const NAME = 'ColorPicker';
+
+const fileName = {
+  es: `${getPackageName()}.mjs`,
+  cjs: `${getPackageName()}.cjs`,
+  iife: `${getPackageName()}.js`,
+};
+
+export default defineConfig({
+  base: './',
+  build: {
+    emptyOutDir: true,
+    outDir: 'dist/js',
+    lib: {
+      entry: resolve(__dirname, 'src/ts/index.ts'),
+      name: NAME,
+      formats: ['es', 'cjs', 'iife'],
+      fileName: (format: string) => fileName[format],
+    },
+    target: 'ESNext',
+    sourcemap: true,
+    minify: true,
+  },
+});
+