@dropi/ui 0.1.19 → 0.1.21

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

@@ -0,0 +1,393 @@
+import { h } from "@stencil/core";
+export class DropiColorPicker {
+    el;
+    currentColor = '#ffffff';
+    position = 'right';
+    colorChange;
+    color = '';
+    hue = 0;
+    saturation = 0;
+    currentVal = 0;
+    opacity = 100;
+    showEdit = false;
+    isDragging = false;
+    isHueDragging = false;
+    isOpacityDragging = false;
+    colorCanvas;
+    hueCanvas;
+    opacityCanvas;
+    onValueChange(newValue) {
+        if (!this.showEdit) {
+            this.color = newValue;
+            this.syncFromHex();
+        }
+    }
+    componentWillLoad() {
+        this.color = this.currentColor;
+        this.syncFromHex();
+    }
+    componentDidLoad() {
+        document.addEventListener('mousemove', this.onMouseMove.bind(this));
+        document.addEventListener('mouseup', this.onMouseUp.bind(this));
+        document.addEventListener('click', this.handleClickOutside.bind(this));
+        // Defer canvas drawing slightly to ensure elements are rendered
+        setTimeout(() => {
+            if (this.hueCanvas)
+                this.drawHueCanvas();
+            if (this.colorCanvas)
+                this.drawColorCanvas();
+            if (this.opacityCanvas)
+                this.drawOpacityCanvas();
+        }, 50);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('mousemove', this.onMouseMove.bind(this));
+        document.removeEventListener('mouseup', this.onMouseUp.bind(this));
+        document.removeEventListener('click', this.handleClickOutside.bind(this));
+    }
+    onMouseMove(event) {
+        if (this.isDragging) {
+            this.updateColorFromPosition(event);
+            return;
+        }
+        if (this.isHueDragging) {
+            this.updateHueFromPosition(event);
+            return;
+        }
+        if (this.isOpacityDragging) {
+            this.updateOpacityFromPosition(event);
+            return;
+        }
+    }
+    onMouseUp() {
+        this.isDragging = false;
+        this.isHueDragging = false;
+        this.isOpacityDragging = false;
+    }
+    handleClickOutside(event) {
+        // Determine if the click target is outside the host element
+        const clickedInside = event.composedPath().includes(this.el);
+        if (!clickedInside && this.showEdit) {
+            this.showEdit = false;
+            this.currentColor = this.color;
+            this.colorChange.emit(this.color);
+        }
+    }
+    drawColorCanvas() {
+        if (!this.colorCanvas)
+            return;
+        const ctx = this.colorCanvas.getContext('2d');
+        const width = this.colorCanvas.width;
+        const height = this.colorCanvas.height;
+        const saturationGradient = ctx.createLinearGradient(0, 0, width, 0);
+        saturationGradient.addColorStop(0, '#FFFFFF');
+        saturationGradient.addColorStop(1, `hsl(${this.hue}, 100%, 50%)`);
+        const valueGradient = ctx.createLinearGradient(0, 0, 0, height);
+        valueGradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
+        valueGradient.addColorStop(1, '#000000');
+        ctx.fillStyle = saturationGradient;
+        ctx.fillRect(0, 0, width, height);
+        ctx.fillStyle = valueGradient;
+        ctx.fillRect(0, 0, width, height);
+    }
+    drawHueCanvas() {
+        if (!this.hueCanvas)
+            return;
+        const ctx = this.hueCanvas.getContext('2d');
+        const width = this.hueCanvas.width;
+        const height = this.hueCanvas.height;
+        const hueGradient = ctx.createLinearGradient(0, 0, width, 0);
+        for (let i = 0; i <= 360; i += 60) {
+            hueGradient.addColorStop(i / 360, `hsl(${i}, 100%, 50%)`);
+        }
+        ctx.fillStyle = hueGradient;
+        ctx.fillRect(0, 0, width, height);
+    }
+    drawOpacityCanvas() {
+        if (!this.opacityCanvas)
+            return;
+        const ctx = this.opacityCanvas.getContext('2d');
+        const width = this.opacityCanvas.width;
+        const height = this.opacityCanvas.height;
+        ctx.clearRect(0, 0, width, height);
+        ctx.fillStyle = '#FFFFFF';
+        ctx.fillRect(0, 0, width, height);
+        const rgb = this.hsvToRgb(this.hue, this.saturation, this.currentVal);
+        const opacityGradient = ctx.createLinearGradient(0, 0, width, 0);
+        opacityGradient.addColorStop(0, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0)`);
+        opacityGradient.addColorStop(1, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 1)`);
+        ctx.fillStyle = opacityGradient;
+        ctx.fillRect(0, 0, width, height);
+    }
+    updateColor() {
+        const rgb = this.hsvToRgb(this.hue, this.saturation, this.currentVal);
+        const hex = this.rgbToHex(rgb.r, rgb.g, rgb.b, this.opacity);
+        this.color = hex;
+        this.drawColorCanvas();
+        this.drawOpacityCanvas();
+        this.currentColor = hex;
+        this.colorChange.emit(this.color);
+    }
+    hsvToRgb(h, s, v) {
+        s /= 100;
+        v /= 100;
+        const c = v * s;
+        const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+        const m = v - c;
+        let r = 0, g = 0, b = 0;
+        if (h >= 0 && h < 60) {
+            r = c;
+            g = x;
+            b = 0;
+        }
+        else if (h >= 60 && h < 120) {
+            r = x;
+            g = c;
+            b = 0;
+        }
+        else if (h >= 120 && h < 180) {
+            r = 0;
+            g = c;
+            b = x;
+        }
+        else if (h >= 180 && h < 240) {
+            r = 0;
+            g = x;
+            b = c;
+        }
+        else if (h >= 240 && h < 300) {
+            r = x;
+            g = 0;
+            b = c;
+        }
+        else if (h >= 300 && h <= 360) {
+            r = c;
+            g = 0;
+            b = x;
+        }
+        return {
+            r: Math.round((r + m) * 255),
+            g: Math.round((g + m) * 255),
+            b: Math.round((b + m) * 255),
+        };
+    }
+    rgbToHex(red, green, black, opacity = 100) {
+        const toHex = (val) => {
+            const hex = Math.round(val).toString(16);
+            return hex.padStart(2, '0');
+        };
+        const rHex = toHex(red);
+        const gHex = toHex(green);
+        const bHex = toHex(black);
+        const alpha = Math.round((opacity / 100) * 255);
+        const aHex = toHex(alpha);
+        return `#${rHex}${gHex}${bHex}${aHex}`;
+    }
+    syncFromHex() {
+        if (/^#?[0-9A-F]{6}([0-9A-F]{2})?$/i.test(this.color)) {
+            if (!this.color.startsWith('#')) {
+                this.color = '#' + this.color;
+            }
+            const hex = this.color.substring(1);
+            const r = parseInt(hex.substring(0, 2), 16);
+            const g = parseInt(hex.substring(2, 4), 16);
+            const b = parseInt(hex.substring(4, 6), 16);
+            const a = hex.length === 8 ? parseInt(hex.substring(6, 8), 16) / 255 : 1;
+            const hsv = this.rgbToHsv(r, g, b, a);
+            this.hue = hsv.h;
+            this.saturation = hsv.s;
+            this.currentVal = hsv.v;
+            this.opacity = a * 100;
+            this.drawColorCanvas();
+            this.drawOpacityCanvas();
+        }
+    }
+    onHexInputChange(event) {
+        this.color = event.target.value;
+        this.syncFromHex();
+    }
+    rgbToHsv(r, g, b, a = 1) {
+        r /= 255;
+        g /= 255;
+        b /= 255;
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        const delta = max - min;
+        let h = 0;
+        if (delta !== 0) {
+            if (max === r)
+                h = 60 * (((g - b) / delta) % 6);
+            else if (max === g)
+                h = 60 * ((b - r) / delta + 2);
+            else if (max === b)
+                h = 60 * ((r - g) / delta + 4);
+        }
+        if (h < 0)
+            h += 360;
+        const s = max === 0 ? 0 : (delta / max) * 100;
+        const v = max * 100;
+        return {
+            h: Math.round(h),
+            s: Math.round(s),
+            v: Math.round(v),
+            a: parseFloat(a.toFixed(3)),
+        };
+    }
+    getCanvasPosition(canvas, event) {
+        const rect = canvas.getBoundingClientRect();
+        const scaleX = canvas.width / rect.width;
+        const scaleY = canvas.height / rect.height;
+        return {
+            x: (event.clientX - rect.left) * scaleX,
+            y: (event.clientY - rect.top) * scaleY,
+        };
+    }
+    onColorMouseDown(event) {
+        this.isDragging = true;
+        this.updateColorFromPosition(event);
+    }
+    onHueMouseDown(event) {
+        this.isHueDragging = true;
+        this.updateHueFromPosition(event);
+    }
+    onOpacityMouseDown(event) {
+        this.isOpacityDragging = true;
+        this.updateOpacityFromPosition(event);
+    }
+    updateColorFromPosition(event) {
+        if (!this.colorCanvas)
+            return;
+        const pos = this.getCanvasPosition(this.colorCanvas, event);
+        const x = Math.max(0, Math.min(pos.x, 256));
+        const y = Math.max(0, Math.min(pos.y, 150));
+        this.saturation = Math.round((x / 256) * 100);
+        this.currentVal = 100 - Math.round((y / 150) * 100);
+        this.updateColor();
+    }
+    updateHueFromPosition(event) {
+        if (!this.hueCanvas)
+            return;
+        const pos = this.getCanvasPosition(this.hueCanvas, event);
+        const x = Math.max(0, Math.min(pos.x, 256));
+        this.hue = Math.round((x / 256) * 360);
+        this.drawColorCanvas();
+        this.updateColor();
+    }
+    updateOpacityFromPosition(event) {
+        if (!this.opacityCanvas)
+            return;
+        const pos = this.getCanvasPosition(this.opacityCanvas, event);
+        const x = Math.max(0, Math.min(pos.x, 256));
+        this.opacity = Math.round((x / 256) * 100);
+        this.updateColor();
+    }
+    showEditor() {
+        this.showEdit = !this.showEdit;
+        this.color = this.currentColor;
+        if (this.showEdit) {
+            setTimeout(() => {
+                this.drawHueCanvas();
+                this.drawColorCanvas();
+                this.drawOpacityCanvas();
+                this.syncFromHex();
+            }, 100);
+        }
+    }
+    render() {
+        return (h("div", { key: '9b5f9753c014b33a75fdf35460b3f2b40f12f5c6', class: "general-container" }, h("div", { key: '2547ef57ac6fc35eb65012729d613ac819918c02', class: "main-input-container" }, h("div", { key: 'f8f45ef7fba7d889b72af34973f51cd39f7541ec', class: "overlay", onClick: () => this.showEditor() }), h("div", { key: '76f6a0b4f5abf04e02778166f7f568a106ccbda6', class: "line-color-preview" }, h("div", { key: '4a9d7b92303dc21c39dd2271d1fbf9719bb4e012', class: "color-preview", style: { background: this.currentColor } })), h("div", { key: '47d4986bd93f8ac590014b3ad4251547be86bf76', class: "color-info" }, h("input", { key: '0f0265276fb482a5053a328daf4888f577e9fed2', type: "text", class: "color-input", value: this.currentColor, maxLength: 9, readOnly: true }))), h("div", { key: 'b944ba1094125f85f78529804549d02a4af15a98', class: `color-picker-container position-${this.position} ${this.showEdit ? 'show' : ''}` }, h("div", { key: 'b1cfc5ae3e082533562685eee34246972d226ee8', class: "main-color-canvas-container" }, h("canvas", { key: '6d91d698213b04aed7a14d0ea77876ec81d54a9c', ref: (el) => this.colorCanvas = el, width: 256, height: 150, onMouseDown: (e) => this.onColorMouseDown(e) }), h("div", { key: 'a35cbf720261d42a476ff86a4d3230eb41c60158', class: "color-selector-pointer", style: {
+                left: `${(this.saturation / 100) * 256}px`,
+                top: `${((100 - this.currentVal) / 100) * 150}px`
+            } })), h("div", { key: 'a3a28711ce1b7d550ace8cdefce1170d1cfab6b7', class: "slider-container" }, h("div", { key: '1a7e080019254df35871874d4f682be49ccb1c2d', class: "slider-group" }, h("div", { key: 'ab472e420e2dde23eaf797e0962234f06b831350', class: "hue-slider-container" }, h("canvas", { key: '84fa8b097826ca461913ef5c1a363fed51fea46a', ref: (el) => this.hueCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onHueMouseDown(e) }), h("div", { key: '47e740225ac80d3daee6781e0a3d55840dbf6e3a', class: "slider-pointer", style: { left: `${(this.hue / 360) * 234}px` } }))), h("div", { key: '408dccb26d895cbf3c648e959a0a748340b9d7ad', class: "slider-group" }, h("div", { key: 'bd1c6eb89183c0a3f194601413e840cd3576955c', class: "opacity-slider-container" }, h("canvas", { key: '8bef0d97d8f88471929876ffb4fb3dfb8eee950a', ref: (el) => this.opacityCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onOpacityMouseDown(e) }), h("div", { key: '394b6a5aac4d2924e5dd3e2fe898fe1761c6358f', class: "slider-pointer", style: { left: `${(this.opacity / 100) * 234}px` } }))), h("div", { key: '7bd122ab15ed2534586d5e0d2cf4a33174bb0385', class: "color-info" }, h("div", { key: '4dc391044f0cd3a72ee14e5c0f7279c81140c5f3', class: "color-label" }, "HEX"), h("input", { key: 'f197c630e94ccebab9e9f75a615b3a2fd09ffc0f', type: "text", class: "color-input", value: this.color, onInput: (e) => this.onHexInputChange(e), maxLength: 9 }))))));
+    }
+    static get is() { return "dropi-color-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-color-picker.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-color-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "currentColor": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current-color",
+                "defaultValue": "'#ffffff'"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top' | 'bottom' | 'left' | 'right'",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position",
+                "defaultValue": "'right'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "color": {},
+            "hue": {},
+            "saturation": {},
+            "currentVal": {},
+            "opacity": {},
+            "showEdit": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "colorChange",
+                "name": "colorChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueChange"
+            }];
+    }
+}

