@spartacus/cart/fesm2015/spartacus-cart-saved-cart-components.js

`@spartacus/cart` is a package that you can include in your application, which allows you to use various cart features.

import * as i0 from '@angular/core';
import { Component, ChangeDetectionStrategy, ViewChild, NgModule, Injectable, HostListener } from '@angular/core';
import { Subscription, combineLatest, merge } from 'rxjs';
import { tap, map, take, distinctUntilChanged, filter, switchMap, shareReplay, mapTo } from 'rxjs/operators';
import * as i1 from '@spartacus/core';
import { I18nModule, UrlModule, ConfigModule, PromotionLocation, GlobalMessageType, AuthGuard, provideDefaultConfig, provideConfig } from '@spartacus/core';
import * as i3 from '@spartacus/storefront';
import { ICON_TYPE, CartSharedModule, CardModule, MediaModule, AddToCartModule, IconModule, SpinnerModule, ListNavigationModule, DIALOG_TYPE, FormErrorsModule, KeyboardFocusModule } from '@spartacus/storefront';
import * as i4 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i4$1 from '@angular/router';
import { RouterModule } from '@angular/router';
import * as i2 from '@spartacus/cart/saved-cart/root';
import { SavedCartFormType, DeleteSavedCartSuccessEvent, DeleteSavedCartEvent, DeleteSavedCartFailEvent } from '@spartacus/cart/saved-cart/root';
import * as i5 from '@angular/forms';
import { FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';

class AddToSavedCartComponent {
    constructor(activeCartService, authService, routingService, vcr, launchDialogService) {
        this.activeCartService = activeCartService;
        this.authService = authService;
        this.routingService = routingService;
        this.vcr = vcr;
        this.launchDialogService = launchDialogService;
        this.subscription = new Subscription();
        this.loggedIn = false;
    }
    ngOnInit() {
        this.cart$ = combineLatest([
            this.activeCartService.getActive(),
            this.authService.isUserLoggedIn(),
        ]).pipe(tap(([_, loggedIn]) => (this.loggedIn = loggedIn)), map(([activeCart]) => activeCart));
    }
    saveCart(cart) {
        if (this.loggedIn) {
            this.openDialog(cart);
        }
        else {
            this.routingService.go({ cxRoute: 'login' });
        }
    }
    openDialog(cart) {
        const dialog = this.launchDialogService.openDialog("SAVED_CART" /* SAVED_CART */, this.element, this.vcr, { cart, layoutOption: 'save' });
        if (dialog) {
            this.subscription.add(dialog.pipe(take(1)).subscribe());
        }
    }
    ngOnDestroy() {
        var _a;
        (_a = this.subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
    }
}
AddToSavedCartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: AddToSavedCartComponent, deps: [{ token: i1.ActiveCartService }, { token: i1.AuthService }, { token: i1.RoutingService }, { token: i0.ViewContainerRef }, { token: i3.LaunchDialogService }], target: i0.ɵɵFactoryTarget.Component });
AddToSavedCartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: AddToSavedCartComponent, selector: "cx-add-to-saved-cart", viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"cart$ | async as cart\">\n  <div class=\"cx-add-to-saved-cart-container\">\n    <button\n      class=\"link cx-action-link\"\n      [routerLink]=\"\n        {\n          cxRoute: 'savedCarts'\n        } | cxUrl\n      \"\n      cxAutoFocus\n    >\n      <span>{{ 'addToSavedCart.savedCarts' | cxTranslate }}</span>\n    </button>\n    <button\n      #element\n      class=\"link cx-action-link\"\n      (click)=\"saveCart(cart)\"\n      cxAutoFocus\n    >\n      <span>{{ 'addToSavedCart.saveCartForLater' | cxTranslate }}</span>\n    </button>\n  </div>\n</ng-container>\n", directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["routerLink", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }], pipes: { "async": i4.AsyncPipe, "cxUrl": i1.UrlPipe, "cxTranslate": i1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: AddToSavedCartComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'cx-add-to-saved-cart',
                    templateUrl: './add-to-saved-cart.component.html',
                    changeDetection: ChangeDetectionStrategy.OnPush,
                }]
        }], ctorParameters: function () { return [{ type: i1.ActiveCartService }, { type: i1.AuthService }, { type: i1.RoutingService }, { type: i0.ViewContainerRef }, { type: i3.LaunchDialogService }]; }, propDecorators: { element: [{
                type: ViewChild,
                args: ['element']
            }] } });

class AddToSavedCartModule {
}
AddToSavedCartModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: AddToSavedCartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
AddToSavedCartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: AddToSavedCartModule, declarations: [AddToSavedCartComponent], imports: [CommonModule,
        RouterModule, i1.ConfigModule, I18nModule,
        UrlModule], exports: [AddToSavedCartComponent] });
AddToSavedCartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: AddToSavedCartModule, imports: [[
            CommonModule,
            RouterModule,
            ConfigModule.withConfig({
                cmsComponents: {
                    AddToSavedCartsComponent: {
                        component: AddToSavedCartComponent,
                    },
                },
            }),
            I18nModule,
            UrlModule,
        ]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: AddToSavedCartModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        CommonModule,
                        RouterModule,
                        ConfigModule.withConfig({
                            cmsComponents: {
                                AddToSavedCartsComponent: {
                                    component: AddToSavedCartComponent,
                                },
                            },
                        }),
                        I18nModule,
                        UrlModule,
                    ],
                    exports: [AddToSavedCartComponent],
                    declarations: [AddToSavedCartComponent],
                }]
        }] });

