@dropi/ui 0.1.24 → 0.1.26

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

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

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

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

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

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

@@ -1,116 +0,0 @@
-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'"
-            }
-        };
-    }
-}