import { Component, HostListener, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SimpoContainerAligment } from '../../directive/container-alignment.directive';
import { HoverElementsComponent } from "../../components/hover-elements/hover-elements.component";
import { DeleteHoverElementComponent } from "../../components/delete-hover-element/delete-hover-element.component";
import BaseSection from '../BaseSection';
import { HoverDirective } from '../../directive/hover-element-directive';
import { AnimationDirective } from '../../directive/animation-directive';
import { BackgroundDirective } from '../../directive/background-directive';
import { SpacingAroundDirective } from '../../directive/spacing-around.directive';
import { SpacingHorizontalDirective } from '../../directive/spacing-horizontal.directive';
import { ContentFitDirective } from '../../directive/content-fit-directive';
import * as i0 from "@angular/core";
import * as i1 from "./../../services/events.service";
import * as i2 from "@angular/common";
export class UspVideoSectionComponent extends BaseSection {
    constructor(_eventService) {
        super();
        this._eventService = _eventService;
    }
    ngOnInit() {
        this.style = this.data?.styles;
    }
    get stylesLayout() {
        return { ...this.style?.layout };
    }
    editSection() {
        if (window.innerWidth <= 475)
            return;
        this._eventService.toggleEditorEvent.emit(false);
        setTimeout(() => {
            this._eventService.editSection.emit({ data: this.data });
        }, 100);
    }
    getScreenSize() {
        this.screenWidth = window.innerWidth;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UspVideoSectionComponent, deps: [{ token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UspVideoSectionComponent, isStandalone: true, selector: "simpo-usp-video-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"main-container\"  simpoHover (hovering)=\"showEditTabs($event)\">\n  <div [spacingAround]=\"stylesLayout\">\n    <div [simpoBackground]=\"style?.background\" [simpoAnimation]=\"style?.animation\" [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"style?.layout\">\n      <div class=\"header\" *ngFor=\"let ele of data?.content?.inputText\"\n        [ngClass]=\"{'text-center': data?.styles?.layout?.align == 'center'}\">\n        {{ele.value}}\n      </div>\n      <div class=\"body-container d-flex g-4 w-100\" [simpoAnimation]=\"style?.animation\">\n        <div class=\"left w-40\"\n          [ngClass]=\"{'w-100':!data?.content?.videoLink?.display , 'center-alignment': (data?.styles?.layout?.align == 'center' && screenWidth > 475) }\">\n          <ng-container *ngFor=\"let ele of data?.content?.listItem?.data; let i = index\">\n            <div class=\"card-container w-100\" [class.active-border]=\"i == 1\">\n              <p class=\"head-text\" [class.active-text]=\"i == 1\">{{ele.inputText[0].value}}</p>\n              <p class=\"sub-text\" [class.active-text]=\"i == 1\">{{ele.inputText[1].value}}</p>\n            </div>\n          </ng-container>\n        </div>\n        <div class=\"right w-60 d-flex justify-content-end align-items-center\" *ngIf=\"data?.content?.videoLink?.display\">\n          <div class=\"video-section\">\n            <video controls class=\"w-100 br-20 h-50\">\n              <source [src]=\"data?.content?.videoLink?.url\">\n            </video>\n          </div>\n        </div>\n      </div>\n\n    </div>\n  </div>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</div>\n", styles: [".main-container{position:relative}.header{font-weight:600;font-size:32px;line-height:56px;color:#555}.head-text{font-size:24px;line-height:56px;color:#1e1e1e;font-weight:700}.sub-text{font-size:16px;font-weight:400;line-height:24px;color:#6b6b6b}.w-40{width:40%}.w-60{width:60%}.active-text{color:#f8a938!important}.active-border{border-left:10px solid rgba(248,169,56,1);border-radius:10px;padding-left:10px}.br-20{border-radius:20px}.h-50{height:50vh}.body-container{text-align:left}@media only screen and (max-width: 475px){.header{font-size:22px;line-height:35px;margin-bottom:10px}.body-container{flex-direction:column-reverse}.left,.right{width:100%!important}.head-text{margin-bottom:0}}.center-alignment{width:75%!important;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0 auto}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UspVideoSectionComponent, decorators: [{
            type: Component,
            args: [{ selector: 'simpo-usp-video-section', standalone: true, imports: [
                        CommonModule,
                        SimpoContainerAligment,
                        HoverElementsComponent,
                        DeleteHoverElementComponent,
                        HoverDirective,
                        AnimationDirective,
                        BackgroundDirective,
                        SpacingAroundDirective,
                        SpacingHorizontalDirective,
                        ContentFitDirective
                    ], template: "<div class=\"main-container\"  simpoHover (hovering)=\"showEditTabs($event)\">\n  <div [spacingAround]=\"stylesLayout\">\n    <div [simpoBackground]=\"style?.background\" [simpoAnimation]=\"style?.animation\" [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"style?.layout\">\n      <div class=\"header\" *ngFor=\"let ele of data?.content?.inputText\"\n        [ngClass]=\"{'text-center': data?.styles?.layout?.align == 'center'}\">\n        {{ele.value}}\n      </div>\n      <div class=\"body-container d-flex g-4 w-100\" [simpoAnimation]=\"style?.animation\">\n        <div class=\"left w-40\"\n          [ngClass]=\"{'w-100':!data?.content?.videoLink?.display , 'center-alignment': (data?.styles?.layout?.align == 'center' && screenWidth > 475) }\">\n          <ng-container *ngFor=\"let ele of data?.content?.listItem?.data; let i = index\">\n            <div class=\"card-container w-100\" [class.active-border]=\"i == 1\">\n              <p class=\"head-text\" [class.active-text]=\"i == 1\">{{ele.inputText[0].value}}</p>\n              <p class=\"sub-text\" [class.active-text]=\"i == 1\">{{ele.inputText[1].value}}</p>\n            </div>\n          </ng-container>\n        </div>\n        <div class=\"right w-60 d-flex justify-content-end align-items-center\" *ngIf=\"data?.content?.videoLink?.display\">\n          <div class=\"video-section\">\n            <video controls class=\"w-100 br-20 h-50\">\n              <source [src]=\"data?.content?.videoLink?.url\">\n            </video>\n          </div>\n        </div>\n      </div>\n\n    </div>\n  </div>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</div>\n", styles: [".main-container{position:relative}.header{font-weight:600;font-size:32px;line-height:56px;color:#555}.head-text{font-size:24px;line-height:56px;color:#1e1e1e;font-weight:700}.sub-text{font-size:16px;font-weight:400;line-height:24px;color:#6b6b6b}.w-40{width:40%}.w-60{width:60%}.active-text{color:#f8a938!important}.active-border{border-left:10px solid rgba(248,169,56,1);border-radius:10px;padding-left:10px}.br-20{border-radius:20px}.h-50{height:50vh}.body-container{text-align:left}@media only screen and (max-width: 475px){.header{font-size:22px;line-height:35px;margin-bottom:10px}.body-container{flex-direction:column-reverse}.left,.right{width:100%!important}.head-text{margin-bottom:0}}.center-alignment{width:75%!important;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0 auto}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"] }]
        }], ctorParameters: () => [{ type: i1.EventsService }], propDecorators: { data: [{
                type: Input
            }], index: [{
                type: Input
            }], edit: [{
                type: Input
            }], delete: [{
                type: Input
            }], getScreenSize: [{
                type: HostListener,
                args: ["window: resize", ["$event"]]
            }] } });
//# sourceMappingURL=data:application/json;base64, 