import { ChangeDetectionStrategy, Component, ContentChild, EventEmitter, Input, Output } from '@angular/core';
import { interval } from 'rxjs';
import { ToastDescriptionDirective } from './toast-description.directive';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@ngx-translate/core";
import * as i3 from "../icon/icon.component";
export class ToastComponent {
    constructor(cdr) {
        this.cdr = cdr;
        this.type = 'info';
        this.action = new EventEmitter();
        this.close = new EventEmitter();
    }
    ngOnChanges() {
        if (this.type) {
            this.interval = interval(5000).subscribe(() => this.onClose());
            // TO IMPLEMENT ON FEATURE TO MULTIPLE TOASTS
            // this.toast.push(this.type);
            // setTimeout(() => {
            //     this.toast.splice(0, 1);
            //     this.onClose()
            //     console.log(this.toast);
            // }, 5000);
            // this.intervals$.add(
            //     interval(5000).subscribe(() => {
            //         this.toast.splice(0, 1);
            //         console.log(this.toast);
            //     })
            // )
        }
    }
    ngOnDestroy() {
        if (this.interval) {
            this.interval.unsubscribe();
            this.close.emit();
        }
    }
    onClose() {
        this.type = null;
        this.cdr.detectChanges();
        this.ngOnDestroy();
    }
    onClickAction() {
        this.action.emit();
    }
}
ToastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToastComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
ToastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ToastComponent, selector: "uno-toast", inputs: { type: "type", title: "title", subTitle: "subTitle", showAction: "showAction", actionTitle: "actionTitle" }, outputs: { action: "action", close: "close" }, queries: [{ propertyName: "toastDescriptionDirective", first: true, predicate: ToastDescriptionDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"type\" class=\"uno-toast\" [ngClass]=\"type\">\r\n    <div class=\"toast-status\" [ngClass]=\"type\"></div>\r\n    <div class=\"toast-container\">\r\n        <div class=\"slds-size--1-of-12\" [ngSwitch]=\"type\">\r\n            <uno-icon *ngSwitchCase=\"'error'\" icon=\"error_icon\" svgType=\"sprite-color\" [withOpacity]=\"false\" size=\"x-small\"></uno-icon>\r\n            <uno-icon *ngSwitchCase=\"'warning'\" icon=\"alert-over\" svgType=\"sprite-color\" [withOpacity]=\"false\" size=\"x-small\"></uno-icon>\r\n            <uno-icon *ngSwitchCase=\"'info'\" icon=\"info\" svgType=\"sprite-color\" [withOpacity]=\"false\" size=\"x-small\"></uno-icon>\r\n            <uno-icon *ngSwitchCase=\"'success'\" icon=\"validate_o\" svgType=\"sprite-color\" [withOpacity]=\"false\" size=\"x-small\"></uno-icon>\r\n        </div>\r\n        <div class=\"slds-grid slds-grid--vertical slds-size--10-of-12\">\r\n            <div class=\"slds-grid\">\r\n                <label class=\"open-sans-semibold-16\" style=\"line-height: 20px;\" translate>{{ title }}</label>\r\n            </div>\r\n            <div class=\"slds-p-top--xx-small open-sans-12\" style=\"white-space: pre-wrap;\">\r\n                <label class=\"open-sans-12\" style=\"line-height: 16px;\" translate>{{ subTitle }}</label>\r\n                <ng-template *ngIf=\"toastDescriptionDirective\" [ngTemplateOutlet]=\"toastDescriptionDirective.templateRef\"></ng-template>\r\n            </div>\r\n        </div>\r\n        <div class=\"slds-size--1-of-12 slds-text-align--right\">\r\n            <uno-icon icon=\"close\" size=\"x-small\" (click)=\"onClose()\"></uno-icon>\r\n        </div>\r\n        <div *ngIf=\"showAction\" class=\"slds-size--1-of-1 slds-text-align--right slds-p-top--x-small\">\r\n            <button class=\"action-button\" [ngClass]=\"type\" (click)=\"onClickAction()\" translate>{{ actionTitle }}</button>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".uno-toast{position:fixed;top:16px;right:16px;z-index:999999;width:330px;border-radius:8px;display:grid;grid-template-columns:5px 1fr}.uno-toast.success{background-color:var(--success-background)}.uno-toast.warning{background-color:var(--warning-background)}.uno-toast.info{background-color:var(--information-background)}.uno-toast.error{background-color:var(--error-background)}.uno-toast .toast-status{height:inherit;border-radius:8px 0 0 8px}.uno-toast .toast-status.success{background-color:var(--light-success)}.uno-toast .toast-status.warning{background-color:var(--light-warning)}.uno-toast .toast-status.info{background-color:var(--light-information)}.uno-toast .toast-status.error{background-color:var(--light-error)}.uno-toast .toast-container{display:flex;flex-wrap:wrap;align-items:flex-start;padding:16px}.uno-toast .toast-container .action-button{min-width:110px;min-height:24px;border-radius:8px;font-family:Nunito;font-size:10px;font-weight:700;line-height:10px}.uno-toast .toast-container .action-button.success{background-color:var(--success-background);border:1px solid var(--light-success);color:var(--light-success)}.uno-toast .toast-container .action-button.warning{background-color:var(--warning-background);border:1px solid var(--light-warning);color:var(--light-warning)}.uno-toast .toast-container .action-button.info{background-color:var(--information-background);border:1px solid var(--light-information);color:var(--light-information)}.uno-toast .toast-container .action-button.error{background-color:var(--error-background);border:1px solid var(--light-error);color:var(--light-error)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i3.IconComponent, selector: "uno-icon", inputs: ["svgType", "icon", "withOpacity", "color", "size", "customColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToastComponent, decorators: [{
            type: Component,
            args: [{ selector: 'uno-toast', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"type\" class=\"uno-toast\" [ngClass]=\"type\">\r\n    <div class=\"toast-status\" [ngClass]=\"type\"></div>\r\n    <div class=\"toast-container\">\r\n        <div class=\"slds-size--1-of-12\" [ngSwitch]=\"type\">\r\n            <uno-icon *ngSwitchCase=\"'error'\" icon=\"error_icon\" svgType=\"sprite-color\" [withOpacity]=\"false\" size=\"x-small\"></uno-icon>\r\n            <uno-icon *ngSwitchCase=\"'warning'\" icon=\"alert-over\" svgType=\"sprite-color\" [withOpacity]=\"false\" size=\"x-small\"></uno-icon>\r\n            <uno-icon *ngSwitchCase=\"'info'\" icon=\"info\" svgType=\"sprite-color\" [withOpacity]=\"false\" size=\"x-small\"></uno-icon>\r\n            <uno-icon *ngSwitchCase=\"'success'\" icon=\"validate_o\" svgType=\"sprite-color\" [withOpacity]=\"false\" size=\"x-small\"></uno-icon>\r\n        </div>\r\n        <div class=\"slds-grid slds-grid--vertical slds-size--10-of-12\">\r\n            <div class=\"slds-grid\">\r\n                <label class=\"open-sans-semibold-16\" style=\"line-height: 20px;\" translate>{{ title }}</label>\r\n            </div>\r\n            <div class=\"slds-p-top--xx-small open-sans-12\" style=\"white-space: pre-wrap;\">\r\n                <label class=\"open-sans-12\" style=\"line-height: 16px;\" translate>{{ subTitle }}</label>\r\n                <ng-template *ngIf=\"toastDescriptionDirective\" [ngTemplateOutlet]=\"toastDescriptionDirective.templateRef\"></ng-template>\r\n            </div>\r\n        </div>\r\n        <div class=\"slds-size--1-of-12 slds-text-align--right\">\r\n            <uno-icon icon=\"close\" size=\"x-small\" (click)=\"onClose()\"></uno-icon>\r\n        </div>\r\n        <div *ngIf=\"showAction\" class=\"slds-size--1-of-1 slds-text-align--right slds-p-top--x-small\">\r\n            <button class=\"action-button\" [ngClass]=\"type\" (click)=\"onClickAction()\" translate>{{ actionTitle }}</button>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".uno-toast{position:fixed;top:16px;right:16px;z-index:999999;width:330px;border-radius:8px;display:grid;grid-template-columns:5px 1fr}.uno-toast.success{background-color:var(--success-background)}.uno-toast.warning{background-color:var(--warning-background)}.uno-toast.info{background-color:var(--information-background)}.uno-toast.error{background-color:var(--error-background)}.uno-toast .toast-status{height:inherit;border-radius:8px 0 0 8px}.uno-toast .toast-status.success{background-color:var(--light-success)}.uno-toast .toast-status.warning{background-color:var(--light-warning)}.uno-toast .toast-status.info{background-color:var(--light-information)}.uno-toast .toast-status.error{background-color:var(--light-error)}.uno-toast .toast-container{display:flex;flex-wrap:wrap;align-items:flex-start;padding:16px}.uno-toast .toast-container .action-button{min-width:110px;min-height:24px;border-radius:8px;font-family:Nunito;font-size:10px;font-weight:700;line-height:10px}.uno-toast .toast-container .action-button.success{background-color:var(--success-background);border:1px solid var(--light-success);color:var(--light-success)}.uno-toast .toast-container .action-button.warning{background-color:var(--warning-background);border:1px solid var(--light-warning);color:var(--light-warning)}.uno-toast .toast-container .action-button.info{background-color:var(--information-background);border:1px solid var(--light-information);color:var(--light-information)}.uno-toast .toast-container .action-button.error{background-color:var(--error-background);border:1px solid var(--light-error);color:var(--light-error)}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { type: [{
                type: Input
            }], title: [{
                type: Input
            }], subTitle: [{
                type: Input
            }], showAction: [{
                type: Input
            }], actionTitle: [{
                type: Input
            }], action: [{
                type: Output
            }], close: [{
                type: Output
            }], toastDescriptionDirective: [{
                type: ContentChild,
                args: [ToastDescriptionDirective]
            }] } });
//# sourceMappingURL=data:application/json;base64, 