@vectoriox/iox-ui 5.73.1 → 5.73.4

package/fesm2022/vectoriox-iox-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, HostListener, Output, Input, Directive, NgModule, Injectable, ViewChild, Component, Host, Optional, inject, NgZone, InjectionToken, Inject, ChangeDetectionStrategy, ViewContainerRef, PLATFORM_ID, reflectComponentType, signal, computed } from '@angular/core';
+import { EventEmitter, HostListener, Output, Input, Directive, NgModule, Injectable, ViewChild, Component, Host, Optional, inject, NgZone, InjectionToken, Inject, ChangeDetectionStrategy, ViewContainerRef, PLATFORM_ID, HostBinding, reflectComponentType, signal, computed } from '@angular/core';
 import * as i2 from '@angular/animations';
 import { style, animate } from '@angular/animations';
 import { Subject, fromEvent } from 'rxjs';
@@ -13,7 +13,7 @@ import { SLIDER_WORDS, sliderPartElement, SliderRole, sliderWords, attachCarouse
 import { getByPath } from '@vectoriox/iox-ui/data-core';
 export * from '@vectoriox/iox-ui/data-core';
 import { dialogOpenerAttributes, dialogDomId } from '@vectoriox/iox-ui/actions-core';
-import { planVideo, videoRootAttributes, videoInnerHtml, videoWords, VideoAttribute, attachVideoAt, VideoClass } from '@vectoriox/iox-ui/media-core';
+import { VideoKind, planVideo, videoRootAttributes, videoInnerHtml, videoWords, VideoAttribute, attachVideoAt, VideoClass } from '@vectoriox/iox-ui/media-core';
 import * as i1$1 from '@angular/platform-browser';
 import { SCENE_REVEAL_DEFAULT, SceneRevealFrom, revealClipPath, TextRevealBy, playTextReveal } from '@vectoriox/iox-ui/scene-core';
 
@@ -5597,6 +5597,14 @@ class IoxVideoComponent {
     get consentCategory() { return this.values['consentCategory']; }
     set frames(v) { this.set('frames', v); }
     get frames() { return this.values['frames']; }
+    /**
+     * A Video the scroll plays usually fills its stage with height: 100%, which is a percent of this host. The host stays a
+     * box, because a node's width and margin live on it, so it passes the height down. Where a Scene flows, 100% of an
+     * auto stage is auto. An ordinary Video keeps its own height, so what stands beside it stays put.
+     */
+    get hostHeight() {
+        return this.plan?.kind === VideoKind.Frames ? '100%' : null;
+    }
     constructor(sanitizer, platformId, isPreview) {
         this.sanitizer = sanitizer;
         this.nodeId = '';
@@ -5644,7 +5652,7 @@ class IoxVideoComponent {
         this.runtime = attachVideoAt(el);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxVideoComponent, deps: [{ token: i1$1.DomSanitizer }, { token: PLATFORM_ID }, { token: IS_PREVIEW, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: IoxVideoComponent, isStandalone: false, selector: "iox-video", inputs: { nodeId: "nodeId", videoSource: "videoSource", src: "src", poster: "poster", mode: "mode", autoplay: "autoplay", title: "title", captions: "captions", captionsLang: "captionsLang", consentCategory: "consentCategory", frames: "frames" }, viewQueries: [{ propertyName: "root", first: true, predicate: ["root"], descendants: true, static: true }], ngImport: i0, template: "<div #root\n        [class]=\"'iox-video iox-node-' + nodeId\"\n        [attr.data-iox-video]=\"attrs['data-iox-video'] ?? null\"\n        [attr.data-iox-video-source]=\"attrs['data-iox-video-source'] ?? null\"\n        [attr.data-iox-video-id]=\"attrs['data-iox-video-id'] ?? null\"\n        [attr.data-iox-video-hash]=\"attrs['data-iox-video-hash'] ?? null\"\n        [attr.data-iox-video-mode]=\"attrs['data-iox-video-mode'] ?? null\"\n        [attr.data-iox-video-autoplay]=\"attrs['data-iox-video-autoplay'] ?? null\"\n        [attr.data-iox-video-consent]=\"attrs['data-iox-video-consent'] ?? null\"\n        [attr.data-iox-video-title]=\"attrs['data-iox-video-title'] ?? null\"\n        [attr.data-iox-video-poster-empty]=\"attrs['data-iox-video-poster-empty'] ?? null\"\n        [attr.data-iox-video-frames]=\"attrs['data-iox-video-frames'] ?? null\"\n        [innerHTML]=\"html\"></div>", isInline: true, styles: [":host{display:contents}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: IoxVideoComponent, isStandalone: false, selector: "iox-video", inputs: { nodeId: "nodeId", videoSource: "videoSource", src: "src", poster: "poster", mode: "mode", autoplay: "autoplay", title: "title", captions: "captions", captionsLang: "captionsLang", consentCategory: "consentCategory", frames: "frames" }, host: { properties: { "style.height": "this.hostHeight" } }, viewQueries: [{ propertyName: "root", first: true, predicate: ["root"], descendants: true, static: true }], ngImport: i0, template: "<div #root\n        [class]=\"'iox-video iox-node-' + nodeId\"\n        [attr.data-iox-video]=\"attrs['data-iox-video'] ?? null\"\n        [attr.data-iox-video-source]=\"attrs['data-iox-video-source'] ?? null\"\n        [attr.data-iox-video-id]=\"attrs['data-iox-video-id'] ?? null\"\n        [attr.data-iox-video-hash]=\"attrs['data-iox-video-hash'] ?? null\"\n        [attr.data-iox-video-mode]=\"attrs['data-iox-video-mode'] ?? null\"\n        [attr.data-iox-video-autoplay]=\"attrs['data-iox-video-autoplay'] ?? null\"\n        [attr.data-iox-video-consent]=\"attrs['data-iox-video-consent'] ?? null\"\n        [attr.data-iox-video-title]=\"attrs['data-iox-video-title'] ?? null\"\n        [attr.data-iox-video-poster-empty]=\"attrs['data-iox-video-poster-empty'] ?? null\"\n        [attr.data-iox-video-frames]=\"attrs['data-iox-video-frames'] ?? null\"\n        [innerHTML]=\"html\"></div>", isInline: true, styles: [":host{display:block;min-width:0;max-width:100%}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxVideoComponent, decorators: [{
             type: Component,
@@ -5660,7 +5668,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
         [attr.data-iox-video-title]="attrs['${VideoAttribute.Title}'] ?? null"
         [attr.data-iox-video-poster-empty]="attrs['${VideoAttribute.PosterEmpty}'] ?? null"
         [attr.data-iox-video-frames]="attrs['${VideoAttribute.Frames}'] ?? null"
-        [innerHTML]="html"></div>`, standalone: false, styles: [":host{display:contents}\n"] }]
+        [innerHTML]="html"></div>`, standalone: false, styles: [":host{display:block;min-width:0;max-width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.DomSanitizer }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -5694,6 +5702,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
             }], root: [{
                 type: ViewChild,
                 args: ['root', { static: true }]
+            }], hostHeight: [{
+                type: HostBinding,
+                args: ['style.height']
             }] } });
 
 const COMPONENTS = [