Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More โ†’
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

vanilla-colorful

Package Overview
Dependencies
Maintainers
1
Versions
18
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vanilla-colorful - npm Package Compare versions

Comparing version 0.5.3 to 0.6.0

lib/components/slider.d.ts
lib/components/slider.d.ts.map
lib/components/slider.js
lib/components/slider.js.map
lib/utils/nonce.d.ts
lib/utils/nonce.d.ts.map
lib/utils/nonce.js
lib/utils/nonce.js.map

22

CHANGELOG.md

@@ -5,2 +5,24 @@ # Changelog

## [0.6.0](https://github.com/web-padawan/vanilla-colorful/compare/v0.5.3...v0.6.0) (2021-05-24)
### โš  BREAKING CHANGES
* simplify internal elements (#25)
### Features
* add color-changed event typings ([#31](https://github.com/web-padawan/vanilla-colorful/issues/31)) ([4776869](https://github.com/web-padawan/vanilla-colorful/commit/4776869d257fc180b1d47c86908e88cc9fc243b2))
* support modern CSS color notations ([#39](https://github.com/web-padawan/vanilla-colorful/issues/39)) ([db0eed3](https://github.com/web-padawan/vanilla-colorful/commit/db0eed3a4a986c263f8cf9fed17128af41440ace))
### Bug Fixes
* prevent hue from being reset ([#33](https://github.com/web-padawan/vanilla-colorful/issues/33)) ([02b1423](https://github.com/web-padawan/vanilla-colorful/commit/02b142380d1048b493f6628f7fb17d7aa96e8318))
### Internal Changes
* simplify internal elements ([#25](https://github.com/web-padawan/vanilla-colorful/issues/25)) ([0deca42](https://github.com/web-padawan/vanilla-colorful/commit/0deca42f6de5fef5831fcb584d4ae831e2dbc7a9))
### [0.5.3](https://github.com/web-padawan/vanilla-colorful/compare/v0.5.2...v0.5.3) (2020-12-25)

@@ -7,0 +29,0 @@

8

custom-elements.json

@@ -363,2 +363,6 @@ {

{
"name": "alpha",
"description": "An alpha selector container."
},
{
"name": "hue-pointer",

@@ -370,2 +374,6 @@ "description": "A hue pointer element."

"description": "A saturation pointer element."
},
{
"name": "alpha-pointer",
"description": "An alpha pointer element."
}

@@ -372,0 +380,0 @@ ]

2

hsva-color-picker.d.ts

@@ -14,4 +14,6 @@ import { HsvaBase } from './lib/entrypoints/hsva.js';

* @csspart saturation - A saturation selector container
* @csspart alpha - An alpha selector container.
* @csspart hue-pointer - A hue pointer element.
* @csspart saturation-pointer - A saturation pointer element.
* @csspart alpha-pointer - An alpha pointer element.
*/

@@ -18,0 +20,0 @@ export declare class HsvaColorPicker extends HsvaBase {

2

hsva-color-picker.js

@@ -13,4 +13,6 @@ import { HsvaBase } from './lib/entrypoints/hsva.js';

* @csspart saturation - A saturation selector container
* @csspart alpha - An alpha selector container.
* @csspart hue-pointer - A hue pointer element.
* @csspart saturation-pointer - A saturation pointer element.
* @csspart alpha-pointer - An alpha pointer element.
*/

@@ -17,0 +19,0 @@ export class HsvaColorPicker extends HsvaBase {

12

lib/components/alpha-color-picker.d.ts

@@ -1,11 +0,7 @@

import { ColorPicker, $render } from './color-picker.js';
import type { AnyColor, HsvaColor } from '../types';
import './alpha.js';
declare const $a: unique symbol;
import { ColorPicker, Sliders, $css, $sliders } from './color-picker.js';
import type { AnyColor } from '../types';
export declare abstract class AlphaColorPicker<C extends AnyColor> extends ColorPicker<C> {
private [$a];
constructor();
protected [$render](hsva: HsvaColor): void;
protected get [$css](): string[];
protected get [$sliders](): Sliders;
}
export {};
//# sourceMappingURL=alpha-color-picker.d.ts.map

18

lib/components/alpha-color-picker.js

@@ -1,16 +0,12 @@

import { ColorPicker, $render } from './color-picker.js';
import { createTemplate, createRoot } from '../utils/dom.js';
import './alpha.js';
const tpl = createTemplate('<vc-alpha part="alpha" exportparts="pointer: alpha-pointer"></vc-alpha>');
const $a = Symbol('a');
import { ColorPicker, $css, $sliders } from './color-picker.js';
import { Alpha } from './alpha.js';
import alphaCss from '../styles/alpha.js';
export class AlphaColorPicker extends ColorPicker {
constructor() {
super();
this[$a] = createRoot(this, tpl).lastElementChild;
get [$css]() {
return [...super[$css], alphaCss];
}
[$render](hsva) {
super[$render](hsva);
this[$a].hsva = hsva;
get [$sliders]() {
return [...super[$sliders], Alpha];
}
}
//# sourceMappingURL=alpha-color-picker.js.map

16

lib/components/alpha.d.ts

@@ -1,13 +0,9 @@

import { Interactive, Interaction } from './interactive.js';
import { Slider, Offset } from './slider.js';
import type { HsvaColor } from '../types';
export declare class Alpha extends Interactive {
private gradient;
constructor();
connectedCallback(): void;
private _hsva;
get xy(): boolean;
get hsva(): HsvaColor;
set hsva(hsva: HsvaColor);
getMove(interaction: Interaction, key?: boolean): Record<string, number>;
export declare class Alpha extends Slider {
private hsva;
constructor(root: ShadowRoot);
update(hsva: HsvaColor): void;
getMove(offset: Offset, key?: boolean): Record<string, number>;
}
//# sourceMappingURL=alpha.d.ts.map

56

lib/components/alpha.js

@@ -1,49 +0,31 @@

import { Interactive } from './interactive.js';
import { Slider } from './slider.js';
import { hsvaToHslaString } from '../utils/convert.js';
import { createTemplate, createRoot } from '../utils/dom.js';
import { clamp, round } from '../utils/math.js';
import styles from '../styles/alpha.js';
const template = createTemplate(`<style>${styles}</style><div id="gradient"></div>`);
export class Alpha extends Interactive {
constructor() {
super();
this.gradient = createRoot(this, template).querySelector('#gradient');
this.setAttribute('aria-label', 'Alpha');
this.setAttribute('aria-valuemin', '0');
this.setAttribute('aria-valuemax', '1');
export class Alpha extends Slider {
constructor(root) {
super(root, 'alpha', 'aria-label="Alpha" aria-valuemin="0" aria-valuemax="1"', false);
}
connectedCallback() {
if (this.hasOwnProperty('hsva')) {
const value = this.hsva;
delete this['hsva'];
this.hsva = value;
}
}
get xy() {
return false;
}
get hsva() {
return this._hsva;
}
set hsva(hsva) {
this._hsva = hsva;
update(hsva) {
this.hsva = hsva;
const colorFrom = hsvaToHslaString({ ...hsva, a: 0 });
const colorTo = hsvaToHslaString({ ...hsva, a: 1 });
const value = hsva.a * 100;
this.gradient.style.backgroundImage = `linear-gradient(to right, ${colorFrom}, ${colorTo}`;
this.setStyles({
top: '50%',
left: `${value}%`,
color: hsvaToHslaString(hsva)
});
this.style([
{
left: `${value}%`,
color: hsvaToHslaString(hsva)
},
{
'--gradient': `linear-gradient(90deg, ${colorFrom}, ${colorTo}`
}
]);
const v = round(value);
this.setAttribute('aria-valuenow', `${v}`);
this.setAttribute('aria-valuetext', `${v}%`);
this.el.setAttribute('aria-valuenow', `${v}`);
this.el.setAttribute('aria-valuetext', `${v}%`);
}
getMove(interaction, key) {
getMove(offset, key) {
// Alpha always fit into [0, 1] range
return { a: key ? clamp(this.hsva.a + interaction.left) : interaction.left };
return { a: key ? clamp(this.hsva.a + offset.x) : offset.x };
}
}
customElements.define('vc-alpha', Alpha);
//# sourceMappingURL=alpha.js.map

20

lib/components/color-picker.d.ts

@@ -1,6 +0,3 @@

import type { AnyColor, ColorModel, HsvaColor } from '../types';
import './hue.js';
import './saturation.js';
declare const $h: unique symbol;
declare const $s: unique symbol;
import type { AnyColor, ColorModel } from '../types';
import type { Slider } from './slider.js';
declare const $isSame: unique symbol;

@@ -10,10 +7,15 @@ declare const $color: unique symbol;

declare const $change: unique symbol;
export declare const $render: unique symbol;
declare const $update: unique symbol;
declare const $parts: unique symbol;
export declare const $css: unique symbol;
export declare const $sliders: unique symbol;
export declare type Sliders = Array<new (root: ShadowRoot) => Slider>;
export declare abstract class ColorPicker<C extends AnyColor> extends HTMLElement {
static get observedAttributes(): string[];
protected get [$css](): string[];
protected get [$sliders](): Sliders;
protected abstract get colorModel(): ColorModel<C>;
private [$h];
private [$s];
private [$hsva];
private [$color];
private [$parts];
get color(): C;

@@ -26,3 +28,3 @@ set color(newColor: C);

private [$isSame];
protected [$render](hsva: HsvaColor): void;
private [$update];
private [$change];

@@ -29,0 +31,0 @@ }

61

lib/components/color-picker.js
import { equalColorObjects } from '../utils/compare.js';
import { createTemplate, createRoot } from '../utils/dom.js';
import './hue.js';
import './saturation.js';
import styles from '../styles/color-picker.js';
const tpl = createTemplate(`
<style>${styles}</style>
<vc-saturation part="saturation" exportparts="pointer: saturation-pointer"></vc-saturation>
<vc-hue part="hue" exportparts="pointer: hue-pointer"></vc-hue>
`);
const $h = Symbol('h');
const $s = Symbol('s');
import { fire, tpl } from '../utils/dom.js';
import { Hue } from './hue.js';
import { Saturation } from './saturation.js';
import css from '../styles/color-picker.js';
import hueCss from '../styles/hue.js';
import saturationCss from '../styles/saturation.js';
const $isSame = Symbol('same');

@@ -17,10 +12,14 @@ const $color = Symbol('color');

const $change = Symbol('change');
export const $render = Symbol('render');
const $update = Symbol('update');
const $parts = Symbol('parts');
export const $css = Symbol('css');
export const $sliders = Symbol('sliders');
export class ColorPicker extends HTMLElement {
constructor() {
super();
const root = createRoot(this, tpl);
const template = tpl(`<style>${this[$css].join('')}</style>`);
const root = this.attachShadow({ mode: 'open' });
root.appendChild(template.content.cloneNode(true));
root.addEventListener('move', this);
this[$s] = root.children[1];
this[$h] = root.children[2];
this[$parts] = this[$sliders].map((slider) => new slider(root));
}

@@ -30,2 +29,8 @@ static get observedAttributes() {

}
get [$css]() {
return [css, hueCss, saturationCss];
}
get [$sliders]() {
return [Saturation, Hue];
}
get color() {

@@ -37,4 +42,4 @@ return this[$color];

const newHsva = this.colorModel.toHsva(newColor);
this[$render](newHsva);
this[$change](newColor, newHsva);
this[$update](newHsva);
this[$change](newColor);
}

@@ -63,8 +68,9 @@ }

// Merge the current HSV color object with updated params.
const newHsva = Object.assign({}, this[$hsva], event.detail);
this[$render](newHsva);
const oldHsva = this[$hsva];
const newHsva = { ...oldHsva, ...event.detail };
this[$update](newHsva);
let newColor;
if (!equalColorObjects(newHsva, this[$hsva]) &&
if (!equalColorObjects(newHsva, oldHsva) &&
!this[$isSame]((newColor = this.colorModel.fromHsva(newHsva)))) {
this[$change](newColor, newHsva);
this[$change](newColor);
}

@@ -75,12 +81,11 @@ }

}
[$render](hsva) {
this[$s].hsva = hsva;
this[$h].hue = hsva.h;
}
[$change](color, hsva) {
this[$color] = color;
[$update](hsva) {
this[$hsva] = hsva;
this.dispatchEvent(new CustomEvent('color-changed', { bubbles: true, detail: { value: color } }));
this[$parts].forEach((part) => part.update(hsva));
}
[$change](value) {
this[$color] = value;
fire(this, 'color-changed', { value });
}
}
//# sourceMappingURL=color-picker.js.map

16

lib/components/hue.d.ts

@@ -1,11 +0,9 @@

import { Interactive, Interaction } from './interactive.js';
export declare class Hue extends Interactive {
constructor();
connectedCallback(): void;
private _h;
get xy(): boolean;
get hue(): number;
set hue(h: number);
getMove(interaction: Interaction, key?: boolean): Record<string, number>;
import { Slider, Offset } from './slider.js';
import type { HsvaColor } from '../types';
export declare class Hue extends Slider {
private h;
constructor(root: ShadowRoot);
update({ h }: HsvaColor): void;
getMove(offset: Offset, key?: boolean): Record<string, number>;
}
//# sourceMappingURL=hue.d.ts.map

49

lib/components/hue.js

@@ -1,42 +0,23 @@

import { Interactive } from './interactive.js';
import { Slider } from './slider.js';
import { hsvaToHslString } from '../utils/convert.js';
import { createTemplate, createRoot } from '../utils/dom.js';
import { clamp, round } from '../utils/math.js';
import styles from '../styles/hue.js';
const template = createTemplate(`<style>${styles}</style>`);
export class Hue extends Interactive {
constructor() {
super();
createRoot(this, template);
this.setAttribute('aria-label', 'Hue');
this.setAttribute('aria-valuemin', '0');
this.setAttribute('aria-valuemax', '360');
export class Hue extends Slider {
constructor(root) {
super(root, 'hue', 'aria-label="Hue" aria-valuemin="0" aria-valuemax="360"', false);
}
connectedCallback() {
if (this.hasOwnProperty('hue')) {
const value = this.hue;
delete this['hue'];
this.hue = value;
}
update({ h }) {
this.h = h;
this.style([
{
left: `${(h / 360) * 100}%`,
color: hsvaToHslString({ h, s: 100, v: 100, a: 1 })
}
]);
this.el.setAttribute('aria-valuenow', `${round(h)}`);
}
get xy() {
return false;
}
get hue() {
return this._h;
}
set hue(h) {
this._h = h;
this.setStyles({
left: `${(h / 360) * 100}%`,
color: hsvaToHslString({ h, s: 100, v: 100, a: 1 })
});
this.setAttribute('aria-valuenow', `${round(h)}`);
}
getMove(interaction, key) {
getMove(offset, key) {
// Hue measured in degrees of the color circle ranging from 0 to 360
return { h: key ? clamp(this.hue + interaction.left * 360, 0, 360) : 360 * interaction.left };
return { h: key ? clamp(this.h + offset.x * 360, 0, 360) : 360 * offset.x };
}
}
customElements.define('vc-hue', Hue);
//# sourceMappingURL=hue.js.map

15

lib/components/saturation.d.ts

@@ -1,12 +0,9 @@

import { Interactive, Interaction } from './interactive.js';
import { Slider, Offset } from './slider.js';
import type { HsvaColor } from '../types';
export declare class Saturation extends Interactive {
constructor();
connectedCallback(): void;
private _hsva;
get xy(): boolean;
get hsva(): HsvaColor;
set hsva(hsva: HsvaColor);
getMove(interaction: Interaction, key?: boolean): Record<string, number>;
export declare class Saturation extends Slider {
private hsva;
constructor(root: ShadowRoot);
update(hsva: HsvaColor): void;
getMove(offset: Offset, key?: boolean): Record<string, number>;
}
//# sourceMappingURL=saturation.d.ts.map

57

lib/components/saturation.js

@@ -1,47 +0,30 @@

import { Interactive } from './interactive.js';
import { Slider } from './slider.js';
import { hsvaToHslString } from '../utils/convert.js';
import { createTemplate, createRoot } from '../utils/dom.js';
import { clamp, round } from '../utils/math.js';
import styles from '../styles/saturation.js';
const template = createTemplate(`<style>${styles}</style>`);
export class Saturation extends Interactive {
constructor() {
super();
createRoot(this, template);
this.setAttribute('aria-label', 'Color');
export class Saturation extends Slider {
constructor(root) {
super(root, 'saturation', 'aria-label="Color"', true);
}
connectedCallback() {
if (this.hasOwnProperty('hsva')) {
const value = this.hsva;
delete this['hsva'];
this.hsva = value;
}
update(hsva) {
this.hsva = hsva;
this.style([
{
top: `${100 - hsva.v}%`,
left: `${hsva.s}%`,
color: hsvaToHslString(hsva)
},
{
'background-color': hsvaToHslString({ h: hsva.h, s: 100, v: 100, a: 1 })
}
]);
this.el.setAttribute('aria-valuetext', `Saturation ${round(hsva.s)}%, Brightness ${round(hsva.v)}%`);
}
get xy() {
return true;
}
get hsva() {
return this._hsva;
}
set hsva(hsva) {
this._hsva = hsva;
this.style.backgroundColor = hsvaToHslString({ h: hsva.h, s: 100, v: 100, a: 1 });
this.setStyles({
top: `${100 - hsva.v}%`,
left: `${hsva.s}%`,
color: hsvaToHslString(hsva)
});
this.setAttribute('aria-valuetext', `Saturation ${round(hsva.s)}%, Brightness ${round(hsva.v)}%`);
}
getMove(interaction, key) {
getMove(offset, key) {
// Saturation and brightness always fit into [0, 100] range
return {
s: key ? clamp(this.hsva.s + interaction.left * 100, 0, 100) : interaction.left * 100,
v: key
? clamp(this.hsva.v - interaction.top * 100, 0, 100)
: Math.round(100 - interaction.top * 100)
s: key ? clamp(this.hsva.s + offset.x * 100, 0, 100) : offset.x * 100,
v: key ? clamp(this.hsva.v - offset.y * 100, 0, 100) : Math.round(100 - offset.y * 100)
};
}
}
customElements.define('vc-saturation', Saturation);
//# sourceMappingURL=saturation.js.map

5

lib/entrypoints/hex-input.d.ts

@@ -0,1 +1,2 @@

import type { ColorPickerEventListener, ColorPickerEventMap } from '../types';
declare const $color: unique symbol;

@@ -5,2 +6,6 @@ declare const $saved: unique symbol;

declare const $update: unique symbol;
export interface HexInputBase {
addEventListener<T extends keyof ColorPickerEventMap<string>>(type: T, listener: ColorPickerEventListener<ColorPickerEventMap<string>[T]>, options?: boolean | AddEventListenerOptions): void;
removeEventListener<T extends keyof ColorPickerEventMap<string>>(type: T, listener: ColorPickerEventListener<ColorPickerEventMap<string>[T]>, options?: boolean | EventListenerOptions): void;
}
export declare class HexInputBase extends HTMLElement {

@@ -7,0 +12,0 @@ static get observedAttributes(): string[];

10

lib/entrypoints/hex-input.js
import { validHex } from '../utils/validate.js';
import { createTemplate, createRoot } from '../utils/dom.js';
const template = createTemplate('<slot><input part="input" spellcheck="false"></slot>');
import { tpl } from '../utils/dom.js';
const template = tpl('<slot><input part="input" spellcheck="false"></slot>');
// Escapes all non-hexadecimal characters including "#"

@@ -22,3 +22,5 @@ const escape = (hex) => hex.replace(/([^0-9A-F]+)/gi, '').substr(0, 6);

connectedCallback() {
const slot = createRoot(this, template).firstElementChild;
const root = this.attachShadow({ mode: 'open' });
root.appendChild(template.content.cloneNode(true));
const slot = root.firstElementChild;
const setInput = () => {

@@ -30,3 +32,3 @@ let input = this.querySelector('input');

while ((c = this.firstChild)) {
this.removeChild(c);
c.remove();
}

@@ -33,0 +35,0 @@ input = slot.firstChild;

6

lib/entrypoints/hex.d.ts

@@ -1,3 +0,7 @@

import type { ColorModel } from '../types';
import type { ColorModel, ColorPickerEventListener, ColorPickerEventMap } from '../types';
import { ColorPicker } from '../components/color-picker.js';
export interface HexBase {
addEventListener<T extends keyof ColorPickerEventMap<string>>(type: T, listener: ColorPickerEventListener<ColorPickerEventMap<string>[T]>, options?: boolean | AddEventListenerOptions): void;
removeEventListener<T extends keyof ColorPickerEventMap<string>>(type: T, listener: ColorPickerEventListener<ColorPickerEventMap<string>[T]>, options?: boolean | EventListenerOptions): void;
}
export declare class HexBase extends ColorPicker<string> {

@@ -4,0 +8,0 @@ protected get colorModel(): ColorModel<string>;

6

lib/entrypoints/hsl-string.d.ts

@@ -1,3 +0,7 @@

import type { ColorModel } from '../types';
import type { ColorModel, ColorPickerEventListener, ColorPickerEventMap } from '../types';
import { ColorPicker } from '../components/color-picker.js';
export interface HslStringBase {
addEventListener<T extends keyof ColorPickerEventMap<string>>(type: T, listener: ColorPickerEventListener<ColorPickerEventMap<string>[T]>, options?: boolean | AddEventListenerOptions): void;
removeEventListener<T extends keyof ColorPickerEventMap<string>>(type: T, listener: ColorPickerEventListener<ColorPickerEventMap<string>[T]>, options?: boolean | EventListenerOptions): void;
}
export declare class HslStringBase extends ColorPicker<string> {

@@ -4,0 +8,0 @@ protected get colorModel(): ColorModel<string>;

6

lib/entrypoints/hsl.d.ts

@@ -1,3 +0,7 @@

import type { ColorModel, HslColor } from '../types';
import type { ColorModel, ColorPickerEventListener, ColorPickerEventMap, HslColor } from '../types';
import { ColorPicker } from '../components/color-picker.js';
export interface HslBase {
addEventListener<T extends keyof ColorPickerEventMap<HslColor>>(type: T, listener: ColorPickerEventListener<ColorPickerEventMap<HslColor>[T]>, options?: boolean | AddEventListenerOptions): void;
removeEventListener<T extends keyof ColorPickerEventMap<HslColor>>(type: T, listener: ColorPickerEventListener<ColorPickerEventMap<HslColor>[T]>, options?: boolean | EventListenerOptions): void;
}
export declare class HslBase extends ColorPicker<HslColor> {

@@ -4,0 +8,0 @@ protected get colorModel(): ColorModel<HslColor>;

6

lib/entrypoints/hsla-string.d.ts

@@ -1,3 +0,7 @@

import type { ColorModel } from '../types';
import type { ColorModel, ColorPickerEventListener, ColorPickerEventMap } from '../types';
import { AlphaColorPicker } from '../components/alpha-color-picker.js';
export interface HslaStringBase {
addEventListener<T extends keyof ColorPickerEventMap<string>>(type: T, listener: ColorPickerEventListener<ColorPickerEventMap<string>[T]>, options?: boolean | AddEventListenerOptions): void;
removeEventListener<T extends keyof ColorPickerEventMap<string>>(type: T, listener: ColorPickerEventListener<ColorPickerEventMap<string>[T]>, options?: boolean | EventListenerOptions): void;
}
export declare class HslaStringBase extends AlphaColorPicker<string> {

@@ -4,0 +8,0 @@ protected get colorModel(): ColorModel<string>;

6

lib/entrypoints/hsla.d.ts

@@ -1,3 +0,7 @@

import type { ColorModel, HslaColor } from '../types';
import type { ColorModel, ColorPickerEventListener, ColorPickerEventMap, HslaColor } from '../types';
import { AlphaColorPicker } from '../components/alpha-color-picker.js';
export interface HslaBase {
addEventListener<T extends keyof ColorPickerEventMap<HslaColor>>(type: T, listener: ColorPickerEventListener<ColorPickerEventMap<HslaColor>[T]>, options?: boolean | AddEventListenerOptions): void;
removeEventListener<T extends keyof ColorPickerEventMap<HslaColor>>(type: T, listener: ColorPickerEventListener<ColorPickerEventMap<HslaColor>[T]>, options?: boolean | EventListenerOptions): void;
}
export declare class HslaBase extends AlphaColorPicker<HslaColor> {

@@ -4,0 +8,0 @@ protected get colorModel(): ColorModel<HslaColor>;

6

lib/entrypoints/hsv-string.d.ts

@@ -1,3 +0,7 @@

import type { ColorModel } from '../types';
import type { ColorModel, ColorPickerEventListener, ColorPickerEventMap } from '../types';
import { ColorPicker } from '../components/color-picker.js';
export interface HsvStringBase {
addEventListener<T extends keyof ColorPickerEventMap<string>>(type: T, listener: ColorPickerEventListener<ColorPickerEventMap<string>[T]>, options?: boolean | AddEventListenerOptions): void;
removeEventListener<T extends keyof ColorPickerEventMap<string>>(type: T, listener: ColorPickerEventListener<ColorPickerEventMap<string>[T]>, options?: boolean | EventListenerOptions): void;
}
export declare class HsvStringBase extends ColorPicker<string> {

@@ -4,0 +8,0 @@ protected get colorModel(): ColorModel<string>;

6

lib/entrypoints/hsv.d.ts

@@ -1,3 +0,7 @@

import type { ColorModel, HsvColor } from '../types';
import type { ColorModel, ColorPickerEventListener, ColorPickerEventMap, HsvColor } from '../types';
import { ColorPicker } from '../components/color-picker.js';
export interface HsvBase {
addEventListener<T extends keyof ColorPickerEventMap<HsvColor>>(type: T, listener: ColorPickerEventListener<ColorPickerEventMap<HsvColor>[T]>, options?: boolean | AddEventListenerOptions): void;
removeEventListener<T extends keyof ColorPickerEventMap<HsvColor>>(type: T, listener: ColorPickerEventListener<ColorPickerEventMap<HsvColor>[T]>, options?: boolean | EventListenerOptions): void;
}
export declare class HsvBase extends ColorPicker<HsvColor> {

@@ -4,0 +8,0 @@ protected get colorModel(): ColorModel<HsvColor>;

6

lib/entrypoints/hsva-string.d.ts

@@ -1,3 +0,7 @@

import type { ColorModel } from '../types';
import type { ColorModel, ColorPickerEventListener, ColorPickerEventMap } from '../types';
import { AlphaColorPicker } from '../components/alpha-color-picker.js';
export interface HsvaStringBase {
addEventListener<T extends keyof ColorPickerEventMap<string>>(type: T, listener: ColorPickerEventListener<ColorPickerEventMap<string>[T]>, options?: boolean | AddEventListenerOptions): void;
removeEventListener<T extends keyof ColorPickerEventMap<string>>(type: T, listener: ColorPickerEventListener<ColorPickerEventMap<string>[T]>, options?: boolean | EventListenerOptions): void;
}
export declare class HsvaStringBase extends AlphaColorPicker<string> {

@@ -4,0 +8,0 @@ protected get colorModel(): ColorModel<string>;

6

lib/entrypoints/hsva.d.ts

@@ -1,3 +0,7 @@

import type { ColorModel, HsvaColor } from '../types';
import type { ColorModel, ColorPickerEventListener, ColorPickerEventMap, HsvaColor } from '../types';
import { AlphaColorPicker } from '../components/alpha-color-picker.js';
export interface HsvaBase {
addEventListener<T extends keyof ColorPickerEventMap<HsvaColor>>(type: T, listener: ColorPickerEventListener<ColorPickerEventMap<HsvaColor>[T]>, options?: boolean | AddEventListenerOptions): void;
removeEventListener<T extends keyof ColorPickerEventMap<HsvaColor>>(type: T, listener: ColorPickerEventListener<ColorPickerEventMap<HsvaColor>[T]>, options?: boolean | EventListenerOptions): void;
}
export declare class HsvaBase extends AlphaColorPicker<HsvaColor> {

@@ -4,0 +8,0 @@ protected get colorModel(): ColorModel<HsvaColor>;

6

lib/entrypoints/rgb-string.d.ts

@@ -1,3 +0,7 @@

import type { ColorModel } from '../types';
import type { ColorModel, ColorPickerEventListener, ColorPickerEventMap } from '../types';
import { ColorPicker } from '../components/color-picker.js';
export interface RgbStringBase {
addEventListener<T extends keyof ColorPickerEventMap<string>>(type: T, listener: ColorPickerEventListener<ColorPickerEventMap<string>[T]>, options?: boolean | AddEventListenerOptions): void;
removeEventListener<T extends keyof ColorPickerEventMap<string>>(type: T, listener: ColorPickerEventListener<ColorPickerEventMap<string>[T]>, options?: boolean | EventListenerOptions): void;
}
export declare class RgbStringBase extends ColorPicker<string> {

@@ -4,0 +8,0 @@ protected get colorModel(): ColorModel<string>;

6

lib/entrypoints/rgb.d.ts

@@ -1,3 +0,7 @@

import type { ColorModel, RgbColor } from '../types';
import type { ColorModel, ColorPickerEventListener, ColorPickerEventMap, RgbColor } from '../types';
import { ColorPicker } from '../components/color-picker.js';
export interface RgbBase {
addEventListener<T extends keyof ColorPickerEventMap<RgbColor>>(type: T, listener: ColorPickerEventListener<ColorPickerEventMap<RgbColor>[T]>, options?: boolean | AddEventListenerOptions): void;
removeEventListener<T extends keyof ColorPickerEventMap<RgbColor>>(type: T, listener: ColorPickerEventListener<ColorPickerEventMap<RgbColor>[T]>, options?: boolean | EventListenerOptions): void;
}
export declare class RgbBase extends ColorPicker<RgbColor> {

@@ -4,0 +8,0 @@ protected get colorModel(): ColorModel<RgbColor>;

6

lib/entrypoints/rgba-string.d.ts

@@ -1,3 +0,7 @@

import type { ColorModel } from '../types';
import type { ColorModel, ColorPickerEventListener, ColorPickerEventMap } from '../types';
import { AlphaColorPicker } from '../components/alpha-color-picker.js';
export interface RgbaStringBase {
addEventListener<T extends keyof ColorPickerEventMap<string>>(type: T, listener: ColorPickerEventListener<ColorPickerEventMap<string>[T]>, options?: boolean | AddEventListenerOptions): void;
removeEventListener<T extends keyof ColorPickerEventMap<string>>(type: T, listener: ColorPickerEventListener<ColorPickerEventMap<string>[T]>, options?: boolean | EventListenerOptions): void;
}
export declare class RgbaStringBase extends AlphaColorPicker<string> {

@@ -4,0 +8,0 @@ protected get colorModel(): ColorModel<string>;

6

lib/entrypoints/rgba.d.ts

@@ -1,3 +0,7 @@

import type { ColorModel, RgbaColor } from '../types';
import type { ColorModel, ColorPickerEventListener, ColorPickerEventMap, RgbaColor } from '../types';
import { AlphaColorPicker } from '../components/alpha-color-picker.js';
export interface RgbaBase {
addEventListener<T extends keyof ColorPickerEventMap<RgbaColor>>(type: T, listener: ColorPickerEventListener<ColorPickerEventMap<RgbaColor>[T]>, options?: boolean | AddEventListenerOptions): void;
removeEventListener<T extends keyof ColorPickerEventMap<RgbaColor>>(type: T, listener: ColorPickerEventListener<ColorPickerEventMap<RgbaColor>[T]>, options?: boolean | EventListenerOptions): void;
}
export declare class RgbaBase extends AlphaColorPicker<RgbaColor> {

@@ -4,0 +8,0 @@ protected get colorModel(): ColorModel<RgbaColor>;

2

lib/styles/alpha.d.ts

@@ -1,3 +0,3 @@

declare const _default: ":host{position:relative;height:24px;background-color:#fff}#gradient{position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}:host,[part=pointer]{background-color:#fff;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill-opacity=\".05\"><rect x=\"8\" width=\"8\" height=\"8\"/><rect y=\"8\" width=\"8\" height=\"8\"/></svg>')}";
declare const _default: "[part=alpha]{position:relative;flex:0 0 24px;background-color:#fff}[part=alpha]::after{display:block;content:\"\";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit;background-image:var(--gradient);box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part^=alpha]{background-color:#fff;background-image:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill-opacity=\".05\"><rect x=\"8\" width=\"8\" height=\"8\"/><rect y=\"8\" width=\"8\" height=\"8\"/></svg>')}[part=alpha-pointer]{top:50%}";
export default _default;
//# sourceMappingURL=alpha.d.ts.map

2

lib/styles/alpha.js

@@ -1,2 +0,2 @@

export default `:host{position:relative;height:24px;background-color:#fff}#gradient{position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}:host,[part=pointer]{background-color:#fff;background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><rect x="8" width="8" height="8"/><rect y="8" width="8" height="8"/></svg>')}`;
export default `[part=alpha]{position:relative;flex:0 0 24px;background-color:#fff}[part=alpha]::after{display:block;content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit;background-image:var(--gradient);box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part^=alpha]{background-color:#fff;background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><rect x="8" width="8" height="8"/><rect y="8" width="8" height="8"/></svg>')}[part=alpha-pointer]{top:50%}`;
//# sourceMappingURL=alpha.js.map

2

lib/styles/color-picker.d.ts

@@ -1,3 +0,3 @@

declare const _default: ":host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none !important}[part]:last-child{border-radius:0 0 8px 8px}";
declare const _default: ":host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none !important}[role=slider]{position:absolute;left:0;top:0;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none;outline:none}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%, -50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{display:block;content:\"\";position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%, -50%) scale(1.1)}";
export default _default;
//# sourceMappingURL=color-picker.d.ts.map

2

lib/styles/color-picker.js

@@ -1,2 +0,2 @@

export default `:host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none !important}[part]:last-child{border-radius:0 0 8px 8px}`;
export default `:host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none !important}[role=slider]{position:absolute;left:0;top:0;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none;outline:none}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%, -50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{display:block;content:"";position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%, -50%) scale(1.1)}`;
//# sourceMappingURL=color-picker.js.map

2

lib/styles/hue.d.ts

@@ -1,3 +0,3 @@

declare const _default: ":host{position:relative;bottom:0;left:0;right:0;height:24px;background:linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)}[part=pointer]{top:50%;z-index:2}";
declare const _default: "[part=hue]{position:relative;bottom:0;left:0;right:0;flex:0 0 24px;background:linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)}[part=hue-pointer]{top:50%;z-index:2}";
export default _default;
//# sourceMappingURL=hue.d.ts.map

2

lib/styles/hue.js

@@ -1,2 +0,2 @@

export default `:host{position:relative;bottom:0;left:0;right:0;height:24px;background:linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)}[part=pointer]{top:50%;z-index:2}`;
export default `[part=hue]{position:relative;bottom:0;left:0;right:0;flex:0 0 24px;background:linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)}[part=hue-pointer]{top:50%;z-index:2}`;
//# sourceMappingURL=hue.js.map

2

lib/styles/saturation.d.ts

@@ -1,3 +0,3 @@

declare const _default: ":host{display:block;position:relative;flex-grow:1;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top, #000, rgba(0, 0, 0, 0)),linear-gradient(to right, #fff, rgba(255, 255, 255, 0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=pointer]{z-index:3}";
declare const _default: "[part=saturation]{display:block;position:relative;flex-grow:1;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top, #000, rgba(0, 0, 0, 0)),linear-gradient(to right, #fff, rgba(255, 255, 255, 0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}";
export default _default;
//# sourceMappingURL=saturation.d.ts.map

2

lib/styles/saturation.js

@@ -1,2 +0,2 @@

export default `:host{display:block;position:relative;flex-grow:1;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top, #000, rgba(0, 0, 0, 0)),linear-gradient(to right, #fff, rgba(255, 255, 255, 0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=pointer]{z-index:3}`;
export default `[part=saturation]{display:block;position:relative;flex-grow:1;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top, #000, rgba(0, 0, 0, 0)),linear-gradient(to right, #fff, rgba(255, 255, 255, 0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}`;
//# sourceMappingURL=saturation.js.map

12

lib/types.d.ts

@@ -34,2 +34,14 @@ export interface RgbColor {

}
export interface ColorChangedEventListener<T> {
(evt: T): void;
}
export interface ColorChangedEventListenerObject<T> {
handleEvent(evt: T): void;
}
export interface ColorPickerEventMap<T> extends HTMLElementEventMap {
'color-changed': CustomEvent<{
value: T;
}>;
}
export declare type ColorPickerEventListener<T> = ColorChangedEventListener<T> | ColorChangedEventListenerObject<T>;
//# sourceMappingURL=types.d.ts.map

1

lib/utils/convert.d.ts
import { RgbaColor, RgbColor, HslaColor, HslColor, HsvaColor, HsvColor } from '../types';
export declare const hexToHsva: (hex: string) => HsvaColor;
export declare const hexToRgba: (hex: string) => RgbaColor;
export declare const parseHue: (value: string, unit?: string) => number;
export declare const hslaStringToHsva: (hslString: string) => HsvaColor;

@@ -5,0 +6,0 @@ export declare const hslStringToHsva: (hslString: string) => HsvaColor;

42

lib/utils/convert.js
import { round } from './math.js';
/**
* Valid CSS <angle> units.
* https://developer.mozilla.org/en-US/docs/Web/CSS/angle
*/
const angleUnits = {
grad: 360 / 400,
turn: 360,
rad: 360 / (Math.PI * 2)
};
export const hexToHsva = (hex) => rgbaToHsva(hexToRgba(hex));

@@ -21,4 +30,7 @@ export const hexToRgba = (hex) => {

};
export const parseHue = (value, unit = 'deg') => {
return Number(value) * (angleUnits[unit] || 1);
};
export const hslaStringToHsva = (hslString) => {
const matcher = /hsla?\((\d+\.?\d*),\s*(\d+\.?\d*)%?,\s*(\d+\.?\d*)%?,?\s*(\d+\.?\d*)?\)/;
const matcher = /hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i;
const match = matcher.exec(hslString);

@@ -28,6 +40,6 @@ if (!match)

return hslaToHsva({
h: Number(match[1]),
s: Number(match[2]),
l: Number(match[3]),
a: match[4] !== undefined ? Number(match[4]) : 1
h: parseHue(match[1], match[2]),
s: Number(match[3]),
l: Number(match[4]),
a: match[5] === undefined ? 1 : Number(match[5]) / (match[6] ? 100 : 1)
});

@@ -92,3 +104,3 @@ };

export const hsvaStringToHsva = (hsvString) => {
const matcher = /hsva?\((\d+\.?\d*),\s*(\d+\.?\d*)%?,\s*(\d+\.?\d*)%?,?\s*(\d+\.?\d*)?\)/;
const matcher = /hsva?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i;
const match = matcher.exec(hsvString);

@@ -98,6 +110,6 @@ if (!match)

return roundHsva({
h: Number(match[1]),
s: Number(match[2]),
v: Number(match[3]),
a: match[4] !== undefined ? Number(match[4]) : 1
h: parseHue(match[1], match[2]),
s: Number(match[3]),
v: Number(match[4]),
a: match[5] === undefined ? 1 : Number(match[5]) / (match[6] ? 100 : 1)
});

@@ -107,3 +119,3 @@ };

export const rgbaStringToHsva = (rgbaString) => {
const matcher = /rgba?\((\d+),\s*(\d+),\s*(\d+),?\s*(\d+\.?\d*)?\)/;
const matcher = /rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i;
const match = matcher.exec(rgbaString);

@@ -113,6 +125,6 @@ if (!match)

return rgbaToHsva({
r: Number(match[1]),
g: Number(match[2]),
b: Number(match[3]),
a: match[4] !== undefined ? Number(match[4]) : 1
r: Number(match[1]) / (match[2] ? 100 / 255 : 1),
g: Number(match[3]) / (match[4] ? 100 / 255 : 1),
b: Number(match[5]) / (match[6] ? 100 / 255 : 1),
a: match[7] === undefined ? 1 : Number(match[7]) / (match[8] ? 100 : 1)
});

@@ -119,0 +131,0 @@ };

4

lib/utils/dom.d.ts

@@ -1,3 +0,3 @@

export declare const createTemplate: (tpl: string) => HTMLTemplateElement;
export declare const createRoot: <T extends HTMLElement>(node: T, tpl: HTMLTemplateElement) => ShadowRoot;
export declare const tpl: (html: string) => HTMLTemplateElement;
export declare const fire: (target: HTMLElement, type: string, detail: Record<string, unknown>) => void;
//# sourceMappingURL=dom.d.ts.map

20

lib/utils/dom.js

@@ -1,11 +0,17 @@

export const createTemplate = (tpl) => {
const template = document.createElement('template');
template.innerHTML = tpl;
const cache = {};
export const tpl = (html) => {
let template = cache[html];
if (!template) {
template = document.createElement('template');
template.innerHTML = html;
cache[html] = template;
}
return template;
};
export const createRoot = (node, tpl) => {
const root = node.shadowRoot || node.attachShadow({ mode: 'open' });
root.appendChild(tpl.content.cloneNode(true));
return root;
export const fire = (target, type, detail) => {
target.dispatchEvent(new CustomEvent(type, {
bubbles: true,
detail
}));
};
//# sourceMappingURL=dom.js.map

87

package.json
{
"name": "vanilla-colorful",
"version": "0.5.3",
"version": "0.6.0",
"description": "A tiny framework agnostic color picker element for modern web apps",

@@ -82,6 +82,4 @@ "author": "Serhii Kulykov <iamkulykov@gmail.com>",

},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
"simple-git-hooks": {
"pre-commit": "npx lint-staged"
},

@@ -105,7 +103,7 @@ "lint-staged": {

"path": "hsl-string-color-picker.js",
"limit": "2.5 KB"
"limit": "2.6 KB"
},
{
"path": "hsla-color-picker.js",
"limit": "2.8 KB"
"limit": "2.7 KB"
},

@@ -122,3 +120,3 @@ {

"path": "hsv-string-color-picker.js",
"limit": "2.5 KB"
"limit": "2.6 KB"
},

@@ -135,11 +133,11 @@ {

"path": "rgb-color-picker.js",
"limit": "2.5 KB"
"limit": "2.6 KB"
},
{
"path": "rgb-string-color-picker.js",
"limit": "2.6 KB"
"limit": "2.7 KB"
},
{
"path": "rgba-color-picker.js",
"limit": "2.9 KB"
"limit": "2.8 KB"
},

@@ -155,38 +153,55 @@ {

],
"sideEffects": [
"hex-input.js",
"hex-color-picker.js",
"hsl-color-picker.js",
"hsl-string-color-picker.js",
"hsla-color-picker.js",
"hsla-string-color-picker.js",
"hsv-color-picker.js",
"hsv-string-color-picker.js",
"hsva-color-picker.js",
"hsva-string-color-picker.js",
"rgb-color-picker.js",
"rgb-string-color-picker.js",
"rgba-color-picker.js",
"rgba-string-color-picker.js"
],
"dependencies": {},
"devDependencies": {
"@esm-bundle/chai": "^4.1.5",
"@esm-bundle/chai": "^4.3.4",
"@open-wc/rollup-plugin-html": "^1.2.5",
"@open-wc/testing-helpers": "~1.7.2",
"@rollup/plugin-node-resolve": "^11.0.1",
"@size-limit/preset-small-lib": "^4.9.1",
"@types/sinon": "^9.0.10",
"@typescript-eslint/eslint-plugin": "^4.11.0",
"@typescript-eslint/parser": "^4.11.0",
"@web/dev-server": "^0.1.2",
"@web/dev-server-esbuild": "^0.2.9",
"@open-wc/testing-helpers": "~1.8.12",
"@rollup/plugin-node-resolve": "^13.0.0",
"@size-limit/preset-small-lib": "^4.11.0",
"@types/sinon": "^10.0.0",
"@typescript-eslint/eslint-plugin": "^4.24.0",
"@typescript-eslint/parser": "^4.24.0",
"@web/dev-server": "^0.1.17",
"@web/dev-server-esbuild": "^0.2.12",
"@web/rollup-plugin-copy": "^0.2.0",
"@web/test-runner": "^0.11.4",
"@web/test-runner-visual-regression": "^0.3.0",
"eslint": "^7.16.0",
"eslint-config-prettier": "^7.1.0",
"eslint-plugin-prettier": "^3.3.0",
"@web/test-runner": "^0.13.4",
"@web/test-runner-commands": "^0.4.5",
"@web/test-runner-visual-regression": "^0.6.0",
"eslint": "^7.27.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.0",
"gh-pages": "^3.1.0",
"glob": "^7.1.6",
"husky": "^4.3.6",
"lint-staged": "^10.5.3",
"lit-html": "^1.3.0",
"prettier": "^2.2.1",
"glob": "^7.1.7",
"lint-staged": "^11.0.0",
"lit-html": "^1.4.1",
"prettier": "^2.3.0",
"rimraf": "^3.0.2",
"rollup": "^2.35.1",
"rollup": "^2.49.0",
"rollup-plugin-terser": "^7.0.2",
"sass": "^1.30.0",
"sinon": "^9.2.2",
"size-limit": "^4.9.1",
"standard-version": "^9.0.0",
"sass": "^1.34.0",
"simple-git-hooks": "^2.4.1",
"sinon": "^10.0.0",
"size-limit": "^4.11.0",
"standard-version": "^9.3.0",
"throttle-debounce": "^3.0.1",
"tsc-watch": "^4.2.9",
"typescript": "^4.1.3",
"typescript": "^4.2.4",
"web-component-analyzer": "^1.1.6"
}
}

48

README.md

@@ -28,10 +28,11 @@ <div align="center">

- **Small**: Just 2,7 KB (minified and gzipped). [Size Limit](https://github.com/ai/size-limit) controls the size.
- **Fast**: Built with standards based Custom Elements.
- **Bulletproof**: Written in strict TypeScript and covered by 100+ tests.
- **Simple**: The interface is straight forward and easy to use.
- **Accessible**: Follows the [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) guidelines to support users of assistive technologies.
- **Mobile-friendly**: Works well on mobile devices and touch screens.
- **Framework-agnostic**: Can be used [with any framework](https://custom-elements-everywhere.com/).
- **No dependencies**
- ๐Ÿ—œใ€€**Small**: Just 2,7 KB (minified and gzipped). [Size Limit](https://github.com/ai/size-limit) controls the size.
- ๐Ÿš€ใ€€**Fast**: Built with standards based Custom Elements.
- ๐Ÿ›กใ€€**Bulletproof**: Written in strict TypeScript and covered by 100+ tests.
- ๐Ÿ—‚ใ€€**Typed**: Ships with [types included](#typescript-support).
- ๐Ÿ˜ใ€€**Simple**: The interface is straight forward and easy to use.
- ๐Ÿ’ฌใ€€**Accessible**: Follows the [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) guidelines to support users of assistive technologies.
- ๐Ÿ“ฒใ€€**Mobile-friendly**: Works well on mobile devices and touch screens.
- ๐Ÿ‘ซใ€€**Framework-agnostic**: Can be used [with any framework](https://custom-elements-everywhere.com/).
- ๐Ÿ’จใ€€**No dependencies**

@@ -91,8 +92,5 @@ ## Live demo

We recommend the following tools for the ES modules based development:
- [`@web/dev-server`](https://modern-web.dev/docs/dev-server/overview/) resolves bare module imports on the fly.
- [`snowpack`](https://www.snowpack.dev) performs one-time transform when installing dependencies.
- [`@rollup/plugin-node-resolve`](https://github.com/rollup/plugins/tree/master/packages/node-resolve) is needed when using Rollup.
We recommend to use one of the modern tools that leverage ES modules based development, such as
[`snowpack`](https://www.snowpack.dev), [`vite`](https://vitejs.dev),
[`@web/dev-server`](https://modern-web.dev/docs/dev-server/overview/), or [`wmr`](https://www.npmjs.com/package/wmr).
None of these tools are needed when importing the component from CDN.

@@ -206,4 +204,6 @@

<details>
<summary>How you can get the most from our TypeScript support</summary><br />
<summary>How you can get the most from our TypeScript support</summary>
### Custom types
While not only typing its own class methods and variables, it can also help you type yours. Depending on

@@ -219,5 +219,21 @@ the element you are using, you can also import the type that is associated with the element.

### Typed events
All the included custom elements provide overrides for `addEventListener` and `removeEventListener` methods
to include typings for the `color-changed` custom event `detail` property:
```ts
const picker = document.querySelector('rgba-color-picker');
picker.addEventListener('color-changed', (event) =>ย {
console.log(event.detail.value.a); // (property) RgbaColor.a: number
});
```
### Lit plugin
All the included custom elements are compatible with [lit-analyzer](https://www.npmjs.com/package/lit-analyzer) and
[lit-plugin](https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin) extension for Visual
Studio Code, so you can benefit from type checking in lit-html templates.
Studio Code, so you can benefit from type checking in [Lit](https://lit.dev) templates, for example
[validating binding names](https://github.com/runem/lit-analyzer/blob/master/docs/readme/rules.md#validating-binding-names).

@@ -224,0 +240,0 @@ </details>

lib/components/interactive.d.ts
lib/components/interactive.d.ts.map
lib/components/interactive.js
lib/components/interactive.js.map
lib/styles/interactive.d.ts
lib/styles/interactive.d.ts.map
lib/styles/interactive.js
lib/styles/interactive.js.map
lib/utils/clamp.d.ts
lib/utils/clamp.d.ts.map
lib/utils/clamp.js
lib/utils/clamp.js.map
hsva-color-picker.d.ts.map

Sorry, the diff of this file is not supported yet

hsva-color-picker.js.map

Sorry, the diff of this file is not supported yet

lib/components/alpha-color-picker.d.ts.map

Sorry, the diff of this file is not supported yet

lib/components/alpha-color-picker.js.map

Sorry, the diff of this file is not supported yet

lib/components/alpha.d.ts.map

Sorry, the diff of this file is not supported yet

lib/components/alpha.js.map

Sorry, the diff of this file is not supported yet

lib/components/color-picker.d.ts.map

Sorry, the diff of this file is not supported yet

lib/components/color-picker.js.map

Sorry, the diff of this file is not supported yet

lib/components/hue.d.ts.map

Sorry, the diff of this file is not supported yet

lib/components/hue.js.map

Sorry, the diff of this file is not supported yet

lib/components/saturation.d.ts.map

Sorry, the diff of this file is not supported yet

lib/components/saturation.js.map

Sorry, the diff of this file is not supported yet

lib/entrypoints/hex-input.d.ts.map

Sorry, the diff of this file is not supported yet

lib/entrypoints/hex-input.js.map

Sorry, the diff of this file is not supported yet

lib/entrypoints/hex.d.ts.map

Sorry, the diff of this file is not supported yet

lib/entrypoints/hex.js.map

Sorry, the diff of this file is not supported yet

lib/entrypoints/hsl-string.d.ts.map

Sorry, the diff of this file is not supported yet

lib/entrypoints/hsl-string.js.map

Sorry, the diff of this file is not supported yet

lib/entrypoints/hsl.d.ts.map

Sorry, the diff of this file is not supported yet

lib/entrypoints/hsl.js.map

Sorry, the diff of this file is not supported yet

lib/entrypoints/hsla-string.d.ts.map

Sorry, the diff of this file is not supported yet

lib/entrypoints/hsla-string.js.map

Sorry, the diff of this file is not supported yet

lib/entrypoints/hsla.d.ts.map

Sorry, the diff of this file is not supported yet

lib/entrypoints/hsla.js.map

Sorry, the diff of this file is not supported yet

lib/entrypoints/hsv-string.d.ts.map

Sorry, the diff of this file is not supported yet

lib/entrypoints/hsv-string.js.map

Sorry, the diff of this file is not supported yet

lib/entrypoints/hsv.d.ts.map

Sorry, the diff of this file is not supported yet

lib/entrypoints/hsv.js.map

Sorry, the diff of this file is not supported yet

lib/entrypoints/hsva-string.d.ts.map

Sorry, the diff of this file is not supported yet

lib/entrypoints/hsva-string.js.map

Sorry, the diff of this file is not supported yet

lib/entrypoints/hsva.d.ts.map

Sorry, the diff of this file is not supported yet

lib/entrypoints/hsva.js.map

Sorry, the diff of this file is not supported yet

lib/entrypoints/rgb-string.d.ts.map

Sorry, the diff of this file is not supported yet

lib/entrypoints/rgb-string.js.map

Sorry, the diff of this file is not supported yet

lib/entrypoints/rgb.d.ts.map

Sorry, the diff of this file is not supported yet

lib/entrypoints/rgb.js.map

Sorry, the diff of this file is not supported yet

lib/entrypoints/rgba-string.d.ts.map

Sorry, the diff of this file is not supported yet

lib/entrypoints/rgba-string.js.map

Sorry, the diff of this file is not supported yet

lib/entrypoints/rgba.d.ts.map

Sorry, the diff of this file is not supported yet

lib/entrypoints/rgba.js.map

Sorry, the diff of this file is not supported yet

lib/styles/alpha.d.ts.map

Sorry, the diff of this file is not supported yet

lib/styles/alpha.js.map

Sorry, the diff of this file is not supported yet

lib/styles/color-picker.d.ts.map

Sorry, the diff of this file is not supported yet

lib/styles/color-picker.js.map

Sorry, the diff of this file is not supported yet

lib/styles/hue.d.ts.map

Sorry, the diff of this file is not supported yet

lib/styles/hue.js.map

Sorry, the diff of this file is not supported yet

lib/styles/saturation.d.ts.map

Sorry, the diff of this file is not supported yet

lib/styles/saturation.js.map

Sorry, the diff of this file is not supported yet

lib/types.d.ts.map

Sorry, the diff of this file is not supported yet

lib/types.js.map

Sorry, the diff of this file is not supported yet

lib/utils/convert.d.ts.map

Sorry, the diff of this file is not supported yet

lib/utils/convert.js.map

Sorry, the diff of this file is not supported yet

lib/utils/dom.d.ts.map

Sorry, the diff of this file is not supported yet

lib/utils/dom.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with โšก๏ธ by Socket Inc