@dropi/ui 0.1.20 → 0.1.21

package/dist/cjs/dropi-color-picker.cjs.entry.js

@@ -1,68 +1,318 @@
 'use strict';
 
-var index = require('./index-DcOH2ZjX.js');
+var index = require('./index-077kM98l.js');
 
-const dropiColorPickerCss = () => `:host{display:block;position:relative}*,*::before,*::after{box-sizing:border-box}.cp-label{display:block;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);margin-bottom:4px}.cp-trigger{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:0 var(--Size-3, 12px);height:40px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);cursor:pointer;font-family:inherit;transition:border-color 0.2s;width:100%}.cp-trigger:hover:not(:disabled){border-color:var(--Info-Info-500, #50a5f1)}.cp-trigger--disabled{opacity:0.6;cursor:not-allowed}.cp-trigger__swatch{width:20px;height:20px;border-radius:var(--Border-1, 4px);border:1px solid rgba(0,0,0,0.1);flex-shrink:0}.cp-trigger__value{flex:1;text-align:left;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);font-family:monospace}.cp-popup{position:absolute;top:calc(100% + 4px);left:0;width:220px;background:var(--Neutral-White, #fff);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);box-shadow:0 4px 24px rgba(0,0,0,0.12);z-index:300;padding:var(--Size-3, 12px);display:flex;flex-direction:column;gap:var(--Size-3, 12px)}.cp-spectrum-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--Size-1, 4px)}.cp-native{width:100%;height:80px;border:none;border-radius:var(--Border-1, 4px);cursor:pointer;padding:0;background:none}.cp-native::-webkit-color-swatch-wrapper{padding:0}.cp-native::-webkit-color-swatch{border:none;border-radius:var(--Border-1, 4px)}.cp-spectrum-label{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-400, #858ea6)}.cp-hex-row{display:flex;align-items:center;gap:var(--Size-2, 8px)}.cp-hex-label{font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-500, #68738f);width:24px;flex-shrink:0}.cp-hex-input{flex:1;height:32px;padding:0 var(--Size-2, 8px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-1, 4px);font-size:var(--font-size-xs, 10px);font-family:monospace;color:var(--Gray-Gray-700, #32394d);outline:none}.cp-hex-input:focus{border-color:var(--Info-Info-500, #50a5f1)}.cp-hex-preview{width:24px;height:24px;border-radius:var(--Border-1, 4px);border:1px solid rgba(0,0,0,0.1);flex-shrink:0}.cp-opacity-row{display:flex;align-items:center;gap:var(--Size-2, 8px)}.cp-opacity-label{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #68738f);white-space:nowrap}.cp-opacity-slider{flex:1;height:4px;cursor:pointer;accent-color:var(--Primary-Primary-500, #f49a3d)}.cp-opacity-value{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #68738f);width:28px;text-align:right;flex-shrink:0}.cp-presets{display:grid;grid-template-columns:repeat(6, 1fr);gap:var(--Size-1, 4px)}.cp-swatch{width:24px;height:24px;border-radius:var(--Border-1, 4px);border:2px solid transparent;cursor:pointer;transition:transform 0.15s, border-color 0.15s;padding:0}.cp-swatch:hover{transform:scale(1.15)}.cp-swatch--active{border-color:var(--Gray-Gray-800, #1a2033)}.cp-close{background:none;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-1, 4px);padding:4px 12px;font-size:var(--font-size-xs, 10px);font-family:inherit;color:var(--Gray-Gray-600, #475066);cursor:pointer;align-self:flex-end;transition:background 0.15s}.cp-close:hover{background:var(--Gray-Gray-50, #f7f8fa)}`;
+const dropiColorPickerCss = () => `:host{display:block}.general-container{position:relative;width:fit-content}.main-input-container{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:var(--Size-3);position:relative;width:fit-content}.main-input-container .overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;cursor:pointer}.line-color-preview{width:40px;height:40px;border-radius:50%;border:1px solid var(--Gray-Gray-200);display:flex;justify-content:center;align-items:center;padding:5px}.line-color-preview .color-preview{width:100%;height:100%;border-radius:50%;border:1px solid var(--Gray-Gray-200)}.position-right{top:0;left:250px}.position-left{top:0;right:200px}.position-top{bottom:55px}.position-bottom{top:55px}.position-bottom::before{transform:rotate(90deg);left:50%;top:-15px}.position-right::before{left:-6px;top:10px}.position-top::before{transform:rotate(270deg);left:50%;bottom:-15px}.position-left::before{transform:rotate(180deg);right:-9px}.color-picker-container::before{content:'';position:absolute;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid var(--Neutral-White);z-index:1}.color-picker-container{width:280px;padding:var(--Size-4);background:var(--Neutral-White);border-radius:var(--Size-2);box-shadow:var(--Shadow-large);position:absolute;z-index:100;transform-origin:top left;opacity:0;transition:transform 0.2s ease-out,     opacity 0.2s ease-out;pointer-events:none}.color-picker-container .main-color-canvas-container{position:relative;margin-bottom:var(--Size-4);border:1px solid var(--Gray-Gray-200);border-radius:var(--Size-1);display:flex;justify-self:center;align-items:center}.color-picker-container .main-color-canvas-container canvas{display:block;border-radius:var(--Size-1)}.color-picker-container .main-color-canvas-container .color-selector-pointer{position:absolute;width:var(--Size-3);height:var(--Size-3);border:2px solid var(--Neutral-White);border-radius:50%;transform:translate(-6px, -6px);pointer-events:none}.color-picker-container .slider-container{display:flex;flex-direction:column;gap:var(--Size-3)}.color-picker-container .slider-container .slider-group{display:flex;flex-direction:column;gap:var(--Size-1)}.color-picker-container .slider-container .slider-group label{font-size:var(--font-size-xs);color:var(--Gray-Gray-500);font-weight:var(--font-weight-bold)}.color-picker-container .slider-container .slider-group .hue-slider-container,.color-picker-container .slider-container .slider-group .opacity-slider-container{position:relative;height:var(--Size-3);border-radius:var(--Size-4);overflow:hidden}.color-picker-container .slider-container .slider-group .hue-slider-container canvas,.color-picker-container .slider-container .slider-group .opacity-slider-container canvas{display:block;width:100%;height:100%}.color-picker-container .slider-container .slider-group .hue-slider-container .slider-pointer,.color-picker-container .slider-container .slider-group .opacity-slider-container .slider-pointer{position:absolute;top:0;height:var(--Size-3);width:var(--Size-3);background:transparent;border:2px solid var(--Neutral-White);border-radius:50%;pointer-events:none}.color-picker-container.show{transform:scale(1);opacity:1;pointer-events:auto}.color-info .color-label{font-size:var(--font-size-xs);color:var(--Gray-Gray-500);font-weight:var(--font-weight-bold);text-transform:uppercase;margin-bottom:var(--Size-2)}.color-info .color-input{border:1px solid var(--Gray-Gray-200, #ddd);border-radius:var(--Size-1);padding:6px 8px;font-size:var(--font-size-s);width:100%;font-family:monospace;text-transform:uppercase;background-color:var(--Neutral-White, #ffffff);color:var(--Gray-Gray-800, #1f2433);outline:none}`;
 
