@dropi/ui 0.1.54 → 999.0.0

package/dist/dropi-ui/dropi-logo.entry.js.map

@@ -1 +0,0 @@
-{"file":"dropi-logo.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC,oVAAoV,CAAC;;ACEjX,MAAM,YAAY,GAAG,CAAA,8NAAA,CAAgO;MAWxO,SAAS,GAAA,MAAA;;;;;;IAIZ,OAAO,GAAW,EAAE;;IAEpB,IAAI,GAAsB,OAAO;;IAEjC,KAAK,GAAqB,OAAO;IAEzC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;AACjB,YAAA,IAAI,CAAC,OAAO;AACV,gBAAA,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC;AAC/B,oBAAA,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC;AAChC,oBAAA,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC;AAC/B,oBAAA,EAAE;;;AAIA,IAAA,WAAW,CAAC,CAAQ,EAAA;AACzB,QAAA,CAAC,CAAC,MAA2B,CAAC,GAAG,GAAG,YAAY;;IAGnD,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAA,YAAA,EAAe,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI,EAAE,EAAA,EACvE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,IAAI,CAAC,OAAO,IAAI,YAAY,EACjC,GAAG,EAAC,YAAY,EAChB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAA,CACnC,CACK;;;;;;;","names":[],"sources":["src/components/dropi-logo/dropi-logo.css?tag=dropi-logo&encapsulation=shadow","src/components/dropi-logo/dropi-logo.tsx"],"sourcesContent":[":host {\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n  display: inline-block;\n}\n\n.dropi-logo {\n  margin: 0;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.dropi-logo img {\n  display: block;\n  object-fit: contain;\n}\n\n.dropi-logo--large img {\n  width: 256px;\n  height: 84px;\n}\n\n.dropi-logo--small img {\n  width: 86px;\n  height: 81px;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\nconst FALLBACK_SVG = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgNDAiPjx0ZXh0IHk9IjMwIiBmb250LXNpemU9IjI0IiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZmlsbD0iIzg1OGVhNiI+ZHJvcGk8L3RleHQ+PC9zdmc+`;\n\n/**\n * @component dropi-logo\n * Displays the Dropi brand logo with size variants.\n */\n@Component({\n  tag: 'dropi-logo',\n  styleUrl: 'dropi-logo.css',\n  shadow: true,\n})\nexport class DropiLogo {\n  @Element() el: HTMLElement;\n\n  /** Logo image URL */\n  @Prop() urlLogo: string = '';\n  /** Size variant */\n  @Prop() size: 'small' | 'large' = 'large';\n  /** Theme (reserved for future use) */\n  @Prop() theme: 'dark' | 'light' = 'light';\n\n  componentWillLoad() {\n    if (!this.urlLogo) {\n      this.urlLogo = \n        this.el.getAttribute('urlLogo') || \n        this.el.getAttribute('url-logo') || \n        this.el.getAttribute('urllogo') || \n        '';\n    }\n  }\n\n  private handleError(e: Event) {\n    (e.target as HTMLImageElement).src = FALLBACK_SVG;\n  }\n\n  render() {\n    return (\n      <figure class={{ 'dropi-logo': true, [`dropi-logo--${this.size}`]: true }}>\n        <img\n          src={this.urlLogo || FALLBACK_SVG}\n          alt=\"Dropi logo\"\n          onError={(e) => this.handleError(e)}\n        />\n      </figure>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-lottie-loader.entry.js

@@ -1,28 +0,0 @@
-import { r as registerInstance, h } from './index-BKkSRXlb.js';
-
-const dropiLottieLoaderCss = () => `:host{display:block;button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}}.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)}`;
-
-const DropiLottieLoader = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    /** Show or hide the loader */
-    visible = true;
-    /** Path to the Lottie JSON animation file */
-    loadingAnimation = '/node_modules/@dropi/ui/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))))));
-    }
-};
-DropiLottieLoader.style = dropiLottieLoaderCss();
-
-export { DropiLottieLoader as dropi_lottie_loader };
-//# sourceMappingURL=dropi-lottie-loader.entry.esm.js.map
-
-//# sourceMappingURL=dropi-lottie-loader.entry.js.map

package/dist/dropi-ui/dropi-lottie-loader.entry.js.map

