@thednp/color-picker 2.0.1 → 2.0.3

package/cypress/fixtures/colorNamesFrench.js

@@ -1,3 +0,0 @@
-const colorNamesFrench = 'blanc,noir,gris,rouge,orange,brun,or,olive,jaune,citron,vert,sarcelle,cyan,bleu,violet,magenta,rose';
-
-export default colorNamesFrench;

package/cypress/fixtures/componentLabelsFrench.js

@@ -1,21 +0,0 @@
-const componentLabelsFrench = {
-  pickerLabel: "Couleur Sélection", 
-  appearanceLabel: "Apparence de la couleur", 
-  valueLabel: "Valeur de couleur", 
-  toggleLabel: "Sélectionner la couleur", 
-  presetsLabel: "Préréglages de couleur", 
-  defaultsLabel: "Couleur par défaut", 
-  formatLabel: "Format", 
-  alphaLabel: "Alpha", 
-  hexLabel: "Hexadécimal", 
-  hueLabel: "Nuance", 
-  whitenessLabel: "Blancheur", 
-  blacknessLabel: "Noirceur", 
-  saturationLabel: "Saturation", 
-  lightnessLabel: "Légèreté", 
-  redLabel: "Rouge", 
-  greenLabel: "Vert", 
-  blueLabel: "Bleu",
-};
-
-export default componentLabelsFrench;

package/cypress/fixtures/format.js

@@ -1,3 +0,0 @@
-const FORMAT = ['hsl', 'rgb', 'hwb', 'hex'];
-
-export default FORMAT;

package/cypress/fixtures/getMarkup.js

@@ -1,35 +0,0 @@
-import testSample from "./testSample";
-import getRandomInt from "./getRandomInt";
-
-export default function getMarkup(body, id, format) {
-  const set = testSample[getRandomInt(0,3)];
-  const value = set[format];
-
-  const label = document.createElement('label');
-  label.setAttribute('for', `color-picker-${id}`);
-  label.innerText = `Color Picker Test`;
-
-  const cpWrapper = document.createElement('div');
-  cpWrapper.className = 'color-picker';
-
-  const input = document.createElement('input');
-  input.type = 'text';
-  input.id = `color-picker-${id}`;
-  input.className = 'btn-appearance color-preview';
-  input.setAttribute('value', value);
-  input.setAttribute('autocomplete', "off");
-  input.setAttribute('spellcheck', "false");
-  input.setAttribute('data-format', format);
-
-  const a = document.createElement('a');
-  a.setAttribute('href', '#');
-  a.innerText = 'Some link';
-  a.className = 'my-link';
-  a.style = 'position: absolute; top: 20px; opacity: 0.015';
-  // body.append(a);
-  cpWrapper.append(input);
-  if (body) {
-    body.append(label, cpWrapper, a);
-  }
-  return {set, value};
-}

package/cypress/fixtures/getRandomInt.js

@@ -1,6 +0,0 @@
-export default function getRandomInt(min, max) {
-  min = Math.ceil(min);
-  max = Math.round(max);
-  // The maximum is exclusive and the minimum is inclusive
-  return Math.round(Math.random() * (max - min) + min);
-}

package/cypress/fixtures/sampleWebcolors.js

