@deckdeckgo/color - npm Package Compare versions

Comparing version 4.0.2 to 4.1.0

CHANGELOG.md

@@ -0,1 +1,8 @@
+# 4.1.0 (2021-05-29)
+
+### Build
+
+- output custom elements as a single bundle (`dist-custom-elements-bundle`)
+- bump dependencies
+
 # 4.0.2 (2021-05-13)
@@ -2,0 +9,0 @@

dist/cjs/deckgo-color_2.cjs.entry.js

@@ -8,40 +8,4 @@ 'use strict';
 
-function debounce(func, timeout) {
-    let timer;
-    return (...args) => {
-        const next = () => func(...args);
-        if (timer) {
-            clearTimeout(timer);
-        }
-        timer = setTimeout(next, timeout && timeout > 0 ? timeout : 300);
-    };
-}
+function m(e,n){let t;return (...i)=>{let r=()=>e(...i);t&&clearTimeout(t),t=setTimeout(r,n&&n>0?n:300);}}async function T(e){if(!e||e===void 0||e==="")return;let n=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return n?`${parseInt(n[1],16)}, ${parseInt(n[2],16)}, ${parseInt(n[3],16)}`:void 0}async function M(e){return e?(t=>{if(!!t)return `#${t.map(i=>i.toString(16).padStart(2,"0")).join("")}`})(c(e)):void 0}function c(e){let n=e.match(/([.\d]+),\s*([.\d]+),\s*([.\d]+)/);if(!!n)return n.splice(1,3).map(t=>Number(t))}
 
-async function hexToRgb(hex) {
-    if (!hex || hex === undefined || hex === '') {
-        return undefined;
-    }
-    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    return result ? `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}` : undefined;
-}
-async function rgbToHex(rgb) {
-    if (!rgb) {
-        return undefined;
-    }
-    const toHex = (rgb) => {
-        if (!rgb) {
-            return undefined;
-        }
-        return `#${rgb.map((v) => v.toString(16).padStart(2, '0')).join('')}`;
-    };
-    return toHex(extractRgb(rgb));
-}
-function extractRgb(rgb) {
-    const match = rgb.match(/([.\d]+),\s*([.\d]+),\s*([.\d]+)/);
-    if (!match) {
-        return undefined;
-    }
-    return match.splice(1, 3).map((v) => Number(v));
-}
-
 const deckdeckgoColorCss = ":host{display:flex;align-items:center;flex-wrap:var(--deckgo-color-flex-wrap, wrap);overflow:var(--deckgo-color-overflow, visible);padding:var(--deckgo-color-padding, 8px);width:var(--deckgo-color-width, 288px)}button{width:var(--deckgo-color-button-width, 28px);height:var(--deckgo-color-button-height, 28px);margin:var(--deckgo-color-button-margin, 4px);padding:0;outline:var(--deckgo-color-button-outline, none);cursor:pointer;border:1px solid var(--deckdeckgo-palette-border-color, var(--deckdeckgo-palette-color-hex));border-radius:var(--deckgo-color-button-border-radius, 2px);background:var(--deckdeckgo-palette-color-hex)}button.selected{box-shadow:0 0 4px 4px rgba(var(--deckdeckgo-palette-box-shadow-color, var(--deckdeckgo-palette-color-rgb)), 0.4)}button:not(.selected):hover,button:not(.selected):focus{box-shadow:0 0 2px 2px rgba(var(--deckdeckgo-palette-box-shadow-color, var(--deckdeckgo-palette-color-rgb)), 0.4)}";
@@ -67,3 +31,3 @@
     };
