import { Component, Input, Output, EventEmitter } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@ionic/angular";
import * as i2 from "@angular/common";
import * as i3 from "../button/button.component";
import * as i4 from "../spacer/spacer.component";
import * as i5 from "../icon/icon.component";
export class NotificationComponent {
    data;
    buttonClick = new EventEmitter();
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: NotificationComponent, selector: "cf-notification", inputs: { data: "data" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<div *ngIf=\"data\">\n  <cf-spacer mobile=\"16\" desktop=\"24\"></cf-spacer>\n  <ion-grid>\n    <ion-row class=\"ion-justify-content-center\">\n      <ion-col size=\"12\">\n        <div [ngClass]=\"data.status\" id=\"notification-container\">\n          <ion-grid>\n            <ion-row>\n              <ion-col class=\"ion-align-self-center ion-text-start\">\n                <p class=\"body-medium bold\">{{ data.heading }}</p>\n              </ion-col>\n              <ion-col size=\"auto\">\n                <cf-icon icon=\"close\" *ngIf=\"data.canClose\" (click)=\"data = undefined\" [height]=\"10\" [iconColor]=\"data.status\"></cf-icon>\n              </ion-col>\n              <ion-col *ngIf=\"data.message\" size=\"12\">\n                <cf-spacer default=\"8\"></cf-spacer>\n                <p class=\"body-small\">{{ data.message }}</p>\n              </ion-col>\n              <ion-col *ngIf=\"data.button?.buttonHeading\">\n                <cf-spacer default=\"8\"></cf-spacer>\n                <p class=\"body-medium bold\">{{ data.button?.buttonHeading }}</p>\n              </ion-col>\n              <ion-col size=\"12\">\n                <ng-content></ng-content>\n              </ion-col>\n              <ion-col size=\"12\" *ngIf=\"data.button\">\n                <cf-spacer default=\"8\"></cf-spacer>\n                <cf-btn type=\"primary\" fontSize=\"large\" action snug (click)=\"buttonClick.emit(data.button.buttonClickIdentifier)\">{{\n                  data.button.buttonText\n                }}</cf-btn>\n              </ion-col>\n            </ion-row>\n          </ion-grid>\n        </div>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n</div>\n", styles: ["#notification-container{border-radius:4px;text-align:start;padding:12px;margin-inline:auto;max-width:640px}#notification-container.success{border:1.5px solid var(--cf-app-system-color-success);background-color:var(--cf-app-system-color-light-success)}#notification-container.warning{border:1.5px solid var(--cf-app-system-color-warning);background-color:var(--cf-app-system-color-light-warning)}#notification-container.error{border:1.5px solid var(--cf-app-system-color-error);background-color:var(--cf-app-system-color-light-error)}\n"], dependencies: [{ kind: "component", type: i1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ButtonComponent, selector: "cf-btn", inputs: ["type", "disabled", "alert", "action", "snug", "accent", "fontSize", "iconStart", "iconEnd", "loading", "customColor"] }, { kind: "component", type: i4.SpacerComponent, selector: "cf-spacer", inputs: ["default", "mobile", "desktop"] }, { kind: "component", type: i5.IconComponent, selector: "cf-icon", inputs: ["icon", "height", "heightMobile", "heightDesktop", "iconColor"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: NotificationComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cf-notification', template: "<div *ngIf=\"data\">\n  <cf-spacer mobile=\"16\" desktop=\"24\"></cf-spacer>\n  <ion-grid>\n    <ion-row class=\"ion-justify-content-center\">\n      <ion-col size=\"12\">\n        <div [ngClass]=\"data.status\" id=\"notification-container\">\n          <ion-grid>\n            <ion-row>\n              <ion-col class=\"ion-align-self-center ion-text-start\">\n                <p class=\"body-medium bold\">{{ data.heading }}</p>\n              </ion-col>\n              <ion-col size=\"auto\">\n                <cf-icon icon=\"close\" *ngIf=\"data.canClose\" (click)=\"data = undefined\" [height]=\"10\" [iconColor]=\"data.status\"></cf-icon>\n              </ion-col>\n              <ion-col *ngIf=\"data.message\" size=\"12\">\n                <cf-spacer default=\"8\"></cf-spacer>\n                <p class=\"body-small\">{{ data.message }}</p>\n              </ion-col>\n              <ion-col *ngIf=\"data.button?.buttonHeading\">\n                <cf-spacer default=\"8\"></cf-spacer>\n                <p class=\"body-medium bold\">{{ data.button?.buttonHeading }}</p>\n              </ion-col>\n              <ion-col size=\"12\">\n                <ng-content></ng-content>\n              </ion-col>\n              <ion-col size=\"12\" *ngIf=\"data.button\">\n                <cf-spacer default=\"8\"></cf-spacer>\n                <cf-btn type=\"primary\" fontSize=\"large\" action snug (click)=\"buttonClick.emit(data.button.buttonClickIdentifier)\">{{\n                  data.button.buttonText\n                }}</cf-btn>\n              </ion-col>\n            </ion-row>\n          </ion-grid>\n        </div>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n</div>\n", styles: ["#notification-container{border-radius:4px;text-align:start;padding:12px;margin-inline:auto;max-width:640px}#notification-container.success{border:1.5px solid var(--cf-app-system-color-success);background-color:var(--cf-app-system-color-light-success)}#notification-container.warning{border:1.5px solid var(--cf-app-system-color-warning);background-color:var(--cf-app-system-color-light-warning)}#notification-container.error{border:1.5px solid var(--cf-app-system-color-error);background-color:var(--cf-app-system-color-light-error)}\n"] }]
        }], propDecorators: { data: [{
                type: Input
            }], buttonClick: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 