import { Component, Input } from '@angular/core';
import BaseSection from '../../sections/BaseSection';
import { TextEditorComponent } from '../text-editor/text-editor.component';
import { ButtonDirectiveDirective } from '../../directive/button-directive.directive';
import { ColorDirective } from '../../directive/color.directive';
import { CornerDirective } from '../../directive/corner-directive';
import { CommonModule } from '@angular/common';
import { ImageDirectiveDirective } from '../../directive/image-directive.directive';
import { ObjectPositionDirective } from '../../directive/image-position.directive';
import { ImageEditorDirective } from '../../directive/image-editor.directive';
import { SimpoButtonComponent } from '../simpo-button/simpo-button.component';
import { ButtonEditorDirective } from '../../directive/button-editor.directive';
import { TranslateOnhoverDirective } from '../../directive/translate-onhover.directive';
import * as i0 from "@angular/core";
import * as i1 from "../../services/events.service";
import * as i2 from "@angular/common";
export class PricingS1Component extends BaseSection {
    constructor(_eventService) {
        super();
        this._eventService = _eventService;
    }
    ngOnInit() {
        this.content = this.data?.content;
        this.style = this.data?.styles;
        this.button = this.data?.action.buttons[0];
    }
    editSection() {
        if (window.innerWidth <= 475)
            return;
        this._eventService.toggleEditorEvent.emit(false);
        setTimeout(() => {
            this._eventService.editSection.emit({ data: this.data });
        }, 100);
    }
    getButtonId() {
        return this.button?.id ?? "";
    }
    redirectTo(data) {
        if (!data?.pageId && !data?.redirectionUrl)
            return;
        this._eventService.buttonRedirection.emit({ data: data });
    }
    getClass() {
        if (window.innerWidth <= 475) {
            return 'col-12';
        }
        if (this.content?.listItem?.data?.length === 1) {
            return 'col-12';
        }
        else if (this.content?.listItem?.data?.length === 2) {
            return 'col-5';
        }
        else if (this.content?.listItem?.data?.length === 3) {
            return 'col-4';
        }
        else {
            return 'col-4';
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PricingS1Component, deps: [{ token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PricingS1Component, isStandalone: true, selector: "simpo-pricing-s1", inputs: { data: "data", edit: "edit" }, usesInheritance: true, ngImport: i0, template: "<section class=\"d-flex justify-content-center\">\r\n  <div class=\"pricing-options row w-100\">\r\n    <div\r\n       [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n      [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" *ngFor=\"let options of content?.listItem?.data; let i = index\"\r\n      [attr.class]=\"getClass() + ' position-relative individual-options mb-2'\"\r\n      [ngClass]=\"{'highlighted-option': options?.highlight?.highlighted === true}\"\r\n      [ngStyle]=\"{'border': options?.highlight?.highlighted  ? '3px solid ' + data?.styles?.background?.accentColor : ''}\">\r\n      <div class=\"popular-tag\" [simpoCorner]=\"style?.corners\"\r\n        [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\"\r\n        *ngIf=\"options?.highlight?.highlighted === true\">\r\n        <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [itemIndex]=\"i\"></simpo-text-editor>\r\n      </div>\r\n      <div>\r\n        <img loading=\"lazy\" class=\"logo-img\" *ngIf=\"content?.display?.showImage === true\" [id]=\"data?.id\"\r\n          [simpoObjectPosition]=\"options.image.position\" [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \"\r\n          alt=\"\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\" [itemIndex]=\"i\"\r\n          [class]=\"data?.id+(options?.image?.id || '')\">\r\n        <div class=\"heading-small\">\r\n          <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [itemIndex]=\"i\" [isRTE]=\"options.inputText[0]?.isRTE\"></simpo-text-editor>\r\n        </div>\r\n        <div class=\"heading-large price\">\r\n          <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"2\" [itemIndex]=\"i\" [isRTE]=\"options.inputText[2]?.isRTE\"></simpo-text-editor>\r\n        </div>\r\n        <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">\r\n          <simpo-text-editor [(value)]=\"options.inputText[1].value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"1\" [itemIndex]=\"i\" [isRTE]=\"options.inputText[1]?.isRTE\"></simpo-text-editor>\r\n        </div>\r\n        <div class=\"body-desc mb-3\">\r\n          <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"3\" [itemIndex]=\"i\" [isRTE]=\"options.inputText[3]?.isRTE\"></simpo-text-editor>\r\n        </div>\r\n        <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\r\n          <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData; let j = index\">\r\n            <div class=\"d-flex align-items-center\">\r\n              <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#EEF0FC\" />\r\n                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                  d=\"M17.0965 7.39004L9.9365 14.3L8.0365 12.27C7.6865 11.94 7.1365 11.92 6.7365 12.2C6.3465 12.49 6.2365 13 6.4765 13.41L8.7265 17.07C8.9465 17.41 9.3265 17.62 9.7565 17.62C10.1665 17.62 10.5565 17.41 10.7765 17.07C11.1365 16.6 18.0065 8.41004 18.0065 8.41004C18.9065 7.49004 17.8165 6.68004 17.0965 7.38004V7.39004Z\"\r\n                  fill=\"#4C63D9\" />\r\n              </svg> -->\r\n            </div>\r\n            <simpo-text-editor [(value)]=\"content.content\" [editable]=\"edit || false\"></simpo-text-editor>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"btn mt-4 p-0 border-0 mb-3\" *ngIf=\"content?.display?.showButton === true\">\r\n        <!-- <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"style?.background\">{{options?.button?.label}}</button> -->\r\n        <button class=\"custom-btn d-flex gap-1\" [buttonData]=\"options?.button\" [buttonStyle]=\"button?.styles\"\r\n          simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n          [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n          [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId()\" [itemIndex]=\"i\" (click)=\"redirectTo(options?.button)\"\r\n          [class.flex-row-reverse]=\"options?.button?.icon?.iconPosition === 'left'\">\r\n          <div>{{options?.button?.label}}</div>\r\n          <div class=\"btn-icon\" *ngIf=\"options?.button?.showIcon\" [ngStyle]=\"{\r\n            'background':  button?.styles?.type == 'Text' ? button?.styles?.background : button?.styles?.textColor,\r\n            'mask-image': 'url(' + options?.button?.icon?.url + ')',\r\n            'mask-repeat': 'no-repeat',\r\n            'mask-size': 'cover',\r\n            'width': '25px',\r\n            'height': '25px',\r\n          }\"></div>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section>", styles: [".pricing-options{justify-content:center;gap:15px}.individual-options{border:1px solid #80808057}.highlighted-option{box-shadow:0 0 10px #0000004d}.logo-img{width:85px;height:85px;margin-top:1rem}.img_icon{width:25px;height:25px}.button{font-size:17px!important;padding:.75rem 0}.custom-btn{padding:6px;font-size:16px!important;font-weight:600}.popular-tag{position:absolute;top:0;right:-2px;padding:1px 20px 3px;border-top-left-radius:0!important;border-bottom-right-radius:0!important}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.popular-tag{max-width:60%}.individual-options{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}.col-4{width:100%!important}}.col-4{width:30%!important}\n"], dependencies: [{ kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { 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: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId", "itemIndex"] }, { kind: "directive", type: TranslateOnhoverDirective, selector: "[simpoTranslateOnhover]", inputs: ["simpoTranslateOnhover"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PricingS1Component, decorators: [{
            type: Component,
            args: [{ selector: 'simpo-pricing-s1', standalone: true, imports: [
                        TextEditorComponent,
                        ButtonDirectiveDirective,
                        ColorDirective,
                        CornerDirective,
                        CommonModule,
                        ImageEditorDirective,
                        ImageDirectiveDirective,
                        ObjectPositionDirective,
                        SimpoButtonComponent,
                        ButtonEditorDirective,
                        TranslateOnhoverDirective
                    ], template: "<section class=\"d-flex justify-content-center\">\r\n  <div class=\"pricing-options row w-100\">\r\n    <div\r\n       [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n      [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" *ngFor=\"let options of content?.listItem?.data; let i = index\"\r\n      [attr.class]=\"getClass() + ' position-relative individual-options mb-2'\"\r\n      [ngClass]=\"{'highlighted-option': options?.highlight?.highlighted === true}\"\r\n      [ngStyle]=\"{'border': options?.highlight?.highlighted  ? '3px solid ' + data?.styles?.background?.accentColor : ''}\">\r\n      <div class=\"popular-tag\" [simpoCorner]=\"style?.corners\"\r\n        [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\"\r\n        *ngIf=\"options?.highlight?.highlighted === true\">\r\n        <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [itemIndex]=\"i\"></simpo-text-editor>\r\n      </div>\r\n      <div>\r\n        <img loading=\"lazy\" class=\"logo-img\" *ngIf=\"content?.display?.showImage === true\" [id]=\"data?.id\"\r\n          [simpoObjectPosition]=\"options.image.position\" [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \"\r\n          alt=\"\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\" [itemIndex]=\"i\"\r\n          [class]=\"data?.id+(options?.image?.id || '')\">\r\n        <div class=\"heading-small\">\r\n          <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [itemIndex]=\"i\" [isRTE]=\"options.inputText[0]?.isRTE\"></simpo-text-editor>\r\n        </div>\r\n        <div class=\"heading-large price\">\r\n          <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"2\" [itemIndex]=\"i\" [isRTE]=\"options.inputText[2]?.isRTE\"></simpo-text-editor>\r\n        </div>\r\n        <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">\r\n          <simpo-text-editor [(value)]=\"options.inputText[1].value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"1\" [itemIndex]=\"i\" [isRTE]=\"options.inputText[1]?.isRTE\"></simpo-text-editor>\r\n        </div>\r\n        <div class=\"body-desc mb-3\">\r\n          <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"3\" [itemIndex]=\"i\" [isRTE]=\"options.inputText[3]?.isRTE\"></simpo-text-editor>\r\n        </div>\r\n        <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\r\n          <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData; let j = index\">\r\n            <div class=\"d-flex align-items-center\">\r\n              <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#EEF0FC\" />\r\n                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                  d=\"M17.0965 7.39004L9.9365 14.3L8.0365 12.27C7.6865 11.94 7.1365 11.92 6.7365 12.2C6.3465 12.49 6.2365 13 6.4765 13.41L8.7265 17.07C8.9465 17.41 9.3265 17.62 9.7565 17.62C10.1665 17.62 10.5565 17.41 10.7765 17.07C11.1365 16.6 18.0065 8.41004 18.0065 8.41004C18.9065 7.49004 17.8165 6.68004 17.0965 7.38004V7.39004Z\"\r\n                  fill=\"#4C63D9\" />\r\n              </svg> -->\r\n            </div>\r\n            <simpo-text-editor [(value)]=\"content.content\" [editable]=\"edit || false\"></simpo-text-editor>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"btn mt-4 p-0 border-0 mb-3\" *ngIf=\"content?.display?.showButton === true\">\r\n        <!-- <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"style?.background\">{{options?.button?.label}}</button> -->\r\n        <button class=\"custom-btn d-flex gap-1\" [buttonData]=\"options?.button\" [buttonStyle]=\"button?.styles\"\r\n          simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n          [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n          [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId()\" [itemIndex]=\"i\" (click)=\"redirectTo(options?.button)\"\r\n          [class.flex-row-reverse]=\"options?.button?.icon?.iconPosition === 'left'\">\r\n          <div>{{options?.button?.label}}</div>\r\n          <div class=\"btn-icon\" *ngIf=\"options?.button?.showIcon\" [ngStyle]=\"{\r\n            'background':  button?.styles?.type == 'Text' ? button?.styles?.background : button?.styles?.textColor,\r\n            'mask-image': 'url(' + options?.button?.icon?.url + ')',\r\n            'mask-repeat': 'no-repeat',\r\n            'mask-size': 'cover',\r\n            'width': '25px',\r\n            'height': '25px',\r\n          }\"></div>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section>", styles: [".pricing-options{justify-content:center;gap:15px}.individual-options{border:1px solid #80808057}.highlighted-option{box-shadow:0 0 10px #0000004d}.logo-img{width:85px;height:85px;margin-top:1rem}.img_icon{width:25px;height:25px}.button{font-size:17px!important;padding:.75rem 0}.custom-btn{padding:6px;font-size:16px!important;font-weight:600}.popular-tag{position:absolute;top:0;right:-2px;padding:1px 20px 3px;border-top-left-radius:0!important;border-bottom-right-radius:0!important}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.popular-tag{max-width:60%}.individual-options{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}.col-4{width:100%!important}}.col-4{width:30%!important}\n"] }]
        }], ctorParameters: () => [{ type: i1.EventsService }], propDecorators: { data: [{
                type: Input
            }], edit: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 