@@ -1,18 +0,0 @@
-const sampleWebcolors = [
-  {name:"white",rgb:"rgb(255, 255, 255)",hex:"#ffffff",hsl:"hsl(0, 0%, 100%)",hsl4:"hsl(0deg 0% 100%)",hwb:"hwb(0deg 100% 0%)",hsv:{h:0,s:0,v:1,a:1}},
-  {name:"black",rgb:"rgb(0, 0, 0)",hex:"#000000",hsl:"hsl(0, 0%, 0%)",hsl4:"hsl(0deg 0% 0%)",hwb:"hwb(0deg 0% 100%)",hsv:{h:0,s:0,v:0,a:1}},
-  {name:"yellow",rgb:"rgb(255, 255, 0)",hex:"#ffff00",hsl:"hsl(60, 100%, 50%)",hsl4:"hsl(60deg 100% 50%)",hwb:"hwb(60deg 0% 0%)",hsv: {h: 0.167, s: 1, v: 1, a: 1}},
-  {name:"green",rgb:"rgb(0, 128, 0)",hex:"#008000",hsl:"hsl(120, 100%, 25%)",hsl4:"hsl(120deg 100% 25%)",hwb:"hwb(120deg 0% 50%)",hsv: {h: 0.333, s: 1, v: 0.502, a: 1}},
-  {name:"red",rgb:"rgb(255, 0, 0)",hex:"#ff0000",hsl:"hsl(0, 100%, 50%)",hsl4:"hsl(0deg 100% 50%)",hwb:"hwb(0deg 0% 0%)",hsv:{h:0,s:1,v:1,a:1}},
-  {name:"pink",rgb:"rgb(255, 192, 203)",hex:"#ffc0cb",hsl:"hsl(350, 100%, 88%)",hsl4:"hsl(350deg 100% 88%)",hwb:"hwb(350deg 75% 0%)",hsv:{h:0.971,s:0.247,v:1,a:1}},
-  {name:"brown",rgb:"rgb(165, 42, 42)",hex:"#a52a2a",hsl:"hsl(0, 59%, 41%)",hsl4:"hsl(0deg 59% 41%)",hwb:"hwb(0deg 16% 35%)",hsv:{h:0,s:0.745,v:0.647,a:1}},
-  {name:"orange",rgb:"rgb(255, 165, 0)",hex:"#ffa500",hsl:"hsl(39, 100%, 50%)",hsl4:"hsl(39deg 100% 50%)",hwb:"hwb(39deg 0% 0%)",hsv:{h:0.108,s:1,v:1,a:1}},
-  {name:"darkorange",rgb:"rgb(255, 140, 0)",hex:"#ff8c00",hsl:"hsl(33, 100%, 50%)",hsl4:"hsl(33deg 100% 50%)",hwb:"hwb(33deg 0% 0%)",hsv:{h:0.092,s:1,v:1,a:1}},
-  {name:"cyan",rgb:"rgb(0, 255, 255)",hex:"#00ffff",hsl:"hsl(180, 100%, 50%)",hsl4:"hsl(180deg 100% 50%)",hwb:"hwb(180deg 0% 0%)",hsv:{h:0.5,s:1,v:1,a:1}},
-  {name:"yellow",rgb:"rgb(255, 255, 0)",hex:"#ffff00",hsl:"hsl(60, 100%, 50%)",hsl4:"hsl(60deg 100% 50%)",hwb:"hwb(60deg 0% 0%)",hsv:{h:0.167,s:1,v:1,a:1}},
-  {name:"navy",rgb:"rgb(0, 0, 128)",hex:"#000080",hsl:"hsl(240, 100%, 25%)",hsl4:"hsl(240deg 100% 25%)",hwb:"hwb(240deg 0% 50%)",hsv:{h:0.667,s:1,v:0.502,a:1}},
-  {name:"orchid",rgb:"rgb(218, 112, 214)",hex:"#da70d6",hsl:"hsl(302, 59%, 65%)",hsl4:"hsl(302deg 59% 65%)",hwb:"hwb(302deg 44% 15%)",hsv:{h: 0.84, s: 0.486, v: 0.855, a: 1}},
-  {name:"indigo",rgb:"rgb(75, 0, 130)",hex:"#4b0082",hsl:"hsl(275, 100%, 25%)",hsl4:"hsl(275deg 100% 25%)",hwb:"hwb(275deg 0% 49%)",hsv:{h: 0.763, s: 1, v: 0.51, a: 1}},
-];
-
-export default sampleWebcolors;

package/cypress/fixtures/testSample.js

