@c2n/color-select 0.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +3 -0
  3. package/dist/color-select.js +1344 -0
  4. package/package.json +70 -0
  5. package/types/src/color-select.d.ts +101 -0
  6. package/types/src/color-select.d.ts.map +1 -0
package/package.json ADDED
@@ -0,0 +1,70 @@
1
+ {
2
+ "name": "@c2n/color-select",
3
+ "version": "0.0.6",
4
+ "type": "module",
5
+ "main": "dist/color-select.js",
6
+ "exports": {
7
+ ".": {
8
+ "default": "./dist/color-select.js",
9
+ "types": "./types/src/color-select.d.ts"
10
+ },
11
+ "./custom-elements.json": "./custom-elements.json"
12
+ },
13
+ "files": [
14
+ "dist",
15
+ "types"
16
+ ],
17
+ "keywords": [
18
+ "color-select",
19
+ "web component",
20
+ "lit"
21
+ ],
22
+ "author": "code2nguyen@gmail.com",
23
+ "publishConfig": {
24
+ "registry": "https://registry.npmjs.org",
25
+ "access": "public"
26
+ },
27
+ "repository": {
28
+ "type": "git",
29
+ "url": "https://github.com/code2nguyen/web-components.git"
30
+ },
31
+ "scripts": {
32
+ "dev": "vite",
33
+ "build": "wireit",
34
+ "type-check": "wireit"
35
+ },
36
+ "wireit": {
37
+ "type-check": {
38
+ "dependencies": [
39
+ "../../core:build",
40
+ "../color-slider:build",
41
+ "../color-area:build",
42
+ "../text-field:build",
43
+ "../select:build",
44
+ "../overlay:build"
45
+ ],
46
+ "command": "tsc -p tsconfig.lib.json --composite false"
47
+ },
48
+ "build": {
49
+ "dependencies": [
50
+ "type-check"
51
+ ],
52
+ "command": "vite build"
53
+ }
54
+ },
55
+ "dependencies": {
56
+ "@c2n/color-area": "0.0.6",
57
+ "@c2n/color-slider": "0.0.6",
58
+ "@c2n/core": "0.0.6",
59
+ "@c2n/overlay": "0.0.6",
60
+ "@c2n/select": "0.0.6",
61
+ "@c2n/text-field": "0.0.6",
62
+ "@ctrl/tinycolor": "4.2.0",
63
+ "lit": "3.3.3"
64
+ },
65
+ "devDependencies": {
66
+ "@c2n/config": "*"
67
+ },
68
+ "customElements": "custom-elements.json",
69
+ "gitHead": "2921054bc75299da66dad11c1e374246ff88a51e"
70
+ }
package/types/src/color-select.d.ts ADDED
@@ -0,0 +1,101 @@
1
+ import { LitElement } from 'lit';
2
+ import { TinyColor } from '@ctrl/tinycolor';
3
+ import '@c2n/overlay';
4
+ import '@c2n/color-area';
5
+ import '@c2n/select';
6
+ import '@c2n/text-field';
7
+ import '@c2n/color-slider';
8
+ import type { ColorArea } from '@c2n/color-area';
9
+ export interface ColorSelectChangeEventDetail {
10
+ h: number;
11
+ s: number;
12
+ v: number;
13
+ a: number;
14
+ }
15
+ /**
16
+ * @tag c2-color-select
17
+ *
18
+ * @event {CustomEvent} change
19
+ *
20
+ * @cssproperty {pixel} [--c2-color-select--width=16px]
21
+ * @cssproperty {pixel} [--c2-color-select--height=16px]
22
+ * @cssproperty {border-radius} [--c2-color-select--border-top-left-radius=1px]
23
+ * @cssproperty {border-radius} [--c2-color-select--border-top-right-radius=1px]
24
+ * @cssproperty {border-radius} [--c2-color-select--border-bottom-left-radius=1px]
25
+ * @cssproperty {border-radius} [--c2-color-select--border-bottom-right-radius=1px]
26
+ *
27
+ * @cssproperty {border} --c2-color-select--border-top
28
+ * @cssproperty {border} --c2-color-select--border-right
29
+ * @cssproperty {border} --c2-color-select--border-bottom
30
+ * @cssproperty {border} --c2-color-select--border-left
31
+ *
32
+ * @cssproperty {color} [--c2-color-select__popover--background-color=rgb(255, 255, 255)]
33
+ * @cssproperty {pixel} [--c2-color-select__popover--gap=16px]
34
+ * @cssproperty {padding} [--c2-color-select__popover--padding-top=0px]
35
+ * @cssproperty {padding} [--c2-color-select__popover--padding-left=8px]
36
+ * @cssproperty {padding} [--c2-color-select__popover--padding-right=8px]
37
+ * @cssproperty {padding} [--c2-color-select__popover--padding-bottom=8px]
38
+ *
39
+ * @cssproperty {border} [--c2-color-select__popover--border-top=1px solid rgb(177, 177, 177)]
40
+ * @cssproperty {border} [--c2-color-select__popover--border-right=1px solid rgb(177, 177, 177)]
41
+ * @cssproperty {border} [--c2-color-select__popover--border-bottom=1px solid rgb(177, 177, 177)]
42
+ * @cssproperty {border} [--c2-color-select__popover--border-left=1px solid rgb(177, 177, 177)]
43
+ *
44
+ * @cssproperty {border-radius} [--c2-color-select__popover--border-top-left-radius=4px]
45
+ * @cssproperty {border-radius} [--c2-color-select__popover--border-top-right-radius=4px]
46
+ * @cssproperty {border-radius} [--c2-color-select__popover--border-bottom-left-radius=4px]
47
+ * @cssproperty {border-radius} [--c2-color-select__popover--border-bottom-right-radius=4px]
48
+ *
49
+ * @cssproperty {border} [--c2-color-select__color__sample--border-top=1px solid rgb(177, 177, 177)]
50
+ * @cssproperty {border} [--c2-color-select__color__sample--border-right=1px solid rgb(177, 177, 177)]
51
+ * @cssproperty {border} [--c2-color-select__color__sample--border-bottom=1px solid rgb(177, 177, 177)]
52
+ * @cssproperty {border} [--c2-color-select__color__sample--border-left=1px solid rgb(177, 177, 177)]
53
+ *
54
+ * @cssproperty {pixel} [--c2-color-select__color__sample--size=48px]
55
+ * @cssproperty {border-radius} [--c2-color-select__color__sample--border-radius=4px]
56
+ *
57
+ * @internalcomponent c2-color-area
58
+ * @internalcomponent c2-color-slider
59
+ * @internalcomponent c2-select
60
+ * @internalcomponent c2-text-field
61
+ * @internalcomponent c2-overlay
62
+ *
63
+ */
64
+ export declare class ColorSelect extends LitElement {
65
+ static styles: import("lit").CSSResult;
66
+ placement: string;
67
+ private _color;
68
+ get color(): string;
69
+ set color(value: string);
70
+ hue: number;
71
+ saturation: number;
72
+ value: number;
73
+ alpha: number;
74
+ inputType: string;
75
+ open: boolean;
76
+ colorArea: ColorArea;
77
+ get tinyColor(): TinyColor;
78
+ private renderInput;
79
+ private toPercentage;
80
+ private handleRgbInputChange;
81
+ private updateColor;
82
+ private handleHueInputChange;
83
+ private handleSaturationInputChange;
84
+ private handleLightnessInputChange;
85
+ private handleHexInputChange;
86
+ private handleAlphaInputChange;
87
+ private handleInputTypeChange;
88
+ private handleHueSliderChange;
89
+ private handleAlphaSliderChange;
90
+ private extractHsvaFromColor;
91
+ private handleColorAreaChange;
92
+ private handleOverlayToggle;
93
+ dispatchChangeEvent(): void;
94
+ render(): import("lit-html").TemplateResult<1>;
95
+ }
96
+ declare global {
97
+ interface HTMLElementTagNameMap {
98
+ 'c2-color-select': ColorSelect;
99
+ }
100
+ }
101
+ //# sourceMappingURL=color-select.d.ts.map
package/types/src/color-select.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"color-select.d.ts","sourceRoot":"","sources":["../../src/color-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,MAAM,KAAK,CAAA;AAE1D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAI3C,OAAO,cAAc,CAAA;AACrB,OAAO,iBAAiB,CAAA;AACxB,OAAO,aAAa,CAAA;AACpB,OAAO,iBAAiB,CAAA;AACxB,OAAO,mBAAmB,CAAA;AAG1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAIhD,MAAM,WAAW,4BAA4B;IAC3C,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAoB;IAEC,SAAS,SAAiB;IAErE,OAAO,CAAC,MAAM,CAAoB;IAClC,IAAW,KAAK,IAAI,MAAM,CAEzB;IAED,IACW,KAAK,CAAC,KAAK,EAAE,MAAM,EAK7B;IAEQ,GAAG,SAAI;IACP,UAAU,SAAI;IACd,KAAK,SAAI;IACT,KAAK,SAAI;IAET,SAAS,SAAQ;IACjB,IAAI,UAAQ;IAEC,SAAS,EAAG,SAAS,CAAA;IAE3C,IAAW,SAAS,IAAI,SAAS,CAEhC;IAED,OAAO,CAAC,WAAW;IAiBnB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,oBAAoB;IAc5B,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,oBAAoB;IAQ5B,OAAO,CAAC,2BAA2B;IAQnC,OAAO,CAAC,0BAA0B;IAQlC,OAAO,CAAC,oBAAoB;IAY5B,OAAO,CAAC,sBAAsB;IAQ9B,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,qBAAqB;IAK7B,OAAO,CAAC,uBAAuB;IAK/B,OAAO,CAAC,oBAAoB;IAQ5B,OAAO,CAAC,qBAAqB;IAQ7B,OAAO,CAAC,mBAAmB;IAK3B,mBAAmB;IAeV,MAAM;CAoDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,WAAW,CAAA;KAC/B;CACF"}