import { CommonModule } from '@angular/common';
import { Component, Input } from '@angular/core';
import { CornerDirective } from './../../directive/corner-directive';
import { ImageDirectiveDirective } from './../../directive/image-directive.directive';
import { TextBackgroundDirectiveDirective } from './../../directive/text-background-directive.directive';
import { SimpoButtonComponent } from '../simpo-button/simpo-button.component';
import { TextEditorComponent } from '../text-editor/text-editor.component';
import { HoverAnimationDirective } from '../../directive/hover-animation.directive';
import { ObjectPositionDirective } from '../../directive/image-position.directive';
import * as i0 from "@angular/core";
import * as i1 from "../../services/events.service";
import * as i2 from "@angular/common";
export class TopOfImageCardComponent {
    constructor(_eventService) {
        this._eventService = _eventService;
    }
    ngOnInit() {
    }
    getContentAnimation() {
        return { contentAnimation: this.styles?.contentAnimation };
    }
    redirectTo() {
        this._eventService.buttonRedirection.emit({ data: this.data.button });
    }
    getButtonAlignmentClass() {
        switch (this.styles?.layout?.align) {
            case 'left':
                return 'button-left';
            case 'right':
                return 'button-right';
            case 'center':
                return 'button-center';
            default:
                return 'button-left';
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TopOfImageCardComponent, deps: [{ token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TopOfImageCardComponent, isStandalone: true, selector: "simpo-top-of-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button", edit: "edit", itemIndex: "itemIndex" }, ngImport: i0, template: "<!-- <div style=\"position: relative;\">\r\n\r\n  <img loading=\"lazy\"  [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\r\n    [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.showImage\">\r\n\r\n  <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\r\n    <div style=\"color: white;\" class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\"\r\n      *ngIf=\"content.showHeading\"></div>\r\n    <div style=\"color: white;\" class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.showContent\">\r\n    </div>\r\n    <app-button-element [buttonData]=\"data?.button\" [sectionId]=\"componentId\" [buttonStyle]=\"styles?.button\" [color]=\"styles?.background?.accentColor\"></app-button-element>\r\n  </div>\r\n</div>\r\n -->\r\n<div class=\"top-container\"  (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\r\n  [ngStyle]=\"{'background-image' : content.display.showImage ? 'url('+data.image.url+')' : ''}\"\r\n  [simpoCorner]=\"styles?.corners\" [id]=\"componentId\">\r\n  <div class=\"popular-tag\" [simpoCorner]=\"styles?.corners\"\r\n    [ngStyle]=\"{'background-color': styles?.background?.accentColor}\" \r\n    *ngIf=\"data?.highlight?.highlighted === true\">\r\n    <simpo-text-editor [(value)]=\"data.highlight.label\" [editable]=\"edit || false\" [sectionId]=\"componentId\" [itemIndex]=\"itemIndex\"></simpo-text-editor>\r\n  </div>\r\n  <div [simpoImageDirective]=\"styles?.image\" [id]=\"componentId\" *ngIf=\"content.display.showImage\" \r\n    [simpoObjectPosition]=\"data?.image?.position\"></div>\r\n  <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\"\r\n    [simpoTextBackgroundDirective]=\"content.display.showImage ? styles?.textBackground : ''\">\r\n    <div class=\"heading-medium mb-1 lh-40\"  *ngIf=\"content.display.showHeading\">\r\n      <simpo-text-editor [(value)]=\"data.inputText[0].value \" [editable]=\"edit || false\" [sectionId]=\"componentId\" [inputTextIndex]=\"0\" [itemIndex]=\"itemIndex\" [isRTE]=\"data.inputText[0]?.isRTE\"></simpo-text-editor>\r\n\r\n    </div>\r\n    <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\r\n      <simpo-text-editor [(value)]=\"data.inputText[1].value \" [editable]=\"edit || false\" [sectionId]=\"componentId\" [inputTextIndex]=\"1\" [itemIndex]=\"itemIndex\" [isRTE]=\"data.inputText[1]?.isRTE\"></simpo-text-editor>\r\n    </div>\r\n    <div class=\"button-wrapper w-100\" [ngClass]=\"getButtonAlignmentClass()\">\r\n      <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\"\r\n        [simpoHoverAnimation]=\"getContentAnimation()\" class=\"button-inner\">\r\n        <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\"\r\n          [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\"\r\n          [backgroundInfo]=\"styles?.background\" [edit]=\"edit\">\r\n        </app-button-element>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{padding:0 15px 16px;padding-top:1rem;display:flex;flex-direction:column;height:100%}.top-container{background-position:center center;background-size:cover;height:100%;position:relative;display:flex;flex-direction:column}.button-wrapper{margin-top:auto;padding-top:12px;display:flex;width:100%}.button-inner{width:max-content}.popular-tag{position:absolute;top:-1px;right:-2px;padding:1px 20px 3px;border-top-left-radius:0!important;border-bottom-right-radius:0!important}.lh-40{line-height:40px}.body-desc{margin-bottom:10px}.justify-items-start{align-items:flex-start;text-align:left}.justify-items-end{align-items:flex-end;text-align:right}.justify-items-center{align-items:center;text-align:center}.button-left{justify-content:flex-start}.button-center{justify-content:center}.button-right{justify-content:flex-end}@media screen and (max-width: 475px){.box-shadow{box-shadow:unset!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: TextBackgroundDirectiveDirective, selector: "[simpoTextBackgroundDirective]", inputs: ["simpoTextBackgroundDirective"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "directive", type: HoverAnimationDirective, selector: "[simpoHoverAnimation]", inputs: ["simpoHoverAnimation"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TopOfImageCardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'simpo-top-of-image-card', standalone: true, imports: [
                        CommonModule,
                        ImageDirectiveDirective,
                        CornerDirective,
                        TextBackgroundDirectiveDirective,
                        TextEditorComponent,
                        SimpoButtonComponent,
                        HoverAnimationDirective,
                        ObjectPositionDirective
                    ], template: "<!-- <div style=\"position: relative;\">\r\n\r\n  <img loading=\"lazy\"  [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\r\n    [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.showImage\">\r\n\r\n  <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\r\n    <div style=\"color: white;\" class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\"\r\n      *ngIf=\"content.showHeading\"></div>\r\n    <div style=\"color: white;\" class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.showContent\">\r\n    </div>\r\n    <app-button-element [buttonData]=\"data?.button\" [sectionId]=\"componentId\" [buttonStyle]=\"styles?.button\" [color]=\"styles?.background?.accentColor\"></app-button-element>\r\n  </div>\r\n</div>\r\n -->\r\n<div class=\"top-container\"  (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\r\n  [ngStyle]=\"{'background-image' : content.display.showImage ? 'url('+data.image.url+')' : ''}\"\r\n  [simpoCorner]=\"styles?.corners\" [id]=\"componentId\">\r\n  <div class=\"popular-tag\" [simpoCorner]=\"styles?.corners\"\r\n    [ngStyle]=\"{'background-color': styles?.background?.accentColor}\" \r\n    *ngIf=\"data?.highlight?.highlighted === true\">\r\n    <simpo-text-editor [(value)]=\"data.highlight.label\" [editable]=\"edit || false\" [sectionId]=\"componentId\" [itemIndex]=\"itemIndex\"></simpo-text-editor>\r\n  </div>\r\n  <div [simpoImageDirective]=\"styles?.image\" [id]=\"componentId\" *ngIf=\"content.display.showImage\" \r\n    [simpoObjectPosition]=\"data?.image?.position\"></div>\r\n  <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\"\r\n    [simpoTextBackgroundDirective]=\"content.display.showImage ? styles?.textBackground : ''\">\r\n    <div class=\"heading-medium mb-1 lh-40\"  *ngIf=\"content.display.showHeading\">\r\n      <simpo-text-editor [(value)]=\"data.inputText[0].value \" [editable]=\"edit || false\" [sectionId]=\"componentId\" [inputTextIndex]=\"0\" [itemIndex]=\"itemIndex\" [isRTE]=\"data.inputText[0]?.isRTE\"></simpo-text-editor>\r\n\r\n    </div>\r\n    <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\r\n      <simpo-text-editor [(value)]=\"data.inputText[1].value \" [editable]=\"edit || false\" [sectionId]=\"componentId\" [inputTextIndex]=\"1\" [itemIndex]=\"itemIndex\" [isRTE]=\"data.inputText[1]?.isRTE\"></simpo-text-editor>\r\n    </div>\r\n    <div class=\"button-wrapper w-100\" [ngClass]=\"getButtonAlignmentClass()\">\r\n      <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\"\r\n        [simpoHoverAnimation]=\"getContentAnimation()\" class=\"button-inner\">\r\n        <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\"\r\n          [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\"\r\n          [backgroundInfo]=\"styles?.background\" [edit]=\"edit\">\r\n        </app-button-element>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{padding:0 15px 16px;padding-top:1rem;display:flex;flex-direction:column;height:100%}.top-container{background-position:center center;background-size:cover;height:100%;position:relative;display:flex;flex-direction:column}.button-wrapper{margin-top:auto;padding-top:12px;display:flex;width:100%}.button-inner{width:max-content}.popular-tag{position:absolute;top:-1px;right:-2px;padding:1px 20px 3px;border-top-left-radius:0!important;border-bottom-right-radius:0!important}.lh-40{line-height:40px}.body-desc{margin-bottom:10px}.justify-items-start{align-items:flex-start;text-align:left}.justify-items-end{align-items:flex-end;text-align:right}.justify-items-center{align-items:center;text-align:center}.button-left{justify-content:flex-start}.button-center{justify-content:center}.button-right{justify-content:flex-end}@media screen and (max-width: 475px){.box-shadow{box-shadow:unset!important}}\n"] }]
        }], ctorParameters: () => [{ type: i1.EventsService }], propDecorators: { data: [{
                type: Input
            }], styles: [{
                type: Input
            }], content: [{
                type: Input
            }], componentId: [{
                type: Input
            }], button: [{
                type: Input
            }], edit: [{
                type: Input
            }], itemIndex: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 