@dropi/ui 0.1.21 → 0.1.23

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

@@ -1,129 +0,0 @@
-import { h } from "@stencil/core";
-/**
- * @component dropi-country-flags
- * Displays a country flag image. Supports circle, rectangle, and flat styles.
- *
- * @example
- * <dropi-country-flags country="CO" style="circle"></dropi-country-flags>
- */
-export class DropiCountryFlags {
-    /** ISO 3166-1 alpha-2 country code (e.g. "CO", "US") */
-    country = '';
-    /** Visual style: circle uses circle-flags CDN, rectangle/flat uses flagsapi */
-    customStyle = 'flat';
-    /** Width in px */
-    width = '';
-    /** Height in px */
-    height = '';
-    get src() {
-        const code = (this.country || '').toUpperCase();
-        if (this.customStyle === 'circle') {
-            return `https://hatscripts.github.io/circle-flags/flags/${code.toLowerCase()}.svg`;
-        }
-        return `https://flagsapi.com/${code}/flat/64.png`;
-    }
-    render() {
-        const style = {};
-        if (this.width)
-            style['width'] = this.width.includes('px') ? this.width : `${this.width}px`;
-        if (this.height)
-            style['height'] = this.height.includes('px') ? this.height : `${this.height}px`;
-        return (h("figure", { key: '08e6efa91f51eb4c408ae868cef6a2c449e7ac2f', class: `flag ${this.customStyle}` }, h("img", { key: 'd0c24fdb98b1c2561f36dc70663e07ccea7802ca', src: this.src, style: style, alt: `flag-${this.country}` })));
-    }
-    static get is() { return "dropi-country-flags"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["dropi-country-flags.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["dropi-country-flags.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "country": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "ISO 3166-1 alpha-2 country code (e.g. \"CO\", \"US\")"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "country",
-                "defaultValue": "''"
-            },
-            "customStyle": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'circle' | 'rectangle' | 'flat'",
-                    "resolved": "\"circle\" | \"flat\" | \"rectangle\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Visual style: circle uses circle-flags CDN, rectangle/flat uses flagsapi"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "custom-style",
-                "defaultValue": "'flat'"
-            },
-            "width": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Width in px"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "width",
-                "defaultValue": "''"
-            },
-            "height": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Height in px"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "height",
-                "defaultValue": "''"
-            }
-        };
-    }
-}

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);
-}