@dropi/ui 0.1.22 → 0.1.23

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

@@ -1,104 +0,0 @@
-'use strict';
-
-var index = require('./index-C8kwDvpf.js');
-
-const dropiCitySelectorCss = () => `:host{display:block;width:100%;position:relative}*,*::before,*::after{box-sizing:border-box}.city-selector{position:relative;width:100%}.selector-trigger{width:100%;min-height:44px;padding:6px 12px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;text-align:left;font-family:inherit;transition:border-color 0.15s}.selector-trigger:hover:not(:disabled){border-color:var(--Gray-Gray-300, #a3abbf)}.selector-trigger:focus{outline:none;border-color:var(--Info-Info-500, #50a5f1)}.city-selector--disabled .selector-trigger{background:var(--Gray-Gray-50, #f7f8fa);border-color:var(--Gray-Gray-100, #e6eaf2);cursor:not-allowed;opacity:0.6}.chips-area{display:flex;flex-wrap:wrap;gap:4px;flex:1;min-height:26px;align-items:center}.placeholder{color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 14px)}.chip{display:inline-flex;align-items:center;gap:4px;background:var(--Primary-Primary-50, #fff8f0);border:1px solid var(--Primary-Primary-200, #fcd5a8);border-radius:var(--Border-1, 4px);padding:2px 6px;font-size:var(--font-size-xs, 12px);color:var(--Primary-Primary-700, #b85c00)}.chip-remove{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.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);box-shadow:0 8px 24px rgba(0, 0, 0, 0.10);z-index:200;overflow:hidden}.search-wrap{padding:10px 12px;border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2)}.search-field{position:relative;display:flex;align-items:center}.search-input{width:100%;height:36px;padding:0 36px 0 12px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);font-size:var(--font-size-s, 14px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:var(--Gray-Gray-50, #f7f8fa);outline:none;transition:border-color 0.15s}.search-input:focus{border-color:var(--Info-Info-500, #50a5f1);background:var(--Neutral-White, #ffffff)}.search-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-icon{position:absolute;right:10px;display:flex;align-items:center;pointer-events:none}.options-list{max-height:280px;overflow-y:auto;background:var(--Neutral-White, #ffffff)}.options-list::-webkit-scrollbar{width:6px}.options-list::-webkit-scrollbar-track{background:transparent}.options-list::-webkit-scrollbar-thumb{background:var(--Gray-Gray-200, #c3c9d9);border-radius:4px}.group-label{padding:14px 16px 8px;font-size:var(--font-size-m, 16px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-800, #1f2433);background:var(--Neutral-White, #ffffff)}.city-option{padding:10px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;font-size:var(--font-size-s, 14px);color:var(--Gray-Gray-700, #32394d);background:var(--Neutral-White, #ffffff);transition:background 0.1s;user-select:none}.city-option:hover{background:var(--Gray-Gray-50, #f7f8fa)}.city-option--selected .city-label{color:var(--Gray-Gray-800, #1f2433);font-weight:var(--font-weight-medium, 500)}.checkbox{width:22px;height:22px;border:1.5px solid var(--Gray-Gray-300, #c3c9d9);border-radius:var(--Border-1, 6px);background:var(--Neutral-White, #ffffff);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color 0.15s, background 0.15s}.checkbox--checked{border-color:var(--Primary-Primary-500, #f49a3d);background:var(--Primary-Primary-500, #f49a3d)}.city-label{flex:1}.no-results{padding:20px 16px;text-align:center;color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 14px)}`;
-
-const DropiCitySelector = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.selectedCitiesChange = index.createEvent(this, "selectedCitiesChange", 7);
-    }
-    /** Grouped city options (array or JSON string) */
-    options = [];
-    /** Currently selected city values */
-    selectedCities = [];
-    /** Placeholder text */
-    placeholder = 'Seleccione una ciudad';
-    /** Disable the selector */
-    disabled = false;
-    /** Emitted when selection changes. Detail = selected values array. */
-    selectedCitiesChange;
-    isOpen = false;
-    selected = [];
-    parsedOptions = [];
-    searchTerm = '';
-    get el() { return index.getElement(this); }
-    handleDocClick(e) {
-        if (this.isOpen && !e.composedPath().includes(this.el)) {
-            this.isOpen = false;
-        }
-    }
-    optionsChanged(val) {
-        if (val == null) {
-            this.parsedOptions = [];
-            return;
-        }
-        this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : val;
-    }
-    selectedChanged(val) {
-        if (val == null) {
-            this.selected = [];
-            return;
-        }
-        this.selected = typeof val === 'string' ? JSON.parse(val) : [...val];
-    }
-    componentWillLoad() {
-        this.optionsChanged(this.options);
-        this.selectedChanged(this.selectedCities);
-    }
-    get filtered() {
-        if (!this.searchTerm)
-            return this.parsedOptions;
-        const t = this.searchTerm.toLowerCase();
-        return this.parsedOptions
-            .map(g => ({ ...g, items: g.items.filter(c => c.label.toLowerCase().includes(t)) }))
-            .filter(g => g.items.length > 0);
-    }
-    toggle() {
-        if (this.disabled)
-            return;
-        this.isOpen = !this.isOpen;
-    }
-    toggleCity(value, e) {
-        e.stopPropagation();
-        if (this.selected.includes(value)) {
-            this.selected = this.selected.filter(v => v !== value);
-        }
-        else {
-            this.selected = [...this.selected, value];
-        }
-        this.selectedCitiesChange.emit([...this.selected]);
-    }
-    removeCity(value, e) {
-        e.stopPropagation();
-        this.selected = this.selected.filter(v => v !== value);
-        this.selectedCitiesChange.emit([...this.selected]);
-    }
-    getLabel(value) {
-        for (const g of this.parsedOptions) {
-            const found = g.items.find(c => c.value == value);
-            if (found)
-                return found.label;
-        }
-        return String(value);
-    }
-    render() {
-        const groups = this.filtered;
-        return (index.h("div", { key: '5b1e27677c34d0dc85dc9c8544e4b0ba9a66216b', class: { 'city-selector': true, 'city-selector--disabled': this.disabled } }, index.h("button", { key: 'e359c1baff0a255cd396ee35836430486bc67cd3', type: "button", class: "selector-trigger", disabled: this.disabled, onClick: () => this.toggle(), "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, index.h("div", { key: '082246999f826e8cfe1b2d09fd801a5d7db7e1b2', class: "chips-area" }, this.selected.length === 0 && (index.h("span", { key: '90453c84cae3561412f795ec1ffc01923cd87040', class: "placeholder" }, this.placeholder)), this.selected.map(val => (index.h("span", { class: "chip", key: String(val) }, this.getLabel(val), index.h("button", { type: "button", class: "chip-remove", "aria-label": "Quitar", onClick: (e) => this.removeCity(val, e) }, index.h("dropi-icon", { name: "Close-small", width: "10px", height: "10px", color: "Primary-Primary-500" })))))), index.h("dropi-icon", { key: '27f05e3fcf08bdb4e83ee52f7bba02a5c87f2d3e', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', width: "16px", height: "16px", color: "Gray-Gray-500" })), this.isOpen && (index.h("div", { key: '2fd2d164c186d9d4d1f6664e531449373dfce023', class: "dropdown", role: "listbox" }, index.h("div", { key: 'e6fb9fc7938296d696598e2984167cec5d693b07', class: "search-wrap" }, index.h("div", { key: '9a56582e19bf264065bb11e9bccdf3179e56fb7b', class: "search-field" }, index.h("input", { key: '9228debd9abc4e2a884006bd45046e8e5b3cce25', class: "search-input", type: "text", placeholder: "Buscar...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; }, autoComplete: "off" }), index.h("span", { key: '609751d699dc6227347ec565ff14c3f35fa9a6cf', class: "search-icon" }, index.h("dropi-icon", { key: 'fcacc7c73eeb3f2dc27f83f9dfcbe2476b85136e', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" })))), index.h("div", { key: 'c71c2b0303f37169ee221387aeec6ceea499b8e1', class: "options-list" }, groups.length === 0 && (index.h("div", { key: 'a5525ef28be665b337658032318507ae01f69a0d', class: "no-results" }, "Sin resultados")), groups.map(group => (index.h("div", { key: group.value, class: "group" }, index.h("div", { class: "group-label" }, group.label), group.items.map(city => {
-            const isSelected = this.selected.includes(city.value);
-            return (index.h("div", { key: String(city.value), class: { 'city-option': true, 'city-option--selected': isSelected }, onClick: (e) => this.toggleCity(city.value, e), role: "option", "aria-selected": isSelected }, index.h("span", { class: { 'checkbox': true, 'checkbox--checked': isSelected } }, isSelected && (index.h("dropi-icon", { name: "Check", width: "10px", height: "10px", color: "Neutral-White" }))), index.h("span", { class: "city-label" }, city.label)));
-        })))))))));
-    }
-    static get watchers() { return {
-        "options": [{
-                "optionsChanged": 0
-            }],
-        "selectedCities": [{
-                "selectedChanged": 0
-            }]
-    }; }
-};
-DropiCitySelector.style = dropiCitySelectorCss();
-
-exports.dropi_city_selector = DropiCitySelector;

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

