@dropi/ui 0.1.22 → 0.1.23

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

@@ -1,211 +0,0 @@
-: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

@@ -1,429 +0,0 @@
-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
-            }];
-    }
-}