import { ChangeDetectionStrategy, Component, ContentChild, EventEmitter, Input, Output } from '@angular/core';
import { interval } from 'rxjs';
import { ToastDescriptionDirective } from './toast-description.directive';
import { TranslateDirective } from '@ngx-translate/core';
import { IconComponent } from '../icon/icon.component';
import { NgClass, NgTemplateOutlet } from '@angular/common';
import * as i0 from "@angular/core";
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();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToastComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ToastComponent, isStandalone: true, 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: "@if (type) {\n  <div class=\"uno-toast\" [ngClass]=\"type\">\n    <div class=\"toast-status\" [ngClass]=\"type\"></div>\n    <div class=\"toast-container\">\n      <div class=\"slds-size--1-of-12\">\n        @switch (type) {\n          @case ('error') {\n            <uno-icon icon=\"error_icon\" svgType=\"sprite-color\" [withOpacity]=\"false\" size=\"small\"></uno-icon>\n          }\n          @case ('warning') {\n            <uno-icon icon=\"alert-over\" svgType=\"sprite-color\" [withOpacity]=\"false\" size=\"small\"></uno-icon>\n          }\n          @case ('info') {\n            <uno-icon icon=\"info\" svgType=\"sprite-color\" [withOpacity]=\"false\" size=\"small\"></uno-icon>\n          }\n          @case ('success') {\n            <uno-icon icon=\"validate_o\" svgType=\"sprite-color\" [withOpacity]=\"false\" size=\"small\"></uno-icon>\n          }\n        }\n      </div>\n      <div class=\"slds-grid slds-grid--vertical slds-size--10-of-12\">\n        <div class=\"slds-grid\">\n          <label class=\"open-sans-semibold-16\" style=\"line-height: 20px;\" translate>{{ title }}</label>\n        </div>\n        <div class=\"slds-p-top--xx-small open-sans-12\" style=\"white-space: pre-wrap;\">\n          <label class=\"open-sans-12\" style=\"line-height: 16px;\" translate>{{ subTitle }}</label>\n          @if (toastDescriptionDirective) {\n            <ng-template [ngTemplateOutlet]=\"toastDescriptionDirective.templateRef\"></ng-template>\n          }\n        </div>\n      </div>\n      <div class=\"slds-size--1-of-12 slds-text-align--right\">\n        <uno-icon icon=\"close\" size=\"small\" (click)=\"onClose()\"></uno-icon>\n      </div>\n      @if (showAction) {\n        <div class=\"slds-size--1-of-1 slds-text-align--right slds-p-top--x-small\">\n          <button class=\"action-button\" [ngClass]=\"type\" (click)=\"onClickAction()\" translate>{{ actionTitle }}</button>\n        </div>\n      }\n    </div>\n  </div>\n}", 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "uno-icon", inputs: ["svgType", "icon", "withOpacity", "color", "size", "customColor"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToastComponent, decorators: [{
            type: Component,
            args: [{ selector: 'uno-toast', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass, IconComponent, TranslateDirective, NgTemplateOutlet], template: "@if (type) {\n  <div class=\"uno-toast\" [ngClass]=\"type\">\n    <div class=\"toast-status\" [ngClass]=\"type\"></div>\n    <div class=\"toast-container\">\n      <div class=\"slds-size--1-of-12\">\n        @switch (type) {\n          @case ('error') {\n            <uno-icon icon=\"error_icon\" svgType=\"sprite-color\" [withOpacity]=\"false\" size=\"small\"></uno-icon>\n          }\n          @case ('warning') {\n            <uno-icon icon=\"alert-over\" svgType=\"sprite-color\" [withOpacity]=\"false\" size=\"small\"></uno-icon>\n          }\n          @case ('info') {\n            <uno-icon icon=\"info\" svgType=\"sprite-color\" [withOpacity]=\"false\" size=\"small\"></uno-icon>\n          }\n          @case ('success') {\n            <uno-icon icon=\"validate_o\" svgType=\"sprite-color\" [withOpacity]=\"false\" size=\"small\"></uno-icon>\n          }\n        }\n      </div>\n      <div class=\"slds-grid slds-grid--vertical slds-size--10-of-12\">\n        <div class=\"slds-grid\">\n          <label class=\"open-sans-semibold-16\" style=\"line-height: 20px;\" translate>{{ title }}</label>\n        </div>\n        <div class=\"slds-p-top--xx-small open-sans-12\" style=\"white-space: pre-wrap;\">\n          <label class=\"open-sans-12\" style=\"line-height: 16px;\" translate>{{ subTitle }}</label>\n          @if (toastDescriptionDirective) {\n            <ng-template [ngTemplateOutlet]=\"toastDescriptionDirective.templateRef\"></ng-template>\n          }\n        </div>\n      </div>\n      <div class=\"slds-size--1-of-12 slds-text-align--right\">\n        <uno-icon icon=\"close\" size=\"small\" (click)=\"onClose()\"></uno-icon>\n      </div>\n      @if (showAction) {\n        <div class=\"slds-size--1-of-1 slds-text-align--right slds-p-top--x-small\">\n          <button class=\"action-button\" [ngClass]=\"type\" (click)=\"onClickAction()\" translate>{{ actionTitle }}</button>\n        </div>\n      }\n    </div>\n  </div>\n}", 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: () => [{ 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, 