class SavedCartDetailsService {
    constructor(routingService, savedCartService) {
        this.routingService = routingService;
        this.savedCartService = savedCartService;
        this.savedCartId$ = this.routingService.getRouterState().pipe(map((routingData) => routingData.state.params.savedCartId), distinctUntilChanged());
        this.savedCart$ = this.savedCartId$.pipe(filter((cartId) => Boolean(cartId)), tap((savedCartId) => this.savedCartService.loadSavedCart(savedCartId)), switchMap((savedCartId) => this.savedCartService.get(savedCartId)), shareReplay({ bufferSize: 1, refCount: true }));
    }
    getSavedCartId() {
        return this.savedCartId$;
    }
    getCartDetails() {
        return this.savedCart$;
    }
}
SavedCartDetailsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: SavedCartDetailsService, deps: [{ token: i1.RoutingService }, { token: i2.SavedCartFacade }], target: i0.ɵɵFactoryTarget.Injectable });
SavedCartDetailsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: SavedCartDetailsService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: SavedCartDetailsService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root',
                }]
        }], ctorParameters: function () { return [{ type: i1.RoutingService }, { type: i2.SavedCartFacade }]; } });

class SavedCartDetailsActionComponent {
    constructor(savedCartDetailsService, vcr, launchDialogService) {
        this.savedCartDetailsService = savedCartDetailsService;
        this.vcr = vcr;
        this.launchDialogService = launchDialogService;
        this.subscription = new Subscription();
        this.savedCartFormType = SavedCartFormType;
        this.savedCart$ = this.savedCartDetailsService.getCartDetails();
    }
    openDialog(cart, type) {
        const dialog = this.launchDialogService.openDialog("SAVED_CART" /* SAVED_CART */, this.element, this.vcr, { cart, layoutOption: type });
        if (dialog) {
            this.subscription.add(dialog.pipe(take(1)).subscribe());
        }
    }
    ngOnDestroy() {
        var _a;
        (_a = this.subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
    }
}
SavedCartDetailsActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: SavedCartDetailsActionComponent, deps: [{ token: SavedCartDetailsService }, { token: i0.ViewContainerRef }, { token: i3.LaunchDialogService }], target: i0.ɵɵFactoryTarget.Component });
SavedCartDetailsActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: SavedCartDetailsActionComponent, selector: "cx-saved-cart-details-action", viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"savedCart$ | async as cart\">\n  <div class=\"cx-saved-cart-restore-btns row\">\n    <div class=\"col-xs-12 col-md-5 col-lg-4\">\n      <button\n        #element\n        class=\"btn btn-block btn-action\"\n        (click)=\"openDialog(cart, savedCartFormType.DELETE)\"\n      >\n        {{ 'savedCartDetails.deleteSavedCart' | cxTranslate }}\n      </button>\n    </div>\n    <div class=\"col-xs-12 col-md-5 col-lg-4\">\n      <button\n        #element\n        class=\"btn btn-block btn-primary\"\n        (click)=\"openDialog(cart, savedCartFormType.RESTORE)\"\n      >\n        {{ 'savedCartList.makeCartActive' | cxTranslate }}\n      </button>\n    </div>\n  </div>\n</ng-container>\n", directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i4.AsyncPipe, "cxTranslate": i1.TranslatePipe } });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: SavedCartDetailsActionComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'cx-saved-cart-details-action',
                    templateUrl: './saved-cart-details-action.component.html',
                }]
        }], ctorParameters: function () { return [{ type: SavedCartDetailsService }, { type: i0.ViewContainerRef }, { type: i3.LaunchDialogService }]; }, propDecorators: { element: [{
                type: ViewChild,
                args: ['element']
            }] } });

