import * as i0 from '@angular/core';
import { Component, Input } from '@angular/core';
import { NgIf, NgForOf, NgStyle, NgClass } from '@angular/common';
import { PriceFormatPipe, SanitizerHtmlPipe } from '@testlocallibrary/shared-kernel/pipes';
import * as i2 from '@ngx-translate/core';
import { TranslateModule } from '@ngx-translate/core';
import { LanguageEnum, CurrencyEnum } from '@testlocallibrary/shared-kernel/models/enums';
import * as i1 from '@testlocallibrary/shared-kernel/services/language';

class PlanCardComponent {
    constructor(languageService) {
        this.languageService = languageService;
        this.ar = LanguageEnum.Ar;
        this.en = LanguageEnum.En;
        this.language = LanguageEnum.En;
        this.btnId = '';
        this.planPath = '';
        this.isCollapsed = false;
        this.index = 0;
        this.isPriceVisible = true;
        this.currency = '';
        this.isPlanHasMailBox = true;
        this.isFixedHeight = false;
        this.isPlansInnerHeightFixed = false;
        this.isPlansHeightFixed = false;
        this.plansInnerHeight = "";
        this.plansHeight = "";
        this.currencyViewEnum = CurrencyEnum;
    }
    ngOnInit() {
        this.language = this.languageService.getLanguage();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PlanCardComponent, deps: [{ token: i1.LanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PlanCardComponent, isStandalone: true, selector: "lib-plan-card", inputs: { planFeatures: "planFeatures", btnId: "btnId", planPath: "planPath", isCollapsed: "isCollapsed", index: "index", isPriceVisible: "isPriceVisible", currency: "currency", isPlanHasMailBox: "isPlanHasMailBox", isFixedHeight: "isFixedHeight", isPlansInnerHeightFixed: "isPlansInnerHeightFixed", isPlansHeightFixed: "isPlansHeightFixed", plansInnerHeight: "plansInnerHeight", plansHeight: "plansHeight" }, ngImport: i0, template: "<section [ngClass]=\"planFeatures.isRecommended ? 'recommended-border-color' : 'default-border-color'\"  id=\"card\"  [class.h-100]=\"!isPlansHeightFixed\" [ngStyle]=\"{'height':plansHeight}\">\r\n  <div [ngClass]=\"planFeatures.isRecommended ? 'recommended' : 'recommended hide-recommended'\"  class=\"\">\r\n    <span>{{'planCard.Recommended' | translate}}</span>\r\n  </div>\r\n  <div  class=\"card-box\">\r\n    <div class=\"\">\r\n    <div class=\"product-name text-center\">\r\n      <h3 class=\"h5\" [class.fixed-height]=\"isFixedHeight\">{{planFeatures.planName}}</h3> \r\n    </div>\r\n    <div id=\"product-price\">\r\n      <div class=\"d-flex flex-row justify-content-center\" *ngIf=\"isPriceVisible\"\r\n           [class.invisible]=\" currency == currencyViewEnum.egp ? !(planFeatures.oldPriceEGP > planFeatures.newPriceEGP) : !(planFeatures.oldPriceUSD > planFeatures.newPriceUSD) \" >\r\n           <div class=\"save\">\r\n            <span>{{'planCard.Save' | translate}} {{ currency == currencyViewEnum.egp ? (planFeatures.saveEGP|priceformat ) : (planFeatures.saveUSD|priceformat  )}}%</span>\r\n          </div>\r\n           <div class=\"old-price\" >\r\n          <span>{{ currency == currencyViewEnum.egp ? (planFeatures.oldPriceEGP | priceformat:currencyViewEnum.egp) : (planFeatures.oldPriceUSD| priceformat:currencyViewEnum.usd )}}</span>\r\n        </div>\r\n       \r\n      </div>\r\n      <div class=\"new-price\" *ngIf=\"isPriceVisible\">\r\n        <div class=\"d-flex flex-row justify-content-center\">\r\n          <div class=\"new-price\">\r\n            <span>{{ currency == currencyViewEnum.egp ? (planFeatures.newPriceEGP | priceformat:currencyViewEnum.egp) : (planFeatures.newPriceUSD | priceformat:currencyViewEnum.usd) }}</span>\r\n\r\n          </div>\r\n          <div class=\"period\" *ngIf=\"!isPlanHasMailBox;else billingPeriodWithMailBox\">\r\n            <sup *ngIf=\"language === en && planFeatures.planTerm == 'month'\"> /month</sup>\r\n            <sup *ngIf=\"language === ar && planFeatures.planTerm == 'month'\"> /\u0634\u0647\u0631</sup>\r\n            <sup *ngIf=\"language === en && planFeatures.planTerm == 'year'\"> /year</sup>\r\n            <sup *ngIf=\"language === ar && planFeatures.planTerm == 'year'\"> /\u0627\u0644\u0633\u0646\u0629</sup>\r\n          </div>\r\n          <ng-template  #billingPeriodWithMailBox>\r\n            <div class=\"period\"> \r\n              <sup> {{'durationCard.billingPeriod'|translate}}</sup>\r\n            </div>\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <ng-content select=\"[getStartedBtn]\" class=\"styles\"></ng-content>\r\n  </div>\r\n\r\n    <div *ngIf=\"isCollapsed\" class=\"content\" [ngClass]=\"{ar: language === ar}\" [dir]=\"language==ar?'rtl':'ltr'\">\r\n            <span class=\"text\">\r\n                {{planFeatures.productInfo}}\r\n            </span>\r\n    </div>\r\n    <div [ngStyle]=\"{'height':plansInnerHeight}\">\r\n      <ng-content select=\"[extraFeature]\"></ng-content>\r\n      <div *ngIf=\"!isCollapsed\" id=\"featurs\" [ngClass]=\"{ar: language === ar}\" [dir]=\"language==ar?'rtl':'ltr'\">\r\n        <div *ngFor=\"let feature of planFeatures.features;last as last\" class=\"icon d-flex\">\r\n          <div class=\"flex-shrink-0\">\r\n            <i class=\"icon-check faCheck\"></i>\r\n          </div>\r\n          <div class=\"flex-grow-1\"[ngClass]=\"{'en-ms-3-custom': language === en,'ar-ms-3-custom': language === ar}\">\r\n            <p [class.padding-bottom]=\"!last\" [innerHTML]=\"feature | sanitizerHtml\"></p>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <ng-content select=\"[addedBenfit]\"></ng-content>\r\n    </div>\r\n    <div *ngIf=\"isCollapsed\" id=\"featurs\" class=\"accordion\">\r\n      <div class=\"accordion-item\">\r\n        <h6\r\n          class=\"accordion-header accordion-button accordion-button-custom collapsed\"\r\n          type=\"button\"\r\n          data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#flush-collapse-list' + index\"\r\n          aria-expanded=\"false\" aria-controls=\"flush-collapse-list\">\r\n          {{'planCard.servicesIncluded' | translate}}\r\n        </h6>\r\n        <div [attr.id]=\"'flush-collapse-list' + index\"\r\n             class=\"accordion-collapse collapse\"\r\n             aria-labelledby=\"collapse-list\"\r\n             data-bs-parent=\"#accordionFlushExample\">\r\n             <div *ngFor=\"let feature of planFeatures.features; last as last\" class=\"icon d-flex\">\r\n              <div class=\"flex-shrink-0\">\r\n                <i class=\"icon-check\"></i>\r\n              </div>\r\n              <div class=\"flex-grow-1\"[ngClass]=\"{'en-ms-3-custom': language === en,'ar-ms-3-custom': language === ar}\">\r\n                <p [class.padding-bottom]=\"!last\">{{feature}}</p>\r\n              </div>\r\n            </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <ng-content select=\"[extraContent]\"></ng-content>\r\n</section>\r\n", styles: [".en-ms-3-custom{margin-left:.25rem!important}.ar-ms-3-custom{margin-right:.25rem!important}.ar-direction{direction:ltr}.fixed-height{height:48px}.recommended{text-align:center;position:relative;background-color:#f0fdfa;padding:6px 12px;bottom:20px;height:36px;border-radius:16px}.recommended span{color:#0d9488;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.recommended-border-color,.default-border-color{border:1px solid #cbd5e1}.recommended-border-color:hover{border:1px solid #0d9488}.default-border-color:hover{border:1px solid #57c1db}.hide-recommended{visibility:hidden}#card{padding:0 26px 26px;border-radius:10px;background-color:#fff}#card .product-name{min-height:30px;overflow:hidden}#card .product-name span{font-size:20px;font-style:normal;font-weight:600;color:#222b55}#card #product-price .save{background-color:#fff1f2;color:#e11d48;border-radius:16px;padding:2px 8px}#card #product-price .save span{font-size:12px;font-style:normal;font-weight:600}#card #product-price .old-price{padding:4px 8px 4px 0}#card #product-price .old-price span{color:#475569;font-size:12px;font-style:normal;font-weight:400;text-decoration:line-through}#card #product-price .new-price .new-price{color:#000;font-size:36px;font-style:normal;font-weight:700;justify-content:center}#card #product-price .new-price .period sup{bottom:-2.5em;top:2.5em!important}#card #product-price .new-price .period{color:#475569;font-size:14px;font-style:normal;font-weight:600}#card .card-box .content{margin:0 0 36px}#card .card-box .content .text{font-size:16px;font-style:normal;font-weight:400;display:block;height:170px}#card .card-box .accordion .accordion-item{border:none}#card .card-box:after .accordion-button-custom{margin-left:6px}#card:hover .faCheck{color:#57c1db}#card .card-box #card .card-box #card .card-box .accordion-button-custom:not(.collapsed){color:#16a34a;background-color:#fff;box-shadow:none}#featurs h6{padding:8px 0;color:#16a34a;font-style:normal;font-weight:600}#featurs .flex-grow-1{list-style-type:none;color:#0f172a;font-size:14px;font-style:normal;font-weight:400}.flex-grow-1 p.padding-bottom{padding-bottom:12px}#featurs .icon div:not(:last-child){margin-bottom:12px}#featurs .icon div:not(:last-child) #featurs .faCheck{padding-right:12px!important}#featurs .icon div:not(:last-child) #featurs .faCheck:hover{color:#57c1db}.plans-fixed-height{height:630px}.accordion-button:not(.collapsed){background-color:#fff;box-shadow:none}.accordion-button:after{margin-inline-start:auto;margin-inline-end:0}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: PriceFormatPipe, name: "priceformat" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: SanitizerHtmlPipe, name: "sanitizerHtml" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PlanCardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'lib-plan-card', imports: [
                        NgIf,
                        NgForOf,
                        NgStyle,
                        PriceFormatPipe,
                        NgClass,
                        TranslateModule,
                        SanitizerHtmlPipe
                    ], standalone: true, template: "<section [ngClass]=\"planFeatures.isRecommended ? 'recommended-border-color' : 'default-border-color'\"  id=\"card\"  [class.h-100]=\"!isPlansHeightFixed\" [ngStyle]=\"{'height':plansHeight}\">\r\n  <div [ngClass]=\"planFeatures.isRecommended ? 'recommended' : 'recommended hide-recommended'\"  class=\"\">\r\n    <span>{{'planCard.Recommended' | translate}}</span>\r\n  </div>\r\n  <div  class=\"card-box\">\r\n    <div class=\"\">\r\n    <div class=\"product-name text-center\">\r\n      <h3 class=\"h5\" [class.fixed-height]=\"isFixedHeight\">{{planFeatures.planName}}</h3> \r\n    </div>\r\n    <div id=\"product-price\">\r\n      <div class=\"d-flex flex-row justify-content-center\" *ngIf=\"isPriceVisible\"\r\n           [class.invisible]=\" currency == currencyViewEnum.egp ? !(planFeatures.oldPriceEGP > planFeatures.newPriceEGP) : !(planFeatures.oldPriceUSD > planFeatures.newPriceUSD) \" >\r\n           <div class=\"save\">\r\n            <span>{{'planCard.Save' | translate}} {{ currency == currencyViewEnum.egp ? (planFeatures.saveEGP|priceformat ) : (planFeatures.saveUSD|priceformat  )}}%</span>\r\n          </div>\r\n           <div class=\"old-price\" >\r\n          <span>{{ currency == currencyViewEnum.egp ? (planFeatures.oldPriceEGP | priceformat:currencyViewEnum.egp) : (planFeatures.oldPriceUSD| priceformat:currencyViewEnum.usd )}}</span>\r\n        </div>\r\n       \r\n      </div>\r\n      <div class=\"new-price\" *ngIf=\"isPriceVisible\">\r\n        <div class=\"d-flex flex-row justify-content-center\">\r\n          <div class=\"new-price\">\r\n            <span>{{ currency == currencyViewEnum.egp ? (planFeatures.newPriceEGP | priceformat:currencyViewEnum.egp) : (planFeatures.newPriceUSD | priceformat:currencyViewEnum.usd) }}</span>\r\n\r\n          </div>\r\n          <div class=\"period\" *ngIf=\"!isPlanHasMailBox;else billingPeriodWithMailBox\">\r\n            <sup *ngIf=\"language === en && planFeatures.planTerm == 'month'\"> /month</sup>\r\n            <sup *ngIf=\"language === ar && planFeatures.planTerm == 'month'\"> /\u0634\u0647\u0631</sup>\r\n            <sup *ngIf=\"language === en && planFeatures.planTerm == 'year'\"> /year</sup>\r\n            <sup *ngIf=\"language === ar && planFeatures.planTerm == 'year'\"> /\u0627\u0644\u0633\u0646\u0629</sup>\r\n          </div>\r\n          <ng-template  #billingPeriodWithMailBox>\r\n            <div class=\"period\"> \r\n              <sup> {{'durationCard.billingPeriod'|translate}}</sup>\r\n            </div>\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <ng-content select=\"[getStartedBtn]\" class=\"styles\"></ng-content>\r\n  </div>\r\n\r\n    <div *ngIf=\"isCollapsed\" class=\"content\" [ngClass]=\"{ar: language === ar}\" [dir]=\"language==ar?'rtl':'ltr'\">\r\n            <span class=\"text\">\r\n                {{planFeatures.productInfo}}\r\n            </span>\r\n    </div>\r\n    <div [ngStyle]=\"{'height':plansInnerHeight}\">\r\n      <ng-content select=\"[extraFeature]\"></ng-content>\r\n      <div *ngIf=\"!isCollapsed\" id=\"featurs\" [ngClass]=\"{ar: language === ar}\" [dir]=\"language==ar?'rtl':'ltr'\">\r\n        <div *ngFor=\"let feature of planFeatures.features;last as last\" class=\"icon d-flex\">\r\n          <div class=\"flex-shrink-0\">\r\n            <i class=\"icon-check faCheck\"></i>\r\n          </div>\r\n          <div class=\"flex-grow-1\"[ngClass]=\"{'en-ms-3-custom': language === en,'ar-ms-3-custom': language === ar}\">\r\n            <p [class.padding-bottom]=\"!last\" [innerHTML]=\"feature | sanitizerHtml\"></p>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <ng-content select=\"[addedBenfit]\"></ng-content>\r\n    </div>\r\n    <div *ngIf=\"isCollapsed\" id=\"featurs\" class=\"accordion\">\r\n      <div class=\"accordion-item\">\r\n        <h6\r\n          class=\"accordion-header accordion-button accordion-button-custom collapsed\"\r\n          type=\"button\"\r\n          data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#flush-collapse-list' + index\"\r\n          aria-expanded=\"false\" aria-controls=\"flush-collapse-list\">\r\n          {{'planCard.servicesIncluded' | translate}}\r\n        </h6>\r\n        <div [attr.id]=\"'flush-collapse-list' + index\"\r\n             class=\"accordion-collapse collapse\"\r\n             aria-labelledby=\"collapse-list\"\r\n             data-bs-parent=\"#accordionFlushExample\">\r\n             <div *ngFor=\"let feature of planFeatures.features; last as last\" class=\"icon d-flex\">\r\n              <div class=\"flex-shrink-0\">\r\n                <i class=\"icon-check\"></i>\r\n              </div>\r\n              <div class=\"flex-grow-1\"[ngClass]=\"{'en-ms-3-custom': language === en,'ar-ms-3-custom': language === ar}\">\r\n                <p [class.padding-bottom]=\"!last\">{{feature}}</p>\r\n              </div>\r\n            </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <ng-content select=\"[extraContent]\"></ng-content>\r\n</section>\r\n", styles: [".en-ms-3-custom{margin-left:.25rem!important}.ar-ms-3-custom{margin-right:.25rem!important}.ar-direction{direction:ltr}.fixed-height{height:48px}.recommended{text-align:center;position:relative;background-color:#f0fdfa;padding:6px 12px;bottom:20px;height:36px;border-radius:16px}.recommended span{color:#0d9488;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.recommended-border-color,.default-border-color{border:1px solid #cbd5e1}.recommended-border-color:hover{border:1px solid #0d9488}.default-border-color:hover{border:1px solid #57c1db}.hide-recommended{visibility:hidden}#card{padding:0 26px 26px;border-radius:10px;background-color:#fff}#card .product-name{min-height:30px;overflow:hidden}#card .product-name span{font-size:20px;font-style:normal;font-weight:600;color:#222b55}#card #product-price .save{background-color:#fff1f2;color:#e11d48;border-radius:16px;padding:2px 8px}#card #product-price .save span{font-size:12px;font-style:normal;font-weight:600}#card #product-price .old-price{padding:4px 8px 4px 0}#card #product-price .old-price span{color:#475569;font-size:12px;font-style:normal;font-weight:400;text-decoration:line-through}#card #product-price .new-price .new-price{color:#000;font-size:36px;font-style:normal;font-weight:700;justify-content:center}#card #product-price .new-price .period sup{bottom:-2.5em;top:2.5em!important}#card #product-price .new-price .period{color:#475569;font-size:14px;font-style:normal;font-weight:600}#card .card-box .content{margin:0 0 36px}#card .card-box .content .text{font-size:16px;font-style:normal;font-weight:400;display:block;height:170px}#card .card-box .accordion .accordion-item{border:none}#card .card-box:after .accordion-button-custom{margin-left:6px}#card:hover .faCheck{color:#57c1db}#card .card-box #card .card-box #card .card-box .accordion-button-custom:not(.collapsed){color:#16a34a;background-color:#fff;box-shadow:none}#featurs h6{padding:8px 0;color:#16a34a;font-style:normal;font-weight:600}#featurs .flex-grow-1{list-style-type:none;color:#0f172a;font-size:14px;font-style:normal;font-weight:400}.flex-grow-1 p.padding-bottom{padding-bottom:12px}#featurs .icon div:not(:last-child){margin-bottom:12px}#featurs .icon div:not(:last-child) #featurs .faCheck{padding-right:12px!important}#featurs .icon div:not(:last-child) #featurs .faCheck:hover{color:#57c1db}.plans-fixed-height{height:630px}.accordion-button:not(.collapsed){background-color:#fff;box-shadow:none}.accordion-button:after{margin-inline-start:auto;margin-inline-end:0}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.LanguageService }]; }, propDecorators: { planFeatures: [{
                type: Input
            }], btnId: [{
                type: Input
            }], planPath: [{
                type: Input
            }], isCollapsed: [{
                type: Input
            }], index: [{
                type: Input
            }], isPriceVisible: [{
                type: Input
            }], currency: [{
                type: Input
            }], isPlanHasMailBox: [{
                type: Input
            }], isFixedHeight: [{
                type: Input
            }], isPlansInnerHeightFixed: [{
                type: Input
            }], isPlansHeightFixed: [{
                type: Input
            }], plansInnerHeight: [{
                type: Input
            }], plansHeight: [{
                type: Input
            }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { PlanCardComponent };
//# sourceMappingURL=testlocallibrary-shared-kernel-components-plan-card.mjs.map
