@dropi/ui 0.1.54 → 999.0.0

package/dist/cjs/dropi-languages-selector.cjs.entry.js

@@ -1,61 +0,0 @@
-'use strict';
-
-var index = require('./index-eMp8lMK1.js');
-
-const dropiLanguagesSelectorCss = () => `:host{display:inline-block;position:relative}*,*::before,*::after{box-sizing:border-box}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}.custom-dropdown{position:relative;cursor:pointer;user-select:none}.custom-dropdown.open dropi-icon{transform:rotate(180deg)}.selected-option{display:flex;height:40px;padding:var(--Size-2, 8px) var(--Size-3, 12px);align-items:center;gap:var(--Size-2, 8px);border-radius:4px;border:1px solid var(--Gray-Gray-200, #c3c9d9);background:var(--Neutral-White, #ffffff);font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066)}.dropdown-options{position:absolute;top:100%;left:0;right:0;background:white;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:6px;margin-top:4px;z-index:1000;overflow-y:auto;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);padding:0;list-style:none;height:0;opacity:0;visibility:hidden;transition:height 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;max-height:0}.dropdown-options.dropdown-open{max-height:300px;height:auto;opacity:1;visibility:visible}.dropdown-options li{padding:8px 12px;display:flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066)}.dropdown-options li:hover,.dropdown-options li.active{background:var(--Gray-Gray-50, #f7f8fa)}@media screen and (max-width: 720px){.selected-option span,.dropdown-options li span{display:none}}`;
-
-const DropiLanguagesSelector = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.dropiLanguageChange = index.createEvent(this, "dropiLanguageChange");
-    }
-    /** Language options (array or JSON string) */
-    languages = [];
-    /** Currently selected language (LanguageOption or JSON string) */
-    selectedLang = null;
-    dropiLanguageChange;
-    isOpen = false;
-    parsedLanguages = [];
-    currentLang = null;
-    languagesChanged(val) {
-        if (val == null) {
-            this.parsedLanguages = [];
-            return;
-        }
-        this.parsedLanguages = typeof val === 'string' ? JSON.parse(val) : (val ?? []);
-        if (!this.currentLang && this.parsedLanguages.length > 0) {
-            this.currentLang = this.parsedLanguages[0];
-        }
-    }
-    selectedLangChanged(val) {
-        if (!val)
-            return;
-        this.currentLang = typeof val === 'string' ? JSON.parse(val) : val;
-    }
-    componentWillLoad() {
-        this.languagesChanged(this.languages);
-        if (this.selectedLang)
-            this.selectedLangChanged(this.selectedLang);
-    }
-    select(lang) {
-        this.currentLang = lang;
-        this.isOpen = false;
-        this.dropiLanguageChange.emit(lang);
-    }
-    render() {
-        if (!this.currentLang)
-            return null;
-        return (index.h("div", { class: `custom-dropdown${this.isOpen ? ' open' : ''}` }, index.h("div", { class: "selected-option", onClick: () => { this.isOpen = !this.isOpen; } }, index.h("dropi-country-flags", { country: this.currentLang.flag, "flag-style": "rectangle", width: "20", height: "15" }), index.h("span", { class: "Body-S-Regular" }, this.currentLang.label), index.h("dropi-icon", { name: "Caret-down", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-500" })), index.h("ul", { class: `dropdown-options${this.isOpen ? ' dropdown-open' : ''}` }, this.parsedLanguages.map(lang => (index.h("li", { key: lang.code, class: lang.code === this.currentLang?.code ? 'active' : '', onClick: () => this.select(lang) }, index.h("dropi-country-flags", { country: lang.flag, "flag-style": "rectangle", width: "20", height: "15" }), index.h("span", { class: "Body-S-Regular" }, lang.label)))))));
-    }
-    static get watchers() { return {
-        "languages": [{
-                "languagesChanged": 0
-            }],
-        "selectedLang": [{
-                "selectedLangChanged": 0
-            }]
-    }; }
-};
-DropiLanguagesSelector.style = dropiLanguagesSelectorCss();
-
-exports.dropi_languages_selector = DropiLanguagesSelector;

package/dist/cjs/dropi-logo.cjs.entry.js

@@ -1,37 +0,0 @@
-'use strict';
-
-var index = require('./index-eMp8lMK1.js');
-
-const dropiLogoCss = () => `:host{display:inline-block;button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}}.dropi-logo{margin:0;padding:0;display:flex;align-items:center;justify-content:center}.dropi-logo img{display:block;object-fit:contain}.dropi-logo--large img{width:256px;height:84px}.dropi-logo--small img{width:86px;height:81px}`;
-
-const FALLBACK_SVG = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgNDAiPjx0ZXh0IHk9IjMwIiBmb250LXNpemU9IjI0IiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZmlsbD0iIzg1OGVhNiI+ZHJvcGk8L3RleHQ+PC9zdmc+`;
-const DropiLogo = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    get el() { return index.getElement(this); }
-    /** Logo image URL */
-    urlLogo = '';
-    /** Size variant */
-    size = 'large';
-    /** Theme (reserved for future use) */
-    theme = 'light';
-    componentWillLoad() {
-        if (!this.urlLogo) {
-            this.urlLogo =
-                this.el.getAttribute('urlLogo') ||
-                    this.el.getAttribute('url-logo') ||
-                    this.el.getAttribute('urllogo') ||
-                    '';
-        }
-    }
-    handleError(e) {
-        e.target.src = FALLBACK_SVG;
-    }
-    render() {
-        return (index.h("figure", { key: '7e0647d080700fcac7fe488d72024b3ed1f40b08', class: { 'dropi-logo': true, [`dropi-logo--${this.size}`]: true } }, index.h("img", { key: 'baa1d5c20397ee47a9f55ff6be7acae99b7c0f41', src: this.urlLogo || FALLBACK_SVG, alt: "Dropi logo", onError: (e) => this.handleError(e) })));
-    }
-};
-DropiLogo.style = dropiLogoCss();
-
-exports.dropi_logo = DropiLogo;

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

@@ -1,27 +0,0 @@
-'use strict';
-
-var index = require('./index-eMp8lMK1.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) {
-        index.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 (index.h("div", { class: "loader-overlay" }, index.h("div", { class: "loader-container" }, index.h("div", { class: "lottie-animation" }, index.h("lottie-player", { src: this.loadingAnimation, background: "transparent", speed: "1", style: { width: '300px', height: '300px' }, loop: true, autoplay: true })), (this.title || this.message) && (index.h("div", { class: "loader-text" }, this.title && index.h("h3", { class: "loader-title" }, this.title), this.message && index.h("p", { class: "loader-message" }, this.message))))));
-    }
-};
-DropiLottieLoader.style = dropiLottieLoaderCss();
-
-exports.dropi_lottie_loader = DropiLottieLoader;

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

@@ -1,192 +0,0 @@
-'use strict';
-
-var index = require('./index-eMp8lMK1.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) {
-        index.registerInstance(this, hostRef);
-        this.dropiPlay = index.createEvent(this, "dropiPlay");
-        this.dropiEnded = index.createEvent(this, "dropiEnded");
-    }
-    get el() { return index.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 (index.h("audio", { src: this.src, autoplay: this.autoplay, loop: this.loop, controls: true, style: { width: '100%' } }));
-        }
-        return (index.h("div", { class: {
-                'dropi-media-player': true,
-                [`dropi-media-player--${this.format}`]: true,
-                'is-fullscreen': this.isFullscreen
-            }, onMouseMove: () => this.onMouseMove(), onMouseLeave: () => this.onMouseLeave() }, index.h("div", { class: "dropi-media-player__blur-bg", style: { backgroundImage: `url(${this.poster})` } }), index.h("div", { class: "dropi-media-player__blur-overlay" }), index.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() }), index.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 ? (index.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' } }, index.h("rect", { x: "6.5", y: "4", width: "3.5", height: "16", rx: "1.75" }), index.h("rect", { x: "14", y: "4", width: "3.5", height: "16", rx: "1.75" }))) : (index.h("dropi-icon", { name: "Play", color: "Neutral-White", iconWidth: `${this.playIconSize}px`, iconHeight: `${this.playIconSize}px` }))), index.h("div", { class: {
-                'dropi-media-player__controls-bar': true,
-                'dropi-media-player__controls-bar--hidden': !this.showControls
-            }, onClick: (e) => e.stopPropagation() }, index.h("span", { class: "dropi-media-player__timestamp" }, this.currentTimeStr, " / ", this.durationStr), index.h("div", { class: "dropi-media-player__progress", onClick: (e) => { e.stopPropagation(); this.handleSeek(e); } }, index.h("div", { class: "dropi-media-player__progress-track" }, index.h("div", { class: "dropi-media-player__progress-fill", style: { width: `${this.progress}%` } }), index.h("div", { class: "dropi-media-player__progress-thumb", style: { left: `${this.progress}%` } }))), index.h("div", { class: "dropi-media-player__actions" }, index.h("div", { class: "dropi-media-player__speed-control", onClick: (e) => e.stopPropagation() }, this.showSpeedMenu && (index.h("div", { class: "dropi-media-player__speed-menu" }, this.speeds.map(s => (index.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))))), index.h("button", { class: "dropi-media-player__btn dropi-media-player__btn--speed", onClick: (e) => { e.stopPropagation(); this.toggleSpeedMenu(); }, type: "button" }, "x", this.speed)), index.h("button", { class: "dropi-media-player__btn", onClick: (e) => { e.stopPropagation(); this.toggleFullscreen(); }, type: "button" }, index.h("dropi-icon", { name: this.isFullscreen ? 'Compress' : 'Expand', color: "Neutral-White", iconWidth: "20px", iconHeight: "20px" })), index.h("div", { class: "dropi-media-player__volume-control", onClick: (e) => e.stopPropagation() }, this.showVolumeSlider && (index.h("div", { class: "dropi-media-player__volume-popup" }, index.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) }))), index.h("button", { class: "dropi-media-player__btn", onClick: (e) => { e.stopPropagation(); this.toggleVolume(); }, type: "button" }, index.h("dropi-icon", { name: this.volumeIcon, color: "Neutral-White", iconWidth: "20px", iconHeight: "20px" })))))));
-    }
-};
-DropiMediaPlayer.style = dropiMediaPlayerCss();
-
-exports.dropi_media_player = DropiMediaPlayer;

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

@@ -1,147 +0,0 @@
-'use strict';
-
-var index = require('./index-eMp8lMK1.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) {
-        index.registerInstance(this, hostRef);
-        this.dropiShow = index.createEvent(this, "dropiShow");
-        this.dropiHide = index.createEvent(this, "dropiHide");
-        this.dropiVisibleChange = index.createEvent(this, "dropiVisibleChange");
-    }
-    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) && index.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) && index.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 (index.h("div", { key: '95847ba48baae69b93888cb59ecaa9d2130ae17a', class: `modal-root modal-root--${this.position}${this.isOpen ? ' modal-root--open' : ''}${this.isClosing ? ' modal-root--closing' : ''}` }, (this.modal ?? true) && index.h("div", { key: '78acc3c2f1b7327b6fc1770a9536cdf0c2c57f99', class: "modal-mask", onClick: () => this.canDismiss && this.dismissable && this.dismiss() }), index.h("div", { key: '63906a7ed0432879c3256a659ddd9773099244bc', class: `modal-panel size-${this.size || 'm'}`, role: "dialog", "aria-modal": "true", style: this.maxWidth ? { maxWidth: this.maxWidth, width: '100%' } : {} }, this.showHeader && (index.h("div", { key: '7d960505ea8fd7804ac67ceb88b9195e6ad1998d', class: "modal-header" }, this.header && index.h("span", { key: 'fed4b8a2e6c89fca39a8766d0e843db7c184be59', class: "modal-title" }, this.header), index.h("slot", { key: 'b2c6c5cc1f019229c3ad5028e42b1fd887494abd', name: "header" }), this.showCloseIcon && (index.h("button", { key: '24fc8ff422ea5c7e6a8c0737acbb29c1d7467f40', class: "modal-close", onClick: () => this.dismiss(), "aria-label": "Cerrar" }, "\u00D7")))), index.h("div", { key: '472a7dfe704b0b8d129b00bc88204602ead66403', class: "modal-content" }, index.h("slot", { key: '6b3e6fdefca0c6510d4fdbbccce53a5efa52e4c8' })), this.showFooter && index.h("div", { key: '5bd3c15d4d1fb2ebffad79c9314d03d1d72dae29', class: "modal-footer" }, index.h("slot", { key: '1980d019b142e2a00f55a3a755e9e08d0393c5e5', name: "footer" })))));
-    }
-    static get watchers() { return {
-        "visible": [{
-                "visibleChanged": 0
-            }]
-    }; }
-};
-DropiModal.style = dropiModalCss();
-
-exports.dropi_modal = DropiModal;

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

@@ -1,54 +0,0 @@
-'use strict';
-
-var index = require('./index-eMp8lMK1.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) {
-        index.registerInstance(this, hostRef);
-        this.clickLoadItem = index.createEvent(this, "clickLoadItem");
-        this.dropiNotificationsClick = index.createEvent(this, "dropiNotificationsClick");
-        this.dropiUserClick = index.createEvent(this, "dropiUserClick");
-        this.dropiMenuToggle = index.createEvent(this, "dropiMenuToggle");
-    }
-    /** 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 (index.h("nav", { key: '83e2aa66dcaeabc1629c4c23ee87f0ed8799eae7', class: "navbar" }, index.h("div", { key: '500612a656db49c3962dcb2b2fb62ced5e6f9f5e', class: "navbar__left" }, this.showMenuToggle && (index.h("button", { key: 'a85325e0bfaf6ed1f739abf35460c0fd9fe12bdb', class: "navbar__menu-btn", onClick: () => this.dropiMenuToggle.emit(), "aria-label": "Men\u00FA" }, index.h("dropi-icon", { key: 'd94b443c19e6212547dbe4d97fe907be862726f9', name: "Menu", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-700" }))), this.logoUrl && (index.h("img", { key: '0da8e838faac7f31175935ea9b0cfe6fb68ad516', class: "navbar__logo", src: this.logoUrl, alt: this.logoAlt })), this.title && index.h("span", { key: 'ae1d08c0cac208bf31e1978da68f89cc6eec13d2', class: "navbar__title" }, this.title)), items.length > 0 && (index.h("ul", { key: '48dcc829cd503ce2a3f3929ccb03782b226a18ed', class: "navbar__items" }, items.map(item => (index.h("li", null, index.h("button", { class: { 'navbar__item': true, 'navbar__item--active': item.id === this.activeId }, onClick: () => this.clickLoadItem.emit(item), type: "button" }, item.icon && index.h("dropi-icon", { name: item.icon, iconWidth: "16px", iconHeight: "16px", color: item.id === this.activeId ? 'Primary-Primary-500' : 'Gray-Gray-600' }), index.h("span", null, item.name?.value || item.label), item.badge != null && String(item.badge) !== '0' && (index.h("span", { class: "navbar__badge" }, item.badge)))))))), index.h("div", { key: 'f6a7a4bfcf90829fdf78eade141c1a43a3ef213c', class: "navbar__right" }, index.h("button", { key: '652f412206186a3e8325e8a41cefa78049da39a6', class: "navbar__icon-btn", onClick: () => this.dropiNotificationsClick.emit(), "aria-label": "Notificaciones" }, index.h("dropi-icon", { key: 'ddf8877a77c15d8c0582866d56851f5ee9b9b5f1', name: "Bell", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-600" }), this.notifications > 0 && (index.h("span", { key: '613f9d9c7a7b0c1125aee602be6672ce478cef26', class: "navbar__notif-badge" }, this.notifications > 99 ? '99+' : this.notifications))), index.h("button", { key: 'af0e25263309dc90ae4f0047c25089b9486562d4', class: "navbar__user-btn", onClick: () => this.dropiUserClick.emit(), type: "button" }, this.userAvatar
-            ? index.h("img", { class: "navbar__avatar", src: this.userAvatar, alt: this.userName })
-            : index.h("div", { class: "navbar__avatar-placeholder" }, this.userName ? this.userName[0].toUpperCase() : '?'), this.userName && index.h("span", { key: '54a6f1b97d2d8f11fe5556510638d4cbef2d638b', class: "navbar__user-name" }, this.userName), index.h("dropi-icon", { key: '21dd9ed6cf46d719d8b49c65fba8f787f7a84629', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })))));
-    }
-};
-DropiNavbar.style = dropiNavbarCss();
-
-exports.dropi_navbar = DropiNavbar;