class SavedCartDetailsItemsComponent {
    constructor(savedCartDetailsService, savedCartService, eventSercvice, globalMessageService, routingService) {
        this.savedCartDetailsService = savedCartDetailsService;
        this.savedCartService = savedCartService;
        this.eventSercvice = eventSercvice;
        this.globalMessageService = globalMessageService;
        this.routingService = routingService;
        this.subscription = new Subscription();
        this.CartLocation = PromotionLocation;
        this.cartLoaded$ = this.savedCartDetailsService
            .getSavedCartId()
            .pipe(switchMap((cartId) => this.savedCartService.isStable(cartId)));
        this.savedCart$ = this.savedCartDetailsService
            .getCartDetails()
            .pipe(tap((cart) => {
            var _a;
            if (((_a = cart === null || cart === void 0 ? void 0 : cart.entries) !== null && _a !== void 0 ? _a : []).length <= 0 && !!(cart === null || cart === void 0 ? void 0 : cart.code)) {
                this.savedCartService.deleteSavedCart(cart.code);
            }
        }));
    }
    ngOnInit() {
        this.subscription.add(this.eventSercvice
            .get(DeleteSavedCartSuccessEvent)
            .pipe(take(1), mapTo(true))
            .subscribe((success) => this.onDeleteComplete(success)));
    }
    onDeleteComplete(success) {
        if (success) {
            this.routingService.go({ cxRoute: 'savedCarts' });
            this.globalMessageService.add({
                key: 'savedCartDialog.deleteCartSuccess',
            }, GlobalMessageType.MSG_TYPE_CONFIRMATION);
        }
    }
    ngOnDestroy() {
        var _a;
        (_a = this.subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
    }
}
SavedCartDetailsItemsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: SavedCartDetailsItemsComponent, deps: [{ token: SavedCartDetailsService }, { token: i2.SavedCartFacade }, { token: i1.EventService }, { token: i1.GlobalMessageService }, { token: i1.RoutingService }], target: i0.ɵɵFactoryTarget.Component });
SavedCartDetailsItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: SavedCartDetailsItemsComponent, selector: "cx-saved-cart-details-items", ngImport: i0, template: "<ng-container *ngIf=\"savedCart$ | async as cart\">\n  <ng-container *ngIf=\"cart?.entries?.length > 0; else emptyCartItems\">\n    <div class=\"cart-details-wrapper\">\n      <cx-cart-item-list\n        [cartId]=\"cart.code\"\n        [cartIsLoading]=\"!(cartLoaded$ | async)\"\n        [items]=\"cart.entries\"\n        [promotionLocation]=\"CartLocation.SavedCart\"\n      ></cx-cart-item-list>\n    </div>\n  </ng-container>\n</ng-container>\n<ng-template #emptyCartItems>\n  <div class=\"cx-spinner\">\n    <cx-spinner></cx-spinner>\n  </div>\n</ng-template>\n", components: [{ type: i3.CartItemListComponent, selector: "cx-cart-item-list", inputs: ["readonly", "hasHeader", "options", "cartId", "items", "promotionLocation", "cartIsLoading"] }, { type: i3.SpinnerComponent, selector: "cx-spinner" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: SavedCartDetailsItemsComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'cx-saved-cart-details-items',
                    templateUrl: './saved-cart-details-items.component.html',
                    changeDetection: ChangeDetectionStrategy.OnPush,
                }]
        }], ctorParameters: function () { return [{ type: SavedCartDetailsService }, { type: i2.SavedCartFacade }, { type: i1.EventService }, { type: i1.GlobalMessageService }, { type: i1.RoutingService }]; } });

class SavedCartDetailsOverviewComponent {
    constructor(savedCartDetailsService, translation, vcr, launchDialogService) {
        this.savedCartDetailsService = savedCartDetailsService;
        this.translation = translation;
        this.vcr = vcr;
        this.launchDialogService = launchDialogService;
        this.subscription = new Subscription();
        this.iconTypes = ICON_TYPE;
        this.savedCart$ = this.savedCartDetailsService.getCartDetails();
    }
    getCartName(cartName) {
        return this.translation.translate('savedCartDetails.cartName').pipe(filter(() => Boolean(cartName)), map((textTitle) => ({
            title: textTitle,
            text: [cartName],
        })));
    }
    getCartDescription(cartDescription) {
        return this.translation.translate('savedCartDetails.cartDescription').pipe(filter(() => Boolean(cartDescription)), map((textTitle) => ({
            title: textTitle,
            text: [cartDescription],
        })));
    }
    getCartId(cartId) {
        return this.translation.translate('savedCartDetails.cartId').pipe(filter(() => Boolean(cartId)), map((textTitle) => ({
            title: textTitle,
            text: [cartId],
        })));
    }
    getDateSaved(saveTime) {
        return this.translation.translate('savedCartDetails.dateSaved').pipe(filter(() => Boolean(saveTime)), map((textTitle) => {
            return {
                title: textTitle,
                text: [saveTime !== null && saveTime !== void 0 ? saveTime : ''],
            };
        }));
    }
    getCartItems(totalItems) {
        return this.translation.translate('savedCartDetails.items').pipe(filter(() => Boolean(totalItems)), map((textTitle) => ({
            title: textTitle,
            text: [totalItems.toString()],
        })));
    }
    getCartQuantity(totalUnitCount) {
        return this.translation.translate('savedCartDetails.quantity').pipe(filter(() => Boolean(totalUnitCount)), map((textTitle) => ({
            title: textTitle,
            text: [totalUnitCount.toString()],
        })));
    }
    getCartTotal(totalPriceWithTax) {
        return this.translation.translate('savedCartDetails.total').pipe(filter(() => Boolean(totalPriceWithTax)), map((textTitle) => ({
            title: textTitle,
            text: [totalPriceWithTax],
        })));
    }
    openDialog(cart) {
        const dialog = this.launchDialogService.openDialog("SAVED_CART" /* SAVED_CART */, this.element, this.vcr, { cart, layoutOption: 'edit' });
        if (dialog) {
            this.subscription.add(dialog.pipe(take(1)).subscribe());
        }
    }
    ngOnDestroy() {
        var _a;
        (_a = this.subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
    }
}
SavedCartDetailsOverviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: SavedCartDetailsOverviewComponent, deps: [{ token: SavedCartDetailsService }, { token: i1.TranslationService }, { token: i0.ViewContainerRef }, { token: i3.LaunchDialogService }], target: i0.ɵɵFactoryTarget.Component });
SavedCartDetailsOverviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: SavedCartDetailsOverviewComponent, selector: "cx-saved-cart-details-overview", viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"savedCart$ | async as cart\">\n  <div class=\"cx-cart-summary\">\n    <div class=\"container\">\n      <div class=\"cx-summary-card\">\n        <div class=\"cx-edit-container\">\n          <cx-card [content]=\"getCartName(cart?.name) | async\"></cx-card>\n          <button class=\"cx-edit-cart\" #element (click)=\"openDialog(cart)\">\n            <cx-icon [type]=\"iconTypes.PENCIL\"></cx-icon>\n          </button>\n        </div>\n        <div class=\"cx-card-description\">\n          <cx-card\n            [content]=\"getCartDescription(cart?.description) | async\"\n            [truncateText]=\"true\"\n            [charactersLimit]=\"30\"\n          ></cx-card>\n        </div>\n      </div>\n      <div class=\"cx-summary-card\">\n        <cx-card [content]=\"getCartId(cart?.code) | async\"></cx-card>\n      </div>\n      <div class=\"cx-summary-card\">\n        <cx-card\n          [content]=\"getDateSaved(cart?.saveTime | cxDate) | async\"\n        ></cx-card>\n        <cx-card [content]=\"getCartItems(cart?.totalItems) | async\"></cx-card>\n      </div>\n      <div class=\"cx-summary-card\">\n        <cx-card\n          [content]=\"getCartQuantity(cart?.totalUnitCount) | async\"\n        ></cx-card>\n        <cx-card\n          [content]=\"\n            getCartTotal(cart?.totalPriceWithTax?.formattedValue) | async\n          \"\n        ></cx-card>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", components: [{ type: i3.CardComponent, selector: "cx-card", inputs: ["border", "editMode", "isDefault", "content", "fitToContainer", "truncateText", "charactersLimit"], outputs: ["deleteCard", "setDefaultCard", "sendCard", "editCard", "cancelCard"] }, { type: i3.IconComponent, selector: "cx-icon,[cxIcon]", inputs: ["cxIcon", "type"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i4.AsyncPipe, "cxDate": i1.CxDatePipe } });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: SavedCartDetailsOverviewComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'cx-saved-cart-details-overview',
                    templateUrl: './saved-cart-details-overview.component.html',
                }]
        }], ctorParameters: function () { return [{ type: SavedCartDetailsService }, { type: i1.TranslationService }, { type: i0.ViewContainerRef }, { type: i3.LaunchDialogService }]; }, propDecorators: { element: [{
                type: ViewChild,
                args: ['element']
            }] } });

