import { Component, HostListener, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SimpoElementsModule } from './../../elements/index';
import { AnimationDirective } from '../../directive/animation-directive';
import { BackgroundDirective } from '../../directive/background-directive';
import { ContentFitDirective } from '../../directive/content-fit-directive';
import { BorderDirective } from '../../directive/border-directive';
import { CornerDirective } from '../../directive/corner-directive';
import { HoverDirective } from '../../directive/hover-element-directive';
import { OverlayDirective } from '../../directive/overlay-directive';
import { SimpoComponentModule } from './../../components/index';
import BaseSection from '../BaseSection';
import { ContentTitleDirective } from '../../directive/content-title-spacing.directive';
import { TextEditorComponent } from '../../elements/text-editor/text-editor.component';
import { SpacingAroundDirective } from '../../directive/spacing-around.directive';
import { MatIcon } from '@angular/material/icon';
import { SpacingDirective } from '../../directive/spacing.directive';
import * as i0 from "@angular/core";
import * as i1 from "./../../services/events.service";
import * as i2 from "../../elements/svg-divider/svg-divider.component";
import * as i3 from "@angular/common";
import * as i4 from "../../components/hover-elements/hover-elements.component";
import * as i5 from "../../components/delete-hover-element/delete-hover-element.component";
export class VideoCarouselSectionComponent extends BaseSection {
    constructor(_eventService) {
        super();
        this._eventService = _eventService;
        this.activeIndex = 0;
        this.primaryVideoUrl = '';
        this.secondaryVideoUrl = '';
        this.isPrimaryActive = true;
        this.screenWidth = 475;
        this.getScreenSize();
    }
    ngOnInit() {
        this.content = this.data?.content;
        this.style = this.data?.styles;
        this.deleteSelected = this.delete;
        if (this.content?.listItem?.data?.length) {
            this.primaryVideoUrl = this.content.listItem.data[0].video.url;
        }
    }
    getScreenSize(event) {
        if (typeof window !== 'undefined') {
            this.screenWidth = window.innerWidth;
        }
    }
    get stylesLayout() {
        return { ...this.style?.layout };
    }
    get spacingLayout() {
        return { ...this.style?.layout?.spacing };
    }
    setVideo(index) {
        if (this.activeIndex === index)
            return;
        const newUrl = this.content?.listItem?.data[index]?.video?.url || '';
        if (this.isPrimaryActive) {
            this.secondaryVideoUrl = newUrl;
            this.isPrimaryActive = false;
        }
        else {
            this.primaryVideoUrl = newUrl;
            this.isPrimaryActive = true;
        }
        this.activeIndex = index;
    }
    get activeVideo() {
        return this.content?.listItem?.data[this.activeIndex]?.video;
    }
    get headingSpace() {
        return this.style?.layout.headingSpacing;
    }
    editSection() {
        if (window.innerWidth <= 475)
            return;
        this._eventService.toggleEditorEvent.emit(false);
        setTimeout(() => {
            this._eventService.editSection.emit({ data: this.data });
        }, 100);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: VideoCarouselSectionComponent, deps: [{ token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: VideoCarouselSectionComponent, isStandalone: true, selector: "simpo-video-carousel-section", inputs: { data: "data", index: "index", customClass: "customClass", nextComponentColor: "nextComponentColor", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\r\n  [attr.style]=\"customClass\">\r\n  <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\">\r\n    <div [simpoCorner]=\"style?.corners\"\r\n      [ngClass]=\"{ 'video-screen': style?.layout?.fit === 'screen' }\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\">\r\n\r\n      <div class=\"d-flex mlr-0 w-100 position-relative\" *ngIf=\"data?.content?.inputText?.length\" [id]=\"data?.id\"\r\n        [simpoAnimation]=\"style?.animation\">\r\n\r\n        <!-- Main Video Stage -->\r\n        <div class=\"stage-container w-100 p-0\" [simpoCorner]=\"style?.corners\">\r\n          <video *ngIf=\"primaryVideoUrl\" [src]=\"primaryVideoUrl\" autoplay muted loop playsinline class=\"stage-video\"\r\n            [class.active]=\"isPrimaryActive\"\r\n            [ngClass]=\"{'vh-80': style?.layout?.fit === 'screen', 'vh-50': style?.layout?.fit === 'content'}\">\r\n          </video>\r\n          <video *ngIf=\"secondaryVideoUrl\" [src]=\"secondaryVideoUrl\" autoplay muted loop playsinline class=\"stage-video\"\r\n            [class.active]=\"!isPrimaryActive\"\r\n            [ngClass]=\"{'vh-80': style?.layout?.fit === 'screen', 'vh-50': style?.layout?.fit === 'content'}\">\r\n          </video>\r\n          <div class=\"stage-overlay\"></div>\r\n\r\n          <!-- Booth Selection Overlay -->\r\n          <div class=\"booth-selector d-flex flex-column justify-content-center align-items-end\">\r\n            <div class=\"booth-header d-flex align-items-center mb-2\">\r\n              <span class=\"live-dot\" [style.--accent-color]=\"style?.background?.accentColor\"\r\n                [style.backgroundColor]=\"'var(--accent-color)'\"></span>\r\n              <span class=\"live-text\">\r\n                <simpo-text-editor *ngIf=\"data?.content?.inputText?.[1] as liveText\" [(value)]=\"liveText.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"1\" [isRTE]=\"liveText.isRTE\"></simpo-text-editor>\r\n                <ng-container *ngIf=\"!data?.content?.inputText?.[1]\">LIVE BOOTHS</ng-container>\r\n              </span>\r\n            </div>\r\n            <div class=\"booth-thumbnails d-flex\">\r\n              <div *ngFor=\"let item of content?.listItem?.data; let i = index\" class=\"booth-item\"\r\n                [class.active]=\"i === activeIndex\" (click)=\"setVideo(i)\">\r\n                <div class=\"booth-thumb-wrapper\"\r\n                  [style.borderColor]=\"i === activeIndex ? style?.background?.accentColor : 'transparent'\"\r\n                  [style.boxShadow]=\"i === activeIndex ? '0 0 15px ' + style?.background?.accentColor + '4d' : 'none'\">\r\n                  <video [src]=\"item.video.url\" muted loop playsinline class=\"thumb-video\"></video>\r\n                  <div class=\"active-indicator\" *ngIf=\"i === activeIndex\">\r\n                    <span class=\"dot\" [style.backgroundColor]=\"style?.background?.accentColor\"></span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"booth-label\">{{item.video.description || 'BOOTH ' + (i + 1)}}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Optional Text Overlay -->\r\n        <div class=\"text-overlay\" *ngIf=\"edit || data?.content?.inputText?.[0]?.value\">\r\n          <simpo-text-editor *ngIf=\"data?.content?.inputText?.[0] as mainText\" [(value)]=\"mainText.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [isRTE]=\"mainText.isRTE\"></simpo-text-editor>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Svg Divider -->\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n\r\n  <!-- Editor Hover Elements -->\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>", styles: [".total-container{position:relative}.stage-container{position:relative;width:100%;overflow:hidden}.stage-video{width:100%;object-fit:cover;display:block;position:absolute;top:0;left:0;opacity:0;transition:opacity .8s ease-in-out;pointer-events:none}.stage-video.active{opacity:1;position:relative;pointer-events:auto}.vh-80{height:80vh}.vh-50{height:50vh}.stage-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(0deg,rgba(0,0,0,.4) 0%,transparent 30%,transparent 100%);pointer-events:none}.booth-selector{position:absolute;bottom:1.5rem;right:1.5rem;z-index:10;max-width:90%}.booth-header{background:#121212d9;padding:6px 14px;border-radius:50px;width:fit-content;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);margin-bottom:.75rem!important;margin:0 10px}.live-dot{width:10px;height:10px;background-color:var(--accent-color, #ff3b30);border-radius:50%;display:inline-block;margin-right:10px;box-shadow:0 0 10px var(--accent-color, rgba(255, 59, 48, .6));animation:pulse-red 2s infinite}@keyframes pulse-red{0%{transform:scale(.95);box-shadow:0 0 0 0 var(--accent-color, rgba(255, 59, 48, .7))}70%{transform:scale(1);box-shadow:0 0 0 10px #0000}to{transform:scale(.95);box-shadow:0 0 #0000}}.live-text{color:#fff;font-size:.65rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}.booth-thumbnails{gap:10px;overflow-x:auto;padding:5px 10px;scrollbar-width:none}.booth-thumbnails::-webkit-scrollbar{display:none}.booth-item{cursor:pointer;flex:0 0 auto;width:110px;transition:all .3s cubic-bezier(.23,1,.32,1)}.booth-item:hover{transform:scale(1.05)}.booth-thumb-wrapper{position:relative;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:2px solid rgba(255,255,255,.1);background:#1a1a1a;transition:border-color .3s ease}.booth-item.active .booth-thumb-wrapper{border:2.5px solid #ff3b30;box-shadow:0 8px 24px #ff3b3066}.thumb-video{width:100%;height:100%;object-fit:cover}.active-indicator{position:absolute;top:8px;left:8px;background:#ff3b30e6;width:6px;height:6px;border-radius:50%;box-shadow:0 0 6px #ff3b30}.booth-label{color:#f0f0f0;font-size:.6rem;margin-top:8px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;text-align:left;opacity:.8}.booth-item.active .booth-label{opacity:1;color:#fff}.text-overlay{position:absolute;top:2rem;left:2rem;z-index:10;color:#fff;text-shadow:0 4px 12px rgba(0,0,0,.8)}@media (max-width: 768px){.booth-selector{bottom:1rem;right:1rem;left:1rem;max-width:none;overflow-y:scroll;align-items:start!important}.booth-thumbnails{width:100%!important}.booth-item{width:110px}.vh-80{height:45vh}.vh-50{height:35vh}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: i2.SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i4.HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: i5.DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: 
                //directives
                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: VideoCarouselSectionComponent, decorators: [{
            type: Component,
            args: [{ selector: 'simpo-video-carousel-section', standalone: true, imports: [
                        MatIcon,
                        SimpoElementsModule,
                        CommonModule,
                        SimpoComponentModule,
                        TextEditorComponent,
                        //directives
                        AnimationDirective,
                        BackgroundDirective,
                        BorderDirective,
                        ContentFitDirective,
                        CornerDirective,
                        HoverDirective,
                        OverlayDirective,
                        ContentTitleDirective,
                        SpacingAroundDirective,
                        SpacingDirective,
                    ], template: "<section class=\"container-fluid\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\r\n  [attr.style]=\"customClass\">\r\n  <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\">\r\n    <div [simpoCorner]=\"style?.corners\"\r\n      [ngClass]=\"{ 'video-screen': style?.layout?.fit === 'screen' }\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\">\r\n\r\n      <div class=\"d-flex mlr-0 w-100 position-relative\" *ngIf=\"data?.content?.inputText?.length\" [id]=\"data?.id\"\r\n        [simpoAnimation]=\"style?.animation\">\r\n\r\n        <!-- Main Video Stage -->\r\n        <div class=\"stage-container w-100 p-0\" [simpoCorner]=\"style?.corners\">\r\n          <video *ngIf=\"primaryVideoUrl\" [src]=\"primaryVideoUrl\" autoplay muted loop playsinline class=\"stage-video\"\r\n            [class.active]=\"isPrimaryActive\"\r\n            [ngClass]=\"{'vh-80': style?.layout?.fit === 'screen', 'vh-50': style?.layout?.fit === 'content'}\">\r\n          </video>\r\n          <video *ngIf=\"secondaryVideoUrl\" [src]=\"secondaryVideoUrl\" autoplay muted loop playsinline class=\"stage-video\"\r\n            [class.active]=\"!isPrimaryActive\"\r\n            [ngClass]=\"{'vh-80': style?.layout?.fit === 'screen', 'vh-50': style?.layout?.fit === 'content'}\">\r\n          </video>\r\n          <div class=\"stage-overlay\"></div>\r\n\r\n          <!-- Booth Selection Overlay -->\r\n          <div class=\"booth-selector d-flex flex-column justify-content-center align-items-end\">\r\n            <div class=\"booth-header d-flex align-items-center mb-2\">\r\n              <span class=\"live-dot\" [style.--accent-color]=\"style?.background?.accentColor\"\r\n                [style.backgroundColor]=\"'var(--accent-color)'\"></span>\r\n              <span class=\"live-text\">\r\n                <simpo-text-editor *ngIf=\"data?.content?.inputText?.[1] as liveText\" [(value)]=\"liveText.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"1\" [isRTE]=\"liveText.isRTE\"></simpo-text-editor>\r\n                <ng-container *ngIf=\"!data?.content?.inputText?.[1]\">LIVE BOOTHS</ng-container>\r\n              </span>\r\n            </div>\r\n            <div class=\"booth-thumbnails d-flex\">\r\n              <div *ngFor=\"let item of content?.listItem?.data; let i = index\" class=\"booth-item\"\r\n                [class.active]=\"i === activeIndex\" (click)=\"setVideo(i)\">\r\n                <div class=\"booth-thumb-wrapper\"\r\n                  [style.borderColor]=\"i === activeIndex ? style?.background?.accentColor : 'transparent'\"\r\n                  [style.boxShadow]=\"i === activeIndex ? '0 0 15px ' + style?.background?.accentColor + '4d' : 'none'\">\r\n                  <video [src]=\"item.video.url\" muted loop playsinline class=\"thumb-video\"></video>\r\n                  <div class=\"active-indicator\" *ngIf=\"i === activeIndex\">\r\n                    <span class=\"dot\" [style.backgroundColor]=\"style?.background?.accentColor\"></span>\r\n                  </div>\r\n                </div>\r\n                <div class=\"booth-label\">{{item.video.description || 'BOOTH ' + (i + 1)}}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Optional Text Overlay -->\r\n        <div class=\"text-overlay\" *ngIf=\"edit || data?.content?.inputText?.[0]?.value\">\r\n          <simpo-text-editor *ngIf=\"data?.content?.inputText?.[0] as mainText\" [(value)]=\"mainText.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [isRTE]=\"mainText.isRTE\"></simpo-text-editor>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Svg Divider -->\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n\r\n  <!-- Editor Hover Elements -->\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>", styles: [".total-container{position:relative}.stage-container{position:relative;width:100%;overflow:hidden}.stage-video{width:100%;object-fit:cover;display:block;position:absolute;top:0;left:0;opacity:0;transition:opacity .8s ease-in-out;pointer-events:none}.stage-video.active{opacity:1;position:relative;pointer-events:auto}.vh-80{height:80vh}.vh-50{height:50vh}.stage-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(0deg,rgba(0,0,0,.4) 0%,transparent 30%,transparent 100%);pointer-events:none}.booth-selector{position:absolute;bottom:1.5rem;right:1.5rem;z-index:10;max-width:90%}.booth-header{background:#121212d9;padding:6px 14px;border-radius:50px;width:fit-content;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);margin-bottom:.75rem!important;margin:0 10px}.live-dot{width:10px;height:10px;background-color:var(--accent-color, #ff3b30);border-radius:50%;display:inline-block;margin-right:10px;box-shadow:0 0 10px var(--accent-color, rgba(255, 59, 48, .6));animation:pulse-red 2s infinite}@keyframes pulse-red{0%{transform:scale(.95);box-shadow:0 0 0 0 var(--accent-color, rgba(255, 59, 48, .7))}70%{transform:scale(1);box-shadow:0 0 0 10px #0000}to{transform:scale(.95);box-shadow:0 0 #0000}}.live-text{color:#fff;font-size:.65rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}.booth-thumbnails{gap:10px;overflow-x:auto;padding:5px 10px;scrollbar-width:none}.booth-thumbnails::-webkit-scrollbar{display:none}.booth-item{cursor:pointer;flex:0 0 auto;width:110px;transition:all .3s cubic-bezier(.23,1,.32,1)}.booth-item:hover{transform:scale(1.05)}.booth-thumb-wrapper{position:relative;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:2px solid rgba(255,255,255,.1);background:#1a1a1a;transition:border-color .3s ease}.booth-item.active .booth-thumb-wrapper{border:2.5px solid #ff3b30;box-shadow:0 8px 24px #ff3b3066}.thumb-video{width:100%;height:100%;object-fit:cover}.active-indicator{position:absolute;top:8px;left:8px;background:#ff3b30e6;width:6px;height:6px;border-radius:50%;box-shadow:0 0 6px #ff3b30}.booth-label{color:#f0f0f0;font-size:.6rem;margin-top:8px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;text-align:left;opacity:.8}.booth-item.active .booth-label{opacity:1;color:#fff}.text-overlay{position:absolute;top:2rem;left:2rem;z-index:10;color:#fff;text-shadow:0 4px 12px rgba(0,0,0,.8)}@media (max-width: 768px){.booth-selector{bottom:1rem;right:1rem;left:1rem;max-width:none;overflow-y:scroll;align-items:start!important}.booth-thumbnails{width:100%!important}.booth-item{width:110px}.vh-80{height:45vh}.vh-50{height:35vh}}\n"] }]
        }], ctorParameters: () => [{ type: i1.EventsService }], propDecorators: { data: [{
                type: Input
            }], index: [{
                type: Input
            }], customClass: [{
                type: Input
            }], nextComponentColor: [{
                type: Input
            }], edit: [{
                type: Input
            }], delete: [{
                type: Input
            }], getScreenSize: [{
                type: HostListener,
                args: ['window:resize', ['$event']]
            }] } });
//# sourceMappingURL=data:application/json;base64, 