import { Component, EventEmitter, Input, Output, } from '@angular/core';
import { NgClass, NgIf } from '@angular/common';
import { PriceFormatPipe, PricePrefixTranslationPipe } from '@testlocallibrary/shared-kernel/pipes';
import { FormsModule } from '@angular/forms';
import { LanguageEnum, } from '@testlocallibrary/shared-kernel/models/enums';
import { TranslateModule } from '@ngx-translate/core';
import * as i0 from "@angular/core";
import * as i1 from "@testlocallibrary/shared-kernel/services/language";
import * as i2 from "@angular/forms";
import * as i3 from "@ngx-translate/core";
export class DurationPricingCardComponent {
    constructor(languageService) {
        this.languageService = languageService;
        this.productPriceAfterDiscountPerMonth = 0;
        this.productPriceBeforeDiscount = 0;
        this.productDiscountPercentage = 0;
        this.billingCycle = '';
        this.billingCycleMonths = 1;
        this.pricePrefix = '';
        this.isProductDiscountHidden = false;
        this.isSelected = false;
        this.isHaveMailBoxCounter = false;
        this.mailBoxsQuantityEvent = new EventEmitter();
        this.onBillingCycleSelection = new EventEmitter();
        this.subTotal = 0;
        this.savings = 0;
        this.quantity = 1;
        this.maxQuantity = 30000;
        this.minQuantity = 1;
        this.language = LanguageEnum.En;
        this.LanguageEnum = LanguageEnum;
        this.biliingCycleUnit = '';
        this.language = this.languageService.getLanguage();
    }
    ngOnChanges(changes) {
        if (changes['pricePrefix']) {
            this.calculateSubTotal();
            this.calculateSavingsAfterDiscount();
            this.setBiliingCycleUnit();
        }
    }
    ngOnInit() {
        this.calculateSubTotal();
        this.calculateSavingsAfterDiscount();
        this.setBiliingCycleUnit();
    }
    setBiliingCycleUnit() {
        if (this.language == LanguageEnum.Ar) {
            this.billingCycleMonths > 1 && this.billingCycleMonths < 10
                ? this.biliingCycleUnit = 'شهور'
                : this.biliingCycleUnit = 'شهر';
        }
        else {
            this.billingCycleMonths > 1 ? this.biliingCycleUnit = 'months' : this.biliingCycleUnit = "month";
        }
    }
    calculateSavingsAfterDiscount() {
        this.savings =
            ((+this.productPriceBeforeDiscount.toFixed(2)) -
                (+this.productPriceAfterDiscountPerMonth.toFixed(2))) *
                this.billingCycleMonths *
                this.quantity;
    }
    calculateSubTotal() {
        this.subTotal =
            this.productPriceAfterDiscountPerMonth *
                this.quantity *
                this.billingCycleMonths;
    }
    decreaseQuantity() {
        this.quantity--;
        this.mailBoxsQuantityEvent.emit(this.quantity);
        this.calculateSubTotal();
        this.calculateSavingsAfterDiscount();
    }
    increaseQuantity() {
        if (this.quantity < this.maxQuantity)
            this.quantity++;
        this.mailBoxsQuantityEvent.emit(this.quantity);
        this.calculateSubTotal();
        this.calculateSavingsAfterDiscount();
    }
    changeQuantity(event) {
        if (Number(event.currentTarget.value > this.maxQuantity)) {
            this.quantity = this.maxQuantity;
        }
        else if (Number(event.currentTarget.value <= 0)) {
            this.quantity = this.minQuantity;
        }
        else if (isNaN(Number(event.currentTarget.value))) {
            event.currentTarget.value = this.minQuantity;
            this.quantity = Number(event.currentTarget.value);
        }
        else {
            this.quantity = Number(event.currentTarget.value);
        }
        this.mailBoxsQuantityEvent.emit(this.quantity);
        this.calculateSubTotal();
        this.calculateSavingsAfterDiscount();
    }
    selectPlan() {
        this.onBillingCycleSelection.emit(this.billingCycle);
        this.mailBoxsQuantityEvent.emit(this.quantity);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DurationPricingCardComponent, deps: [{ token: i1.LanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DurationPricingCardComponent, isStandalone: true, selector: "lib-duration-pricing-card", inputs: { productPriceAfterDiscountPerMonth: "productPriceAfterDiscountPerMonth", productPriceBeforeDiscount: "productPriceBeforeDiscount", productDiscountPercentage: "productDiscountPercentage", billingCycle: "billingCycle", billingCycleMonths: "billingCycleMonths", pricePrefix: "pricePrefix", isProductDiscountHidden: "isProductDiscountHidden", isSelected: "isSelected", isHaveMailBoxCounter: "isHaveMailBoxCounter" }, outputs: { mailBoxsQuantityEvent: "mailBoxsQuantityEvent", onBillingCycleSelection: "onBillingCycleSelection" }, usesOnChanges: true, ngImport: i0, template: "<!--[ngClass]=\"isProductDiscountHidden ? 'default-border-billing-cyle-duration ' : 'discounted-border-billing-cyle-duration'\" -->\r\n<section\r\n  id=\"billing-cyle-duration\"\r\n  class=\"mt-5 h-100\"\r\n  [ngClass]=\"{ ar: language === LanguageEnum.Ar }\"\r\n  [ngClass]=\"{\r\n    'default-border-billing-cyle-duration': isProductDiscountHidden,\r\n    'discounted-border-billing-cyle-duration': !isProductDiscountHidden,\r\n    'inactive-billing-cyle': !isSelected,\r\n    'active-billing-cyle': isSelected\r\n  }\"\r\n>\r\n  <div\r\n    [ngClass]=\"{\r\n      hiddenDiscount: isProductDiscountHidden,\r\n      'active-saving-styles': isSelected,\r\n      'inactive-saving-styles': !isSelected\r\n    }\"\r\n    class=\"saving\"\r\n  >\r\n    <span class=\"align-middle\"\r\n      >{{ \"durationCard.save\" | translate }}\r\n      {{ productDiscountPercentage }}%</span\r\n    >\r\n  </div>\r\n  <div class=\"card-info-container\">\r\n    <div class=\"term\">\r\n      <span>{{ billingCycleMonths }} {{ biliingCycleUnit }}</span>\r\n    </div>\r\n    <div\r\n      class=\"price-before-discount\"\r\n      [ngClass]=\"{ hiddenDiscount: isProductDiscountHidden }\"\r\n    >\r\n      <span>\r\n        {{ productPriceBeforeDiscount | priceformat:pricePrefix }}/{{\r\n          \"durationCard.discountPeriod\" | translate\r\n        }}</span\r\n      >\r\n    </div>\r\n    <div class=\"price\">\r\n      <span>{{ productPriceAfterDiscountPerMonth | priceformat:pricePrefix }}</span>\r\n      <span *ngIf=\"!isHaveMailBoxCounter\" class=\"discountPeriod\">/{{\"durationCard.discountPeriod\" | translate}}</span>\r\n    </div>\r\n    <div *ngIf=\"isHaveMailBoxCounter\" class=\"period text-muted\">\r\n      <span>{{ \"durationCard.billingPeriod\" | translate }}</span>\r\n    </div>\r\n    <div\r\n      [ngClass]=\"{ hiddenDiscount: !isSelected && isHaveMailBoxCounter }\"\r\n      class=\"subtotal-saved-section d-flex justify-content-center\"\r\n    >\r\n      <div\r\n        [class.br]=\"savings>10000 && isHaveMailBoxCounter\"\r\n        [ngClass]=\"{'sub-total-padding' :!isProductDiscountHidden}\"\r\n        class=\"sub-total\"\r\n      >\r\n        <p>\r\n          <span [ngClass]=\"{ 'selected-text': isSelected }\"\r\n            >{{ \"durationCard.subtotal\" | translate }} </span>\r\n            <br *ngIf=\"savings>10000 && isHaveMailBoxCounter\">\r\n            {{ subTotal | priceformat:pricePrefix }}\r\n        </p>\r\n       \r\n      </div>\r\n\r\n      <div class=\"saved\" *ngIf=\"!isProductDiscountHidden\">\r\n        <p>\r\n          <span [ngClass]=\"{ 'selected-text': isSelected }\"\r\n            >{{ \"durationCard.saved\" | translate }}: </span>\r\n            <br *ngIf=\"savings>10000 && isHaveMailBoxCounter\">\r\n          {{ savings | priceformat:pricePrefix }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div\r\n    *ngIf=\"isSelected && isHaveMailBoxCounter\"\r\n    id=\"mail-box-counter\"\r\n    class=\"mail-box-counter\"\r\n  >\r\n    <div class=\"count-icons d-flex\">\r\n      <span class=\"minus-icon\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-default\"\r\n          [disabled]=\"quantity == minQuantity\"\r\n          (click)=\"decreaseQuantity()\"\r\n        >\r\n          <i class=\"icon-minus-solid faMinus\"></i>\r\n        </button>\r\n      </span>\r\n      <input\r\n        type=\"text\"\r\n        class=\"mt-1 form-control\"\r\n        (change)=\"changeQuantity($event)\"\r\n        [(ngModel)]=\"quantity\"\r\n        [min]=\"minQuantity\"\r\n        [max]=\"maxQuantity\"\r\n      />\r\n      <span class=\"plus-icon\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-default\"\r\n          (click)=\"increaseQuantity()\"\r\n        >\r\n          <i class=\"icon-plus-solid\"></i>\r\n        </button>\r\n      </span>\r\n    </div>\r\n    <div class=\"mail-boxes\">\r\n      <p *ngIf=\"isSelected && isHaveMailBoxCounter\" class=\"mail-box\">\r\n        {{ \"durationCard.productUnit\" | translate }}\r\n      </p>\r\n    </div>\r\n  </div>\r\n  <div\r\n    [ngClass]=\"{ postion: isHaveMailBoxCounter && isSelected }\"\r\n    (click)=\"selectPlan()\"\r\n    *ngIf=\"!isSelected\"\r\n    class=\"select-box d-block\"\r\n  >\r\n    <button class=\"text-center\">\r\n      {{ \"durationCard.actionButtonText\" | translate }}\r\n    </button>\r\n  </div>\r\n  <div\r\n    [ngClass]=\"{ postion: isHaveMailBoxCounter && isSelected }\"\r\n    *ngIf=\"isSelected && !isHaveMailBoxCounter\"\r\n    class=\"select-box selected d-block\"\r\n  >\r\n    <button class=\"text-center\">\r\n      {{ \"durationCard.actionButtonSelectedText\" | translate }}\r\n    </button>\r\n  </div>\r\n</section>\r\n", styles: [".hiddenDiscount{visibility:hidden}.h-100{height:85%!important}.discounted-border-billing-cyle-duration,.default-border-billing-cyle-duration{border:1px solid #475569}.active-billing-cyle,.active-simi-billing-cyle{border:1px solid #16a34a;box-shadow:5px 5px 10px #0003}.inactive-billing-cyle,inactive-simi-billing-cyle{box-shadow:none}.active-saving-styles{background-color:#f0fdfa;color:#16a34a}.inactive-saving-styles{background-color:#fef3c7;color:#d97706}.btn:disabled{color:#222b55!important;border:1px solid #222B55!important;background:initial!important}.vissible{visibility:hidden}.hide-select-button{display:none}#billing-cyle-duration{background-color:#fff;text-align:center;border-radius:10px;padding:0 8px 8px}#billing-cyle-duration .saving{position:relative;width:91.591px;height:43.738px;margin:auto;border-radius:26px;bottom:25px;line-height:37px}#billing-cyle-duration .saving span{font-size:16px;font-style:normal;font-weight:600}#billing-cyle-duration .card-info-container{margin-bottom:16px}#billing-cyle-duration .card-info-container .term{padding:0 24.5px 16px;color:#222b55;font-size:20px;font-style:normal;font-weight:600}#billing-cyle-duration .card-info-container .price-before-discount{padding:0 24.5px 8px;color:#475569;font-size:12px;font-style:normal;font-weight:400;line-height:16px;text-decoration-line:line-through}#billing-cyle-duration .card-info-container .price{color:#000;font-size:30px;font-style:normal;font-weight:600;padding:8px 0}#billing-cyle-duration .card-info-container .price .discountPeriod{font-size:14px;font-weight:400;color:#475569}#billing-cyle-duration .card-info-container .period{padding:0 24.5px 8px;color:#475569;font-size:16px;font-style:normal;font-weight:600;margin-bottom:16px}#billing-cyle-duration .card-info-container .subtotal-saved-section span{color:#222b55}#billing-cyle-duration .card-info-container .subtotal-saved-section span.selected-text{color:var(--Status-Teal-600, #16a34a)}#billing-cyle-duration .card-info-container .subtotal-saved-section .sub-total-padding{padding-inline-end:1.25rem}#billing-cyle-duration .card-info-container .subtotal-saved-section .sub-total.br{padding-inline-end:3rem}#billing-cyle-duration .card-info-container .subtotal-saved-section .sub-total,#billing-cyle-duration .card-info-container .subtotal-saved-section .saved{font-size:11px;font-style:normal;font-weight:600;line-height:16px;white-space:nowrap}#billing-cyle-duration #mail-box-counter input[type=text]{text-align:center;border:none!important}#billing-cyle-duration #mail-box-counter .minus-icon button,#billing-cyle-duration #mail-box-counter .plus-icon button{cursor:initial;border:1px solid #222B55;color:#222b55;width:20px;display:flex;align-items:center;justify-content:center;height:38px}#billing-cyle-duration .plus-icon,#billing-cyle-duration .minus-icon{display:flex;align-items:end}#billing-cyle-duration .mail-box{color:#475569;font-size:12px;font-style:normal;font-weight:600}#billing-cyle-duration .select-box{position:relative;padding:10px 0;background-color:#fff;border-radius:8px;border:1px solid #0F172A;background:var(--Basic-White, #FFF);cursor:pointer}#billing-cyle-duration .select-box button{color:#222b55;font-size:16px;font-style:normal;font-weight:700}#billing-cyle-duration .select-box:hover{background-color:#f8fafc}#billing-cyle-duration .selected{border:1px solid #16a34a}#billing-cyle-duration .selected button{color:#16a34a}.postion{top:16px}@media only screen and (max-width: 991px){.select-box{top:-8px!important}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: PriceFormatPipe, name: "priceformat" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DurationPricingCardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'lib-duration-pricing-card', imports: [
                        NgClass,
                        PriceFormatPipe,
                        FormsModule,
                        NgIf,
                        TranslateModule,
                        PricePrefixTranslationPipe
                    ], standalone: true, template: "<!--[ngClass]=\"isProductDiscountHidden ? 'default-border-billing-cyle-duration ' : 'discounted-border-billing-cyle-duration'\" -->\r\n<section\r\n  id=\"billing-cyle-duration\"\r\n  class=\"mt-5 h-100\"\r\n  [ngClass]=\"{ ar: language === LanguageEnum.Ar }\"\r\n  [ngClass]=\"{\r\n    'default-border-billing-cyle-duration': isProductDiscountHidden,\r\n    'discounted-border-billing-cyle-duration': !isProductDiscountHidden,\r\n    'inactive-billing-cyle': !isSelected,\r\n    'active-billing-cyle': isSelected\r\n  }\"\r\n>\r\n  <div\r\n    [ngClass]=\"{\r\n      hiddenDiscount: isProductDiscountHidden,\r\n      'active-saving-styles': isSelected,\r\n      'inactive-saving-styles': !isSelected\r\n    }\"\r\n    class=\"saving\"\r\n  >\r\n    <span class=\"align-middle\"\r\n      >{{ \"durationCard.save\" | translate }}\r\n      {{ productDiscountPercentage }}%</span\r\n    >\r\n  </div>\r\n  <div class=\"card-info-container\">\r\n    <div class=\"term\">\r\n      <span>{{ billingCycleMonths }} {{ biliingCycleUnit }}</span>\r\n    </div>\r\n    <div\r\n      class=\"price-before-discount\"\r\n      [ngClass]=\"{ hiddenDiscount: isProductDiscountHidden }\"\r\n    >\r\n      <span>\r\n        {{ productPriceBeforeDiscount | priceformat:pricePrefix }}/{{\r\n          \"durationCard.discountPeriod\" | translate\r\n        }}</span\r\n      >\r\n    </div>\r\n    <div class=\"price\">\r\n      <span>{{ productPriceAfterDiscountPerMonth | priceformat:pricePrefix }}</span>\r\n      <span *ngIf=\"!isHaveMailBoxCounter\" class=\"discountPeriod\">/{{\"durationCard.discountPeriod\" | translate}}</span>\r\n    </div>\r\n    <div *ngIf=\"isHaveMailBoxCounter\" class=\"period text-muted\">\r\n      <span>{{ \"durationCard.billingPeriod\" | translate }}</span>\r\n    </div>\r\n    <div\r\n      [ngClass]=\"{ hiddenDiscount: !isSelected && isHaveMailBoxCounter }\"\r\n      class=\"subtotal-saved-section d-flex justify-content-center\"\r\n    >\r\n      <div\r\n        [class.br]=\"savings>10000 && isHaveMailBoxCounter\"\r\n        [ngClass]=\"{'sub-total-padding' :!isProductDiscountHidden}\"\r\n        class=\"sub-total\"\r\n      >\r\n        <p>\r\n          <span [ngClass]=\"{ 'selected-text': isSelected }\"\r\n            >{{ \"durationCard.subtotal\" | translate }} </span>\r\n            <br *ngIf=\"savings>10000 && isHaveMailBoxCounter\">\r\n            {{ subTotal | priceformat:pricePrefix }}\r\n        </p>\r\n       \r\n      </div>\r\n\r\n      <div class=\"saved\" *ngIf=\"!isProductDiscountHidden\">\r\n        <p>\r\n          <span [ngClass]=\"{ 'selected-text': isSelected }\"\r\n            >{{ \"durationCard.saved\" | translate }}: </span>\r\n            <br *ngIf=\"savings>10000 && isHaveMailBoxCounter\">\r\n          {{ savings | priceformat:pricePrefix }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div\r\n    *ngIf=\"isSelected && isHaveMailBoxCounter\"\r\n    id=\"mail-box-counter\"\r\n    class=\"mail-box-counter\"\r\n  >\r\n    <div class=\"count-icons d-flex\">\r\n      <span class=\"minus-icon\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-default\"\r\n          [disabled]=\"quantity == minQuantity\"\r\n          (click)=\"decreaseQuantity()\"\r\n        >\r\n          <i class=\"icon-minus-solid faMinus\"></i>\r\n        </button>\r\n      </span>\r\n      <input\r\n        type=\"text\"\r\n        class=\"mt-1 form-control\"\r\n        (change)=\"changeQuantity($event)\"\r\n        [(ngModel)]=\"quantity\"\r\n        [min]=\"minQuantity\"\r\n        [max]=\"maxQuantity\"\r\n      />\r\n      <span class=\"plus-icon\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-default\"\r\n          (click)=\"increaseQuantity()\"\r\n        >\r\n          <i class=\"icon-plus-solid\"></i>\r\n        </button>\r\n      </span>\r\n    </div>\r\n    <div class=\"mail-boxes\">\r\n      <p *ngIf=\"isSelected && isHaveMailBoxCounter\" class=\"mail-box\">\r\n        {{ \"durationCard.productUnit\" | translate }}\r\n      </p>\r\n    </div>\r\n  </div>\r\n  <div\r\n    [ngClass]=\"{ postion: isHaveMailBoxCounter && isSelected }\"\r\n    (click)=\"selectPlan()\"\r\n    *ngIf=\"!isSelected\"\r\n    class=\"select-box d-block\"\r\n  >\r\n    <button class=\"text-center\">\r\n      {{ \"durationCard.actionButtonText\" | translate }}\r\n    </button>\r\n  </div>\r\n  <div\r\n    [ngClass]=\"{ postion: isHaveMailBoxCounter && isSelected }\"\r\n    *ngIf=\"isSelected && !isHaveMailBoxCounter\"\r\n    class=\"select-box selected d-block\"\r\n  >\r\n    <button class=\"text-center\">\r\n      {{ \"durationCard.actionButtonSelectedText\" | translate }}\r\n    </button>\r\n  </div>\r\n</section>\r\n", styles: [".hiddenDiscount{visibility:hidden}.h-100{height:85%!important}.discounted-border-billing-cyle-duration,.default-border-billing-cyle-duration{border:1px solid #475569}.active-billing-cyle,.active-simi-billing-cyle{border:1px solid #16a34a;box-shadow:5px 5px 10px #0003}.inactive-billing-cyle,inactive-simi-billing-cyle{box-shadow:none}.active-saving-styles{background-color:#f0fdfa;color:#16a34a}.inactive-saving-styles{background-color:#fef3c7;color:#d97706}.btn:disabled{color:#222b55!important;border:1px solid #222B55!important;background:initial!important}.vissible{visibility:hidden}.hide-select-button{display:none}#billing-cyle-duration{background-color:#fff;text-align:center;border-radius:10px;padding:0 8px 8px}#billing-cyle-duration .saving{position:relative;width:91.591px;height:43.738px;margin:auto;border-radius:26px;bottom:25px;line-height:37px}#billing-cyle-duration .saving span{font-size:16px;font-style:normal;font-weight:600}#billing-cyle-duration .card-info-container{margin-bottom:16px}#billing-cyle-duration .card-info-container .term{padding:0 24.5px 16px;color:#222b55;font-size:20px;font-style:normal;font-weight:600}#billing-cyle-duration .card-info-container .price-before-discount{padding:0 24.5px 8px;color:#475569;font-size:12px;font-style:normal;font-weight:400;line-height:16px;text-decoration-line:line-through}#billing-cyle-duration .card-info-container .price{color:#000;font-size:30px;font-style:normal;font-weight:600;padding:8px 0}#billing-cyle-duration .card-info-container .price .discountPeriod{font-size:14px;font-weight:400;color:#475569}#billing-cyle-duration .card-info-container .period{padding:0 24.5px 8px;color:#475569;font-size:16px;font-style:normal;font-weight:600;margin-bottom:16px}#billing-cyle-duration .card-info-container .subtotal-saved-section span{color:#222b55}#billing-cyle-duration .card-info-container .subtotal-saved-section span.selected-text{color:var(--Status-Teal-600, #16a34a)}#billing-cyle-duration .card-info-container .subtotal-saved-section .sub-total-padding{padding-inline-end:1.25rem}#billing-cyle-duration .card-info-container .subtotal-saved-section .sub-total.br{padding-inline-end:3rem}#billing-cyle-duration .card-info-container .subtotal-saved-section .sub-total,#billing-cyle-duration .card-info-container .subtotal-saved-section .saved{font-size:11px;font-style:normal;font-weight:600;line-height:16px;white-space:nowrap}#billing-cyle-duration #mail-box-counter input[type=text]{text-align:center;border:none!important}#billing-cyle-duration #mail-box-counter .minus-icon button,#billing-cyle-duration #mail-box-counter .plus-icon button{cursor:initial;border:1px solid #222B55;color:#222b55;width:20px;display:flex;align-items:center;justify-content:center;height:38px}#billing-cyle-duration .plus-icon,#billing-cyle-duration .minus-icon{display:flex;align-items:end}#billing-cyle-duration .mail-box{color:#475569;font-size:12px;font-style:normal;font-weight:600}#billing-cyle-duration .select-box{position:relative;padding:10px 0;background-color:#fff;border-radius:8px;border:1px solid #0F172A;background:var(--Basic-White, #FFF);cursor:pointer}#billing-cyle-duration .select-box button{color:#222b55;font-size:16px;font-style:normal;font-weight:700}#billing-cyle-duration .select-box:hover{background-color:#f8fafc}#billing-cyle-duration .selected{border:1px solid #16a34a}#billing-cyle-duration .selected button{color:#16a34a}.postion{top:16px}@media only screen and (max-width: 991px){.select-box{top:-8px!important}}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.LanguageService }]; }, propDecorators: { productPriceAfterDiscountPerMonth: [{
                type: Input
            }], productPriceBeforeDiscount: [{
                type: Input
            }], productDiscountPercentage: [{
                type: Input
            }], billingCycle: [{
                type: Input
            }], billingCycleMonths: [{
                type: Input
            }], pricePrefix: [{
                type: Input
            }], isProductDiscountHidden: [{
                type: Input
            }], isSelected: [{
                type: Input
            }], isHaveMailBoxCounter: [{
                type: Input
            }], mailBoxsQuantityEvent: [{
                type: Output
            }], onBillingCycleSelection: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 