@dropi/ui 0.1.19 → 0.1.21

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

@@ -0,0 +1,154 @@
+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) {
+        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.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-const FALLBACK_SVG = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgNDAiPjx0ZXh0IHk9IjMwIiBmb250LXNpemU9IjI0IiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZmlsbD0iI2Y0OWEzZCI+ZHJvcGk8L3RleHQ+PC9zdmc+`;
+const FALLBACK_SVG = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgNDAiPjx0ZXh0IHk9IjMwIiBmb250LXNpemU9IjI0IiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZmlsbD0iIzg1OGVhNiI+ZHJvcGk8L3RleHQ+PC9zdmc+`;
 /**
  * @component dropi-logo
  * Displays the Dropi brand logo with size variants.
@@ -15,7 +15,7 @@ export class DropiLogo {
         e.target.src = FALLBACK_SVG;
     }
     render() {
-        return (h("figure", { key: '6b3335e9c4e8d799106f3c2080822d35d74bb16d', class: { 'dropi-logo': true, [`dropi-logo--${this.size}`]: true } }, h("img", { key: 'e54ff2f0d1fb1f0f4eea4c46aae7a39f69268217', src: this.urlLogo || FALLBACK_SVG, alt: "Dropi logo", loading: "lazy", onError: (e) => this.handleError(e) })));
+        return (h("figure", { key: '3e333d272f1f7ee4af549167e5e4f7a713aaa508', class: { 'dropi-logo': true, [`dropi-logo--${this.size}`]: true } }, h("img", { key: 'e3f29c17b649b76da50b769fd88f5de9a86515e3', src: this.urlLogo || FALLBACK_SVG, alt: "Dropi logo", loading: "lazy", onError: (e) => this.handleError(e) })));
     }
     static get is() { return "dropi-logo"; }
     static get encapsulation() { return "shadow"; }

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

@@ -23,8 +23,14 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 200px;
-  height: 200px;
+  width: 300px;
+  height: 300px;
+}
+
+.lottie-animation lottie-player {
+  display: block;
+  width: 300px !important;
+  height: 300px !important;
 }
 
 .loader-text {

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

@@ -5,17 +5,17 @@ import { h } from "@stencil/core";
  */
 export class DropiLottieLoader {
     /** Show or hide the loader */
-    visible = false;
+    visible = true;
     /** Path to the Lottie JSON animation file */
-    loadingAnimation = '';
+    loadingAnimation = '/assets/lottie-files/loading.json';
     /** Title shown below the animation */
-    loaderTitle = '';
+    title = 'Cargando...';
     /** Descriptive message below the title */
-    message = '';
+    message = 'Por favor, espere un momento';
     render() {
         if (!this.visible)
             return null;
-        return (h("div", { class: "loader-overlay" }, h("div", { class: "loader-container" }, this.loadingAnimation && (h("div", { class: "lottie-animation", innerHTML: `<lottie-player src="${this.loadingAnimation}" background="transparent" speed="1" style="width:200px;height:200px" loop autoplay></lottie-player>` })), (this.loaderTitle || this.message) && (h("div", { class: "loader-text" }, this.loaderTitle && h("h3", { class: "loader-title" }, this.loaderTitle), this.message && h("p", { class: "loader-message" }, this.message))))));
+        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"; }
@@ -49,7 +49,7 @@ export class DropiLottieLoader {
                 "setter": false,
                 "reflect": false,
                 "attribute": "visible",
-                "defaultValue": "false"
+                "defaultValue": "true"
             },
             "loadingAnimation": {
                 "type": "string",
@@ -69,9 +69,9 @@ export class DropiLottieLoader {
                 "setter": false,
                 "reflect": false,
                 "attribute": "loading-animation",
-                "defaultValue": "''"
+                "defaultValue": "'/assets/lottie-files/loading.json'"
             },
-            "loaderTitle": {
+            "title": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -88,8 +88,8 @@ export class DropiLottieLoader {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "loader-title",
-                "defaultValue": "''"
+                "attribute": "title",
+                "defaultValue": "'Cargando...'"
             },
             "message": {
                 "type": "string",
@@ -109,7 +109,7 @@ export class DropiLottieLoader {
                 "setter": false,
                 "reflect": false,
                 "attribute": "message",
-                "defaultValue": "''"
+                "defaultValue": "'Por favor, espere un momento'"
             }
         };
     }

package/dist/collection/components/dropi-media-player/dropi-media-player.css

@@ -0,0 +1,320 @@
+:host { 
+  display: block; 
+  width: 100%; 
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.dropi-media-player {
+  position: relative;
+  width: 100%;
+  max-width: 335px;
+  height: auto;
+  aspect-ratio: 335 / 567;
+  background-color: var(--Neutral-Black);
+  border-radius: var(--Border-2, 8px);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+/* ── Formatos ────────────────────────────────────────────────── */
+.dropi-media-player--mobile-vertical {
+  max-width: 335px;
+  aspect-ratio: 335 / 567;
+}
+
+.dropi-media-player--mobile-compact {
+  max-width: 335px;
+  aspect-ratio: 335 / 337;
+}
+
+.dropi-media-player--desktop {
+  max-width: 587px;
+  aspect-ratio: 587 / 567;
+}
+
+.dropi-media-player__video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Botón play/pause central */
+.dropi-media-player__center-play {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 400px;
+  background-color: rgba(14, 17, 26, 0.6);
+  backdrop-filter: blur(2px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 0.3s ease;
+  pointer-events: auto;
+}
+
+.dropi-media-player__center-play--hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Barra inferior de controles */
+.dropi-media-player__controls-bar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 72px;
+  padding: 24px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000);
+  transition: opacity 0.3s ease;
+  box-sizing: border-box;
+}
+
+.dropi-media-player__controls-bar--hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.dropi-media-player__timestamp {
+  font-family: 'Inter', sans-serif;
+  font-size: var(--font-size-xs, 12px);
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--Neutral-White);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* Barra de progreso */
+.dropi-media-player__progress {
+  flex: 1;
+  padding: 6px 0;
+  cursor: pointer;
+  position: relative;
+}
+
+.dropi-media-player__progress-track {
+  position: relative;
+  width: 100%;
+  height: 5px;
+  border-radius: var(--Border-2, 8px);
+  background-color: var(--Gray-Gray-700, #32394d);
+}
+
+.dropi-media-player__progress-fill {
+  height: 100%;
+  background-color: var(--Neutral-White);
+  border-radius: var(--Border-2, 8px);
+  will-change: width;
+}
+
+.dropi-media-player__progress-thumb {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background-color: var(--Neutral-White);
+  pointer-events: none;
+  will-change: left;
+}
+
+/* Grupo de botones de la derecha */
+.dropi-media-player__actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+.dropi-media-player__btn {
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--Neutral-White);
+  transition: opacity 0.15s ease;
+}
+.dropi-media-player__btn:hover {
+  opacity: 0.8;
+}
+
+.dropi-media-player__btn--speed {
+  font-family: 'Inter', sans-serif;
+  font-size: var(--font-size-sm, 14px);
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--Neutral-White);
+  min-width: 20px;
+}
+
+/* Control de velocidad */
+.dropi-media-player__speed-control {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.dropi-media-player__speed-menu {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--Gray-Gray-800, #1f2433);
+  border-radius: var(--Border-2, 8px);
+  padding: 6px 0;
+  min-width: 44px;
+  display: flex;
+  flex-direction: column;
+  z-index: 20;
+}
+
+.dropi-media-player__speed-option {
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  border: none;
+  padding: 6px 10px;
+  font-family: 'Inter', sans-serif;
+  font-size: var(--font-size-s);
+  font-weight: var(--font-weight-medium);
+  color: var(--Neutral-White);
+  cursor: pointer;
+  text-align: center;
+  white-space: nowrap;
+  transition: opacity 0.15s ease;
+}
+.dropi-media-player__speed-option--active {
+  color: var(--Primary-Primary-500, #f49a3d);
+}
+.dropi-media-player__speed-option:hover {
+  opacity: 0.8;
+}
+
+/* Control de volumen */
+.dropi-media-player__volume-control {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.dropi-media-player__volume-popup {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  width: 32px;
+  height: 108px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--Gray-Gray-800, #1f2433);
+  border-radius: var(--Border-2, 8px);
+  overflow: visible;
+  z-index: 20;
+}
+
+.dropi-media-player__volume-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 97px;
+  height: 8px;
+  transform: rotate(-90deg);
+  border-radius: 4px;
+  cursor: pointer;
+  outline: none;
+  flex-shrink: 0;
+}
+
+.dropi-media-player__volume-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--Neutral-White);
+  cursor: pointer;
+}
+
+.dropi-media-player__volume-slider::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--Neutral-White);
+  border: none;
+  cursor: pointer;
+}
+
+.dropi-media-player__volume-slider::-webkit-slider-runnable-track {
+  border-radius: 4px;
+}
+
+.dropi-media-player__volume-slider::-moz-range-track {
+  height: 8px;
+  background: var(--Gray-Gray-700, #32394d);
+  border-radius: 4px;
+}
+
+/* Blur background (oculto por defecto, visible en fullscreen) */
+.dropi-media-player__blur-bg {
+  display: none;
+  position: absolute;
+  inset: 0;
+  background-size: cover;
+  background-position: center;
+  filter: blur(21px);
+  transform: scale(1.15);
+  z-index: 0;
+}
+
+.dropi-media-player__blur-overlay {
+  display: none;
+  position: absolute;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  z-index: 0;
+}
+
+/* Fullscreen mode */
+.dropi-media-player.is-fullscreen,
+.dropi-media-player:fullscreen {
+  max-width: none;
+  aspect-ratio: auto;
+  width: 100vw;
+  height: 100vh;
+  border-radius: 0;
+}
+
+.dropi-media-player.is-fullscreen .dropi-media-player__blur-bg,
+.dropi-media-player:fullscreen .dropi-media-player__blur-bg,
+.dropi-media-player.is-fullscreen .dropi-media-player__blur-overlay,
+.dropi-media-player:fullscreen .dropi-media-player__blur-overlay {
+  display: block;
+}
+
+.dropi-media-player.is-fullscreen .dropi-media-player__video,
+.dropi-media-player:fullscreen .dropi-media-player__video {
+  object-fit: contain;
+  position: relative;
+  z-index: 1;
+}
+
+.dropi-media-player.is-fullscreen .dropi-media-player__center-play,
+.dropi-media-player:fullscreen .dropi-media-player__center-play,
+.dropi-media-player.is-fullscreen .dropi-media-player__controls-bar,
+.dropi-media-player:fullscreen .dropi-media-player__controls-bar {
+  z-index: 2;
+}