@@ -1,8 +0,0 @@
-const testSample = [
-  {name: 'red', hex: '#f00', rgb: 'rgb(255, 0, 0)', hsl: 'hsl(0, 100%, 50%)', hwb: 'hwb(0deg 0% 0%)'},
-  {name: 'lime', hex: '#0f0', rgb: 'rgb(0, 255, 0)', hsl: 'hsl(120, 100%, 50%)', hwb: 'hwb(120deg 0% 0%)'},
-  {name: 'blue', hex: '#00f', rgb: 'rgb(0, 0, 255)', hsl: 'hsl(240, 100%, 50%)', hwb: 'hwb(240deg 0% 0%)'},
-  {name: 'pink', hex: '#f0f', rgb: 'rgb(255, 0, 255)', hsl: 'hsl(300, 100%, 50%)', hwb: 'hwb(300deg 0% 0%)'},
-];
-
-export default testSample;

package/cypress/plugins/esbuild-istanbul.ts

@@ -1,50 +0,0 @@
-// sources
-// * https://github.com/enketo/enketo-express/blob/master/tools/esbuild-plugin-istanbul.js
-'use strict';
-import esbuild from 'esbuild';
-import { promises } from 'fs';
-import { createInstrumenter } from 'istanbul-lib-instrument';
-import { extname, sep } from 'path';
-import tsCompile from './tsCompile';
-
-// import Cypress settings
-const sourceFolder = 'src';
-const [name] = process.cwd().split(sep).slice(-1);
-
-const sourceFilter = `${name}${sep}${sourceFolder}`;
-const instrumenter = createInstrumenter({
-  compact: false,
-  esModules: true,
-  preserveComments: true,
-  autoWrap: true,
-});
-
-const createEsbuildIstanbulPlugin = (): esbuild.Plugin => {
-  return {
-    name: 'istanbul',
-    setup(build: esbuild.PluginBuild) {
-      build.onLoad(
-        { filter: /\.(ts|tsx)$/ },
-        async ({ path }: esbuild.OnLoadArgs): Promise<{ contents: string } & Record<string, any>> => {
-          
-          if (!path.includes(sourceFilter)) {
-            // console.log("> compiling typescript %s for output build", path);
-            const contents = await promises.readFile(path, 'utf8');
-            return {
-              contents: ['.ts', '.tsx'].includes(extname(path)) ? tsCompile(path).outputText : contents,
-            };
-          }
-
-          // console.log("🧡 instrumenting %s for output coverage", path);
-          const { outputText, sourceMap } = tsCompile(path);
-
-          return {
-            contents: instrumenter.instrumentSync(outputText, path, sourceMap),
-          };
-        },
-      );
-    },
-  };
-};
-
-export default createEsbuildIstanbulPlugin;

package/cypress/plugins/tsCompile.ts

@@ -1,34 +0,0 @@
-// compile.ts
-import TypeScript from 'typescript';
-import { basename } from 'path';
-import { RawSourceMap } from 'source-map';
-import { readFileSync } from 'fs';
-
-export default function tsCompile(
-  path: string,
-  ops?: Partial<TypeScript.TranspileOptions>,
-): TypeScript.TranspileOutput & { sourceMap: RawSourceMap } {
-  // Default options -- you could also perform a merge, or use the project tsconfig.json
-  const options: TypeScript.TranspileOptions = Object.assign(
-    {
-      compilerOptions: {
-        allowJs: true,
-        esModuleInterop: true,
-        removeComments: false,
-        target: 99, // ESNext
-        allowSyntheticDefaultImports: true,
-        isolatedModules: true,
-        noEmitHelpers: true,
-        sourceMap: true,
-      } as Partial<TypeScript.CompilerOptions>,
-    },
-    ops,
-  );
-  const contents = readFileSync(path, { encoding: 'utf8' });
-  const { outputText, sourceMapText } = TypeScript.transpileModule(contents, options);
-  const sourceMap: RawSourceMap = JSON.parse(sourceMapText || '');
-  sourceMap.file = basename(path);
-  sourceMap.sources = [basename(path)];
-
-  return { outputText, sourceMap, sourceMapText };
-}