@@ -1,319 +0,0 @@
-'use strict';
-
-var index = require('./index-C8kwDvpf.js');
-
-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 DropiColorPicker = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        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;
-    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 ?? 0}, 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 (index.h("div", { key: '2ee2bd6abd837388d8169961f6b1024da228b453', class: "general-container" }, index.h("div", { key: '15416c1a844daf774dda53f1c08bbe6b15435b64', class: "main-input-container" }, index.h("div", { key: 'e08aacd3ebb059a8467cf6f597d2b3bb3419e286', class: "overlay", onClick: () => this.showEditor() }), index.h("div", { key: 'dda8addee7afb351fb1f6c18dda516d29259220d', class: "line-color-preview" }, index.h("div", { key: 'b242eac802dc0c1d0a9965fb6fc9b6f010408ae2', class: "color-preview", style: { background: this.currentColor } })), index.h("div", { key: '8dddc6632dddae52cc58d964ee50cae1e6460b12', class: "color-info" }, index.h("input", { key: '7181e30bddae8005260d285653425cd5cad2386e', type: "text", class: "color-input", value: this.currentColor, maxLength: 9, readOnly: true }))), index.h("div", { key: '0ad3b547299fc1a4ccab9ddb7efebd7962fd7855', class: `color-picker-container position-${this.position} ${this.showEdit ? 'show' : ''}` }, index.h("div", { key: 'c49847d5a6ca7a90f27889afe26f6c30c1959676', class: "main-color-canvas-container" }, index.h("canvas", { key: '44531a25415492782d70d070aacf17797f9e3818', ref: (el) => this.colorCanvas = el, width: 256, height: 150, onMouseDown: (e) => this.onColorMouseDown(e) }), index.h("div", { key: '325bc14afacafa6dddd0a9bc837c6448ff803bd8', class: "color-selector-pointer", style: {
-                left: `${(this.saturation / 100) * 256}px`,
-                top: `${((100 - this.currentVal) / 100) * 150}px`
-            } })), index.h("div", { key: 'ab6d2a987b4c317fa218e70a1602ea829505fe0a', class: "slider-container" }, index.h("div", { key: 'fe9ae897de10c04322653870cb9e5b79f61a2b86', class: "slider-group" }, index.h("div", { key: 'f39f1935c0410509f6ecbf69b718730201d70be7', class: "hue-slider-container" }, index.h("canvas", { key: '6a08c8dd36f3c9d70aa0f0438006bc4efa4df401', ref: (el) => this.hueCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onHueMouseDown(e) }), index.h("div", { key: 'a91a4f4469e3152b24bf1e7dfd3d4738eb17f661', class: "slider-pointer", style: { left: `${(this.hue / 360) * 234}px` } }))), index.h("div", { key: '2a45b1e24dcb447e515d8dbfac2ecd4032661af8', class: "slider-group" }, index.h("div", { key: 'ec945cd912ecf046ca16e7520bae48d3e998f8fd', class: "opacity-slider-container" }, index.h("canvas", { key: 'f181f9a8b16274d94377f3dd300c3bff231088df', ref: (el) => this.opacityCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onOpacityMouseDown(e) }), index.h("div", { key: '2e246b9e62991569c60024ac4f8b1ae32543e03e', class: "slider-pointer", style: { left: `${(this.opacity / 100) * 234}px` } }))), index.h("div", { key: 'c8c539dda06f8ce70b4c669a32e56cb693132f49', class: "color-info" }, index.h("div", { key: '5939e97e1331e57a5837e868ea6088b069e3c3eb', class: "color-label" }, "HEX"), index.h("input", { key: '321cebcb041223d4cb6c072f310720edcdb2391c', 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();
-
-exports.dropi_color_picker = DropiColorPicker;

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

@@ -1,37 +0,0 @@
-'use strict';
-
-var index = require('./index-C8kwDvpf.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}`;
-
-const DropiCountryFlags = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    /** 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 (index.h("figure", { key: '924adeb5372e2c02ce1c0471a162b57fc53616bd', class: `flag ${this.customStyle ?? 'flat'}` }, index.h("img", { key: '8433b69bbfc51aa5e72f8bd7166382e1d7907cfa', src: this.src, style: style, alt: `flag-${this.country}` })));
-    }
-};
-DropiCountryFlags.style = dropiCountryFlagsCss();
-
-exports.dropi_country_flags = DropiCountryFlags;