@prolibu-suite/cobalt-core 0.1.2 → 0.2.0

package/dist/collection/components/co-color-picker/co-color-picker.js

@@ -0,0 +1,333 @@
+import { h } from "@stencil/core";
+import { RequiredMark } from "../../utils/requiredMark";
+import { DEFAULT_PRESETS } from "./presets";
+/**
+ * Color picker with preset swatches. Shows a trigger with the current color
+ * swatch + hex value, and opens a popover panel with a grid of preset colors.
+ *
+ * The hex value is read-only (no manual editing) — a copy button lets the user
+ * copy the value to clipboard.
+ *
+ * @event coChange - Emits the selected hex string (e.g. "#0066FF").
+ */
+export class CoColorPicker {
+    constructor() {
+        /** Current color value as hex string (e.g. "#0066FF"). */
+        this.value = '';
+        /** Placeholder text when no color is selected. */
+        this.placeholder = 'Select color';
+        /** Disable the field. */
+        this.disabled = false;
+        /** Show required indicator. */
+        this.required = false;
+        /** Validation status. */
+        this.status = 'default';
+        /** Label layout: vertical (label above) or horizontal (label beside) */
+        this.layout = 'vertical';
+        /**
+         * Preset colors as a JSON stringified array of `{ name, value }` objects
+         * or plain hex strings. When set programmatically, accepts an actual array.
+         */
+        this.presets = '';
+        this.isOpen = false;
+        this.copied = false;
+        this.handlePopoverOpen = () => {
+            this.isOpen = true;
+        };
+        this.handlePopoverClose = () => {
+            this.isOpen = false;
+        };
+    }
+    get parsedPresets() {
+        if (Array.isArray(this.presets)) {
+            return this.presets.map(p => typeof p === 'string' ? { name: p, value: p } : p);
+        }
+        if (typeof this.presets === 'string' && this.presets.trim()) {
+            try {
+                const parsed = JSON.parse(this.presets);
+                if (Array.isArray(parsed)) {
+                    return parsed.map((p) => typeof p === 'string' ? { name: p, value: p } : p);
+                }
+            }
+            catch ( /* ignore */_a) { /* ignore */ }
+        }
+        return DEFAULT_PRESETS;
+    }
+    handleSwatchClick(hex) {
+        this.value = hex;
+        this.coChange.emit(hex);
+        this.isOpen = false;
+    }
+    get statusIcon() {
+        const map = {
+            error: 'warning-circle',
+            success: 'check-circle',
+            warning: 'warning',
+        };
+        return map[this.status] || null;
+    }
+    async handleCopy() {
+        if (!this.value)
+            return;
+        try {
+            await navigator.clipboard.writeText(this.value);
+            this.copied = true;
+            setTimeout(() => { this.copied = false; }, 1500);
+        }
+        catch ( /* ignore */_a) { /* ignore */ }
+    }
+    render() {
+        const presets = this.parsedPresets;
+        const hasValue = !!this.value;
+        const statusClass = this.status !== 'default' ? `co-color-picker--${this.status}` : '';
+        return (h("div", { key: 'e3c7fbb9337289e5cece7837c07e517f2ab09075', class: `co-color-picker ${statusClass} ${this.isOpen ? 'co-color-picker--open' : ''} ${this.disabled ? 'co-color-picker--disabled' : ''}` }, this.label && (h("label", { key: 'e7bf0c2043f7e6cad9b48712b28ca15b7a87cb0a', class: "co-color-picker__label" }, this.label, h(RequiredMark, { key: 'e71de1705a30b8ad9b93d7412527a5b6430118bc', required: this.required }))), h("co-popover", { key: '66494d41499b979b35eaaaab04f05ff7b7bc80d0', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, h("div", { key: 'f7997ccff490d2dac5fa106f088e073b93e95a52', slot: "trigger", class: "co-color-picker__trigger" }, h("span", { key: '5e58789e513c913207d39574c47e044177701e49', class: "co-color-picker__swatch", style: { background: hasValue ? this.value : 'transparent' } }), h("span", { key: 'e7cab4ba473d947c379f09f6657df1d3aeb37c26', class: `co-color-picker__value ${!hasValue ? 'co-color-picker__value--empty' : ''}` }, hasValue ? this.value : this.placeholder)), this.isOpen && (h("div", { key: '6ac90802649cfc39a12b88e5abb82fb29261d49a', class: "co-color-picker__panel" }, h("div", { key: '6b985e293c37fb4b84a3c2593f6c3ee3b79f91da', class: "co-color-picker__grid" }, presets.map((preset) => {
+            var _a;
+            return (h("button", { type: "button", key: preset.value, class: `co-color-picker__grid-item ${preset.value.toUpperCase() === ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toUpperCase()) ? 'co-color-picker__grid-item--selected' : ''}`, style: { background: preset.value }, title: preset.name, onClick: () => this.handleSwatchClick(preset.value) }));
+        })), hasValue && (h("div", { key: '28ab2e8f9a21cc11f5c8569a9fb3d560b26ff822', class: "co-color-picker__hex-row" }, h("span", { key: 'e0f84972b167e6374de8b1445047de810971d538', class: "co-color-picker__hex-prefix" }, "#"), h("span", { key: 'ff313153df1ae22cf0e32b111c7a639b062aefd5', class: "co-color-picker__hex-value" }, this.value.replace(/^#/, '')), h("button", { key: 'daf97e5d636397ec9c5f5e34ed7c007e11cb3788', type: "button", class: `co-color-picker__copy-btn ${this.copied ? 'co-color-picker__copy-btn--copied' : ''}`, title: "Copy", onClick: () => this.handleCopy() }, h("co-icon", { key: '41a3c2fd4ffdecc696272ad1e24ef66de9df5b00', name: this.copied ? 'check' : 'copy', size: 16 }))))))), this.helperText && (h("div", { key: 'e21db961ebe2493cafa3c0b7399fee541902a13a', class: "co-color-picker__helper" }, this.statusIcon && (h("co-icon", { key: 'bc0e6a11f2575313fbe5bdf65aa65b10117d2dfa', name: this.statusIcon, size: 14, weight: "fill", class: "co-color-picker__helper-icon" })), h("span", { key: '35133f960eec263ad5a70839e026f20f81a11002', class: "co-color-picker__helper-text" }, this.helperText)))));
+    }
+    static get is() { return "co-color-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-color-picker.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-color-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current color value as hex string (e.g. \"#0066FF\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Field label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text when no color is selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Select color'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable the field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show required indicator."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'error' | 'success' | 'warning'",
+                    "resolved": "\"default\" | \"error\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Validation status."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status",
+                "defaultValue": "'default'"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper/error text below the field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-text"
+            },
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label layout: vertical (label above) or horizontal (label beside)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "layout",
+                "defaultValue": "'vertical'"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Field name for form submission."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "presets": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | ColorPreset[] | string[]",
+                    "resolved": "ColorPreset[] | string | string[]",
+                    "references": {
+                        "ColorPreset": {
+                            "location": "import",
+                            "path": "./presets",
+                            "id": "src/components/co-color-picker/presets.ts::ColorPreset",
+                            "referenceLocation": "ColorPreset"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Preset colors as a JSON stringified array of `{ name, value }` objects\nor plain hex strings. When set programmatically, accepts an actual array."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "presets",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "copied": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coChange",
+                "name": "coChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits the selected hex color on change."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/co-color-picker/presets.js

@@ -0,0 +1,19 @@
+/**
+ * Default color presets derived from Cobalt design tokens (base.json).
+ * Uses primary colors + secondary-100 (full saturation, best contrast).
+ * Names are English by default — consumers can override with translated presets.
+ */
+export const DEFAULT_PRESETS = [
+    { name: 'Green', value: '#02A270' },
+    { name: 'Yellow', value: '#FDBF00' },
+    { name: 'Blue', value: '#2563EB' },
+    { name: 'Pink', value: '#F32A73' },
+    { name: 'Red', value: '#EB1E1E' },
+    { name: 'Orange', value: '#F0821E' },
+    { name: 'Teal', value: '#00AFAF' },
+    { name: 'Light blue', value: '#00BEE6' },
+    { name: 'Electric blue', value: '#000AFF' },
+    { name: 'Violet', value: '#5F4BD7' },
+    { name: 'Burgundy', value: '#811137' },
+    { name: 'Olive', value: '#AAB43C' },
+];