@dropi/ui 0.1.23 → 0.1.24

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

@@ -0,0 +1,79 @@
+:host {
+  display: inline-block;
+  position: relative;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.custom-dropdown {
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+}
+
+.custom-dropdown.open dropi-icon {
+  transform: rotate(180deg);
+}
+
+.selected-option {
+  display: flex;
+  height: 38px;
+  padding: var(--Size-2, 8px) var(--Size-3, 12px);
+  align-items: center;
+  gap: var(--Size-2, 8px);
+  border-radius: 4px;
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  background: var(--Neutral-White, #ffffff);
+  font-size: var(--font-size-s, 12px);
+  color: var(--Gray-Gray-600, #475066);
+}
+
+.dropdown-options {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: white;
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: 6px;
+  margin-top: 4px;
+  z-index: 1000;
+  overflow-y: auto;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  padding: 0;
+  list-style: none;
+  height: 0;
+  opacity: 0;
+  visibility: hidden;
+  transition: height 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
+  max-height: 0;
+}
+
+.dropdown-options.dropdown-open {
+  max-height: 300px;
+  height: auto;
+  opacity: 1;
+  visibility: visible;
+}
+
+.dropdown-options li {
+  padding: 8px 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  font-size: var(--font-size-s, 12px);
+  color: var(--Gray-Gray-600, #475066);
+}
+
+.dropdown-options li:hover,
+.dropdown-options li.active {
+  background: var(--Gray-Gray-50, #f7f8fa);
+}
+
+@media screen and (max-width: 720px) {
+  .selected-option span,
+  .dropdown-options li span {
+    display: none;
+  }
+}

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

@@ -0,0 +1,158 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-languages-selector
+ * Dropdown to switch between languages, showing country flag + label.
+ *
+ * @example
+ * <dropi-languages-selector
+ *   languages='[{"code":"es","label":"Español","flag":"CO"},{"code":"en","label":"English","flag":"US"}]'
+ * ></dropi-languages-selector>
+ */
+export class DropiLanguagesSelector {
+    /** Language options (array or JSON string) */
+    languages = [];
+    /** Currently selected language (LanguageOption or JSON string) */
+    selectedLang = null;
+    languageChange;
+    isOpen = false;
+    parsedLanguages = [];
+    currentLang = null;
+    languagesChanged(val) {
+        if (val == null) {
+            this.parsedLanguages = [];
+            return;
+        }
+        this.parsedLanguages = typeof val === 'string' ? JSON.parse(val) : (val ?? []);
+        if (!this.currentLang && this.parsedLanguages.length > 0) {
+            this.currentLang = this.parsedLanguages[0];
+        }
+    }
+    selectedLangChanged(val) {
+        if (!val)
+            return;
+        this.currentLang = typeof val === 'string' ? JSON.parse(val) : val;
+    }
+    componentWillLoad() {
+        this.languagesChanged(this.languages);
+        if (this.selectedLang)
+            this.selectedLangChanged(this.selectedLang);
+    }
+    select(lang) {
+        this.currentLang = lang;
+        this.isOpen = false;
+        this.languageChange.emit(lang);
+    }
+    render() {
+        if (!this.currentLang)
+            return null;
+        return (h("div", { class: `custom-dropdown${this.isOpen ? ' open' : ''}` }, h("div", { class: "selected-option", onClick: () => { this.isOpen = !this.isOpen; } }, h("dropi-country-flags", { country: this.currentLang.flag, "flag-style": "rectangle", width: "20", height: "15" }), h("span", { class: "Body-S-Regular" }, this.currentLang.label), h("dropi-icon", { name: "Caret-down", width: "16px", height: "16px", color: "Gray-Gray-500" })), h("ul", { class: `dropdown-options${this.isOpen ? ' dropdown-open' : ''}` }, this.parsedLanguages.map(lang => (h("li", { key: lang.code, class: lang.code === this.currentLang?.code ? 'active' : '', onClick: () => this.select(lang) }, h("dropi-country-flags", { country: lang.flag, "flag-style": "rectangle", width: "20", height: "15" }), h("span", { class: "Body-S-Regular" }, lang.label)))))));
+    }
+    static get is() { return "dropi-languages-selector"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-languages-selector.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-languages-selector.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "languages": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LanguageOption[] | string",
+                    "resolved": "LanguageOption[] | string",
+                    "references": {
+                        "LanguageOption": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-languages-selector/dropi-languages-selector.tsx",
+                            "id": "src/components/dropi-languages-selector/dropi-languages-selector.tsx::LanguageOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Language options (array or JSON string)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "languages",
+                "defaultValue": "[]"
+            },
+            "selectedLang": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "LanguageOption | string | null",
+                    "resolved": "LanguageOption | string",
+                    "references": {
+                        "LanguageOption": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-languages-selector/dropi-languages-selector.tsx",
+                            "id": "src/components/dropi-languages-selector/dropi-languages-selector.tsx::LanguageOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Currently selected language (LanguageOption or JSON string)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-lang",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "parsedLanguages": {},
+            "currentLang": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "languageChange",
+                "name": "languageChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "LanguageOption",
+                    "resolved": "LanguageOption",
+                    "references": {
+                        "LanguageOption": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-languages-selector/dropi-languages-selector.tsx",
+                            "id": "src/components/dropi-languages-selector/dropi-languages-selector.tsx::LanguageOption"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "languages",
+                "methodName": "languagesChanged"
+            }, {
+                "propName": "selectedLang",
+                "methodName": "selectedLangChanged"
+            }];
+    }
+}

package/dist/collection/components/dropi-logo/dropi-logo.css

@@ -0,0 +1,26 @@
+:host {
+  display: inline-block;
+}
+
+.dropi-logo {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dropi-logo img {
+  display: block;
+  object-fit: contain;
+}
+
+.dropi-logo--large img {
+  width: 256px;
+  height: 84px;
+}
+
+.dropi-logo--small img {
+  width: 86px;
+  height: 81px;
+}

package/dist/collection/components/dropi-logo/dropi-logo.js

@@ -0,0 +1,107 @@
+import { h } from "@stencil/core";
+const FALLBACK_SVG = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgNDAiPjx0ZXh0IHk9IjMwIiBmb250LXNpemU9IjI0IiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZmlsbD0iIzg1OGVhNiI+ZHJvcGk8L3RleHQ+PC9zdmc+`;
+/**
+ * @component dropi-logo
+ * Displays the Dropi brand logo with size variants.
+ */
+export class DropiLogo {
+    el;
+    /** Logo image URL */
+    urlLogo = '';
+    /** Size variant */
+    size = 'large';
+    /** Theme (reserved for future use) */
+    theme = 'light';
+    componentWillLoad() {
+        if (!this.urlLogo) {
+            this.urlLogo =
+                this.el.getAttribute('urlLogo') ||
+                    this.el.getAttribute('url-logo') ||
+                    this.el.getAttribute('urllogo') ||
+                    '';
+        }
+    }
+    handleError(e) {
+        e.target.src = FALLBACK_SVG;
+    }
+    render() {
+        return (h("figure", { key: '479af3da2dc04c7d6e79b99494fce0fb5419af4d', class: { 'dropi-logo': true, [`dropi-logo--${this.size}`]: true } }, h("img", { key: '6b78e7004f4b1dd782e4c17dae7b264fff483875', src: this.urlLogo || FALLBACK_SVG, alt: "Dropi logo", onError: (e) => this.handleError(e) })));
+    }
+    static get is() { return "dropi-logo"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-logo.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-logo.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "urlLogo": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Logo image URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "url-logo",
+                "defaultValue": "''"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'large'",
+                    "resolved": "\"large\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'large'"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'dark' | 'light'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme (reserved for future use)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme",
+                "defaultValue": "'light'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/dropi-lottie-loader/dropi-lottie-loader.css

@@ -0,0 +1,56 @@
+:host {
+  display: block;
+}
+
+.loader-overlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.85);
+  z-index: 9999;
+}
+
+.loader-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--Size-4, 16px);
+}
+
+.lottie-animation {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 300px;
+  height: 300px;
+}
+
+.lottie-animation lottie-player {
+  display: block;
+  width: 300px !important;
+  height: 300px !important;
+}
+
+.loader-text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--Size-2, 8px);
+  text-align: center;
+}
+
+.loader-title {
+  margin: 0;
+  font-size: var(--font-size-m, 14px);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--Gray-Gray-700, #32394d);
+}
+
+.loader-message {
+  margin: 0;
+  font-size: var(--font-size-s, 12px);
+  font-weight: var(--font-weight-regular, 400);
+  color: var(--Gray-Gray-500, #69738c);
+}

package/dist/collection/components/dropi-lottie-loader/dropi-lottie-loader.js

@@ -0,0 +1,116 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-lottie-loader
+ * Full-screen or inline loading overlay with a Lottie animation.
+ */
+export class DropiLottieLoader {
+    /** Show or hide the loader */
+    visible = true;
+    /** Path to the Lottie JSON animation file */
+    loadingAnimation = '/assets/lottie-files/loading.json';
+    /** Title shown below the animation */
+    title = 'Cargando...';
+    /** Descriptive message below the title */
+    message = 'Por favor, espere un momento';
+    render() {
+        if (!this.visible)
+            return null;
+        return (h("div", { class: "loader-overlay" }, h("div", { class: "loader-container" }, h("div", { class: "lottie-animation" }, h("lottie-player", { src: this.loadingAnimation, background: "transparent", speed: "1", style: { width: '300px', height: '300px' }, loop: true, autoplay: true })), (this.title || this.message) && (h("div", { class: "loader-text" }, this.title && h("h3", { class: "loader-title" }, this.title), this.message && h("p", { class: "loader-message" }, this.message))))));
+    }
+    static get is() { return "dropi-lottie-loader"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-lottie-loader.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-lottie-loader.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "visible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show or hide the loader"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "visible",
+                "defaultValue": "true"
+            },
+            "loadingAnimation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Path to the Lottie JSON animation file"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading-animation",
+                "defaultValue": "'/assets/lottie-files/loading.json'"
+            },
+            "title": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Title shown below the animation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "title",
+                "defaultValue": "'Cargando...'"
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Descriptive message below the title"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "message",
+                "defaultValue": "'Por favor, espere un momento'"
+            }
+        };
+    }
+}