@thednp/color-picker 2.0.1 → 2.0.3

package/src/ts/interface/ColorNames.ts

@@ -1,20 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

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

package/src/ts/util/colorNames.ts

@@ -1,21 +0,0 @@
-/** 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/ts/util/colorPickerLabels.ts

@@ -1,24 +0,0 @@
-import ColorPickerLabels from '../interface/colorPickerLabels';
-
-/** The labels presented to the user. */
-const colorPickerLabels: ColorPickerLabels = {
-  pickerLabel: 'Colour Picker',
-  appearanceLabel: 'Colour Appearance',
-  valueLabel: 'Colour Value',
-  toggleLabel: 'Select Colour',
-  presetsLabel: 'Colour Presets',
-  defaultsLabel: 'Colour Defaults',
-  formatLabel: 'Format',
-  alphaLabel: 'Alpha',
-  hexLabel: 'Hexadecimal',
-  hueLabel: 'Hue',
-  whitenessLabel: 'Whiteness',
-  blacknessLabel: 'Blackness',
-  saturationLabel: 'Saturation',
-  lightnessLabel: 'Lightness',
-  redLabel: 'Red',
-  greenLabel: 'Green',
-  blueLabel: 'Blue',
-};
-
-export default colorPickerLabels;

package/src/ts/util/getColorControls.ts

@@ -1,90 +0,0 @@
-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/ts/util/getColorForm.ts

@@ -1,75 +0,0 @@
-import { createElement, setAttribute, ObjectAssign, toUpperCase } from '@thednp/shorty';
-
-import vHidden from './vHidden';
-import ColorPicker from '../index';
-
-/**
- * Returns the color form for `ColorPicker`.
- *
- * @param self the `ColorPicker` instance
- * @returns a new `<div>` element with color component `<input>`
- */
-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: 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' }) as HTMLElement;
-    setAttribute(cInputLabel, 'for', cID);
-    cInputLabel.append(
-      createElement({
-        tagName: 'span',
-        ariaHidden: 'true',
-        innerText: `${C}:`,
-      }) as HTMLElement,
-      createElement({
-        tagName: 'span',
-        className: vHidden,
-        innerText: formatLabel,
-      }) as HTMLElement,
-    );
-    const cInput = createElement({
-      tagName: 'input',
-      id: cID,
-      // name: cID, - prevent saving the value to a form
-      type: format === 'hex' ? 'text' : 'number',
-      value: c === 'alpha' ? '100' : '0',
-      className: `color-input ${c}`,
-      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';
-      } else if (c === 'hue') {
-        max = '360';
-        step = '1';
-      }
-    }
-    ObjectAssign(cInput, {
-      min: '0',
-      max,
-      step,
-    });
-    colorForm.append(cInputLabel, cInput);
-  });
-  return colorForm;
-};
-
-export default getColorForm;

package/src/ts/util/getColorMenu.ts

@@ -1,83 +0,0 @@
-import { setAttribute, getAttribute, createElement, setElementStyle } from '@thednp/shorty';
-
-import Color from '@thednp/color';
-import ColorPalette from '../colorPalette';
-import ColorPicker from '../index';
-
-/**
- * Returns a color-defaults with given values and class.
- */
-const getColorMenu = (self: ColorPicker, colorsSource: ColorPalette | string[], menuClass: string): HTMLElement => {
-  const { input, format, componentLabels } = self;
-  const { defaultsLabel, presetsLabel } = componentLabels;
-  const isOptionsMenu = menuClass === 'color-options';
-  const isPalette = colorsSource instanceof ColorPalette;
-  const menuLabel = isOptionsMenu ? presetsLabel : defaultsLabel;
-  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 isMultiLine = isOptionsMenu && colorsCount > fit;
-  let rowCountHover = 2;
-  rowCountHover = isMultiLine && colorsCount > fit * 2 ? 3 : rowCountHover;
-  rowCountHover = isMultiLine && colorsCount > fit * 3 ? 4 : rowCountHover;
-  rowCountHover = isMultiLine && colorsCount > fit * 4 ? 5 : rowCountHover;
-  const rowCount = rowCountHover - (colorsCount <= fit * 3 ? 1 : 2);
-  const isScrollable = isMultiLine && colorsCount > rowCount * fit;
-  let finalClass = menuClass;
-  finalClass += isScrollable ? ' scrollable' : '';
-  finalClass += isMultiLine ? ' multiline' : '';
-  const gap = isMultiLine ? '1px' : '0.25rem';
-  let optionSize = isMultiLine ? 1.75 : 2;
-  optionSize = fit > 5 && isMultiLine ? 1.5 : optionSize;
-  const menuHeight = `${rowCount * optionSize}rem`;
-  const menuHeightHover = `calc(${rowCountHover} * ${optionSize}rem + ${rowCountHover - 1} * ${gap})`;
-
-  // <UL> is an `HTMLElement`
-  const menu = createElement({
-    tagName: 'ul',
-    className: finalClass,
-    role: 'listbox',
-    ariaLabel: menuLabel,
-  }) as HTMLElement;
-
-  if (isScrollable) {
-    setElementStyle(menu, {
-      '--grid-item-size': `${optionSize}rem`,
-      '--grid-fit': `${fit}`,
-      '--grid-gap': gap,
-      '--grid-height': menuHeight,
-      '--grid-hover-height': menuHeightHover,
-    });
-  }
-
-  colorsArray.forEach(x => {
-    let [value, label] = typeof x === 'string' ? x.trim().split(':') : [];
-    if (x instanceof Color) {
-      value = x.toHexString();
-      label = value;
-    }
-    const color = new Color(x instanceof Color ? x : value, format);
-    const isActive = color.toString() === getAttribute(input, 'value');
-    const active = isActive ? ' active' : '';
-
-    const option = createElement({
-      tagName: 'li',
-      className: `color-option${active}`,
-      innerText: `${label || value}`,
-      tabIndex: 0,
-      role: 'option',
-      ariaSelected: isActive ? 'true' : 'false',
-    }) as HTMLElement;
-    setAttribute(option, 'data-value', `${value}`);
-
-    if (isOptionsMenu) {
-      setElementStyle(option, { backgroundColor: value });
-    }
-
-    menu.append(option);
-  });
-  return menu;
-};
-
-export default getColorMenu;

