@dropi/ui 0.1.37 → 0.1.42

package/dist/dropi-ui/dropi-chips.entry.js

@@ -0,0 +1,31 @@
+import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.js';
+
+const dropiChipsCss = () => `:host{display:inline-flex}*,*::before,*::after{box-sizing:border-box}.chip{display:inline-flex;align-items:center;justify-content:center;gap:var(--Size-1, 4px);height:24px;padding:0 var(--Size-2, 8px);border-radius:var(--Border-2, 8px);font-size:var(--font-size-xs, 10px);font-family:inherit;width:fit-content;max-width:200px}.chip--filters{background:var(--Primary-Primary-50, #fff5eb);border:1px solid var(--Primary-Primary-200, #fbd4a3);color:var(--Primary-Primary-600, #d4872e)}.chip--fill{background:var(--Gray-Gray-100, #e6eaf2);border:1px solid transparent;color:var(--Gray-Gray-700, #32394d)}.chip__avatar{width:16px;height:16px;border-radius:50%;object-fit:cover;flex-shrink:0}.chip__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.chip__close{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:none;border:none;padding:0;cursor:pointer;color:inherit;opacity:0.7;transition:opacity 0.15s}.chip__close:hover{opacity:1}`;
+
+const DropiChips = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiClose = createEvent(this, "dropiClose", 7);
+    }
+    /** Visual style (named customStyle to avoid conflict with HTMLElement.style) */
+    customStyle = 'fill';
+    /** Content type */
+    type = 'icon';
+    /** Avatar image URL (when type = 'avatar') */
+    urlImg = '';
+    /** Show the close/remove icon */
+    showIcon = false;
+    /** Icon name (when type = 'icon') */
+    icon = '';
+    /** Emitted when the close icon is clicked */
+    dropiClose;
+    render() {
+        return (h("div", { key: '394a3ff5219535e9f4e1d6c9fbb320c32f1ce2e7', class: { 'chip': true, [`chip--${this.customStyle}`]: true } }, this.type === 'avatar' && this.urlImg && (h("img", { key: 'c7ea7ce319e2ab0a179f7b0b61ad9fe39be7c1ec', class: "chip__avatar", src: this.urlImg, alt: "" })), this.type === 'icon' && this.icon && (h("dropi-icon", { key: '67e2edfbe37af83868a665cf65a85ecc27b7cfb5', class: "chip__pre-icon", name: this.icon, iconWidth: "14px", iconHeight: "14px", color: "currentColor" })), h("span", { key: '1916b1796d69cf6742177b8f4013315323bdf16f', class: "chip__text" }, h("slot", { key: '167e1b230b1c4406ba3f40ba7783966c6b523c96' })), this.showIcon && (h("button", { key: '118d46db1615e9ed14485500b5a754407c361139', class: "chip__close", onClick: () => this.dropiClose.emit(), "aria-label": "Eliminar" }, h("dropi-icon", { key: '1639e4ae068d0361512469d2915b392101b2b923', name: "Cross-circle", iconWidth: "14px", iconHeight: "14px", color: "currentColor" })))));
+    }
+};
+DropiChips.style = dropiChipsCss();
+
+export { DropiChips as dropi_chips };
+//# sourceMappingURL=dropi-chips.entry.esm.js.map
+
+//# sourceMappingURL=dropi-chips.entry.js.map

package/dist/dropi-ui/dropi-chips.entry.js.map