-const PRESETS = [
-    '#f46a6b', '#f49a3d', '#f4d03d', '#34c55a', '#50a5f1', '#7c6bea',
-    '#1a2033', '#475066', '#858ea6', '#c3c9d9', '#eceef4', '#ffffff',
-];
 const DropiColorPicker = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dropiColorChange = index.createEvent(this, "dropiColorChange", 7);
-        this.dropiOpacityChange = index.createEvent(this, "dropiOpacityChange", 7);
-    }
-    /** Current color value (hex string) */
-    value = '#f49a3d';
-    /** Show opacity slider */
-    showOpacity = false;
-    /** Opacity value 0–100 */
+        this.colorChange = index.createEvent(this, "colorChange", 7);
+    }
+    get el() { return index.getElement(this); }
+    currentColor = '#ffffff';
+    position = 'right';
+    colorChange;
+    color = '';
+    hue = 0;
+    saturation = 0;
+    currentVal = 0;
     opacity = 100;
-    /** Label */
-    label = '';
-    /** Disabled */
-    disabled = false;
-    /** Show preset swatches */
-    showPresets = true;
-    open = false;
-    hexInput = '';
-    /** Emitted when color changes. e.detail = hex string */
-    dropiColorChange;
-    /** Emitted when opacity changes. e.detail = 0-100 */
-    dropiOpacityChange;
+    showEdit = false;
+    isDragging = false;
+    isHueDragging = false;
+    isOpacityDragging = false;
+    colorCanvas;
+    hueCanvas;
+    opacityCanvas;
+    onValueChange(newValue) {
+        if (!this.showEdit) {
+            this.color = newValue;
+            this.syncFromHex();
+        }
+    }
     componentWillLoad() {
-        this.hexInput = this.value;
-    }
-    selectColor(hex) {
-        this.value = hex;
-        this.hexInput = hex;
-        this.dropiColorChange.emit(hex);
-    }
-    handleHexInput(e) {
-        const raw = e.target.value;
-        this.hexInput = raw;
-        if (/^#[0-9a-fA-F]{6}$/.test(raw)) {
-            this.value = raw;
-            this.dropiColorChange.emit(raw);
+        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();
     }
-    handleOpacity(e) {
-        const val = Number(e.target.value);
-        this.opacity = val;
-        this.dropiOpacityChange.emit(val);
+    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);
     }