package/src/ts/util/isValidJSON.ts

@@ -1,19 +0,0 @@
-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/ts/util/setMarkup.ts

@@ -1,130 +0,0 @@
-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 vHidden from './vHidden';
-
-import ColorPicker from '../index';
-
-/**
- * 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;
-
-  // update color
-  const color = nonColors.includes(colorValue) ? '#fff' : colorValue;
-  self.color = new Color(color, format);
-
-  // set initial controls dimensions
-  const formatString = format === 'hex' ? hexLabel : toUpperCase(format);
-
-  const pickerBtn = createElement<HTMLButtonElement>({
-    id: `picker-btn-${id}`,
-    tagName: 'button',
-    type: 'button',
-    className: 'picker-toggle btn-appearance',
-    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',
-    role: 'group',
-    ariaLabelledBy: `picker-btn-${id}`,
-  } as Partial<HTMLElement> & { ariaLabelledBy: string }) as HTMLElement;
-
-  const colorControls = getColorControls(self);
-  const colorForm = getColorForm(self);
-
-  pickerDropdown.append(colorControls, colorForm);
-  input.before(pickerBtn);
-  parent.append(pickerDropdown);
-
-  // set colour key menu template
-  if (colorKeywords || colorPresets) {
-    const presetsDropdown = createElement({
-      tagName: 'div',
-      className: 'color-dropdown scrollable menu',
-    }) as HTMLElement;
-
-    // color presets
-    if (colorPresets) {
-      presetsDropdown.append(getColorMenu(self, colorPresets, 'color-options'));
-    }
-
-    // explicit defaults [reset, initial, inherit, transparent, currentColor]
-    // also custom defaults [default: #069, complementary: #930]
-    if (colorKeywords && colorKeywords.length) {
-      presetsDropdown.append(getColorMenu(self, colorKeywords, 'color-defaults'));
-    }
-
-    const presetsBtn = createElement<HTMLButtonElement>({
-      tagName: 'button',
-      type: 'button',
-      className: 'menu-toggle btn-appearance',
-      tabIndex: -1,
-      ariaExpanded: 'false',
-      ariaHasPopup: 'true',
-    }) as HTMLButtonElement;
-
-    const xmlns = encodeURI('http://www.w3.org/2000/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',
-    }) 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}`,
-      }) as HTMLElement,
-      presetsIcon,
-    );
-
-    parent.append(presetsBtn, presetsDropdown);
-  }
-
-  // solve non-colors after settings save
-  if (colorKeywords && nonColors.includes(colorValue)) {
-    self.value = colorValue;
-  }
-  setAttribute(input, tabindex, '-1');
-};
-
-export default setMarkup;

package/src/ts/util/vHidden.ts

@@ -1,2 +0,0 @@
-const vHidden = 'v-hidden';
-export default vHidden;

package/tsconfig.json

@@ -1,29 +0,0 @@
-{
-  // https://janessagarrow.com/blog/typescript-and-esbuild/
- "compilerOptions": {
-   "lib": ["DOM", "ESNext", "DOM.Iterable"],
-  //  "types": ["vite", "vite/client", "@thednp/shorty", "@thednp/color"],
-   "rootDir": "./src",
-   "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.mts

@@ -1,35 +0,0 @@
-/// <reference types="vite/client" />
-"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,
-  },
-});
-