package/dist/collection/components/dropi-country-flags/dropi-country-flags.css

@@ -0,0 +1,30 @@
+:host {
+  display: inline-flex;
+}
+
+.flag {
+  max-width: 40px;
+  max-height: 40px;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flag img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.circle {
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.rectangle {
+  border-radius: 4px;
+  overflow: hidden;
+  max-width: 32px !important;
+  max-height: 24px !important;
+}

package/dist/collection/components/dropi-country-flags/dropi-country-flags.js

@@ -0,0 +1,129 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-country-flags
+ * Displays a country flag image. Supports circle, rectangle, and flat styles.
+ *
+ * @example
+ * <dropi-country-flags country="CO" style="circle"></dropi-country-flags>
+ */
+export class DropiCountryFlags {
+    /** ISO 3166-1 alpha-2 country code (e.g. "CO", "US") */
+    country = '';
+    /** Visual style: circle uses circle-flags CDN, rectangle/flat uses flagsapi */
+    customStyle = 'flat';
+    /** Width in px */
+    width = '';
+    /** Height in px */
+    height = '';
+    get src() {
+        const code = (this.country || '').toUpperCase();
+        if (this.customStyle === 'circle') {
+            return `https://hatscripts.github.io/circle-flags/flags/${code.toLowerCase()}.svg`;
+        }
+        return `https://flagsapi.com/${code}/flat/64.png`;
+    }
+    render() {
+        const style = {};
+        if (this.width)
+            style['width'] = this.width.includes('px') ? this.width : `${this.width}px`;
+        if (this.height)
+            style['height'] = this.height.includes('px') ? this.height : `${this.height}px`;
+        return (h("figure", { key: '08e6efa91f51eb4c408ae868cef6a2c449e7ac2f', class: `flag ${this.customStyle}` }, h("img", { key: 'd0c24fdb98b1c2561f36dc70663e07ccea7802ca', src: this.src, style: style, alt: `flag-${this.country}` })));
+    }
+    static get is() { return "dropi-country-flags"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-country-flags.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-country-flags.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "country": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ISO 3166-1 alpha-2 country code (e.g. \"CO\", \"US\")"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "country",
+                "defaultValue": "''"
+            },
+            "customStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'circle' | 'rectangle' | 'flat'",
+                    "resolved": "\"circle\" | \"flat\" | \"rectangle\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual style: circle uses circle-flags CDN, rectangle/flat uses flagsapi"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-style",
+                "defaultValue": "'flat'"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width in px"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "''"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Height in px"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "''"
+            }
+        };
+    }
+}