-    handleNativeColor(e) {
-        const hex = e.target.value;
-        this.selectColor(hex);
+    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 (index.h("div", { key: '945a6065e2b3a74223a461a26685292edcd78c35', class: "cp-wrap" }, this.label && index.h("label", { key: 'f55fc2254ee0c2c301e9e32811dea37b6b8eff5d', class: "cp-label" }, this.label), index.h("button", { key: '021c23bc249bc3a3053176834808732c58441018', class: { 'cp-trigger': true, 'cp-trigger--disabled': this.disabled }, disabled: this.disabled, onClick: () => {
-                if (!this.disabled)
-                    this.open = !this.open;
-            }, type: "button" }, index.h("span", { key: 'be49ed05577c5c585d1509bdc1b5055e0e394383', class: "cp-trigger__swatch", style: { background: this.value } }), index.h("span", { key: '402a7005da1daf2b3a2e12b086b41f79552aa061', class: "cp-trigger__value" }, this.value), index.h("dropi-icon", { key: 'da5d7aa322ad7649e90832c54c6ecba445c5e64b', name: "Arrow-Down-2", width: "12px", height: "12px", color: "Gray-Gray-400" })), this.open && (index.h("div", { key: '5e14ace3d21ce605ecc8131acf6c1cb382ee33fa', class: "cp-popup" }, index.h("div", { key: '4408dff1ab4a6ab9a9765eb93502f88fe0946ac0', class: "cp-spectrum-wrap" }, index.h("input", { key: '8d3a7e7b38f528e8dfe14eb668da2af1d861cfe8', type: "color", class: "cp-native", value: this.value, onChange: (e) => this.handleNativeColor(e) }), index.h("div", { key: '4c37fc46fb692afde5574f681b02159f1a84d06b', class: "cp-spectrum-label" }, "Selecciona un color")), index.h("div", { key: 'a968e35abe0fc39806002d49f5ca46dece28c0a6', class: "cp-hex-row" }, index.h("span", { key: '0cb30134befff62ced36803c6ed0d5c96b41c680', class: "cp-hex-label" }, "HEX"), index.h("input", { key: 'ff6e209fcfeb2ec2d55354806aaba41c041492c5', class: "cp-hex-input", type: "text", value: this.hexInput, maxLength: 7, onInput: (e) => this.handleHexInput(e), placeholder: "#000000" }), index.h("div", { key: '6b744fc086dbbc9b5dc148f224673085c7a28704', class: "cp-hex-preview", style: { background: this.value } })), this.showOpacity && (index.h("div", { key: '5250878b5392e1b00c2e677db727f56c2db91c11', class: "cp-opacity-row" }, index.h("span", { key: '58b49f3749d8a33edcfc580b0e11517087bc25b4', class: "cp-opacity-label" }, "Opacidad"), index.h("input", { key: '48f060900c5d7184e5d2ab93c0abd1641cc755e7', class: "cp-opacity-slider", type: "range", min: 0, max: 100, value: this.opacity, onInput: (e) => this.handleOpacity(e) }), index.h("span", { key: '7da0ec0a86c1472bd1836a8bb0ca616091dde695', class: "cp-opacity-value" }, this.opacity, "%"))), this.showPresets && (index.h("div", { key: '96434d1c7bdfe187f04f613494b79e28acef7750', class: "cp-presets" }, PRESETS.map(hex => (index.h("button", { class: { 'cp-swatch': true, 'cp-swatch--active': hex === this.value }, style: { background: hex }, onClick: () => this.selectColor(hex), type: "button", title: hex }))))), index.h("button", { key: 'e5ad3d16b888c8eb0a4444ae3a6fbab9c83689c5', class: "cp-close", onClick: () => this.open = false, type: "button" }, "Cerrar")))));
+        return (index.h("div", { key: '9b5f9753c014b33a75fdf35460b3f2b40f12f5c6', class: "general-container" }, index.h("div", { key: '2547ef57ac6fc35eb65012729d613ac819918c02', class: "main-input-container" }, index.h("div", { key: 'f8f45ef7fba7d889b72af34973f51cd39f7541ec', class: "overlay", onClick: () => this.showEditor() }), index.h("div", { key: '76f6a0b4f5abf04e02778166f7f568a106ccbda6', class: "line-color-preview" }, index.h("div", { key: '4a9d7b92303dc21c39dd2271d1fbf9719bb4e012', class: "color-preview", style: { background: this.currentColor } })), index.h("div", { key: '47d4986bd93f8ac590014b3ad4251547be86bf76', class: "color-info" }, index.h("input", { key: '0f0265276fb482a5053a328daf4888f577e9fed2', type: "text", class: "color-input", value: this.currentColor, maxLength: 9, readOnly: true }))), index.h("div", { key: 'b944ba1094125f85f78529804549d02a4af15a98', class: `color-picker-container position-${this.position} ${this.showEdit ? 'show' : ''}` }, index.h("div", { key: 'b1cfc5ae3e082533562685eee34246972d226ee8', class: "main-color-canvas-container" }, index.h("canvas", { key: '6d91d698213b04aed7a14d0ea77876ec81d54a9c', ref: (el) => this.colorCanvas = el, width: 256, height: 150, onMouseDown: (e) => this.onColorMouseDown(e) }), index.h("div", { key: 'a35cbf720261d42a476ff86a4d3230eb41c60158', class: "color-selector-pointer", style: {
+                left: `${(this.saturation / 100) * 256}px`,
+                top: `${((100 - this.currentVal) / 100) * 150}px`
+            } })), index.h("div", { key: 'a3a28711ce1b7d550ace8cdefce1170d1cfab6b7', class: "slider-container" }, index.h("div", { key: '1a7e080019254df35871874d4f682be49ccb1c2d', class: "slider-group" }, index.h("div", { key: 'ab472e420e2dde23eaf797e0962234f06b831350', class: "hue-slider-container" }, index.h("canvas", { key: '84fa8b097826ca461913ef5c1a363fed51fea46a', ref: (el) => this.hueCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onHueMouseDown(e) }), index.h("div", { key: '47e740225ac80d3daee6781e0a3d55840dbf6e3a', class: "slider-pointer", style: { left: `${(this.hue / 360) * 234}px` } }))), index.h("div", { key: '408dccb26d895cbf3c648e959a0a748340b9d7ad', class: "slider-group" }, index.h("div", { key: 'bd1c6eb89183c0a3f194601413e840cd3576955c', class: "opacity-slider-container" }, index.h("canvas", { key: '8bef0d97d8f88471929876ffb4fb3dfb8eee950a', ref: (el) => this.opacityCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onOpacityMouseDown(e) }), index.h("div", { key: '394b6a5aac4d2924e5dd3e2fe898fe1761c6358f', class: "slider-pointer", style: { left: `${(this.opacity / 100) * 234}px` } }))), index.h("div", { key: '7bd122ab15ed2534586d5e0d2cf4a33174bb0385', class: "color-info" }, index.h("div", { key: '4dc391044f0cd3a72ee14e5c0f7279c81140c5f3', class: "color-label" }, "HEX"), index.h("input", { key: 'f197c630e94ccebab9e9f75a615b3a2fd09ffc0f', type: "text", class: "color-input", value: this.color, onInput: (e) => this.onHexInputChange(e), maxLength: 9 }))))));
     }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }]