@@ -1 +0,0 @@
-{"file":"dropi-lottie-loader.entry.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,MAAM,CAAC,u5BAAu5B,CAAC;;MCW/6B,iBAAiB,GAAA,MAAA;;;;;IAEpB,OAAO,GAAY,IAAI;;IAEvB,gBAAgB,GAAW,0DAA0D;;IAErF,KAAK,GAAW,aAAa;;IAE7B,OAAO,GAAW,8BAA8B;IAExD,MAAM,GAAA;QACJ,IAAI,CAAC,IAAI,CAAC,OAAO;AAAE,YAAA,OAAO,IAAI;AAE9B,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,eAAA,EAAA,EACE,GAAG,EAAE,IAAI,CAAC,gBAAgB,EAC1B,UAAU,EAAC,aAAa,EACxB,KAAK,EAAC,GAAG,EACT,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,EAC1C,IAAI,EAAA,IAAA,EACJ,QAAQ,SACR,CACE,EACL,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,OAAO,MAC1B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,aAAa,EAAA,EACrB,IAAI,CAAC,KAAK,IAAI,CAAA,CAAA,IAAA,EAAA,EAAI,KAAK,EAAC,cAAc,EAAA,EAAE,IAAI,CAAC,KAAK,CAAM,EACxD,IAAI,CAAC,OAAO,IAAI,CAAA,CAAA,GAAA,EAAA,EAAG,KAAK,EAAC,gBAAgB,EAAA,EAAE,IAAI,CAAC,OAAO,CAAK,CACzD,CACP,CACG,CACF;;;;;;;","names":[],"sources":["src/components/dropi-lottie-loader/dropi-lottie-loader.css?tag=dropi-lottie-loader&encapsulation=shadow","src/components/dropi-lottie-loader/dropi-lottie-loader.tsx"],"sourcesContent":[":host {\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n  display: block;\n}\n\n.loader-overlay {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(255, 255, 255, 0.85);\n  z-index: 9999;\n}\n\n.loader-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--Size-4, 16px);\n}\n\n.lottie-animation {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 300px;\n  height: 300px;\n}\n\n.lottie-animation lottie-player {\n  display: block;\n  width: 300px !important;\n  height: 300px !important;\n}\n\n.loader-text {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--Size-2, 8px);\n  text-align: center;\n}\n\n.loader-title {\n  margin: 0;\n  font-size: var(--font-size-m, 14px);\n  font-weight: var(--font-weight-bold, 700);\n  color: var(--Gray-Gray-700, #32394d);\n}\n\n.loader-message {\n  margin: 0;\n  font-size: var(--font-size-s, 12px);\n  font-weight: var(--font-weight-regular, 400);\n  color: var(--Gray-Gray-500, #69738c);\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n/**\n * @component dropi-lottie-loader\n * Full-screen or inline loading overlay with a Lottie animation.\n */\n@Component({\n  tag: 'dropi-lottie-loader',\n  styleUrl: 'dropi-lottie-loader.css',\n  shadow: true,\n})\nexport class DropiLottieLoader {\n  /** Show or hide the loader */\n  @Prop() visible: boolean = true;\n  /** Path to the Lottie JSON animation file */\n  @Prop() loadingAnimation: string = '/node_modules/@dropi/ui/assets/lottie-files/loading.json';\n  /** Title shown below the animation */\n  @Prop() title: string = 'Cargando...';\n  /** Descriptive message below the title */\n  @Prop() message: string = 'Por favor, espere un momento';\n\n  render() {\n    if (!this.visible) return null;\n\n    return (\n      <div class=\"loader-overlay\">\n        <div class=\"loader-container\">\n          <div class=\"lottie-animation\">\n            <lottie-player\n              src={this.loadingAnimation}\n              background=\"transparent\"\n              speed=\"1\"\n              style={{ width: '300px', height: '300px' }}\n              loop\n              autoplay\n            />\n          </div>\n          {(this.title || this.message) && (\n            <div class=\"loader-text\">\n              {this.title && <h3 class=\"loader-title\">{this.title}</h3>}\n              {this.message && <p class=\"loader-message\">{this.message}</p>}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-media-player.entry.js

@@ -1,193 +0,0 @@
-import { r as registerInstance, d as createEvent, a as getElement, h } from './index-BKkSRXlb.js';
-
-const dropiMediaPlayerCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}.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}.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}.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}.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:var(--font-family-01, '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}.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}.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:var(--font-family-01, 'Inter', sans-serif);font-size:var(--font-size-sm, 14px);font-weight:var(--font-weight-medium, 500);color:var(--Neutral-White);min-width:20px}.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:var(--font-family-01, '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}.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}.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}.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}`;
-
-const DropiMediaPlayer = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.dropiPlay = createEvent(this, "dropiPlay", 7);
-        this.dropiEnded = createEvent(this, "dropiEnded", 7);
-    }
-    get el() { return getElement(this); }
-    src = '';
-    mediaType = 'video';
-    poster = '';
-    autoplay = false;
-    loop = false;
-    initialVolume = 1;
-    /** Format defines aspect ratio scales like Angular original */
-    format = 'mobile-vertical';
-    playing = false;
-    currentTimeStr = '00:00';
-    durationStr = '00:00';
-    duration = 0;
-    volume = 1;
-    muted = false;
-    showControls = true;
-    isFullscreen = false;
-    progress = 0;
-    speed = 1;
-    showSpeedMenu = false;
-    showVolumeSlider = false;
-    mediaEl;
-    controlsTimeout;
-    speeds = [1, 2, 3];
-    dropiPlay;
-    dropiEnded;
-    componentDidLoad() {
-        if (this.mediaEl) {
-            const vol = this.initialVolume ?? 1;
-            if (isFinite(vol)) {
-                this.mediaEl.volume = vol;
-                this.muted = vol === 0;
-                this.volume = vol;
-            }
-        }
-        document.addEventListener('fullscreenchange', this.handleFullscreenChange);
-    }
-    disconnectedCallback() {
-        document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
-        clearTimeout(this.controlsTimeout);
-    }
-    handleFullscreenChange = () => {
-        this.isFullscreen = !!document.fullscreenElement;
-    };
-    togglePlay() {
-        if (!this.mediaEl)
-            return;
-        if (this.playing) {
-            this.mediaEl.pause();
-        }
-        else {
-            const promise = this.mediaEl.play();
-            if (promise !== undefined) {
-                promise.catch((e) => { console.warn('Play error:', e); this.playing = false; });
-            }
-        }
-    }
-    handleTimeUpdate() {
-        if (!this.duration)
-            return;
-        this.progress = (this.mediaEl.currentTime / this.duration) * 100;
-        this.currentTimeStr = this.formatTime(this.mediaEl.currentTime);
-    }
-    handleLoadedMetadata() {
-        this.duration = this.mediaEl.duration;
-        this.durationStr = this.formatTime(this.duration);
-    }
-    handleSeek(e) {
-        if (!this.duration)
-            return;
-        const bar = e.currentTarget;
-        const rect = bar.getBoundingClientRect();
-        const pos = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
-        this.mediaEl.currentTime = pos * this.duration;
-    }
-    handleVolume(e) {
-        const val = parseFloat(e.target.value);
-        this.mediaEl.volume = val;
-        this.volume = val;
-        this.muted = val === 0;
-        this.mediaEl.muted = this.muted;
-    }
-    toggleSpeedMenu() {
-        this.showSpeedMenu = !this.showSpeedMenu;
-        this.showVolumeSlider = false;
-    }
-    selectSpeed(s) {
-        this.speed = s;
-        if (this.mediaEl)
-            this.mediaEl.playbackRate = s;
-        this.showSpeedMenu = false;
-    }
-    toggleVolume() {
-        this.showVolumeSlider = !this.showVolumeSlider;
-        this.showSpeedMenu = false;
-    }
-    toggleFullscreen() {
-        if (!this.isFullscreen) {
-            this.el.shadowRoot.host.requestFullscreen?.();
-        }
-        else {
-            document.exitFullscreen?.();
-        }
-    }
-    onMouseMove() {
-        this.showControls = true;
-        if (this.playing)
-            this.startHideControlsTimer();
-    }
-    onMouseLeave() {
-        if (this.playing) {
-            this.showControls = false;
-            this.showVolumeSlider = false;
-            this.showSpeedMenu = false;
-        }
-    }
-    startHideControlsTimer() {
-        clearTimeout(this.controlsTimeout);
-        this.controlsTimeout = setTimeout(() => {
-            if (this.playing) {
-                this.showControls = false;
-                this.showVolumeSlider = false;
-                this.showSpeedMenu = false;
-            }
-        }, 5000);
-    }
-    handleDocClick(e) {
-        if (!this.el.contains(e.target)) {
-            this.showVolumeSlider = false;
-            this.showSpeedMenu = false;
-        }
-    }
-    formatTime(secs) {
-        if (isNaN(secs))
-            return '00:00';
-        const m = Math.floor(secs / 60);
-        const s = Math.floor(secs % 60);
-        return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
-    }
-    get playButtonSize() {
-        if (this.format === 'desktop')
-            return 80;
-        if (this.format === 'mobile-compact')
-            return 40;
-        return 60;
-    }
-    get playIconSize() {
-        if (this.format === 'desktop')
-            return 32;
-        if (this.format === 'mobile-compact')
-            return 17;
-        return 26;
-    }
-    get volumeIcon() {
-        return (this.muted || this.volume === 0) ? 'Volumen-silent' : 'Volumen';
-    }
-    get volumeGradient() {
-        const pct = (this.muted ? 0 : this.volume) * 100;
-        return `linear-gradient(to right, #ffffff ${pct}%, #32394d ${pct}%)`;
-    }
-    render() {
-        if (this.mediaType === 'audio') {
-            return (h("audio", { src: this.src, autoplay: this.autoplay, loop: this.loop, controls: true, style: { width: '100%' } }));
-        }
-        return (h("div", { class: {
-                'dropi-media-player': true,
-                [`dropi-media-player--${this.format}`]: true,
-                'is-fullscreen': this.isFullscreen
-            }, onMouseMove: () => this.onMouseMove(), onMouseLeave: () => this.onMouseLeave() }, h("div", { class: "dropi-media-player__blur-bg", style: { backgroundImage: `url(${this.poster})` } }), h("div", { class: "dropi-media-player__blur-overlay" }), h("video", { class: "dropi-media-player__video", ref: (el) => this.mediaEl = el, src: this.src, poster: this.poster, onClick: () => this.togglePlay(), onPlay: () => { this.playing = true; this.startHideControlsTimer(); this.dropiPlay.emit(true); }, onPause: () => { this.playing = false; this.showControls = true; clearTimeout(this.controlsTimeout); this.dropiPlay.emit(false); }, onEnded: () => { this.playing = false; this.showControls = true; this.dropiEnded.emit(); }, onTimeUpdate: () => this.handleTimeUpdate(), onLoadedMetaData: () => this.handleLoadedMetadata() }), h("div", { class: {
-                'dropi-media-player__center-play': true,
-                'dropi-media-player__center-play--hidden': this.playing && !this.showControls
-            }, style: { width: `${this.playButtonSize}px`, height: `${this.playButtonSize}px` }, onClick: (e) => { e.stopPropagation(); this.togglePlay(); } }, this.playing ? (h("svg", { width: `${this.playIconSize}px`, height: `${this.playIconSize}px`, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", style: { color: '#ffffff' } }, h("rect", { x: "6.5", y: "4", width: "3.5", height: "16", rx: "1.75" }), h("rect", { x: "14", y: "4", width: "3.5", height: "16", rx: "1.75" }))) : (h("dropi-icon", { name: "Play", color: "Neutral-White", iconWidth: `${this.playIconSize}px`, iconHeight: `${this.playIconSize}px` }))), h("div", { class: {
-                'dropi-media-player__controls-bar': true,
-                'dropi-media-player__controls-bar--hidden': !this.showControls
-            }, onClick: (e) => e.stopPropagation() }, h("span", { class: "dropi-media-player__timestamp" }, this.currentTimeStr, " / ", this.durationStr), h("div", { class: "dropi-media-player__progress", onClick: (e) => { e.stopPropagation(); this.handleSeek(e); } }, h("div", { class: "dropi-media-player__progress-track" }, h("div", { class: "dropi-media-player__progress-fill", style: { width: `${this.progress}%` } }), h("div", { class: "dropi-media-player__progress-thumb", style: { left: `${this.progress}%` } }))), h("div", { class: "dropi-media-player__actions" }, h("div", { class: "dropi-media-player__speed-control", onClick: (e) => e.stopPropagation() }, this.showSpeedMenu && (h("div", { class: "dropi-media-player__speed-menu" }, this.speeds.map(s => (h("button", { type: "button", class: { 'dropi-media-player__speed-option': true, 'dropi-media-player__speed-option--active': this.speed === s }, onClick: (e) => { e.stopPropagation(); this.selectSpeed(s); } }, "x", s))))), h("button", { class: "dropi-media-player__btn dropi-media-player__btn--speed", onClick: (e) => { e.stopPropagation(); this.toggleSpeedMenu(); }, type: "button" }, "x", this.speed)), h("button", { class: "dropi-media-player__btn", onClick: (e) => { e.stopPropagation(); this.toggleFullscreen(); }, type: "button" }, h("dropi-icon", { name: this.isFullscreen ? 'Compress' : 'Expand', color: "Neutral-White", iconWidth: "20px", iconHeight: "20px" })), h("div", { class: "dropi-media-player__volume-control", onClick: (e) => e.stopPropagation() }, this.showVolumeSlider && (h("div", { class: "dropi-media-player__volume-popup" }, h("input", { type: "range", class: "dropi-media-player__volume-slider", min: "0", max: "1", step: "0.01", value: this.muted ? 0 : this.volume, style: { background: this.volumeGradient }, onInput: (e) => this.handleVolume(e) }))), h("button", { class: "dropi-media-player__btn", onClick: (e) => { e.stopPropagation(); this.toggleVolume(); }, type: "button" }, h("dropi-icon", { name: this.volumeIcon, color: "Neutral-White", iconWidth: "20px", iconHeight: "20px" })))))));
-    }
-};
-DropiMediaPlayer.style = dropiMediaPlayerCss();
-
-export { DropiMediaPlayer as dropi_media_player };
-//# sourceMappingURL=dropi-media-player.entry.esm.js.map
-
-//# sourceMappingURL=dropi-media-player.entry.js.map

package/dist/dropi-ui/dropi-media-player.entry.js.map