package/cypress/support/e2e.ts

@@ -1,21 +0,0 @@
-// ***********************************************************
-// This example support/index.js is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-// require('./commands')
-import './commands'
-
-// Alternatively you can use CommonJS syntax:
-import '@cypress/code-coverage/support'

package/cypress/test.html

@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>ColorPicker Testing Page</title>
-  <meta name="description" content="A modern and fully featured color picker web component">
-  <meta name="keywords" content="color, picker, colorpicker, web component, hwb, hex, rgb, hsl, hsv">
-  <link id="styles" rel="stylesheet" href="../dist/css/color-picker.css">
-  <style>
-    body { padding: 65vh 0 65vh 0; margin: 0 auto; width: 60vw; font-family: sans-serif }
-    color-picker, .color-picker {
-      margin: 0 0 2.5rem;
-      --dropdown-transition: none;
-      --btn-transition: none;
-      --options-transition: none;
-    }
-    label { margin: 0.5rem 0;display: block;}
-    body > a { position: absolute; top: 50%; left: 1rem; /* color: white !important clip: 0px 0px 0px 0px; height:0; width: 0 */ }
-  </style>
-</head>
-<body>
-</body>
-</html>

package/cypress.config.ts

@@ -1,30 +0,0 @@
-import { defineConfig } from "cypress";
-import createBundler from "@bahmutov/cypress-esbuild-preprocessor";
-import createEsbuildIstanbulPlugin from "./cypress/plugins/esbuild-istanbul";
-import codeCoverageTask from "@cypress/code-coverage/task";
-
-async function setupNodeEvents(
-  on: Cypress.PluginEvents,
-  config: Cypress.PluginConfigOptions
-): Promise<Cypress.PluginConfigOptions> {
-  codeCoverageTask(on, config);
-
-  on(
-    "file:preprocessor",
-    createBundler({
-      plugins: [createEsbuildIstanbulPlugin()],
-    })
-  );
-
-  // Make sure to return the config object as it might have been modified by the plugin.
-  return config;
-}
-
-export default defineConfig({
-  e2e: {
-    specPattern: "cypress/e2e/**/*.{js,jsx,ts,tsx}",
-    supportFile: "cypress/support/e2e.ts",
-    video: false,
-    setupNodeEvents,
-  },
-});

package/dts.config.ts

@@ -1,15 +0,0 @@
-const config = {
-  entries: [
-    {
-      filePath: "./src/ts/index.ts",
-      outFile: "./dist/js/color-picker.d.ts",
-      noCheck: false,
-      output: {
-        umdModuleName: 'ColorPicker',
-        noBanner: true,
-      }
-    },
-  ],
-};
-
-module.exports = config;

package/src/scss/_variables.scss

@@ -1,6 +0,0 @@
-$transparency-levels: (
-  15, 25, 33, 50, 75, 90
-);
-$dropdown-transition: transform .33s ease, opacity .33s ease;
-$btn-transition: box-shadow .33s ease, border .33s ease;
-$options-transition: height .33s ease;

package/src/scss/color-picker.rtl.scss

@@ -1,27 +0,0 @@
-@import "color-picker";
-
-[dir="rtl"] {
-  .color-preview { text-align: right; }
-
-  .menu-toggle {
-    right: auto; left: 0;
-    border-radius: .25rem 0 0 .25rem;
-  }
-
-  .color-dropdown.picker {
-    right: 0; left: auto;
-  }
-
-  .color-dropdown.menu {
-    right: auto; left: 0;
-  }
-
-  .color-control + .color-control {
-    margin-right: .5rem;
-    margin-left: 0;
-  }
-
-  .color-options.scrollable {
-    margin: 0 0 0 -.5rem;
-  }
-}