@nuralyui/colorpicker 0.0.5 → 0.0.7
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.
- package/bundle.js +45 -1348
- package/color-holder.component.d.ts +3 -3
- package/color-holder.component.js +4 -4
- package/color-holder.component.js.map +1 -1
- package/color-picker.component.d.ts +9 -10
- package/color-picker.component.js +14 -15
- package/color-picker.component.js.map +1 -1
- package/color-picker.style.d.ts +1 -1
- package/color-picker.style.js +1 -1
- package/color-picker.style.js.map +1 -1
- package/default-color-sets.component.d.ts +2 -2
- package/default-color-sets.component.js +5 -5
- package/default-color-sets.component.js.map +1 -1
- package/package.json +1 -1
- package/react.js +1 -1
- package/react.js.map +1 -1
|
@@ -13,9 +13,9 @@ import { ColorPickerSize } from './color-picker.types.js';
|
|
|
13
13
|
*
|
|
14
14
|
* @example
|
|
15
15
|
* ```html
|
|
16
|
-
* <
|
|
17
|
-
* <
|
|
18
|
-
* <
|
|
16
|
+
* <nr-colorholder-box color="#3498db"></nr-colorholder-box>
|
|
17
|
+
* <nr-colorholder-box color="rgb(52, 152, 219)" size="large"></nr-colorholder-box>
|
|
18
|
+
* <nr-colorholder-box color="#e74c3c" disabled></nr-colorholder-box>
|
|
19
19
|
* ```
|
|
20
20
|
*
|
|
21
21
|
* @cssproperty --color-holder-size - Size of the color box
|
|
@@ -22,9 +22,9 @@ import { styles } from './color-holder.style.js';
|
|
|
22
22
|
*
|
|
23
23
|
* @example
|
|
24
24
|
* ```html
|
|
25
|
-
* <
|
|
26
|
-
* <
|
|
27
|
-
* <
|
|
25
|
+
* <nr-colorholder-box color="#3498db"></nr-colorholder-box>
|
|
26
|
+
* <nr-colorholder-box color="rgb(52, 152, 219)" size="large"></nr-colorholder-box>
|
|
27
|
+
* <nr-colorholder-box color="#e74c3c" disabled></nr-colorholder-box>
|
|
28
28
|
* ```
|
|
29
29
|
*
|
|
30
30
|
* @cssproperty --color-holder-size - Size of the color box
|
|
@@ -110,7 +110,7 @@ __decorate([
|
|
|
110
110
|
property({ type: Boolean, attribute: 'show-border' })
|
|
111
111
|
], ColorHolderBox.prototype, "showBorder", void 0);
|
|
112
112
|
ColorHolderBox = __decorate([
|
|
113
|
-
customElement('
|
|
113
|
+
customElement('nr-colorholder-box')
|
|
114
114
|
], ColorHolderBox);
|
|
115
115
|
export { ColorHolderBox };
|
|
116
116
|
//# sourceMappingURL=color-holder.component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color-holder.component.js","sourceRoot":"","sources":["../../../src/components/colorpicker/color-holder.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { styles } from './color-holder.style.js';\nimport { ColorPickerSize } from './color-picker.types.js';\n\n/**\n * Color holder box component for displaying a color swatch.\n * \n * Renders a colored box that can be used as a color indicator or trigger.\n * Supports various sizes and can be disabled.\n * \n * @example\n * ```html\n * <
|
|
1
|
+
{"version":3,"file":"color-holder.component.js","sourceRoot":"","sources":["../../../src/components/colorpicker/color-holder.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { styles } from './color-holder.style.js';\nimport { ColorPickerSize } from './color-picker.types.js';\n\n/**\n * Color holder box component for displaying a color swatch.\n * \n * Renders a colored box that can be used as a color indicator or trigger.\n * Supports various sizes and can be disabled.\n * \n * @example\n * ```html\n * <nr-colorholder-box color=\"#3498db\"></nr-colorholder-box>\n * <nr-colorholder-box color=\"rgb(52, 152, 219)\" size=\"large\"></nr-colorholder-box>\n * <nr-colorholder-box color=\"#e74c3c\" disabled></nr-colorholder-box>\n * ```\n * \n * @cssproperty --color-holder-size - Size of the color box\n * @cssproperty --color-holder-border - Border style\n * @cssproperty --color-holder-border-radius - Border radius\n * @cssproperty --color-holder-cursor - Cursor style\n */\n@customElement('nr-colorholder-box')\nexport class ColorHolderBox extends LitElement {\n static override styles = styles;\n\n /** The color value to display */\n @property({ type: String })\n color = '#3498db';\n\n /** Size variant (small, default, large) */\n @property({ type: String, reflect: true })\n size: ColorPickerSize = ColorPickerSize.Default;\n\n /** Whether the color holder is disabled */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /** Show a checkered background for transparent colors */\n @property({ type: Boolean, attribute: 'show-transparency-grid' })\n showTransparencyGrid = true;\n\n /** Border width in pixels */\n @property({ type: Number, attribute: 'border-width' })\n borderWidth = 2;\n\n /** Whether to show a border */\n @property({ type: Boolean, attribute: 'show-border' })\n showBorder = true;\n\n /**\n * Validates if the color is valid CSS color\n */\n private isValidColor(): boolean {\n try {\n return CSS.supports('color', this.color);\n } catch {\n return false;\n }\n }\n\n /**\n * Checks if the color is transparent or has transparency\n */\n private isTransparent(): boolean {\n return this.color === 'transparent' || \n this.color.toLowerCase().includes('rgba') ||\n this.color.toLowerCase().includes('hsla');\n }\n\n override render() {\n const containerClasses = {\n 'color-holder-container': true,\n 'color-holder-container--disabled': this.disabled,\n 'color-holder-container--invalid': !this.isValidColor(),\n 'color-holder-container--transparent': this.isTransparent() && this.showTransparencyGrid,\n [`color-holder-container--${this.size}`]: true,\n };\n\n const containerStyles = {\n backgroundColor: this.isValidColor() ? this.color : '#ffffff',\n borderWidth: this.showBorder ? `${this.borderWidth}px` : '0',\n };\n\n return html`\n <div \n class=\"${classMap(containerClasses)}\" \n style=\"${styleMap(containerStyles)}\"\n role=\"img\"\n aria-label=\"Color swatch: ${this.color}\"\n title=\"${this.color}\"\n ></div>\n `;\n }\n}\n"]}
|
|
@@ -4,12 +4,11 @@
|
|
|
4
4
|
* SPDX-License-Identifier: MIT
|
|
5
5
|
*/
|
|
6
6
|
import { LitElement, PropertyValues } from 'lit';
|
|
7
|
-
import '../input/index.js';
|
|
8
7
|
import './color-holder.component.js';
|
|
9
8
|
import './default-color-sets.component.js';
|
|
10
9
|
import { ColorPickerSize, ColorPickerTrigger, ColorPickerPlacement, ColorPickerAnimation, ColorFormat } from './color-picker.types.js';
|
|
11
10
|
import type { ColorPickerHost } from './interfaces/index.js';
|
|
12
|
-
declare const ColorPicker_base: (new (...args: any[]) => import("
|
|
11
|
+
declare const ColorPicker_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
|
|
13
12
|
/**
|
|
14
13
|
* Advanced color picker component with dropdown positioning, validation, and accessibility.
|
|
15
14
|
*
|
|
@@ -19,31 +18,31 @@ declare const ColorPicker_base: (new (...args: any[]) => import("../../shared/de
|
|
|
19
18
|
* @example
|
|
20
19
|
* ```html
|
|
21
20
|
* <!-- Basic color picker -->
|
|
22
|
-
* <
|
|
21
|
+
* <nr-color-picker color="#3498db"></nr-color-picker>
|
|
23
22
|
*
|
|
24
23
|
* <!-- With default colors -->
|
|
25
|
-
* <
|
|
24
|
+
* <nr-color-picker
|
|
26
25
|
* color="#3498db"
|
|
27
26
|
* .defaultColorSets="${['#3498db', '#e74c3c', '#2ecc71']}">
|
|
28
|
-
* </
|
|
27
|
+
* </nr-color-picker>
|
|
29
28
|
*
|
|
30
29
|
* <!-- With custom configuration -->
|
|
31
|
-
* <
|
|
30
|
+
* <nr-color-picker
|
|
32
31
|
* color="#3498db"
|
|
33
32
|
* trigger="click"
|
|
34
33
|
* placement="top"
|
|
35
34
|
* size="large"
|
|
36
35
|
* show-input="true"
|
|
37
36
|
* show-copy-button="true">
|
|
38
|
-
* </
|
|
37
|
+
* </nr-color-picker>
|
|
39
38
|
*
|
|
40
39
|
* <!-- Disabled -->
|
|
41
|
-
* <
|
|
40
|
+
* <nr-color-picker color="#3498db" disabled></nr-color-picker>
|
|
42
41
|
* ```
|
|
43
42
|
*
|
|
44
43
|
* @fires hy-color-change - Color value changed
|
|
45
|
-
* @fires
|
|
46
|
-
* @fires
|
|
44
|
+
* @fires nr-colorpicker-open - Dropdown opened
|
|
45
|
+
* @fires nr-colorpicker-close - Dropdown closed
|
|
47
46
|
* @fires color-changed - Legacy event for backwards compatibility
|
|
48
47
|
*
|
|
49
48
|
* @slot - Default slot for custom content
|
|
@@ -12,8 +12,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
12
12
|
import { LitElement, html, nothing } from 'lit';
|
|
13
13
|
import { customElement, property, state } from 'lit/decorators.js';
|
|
14
14
|
import { classMap } from 'lit/directives/class-map.js';
|
|
15
|
-
import { NuralyUIBaseMixin } from '
|
|
16
|
-
import '../input/index.js';
|
|
15
|
+
import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
|
|
17
16
|
// Import child components
|
|
18
17
|
import './color-holder.component.js';
|
|
19
18
|
import './default-color-sets.component.js';
|
|
@@ -30,31 +29,31 @@ import { ColorPickerDropdownController, ColorPickerEventController, } from './co
|
|
|
30
29
|
* @example
|
|
31
30
|
* ```html
|
|
32
31
|
* <!-- Basic color picker -->
|
|
33
|
-
* <
|
|
32
|
+
* <nr-color-picker color="#3498db"></nr-color-picker>
|
|
34
33
|
*
|
|
35
34
|
* <!-- With default colors -->
|
|
36
|
-
* <
|
|
35
|
+
* <nr-color-picker
|
|
37
36
|
* color="#3498db"
|
|
38
37
|
* .defaultColorSets="${['#3498db', '#e74c3c', '#2ecc71']}">
|
|
39
|
-
* </
|
|
38
|
+
* </nr-color-picker>
|
|
40
39
|
*
|
|
41
40
|
* <!-- With custom configuration -->
|
|
42
|
-
* <
|
|
41
|
+
* <nr-color-picker
|
|
43
42
|
* color="#3498db"
|
|
44
43
|
* trigger="click"
|
|
45
44
|
* placement="top"
|
|
46
45
|
* size="large"
|
|
47
46
|
* show-input="true"
|
|
48
47
|
* show-copy-button="true">
|
|
49
|
-
* </
|
|
48
|
+
* </nr-color-picker>
|
|
50
49
|
*
|
|
51
50
|
* <!-- Disabled -->
|
|
52
|
-
* <
|
|
51
|
+
* <nr-color-picker color="#3498db" disabled></nr-color-picker>
|
|
53
52
|
* ```
|
|
54
53
|
*
|
|
55
54
|
* @fires hy-color-change - Color value changed
|
|
56
|
-
* @fires
|
|
57
|
-
* @fires
|
|
55
|
+
* @fires nr-colorpicker-open - Dropdown opened
|
|
56
|
+
* @fires nr-colorpicker-close - Dropdown closed
|
|
58
57
|
* @fires color-changed - Legacy event for backwards compatibility
|
|
59
58
|
*
|
|
60
59
|
* @slot - Default slot for custom content
|
|
@@ -211,7 +210,7 @@ let ColorPicker = class ColorPicker extends NuralyUIBaseMixin(LitElement) {
|
|
|
211
210
|
<div class="${classMap(containerClasses)}" data-theme="${this.currentTheme}">
|
|
212
211
|
${this.renderLabel()}
|
|
213
212
|
|
|
214
|
-
<
|
|
213
|
+
<nr-colorholder-box
|
|
215
214
|
class="color-holder"
|
|
216
215
|
color="${this.color}"
|
|
217
216
|
.size=${this.size}
|
|
@@ -222,7 +221,7 @@ let ColorPicker = class ColorPicker extends NuralyUIBaseMixin(LitElement) {
|
|
|
222
221
|
aria-expanded="${this.show}"
|
|
223
222
|
aria-haspopup="dialog"
|
|
224
223
|
tabindex="${this.disabled ? -1 : 0}"
|
|
225
|
-
></
|
|
224
|
+
></nr-colorholder-box>
|
|
226
225
|
|
|
227
226
|
${this.renderDropdown()}
|
|
228
227
|
${this.renderHelperText()}
|
|
@@ -267,11 +266,11 @@ let ColorPicker = class ColorPicker extends NuralyUIBaseMixin(LitElement) {
|
|
|
267
266
|
return nothing;
|
|
268
267
|
}
|
|
269
268
|
return html `
|
|
270
|
-
<
|
|
269
|
+
<nr-default-color-sets
|
|
271
270
|
.defaultColorSets=${this.defaultColorSets}
|
|
272
271
|
@color-click="${this.handleColorChanged}"
|
|
273
272
|
aria-label="Preset colors">
|
|
274
|
-
</
|
|
273
|
+
</nr-default-color-sets>
|
|
275
274
|
`;
|
|
276
275
|
}
|
|
277
276
|
/**
|
|
@@ -374,7 +373,7 @@ __decorate([
|
|
|
374
373
|
state()
|
|
375
374
|
], ColorPicker.prototype, "isValidColor", void 0);
|
|
376
375
|
ColorPicker = __decorate([
|
|
377
|
-
customElement('
|
|
376
|
+
customElement('nr-color-picker')
|
|
378
377
|
], ColorPicker);
|
|
379
378
|
export { ColorPicker };
|
|
380
379
|
//# sourceMappingURL=color-picker.component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color-picker.component.js","sourceRoot":"","sources":["../../../src/components/colorpicker/color-picker.component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;AAEH,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,mBAAmB,CAAC;AAE3B,0BAA0B;AAC1B,OAAO,6BAA6B,CAAC;AACrC,OAAO,mCAAmC,CAAC;AAE3C,0BAA0B;AAC1B,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAS7C,qBAAqB;AACrB,OAAO,EACL,6BAA6B,EAC7B,0BAA0B,GAC3B,MAAM,wBAAwB,CAAC;AAKhC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AAEH,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,iBAAiB,CAAC,UAAU,CAAC;IAmF5D;QACE,KAAK,EAAE,CAAC;QAjFD,uBAAkB,GAAG,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;QAEtD,0BAA0B;QAE1B,UAAK,GAAG,SAAS,CAAC;QAElB,mCAAmC;QAEnC,SAAI,GAAG,KAAK,CAAC;QAEb,wCAAwC;QAExC,qBAAgB,GAAa,EAAE,CAAC;QAEhC,gCAAgC;QAEhC,aAAQ,GAAG,KAAK,CAAC;QAEjB,gDAAgD;QAEhD,SAAI,2CAA4C;QAEhD,wCAAwC;QAExC,YAAO,0CAAgD;QAEvD,yBAAyB;QAEzB,cAAS,0CAAmD;QAE5D,mCAAmC;QAEnC,cAAS,0CAAmD;QAE5D,8CAA8C;QAE9C,kBAAa,GAAG,KAAK,CAAC;QAEtB,sCAAsC;QAEtC,wBAAmB,GAAG,IAAI,CAAC;QAE3B,mCAAmC;QAEnC,kBAAa,GAAG,IAAI,CAAC;QAErB,6BAA6B;QAE7B,cAAS,GAAG,IAAI,CAAC;QAEjB,gCAAgC;QAEhC,mBAAc,GAAG,IAAI,CAAC;QAEtB,+CAA+C;QAE/C,WAAM,+BAAgC;QAEtC,uCAAuC;QAEvC,qBAAgB,GAAG,aAAa,CAAC;QAEjC,iBAAiB;QAEjB,UAAK,GAAG,EAAE,CAAC;QAEX,kBAAkB;QAElB,eAAU,GAAG,EAAE,CAAC;QAEhB,uCAAuC;QAE/B,iBAAY,GAAG,IAAI,CAAC;QAE5B,kDAAkD;QAC1C,uBAAkB,GAAG,IAAI,6BAA6B,CAAC,IAAI,CAAC,CAAC;QAErE,mCAAmC;QAC3B,oBAAe,GAAG,IAAI,0BAA0B,CAAC,IAAI,CAAC,CAAC;QAkF/D;;WAEG;QACK,uBAAkB,GAAG,CAAC,KAAY,EAAQ,EAAE;YAClD,IAAI,CAAC,eAAe,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;QACjD,CAAC,CAAC;QAEF;;WAEG;QACK,uBAAkB,GAAG,CAAC,KAAkB,EAAQ,EAAE;YACxD,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACpC,IAAI,CAAC,eAAe,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;YAEjD,IAAI,IAAI,CAAC,aAAa,EAAE;gBACtB,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,CAAC;aACjC;QACH,CAAC,CAAC;QAEF;;WAEG;QACK,sBAAiB,GAAG,CAAC,KAAkB,EAAQ,EAAE;YACvD,IAAI,CAAC,eAAe,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAChD,CAAC,CAAC;QAtGA,0DAA0D;QAC1D,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;YACjC,MAAM,CAAC,kBAAkB,CAAC,CAAC;SAC5B;IACH,CAAC;IAED;;OAEG;IACM,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;IAC5B,CAAC;IAED;;OAEG;IACM,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;IAC/B,CAAC;IAED;;OAEG;IACM,OAAO,CAAC,iBAAiC;QAChD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAEjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YAClC,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;IACH,CAAC;IAED,6BAA6B;IAE7B;;OAEG;IACH,IAAI;QACF,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC;IACjC,CAAC;IAED;;OAEG;IACH,KAAK;QACH,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,CAAC;IAClC,CAAC;IAED;;OAEG;IACH,MAAM;QACJ,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE,CAAC;IACnC,CAAC;IAED;;OAEG;IACH,aAAa;QACX,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAClE,OAAO,IAAI,CAAC,YAAY,CAAC;IAC3B,CAAC;IAED;;OAEG;IACH,mBAAmB;QACjB,IAAI,IAAI,CAAC,mBAAmB,IAAI,IAAI,CAAC,aAAa,EAAE;YAClD,IAAI,CAAC,eAAe,CAAC,mBAAmB,EAAE,CAAC;SAC5C;IACH,CAAC;IAED;;OAEG;IACH,oBAAoB;QAClB,IAAI,CAAC,eAAe,CAAC,oBAAoB,EAAE,CAAC;IAC9C,CAAC;IA4BD;;OAEG;IACM,MAAM;QACb,MAAM,gBAAgB,GAAG;YACvB,wBAAwB,EAAE,IAAI;YAC9B,kCAAkC,EAAE,IAAI,CAAC,QAAQ;YACjD,8BAA8B,EAAE,IAAI,CAAC,IAAI;YACzC,CAAC,2BAA2B,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;SAC/C,CAAC;QAEF,OAAO,IAAI,CAAA;oBACK,QAAQ,CAAC,gBAAgB,CAAC,iBAAiB,IAAI,CAAC,YAAY;UACtE,IAAI,CAAC,WAAW,EAAE;;;;mBAIT,IAAI,CAAC,KAAK;kBACX,IAAI,CAAC,IAAI;uBACJ,IAAI,CAAC,QAAQ;mBACjB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB;;;2BAGzC,IAAI,CAAC,IAAI;;sBAEd,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;UAGlC,IAAI,CAAC,cAAc,EAAE;UACrB,IAAI,CAAC,gBAAgB,EAAE;;KAE5B,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,WAAW;QACjB,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,OAAO,CAAC;QAEhC,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,KAAK;;KAEf,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,cAAc;QACpB,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO,OAAO,CAAC;QAE/B,OAAO,IAAI,CAAA;;;;;;UAML,IAAI,CAAC,sBAAsB,EAAE;UAC7B,IAAI,CAAC,iBAAiB,EAAE;UACxB,IAAI,CAAC,gBAAgB,EAAE;;KAE5B,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,sBAAsB;QAC5B,IAAI,CAAC,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,gBAAgB,CAAC,MAAM,KAAK,CAAC,EAAE;YAChE,OAAO,OAAO,CAAC;SAChB;QAED,OAAO,IAAI,CAAA;;4BAEa,IAAI,CAAC,gBAAgB;wBACzB,IAAI,CAAC,kBAAkB;;;KAG1C,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,iBAAiB;QACvB,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,KAAK;0BACD,IAAI,CAAC,kBAAkB;;;KAG5C,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,gBAAgB;QACtB,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAO,OAAO,CAAC;QAEpC,OAAO,IAAI,CAAA;;;kBAGG,IAAI,CAAC,KAAK;uBACL,IAAI,CAAC,gBAAgB;qBACvB,IAAI,CAAC,iBAAiB;oBACvB,IAAI,CAAC,cAAc;kBACrB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,iCAAmB,CAAC,oCAAoB;;wBAEtD,CAAC,IAAI,CAAC,YAAY;;KAErC,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,gBAAgB;QACtB,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,OAAO,OAAO,CAAC;QAErC,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,UAAU;;KAEpB,CAAC;IACJ,CAAC;CACF,CAAA;AA5TiB,kBAAM,GAAG,MAAO,CAAA;AAMhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACT;AAIlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAC9B;AAIb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;qDAC3B;AAIhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAC1B;AAIjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCACM;AAIhD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACa;AAIvD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACkB;AAI5D;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACkB;AAI5D;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;kDACpC;AAItB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,wBAAwB,EAAE,CAAC;wDACtC;AAI3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;kDACrC;AAIrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;8CACpC;AAIjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;mDACrC;AAItB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACJ;AAItC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;qDAC1B;AAIjC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAChB;AAIX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;+CACrC;AAIhB;IADC,KAAK,EAAE;iDACoB;AA3EjB,WAAW;IADvB,aAAa,CAAC,iBAAiB,CAAC;GACpB,WAAW,CA6TvB;SA7TY,WAAW","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, PropertyValues, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\nimport { INPUT_STATE } from '../input/input.types.js';\nimport '../input/index.js';\n\n// Import child components\nimport './color-holder.component.js';\nimport './default-color-sets.component.js';\n\n// Import styles and types\nimport styles from './color-picker.style.js';\nimport {\n ColorPickerSize,\n ColorPickerTrigger,\n ColorPickerPlacement,\n ColorPickerAnimation,\n ColorFormat\n} from './color-picker.types.js';\n\n// Import controllers\nimport {\n ColorPickerDropdownController,\n ColorPickerEventController,\n} from './controllers/index.js';\n\n// Import interfaces\nimport type { ColorPickerHost } from './interfaces/index.js';\n\n/**\n * Advanced color picker component with dropdown positioning, validation, and accessibility.\n * \n * Supports multiple color formats, default color sets, custom triggers, keyboard navigation,\n * and various display configurations.\n * \n * @example\n * ```html\n * <!-- Basic color picker -->\n * <hy-color-picker color=\"#3498db\"></hy-color-picker>\n * \n * <!-- With default colors -->\n * <hy-color-picker \n * color=\"#3498db\"\n * .defaultColorSets=\"${['#3498db', '#e74c3c', '#2ecc71']}\">\n * </hy-color-picker>\n * \n * <!-- With custom configuration -->\n * <hy-color-picker\n * color=\"#3498db\"\n * trigger=\"click\"\n * placement=\"top\"\n * size=\"large\"\n * show-input=\"true\"\n * show-copy-button=\"true\">\n * </hy-color-picker>\n * \n * <!-- Disabled -->\n * <hy-color-picker color=\"#3498db\" disabled></hy-color-picker>\n * ```\n * \n * @fires hy-color-change - Color value changed\n * @fires hy-colorpicker-open - Dropdown opened\n * @fires hy-colorpicker-close - Dropdown closed\n * @fires color-changed - Legacy event for backwards compatibility\n * \n * @slot - Default slot for custom content\n * \n * @cssproperty --colorpicker-trigger-size - Size of the color trigger box\n * @cssproperty --colorpicker-dropdown-width - Width of the dropdown panel\n * @cssproperty --colorpicker-dropdown-background - Background color of dropdown\n * @cssproperty --colorpicker-dropdown-shadow - Shadow of dropdown panel\n * @cssproperty --colorpicker-dropdown-border-radius - Border radius of dropdown\n */\n@customElement('hy-color-picker')\nexport class ColorPicker extends NuralyUIBaseMixin(LitElement) implements ColorPickerHost {\n static override styles = styles;\n\n override requiredComponents = ['nr-input', 'nr-icon'];\n\n /** Current color value */\n @property({ type: String }) \n color = '#3498db';\n\n /** Controls dropdown visibility */\n @property({ type: Boolean, reflect: true }) \n show = false;\n\n /** Array of preset colors to display */\n @property({ type: Array, attribute: 'default-color-sets' }) \n defaultColorSets: string[] = [];\n\n /** Disables the color picker */\n @property({ type: Boolean, reflect: true }) \n disabled = false;\n\n /** Color picker size (small, default, large) */\n @property({ type: String, reflect: true }) \n size: ColorPickerSize = ColorPickerSize.Default;\n\n /** Trigger mode for opening dropdown */\n @property({ type: String, reflect: true }) \n trigger: ColorPickerTrigger = ColorPickerTrigger.Click;\n\n /** Dropdown placement */\n @property({ type: String, reflect: true }) \n placement: ColorPickerPlacement = ColorPickerPlacement.Auto;\n\n /** Animation style for dropdown */\n @property({ type: String, reflect: true }) \n animation: ColorPickerAnimation = ColorPickerAnimation.Fade;\n\n /** Close dropdown when a color is selected */\n @property({ type: Boolean, attribute: 'close-on-select' }) \n closeOnSelect = false;\n\n /** Close dropdown on outside click */\n @property({ type: Boolean, attribute: 'close-on-outside-click' }) \n closeOnOutsideClick = true;\n\n /** Close dropdown on escape key */\n @property({ type: Boolean, attribute: 'close-on-escape' }) \n closeOnEscape = true;\n\n /** Show color input field */\n @property({ type: Boolean, attribute: 'show-input' }) \n showInput = true;\n\n /** Show copy button on input */\n @property({ type: Boolean, attribute: 'show-copy-button' }) \n showCopyButton = true;\n\n /** Color format (hex, rgb, rgba, hsl, hsla) */\n @property({ type: String, reflect: true }) \n format: ColorFormat = ColorFormat.Hex;\n\n /** Placeholder text for color input */\n @property({ type: String, attribute: 'input-placeholder' }) \n inputPlaceholder = 'Enter color';\n\n /** Label text */\n @property({ type: String }) \n label = '';\n\n /** Helper text */\n @property({ type: String, attribute: 'helper-text' }) \n helperText = '';\n\n /** Validation state for color value */\n @state() \n private isValidColor = true;\n\n /** Manages dropdown visibility and positioning */\n private dropdownController = new ColorPickerDropdownController(this);\n\n /** Handles all event management */\n private eventController = new ColorPickerEventController(this);\n\n constructor() {\n super();\n // Dynamically import vanilla-colorful for color picker UI\n if (typeof window !== 'undefined') {\n import('vanilla-colorful');\n }\n }\n\n /**\n * Component connected to DOM - initialize base functionality\n */\n override connectedCallback(): void {\n super.connectedCallback();\n }\n\n /**\n * Component disconnected from DOM - cleanup event listeners\n */\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n }\n\n /**\n * Called after component updates\n */\n override updated(changedProperties: PropertyValues): void {\n super.updated(changedProperties);\n \n if (changedProperties.has('color')) {\n this.validateColor();\n }\n }\n\n // === Public API Methods ===\n\n /**\n * Opens the color picker dropdown\n */\n open(): void {\n this.dropdownController.open();\n }\n\n /**\n * Closes the color picker dropdown\n */\n close(): void {\n this.dropdownController.close();\n }\n\n /**\n * Toggles the color picker dropdown\n */\n toggle(): void {\n this.dropdownController.toggle();\n }\n\n /**\n * Validates the current color value\n */\n validateColor(): boolean {\n this.isValidColor = this.eventController.isValidColor(this.color);\n return this.isValidColor;\n }\n\n /**\n * Sets up global event listeners (called by dropdown controller)\n */\n setupEventListeners(): void {\n if (this.closeOnOutsideClick || this.closeOnEscape) {\n this.eventController.setupEventListeners();\n }\n }\n\n /**\n * Removes global event listeners (called by dropdown controller)\n */\n removeEventListeners(): void {\n this.eventController.removeEventListeners();\n }\n\n /**\n * Handles trigger click to toggle dropdown\n */\n private handleTriggerClick = (event: Event): void => {\n this.eventController.handleTriggerClick(event);\n };\n\n /**\n * Handles color selection from hex-color-picker or default colors\n */\n private handleColorChanged = (event: CustomEvent): void => {\n const newColor = event.detail.value;\n this.eventController.handleColorChange(newColor);\n \n if (this.closeOnSelect) {\n this.dropdownController.close();\n }\n };\n\n /**\n * Handles input change from text input\n */\n private handleInputChange = (event: CustomEvent): void => {\n this.eventController.handleInputChange(event);\n };\n\n /**\n * Main render method\n */\n override render() {\n const containerClasses = {\n 'color-picker-container': true,\n 'color-picker-container--disabled': this.disabled,\n 'color-picker-container--open': this.show,\n [`color-picker-container--${this.size}`]: true,\n };\n\n return html`\n <div class=\"${classMap(containerClasses)}\" data-theme=\"${this.currentTheme}\">\n ${this.renderLabel()}\n \n <hy-colorholder-box\n class=\"color-holder\"\n color=\"${this.color}\"\n .size=${this.size}\n ?disabled=\"${this.disabled}\"\n @click=${this.disabled ? nothing : this.handleTriggerClick}\n role=\"button\"\n aria-label=\"Select color\"\n aria-expanded=\"${this.show}\"\n aria-haspopup=\"dialog\"\n tabindex=\"${this.disabled ? -1 : 0}\"\n ></hy-colorholder-box>\n \n ${this.renderDropdown()}\n ${this.renderHelperText()}\n </div>\n `;\n }\n\n /**\n * Renders the label if provided\n */\n private renderLabel() {\n if (!this.label) return nothing;\n \n return html`\n <label class=\"color-picker-label\">\n ${this.label}\n </label>\n `;\n }\n\n /**\n * Renders the dropdown panel with color picker\n */\n private renderDropdown() {\n if (!this.show) return nothing;\n\n return html`\n <div \n class=\"dropdown-container\"\n role=\"dialog\"\n aria-label=\"Color picker\"\n >\n ${this.renderDefaultColorSets()}\n ${this.renderColorPicker()}\n ${this.renderColorInput()}\n </div>\n `;\n }\n\n /**\n * Renders default color sets if provided\n */\n private renderDefaultColorSets() {\n if (!this.defaultColorSets || this.defaultColorSets.length === 0) {\n return nothing;\n }\n\n return html`\n <hy-default-color-sets \n .defaultColorSets=${this.defaultColorSets} \n @color-click=\"${this.handleColorChanged}\"\n aria-label=\"Preset colors\">\n </hy-default-color-sets>\n `;\n }\n\n /**\n * Renders the hex color picker\n */\n private renderColorPicker() {\n return html`\n <hex-color-picker\n color=\"${this.color}\"\n @color-changed=\"${this.handleColorChanged}\"\n aria-label=\"Color gradient picker\">\n </hex-color-picker>\n `;\n }\n\n /**\n * Renders the color input field\n */\n private renderColorInput() {\n if (!this.showInput) return nothing;\n\n return html`\n <nr-input \n type=\"text\" \n .value=\"${this.color}\" \n placeholder=\"${this.inputPlaceholder}\"\n @nr-input=\"${this.handleInputChange}\" \n ?withCopy=${this.showCopyButton} \n .state=\"${!this.isValidColor ? INPUT_STATE.Error : INPUT_STATE.Default}\"\n aria-label=\"Color value input\"\n aria-invalid=\"${!this.isValidColor}\">\n </nr-input>\n `;\n }\n\n /**\n * Renders helper text if provided\n */\n private renderHelperText() {\n if (!this.helperText) return nothing;\n \n return html`\n <div class=\"color-picker-helper-text\">\n ${this.helperText}\n </div>\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"color-picker.component.js","sourceRoot":"","sources":["../../../src/components/colorpicker/color-picker.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, PropertyValues, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { INPUT_STATE } from '../input/input.types.js';\n\n// Import child components\nimport './color-holder.component.js';\nimport './default-color-sets.component.js';\n\n// Import styles and types\nimport styles from './color-picker.style.js';\nimport {\n ColorPickerSize,\n ColorPickerTrigger,\n ColorPickerPlacement,\n ColorPickerAnimation,\n ColorFormat\n} from './color-picker.types.js';\n\n// Import controllers\nimport {\n ColorPickerDropdownController,\n ColorPickerEventController,\n} from './controllers/index.js';\n\n// Import interfaces\nimport type { ColorPickerHost } from './interfaces/index.js';\n\n/**\n * Advanced color picker component with dropdown positioning, validation, and accessibility.\n * \n * Supports multiple color formats, default color sets, custom triggers, keyboard navigation,\n * and various display configurations.\n * \n * @example\n * ```html\n * <!-- Basic color picker -->\n * <nr-color-picker color=\"#3498db\"></nr-color-picker>\n * \n * <!-- With default colors -->\n * <nr-color-picker \n * color=\"#3498db\"\n * .defaultColorSets=\"${['#3498db', '#e74c3c', '#2ecc71']}\">\n * </nr-color-picker>\n * \n * <!-- With custom configuration -->\n * <nr-color-picker\n * color=\"#3498db\"\n * trigger=\"click\"\n * placement=\"top\"\n * size=\"large\"\n * show-input=\"true\"\n * show-copy-button=\"true\">\n * </nr-color-picker>\n * \n * <!-- Disabled -->\n * <nr-color-picker color=\"#3498db\" disabled></nr-color-picker>\n * ```\n * \n * @fires hy-color-change - Color value changed\n * @fires nr-colorpicker-open - Dropdown opened\n * @fires nr-colorpicker-close - Dropdown closed\n * @fires color-changed - Legacy event for backwards compatibility\n * \n * @slot - Default slot for custom content\n * \n * @cssproperty --colorpicker-trigger-size - Size of the color trigger box\n * @cssproperty --colorpicker-dropdown-width - Width of the dropdown panel\n * @cssproperty --colorpicker-dropdown-background - Background color of dropdown\n * @cssproperty --colorpicker-dropdown-shadow - Shadow of dropdown panel\n * @cssproperty --colorpicker-dropdown-border-radius - Border radius of dropdown\n */\n@customElement('nr-color-picker')\nexport class ColorPicker extends NuralyUIBaseMixin(LitElement) implements ColorPickerHost {\n static override styles = styles;\n\n override requiredComponents = ['nr-input', 'nr-icon'];\n\n /** Current color value */\n @property({ type: String }) \n color = '#3498db';\n\n /** Controls dropdown visibility */\n @property({ type: Boolean, reflect: true }) \n show = false;\n\n /** Array of preset colors to display */\n @property({ type: Array, attribute: 'default-color-sets' }) \n defaultColorSets: string[] = [];\n\n /** Disables the color picker */\n @property({ type: Boolean, reflect: true }) \n disabled = false;\n\n /** Color picker size (small, default, large) */\n @property({ type: String, reflect: true }) \n size: ColorPickerSize = ColorPickerSize.Default;\n\n /** Trigger mode for opening dropdown */\n @property({ type: String, reflect: true }) \n trigger: ColorPickerTrigger = ColorPickerTrigger.Click;\n\n /** Dropdown placement */\n @property({ type: String, reflect: true }) \n placement: ColorPickerPlacement = ColorPickerPlacement.Auto;\n\n /** Animation style for dropdown */\n @property({ type: String, reflect: true }) \n animation: ColorPickerAnimation = ColorPickerAnimation.Fade;\n\n /** Close dropdown when a color is selected */\n @property({ type: Boolean, attribute: 'close-on-select' }) \n closeOnSelect = false;\n\n /** Close dropdown on outside click */\n @property({ type: Boolean, attribute: 'close-on-outside-click' }) \n closeOnOutsideClick = true;\n\n /** Close dropdown on escape key */\n @property({ type: Boolean, attribute: 'close-on-escape' }) \n closeOnEscape = true;\n\n /** Show color input field */\n @property({ type: Boolean, attribute: 'show-input' }) \n showInput = true;\n\n /** Show copy button on input */\n @property({ type: Boolean, attribute: 'show-copy-button' }) \n showCopyButton = true;\n\n /** Color format (hex, rgb, rgba, hsl, hsla) */\n @property({ type: String, reflect: true }) \n format: ColorFormat = ColorFormat.Hex;\n\n /** Placeholder text for color input */\n @property({ type: String, attribute: 'input-placeholder' }) \n inputPlaceholder = 'Enter color';\n\n /** Label text */\n @property({ type: String }) \n label = '';\n\n /** Helper text */\n @property({ type: String, attribute: 'helper-text' }) \n helperText = '';\n\n /** Validation state for color value */\n @state() \n private isValidColor = true;\n\n /** Manages dropdown visibility and positioning */\n private dropdownController = new ColorPickerDropdownController(this);\n\n /** Handles all event management */\n private eventController = new ColorPickerEventController(this);\n\n constructor() {\n super();\n // Dynamically import vanilla-colorful for color picker UI\n if (typeof window !== 'undefined') {\n import('vanilla-colorful');\n }\n }\n\n /**\n * Component connected to DOM - initialize base functionality\n */\n override connectedCallback(): void {\n super.connectedCallback();\n }\n\n /**\n * Component disconnected from DOM - cleanup event listeners\n */\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n }\n\n /**\n * Called after component updates\n */\n override updated(changedProperties: PropertyValues): void {\n super.updated(changedProperties);\n \n if (changedProperties.has('color')) {\n this.validateColor();\n }\n }\n\n // === Public API Methods ===\n\n /**\n * Opens the color picker dropdown\n */\n open(): void {\n this.dropdownController.open();\n }\n\n /**\n * Closes the color picker dropdown\n */\n close(): void {\n this.dropdownController.close();\n }\n\n /**\n * Toggles the color picker dropdown\n */\n toggle(): void {\n this.dropdownController.toggle();\n }\n\n /**\n * Validates the current color value\n */\n validateColor(): boolean {\n this.isValidColor = this.eventController.isValidColor(this.color);\n return this.isValidColor;\n }\n\n /**\n * Sets up global event listeners (called by dropdown controller)\n */\n setupEventListeners(): void {\n if (this.closeOnOutsideClick || this.closeOnEscape) {\n this.eventController.setupEventListeners();\n }\n }\n\n /**\n * Removes global event listeners (called by dropdown controller)\n */\n removeEventListeners(): void {\n this.eventController.removeEventListeners();\n }\n\n /**\n * Handles trigger click to toggle dropdown\n */\n private handleTriggerClick = (event: Event): void => {\n this.eventController.handleTriggerClick(event);\n };\n\n /**\n * Handles color selection from hex-color-picker or default colors\n */\n private handleColorChanged = (event: CustomEvent): void => {\n const newColor = event.detail.value;\n this.eventController.handleColorChange(newColor);\n \n if (this.closeOnSelect) {\n this.dropdownController.close();\n }\n };\n\n /**\n * Handles input change from text input\n */\n private handleInputChange = (event: CustomEvent): void => {\n this.eventController.handleInputChange(event);\n };\n\n /**\n * Main render method\n */\n override render() {\n const containerClasses = {\n 'color-picker-container': true,\n 'color-picker-container--disabled': this.disabled,\n 'color-picker-container--open': this.show,\n [`color-picker-container--${this.size}`]: true,\n };\n\n return html`\n <div class=\"${classMap(containerClasses)}\" data-theme=\"${this.currentTheme}\">\n ${this.renderLabel()}\n \n <nr-colorholder-box\n class=\"color-holder\"\n color=\"${this.color}\"\n .size=${this.size}\n ?disabled=\"${this.disabled}\"\n @click=${this.disabled ? nothing : this.handleTriggerClick}\n role=\"button\"\n aria-label=\"Select color\"\n aria-expanded=\"${this.show}\"\n aria-haspopup=\"dialog\"\n tabindex=\"${this.disabled ? -1 : 0}\"\n ></nr-colorholder-box>\n \n ${this.renderDropdown()}\n ${this.renderHelperText()}\n </div>\n `;\n }\n\n /**\n * Renders the label if provided\n */\n private renderLabel() {\n if (!this.label) return nothing;\n \n return html`\n <label class=\"color-picker-label\">\n ${this.label}\n </label>\n `;\n }\n\n /**\n * Renders the dropdown panel with color picker\n */\n private renderDropdown() {\n if (!this.show) return nothing;\n\n return html`\n <div \n class=\"dropdown-container\"\n role=\"dialog\"\n aria-label=\"Color picker\"\n >\n ${this.renderDefaultColorSets()}\n ${this.renderColorPicker()}\n ${this.renderColorInput()}\n </div>\n `;\n }\n\n /**\n * Renders default color sets if provided\n */\n private renderDefaultColorSets() {\n if (!this.defaultColorSets || this.defaultColorSets.length === 0) {\n return nothing;\n }\n\n return html`\n <nr-default-color-sets \n .defaultColorSets=${this.defaultColorSets} \n @color-click=\"${this.handleColorChanged}\"\n aria-label=\"Preset colors\">\n </nr-default-color-sets>\n `;\n }\n\n /**\n * Renders the hex color picker\n */\n private renderColorPicker() {\n return html`\n <hex-color-picker\n color=\"${this.color}\"\n @color-changed=\"${this.handleColorChanged}\"\n aria-label=\"Color gradient picker\">\n </hex-color-picker>\n `;\n }\n\n /**\n * Renders the color input field\n */\n private renderColorInput() {\n if (!this.showInput) return nothing;\n\n return html`\n <nr-input \n type=\"text\" \n .value=\"${this.color}\" \n placeholder=\"${this.inputPlaceholder}\"\n @nr-input=\"${this.handleInputChange}\" \n ?withCopy=${this.showCopyButton} \n .state=\"${!this.isValidColor ? INPUT_STATE.Error : INPUT_STATE.Default}\"\n aria-label=\"Color value input\"\n aria-invalid=\"${!this.isValidColor}\">\n </nr-input>\n `;\n }\n\n /**\n * Renders helper text if provided\n */\n private renderHelperText() {\n if (!this.helperText) return nothing;\n \n return html`\n <div class=\"color-picker-helper-text\">\n ${this.helperText}\n </div>\n `;\n }\n}\n"]}
|
package/color-picker.style.d.ts
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* Color Picker component styles for the Hybrid UI Library
|
|
3
3
|
* Using shared CSS variables from /src/shared/themes/
|
|
4
4
|
*
|
|
5
|
-
* This file contains all the styling for the
|
|
5
|
+
* This file contains all the styling for the nr-colorpicker component with
|
|
6
6
|
* clean CSS variable usage without local fallbacks and proper theme switching support.
|
|
7
7
|
*/
|
|
8
8
|
declare const _default: import("lit").CSSResult;
|
package/color-picker.style.js
CHANGED
|
@@ -3,7 +3,7 @@ import { css } from 'lit';
|
|
|
3
3
|
* Color Picker component styles for the Hybrid UI Library
|
|
4
4
|
* Using shared CSS variables from /src/shared/themes/
|
|
5
5
|
*
|
|
6
|
-
* This file contains all the styling for the
|
|
6
|
+
* This file contains all the styling for the nr-colorpicker component with
|
|
7
7
|
* clean CSS variable usage without local fallbacks and proper theme switching support.
|
|
8
8
|
*/
|
|
9
9
|
export default css `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color-picker.style.js","sourceRoot":"","sources":["../../../src/components/colorpicker/color-picker.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;GAMG;AACH,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4EjB,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Color Picker component styles for the Hybrid UI Library\n * Using shared CSS variables from /src/shared/themes/\n * \n * This file contains all the styling for the
|
|
1
|
+
{"version":3,"file":"color-picker.style.js","sourceRoot":"","sources":["../../../src/components/colorpicker/color-picker.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;GAMG;AACH,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4EjB,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Color Picker component styles for the Hybrid UI Library\n * Using shared CSS variables from /src/shared/themes/\n * \n * This file contains all the styling for the nr-colorpicker component with\n * clean CSS variable usage without local fallbacks and proper theme switching support.\n */\nexport default css`\n :host {\n display: inline-block;\n vertical-align: middle;\n \n /* Force CSS custom property inheritance to ensure theme switching works properly */\n color: var(--nuraly-color-text);\n background-color: var(--nuraly-color-background);\n \n /* Ensure clean state transitions when theme changes */\n * {\n transition: all var(--nuraly-transition-fast, 0.15s) ease;\n }\n }\n\n /* Force re-evaluation of theme-dependent properties on theme change */\n :host([data-theme]) {\n color: inherit;\n background-color: inherit;\n }\n\n .color-picker-container {\n display: inline-flex;\n flex-direction: column;\n }\n \n hex-color-picker {\n width: 100%;\n }\n \n .dropdown-container {\n display: none;\n }\n \n hex-color-picker::part(saturation) {\n border-radius: 0px;\n }\n \n hex-color-picker::part(hue) {\n border-radius: 0px;\n }\n \n hex-color-picker::part(saturation-pointer),\n hex-color-picker::part(hue-pointer) {\n cursor: pointer;\n }\n \n .color-holder {\n cursor: pointer;\n }\n \n :host([disabled]) .color-holder {\n opacity: var(--nuraly-opacity-disabled, 0.5);\n cursor: not-allowed;\n }\n\n :host([show]) .dropdown-container {\n display: block;\n position: fixed;\n width: 180px;\n z-index: var(--nuraly-z-index-dropdown, 1000);\n padding: var(--nuraly-spacing-2, 0.5rem);\n background-color: var(--nuraly-color-surface, #ffffff);\n border: 1px solid var(--nuraly-color-border, rgba(0, 0, 0, 0.1));\n border-radius: var(--nuraly-border-radius-medium, 4px);\n box-shadow: var(--nuraly-shadow-dropdown, 0 2px 8px rgba(0, 0, 0, 0.15));\n opacity: 0;\n visibility: hidden;\n transition: opacity var(--nuraly-transition-fast, 0.15s) ease-in-out,\n visibility var(--nuraly-transition-fast, 0.15s) ease-in-out;\n }\n\n :host([show]) .dropdown-container.positioned {\n opacity: 1;\n visibility: visible;\n }\n`;\n"]}
|
|
@@ -12,9 +12,9 @@ import './color-holder.component.js';
|
|
|
12
12
|
*
|
|
13
13
|
* @example
|
|
14
14
|
* ```html
|
|
15
|
-
* <
|
|
15
|
+
* <nr-default-color-sets
|
|
16
16
|
* .defaultColorSets="${['#3498db', '#e74c3c', '#2ecc71', '#f39c12']}">
|
|
17
|
-
* </
|
|
17
|
+
* </nr-default-color-sets>
|
|
18
18
|
* ```
|
|
19
19
|
*
|
|
20
20
|
* @fires color-click - Fired when a color swatch is clicked
|
|
@@ -21,9 +21,9 @@ import './color-holder.component.js';
|
|
|
21
21
|
*
|
|
22
22
|
* @example
|
|
23
23
|
* ```html
|
|
24
|
-
* <
|
|
24
|
+
* <nr-default-color-sets
|
|
25
25
|
* .defaultColorSets="${['#3498db', '#e74c3c', '#2ecc71', '#f39c12']}">
|
|
26
|
-
* </
|
|
26
|
+
* </nr-default-color-sets>
|
|
27
27
|
* ```
|
|
28
28
|
*
|
|
29
29
|
* @fires color-click - Fired when a color swatch is clicked
|
|
@@ -84,7 +84,7 @@ let DefaultColorSets = class DefaultColorSets extends LitElement {
|
|
|
84
84
|
style="--columns: ${this.columns}"
|
|
85
85
|
>
|
|
86
86
|
${map(this.defaultColorSets, (color) => html `
|
|
87
|
-
<
|
|
87
|
+
<nr-colorholder-box
|
|
88
88
|
color="${color}"
|
|
89
89
|
.size=${this.size}
|
|
90
90
|
class="color-set-container"
|
|
@@ -98,7 +98,7 @@ let DefaultColorSets = class DefaultColorSets extends LitElement {
|
|
|
98
98
|
this.handleColorClick(color, e);
|
|
99
99
|
}
|
|
100
100
|
}}
|
|
101
|
-
></
|
|
101
|
+
></nr-colorholder-box>
|
|
102
102
|
`)}
|
|
103
103
|
</div>
|
|
104
104
|
`;
|
|
@@ -115,7 +115,7 @@ __decorate([
|
|
|
115
115
|
property({ type: Number, attribute: 'columns' })
|
|
116
116
|
], DefaultColorSets.prototype, "columns", void 0);
|
|
117
117
|
DefaultColorSets = __decorate([
|
|
118
|
-
customElement('
|
|
118
|
+
customElement('nr-default-color-sets')
|
|
119
119
|
], DefaultColorSets);
|
|
120
120
|
export { DefaultColorSets };
|
|
121
121
|
//# sourceMappingURL=default-color-sets.component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"default-color-sets.component.js","sourceRoot":"","sources":["../../../src/components/colorpicker/default-color-sets.component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;AAEH,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,6BAA6B,CAAC;AAGrC;;;;;;;;;;;;;;;;GAgBG;AAEH,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,UAAU;IAAhD;;QAGE,mDAAmD;QAEnD,qBAAgB,GAAa,EAAE,CAAC;QAEhC,iCAAiC;QAEjC,SAAI,GAAkC,SAAS,CAAC;QAEhD,oCAAoC;QAEpC,YAAO,GAAG,CAAC,CAAC;IA0Ed,CAAC;IAxEC;;;;OAIG;IACK,gBAAgB,CAAC,KAAa,EAAE,KAAY;QAClD,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE;YAC7B,OAAO,CAAC,IAAI,CAAC,kBAAkB,KAAK,EAAE,CAAC,CAAC;YACxC,OAAO;SACR;QAED,MAAM,MAAM,GAA0B;YACpC,KAAK,EAAE,KAAK;SACb,CAAC;QAEF,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;YAC7B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM;SACP,CAAC,CACH,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,YAAY,CAAC,KAAa;QAChC,IAAI;YACF,OAAO,GAAG,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;SACrC;QAAC,WAAM;YACN,OAAO,KAAK,CAAC;SACd;IACH,CAAC;IAEQ,MAAM;QACb,IAAI,CAAC,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,gBAAgB,CAAC,MAAM,KAAK,CAAC,EAAE;YAChE,OAAO,OAAO,CAAC;SAChB;QAED,OAAO,IAAI,CAAA;;;;;4BAKa,IAAI,CAAC,OAAO;;UAE9B,GAAG,CACH,IAAI,CAAC,gBAAgB,EACrB,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;uBAEF,KAAK;sBACN,IAAI,CAAC,IAAI;;;;kCAIG,KAAK;uBAChB,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,CAAC,CAAC;yBAC3C,CAAC,CAAgB,EAAE,EAAE;YAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;gBACtC,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;aACjC;QACH,CAAC;;WAEJ,CACF;;KAEJ,CAAC;IACJ,CAAC;CACF,CAAA;AAtFiB,uBAAM,GAAG,MAAO,CAAA;AAIhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;0DAC3B;AAIhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACM;AAIhD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;iDACrC;AAbD,gBAAgB;IAD5B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,gBAAgB,CAuF5B;SAvFY,gBAAgB","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { map } from 'lit/directives/map.js';\nimport { styles } from './default-color-sets.style.js';\nimport './color-holder.component.js';\nimport type { ColorClickEventDetail } from './interfaces/index.js';\n\n/**\n * Default color sets component for displaying preset color swatches.\n * \n * Renders a grid of clickable color swatches that can be used as quick color selections.\n * \n * @example\n * ```html\n * <
|
|
1
|
+
{"version":3,"file":"default-color-sets.component.js","sourceRoot":"","sources":["../../../src/components/colorpicker/default-color-sets.component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;AAEH,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,6BAA6B,CAAC;AAGrC;;;;;;;;;;;;;;;;GAgBG;AAEH,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,UAAU;IAAhD;;QAGE,mDAAmD;QAEnD,qBAAgB,GAAa,EAAE,CAAC;QAEhC,iCAAiC;QAEjC,SAAI,GAAkC,SAAS,CAAC;QAEhD,oCAAoC;QAEpC,YAAO,GAAG,CAAC,CAAC;IA0Ed,CAAC;IAxEC;;;;OAIG;IACK,gBAAgB,CAAC,KAAa,EAAE,KAAY;QAClD,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE;YAC7B,OAAO,CAAC,IAAI,CAAC,kBAAkB,KAAK,EAAE,CAAC,CAAC;YACxC,OAAO;SACR;QAED,MAAM,MAAM,GAA0B;YACpC,KAAK,EAAE,KAAK;SACb,CAAC;QAEF,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;YAC7B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM;SACP,CAAC,CACH,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,YAAY,CAAC,KAAa;QAChC,IAAI;YACF,OAAO,GAAG,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;SACrC;QAAC,WAAM;YACN,OAAO,KAAK,CAAC;SACd;IACH,CAAC;IAEQ,MAAM;QACb,IAAI,CAAC,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,gBAAgB,CAAC,MAAM,KAAK,CAAC,EAAE;YAChE,OAAO,OAAO,CAAC;SAChB;QAED,OAAO,IAAI,CAAA;;;;;4BAKa,IAAI,CAAC,OAAO;;UAE9B,GAAG,CACH,IAAI,CAAC,gBAAgB,EACrB,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;uBAEF,KAAK;sBACN,IAAI,CAAC,IAAI;;;;kCAIG,KAAK;uBAChB,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,CAAC,CAAC;yBAC3C,CAAC,CAAgB,EAAE,EAAE;YAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;gBACtC,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;aACjC;QACH,CAAC;;WAEJ,CACF;;KAEJ,CAAC;IACJ,CAAC;CACF,CAAA;AAtFiB,uBAAM,GAAG,MAAO,CAAA;AAIhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;0DAC3B;AAIhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACM;AAIhD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;iDACrC;AAbD,gBAAgB;IAD5B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,gBAAgB,CAuF5B;SAvFY,gBAAgB","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { map } from 'lit/directives/map.js';\nimport { styles } from './default-color-sets.style.js';\nimport './color-holder.component.js';\nimport type { ColorClickEventDetail } from './interfaces/index.js';\n\n/**\n * Default color sets component for displaying preset color swatches.\n * \n * Renders a grid of clickable color swatches that can be used as quick color selections.\n * \n * @example\n * ```html\n * <nr-default-color-sets \n * .defaultColorSets=\"${['#3498db', '#e74c3c', '#2ecc71', '#f39c12']}\">\n * </nr-default-color-sets>\n * ```\n * \n * @fires color-click - Fired when a color swatch is clicked\n * \n * @cssproperty --default-color-sets-gap - Gap between color swatches\n * @cssproperty --default-color-sets-padding - Padding around the color grid\n */\n@customElement('nr-default-color-sets')\nexport class DefaultColorSets extends LitElement {\n static override styles = styles;\n\n /** Array of color values to display as swatches */\n @property({ type: Array, attribute: 'default-color-sets' })\n defaultColorSets: string[] = [];\n\n /** Size of the color swatches */\n @property({ type: String, reflect: true })\n size: 'small' | 'default' | 'large' = 'default';\n\n /** Number of columns in the grid */\n @property({ type: Number, attribute: 'columns' })\n columns = 8;\n\n /**\n * Handles color swatch click\n * @param color - The clicked color value\n * @param event - The click event\n */\n private handleColorClick(color: string, event: Event): void {\n event.stopPropagation();\n \n if (!this.isValidColor(color)) {\n console.warn(`Invalid color: ${color}`);\n return;\n }\n\n const detail: ColorClickEventDetail = {\n value: color,\n };\n\n this.dispatchEvent(\n new CustomEvent('color-click', {\n bubbles: true,\n composed: true,\n detail,\n })\n );\n }\n\n /**\n * Validates if a color string is valid CSS color\n */\n private isValidColor(color: string): boolean {\n try {\n return CSS.supports('color', color);\n } catch {\n return false;\n }\n }\n\n override render() {\n if (!this.defaultColorSets || this.defaultColorSets.length === 0) {\n return nothing;\n }\n\n return html`\n <div \n class=\"default-color-sets-container\"\n role=\"list\"\n aria-label=\"Preset color swatches\"\n style=\"--columns: ${this.columns}\"\n >\n ${map(\n this.defaultColorSets,\n (color) => html`\n <nr-colorholder-box\n color=\"${color}\"\n .size=${this.size}\n class=\"color-set-container\"\n role=\"listitem\"\n tabindex=\"0\"\n aria-label=\"Color ${color}\"\n @click=${(e: Event) => this.handleColorClick(color, e)}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.handleColorClick(color, e);\n }\n }}\n ></nr-colorholder-box>\n `\n )}\n </div>\n `;\n }\n}\n"]}
|
package/package.json
CHANGED
package/react.js
CHANGED
|
@@ -2,7 +2,7 @@ import { createComponent } from '@lit-labs/react';
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { ColorPicker } from './color-picker.component.js';
|
|
4
4
|
export const HyColorPicker = createComponent({
|
|
5
|
-
tagName: '
|
|
5
|
+
tagName: 'nr-color-picker',
|
|
6
6
|
elementClass: ColorPicker,
|
|
7
7
|
react: React,
|
|
8
8
|
events: {
|
package/react.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/colorpicker/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE1D,MAAM,CAAC,MAAM,aAAa,GAAG,eAAe,CAAC;IAC3C,OAAO,EAAE,iBAAiB;IAC1B,YAAY,EAAE,WAAW;IACzB,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,WAAW,EAAE,cAAc;QAC3B,MAAM,EAAE,QAAQ;KACjB;CACF,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { ColorPicker } from './color-picker.component.js';\n\nexport const HyColorPicker = createComponent({\n tagName: '
|
|
1
|
+
{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/colorpicker/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE1D,MAAM,CAAC,MAAM,aAAa,GAAG,eAAe,CAAC;IAC3C,OAAO,EAAE,iBAAiB;IAC1B,YAAY,EAAE,WAAW;IACzB,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,WAAW,EAAE,cAAc;QAC3B,MAAM,EAAE,QAAQ;KACjB;CACF,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { ColorPicker } from './color-picker.component.js';\n\nexport const HyColorPicker = createComponent({\n tagName: 'nr-color-picker',\n elementClass: ColorPicker,\n react: React,\n events: {\n colorChange: 'color-change',\n change: 'change',\n },\n});\n"]}
|