class SavedCartDetailsModule {
}
SavedCartDetailsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: SavedCartDetailsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
SavedCartDetailsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: SavedCartDetailsModule, declarations: [SavedCartDetailsOverviewComponent,
        SavedCartDetailsActionComponent,
        SavedCartDetailsItemsComponent], imports: [CartSharedModule,
        CommonModule,
        I18nModule,
        UrlModule,
        RouterModule,
        CardModule,
        MediaModule,
        AddToCartModule,
        IconModule,
        SpinnerModule, i1.ConfigModule], exports: [SavedCartDetailsOverviewComponent,
        SavedCartDetailsActionComponent,
        SavedCartDetailsItemsComponent] });
SavedCartDetailsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: SavedCartDetailsModule, imports: [[
            CartSharedModule,
            CommonModule,
            I18nModule,
            UrlModule,
            RouterModule,
            CardModule,
            MediaModule,
            AddToCartModule,
            IconModule,
            SpinnerModule,
            ConfigModule.withConfig({
                cmsComponents: {
                    SavedCartDetailsOverviewComponent: {
                        component: SavedCartDetailsOverviewComponent,
                        guards: [AuthGuard],
                    },
                    SavedCartDetailsItemsComponent: {
                        component: SavedCartDetailsItemsComponent,
                        guards: [AuthGuard],
                    },
                    SavedCartDetailsActionComponent: {
                        component: SavedCartDetailsActionComponent,
                        guards: [AuthGuard],
                    },
                },
            }),
        ]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: SavedCartDetailsModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        CartSharedModule,
                        CommonModule,
                        I18nModule,
                        UrlModule,
                        RouterModule,
                        CardModule,
                        MediaModule,
                        AddToCartModule,
                        IconModule,
                        SpinnerModule,
                        ConfigModule.withConfig({
                            cmsComponents: {
                                SavedCartDetailsOverviewComponent: {
                                    component: SavedCartDetailsOverviewComponent,
                                    guards: [AuthGuard],
                                },
                                SavedCartDetailsItemsComponent: {
                                    component: SavedCartDetailsItemsComponent,
                                    guards: [AuthGuard],
                                },
                                SavedCartDetailsActionComponent: {
                                    component: SavedCartDetailsActionComponent,
                                    guards: [AuthGuard],
                                },
                            },
                        }),
                    ],
                    declarations: [
                        SavedCartDetailsOverviewComponent,
                        SavedCartDetailsActionComponent,
                        SavedCartDetailsItemsComponent,
                    ],
                    exports: [
                        SavedCartDetailsOverviewComponent,
                        SavedCartDetailsActionComponent,
                        SavedCartDetailsItemsComponent,
                    ],
                }]
        }] });