@@ -1 +0,0 @@
-{"file":"dropi-media-player.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-media-player/dropi-media-player.css?tag=dropi-media-player&encapsulation=shadow","src/components/dropi-media-player/dropi-media-player.tsx"],"sourcesContent":[":host { \n  display: block; \n  width: 100%; \n}\n\n*, *::before, *::after { box-sizing: border-box; }\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n\n.dropi-media-player {\n  position: relative;\n  width: 100%;\n  max-width: 335px;\n  height: auto;\n  aspect-ratio: 335 / 567;\n  background-color: var(--Neutral-Black);\n  border-radius: var(--Border-2, 8px);\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n\n/* ── Formatos ────────────────────────────────────────────────── */\n.dropi-media-player--mobile-vertical {\n  max-width: 335px;\n  aspect-ratio: 335 / 567;\n}\n\n.dropi-media-player--mobile-compact {\n  max-width: 335px;\n  aspect-ratio: 335 / 337;\n}\n\n.dropi-media-player--desktop {\n  max-width: 587px;\n  aspect-ratio: 587 / 567;\n}\n\n.dropi-media-player__video {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/* Botón play/pause central */\n.dropi-media-player__center-play {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  border-radius: 400px;\n  background-color: rgba(14, 17, 26, 0.6);\n  backdrop-filter: blur(2px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: opacity 0.3s ease;\n  pointer-events: auto;\n}\n\n.dropi-media-player__center-play--hidden {\n  opacity: 0;\n  pointer-events: none;\n}\n\n/* Barra inferior de controles */\n.dropi-media-player__controls-bar {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 72px;\n  padding: 24px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 10px;\n  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000);\n  transition: opacity 0.3s ease;\n  box-sizing: border-box;\n}\n\n.dropi-media-player__controls-bar--hidden {\n  opacity: 0;\n  pointer-events: none;\n}\n\n.dropi-media-player__timestamp {\n  font-family: var(--font-family-01, 'Inter', sans-serif);\n  font-size: var(--font-size-xs, 12px);\n  font-weight: var(--font-weight-medium, 500);\n  color: var(--Neutral-White);\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n\n/* Barra de progreso */\n.dropi-media-player__progress {\n  flex: 1;\n  padding: 6px 0;\n  cursor: pointer;\n  position: relative;\n}\n\n.dropi-media-player__progress-track {\n  position: relative;\n  width: 100%;\n  height: 5px;\n  border-radius: var(--Border-2, 8px);\n  background-color: var(--Gray-Gray-700, #32394d);\n}\n\n.dropi-media-player__progress-fill {\n  height: 100%;\n  background-color: var(--Neutral-White);\n  border-radius: var(--Border-2, 8px);\n  will-change: width;\n}\n\n.dropi-media-player__progress-thumb {\n  position: absolute;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  background-color: var(--Neutral-White);\n  pointer-events: none;\n  will-change: left;\n}\n\n/* Grupo de botones de la derecha */\n.dropi-media-player__actions {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex-shrink: 0;\n}\n\n.dropi-media-player__btn {\n  -webkit-appearance: none;\n  appearance: none;\n  background: transparent;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--Neutral-White);\n  transition: opacity 0.15s ease;\n}\n.dropi-media-player__btn:hover {\n  opacity: 0.8;\n}\n\n.dropi-media-player__btn--speed {\n  font-family: var(--font-family-01, 'Inter', sans-serif);\n  font-size: var(--font-size-sm, 14px);\n  font-weight: var(--font-weight-medium, 500);\n  color: var(--Neutral-White);\n  min-width: 20px;\n}\n\n/* Control de velocidad */\n.dropi-media-player__speed-control {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.dropi-media-player__speed-menu {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  left: 50%;\n  transform: translateX(-50%);\n  background: var(--Gray-Gray-800, #1f2433);\n  border-radius: var(--Border-2, 8px);\n  padding: 6px 0;\n  min-width: 44px;\n  display: flex;\n  flex-direction: column;\n  z-index: 20;\n}\n\n.dropi-media-player__speed-option {\n  -webkit-appearance: none;\n  appearance: none;\n  background: transparent;\n  border: none;\n  padding: 6px 10px;\n  font-family: var(--font-family-01, 'Inter', sans-serif);\n  font-size: var(--font-size-s);\n  font-weight: var(--font-weight-medium);\n  color: var(--Neutral-White);\n  cursor: pointer;\n  text-align: center;\n  white-space: nowrap;\n  transition: opacity 0.15s ease;\n}\n.dropi-media-player__speed-option--active {\n  color: var(--Primary-Primary-500, #f49a3d);\n}\n.dropi-media-player__speed-option:hover {\n  opacity: 0.8;\n}\n\n/* Control de volumen */\n.dropi-media-player__volume-control {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.dropi-media-player__volume-popup {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  left: 50%;\n  transform: translateX(-50%);\n  width: 32px;\n  height: 108px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--Gray-Gray-800, #1f2433);\n  border-radius: var(--Border-2, 8px);\n  overflow: visible;\n  z-index: 20;\n}\n\n.dropi-media-player__volume-slider {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 97px;\n  height: 8px;\n  transform: rotate(-90deg);\n  border-radius: 4px;\n  cursor: pointer;\n  outline: none;\n  flex-shrink: 0;\n}\n\n.dropi-media-player__volume-slider::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  background: var(--Neutral-White);\n  cursor: pointer;\n}\n\n.dropi-media-player__volume-slider::-moz-range-thumb {\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  background: var(--Neutral-White);\n  border: none;\n  cursor: pointer;\n}\n\n.dropi-media-player__volume-slider::-webkit-slider-runnable-track {\n  border-radius: 4px;\n}\n\n.dropi-media-player__volume-slider::-moz-range-track {\n  height: 8px;\n  background: var(--Gray-Gray-700, #32394d);\n  border-radius: 4px;\n}\n\n/* Blur background (oculto por defecto, visible en fullscreen) */\n.dropi-media-player__blur-bg {\n  display: none;\n  position: absolute;\n  inset: 0;\n  background-size: cover;\n  background-position: center;\n  filter: blur(21px);\n  transform: scale(1.15);\n  z-index: 0;\n}\n\n.dropi-media-player__blur-overlay {\n  display: none;\n  position: absolute;\n  inset: 0;\n  background-color: rgba(0, 0, 0, 0.7);\n  z-index: 0;\n}\n\n/* Fullscreen mode */\n.dropi-media-player.is-fullscreen,\n.dropi-media-player:fullscreen {\n  max-width: none;\n  aspect-ratio: auto;\n  width: 100vw;\n  height: 100vh;\n  border-radius: 0;\n}\n\n.dropi-media-player.is-fullscreen .dropi-media-player__blur-bg,\n.dropi-media-player:fullscreen .dropi-media-player__blur-bg,\n.dropi-media-player.is-fullscreen .dropi-media-player__blur-overlay,\n.dropi-media-player:fullscreen .dropi-media-player__blur-overlay {\n  display: block;\n}\n\n.dropi-media-player.is-fullscreen .dropi-media-player__video,\n.dropi-media-player:fullscreen .dropi-media-player__video {\n  object-fit: contain;\n  position: relative;\n  z-index: 1;\n}\n\n.dropi-media-player.is-fullscreen .dropi-media-player__center-play,\n.dropi-media-player:fullscreen .dropi-media-player__center-play,\n.dropi-media-player.is-fullscreen .dropi-media-player__controls-bar,\n.dropi-media-player:fullscreen .dropi-media-player__controls-bar {\n  z-index: 2;\n}\n","import { Component, Prop, State, Event, EventEmitter, Element, h, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'dropi-media-player',\n  styleUrl: 'dropi-media-player.css',\n  shadow: true,\n})\nexport class DropiMediaPlayer {\n  @Element() el!: HTMLElement;\n  @Prop() src: string = '';\n  @Prop() mediaType: 'audio' | 'video' = 'video';\n  @Prop() poster: string = '';\n  @Prop() autoplay: boolean = false;\n  @Prop() loop: boolean = false;\n  @Prop() initialVolume: number = 1;\n  /** Format defines aspect ratio scales like Angular original */\n  @Prop() format: 'mobile-vertical' | 'mobile-compact' | 'desktop' = 'mobile-vertical';\n\n  @State() private playing: boolean = false;\n  @State() private currentTimeStr: string = '00:00';\n  @State() private durationStr: string = '00:00';\n  @State() private duration: number = 0;\n  @State() private volume: number = 1;\n  @State() private muted: boolean = false;\n  @State() private showControls: boolean = true;\n  @State() private isFullscreen: boolean = false;\n  @State() private progress: number = 0;\n  @State() private speed: number = 1;\n\n  @State() private showSpeedMenu: boolean = false;\n  @State() private showVolumeSlider: boolean = false;\n\n  private mediaEl!: HTMLVideoElement | HTMLAudioElement;\n  private controlsTimeout: ReturnType<typeof setTimeout>;\n  private speeds = [1, 2, 3];\n\n  @Event() dropiPlay: EventEmitter<boolean>;\n  @Event() dropiEnded: EventEmitter<void>;\n\n  componentDidLoad() {\n    if (this.mediaEl) {\n      const vol = this.initialVolume ?? 1;\n      if (isFinite(vol)) {\n        this.mediaEl.volume = vol;\n        this.muted = vol === 0;\n        this.volume = vol;\n      }\n    }\n    document.addEventListener('fullscreenchange', this.handleFullscreenChange);\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('fullscreenchange', this.handleFullscreenChange);\n    clearTimeout(this.controlsTimeout);\n  }\n\n  private handleFullscreenChange = () => {\n    this.isFullscreen = !!document.fullscreenElement;\n  };\n\n  private togglePlay() {\n    if (!this.mediaEl) return;\n    if (this.playing) {\n      this.mediaEl.pause();\n    } else {\n      const promise = this.mediaEl.play();\n      if (promise !== undefined) {\n        promise.catch((e) => { console.warn('Play error:', e); this.playing = false; });\n      }\n    }\n  }\n\n  private handleTimeUpdate() {\n    if (!this.duration) return;\n    this.progress = (this.mediaEl.currentTime / this.duration) * 100;\n    this.currentTimeStr = this.formatTime(this.mediaEl.currentTime);\n  }\n\n  private handleLoadedMetadata() {\n    this.duration = this.mediaEl.duration;\n    this.durationStr = this.formatTime(this.duration);\n  }\n\n  private handleSeek(e: MouseEvent) {\n    if (!this.duration) return;\n    const bar = e.currentTarget as HTMLElement;\n    const rect = bar.getBoundingClientRect();\n    const pos = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));\n    this.mediaEl.currentTime = pos * this.duration;\n  }\n\n  private handleVolume(e: Event) {\n    const val = parseFloat((e.target as HTMLInputElement).value);\n    this.mediaEl.volume = val;\n    this.volume = val;\n    this.muted = val === 0;\n    this.mediaEl.muted = this.muted;\n  }\n\n  private toggleSpeedMenu() {\n    this.showSpeedMenu = !this.showSpeedMenu;\n    this.showVolumeSlider = false;\n  }\n\n  private selectSpeed(s: number) {\n    this.speed = s;\n    if (this.mediaEl) this.mediaEl.playbackRate = s;\n    this.showSpeedMenu = false;\n  }\n\n  private toggleVolume() {\n    this.showVolumeSlider = !this.showVolumeSlider;\n    this.showSpeedMenu = false;\n  }\n\n  private toggleFullscreen() {\n    if (!this.isFullscreen) {\n      this.el.shadowRoot.host.requestFullscreen?.();\n    } else {\n      document.exitFullscreen?.();\n    }\n  }\n\n  private onMouseMove() {\n    this.showControls = true;\n    if (this.playing) this.startHideControlsTimer();\n  }\n\n  private onMouseLeave() {\n    if (this.playing) {\n      this.showControls = false;\n      this.showVolumeSlider = false;\n      this.showSpeedMenu = false;\n    }\n  }\n\n  private startHideControlsTimer() {\n    clearTimeout(this.controlsTimeout);\n    this.controlsTimeout = setTimeout(() => {\n      if (this.playing) {\n        this.showControls = false;\n        this.showVolumeSlider = false;\n        this.showSpeedMenu = false;\n      }\n    }, 5000);\n  }\n\n  @Listen('click', { target: 'document' })\n  handleDocClick(e: MouseEvent) {\n    if (!this.el.contains(e.target as Node)) {\n      this.showVolumeSlider = false;\n      this.showSpeedMenu = false;\n    }\n  }\n\n  private formatTime(secs: number): string {\n    if (isNaN(secs)) return '00:00';\n    const m = Math.floor(secs / 60);\n    const s = Math.floor(secs % 60);\n    return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;\n  }\n\n  get playButtonSize(): number {\n    if (this.format === 'desktop') return 80;\n    if (this.format === 'mobile-compact') return 40;\n    return 60;\n  }\n  get playIconSize(): number {\n    if (this.format === 'desktop') return 32;\n    if (this.format === 'mobile-compact') return 17;\n    return 26;\n  }\n  get volumeIcon(): string {\n    return (this.muted || this.volume === 0) ? 'Volumen-silent' : 'Volumen';\n  }\n  get volumeGradient(): string {\n    const pct = (this.muted ? 0 : this.volume) * 100;\n    return `linear-gradient(to right, #ffffff ${pct}%, #32394d ${pct}%)`;\n  }\n\n  render() {\n    if (this.mediaType === 'audio') {\n      return (\n         <audio\n          src={this.src}\n          autoplay={this.autoplay}\n          loop={this.loop}\n          controls\n          style={{ width: '100%' }}\n        />\n      );\n    }\n\n    return (\n      <div \n        class={{\n          'dropi-media-player': true,\n          [`dropi-media-player--${this.format}`]: true,\n          'is-fullscreen': this.isFullscreen\n        }}\n        onMouseMove={() => this.onMouseMove()}\n        onMouseLeave={() => this.onMouseLeave()}\n      >\n        {/* Fullscreen blur */}\n        <div class=\"dropi-media-player__blur-bg\" style={{ backgroundImage: `url(${this.poster})` }}></div>\n        <div class=\"dropi-media-player__blur-overlay\"></div>\n\n        <video\n          class=\"dropi-media-player__video\"\n          ref={(el) => this.mediaEl = el as HTMLVideoElement}\n          src={this.src}\n          poster={this.poster}\n          onClick={() => this.togglePlay()}\n          onPlay={() => { this.playing = true; this.startHideControlsTimer(); this.dropiPlay.emit(true); }}\n          onPause={() => { this.playing = false; this.showControls = true; clearTimeout(this.controlsTimeout); this.dropiPlay.emit(false); }}\n          onEnded={() => { this.playing = false; this.showControls = true; this.dropiEnded.emit(); }}\n          onTimeUpdate={() => this.handleTimeUpdate()}\n          onLoadedMetaData={() => this.handleLoadedMetadata()}\n        ></video>\n\n        {/* Center Play Button */}\n        <div \n          class={{\n            'dropi-media-player__center-play': true,\n            'dropi-media-player__center-play--hidden': this.playing && !this.showControls\n          }}\n          style={{ width: `${this.playButtonSize}px`, height: `${this.playButtonSize}px` }}\n          onClick={(e) => { e.stopPropagation(); this.togglePlay(); }}\n        >\n          {this.playing ? (\n            <svg width={`${this.playIconSize}px`} height={`${this.playIconSize}px`} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" style={{color: '#ffffff'}}>\n              <rect x=\"6.5\" y=\"4\" width=\"3.5\" height=\"16\" rx=\"1.75\" />\n              <rect x=\"14\" y=\"4\" width=\"3.5\" height=\"16\" rx=\"1.75\" />\n            </svg>\n          ) : (\n            <dropi-icon name=\"Play\" color=\"Neutral-White\" iconWidth={`${this.playIconSize}px`} iconHeight={`${this.playIconSize}px`} />\n          )}\n        </div>\n\n        {/* Controls Bar */}\n        <div \n          class={{\n            'dropi-media-player__controls-bar': true,\n            'dropi-media-player__controls-bar--hidden': !this.showControls\n          }}\n          onClick={(e) => e.stopPropagation()}\n        >\n          <span class=\"dropi-media-player__timestamp\">{this.currentTimeStr} / {this.durationStr}</span>\n\n          {/* Progress Bar */}\n          <div class=\"dropi-media-player__progress\" onClick={(e) => { e.stopPropagation(); this.handleSeek(e); }}>\n            <div class=\"dropi-media-player__progress-track\">\n              <div class=\"dropi-media-player__progress-fill\" style={{ width: `${this.progress}%` }}></div>\n              <div class=\"dropi-media-player__progress-thumb\" style={{ left: `${this.progress}%` }}></div>\n            </div>\n          </div>\n\n          {/* Actions Right */}\n          <div class=\"dropi-media-player__actions\">\n            \n            {/* Speed Control */}\n            <div class=\"dropi-media-player__speed-control\" onClick={(e) => e.stopPropagation()}>\n              {this.showSpeedMenu && (\n                <div class=\"dropi-media-player__speed-menu\">\n                  {this.speeds.map(s => (\n                    <button\n                      type=\"button\"\n                      class={{ 'dropi-media-player__speed-option': true, 'dropi-media-player__speed-option--active': this.speed === s }}\n                      onClick={(e) => { e.stopPropagation(); this.selectSpeed(s); }}\n                    >\n                      x{s}\n                    </button>\n                  ))}\n                </div>\n              )}\n              <button class=\"dropi-media-player__btn dropi-media-player__btn--speed\" onClick={(e) => { e.stopPropagation(); this.toggleSpeedMenu(); }} type=\"button\">\n                x{this.speed}\n              </button>\n            </div>\n\n            {/* Fullscreen */}\n            <button class=\"dropi-media-player__btn\" onClick={(e) => { e.stopPropagation(); this.toggleFullscreen(); }} type=\"button\">\n              <dropi-icon name={this.isFullscreen ? 'Compress' : 'Expand'} color=\"Neutral-White\" iconWidth=\"20px\" iconHeight=\"20px\" />\n            </button>\n\n            {/* Volume Control */}\n            <div class=\"dropi-media-player__volume-control\" onClick={(e) => e.stopPropagation()}>\n              {this.showVolumeSlider && (\n                <div class=\"dropi-media-player__volume-popup\">\n                  <input \n                    type=\"range\"\n                    class=\"dropi-media-player__volume-slider\"\n                    min=\"0\" max=\"1\" step=\"0.01\"\n                    value={this.muted ? 0 : this.volume}\n                    style={{ background: this.volumeGradient }}\n                    onInput={(e) => this.handleVolume(e)}\n                  />\n                </div>\n              )}\n              <button class=\"dropi-media-player__btn\" onClick={(e) => { e.stopPropagation(); this.toggleVolume(); }} type=\"button\">\n                <dropi-icon name={this.volumeIcon} color=\"Neutral-White\" iconWidth=\"20px\" iconHeight=\"20px\" />\n              </button>\n            </div>\n\n          </div>\n        </div>\n\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-modal.entry.js

@@ -1,148 +0,0 @@
-import { r as registerInstance, d as createEvent, e as Build, h } from './index-BKkSRXlb.js';
-
-const dropiModalCss = () => `:host{display:contents;font-family:var(--font-family-01, 'Inter', sans-serif)}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}*,*::before,*::after{box-sizing:border-box}.modal-root{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity 0.18s ease;z-index:var(--dropi-z-index-modal, 9999);visibility:hidden}.modal-root--open{opacity:1;pointer-events:auto;visibility:visible}.modal-root--closing{opacity:1;pointer-events:none;visibility:visible}.modal-mask{position:absolute;inset:0;background:rgba(6,11,16,0.66);pointer-events:auto;opacity:0;transition:opacity 0.18s ease}.modal-root--open .modal-mask{opacity:1}.modal-root--closing .modal-mask{opacity:0}.modal-panel{position:relative;pointer-events:auto;display:flex;flex-direction:column;border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);box-shadow:0 0 60px rgba(0,0,0,0.06);overflow:hidden;padding:var(--Size-6, 32px);gap:var(--Size-5, 24px);max-height:calc(100vh - 60px);opacity:0;transform:translateY(16px) scale(0.92);transition:opacity 0.18s ease, transform 0.18s ease}.modal-root--open .modal-panel{opacity:1;transform:none}.modal-root--closing .modal-panel{opacity:0;transform:translateY(-12px) scale(1.06)}.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:var(--font-weight-bold);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;font-size:var(--font-size-xxl);line-height:1;color:var(--Gray-Gray-400)}.modal-close:hover{opacity:0.7}.modal-content{padding-right:8px;overflow:auto;flex:1;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:var(--Gray-Gray-300,#a3abbf) var(--Gray-Gray-50,#f7f8fa)}.modal-content::-webkit-scrollbar{width:4px}.modal-content::-webkit-scrollbar-track{background:var(--Gray-Gray-50,#f7f8fa);border-radius:16px}.modal-content::-webkit-scrollbar-thumb{background:var(--Gray-Gray-300,#a3abbf);border-radius:16px}.modal-footer{display:flex;justify-content:flex-end;align-items:flex-start;gap:var(--Size-1, 4px);width:100%;margin-top:auto;flex-shrink:0}.modal-footer:empty{display:none}::slotted(.button-container){display:grid;grid-template-columns:1fr 1fr;gap:var(--Size-4, 16px);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,.modal-panel.size-xs .modal-footer{justify-content:flex-end}.modal-panel.size-m .modal-footer ::slotted(.button-container),.modal-panel.size-s .modal-footer ::slotted(.button-container),.modal-panel.size-xs .modal-footer ::slotted(.button-container){min-width:unset !important;width:100%}.modal-panel.size-drawer-s .modal-footer ::slotted(.button-container){min-width:unset;display:flex;flex-direction:column-reverse;gap:var(--Size-4, 16px)}.modal-panel.size-full{width:100%;height:100vh;max-height:100vh;border-radius:0}.modal-panel.size-xxl{width:calc(100% - 60px);max-width:1520px;height:calc(100vh - 120px);max-height:900px}.modal-panel.size-l{width:1137px;max-width:1137px;max-height:754px}.modal-panel.size-m{max-width:550px;width:550px}.modal-panel.size-s{width:454px}.modal-panel.size-xs{width:320px;padding:24px;gap:16px}.modal-root--right{align-items:stretch;justify-content:flex-end}.modal-root--right .modal-panel{height:100vh;max-height:100vh;border-radius:0;gap:0;opacity:1;transform:translateX(100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1)}.modal-root--open.modal-root--right .modal-panel{transform:translateX(0)}.modal-root--closing.modal-root--right .modal-panel{transform:translateX(100%)}.modal-root--right .modal-panel.size-drawer-s{width:351px;padding:20px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-m{width:550px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-l{width:1137px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-xxl{width:1214px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-sidebar-half{width:50vw;min-width:600px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}@media (max-width: 768px){.modal-root--right .modal-panel.size-drawer-s,.modal-root--right .modal-panel.size-drawer-m,.modal-root--right .modal-panel.size-drawer-l,.modal-root--right .modal-panel.size-drawer-xxl,.modal-root--right .modal-panel.size-sidebar-half{width:100vw;min-width:unset}}.modal-root--left{align-items:stretch;justify-content:flex-start}.modal-root--left .modal-panel{height:100vh;max-height:100vh;border-radius:0;gap:0;opacity:1;transform:translateX(-100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1)}.modal-root--open.modal-root--left .modal-panel{transform:translateX(0)}.modal-root--closing.modal-root--left .modal-panel{transform:translateX(-100%)}.modal-root--top{align-items:flex-start}.modal-root--bottom{align-items:flex-end}@media (max-width: 599px){.modal-panel{padding:20px;width:100% !important}.modal-panel:not(.size-s){border-radius:0 !important;height:100% !important;max-height:unset !important}.modal-root--right .modal-panel{width:100vw !important;min-width:unset !important}.modal-footer{justify-content:center}.modal-footer ::slotted(.button-container){width:100%;min-width:unset !important;display:flex;flex-direction:column-reverse;gap:var(--Size-4, 16px)}}@media (prefers-reduced-motion: reduce){.modal-root,.modal-mask,.modal-panel{transition:none !important}}`;
-
-const DropiModal = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.dropiShow = createEvent(this, "dropiShow", 7);
-        this.dropiHide = createEvent(this, "dropiHide", 7);
-        this.dropiVisibleChange = createEvent(this, "dropiVisibleChange", 7);
-    }
-    visible = false;
-    header = null;
-    showCloseIcon = true;
-    dismissable = true;
-    dismissableMask = true;
-    dismissible = true;
-    closeOnEscape = true;
-    modal = true;
-    closable = true;
-    blockScroll = true;
-    showHeader = true;
-    showFooter = true;
-    position = 'center';
-    size = 'm';
-    styleClass = null;
-    maxWidth = null;
-    /** Auto-manage z-index stack (matches Angular `autoZIndex`) */
-    autoZIndex = true;
-    /** Base z-index value when autoZIndex is false (matches Angular `baseZIndex`) */
-    baseZIndex = 1100;
-    /** CSS transition duration, e.g. '0.15s' (matches Angular `transitionOptions`) */
-    transitionOptions = '0.15s';
-    /** Enable a before-close hook (matches Angular `enableBeforeClose`) */
-    enableBeforeClose = false;
-    /** No-op — kept for API parity with Angular (matches Angular `draggable`) */
-    isDraggable = false;
-    /** No-op — kept for API parity with Angular (matches Angular `resizable`) */
-    resizable = false;
-    dropiShow;
-    dropiHide;
-    dropiVisibleChange;
-    isOpen = false;
-    isClosing = false;
-    mounted = false;
-    closeTimer = null;
-    keyHandler = null;
-    canDismiss = false;
-    visibleChanged(val) {
-        if (val) {
-            this.openModal();
-        }
-        else {
-            this.startClose();
-        }
-    }
-    componentDidLoad() {
-        if (this.visible)
-            this.openModal();
-    }
-    disconnectedCallback() {
-        this.removeKeyHandler();
-        if (this.closeTimer)
-            clearTimeout(this.closeTimer);
-        if (typeof document !== 'undefined') {
-            document.body.classList.remove('dropi-modal-open');
-        }
-    }
-    async dismiss() {
-        if (this.visible) {
-            this.visible = false;
-            this.dropiVisibleChange.emit(false);
-        }
-        else {
-            this.startClose();
-        }
-    }
-    async openModalExternally() {
-        this.visible = true;
-        this.dropiVisibleChange.emit(true);
-    }
-    openModal() {
-        if (this.closeTimer) {
-            clearTimeout(this.closeTimer);
-            this.closeTimer = null;
-        }
-        // Safety: ensure it's not already open or in a closing state
-        this.isClosing = false;
-        this.mounted = true;
-        requestAnimationFrame(() => requestAnimationFrame(() => {
-            this.isOpen = true;
-            this.dropiShow.emit();
-        }));
-        this.addKeyHandler();
-        this.canDismiss = false;
-        setTimeout(() => { this.canDismiss = true; }, 300);
-        if ((this.modal ?? true) && Build.isBrowser && document.body) {
-            document.body.classList.add('dropi-modal-open');
-        }
-    }
-    startClose() {
-        if (this.isClosing || !this.mounted)
-            return;
-        this.isClosing = true;
-        this.isOpen = false;
-        this.removeKeyHandler();
-        if (this.closeTimer)
-            clearTimeout(this.closeTimer);
-        this.closeTimer = setTimeout(() => {
-            this.mounted = false;
-            this.isClosing = false;
-            this.closeTimer = null;
-            if ((this.modal ?? true) && Build.isBrowser && document.body) {
-                document.body.classList.remove('dropi-modal-open');
-            }
-            this.dropiHide.emit();
-        }, 200);
-    }
-    addKeyHandler() {
-        if (!this.closeOnEscape)
-            return;
-        this.keyHandler = (e) => {
-            if (e.key === 'Escape' && this.visible && this.dismissable && this.canDismiss)
-                this.dismiss();
-        };
-        document.addEventListener('keydown', this.keyHandler);
-    }
-    removeKeyHandler() {
-        if (this.keyHandler) {
-            document.removeEventListener('keydown', this.keyHandler);
-            this.keyHandler = null;
-        }
-    }
-    render() {
-        return (h("div", { key: '53711d354c4b27605ac5f6055cd69c6ab43f570e', class: `modal-root modal-root--${this.position}${this.isOpen ? ' modal-root--open' : ''}${this.isClosing ? ' modal-root--closing' : ''}` }, (this.modal ?? true) && h("div", { key: '4147c3dbb245ca88fa7b351778c6e4fcc46c14f6', class: "modal-mask", onClick: () => this.canDismiss && this.dismissable && this.dismiss() }), h("div", { key: 'ca1c89b733bf8137acfffc339e27eae61b776e70', class: `modal-panel size-${this.size || 'm'}`, role: "dialog", "aria-modal": "true", style: this.maxWidth ? { maxWidth: this.maxWidth, width: '100%' } : {} }, this.showHeader && (h("div", { key: '7b8cef664836de6f82741e7ba9818474e6e3e6ca', class: "modal-header" }, this.header && h("span", { key: 'adc171e6a6a9e02735efbe2396bab24cbbbd9973', class: "modal-title" }, this.header), h("slot", { key: '1efb24ac5262501c30ba27cac2ed3a0a04a39840', name: "header" }), this.showCloseIcon && (h("button", { key: 'bd904805550989474cbdc594862afa3fe2f66339', class: "modal-close", onClick: () => this.dismiss(), "aria-label": "Cerrar" }, "\u00D7")))), h("div", { key: 'e45eea610d3cdcc9c437b0f9a1da533cfecae96d', class: "modal-content" }, h("slot", { key: '84faf7ccf6619bd280c1785bff2bcd6aae173488' })), this.showFooter && h("div", { key: 'ce5112038986f29630fb0936b785a026cb775e91', class: "modal-footer" }, h("slot", { key: '0bbfbc0c55dc61555472ae23116c7eae85107eb8', name: "footer" })))));
-    }
-    static get watchers() { return {
-        "visible": [{
-                "visibleChanged": 0
-            }]
-    }; }
-};
-DropiModal.style = dropiModalCss();
-
-export { DropiModal as dropi_modal };
-//# sourceMappingURL=dropi-modal.entry.esm.js.map
-
-//# sourceMappingURL=dropi-modal.entry.js.map

