@dropi/ui 0.1.54 → 999.0.0

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

@@ -1,563 +0,0 @@
-import { h } from "@stencil/core";
-const PORTAL_CSS = `
-.select-dropdown {
-  background: #ffffff;
-  border: 1px solid #c3c9d9;
-  border-radius: 8px;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  box-shadow: 0 8px 24px rgba(0,0,0,.10);
-  overflow: hidden;
-  transition: max-height .2s ease, opacity .2s ease;
-  font-family: inherit;
-  font-size: 14px;
-}
-.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; }
-.select-dropdown::-webkit-scrollbar { width: 6px; }
-.select-dropdown::-webkit-scrollbar-track { background: transparent; }
-.select-dropdown::-webkit-scrollbar-thumb { background: #c3c9d9; border-radius: 4px; }
-.search-li { padding: 10px 12px; position: sticky; top: 0; background: #ffffff; z-index: 1; border-bottom: 1px solid #e6eaf2; }
-.search-field { position: relative; display: flex; align-items: center; }
-.country-search { width: 100%; height: 36px; padding: 0 36px 0 12px; border: 1px solid #c3c9d9; border-radius: 8px; outline: none; font-size: 14px; font-family: inherit; color: #32394d; background: #f7f8fa; }
-.country-search:focus { border-color: #50a5f1; background: #ffffff; }
-.country-search::placeholder { color: #858ea6; }
-.search-icon { position: absolute; right: 10px; display: flex; align-items: center; pointer-events: none; }
-.option { width: 100%; min-height: 44px; padding: 10px 16px; border: none; background: transparent; text-align: left; color: #32394d; font-size: 14px; font-family: inherit; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: background .1s ease; white-space: nowrap; }
-.option:hover { background: #f7f8fa; }
-.flag-img { border-radius: 4px; width: 24px; height: 24px; object-fit: cover; flex-shrink: 0; }
-`;
-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 {
-    internals;
-    /** Name for native form submission */
-    name;
-    /** 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;
-    /** When set to "body", the dropdown renders with fixed positioning to escape parent overflow clipping */
-    appendTo = '';
-    /** Emitted when a country is selected. Detail is the CountryItem. */
-    dropiChange;
-    isOpen = false;
-    selected = null;
-    el;
-    buttonRef;
-    portalContainer = null;
-    portalFocusedSelector = null;
-    handleDocClick(e) {
-        if (!this.isOpen)
-            return;
-        const path = e.composedPath();
-        if (path.includes(this.el))
-            return;
-        if (this.portalContainer && path.includes(this.portalContainer))
-            return;
-        this.isOpen = false;
-    }
-    searchInputRef;
-    currentSelectionChanged(val) {
-        this.selected = COUNTRIES.find(c => c.code === val) || null;
-        this.internals.setFormValue(val);
-    }
-    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);
-        this.internals.setFormValue(this.currentSelection ?? '');
-    }
-    componentDidLoad() {
-        if (this.appendTo !== 'body')
-            return;
-        this.portalContainer = document.createElement('div');
-        const style = document.createElement('style');
-        style.textContent = PORTAL_CSS;
-        this.portalContainer.appendChild(style);
-        document.body.appendChild(this.portalContainer);
-    }
-    disconnectedCallback() {
-        this.returnUlToShadow();
-        this.portalContainer?.remove();
-        this.portalContainer = null;
-    }
-    componentWillRender() {
-        if (!this.portalContainer)
-            return;
-        const active = document.activeElement;
-        if (active && this.portalContainer.contains(active)) {
-            this.portalFocusedSelector = '.' + Array.from(active.classList).join('.');
-        }
-        this.returnUlToShadow();
-    }
-    componentDidRender() {
-        if (!this.portalContainer || !this.buttonRef)
-            return;
-        const ul = this.el.shadowRoot?.querySelector('ul.select-dropdown');
-        if (!ul)
-            return;
-        const rect = this.buttonRef.getBoundingClientRect();
-        ul.style.cssText = `position:fixed;top:${rect.bottom + 4}px;left:${rect.left}px;width:${rect.width}px;z-index:11000;`;
-        this.portalContainer.appendChild(ul);
-        if (this.portalFocusedSelector) {
-            const el = this.portalContainer.querySelector(this.portalFocusedSelector);
-            if (el) {
-                const len = el.value?.length ?? 0;
-                el.focus();
-                el.setSelectionRange?.(len, len);
-            }
-            this.portalFocusedSelector = null;
-        }
-    }
-    returnUlToShadow() {
-        if (!this.portalContainer)
-            return;
-        const ul = this.portalContainer.querySelector('ul.select-dropdown');
-        if (ul)
-            this.el.shadowRoot?.querySelector('.custom-select')?.appendChild(ul);
-    }
-    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.dropiChange.emit(country);
-    }
-    render() {
-        return (h("div", { key: '1e590f390f45a91df010db5a25139f5a5b234105', class: "custom-select" }, this.label && (h("label", { key: '073b9c7fb9c09d0addf66bce1c132632ab726b70' }, this.label, this.showObligatory && h("span", { key: '8471da6b6004c35e71d04c0d649a796391ffb703', class: "required" }, "*"))), h("button", { key: '45fdbd8ae914084fd713708947ee6b2256b78b32', type: "button", ref: (el) => { this.buttonRef = el; }, class: {
-                'select-button': true,
-                'select-completed': !!this.selected,
-                'select-invalid': this.hasError,
-            }, disabled: this.disabled, onClick: () => this.open() }, h("div", { key: '75100da9fe6ca3b3e1c60d446374a1ed90ab8419', 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: '3d4ffee3933d05e02236f1283128cb30a876870f', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" })), h("ul", { key: '5ab2559993f7100c52749b57e15b42605ca503b2', class: `select-dropdown${this.isOpen ? ' expanded' : ' collapsed'}` }, h("li", { key: 'da243d50aa04ab24f2ac6b20dd152031458cd474', class: "search-li" }, h("div", { key: 'b27ca2961821252eed8b2917b47b5c03674f5af6', class: "search-field" }, h("input", { key: '4438520038bcf88efabf67d9e6745b51b7f089d3', 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: 'd8753c452b5054e23213b94e83884f5297862abc', class: "search-icon" }, h("dropi-icon", { key: '3fac8e38cf990990a91a8dfda4701796237e8c44', name: "Search", iconWidth: "16px", iconHeight: "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: '68bd0e375e7f31e1927a8179070e832d4fe20c94', class: { 'select-helper': true, 'select-helper-error': this.hasError } }, this.hasError && h("dropi-icon", { key: '6328385caf1f3518c9fa0da9f30469d12c0940ef', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: '704ee063a80566aed85849c2649c399796069e86' }, this.textHelper)))));
-    }
-    static get is() { return "dropi-country-selector"; }
-    static get encapsulation() { return "shadow"; }
-    static get formAssociated() { return true; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["dropi-country-selector.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["dropi-country-selector.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Name for native form submission"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "name"
-            },
-            "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"
-            },
-            "appendTo": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "When set to \"body\", the dropdown renders with fixed positioning to escape parent overflow clipping"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "append-to",
-                "defaultValue": "''"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "isOpen": {},
-            "selected": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "dropiChange",
-                "name": "dropiChange",
-                "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
-            }];
-    }
-    static get attachInternalsMemberName() { return "internals"; }
-}