@dropi/ui 0.1.18 → 0.1.20

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

@@ -0,0 +1,164 @@
+:host {
+  display: block;
+  width: 100%;
+  text-align: left;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.custom-select {
+  position: relative;
+  width: 100%;
+}
+
+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;
+}
+
+.select-button {
+  width: 100%;
+  height: 40px;
+  padding: 0 10px;
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-2, 8px);
+  background: var(--Neutral-White, #fff);
+  color: var(--Gray-Gray-500, #69738c);
+  font-size: var(--font-size-s, 12px);
+  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 {
+  border-color: var(--Gray-Gray-400, #858ea6);
+  color: var(--Gray-Gray-600, #475066);
+}
+
+.select-button.select-invalid {
+  border-color: var(--Error-Error-500, #ef4444);
+}
+
+.selected-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  overflow: hidden;
+}
+
+.selected-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.placeholder-text {
+  color: var(--Gray-Gray-400, #858ea6);
+}
+
+.flag-img {
+  border-radius: 16px;
+  width: 24px;
+  height: 24px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.select-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  background: var(--Neutral-White, #fff);
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-2, 8px);
+  overflow-y: auto;
+  z-index: 200;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transition: max-height 0.2s ease, opacity 0.2s ease;
+}
+
+.select-dropdown.expanded {
+  max-height: 260px;
+  opacity: 1;
+}
+
+.select-dropdown.collapsed {
+  max-height: 0;
+  opacity: 0;
+  pointer-events: none;
+  border-color: transparent;
+  box-shadow: none;
+}
+
+.search-li {
+  padding: 0;
+  position: sticky;
+  top: 0;
+  background: var(--Neutral-White, #fff);
+  z-index: 1;
+}
+
+.country-search {
+  width: 100%;
+  padding: 8px 12px;
+  border: none;
+  border-bottom: 1px solid var(--Gray-Gray-100, #e6eaf2);
+  outline: none;
+  font-size: var(--font-size-s, 12px);
+  font-family: inherit;
+  color: var(--Gray-Gray-600, #475066);
+  background: transparent;
+}
+
+.option {
+  width: 100%;
+  min-height: 40px;
+  border-radius: 0;
+  padding: 8px 12px;
+  border: none;
+  background: transparent;
+  text-align: left;
+  color: var(--Gray-Gray-600, #475066);
+  font-size: var(--font-size-s, 12px);
+  font-family: inherit;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: background 0.1s ease;
+}
+
+.option:hover {
+  background: var(--Gray-Gray-50, #f7f8fa);
+}

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

@@ -0,0 +1,327 @@
+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) */
+    value = '';
+    /** Whether the selector is disabled */
+    disabled = false;
+    /** Show asterisk for required field */
+    showObligatory = false;
+    /** Show error border */
+    invalid = false;
+    /** Emitted when a country is selected. Detail is the CountryItem. */
+    dropiCountryChange;
+    isOpen = false;
+    selected = null;
+    searchTerm = '';
+    searchInputRef;
+    valueChanged(val) {
+        this.selected = COUNTRIES.find(c => c.code === val) || null;
+    }
+    componentWillLoad() {
+        if (this.value)
+            this.valueChanged(this.value);
+    }
+    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.value = country.code;
+        this.dropiCountryChange.emit(country);
+    }
+    render() {
+        return (h("div", { key: '95320129f76f5d802d62cb282172af97607ed15b', class: "custom-select" }, this.label && (h("label", { key: '7310600a9ac9a4482240ae6452db11ea2f083ea5' }, this.label, this.showObligatory && h("span", { key: '8ff5f89823f308366fa9f9ab680d7716e136eec5', class: "required" }, "*"))), h("button", { key: 'cf73602134c204051e196a2fdce9192377e6c1dc', type: "button", class: {
+                'select-button': true,
+                'select-completed': !!this.selected,
+                'select-invalid': this.invalid,
+            }, disabled: this.disabled, onClick: () => this.open() }, h("div", { key: '29afa9af6fd5b314e38f75c496e3f6f529a795b2', 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: '722dcee79149526a9879e339279128aa23f513cc', name: this.isOpen ? 'Dropdown-up' : 'Dropdown-down', width: "20px", height: "20px", color: "Gray-Gray-500" })), h("ul", { key: '64a93caa1189e212c83aa711d8fec2df97baba1b', class: `select-dropdown${this.isOpen ? ' expanded' : ' collapsed'}` }, h("li", { key: '28f0924f7edac815645c0ee51963b8ac688312a6', class: "search-li" }, h("input", { key: 'b69a4b4a9238fe4dbc0932f8f4078989d867a224', ref: (el) => { this.searchInputRef = el; }, type: "text", class: "country-search", placeholder: "Buscar pa\u00EDs...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; } })), 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)))))));
+    }
+    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'"
+            },
+            "value": {
+                "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": "value",
+                "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"
+            },
+            "invalid": {
+                "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": "invalid",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "selected": {},
+            "searchTerm": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiCountryChange",
+                "name": "dropiCountryChange",
+                "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 watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
+}

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

@@ -0,0 +1,150 @@
+:host { display: block; width: 100%; position: relative; }
+*, *::before, *::after { box-sizing: border-box; }
+
+.dp-label {
+  display: block;
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Gray-Gray-600, #475066);
+  margin-bottom: 4px;
+}
+
+/* Trigger */
+.dp-trigger {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  gap: var(--Size-2, 8px);
+  padding: 0 var(--Size-3, 12px);
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-2, 8px);
+  background: var(--Neutral-White, #fff);
+  cursor: pointer;
+  font-family: inherit;
+  transition: border-color 0.2s;
+}
+.dp-trigger:hover:not(:disabled) { border-color: var(--Info-Info-500, #50a5f1); }
+.dp-trigger--disabled { background: var(--Gray-Gray-50, #f7f8fa); cursor: not-allowed; opacity: 0.6; }
+
+.dp-trigger__value {
+  flex: 1;
+  text-align: left;
+  font-size: var(--font-size-s, 12px);
+  color: var(--Gray-Gray-700, #32394d);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.dp-trigger__placeholder { color: var(--Gray-Gray-400, #858ea6); }
+
+/* Popup */
+.dp-popup {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  width: 280px;
+  background: var(--Neutral-White, #fff);
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-2, 8px);
+  box-shadow: 0 4px 24px rgba(0,0,0,0.1);
+  z-index: 300;
+  padding: var(--Size-3, 12px);
+}
+
+/* Navigation */
+.dp-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--Size-3, 12px);
+}
+
+.dp-nav__btn {
+  background: none;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  border-radius: var(--Border-1, 4px);
+  display: flex;
+  align-items: center;
+  transition: background 0.15s;
+}
+.dp-nav__btn:hover { background: var(--Gray-Gray-50, #f7f8fa); }
+
+.dp-nav__title {
+  font-size: var(--font-size-s, 12px);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--Gray-Gray-800, #1a2033);
+}
+
+/* Grid */
+.dp-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+}
+
+.dp-day-header {
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Gray-Gray-400, #858ea6);
+  text-align: center;
+  padding: 4px 0;
+  font-weight: var(--font-weight-bold, 700);
+}
+
+/* Day cells */
+.dp-cell {
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-xs, 10px);
+  font-family: inherit;
+  border: none;
+  border-radius: var(--Border-1, 4px);
+  cursor: pointer;
+  background: none;
+  color: var(--Gray-Gray-700, #32394d);
+  transition: background 0.15s, color 0.15s;
+}
+.dp-cell:hover:not(:disabled) { background: var(--Gray-Gray-50, #f7f8fa); }
+
+.dp-cell--other-month { color: var(--Gray-Gray-300, #a0a9c0); }
+.dp-cell--today { font-weight: var(--font-weight-bold, 700); color: var(--Primary-Primary-500, #f49a3d); }
+.dp-cell--selected, .dp-cell--range-start, .dp-cell--range-end {
+  background: var(--Primary-Primary-500, #f49a3d);
+  color: var(--Neutral-White, #fff);
+  border-radius: var(--Border-1, 4px);
+}
+.dp-cell--in-range {
+  background: var(--Primary-Primary-50, #fff5eb);
+  border-radius: 0;
+}
+.dp-cell--range-start { border-radius: var(--Border-1, 4px) 0 0 var(--Border-1, 4px); }
+.dp-cell--range-end   { border-radius: 0 var(--Border-1, 4px) var(--Border-1, 4px) 0; }
+.dp-cell--disabled { opacity: 0.35; cursor: not-allowed; }
+
+/* Footer */
+.dp-footer {
+  display: flex;
+  justify-content: space-between;
+  margin-top: var(--Size-3, 12px);
+  border-top: 1px solid var(--Gray-Gray-100, #eceef4);
+  padding-top: var(--Size-2, 8px);
+}
+
+.dp-footer__clear,
+.dp-footer__today {
+  background: none;
+  border: none;
+  padding: 4px 8px;
+  font-size: var(--font-size-xs, 10px);
+  font-family: inherit;
+  cursor: pointer;
+  border-radius: var(--Border-1, 4px);
+  transition: background 0.15s;
+}
+.dp-footer__clear { color: var(--Gray-Gray-500, #68738f); }
+.dp-footer__today { color: var(--Primary-Primary-500, #f49a3d); font-weight: var(--font-weight-bold, 700); }
+.dp-footer__clear:hover { background: var(--Gray-Gray-50, #f7f8fa); }
+.dp-footer__today:hover { background: var(--Primary-Primary-50, #fff5eb); }