@nuralyui/colorpicker 0.0.6 → 0.0.8
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.
|
@@ -4,7 +4,6 @@
|
|
|
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';
|
|
@@ -13,7 +13,6 @@ 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
15
|
import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
|
|
16
|
-
import '../input/index.js';
|
|
17
16
|
// Import child components
|
|
18
17
|
import './color-holder.component.js';
|
|
19
18
|
import './default-color-sets.component.js';
|
|
@@ -1 +1 @@
|
|
|
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';\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 * <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"]}
|
|
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"]}
|
|
@@ -40,6 +40,6 @@ export declare class DefaultColorSets extends LitElement {
|
|
|
40
40
|
* Validates if a color string is valid CSS color
|
|
41
41
|
*/
|
|
42
42
|
private isValidColor;
|
|
43
|
-
render(): import("lit").TemplateResult<1
|
|
43
|
+
render(): typeof nothing | import("lit").TemplateResult<1>;
|
|
44
44
|
}
|
|
45
45
|
//# sourceMappingURL=default-color-sets.component.d.ts.map
|