@@ -0,0 +1 @@
+{"file":"dropi-chips.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,y9BAAy9B,CAAC;;MCe1+B,UAAU,GAAA,MAAA;;;;;;IAEb,WAAW,GAAc,MAAM;;IAE/B,IAAI,GAAa,MAAM;;IAEvB,MAAM,GAAW,EAAE;;IAEnB,QAAQ,GAAY,KAAK;;IAEzB,IAAI,GAAW,EAAE;;AAGhB,IAAA,UAAU;IAEnB,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAA,MAAA,EAAS,IAAI,CAAC,WAAW,CAAA,CAAE,GAAG,IAAI,EAAE,EAAA,EAE9D,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,MAAM,KACpC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAC,EAAE,EAAA,CAAG,CACtD,EAEA,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,IAAI,KAChC,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,SAAS,EAAC,MAAM,EAAC,UAAU,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,GAAG,CAC/G,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,YAAY,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EAEN,IAAI,CAAC,QAAQ,KACZ,+DAAQ,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,EAAA,YAAA,EAAa,UAAU,EAAA,EACtF,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,IAAI,EAAC,cAAc,EAAC,SAAS,EAAC,MAAM,EAAC,UAAU,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,EAAA,CAAG,CACnF,CACV,CAEG;;;;;;;","names":[],"sources":["src/components/dropi-chips/dropi-chips.css?tag=dropi-chips&encapsulation=shadow","src/components/dropi-chips/dropi-chips.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.chip {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--Size-1, 4px);\n  height: 24px;\n  padding: 0 var(--Size-2, 8px);\n  border-radius: var(--Border-2, 8px);\n  font-size: var(--font-size-xs, 10px);\n  font-family: inherit;\n  width: fit-content;\n  max-width: 200px;\n}\n\n/* ── Style variants ─────────────────────────────────────── */\n.chip--filters {\n  background: var(--Primary-Primary-50, #fff5eb);\n  border: 1px solid var(--Primary-Primary-200, #fbd4a3);\n  color: var(--Primary-Primary-600, #d4872e);\n}\n\n.chip--fill {\n  background: var(--Gray-Gray-100, #e6eaf2);\n  border: 1px solid transparent;\n  color: var(--Gray-Gray-700, #32394d);\n}\n\n/* ── Avatar ─────────────────────────────────────────────── */\n.chip__avatar {\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  object-fit: cover;\n  flex-shrink: 0;\n}\n\n/* ── Label ──────────────────────────────────────────────── */\n.chip__text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex: 1;\n}\n\n/* ── Close button ───────────────────────────────────────── */\n.chip__close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  color: inherit;\n  opacity: 0.7;\n  transition: opacity 0.15s;\n}\n\n.chip__close:hover {\n  opacity: 1;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\nexport type ChipStyle = 'filtrers' | 'fill';\nexport type ChipType = 'icon' | 'text' | 'avatar';\n\n/**\n * @component dropi-chips\n * Chip/tag-like element with optional icon, avatar, and close button.\n * Use <slot> for the chip label text.\n */\n@Component({\n  tag: 'dropi-chips',\n  styleUrl: 'dropi-chips.css',\n  shadow: true,\n})\nexport class DropiChips {\n  /** Visual style (named customStyle to avoid conflict with HTMLElement.style) */\n  @Prop() customStyle: ChipStyle = 'fill';\n  /** Content type */\n  @Prop() type: ChipType = 'icon';\n  /** Avatar image URL (when type = 'avatar') */\n  @Prop() urlImg: string = '';\n  /** Show the close/remove icon */\n  @Prop() showIcon: boolean = false;\n  /** Icon name (when type = 'icon') */\n  @Prop() icon: string = '';\n\n  /** Emitted when the close icon is clicked */\n  @Event() dropiClose: EventEmitter<void>;\n\n  render() {\n    return (\n      <div class={{ 'chip': true, [`chip--${this.customStyle}`]: true }}>\n\n        {this.type === 'avatar' && this.urlImg && (\n          <img class=\"chip__avatar\" src={this.urlImg} alt=\"\" />\n        )}\n\n        {this.type === 'icon' && this.icon && (\n          <dropi-icon class=\"chip__pre-icon\" name={this.icon} iconWidth=\"14px\" iconHeight=\"14px\" color=\"currentColor\" />\n        )}\n\n        <span class=\"chip__text\">\n          <slot />\n        </span>\n\n        {this.showIcon && (\n          <button class=\"chip__close\" onClick={() => this.dropiClose.emit()} aria-label=\"Eliminar\">\n            <dropi-icon name=\"Cross-circle\" iconWidth=\"14px\" iconHeight=\"14px\" color=\"currentColor\" />\n          </button>\n        )}\n\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,105 @@
+import { r as registerInstance, d as createEvent, a as getElement, h } from './index-Cvp2LQOM.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) {
+        registerInstance(this, hostRef);
+        this.selectedCitiesChange = 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 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 (h("div", { key: '5b1e27677c34d0dc85dc9c8544e4b0ba9a66216b', class: { 'city-selector': true, 'city-selector--disabled': this.disabled } }, h("button", { key: 'e359c1baff0a255cd396ee35836430486bc67cd3', type: "button", class: "selector-trigger", disabled: this.disabled, onClick: () => this.toggle(), "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, h("div", { key: '082246999f826e8cfe1b2d09fd801a5d7db7e1b2', class: "chips-area" }, this.selected.length === 0 && (h("span", { key: '90453c84cae3561412f795ec1ffc01923cd87040', class: "placeholder" }, this.placeholder)), this.selected.map(val => (h("span", { class: "chip", key: String(val) }, this.getLabel(val), h("button", { type: "button", class: "chip-remove", "aria-label": "Quitar", onClick: (e) => this.removeCity(val, e) }, h("dropi-icon", { name: "Close-small", iconWidth: "10px", iconHeight: "10px", color: "Primary-Primary-500" })))))), h("dropi-icon", { key: 'f99675449127fb19fdea950db057d8c14ca62644', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-500" })), this.isOpen && (h("div", { key: '2a14a55016c19128fde45359f4b29b6f04f9b035', class: "dropdown", role: "listbox" }, h("div", { key: '1321152ed7b0d3f50b04c7f28b05f1523c41cce4', class: "search-wrap" }, h("div", { key: '7c94a7506d44cd89b83e5782cce16319f266f82c', class: "search-field" }, h("input", { key: '5f40db9a8df0adc09776b4adcfe03a4a6d1d1467', class: "search-input", type: "text", placeholder: "Buscar...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; }, autoComplete: "off" }), h("span", { key: '3140903ef4355b970c8f348e4f55d43f852e247d', class: "search-icon" }, h("dropi-icon", { key: 'b59235b0d7a685000033d2a294fbce246d0ba4c2', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), h("div", { key: 'bfd40e336b402bd92ec212466cf89e1cffb0d4be', class: "options-list" }, groups.length === 0 && (h("div", { key: '9fce9b4df1ffb122278480f0ab60255ea0c795ec', class: "no-results" }, "Sin resultados")), groups.map(group => (h("div", { key: group.value, class: "group" }, h("div", { class: "group-label" }, group.label), group.items.map(city => {
+            const isSelected = this.selected.includes(city.value);
+            return (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 }, h("span", { class: { 'checkbox': true, 'checkbox--checked': isSelected } }, isSelected && (h("dropi-icon", { name: "Check", iconWidth: "10px", iconHeight: "10px", color: "Neutral-White" }))), h("span", { class: "city-label" }, city.label)));
+        })))))))));
+    }
+    static get watchers() { return {
+        "options": [{
+                "optionsChanged": 0
+            }],
+        "selectedCities": [{
+                "selectedChanged": 0
+            }]
+    }; }
+};
+DropiCitySelector.style = dropiCitySelectorCss();
+
+export { DropiCitySelector as dropi_city_selector };
+//# sourceMappingURL=dropi-city-selector.entry.esm.js.map
+
+//# sourceMappingURL=dropi-city-selector.entry.js.map

package/dist/dropi-ui/dropi-city-selector.entry.js.map