package/dist/dropi-ui/dropi-modal.entry.js.map

@@ -1 +0,0 @@
-{"file":"dropi-modal.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-modal/dropi-modal.css?tag=dropi-modal&encapsulation=shadow","src/components/dropi-modal/dropi-modal.tsx"],"sourcesContent":[":host { display: contents; font-family: var(--font-family-01, 'Inter', sans-serif); }\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n*, *::before, *::after { box-sizing: border-box; }\n\n.modal-root {\n  position: fixed; inset: 0;\n  display: flex; align-items: center; justify-content: center;\n  pointer-events: none; opacity: 0;\n  transition: opacity 0.18s ease; z-index: var(--dropi-z-index-modal, 9999);\n  visibility: hidden;\n}\n.modal-root--open { opacity: 1; pointer-events: auto; visibility: visible; }\n.modal-root--closing { opacity: 1; pointer-events: none; visibility: visible; }\n\n.modal-mask {\n  position: absolute; inset: 0;\n  background: rgba(6,11,16,0.66); pointer-events: auto;\n  opacity: 0; transition: opacity 0.18s ease;\n}\n.modal-root--open .modal-mask { opacity: 1; }\n.modal-root--closing .modal-mask { opacity: 0; }\n\n.modal-panel {\n  position: relative; pointer-events: auto;\n  display: flex; flex-direction: column;\n  border-radius: var(--Border-2, 8px);\n  background: var(--Neutral-White, #ffffff);\n  box-shadow: 0 0 60px rgba(0,0,0,0.06);\n  overflow: hidden;\n  padding: var(--Size-6, 32px); gap: var(--Size-5, 24px);\n  max-height: calc(100vh - 60px);\n  opacity: 0; transform: translateY(16px) scale(0.92);\n  transition: opacity 0.18s ease, transform 0.18s ease;\n}\n.modal-root--open .modal-panel { opacity: 1; transform: none; }\n.modal-root--closing .modal-panel { opacity: 0; transform: translateY(-12px) scale(1.06); }\n\n.modal-header { display: flex; align-items: center; gap: 4px; }\n.modal-title { color: var(--Gray-Gray-700,#32394d); font-size: var(--Size-5, 24px); font-weight: var(--font-weight-bold); flex: 1; text-align: left; }\n.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: var(--font-size-xxl); line-height: 1; color: var(--Gray-Gray-400); }\n.modal-close:hover { opacity: 0.7; }\n\n.modal-content {\n  padding-right: 8px; overflow: auto; flex: 1;\n  display: flex; flex-direction: column;\n  scrollbar-width: thin; scrollbar-color: var(--Gray-Gray-300,#a3abbf) var(--Gray-Gray-50,#f7f8fa);\n}\n.modal-content::-webkit-scrollbar { width: 4px; }\n.modal-content::-webkit-scrollbar-track { background: var(--Gray-Gray-50,#f7f8fa); border-radius: 16px; }\n.modal-content::-webkit-scrollbar-thumb { background: var(--Gray-Gray-300,#a3abbf); border-radius: 16px; }\n\n.modal-footer { \n  display: flex; \n  justify-content: flex-end; \n  align-items: flex-start; \n  gap: var(--Size-1, 4px); \n  width: 100%;\n  margin-top: auto;\n  flex-shrink: 0;\n}\n.modal-footer:empty { display: none; }\n\n/* button-container: grid 2 columnas igual que en Angular host p-dialog-footer */\n::slotted(.button-container) {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: var(--Size-4, 16px);\n  min-width: 470px;\n  width: 100%;\n}\n::slotted(.button-container) > * {\n  width: 100%;\n}\n::slotted(.button-container) dropi-button {\n  width: 100%;\n}\n\n.modal-panel.size-m .modal-footer,\n.modal-panel.size-s .modal-footer,\n.modal-panel.size-xs .modal-footer { \n  justify-content: flex-end; \n}\n\n.modal-panel.size-m .modal-footer ::slotted(.button-container),\n.modal-panel.size-s .modal-footer ::slotted(.button-container),\n.modal-panel.size-xs .modal-footer ::slotted(.button-container) { \n  min-width: unset !important;\n  width: 100%;\n}\n\n.modal-panel.size-drawer-s .modal-footer ::slotted(.button-container) { \n  min-width: unset; \n  display: flex; \n  flex-direction: column-reverse; \n  gap: var(--Size-4, 16px);\n}\n\n.modal-panel.size-full { width: 100%; height: 100vh; max-height: 100vh; border-radius: 0; }\n.modal-panel.size-xxl { width: calc(100% - 60px); max-width: 1520px; height: calc(100vh - 120px); max-height: 900px; }\n.modal-panel.size-l { width: 1137px; max-width: 1137px; max-height: 754px; }\n.modal-panel.size-m { max-width: 550px; width: 550px; }\n.modal-panel.size-s { width: 454px; }\n.modal-panel.size-xs { width: 320px; padding: 24px; gap: 16px; }\n\n.modal-root--right { align-items: stretch; justify-content: flex-end; }\n.modal-root--right .modal-panel { height: 100vh; max-height: 100vh; border-radius: 0; gap: 0; opacity: 1; transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.4,0,0.2,1); }\n.modal-root--open.modal-root--right .modal-panel { transform: translateX(0); }\n.modal-root--closing.modal-root--right .modal-panel { transform: translateX(100%); }\n.modal-root--right .modal-panel.size-drawer-s { width: 351px; padding: 20px; box-shadow: 0 8px 40px rgba(0,0,0,0.16); }\n.modal-root--right .modal-panel.size-drawer-m { width: 550px; box-shadow: 0 8px 40px rgba(0,0,0,0.16); }\n.modal-root--right .modal-panel.size-drawer-l { width: 1137px; box-shadow: 0 8px 40px rgba(0,0,0,0.16); }\n.modal-root--right .modal-panel.size-drawer-xxl { width: 1214px; box-shadow: 0 8px 40px rgba(0,0,0,0.16); }\n.modal-root--right .modal-panel.size-sidebar-half { width: 50vw; min-width: 600px; box-shadow: 0 8px 40px rgba(0,0,0,0.16); }\n\n@media (max-width: 768px) {\n  .modal-root--right .modal-panel.size-drawer-s,\n  .modal-root--right .modal-panel.size-drawer-m,\n  .modal-root--right .modal-panel.size-drawer-l,\n  .modal-root--right .modal-panel.size-drawer-xxl,\n  .modal-root--right .modal-panel.size-sidebar-half { width: 100vw; min-width: unset; }\n}\n\n.modal-root--left { align-items: stretch; justify-content: flex-start; }\n.modal-root--left .modal-panel { height: 100vh; max-height: 100vh; border-radius: 0; gap: 0; opacity: 1; transform: translateX(-100%); transition: transform 0.32s cubic-bezier(0.4,0,0.2,1); }\n.modal-root--open.modal-root--left .modal-panel { transform: translateX(0); }\n.modal-root--closing.modal-root--left .modal-panel { transform: translateX(-100%); }\n\n.modal-root--top { align-items: flex-start; }\n.modal-root--bottom { align-items: flex-end; }\n\n@media (max-width: 599px) {\n  .modal-panel { padding: 20px; width: 100% !important; }\n  .modal-panel:not(.size-s) { border-radius: 0 !important; height: 100% !important; max-height: unset !important; }\n  .modal-root--right .modal-panel { width: 100vw !important; min-width: unset !important; }\n  \n  .modal-footer { justify-content: center; }\n  .modal-footer ::slotted(.button-container) { \n    width: 100%;\n    min-width: unset !important;\n    display: flex;\n    flex-direction: column-reverse;\n    gap: var(--Size-4, 16px);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .modal-root, .modal-mask, .modal-panel { transition: none !important; }\n}\n","import { Component, Prop, Event, EventEmitter, State, Watch, Method, h, Build } from '@stencil/core';\n\nexport type ModalPosition = 'center' | 'right' | 'left' | 'top' | 'bottom';\nexport type ModalSize = 'full' | 'xxl' | 'l' | 'm' | 's' | 'xs' | 'drawer-s' | 'drawer-m' | 'drawer-l' | 'drawer-xxl' | 'sidebar-half';\n\n/**\n * @component dropi-modal\n * Modal/dialog with backdrop, close button, and header/content/footer slots.\n * Slots: (default) body, \"header\" custom header, \"footer\" actions.\n */\n@Component({\n  tag: 'dropi-modal',\n  styleUrl: 'dropi-modal.css',\n  shadow: true,\n})\nexport class DropiModal {\n  @Prop({ mutable: true, reflect: true }) visible: boolean = false;\n  @Prop() header: string | null = null;\n  @Prop() showCloseIcon: boolean = true;\n  @Prop() dismissable: boolean = true;\n  @Prop() dismissableMask: boolean = true;\n  @Prop() dismissible: boolean = true;\n  @Prop() closeOnEscape: boolean = true;\n  @Prop() modal: boolean = true;\n  @Prop() closable: boolean = true;\n  @Prop() blockScroll: boolean = true;\n  @Prop() showHeader: boolean = true;\n  @Prop() showFooter: boolean = true;\n  @Prop() position: ModalPosition = 'center';\n  @Prop() size: ModalSize = 'm';\n  @Prop() styleClass: string | null = null;\n  @Prop() maxWidth: string | null = null;\n  /** Auto-manage z-index stack (matches Angular `autoZIndex`) */\n  @Prop() autoZIndex: boolean = true;\n  /** Base z-index value when autoZIndex is false (matches Angular `baseZIndex`) */\n  @Prop() baseZIndex: number = 1100;\n  /** CSS transition duration, e.g. '0.15s' (matches Angular `transitionOptions`) */\n  @Prop() transitionOptions: string = '0.15s';\n  /** Enable a before-close hook (matches Angular `enableBeforeClose`) */\n  @Prop() enableBeforeClose: boolean = false;\n  /** No-op — kept for API parity with Angular (matches Angular `draggable`) */\n  @Prop() isDraggable: boolean = false;\n  /** No-op — kept for API parity with Angular (matches Angular `resizable`) */\n  @Prop() resizable: boolean = false;\n\n  @Event({ composed: true }) dropiShow: EventEmitter<void>;\n  @Event({ composed: true }) dropiHide: EventEmitter<void>;\n  @Event({ composed: true }) dropiVisibleChange: EventEmitter<boolean>;\n\n  @State() private isOpen: boolean = false;\n  @State() private isClosing: boolean = false;\n  @State() private mounted: boolean = false;\n\n  private closeTimer: any = null;\n  private keyHandler: ((e: KeyboardEvent) => void) | null = null;\n  private canDismiss: boolean = false;\n\n  @Watch('visible')\n  visibleChanged(val: boolean) {\n    if (val) {\n      this.openModal();\n    } else {\n      this.startClose();\n    }\n  }\n\n  componentDidLoad() {\n    if (this.visible) this.openModal();\n  }\n\n  disconnectedCallback() {\n    this.removeKeyHandler();\n    if (this.closeTimer) clearTimeout(this.closeTimer);\n    if (typeof document !== 'undefined') {\n      document.body.classList.remove('dropi-modal-open');\n    }\n  }\n\n  @Method() async dismiss() {\n    if (this.visible) {\n      this.visible = false;\n      this.dropiVisibleChange.emit(false);\n    } else {\n      this.startClose();\n    }\n  }\n\n  @Method() async openModalExternally() {\n    this.visible = true;\n    this.dropiVisibleChange.emit(true);\n  }\n\n  private openModal() {\n    if (this.closeTimer) { clearTimeout(this.closeTimer); this.closeTimer = null; }\n    \n    // Safety: ensure it's not already open or in a closing state\n    this.isClosing = false;\n    this.mounted = true;\n    \n    requestAnimationFrame(() => requestAnimationFrame(() => {\n      this.isOpen = true;\n      this.dropiShow.emit();\n    }));\n    \n    this.addKeyHandler();\n    this.canDismiss = false;\n    setTimeout(() => { this.canDismiss = true; }, 300);\n    \n    if ((this.modal ?? true) && Build.isBrowser && document.body) {\n      document.body.classList.add('dropi-modal-open');\n    }\n  }\n\n  private startClose() {\n    if (this.isClosing || !this.mounted) return;\n    this.isClosing = true;\n    this.isOpen = false;\n    this.removeKeyHandler();\n    \n    if (this.closeTimer) clearTimeout(this.closeTimer);\n    this.closeTimer = setTimeout(() => {\n      this.mounted = false;\n      this.isClosing = false;\n      this.closeTimer = null;\n      if ((this.modal ?? true) && Build.isBrowser && document.body) {\n        document.body.classList.remove('dropi-modal-open');\n      }\n      this.dropiHide.emit();\n    }, 200);\n  }\n\n  private addKeyHandler() {\n    if (!this.closeOnEscape) return;\n    this.keyHandler = (e: KeyboardEvent) => {\n      if (e.key === 'Escape' && this.visible && this.dismissable && this.canDismiss) this.dismiss();\n    };\n    document.addEventListener('keydown', this.keyHandler);\n  }\n\n  private removeKeyHandler() {\n    if (this.keyHandler) { document.removeEventListener('keydown', this.keyHandler); this.keyHandler = null; }\n  }\n\n  render() {\n    return (\n      <div \n        class={`modal-root modal-root--${this.position}${this.isOpen ? ' modal-root--open' : ''}${this.isClosing ? ' modal-root--closing' : ''}`}\n      >\n        {(this.modal ?? true) && <div class=\"modal-mask\" onClick={() => this.canDismiss && this.dismissable && this.dismiss()} />}\n        <div \n          class={`modal-panel size-${this.size || 'm'}`} \n          role=\"dialog\" \n          aria-modal=\"true\"\n          style={this.maxWidth ? { maxWidth: this.maxWidth, width: '100%' } : {}}\n        >\n          {this.showHeader && (\n            <div class=\"modal-header\">\n              {this.header && <span class=\"modal-title\">{this.header}</span>}\n              <slot name=\"header\"></slot>\n              {this.showCloseIcon && (\n                <button class=\"modal-close\" onClick={() => this.dismiss()} aria-label=\"Cerrar\">\n                  &times;\n                </button>\n              )}\n            </div>\n          )}\n          <div class=\"modal-content\"><slot /></div>\n          {this.showFooter && <div class=\"modal-footer\"><slot name=\"footer\" /></div>}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-navbar.entry.js

@@ -1,55 +0,0 @@
-import { r as registerInstance, d as createEvent, h } from './index-BKkSRXlb.js';
-
-const dropiNavbarCss = () => `:host{display:block;width:100%}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}*,*::before,*::after{box-sizing:border-box}.navbar{display:flex;align-items:center;height:56px;padding:0 var(--Size-4, 16px);background:var(--Neutral-White, #ffffff);border-bottom:1px solid var(--Gray-Gray-100, #eceef4);gap:var(--Size-4, 16px);position:relative}.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}.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:var(--font-family-01, 'Inter', sans-serif);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, #ffffff);font-size:var(--font-size-xxs);font-weight:var(--font-weight-bold);min-width:16px;height:16px;border-radius:100px;display:flex;align-items:center;justify-content:center;padding:0 4px}.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, #ffffff);font-size:9px;font-weight:var(--font-weight-bold);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:var(--font-family-01, 'Inter', sans-serif)}.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, #ffffff);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}`;
-
-const DropiNavbar = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.clickLoadItem = createEvent(this, "clickLoadItem", 7);
-        this.dropiNotificationsClick = createEvent(this, "dropiNotificationsClick", 7);
-        this.dropiUserClick = createEvent(this, "dropiUserClick", 7);
-        this.dropiMenuToggle = createEvent(this, "dropiMenuToggle", 7);
-    }
-    /** Logo URL */
-    logoUrl = '';
-    /** Logo alt */
-    logoAlt = 'Logo';
-    /** Navigation data (matches Angular `data: DropiTableRow[]`) */
-    data = [];
-    /** Title (matches Angular `title`) */
-    title = '';
-    /** Active item ID */
-    activeId = '';
-    /** User name */
-    userName = '';
-    /** User avatar URL */
-    userAvatar = '';
-    /** Notification count (0 = no badge) */
-    notifications = 0;
-    /** Show menu toggle (mobile) */
-    showMenuToggle = true;
-    /** Emitted when a nav item is clicked (matches Angular `clickLoadItem`) */
-    clickLoadItem;
-    /** Emitted when notification bell is clicked */
-    dropiNotificationsClick;
-    /** Emitted when avatar/user is clicked */
-    dropiUserClick;
-    /** Emitted when mobile menu toggle clicked */
-    dropiMenuToggle;
-    get parsedData() {
-        const val = this.data;
-        return typeof val === 'string' ? JSON.parse(val) : (val || []);
-    }
-    render() {
-        const items = this.parsedData;
-        return (h("nav", { key: 'd4405b424adf15001e591693b5f757ec91ee37b7', class: "navbar" }, h("div", { key: 'f191a9e8ecca13129c8c43da215d863c6025ac3b', class: "navbar__left" }, this.showMenuToggle && (h("button", { key: '07d601bfa96bfc5cbb0ea6d44b4aec86bf0a1f1d', class: "navbar__menu-btn", onClick: () => this.dropiMenuToggle.emit(), "aria-label": "Men\u00FA" }, h("dropi-icon", { key: 'd904648c698c41aa10f3d438676ac16a25f0b2cd', name: "Menu", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-700" }))), this.logoUrl && (h("img", { key: '692b0866baeb1fab0fd8ae610da6059ac1d51bc0', class: "navbar__logo", src: this.logoUrl, alt: this.logoAlt })), this.title && h("span", { key: '657edf577a245aee63115ee628f7a3f15e86f6db', class: "navbar__title" }, this.title)), items.length > 0 && (h("ul", { key: 'c535d6e5c3ca78161d382615a74f61ff8f46e338', class: "navbar__items" }, items.map(item => (h("li", null, h("button", { class: { 'navbar__item': true, 'navbar__item--active': item.id === this.activeId }, onClick: () => this.clickLoadItem.emit(item), type: "button" }, item.icon && h("dropi-icon", { name: item.icon, iconWidth: "16px", iconHeight: "16px", color: item.id === this.activeId ? 'Primary-Primary-500' : 'Gray-Gray-600' }), h("span", null, item.name?.value || item.label), item.badge != null && String(item.badge) !== '0' && (h("span", { class: "navbar__badge" }, item.badge)))))))), h("div", { key: 'ac9afc5a9f5255540a0246619277601ff863063e', class: "navbar__right" }, h("button", { key: 'a056854a983697b698bafd02a5ab51541d76b537', class: "navbar__icon-btn", onClick: () => this.dropiNotificationsClick.emit(), "aria-label": "Notificaciones" }, h("dropi-icon", { key: 'de8e50c25300d82409666ecbdb043611b545ccb8', name: "Bell", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-600" }), this.notifications > 0 && (h("span", { key: '34a95f2fd8d412948e20144e1441680b9db8f741', class: "navbar__notif-badge" }, this.notifications > 99 ? '99+' : this.notifications))), h("button", { key: 'd6e72f033993efa500e579aca2450458cd92fc1b', class: "navbar__user-btn", onClick: () => this.dropiUserClick.emit(), type: "button" }, this.userAvatar
-            ? h("img", { class: "navbar__avatar", src: this.userAvatar, alt: this.userName })
-            : h("div", { class: "navbar__avatar-placeholder" }, this.userName ? this.userName[0].toUpperCase() : '?'), this.userName && h("span", { key: '37bdf7197882ccac95fed9173cb5ea1f89b0f274', class: "navbar__user-name" }, this.userName), h("dropi-icon", { key: '5a5a486c17e985f7473b231cec080da6ebe25ea8', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })))));
-    }
-};
-DropiNavbar.style = dropiNavbarCss();
-
-export { DropiNavbar as dropi_navbar };
-//# sourceMappingURL=dropi-navbar.entry.esm.js.map
-
-//# sourceMappingURL=dropi-navbar.entry.js.map