class SavedCartListComponent {
    constructor(routing, savedCartService, vcr, launchDialogService) {
        this.routing = routing;
        this.savedCartService = savedCartService;
        this.vcr = vcr;
        this.launchDialogService = launchDialogService;
        this.subscription = new Subscription();
        this.savedCarts$ = this.savedCartService.getList().pipe(map((lists) => lists.sort((a, b) => {
            let date1 = a.saveTime
                ? new Date(a.saveTime).getTime()
                : new Date().getTime();
            let date2 = b.saveTime
                ? new Date(b.saveTime).getTime()
                : new Date().getTime();
            return date2 - date1;
        })));
    }
    ngOnInit() {
        this.isLoading$ = this.savedCartService.getSavedCartListProcessLoading();
        this.savedCartService.loadSavedCarts();
    }
    goToSavedCartDetails(cart) {
        this.routing.go({
            cxRoute: 'savedCartsDetails',
            params: { savedCartId: cart === null || cart === void 0 ? void 0 : cart.code },
        });
    }
    openDialog(event, cart) {
        const dialog = this.launchDialogService.openDialog("SAVED_CART" /* SAVED_CART */, this.restoreButton, this.vcr, { cart, layoutOption: SavedCartFormType.RESTORE });
        if (dialog) {
            this.subscription.add(dialog.pipe(take(1)).subscribe());
        }
        event.stopPropagation();
    }
    ngOnDestroy() {
        var _a;
        this.savedCartService.clearSavedCarts();
        this.savedCartService.clearSaveCart();
        this.savedCartService.clearRestoreSavedCart();
        (_a = this.subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
    }
}
SavedCartListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: SavedCartListComponent, deps: [{ token: i1.RoutingService }, { token: i2.SavedCartFacade }, { token: i0.ViewContainerRef }, { token: i3.LaunchDialogService }], target: i0.ɵɵFactoryTarget.Component });
SavedCartListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: SavedCartListComponent, selector: "cx-saved-cart-list", viewQueries: [{ propertyName: "restoreButton", first: true, predicate: ["element"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"savedCarts$ | async as savedCarts\">\n  <ng-container *ngIf=\"!(isLoading$ | async); else loading\">\n    <div class=\"cx-saved-cart-list-header\">\n      <h3>\n        {{\n          'savedCartList.savedCarts' | cxTranslate: { count: savedCarts.length }\n        }}\n      </h3>\n    </div>\n\n    <ng-container *ngIf=\"savedCarts?.length > 0; else noSavedCarts\">\n      <table class=\"table cx-saved-cart-list-table\">\n        <thead class=\"cx-saved-cart-list-thead-mobile\">\n          <th scope=\"col\">\n            {{ 'savedCartList.cartName' | cxTranslate }}\n          </th>\n          <th scope=\"col\">{{ 'savedCartList.cartId' | cxTranslate }}</th>\n          <th scope=\"col\">{{ 'savedCartList.dateSaved' | cxTranslate }}</th>\n          <th scope=\"col\">\n            {{ 'savedCartList.quantity' | cxTranslate }}\n          </th>\n          <th scope=\"col\">{{ 'savedCartList.total' | cxTranslate }}</th>\n          <th scope=\"col\">\n            {{ 'savedCartList.actions' | cxTranslate }}\n          </th>\n        </thead>\n        <tbody>\n          <tr\n            *ngFor=\"let savedCart of savedCarts\"\n            (click)=\"goToSavedCartDetails(savedCart)\"\n          >\n            <td class=\"cx-saved-cart-list-cart-name\">\n              <div class=\"cx-table-label-mobile cx-saved-cart-list-label\">\n                {{ 'savedCartList.cartName' | cxTranslate }}\n              </div>\n              <a\n                [routerLink]=\"\n                  {\n                    cxRoute: 'savedCartsDetails',\n                    params: { savedCartId: savedCart?.code }\n                  } | cxUrl\n                \"\n                class=\"cx-saved-cart-list-value\"\n              >\n                {{ savedCart?.name }}</a\n              >\n            </td>\n            <td class=\"cx-saved-cart-list-cart-id\">\n              <div class=\"cx-table-label-mobile cx-saved-cart-list-label\">\n                {{ 'savedCartList.cartId' | cxTranslate }}\n              </div>\n              <a\n                [routerLink]=\"\n                  {\n                    cxRoute: 'savedCartsDetails',\n                    params: { savedCartId: savedCart?.code }\n                  } | cxUrl\n                \"\n                class=\"cx-saved-cart-list-value\"\n                >{{ savedCart?.code }}</a\n              >\n            </td>\n            <td class=\"cx-saved-cart-list-date-saved\">\n              <div class=\"cx-table-label-mobile cx-saved-cart-list-label\">\n                {{ 'savedCartList.dateSaved' | cxTranslate }}\n              </div>\n              <a\n                [routerLink]=\"\n                  {\n                    cxRoute: 'savedCartsDetails',\n                    params: { savedCartId: savedCart?.code }\n                  } | cxUrl\n                \"\n                class=\"cx-saved-cart-list-value\"\n                >{{ savedCart?.saveTime | cxDate: 'longDate' }}</a\n              >\n            </td>\n            <td class=\"cx-saved-cart-list-quantity\">\n              <div class=\"cx-table-label-mobile cx-saved-cart-list-label\">\n                {{ 'savedCartList.quantity' | cxTranslate }}\n              </div>\n              <a\n                [routerLink]=\"\n                  {\n                    cxRoute: 'savedCartsDetails',\n                    params: { savedCartId: savedCart?.code }\n                  } | cxUrl\n                \"\n                class=\"cx-saved-cart-list-value\"\n              >\n                {{ savedCart?.totalUnitCount }}</a\n              >\n            </td>\n            <td class=\"cx-saved-cart-list-total\">\n              <div class=\"cx-table-label-mobile cx-saved-cart-list-label\">\n                {{ 'savedCartList.total' | cxTranslate }}\n              </div>\n              <a\n                [routerLink]=\"\n                  {\n                    cxRoute: 'savedCartsDetails',\n                    params: { savedCartId: savedCart?.code }\n                  } | cxUrl\n                \"\n                class=\"cx-saved-cart-list-value\"\n              >\n                {{ savedCart?.totalPrice?.formattedValue }}</a\n              >\n            </td>\n            <td class=\"cx-saved-cart-list-make-cart-active\">\n              <div class=\"cx-table-label-mobile cx-saved-cart-list-label\"></div>\n              <button\n                #element\n                class=\"link cx-action-link cx-saved-cart-make-active\"\n                (click)=\"openDialog($event, savedCart)\"\n              >\n                {{ 'savedCartList.makeCartActive' | cxTranslate }}\n              </button>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </ng-container>\n\n    <!-- NO SAVED CART CONTAINER -->\n    <ng-template #noSavedCarts>\n      <div class=\"cx-saved-cart-list-no-saved-carts row\">\n        <div class=\"col-sm-12 col-md-6 col-lg-4\">\n          <div>{{ 'savedCartList.notFound' | cxTranslate }}</div>\n        </div>\n      </div>\n    </ng-template>\n  </ng-container>\n\n  <ng-template #loading>\n    <div class=\"cx-spinner\">\n      <cx-spinner></cx-spinner>\n    </div>\n  </ng-template>\n</ng-container>\n", components: [{ type: i3.SpinnerComponent, selector: "cx-spinner" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }], pipes: { "async": i4.AsyncPipe, "cxTranslate": i1.TranslatePipe, "cxUrl": i1.UrlPipe, "cxDate": i1.CxDatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: SavedCartListComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'cx-saved-cart-list',
                    templateUrl: './saved-cart-list.component.html',
                    changeDetection: ChangeDetectionStrategy.OnPush,
                }]
        }], ctorParameters: function () { return [{ type: i1.RoutingService }, { type: i2.SavedCartFacade }, { type: i0.ViewContainerRef }, { type: i3.LaunchDialogService }]; }, propDecorators: { restoreButton: [{
                type: ViewChild,
                args: ['element']
            }] } });