@@ -0,0 +1 @@
+{"file":"dropi-city-selector.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-city-selector/dropi-city-selector.css?tag=dropi-city-selector&encapsulation=shadow","src/components/dropi-city-selector/dropi-city-selector.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  position: relative;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n/* ── Wrapper ──────────────────────────────────────────────────────── */\n.city-selector {\n  position: relative;\n  width: 100%;\n}\n\n/* ── Trigger ──────────────────────────────────────────────────────── */\n.selector-trigger {\n  width: 100%;\n  min-height: 44px;\n  padding: 6px 12px;\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  background: var(--Neutral-White, #ffffff);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  cursor: pointer;\n  text-align: left;\n  font-family: inherit;\n  transition: border-color 0.15s;\n}\n\n.selector-trigger:hover:not(:disabled) {\n  border-color: var(--Gray-Gray-300, #a3abbf);\n}\n\n.selector-trigger:focus {\n  outline: none;\n  border-color: var(--Info-Info-500, #50a5f1);\n}\n\n.city-selector--disabled .selector-trigger {\n  background: var(--Gray-Gray-50, #f7f8fa);\n  border-color: var(--Gray-Gray-100, #e6eaf2);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* ── Chips area ───────────────────────────────────────────────────── */\n.chips-area {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  flex: 1;\n  min-height: 26px;\n  align-items: center;\n}\n\n.placeholder {\n  color: var(--Gray-Gray-400, #858ea6);\n  font-size: var(--font-size-s, 14px);\n}\n\n.chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  background: var(--Primary-Primary-50, #fff8f0);\n  border: 1px solid var(--Primary-Primary-200, #fcd5a8);\n  border-radius: var(--Border-1, 4px);\n  padding: 2px 6px;\n  font-size: var(--font-size-xs, 12px);\n  color: var(--Primary-Primary-700, #b85c00);\n}\n\n.chip-remove {\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  display: flex;\n  align-items: center;\n}\n\n/* ── Dropdown ─────────────────────────────────────────────────────── */\n.dropdown {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  right: 0;\n  background: var(--Neutral-White, #ffffff);\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);\n  z-index: 200;\n  overflow: hidden;\n}\n\n/* ── Search ───────────────────────────────────────────────────────── */\n.search-wrap {\n  padding: 10px 12px;\n  border-bottom: 1px solid var(--Gray-Gray-100, #e6eaf2);\n}\n\n.search-field {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.search-input {\n  width: 100%;\n  height: 36px;\n  padding: 0 36px 0 12px;\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  font-size: var(--font-size-s, 14px);\n  font-family: inherit;\n  color: var(--Gray-Gray-700, #32394d);\n  background: var(--Gray-Gray-50, #f7f8fa);\n  outline: none;\n  transition: border-color 0.15s;\n}\n\n.search-input:focus {\n  border-color: var(--Info-Info-500, #50a5f1);\n  background: var(--Neutral-White, #ffffff);\n}\n\n.search-input::placeholder {\n  color: var(--Gray-Gray-400, #858ea6);\n}\n\n.search-icon {\n  position: absolute;\n  right: 10px;\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n}\n\n/* ── Options list ─────────────────────────────────────────────────── */\n.options-list {\n  max-height: 280px;\n  overflow-y: auto;\n  background: var(--Neutral-White, #ffffff);\n}\n\n/* Scrollbar refinado */\n.options-list::-webkit-scrollbar { width: 6px; }\n.options-list::-webkit-scrollbar-track { background: transparent; }\n.options-list::-webkit-scrollbar-thumb {\n  background: var(--Gray-Gray-200, #c3c9d9);\n  border-radius: 4px;\n}\n\n/* ── Group label ──────────────────────────────────────────────────── */\n.group-label {\n  padding: 14px 16px 8px;\n  font-size: var(--font-size-m, 16px);\n  font-weight: var(--font-weight-bold, 700);\n  color: var(--Gray-Gray-800, #1f2433);\n  background: var(--Neutral-White, #ffffff);\n}\n\n/* ── City option ──────────────────────────────────────────────────── */\n.city-option {\n  padding: 10px 16px;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  cursor: pointer;\n  font-size: var(--font-size-s, 14px);\n  color: var(--Gray-Gray-700, #32394d);\n  background: var(--Neutral-White, #ffffff);\n  transition: background 0.1s;\n  user-select: none;\n}\n\n.city-option:hover {\n  background: var(--Gray-Gray-50, #f7f8fa);\n}\n\n.city-option--selected .city-label {\n  color: var(--Gray-Gray-800, #1f2433);\n  font-weight: var(--font-weight-medium, 500);\n}\n\n/* ── Checkbox visual ──────────────────────────────────────────────── */\n.checkbox {\n  width: 22px;\n  height: 22px;\n  border: 1.5px solid var(--Gray-Gray-300, #c3c9d9);\n  border-radius: var(--Border-1, 6px);\n  background: var(--Neutral-White, #ffffff);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  transition: border-color 0.15s, background 0.15s;\n}\n\n.checkbox--checked {\n  border-color: var(--Primary-Primary-500, #f49a3d);\n  background: var(--Primary-Primary-500, #f49a3d);\n}\n\n.city-label {\n  flex: 1;\n}\n\n/* ── Empty ────────────────────────────────────────────────────────── */\n.no-results {\n  padding: 20px 16px;\n  text-align: center;\n  color: var(--Gray-Gray-400, #858ea6);\n  font-size: var(--font-size-s, 14px);\n}\n","import { Component, Prop, Event, EventEmitter, State, Watch, h, Element, Listen } from '@stencil/core';\n\nexport interface CityOption {\n  label: string;\n  value: string | number;\n}\n\nexport interface CityGroup {\n  label: string;\n  value: string;\n  items: CityOption[];\n}\n\n/**\n * @component dropi-city-selector\n * Multi-select city picker with grouped options and chip display.\n * Pass options as a JSON string or CityGroup[] array.\n *\n * @example\n * <dropi-city-selector\n *   options='[{\"label\":\"Cundinamarca\",\"value\":\"CUN\",\"items\":[{\"label\":\"Bogotá\",\"value\":\"BOG\"}]}]'\n *   placeholder=\"Selecciona ciudades\"\n * ></dropi-city-selector>\n */\n@Component({\n  tag: 'dropi-city-selector',\n  styleUrl: 'dropi-city-selector.css',\n  shadow: true,\n})\nexport class DropiCitySelector {\n  /** Grouped city options (array or JSON string) */\n  @Prop() options: CityGroup[] | string = [];\n  /** Currently selected city values */\n  @Prop({ mutable: true }) selectedCities: (string | number)[] | string = [];\n  /** Placeholder text */\n  @Prop() placeholder: string = 'Seleccione una ciudad';\n  /** Disable the selector */\n  @Prop() disabled: boolean = false;\n\n  /** Emitted when selection changes. Detail = selected values array. */\n  @Event() selectedCitiesChange: EventEmitter<(string | number)[]>;\n\n  @State() private isOpen: boolean = false;\n  @State() private selected: (string | number)[] = [];\n  @State() private parsedOptions: CityGroup[] = [];\n  @State() private searchTerm: string = '';\n\n  @Element() el!: HTMLElement;\n\n  @Listen('click', { target: 'document' })\n  handleDocClick(e: MouseEvent) {\n    if (this.isOpen && !e.composedPath().includes(this.el)) {\n      this.isOpen = false;\n    }\n  }\n\n  @Watch('options')\n  optionsChanged(val: CityGroup[] | string) {\n    if (val == null) { this.parsedOptions = []; return; }\n    this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val as CityGroup[]);\n  }\n\n  @Watch('selectedCities')\n  selectedChanged(val: (string | number)[] | string) {\n    if (val == null) { this.selected = []; return; }\n    this.selected = typeof val === 'string' ? JSON.parse(val) : [...(val as (string | number)[])];\n  }\n\n  componentWillLoad() {\n    this.optionsChanged(this.options);\n    this.selectedChanged(this.selectedCities);\n  }\n\n  private get filtered(): CityGroup[] {\n    if (!this.searchTerm) return this.parsedOptions;\n    const t = this.searchTerm.toLowerCase();\n    return this.parsedOptions\n      .map(g => ({ ...g, items: g.items.filter(c => c.label.toLowerCase().includes(t)) }))\n      .filter(g => g.items.length > 0);\n  }\n\n  private toggle() {\n    if (this.disabled) return;\n    this.isOpen = !this.isOpen;\n  }\n\n  private toggleCity(value: string | number, e: MouseEvent) {\n    e.stopPropagation();\n    if (this.selected.includes(value)) {\n      this.selected = this.selected.filter(v => v !== value);\n    } else {\n      this.selected = [...this.selected, value];\n    }\n    this.selectedCitiesChange.emit([...this.selected]);\n  }\n\n  private removeCity(value: string | number, e: MouseEvent) {\n    e.stopPropagation();\n    this.selected = this.selected.filter(v => v !== value);\n    this.selectedCitiesChange.emit([...this.selected]);\n  }\n\n  private getLabel(value: string | number): string {\n    for (const g of this.parsedOptions) {\n      const found = g.items.find(c => c.value == value);\n      if (found) return found.label;\n    }\n    return String(value);\n  }\n\n  render() {\n    const groups = this.filtered;\n\n    return (\n      <div class={{ 'city-selector': true, 'city-selector--disabled': this.disabled }}>\n\n        {/* ── Trigger ─────────────────────────────────────────────── */}\n        <button\n          type=\"button\"\n          class=\"selector-trigger\"\n          disabled={this.disabled}\n          onClick={() => this.toggle()}\n          aria-haspopup=\"listbox\"\n          aria-expanded={this.isOpen}\n        >\n          <div class=\"chips-area\">\n            {this.selected.length === 0 && (\n              <span class=\"placeholder\">{this.placeholder}</span>\n            )}\n            {this.selected.map(val => (\n              <span class=\"chip\" key={String(val)}>\n                {this.getLabel(val)}\n                <button\n                  type=\"button\"\n                  class=\"chip-remove\"\n                  aria-label=\"Quitar\"\n                  onClick={(e) => this.removeCity(val, e)}\n                >\n                  <dropi-icon name=\"Close-small\" iconWidth=\"10px\" iconHeight=\"10px\" color=\"Primary-Primary-500\" />\n                </button>\n              </span>\n            ))}\n          </div>\n          <dropi-icon\n            name={this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2'}\n            iconWidth=\"16px\"\n            iconHeight=\"16px\"\n            color=\"Gray-Gray-500\"\n          />\n        </button>\n\n        {/* ── Dropdown ────────────────────────────────────────────── */}\n        {this.isOpen && (\n          <div class=\"dropdown\" role=\"listbox\">\n\n            {/* Search with lupa icon */}\n            <div class=\"search-wrap\">\n              <div class=\"search-field\">\n                <input\n                  class=\"search-input\"\n                  type=\"text\"\n                  placeholder=\"Buscar...\"\n                  value={this.searchTerm}\n                  onInput={(e) => { this.searchTerm = (e.target as HTMLInputElement).value; }}\n                  autoComplete=\"off\"\n                />\n                <span class=\"search-icon\">\n                  <dropi-icon name=\"Search\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-400\" />\n                </span>\n              </div>\n            </div>\n\n            {/* Options list */}\n            <div class=\"options-list\">\n              {groups.length === 0 && (\n                <div class=\"no-results\">Sin resultados</div>\n              )}\n              {groups.map(group => (\n                <div key={group.value} class=\"group\">\n                  <div class=\"group-label\">{group.label}</div>\n                  {group.items.map(city => {\n                    const isSelected = this.selected.includes(city.value);\n                    return (\n                      <div\n                        key={String(city.value)}\n                        class={{ 'city-option': true, 'city-option--selected': isSelected }}\n                        onClick={(e) => this.toggleCity(city.value, e)}\n                        role=\"option\"\n                        aria-selected={isSelected}\n                      >\n                        <span class={{ 'checkbox': true, 'checkbox--checked': isSelected }}>\n                          {isSelected && (\n                            <dropi-icon name=\"Check\" iconWidth=\"10px\" iconHeight=\"10px\" color=\"Neutral-White\" />\n                          )}\n                        </span>\n                        <span class=\"city-label\">{city.label}</span>\n                      </div>\n                    );\n                  })}\n                </div>\n              ))}\n            </div>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,320 @@
+import { r as registerInstance, d as createEvent, a as getElement, h } from './index-Cvp2LQOM.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) {
+        registerInstance(this, hostRef);
+        this.colorChange = createEvent(this, "colorChange", 7);
+    }
+    get el() { return 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 (h("div", { key: '18ea41f637e46cb88d57cb2bc513f5e6e3ef9617', class: "general-container" }, h("div", { key: '653748e883bc4deaf05739ced8e516f857a7a26b', class: "main-input-container" }, h("div", { key: 'b8a4e60b25d6017c3987fa4ea3420c78e3400db0', class: "overlay", onClick: () => this.showEditor() }), h("div", { key: 'e22f4b3e95f099e2444a46ee560fefb9f6556b65', class: "line-color-preview" }, h("div", { key: 'cf513dbb5ee9652a6d20aad0608508cae3e000af', class: "color-preview", style: { background: this.currentColor } })), h("div", { key: '025b264ae8aca0fca79f662c58250eea43ccf0e7', class: "color-info" }, h("input", { key: '60a379b53bd0cf0bb1f80d5e1bd5b4c4038686f9', type: "text", class: "color-input", value: this.currentColor, maxLength: 9, readOnly: true }))), h("div", { key: '06e15b97ba156a9aa9dec9f60f2b24c924c0ac53', class: `color-picker-container position-${this.position} ${this.showEdit ? 'show' : ''}` }, h("div", { key: 'ea9df13cdf62ae1378b600dc7689df61bec5fc9b', class: "main-color-canvas-container" }, h("canvas", { key: '5d73426ccfcccca44102300588472fe5e54744f9', ref: (el) => this.colorCanvas = el, width: 256, height: 150, onMouseDown: (e) => this.onColorMouseDown(e) }), h("div", { key: 'e710e7f8c1558ad20dcfb0f03c98969d9aee5e91', class: "color-selector-pointer", style: {
+                left: `${(this.saturation / 100) * 256}px`,
+                top: `${((100 - this.currentVal) / 100) * 150}px`
+            } })), h("div", { key: '239c7986572fade46b913629bbd374ec6f15e6fb', class: "slider-container" }, h("div", { key: '35c4231f321c42fa95f362da5bf211daf1671c79', class: "slider-group" }, h("div", { key: '20be2dc7eff210e31ab3215da10473a23db921f1', class: "hue-slider-container" }, h("canvas", { key: '0795238e2a59747c4bfbd3437a2a2fd9396dc9e2', ref: (el) => this.hueCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onHueMouseDown(e) }), h("div", { key: '17296210ecef2a958a46f23971a04da61d59402e', class: "slider-pointer", style: { left: `${(this.hue / 360) * 234}px` } }))), h("div", { key: 'af7504663561d0e811ae7ef163cce80cfa256187', class: "slider-group" }, h("div", { key: '7f3f01cfb0e4ca93403dad15787ab8acd7c1cd82', class: "opacity-slider-container" }, h("canvas", { key: '9bac8eca65bfba529748eb9788fc749b87115ca6', ref: (el) => this.opacityCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onOpacityMouseDown(e) }), h("div", { key: '34166bf45efd6f4148395ede39680164662f8a33', class: "slider-pointer", style: { left: `${(this.opacity / 100) * 234}px` } }))), h("div", { key: 'b43c40db224a560adb19fd91a8790efe11719ff9', class: "color-info" }, h("div", { key: 'aad6ef925f30835b5d8f51d23f872560bcb62360', class: "color-label" }, "HEX"), h("input", { key: 'bdb5fd6ca689251a7c566f32bc6c308873117b2c', 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();
+
+export { DropiColorPicker as dropi_color_picker };
+//# sourceMappingURL=dropi-color-picker.entry.esm.js.map
+
+//# sourceMappingURL=dropi-color-picker.entry.js.map

package/dist/dropi-ui/dropi-color-picker.entry.js.map

@@ -0,0 +1 @@
+{"file":"dropi-color-picker.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-color-picker/dropi-color-picker.css?tag=dropi-color-picker&encapsulation=shadow","src/components/dropi-color-picker/dropi-color-picker.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.general-container {\n  position: relative;\n  width: fit-content;\n}\n\n.main-input-container {\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  gap: var(--Size-3);\n  position: relative;\n  width: fit-content;\n}\n\n.main-input-container .overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 100;\n  cursor: pointer;\n}\n\n.line-color-preview {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  border: 1px solid var(--Gray-Gray-200);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 5px;\n}\n\n.line-color-preview .color-preview {\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  border: 1px solid var(--Gray-Gray-200);\n}\n\n.position-right {\n  top: 0;\n  left: 250px;\n}\n\n.position-left {\n  top: 0;\n  right: 200px;\n}\n\n.position-top {\n  bottom: 55px;\n}\n\n.position-bottom {\n  top: 55px;\n}\n\n.position-bottom::before {\n  transform: rotate(90deg);\n  left: 50%;\n  top: -15px;\n}\n\n.position-right::before {\n  left: -6px;\n  top: 10px;\n}\n\n.position-top::before {\n  transform: rotate(270deg);\n  left: 50%;\n  bottom: -15px;\n}\n\n.position-left::before {\n  transform: rotate(180deg);\n  right: -9px;\n}\n\n.color-picker-container::before {\n  content: '';\n  position: absolute;\n  width: 0;\n  height: 0;\n  border-top: 10px solid transparent;\n  border-bottom: 10px solid transparent;\n  border-right: 10px solid var(--Neutral-White);\n  z-index: 1;\n}\n\n.color-picker-container {\n  width: 280px;\n  padding: var(--Size-4);\n  background: var(--Neutral-White);\n  border-radius: var(--Size-2);\n  box-shadow: var(--Shadow-large);\n  position: absolute;\n  z-index: 100;\n  transform-origin: top left;\n  opacity: 0;\n  transition:\n    transform 0.2s ease-out,\n    opacity 0.2s ease-out;\n  pointer-events: none;\n}\n\n.color-picker-container .main-color-canvas-container {\n  position: relative;\n  margin-bottom: var(--Size-4);\n  border: 1px solid var(--Gray-Gray-200);\n  border-radius: var(--Size-1);\n  display: flex;\n  justify-self: center;\n  align-items: center;\n}\n\n.color-picker-container .main-color-canvas-container canvas {\n  display: block;\n  border-radius: var(--Size-1);\n}\n\n.color-picker-container .main-color-canvas-container .color-selector-pointer {\n  position: absolute;\n  width: var(--Size-3);\n  height: var(--Size-3);\n  border: 2px solid var(--Neutral-White);\n  border-radius: 50%;\n  transform: translate(-6px, -6px);\n  pointer-events: none;\n}\n\n.color-picker-container .slider-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--Size-3);\n}\n\n.color-picker-container .slider-container .slider-group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--Size-1);\n}\n\n.color-picker-container .slider-container .slider-group label {\n  font-size: var(--font-size-xs);\n  color: var(--Gray-Gray-500);\n  font-weight: var(--font-weight-bold);\n}\n\n.color-picker-container .slider-container .slider-group .hue-slider-container,\n.color-picker-container .slider-container .slider-group .opacity-slider-container {\n  position: relative;\n  height: var(--Size-3);\n  border-radius: var(--Size-4);\n  overflow: hidden;\n}\n\n.color-picker-container .slider-container .slider-group .hue-slider-container canvas,\n.color-picker-container .slider-container .slider-group .opacity-slider-container canvas {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.color-picker-container .slider-container .slider-group .hue-slider-container .slider-pointer,\n.color-picker-container .slider-container .slider-group .opacity-slider-container .slider-pointer {\n  position: absolute;\n  top: 0;\n  height: var(--Size-3);\n  width: var(--Size-3);\n  background: transparent;\n  border: 2px solid var(--Neutral-White);\n  border-radius: 50%;\n  pointer-events: none;\n}\n\n.color-picker-container.show {\n  transform: scale(1);\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.color-info .color-label {\n  font-size: var(--font-size-xs);\n  color: var(--Gray-Gray-500);\n  font-weight: var(--font-weight-bold);\n  text-transform: uppercase;\n  margin-bottom: var(--Size-2);\n}\n\n.color-info .color-input {\n  border: 1px solid var(--Gray-Gray-200, #ddd);\n  border-radius: var(--Size-1);\n  padding: 6px 8px;\n  font-size: var(--font-size-s);\n  width: 100%;\n  font-family: monospace;\n  text-transform: uppercase;\n  background-color: var(--Neutral-White, #ffffff);\n  color: var(--Gray-Gray-800, #1f2433);\n  outline: none;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Element, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'dropi-color-picker',\n  styleUrl: 'dropi-color-picker.css',\n  shadow: true,\n})\nexport class DropiColorPicker {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) currentColor: string = '#ffffff';\n  @Prop() position: 'top' | 'bottom' | 'left' | 'right' = 'right';\n\n  @Event() colorChange: EventEmitter<string>;\n\n  @State() private color: string = '';\n  @State() private hue: number = 0;\n  @State() private saturation: number = 0;\n  @State() private currentVal: number = 0;\n  @State() private opacity: number = 100;\n  \n  @State() private showEdit: boolean = false;\n\n  private isDragging: boolean = false;\n  private isHueDragging: boolean = false;\n  private isOpacityDragging: boolean = false;\n\n  private colorCanvas!: HTMLCanvasElement;\n  private hueCanvas!: HTMLCanvasElement;\n  private opacityCanvas!: HTMLCanvasElement;\n\n  @Watch('value')\n  onValueChange(newValue: string) {\n    if (!this.showEdit) {\n      this.color = newValue;\n      this.syncFromHex();\n    }\n  }\n\n  componentWillLoad() {\n    this.color = this.currentColor;\n    this.syncFromHex();\n  }\n\n  componentDidLoad() {\n    document.addEventListener('mousemove', this.onMouseMove.bind(this));\n    document.addEventListener('mouseup', this.onMouseUp.bind(this));\n    document.addEventListener('click', this.handleClickOutside.bind(this));\n    \n    // Defer canvas drawing slightly to ensure elements are rendered\n    setTimeout(() => {\n      if (this.hueCanvas) this.drawHueCanvas();\n      if (this.colorCanvas) this.drawColorCanvas();\n      if (this.opacityCanvas) this.drawOpacityCanvas();\n    }, 50);\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('mousemove', this.onMouseMove.bind(this));\n    document.removeEventListener('mouseup', this.onMouseUp.bind(this));\n    document.removeEventListener('click', this.handleClickOutside.bind(this));\n  }\n\n  onMouseMove(event: MouseEvent) {\n    if (this.isDragging) {\n      this.updateColorFromPosition(event);\n      return;\n    }\n    if (this.isHueDragging) {\n      this.updateHueFromPosition(event);\n      return;\n    }\n    if (this.isOpacityDragging) {\n      this.updateOpacityFromPosition(event);\n      return;\n    }\n  }\n\n  onMouseUp() {\n    this.isDragging = false;\n    this.isHueDragging = false;\n    this.isOpacityDragging = false;\n  }\n\n  handleClickOutside(event: MouseEvent) {\n    // Determine if the click target is outside the host element\n    const clickedInside = event.composedPath().includes(this.el);\n    if (!clickedInside && this.showEdit) {\n      this.showEdit = false;\n      this.currentColor = this.color;\n      this.colorChange.emit(this.color);\n    }\n  }\n\n  drawColorCanvas() {\n    if (!this.colorCanvas) return;\n    const ctx = this.colorCanvas.getContext('2d')!;\n    const width = this.colorCanvas.width;\n    const height = this.colorCanvas.height;\n\n    const saturationGradient = ctx.createLinearGradient(0, 0, width, 0);\n    saturationGradient.addColorStop(0, '#FFFFFF');\n    saturationGradient.addColorStop(1, `hsl(${this.hue ?? 0}, 100%, 50%)`);\n\n    const valueGradient = ctx.createLinearGradient(0, 0, 0, height);\n    valueGradient.addColorStop(0, 'rgba(0, 0, 0, 0)');\n    valueGradient.addColorStop(1, '#000000');\n\n    ctx.fillStyle = saturationGradient;\n    ctx.fillRect(0, 0, width, height);\n    ctx.fillStyle = valueGradient;\n    ctx.fillRect(0, 0, width, height);\n  }\n\n  drawHueCanvas() {\n    if (!this.hueCanvas) return;\n    const ctx = this.hueCanvas.getContext('2d')!;\n    const width = this.hueCanvas.width;\n    const height = this.hueCanvas.height;\n\n    const hueGradient = ctx.createLinearGradient(0, 0, width, 0);\n    for (let i = 0; i <= 360; i += 60) {\n      hueGradient.addColorStop(i / 360, `hsl(${i}, 100%, 50%)`);\n    }\n\n    ctx.fillStyle = hueGradient;\n    ctx.fillRect(0, 0, width, height);\n  }\n\n  drawOpacityCanvas() {\n    if (!this.opacityCanvas) return;\n    const ctx = this.opacityCanvas.getContext('2d')!;\n    const width = this.opacityCanvas.width;\n    const height = this.opacityCanvas.height;\n\n    ctx.clearRect(0, 0, width, height);\n    ctx.fillStyle = '#FFFFFF';\n    ctx.fillRect(0, 0, width, height);\n\n    const rgb = this.hsvToRgb(this.hue, this.saturation, this.currentVal);\n\n    const opacityGradient = ctx.createLinearGradient(0, 0, width, 0);\n    opacityGradient.addColorStop(0, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0)`);\n    opacityGradient.addColorStop(1, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 1)`);\n\n    ctx.fillStyle = opacityGradient;\n    ctx.fillRect(0, 0, width, height);\n  }\n\n  updateColor() {\n    const rgb = this.hsvToRgb(this.hue, this.saturation, this.currentVal);\n    const hex = this.rgbToHex(rgb.r, rgb.g, rgb.b, this.opacity);\n    this.color = hex;\n    this.drawColorCanvas();\n    this.drawOpacityCanvas();\n    this.currentColor = hex;\n    this.colorChange.emit(this.color);\n  }\n\n  hsvToRgb(h: number, s: number, v: number): { r: number; g: number; b: number } {\n    s /= 100;\n    v /= 100;\n\n    const c = v * s;\n    const x = c * (1 - Math.abs(((h / 60) % 2) - 1));\n    const m = v - c;\n\n    let r = 0, g = 0, b = 0;\n\n    if (h >= 0 && h < 60) { r = c; g = x; b = 0; }\n    else if (h >= 60 && h < 120) { r = x; g = c; b = 0; }\n    else if (h >= 120 && h < 180) { r = 0; g = c; b = x; }\n    else if (h >= 180 && h < 240) { r = 0; g = x; b = c; }\n    else if (h >= 240 && h < 300) { r = x; g = 0; b = c; }\n    else if (h >= 300 && h <= 360) { r = c; g = 0; b = x; }\n\n    return {\n      r: Math.round((r + m) * 255),\n      g: Math.round((g + m) * 255),\n      b: Math.round((b + m) * 255),\n    };\n  }\n\n  rgbToHex(red: number, green: number, black: number, opacity = 100) {\n    const toHex = (val: number) => {\n      const hex = Math.round(val).toString(16);\n      return hex.padStart(2, '0');\n    };\n\n    const rHex = toHex(red);\n    const gHex = toHex(green);\n    const bHex = toHex(black);\n    const alpha = Math.round((opacity / 100) * 255);\n    const aHex = toHex(alpha);\n\n    return `#${rHex}${gHex}${bHex}${aHex}`;\n  }\n\n  syncFromHex() {\n    if (/^#?[0-9A-F]{6}([0-9A-F]{2})?$/i.test(this.color)) {\n      if (!this.color.startsWith('#')) {\n        this.color = '#' + this.color;\n      }\n\n      const hex = this.color.substring(1);\n      const r = parseInt(hex.substring(0, 2), 16);\n      const g = parseInt(hex.substring(2, 4), 16);\n      const b = parseInt(hex.substring(4, 6), 16);\n      const a = hex.length === 8 ? parseInt(hex.substring(6, 8), 16) / 255 : 1;\n\n      const hsv = this.rgbToHsv(r, g, b, a);\n      this.hue = hsv.h;\n      this.saturation = hsv.s;\n      this.currentVal = hsv.v;\n      this.opacity = a * 100;\n\n      this.drawColorCanvas();\n      this.drawOpacityCanvas();\n    }\n  }\n\n  onHexInputChange(event: Event) {\n    this.color = (event.target as HTMLInputElement).value;\n    this.syncFromHex();\n  }\n\n  rgbToHsv(r: number, g: number, b: number, a: number = 1): { h: number; s: number; v: number; a: number } {\n    r /= 255;\n    g /= 255;\n    b /= 255;\n\n    const max = Math.max(r, g, b);\n    const min = Math.min(r, g, b);\n    const delta = max - min;\n\n    let h = 0;\n    if (delta !== 0) {\n      if (max === r) h = 60 * (((g - b) / delta) % 6);\n      else if (max === g) h = 60 * ((b - r) / delta + 2);\n      else if (max === b) h = 60 * ((r - g) / delta + 4);\n    }\n\n    if (h < 0) h += 360;\n\n    const s = max === 0 ? 0 : (delta / max) * 100;\n    const v = max * 100;\n\n    return {\n      h: Math.round(h),\n      s: Math.round(s),\n      v: Math.round(v),\n      a: parseFloat(a.toFixed(3)),\n    };\n  }\n\n  getCanvasPosition(canvas: HTMLCanvasElement, event: MouseEvent): { x: number; y: number } {\n    const rect = canvas.getBoundingClientRect();\n    const scaleX = canvas.width / rect.width;\n    const scaleY = canvas.height / rect.height;\n\n    return {\n      x: (event.clientX - rect.left) * scaleX,\n      y: (event.clientY - rect.top) * scaleY,\n    };\n  }\n\n  onColorMouseDown(event: MouseEvent) {\n    this.isDragging = true;\n    this.updateColorFromPosition(event);\n  }\n\n  onHueMouseDown(event: MouseEvent) {\n    this.isHueDragging = true;\n    this.updateHueFromPosition(event);\n  }\n\n  onOpacityMouseDown(event: MouseEvent) {\n    this.isOpacityDragging = true;\n    this.updateOpacityFromPosition(event);\n  }\n\n  updateColorFromPosition(event: MouseEvent) {\n    if (!this.colorCanvas) return;\n    const pos = this.getCanvasPosition(this.colorCanvas, event);\n\n    const x = Math.max(0, Math.min(pos.x, 256));\n    const y = Math.max(0, Math.min(pos.y, 150));\n\n    this.saturation = Math.round((x / 256) * 100);\n    this.currentVal = 100 - Math.round((y / 150) * 100);\n    this.updateColor();\n  }\n\n  updateHueFromPosition(event: MouseEvent) {\n    if (!this.hueCanvas) return;\n    const pos = this.getCanvasPosition(this.hueCanvas, event);\n    const x = Math.max(0, Math.min(pos.x, 256));\n    this.hue = Math.round((x / 256) * 360);\n    this.drawColorCanvas();\n    this.updateColor();\n  }\n\n  updateOpacityFromPosition(event: MouseEvent) {\n    if (!this.opacityCanvas) return;\n    const pos = this.getCanvasPosition(this.opacityCanvas, event);\n    const x = Math.max(0, Math.min(pos.x, 256));\n\n    this.opacity = Math.round((x / 256) * 100);\n    this.updateColor();\n  }\n\n  showEditor() {\n    this.showEdit = !this.showEdit;\n    this.color = this.currentColor;\n    if (this.showEdit) {\n      setTimeout(() => {\n        this.drawHueCanvas();\n        this.drawColorCanvas();\n        this.drawOpacityCanvas();\n        this.syncFromHex();\n      }, 100);\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"general-container\">\n        <div class=\"main-input-container\">\n          <div class=\"overlay\" onClick={() => this.showEditor()}></div>\n          <div class=\"line-color-preview\">\n            <div class=\"color-preview\" style={{ background: this.currentColor }}></div>\n          </div>\n          <div class=\"color-info\">\n            <input \n              type=\"text\" \n              class=\"color-input\" \n              value={this.currentColor} \n              maxLength={9} \n              readOnly \n            />\n          </div>\n        </div>\n\n        <div class={`color-picker-container position-${this.position} ${this.showEdit ? 'show' : ''}`}>\n          <div class=\"main-color-canvas-container\">\n            <canvas \n              ref={(el) => this.colorCanvas = el as HTMLCanvasElement} \n              width={256} \n              height={150} \n              onMouseDown={(e) => this.onColorMouseDown(e)}\n            ></canvas>\n            <div\n              class=\"color-selector-pointer\"\n              style={{\n                left: `${(this.saturation / 100) * 256}px`,\n                top: `${((100 - this.currentVal) / 100) * 150}px`\n              }}\n            ></div>\n          </div>\n\n          <div class=\"slider-container\">\n            <div class=\"slider-group\">\n              <div class=\"hue-slider-container\">\n                <canvas \n                  ref={(el) => this.hueCanvas = el as HTMLCanvasElement} \n                  width={256} \n                  height={20} \n                  onMouseDown={(e) => this.onHueMouseDown(e)}\n                ></canvas>\n                <div class=\"slider-pointer\" style={{ left: `${(this.hue / 360) * 234}px` }}></div>\n              </div>\n            </div>\n\n            <div class=\"slider-group\">\n              <div class=\"opacity-slider-container\">\n                <canvas\n                  ref={(el) => this.opacityCanvas = el as HTMLCanvasElement}\n                  width={256}\n                  height={20}\n                  onMouseDown={(e) => this.onOpacityMouseDown(e)}\n                ></canvas>\n                <div class=\"slider-pointer\" style={{ left: `${(this.opacity / 100) * 234}px` }}></div>\n              </div>\n            </div>\n\n            <div class=\"color-info\">\n              <div class=\"color-label\">HEX</div>\n              <input\n                type=\"text\"\n                class=\"color-input\"\n                value={this.color}\n                onInput={(e) => this.onHexInputChange(e)}\n                maxLength={9}\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}