@elementar-rt/components 0.6.56 → 0.6.58

package/fesm2022/elementar-rt-components-video-player.mjs

@@ -0,0 +1,144 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, viewChild, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+
+class VideoPlayerComponent {
+    src = input('', ...(ngDevMode ? [{ debugName: "src" }] : []));
+    poster = input('', ...(ngDevMode ? [{ debugName: "poster" }] : []));
+    autoplay = input(false, ...(ngDevMode ? [{ debugName: "autoplay", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    loop = input(false, ...(ngDevMode ? [{ debugName: "loop", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    chapters = input([], ...(ngDevMode ? [{ debugName: "chapters" }] : []));
+    _videoEl = viewChild('videoEl', ...(ngDevMode ? [{ debugName: "_videoEl" }] : []));
+    _playing = signal(false, ...(ngDevMode ? [{ debugName: "_playing" }] : []));
+    _muted = signal(false, ...(ngDevMode ? [{ debugName: "_muted" }] : []));
+    _volume = signal(1, ...(ngDevMode ? [{ debugName: "_volume" }] : []));
+    _currentTime = signal(0, ...(ngDevMode ? [{ debugName: "_currentTime" }] : []));
+    _duration = signal(0, ...(ngDevMode ? [{ debugName: "_duration" }] : []));
+    _buffered = signal(0, ...(ngDevMode ? [{ debugName: "_buffered" }] : []));
+    _speed = signal(1, ...(ngDevMode ? [{ debugName: "_speed" }] : []));
+    _showSpeedMenu = signal(false, ...(ngDevMode ? [{ debugName: "_showSpeedMenu" }] : []));
+    _fullscreen = signal(false, ...(ngDevMode ? [{ debugName: "_fullscreen" }] : []));
+    _progress = computed(() => this._duration() > 0 ? (this._currentTime() / this._duration()) * 100 : 0, ...(ngDevMode ? [{ debugName: "_progress" }] : []));
+    _bufferedPct = computed(() => this._duration() > 0 ? (this._buffered() / this._duration()) * 100 : 0, ...(ngDevMode ? [{ debugName: "_bufferedPct" }] : []));
+    _currentChapter = computed(() => {
+        const t = this._currentTime();
+        const chapters = [...this.chapters()].sort((a, b) => b.time - a.time);
+        return chapters.find(c => t >= c.time)?.label ?? '';
+    }, ...(ngDevMode ? [{ debugName: "_currentChapter" }] : []));
+    _speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+    ngAfterViewInit() {
+        const v = this._videoEl()?.nativeElement;
+        if (v && this.autoplay()) {
+            v.play().catch(() => { });
+        }
+    }
+    ngOnDestroy() { }
+    _togglePlay() {
+        const v = this._video();
+        if (!v)
+            return;
+        if (this._playing()) {
+            v.pause();
+        }
+        else {
+            v.play().catch(() => { });
+        }
+    }
+    _toggleMute() {
+        const v = this._video();
+        if (!v)
+            return;
+        v.muted = !v.muted;
+        this._muted.set(v.muted);
+    }
+    _onVolumeChange(e) {
+        const v = this._video();
+        if (!v)
+            return;
+        const vol = parseFloat(e.target.value);
+        v.volume = vol;
+        v.muted = vol === 0;
+        this._volume.set(vol);
+        this._muted.set(v.muted);
+    }
+    _onSeek(e) {
+        const v = this._video();
+        if (!v)
+            return;
+        const pct = parseFloat(e.target.value);
+        v.currentTime = (pct / 100) * this._duration();
+    }
+    _setSpeed(s) {
+        const v = this._video();
+        if (!v)
+            return;
+        v.playbackRate = s;
+        this._speed.set(s);
+        this._showSpeedMenu.set(false);
+    }
+    _togglePiP() {
+        const v = this._video();
+        if (!v)
+            return;
+        if (document.pictureInPictureElement) {
+            document.exitPictureInPicture().catch(() => { });
+        }
+        else {
+            v.requestPictureInPicture().catch(() => { });
+        }
+    }
+    _toggleFullscreen() {
+        const el = document.querySelector('.vp-container');
+        if (!el)
+            return;
+        if (document.fullscreenElement) {
+            document.exitFullscreen().then(() => this._fullscreen.set(false)).catch(() => { });
+        }
+        else {
+            el.requestFullscreen().then(() => this._fullscreen.set(true)).catch(() => { });
+        }
+    }
+    _onTimeUpdate() {
+        const v = this._video();
+        if (!v)
+            return;
+        this._currentTime.set(v.currentTime);
+        if (v.buffered.length > 0)
+            this._buffered.set(v.buffered.end(v.buffered.length - 1));
+    }
+    _onPlay() { this._playing.set(true); }
+    _onPause() { this._playing.set(false); }
+    _onLoadedMetadata() {
+        const v = this._video();
+        if (v)
+            this._duration.set(v.duration);
+    }
+    _formatTime(s) {
+        if (!s || isNaN(s))
+            return '0:00';
+        const h = Math.floor(s / 3600);
+        const m = Math.floor((s % 3600) / 60);
+        const sec = Math.floor(s % 60);
+        if (h > 0)
+            return `${h}:${m.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`;
+        return `${m}:${sec.toString().padStart(2, '0')}`;
+    }
+    _chapterOffset(chapter) {
+        return this._duration() > 0 ? (chapter.time / this._duration()) * 100 : 0;
+    }
+    _video() {
+        return this._videoEl()?.nativeElement ?? null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VideoPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VideoPlayerComponent, isStandalone: true, selector: "emr-video-player", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, poster: { classPropertyName: "poster", publicName: "poster", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, chapters: { classPropertyName: "chapters", publicName: "chapters", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_videoEl", first: true, predicate: ["videoEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"vp-container\">\n  <video\n    #videoEl\n    class=\"vp-video\"\n    [src]=\"src()\"\n    [poster]=\"poster()\"\n    [loop]=\"loop()\"\n    [muted]=\"_muted()\"\n    (timeupdate)=\"_onTimeUpdate()\"\n    (play)=\"_onPlay()\"\n    (pause)=\"_onPause()\"\n    (loadedmetadata)=\"_onLoadedMetadata()\"\n    (click)=\"_togglePlay()\"\n  ></video>\n\n  @if (_currentChapter()) {\n    <div class=\"vp-chapter-badge\">{{ _currentChapter() }}</div>\n  }\n\n  <div class=\"vp-controls\">\n    <!-- Progress bar -->\n    <div class=\"vp-progress-wrap\">\n      <div class=\"vp-buffered\" [style.width.%]=\"_bufferedPct()\"></div>\n      <input\n        type=\"range\" class=\"vp-seek\"\n        min=\"0\" max=\"100\" step=\"0.1\"\n        [value]=\"_progress()\"\n        (input)=\"_onSeek($event)\"\n      />\n      @for (ch of chapters(); track ch.time) {\n        <div class=\"vp-chapter-marker\" [style.left.%]=\"_chapterOffset(ch)\" [title]=\"ch.label\"></div>\n      }\n    </div>\n\n    <!-- Bottom bar -->\n    <div class=\"vp-bar\">\n      <div class=\"vp-bar-left\">\n        <!-- Play/Pause -->\n        <button type=\"button\" class=\"vp-btn\" (click)=\"_togglePlay()\" [attr.aria-label]=\"_playing() ? 'Pause' : 'Play'\">\n          @if (_playing()) {\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><rect x=\"6\" y=\"4\" width=\"4\" height=\"16\"/><rect x=\"14\" y=\"4\" width=\"4\" height=\"16\"/></svg>\n          } @else {\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"5 3 19 12 5 21 5 3\"/></svg>\n          }\n        </button>\n\n        <!-- Volume -->\n        <button type=\"button\" class=\"vp-btn\" (click)=\"_toggleMute()\" aria-label=\"Mute\">\n          @if (_muted() || _volume() === 0) {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/><line x1=\"23\" y1=\"9\" x2=\"17\" y2=\"15\"/><line x1=\"17\" y1=\"9\" x2=\"23\" y2=\"15\"/></svg>\n          } @else {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/><path d=\"M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07\"/></svg>\n          }\n        </button>\n        <input type=\"range\" class=\"vp-volume\" min=\"0\" max=\"1\" step=\"0.05\" [value]=\"_volume()\" (input)=\"_onVolumeChange($event)\" aria-label=\"Volume\" />\n\n        <!-- Time -->\n        <span class=\"vp-time\">{{ _formatTime(_currentTime()) }} / {{ _formatTime(_duration()) }}</span>\n      </div>\n\n      <div class=\"vp-bar-right\">\n        <!-- Speed -->\n        <div class=\"vp-speed-wrap\">\n          <button type=\"button\" class=\"vp-btn vp-speed-btn\" (click)=\"_showSpeedMenu.set(!_showSpeedMenu())\">\n            {{ _speed() }}\u00D7\n          </button>\n          @if (_showSpeedMenu()) {\n            <div class=\"vp-speed-menu\">\n              @for (s of _speeds; track s) {\n                <button type=\"button\" class=\"vp-speed-opt\" [attr.data-active]=\"_speed() === s || null\" (click)=\"_setSpeed(s)\">{{ s }}\u00D7</button>\n              }\n            </div>\n          }\n        </div>\n\n        <!-- PiP -->\n        <button type=\"button\" class=\"vp-btn\" (click)=\"_togglePiP()\" aria-label=\"Picture in picture\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"/><rect x=\"12\" y=\"10\" width=\"8\" height=\"6\" rx=\"1\" fill=\"currentColor\"/></svg>\n        </button>\n\n        <!-- Fullscreen -->\n        <button type=\"button\" class=\"vp-btn\" (click)=\"_toggleFullscreen()\" aria-label=\"Fullscreen\">\n          @if (_fullscreen()) {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 0 2-2h3M3 16h3a2 2 0 0 0 2 2v3\"/></svg>\n          } @else {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3\"/></svg>\n          }\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.vp-container{position:relative;background:#000;border-radius:.75rem;overflow:hidden;aspect-ratio:16/9}.vp-container:hover .vp-controls{opacity:1}.vp-video{width:100%;height:100%;object-fit:contain;cursor:pointer;display:block}.vp-chapter-badge{position:absolute;top:calc(var(--spacing, .25rem) * 3);left:calc(var(--spacing, .25rem) * 3);background:#0009;color:#fff;font-size:.75rem;font-weight:600;padding:calc(var(--spacing, .25rem) * .5) calc(var(--spacing, .25rem) * 2);border-radius:9999px}.vp-controls{position:absolute;bottom:0;left:0;right:0;padding:calc(var(--spacing, .25rem) * 4) calc(var(--spacing, .25rem) * 3) calc(var(--spacing, .25rem) * 2);background:linear-gradient(transparent,#000000b3);opacity:0;transition:opacity .2s ease;display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.vp-progress-wrap{position:relative;height:calc(var(--spacing, .25rem) * 4);display:flex;align-items:center}.vp-buffered{position:absolute;left:0;height:3px;background:#ffffff4d;border-radius:9999px;pointer-events:none;z-index:0}.vp-seek{width:100%;position:relative;z-index:1;accent-color:var(--color-primary);cursor:pointer;background:transparent;height:3px}.vp-chapter-marker{position:absolute;width:2px;height:calc(var(--spacing, .25rem) * 2.5);background:#fff9;border-radius:1px;z-index:2;pointer-events:none;transform:translate(-50%)}.vp-bar{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}.vp-bar-left,.vp-bar-right{display:flex;align-items:center;gap:var(--spacing, .25rem)}.vp-btn{width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:#fff;border-radius:.375rem}.vp-btn:hover{background:#ffffff26}.vp-btn svg{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4)}.vp-volume{width:calc(var(--spacing, .25rem) * 20);accent-color:var(--color-primary);cursor:pointer}.vp-time{font-size:.75rem;color:#ffffffd9;white-space:nowrap;font-variant-numeric:tabular-nums}.vp-speed-wrap{position:relative}.vp-speed-btn{font-size:.75rem;font-weight:700;width:auto;padding:0 calc(var(--spacing, .25rem) * 1.5);min-width:calc(var(--spacing, .25rem) * 9)}.vp-speed-menu{position:absolute;bottom:calc(100% + calc(var(--spacing, .25rem) * 2));right:0;background:var(--color-surface-container-high);border:1px solid var(--color-outline-variant);border-radius:.5rem;overflow:hidden;display:flex;flex-direction:column;min-width:calc(var(--spacing, .25rem) * 16);box-shadow:0 4px 16px #0000004d}.vp-speed-opt{font-size:.875rem;padding:calc(var(--spacing, .25rem) * 1.5) calc(var(--spacing, .25rem) * 3);background:transparent;border:none;cursor:pointer;text-align:center;color:var(--color-on-surface)}.vp-speed-opt:hover{background:var(--color-surface-container)}.vp-speed-opt[data-active]{color:var(--color-primary);font-weight:600}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VideoPlayerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'emr-video-player', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"vp-container\">\n  <video\n    #videoEl\n    class=\"vp-video\"\n    [src]=\"src()\"\n    [poster]=\"poster()\"\n    [loop]=\"loop()\"\n    [muted]=\"_muted()\"\n    (timeupdate)=\"_onTimeUpdate()\"\n    (play)=\"_onPlay()\"\n    (pause)=\"_onPause()\"\n    (loadedmetadata)=\"_onLoadedMetadata()\"\n    (click)=\"_togglePlay()\"\n  ></video>\n\n  @if (_currentChapter()) {\n    <div class=\"vp-chapter-badge\">{{ _currentChapter() }}</div>\n  }\n\n  <div class=\"vp-controls\">\n    <!-- Progress bar -->\n    <div class=\"vp-progress-wrap\">\n      <div class=\"vp-buffered\" [style.width.%]=\"_bufferedPct()\"></div>\n      <input\n        type=\"range\" class=\"vp-seek\"\n        min=\"0\" max=\"100\" step=\"0.1\"\n        [value]=\"_progress()\"\n        (input)=\"_onSeek($event)\"\n      />\n      @for (ch of chapters(); track ch.time) {\n        <div class=\"vp-chapter-marker\" [style.left.%]=\"_chapterOffset(ch)\" [title]=\"ch.label\"></div>\n      }\n    </div>\n\n    <!-- Bottom bar -->\n    <div class=\"vp-bar\">\n      <div class=\"vp-bar-left\">\n        <!-- Play/Pause -->\n        <button type=\"button\" class=\"vp-btn\" (click)=\"_togglePlay()\" [attr.aria-label]=\"_playing() ? 'Pause' : 'Play'\">\n          @if (_playing()) {\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><rect x=\"6\" y=\"4\" width=\"4\" height=\"16\"/><rect x=\"14\" y=\"4\" width=\"4\" height=\"16\"/></svg>\n          } @else {\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"5 3 19 12 5 21 5 3\"/></svg>\n          }\n        </button>\n\n        <!-- Volume -->\n        <button type=\"button\" class=\"vp-btn\" (click)=\"_toggleMute()\" aria-label=\"Mute\">\n          @if (_muted() || _volume() === 0) {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/><line x1=\"23\" y1=\"9\" x2=\"17\" y2=\"15\"/><line x1=\"17\" y1=\"9\" x2=\"23\" y2=\"15\"/></svg>\n          } @else {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/><path d=\"M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07\"/></svg>\n          }\n        </button>\n        <input type=\"range\" class=\"vp-volume\" min=\"0\" max=\"1\" step=\"0.05\" [value]=\"_volume()\" (input)=\"_onVolumeChange($event)\" aria-label=\"Volume\" />\n\n        <!-- Time -->\n        <span class=\"vp-time\">{{ _formatTime(_currentTime()) }} / {{ _formatTime(_duration()) }}</span>\n      </div>\n\n      <div class=\"vp-bar-right\">\n        <!-- Speed -->\n        <div class=\"vp-speed-wrap\">\n          <button type=\"button\" class=\"vp-btn vp-speed-btn\" (click)=\"_showSpeedMenu.set(!_showSpeedMenu())\">\n            {{ _speed() }}\u00D7\n          </button>\n          @if (_showSpeedMenu()) {\n            <div class=\"vp-speed-menu\">\n              @for (s of _speeds; track s) {\n                <button type=\"button\" class=\"vp-speed-opt\" [attr.data-active]=\"_speed() === s || null\" (click)=\"_setSpeed(s)\">{{ s }}\u00D7</button>\n              }\n            </div>\n          }\n        </div>\n\n        <!-- PiP -->\n        <button type=\"button\" class=\"vp-btn\" (click)=\"_togglePiP()\" aria-label=\"Picture in picture\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"/><rect x=\"12\" y=\"10\" width=\"8\" height=\"6\" rx=\"1\" fill=\"currentColor\"/></svg>\n        </button>\n\n        <!-- Fullscreen -->\n        <button type=\"button\" class=\"vp-btn\" (click)=\"_toggleFullscreen()\" aria-label=\"Fullscreen\">\n          @if (_fullscreen()) {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 0 2-2h3M3 16h3a2 2 0 0 0 2 2v3\"/></svg>\n          } @else {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3\"/></svg>\n          }\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.vp-container{position:relative;background:#000;border-radius:.75rem;overflow:hidden;aspect-ratio:16/9}.vp-container:hover .vp-controls{opacity:1}.vp-video{width:100%;height:100%;object-fit:contain;cursor:pointer;display:block}.vp-chapter-badge{position:absolute;top:calc(var(--spacing, .25rem) * 3);left:calc(var(--spacing, .25rem) * 3);background:#0009;color:#fff;font-size:.75rem;font-weight:600;padding:calc(var(--spacing, .25rem) * .5) calc(var(--spacing, .25rem) * 2);border-radius:9999px}.vp-controls{position:absolute;bottom:0;left:0;right:0;padding:calc(var(--spacing, .25rem) * 4) calc(var(--spacing, .25rem) * 3) calc(var(--spacing, .25rem) * 2);background:linear-gradient(transparent,#000000b3);opacity:0;transition:opacity .2s ease;display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.vp-progress-wrap{position:relative;height:calc(var(--spacing, .25rem) * 4);display:flex;align-items:center}.vp-buffered{position:absolute;left:0;height:3px;background:#ffffff4d;border-radius:9999px;pointer-events:none;z-index:0}.vp-seek{width:100%;position:relative;z-index:1;accent-color:var(--color-primary);cursor:pointer;background:transparent;height:3px}.vp-chapter-marker{position:absolute;width:2px;height:calc(var(--spacing, .25rem) * 2.5);background:#fff9;border-radius:1px;z-index:2;pointer-events:none;transform:translate(-50%)}.vp-bar{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}.vp-bar-left,.vp-bar-right{display:flex;align-items:center;gap:var(--spacing, .25rem)}.vp-btn{width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:#fff;border-radius:.375rem}.vp-btn:hover{background:#ffffff26}.vp-btn svg{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4)}.vp-volume{width:calc(var(--spacing, .25rem) * 20);accent-color:var(--color-primary);cursor:pointer}.vp-time{font-size:.75rem;color:#ffffffd9;white-space:nowrap;font-variant-numeric:tabular-nums}.vp-speed-wrap{position:relative}.vp-speed-btn{font-size:.75rem;font-weight:700;width:auto;padding:0 calc(var(--spacing, .25rem) * 1.5);min-width:calc(var(--spacing, .25rem) * 9)}.vp-speed-menu{position:absolute;bottom:calc(100% + calc(var(--spacing, .25rem) * 2));right:0;background:var(--color-surface-container-high);border:1px solid var(--color-outline-variant);border-radius:.5rem;overflow:hidden;display:flex;flex-direction:column;min-width:calc(var(--spacing, .25rem) * 16);box-shadow:0 4px 16px #0000004d}.vp-speed-opt{font-size:.875rem;padding:calc(var(--spacing, .25rem) * 1.5) calc(var(--spacing, .25rem) * 3);background:transparent;border:none;cursor:pointer;text-align:center;color:var(--color-on-surface)}.vp-speed-opt:hover{background:var(--color-surface-container)}.vp-speed-opt[data-active]{color:var(--color-primary);font-weight:600}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], poster: [{ type: i0.Input, args: [{ isSignal: true, alias: "poster", required: false }] }], autoplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoplay", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], chapters: [{ type: i0.Input, args: [{ isSignal: true, alias: "chapters", required: false }] }], _videoEl: [{ type: i0.ViewChild, args: ['videoEl', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { VideoPlayerComponent };
+//# sourceMappingURL=elementar-rt-components-video-player.mjs.map

package/fesm2022/elementar-rt-components-video-player.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"elementar-rt-components-video-player.mjs","sources":["../../../projects/components/video-player/src/video-player/video-player.component.ts","../../../projects/components/video-player/src/video-player/video-player.component.html","../../../projects/components/video-player/elementar-rt-components-video-player.ts"],"sourcesContent":["import {\n  Component, input, signal, computed, ChangeDetectionStrategy,\n  booleanAttribute, viewChild, ElementRef, AfterViewInit, OnDestroy\n} from '@angular/core';\n\nexport interface VideoChapter {\n  time: number;\n  label: string;\n}\n\n@Component({\n  selector: 'emr-video-player',\n  standalone: true,\n  templateUrl: './video-player.component.html',\n  styleUrl: './video-player.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class VideoPlayerComponent implements AfterViewInit, OnDestroy {\n  src = input('');\n  poster = input('');\n  autoplay = input(false, { transform: booleanAttribute });\n  loop = input(false, { transform: booleanAttribute });\n  chapters = input<VideoChapter[]>([]);\n\n  protected _videoEl = viewChild<ElementRef<HTMLVideoElement>>('videoEl');\n\n  protected _playing = signal(false);\n  protected _muted = signal(false);\n  protected _volume = signal(1);\n  protected _currentTime = signal(0);\n  protected _duration = signal(0);\n  protected _buffered = signal(0);\n  protected _speed = signal(1);\n  protected _showSpeedMenu = signal(false);\n  protected _fullscreen = signal(false);\n\n  protected _progress = computed(() =>\n    this._duration() > 0 ? (this._currentTime() / this._duration()) * 100 : 0\n  );\n\n  protected _bufferedPct = computed(() =>\n    this._duration() > 0 ? (this._buffered() / this._duration()) * 100 : 0\n  );\n\n  protected _currentChapter = computed(() => {\n    const t = this._currentTime();\n    const chapters = [...this.chapters()].sort((a, b) => b.time - a.time);\n    return chapters.find(c => t >= c.time)?.label ?? '';\n  });\n\n  protected readonly _speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];\n\n  ngAfterViewInit(): void {\n    const v = this._videoEl()?.nativeElement;\n    if (v && this.autoplay()) { v.play().catch(() => {}); }\n  }\n\n  ngOnDestroy(): void {}\n\n  protected _togglePlay(): void {\n    const v = this._video();\n    if (!v) return;\n    if (this._playing()) { v.pause(); } else { v.play().catch(() => {}); }\n  }\n\n  protected _toggleMute(): void {\n    const v = this._video();\n    if (!v) return;\n    v.muted = !v.muted;\n    this._muted.set(v.muted);\n  }\n\n  protected _onVolumeChange(e: Event): void {\n    const v = this._video();\n    if (!v) return;\n    const vol = parseFloat((e.target as HTMLInputElement).value);\n    v.volume = vol;\n    v.muted = vol === 0;\n    this._volume.set(vol);\n    this._muted.set(v.muted);\n  }\n\n  protected _onSeek(e: Event): void {\n    const v = this._video();\n    if (!v) return;\n    const pct = parseFloat((e.target as HTMLInputElement).value);\n    v.currentTime = (pct / 100) * this._duration();\n  }\n\n  protected _setSpeed(s: number): void {\n    const v = this._video();\n    if (!v) return;\n    v.playbackRate = s;\n    this._speed.set(s);\n    this._showSpeedMenu.set(false);\n  }\n\n  protected _togglePiP(): void {\n    const v = this._video();\n    if (!v) return;\n    if (document.pictureInPictureElement) {\n      document.exitPictureInPicture().catch(() => {});\n    } else {\n      v.requestPictureInPicture().catch(() => {});\n    }\n  }\n\n  protected _toggleFullscreen(): void {\n    const el = document.querySelector('.vp-container') as HTMLElement;\n    if (!el) return;\n    if (document.fullscreenElement) {\n      document.exitFullscreen().then(() => this._fullscreen.set(false)).catch(() => {});\n    } else {\n      el.requestFullscreen().then(() => this._fullscreen.set(true)).catch(() => {});\n    }\n  }\n\n  protected _onTimeUpdate(): void {\n    const v = this._video();\n    if (!v) return;\n    this._currentTime.set(v.currentTime);\n    if (v.buffered.length > 0) this._buffered.set(v.buffered.end(v.buffered.length - 1));\n  }\n\n  protected _onPlay(): void { this._playing.set(true); }\n  protected _onPause(): void { this._playing.set(false); }\n  protected _onLoadedMetadata(): void {\n    const v = this._video();\n    if (v) this._duration.set(v.duration);\n  }\n\n  protected _formatTime(s: number): string {\n    if (!s || isNaN(s)) return '0:00';\n    const h = Math.floor(s / 3600);\n    const m = Math.floor((s % 3600) / 60);\n    const sec = Math.floor(s % 60);\n    if (h > 0) return `${h}:${m.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`;\n    return `${m}:${sec.toString().padStart(2, '0')}`;\n  }\n\n  protected _chapterOffset(chapter: VideoChapter): number {\n    return this._duration() > 0 ? (chapter.time / this._duration()) * 100 : 0;\n  }\n\n  private _video(): HTMLVideoElement | null {\n    return this._videoEl()?.nativeElement ?? null;\n  }\n}\n","<div class=\"vp-container\">\n  <video\n    #videoEl\n    class=\"vp-video\"\n    [src]=\"src()\"\n    [poster]=\"poster()\"\n    [loop]=\"loop()\"\n    [muted]=\"_muted()\"\n    (timeupdate)=\"_onTimeUpdate()\"\n    (play)=\"_onPlay()\"\n    (pause)=\"_onPause()\"\n    (loadedmetadata)=\"_onLoadedMetadata()\"\n    (click)=\"_togglePlay()\"\n  ></video>\n\n  @if (_currentChapter()) {\n    <div class=\"vp-chapter-badge\">{{ _currentChapter() }}</div>\n  }\n\n  <div class=\"vp-controls\">\n    <!-- Progress bar -->\n    <div class=\"vp-progress-wrap\">\n      <div class=\"vp-buffered\" [style.width.%]=\"_bufferedPct()\"></div>\n      <input\n        type=\"range\" class=\"vp-seek\"\n        min=\"0\" max=\"100\" step=\"0.1\"\n        [value]=\"_progress()\"\n        (input)=\"_onSeek($event)\"\n      />\n      @for (ch of chapters(); track ch.time) {\n        <div class=\"vp-chapter-marker\" [style.left.%]=\"_chapterOffset(ch)\" [title]=\"ch.label\"></div>\n      }\n    </div>\n\n    <!-- Bottom bar -->\n    <div class=\"vp-bar\">\n      <div class=\"vp-bar-left\">\n        <!-- Play/Pause -->\n        <button type=\"button\" class=\"vp-btn\" (click)=\"_togglePlay()\" [attr.aria-label]=\"_playing() ? 'Pause' : 'Play'\">\n          @if (_playing()) {\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><rect x=\"6\" y=\"4\" width=\"4\" height=\"16\"/><rect x=\"14\" y=\"4\" width=\"4\" height=\"16\"/></svg>\n          } @else {\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"5 3 19 12 5 21 5 3\"/></svg>\n          }\n        </button>\n\n        <!-- Volume -->\n        <button type=\"button\" class=\"vp-btn\" (click)=\"_toggleMute()\" aria-label=\"Mute\">\n          @if (_muted() || _volume() === 0) {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/><line x1=\"23\" y1=\"9\" x2=\"17\" y2=\"15\"/><line x1=\"17\" y1=\"9\" x2=\"23\" y2=\"15\"/></svg>\n          } @else {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/><path d=\"M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07\"/></svg>\n          }\n        </button>\n        <input type=\"range\" class=\"vp-volume\" min=\"0\" max=\"1\" step=\"0.05\" [value]=\"_volume()\" (input)=\"_onVolumeChange($event)\" aria-label=\"Volume\" />\n\n        <!-- Time -->\n        <span class=\"vp-time\">{{ _formatTime(_currentTime()) }} / {{ _formatTime(_duration()) }}</span>\n      </div>\n\n      <div class=\"vp-bar-right\">\n        <!-- Speed -->\n        <div class=\"vp-speed-wrap\">\n          <button type=\"button\" class=\"vp-btn vp-speed-btn\" (click)=\"_showSpeedMenu.set(!_showSpeedMenu())\">\n            {{ _speed() }}×\n          </button>\n          @if (_showSpeedMenu()) {\n            <div class=\"vp-speed-menu\">\n              @for (s of _speeds; track s) {\n                <button type=\"button\" class=\"vp-speed-opt\" [attr.data-active]=\"_speed() === s || null\" (click)=\"_setSpeed(s)\">{{ s }}×</button>\n              }\n            </div>\n          }\n        </div>\n\n        <!-- PiP -->\n        <button type=\"button\" class=\"vp-btn\" (click)=\"_togglePiP()\" aria-label=\"Picture in picture\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"/><rect x=\"12\" y=\"10\" width=\"8\" height=\"6\" rx=\"1\" fill=\"currentColor\"/></svg>\n        </button>\n\n        <!-- Fullscreen -->\n        <button type=\"button\" class=\"vp-btn\" (click)=\"_toggleFullscreen()\" aria-label=\"Fullscreen\">\n          @if (_fullscreen()) {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 0 2-2h3M3 16h3a2 2 0 0 0 2 2v3\"/></svg>\n          } @else {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3\"/></svg>\n          }\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/elementar-rt-components-video-viewer.mjs

@@ -0,0 +1,98 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, output, inject, signal, computed, HostListener, ChangeDetectionStrategy, Component } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+class VideoViewerComponent {
+    src = input('', ...(ngDevMode ? [{ debugName: "src" }] : []));
+    poster = input('', ...(ngDevMode ? [{ debugName: "poster" }] : []));
+    open = input(false, ...(ngDevMode ? [{ debugName: "open", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    closed = output();
+    _sanitizer = inject(DomSanitizer);
+    _open = signal(false, ...(ngDevMode ? [{ debugName: "_open" }] : []));
+    _playing = signal(false, ...(ngDevMode ? [{ debugName: "_playing" }] : []));
+    _muted = signal(false, ...(ngDevMode ? [{ debugName: "_muted" }] : []));
+    _volume = signal(1, ...(ngDevMode ? [{ debugName: "_volume" }] : []));
+    _currentTime = signal(0, ...(ngDevMode ? [{ debugName: "_currentTime" }] : []));
+    _duration = signal(0, ...(ngDevMode ? [{ debugName: "_duration" }] : []));
+    _progress = computed(() => this._duration() > 0 ? (this._currentTime() / this._duration()) * 100 : 0, ...(ngDevMode ? [{ debugName: "_progress" }] : []));
+    _videoType = computed(() => {
+        const s = this.src();
+        if (/youtube\.com|youtu\.be/.test(s))
+            return 'youtube';
+        if (/vimeo\.com/.test(s))
+            return 'vimeo';
+        return 'mp4';
+    }, ...(ngDevMode ? [{ debugName: "_videoType" }] : []));
+    _embedUrl = computed(() => {
+        const s = this.src();
+        const type = this._videoType();
+        if (type === 'youtube') {
+            const id = s.match(/(?:v=|youtu\.be\/)([^&?/]+)/)?.[1];
+            if (id)
+                return this._sanitizer.bypassSecurityTrustResourceUrl(`https://www.youtube.com/embed/${id}?autoplay=1`);
+        }
+        if (type === 'vimeo') {
+            const id = s.match(/vimeo\.com\/(\d+)/)?.[1];
+            if (id)
+                return this._sanitizer.bypassSecurityTrustResourceUrl(`https://player.vimeo.com/video/${id}?autoplay=1`);
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "_embedUrl" }] : []));
+    onKey(e) {
+        if (!this._open())
+            return;
+        if (e.code === 'Space') {
+            e.preventDefault();
+            this._togglePlay();
+        }
+        if (e.code === 'Escape')
+            this._close();
+        if (e.code === 'KeyF')
+            this._fullscreen();
+    }
+    _show() { this._open.set(true); }
+    _close() { this._open.set(false); this.closed.emit(); }
+    _togglePlay() { this._playing.set(!this._playing()); }
+    _toggleMute() { this._muted.set(!this._muted()); }
+    _onTimeUpdate(e) {
+        const v = e.target;
+        this._currentTime.set(v.currentTime);
+        this._duration.set(v.duration);
+    }
+    _onSeek(e) {
+        const v = e.target;
+        const video = document.querySelector('.vv-video');
+        if (video)
+            video.currentTime = (parseFloat(v.value) / 100) * this._duration();
+    }
+    _fullscreen() {
+        const el = document.querySelector('.vv-player');
+        if (el?.requestFullscreen)
+            el.requestFullscreen();
+    }
+    _formatTime(s) {
+        if (!s || isNaN(s))
+            return '0:00';
+        const m = Math.floor(s / 60);
+        const sec = Math.floor(s % 60);
+        return `${m}:${sec.toString().padStart(2, '0')}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VideoViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VideoViewerComponent, isStandalone: true, selector: "emr-video-viewer", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, poster: { classPropertyName: "poster", publicName: "poster", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { listeners: { "keydown": "onKey($event)" }, properties: { "attr.data-open": "_open() || null" } }, ngImport: i0, template: "@if (_open()) {\n  <div class=\"vv-backdrop\" (click)=\"_close()\">\n    <div class=\"vv-player\" (click)=\"$event.stopPropagation()\">\n      <button type=\"button\" class=\"vv-close\" (click)=\"_close()\" aria-label=\"Close\">\u00D7</button>\n\n      @if (_videoType() === 'mp4') {\n        <video\n          class=\"vv-video\"\n          [src]=\"src()\"\n          [poster]=\"poster()\"\n          [muted]=\"_muted()\"\n          [volume]=\"_volume()\"\n          [autoplay]=\"true\"\n          (timeupdate)=\"_onTimeUpdate($event)\"\n          (play)=\"_playing.set(true)\"\n          (pause)=\"_playing.set(false)\"\n          (click)=\"_togglePlay()\"\n        ></video>\n        <div class=\"vv-controls\">\n          <button type=\"button\" class=\"vv-btn\" (click)=\"_togglePlay()\">\n            @if (_playing()) { \u23F8 } @else { \u25B6 }\n          </button>\n          <span class=\"vv-time\">{{ _formatTime(_currentTime()) }} / {{ _formatTime(_duration()) }}</span>\n          <input\n            type=\"range\" class=\"vv-seek\" min=\"0\" max=\"100\"\n            [value]=\"_progress()\"\n            (change)=\"_onSeek($event)\"\n          />\n          <button type=\"button\" class=\"vv-btn\" (click)=\"_toggleMute()\">\n            @if (_muted()) { \uD83D\uDD07 } @else { \uD83D\uDD0A }\n          </button>\n          <button type=\"button\" class=\"vv-btn\" (click)=\"_fullscreen()\">\u26F6</button>\n        </div>\n      } @else {\n        <iframe\n          class=\"vv-embed\"\n          [src]=\"_embedUrl()\"\n          frameborder=\"0\"\n          allowfullscreen\n          allow=\"autoplay; fullscreen; picture-in-picture\"\n        ></iframe>\n      }\n    </div>\n  </div>\n}\n", styles: [".vv-backdrop{position:fixed;inset:0;background:#000000d9;z-index:9000;display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 4);animation:fadeIn .2s ease}.vv-player{position:relative;width:100%;max-width:calc(var(--spacing, .25rem) * 192);aspect-ratio:16/9;background:#000;border-radius:.75rem;overflow:hidden}.vv-close{position:absolute;top:calc(var(--spacing, .25rem) * 3);right:calc(var(--spacing, .25rem) * 3);z-index:10;width:calc(var(--spacing, .25rem) * 9);height:calc(var(--spacing, .25rem) * 9);display:flex;align-items:center;justify-content:center;background:#0009;border:none;border-radius:50%;cursor:pointer;color:#fff;font-size:1.25rem;line-height:1}.vv-close:hover{background:#000c}.vv-video{width:100%;height:100%;object-fit:contain;cursor:pointer}.vv-embed{width:100%;height:100%;border:none}.vv-controls{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 3);background:linear-gradient(transparent,#000000b3)}.vv-btn{background:transparent;border:none;cursor:pointer;color:#fff;font-size:1rem;padding:var(--spacing, .25rem);border-radius:.25rem}.vv-btn:hover{background:#ffffff26}.vv-time{font-size:.75rem;color:#fffc;white-space:nowrap}.vv-seek{flex:1;height:var(--spacing, .25rem);cursor:pointer;accent-color:var(--color-primary)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VideoViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'emr-video-viewer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[attr.data-open]': '_open() || null',
+                    }, template: "@if (_open()) {\n  <div class=\"vv-backdrop\" (click)=\"_close()\">\n    <div class=\"vv-player\" (click)=\"$event.stopPropagation()\">\n      <button type=\"button\" class=\"vv-close\" (click)=\"_close()\" aria-label=\"Close\">\u00D7</button>\n\n      @if (_videoType() === 'mp4') {\n        <video\n          class=\"vv-video\"\n          [src]=\"src()\"\n          [poster]=\"poster()\"\n          [muted]=\"_muted()\"\n          [volume]=\"_volume()\"\n          [autoplay]=\"true\"\n          (timeupdate)=\"_onTimeUpdate($event)\"\n          (play)=\"_playing.set(true)\"\n          (pause)=\"_playing.set(false)\"\n          (click)=\"_togglePlay()\"\n        ></video>\n        <div class=\"vv-controls\">\n          <button type=\"button\" class=\"vv-btn\" (click)=\"_togglePlay()\">\n            @if (_playing()) { \u23F8 } @else { \u25B6 }\n          </button>\n          <span class=\"vv-time\">{{ _formatTime(_currentTime()) }} / {{ _formatTime(_duration()) }}</span>\n          <input\n            type=\"range\" class=\"vv-seek\" min=\"0\" max=\"100\"\n            [value]=\"_progress()\"\n            (change)=\"_onSeek($event)\"\n          />\n          <button type=\"button\" class=\"vv-btn\" (click)=\"_toggleMute()\">\n            @if (_muted()) { \uD83D\uDD07 } @else { \uD83D\uDD0A }\n          </button>\n          <button type=\"button\" class=\"vv-btn\" (click)=\"_fullscreen()\">\u26F6</button>\n        </div>\n      } @else {\n        <iframe\n          class=\"vv-embed\"\n          [src]=\"_embedUrl()\"\n          frameborder=\"0\"\n          allowfullscreen\n          allow=\"autoplay; fullscreen; picture-in-picture\"\n        ></iframe>\n      }\n    </div>\n  </div>\n}\n", styles: [".vv-backdrop{position:fixed;inset:0;background:#000000d9;z-index:9000;display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 4);animation:fadeIn .2s ease}.vv-player{position:relative;width:100%;max-width:calc(var(--spacing, .25rem) * 192);aspect-ratio:16/9;background:#000;border-radius:.75rem;overflow:hidden}.vv-close{position:absolute;top:calc(var(--spacing, .25rem) * 3);right:calc(var(--spacing, .25rem) * 3);z-index:10;width:calc(var(--spacing, .25rem) * 9);height:calc(var(--spacing, .25rem) * 9);display:flex;align-items:center;justify-content:center;background:#0009;border:none;border-radius:50%;cursor:pointer;color:#fff;font-size:1.25rem;line-height:1}.vv-close:hover{background:#000c}.vv-video{width:100%;height:100%;object-fit:contain;cursor:pointer}.vv-embed{width:100%;height:100%;border:none}.vv-controls{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 3);background:linear-gradient(transparent,#000000b3)}.vv-btn{background:transparent;border:none;cursor:pointer;color:#fff;font-size:1rem;padding:var(--spacing, .25rem);border-radius:.25rem}.vv-btn:hover{background:#ffffff26}.vv-time{font-size:.75rem;color:#fffc;white-space:nowrap}.vv-seek{flex:1;height:var(--spacing, .25rem);cursor:pointer;accent-color:var(--color-primary)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], poster: [{ type: i0.Input, args: [{ isSignal: true, alias: "poster", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], onKey: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { VideoViewerComponent };
+//# sourceMappingURL=elementar-rt-components-video-viewer.mjs.map

package/fesm2022/elementar-rt-components-video-viewer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"elementar-rt-components-video-viewer.mjs","sources":["../../../projects/components/video-viewer/src/video-viewer/video-viewer.component.ts","../../../projects/components/video-viewer/src/video-viewer/video-viewer.component.html","../../../projects/components/video-viewer/elementar-rt-components-video-viewer.ts"],"sourcesContent":["import {\n  Component, input, signal, computed, ChangeDetectionStrategy,\n  booleanAttribute, output, HostListener\n} from '@angular/core';\nimport { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';\nimport { inject } from '@angular/core';\n\ntype VideoType = 'mp4' | 'youtube' | 'vimeo';\n\n@Component({\n  selector: 'emr-video-viewer',\n  standalone: true,\n  templateUrl: './video-viewer.component.html',\n  styleUrl: './video-viewer.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[attr.data-open]': '_open() || null',\n  }\n})\nexport class VideoViewerComponent {\n  src = input('');\n  poster = input('');\n  open = input(false, { transform: booleanAttribute });\n\n  closed = output<void>();\n\n  private _sanitizer = inject(DomSanitizer);\n\n  protected _open = signal(false);\n  protected _playing = signal(false);\n  protected _muted = signal(false);\n  protected _volume = signal(1);\n  protected _currentTime = signal(0);\n  protected _duration = signal(0);\n  protected _progress = computed(() =>\n    this._duration() > 0 ? (this._currentTime() / this._duration()) * 100 : 0\n  );\n\n  protected _videoType = computed<VideoType>(() => {\n    const s = this.src();\n    if (/youtube\\.com|youtu\\.be/.test(s)) return 'youtube';\n    if (/vimeo\\.com/.test(s)) return 'vimeo';\n    return 'mp4';\n  });\n\n  protected _embedUrl = computed<SafeResourceUrl | null>(() => {\n    const s = this.src();\n    const type = this._videoType();\n    if (type === 'youtube') {\n      const id = s.match(/(?:v=|youtu\\.be\\/)([^&?/]+)/)?.[1];\n      if (id) return this._sanitizer.bypassSecurityTrustResourceUrl(`https://www.youtube.com/embed/${id}?autoplay=1`);\n    }\n    if (type === 'vimeo') {\n      const id = s.match(/vimeo\\.com\\/(\\d+)/)?.[1];\n      if (id) return this._sanitizer.bypassSecurityTrustResourceUrl(`https://player.vimeo.com/video/${id}?autoplay=1`);\n    }\n    return null;\n  });\n\n  @HostListener('keydown', ['$event'])\n  onKey(e: KeyboardEvent): void {\n    if (!this._open()) return;\n    if (e.code === 'Space') { e.preventDefault(); this._togglePlay(); }\n    if (e.code === 'Escape') this._close();\n    if (e.code === 'KeyF') this._fullscreen();\n  }\n\n  protected _show(): void { this._open.set(true); }\n  protected _close(): void { this._open.set(false); this.closed.emit(); }\n\n  protected _togglePlay(): void { this._playing.set(!this._playing()); }\n  protected _toggleMute(): void { this._muted.set(!this._muted()); }\n\n  protected _onTimeUpdate(e: Event): void {\n    const v = e.target as HTMLVideoElement;\n    this._currentTime.set(v.currentTime);\n    this._duration.set(v.duration);\n  }\n\n  protected _onSeek(e: Event): void {\n    const v = (e.target as HTMLInputElement);\n    const video = document.querySelector('.vv-video') as HTMLVideoElement;\n    if (video) video.currentTime = (parseFloat(v.value) / 100) * this._duration();\n  }\n\n  protected _fullscreen(): void {\n    const el = document.querySelector('.vv-player') as HTMLElement;\n    if (el?.requestFullscreen) el.requestFullscreen();\n  }\n\n  protected _formatTime(s: number): string {\n    if (!s || isNaN(s)) return '0:00';\n    const m = Math.floor(s / 60);\n    const sec = Math.floor(s % 60);\n    return `${m}:${sec.toString().padStart(2, '0')}`;\n  }\n}\n","@if (_open()) {\n  <div class=\"vv-backdrop\" (click)=\"_close()\">\n    <div class=\"vv-player\" (click)=\"$event.stopPropagation()\">\n      <button type=\"button\" class=\"vv-close\" (click)=\"_close()\" aria-label=\"Close\">×</button>\n\n      @if (_videoType() === 'mp4') {\n        <video\n          class=\"vv-video\"\n          [src]=\"src()\"\n          [poster]=\"poster()\"\n          [muted]=\"_muted()\"\n          [volume]=\"_volume()\"\n          [autoplay]=\"true\"\n          (timeupdate)=\"_onTimeUpdate($event)\"\n          (play)=\"_playing.set(true)\"\n          (pause)=\"_playing.set(false)\"\n          (click)=\"_togglePlay()\"\n        ></video>\n        <div class=\"vv-controls\">\n          <button type=\"button\" class=\"vv-btn\" (click)=\"_togglePlay()\">\n            @if (_playing()) { ⏸ } @else { ▶ }\n          </button>\n          <span class=\"vv-time\">{{ _formatTime(_currentTime()) }} / {{ _formatTime(_duration()) }}</span>\n          <input\n            type=\"range\" class=\"vv-seek\" min=\"0\" max=\"100\"\n            [value]=\"_progress()\"\n            (change)=\"_onSeek($event)\"\n          />\n          <button type=\"button\" class=\"vv-btn\" (click)=\"_toggleMute()\">\n            @if (_muted()) { 🔇 } @else { 🔊 }\n          </button>\n          <button type=\"button\" class=\"vv-btn\" (click)=\"_fullscreen()\">⛶</button>\n        </div>\n      } @else {\n        <iframe\n          class=\"vv-embed\"\n          [src]=\"_embedUrl()\"\n          frameborder=\"0\"\n          allowfullscreen\n          allow=\"autoplay; fullscreen; picture-in-picture\"\n        ></iframe>\n      }\n    </div>\n  </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/elementar-rt-components.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"elementar-rt-components.mjs","sources":["../../../projects/components/index.ts","../../../projects/components/elementar-rt-components.ts"],"sourcesContent":["export default null;\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"AAAA,YAAe,IAAI;;ACAnB;;AAEG"}
+{"version":3,"file":"elementar-rt-components.mjs","sources":["../../../projects/components/index.ts","../../../projects/components/elementar-rt-components.ts"],"sourcesContent":["export default null;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"AAAA,YAAe,IAAI;;ACAnB;;AAEG"}

package/filter-select/index.d.ts

@@ -0,0 +1,40 @@
+import * as _angular_core from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+
+interface FilterSelectOption {
+    value: unknown;
+    label: string;
+    group?: string;
+}
+declare class FilterSelectComponent implements ControlValueAccessor {
+    options: _angular_core.InputSignal<FilterSelectOption[]>;
+    placeholder: _angular_core.InputSignal<string>;
+    multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    valueChange: _angular_core.OutputEmitterRef<unknown>;
+    protected _open: _angular_core.WritableSignal<boolean>;
+    protected _search: _angular_core.WritableSignal<string>;
+    private _value;
+    protected _selected: _angular_core.Signal<unknown>;
+    protected _hasValue: _angular_core.Signal<boolean>;
+    protected _displayLabel: _angular_core.Signal<string>;
+    protected _filtered: _angular_core.Signal<FilterSelectOption[]>;
+    protected _groups: _angular_core.Signal<Map<string, FilterSelectOption[]>>;
+    private _onChange;
+    private _onTouched;
+    writeValue(val: unknown): void;
+    registerOnChange(fn: (_: unknown) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(_: boolean): void;
+    protected _toggle(): void;
+    protected _select(opt: FilterSelectOption): void;
+    protected _isSelected(opt: FilterSelectOption): boolean;
+    protected _clear(e: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FilterSelectComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FilterSelectComponent, "emr-filter-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}
+
+export { FilterSelectComponent };
+export type { FilterSelectOption };

package/grid/index.d.ts

@@ -0,0 +1,24 @@
+import * as _angular_core from '@angular/core';
+
+type GridColumns = number | {
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+};
+declare class GridComponent {
+    columns: _angular_core.InputSignal<GridColumns>;
+    gap: _angular_core.InputSignal<string>;
+    rowGap: _angular_core.InputSignal<string>;
+    align: _angular_core.InputSignal<string>;
+    justify: _angular_core.InputSignal<string>;
+    protected _colsStyle: _angular_core.Signal<string>;
+    protected _gapStyle: _angular_core.Signal<string | null>;
+    protected _rowGapStyle: _angular_core.Signal<string | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<GridComponent, "emr-grid", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "rowGap": { "alias": "rowGap"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "justify": { "alias": "justify"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { GridComponent };
+export type { GridColumns };

package/guided-tour/index.d.ts

@@ -0,0 +1,45 @@
+import * as _angular_core from '@angular/core';
+import { OnInit, OnDestroy } from '@angular/core';
+
+interface TourStep {
+    target: string;
+    title: string;
+    description: string;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+}
+declare class EmrGuidedTour {
+    private _appRef;
+    private _injector;
+    private _overlayRef;
+    private _host;
+    private _storageKey;
+    isCompleted(id: string): boolean;
+    start(steps: TourStep[], tourId?: string): void;
+    stop(): void;
+    private _destroy;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EmrGuidedTour, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<EmrGuidedTour>;
+}
+
+declare class GuidedTourOverlayComponent implements OnInit, OnDestroy {
+    steps: TourStep[];
+    tourComplete: _angular_core.OutputEmitterRef<void>;
+    tourSkipped: _angular_core.OutputEmitterRef<void>;
+    protected _current: _angular_core.WritableSignal<number>;
+    protected _cutoutStyle: _angular_core.WritableSignal<string>;
+    protected _tooltipStyle: _angular_core.WritableSignal<string>;
+    protected _step: _angular_core.WritableSignal<TourStep | null>;
+    private _raf;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    protected next(): void;
+    protected prev(): void;
+    protected complete(): void;
+    protected skip(): void;
+    private _updatePositions;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GuidedTourOverlayComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<GuidedTourOverlayComponent, "emr-guided-tour-overlay", never, {}, { "tourComplete": "tourComplete"; "tourSkipped": "tourSkipped"; }, never, never, true, never>;
+}
+
+export { EmrGuidedTour, GuidedTourOverlayComponent };
+export type { TourStep };

package/headless-stepper/index.d.ts

@@ -0,0 +1,30 @@
+import * as _angular_core from '@angular/core';
+
+interface HeadlessStepConfig {
+    valid?: boolean;
+    label?: string;
+}
+declare class EmrHeadlessStepperService {
+    private _steps;
+    private _current;
+    private _visited;
+    readonly currentStep: _angular_core.Signal<number>;
+    readonly stepCount: _angular_core.Signal<number>;
+    readonly isFirst: _angular_core.Signal<boolean>;
+    readonly isLast: _angular_core.Signal<boolean>;
+    readonly canProceed: _angular_core.Signal<boolean>;
+    readonly visitedSteps: _angular_core.Signal<Set<number>>;
+    configure(steps: HeadlessStepConfig[]): void;
+    setStepValid(index: number, valid: boolean): void;
+    next(): boolean;
+    prev(): boolean;
+    goTo(index: number): boolean;
+    reset(): void;
+    isStepVisited(index: number): boolean;
+    isStepValid(index: number): boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EmrHeadlessStepperService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<EmrHeadlessStepperService>;
+}
+
+export { EmrHeadlessStepperService };
+export type { HeadlessStepConfig };

package/image-placeholder/index.d.ts

@@ -0,0 +1,18 @@
+import * as _angular_core from '@angular/core';
+
+type ImagePlaceholderMode = 'skeleton' | 'blur' | 'icon';
+declare class ImagePlaceholderComponent {
+    src: _angular_core.InputSignal<string>;
+    alt: _angular_core.InputSignal<string>;
+    mode: _angular_core.InputSignal<ImagePlaceholderMode>;
+    lowResSrc: _angular_core.InputSignal<string>;
+    protected _loaded: _angular_core.WritableSignal<boolean>;
+    protected _error: _angular_core.WritableSignal<boolean>;
+    protected _onLoad(): void;
+    protected _onError(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ImagePlaceholderComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ImagePlaceholderComponent, "emr-image-placeholder", never, { "src": { "alias": "src"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "lowResSrc": { "alias": "lowResSrc"; "required": false; "isSignal": true; }; }, {}, never, ["[emrErrorSlot]"], true, never>;
+}
+
+export { ImagePlaceholderComponent };
+export type { ImagePlaceholderMode };

package/image-zoom-viewer/index.d.ts

@@ -0,0 +1,33 @@
+import * as _angular_core from '@angular/core';
+
+declare class ImageZoomViewerComponent {
+    src: _angular_core.InputSignal<string>;
+    alt: _angular_core.InputSignal<string>;
+    minZoom: _angular_core.InputSignalWithTransform<number, unknown>;
+    maxZoom: _angular_core.InputSignalWithTransform<number, unknown>;
+    showMinimap: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected _scale: _angular_core.WritableSignal<number>;
+    protected _translateX: _angular_core.WritableSignal<number>;
+    protected _translateY: _angular_core.WritableSignal<number>;
+    protected _isZoomed: _angular_core.Signal<boolean>;
+    private _panning;
+    private _lastX;
+    private _lastY;
+    protected _onWheel(e: WheelEvent): void;
+    protected _onMouseDown(e: MouseEvent): void;
+    protected _onMouseMove(e: MouseEvent): void;
+    protected _onMouseUp(): void;
+    protected _onTouchStart(e: TouchEvent): void;
+    protected _onTouchMove(e: TouchEvent): void;
+    protected _onTouchEnd(): void;
+    protected _reset(): void;
+    protected _imgStyle: _angular_core.Signal<string>;
+    protected _scaleLabel: _angular_core.Signal<string>;
+    protected _zoomIn(): void;
+    protected _zoomOut(): void;
+    protected _minimapStyle: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ImageZoomViewerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ImageZoomViewerComponent, "emr-image-zoom-viewer", never, { "src": { "alias": "src"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "minZoom": { "alias": "minZoom"; "required": false; "isSignal": true; }; "maxZoom": { "alias": "maxZoom"; "required": false; "isSignal": true; }; "showMinimap": { "alias": "showMinimap"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { ImageZoomViewerComponent };

package/keyboard/index.d.ts

@@ -0,0 +1,13 @@
+import * as _angular_core from '@angular/core';
+
+type Platform = 'mac' | 'win' | 'auto';
+declare class KeyboardComponent {
+    keys: _angular_core.InputSignal<string[]>;
+    platform: _angular_core.InputSignal<Platform>;
+    private _isMac;
+    protected _resolved: _angular_core.Signal<string[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KeyboardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KeyboardComponent, "emr-keyboard", never, { "keys": { "alias": "keys"; "required": false; "isSignal": true; }; "platform": { "alias": "platform"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { KeyboardComponent };

package/layout/index.d.ts

@@ -66,9 +66,11 @@ declare class LayoutApiService {
 }
 
 declare const LayoutSidebarStore: i0.Type<{
+    visibility: i0.Signal<Record<string, boolean>>;
     showSidebarVisibility: (layoutId: string, isShown: boolean) => void;
+    isVisible: (layoutId: string) => boolean;
 } & _ngrx_signals.StateSource<{
-    [x: string]: boolean;
+    visibility: Record<string, boolean>;
 }>>;
 
 export { LAYOUT, LayoutApiService, LayoutAsideComponent, LayoutBodyComponent, LayoutComponent, LayoutFooterComponent, LayoutHeaderComponent, LayoutSidebarComponent, LayoutSidebarStore, LayoutTopbarComponent };

package/list/index.d.ts

@@ -0,0 +1,18 @@
+import * as _angular_core from '@angular/core';
+
+declare class ListComponent {
+    dense: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    divided: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListComponent, "emr-list", ["emrList"], { "dense": { "alias": "dense"; "required": false; "isSignal": true; }; "divided": { "alias": "divided"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class ListItemComponent {
+    interactive: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    selected: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListItemComponent, "emr-list-item", ["emrListItem"], { "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["[emrListItemAvatar],[emrListItemIcon]", "[emrListItemTitle]", "[emrListItemSubtitle]", "*", "[emrListItemTrailing]"], true, never>;
+}
+
+export { ListComponent, ListItemComponent };