@dropi/ui 0.1.19 → 0.1.21

package/dist/collection/components/dropi-city-selector/dropi-city-selector.js

@@ -0,0 +1,234 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-city-selector
+ * Multi-select city picker with grouped options and chip display.
+ * Pass options as a JSON string or CityGroup[] array.
+ *
+ * @example
+ * <dropi-city-selector
+ *   options='[{"label":"Cundinamarca","value":"CUN","items":[{"label":"Bogotá","value":"BOG"}]}]'
+ *   placeholder="Selecciona ciudades"
+ * ></dropi-city-selector>
+ */
+export class DropiCitySelector {
+    /** 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 = '';
+    el;
+    handleDocClick(e) {
+        if (this.isOpen && !e.composedPath().includes(this.el)) {
+            this.isOpen = false;
+        }
+    }
+    optionsChanged(val) {
+        this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : val;
+    }
+    selectedChanged(val) {
+        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: 'af6acd88ea001105c036726bed11e0caa6012f10', class: { 'city-selector': true, 'city-selector--disabled': this.disabled } }, h("button", { key: '4a5c368ddea3f43ef9ef42dc68f28b47b642aadb', type: "button", class: "selector-trigger", disabled: this.disabled, onClick: () => this.toggle(), "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, h("div", { key: '769288d6567d2f6d453b81198e3ab456c5042443', class: "chips-area" }, this.selected.length === 0 && (h("span", { key: '152b570fd02028d8e1788ced03d56f3853dd98d4', 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", width: "10px", height: "10px", color: "Primary-Primary-500" })))))), h("dropi-icon", { key: '806ec368945b587fcb9125ca3a262ff2c6f9247c', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', width: "16px", height: "16px", color: "Gray-Gray-500" })), this.isOpen && (h("div", { key: '1249ca520defb5fd21d5c5da098c93c3e66bebd3', class: "dropdown", role: "listbox" }, h("div", { key: '244a7a22db381014da6672e310f2d21a9cf39a63', class: "search-wrap" }, h("div", { key: '871a48407ec66d7e9e95a9ab32ff8d74842a4e6e', class: "search-field" }, h("input", { key: '20d5543bae44e70fc4fd61470cae413f29c17687', class: "search-input", type: "text", placeholder: "Buscar...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; }, autoComplete: "off" }), h("span", { key: '44bde8e0ddb6cbade01e4743c9d111fa7c65aa94', class: "search-icon" }, h("dropi-icon", { key: 'c577e87fd8ffd3d4d444541840a139430c96e503', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" })))), h("div", { key: 'c7abe328e26838d49465d3b2767a2b90806e0e05', class: "options-list" }, groups.length === 0 && (h("div", { key: '1f583667dda2e6540254b3155029c97647cb58fb', 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", width: "10px", height: "10px", color: "Neutral-White" }))), h("span", { class: "city-label" }, city.label)));
+        })))))))));
+    }
+    static get is() { return "dropi-city-selector"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-city-selector.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-city-selector.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "options": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CityGroup[] | string",
+                    "resolved": "CityGroup[] | string",
+                    "references": {
+                        "CityGroup": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-city-selector/dropi-city-selector.tsx",
+                            "id": "src/components/dropi-city-selector/dropi-city-selector.tsx::CityGroup"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Grouped city options (array or JSON string)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "options",
+                "defaultValue": "[]"
+            },
+            "selectedCities": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "(string | number)[] | string",
+                    "resolved": "(string | number)[] | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Currently selected city values"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-cities",
+                "defaultValue": "[]"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Seleccione una ciudad'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable the selector"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "selected": {},
+            "parsedOptions": {},
+            "searchTerm": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "selectedCitiesChange",
+                "name": "selectedCitiesChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when selection changes. Detail = selected values array."
+                },
+                "complexType": {
+                    "original": "(string | number)[]",
+                    "resolved": "(string | number)[]",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "options",
+                "methodName": "optionsChanged"
+            }, {
+                "propName": "selectedCities",
+                "methodName": "selectedChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleDocClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -0,0 +1,210 @@
+: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;
+}