import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@tilde-nlp/ngx-common";
import * as i3 from "@ngbracket/ngx-layout/flex";
import * as i4 from "@ngx-translate/core";
export class TldMessageComponent {
    constructor() { }
    message;
    contentProjection;
    hideClose = false;
    onClose = new EventEmitter();
    get id() {
        return this.message?.params?.id || "";
    }
    get closeButtonId() {
        return this.message?.params?.closeButtonId || "";
    }
    className;
    ClearLabelCode = "CLEAR_NOTIFICATION";
    ngOnInit() {
        if (!this.message) {
            return;
        }
        this.className = this.message.type.toLowerCase();
    }
    close() {
        if (this.message?.params?.parentId) {
            const parent = document.getElementById(this.message.params.parentId);
            if (parent) {
                parent.focus();
            }
        }
        this.onClose.emit();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TldMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TldMessageComponent, selector: "tld-message", inputs: { message: "message", contentProjection: "contentProjection", hideClose: "hideClose" }, outputs: { onClose: "onClose" }, ngImport: i0, template: "<div fxFlex fxLayout=\"row\" aria-live=\"polite\" class=\"info-message-box {{className}}\" [attr.id]=\"id\" >\r\n    <div fxFlex class=\"message-box-text\" *ngIf=\"!contentProjection\" [innerHtml]=\"message.text | translate: message.params\"></div>\r\n    <ng-content *ngIf=\"contentProjection\"></ng-content>\r\n  <tld-close-button [ariaCode]=\"ClearLabelCode\"  *ngIf=\"!hideClose\" (tldClick)=\"close()\" [attr.id]=\"closeButtonId\"></tld-close-button>\r\n</div>\r\n", styles: [".info-message-box{padding:.2em 0 .6em;width:100%;position:relative;background-color:#fff;border-top:2px solid;margin-top:5px;margin-bottom:15px;min-height:55px}.info-message-box.success{background-color:#f2fffb;border-top-color:#259e76;color:#006141}.info-message-box.error{color:#940007;background-color:#fdf3f3;border-top-color:#e5242e}.info-message-box.warning{border-top-color:#ff8c00;background-color:#fff5cc}.info-message-box tld-close-button{position:absolute;right:0}.info-message-box .message-box-text{padding-right:40px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.CloseButtonComponent, selector: "tld-close-button", inputs: ["ariaCode", "disabled", "tooltip"], outputs: ["tldClick"] }, { kind: "directive", type: i3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TldMessageComponent, decorators: [{
            type: Component,
            args: [{ selector: 'tld-message', template: "<div fxFlex fxLayout=\"row\" aria-live=\"polite\" class=\"info-message-box {{className}}\" [attr.id]=\"id\" >\r\n    <div fxFlex class=\"message-box-text\" *ngIf=\"!contentProjection\" [innerHtml]=\"message.text | translate: message.params\"></div>\r\n    <ng-content *ngIf=\"contentProjection\"></ng-content>\r\n  <tld-close-button [ariaCode]=\"ClearLabelCode\"  *ngIf=\"!hideClose\" (tldClick)=\"close()\" [attr.id]=\"closeButtonId\"></tld-close-button>\r\n</div>\r\n", styles: [".info-message-box{padding:.2em 0 .6em;width:100%;position:relative;background-color:#fff;border-top:2px solid;margin-top:5px;margin-bottom:15px;min-height:55px}.info-message-box.success{background-color:#f2fffb;border-top-color:#259e76;color:#006141}.info-message-box.error{color:#940007;background-color:#fdf3f3;border-top-color:#e5242e}.info-message-box.warning{border-top-color:#ff8c00;background-color:#fff5cc}.info-message-box tld-close-button{position:absolute;right:0}.info-message-box .message-box-text{padding-right:40px}\n"] }]
        }], ctorParameters: () => [], propDecorators: { message: [{
                type: Input
            }], contentProjection: [{
                type: Input
            }], hideClose: [{
                type: Input
            }], onClose: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 