import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output } from '@angular/core';
import { NgIf, NgForOf, NgClass } from '@angular/common';
import { PriceFormatPipe, SanitizerHtmlPipe, PricePrefixTranslationPipe } from '@testlocallibrary/shared-kernel/pipes';
import * as i1 from '@ngx-translate/core';
import { TranslateModule } from '@ngx-translate/core';

class CartProductDetailsComponent {
    constructor() {
        this.language = "";
        this.isPaymentStage = false;
        this.deleteItem = new EventEmitter();
        this.changeRegesterationPeriod = new EventEmitter();
    }
    onItemDelete(cartItem) {
        this.deleteItem.emit(cartItem);
    }
    onRegesterationPeriodChange(value, domainName) {
        this.item.configurableOptions;
        let domainConfig = {
            registerationPeriod: value,
            domainName: domainName
        };
        this.changeRegesterationPeriod.emit(domainConfig);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CartProductDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CartProductDetailsComponent, isStandalone: true, selector: "lib-cart-product-details", inputs: { item: "item", language: "language", isPaymentStage: "isPaymentStage" }, outputs: { deleteItem: "deleteItem", changeRegesterationPeriod: "changeRegesterationPeriod" }, ngImport: i0, template: "<div class=\"accordion\" [attr.id]=\"'accordion-' + item.productId\">\r\n  <div class=\"accordion-item accordion-item-custom\">\r\n    <h2 class=\"accordion-header d-flex\">\r\n      <button\r\n        class=\"accordion-button accordion-button-top\"\r\n        [class.ar]=\"language=='ar'\"\r\n        type=\"button\"\r\n        data-bs-toggle=\"collapse\"\r\n        [attr.data-bs-target]=\"\r\n          item.doesProductHasDomain\r\n            ? '#domain-' + item.productId\r\n            : '#product-' + item.productId\r\n        \"\r\n        aria-expanded=\"true\"\r\n        [attr.aria-controls]=\"\r\n          item.doesProductHasDomain\r\n            ? 'domain-' + item.productId\r\n            : 'product-' + item.productId\r\n        \"\r\n      >\r\n        {{ item.productCategory }} - {{ item.planName }}\r\n      </button>\r\n      <div *ngIf=\"!isPaymentStage\"\r\n        class=\"delete-icon\"\r\n        type=\"button\"\r\n        data-bs-toggle=\"modal\"\r\n        [attr.data-bs-target]=\"\r\n          item.doesProductHasDomain\r\n            ? '#modal-domain-' + item.productId\r\n            : '#modal-product-' + item.productId\r\n        \"\r\n      ></div>\r\n    </h2>\r\n    <div class=\"break-line\"></div>\r\n    <div\r\n      [attr.id]=\"\r\n        item.doesProductHasDomain\r\n          ? 'domain-' + item.productId\r\n          : 'product-' + item.productId\r\n      \"\r\n      class=\"accordion-collapse collapse show\"\r\n    >\r\n      <div class=\"accordion-body accordion-body-custom\">\r\n        <ul>\r\n          <li\r\n            class=\"d-flex flex-wrap justify-content-between w-100\"\r\n            *ngFor=\"let option of item.configurableOptions\"\r\n          >\r\n            <p\r\n              class=\"config-option col-lg-6 col-12\"\r\n              *ngIf=\"option.isConfigOption; else isPlanName\"\r\n            >\r\n              {{ option.configOptionName }} -\r\n              <span class=\"option\">{{ option.option }}</span>\r\n            </p>\r\n            <ng-template #isPlanName>\r\n              <p class=\"config-option col-12\"\r\n              [class.col-lg-6]=\"option.isDomain\"\r\n              [class.col-lg-8]=\"!option.isDomain\"\r\n              >\r\n                {{ option.planName }} / {{ option.billingCycle }}\r\n              </p>\r\n            </ng-template>\r\n            <p\r\n              class=\"dash col-lg-6 col-12\"\r\n              *ngIf=\"option.hasDomain; else hasPrice\"\r\n            >\r\n              -\r\n            </p>\r\n            <ng-template #hasPrice>\r\n              <div class=\"price d-flex col-12 align-items-center\" [class.col-lg-6]=\"option.isDomain\" [class.col-lg-4]=\"!option.isDomain\">\r\n                <div\r\n                  class=\"dropdown select-registeration col-12 col-lg-6\"\r\n                  *ngIf=\"\r\n                    option.isDomain && !option.isVisible && !option.isDimmed && item.pricing?.tldYears?.length !==1\r\n                  \"\r\n                >\r\n                  <button\r\n                    class=\"form-select\"\r\n                    type=\"button\"\r\n                    data-bs-toggle=\"dropdown\"\r\n                    aria-expanded=\"false\"\r\n                    [class.ar]=\"language=='ar'\"\r\n                    [disabled]=\"isPaymentStage\"\r\n                  >\r\n                    {{ option.selectedRegisterationYear ?? \"1\"\r\n                    }} {{\r\n                      option.selectedRegisterationYear == \"1\"\r\n                        ? ('cartContent.year'|translate)\r\n                        : ('cartContent.years'|translate)\r\n                    }}\r\n                  </button>\r\n                  <ul class=\"dropdown-menu dropdown-menu-custom\" *ngIf=\"!isPaymentStage\">\r\n                    <ng-container\r\n                      *ngFor=\"let tld of item.pricing?.tldYears; let i = index\"\r\n                    >\r\n                      <li\r\n                        *ngIf=\"tld !== null\"\r\n                        (click)=\"onRegesterationPeriodChange(i, item.planName!)\"\r\n                      >\r\n                        <a class=\"dropdown-item dropdown-item-custom\"\r\n                          >{{ i + 1 }} {{ i == 0 ? ('cartContent.year'|translate) : ('cartContent.years'|translate) }}</a\r\n                        >\r\n                      </li>\r\n                    </ng-container>\r\n                  </ul>\r\n                </div>\r\n                <div\r\n                  class=\"dropdown select-registeration col-12 col-lg-6\"\r\n                  *ngIf=\"option.isDimmed && item.pricing?.tldYears?.length !==1\"\r\n                >\r\n                  <button\r\n                    class=\"form-select dimmed\"\r\n                    [class.ar]=\"language=='ar'\"\r\n                    type=\"button\"\r\n                    data-bs-toggle=\"dropdown\"\r\n                    aria-expanded=\"false\"\r\n                    disabled\r\n                  >\r\n                    1 {{'cartContent.year'|translate}}\r\n                  </button>\r\n                  <ul class=\"dropdown-menu dropdown-menu-custom\">\r\n                    <li>\r\n                      <a class=\"dropdown-item dropdown-item-custom\">1 year</a>\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n                <span\r\n                  [ngClass]=\"option.isPlanDiscounted ? 'discounted-price' : ''\"\r\n                  class=\"col-12 col-lg-6\" [class.ltr]=\"language=='ar'\"\r\n                >\r\n                  {{ item.pricePrefix |pricePrefixTranslation\r\n                  }}{{ option.price ?? 0 | priceformat }}</span\r\n                >\r\n                <span class=\"col-12 col-lg-6\" [class.ltr]=\"language=='ar'\" *ngIf=\"option.isPlanDiscounted\"\r\n                  >{{ item.pricePrefix |pricePrefixTranslation\r\n                  }}{{ option.discountedPrice ?? 0 | priceformat }}</span\r\n                >\r\n              </div>\r\n            </ng-template>\r\n          </li>\r\n        </ul>\r\n      </div>\r\n      <div class=\"break-line\"></div>\r\n    </div>\r\n    <span class=\"accordion-button accordion-button-bottom d-block\">\r\n      <ul>\r\n        <li\r\n          *ngIf=\"item.isDiscounted\"\r\n          class=\"d-flex justify-content-between w-100\"\r\n        >\r\n          <p class=\"saved-amount\">{{'cartContent.savedAmount'|translate}}</p>\r\n          <p class=\"saved-amount\" [class.ltr]=\"language=='ar'\">\r\n            {{ item.pricePrefix |pricePrefixTranslation }}{{ item.savedAmount | priceformat }}\r\n          </p>\r\n        </li>\r\n        <li class=\"d-flex justify-content-between w-100\">\r\n          <p class=\"total\">{{'cartContent.total'|translate}}</p>\r\n          <p class=\"total\" [class.ltr]=\"language=='ar'\">\r\n            {{ item.pricePrefix |pricePrefixTranslation}}{{ item.total | priceformat }}\r\n          </p>\r\n        </li>\r\n      </ul>\r\n    </span>\r\n  </div>\r\n</div>\r\n\r\n<!-- Modal -->\r\n<div\r\n  class=\"modal fade\"\r\n  [attr.id]=\"\r\n    item.doesProductHasDomain\r\n      ? 'modal-domain-' + item.productId\r\n      : 'modal-product-' + item.productId\r\n  \"\r\n  data-bs-backdrop=\"static\"\r\n  data-bs-keyboard=\"false\"\r\n  tabindex=\"-1\"\r\n  aria-labelledby=\"staticBackdropLabel\"\r\n  aria-hidden=\"true\"\r\n>\r\n  <div class=\"modal-dialog modal-dialog-centered\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <h1 class=\"modal-title fs-5 text-danger\" id=\"staticBackdropLabel\">\r\n          {{'cartContent.deletionMessage.messageHeader' | translate}}\r\n        </h1>\r\n      </div>\r\n      <div\r\n        class=\"modal-body\"\r\n        [innerHTML]=\"item.alertMessage | sanitizerHtml\"\r\n      ></div>\r\n      <div class=\"d-flex justify-content-end g-2\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-outline-secondary cancel-btn\"\r\n          data-bs-dismiss=\"modal\"\r\n        >\r\n          {{'cartContent.deletionMessage.cancelActionButtonText' | translate}}\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-danger\"\r\n          (click)=\"onItemDelete(item)\"\r\n          data-bs-dismiss=\"modal\"\r\n        >\r\n          {{'cartContent.deletionMessage.deleteActionButtonText' | translate}}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".accordion-item-custom{border-radius:.625rem;border:1px solid #09b05d}.accordion-button-top:before{flex-shrink:0;width:24px;height:24px;content:\"\";background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2225%22 height%3D%2226%22 viewBox%3D%220 0 25 26%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cg id%3D%22right arrow %2F 24 %2F Outline%22%3E%0D%3Cpath id%3D%22Vector%22 d%3D%22M13.3679 15.8279L17.5958 11.5759C17.6893 11.4827 17.7633 11.3718 17.8138 11.2498C17.8642 11.1278 17.8899 10.9971 17.8896 10.865C17.8892 10.733 17.8627 10.6024 17.8116 10.4807C17.7605 10.359 17.6857 10.2486 17.5917 10.1559C17.4039 9.97017 17.1501 9.86635 16.8859 9.86711C16.6217 9.86786 16.3686 9.97312 16.1818 10.1599L12.6518 13.71L9.10178 10.18C8.91389 9.99433 8.66014 9.89051 8.39596 9.89126C8.13177 9.89201 7.87862 9.99727 7.69179 10.1841C7.59937 10.2778 7.52636 10.3888 7.47695 10.5108C7.42753 10.6327 7.40268 10.7633 7.40381 10.8949C7.40342 11.0265 7.42902 11.1569 7.47913 11.2786C7.52924 11.4003 7.60288 11.5109 7.69583 11.6041L11.9479 15.832C12.0411 15.9254 12.1519 15.9995 12.2739 16.0499C12.3959 16.1004 12.5267 16.1261 12.6587 16.1257C12.7907 16.1254 12.9214 16.0989 13.0431 16.0477C13.1648 15.9966 13.2752 15.9219 13.3679 15.8279Z%22 fill%3D%22%230D9488%22%2F%3E%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\");background-repeat:no-repeat;background-size:24px;transition:var(--bs-accordion-btn-icon-transition)}.accordion-button-top:not(.collapsed):before{transform:var(--bs-accordion-btn-icon-transform)}.accordion-button-bottom{padding:.88rem 2rem 2rem;font-size:1rem}.break-line{width:89%;margin:auto;height:.0625rem;background-color:#cbd5e1}.delete-icon{width:16px;height:16px;content:\"\";background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2215%22 height%3D%2216%22 viewBox%3D%220 0 15 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cg id%3D%22Group%22%3E%0D%3Cpath id%3D%22Vector%22 d%3D%22M13.625 2.5H10.5V1.875C10.5 0.841125 9.65888 0 8.625 0H6.125C5.09113 0 4.25 0.841125 4.25 1.875V2.5H1.125C0.779813 2.5 0.5 2.77981 0.5 3.125C0.5 3.47019 0.779813 3.75 1.125 3.75C1.46963 3.75 1.75 4.03038 1.75 4.375V14.125C1.75 15.1589 2.59113 16 3.625 16H11.125C12.1589 16 13 15.1589 13 14.125V4.375C13 4.03038 13.2804 3.75 13.625 3.75C13.9702 3.75 14.25 3.47019 14.25 3.125C14.25 2.77981 13.9702 2.5 13.625 2.5ZM5.5 1.875C5.5 1.53038 5.78038 1.25 6.125 1.25H8.625C8.96963 1.25 9.25 1.53038 9.25 1.875V2.5H5.5V1.875ZM11.75 4.375V14.125C11.75 14.4696 11.4696 14.75 11.125 14.75H3.625C3.28038 14.75 3 14.4696 3 14.125V4.375C3 4.15591 2.96188 3.94563 2.8925 3.75H11.8575C11.7881 3.94563 11.75 4.15591 11.75 4.375Z%22 fill%3D%22%230F172A%22%2F%3E%0D%3Cpath id%3D%22Vector_2%22 d%3D%22M4.875 5C4.52981 5 4.25 5.27981 4.25 5.625V12.875C4.25 13.2202 4.52981 13.5 4.875 13.5C5.22019 13.5 5.5 13.2202 5.5 12.875V5.625C5.5 5.27981 5.22019 5 4.875 5Z%22 fill%3D%22%230F172A%22%2F%3E%0D%3Cpath id%3D%22Vector_3%22 d%3D%22M7.375 5C7.02981 5 6.75 5.27981 6.75 5.625V12.875C6.75 13.2202 7.02981 13.5 7.375 13.5C7.72019 13.5 8 13.2202 8 12.875V5.625C8 5.27981 7.72019 5 7.375 5Z%22 fill%3D%22%230F172A%22%2F%3E%0D%3Cpath id%3D%22Vector_4%22 d%3D%22M9.25 5.625V12.875C9.25 13.2202 9.52981 13.5 9.875 13.5C10.2202 13.5 10.5 13.2202 10.5 12.875V5.625C10.5 5.27981 10.2202 5 9.875 5C9.52981 5 9.25 5.27981 9.25 5.625Z%22 fill%3D%22%230F172A%22%2F%3E%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\");background-repeat:no-repeat;margin:auto 0 1.25rem;cursor:pointer}.accordion-body-custom{padding-inline-start:2rem;padding-inline-end:2rem}.accordion-button-top,.accordion-button-bottom{background-color:transparent;border:none;box-shadow:none;font-weight:600}.accordion-button-top:after,.accordion-button-bottom:after{display:none}.accordion-button-top:focus,.accordion-button-bottom:focus{box-shadow:none;border:none}.accordion-button-top{font-size:1.25rem;padding:2rem 0 .88rem 2rem;width:91%;color:#222b55}.accordion-button-top.ar{padding:2rem 2rem .88rem 0}ul li{margin-top:.88rem}ul li:first-child{margin-top:0}.config-option{font-weight:600;color:#0f172a}.config-option .option{font-weight:400}.price.col-lg-6{width:45%}.price{font-weight:600;justify-content:flex-end}.price span{flex-basis:content}.price .discounted-price{text-decoration:line-through;color:#e11d48;font-size:.75rem;font-weight:400;margin-inline-end:.5rem}.dash{font-size:2.25rem;font-weight:600;line-height:1.5rem;color:#0f172a;flex-basis:content}.select-registeration{margin-inline-end:.5rem;width:60%}.select-registeration button{text-align:start}.form-select{border-color:#94a3b8}.form-select:focus{border-color:#4661a8;box-shadow:0 0 0 2px #aab6dc}ul.dropdown-menu-custom{padding:.25rem;box-shadow:0 10px 22px #2d4d6c26;width:100%}ul.dropdown-menu-custom li{margin-top:0;font-size:.875rem;color:#0f172a}.dropdown-item-custom{padding:.5rem 1.25rem}.dropdown-item-custom:hover{background-color:#f1f5f9;border-radius:.5rem;cursor:pointer}.dropdown-item-custom:active{border-radius:.5rem;background-color:#cbd3ee;color:#0f172a}.modal-content{padding:32px}.modal-content .modal-header{border-bottom-width:2px;padding:0 0 14px}.modal-content .modal-body{padding:1rem 0}.cancel-btn{margin-inline-end:12px}.form-select.dimmed{background-image:none}.form-select.ar{background-position:left .75rem center;padding:.375rem .75rem .375rem 2.25rem}@media screen and (max-width: 992px){.accordion-button-top{padding-inline-end:1.5rem}.price{flex-direction:column-reverse;margin-inline-start:auto;width:-moz-fit-content;width:fit-content;margin-top:.5rem}.price span{margin-inline-start:auto;color:#09b05d;width:-moz-fit-content;width:fit-content}.price .discounted-price{margin-inline-end:0}.price:has(>.select-registeration){flex-direction:row;margin-inline-start:0;justify-content:space-between;width:100%}.price:has(>.select-registeration) .select-registeration{width:50%}.select-registeration{margin-inline-end:0;width:50%}.dash{margin-inline-start:auto}}\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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: PriceFormatPipe, name: "priceformat" }, { kind: "pipe", type: SanitizerHtmlPipe, name: "sanitizerHtml" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: PricePrefixTranslationPipe, name: "pricePrefixTranslation" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CartProductDetailsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'lib-cart-product-details', standalone: true, imports: [NgIf, NgForOf, NgClass, PriceFormatPipe, SanitizerHtmlPipe, TranslateModule, PricePrefixTranslationPipe], template: "<div class=\"accordion\" [attr.id]=\"'accordion-' + item.productId\">\r\n  <div class=\"accordion-item accordion-item-custom\">\r\n    <h2 class=\"accordion-header d-flex\">\r\n      <button\r\n        class=\"accordion-button accordion-button-top\"\r\n        [class.ar]=\"language=='ar'\"\r\n        type=\"button\"\r\n        data-bs-toggle=\"collapse\"\r\n        [attr.data-bs-target]=\"\r\n          item.doesProductHasDomain\r\n            ? '#domain-' + item.productId\r\n            : '#product-' + item.productId\r\n        \"\r\n        aria-expanded=\"true\"\r\n        [attr.aria-controls]=\"\r\n          item.doesProductHasDomain\r\n            ? 'domain-' + item.productId\r\n            : 'product-' + item.productId\r\n        \"\r\n      >\r\n        {{ item.productCategory }} - {{ item.planName }}\r\n      </button>\r\n      <div *ngIf=\"!isPaymentStage\"\r\n        class=\"delete-icon\"\r\n        type=\"button\"\r\n        data-bs-toggle=\"modal\"\r\n        [attr.data-bs-target]=\"\r\n          item.doesProductHasDomain\r\n            ? '#modal-domain-' + item.productId\r\n            : '#modal-product-' + item.productId\r\n        \"\r\n      ></div>\r\n    </h2>\r\n    <div class=\"break-line\"></div>\r\n    <div\r\n      [attr.id]=\"\r\n        item.doesProductHasDomain\r\n          ? 'domain-' + item.productId\r\n          : 'product-' + item.productId\r\n      \"\r\n      class=\"accordion-collapse collapse show\"\r\n    >\r\n      <div class=\"accordion-body accordion-body-custom\">\r\n        <ul>\r\n          <li\r\n            class=\"d-flex flex-wrap justify-content-between w-100\"\r\n            *ngFor=\"let option of item.configurableOptions\"\r\n          >\r\n            <p\r\n              class=\"config-option col-lg-6 col-12\"\r\n              *ngIf=\"option.isConfigOption; else isPlanName\"\r\n            >\r\n              {{ option.configOptionName }} -\r\n              <span class=\"option\">{{ option.option }}</span>\r\n            </p>\r\n            <ng-template #isPlanName>\r\n              <p class=\"config-option col-12\"\r\n              [class.col-lg-6]=\"option.isDomain\"\r\n              [class.col-lg-8]=\"!option.isDomain\"\r\n              >\r\n                {{ option.planName }} / {{ option.billingCycle }}\r\n              </p>\r\n            </ng-template>\r\n            <p\r\n              class=\"dash col-lg-6 col-12\"\r\n              *ngIf=\"option.hasDomain; else hasPrice\"\r\n            >\r\n              -\r\n            </p>\r\n            <ng-template #hasPrice>\r\n              <div class=\"price d-flex col-12 align-items-center\" [class.col-lg-6]=\"option.isDomain\" [class.col-lg-4]=\"!option.isDomain\">\r\n                <div\r\n                  class=\"dropdown select-registeration col-12 col-lg-6\"\r\n                  *ngIf=\"\r\n                    option.isDomain && !option.isVisible && !option.isDimmed && item.pricing?.tldYears?.length !==1\r\n                  \"\r\n                >\r\n                  <button\r\n                    class=\"form-select\"\r\n                    type=\"button\"\r\n                    data-bs-toggle=\"dropdown\"\r\n                    aria-expanded=\"false\"\r\n                    [class.ar]=\"language=='ar'\"\r\n                    [disabled]=\"isPaymentStage\"\r\n                  >\r\n                    {{ option.selectedRegisterationYear ?? \"1\"\r\n                    }} {{\r\n                      option.selectedRegisterationYear == \"1\"\r\n                        ? ('cartContent.year'|translate)\r\n                        : ('cartContent.years'|translate)\r\n                    }}\r\n                  </button>\r\n                  <ul class=\"dropdown-menu dropdown-menu-custom\" *ngIf=\"!isPaymentStage\">\r\n                    <ng-container\r\n                      *ngFor=\"let tld of item.pricing?.tldYears; let i = index\"\r\n                    >\r\n                      <li\r\n                        *ngIf=\"tld !== null\"\r\n                        (click)=\"onRegesterationPeriodChange(i, item.planName!)\"\r\n                      >\r\n                        <a class=\"dropdown-item dropdown-item-custom\"\r\n                          >{{ i + 1 }} {{ i == 0 ? ('cartContent.year'|translate) : ('cartContent.years'|translate) }}</a\r\n                        >\r\n                      </li>\r\n                    </ng-container>\r\n                  </ul>\r\n                </div>\r\n                <div\r\n                  class=\"dropdown select-registeration col-12 col-lg-6\"\r\n                  *ngIf=\"option.isDimmed && item.pricing?.tldYears?.length !==1\"\r\n                >\r\n                  <button\r\n                    class=\"form-select dimmed\"\r\n                    [class.ar]=\"language=='ar'\"\r\n                    type=\"button\"\r\n                    data-bs-toggle=\"dropdown\"\r\n                    aria-expanded=\"false\"\r\n                    disabled\r\n                  >\r\n                    1 {{'cartContent.year'|translate}}\r\n                  </button>\r\n                  <ul class=\"dropdown-menu dropdown-menu-custom\">\r\n                    <li>\r\n                      <a class=\"dropdown-item dropdown-item-custom\">1 year</a>\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n                <span\r\n                  [ngClass]=\"option.isPlanDiscounted ? 'discounted-price' : ''\"\r\n                  class=\"col-12 col-lg-6\" [class.ltr]=\"language=='ar'\"\r\n                >\r\n                  {{ item.pricePrefix |pricePrefixTranslation\r\n                  }}{{ option.price ?? 0 | priceformat }}</span\r\n                >\r\n                <span class=\"col-12 col-lg-6\" [class.ltr]=\"language=='ar'\" *ngIf=\"option.isPlanDiscounted\"\r\n                  >{{ item.pricePrefix |pricePrefixTranslation\r\n                  }}{{ option.discountedPrice ?? 0 | priceformat }}</span\r\n                >\r\n              </div>\r\n            </ng-template>\r\n          </li>\r\n        </ul>\r\n      </div>\r\n      <div class=\"break-line\"></div>\r\n    </div>\r\n    <span class=\"accordion-button accordion-button-bottom d-block\">\r\n      <ul>\r\n        <li\r\n          *ngIf=\"item.isDiscounted\"\r\n          class=\"d-flex justify-content-between w-100\"\r\n        >\r\n          <p class=\"saved-amount\">{{'cartContent.savedAmount'|translate}}</p>\r\n          <p class=\"saved-amount\" [class.ltr]=\"language=='ar'\">\r\n            {{ item.pricePrefix |pricePrefixTranslation }}{{ item.savedAmount | priceformat }}\r\n          </p>\r\n        </li>\r\n        <li class=\"d-flex justify-content-between w-100\">\r\n          <p class=\"total\">{{'cartContent.total'|translate}}</p>\r\n          <p class=\"total\" [class.ltr]=\"language=='ar'\">\r\n            {{ item.pricePrefix |pricePrefixTranslation}}{{ item.total | priceformat }}\r\n          </p>\r\n        </li>\r\n      </ul>\r\n    </span>\r\n  </div>\r\n</div>\r\n\r\n<!-- Modal -->\r\n<div\r\n  class=\"modal fade\"\r\n  [attr.id]=\"\r\n    item.doesProductHasDomain\r\n      ? 'modal-domain-' + item.productId\r\n      : 'modal-product-' + item.productId\r\n  \"\r\n  data-bs-backdrop=\"static\"\r\n  data-bs-keyboard=\"false\"\r\n  tabindex=\"-1\"\r\n  aria-labelledby=\"staticBackdropLabel\"\r\n  aria-hidden=\"true\"\r\n>\r\n  <div class=\"modal-dialog modal-dialog-centered\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <h1 class=\"modal-title fs-5 text-danger\" id=\"staticBackdropLabel\">\r\n          {{'cartContent.deletionMessage.messageHeader' | translate}}\r\n        </h1>\r\n      </div>\r\n      <div\r\n        class=\"modal-body\"\r\n        [innerHTML]=\"item.alertMessage | sanitizerHtml\"\r\n      ></div>\r\n      <div class=\"d-flex justify-content-end g-2\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-outline-secondary cancel-btn\"\r\n          data-bs-dismiss=\"modal\"\r\n        >\r\n          {{'cartContent.deletionMessage.cancelActionButtonText' | translate}}\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-danger\"\r\n          (click)=\"onItemDelete(item)\"\r\n          data-bs-dismiss=\"modal\"\r\n        >\r\n          {{'cartContent.deletionMessage.deleteActionButtonText' | translate}}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".accordion-item-custom{border-radius:.625rem;border:1px solid #09b05d}.accordion-button-top:before{flex-shrink:0;width:24px;height:24px;content:\"\";background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2225%22 height%3D%2226%22 viewBox%3D%220 0 25 26%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cg id%3D%22right arrow %2F 24 %2F Outline%22%3E%0D%3Cpath id%3D%22Vector%22 d%3D%22M13.3679 15.8279L17.5958 11.5759C17.6893 11.4827 17.7633 11.3718 17.8138 11.2498C17.8642 11.1278 17.8899 10.9971 17.8896 10.865C17.8892 10.733 17.8627 10.6024 17.8116 10.4807C17.7605 10.359 17.6857 10.2486 17.5917 10.1559C17.4039 9.97017 17.1501 9.86635 16.8859 9.86711C16.6217 9.86786 16.3686 9.97312 16.1818 10.1599L12.6518 13.71L9.10178 10.18C8.91389 9.99433 8.66014 9.89051 8.39596 9.89126C8.13177 9.89201 7.87862 9.99727 7.69179 10.1841C7.59937 10.2778 7.52636 10.3888 7.47695 10.5108C7.42753 10.6327 7.40268 10.7633 7.40381 10.8949C7.40342 11.0265 7.42902 11.1569 7.47913 11.2786C7.52924 11.4003 7.60288 11.5109 7.69583 11.6041L11.9479 15.832C12.0411 15.9254 12.1519 15.9995 12.2739 16.0499C12.3959 16.1004 12.5267 16.1261 12.6587 16.1257C12.7907 16.1254 12.9214 16.0989 13.0431 16.0477C13.1648 15.9966 13.2752 15.9219 13.3679 15.8279Z%22 fill%3D%22%230D9488%22%2F%3E%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\");background-repeat:no-repeat;background-size:24px;transition:var(--bs-accordion-btn-icon-transition)}.accordion-button-top:not(.collapsed):before{transform:var(--bs-accordion-btn-icon-transform)}.accordion-button-bottom{padding:.88rem 2rem 2rem;font-size:1rem}.break-line{width:89%;margin:auto;height:.0625rem;background-color:#cbd5e1}.delete-icon{width:16px;height:16px;content:\"\";background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2215%22 height%3D%2216%22 viewBox%3D%220 0 15 16%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cg id%3D%22Group%22%3E%0D%3Cpath id%3D%22Vector%22 d%3D%22M13.625 2.5H10.5V1.875C10.5 0.841125 9.65888 0 8.625 0H6.125C5.09113 0 4.25 0.841125 4.25 1.875V2.5H1.125C0.779813 2.5 0.5 2.77981 0.5 3.125C0.5 3.47019 0.779813 3.75 1.125 3.75C1.46963 3.75 1.75 4.03038 1.75 4.375V14.125C1.75 15.1589 2.59113 16 3.625 16H11.125C12.1589 16 13 15.1589 13 14.125V4.375C13 4.03038 13.2804 3.75 13.625 3.75C13.9702 3.75 14.25 3.47019 14.25 3.125C14.25 2.77981 13.9702 2.5 13.625 2.5ZM5.5 1.875C5.5 1.53038 5.78038 1.25 6.125 1.25H8.625C8.96963 1.25 9.25 1.53038 9.25 1.875V2.5H5.5V1.875ZM11.75 4.375V14.125C11.75 14.4696 11.4696 14.75 11.125 14.75H3.625C3.28038 14.75 3 14.4696 3 14.125V4.375C3 4.15591 2.96188 3.94563 2.8925 3.75H11.8575C11.7881 3.94563 11.75 4.15591 11.75 4.375Z%22 fill%3D%22%230F172A%22%2F%3E%0D%3Cpath id%3D%22Vector_2%22 d%3D%22M4.875 5C4.52981 5 4.25 5.27981 4.25 5.625V12.875C4.25 13.2202 4.52981 13.5 4.875 13.5C5.22019 13.5 5.5 13.2202 5.5 12.875V5.625C5.5 5.27981 5.22019 5 4.875 5Z%22 fill%3D%22%230F172A%22%2F%3E%0D%3Cpath id%3D%22Vector_3%22 d%3D%22M7.375 5C7.02981 5 6.75 5.27981 6.75 5.625V12.875C6.75 13.2202 7.02981 13.5 7.375 13.5C7.72019 13.5 8 13.2202 8 12.875V5.625C8 5.27981 7.72019 5 7.375 5Z%22 fill%3D%22%230F172A%22%2F%3E%0D%3Cpath id%3D%22Vector_4%22 d%3D%22M9.25 5.625V12.875C9.25 13.2202 9.52981 13.5 9.875 13.5C10.2202 13.5 10.5 13.2202 10.5 12.875V5.625C10.5 5.27981 10.2202 5 9.875 5C9.52981 5 9.25 5.27981 9.25 5.625Z%22 fill%3D%22%230F172A%22%2F%3E%0D%3C%2Fg%3E%0D%3C%2Fsvg%3E%0D\");background-repeat:no-repeat;margin:auto 0 1.25rem;cursor:pointer}.accordion-body-custom{padding-inline-start:2rem;padding-inline-end:2rem}.accordion-button-top,.accordion-button-bottom{background-color:transparent;border:none;box-shadow:none;font-weight:600}.accordion-button-top:after,.accordion-button-bottom:after{display:none}.accordion-button-top:focus,.accordion-button-bottom:focus{box-shadow:none;border:none}.accordion-button-top{font-size:1.25rem;padding:2rem 0 .88rem 2rem;width:91%;color:#222b55}.accordion-button-top.ar{padding:2rem 2rem .88rem 0}ul li{margin-top:.88rem}ul li:first-child{margin-top:0}.config-option{font-weight:600;color:#0f172a}.config-option .option{font-weight:400}.price.col-lg-6{width:45%}.price{font-weight:600;justify-content:flex-end}.price span{flex-basis:content}.price .discounted-price{text-decoration:line-through;color:#e11d48;font-size:.75rem;font-weight:400;margin-inline-end:.5rem}.dash{font-size:2.25rem;font-weight:600;line-height:1.5rem;color:#0f172a;flex-basis:content}.select-registeration{margin-inline-end:.5rem;width:60%}.select-registeration button{text-align:start}.form-select{border-color:#94a3b8}.form-select:focus{border-color:#4661a8;box-shadow:0 0 0 2px #aab6dc}ul.dropdown-menu-custom{padding:.25rem;box-shadow:0 10px 22px #2d4d6c26;width:100%}ul.dropdown-menu-custom li{margin-top:0;font-size:.875rem;color:#0f172a}.dropdown-item-custom{padding:.5rem 1.25rem}.dropdown-item-custom:hover{background-color:#f1f5f9;border-radius:.5rem;cursor:pointer}.dropdown-item-custom:active{border-radius:.5rem;background-color:#cbd3ee;color:#0f172a}.modal-content{padding:32px}.modal-content .modal-header{border-bottom-width:2px;padding:0 0 14px}.modal-content .modal-body{padding:1rem 0}.cancel-btn{margin-inline-end:12px}.form-select.dimmed{background-image:none}.form-select.ar{background-position:left .75rem center;padding:.375rem .75rem .375rem 2.25rem}@media screen and (max-width: 992px){.accordion-button-top{padding-inline-end:1.5rem}.price{flex-direction:column-reverse;margin-inline-start:auto;width:-moz-fit-content;width:fit-content;margin-top:.5rem}.price span{margin-inline-start:auto;color:#09b05d;width:-moz-fit-content;width:fit-content}.price .discounted-price{margin-inline-end:0}.price:has(>.select-registeration){flex-direction:row;margin-inline-start:0;justify-content:space-between;width:100%}.price:has(>.select-registeration) .select-registeration{width:50%}.select-registeration{margin-inline-end:0;width:50%}.dash{margin-inline-start:auto}}\n"] }]
        }], propDecorators: { item: [{
                type: Input
            }], language: [{
                type: Input
            }], isPaymentStage: [{
                type: Input
            }], deleteItem: [{
                type: Output
            }], changeRegesterationPeriod: [{
                type: Output
            }] } });

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

export { CartProductDetailsComponent };
//# sourceMappingURL=testlocallibrary-shared-kernel-components-cart-product-details.mjs.map
