cax-design-system 2.8.5 → 3.0.1

package/fesm2022/cax-design-system-comparecard.mjs

@@ -0,0 +1,143 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, signal, ContentChildren, ContentChild, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { Header, Footer, CaxTemplate, SharedModule } from 'cax-design-system/api';
+import { ObjectUtils } from 'cax-design-system/utils';
+import * as i1 from 'cax-design-system/button';
+import { Button, ButtonModule } from 'cax-design-system/button';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { BadgeModule } from 'cax-design-system/badge';
+
+class ComparecardComponent {
+    el;
+    /** Inputs */
+    header;
+    subheader;
+    activeCard;
+    imageUrl;
+    iconClass;
+    styleClass;
+    buttonseverity;
+    closable = true;
+    isVisible = true;
+    /** Outputs */
+    closeClick = new EventEmitter();
+    addToCartClick = new EventEmitter();
+    /** Internal style signal */
+    _style = signal(null, ...(ngDevMode ? [{ debugName: "_style" }] : []));
+    set style(value) {
+        if (!ObjectUtils.equals(this._style(), value)) {
+            this._style.set(value);
+        }
+    }
+    /** Template management */
+    headerFacet;
+    footerFacet;
+    templates;
+    headerTemplate;
+    titleTemplate;
+    subtitleTemplate;
+    contentTemplate;
+    footerTemplate;
+    constructor(el) {
+        this.el = el;
+    }
+    ngAfterContentInit() {
+        this.templates.forEach((item) => {
+            switch (item.getType()) {
+                case 'header':
+                    this.headerTemplate = item.template;
+                    break;
+                case 'title':
+                    this.titleTemplate = item.template;
+                    break;
+                case 'subtitle':
+                    this.subtitleTemplate = item.template;
+                    break;
+                case 'content':
+                    this.contentTemplate = item.template;
+                    break;
+                case 'footer':
+                    this.footerTemplate = item.template;
+                    break;
+                default:
+                    this.contentTemplate = item.template;
+                    break;
+            }
+        });
+    }
+    /** Emits event when close icon is clicked */
+    onCloseClick() {
+        if (this.closable) {
+            this.isVisible = false;
+            this.closeClick.emit();
+        }
+    }
+    /** Emits event when Add to Cart is clicked */
+    onAddToCartClick() {
+        this.addToCartClick.emit();
+    }
+    getBlockableElement() {
+        return this.el.nativeElement.children[0];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ComparecardComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: ComparecardComponent, isStandalone: false, selector: "compare-card", inputs: { header: "header", subheader: "subheader", activeCard: "activeCard", imageUrl: "imageUrl", iconClass: "iconClass", styleClass: "styleClass", buttonseverity: "buttonseverity", closable: "closable", style: "style" }, outputs: { closeClick: "closeClick", addToCartClick: "addToCartClick" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "headerFacet", first: true, predicate: Header, descendants: true }, { propertyName: "footerFacet", first: true, predicate: Footer, descendants: true }, { propertyName: "templates", predicate: CaxTemplate }], ngImport: i0, template: "<div class=\"cax-compare-card\" [ngClass]=\"{ active: activeCard }\" [ngStyle]=\"_style()\">\n    <!-- Image Section -->\n    <div class=\"image-container\">\n        <img [src]=\"imageUrl\" alt=\"Card image\" class=\"cax-compare-card-img\" width=\"100%\" height=\"176px\" />\n        <i *ngIf=\"closable\" class=\"cax cax-close cax-close-icon\" (click)=\"onCloseClick()\"> </i>\n    </div>\n    <!-- Content -->\n    <div class=\"cax-card-content\">\n        <h3 class=\"cax-card-title\">{{ header }}</h3>\n        <ng-container *ngIf=\"contentTemplate; else defaultContent\">\n            <ng-template [ngTemplateOutlet]=\"contentTemplate\"></ng-template>\n        </ng-container>\n        <ng-template #defaultContent></ng-template>\n    </div>\n    <cax-button [leftIcon]=\"'cax cax-cart-large-minimalistic'\" [label]=\"'Add to Cart'\" [severity]=\"buttonseverity\" [style]=\"{ width: '100%' }\" (click)=\"onAddToCartClick()\"></cax-button>\n</div>\n", styles: ["@layer cax{.cax-compare-card{width:250px;border-radius:16px;padding:16px;overflow:hidden;position:relative}.cax-compare-card .cax-card-content .cax-card-title{font-size:14px;font-weight:600;color:#222;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-word}.cax-compare-card .image-container{position:relative;width:100%;height:176px;overflow:hidden}.cax-compare-card .cax-compare-card-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:8px}.cax-compare-card .cax-close-icon{position:absolute;width:32px;height:32px;top:8px;right:8px;font-size:20px;border-radius:50%;padding:7px}}\n"], dependencies: [{ kind: "component", type: i1.Button, selector: "cax-button", inputs: ["type", "iconPos", "icon", "badge", "rightIcon", "leftIcon", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ComparecardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'compare-card', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, host: {
+                        class: 'cax-element'
+                    }, template: "<div class=\"cax-compare-card\" [ngClass]=\"{ active: activeCard }\" [ngStyle]=\"_style()\">\n    <!-- Image Section -->\n    <div class=\"image-container\">\n        <img [src]=\"imageUrl\" alt=\"Card image\" class=\"cax-compare-card-img\" width=\"100%\" height=\"176px\" />\n        <i *ngIf=\"closable\" class=\"cax cax-close cax-close-icon\" (click)=\"onCloseClick()\"> </i>\n    </div>\n    <!-- Content -->\n    <div class=\"cax-card-content\">\n        <h3 class=\"cax-card-title\">{{ header }}</h3>\n        <ng-container *ngIf=\"contentTemplate; else defaultContent\">\n            <ng-template [ngTemplateOutlet]=\"contentTemplate\"></ng-template>\n        </ng-container>\n        <ng-template #defaultContent></ng-template>\n    </div>\n    <cax-button [leftIcon]=\"'cax cax-cart-large-minimalistic'\" [label]=\"'Add to Cart'\" [severity]=\"buttonseverity\" [style]=\"{ width: '100%' }\" (click)=\"onAddToCartClick()\"></cax-button>\n</div>\n", styles: ["@layer cax{.cax-compare-card{width:250px;border-radius:16px;padding:16px;overflow:hidden;position:relative}.cax-compare-card .cax-card-content .cax-card-title{font-size:14px;font-weight:600;color:#222;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-word}.cax-compare-card .image-container{position:relative;width:100%;height:176px;overflow:hidden}.cax-compare-card .cax-compare-card-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:8px}.cax-compare-card .cax-close-icon{position:absolute;width:32px;height:32px;top:8px;right:8px;font-size:20px;border-radius:50%;padding:7px}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { header: [{
+                type: Input
+            }], subheader: [{
+                type: Input
+            }], activeCard: [{
+                type: Input
+            }], imageUrl: [{
+                type: Input
+            }], iconClass: [{
+                type: Input
+            }], styleClass: [{
+                type: Input
+            }], buttonseverity: [{
+                type: Input
+            }], closable: [{
+                type: Input
+            }], closeClick: [{
+                type: Output
+            }], addToCartClick: [{
+                type: Output
+            }], style: [{
+                type: Input
+            }], headerFacet: [{
+                type: ContentChild,
+                args: [Header]
+            }], footerFacet: [{
+                type: ContentChild,
+                args: [Footer]
+            }], templates: [{
+                type: ContentChildren,
+                args: [CaxTemplate]
+            }] } });
+
+class CompareCardModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CompareCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: CompareCardModule, declarations: [ComparecardComponent], imports: [Button, CommonModule, SharedModule, ButtonModule, BadgeModule], exports: [ComparecardComponent, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CompareCardModule, imports: [Button, CommonModule, SharedModule, ButtonModule, BadgeModule, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CompareCardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [Button, CommonModule, SharedModule, ButtonModule, BadgeModule],
+                    declarations: [ComparecardComponent],
+                    exports: [ComparecardComponent, SharedModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CompareCardModule, ComparecardComponent };
+//# sourceMappingURL=cax-design-system-comparecard.mjs.map

package/fesm2022/cax-design-system-comparecard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cax-design-system-comparecard.mjs","sources":["../../src/app/components/comparecard/comparecard.component.ts","../../src/app/components/comparecard/comparecard.component.html","../../src/app/components/comparecard/comaparecard.module.ts","../../src/app/components/comparecard/cax-design-system-comparecard.ts"],"sourcesContent":["import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChild, ContentChildren, ElementRef, EventEmitter, Input, Output, QueryList, TemplateRef, ViewEncapsulation, signal } from '@angular/core';\nimport { BlockableUI, Footer, Header, CaxTemplate } from 'cax-design-system/api';\nimport { ObjectUtils } from 'cax-design-system/utils';\n\n@Component({\n    selector: 'compare-card',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    templateUrl: './comparecard.component.html',\n    styleUrl: './comparecard.component.scss',\n    standalone: false,\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class ComparecardComponent implements AfterContentInit {\n    /** Inputs */\n    @Input() header: string | undefined;\n    @Input() subheader: string | undefined;\n    @Input() activeCard: boolean;\n    @Input() imageUrl: string;\n    @Input() iconClass!: string;\n    @Input() styleClass: string | undefined;\n    @Input() buttonseverity: 'success' | 'warning' | 'danger' | 'primary' | 'secondary' | null | undefined;\n    @Input() closable: boolean = true;\n    isVisible: boolean = true;\n\n    /** Outputs */\n    @Output() closeClick = new EventEmitter<void>();\n    @Output() addToCartClick = new EventEmitter<void>();\n\n    /** Internal style signal */\n    _style = signal<{ [klass: string]: any } | null | undefined>(null);\n\n    @Input() set style(value: { [klass: string]: any } | null | undefined) {\n        if (!ObjectUtils.equals(this._style(), value)) {\n            this._style.set(value);\n        }\n    }\n\n    /** Template management */\n    @ContentChild(Header) headerFacet: TemplateRef<any> | undefined;\n    @ContentChild(Footer) footerFacet: TemplateRef<any> | undefined;\n    @ContentChildren(CaxTemplate) templates: QueryList<CaxTemplate> | undefined;\n\n    headerTemplate: TemplateRef<any> | undefined;\n    titleTemplate: TemplateRef<any> | undefined;\n    subtitleTemplate: TemplateRef<any> | undefined;\n    contentTemplate: TemplateRef<any> | undefined;\n    footerTemplate: TemplateRef<any> | undefined;\n\n    constructor(private el: ElementRef) {}\n\n    ngAfterContentInit() {\n        (this.templates as QueryList<CaxTemplate>).forEach((item) => {\n            switch (item.getType()) {\n                case 'header':\n                    this.headerTemplate = item.template;\n                    break;\n                case 'title':\n                    this.titleTemplate = item.template;\n                    break;\n                case 'subtitle':\n                    this.subtitleTemplate = item.template;\n                    break;\n                case 'content':\n                    this.contentTemplate = item.template;\n                    break;\n                case 'footer':\n                    this.footerTemplate = item.template;\n                    break;\n                default:\n                    this.contentTemplate = item.template;\n                    break;\n            }\n        });\n    }\n\n    /** Emits event when close icon is clicked */\n    onCloseClick(): void {\n        if (this.closable) {\n            this.isVisible = false;\n            this.closeClick.emit();\n        }\n    }\n\n    /** Emits event when Add to Cart is clicked */\n    onAddToCartClick(): void {\n        this.addToCartClick.emit();\n    }\n\n    getBlockableElement(): HTMLElement {\n        return this.el.nativeElement.children[0];\n    }\n}\n","<div class=\"cax-compare-card\" [ngClass]=\"{ active: activeCard }\" [ngStyle]=\"_style()\">\n    <!-- Image Section -->\n    <div class=\"image-container\">\n        <img [src]=\"imageUrl\" alt=\"Card image\" class=\"cax-compare-card-img\" width=\"100%\" height=\"176px\" />\n        <i *ngIf=\"closable\" class=\"cax cax-close cax-close-icon\" (click)=\"onCloseClick()\"> </i>\n    </div>\n    <!-- Content -->\n    <div class=\"cax-card-content\">\n        <h3 class=\"cax-card-title\">{{ header }}</h3>\n        <ng-container *ngIf=\"contentTemplate; else defaultContent\">\n            <ng-template [ngTemplateOutlet]=\"contentTemplate\"></ng-template>\n        </ng-container>\n        <ng-template #defaultContent></ng-template>\n    </div>\n    <cax-button [leftIcon]=\"'cax cax-cart-large-minimalistic'\" [label]=\"'Add to Cart'\" [severity]=\"buttonseverity\" [style]=\"{ width: '100%' }\" (click)=\"onAddToCartClick()\"></cax-button>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SharedModule } from 'cax-design-system/api';\nimport { ComparecardComponent } from './comparecard.component';\nimport { Button, ButtonModule } from 'cax-design-system/button';\nimport { BadgeModule } from 'cax-design-system/badge';\n\n@NgModule({\n    imports: [Button, CommonModule, SharedModule, ButtonModule, BadgeModule],\n    declarations: [ComparecardComponent],\n    exports: [ComparecardComponent, SharedModule]\n})\nexport class CompareCardModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/cax-design-system-confirmdialog.mjs

@@ -11,11 +11,10 @@ import * as i3 from 'cax-design-system/button';
 import { ButtonModule } from 'cax-design-system/button';
 import * as i4 from 'cax-design-system/ripple';
 import { RippleModule } from 'cax-design-system/ripple';
-import * as i5 from 'cax-design-system/icons/times';
-import { TimesIcon } from 'cax-design-system/icons/times';
-import * as i6 from 'cax-design-system/checkbox';
+import * as i5 from 'cax-design-system/checkbox';
 import { CheckboxModule } from 'cax-design-system/checkbox';
 import { CheckIcon } from 'cax-design-system/icons/check';
+import { TimesIcon } from 'cax-design-system/icons/times';
 import { FormsModule } from '@angular/forms';
 
 const showAnimation = animation([style({ transform: '{{transform}}', opacity: 0 }), animate('{{transition}}', style({ transform: 'none', opacity: 1 }))]);
@@ -113,16 +112,6 @@ class ConfirmDialog {
      * @group Props
      */
     rejectVisible = true;
-    /**
-     * Style class of the accept button.
-     * @group Props
-     */
-    acceptButtonStyleClass;
-    /**
-     * Style class of the reject button.
-     * @group Props
-     */
-    rejectButtonStyleClass;
     /**
      * Specifies if pressing escape key should hide the dialog.
      * @group Props
@@ -188,16 +177,15 @@ class ConfirmDialog {
      * @group Props
      */
     breakpoints;
-    /**
-     * Current visible state as a boolean.
-     * @group Props
-     */
-    headerIcon;
-    headerIconStyle;
     showCheckbox = false; // Controls visibility of "Don't ask me again" checkbox
     checkboxLabel = "Don't ask me again";
     showCancelButton = true;
     showAcceptButton = true;
+    /**
+     * Severity of the confirmation dialog.
+     * @group Props
+     */
+    severity;
     dontAskAgain = false;
     showDialog = true;
     dontShowAgain = false;
@@ -248,6 +236,11 @@ class ConfirmDialog {
      * @group Emits
      */
     onHide = new EventEmitter();
+    /**
+     * Callback to invoke when dialog visibility changes.
+     * @group Emits
+     */
+    visibleChange = new EventEmitter();
     footer;
     contentViewChild;
     templates;
@@ -331,10 +324,7 @@ class ConfirmDialog {
                     rejectLabel: this.confirmation.rejectLabel || this.rejectLabel,
                     acceptIcon: this.confirmation.acceptIcon || this.acceptIcon,
                     rejectIcon: this.confirmation.rejectIcon || this.rejectIcon,
-                    headerIcon: this.confirmation.headerIcon || this.headerIcon,
-                    headerIconStyle: this.confirmation.headerIconStyle || this.headerIconStyle,
-                    acceptButtonStyleClass: this.confirmation.acceptButtonStyleClass || this.acceptButtonStyleClass,
-                    rejectButtonStyleClass: this.confirmation.rejectButtonStyleClass || this.rejectButtonStyleClass,
+                    severity: this.confirmation.severity || this.severity,
                     defaultFocus: this.confirmation.defaultFocus || this.defaultFocus,
                     blockScroll: this.confirmation.blockScroll === false || this.confirmation.blockScroll === true ? this.confirmation.blockScroll : this.blockScroll,
                     closeOnEscape: this.confirmation.closeOnEscape === false || this.confirmation.closeOnEscape === true ? this.confirmation.closeOnEscape : this.closeOnEscape,
@@ -477,6 +467,7 @@ class ConfirmDialog {
     }
     hide(type) {
         this.onHide.emit(type);
+        this.visibleChange.emit(false);
         this.visible = false;
         this.confirmation = null;
         this.confirmationOptions = null;
@@ -595,34 +586,51 @@ class ConfirmDialog {
         this.checkboxLabel = this.confirmationOptions?.checkboxLabel ?? this.checkboxLabel;
         return this.confirmationOptions?.showCheckbox ?? this.showCheckbox;
     }
-    get isHeaderIcon() {
-        return !!(this.confirmationOptions?.headerIcon || this.headerIcon);
-    }
-    get computedHeaderIcon() {
-        return this.confirmationOptions?.headerIcon || this.headerIcon || '';
-    }
-    get computedHeaderIconStyle() {
-        return this.confirmationOptions?.headerIconStyle || this.headerIconStyle || {};
-    }
     get isClosable() {
         return this.confirmationOptions?.closable ?? this.closable;
     }
     get acceptButtonLabel() {
-        this.acceptIcon = this.confirmationOptions.acceptIcon ?? this.acceptIcon;
+        this.acceptIcon = this.confirmationOptions?.acceptIcon ?? this.acceptIcon;
         return this.option('acceptLabel') || this.config.getTranslation(TranslationKeys.ACCEPT);
     }
     get rejectButtonLabel() {
-        this.rejectIcon = this.confirmationOptions.rejectIcon ?? this.rejectIcon;
+        this.rejectIcon = this.confirmationOptions?.rejectIcon ?? this.rejectIcon;
         return this.option('rejectLabel') || this.config.getTranslation(TranslationKeys.REJECT);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConfirmDialog, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.ConfirmationService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.caxConfig }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.17", type: ConfirmDialog, isStandalone: false, selector: "cax-confirmDialog", inputs: { header: "header", icon: "icon", message: "message", style: "style", styleClass: "styleClass", maskStyleClass: "maskStyleClass", acceptIcon: "acceptIcon", acceptLabel: "acceptLabel", closeAriaLabel: "closeAriaLabel", acceptAriaLabel: "acceptAriaLabel", acceptVisible: ["acceptVisible", "acceptVisible", booleanAttribute], rejectIcon: "rejectIcon", rejectLabel: "rejectLabel", rejectAriaLabel: "rejectAriaLabel", rejectVisible: ["rejectVisible", "rejectVisible", booleanAttribute], acceptButtonStyleClass: "acceptButtonStyleClass", rejectButtonStyleClass: "rejectButtonStyleClass", closeOnEscape: ["closeOnEscape", "closeOnEscape", booleanAttribute], dismissableMask: ["dismissableMask", "dismissableMask", booleanAttribute], blockScroll: ["blockScroll", "blockScroll", booleanAttribute], rtl: ["rtl", "rtl", booleanAttribute], closable: ["closable", "closable", booleanAttribute], appendTo: "appendTo", key: "key", autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], transitionOptions: "transitionOptions", focusTrap: ["focusTrap", "focusTrap", booleanAttribute], defaultFocus: "defaultFocus", breakpoints: "breakpoints", headerIcon: "headerIcon", headerIconStyle: "headerIconStyle", showCheckbox: "showCheckbox", checkboxLabel: "checkboxLabel", showCancelButton: "showCancelButton", showAcceptButton: "showAcceptButton", visible: "visible", position: "position" }, outputs: { onHide: "onHide" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "footer", first: true, predicate: Footer, descendants: true }, { propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "contentViewChild", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<div [class]=\"maskStyleClass\" [ngClass]=\"getMaskClass()\" *ngIf=\"maskVisible\">\r\n    <div\r\n        [ngClass]=\"{ 'cax-dialog cax-confirm-dialog cax-component': true, 'cax-dialog-rtl': rtl }\"\r\n        [ngStyle]=\"style\"\r\n        [class]=\"styleClass\"\r\n        [@animation]=\"{ value: 'visible', params: { transform: transformOptions, transition: transitionOptions } }\"\r\n        (@animation.start)=\"onAnimationStart($event)\"\r\n        (@animation.done)=\"onAnimationEnd($event)\"\r\n        role=\"alertdialog\"\r\n        *ngIf=\"visible\"\r\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n        [attr.aria-modal]=\"true\"\r\n    >\r\n        <ng-container *ngIf=\"headlessTemplate; else notHeadless\">\r\n            <ng-container *ngTemplateOutlet=\"headlessTemplate; context: { $implicit: confirmation }\"></ng-container>\r\n        </ng-container>\r\n        <ng-template #notHeadless>\r\n            <div class=\"cax-dialog-header cax-confirm-dialog-header\" *ngIf=\"headerTemplate\">\r\n                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n            </div>\r\n            <div class=\"cax-dialog-header cax-confirm-dialog-header\" *ngIf=\"!headerTemplate\">\r\n                <div class=\"cax-header-allign\">\r\n                    <span *ngIf=\"isHeaderIcon\"><i [class]=\"computedHeaderIcon\" [ngStyle]=\"computedHeaderIconStyle\" style=\"display: flex\" class=\"cax-dialog-header-icon\"></i></span>\r\n                    <span class=\"cax-dialog-title\" [id]=\"ariaLabelledBy\" *ngIf=\"option('header')\">{{ option('header') }}</span>\r\n                </div>\r\n                <div class=\"cax-dialog-header-icons\">\r\n                    <button *ngIf=\"isClosable\" type=\"button\" role=\"button\" [attr.aria-label]=\"closeAriaLabel\" [ngClass]=\"{ 'cax-dialog-header-icon cax-dialog-header-close cax-link': true }\" (click)=\"close($event)\" (keydown.enter)=\"close($event)\">\r\n                        <TimesIcon />\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <div #content class=\"cax-dialog-content cax-confirm-dialog-content\">\r\n                <i [ngClass]=\"'cax-confirm-dialog-icon'\" [class]=\"option('icon')\" *ngIf=\"!iconTemplate && option('icon')\"></i>\r\n                <ng-container *ngIf=\"iconTemplate\">\r\n                    <ng-template *ngTemplateOutlet=\"iconTemplate\"></ng-template>\r\n                </ng-container>\r\n                <span class=\"cax-confirm-dialog-message\" *ngIf=\"!messageTemplate\" [innerHTML]=\"option('message')\"></span>\r\n                <ng-container *ngIf=\"messageTemplate\">\r\n                    <ng-template *ngTemplateOutlet=\"messageTemplate; context: { $implicit: confirmation }\"></ng-template>\r\n                </ng-container>\r\n            </div>\r\n            <div *ngIf=\"isShowCheckbox\" class=\"cax-dialog-checkbox\">\r\n                <cax-checkbox [disabled]=\"false\" [model]=\"model\" [label]=\"checkboxLabel\" binary=\"true\" (onChange)=\"onChange($event)\"></cax-checkbox>\r\n            </div>\r\n            <div class=\"cax-dialog-footer cax-confirm-dialog-footer\" *ngIf=\"footer || footerTemplate\">\r\n                <ng-content select=\"cax-footer\"></ng-content>\r\n                <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n            </div>\r\n            <div class=\"cax-dialog-footer cax-confirm-dialog-footer\" *ngIf=\"!footer && !footerTemplate\">\r\n                <span *ngIf=\"showCancelButton\" class=\"cax-button-container\">\r\n                    <button\r\n                        type=\"button\"\r\n                        caxRipple\r\n                        caxButton\r\n                        [label]=\"rejectButtonLabel\"\r\n                        [icon]=\"rejectIcon\"\r\n                        (click)=\"reject()\"\r\n                        [ngClass]=\"'cax-confirm-dialog-reject'\"\r\n                        [class]=\"option('rejectButtonStyleClass')\"\r\n                        *ngIf=\"option('rejectVisible')\"\r\n                        [attr.aria-label]=\"rejectAriaLabel\"\r\n                    >\r\n                        <!-- <ng-container *ngIf=\"!rejectIconTemplate\">\r\n                            <i *ngIf=\"option('rejectIcon')\" [class]=\"option('rejectIcon')\"></i>\r\n                            <TimesIcon *ngIf=\"!option('rejectIcon')\" [styleClass]=\"'cax-button-icon-left'\" />\r\n                        </ng-container> -->\r\n                        <span *ngIf=\"rejectIconTemplate\" class=\"cax-button-icon-left\">\r\n                            <ng-template *ngTemplateOutlet=\"rejectIconTemplate\"></ng-template>\r\n                        </span>\r\n                    </button>\r\n                </span>\r\n                <span *ngIf=\"showAcceptButton\" class=\"cax-button-container\">\r\n                    <button\r\n                        type=\"button\"\r\n                        caxRipple\r\n                        caxButton\r\n                        [label]=\"acceptButtonLabel\"\r\n                        [icon]=\"acceptIcon\"\r\n                        (click)=\"accept()\"\r\n                        [ngClass]=\"'cax-confirm-dialog-accept'\"\r\n                        [class]=\"option('acceptButtonStyleClass')\"\r\n                        *ngIf=\"option('acceptVisible')\"\r\n                        [attr.aria-label]=\"acceptAriaLabel\"\r\n                    >\r\n                        <!-- <ng-container *ngIf=\"!acceptIconTemplate\">\r\n                            <i *ngIf=\"option('acceptIcon')\" [class]=\"option('acceptIcon')\"></i>\r\n                            <CheckIcon *ngIf=\"!option('acceptIcon')\" [styleClass]=\"'cax-button-icon-left'\" />\r\n                        </ng-container> -->\r\n                        <span *ngIf=\"acceptIconTemplate\" class=\"cax-button-icon-left\">\r\n                            <ng-template *ngTemplateOutlet=\"acceptIconTemplate\"></ng-template>\r\n                        </span>\r\n                    </button>\r\n                </span>\r\n            </div>\r\n        </ng-template>\r\n    </div>\r\n</div>\r\n", styles: ["@layer cax{.cax-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.cax-dialog-mask.cax-component-overlay{pointer-events:auto}.cax-dialog{display:flex;flex-direction:column;pointer-events:auto;max-height:90%;transform:scale(1);position:relative}.cax-dialog-content{overflow-y:auto;flex-grow:1}.cax-dialog-header{display:flex;align-items:flex-start;justify-content:space-between;flex-shrink:0}.cax-dialog-draggable .cax-dialog-header{cursor:move}.cax-dialog-footer{display:flex;justify-content:flex-end;gap:8px;flex-shrink:0}.cax-button-container{display:inline-flex;align-items:center}.cax-dialog .cax-dialog-header-icons{display:flex;align-items:center}.cax-dialog .cax-dialog-header-icon{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.cax-fluid .cax-dialog-footer .cax-button{width:auto}.cax-dialog-top .cax-dialog,.cax-dialog-bottom .cax-dialog,.cax-dialog-left .cax-dialog,.cax-dialog-right .cax-dialog,.cax-dialog-top-left .cax-dialog,.cax-dialog-top-right .cax-dialog,.cax-dialog-bottom-left .cax-dialog,.cax-dialog-bottom-right .cax-dialog{margin:.75rem;transform:translateZ(0)}.cax-dialog-maximized{-webkit-transition:none;transition:none;transform:none;width:100vw!important;height:100vh!important;top:0!important;left:0!important;max-height:100%;height:100%}.cax-dialog-maximized .cax-dialog-content{flex-grow:1}.cax-dialog-left{justify-content:flex-start}.cax-dialog-right{justify-content:flex-end}.cax-dialog-top{align-items:flex-start}.cax-dialog-top-left{justify-content:flex-start;align-items:flex-start}.cax-dialog-top-right{justify-content:flex-end;align-items:flex-start}.cax-dialog-bottom{align-items:flex-end}.cax-dialog-bottom-left{justify-content:flex-start;align-items:flex-end}.cax-dialog-bottom-right{justify-content:flex-end;align-items:flex-end}.cax-dialog .cax-resizable-handle{position:absolute;font-size:.1px;display:block;cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.cax-header-allign{display:flex;align-items:center}.cax-dialog-header-icon{font-size:1.25rem}.cax-confirm-dialog .cax-dialog-content{display:flex;align-items:center}.cax-dialog-content .cax-dialog-checkbox{display:block;margin-top:1rem}.cax-dialog-checkbox input[type=checkbox]{margin-right:.5rem}.cax-header-align{display:flex;align-items:center}.cax-dialog-title{margin-left:10px}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[caxButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "link"] }, { kind: "directive", type: i4.Ripple, selector: "[caxRipple]" }, { kind: "component", type: i5.TimesIcon, selector: "TimesIcon" }, { kind: "component", type: i6.Checkbox, selector: "cax-checkbox", inputs: ["size", "value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant", "indeterminate", "model"], outputs: ["indeterminateChange", "onChange", "onFocus", "onBlur"] }], animations: [trigger('animation', [transition('void => visible', [useAnimation(showAnimation)]), transition('visible => void', [useAnimation(hideAnimation)])])], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    get severityIcon() {
+        const severity = this.option('severity');
+        switch (severity) {
+            case 'success':
+                return 'cax cax-check-circle-bold';
+            case 'warning':
+                return 'cax cax-shield-warning-bold';
+            case 'danger':
+                return 'cax cax-danger-triangle-bold';
+            default:
+                return 'cax cax-info-circle-bold';
+        }
+    }
+    get severityColorClass() {
+        const severity = this.option('severity');
+        switch (severity) {
+            case 'success':
+                return 'cax-confirm-dialog-icon-success';
+            case 'warning':
+                return 'cax-confirm-dialog-icon-warning';
+            case 'danger':
+                return 'cax-confirm-dialog-icon-danger';
+            default:
+                return 'cax-confirm-dialog-icon-primary';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ConfirmDialog, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.ConfirmationService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.caxConfig }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.25", type: ConfirmDialog, isStandalone: false, selector: "cax-confirmDialog", inputs: { header: "header", icon: "icon", message: "message", style: "style", styleClass: "styleClass", maskStyleClass: "maskStyleClass", acceptIcon: "acceptIcon", acceptLabel: "acceptLabel", closeAriaLabel: "closeAriaLabel", acceptAriaLabel: "acceptAriaLabel", acceptVisible: ["acceptVisible", "acceptVisible", booleanAttribute], rejectIcon: "rejectIcon", rejectLabel: "rejectLabel", rejectAriaLabel: "rejectAriaLabel", rejectVisible: ["rejectVisible", "rejectVisible", booleanAttribute], closeOnEscape: ["closeOnEscape", "closeOnEscape", booleanAttribute], dismissableMask: ["dismissableMask", "dismissableMask", booleanAttribute], blockScroll: ["blockScroll", "blockScroll", booleanAttribute], rtl: ["rtl", "rtl", booleanAttribute], closable: ["closable", "closable", booleanAttribute], appendTo: "appendTo", key: "key", autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], transitionOptions: "transitionOptions", focusTrap: ["focusTrap", "focusTrap", booleanAttribute], defaultFocus: "defaultFocus", breakpoints: "breakpoints", showCheckbox: "showCheckbox", checkboxLabel: "checkboxLabel", showCancelButton: "showCancelButton", showAcceptButton: "showAcceptButton", severity: "severity", visible: "visible", position: "position" }, outputs: { onHide: "onHide", visibleChange: "visibleChange" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "footer", first: true, predicate: Footer, descendants: true }, { propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "contentViewChild", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<div [class]=\"maskStyleClass\" [ngClass]=\"getMaskClass()\" *ngIf=\"maskVisible\">\n    <div\n        [ngClass]=\"{ 'cax-dialog cax-confirm-dialog cax-component': true, 'cax-dialog-rtl': rtl }\"\n        [ngStyle]=\"style\"\n        [class]=\"styleClass\"\n        [@animation]=\"{ value: 'visible', params: { transform: transformOptions, transition: transitionOptions } }\"\n        (@animation.start)=\"onAnimationStart($event)\"\n        (@animation.done)=\"onAnimationEnd($event)\"\n        role=\"alertdialog\"\n        *ngIf=\"visible\"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [attr.aria-modal]=\"true\"\n    >\n        <ng-container *ngIf=\"headlessTemplate; else notHeadless\">\n            <ng-container *ngTemplateOutlet=\"headlessTemplate; context: { $implicit: confirmation }\"></ng-container>\n        </ng-container>\n        <ng-template #notHeadless>\n            <div class=\"cax-dialog-header cax-confirm-dialog-header\" *ngIf=\"headerTemplate\">\n                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n            </div>\n            <div class=\"cax-dialog-header cax-confirm-dialog-header\" *ngIf=\"!headerTemplate\">\n                <div class=\"cax-header-allign\">\n                    <i [class]=\"severityIcon\" [ngClass]=\"severityColorClass\" class=\"cax-confirm-dialog-header-icon\" *ngIf=\"!headerTemplate\"></i>\n                    <span class=\"cax-dialog-title cax-text-heading-md-semibold\" [id]=\"ariaLabelledBy\" *ngIf=\"option('header')\">{{ option('header') }}</span>\n                </div>\n                <div class=\"cax-dialog-header-icons\">\n                    <button *ngIf=\"isClosable\" type=\"button\" role=\"button\" [attr.aria-label]=\"closeAriaLabel\" [ngClass]=\"{ 'cax-dialog-header-icon cax-dialog-header-close cax-link': true }\" (click)=\"close($event)\" (keydown.enter)=\"close($event)\">\n                        <i class=\"cax cax-close\"></i>\n                    </button>\n                </div>\n            </div>\n            <div #content class=\"cax-dialog-content cax-text-body-md-medium cax-confirm-dialog-content\">\n                <i [ngClass]=\"'cax-confirm-dialog-icon'\" [class]=\"option('icon')\" *ngIf=\"!iconTemplate && option('icon')\"></i>\n                <ng-container *ngIf=\"iconTemplate\">\n                    <ng-template *ngTemplateOutlet=\"iconTemplate\"></ng-template>\n                </ng-container>\n                <span class=\"cax-confirm-dialog-message cax-text-body-md-medium\" *ngIf=\"!messageTemplate\" [innerHTML]=\"option('message')\"></span>\n                <ng-container *ngIf=\"messageTemplate\">\n                    <ng-template *ngTemplateOutlet=\"messageTemplate; context: { $implicit: confirmation }\"></ng-template>\n                </ng-container>\n            </div>\n            <div *ngIf=\"isShowCheckbox\" class=\"cax-dialog-checkbox\">\n                <cax-checkbox [disabled]=\"false\" [model]=\"model\" [label]=\"checkboxLabel\" binary=\"true\" (onChange)=\"onChange($event)\"></cax-checkbox>\n            </div>\n            <div class=\"cax-dialog-footer cax-confirm-dialog-footer\" *ngIf=\"footer || footerTemplate\">\n                <ng-content select=\"cax-footer\"></ng-content>\n                <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n            </div>\n            <div class=\"cax-dialog-footer cax-confirm-dialog-footer\" *ngIf=\"!footer && !footerTemplate\">\n                <span *ngIf=\"showCancelButton\" class=\"cax-button-container\">\n                    <button\n                        type=\"button\"\n                        caxRipple\n                        caxButton\n                        severity=\"secondary\"\n                        outlined=\"true\"\n                        [label]=\"rejectButtonLabel\"\n                        [icon]=\"rejectIcon\"\n                        (click)=\"reject()\"\n                        [ngClass]=\"'cax-confirm-dialog-reject'\"\n                        *ngIf=\"option('rejectVisible')\"\n                        [attr.aria-label]=\"rejectAriaLabel\"\n                    >\n                        <!-- <ng-container *ngIf=\"!rejectIconTemplate\">\n                            <i *ngIf=\"option('rejectIcon')\" [class]=\"option('rejectIcon')\"></i>\n                            <TimesIcon *ngIf=\"!option('rejectIcon')\" [styleClass]=\"'cax-button-icon-left'\" />\n                        </ng-container> -->\n                        <span *ngIf=\"rejectIconTemplate\" class=\"cax-button-icon-left\">\n                            <ng-template *ngTemplateOutlet=\"rejectIconTemplate\"></ng-template>\n                        </span>\n                    </button>\n                </span>\n                <span *ngIf=\"showAcceptButton\" class=\"cax-button-container\">\n                    <button\n                        type=\"button\"\n                        caxRipple\n                        caxButton\n                        [label]=\"acceptButtonLabel\"\n                        [icon]=\"acceptIcon\"\n                        [severity]=\"option('severity') || 'primary'\"\n                        (click)=\"accept()\"\n                        [ngClass]=\"'cax-confirm-dialog-accept'\"\n                        *ngIf=\"option('acceptVisible')\"\n                        [attr.aria-label]=\"acceptAriaLabel\"\n                    >\n                        <!-- <ng-container *ngIf=\"!acceptIconTemplate\">\n                            <i *ngIf=\"option('acceptIcon')\" [class]=\"option('acceptIcon')\"></i>\n                            <CheckIcon *ngIf=\"!option('acceptIcon')\" [styleClass]=\"'cax-button-icon-left'\" />\n                        </ng-container> -->\n                        <span *ngIf=\"acceptIconTemplate\" class=\"cax-button-icon-left\">\n                            <ng-template *ngTemplateOutlet=\"acceptIconTemplate\"></ng-template>\n                        </span>\n                    </button>\n                </span>\n            </div>\n        </ng-template>\n    </div>\n</div>\n", styles: ["@layer cax{.cax-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.cax-dialog-mask.cax-component-overlay{pointer-events:auto}.cax-dialog{display:flex;flex-direction:column;pointer-events:auto;max-height:90%;transform:scale(1);position:relative}.cax-dialog-content{flex-grow:1}.cax-dialog-header{display:flex;align-items:flex-start;justify-content:space-between;flex-shrink:0}.cax-dialog-draggable .cax-dialog-header{cursor:move}.cax-dialog-footer{display:flex;justify-content:flex-end;gap:12px;flex-shrink:0}.cax-button-container{display:inline-flex;align-items:center}.cax-dialog .cax-dialog-header-icons{display:flex;align-items:center}.cax-dialog .cax-dialog-header-icon{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.cax-dialog-header-close i{font-size:20px}.cax-fluid .cax-dialog-footer .cax-button{width:auto}.cax-dialog-top .cax-dialog,.cax-dialog-bottom .cax-dialog,.cax-dialog-left .cax-dialog,.cax-dialog-right .cax-dialog,.cax-dialog-top-left .cax-dialog,.cax-dialog-top-right .cax-dialog,.cax-dialog-bottom-left .cax-dialog,.cax-dialog-bottom-right .cax-dialog{margin:.75rem;transform:translateZ(0)}.cax-dialog-maximized{-webkit-transition:none;transition:none;transform:none;width:100vw!important;height:100vh!important;top:0!important;left:0!important;max-height:100%;height:100%}.cax-dialog-maximized .cax-dialog-content{flex-grow:1}.cax-dialog-left{justify-content:flex-start}.cax-dialog-right{justify-content:flex-end}.cax-dialog-top{align-items:flex-start}.cax-dialog-top-left{justify-content:flex-start;align-items:flex-start}.cax-dialog-top-right{justify-content:flex-end;align-items:flex-start}.cax-dialog-bottom{align-items:flex-end}.cax-dialog-bottom-left{justify-content:flex-start;align-items:flex-end}.cax-dialog-bottom-right{justify-content:flex-end;align-items:flex-end}.cax-dialog .cax-resizable-handle{position:absolute;font-size:.1px;display:block;cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.cax-header-allign{display:flex;align-items:center}.cax-dialog-header-icon{font-size:1.25rem}.cax-confirm-dialog .cax-dialog-content{display:flex;align-items:center}.cax-dialog-content .cax-dialog-checkbox{display:block;margin-top:1rem}.cax-dialog-checkbox input[type=checkbox]{margin-right:.5rem}.cax-header-align{display:flex;align-items:center}.cax-confirm-dialog-header-icon{margin-right:12px;font-size:24px;display:flex;align-items:center;justify-content:center}.cax-confirm-dialog-header-icon.cax-confirm-dialog-icon-primary{color:var(--primary-500)}.cax-confirm-dialog-header-icon.cax-confirm-dialog-icon-success{color:var(--success-600)}.cax-confirm-dialog-header-icon.cax-confirm-dialog-icon-warning{color:var(--warning-600)}.cax-confirm-dialog-header-icon.cax-confirm-dialog-icon-danger{color:var(--error-600)}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[caxButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "link"] }, { kind: "directive", type: i4.Ripple, selector: "[caxRipple]" }, { kind: "component", type: i5.Checkbox, selector: "cax-checkbox", inputs: ["size", "value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant", "indeterminate", "model"], outputs: ["onChange", "onFocus", "onBlur"] }], animations: [trigger('animation', [transition('void => visible', [useAnimation(showAnimation)]), transition('visible => void', [useAnimation(hideAnimation)])])], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConfirmDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ConfirmDialog, decorators: [{
             type: Component,
             args: [{ selector: 'cax-confirmDialog', animations: [trigger('animation', [transition('void => visible', [useAnimation(showAnimation)]), transition('visible => void', [useAnimation(hideAnimation)])])], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, host: {
                         class: 'cax-element'
-                    }, template: "<div [class]=\"maskStyleClass\" [ngClass]=\"getMaskClass()\" *ngIf=\"maskVisible\">\r\n    <div\r\n        [ngClass]=\"{ 'cax-dialog cax-confirm-dialog cax-component': true, 'cax-dialog-rtl': rtl }\"\r\n        [ngStyle]=\"style\"\r\n        [class]=\"styleClass\"\r\n        [@animation]=\"{ value: 'visible', params: { transform: transformOptions, transition: transitionOptions } }\"\r\n        (@animation.start)=\"onAnimationStart($event)\"\r\n        (@animation.done)=\"onAnimationEnd($event)\"\r\n        role=\"alertdialog\"\r\n        *ngIf=\"visible\"\r\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n        [attr.aria-modal]=\"true\"\r\n    >\r\n        <ng-container *ngIf=\"headlessTemplate; else notHeadless\">\r\n            <ng-container *ngTemplateOutlet=\"headlessTemplate; context: { $implicit: confirmation }\"></ng-container>\r\n        </ng-container>\r\n        <ng-template #notHeadless>\r\n            <div class=\"cax-dialog-header cax-confirm-dialog-header\" *ngIf=\"headerTemplate\">\r\n                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n            </div>\r\n            <div class=\"cax-dialog-header cax-confirm-dialog-header\" *ngIf=\"!headerTemplate\">\r\n                <div class=\"cax-header-allign\">\r\n                    <span *ngIf=\"isHeaderIcon\"><i [class]=\"computedHeaderIcon\" [ngStyle]=\"computedHeaderIconStyle\" style=\"display: flex\" class=\"cax-dialog-header-icon\"></i></span>\r\n                    <span class=\"cax-dialog-title\" [id]=\"ariaLabelledBy\" *ngIf=\"option('header')\">{{ option('header') }}</span>\r\n                </div>\r\n                <div class=\"cax-dialog-header-icons\">\r\n                    <button *ngIf=\"isClosable\" type=\"button\" role=\"button\" [attr.aria-label]=\"closeAriaLabel\" [ngClass]=\"{ 'cax-dialog-header-icon cax-dialog-header-close cax-link': true }\" (click)=\"close($event)\" (keydown.enter)=\"close($event)\">\r\n                        <TimesIcon />\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <div #content class=\"cax-dialog-content cax-confirm-dialog-content\">\r\n                <i [ngClass]=\"'cax-confirm-dialog-icon'\" [class]=\"option('icon')\" *ngIf=\"!iconTemplate && option('icon')\"></i>\r\n                <ng-container *ngIf=\"iconTemplate\">\r\n                    <ng-template *ngTemplateOutlet=\"iconTemplate\"></ng-template>\r\n                </ng-container>\r\n                <span class=\"cax-confirm-dialog-message\" *ngIf=\"!messageTemplate\" [innerHTML]=\"option('message')\"></span>\r\n                <ng-container *ngIf=\"messageTemplate\">\r\n                    <ng-template *ngTemplateOutlet=\"messageTemplate; context: { $implicit: confirmation }\"></ng-template>\r\n                </ng-container>\r\n            </div>\r\n            <div *ngIf=\"isShowCheckbox\" class=\"cax-dialog-checkbox\">\r\n                <cax-checkbox [disabled]=\"false\" [model]=\"model\" [label]=\"checkboxLabel\" binary=\"true\" (onChange)=\"onChange($event)\"></cax-checkbox>\r\n            </div>\r\n            <div class=\"cax-dialog-footer cax-confirm-dialog-footer\" *ngIf=\"footer || footerTemplate\">\r\n                <ng-content select=\"cax-footer\"></ng-content>\r\n                <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n            </div>\r\n            <div class=\"cax-dialog-footer cax-confirm-dialog-footer\" *ngIf=\"!footer && !footerTemplate\">\r\n                <span *ngIf=\"showCancelButton\" class=\"cax-button-container\">\r\n                    <button\r\n                        type=\"button\"\r\n                        caxRipple\r\n                        caxButton\r\n                        [label]=\"rejectButtonLabel\"\r\n                        [icon]=\"rejectIcon\"\r\n                        (click)=\"reject()\"\r\n                        [ngClass]=\"'cax-confirm-dialog-reject'\"\r\n                        [class]=\"option('rejectButtonStyleClass')\"\r\n                        *ngIf=\"option('rejectVisible')\"\r\n                        [attr.aria-label]=\"rejectAriaLabel\"\r\n                    >\r\n                        <!-- <ng-container *ngIf=\"!rejectIconTemplate\">\r\n                            <i *ngIf=\"option('rejectIcon')\" [class]=\"option('rejectIcon')\"></i>\r\n                            <TimesIcon *ngIf=\"!option('rejectIcon')\" [styleClass]=\"'cax-button-icon-left'\" />\r\n                        </ng-container> -->\r\n                        <span *ngIf=\"rejectIconTemplate\" class=\"cax-button-icon-left\">\r\n                            <ng-template *ngTemplateOutlet=\"rejectIconTemplate\"></ng-template>\r\n                        </span>\r\n                    </button>\r\n                </span>\r\n                <span *ngIf=\"showAcceptButton\" class=\"cax-button-container\">\r\n                    <button\r\n                        type=\"button\"\r\n                        caxRipple\r\n                        caxButton\r\n                        [label]=\"acceptButtonLabel\"\r\n                        [icon]=\"acceptIcon\"\r\n                        (click)=\"accept()\"\r\n                        [ngClass]=\"'cax-confirm-dialog-accept'\"\r\n                        [class]=\"option('acceptButtonStyleClass')\"\r\n                        *ngIf=\"option('acceptVisible')\"\r\n                        [attr.aria-label]=\"acceptAriaLabel\"\r\n                    >\r\n                        <!-- <ng-container *ngIf=\"!acceptIconTemplate\">\r\n                            <i *ngIf=\"option('acceptIcon')\" [class]=\"option('acceptIcon')\"></i>\r\n                            <CheckIcon *ngIf=\"!option('acceptIcon')\" [styleClass]=\"'cax-button-icon-left'\" />\r\n                        </ng-container> -->\r\n                        <span *ngIf=\"acceptIconTemplate\" class=\"cax-button-icon-left\">\r\n                            <ng-template *ngTemplateOutlet=\"acceptIconTemplate\"></ng-template>\r\n                        </span>\r\n                    </button>\r\n                </span>\r\n            </div>\r\n        </ng-template>\r\n    </div>\r\n</div>\r\n", styles: ["@layer cax{.cax-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.cax-dialog-mask.cax-component-overlay{pointer-events:auto}.cax-dialog{display:flex;flex-direction:column;pointer-events:auto;max-height:90%;transform:scale(1);position:relative}.cax-dialog-content{overflow-y:auto;flex-grow:1}.cax-dialog-header{display:flex;align-items:flex-start;justify-content:space-between;flex-shrink:0}.cax-dialog-draggable .cax-dialog-header{cursor:move}.cax-dialog-footer{display:flex;justify-content:flex-end;gap:8px;flex-shrink:0}.cax-button-container{display:inline-flex;align-items:center}.cax-dialog .cax-dialog-header-icons{display:flex;align-items:center}.cax-dialog .cax-dialog-header-icon{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.cax-fluid .cax-dialog-footer .cax-button{width:auto}.cax-dialog-top .cax-dialog,.cax-dialog-bottom .cax-dialog,.cax-dialog-left .cax-dialog,.cax-dialog-right .cax-dialog,.cax-dialog-top-left .cax-dialog,.cax-dialog-top-right .cax-dialog,.cax-dialog-bottom-left .cax-dialog,.cax-dialog-bottom-right .cax-dialog{margin:.75rem;transform:translateZ(0)}.cax-dialog-maximized{-webkit-transition:none;transition:none;transform:none;width:100vw!important;height:100vh!important;top:0!important;left:0!important;max-height:100%;height:100%}.cax-dialog-maximized .cax-dialog-content{flex-grow:1}.cax-dialog-left{justify-content:flex-start}.cax-dialog-right{justify-content:flex-end}.cax-dialog-top{align-items:flex-start}.cax-dialog-top-left{justify-content:flex-start;align-items:flex-start}.cax-dialog-top-right{justify-content:flex-end;align-items:flex-start}.cax-dialog-bottom{align-items:flex-end}.cax-dialog-bottom-left{justify-content:flex-start;align-items:flex-end}.cax-dialog-bottom-right{justify-content:flex-end;align-items:flex-end}.cax-dialog .cax-resizable-handle{position:absolute;font-size:.1px;display:block;cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.cax-header-allign{display:flex;align-items:center}.cax-dialog-header-icon{font-size:1.25rem}.cax-confirm-dialog .cax-dialog-content{display:flex;align-items:center}.cax-dialog-content .cax-dialog-checkbox{display:block;margin-top:1rem}.cax-dialog-checkbox input[type=checkbox]{margin-right:.5rem}.cax-header-align{display:flex;align-items:center}.cax-dialog-title{margin-left:10px}}\n"] }]
+                    }, template: "<div [class]=\"maskStyleClass\" [ngClass]=\"getMaskClass()\" *ngIf=\"maskVisible\">\n    <div\n        [ngClass]=\"{ 'cax-dialog cax-confirm-dialog cax-component': true, 'cax-dialog-rtl': rtl }\"\n        [ngStyle]=\"style\"\n        [class]=\"styleClass\"\n        [@animation]=\"{ value: 'visible', params: { transform: transformOptions, transition: transitionOptions } }\"\n        (@animation.start)=\"onAnimationStart($event)\"\n        (@animation.done)=\"onAnimationEnd($event)\"\n        role=\"alertdialog\"\n        *ngIf=\"visible\"\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\n        [attr.aria-modal]=\"true\"\n    >\n        <ng-container *ngIf=\"headlessTemplate; else notHeadless\">\n            <ng-container *ngTemplateOutlet=\"headlessTemplate; context: { $implicit: confirmation }\"></ng-container>\n        </ng-container>\n        <ng-template #notHeadless>\n            <div class=\"cax-dialog-header cax-confirm-dialog-header\" *ngIf=\"headerTemplate\">\n                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n            </div>\n            <div class=\"cax-dialog-header cax-confirm-dialog-header\" *ngIf=\"!headerTemplate\">\n                <div class=\"cax-header-allign\">\n                    <i [class]=\"severityIcon\" [ngClass]=\"severityColorClass\" class=\"cax-confirm-dialog-header-icon\" *ngIf=\"!headerTemplate\"></i>\n                    <span class=\"cax-dialog-title cax-text-heading-md-semibold\" [id]=\"ariaLabelledBy\" *ngIf=\"option('header')\">{{ option('header') }}</span>\n                </div>\n                <div class=\"cax-dialog-header-icons\">\n                    <button *ngIf=\"isClosable\" type=\"button\" role=\"button\" [attr.aria-label]=\"closeAriaLabel\" [ngClass]=\"{ 'cax-dialog-header-icon cax-dialog-header-close cax-link': true }\" (click)=\"close($event)\" (keydown.enter)=\"close($event)\">\n                        <i class=\"cax cax-close\"></i>\n                    </button>\n                </div>\n            </div>\n            <div #content class=\"cax-dialog-content cax-text-body-md-medium cax-confirm-dialog-content\">\n                <i [ngClass]=\"'cax-confirm-dialog-icon'\" [class]=\"option('icon')\" *ngIf=\"!iconTemplate && option('icon')\"></i>\n                <ng-container *ngIf=\"iconTemplate\">\n                    <ng-template *ngTemplateOutlet=\"iconTemplate\"></ng-template>\n                </ng-container>\n                <span class=\"cax-confirm-dialog-message cax-text-body-md-medium\" *ngIf=\"!messageTemplate\" [innerHTML]=\"option('message')\"></span>\n                <ng-container *ngIf=\"messageTemplate\">\n                    <ng-template *ngTemplateOutlet=\"messageTemplate; context: { $implicit: confirmation }\"></ng-template>\n                </ng-container>\n            </div>\n            <div *ngIf=\"isShowCheckbox\" class=\"cax-dialog-checkbox\">\n                <cax-checkbox [disabled]=\"false\" [model]=\"model\" [label]=\"checkboxLabel\" binary=\"true\" (onChange)=\"onChange($event)\"></cax-checkbox>\n            </div>\n            <div class=\"cax-dialog-footer cax-confirm-dialog-footer\" *ngIf=\"footer || footerTemplate\">\n                <ng-content select=\"cax-footer\"></ng-content>\n                <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n            </div>\n            <div class=\"cax-dialog-footer cax-confirm-dialog-footer\" *ngIf=\"!footer && !footerTemplate\">\n                <span *ngIf=\"showCancelButton\" class=\"cax-button-container\">\n                    <button\n                        type=\"button\"\n                        caxRipple\n                        caxButton\n                        severity=\"secondary\"\n                        outlined=\"true\"\n                        [label]=\"rejectButtonLabel\"\n                        [icon]=\"rejectIcon\"\n                        (click)=\"reject()\"\n                        [ngClass]=\"'cax-confirm-dialog-reject'\"\n                        *ngIf=\"option('rejectVisible')\"\n                        [attr.aria-label]=\"rejectAriaLabel\"\n                    >\n                        <!-- <ng-container *ngIf=\"!rejectIconTemplate\">\n                            <i *ngIf=\"option('rejectIcon')\" [class]=\"option('rejectIcon')\"></i>\n                            <TimesIcon *ngIf=\"!option('rejectIcon')\" [styleClass]=\"'cax-button-icon-left'\" />\n                        </ng-container> -->\n                        <span *ngIf=\"rejectIconTemplate\" class=\"cax-button-icon-left\">\n                            <ng-template *ngTemplateOutlet=\"rejectIconTemplate\"></ng-template>\n                        </span>\n                    </button>\n                </span>\n                <span *ngIf=\"showAcceptButton\" class=\"cax-button-container\">\n                    <button\n                        type=\"button\"\n                        caxRipple\n                        caxButton\n                        [label]=\"acceptButtonLabel\"\n                        [icon]=\"acceptIcon\"\n                        [severity]=\"option('severity') || 'primary'\"\n                        (click)=\"accept()\"\n                        [ngClass]=\"'cax-confirm-dialog-accept'\"\n                        *ngIf=\"option('acceptVisible')\"\n                        [attr.aria-label]=\"acceptAriaLabel\"\n                    >\n                        <!-- <ng-container *ngIf=\"!acceptIconTemplate\">\n                            <i *ngIf=\"option('acceptIcon')\" [class]=\"option('acceptIcon')\"></i>\n                            <CheckIcon *ngIf=\"!option('acceptIcon')\" [styleClass]=\"'cax-button-icon-left'\" />\n                        </ng-container> -->\n                        <span *ngIf=\"acceptIconTemplate\" class=\"cax-button-icon-left\">\n                            <ng-template *ngTemplateOutlet=\"acceptIconTemplate\"></ng-template>\n                        </span>\n                    </button>\n                </span>\n            </div>\n        </ng-template>\n    </div>\n</div>\n", styles: ["@layer cax{.cax-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.cax-dialog-mask.cax-component-overlay{pointer-events:auto}.cax-dialog{display:flex;flex-direction:column;pointer-events:auto;max-height:90%;transform:scale(1);position:relative}.cax-dialog-content{flex-grow:1}.cax-dialog-header{display:flex;align-items:flex-start;justify-content:space-between;flex-shrink:0}.cax-dialog-draggable .cax-dialog-header{cursor:move}.cax-dialog-footer{display:flex;justify-content:flex-end;gap:12px;flex-shrink:0}.cax-button-container{display:inline-flex;align-items:center}.cax-dialog .cax-dialog-header-icons{display:flex;align-items:center}.cax-dialog .cax-dialog-header-icon{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.cax-dialog-header-close i{font-size:20px}.cax-fluid .cax-dialog-footer .cax-button{width:auto}.cax-dialog-top .cax-dialog,.cax-dialog-bottom .cax-dialog,.cax-dialog-left .cax-dialog,.cax-dialog-right .cax-dialog,.cax-dialog-top-left .cax-dialog,.cax-dialog-top-right .cax-dialog,.cax-dialog-bottom-left .cax-dialog,.cax-dialog-bottom-right .cax-dialog{margin:.75rem;transform:translateZ(0)}.cax-dialog-maximized{-webkit-transition:none;transition:none;transform:none;width:100vw!important;height:100vh!important;top:0!important;left:0!important;max-height:100%;height:100%}.cax-dialog-maximized .cax-dialog-content{flex-grow:1}.cax-dialog-left{justify-content:flex-start}.cax-dialog-right{justify-content:flex-end}.cax-dialog-top{align-items:flex-start}.cax-dialog-top-left{justify-content:flex-start;align-items:flex-start}.cax-dialog-top-right{justify-content:flex-end;align-items:flex-start}.cax-dialog-bottom{align-items:flex-end}.cax-dialog-bottom-left{justify-content:flex-start;align-items:flex-end}.cax-dialog-bottom-right{justify-content:flex-end;align-items:flex-end}.cax-dialog .cax-resizable-handle{position:absolute;font-size:.1px;display:block;cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.cax-header-allign{display:flex;align-items:center}.cax-dialog-header-icon{font-size:1.25rem}.cax-confirm-dialog .cax-dialog-content{display:flex;align-items:center}.cax-dialog-content .cax-dialog-checkbox{display:block;margin-top:1rem}.cax-dialog-checkbox input[type=checkbox]{margin-right:.5rem}.cax-header-align{display:flex;align-items:center}.cax-confirm-dialog-header-icon{margin-right:12px;font-size:24px;display:flex;align-items:center;justify-content:center}.cax-confirm-dialog-header-icon.cax-confirm-dialog-icon-primary{color:var(--primary-500)}.cax-confirm-dialog-header-icon.cax-confirm-dialog-icon-success{color:var(--success-600)}.cax-confirm-dialog-header-icon.cax-confirm-dialog-icon-warning{color:var(--warning-600)}.cax-confirm-dialog-header-icon.cax-confirm-dialog-icon-danger{color:var(--error-600)}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.ConfirmationService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1.caxConfig }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -658,10 +666,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
             }], rejectVisible: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], acceptButtonStyleClass: [{
-                type: Input
-            }], rejectButtonStyleClass: [{
-                type: Input
             }], closeOnEscape: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -696,10 +700,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Input
             }], breakpoints: [{
                 type: Input
-            }], headerIcon: [{
-                type: Input
-            }], headerIconStyle: [{
-                type: Input
             }], showCheckbox: [{
                 type: Input
             }], checkboxLabel: [{
@@ -708,12 +708,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Input
             }], showAcceptButton: [{
                 type: Input
+            }], severity: [{
+                type: Input
             }], visible: [{
                 type: Input
             }], position: [{
                 type: Input
             }], onHide: [{
                 type: Output
+            }], visibleChange: [{
+                type: Output
             }], footer: [{
                 type: ContentChild,
                 args: [Footer]
@@ -726,11 +730,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
             }] } });
 
 class ConfirmDialogModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConfirmDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: ConfirmDialogModule, declarations: [ConfirmDialog], imports: [CommonModule, ButtonModule, RippleModule, TimesIcon, CheckIcon, FormsModule, CheckboxModule], exports: [ConfirmDialog, ButtonModule, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConfirmDialogModule, imports: [CommonModule, ButtonModule, RippleModule, TimesIcon, CheckIcon, FormsModule, CheckboxModule, ButtonModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ConfirmDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: ConfirmDialogModule, declarations: [ConfirmDialog], imports: [CommonModule, ButtonModule, RippleModule, TimesIcon, CheckIcon, FormsModule, CheckboxModule], exports: [ConfirmDialog, ButtonModule, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ConfirmDialogModule, imports: [CommonModule, ButtonModule, RippleModule, TimesIcon, CheckIcon, FormsModule, CheckboxModule, ButtonModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ConfirmDialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ConfirmDialogModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ButtonModule, RippleModule, TimesIcon, CheckIcon, FormsModule, CheckboxModule],