import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { SimpoComponentModule } from '../../components/index';
import { AnimationDirective } from '../../directive/animation-directive';
import { HoverDirective } from '../../directive/hover-element-directive';
import { BackgroundDirective } from '../../directive/background-directive';
import { ColorDirective } from '../../directive/color.directive';
import { SanitizeHtmlPipe } from '../../services/sanitizeHtml';
import { ContentFitDirective } from '../../directive/content-fit-directive';
import { OverlayDirective } from '../../directive/overlay-directive';
import { SpacingAroundDirective } from '../../directive/spacing-around.directive';
import BaseSection from '../BaseSection';
import { ButtonDirectiveDirective } from '../../directive/button-directive.directive';
import { MatIconModule } from '@angular/material/icon';
import { ContentTitleDirective } from '../../directive/content-title-spacing.directive';
import { SpacingHorizontalDirective } from '../../directive/spacing-horizontal.directive';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../../components/hover-elements/hover-elements.component";
import * as i3 from "../../components/delete-hover-element/delete-hover-element.component";
import * as i4 from "@angular/material/icon";
export class PropertyListComponent extends BaseSection {
    constructor() {
        super();
        this.propertyList = [
            {
                imgUrl: 'https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/607923c1737627077005image%20%284%29.png',
                name: 'Ananta One',
                icon: 'https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/950344c1738051599772icon2.png',
                location: 'RRR Hyderabad, Telanghana',
                underConstruction: true,
                return: 10,
                IRR: 18,
                growth: 5,
                minInvestment: 5
            },
            {
                imgUrl: 'https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/978309c1738051330108property2.png',
                name: 'Ananta Hills - 50 Acre Property',
                icon: 'https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/950344c1738051599772icon2.png',
                location: 'Chikkamguru, Karnataka',
                underConstruction: false,
                return: 10,
                IRR: 18,
                growth: 5,
                minInvestment: 2.5
            },
            {
                imgUrl: 'https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/978309c1738051330108property2.png',
                name: 'Ananta Hills - 50 Acre Property',
                icon: 'https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/950344c1738051599772icon2.png',
                location: 'Chikkamguru, Karnataka',
                underConstruction: false,
                return: 10,
                IRR: 18,
                growth: 5,
                minInvestment: 2.5
            },
            {
                imgUrl: 'https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/607923c1737627077005image%20%284%29.png',
                name: 'Ananta One',
                icon: 'https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/950344c1738051599772icon2.png',
                location: 'RRR Hyderabad, Telanghana',
                underConstruction: true,
                return: 10,
                IRR: 18,
                growth: 5,
                minInvestment: 5
            }
        ];
    }
    ngOnInit() {
        this.styles = this.data?.styles;
        this.content = this.data?.content;
    }
    get stylesLayout() {
        return { ...this.styles?.layout };
    }
    get headingSpace() {
        return this.styles?.layout.headingSpacing;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertyListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertyListComponent, isStandalone: true, selector: "simpo-property-list", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\n  <div [id]=\"data?.id\">\n    <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\n      <div [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\"\n        [simpoLayout]=\"styles?.layout\">\n        <div [simpoContentTitleSpace]=\"headingSpace\" [id]=\"data?.id\" class=\"content-side\">\n          <div *ngFor=\"let input of content?.inputText\">\n            <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large\"\n              [innerHTML]=\"input.value | sanitizeHtml\"></div>\n          </div>\n        </div>\n        <div class=\"row\">\n          <div class=\"col-12 col-md-6\" *ngFor=\"let property of propertyList\">\n            <ng-container *ngTemplateOutlet=\"propertyCards; context: {data: property}\"></ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\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\n</section>\n\n\n<ng-template #propertyCards let-property=\"data\">\n  <div class=\"card\">\n    <img [src]=\"property.imgUrl\" alt=\"\">\n    <div class=\"p-15\">\n      <div class=\"property-name\">\n        <div class=\"left-side\">\n          <img [src]=\"property.icon\" alt=\"\">\n          <div class=\"text-left\">\n            <div class=\"property-name-text\">{{property.name}}</div>\n            <div class=\"location\">{{property.location}}</div>\n          </div>\n        </div>\n        <div class=\"right-side\" *ngIf=\"property.underConstruction\">\n          <mat-icon>build</mat-icon>\n          <div>Under Construction</div>\n        </div>\n      </div>\n      <div class=\"stats-area\">\n        <div class=\"single-stat\">\n          <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/600863c1738056517087return.png\" alt=\"\">\n          <div class=\"stat-number\">{{property.return}}% <span>Annual Returns</span></div>\n        </div>\n        <div class=\"single-stat justify-center\">\n          <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/600863c1738056517087return.png\" alt=\"\">\n          <div class=\"stat-number\">{{property.IRR}}% <span>IRR</span></div>\n        </div>\n      </div>\n      <div class=\"single-stat mt-15 w-100\">\n        <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/600863c1738056517087return.png\" alt=\"\">\n        <div class=\"stat-number\">{{property.growth}}% <span>Guaranteed annual growth</span></div>\n      </div>\n      <hr>\n      <div class=\"bottom-area\">\n        <div class=\"min-investment\">\n          <p>{{property.minInvestment}} Lac</p>\n          <div>Min.Investment</div>\n        </div>\n        <button class=\"button\" simpoButtonDirective [id]=\"(data?.id || '')+(data?.action?.buttons?.[0]?.id || '')\" [backgroundInfo]=\"styles?.background\"\n          [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"styles?.background?.accentColor\">Know\n          More</button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.card{padding:5px;border:2px solid rgba(0,0,0,.1)}.card img{height:37vh}.property-name{display:flex;align-items:center;justify-content:space-between}.p-15{padding:15px}.left-side{align-items:center;display:flex;gap:15px}.left-side img{height:65px;width:60px}.right-side{display:flex;gap:5px;color:#19a6c6;align-items:center}.stats-area{display:flex;margin-top:30px;justify-content:space-between}.single-stat{width:50%;display:flex;align-items:center;gap:20px}.single-stat img{height:20px;width:16px}.mt-15{margin-top:15px}hr{border-top:1px solid rgba(0,0,0,.7)}.stat-number{font-size:25px;color:#000000b3;font-weight:900;display:flex;align-items:center;gap:13px}.stat-number span{color:#000000b3;font-size:12px}.bottom-area{display:flex;justify-content:space-between;align-items:center}.min-investment{background:#f8a9381a;text-align:center;padding:.5rem 2rem;border-radius:5px}.min-investment p{margin-bottom:0;font-size:22px;font-weight:900}.min-investment div{color:#0006;font-size:14px;font-weight:600}.button{font-size:14px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:max-content!important;font-weight:600}.property-name-text{font-size:22px;font-weight:700}.location{font-size:11px;color:gray}.justify-center{justify-content:center}.row{row-gap:20px}.text-left{text-align:left}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i2.HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: i3.DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertyListComponent, decorators: [{
            type: Component,
            args: [{ selector: 'simpo-property-list', standalone: true, imports: [
                        CommonModule,
                        FormsModule,
                        SimpoComponentModule,
                        AnimationDirective,
                        BackgroundDirective,
                        HoverDirective,
                        ColorDirective,
                        SanitizeHtmlPipe,
                        ContentFitDirective,
                        OverlayDirective,
                        SpacingAroundDirective,
                        ButtonDirectiveDirective,
                        MatIconModule,
                        ContentTitleDirective,
                        SpacingHorizontalDirective
                    ], template: "<section class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\n  <div [id]=\"data?.id\">\n    <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\n      <div [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\"\n        [simpoLayout]=\"styles?.layout\">\n        <div [simpoContentTitleSpace]=\"headingSpace\" [id]=\"data?.id\" class=\"content-side\">\n          <div *ngFor=\"let input of content?.inputText\">\n            <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large\"\n              [innerHTML]=\"input.value | sanitizeHtml\"></div>\n          </div>\n        </div>\n        <div class=\"row\">\n          <div class=\"col-12 col-md-6\" *ngFor=\"let property of propertyList\">\n            <ng-container *ngTemplateOutlet=\"propertyCards; context: {data: property}\"></ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\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\n</section>\n\n\n<ng-template #propertyCards let-property=\"data\">\n  <div class=\"card\">\n    <img [src]=\"property.imgUrl\" alt=\"\">\n    <div class=\"p-15\">\n      <div class=\"property-name\">\n        <div class=\"left-side\">\n          <img [src]=\"property.icon\" alt=\"\">\n          <div class=\"text-left\">\n            <div class=\"property-name-text\">{{property.name}}</div>\n            <div class=\"location\">{{property.location}}</div>\n          </div>\n        </div>\n        <div class=\"right-side\" *ngIf=\"property.underConstruction\">\n          <mat-icon>build</mat-icon>\n          <div>Under Construction</div>\n        </div>\n      </div>\n      <div class=\"stats-area\">\n        <div class=\"single-stat\">\n          <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/600863c1738056517087return.png\" alt=\"\">\n          <div class=\"stat-number\">{{property.return}}% <span>Annual Returns</span></div>\n        </div>\n        <div class=\"single-stat justify-center\">\n          <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/600863c1738056517087return.png\" alt=\"\">\n          <div class=\"stat-number\">{{property.IRR}}% <span>IRR</span></div>\n        </div>\n      </div>\n      <div class=\"single-stat mt-15 w-100\">\n        <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/600863c1738056517087return.png\" alt=\"\">\n        <div class=\"stat-number\">{{property.growth}}% <span>Guaranteed annual growth</span></div>\n      </div>\n      <hr>\n      <div class=\"bottom-area\">\n        <div class=\"min-investment\">\n          <p>{{property.minInvestment}} Lac</p>\n          <div>Min.Investment</div>\n        </div>\n        <button class=\"button\" simpoButtonDirective [id]=\"(data?.id || '')+(data?.action?.buttons?.[0]?.id || '')\" [backgroundInfo]=\"styles?.background\"\n          [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"styles?.background?.accentColor\">Know\n          More</button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.card{padding:5px;border:2px solid rgba(0,0,0,.1)}.card img{height:37vh}.property-name{display:flex;align-items:center;justify-content:space-between}.p-15{padding:15px}.left-side{align-items:center;display:flex;gap:15px}.left-side img{height:65px;width:60px}.right-side{display:flex;gap:5px;color:#19a6c6;align-items:center}.stats-area{display:flex;margin-top:30px;justify-content:space-between}.single-stat{width:50%;display:flex;align-items:center;gap:20px}.single-stat img{height:20px;width:16px}.mt-15{margin-top:15px}hr{border-top:1px solid rgba(0,0,0,.7)}.stat-number{font-size:25px;color:#000000b3;font-weight:900;display:flex;align-items:center;gap:13px}.stat-number span{color:#000000b3;font-size:12px}.bottom-area{display:flex;justify-content:space-between;align-items:center}.min-investment{background:#f8a9381a;text-align:center;padding:.5rem 2rem;border-radius:5px}.min-investment p{margin-bottom:0;font-size:22px;font-weight:900}.min-investment div{color:#0006;font-size:14px;font-weight:600}.button{font-size:14px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:max-content!important;font-weight:600}.property-name-text{font-size:22px;font-weight:700}.location{font-size:11px;color:gray}.justify-center{justify-content:center}.row{row-gap:20px}.text-left{text-align:left}\n"] }]
        }], ctorParameters: () => [], propDecorators: { data: [{
                type: Input
            }], index: [{
                type: Input
            }], edit: [{
                type: Input
            }], delete: [{
                type: Input
            }], customClass: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 