@dropi/ui 0.1.23 → 0.1.24

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

@@ -0,0 +1,211 @@
+:host {
+  display: block;
+  width: 100%;
+  text-align: left;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.custom-select {
+  position: relative;
+  width: 100%;
+}
+
+/* ── Label ───────────────────────────────────────────────────────── */
+label {
+  display: block;
+  font-size: var(--font-size-xs, 11px);
+  font-weight: var(--font-weight-regular, 400);
+  color: var(--Gray-Gray-600, #475066);
+  margin-bottom: 6px;
+}
+
+.required {
+  color: var(--Error-Error-500, #ef4444);
+  margin-left: 2px;
+}
+
+/* ── Trigger button ──────────────────────────────────────────────── */
+.select-button {
+  width: 100%;
+  height: 44px;
+  padding: 0 12px;
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-2, 8px);
+  background: var(--Neutral-White, #ffffff);
+  color: var(--Gray-Gray-500, #69738c);
+  font-size: var(--font-size-s, 14px);
+  font-family: inherit;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  text-align: left;
+  cursor: pointer;
+  transition: border-color 0.15s ease;
+}
+
+.select-button:focus {
+  outline: none;
+  border-color: var(--Info-Info-500, #3b82f6);
+}
+
+.select-button:disabled {
+  border-color: var(--Gray-Gray-200, #c3c9d9);
+  color: var(--Gray-Gray-400, #858ea6);
+  background: var(--Gray-Gray-50, #f7f8fa);
+  cursor: not-allowed;
+}
+
+.select-button.select-completed {
+  color: var(--Gray-Gray-700, #32394d);
+}
+
+.select-button.select-invalid {
+  border-color: var(--Error-Error-500, #ef4444);
+}
+
+.selected-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  overflow: hidden;
+  flex: 1;
+}
+
+.selected-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--Gray-Gray-700, #32394d);
+  font-size: var(--font-size-s, 14px);
+}
+
+.placeholder-text {
+  color: var(--Gray-Gray-400, #858ea6);
+  font-size: var(--font-size-s, 14px);
+}
+
+/* ── Flag ────────────────────────────────────────────────────────── */
+.flag-img {
+  border-radius: var(--Border-1, 4px);
+  width: 24px;
+  height: 24px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+/* ── Dropdown ────────────────────────────────────────────────────── */
+.select-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  background: var(--Neutral-White, #ffffff);
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-2, 8px);
+  z-index: 200;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
+  overflow: hidden;
+  transition: max-height 0.2s ease, opacity 0.2s ease;
+}
+
+.select-dropdown.expanded {
+  max-height: 300px;
+  opacity: 1;
+  overflow-y: auto;
+}
+
+.select-dropdown.collapsed {
+  max-height: 0;
+  opacity: 0;
+  pointer-events: none;
+  border-color: transparent;
+  box-shadow: none;
+}
+
+/* Scrollbar — siempre claro, nunca negro */
+.select-dropdown::-webkit-scrollbar { width: 6px; }
+.select-dropdown::-webkit-scrollbar-track { background: transparent; }
+.select-dropdown::-webkit-scrollbar-thumb {
+  background: var(--Gray-Gray-200, #c3c9d9);
+  border-radius: 4px;
+}
+.select-dropdown::-webkit-scrollbar-thumb:hover {
+  background: var(--Gray-Gray-300, #a3abbf);
+}
+
+/* ── Search ──────────────────────────────────────────────────────── */
+.search-li {
+  padding: 10px 12px;
+  position: sticky;
+  top: 0;
+  background: var(--Neutral-White, #ffffff);
+  z-index: 1;
+  border-bottom: 1px solid var(--Gray-Gray-100, #e6eaf2);
+}
+
+.search-field {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.country-search {
+  width: 100%;
+  height: 36px;
+  padding: 0 36px 0 12px;
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-2, 8px);
+  outline: none;
+  font-size: var(--font-size-s, 14px);
+  font-family: inherit;
+  color: var(--Gray-Gray-700, #32394d);
+  background: var(--Gray-Gray-50, #f7f8fa);
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.country-search:focus {
+  border-color: var(--Info-Info-500, #50a5f1);
+  background: var(--Neutral-White, #ffffff);
+}
+
+.country-search::placeholder {
+  color: var(--Gray-Gray-400, #858ea6);
+}
+
+.search-icon {
+  position: absolute;
+  right: 10px;
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+}
+
+/* ── Options ─────────────────────────────────────────────────────── */
+.option {
+  width: 100%;
+  min-height: 44px;
+  padding: 10px 16px;
+  border: none;
+  background: transparent;
+  text-align: left;
+  color: var(--Gray-Gray-700, #32394d);
+  font-size: var(--font-size-s, 14px);
+  font-family: inherit;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  transition: background 0.1s ease;
+  white-space: nowrap;
+}
+
+.option:hover {
+  background: var(--Gray-Gray-50, #f7f8fa);
+}

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

@@ -0,0 +1,429 @@
+import { h } from "@stencil/core";
+const COUNTRIES = [
+    { name: 'Afghanistan', code: 'AF', codePhone: '93' },
+    { name: 'Albania', code: 'AL', codePhone: '355' },
+    { name: 'Algeria', code: 'DZ', codePhone: '213' },
+    { name: 'Argentina', code: 'AR', codePhone: '54' },
+    { name: 'Australia', code: 'AU', codePhone: '61' },
+    { name: 'Austria', code: 'AT', codePhone: '43' },
+    { name: 'Azerbaijan', code: 'AZ', codePhone: '994' },
+    { name: 'Bahamas', code: 'BS', codePhone: '1242' },
+    { name: 'Bahrain', code: 'BH', codePhone: '973' },
+    { name: 'Bangladesh', code: 'BD', codePhone: '880' },
+    { name: 'Belgium', code: 'BE', codePhone: '32' },
+    { name: 'Bolivia', code: 'BO', codePhone: '591' },
+    { name: 'Brazil', code: 'BR', codePhone: '55' },
+    { name: 'Cambodia', code: 'KH', codePhone: '855' },
+    { name: 'Canada', code: 'CA', codePhone: '1' },
+    { name: 'Chile', code: 'CL', codePhone: '56' },
+    { name: 'China', code: 'CN', codePhone: '86' },
+    { name: 'Colombia', code: 'CO', codePhone: '57' },
+    { name: 'Costa Rica', code: 'CR', codePhone: '506' },
+    { name: 'Cuba', code: 'CU', codePhone: '53' },
+    { name: 'Czech Republic', code: 'CZ', codePhone: '420' },
+    { name: 'Denmark', code: 'DK', codePhone: '45' },
+    { name: 'Dominican Republic', code: 'DO', codePhone: '1' },
+    { name: 'Ecuador', code: 'EC', codePhone: '593' },
+    { name: 'Egypt', code: 'EG', codePhone: '20' },
+    { name: 'El Salvador', code: 'SV', codePhone: '503' },
+    { name: 'Estonia', code: 'EE', codePhone: '372' },
+    { name: 'Ethiopia', code: 'ET', codePhone: '251' },
+    { name: 'Finland', code: 'FI', codePhone: '358' },
+    { name: 'France', code: 'FR', codePhone: '33' },
+    { name: 'Germany', code: 'DE', codePhone: '49' },
+    { name: 'Ghana', code: 'GH', codePhone: '233' },
+    { name: 'Greece', code: 'GR', codePhone: '30' },
+    { name: 'Guatemala', code: 'GT', codePhone: '502' },
+    { name: 'Honduras', code: 'HN', codePhone: '504' },
+    { name: 'Hong Kong', code: 'HK', codePhone: '852' },
+    { name: 'Hungary', code: 'HU', codePhone: '36' },
+    { name: 'India', code: 'IN', codePhone: '91' },
+    { name: 'Indonesia', code: 'ID', codePhone: '62' },
+    { name: 'Iran, Islamic Republic Of', code: 'IR', codePhone: '98' },
+    { name: 'Iraq', code: 'IQ', codePhone: '964' },
+    { name: 'Ireland', code: 'IE', codePhone: '353' },
+    { name: 'Israel', code: 'IL', codePhone: '972' },
+    { name: 'Italy', code: 'IT', codePhone: '39' },
+    { name: 'Jamaica', code: 'JM', codePhone: '1876' },
+    { name: 'Japan', code: 'JP', codePhone: '81' },
+    { name: 'Jordan', code: 'JO', codePhone: '962' },
+    { name: 'Kazakhstan', code: 'KZ', codePhone: '7' },
+    { name: 'Kenya', code: 'KE', codePhone: '254' },
+    { name: 'Kuwait', code: 'KW', codePhone: '965' },
+    { name: 'Lebanon', code: 'LB', codePhone: '961' },
+    { name: 'Malaysia', code: 'MY', codePhone: '60' },
+    { name: 'Mexico', code: 'MX', codePhone: '52' },
+    { name: 'Morocco', code: 'MA', codePhone: '212' },
+    { name: 'Netherlands', code: 'NL', codePhone: '31' },
+    { name: 'New Zealand', code: 'NZ', codePhone: '64' },
+    { name: 'Nicaragua', code: 'NI', codePhone: '505' },
+    { name: 'Nigeria', code: 'NG', codePhone: '234' },
+    { name: 'Norway', code: 'NO', codePhone: '47' },
+    { name: 'Pakistan', code: 'PK', codePhone: '92' },
+    { name: 'Panama', code: 'PA', codePhone: '507' },
+    { name: 'Paraguay', code: 'PY', codePhone: '595' },
+    { name: 'Peru', code: 'PE', codePhone: '51' },
+    { name: 'Philippines', code: 'PH', codePhone: '63' },
+    { name: 'Poland', code: 'PL', codePhone: '48' },
+    { name: 'Portugal', code: 'PT', codePhone: '351' },
+    { name: 'Qatar', code: 'QA', codePhone: '974' },
+    { name: 'Romania', code: 'RO', codePhone: '40' },
+    { name: 'Russian Federation', code: 'RU', codePhone: '7' },
+    { name: 'Saudi Arabia', code: 'SA', codePhone: '966' },
+    { name: 'Singapore', code: 'SG', codePhone: '65' },
+    { name: 'South Africa', code: 'ZA', codePhone: '27' },
+    { name: 'Spain', code: 'ES', codePhone: '34' },
+    { name: 'Sri Lanka', code: 'LK', codePhone: '94' },
+    { name: 'Sweden', code: 'SE', codePhone: '46' },
+    { name: 'Switzerland', code: 'CH', codePhone: '41' },
+    { name: 'Taiwan, Province of China', code: 'TW', codePhone: '886' },
+    { name: 'Thailand', code: 'TH', codePhone: '66' },
+    { name: 'Tunisia', code: 'TN', codePhone: '216' },
+    { name: 'Turkey', code: 'TR', codePhone: '90' },
+    { name: 'Uganda', code: 'UG', codePhone: '256' },
+    { name: 'Ukraine', code: 'UA', codePhone: '380' },
+    { name: 'United Arab Emirates', code: 'AE', codePhone: '971' },
+    { name: 'United Kingdom', code: 'GB', codePhone: '44' },
+    { name: 'United States', code: 'US', codePhone: '1' },
+    { name: 'Uruguay', code: 'UY', codePhone: '598' },
+    { name: 'Venezuela', code: 'VE', codePhone: '58' },
+    { name: 'Viet Nam', code: 'VN', codePhone: '84' },
+    { name: 'Zimbabwe', code: 'ZW', codePhone: '263' },
+];
+/**
+ * @component dropi-country-selector
+ * Searchable country dropdown with flag images. Mirrors Angular dropi-country-selector.
+ *
+ * @example
+ * <dropi-country-selector label="País" placeholder="Selecciona un país"></dropi-country-selector>
+ */
+export class DropiCountrySelector {
+    /** Label above the select */
+    label = '';
+    /** Placeholder when nothing is selected */
+    placeholder = 'Selecciona un país';
+    /** Pre-selected country code (ISO 3166-1 alpha-2) */
+    currentSelection = '';
+    /** Whether the selector is disabled */
+    disabled = false;
+    /** Show asterisk for required field */
+    showObligatory = false;
+    /** Show error border */
+    hasError = false;
+    /** Helper text below the select */
+    textHelper = '';
+    /** Search term for filtering (matches Angular `searchTerm`) */
+    searchTerm = '';
+    /**
+     * Convenience object prop — matches Angular `selectProperties: SelectProperties`.
+     * When provided, its non-null fields override individual props.
+     */
+    selectProperties = null;
+    /** Emitted when a country is selected. Detail is the CountryItem. */
+    onChangeSelect;
+    isOpen = false;
+    selected = null;
+    el;
+    handleDocClick(e) {
+        if (this.isOpen && !e.composedPath().includes(this.el)) {
+            this.isOpen = false;
+        }
+    }
+    searchInputRef;
+    currentSelectionChanged(val) {
+        this.selected = COUNTRIES.find(c => c.code === val) || null;
+    }
+    selectPropertiesChanged(val) {
+        if (!val)
+            return;
+        if (val.label !== undefined)
+            this.label = val.label;
+        if (val.placeholder !== undefined)
+            this.placeholder = val.placeholder;
+        if (val.showObligatory !== undefined)
+            this.showObligatory = val.showObligatory;
+        if (val.textHelper !== undefined)
+            this.textHelper = val.textHelper;
+        if (val.hasError !== undefined)
+            this.hasError = val.hasError;
+    }
+    componentWillLoad() {
+        if (this.selectProperties)
+            this.selectPropertiesChanged(this.selectProperties);
+        if (this.currentSelection)
+            this.currentSelectionChanged(this.currentSelection);
+    }
+    get filtered() {
+        if (!this.searchTerm)
+            return COUNTRIES;
+        const t = this.searchTerm.toLowerCase();
+        return COUNTRIES.filter(c => c.name.toLowerCase().includes(t));
+    }
+    open() {
+        if (this.disabled)
+            return;
+        this.isOpen = !this.isOpen;
+        if (this.isOpen) {
+            setTimeout(() => this.searchInputRef?.focus(), 50);
+        }
+    }
+    select(country) {
+        this.selected = country;
+        this.isOpen = false;
+        this.searchTerm = '';
+        this.currentSelection = country.code;
+        this.onChangeSelect.emit(country);
+    }
+    render() {
+        return (h("div", { key: '78179f7b5e30c4eb7d5345431f476f625a60534a', class: "custom-select" }, this.label && (h("label", { key: '13566e714a55c3820facffab298a97fc37c97133' }, this.label, this.showObligatory && h("span", { key: '7772ddd762bd50da043ed030b5a3442e10de47b0', class: "required" }, "*"))), h("button", { key: '649759c1d921318a48fd1abf8e71977d52b6ae2d', type: "button", class: {
+                'select-button': true,
+                'select-completed': !!this.selected,
+                'select-invalid': this.hasError,
+            }, disabled: this.disabled, onClick: () => this.open() }, h("div", { key: '79df14d64f598d312a1cd82f294edf8aa14ed32e', class: "selected-content" }, this.selected ? (h("span", { class: "selected-option" }, h("img", { class: "flag-img", src: `https://flagsapi.com/${this.selected.code}/shiny/24.png`, alt: this.selected.name }), this.selected.name)) : (h("span", { class: "placeholder-text" }, this.placeholder))), h("dropi-icon", { key: 'dfa717ce51975386fab6a3af796637a27a8cb039', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', width: "20px", height: "20px", color: "Gray-Gray-500" })), h("ul", { key: '4f72db336c9d1bc1ce149279970cdaa4dcaa4f77', class: `select-dropdown${this.isOpen ? ' expanded' : ' collapsed'}` }, h("li", { key: '3badbda75f609e979f5edf7ad3f5783bf9cdf001', class: "search-li" }, h("div", { key: 'cae7ee12d3d3d40a3bb9728f4c109cd0ba513995', class: "search-field" }, h("input", { key: '82b7703b0531c80d51b5fb70d3e2f0b804e3089f', ref: (el) => { this.searchInputRef = el; }, type: "text", class: "country-search", placeholder: "Buscar pa\u00EDs...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; } }), h("span", { key: '45378fac8b73b656fc8c5bb16d7f072398890508', class: "search-icon" }, h("dropi-icon", { key: '39c3a426407fd68367a3494c3d319bdbcf9692bb', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" })))), this.filtered.map(country => (h("li", { key: country.code }, h("button", { class: "option", type: "button", onClick: () => this.select(country) }, h("img", { class: "flag-img", src: `https://flagsapi.com/${country.code}/shiny/24.png`, alt: country.name }), country.name))))), this.textHelper && (h("div", { key: '58f747d7cfecd23d3bdc166f21c3560e642f336d', class: { 'select-helper': true, 'select-helper-error': this.hasError } }, this.hasError && h("dropi-icon", { key: 'fb68e291bd8dcfe5955281504b3de80699fa0ff0', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), h("span", { key: '9d5287f387f09f2b90b41f14f05c3572a44d74a3' }, this.textHelper)))));
+    }
+    static get is() { return "dropi-country-selector"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-country-selector.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-country-selector.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label above the select"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder when nothing is selected"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Selecciona un pa\u00EDs'"
+            },
+            "currentSelection": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pre-selected country code (ISO 3166-1 alpha-2)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current-selection",
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the selector is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "showObligatory": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show asterisk for required field"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-obligatory",
+                "defaultValue": "false"
+            },
+            "hasError": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show error border"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "has-error",
+                "defaultValue": "false"
+            },
+            "textHelper": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text below the select"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-helper",
+                "defaultValue": "''"
+            },
+            "searchTerm": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Search term for filtering (matches Angular `searchTerm`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-term",
+                "defaultValue": "''"
+            },
+            "selectProperties": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Convenience object prop \u2014 matches Angular `selectProperties: SelectProperties`.\nWhen provided, its non-null fields override individual props."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "select-properties",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "selected": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "onChangeSelect",
+                "name": "onChangeSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a country is selected. Detail is the CountryItem."
+                },
+                "complexType": {
+                    "original": "CountryItem",
+                    "resolved": "CountryItem",
+                    "references": {
+                        "CountryItem": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-country-selector/dropi-country-selector.tsx",
+                            "id": "src/components/dropi-country-selector/dropi-country-selector.tsx::CountryItem"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "currentSelection",
+                "methodName": "currentSelectionChanged"
+            }, {
+                "propName": "selectProperties",
+                "methodName": "selectPropertiesChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleDocClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}