class SavedCartListModule {
}
SavedCartListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: SavedCartListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
SavedCartListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: SavedCartListModule, declarations: [SavedCartListComponent], imports: [CommonModule,
        UrlModule,
        RouterModule,
        ListNavigationModule,
        I18nModule,
        SpinnerModule], exports: [SavedCartListComponent] });
SavedCartListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: SavedCartListModule, providers: [
        provideDefaultConfig({
            cmsComponents: {
                AccountSavedCartHistoryComponent: {
                    component: SavedCartListComponent,
                    guards: [AuthGuard],
                },
            },
        }),
    ], imports: [[
            CommonModule,
            UrlModule,
            RouterModule,
            ListNavigationModule,
            I18nModule,
            SpinnerModule,
        ]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: SavedCartListModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        CommonModule,
                        UrlModule,
                        RouterModule,
                        ListNavigationModule,
                        I18nModule,
                        SpinnerModule,
                    ],
                    providers: [
                        provideDefaultConfig({
                            cmsComponents: {
                                AccountSavedCartHistoryComponent: {
                                    component: SavedCartListComponent,
                                    guards: [AuthGuard],
                                },
                            },
                        }),
                    ],
                    declarations: [SavedCartListComponent],
                    exports: [SavedCartListComponent],
                }]
        }] });