+    }; }
 };
 DropiColorPicker.style = dropiColorPickerCss();
 

package/dist/cjs/dropi-country-flags.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DcOH2ZjX.js');
+var index = require('./index-077kM98l.js');
 
 const dropiCountryFlagsCss = () => `: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}`;
 
@@ -11,14 +11,14 @@ const DropiCountryFlags = class {
     /** ISO 3166-1 alpha-2 country code (e.g. "CO", "US") */
     country = '';
     /** Visual style: circle uses circle-flags CDN, rectangle/flat uses flagsapi */
-    flagStyle = 'flat';
+    customStyle = 'flat';
     /** Width in px */
     width = '';
     /** Height in px */
     height = '';
     get src() {
         const code = (this.country || '').toUpperCase();
-        if (this.flagStyle === 'circle') {
+        if (this.customStyle === 'circle') {
             return `https://hatscripts.github.io/circle-flags/flags/${code.toLowerCase()}.svg`;
         }
         return `https://flagsapi.com/${code}/flat/64.png`;
@@ -29,7 +29,7 @@ const DropiCountryFlags = class {
             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 (index.h("figure", { key: 'a0e00a2c47e205b0ddd565726a9aff1945cfad2e', class: `flag ${this.flagStyle}` }, index.h("img", { key: '4048129356b4d43ae761f7dd7858483dd008f2b9', src: this.src, style: style, alt: `flag-${this.country}` })));
+        return (index.h("figure", { key: '08e6efa91f51eb4c408ae868cef6a2c449e7ac2f', class: `flag ${this.customStyle}` }, index.h("img", { key: 'd0c24fdb98b1c2561f36dc70663e07ccea7802ca', src: this.src, style: style, alt: `flag-${this.country}` })));
     }
 };
 DropiCountryFlags.style = dropiCountryFlagsCss();

package/dist/cjs/dropi-country-selector.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-DcOH2ZjX.js');
+var index = require('./index-077kM98l.js');
 
-const dropiCountrySelectorCss = () => `:host{display:block;width:100%;text-align:left}*,*::before,*::after{box-sizing:border-box}.custom-select{position:relative;width:100%}label{display:block;font-size:var(--font-size-xs, 11px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066);margin-bottom:6px}.required{color:var(--Error-Error-500, #ef4444);margin-left:2px}.select-button{width:100%;height:40px;padding:0 10px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 12px);font-family:inherit;display:flex;justify-content:space-between;align-items:center;text-align:left;cursor:pointer;transition:border-color 0.15s ease}.select-button:focus{outline:none;border-color:var(--Info-Info-500, #3b82f6)}.select-button:disabled{border-color:var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6);background:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.select-button.select-completed{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066)}.select-button.select-invalid{border-color:var(--Error-Error-500, #ef4444)}.selected-content{display:flex;align-items:center;gap:8px;overflow:hidden}.selected-option{display:flex;align-items:center;gap:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.placeholder-text{color:var(--Gray-Gray-400, #858ea6)}.flag-img{border-radius:16px;width:24px;height:24px;object-fit:cover;flex-shrink:0}.select-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--Neutral-White, #fff);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);overflow-y:auto;z-index:200;list-style:none;padding:0;margin:0;box-shadow:0 4px 12px rgba(0, 0, 0, 0.1);transition:max-height 0.2s ease, opacity 0.2s ease}.select-dropdown.expanded{max-height:260px;opacity:1}.select-dropdown.collapsed{max-height:0;opacity:0;pointer-events:none;border-color:transparent;box-shadow:none}.search-li{padding:0;position:sticky;top:0;background:var(--Neutral-White, #fff);z-index:1}.country-search{width:100%;padding:8px 12px;border:none;border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2);outline:none;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-600, #475066);background:transparent}.option{width:100%;min-height:40px;border-radius:0;padding:8px 12px;border:none;background:transparent;text-align:left;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background 0.1s ease}.option:hover{background:var(--Gray-Gray-50, #f7f8fa)}`;
+const dropiCountrySelectorCss = () => `:host{display:block;width:100%;text-align:left}*,*::before,*::after{box-sizing:border-box}.custom-select{position:relative;width:100%}label{display:block;font-size:var(--font-size-xs, 11px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066);margin-bottom:6px}.required{color:var(--Error-Error-500, #ef4444);margin-left:2px}.select-button{width:100%;height:44px;padding:0 12px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 14px);font-family:inherit;display:flex;justify-content:space-between;align-items:center;text-align:left;cursor:pointer;transition:border-color 0.15s ease}.select-button:focus{outline:none;border-color:var(--Info-Info-500, #3b82f6)}.select-button:disabled{border-color:var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6);background:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.select-button.select-completed{color:var(--Gray-Gray-700, #32394d)}.select-button.select-invalid{border-color:var(--Error-Error-500, #ef4444)}.selected-content{display:flex;align-items:center;gap:8px;overflow:hidden;flex:1}.selected-option{display:flex;align-items:center;gap:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-s, 14px)}.placeholder-text{color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 14px)}.flag-img{border-radius:var(--Border-1, 4px);width:24px;height:24px;object-fit:cover;flex-shrink:0}.select-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--Neutral-White, #ffffff);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);z-index:200;list-style:none;padding:0;margin:0;box-shadow:0 8px 24px rgba(0, 0, 0, 0.10);overflow:hidden;transition:max-height 0.2s ease, opacity 0.2s ease}.select-dropdown.expanded{max-height:300px;opacity:1;overflow-y:auto}.select-dropdown.collapsed{max-height:0;opacity:0;pointer-events:none;border-color:transparent;box-shadow:none}.select-dropdown::-webkit-scrollbar{width:6px}.select-dropdown::-webkit-scrollbar-track{background:transparent}.select-dropdown::-webkit-scrollbar-thumb{background:var(--Gray-Gray-200, #c3c9d9);border-radius:4px}.select-dropdown::-webkit-scrollbar-thumb:hover{background:var(--Gray-Gray-300, #a3abbf)}.search-li{padding:10px 12px;position:sticky;top:0;background:var(--Neutral-White, #ffffff);z-index:1;border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2)}.search-field{position:relative;display:flex;align-items:center}.country-search{width:100%;height:36px;padding:0 36px 0 12px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);outline:none;font-size:var(--font-size-s, 14px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:var(--Gray-Gray-50, #f7f8fa);transition:border-color 0.15s, background 0.15s}.country-search:focus{border-color:var(--Info-Info-500, #50a5f1);background:var(--Neutral-White, #ffffff)}.country-search::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-icon{position:absolute;right:10px;display:flex;align-items:center;pointer-events:none}.option{width:100%;min-height:44px;padding:10px 16px;border:none;background:transparent;text-align:left;color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-s, 14px);font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:10px;transition:background 0.1s ease;white-space:nowrap}.option:hover{background:var(--Gray-Gray-50, #f7f8fa)}`;
 
 const COUNTRIES = [
     { name: 'Afghanistan', code: 'AF', codePhone: '93' },
@@ -98,32 +98,62 @@ const COUNTRIES = [
 const DropiCountrySelector = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dropiCountryChange = index.createEvent(this, "dropiCountryChange", 7);
+        this.onChangeSelect = index.createEvent(this, "onChangeSelect", 7);
     }
     /** Label above the select */
     label = '';
     /** Placeholder when nothing is selected */
     placeholder = 'Selecciona un país';
     /** Pre-selected country code (ISO 3166-1 alpha-2) */
-    value = '';
+    currentSelection = '';
     /** Whether the selector is disabled */
     disabled = false;
     /** Show asterisk for required field */
     showObligatory = false;
     /** Show error border */
-    invalid = false;
+    hasError = false;
+    /** Helper text below the select */
+    textHelper = '';
+    /** Search term for filtering (matches Angular `searchTerm`) */
+    searchTerm = '';
+    /**
+     * Convenience object prop — matches Angular `selectProperties: SelectProperties`.
+     * When provided, its non-null fields override individual props.
+     */
+    selectProperties = null;
     /** Emitted when a country is selected. Detail is the CountryItem. */
-    dropiCountryChange;
+    onChangeSelect;
     isOpen = false;
     selected = null;
-    searchTerm = '';
+    get el() { return index.getElement(this); }
+    handleDocClick(e) {
+        if (this.isOpen && !e.composedPath().includes(this.el)) {
+            this.isOpen = false;
+        }
+    }
     searchInputRef;
-    valueChanged(val) {
+    currentSelectionChanged(val) {
         this.selected = COUNTRIES.find(c => c.code === val) || null;
     }
+    selectPropertiesChanged(val) {
+        if (!val)
+            return;
+        if (val.label !== undefined)
+            this.label = val.label;
+        if (val.placeholder !== undefined)
+            this.placeholder = val.placeholder;
+        if (val.showObligatory !== undefined)
+            this.showObligatory = val.showObligatory;
+        if (val.textHelper !== undefined)
+            this.textHelper = val.textHelper;
+        if (val.hasError !== undefined)
+            this.hasError = val.hasError;
+    }
     componentWillLoad() {
-        if (this.value)
-            this.valueChanged(this.value);
+        if (this.selectProperties)
+            this.selectPropertiesChanged(this.selectProperties);
+        if (this.currentSelection)
+            this.currentSelectionChanged(this.currentSelection);
     }
     get filtered() {
         if (!this.searchTerm)
@@ -143,19 +173,22 @@ const DropiCountrySelector = class {
         this.selected = country;
         this.isOpen = false;
         this.searchTerm = '';
-        this.value = country.code;
-        this.dropiCountryChange.emit(country);
+        this.currentSelection = country.code;
+        this.onChangeSelect.emit(country);
     }
     render() {
-        return (index.h("div", { key: '95320129f76f5d802d62cb282172af97607ed15b', class: "custom-select" }, this.label && (index.h("label", { key: '7310600a9ac9a4482240ae6452db11ea2f083ea5' }, this.label, this.showObligatory && index.h("span", { key: '8ff5f89823f308366fa9f9ab680d7716e136eec5', class: "required" }, "*"))), index.h("button", { key: 'cf73602134c204051e196a2fdce9192377e6c1dc', type: "button", class: {
+        return (index.h("div", { key: '5b1c2871c8e203384a7e4110002436131e9b6540', class: "custom-select" }, this.label && (index.h("label", { key: '40b4b1e5e3d245466ac66b0e5b2fbadaf476a45f' }, this.label, this.showObligatory && index.h("span", { key: '22734f66b235e18548862c756b005c8f5d901a7d', class: "required" }, "*"))), index.h("button", { key: '02aaf6f7c145d4e55d347f92cc1228c2623bfb52', type: "button", class: {
                 'select-button': true,
                 'select-completed': !!this.selected,
-                'select-invalid': this.invalid,
-            }, disabled: this.disabled, onClick: () => this.open() }, index.h("div", { key: '29afa9af6fd5b314e38f75c496e3f6f529a795b2', class: "selected-content" }, this.selected ? (index.h("span", { class: "selected-option" }, index.h("img", { class: "flag-img", src: `https://flagsapi.com/${this.selected.code}/shiny/24.png`, alt: this.selected.name }), this.selected.name)) : (index.h("span", { class: "placeholder-text" }, this.placeholder))), index.h("dropi-icon", { key: '722dcee79149526a9879e339279128aa23f513cc', name: this.isOpen ? 'Dropdown-up' : 'Dropdown-down', width: "20px", height: "20px", color: "Gray-Gray-500" })), index.h("ul", { key: '64a93caa1189e212c83aa711d8fec2df97baba1b', class: `select-dropdown${this.isOpen ? ' expanded' : ' collapsed'}` }, index.h("li", { key: '28f0924f7edac815645c0ee51963b8ac688312a6', class: "search-li" }, index.h("input", { key: 'b69a4b4a9238fe4dbc0932f8f4078989d867a224', ref: (el) => { this.searchInputRef = el; }, type: "text", class: "country-search", placeholder: "Buscar pa\u00EDs...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; } })), this.filtered.map(country => (index.h("li", { key: country.code }, index.h("button", { class: "option", type: "button", onClick: () => this.select(country) }, index.h("img", { class: "flag-img", src: `https://flagsapi.com/${country.code}/shiny/24.png`, alt: country.name }), country.name)))))));
+                'select-invalid': this.hasError,
+            }, disabled: this.disabled, onClick: () => this.open() }, index.h("div", { key: '1dd83df0cdbfe0c3b767fa0f7b431ce0a414cb14', class: "selected-content" }, this.selected ? (index.h("span", { class: "selected-option" }, index.h("img", { class: "flag-img", src: `https://flagsapi.com/${this.selected.code}/shiny/24.png`, alt: this.selected.name }), this.selected.name)) : (index.h("span", { class: "placeholder-text" }, this.placeholder))), index.h("dropi-icon", { key: '8b990d7ad946d88da7a67b142a4420cd80e3deb2', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', width: "20px", height: "20px", color: "Gray-Gray-500" })), index.h("ul", { key: 'b2641514578d7ea447bd7cd5db191dc1b21bc9f1', class: `select-dropdown${this.isOpen ? ' expanded' : ' collapsed'}` }, index.h("li", { key: 'd743ec97af3cb4044b48ef4e98bbe90a59fffc35', class: "search-li" }, index.h("div", { key: '771cbb86ce07908b5e59fa21899d8156180430d8', class: "search-field" }, index.h("input", { key: '9e5c11ad1ae3e650e3cb10011e1c87e889be65cd', ref: (el) => { this.searchInputRef = el; }, type: "text", class: "country-search", placeholder: "Buscar pa\u00EDs...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; } }), index.h("span", { key: '56ebb7e45e8898eed09ddd82c770ad30648b8b73', class: "search-icon" }, index.h("dropi-icon", { key: 'a80e581cd1b3590dc66290a3f43cee9ee5bc5e66', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" })))), this.filtered.map(country => (index.h("li", { key: country.code }, index.h("button", { class: "option", type: "button", onClick: () => this.select(country) }, index.h("img", { class: "flag-img", src: `https://flagsapi.com/${country.code}/shiny/24.png`, alt: country.name }), country.name))))), this.textHelper && (index.h("div", { key: 'b9b87b146ef9261ef540a7d39761e6793194baf0', class: { 'select-helper': true, 'select-helper-error': this.hasError } }, this.hasError && index.h("dropi-icon", { key: '7a5aec8d924adcaf7b3381f486ef7b4ed6245059', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), index.h("span", { key: 'bd953f772c39334b217229f0c0a887641830a2eb' }, this.textHelper)))));
     }
     static get watchers() { return {
-        "value": [{
-                "valueChanged": 0
+        "currentSelection": [{
+                "currentSelectionChanged": 0
+            }],
+        "selectProperties": [{
+                "selectPropertiesChanged": 0
             }]
     }; }
 };

package/dist/cjs/dropi-date-picker-range.cjs.entry.js

@@ -1,14 +1,14 @@
 'use strict';
 
-var index = require('./index-DcOH2ZjX.js');
+var index = require('./index-077kM98l.js');
 
-const dropiDatePickerRangeCss = () => `:host{display:block;width:100%;max-width:380px}*,*::before,*::after{box-sizing:border-box}.date-picker-range{width:100%;font-family:inherit}.label{font-size:11px;font-weight:500;color:#7b8190;margin-bottom:8px}.inputs-row{display:flex;align-items:flex-end;gap:8px}.input-group{flex:1;display:flex;flex-direction:column;gap:4px}.input-label{font-size:var(--font-size-xs, 11px);color:var(--Gray-Gray-500, #69738c);font-weight:var(--font-weight-medium, 500)}.date-input{width:100%;height:40px;padding:0 10px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);color:var(--Gray-Gray-600, #475066);font-size:13px;font-family:inherit;outline:none;cursor:pointer;transition:border-color 0.15s ease}.date-input:focus{border-color:var(--Primary-Primary-500, #f49a3d)}.separator{padding-bottom:8px;color:var(--Gray-Gray-400, #858ea6);font-size:16px}.shortcuts{display:flex;flex-direction:column;gap:2px;margin-top:10px;border-left:1px solid var(--Gray-Gray-100, #e6eaf2);padding-left:10px}.shortcut-btn{background:transparent;border:none;padding:4px 6px;font-size:13px;font-family:inherit;color:var(--Gray-Gray-700, #32394d);cursor:pointer;text-align:left;border-radius:5px;transition:background 0.1s ease;font-weight:400}.shortcut-btn:hover{background:var(--Gray-Gray-50, #f5f6f8)}.shortcut-btn.active{background:var(--Gray-Gray-50, #f5f6f8);font-weight:600}.warning-box{margin-top:8px;padding:4px 8px;border:1px solid #f4c370;border-radius:4px;background:#fef8ed}.warning-message{color:#495057;font-size:10px;line-height:16px}@keyframes shimmer{0%{background-position:-468px 0}100%{background-position:468px 0}}.skeleton{height:40px;width:100%;min-width:180px;border-radius:6px;animation:shimmer 1s linear infinite;background:linear-gradient(to right, #f5f6f8 8%, #e3e7ef 28%, #f5f6f8 77%);background-size:800px 104px}@media screen and (max-width: 480px){.inputs-row{flex-direction:column}.separator{display:none}.shortcuts{flex-direction:row;flex-wrap:wrap;border-left:none;padding-left:0;border-top:1px solid var(--Gray-Gray-100, #e6eaf2);padding-top:8px}}`;
+const dropiDatePickerRangeCss = () => `:host{display:block;width:100%;max-width:380px}*,*::before,*::after{box-sizing:border-box}.date-picker-range{width:100%;font-family:inherit}.label{font-size:11px;font-weight:var(--font-weight-medium);color:#7b8190;margin-bottom:8px}.inputs-row{display:flex;align-items:flex-end;gap:8px}.input-group{flex:1;display:flex;flex-direction:column;gap:4px}.input-label{font-size:var(--font-size-xs, 11px);color:var(--Gray-Gray-500, #69738c);font-weight:var(--font-weight-medium, 500)}.date-input{width:100%;height:40px;padding:0 10px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);color:var(--Gray-Gray-600, #475066);font-size:13px;font-family:inherit;outline:none;cursor:pointer;transition:border-color 0.15s ease}.date-input:focus{border-color:var(--Primary-Primary-500, #f49a3d)}.separator{padding-bottom:8px;color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-m)}.shortcuts{display:flex;flex-direction:column;gap:2px;margin-top:10px;border-left:1px solid var(--Gray-Gray-100, #e6eaf2);padding-left:10px}.shortcut-btn{background:transparent;border:none;padding:4px 6px;font-size:13px;font-family:inherit;color:var(--Gray-Gray-700, #32394d);cursor:pointer;text-align:left;border-radius:5px;transition:background 0.1s ease;font-weight:var(--font-weight-regular)}.shortcut-btn:hover{background:var(--Gray-Gray-50, #f5f6f8)}.shortcut-btn.active{background:var(--Gray-Gray-50, #f5f6f8);font-weight:var(--font-weight-semibold)}.warning-box{margin-top:8px;padding:4px 8px;border:1px solid var(--Warning-Warning-400);border-radius:4px;background:var(--Warning-Warning-50)}.warning-message{color:#495057;font-size:var(--font-size-xxs);line-height:16px}@keyframes shimmer{0%{background-position:-468px 0}100%{background-position:468px 0}}.skeleton{height:40px;width:100%;min-width:180px;border-radius:6px;animation:shimmer 1s linear infinite;background:linear-gradient(to right, #f5f6f8 8%, #e3e7ef 28%, #f5f6f8 77%);background-size:800px 104px}@media screen and (max-width: 480px){.inputs-row{flex-direction:column}.separator{display:none}.shortcuts{flex-direction:row;flex-wrap:wrap;border-left:none;padding-left:0;border-top:1px solid var(--Gray-Gray-100, #e6eaf2);padding-top:8px}}`;
 
 const DropiDatePickerRange = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dropiStartDateChange = index.createEvent(this, "dropiStartDateChange", 7);
-        this.dropiEndDateChange = index.createEvent(this, "dropiEndDateChange", 7);
+        this.startDateChange = index.createEvent(this, "startDateChange", 7);
+        this.endDateChange = index.createEvent(this, "endDateChange", 7);
         this.dropiRangeChange = index.createEvent(this, "dropiRangeChange", 7);
     }
     /** Start date (YYYY-MM-DD) */
@@ -26,9 +26,9 @@ const DropiDatePickerRange = class {
     /** Hide "Hoy" shortcut */
     hideTodayRangeShortcut = false;
     /** Emitted when start date changes */
-    dropiStartDateChange;
+    startDateChange;
     /** Emitted when end date changes */
-    dropiEndDateChange;
+    endDateChange;
     /** Emitted with full range when both dates are set */
     dropiRangeChange;
     start = '';
@@ -91,8 +91,8 @@ const DropiDatePickerRange = class {
         }
     }
     emit() {
-        this.dropiStartDateChange.emit(this.start);
-        this.dropiEndDateChange.emit(this.end);
+        this.startDateChange.emit(this.start);
+        this.endDateChange.emit(this.end);
         this.dropiRangeChange.emit({ start: this.start, end: this.end });
     }
     render() {