-    this.debounceInitSelectedColorPalette = debounce(async () => {
+    this.debounceInitSelectedColorPalette = m(async () => {
       this.selectedColorPalette = await this.initSelectedColorPalette();
@@ -75,3 +39,3 @@ this.selectedCustomColorRgb = !this.selectedColorPalette ? this.selectedColorRgb : undefined;
     this.selectedColorHex = this.colorHex;
-    this.selectedColorRgb = this.colorRgb ? this.colorRgb : await hexToRgb(this.colorHex);
+    this.selectedColorRgb = this.colorRgb ? this.colorRgb : await T(this.colorHex);
     this.selectedColorPalette = await this.initSelectedColorPalette();
@@ -181,3 +145,3 @@ if (!this.selectedColorPalette) {
     this.selectHexColor = index.createEvent(this, "selectHexColor", 7);
-    this.debounceSelectColor = debounce(async (inputColor) => {
+    this.debounceSelectColor = m(async (inputColor) => {
       await this.emitColor(inputColor);
@@ -197,9 +161,9 @@ }, 500);
     if (this.customColorRgb) {
-      return rgbToHex(this.customColorRgb);
+      return M(this.customColorRgb);
     }
-    return rgbToHex(this.colorRgb);
+    return M(this.colorRgb);
   }
   async emitColor(inputColor) {
     const hex = `#${inputColor.replace('#', '')}`;
-    const rgb = await hexToRgb(hex);
+    const rgb = await T(hex);
     if (!rgb) {
@@ -206,0 +170,0 @@ return;

dist/deckdeckgo-color/deckdeckgo-color.esm.js

@@ -1,1 +0,1 @@
-import{p as o,b as e}from"./p-f62e3fe2.js";(()=>{const e=import.meta.url,l={};return""!==e&&(l.resourcesUrl=new URL(".",e).href),o(l)})().then((o=>e([["p-ff37f17f",[[1,"deckgo-color",{palette:[1040],inputAlt:[1,"input-alt"],colorHex:[1,"color-hex"],colorRgb:[1,"color-rgb"],selectedColorHex:[32],selectedColorRgb:[32],selectedColorPalette:[32],selectedCustomColorRgb:[32]}],[1,"deckgo-color-input",{colorHex:[1,"color-hex"],colorRgb:[1,"color-rgb"],customColorRgb:[1,"custom-color-rgb"],inputAlt:[1,"input-alt"],color:[32]}]]]],o)));
+import{p as o,b as e}from"./p-f62e3fe2.js";(()=>{const e=import.meta.url,l={};return""!==e&&(l.resourcesUrl=new URL(".",e).href),o(l)})().then((o=>e([["p-691cb0de",[[1,"deckgo-color",{palette:[1040],inputAlt:[1,"input-alt"],colorHex:[1,"color-hex"],colorRgb:[1,"color-rgb"],selectedColorHex:[32],selectedColorRgb:[32],selectedColorPalette:[32],selectedCustomColorRgb:[32]}],[1,"deckgo-color-input",{colorHex:[1,"color-hex"],colorRgb:[1,"color-rgb"],customColorRgb:[1,"custom-color-rgb"],inputAlt:[1,"input-alt"],color:[32]}]]]],o)));

dist/esm/deckgo-color_2.entry.js

 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-17ec0249.js';
 import { D as DEFAULT_PALETTE } from './deckdeckgo-palette-88019c01.js';
 
-function debounce(func, timeout) {
-    let timer;
-    return (...args) => {
-        const next = () => func(...args);
-        if (timer) {
-            clearTimeout(timer);
-        }
-        timer = setTimeout(next, timeout && timeout > 0 ? timeout : 300);
-    };
-}
+function m(e,n){let t;return (...i)=>{let r=()=>e(...i);t&&clearTimeout(t),t=setTimeout(r,n&&n>0?n:300);}}async function T(e){if(!e||e===void 0||e==="")return;let n=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return n?`${parseInt(n[1],16)}, ${parseInt(n[2],16)}, ${parseInt(n[3],16)}`:void 0}async function M(e){return e?(t=>{if(!!t)return `#${t.map(i=>i.toString(16).padStart(2,"0")).join("")}`})(c(e)):void 0}function c(e){let n=e.match(/([.\d]+),\s*([.\d]+),\s*([.\d]+)/);if(!!n)return n.splice(1,3).map(t=>Number(t))}
 
-async function hexToRgb(hex) {
-    if (!hex || hex === undefined || hex === '') {
-        return undefined;
-    }
-    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    return result ? `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}` : undefined;
-}
-async function rgbToHex(rgb) {
-    if (!rgb) {
-        return undefined;
-    }
-    const toHex = (rgb) => {
-        if (!rgb) {
-            return undefined;
-        }
-        return `#${rgb.map((v) => v.toString(16).padStart(2, '0')).join('')}`;
-    };
-    return toHex(extractRgb(rgb));
-}
-function extractRgb(rgb) {
-    const match = rgb.match(/([.\d]+),\s*([.\d]+),\s*([.\d]+)/);
-    if (!match) {
-        return undefined;
-    }
-    return match.splice(1, 3).map((v) => Number(v));
-}
-
 const deckdeckgoColorCss = ":host{display:flex;align-items:center;flex-wrap:var(--deckgo-color-flex-wrap, wrap);overflow:var(--deckgo-color-overflow, visible);padding:var(--deckgo-color-padding, 8px);width:var(--deckgo-color-width, 288px)}button{width:var(--deckgo-color-button-width, 28px);height:var(--deckgo-color-button-height, 28px);margin:var(--deckgo-color-button-margin, 4px);padding:0;outline:var(--deckgo-color-button-outline, none);cursor:pointer;border:1px solid var(--deckdeckgo-palette-border-color, var(--deckdeckgo-palette-color-hex));border-radius:var(--deckgo-color-button-border-radius, 2px);background:var(--deckdeckgo-palette-color-hex)}button.selected{box-shadow:0 0 4px 4px rgba(var(--deckdeckgo-palette-box-shadow-color, var(--deckdeckgo-palette-color-rgb)), 0.4)}button:not(.selected):hover,button:not(.selected):focus{box-shadow:0 0 2px 2px rgba(var(--deckdeckgo-palette-box-shadow-color, var(--deckdeckgo-palette-color-rgb)), 0.4)}";
@@ -62,3 +26,3 @@
     };
-    this.debounceInitSelectedColorPalette = debounce(async () => {
+    this.debounceInitSelectedColorPalette = m(async () => {
       this.selectedColorPalette = await this.initSelectedColorPalette();
@@ -70,3 +34,3 @@ this.selectedCustomColorRgb = !this.selectedColorPalette ? this.selectedColorRgb : undefined;
     this.selectedColorHex = this.colorHex;
-    this.selectedColorRgb = this.colorRgb ? this.colorRgb : await hexToRgb(this.colorHex);
+    this.selectedColorRgb = this.colorRgb ? this.colorRgb : await T(this.colorHex);
     this.selectedColorPalette = await this.initSelectedColorPalette();
@@ -176,3 +140,3 @@ if (!this.selectedColorPalette) {
     this.selectHexColor = createEvent(this, "selectHexColor", 7);
-    this.debounceSelectColor = debounce(async (inputColor) => {
+    this.debounceSelectColor = m(async (inputColor) => {
       await this.emitColor(inputColor);
@@ -192,9 +156,9 @@ }, 500);
     if (this.customColorRgb) {
-      return rgbToHex(this.customColorRgb);
+      return M(this.customColorRgb);
     }
-    return rgbToHex(this.colorRgb);
+    return M(this.colorRgb);
   }
   async emitColor(inputColor) {
     const hex = `#${inputColor.replace('#', '')}`;
-    const rgb = await hexToRgb(hex);
+    const rgb = await T(hex);
     if (!rgb) {
@@ -201,0 +165,0 @@ return;

package.json

 {
   "name": "@deckdeckgo/color",
-  "version": "4.0.2",
+  "version": "4.1.0",
   "description": "A color picker developed with Web Components",
@@ -28,7 +28,7 @@ "main": "dist/index.cjs.js",
     "@stencil/core": "^2.5.2",
-    "@stencil/postcss": "^1.0.1",
+    "@stencil/postcss": "^2.0.0",
     "@stencil/sass": "^1.4.1",
-    "autoprefixer": "^9.8.6",
+    "autoprefixer": "^10.2.6",
     "husky": "^6.0.0",
-    "prettier": "2.2.1",
+    "prettier": "2.3.0",
     "pretty-quick": "^3.1.0"
@@ -61,3 +61,3 @@ },
   "dependencies": {
-    "@deckdeckgo/utils": "^1.8.1"
+    "@deckdeckgo/utils": "^2.0.1"
   },
@@ -64,0 +64,0 @@ "husky": {

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

357353

3.47%

Number of package files

51

4.08%

Lines of code

6084

4.45%

Number of low quality alerts

0

-100%

Dependency changes

• + Added

  @deckdeckgo/utils@2.4.0
  (transitive)

• - Removed

  @deckdeckgo/utils@1.8.1
  (transitive)

• Updated

  @deckdeckgo/utils@^2.0.1