class SavedCartFormDialogComponent {
    constructor(launchDialogService, el, savedCartService, eventService, routingService, globalMessageService) {
        this.launchDialogService = launchDialogService;
        this.el = el;
        this.savedCartService = savedCartService;
        this.eventService = eventService;
        this.routingService = routingService;
        this.globalMessageService = globalMessageService;
        this.subscription = new Subscription();
        this.savedCartFormType = SavedCartFormType;
        this.iconTypes = ICON_TYPE;
        this.descriptionMaxLength = 250;
        this.nameMaxLength = 50;
        this.isCloneSavedCart = false;
        this.focusConfig = {
            trap: true,
            block: true,
            autofocus: 'button',
            focusOnEscape: true,
        };
    }
    get descriptionsCharacterLeft() {
        var _a, _b;
        return (this.descriptionMaxLength -
            (((_b = (_a = this.form.get('description')) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.length) || 0));
    }
    handleClick(event) {
        // Close on click outside the dialog window
        if (event.target.tagName === this.el.nativeElement.tagName) {
            this.close('Cross click');
        }
    }
    ngOnInit() {
        this.resetSavedCartStates();
        this.isLoading$ = this.savedCartService.getSaveCartProcessLoading();
        this.isDisableDeleteButton$ = merge(this.eventService.get(DeleteSavedCartEvent).pipe(take(1), mapTo(true)), this.eventService
            .get(DeleteSavedCartFailEvent)
            .pipe(take(1), mapTo(false)));
        this.isDisableRestoreButton$ = combineLatest([
            this.savedCartService.getCloneSavedCartProcessLoading(),
            this.savedCartService.getRestoreSavedCartProcessLoading(),
        ]).pipe(map(([isCloneLoading, isRestoreLoading]) => isCloneLoading || isRestoreLoading));
        this.subscription.add(this.launchDialogService.data$.subscribe((data) => {
            this.cart = data.cart;
            this.layoutOption = data.layoutOption;
            this.build(this.cart);
        }));
        this.subscription.add(this.savedCartService
            .getSaveCartProcessSuccess()
            .subscribe((success) => this.onComplete(success)));
        this.subscription.add(this.eventService
            .get(DeleteSavedCartSuccessEvent)
            .pipe(take(1), mapTo(true))
            .subscribe((success) => this.onComplete(success)));
        this.subscription.add(this.savedCartService
            .getRestoreSavedCartProcessSuccess()
            .subscribe((success) => this.onComplete(success)));
    }
    saveOrEditCart(cartId) {
        var _a, _b;
        const name = (_a = this.form.get('name')) === null || _a === void 0 ? void 0 : _a.value;
        // TODO(#12660): Remove default value once backend is updated
        const description = ((_b = this.form.get('description')) === null || _b === void 0 ? void 0 : _b.value) || '-';
        switch (this.layoutOption) {
            case SavedCartFormType.SAVE: {
                this.savedCartService.saveCart({
                    cartId,
                    saveCartName: name,
                    saveCartDescription: description,
                });
                break;
            }
            case SavedCartFormType.EDIT: {
                this.savedCartService.editSavedCart({
                    cartId,
                    saveCartName: name,
                    saveCartDescription: description,
                });
                break;
            }
        }
    }
    deleteCart(cartId) {
        this.savedCartService.deleteSavedCart(cartId);
    }
    restoreSavedCart(cartId) {
        var _a;
        if (this.isCloneSavedCart) {
            this.savedCartService.cloneSavedCart(cartId, (_a = this.form.get('cloneName')) === null || _a === void 0 ? void 0 : _a.value);
        }
        else {
            this.savedCartService.restoreSavedCart(cartId);
        }
    }
    close(reason) {
        this.launchDialogService.closeDialog(reason);
    }
    onComplete(success) {
        var _a, _b, _c, _d;
        if (success) {
            switch (this.layoutOption) {
                case SavedCartFormType.DELETE: {
                    this.routingService.go({ cxRoute: 'savedCarts' });
                    this.globalMessageService.add({
                        key: 'savedCartDialog.deleteCartSuccess',
                    }, GlobalMessageType.MSG_TYPE_CONFIRMATION);
                    this.close('Successfully deleted a saved cart');
                    break;
                }
                case SavedCartFormType.SAVE: {
                    this.close('Successfully saved cart');
                    this.savedCartService.clearSaveCart();
                    this.globalMessageService.add({
                        key: 'savedCartCartPage.messages.cartSaved',
                        params: {
                            cartName: ((_a = this.form.get('name')) === null || _a === void 0 ? void 0 : _a.value) || ((_b = this.cart) === null || _b === void 0 ? void 0 : _b.code),
                        },
                    }, GlobalMessageType.MSG_TYPE_CONFIRMATION);
                    break;
                }
                case SavedCartFormType.EDIT: {
                    this.close('Successfully edited saved cart');
                    this.savedCartService.clearSaveCart();
                    this.globalMessageService.add({
                        key: 'savedCartDialog.editCartSuccess',
                        params: {
                            cartName: ((_c = this.form.get('name')) === null || _c === void 0 ? void 0 : _c.value) || ((_d = this.cart) === null || _d === void 0 ? void 0 : _d.code),
                        },
                    }, GlobalMessageType.MSG_TYPE_CONFIRMATION);
                    break;
                }
                case SavedCartFormType.RESTORE: {
                    this.close('Successfully restored saved cart');
                    this.routingService.go({ cxRoute: 'savedCarts' });
                    this.resetSavedCartStates();
                    break;
                }
            }
        }
    }
    toggleIsCloneSavedCart() {
        return (this.isCloneSavedCart = !this.isCloneSavedCart);
    }
    build(cart) {
        const form = new FormGroup({});
        form.setControl('name', new FormControl('', [
            Validators.required,
            Validators.maxLength(this.nameMaxLength),
        ]));
        form.setControl('description', new FormControl('', [Validators.maxLength(this.descriptionMaxLength)]));
        form.setControl('isCloneSavedCart', new FormControl(''));
        form.setControl('cloneName', new FormControl(''));
        this.form = form;
        this.patchData(cart);
    }
    patchData(item) {
        this.form.patchValue(Object.assign({}, item));
    }
    resetSavedCartStates() {
        this.savedCartService.clearCloneSavedCart();
        this.savedCartService.clearSaveCart();
        this.savedCartService.clearRestoreSavedCart();
    }
    ngOnDestroy() {
        var _a;
        (_a = this.subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
        this.close('close dialog');
    }
}
SavedCartFormDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: SavedCartFormDialogComponent, deps: [{ token: i3.LaunchDialogService }, { token: i0.ElementRef }, { token: i2.SavedCartFacade }, { token: i1.EventService }, { token: i1.RoutingService }, { token: i1.GlobalMessageService }], target: i0.ɵɵFactoryTarget.Component });
SavedCartFormDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: SavedCartFormDialogComponent, selector: "cx-saved-cart-form-dialog", host: { listeners: { "click": "handleClick($event)" } }, ngImport: i0, template: "<ng-container *ngIf=\"cart\">\n  <div\n    [cxFocus]=\"focusConfig\"\n    (esc)=\"close('Escape clicked')\"\n    class=\"cx-saved-cart-form-dialog\"\n  >\n    <form [formGroup]=\"form\" class=\"cx-saved-cart-form-container\">\n      <!-- Modal Header -->\n      <div class=\"modal-header cx-saved-cart-form-header\">\n        <ng-container [ngSwitch]=\"layoutOption\">\n          <div class=\"cx-saved-cart-form-title modal-title\">\n            <ng-container *ngSwitchCase=\"savedCartFormType.EDIT\">\n              {{ 'savedCartDialog.editSavedCart' | cxTranslate }}\n            </ng-container>\n            <ng-container *ngSwitchCase=\"savedCartFormType.DELETE\">\n              {{ 'savedCartDialog.deleteSavedCart' | cxTranslate }}\n            </ng-container>\n            <ng-container *ngSwitchCase=\"savedCartFormType.SAVE\">\n              {{ 'savedCartDialog.saveForLater' | cxTranslate }}\n            </ng-container>\n            <ng-container *ngSwitchCase=\"savedCartFormType.RESTORE\">\n              {{ 'savedCartDialog.restoreSavedCart' | cxTranslate }}\n            </ng-container>\n          </div>\n        </ng-container>\n\n        <button\n          (click)=\"close('Close Save Cart Dialog')\"\n          [disabled]=\"isLoading$ | async\"\n          [attr.aria-label]=\"'common.close' | cxTranslate\"\n          class=\"cx-saved-cart-form-close close\"\n          type=\"button\"\n        >\n          <span aria-hidden=\"true\">\n            <cx-icon [type]=\"iconTypes.CLOSE\"></cx-icon>\n          </span>\n        </button>\n      </div>\n\n      <!-- Modal Body -->\n      <div class=\"cx-saved-cart-form-body\">\n        <!-- start DELETE and RESTORE form -->\n        <ng-container\n          *ngIf=\"\n            layoutOption === savedCartFormType.DELETE ||\n              layoutOption === savedCartFormType.RESTORE;\n            else saveAndEditCart\n          \"\n        >\n          <p class=\"cx-saved-cart-form-subtitle\">\n            {{\n              (layoutOption === savedCartFormType.DELETE\n                ? 'savedCartDialog.followingCartDelete'\n                : 'savedCartDialog.followingCartRestore'\n              ) | cxTranslate\n            }}\n          </p>\n\n          <div class=\"cx-saved-cart-form-row\">\n            <div class=\"cx-saved-cart-values-container\">\n              <div class=\"cx-saved-cart-label\">\n                {{ 'savedCartDialog.name' | cxTranslate }}\n              </div>\n              <div class=\"cx-saved-cart-value\">\n                {{ cart?.name }}\n              </div>\n            </div>\n\n            <div class=\"cx-saved-cart-values-container\">\n              <div class=\"cx-saved-cart-label\">\n                {{ 'savedCartDialog.id' | cxTranslate }}\n              </div>\n              <div class=\"cx-saved-cart-value\">\n                {{ cart?.code }}\n              </div>\n            </div>\n\n            <div class=\"cx-saved-cart-values-container\">\n              <div class=\"cx-saved-cart-label\">\n                {{ 'savedCartDialog.description' | cxTranslate }}\n              </div>\n              <div class=\"cx-saved-cart-value\">\n                {{ cart?.description }}\n              </div>\n            </div>\n\n            <div class=\"cx-saved-cart-values-container\">\n              <div class=\"cx-saved-cart-label\">\n                {{ 'savedCartDialog.quantity' | cxTranslate }}\n              </div>\n              <div class=\"cx-saved-cart-value\">\n                {{ cart?.totalItems }}\n              </div>\n            </div>\n\n            <div class=\"cx-saved-cart-values-container\">\n              <div class=\"cx-saved-cart-label\">\n                {{ 'savedCartDialog.total' | cxTranslate }}\n              </div>\n              <div class=\"cx-saved-cart-value\">\n                {{ cart?.totalPriceWithTax?.formattedValue }}\n              </div>\n            </div>\n          </div>\n\n          <ng-container *ngIf=\"layoutOption === savedCartFormType.RESTORE\">\n            <div class=\"cx-copy-saved-cart-row form-check\">\n              <input\n                id=\"cx-copy-saved-cart\"\n                type=\"checkbox\"\n                class=\"cx-copy-saved-cart-input\"\n                [checked]=\"isCloneSavedCart\"\n                (change)=\"toggleIsCloneSavedCart()\"\n              />\n              <label\n                for=\"cx-copy-saved-cart\"\n                class=\"cx-copy-saved-cart-label\"\n                >{{ 'savedCartDialog.keepCopySavedCart' | cxTranslate }}</label\n              >\n            </div>\n\n            <div *ngIf=\"isCloneSavedCart\" class=\"cx-copy-saved-cart-row\">\n              <label>\n                <span class=\"label-content\">\n                  {{ 'savedCartDialog.nameOfCloneCart' | cxTranslate }}\n                </span>\n\n                <input\n                  [maxLength]=\"nameMaxLength\"\n                  class=\"form-control\"\n                  formControlName=\"cloneName\"\n                  type=\"text\"\n                  placeholder=\"{{\n                    'savedCartDialog.defaultCloneCartName'\n                      | cxTranslate: { name: form.get('name')?.value }\n                  }}\"\n                />\n              </label>\n            </div>\n          </ng-container>\n\n          <div class=\"cx-saved-cart-form-footer\">\n            <button\n              (click)=\"close('Close Save Cart Dialog')\"\n              [attr.aria-label]=\"'common.close' | cxTranslate\"\n              class=\"mr-2 btn btn-action\"\n              type=\"button\"\n            >\n              {{ 'savedCartDialog.cance