package/dist/dropi-ui/dropi-navbar.entry.js.map

@@ -1 +0,0 @@
-{"file":"dropi-navbar.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-navbar/dropi-navbar.css?tag=dropi-navbar&encapsulation=shadow","src/components/dropi-navbar/dropi-navbar.tsx"],"sourcesContent":[":host { display: block; width: 100%; }\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n*, *::before, *::after { box-sizing: border-box; }\n\n.navbar {\n  display: flex;\n  align-items: center;\n  height: 56px;\n  padding: 0 var(--Size-4, 16px);\n  background: var(--Neutral-White, #ffffff);\n  border-bottom: 1px solid var(--Gray-Gray-100, #eceef4);\n  gap: var(--Size-4, 16px);\n  position: relative;\n}\n\n/* Left */\n.navbar__left {\n  display: flex;\n  align-items: center;\n  gap: var(--Size-2, 8px);\n  flex-shrink: 0;\n}\n\n.navbar__menu-btn {\n  background: none;\n  border: none;\n  padding: 6px;\n  cursor: pointer;\n  border-radius: var(--Border-1, 4px);\n  display: flex;\n  align-items: center;\n  transition: background 0.15s;\n}\n.navbar__menu-btn:hover { background: var(--Gray-Gray-50, #f7f8fa); }\n\n.navbar__logo {\n  height: 28px;\n  object-fit: contain;\n}\n\n/* Center nav items */\n.navbar__items {\n  flex: 1;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  gap: var(--Size-1, 4px);\n}\n\n.navbar__item {\n  display: flex;\n  align-items: center;\n  gap: var(--Size-1, 4px);\n  padding: 6px var(--Size-3, 12px);\n  background: none;\n  border: none;\n  border-radius: var(--Border-1, 4px);\n  font-size: var(--font-size-s, 12px);\n  font-family: var(--font-family-01, 'Inter', sans-serif);\n  color: var(--Gray-Gray-600, #475066);\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s;\n  white-space: nowrap;\n}\n.navbar__item:hover { background: var(--Gray-Gray-50, #f7f8fa); }\n.navbar__item--active {\n  background: var(--Primary-Primary-50, #fff5eb);\n  color: var(--Primary-Primary-500, #f49a3d);\n  font-weight: var(--font-weight-bold, 700);\n}\n\n.navbar__badge {\n  background: var(--Error-Error-500, #f46a6b);\n  color: var(--Neutral-White, #ffffff);\n  font-size: var(--font-size-xxs);\n  font-weight: var(--font-weight-bold);\n  min-width: 16px;\n  height: 16px;\n  border-radius: 100px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 4px;\n}\n\n/* Right */\n.navbar__right {\n  display: flex;\n  align-items: center;\n  gap: var(--Size-2, 8px);\n  flex-shrink: 0;\n}\n\n.navbar__icon-btn {\n  position: relative;\n  background: none;\n  border: none;\n  padding: 6px;\n  cursor: pointer;\n  border-radius: var(--Border-1, 4px);\n  display: flex;\n  align-items: center;\n  transition: background 0.15s;\n}\n.navbar__icon-btn:hover { background: var(--Gray-Gray-50, #f7f8fa); }\n\n.navbar__notif-badge {\n  position: absolute;\n  top: 2px;\n  right: 2px;\n  background: var(--Error-Error-500, #f46a6b);\n  color: var(--Neutral-White, #ffffff);\n  font-size: 9px;\n  font-weight: var(--font-weight-bold);\n  min-width: 14px;\n  height: 14px;\n  border-radius: 100px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 3px;\n}\n\n.navbar__user-btn {\n  display: flex;\n  align-items: center;\n  gap: var(--Size-1, 4px);\n  background: none;\n  border: none;\n  padding: 4px 8px;\n  border-radius: var(--Border-1, 4px);\n  cursor: pointer;\n  transition: background 0.15s;\n  font-family: var(--font-family-01, 'Inter', sans-serif);\n}\n.navbar__user-btn:hover { background: var(--Gray-Gray-50, #f7f8fa); }\n\n.navbar__avatar {\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  object-fit: cover;\n}\n\n.navbar__avatar-placeholder {\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  background: var(--Primary-Primary-500, #f49a3d);\n  color: var(--Neutral-White, #ffffff);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--font-size-xs, 10px);\n  font-weight: var(--font-weight-bold, 700);\n}\n\n.navbar__user-name {\n  font-size: var(--font-size-s, 12px);\n  color: var(--Gray-Gray-700, #32394d);\n  max-width: 120px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\nexport interface NavItem {\n  id: string;\n  label: string;\n  icon?: string;\n  badge?: string | number;\n  href?: string;\n}\n\n/**\n * @component dropi-navbar\n * Top navigation bar with logo, nav items, notification bell, and user avatar.\n */\n@Component({\n  tag: 'dropi-navbar',\n  styleUrl: 'dropi-navbar.css',\n  shadow: true,\n})\nexport class DropiNavbar {\n  /** Logo URL */\n  @Prop() logoUrl: string = '';\n  /** Logo alt */\n  @Prop() logoAlt: string = 'Logo';\n\n  /** Navigation data (matches Angular `data: DropiTableRow[]`) */\n  @Prop() data: any[] | string = [];\n  /** Title (matches Angular `title`) */\n  @Prop() title: string = '';\n\n  /** Active item ID */\n  @Prop() activeId: string = '';\n  /** User name */\n  @Prop() userName: string = '';\n  /** User avatar URL */\n  @Prop() userAvatar: string = '';\n  /** Notification count (0 = no badge) */\n  @Prop() notifications: number = 0;\n  /** Show menu toggle (mobile) */\n  @Prop() showMenuToggle: boolean = true;\n\n  /** Emitted when a nav item is clicked (matches Angular `clickLoadItem`) */\n  @Event() clickLoadItem: EventEmitter<any>;\n  /** Emitted when notification bell is clicked */\n  @Event() dropiNotificationsClick: EventEmitter<void>;\n  /** Emitted when avatar/user is clicked */\n  @Event() dropiUserClick: EventEmitter<void>;\n  /** Emitted when mobile menu toggle clicked */\n  @Event() dropiMenuToggle: EventEmitter<void>;\n\n  private get parsedData(): any[] {\n    const val = this.data;\n    return typeof val === 'string' ? JSON.parse(val) : (val || []);\n  }\n\n  render() {\n    const items = this.parsedData;\n\n    return (\n      <nav class=\"navbar\">\n        {/* Left: logo + title + menu toggle */}\n        <div class=\"navbar__left\">\n          {this.showMenuToggle && (\n            <button class=\"navbar__menu-btn\" onClick={() => this.dropiMenuToggle.emit()} aria-label=\"Menú\">\n              <dropi-icon name=\"Menu\" iconWidth=\"20px\" iconHeight=\"20px\" color=\"Gray-Gray-700\" />\n            </button>\n          )}\n          {this.logoUrl && (\n            <img class=\"navbar__logo\" src={this.logoUrl} alt={this.logoAlt} />\n          )}\n          {this.title && <span class=\"navbar__title\">{this.title}</span>}\n        </div>\n\n        {/* Center: nav items */}\n        {items.length > 0 && (\n          <ul class=\"navbar__items\">\n            {items.map(item => (\n              <li>\n                <button\n                  class={{ 'navbar__item': true, 'navbar__item--active': item.id === this.activeId }}\n                  onClick={() => this.clickLoadItem.emit(item)}\n                  type=\"button\"\n                >\n                  {item.icon && <dropi-icon name={item.icon} iconWidth=\"16px\" iconHeight=\"16px\" color={item.id === this.activeId ? 'Primary-Primary-500' : 'Gray-Gray-600'} />}\n                  <span>{item.name?.value || item.label}</span>\n                  {item.badge != null && String(item.badge) !== '0' && (\n                    <span class=\"navbar__badge\">{item.badge}</span>\n                  )}\n                </button>\n              </li>\n            ))}\n          </ul>\n        )}\n\n        {/* Right: notifications + user */}\n        <div class=\"navbar__right\">\n          <button class=\"navbar__icon-btn\" onClick={() => this.dropiNotificationsClick.emit()} aria-label=\"Notificaciones\">\n            <dropi-icon name=\"Bell\" iconWidth=\"20px\" iconHeight=\"20px\" color=\"Gray-Gray-600\" />\n            {this.notifications > 0 && (\n              <span class=\"navbar__notif-badge\">{this.notifications > 99 ? '99+' : this.notifications}</span>\n            )}\n          </button>\n\n          <button class=\"navbar__user-btn\" onClick={() => this.dropiUserClick.emit()} type=\"button\">\n            {this.userAvatar\n              ? <img class=\"navbar__avatar\" src={this.userAvatar} alt={this.userName} />\n              : <div class=\"navbar__avatar-placeholder\">\n                  {this.userName ? this.userName[0].toUpperCase() : '?'}\n                </div>\n            }\n            {this.userName && <span class=\"navbar__user-name\">{this.userName}</span>}\n            <dropi-icon name=\"Arrow-Down-2\" iconWidth=\"12px\" iconHeight=\"12px\" color=\"Gray-Gray-400\" />\n          </button>\n        </div>\n      </nav>\n    );\n  }\n}\n"],"version":3}