@dropi/ui 0.1.18 → 0.1.20

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

@@ -0,0 +1,294 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-media-player
+ * HTML5 audio/video player with custom controls: play/pause, seek bar,
+ * volume, mute, duration display, and fullscreen (video only).
+ */
+export class DropiMediaPlayer {
+    el;
+    /** Media source URL */
+    src = '';
+    /** "audio" or "video" */
+    mediaType = 'audio';
+    /** Poster image (video only) */
+    poster = '';
+    /** Autoplay */
+    autoplay = false;
+    /** Loop */
+    loop = false;
+    /** Initial volume 0–1 */
+    initialVolume = 1;
+    /** Title shown above controls */
+    mediaTitle = '';
+    playing = false;
+    currentTime = 0;
+    duration = 0;
+    volume = 1;
+    muted = false;
+    loading = true;
+    mediaEl;
+    /** Emitted when playback starts/pauses. e.detail = playing */
+    dropiPlay;
+    /** Emitted when media ends */
+    dropiEnded;
+    componentDidLoad() {
+        if (this.mediaEl) {
+            this.mediaEl.volume = this.initialVolume;
+            this.volume = this.initialVolume;
+        }
+    }
+    togglePlay() {
+        if (!this.mediaEl)
+            return;
+        if (this.playing) {
+            this.mediaEl.pause();
+        }
+        else {
+            this.mediaEl.play();
+        }
+    }
+    handleTimeUpdate() {
+        this.currentTime = this.mediaEl.currentTime;
+    }
+    handleLoadedMetadata() {
+        this.duration = this.mediaEl.duration;
+        this.loading = false;
+    }
+    handleSeek(e) {
+        const val = Number(e.target.value);
+        this.mediaEl.currentTime = val;
+        this.currentTime = val;
+    }
+    handleVolume(e) {
+        const val = Number(e.target.value);
+        this.mediaEl.volume = val;
+        this.volume = val;
+        this.muted = val === 0;
+    }
+    toggleMute() {
+        this.muted = !this.muted;
+        this.mediaEl.muted = this.muted;
+    }
+    handleFullscreen() {
+        if (this.mediaType !== 'video')
+            return;
+        const vid = this.mediaEl;
+        if (document.fullscreenElement)
+            document.exitFullscreen();
+        else
+            vid.requestFullscreen?.();
+    }
+    formatTime(secs) {
+        if (isNaN(secs))
+            return '0:00';
+        const m = Math.floor(secs / 60);
+        const s = Math.floor(secs % 60);
+        return `${m}:${String(s).padStart(2, '0')}`;
+    }
+    render() {
+        const pct = this.duration ? (this.currentTime / this.duration) * 100 : 0;
+        return (h("div", { key: '76ee9c93a56b78e8ebdad1a77a59b56bbd1ae8f6', class: `player player--${this.mediaType}` }, this.mediaType === 'video' ? (h("video", { class: "player__video", ref: (el) => this.mediaEl = el, src: this.src, poster: this.poster, autoplay: this.autoplay, loop: this.loop, preload: "metadata", onPlay: () => { this.playing = true; this.dropiPlay.emit(true); }, onPause: () => { this.playing = false; this.dropiPlay.emit(false); }, onTimeUpdate: () => this.handleTimeUpdate(), onLoadedMetaData: () => this.handleLoadedMetadata(), onEnded: () => { this.playing = false; this.dropiEnded.emit(); }, onWaiting: () => this.loading = true, onCanPlay: () => this.loading = false })) : (h("audio", { ref: (el) => this.mediaEl = el, src: this.src, autoplay: this.autoplay, loop: this.loop, preload: "metadata", onPlay: () => { this.playing = true; this.dropiPlay.emit(true); }, onPause: () => { this.playing = false; this.dropiPlay.emit(false); }, onTimeUpdate: () => this.handleTimeUpdate(), onLoadedMetaData: () => this.handleLoadedMetadata(), onEnded: () => { this.playing = false; this.dropiEnded.emit(); } })), h("div", { key: '444cb9c86d3a69042d827ab4785e8c0995f82e6d', class: "player__controls" }, this.mediaTitle && (h("span", { key: '39bee7040cddfae5ce17e6ee62d0713ba0062ae4', class: "player__title" }, this.mediaTitle)), h("div", { key: '05ccbde97d88387d1b167495887877f0d3443cc4', class: "player__seek-wrap" }, h("span", { key: '1e8f81054b851975a0526224f5b2455687d6d1ba', class: "player__time" }, this.formatTime(this.currentTime)), h("div", { key: 'aecd083653f3384e47938ff00bcd0f913eab4e13', class: "player__seek-track" }, h("div", { key: '2bef10203f1c0d22e371e8e7ee223ec9aaf9b496', class: "player__seek-fill", style: { width: `${pct}%` } }), h("input", { key: '7d8b658dca7b663e01d86d69480113edc8849951', class: "player__seek", type: "range", min: 0, max: this.duration || 100, step: 0.1, value: this.currentTime, onInput: (e) => this.handleSeek(e) })), h("span", { key: '0127fa197a59db81f224db1a168b52fc4be154fe', class: "player__time" }, this.formatTime(this.duration))), h("div", { key: '171eff82a5f55544cb0ad601ae4ae07954e93c43', class: "player__buttons" }, h("button", { key: '0d207dcd555e040999e6434009b7762e9caf8359', class: "player__btn player__btn--play", onClick: () => this.togglePlay(), type: "button" }, this.loading
+            ? h("dropi-icon", { name: "Spinner", width: "20px", height: "20px", color: "Neutral-White" })
+            : h("dropi-icon", { name: this.playing ? 'Pause' : 'Play', width: "20px", height: "20px", color: "Neutral-White" })), h("div", { key: 'd8eeb92e14729c49e0b2ef459c44ed1f402ce9f8', class: "player__volume" }, h("button", { key: '4bdf9ca4d03e1e7a420b280f0106e67d50fe6285', class: "player__btn", onClick: () => this.toggleMute(), type: "button" }, h("dropi-icon", { key: '715e93fc8b50f42c07c545ace9dbbf757ac0742a', name: this.muted || this.volume === 0 ? 'Volume-off' : this.volume < 0.5 ? 'Volume-low' : 'Volume-high', width: "16px", height: "16px", color: "Gray-Gray-600" })), h("input", { key: 'd2a3f93696c8c1a42ce99c04c4fbf419e2f8b3e6', class: "player__volume-slider", type: "range", min: 0, max: 1, step: 0.05, value: this.muted ? 0 : this.volume, onInput: (e) => this.handleVolume(e) })), h("span", { key: '7dc77449676683256fbf746ff9e3679d0b8ed41d', class: "player__spacer" }), this.mediaType === 'video' && (h("button", { key: '442d58c35ca6e8649849e30f46d33274bbff577b', class: "player__btn", onClick: () => this.handleFullscreen(), type: "button" }, h("dropi-icon", { key: '89a88d82501bfa0af389a8bc3c17cb3eeca9af00', name: "Fullscreen", width: "16px", height: "16px", color: "Gray-Gray-600" })))))));
+    }
+    static get is() { return "dropi-media-player"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-media-player.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-media-player.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Media source URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "src",
+                "defaultValue": "''"
+            },
+            "mediaType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'audio' | 'video'",
+                    "resolved": "\"audio\" | \"video\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\"audio\" or \"video\""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "media-type",
+                "defaultValue": "'audio'"
+            },
+            "poster": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Poster image (video only)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "poster",
+                "defaultValue": "''"
+            },
+            "autoplay": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Autoplay"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autoplay",
+                "defaultValue": "false"
+            },
+            "loop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Loop"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loop",
+                "defaultValue": "false"
+            },
+            "initialVolume": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial volume 0\u20131"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "initial-volume",
+                "defaultValue": "1"
+            },
+            "mediaTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Title shown above controls"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "media-title",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "playing": {},
+            "currentTime": {},
+            "duration": {},
+            "volume": {},
+            "muted": {},
+            "loading": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiPlay",
+                "name": "dropiPlay",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when playback starts/pauses. e.detail = playing"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiEnded",
+                "name": "dropiEnded",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when media ends"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -25,7 +25,7 @@
   background: var(--Neutral-White, #fff);
   box-shadow: 0 0 60px rgba(0,0,0,0.06);
   overflow: hidden;
-  padding: var(--Size-6, 32px); gap: var(--Size-5, 24px);
+  padding: var(--Size-6, 32px); gap: var(--Size-6, 32px);
   max-height: calc(100vh - 60px);
   opacity: 0; transform: translateY(16px) scale(0.92);
   transition: opacity 0.18s ease, transform 0.18s ease;
@@ -35,7 +35,7 @@
 
 .modal-header { display: flex; align-items: center; gap: 4px; }
 .modal-title { color: var(--Gray-Gray-700,#32394d); font-size: var(--Size-5, 24px); font-weight: 700; flex: 1; text-align: left; }
-.modal-close { margin-left: auto; border: 0; background: transparent; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+.modal-close { margin-left: auto; border: 0; background: transparent; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 24px; line-height: 1; color: var(--Gray-Gray-400); }
 .modal-close:hover { opacity: 0.7; }
 
 .modal-content {
@@ -49,7 +49,7 @@
 .modal-footer { 
   display: flex; 
   justify-content: flex-end; 
-  align-items: center; 
+  align-items: flex-start; 
   gap: var(--Size-1, 4px); 
   width: 100%;
 }
@@ -63,6 +63,12 @@
   min-width: 470px;
   width: 100%;
 }
+::slotted(.button-container) > * {
+  width: 100%;
+}
+::slotted(.button-container) dropi-button {
+  width: 100%;
+}
 
 .modal-panel.size-m .modal-footer,
 .modal-panel.size-s .modal-footer { 

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

@@ -58,8 +58,9 @@ export class DropiModal {
             this.dropiShow.emit();
         }));
         this.addKeyHandler();
-        if (this.modal)
-            document.body.style.overflow = 'hidden';
+        if (this.modal && document.body && document.body.style) {
+            document.body.style.setProperty('overflow', 'hidden');
+        }
     }
     startClose() {
         if (this.isClosing)
@@ -72,7 +73,9 @@ export class DropiModal {
         this.closeTimer = setTimeout(() => {
             this.mounted = false;
             this.isClosing = false;
-            document.body.style.overflow = '';
+            if (document.body && document.body.style) {
+                document.body.style.setProperty('overflow', '');
+            }
             this.dropiHide.emit();
         }, 200);
     }
@@ -94,7 +97,7 @@ export class DropiModal {
     render() {
         if (!this.mounted)
             return null;
-        return (h("div", { class: { 'modal-root': true, [`modal-root--${this.position}`]: true, 'modal-root--open': this.isOpen, 'modal-root--closing': this.isClosing } }, this.modal && h("div", { class: "modal-mask", onClick: () => this.dismissable && this.hide() }), h("div", { class: { 'modal-panel': true, [`size-${this.size}`]: !!this.size }, role: "dialog", "aria-modal": "true" }, this.showHeader && (h("div", { class: "modal-header" }, this.header && h("span", { class: "modal-title" }, this.header), h("slot", { name: "header" }), this.showCloseIcon && (h("button", { class: "modal-close", onClick: () => this.hide(), "aria-label": "Cerrar" }, h("dropi-icon", { name: "Close-small", width: "24px", height: "24px", color: "Gray-Gray-400" }))))), h("div", { class: "modal-content" }, h("slot", null)), h("div", { class: "modal-footer" }, h("slot", { name: "footer" })))));
+        return (h("div", { class: `modal-root modal-root--${this.position}${this.isOpen ? ' modal-root--open' : ''}${this.isClosing ? ' modal-root--closing' : ''}` }, this.modal && h("div", { class: "modal-mask", onClick: () => this.dismissable && this.hide() }), h("div", { class: `modal-panel size-${this.size || 'm'}`, role: "dialog", "aria-modal": "true" }, this.showHeader && (h("div", { class: "modal-header" }, this.header && h("span", { class: "modal-title" }, this.header), h("slot", { name: "header" }), this.showCloseIcon && (h("button", { class: "modal-close", onClick: () => this.hide(), "aria-label": "Cerrar" }, "\u00D7")))), h("div", { class: "modal-content" }, h("slot", null)), h("div", { class: "modal-footer" }, h("slot", { name: "footer" })))));
     }
     static get is() { return "dropi-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -317,7 +320,7 @@ export class DropiModal {
                 "name": "dropiShow",
                 "bubbles": true,
                 "cancelable": true,
-                "composed": true,
+                "composed": false,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -332,7 +335,7 @@ export class DropiModal {
                 "name": "dropiHide",
                 "bubbles": true,
                 "cancelable": true,
-                "composed": true,
+                "composed": false,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -347,7 +350,7 @@ export class DropiModal {
                 "name": "visibleChange",
                 "bubbles": true,
                 "cancelable": true,
-                "composed": true,
+                "composed": false,
                 "docs": {
                     "tags": [],
                     "text": ""

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

@@ -0,0 +1,166 @@
+:host { display: block; width: 100%; }
+*, *::before, *::after { box-sizing: border-box; }
+
+.navbar {
+  display: flex;
+  align-items: center;
+  height: 56px;
+  padding: 0 var(--Size-4, 16px);
+  background: var(--Neutral-White, #fff);
+  border-bottom: 1px solid var(--Gray-Gray-100, #eceef4);
+  gap: var(--Size-4, 16px);
+  position: relative;
+}
+
+/* Left */
+.navbar__left {
+  display: flex;
+  align-items: center;
+  gap: var(--Size-2, 8px);
+  flex-shrink: 0;
+}
+
+.navbar__menu-btn {
+  background: none;
+  border: none;
+  padding: 6px;
+  cursor: pointer;
+  border-radius: var(--Border-1, 4px);
+  display: flex;
+  align-items: center;
+  transition: background 0.15s;
+}
+.navbar__menu-btn:hover { background: var(--Gray-Gray-50, #f7f8fa); }
+
+.navbar__logo {
+  height: 28px;
+  object-fit: contain;
+}
+
+/* Center nav items */
+.navbar__items {
+  flex: 1;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--Size-1, 4px);
+}
+
+.navbar__item {
+  display: flex;
+  align-items: center;
+  gap: var(--Size-1, 4px);
+  padding: 6px var(--Size-3, 12px);
+  background: none;
+  border: none;
+  border-radius: var(--Border-1, 4px);
+  font-size: var(--font-size-s, 12px);
+  font-family: inherit;
+  color: var(--Gray-Gray-600, #475066);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+  white-space: nowrap;
+}
+.navbar__item:hover { background: var(--Gray-Gray-50, #f7f8fa); }
+.navbar__item--active {
+  background: var(--Primary-Primary-50, #fff5eb);
+  color: var(--Primary-Primary-500, #f49a3d);
+  font-weight: var(--font-weight-bold, 700);
+}
+
+.navbar__badge {
+  background: var(--Error-Error-500, #f46a6b);
+  color: var(--Neutral-White, #fff);
+  font-size: 10px;
+  font-weight: 700;
+  min-width: 16px;
+  height: 16px;
+  border-radius: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 4px;
+}
+
+/* Right */
+.navbar__right {
+  display: flex;
+  align-items: center;
+  gap: var(--Size-2, 8px);
+  flex-shrink: 0;
+}
+
+.navbar__icon-btn {
+  position: relative;
+  background: none;
+  border: none;
+  padding: 6px;
+  cursor: pointer;
+  border-radius: var(--Border-1, 4px);
+  display: flex;
+  align-items: center;
+  transition: background 0.15s;
+}
+.navbar__icon-btn:hover { background: var(--Gray-Gray-50, #f7f8fa); }
+
+.navbar__notif-badge {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  background: var(--Error-Error-500, #f46a6b);
+  color: var(--Neutral-White, #fff);
+  font-size: 9px;
+  font-weight: 700;
+  min-width: 14px;
+  height: 14px;
+  border-radius: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 3px;
+}
+
+.navbar__user-btn {
+  display: flex;
+  align-items: center;
+  gap: var(--Size-1, 4px);
+  background: none;
+  border: none;
+  padding: 4px 8px;
+  border-radius: var(--Border-1, 4px);
+  cursor: pointer;
+  transition: background 0.15s;
+  font-family: inherit;
+}
+.navbar__user-btn:hover { background: var(--Gray-Gray-50, #f7f8fa); }
+
+.navbar__avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.navbar__avatar-placeholder {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--Primary-Primary-500, #f49a3d);
+  color: var(--Neutral-White, #fff);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-xs, 10px);
+  font-weight: var(--font-weight-bold, 700);
+}
+
+.navbar__user-name {
+  font-size: var(--font-size-s, 12px);
+  color: var(--Gray-Gray-700, #32394d);
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}