npm - @dropi/ui - Versions diffs - 0.1.52 → 0.1.53 - Mend

@dropi/ui 0.1.52 → 0.1.53

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (592) hide show

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, d as createEvent, a as getElement, h } from './index-CPacpXAJ.js';
+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}.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:'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:'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:'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 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) {

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

	@@ -1 +1 @@
1	- {"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; }\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: '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: '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: '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}
1	+ {"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 CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, d as createEvent, e as Build, h } from './index-CPacpXAJ.js';
+import { r as registerInstance, d as createEvent, e as Build, h } from './index-BKkSRXlb.js';
-const dropiModalCss = () => `:host{display:contents}*,*::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 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) {
@@ -132,7 +132,7 @@ const DropiModal = class {
         }
     }
     render() {
-        return (h("div", { key: '95847ba48baae69b93888cb59ecaa9d2130ae17a', class: `modal-root modal-root--${this.position}${this.isOpen ? ' modal-root--open' : ''}${this.isClosing ? ' modal-root--closing' : ''}` }, (this.modal ?? true) && h("div", { key: '78acc3c2f1b7327b6fc1770a9536cdf0c2c57f99', class: "modal-mask", onClick: () => this.canDismiss && this.dismissable && this.dismiss() }), 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 && (h("div", { key: '7d960505ea8fd7804ac67ceb88b9195e6ad1998d', class: "modal-header" }, this.header && h("span", { key: 'fed4b8a2e6c89fca39a8766d0e843db7c184be59', class: "modal-title" }, this.header), h("slot", { key: 'b2c6c5cc1f019229c3ad5028e42b1fd887494abd', name: "header" }), this.showCloseIcon && (h("button", { key: '24fc8ff422ea5c7e6a8c0737acbb29c1d7467f40', class: "modal-close", onClick: () => this.dismiss(), "aria-label": "Cerrar" }, "\u00D7")))), h("div", { key: '472a7dfe704b0b8d129b00bc88204602ead66403', class: "modal-content" }, h("slot", { key: '6b3e6fdefca0c6510d4fdbbccce53a5efa52e4c8' })), this.showFooter && h("div", { key: '5bd3c15d4d1fb2ebffad79c9314d03d1d72dae29', class: "modal-footer" }, h("slot", { key: '1980d019b142e2a00f55a3a755e9e08d0393c5e5', name: "footer" })))));
+        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": [{

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

	@@ -1 +1 @@
1	- {"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; }\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 ×\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}
1	+ {"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 ×\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 CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, d as createEvent, h } from './index-CPacpXAJ.js';
+import { r as registerInstance, d as createEvent, h } from './index-BKkSRXlb.js';
-const dropiNavbarCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.navbar{display:flex;align-items:center;height:56px;padding:0 var(--Size-4, 16px);background:var(--Neutral-White, #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:inherit;color:var(--Gray-Gray-600, #475066);cursor:pointer;transition:background 0.15s, color 0.15s;white-space:nowrap}.navbar__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.navbar__item--active{background:var(--Primary-Primary-50, #fff5eb);color:var(--Primary-Primary-500, #f49a3d);font-weight:var(--font-weight-bold, 700)}.navbar__badge{background:var(--Error-Error-500, #f46a6b);color:var(--Neutral-White, #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:inherit}.navbar__user-btn:hover{background:var(--Gray-Gray-50, #f7f8fa)}.navbar__avatar{width:28px;height:28px;border-radius:50%;object-fit:cover}.navbar__avatar-placeholder{width:28px;height:28px;border-radius:50%;background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #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 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) {
@@ -42,9 +42,9 @@ const DropiNavbar = class {
     }
     render() {
         const items = this.parsedData;
-        return (h("nav", { key: '515d407d6f02969d8b4329fe0698ed4f5750e0b2', class: "navbar" }, h("div", { key: '5c8c5af9902aaf9036e5a8198243ce2f076f95d3', class: "navbar__left" }, this.showMenuToggle && (h("button", { key: '8bb4eec5a244cad4daa83235824cc5775c9f97cc', class: "navbar__menu-btn", onClick: () => this.dropiMenuToggle.emit(), "aria-label": "Men\u00FA" }, h("dropi-icon", { key: 'a028169564888f173cffcaaab453ecb65dcfdbfb', name: "Menu", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-700" }))), this.logoUrl && (h("img", { key: 'ace8b77b5b35c97abdaca138200a6c22bf9073ef', class: "navbar__logo", src: this.logoUrl, alt: this.logoAlt })), this.title && h("span", { key: '59504d8491cda4bd84c8006ab703d3551afdac4c', class: "navbar__title" }, this.title)), items.length > 0 && (h("ul", { key: '058243de4bd806e77d62805ebad229f570e456d2', 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: 'f0e13a3af41a71694d32e2668f454ff39d875c5d', class: "navbar__right" }, h("button", { key: '3e869c6337a2cf2595fa71f3b0d39b16ecd2e045', class: "navbar__icon-btn", onClick: () => this.dropiNotificationsClick.emit(), "aria-label": "Notificaciones" }, h("dropi-icon", { key: 'fe4c70eb9b18896c1608f8fbb12eef95a488631b', name: "Bell", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-600" }), this.notifications > 0 && (h("span", { key: '5e72bf4db6d7f732713392f5c4858a2acc567937', class: "navbar__notif-badge" }, this.notifications > 99 ? '99+' : this.notifications))), h("button", { key: '5884c72e3710fc05577a521b274b77cad288d97a', class: "navbar__user-btn", onClick: () => this.dropiUserClick.emit(), type: "button" }, this.userAvatar
+        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: 'fe412936f5e4342005d3e2080ed97699b24a399b', class: "navbar__user-name" }, this.userName), h("dropi-icon", { key: 'd873b18797745639d4c47079e2c82472869fc41d', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })))));
+            : 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();

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

	@@ -1 +1 @@
1	- {"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%; }\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: inherit;\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: inherit;\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}
1	+ {"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}

package/dist/dropi-ui/dropi-otp-send-code.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, d as createEvent, h } from './index-CPacpXAJ.js';
+import { r as registerInstance, d as createEvent, h } from './index-BKkSRXlb.js';
-const dropiOtpSendCodeCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.otp{display:flex;flex-direction:column;align-items:center;gap:var(--Size-4, 16px)}.otp__label{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066);text-align:center;margin:0}.otp__inputs{display:flex;gap:var(--Size-4, 16px)}.otp__digit{width:56px;height:56px;border:1.5px solid var(--Gray-Gray-200, #d3d7de);border-radius:var(--Border-2, 8px);text-align:center;font-size:22px;font-weight:var(--font-weight-bold, 700);font-family:inherit;color:var(--Gray-Gray-800, #1f2433);outline:none;transition:border-color 0.15s ease;background:var(--Neutral-White, #ffffff)}.otp__digit:focus{border:2px solid var(--Primary-Primary-500, #f49a3d)}.otp__digit--filled{border:1px solid var(--Success-Success-500, #0abb87);color:var(--Neutral-Neutral-900, #0e111a)}.otp__digit--error{border:1px solid var(--Error-Error-500, #f46a6b)}.otp__error{margin:0;font-size:var(--font-size-xs, 10px);color:var(--Error-Error-500, #f46a6b);text-align:center}.otp__resend{text-align:center}.otp__countdown{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-400, #858ea6)}.otp__resend-btn{background:none;border:none;padding:0;font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Primary-Primary-500, #f49a3d);cursor:pointer;text-decoration:underline}`;
+const dropiOtpSendCodeCss = () => `:host{display:block;width:100%}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}*,*::before,*::after{box-sizing:border-box}.otp{display:flex;flex-direction:column;align-items:center;gap:var(--Size-4, 16px)}.otp__label{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066);text-align:center;margin:0}.otp__inputs{display:flex;gap:var(--Size-4, 16px)}.otp__digit{width:56px;height:56px;border:1.5px solid var(--Gray-Gray-200, #d3d7de);border-radius:var(--Border-2, 8px);text-align:center;font-size:22px;font-weight:var(--font-weight-bold, 700);font-family:var(--font-family-01, 'Inter', sans-serif);color:var(--Gray-Gray-800, #1f2433);outline:none;transition:border-color 0.15s ease;background:var(--Neutral-White, #ffffff)}.otp__digit:focus{border:2px solid var(--Primary-Primary-500, #f49a3d)}.otp__digit--filled{border:1px solid var(--Success-Success-500, #0abb87);color:var(--Neutral-Neutral-900, #0e111a)}.otp__digit--error{border:1px solid var(--Error-Error-500, #f46a6b)}.otp__error{margin:0;font-size:var(--font-size-xs, 10px);color:var(--Error-Error-500, #f46a6b);text-align:center}.otp__resend{text-align:center}.otp__countdown{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-400, #858ea6)}.otp__resend-btn{background:none;border:none;padding:0;font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Primary-Primary-500, #f49a3d);cursor:pointer;text-decoration:underline}`;
 const RESEND_SECONDS = 30;
 const DropiOtpSendCode = class {
@@ -8,6 +8,8 @@ const DropiOtpSendCode = class {
         registerInstance(this, hostRef);
         this.codeCompleted = createEvent(this, "codeCompleted", 7);
         this.codeAccepted = createEvent(this, "codeAccepted", 7);
+        this.dropiCodeCompleted = createEvent(this, "dropiCodeCompleted", 7);
+        this.dropiCodeAccepted = createEvent(this, "dropiCodeAccepted", 7);
         this.dropiResend = createEvent(this, "dropiResend", 7);
         if (hostRef.$hostElement$["s-ei"]) {
             this.internals = hostRef.$hostElement$["s-ei"];
@@ -46,6 +48,10 @@ const DropiOtpSendCode = class {
     codeCompleted;
     /** Emitted when all digits are entered (alternative event). */
     codeAccepted;
+    /** Compatibility alias for codeCompleted */
+    dropiCodeCompleted;
+    /** Compatibility alias for codeAccepted */
+    dropiCodeAccepted;
     /** Emitted when resend is requested */
     dropiResend;
     componentWillLoad() {
@@ -82,6 +88,8 @@ const DropiOtpSendCode = class {
             this.internals.setFormValue(finalCode);
             this.codeCompleted.emit(finalCode);
             this.codeAccepted.emit(finalCode);
+            this.dropiCodeCompleted.emit(finalCode);
+            this.dropiCodeAccepted.emit(finalCode);
         }
         else {
             this.internals.setFormValue(newDigits.join(''));
@@ -105,6 +113,8 @@ const DropiOtpSendCode = class {
             this.internals.setFormValue(finalCode);
             this.codeCompleted.emit(finalCode);
             this.codeAccepted.emit(finalCode);
+            this.dropiCodeCompleted.emit(finalCode);
+            this.dropiCodeAccepted.emit(finalCode);
         }
         else {
             this.internals.setFormValue(newDigits.join(''));
@@ -112,14 +122,14 @@ const DropiOtpSendCode = class {
     }
     render() {
         const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';
-        return (h("div", { key: 'a22ccea1873ed50f27fb43deba9e141ac3a08db9', class: "otp" }, this.showLabelContact && (h("p", { key: '45a52de065a15e2ccb0b8a899824e2ab29898f0a', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && h("strong", { key: '53f3482c38df0d17709a7dc6e0097a0771d45901' }, " ", this.labelContact))), h("div", { key: '39f8e115aed6974da2e0713dec2abdb0632e7813', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, this.digits.map((_, i) => (h("input", { key: i, ref: (el) => {
+        return (h("div", { key: '1aa0cda83f1441587bcb14a7bf6f18ff7c545fd2', class: "otp" }, this.showLabelContact && (h("p", { key: '4eb04c3fdbaf2a48fc9029bb16036a55cda0bb13', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && h("strong", { key: 'cbe1613ba00a24b53be2d50d98e65c5cd04b03d6' }, " ", this.labelContact))), h("div", { key: 'db1e3ed5bd801fe908a6652946e068042f1d27e1', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, this.digits.map((_, i) => (h("input", { key: i, ref: (el) => {
                 if (el)
                     this.inputs[i] = el;
             }, class: {
                 'otp__digit': true,
                 'otp__digit--filled': this.digitStates[i] === 'filled',
                 'otp__digit--error': this.error,
-            }, type: "text", inputMode: "numeric", maxLength: 1, value: this.digits[i] ?? '', onInput: (e) => this.handleInput(e, i), onKeyDown: (e) => this.handleKeyDown(e, i) })))), this.error && this.errorMessage && (h("p", { key: '4e04644edc2eae0b7568c27b6424fa9acea0241f', class: "otp__error" }, this.errorMessage)), h("div", { key: 'a118270f2db31557a9514dac38e823eebe21bb9b', class: "otp__resend" }, this.canResend ? (h("button", { class: "otp__resend-btn", onClick: () => { this.startCountdown(); this.dropiResend.emit(); } }, "Reenviar c\u00F3digo")) : (h("span", { class: "otp__countdown" }, "Reenviar en ", this.countdown, "s")))));
+            }, type: "text", inputMode: "numeric", maxLength: 1, value: this.digits[i] ?? '', onInput: (e) => this.handleInput(e, i), onKeyDown: (e) => this.handleKeyDown(e, i) })))), this.error && this.errorMessage && (h("p", { key: '2feba6695271851e1f071b7131b59578d7e46843', class: "otp__error" }, this.errorMessage)), h("div", { key: '31f3ee833dad96e2dd123fe1dd17b773825bafa2', class: "otp__resend" }, this.canResend ? (h("button", { class: "otp__resend-btn", onClick: () => { this.startCountdown(); this.dropiResend.emit(); } }, "Reenviar c\u00F3digo")) : (h("span", { class: "otp__countdown" }, "Reenviar en ", this.countdown, "s")))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

package/dist/dropi-ui/dropi-otp-send-code.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dropi-otp-send-code.entry.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,20CAA20C,CAAC;;ACE/2C,MAAM,cAAc,GAAG,EAAE;MAYZ,gBAAgB,GAAA,MAAA;;;;;;;;;;;;;;AACR,IAAA,SAAS;;AAGH,IAAA,IAAI;;IAGrB,MAAM,GAA4B,OAAO;;IAEzC,YAAY,GAAW,EAAE;;IAEzB,gBAAgB,GAAY,KAAK;;IAEjC,YAAY,GAAW,EAAE;;IAEzB,WAAW,GAAW,CAAC;IAEd,MAAM,GAAa,EAAE;IACrB,WAAW,GAAoC,EAAE;IACjD,SAAS,GAAW,cAAc;IAClC,SAAS,GAAY,KAAK;IAC1B,KAAK,GAAY,KAAK;IAE/B,MAAM,GAAuB,EAAE;AAC/B,IAAA,KAAK;AAGb,IAAA,uBAAuB,CAAC,QAAgB,EAAA;AACtC,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;AACtC,QAAA,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;AAC/C,QAAA,IAAI,CAAC,MAAM,GAAG,EAAE;;;AAIT,IAAA,aAAa;;AAEb,IAAA,YAAY;;AAEZ,IAAA,WAAW;IAEpB,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;AAC9C,QAAA,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;AACvD,QAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE,CAAC;;AAIjC,IAAA,gBAAgB,KAAK,IAAI,CAAC,cAAc,EAAE,CAAC;IAC3C,oBAAoB,GAAA,EAAK,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAE3C,cAAc,GAAA;AACpB,QAAA,IAAI,CAAC,SAAS,GAAG,cAAc;AAC/B,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,QAAA,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC;AACzB,QAAA,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC,MAAK;YAC5B,IAAI,CAAC,SAAS,EAAE;AAChB,YAAA,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,EAAE;AAAE,gBAAA,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC;AAAE,gBAAA,IAAI,CAAC,SAAS,GAAG,IAAI;;SAC5E,EAAE,IAAI,CAAC;;IAGF,WAAW,CAAC,CAAa,EAAE,KAAa,EAAA;QAC9C,MAAM,GAAG,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAC7E,MAAM,SAAS,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC;AAClC,QAAA,SAAS,CAAC,KAAK,CAAC,GAAG,GAAG;AACtB,QAAA,IAAI,CAAC,MAAM,GAAG,SAAS;QAEvB,MAAM,SAAS,GAAG,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC;AACvC,QAAA,SAAS,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,QAAQ,GAAG,MAAM;AAC1C,QAAA,IAAI,CAAC,WAAW,GAAG,SAAS;QAE5B,IAAI,GAAG,IAAI,KAAK,GAAG,IAAI,CAAC,WAAW,GAAG,CAAC;YAAE,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE;AAExE,QAAA,IAAI,SAAS,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE;YAClC,MAAM,SAAS,GAAG,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC;AACpC,YAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,SAAS,CAAC;AACtC,YAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC;AAClC,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC;;aAC5B;AACL,YAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;;;IAK3C,aAAa,CAAC,CAAgB,EAAE,KAAa,EAAA;AACnD,QAAA,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,EAAE;YAC7D,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE;;;AAI3B,IAAA,WAAW,CAAC,CAAiB,EAAA;QACnC,CAAC,CAAC,cAAc,EAAE;AAClB,QAAA,MAAM,IAAI,GAAG,CAAC,CAAC,aAAa,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;AAClG,QAAA,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;QAClD,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,KAAI,EAAG,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;AACvD,QAAA,IAAI,CAAC,MAAM,GAAG,SAAS;QACvB,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,QAAQ,GAAG,MAAM,CAAC;QAC5D,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE;AAEjE,QAAA,IAAI,SAAS,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE;YAClC,MAAM,SAAS,GAAG,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC;AACpC,YAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,SAAS,CAAC;AACtC,YAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC;AAClC,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC;;aAC5B;AACL,YAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;;;IAKnD,MAAM,GAAA;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,KAAK,KAAK,GAAG,KAAK,GAAG,IAAI,CAAC,MAAM,KAAK,KAAK,GAAG,cAAc,GAAG,QAAQ;QAErG,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,KAAK,EAAA,EACb,IAAI,CAAC,gBAAgB,KACpB,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,YAAY,EAAA,0CACa,WAAW,EAC1C,IAAI,CAAC,YAAY,IAAI,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAU,IAAI,CAAC,YAAY,CAAU,CACzD,CACL,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAA,EACzD,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,MACpB,CAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,CAAC,EAAE,KAAI;AAAG,gBAAA,IAAI,EAAE;AAAE,oBAAA,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,EAAsB;aAAG,EACjE,KAAK,EAAE;AACL,gBAAA,YAAY,EAAE,IAAI;gBAClB,oBAAoB,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,QAAQ;gBACtD,mBAAmB,EAAE,IAAI,CAAC,KAAK;AAChC,aAAA,EACD,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,SAAS,EACnB,SAAS,EAAE,CAAC,EACZ,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,EAC3B,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAe,EAAE,CAAC,CAAC,EACpD,SAAS,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,aAAa,CAAC,CAAkB,EAAE,CAAC,CAAC,EAAA,CAC3D,CACH,CAAC,CACE,EAEL,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,KAC9B,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,YAAY,EAAA,EAAE,IAAI,CAAC,YAAY,CAAK,CAC9C,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAA,EACrB,IAAI,CAAC,SAAS,IACb,CAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,MAAK,EAAG,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,EAAE,EAAA,EAAA,sBAAA,CAEzF,KAET,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,gBAAgB,EAAA,kBAAc,IAAI,CAAC,SAAS,MAAS,CAClE,CACG,CACF;;;;;;;;;;;;;","names":[],"sources":["src/components/dropi-otp-send-code/dropi-otp-send-code.css?tag=dropi-otp-send-code&encapsulation=shadow","src/components/dropi-otp-send-code/dropi-otp-send-code.tsx"],"sourcesContent":[":host { display: block; width: 100%; }\n, ::before, ::after { box-sizing: border-box; }\n\n.otp { display: flex; flex-direction: column; align-items: center; gap: var(--Size-4, 16px); }\n\n.otp__label {\n font-size: var(--font-size-s, 12px);\n color: var(--Gray-Gray-600, #475066);\n text-align: center;\n margin: 0;\n}\n\n.otp__inputs {\n display: flex;\n gap: var(--Size-4, 16px);\n}\n\n.otp__digit {\n width: 56px;\n height: 56px;\n border: 1.5px solid var(--Gray-Gray-200, #d3d7de);\n border-radius: var(--Border-2, 8px);\n text-align: center;\n font-size: 22px;\n font-weight: var(--font-weight-bold, 700);\n font-family: inherit;\n color: var(--Gray-Gray-800, #1f2433);\n outline: none;\n transition: border-color 0.15s ease;\n background: var(--Neutral-White, #ffffff);\n}\n\n.otp__digit:focus { \n border: 2px solid var(--Primary-Primary-500, #f49a3d);\n}\n.otp__digit--filled { \n border: 1px solid var(--Success-Success-500, #0abb87); \n color: var(--Neutral-Neutral-900, #0e111a); \n}\n.otp__digit--error { \n border: 1px solid var(--Error-Error-500, #f46a6b);\n}\n\n.otp__error {\n margin: 0;\n font-size: var(--font-size-xs, 10px);\n color: var(--Error-Error-500, #f46a6b);\n text-align: center;\n}\n\n.otp__resend { text-align: center; }\n\n.otp__countdown {\n font-size: var(--font-size-xs, 10px);\n color: var(--Gray-Gray-400, #858ea6);\n}\n\n.otp__resend-btn {\n background: none;\n border: none;\n padding: 0;\n font-size: var(--font-size-s, 12px);\n font-weight: var(--font-weight-bold, 700);\n color: var(--Primary-Primary-500, #f49a3d);\n cursor: pointer;\n text-decoration: underline;\n}\n","import { Component, Prop, State, Event, EventEmitter, AttachInternals, h, Watch } from '@stencil/core';\n\nconst RESEND_SECONDS = 30;\n\n/\n @component dropi-otp-send-code\n * OTP input with configurable length, countdown timer and resend capability.\n /\n@Component({\n tag: 'dropi-otp-send-code',\n styleUrl: 'dropi-otp-send-code.css',\n shadow: true,\n formAssociated: true,\n})\nexport class DropiOtpSendCode {\n @AttachInternals() internals: ElementInternals;\n\n /* Name for native form submission /\n @Prop({ reflect: true }) name!: string;\n\n /* Delivery method label /\n @Prop() engine: 'email' \| 'sms' \| '2fa' = 'email';\n /* Contact info (email/phone to show in label) /\n @Prop() labelContact: string = '';\n /* Show contact label /\n @Prop() showLabelContact: boolean = false;\n /* Error message to display /\n @Prop() errorMessage: string = '';\n /* Number of digits for the OTP /\n @Prop() digitsCount: number = 6;\n\n @State() private digits: string[] = [];\n @State() private digitStates: ('idle' \| 'filled' \| 'error')[] = [];\n @State() private countdown: number = RESEND_SECONDS;\n @State() private canResend: boolean = false;\n @State() private error: boolean = false;\n\n private inputs: HTMLInputElement[] = [];\n private timer: any;\n\n @Watch('digitsCount')\n handleDigitsCountChange(newValue: number) {\n this.digits = Array(newValue).fill('');\n this.digitStates = Array(newValue).fill('idle');\n this.inputs = [];\n }\n\n /* Emitted when all digits are entered. /\n @Event() codeCompleted: EventEmitter<string>;\n /* Emitted when all digits are entered (alternative event). /\n @Event() codeAccepted: EventEmitter<string>;\n /* Emitted when resend is requested */\n @Event() dropiResend: EventEmitter<void>;\n\n componentWillLoad() {\n this.digits = Array(this.digitsCount).fill('');\n this.digitStates = Array(this.digitsCount).fill('idle');\n this.internals.setFormValue('');\n }\n\n\n componentDidLoad() { this.startCountdown(); }\n disconnectedCallback() { clearInterval(this.timer); }\n\n private startCountdown() {\n this.countdown = RESEND_SECONDS;\n this.canResend = false;\n clearInterval(this.timer);\n this.timer = setInterval(() => {\n this.countdown--;\n if (this.countdown <= 0) { clearInterval(this.timer); this.canResend = true; }\n }, 1000);\n }\n\n private handleInput(e: InputEvent, index: number) {\n const val = (e.target as HTMLInputElement).value.replace(/\\D/g, '').slice(-1);\n const newDigits = [...this.digits];\n newDigits[index] = val;\n this.digits = newDigits;\n\n const newStates = [...this.digitStates];\n newStates[index] = val ? 'filled' : 'idle';\n this.digitStates = newStates;\n\n if (val && index < this.digitsCount - 1) this.inputs[index + 1]?.focus();\n\n if (newDigits.every(d => d !== '')) {\n const finalCode = newDigits.join('');\n this.internals.setFormValue(finalCode);\n this.codeCompleted.emit(finalCode);\n this.codeAccepted.emit(finalCode);\n } else {\n this.internals.setFormValue(newDigits.join(''));\n }\n\n }\n\n private handleKeyDown(e: KeyboardEvent, index: number) {\n if (e.key === 'Backspace' && !this.digits[index] && index > 0) {\n this.inputs[index - 1]?.focus();\n }\n }\n\n private handlePaste(e: ClipboardEvent) {\n e.preventDefault();\n const text = e.clipboardData?.getData('text')?.replace(/\\D/g, '').slice(0, this.digitsCount) \|\| '';\n const newDigits = Array(this.digitsCount).fill('');\n text.split('').forEach((c, i) => { newDigits[i] = c; });\n this.digits = newDigits;\n this.digitStates = newDigits.map(d => d ? 'filled' : 'idle');\n this.inputs[Math.min(text.length, this.digitsCount - 1)]?.focus();\n \n if (newDigits.every(d => d !== '')) {\n const finalCode = newDigits.join('');\n this.internals.setFormValue(finalCode);\n this.codeCompleted.emit(finalCode);\n this.codeAccepted.emit(finalCode);\n } else {\n this.internals.setFormValue(newDigits.join(''));\n }\n\n }\n\n render() {\n const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';\n\n return (\n <div class=\"otp\">\n {this.showLabelContact && (\n <p class=\"otp__label\">\n Ingresa el código enviado a tu {engineLabel}\n {this.labelContact && <strong> {this.labelContact}</strong>}\n </p>\n )}\n\n <div class=\"otp__inputs\" onPaste={(e) => this.handlePaste(e)}>\n {this.digits.map((_, i) => (\n <input\n key={i}\n ref={(el) => { if (el) this.inputs[i] = el as HTMLInputElement; }}\n class={{\n 'otp__digit': true,\n 'otp__digit--filled': this.digitStates[i] === 'filled',\n 'otp__digit--error': this.error,\n }}\n type=\"text\"\n inputMode=\"numeric\"\n maxLength={1}\n value={this.digits[i] ?? ''}\n onInput={(e) => this.handleInput(e as InputEvent, i)}\n onKeyDown={(e) => this.handleKeyDown(e as KeyboardEvent, i)}\n />\n ))}\n </div>\n\n {this.error && this.errorMessage && (\n <p class=\"otp__error\">{this.errorMessage}</p>\n )}\n\n <div class=\"otp__resend\">\n {this.canResend ? (\n <button class=\"otp__resend-btn\" onClick={() => { this.startCountdown(); this.dropiResend.emit(); }}>\n Reenviar código\n </button>\n ) : (\n <span class=\"otp__countdown\">Reenviar en {this.countdown}s</span>\n )}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"dropi-otp-send-code.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-otp-send-code/dropi-otp-send-code.css?tag=dropi-otp-send-code&encapsulation=shadow","src/components/dropi-otp-send-code/dropi-otp-send-code.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.otp { display: flex; flex-direction: column; align-items: center; gap: var(--Size-4, 16px); }\n\n.otp__label {\n font-size: var(--font-size-s, 12px);\n color: var(--Gray-Gray-600, #475066);\n text-align: center;\n margin: 0;\n}\n\n.otp__inputs {\n display: flex;\n gap: var(--Size-4, 16px);\n}\n\n.otp__digit {\n width: 56px;\n height: 56px;\n border: 1.5px solid var(--Gray-Gray-200, #d3d7de);\n border-radius: var(--Border-2, 8px);\n text-align: center;\n font-size: 22px;\n font-weight: var(--font-weight-bold, 700);\n font-family: var(--font-family-01, 'Inter', sans-serif);\n color: var(--Gray-Gray-800, #1f2433);\n outline: none;\n transition: border-color 0.15s ease;\n background: var(--Neutral-White, #ffffff);\n}\n\n.otp__digit:focus { \n border: 2px solid var(--Primary-Primary-500, #f49a3d);\n}\n.otp__digit--filled { \n border: 1px solid var(--Success-Success-500, #0abb87); \n color: var(--Neutral-Neutral-900, #0e111a); \n}\n.otp__digit--error { \n border: 1px solid var(--Error-Error-500, #f46a6b);\n}\n\n.otp__error {\n margin: 0;\n font-size: var(--font-size-xs, 10px);\n color: var(--Error-Error-500, #f46a6b);\n text-align: center;\n}\n\n.otp__resend { text-align: center; }\n\n.otp__countdown {\n font-size: var(--font-size-xs, 10px);\n color: var(--Gray-Gray-400, #858ea6);\n}\n\n.otp__resend-btn {\n background: none;\n border: none;\n padding: 0;\n font-size: var(--font-size-s, 12px);\n font-weight: var(--font-weight-bold, 700);\n color: var(--Primary-Primary-500, #f49a3d);\n cursor: pointer;\n text-decoration: underline;\n}\n","import { Component, Prop, State, Event, EventEmitter, AttachInternals, h, Watch } from '@stencil/core';\n\nconst RESEND_SECONDS = 30;\n\n/\n @component dropi-otp-send-code\n * OTP input with configurable length, countdown timer and resend capability.\n /\n@Component({\n tag: 'dropi-otp-send-code',\n styleUrl: 'dropi-otp-send-code.css',\n shadow: true,\n formAssociated: true,\n})\nexport class DropiOtpSendCode {\n @AttachInternals() internals: ElementInternals;\n\n /* Name for native form submission /\n @Prop({ reflect: true }) name!: string;\n\n /* Delivery method label /\n @Prop() engine: 'email' \| 'sms' \| '2fa' = 'email';\n /* Contact info (email/phone to show in label) /\n @Prop() labelContact: string = '';\n /* Show contact label /\n @Prop() showLabelContact: boolean = false;\n /* Error message to display /\n @Prop() errorMessage: string = '';\n /* Number of digits for the OTP /\n @Prop() digitsCount: number = 6;\n\n @State() private digits: string[] = [];\n @State() private digitStates: ('idle' \| 'filled' \| 'error')[] = [];\n @State() private countdown: number = RESEND_SECONDS;\n @State() private canResend: boolean = false;\n @State() private error: boolean = false;\n\n private inputs: HTMLInputElement[] = [];\n private timer: any;\n\n @Watch('digitsCount')\n handleDigitsCountChange(newValue: number) {\n this.digits = Array(newValue).fill('');\n this.digitStates = Array(newValue).fill('idle');\n this.inputs = [];\n }\n\n /* Emitted when all digits are entered. /\n @Event() codeCompleted: EventEmitter<string>;\n /* Emitted when all digits are entered (alternative event). /\n @Event() codeAccepted: EventEmitter<string>;\n /* Compatibility alias for codeCompleted /\n @Event() dropiCodeCompleted: EventEmitter<string>;\n /* Compatibility alias for codeAccepted /\n @Event() dropiCodeAccepted: EventEmitter<string>;\n /* Emitted when resend is requested */\n @Event() dropiResend: EventEmitter<void>;\n\n componentWillLoad() {\n this.digits = Array(this.digitsCount).fill('');\n this.digitStates = Array(this.digitsCount).fill('idle');\n this.internals.setFormValue('');\n }\n\n\n componentDidLoad() { this.startCountdown(); }\n disconnectedCallback() { clearInterval(this.timer); }\n\n private startCountdown() {\n this.countdown = RESEND_SECONDS;\n this.canResend = false;\n clearInterval(this.timer);\n this.timer = setInterval(() => {\n this.countdown--;\n if (this.countdown <= 0) { clearInterval(this.timer); this.canResend = true; }\n }, 1000);\n }\n\n private handleInput(e: InputEvent, index: number) {\n const val = (e.target as HTMLInputElement).value.replace(/\\D/g, '').slice(-1);\n const newDigits = [...this.digits];\n newDigits[index] = val;\n this.digits = newDigits;\n\n const newStates = [...this.digitStates];\n newStates[index] = val ? 'filled' : 'idle';\n this.digitStates = newStates;\n\n if (val && index < this.digitsCount - 1) this.inputs[index + 1]?.focus();\n\n if (newDigits.every(d => d !== '')) {\n const finalCode = newDigits.join('');\n this.internals.setFormValue(finalCode);\n this.codeCompleted.emit(finalCode);\n this.codeAccepted.emit(finalCode);\n this.dropiCodeCompleted.emit(finalCode);\n this.dropiCodeAccepted.emit(finalCode);\n } else {\n this.internals.setFormValue(newDigits.join(''));\n }\n\n }\n\n private handleKeyDown(e: KeyboardEvent, index: number) {\n if (e.key === 'Backspace' && !this.digits[index] && index > 0) {\n this.inputs[index - 1]?.focus();\n }\n }\n\n private handlePaste(e: ClipboardEvent) {\n e.preventDefault();\n const text = e.clipboardData?.getData('text')?.replace(/\\D/g, '').slice(0, this.digitsCount) \|\| '';\n const newDigits = Array(this.digitsCount).fill('');\n text.split('').forEach((c, i) => { newDigits[i] = c; });\n this.digits = newDigits;\n this.digitStates = newDigits.map(d => d ? 'filled' : 'idle');\n this.inputs[Math.min(text.length, this.digitsCount - 1)]?.focus();\n \n if (newDigits.every(d => d !== '')) {\n const finalCode = newDigits.join('');\n this.internals.setFormValue(finalCode);\n this.codeCompleted.emit(finalCode);\n this.codeAccepted.emit(finalCode);\n this.dropiCodeCompleted.emit(finalCode);\n this.dropiCodeAccepted.emit(finalCode);\n } else {\n this.internals.setFormValue(newDigits.join(''));\n }\n\n }\n\n render() {\n const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';\n\n return (\n <div class=\"otp\">\n {this.showLabelContact && (\n <p class=\"otp__label\">\n Ingresa el código enviado a tu {engineLabel}\n {this.labelContact && <strong> {this.labelContact}</strong>}\n </p>\n )}\n\n <div class=\"otp__inputs\" onPaste={(e) => this.handlePaste(e)}>\n {this.digits.map((_, i) => (\n <input\n key={i}\n ref={(el) => { if (el) this.inputs[i] = el as HTMLInputElement; }}\n class={{\n 'otp__digit': true,\n 'otp__digit--filled': this.digitStates[i] === 'filled',\n 'otp__digit--error': this.error,\n }}\n type=\"text\"\n inputMode=\"numeric\"\n maxLength={1}\n value={this.digits[i] ?? ''}\n onInput={(e) => this.handleInput(e as InputEvent, i)}\n onKeyDown={(e) => this.handleKeyDown(e as KeyboardEvent, i)}\n />\n ))}\n </div>\n\n {this.error && this.errorMessage && (\n <p class=\"otp__error\">{this.errorMessage}</p>\n )}\n\n <div class=\"otp__resend\">\n {this.canResend ? (\n <button class=\"otp__resend-btn\" onClick={() => { this.startCountdown(); this.dropiResend.emit(); }}>\n Reenviar código\n </button>\n ) : (\n <span class=\"otp__countdown\">Reenviar en {this.countdown}s</span>\n )}\n </div>\n </div>\n );\n }\n}\n"],"version":3}