@deckdeckgo/color
Advanced tools
Comparing version 4.0.2 to 4.1.0
@@ -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 @@ |
@@ -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; |
@@ -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))); |
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; |
{ | ||
"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": { |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
357353
51
6084
+ Added@deckdeckgo/utils@2.4.0(transitive)
- Removed@deckdeckgo/utils@1.8.1(transitive)
Updated@deckdeckgo/utils@^2.0.1