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 { SimpoButtonComponent } from '../simpo-button/simpo-button.component';
import { ObjectPositionDirective } from '../../directive/image-position.directive';
import { TextEditorComponent } from '../text-editor/text-editor.component';
import { ImageEditorDirective } from '../../directive/image-editor.directive';
import { HoverAnimationDirective } from '../../directive/hover-animation.directive';
import { TranslateOnhoverDirective } from '../../directive/translate-onhover.directive';
import { SetDynamicBackgroundDirective } from '../../directive/set-dynamic-background.directive';
import { IconDirectiveDirective } from '../../directive/icon-directive.directive';
import { GradientDirection } from '../../styles';
import { CdkDragPlaceholder } from "@angular/cdk/drag-drop";
import * as i0 from "@angular/core";
import * as i1 from "../../services/events.service";
import * as i2 from "@angular/common";
export class BelowImageCardComponent {
    constructor(_eventService) {
        this._eventService = _eventService;
        this.allContents = [];
        this.currentIndex = 0;
        this.counter = 0;
    }
    static { this.counter = 0; }
    ngOnInit() {
        this.currentIndex = this.getNextIndex();
    }
    getNextIndex() {
        BelowImageCardComponent.counter++;
        return BelowImageCardComponent.counter;
    }
    getGlassyBackground(color) {
        return `rgba(${this.hexToRgb(color)}, 0.1)`;
    }
    hexToRgb(hex) {
        const bigint = parseInt(hex.slice(1), 16);
        const r = (bigint >> 16) & 255;
        const g = (bigint >> 8) & 255;
        const b = bigint & 255;
        return `${r}, ${g}, ${b}`;
    }
    redirectTo() {
        this._eventService.buttonRedirection.emit({ data: this.data.button });
    }
    get getAspectRatio() {
        return { ...this.styles.image };
    }
    getContentAnimation() {
        return { contentAnimation: this.styles?.contentAnimation };
    }
    get getIconStyls() {
        return this.data?.icon;
    }
    ngOnChanges() {
        // console.log('Below Image Card Data', this.data);
    }
    getAlignment() {
        switch (this.styles?.layout?.align) {
            case 'left':
                return 'justify-items-start';
            case 'right':
                return 'justify-items-end';
            case 'center':
                return 'justify-items-center';
            default:
                return 'justify-items-start';
        }
    }
    getBackground() {
        if (this.content.display.showCard) {
            if (this.data?.background?.backgroundType === 'Gradient') {
                const direction = GradientDirection[this.data?.background?.backgroundGradientDirection || GradientDirection.DOWN];
                return `linear-gradient(${direction}, ${this.data?.background?.color}, ${this.data?.background?.secondaryColor})`;
            }
            else {
                return this.data?.background?.color;
            }
        }
    }
    get getIconBackground() {
        if (this.data?.icon?.backgroundType === 'Gradient') {
            const direction = GradientDirection[this.data?.icon?.backgroundGradientDirection || GradientDirection.DOWN];
            return `linear-gradient(${direction}, ${this.data?.icon?.backgroundColor}, ${this.data?.icon?.secondaryColor})`;
        }
        else {
            return this.data?.icon?.backgroundColor;
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BelowImageCardComponent, deps: [{ token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BelowImageCardComponent, isStandalone: true, selector: "simpo-below-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button", edit: "edit", positionLayout: "positionLayout", itemIndex: "itemIndex" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"card-container\"\r\n  (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\r\n  [ngClass]=\"{'box-shadow' : content.display.showCard, 'px-0 py-0': styles?.borderLessImage && !content?.display?.showIcon ,'py-14' : content?.display?.showCardBackground && !styles?.borderLessImage}\"\r\n  [style.background]=\"getBackground()\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n  [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" [backgroundColor]=\"styles?.background?.color\"\r\n  [simpoSetDynamicBackground]=\"content?.display?.showCardBackground\" [class]=\"getAlignment()\">\r\n\r\n  <ng-container *ngIf=\"positionLayout == 'bottom'\">\r\n    <ng-container *ngTemplateOutlet=\"headingDescription\"></ng-container>\r\n    <ng-container *ngTemplateOutlet=\"iconAndImage\"></ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"positionLayout == 'top'\">\r\n    <ng-container *ngTemplateOutlet=\"iconAndImage\"></ng-container>\r\n    <ng-container *ngTemplateOutlet=\"headingDescription\"></ng-container>\r\n  </ng-container>\r\n\r\n  <div class=\"ptb-1 w-100\">\r\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\" class=\"card-button\"\r\n      [simpoHoverAnimation]=\"getContentAnimation()\">\r\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\"\r\n        [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\" [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<ng-template #iconAndImage>\r\n  <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\r\n    [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\r\n    [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.display.showImage\"\r\n    [appImageEditor]=\"edit || false\" [imageData]=\"data.image\" [sectionId]=\"componentId\"\r\n    [simpoObjectPosition]=\"data?.image?.position\" [class]=\"data?.id+data.image.id\" [itemIndex]=\"itemIndex\">\r\n\r\n\r\n  <ng-container *ngIf=\"content.display.showIcon && (data.icon.url.includes('.png') || data.icon.url.includes('.svg'))\">\r\n    <div [simpoCorner]=\"styles?.corners\" [class.hovering-effect]=\"content?.display?.showHoverEffect\" [id]=\"componentId\"\r\n      class=\"logo-img d-flex justify-content-center align-items-center\"\r\n      [style.background]=\"data?.icon?.showBackground ? getIconBackground : 'transparent'\"\r\n      [appImageEditor]=\"edit || false\" [iconData]=\"data.icon\" [sectionId]=\"componentId\"\r\n      [showIcon]=\"content.display.showIcon\" [itemIndex]=\"itemIndex\">\r\n      <div [id]=\"componentId\" [iconId]=\"componentId + data?.icon?.id\" [simpoIconDirective]=\"data?.icon\"\r\n        class=\"w-65 h-100\" [class.w-100]=\"!data?.icon?.showBackground\">\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <img loading=\"lazy\" class=\"logo-img\" [src]=\"data.icon.url\" [appImageEditor]=\"edit || false\" [iconData]=\"data.icon\"\r\n    [sectionId]=\"componentId\" [showIcon]=\"content.display.showIcon\" [itemIndex]=\"itemIndex\"\r\n    *ngIf=\"content.display.showIcon && !data.icon.url.includes('.png') && !data.icon.url.includes('.svg')\"\r\n    class=\"logo-img\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n    [class.hovering-effect]=\"content?.display?.showHoverEffect\">\r\n</ng-template>\r\n\r\n<ng-template #headingDescription>\r\n\r\n  <div class=\"ptb-1 content-side w-100\">\r\n    <div class=\"heading-medium mb-1\" *ngIf=\"content.display.showHeading\">\r\n      <div class=\"d-flex justify-content-between align-items-start\">\r\n        <simpo-text-editor [(value)]=\"data.inputText[0].value\" [editable]=\"edit || false\" [sectionId]=\"componentId\" [inputTextIndex]=\"0\" [itemIndex]=\"itemIndex\" [isRTE]=\"data.inputText[0]?.isRTE\">\r\n        </simpo-text-editor>\r\n        <div class=\"indexing\" *ngIf=\"styles?.showIndexing\" [style.color]=\"styles?.background?.accentColor\"\r\n          [style.background]=\"getGlassyBackground(styles?.background?.accentColor)\">\r\n          0{{ currentIndex }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\r\n      <simpo-text-editor [(value)]=\"data.inputText[01].value \" [editable]=\"edit || false\" [sectionId]=\"componentId\" [inputTextIndex]=\"1\" [itemIndex]=\"itemIndex\" [isRTE]=\"data.inputText[1]?.isRTE\"></simpo-text-editor>\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [".w-100{width:100%}.card-container{display:flex;flex-direction:column;height:100%;position:relative}.card-inner{display:flex;flex-direction:column;width:100%}.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}.content-side{display:flex;flex-direction:column;flex:1;padding:14px 18px}.card-button{margin-top:auto;padding-top:12px;padding-bottom:10px}.ptb-1{padding-top:1rem}.mb-1{margin-bottom:1rem!important}.box-shadow{box-shadow:0 10px 40px #0a32231a;padding:12px 20px;color:#000!important}.logo-img{width:70px;height:70px;margin-top:.25rem;margin:0 18px}.w-65{width:65%}.justify-items-start{justify-items:flex-start}.justify-items-end{justify-items:flex-end}.justify-items-center{justify-items:center}.indexing{font-size:14px;padding:6px 8px;border-radius:50px}@media screen and (max-width: 475px){.mt-4{margin-top:unset!important}}\n"], dependencies: [{ kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }, { kind: "directive", type: HoverAnimationDirective, selector: "[simpoHoverAnimation]", inputs: ["simpoHoverAnimation"] }, { kind: "directive", type: TranslateOnhoverDirective, selector: "[simpoTranslateOnhover]", inputs: ["simpoTranslateOnhover"] }, { kind: "directive", type: SetDynamicBackgroundDirective, selector: "[simpoSetDynamicBackground]", inputs: ["backgroundColor", "simpoSetDynamicBackground"] }, { kind: "directive", type: IconDirectiveDirective, selector: "[simpoIconDirective]", inputs: ["simpoIconDirective", "iconId"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BelowImageCardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'simpo-below-image-card', standalone: true, imports: [
                        ObjectPositionDirective,
                        CommonModule,
                        ImageDirectiveDirective,
                        CornerDirective,
                        SimpoButtonComponent,
                        TextEditorComponent,
                        ImageEditorDirective,
                        HoverAnimationDirective,
                        TranslateOnhoverDirective,
                        SetDynamicBackgroundDirective,
                        IconDirectiveDirective,
                        CdkDragPlaceholder
                    ], template: "<div class=\"card-container\"\r\n  (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\r\n  [ngClass]=\"{'box-shadow' : content.display.showCard, 'px-0 py-0': styles?.borderLessImage && !content?.display?.showIcon ,'py-14' : content?.display?.showCardBackground && !styles?.borderLessImage}\"\r\n  [style.background]=\"getBackground()\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n  [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" [backgroundColor]=\"styles?.background?.color\"\r\n  [simpoSetDynamicBackground]=\"content?.display?.showCardBackground\" [class]=\"getAlignment()\">\r\n\r\n  <ng-container *ngIf=\"positionLayout == 'bottom'\">\r\n    <ng-container *ngTemplateOutlet=\"headingDescription\"></ng-container>\r\n    <ng-container *ngTemplateOutlet=\"iconAndImage\"></ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"positionLayout == 'top'\">\r\n    <ng-container *ngTemplateOutlet=\"iconAndImage\"></ng-container>\r\n    <ng-container *ngTemplateOutlet=\"headingDescription\"></ng-container>\r\n  </ng-container>\r\n\r\n  <div class=\"ptb-1 w-100\">\r\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\" class=\"card-button\"\r\n      [simpoHoverAnimation]=\"getContentAnimation()\">\r\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\"\r\n        [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\" [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<ng-template #iconAndImage>\r\n  <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\r\n    [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\r\n    [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.display.showImage\"\r\n    [appImageEditor]=\"edit || false\" [imageData]=\"data.image\" [sectionId]=\"componentId\"\r\n    [simpoObjectPosition]=\"data?.image?.position\" [class]=\"data?.id+data.image.id\" [itemIndex]=\"itemIndex\">\r\n\r\n\r\n  <ng-container *ngIf=\"content.display.showIcon && (data.icon.url.includes('.png') || data.icon.url.includes('.svg'))\">\r\n    <div [simpoCorner]=\"styles?.corners\" [class.hovering-effect]=\"content?.display?.showHoverEffect\" [id]=\"componentId\"\r\n      class=\"logo-img d-flex justify-content-center align-items-center\"\r\n      [style.background]=\"data?.icon?.showBackground ? getIconBackground : 'transparent'\"\r\n      [appImageEditor]=\"edit || false\" [iconData]=\"data.icon\" [sectionId]=\"componentId\"\r\n      [showIcon]=\"content.display.showIcon\" [itemIndex]=\"itemIndex\">\r\n      <div [id]=\"componentId\" [iconId]=\"componentId + data?.icon?.id\" [simpoIconDirective]=\"data?.icon\"\r\n        class=\"w-65 h-100\" [class.w-100]=\"!data?.icon?.showBackground\">\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <img loading=\"lazy\" class=\"logo-img\" [src]=\"data.icon.url\" [appImageEditor]=\"edit || false\" [iconData]=\"data.icon\"\r\n    [sectionId]=\"componentId\" [showIcon]=\"content.display.showIcon\" [itemIndex]=\"itemIndex\"\r\n    *ngIf=\"content.display.showIcon && !data.icon.url.includes('.png') && !data.icon.url.includes('.svg')\"\r\n    class=\"logo-img\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n    [class.hovering-effect]=\"content?.display?.showHoverEffect\">\r\n</ng-template>\r\n\r\n<ng-template #headingDescription>\r\n\r\n  <div class=\"ptb-1 content-side w-100\">\r\n    <div class=\"heading-medium mb-1\" *ngIf=\"content.display.showHeading\">\r\n      <div class=\"d-flex justify-content-between align-items-start\">\r\n        <simpo-text-editor [(value)]=\"data.inputText[0].value\" [editable]=\"edit || false\" [sectionId]=\"componentId\" [inputTextIndex]=\"0\" [itemIndex]=\"itemIndex\" [isRTE]=\"data.inputText[0]?.isRTE\">\r\n        </simpo-text-editor>\r\n        <div class=\"indexing\" *ngIf=\"styles?.showIndexing\" [style.color]=\"styles?.background?.accentColor\"\r\n          [style.background]=\"getGlassyBackground(styles?.background?.accentColor)\">\r\n          0{{ currentIndex }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\r\n      <simpo-text-editor [(value)]=\"data.inputText[01].value \" [editable]=\"edit || false\" [sectionId]=\"componentId\" [inputTextIndex]=\"1\" [itemIndex]=\"itemIndex\" [isRTE]=\"data.inputText[1]?.isRTE\"></simpo-text-editor>\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [".w-100{width:100%}.card-container{display:flex;flex-direction:column;height:100%;position:relative}.card-inner{display:flex;flex-direction:column;width:100%}.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}.content-side{display:flex;flex-direction:column;flex:1;padding:14px 18px}.card-button{margin-top:auto;padding-top:12px;padding-bottom:10px}.ptb-1{padding-top:1rem}.mb-1{margin-bottom:1rem!important}.box-shadow{box-shadow:0 10px 40px #0a32231a;padding:12px 20px;color:#000!important}.logo-img{width:70px;height:70px;margin-top:.25rem;margin:0 18px}.w-65{width:65%}.justify-items-start{justify-items:flex-start}.justify-items-end{justify-items:flex-end}.justify-items-center{justify-items:center}.indexing{font-size:14px;padding:6px 8px;border-radius:50px}@media screen and (max-width: 475px){.mt-4{margin-top: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
            }], positionLayout: [{
                type: Input
            }], itemIndex: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 