import { Component, Input, Output, EventEmitter, HostBinding } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../../core/cache.service";
import * as i2 from "@angular/common";
import * as i3 from "../button/button.component";
export class BannerComponent {
    constructor(cacheService) {
        this.cacheService = cacheService;
        /** hidden hides the banner */
        this.hidden = false;
        /**The ID of the component, rendered into the HTML to make it more accessible to automation */
        this.id = '';
        /**The type of banner which is used to determine the styling */
        this.type = 'warning';
        this.bannerStyle = 'pinned';
        /**Show an x to allow hiding the banner */
        this.showCloseBtn = false;
        /** When true, the banner will hide itself when the close button is clicked */
        this.autoHideOnClose = true;
        /** When true, the banner will automatically hide itself based on the state found in local storage  */
        this.rememberClosed = false;
        /**Event to hide the banner */
        this.closed = new EventEmitter();
        /**
         * Icon to show on the banner.
         * If no value for overrideIcon is provided, will be automatically selected based on the type input.
         */
        this.icon = '';
        this.cacheKeyPrefix = 'dismissableBanner-';
    }
    ngOnChanges() {
        if (this.customIcon) {
            this.icon = this.customIcon;
        }
        else {
            this.getIconByBannerType();
        }
        if (this.rememberClosed) {
            let cacheValue = this.cacheService.getItem(`${this.cacheKeyPrefix}${this.id}`);
            if (cacheValue) {
                this.hidden = cacheValue.hidden;
            }
            else {
                this.hidden = false;
            }
        }
    }
    /** On close, explicitly hide the banner one time. If the input changes afterward then it can reappear*/
    close() {
        if (this.autoHideOnClose) {
            this.hidden = true;
        }
        if (this.rememberClosed) {
            this.cacheService.setItem(`${this.cacheKeyPrefix}${this.id}`, { hidden: true });
        }
        this.closed.emit();
    }
    getIconByBannerType() {
        if (this.type === 'info') {
            this.icon = 'icon-info-circle';
        }
        else if (this.type === 'warning') {
            this.icon = 'icon-warning';
        }
        else if (this.type === 'error') {
            this.icon = 'icon-error';
        }
        else if (this.type === 'success') {
            this.icon = 'icon-check-circle';
        }
        else if (this.type === 'promo') {
            this.icon = 'icon-sparkles';
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BannerComponent, deps: [{ token: i1.CacheService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BannerComponent, selector: "ec-banner", inputs: { hidden: "hidden", id: "id", type: "type", bannerStyle: "bannerStyle", title: "title", text: "text", list: "list", showCloseBtn: "showCloseBtn", autoHideOnClose: "autoHideOnClose", customIcon: "customIcon", rememberClosed: "rememberClosed" }, outputs: { closed: "closed" }, host: { properties: { "hidden": "this.hidden" } }, usesOnChanges: true, ngImport: i0, template: "<div id=\"banner_{{id}}\" class=\"banner {{type}} {{bannerStyle}}\">\r\n  <ec-button id=\"banner{{id}}_close\"\r\n             *ngIf=\"showCloseBtn\"\r\n             type=\"icon\"\r\n             icon=\"icon-cancel\"\r\n             (clicked)=\"close()\">\r\n  </ec-button>\r\n  <div class=\"banner-content d-flex text-body-1\">\r\n    <i class=\"ec-icon {{icon}}\"></i>\r\n    <div class=\"ml-2\">\r\n      <p class=\"title mb-0\" *ngIf=\"title\">\r\n        {{title}}\r\n      </p>\r\n      <p class=\"text mb-0\" *ngIf=\"text\">{{text}}</p>\r\n  \r\n      <ul class=\"list mb-0\" *ngIf=\"list?.length\">\r\n        <li *ngFor=\"let item of list\">{{item}}</li>\r\n      </ul>\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n", styles: [":host{display:flex}:host(.border-bottom-0) .banner{border-bottom:0;border-radius:var(--ec-border-radius-card)}.banner{display:flex;flex-direction:column;flex:1 1;min-height:2.5rem;position:relative;overflow-y:auto;background-color:var(--ec-banner-background-color, var(--ec-background-color-info));border-radius:var(--ec-banner-border-radius, var(--ec-border-radius-card));border:1px solid var(--ec-banner-border-color, var(--ec-color-info))}.banner-content{align-items:var(--ec-banner-align-items-content, normal);padding:.5rem 1rem;flex:none;margin:auto 0;color:var(--ec-banner-color, var(--ec-color-secondary-dark))}.banner-content ::ng-deep p{line-height:inherit}.ec-icon{color:var(--ec-banner-icon-color, var(--ec-color-info));font-size:1.125rem}ec-button{--ec-button-color-icon-hover: var(--ec-color-primary-dark);--ec-background-color-hover: rgba(26, 26, 35, .1);position:absolute;top:.1875rem;right:.25rem}ec-button+.banner-content{padding-right:2.75rem}.title{font-weight:700}.list{margin:0;padding-left:2em}.text+.list{margin-top:1em}.info:not(.toast){--ec-banner-background-color: var(--ec-background-color-info);--ec-banner-border-color: var(--ec-color-info);--ec-banner-icon-color: var(--ec-color-info)}.warning:not(.toast){--ec-banner-background-color: var(--ec-background-color-caution);--ec-banner-border-color: var(--ec-color-caution);--ec-banner-icon-color: var(--ec-color-caution)}.success:not(.toast){--ec-banner-background-color: var(--ec-background-color-success);--ec-banner-border-color: var(--ec-color-success);--ec-banner-icon-color: var(--ec-color-success)}.error:not(.toast){--ec-banner-background-color: var(--ec-background-color-danger);--ec-banner-border-color: var(--ec-color-danger);--ec-banner-icon-color: var(--ec-color-danger)}.pinned{border-radius:0;border-left:0;border-right:0}.promo:not(.toast){--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-secondary-light);--ec-color-link: var(--ec-color-link-light);border:none;background:var(--ec-background-color-promo)}.promo:not(.toast) ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15)}.toast{--ec-banner-background-color: var(--ec-color-gray-8);--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-primary-light);--ec-color-link: var(--ec-color-link-light);border:0;box-shadow:var(--ec-box-shadow)}.toast ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);top:.25rem;right:.25rem}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "icon", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BannerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ec-banner', template: "<div id=\"banner_{{id}}\" class=\"banner {{type}} {{bannerStyle}}\">\r\n  <ec-button id=\"banner{{id}}_close\"\r\n             *ngIf=\"showCloseBtn\"\r\n             type=\"icon\"\r\n             icon=\"icon-cancel\"\r\n             (clicked)=\"close()\">\r\n  </ec-button>\r\n  <div class=\"banner-content d-flex text-body-1\">\r\n    <i class=\"ec-icon {{icon}}\"></i>\r\n    <div class=\"ml-2\">\r\n      <p class=\"title mb-0\" *ngIf=\"title\">\r\n        {{title}}\r\n      </p>\r\n      <p class=\"text mb-0\" *ngIf=\"text\">{{text}}</p>\r\n  \r\n      <ul class=\"list mb-0\" *ngIf=\"list?.length\">\r\n        <li *ngFor=\"let item of list\">{{item}}</li>\r\n      </ul>\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n", styles: [":host{display:flex}:host(.border-bottom-0) .banner{border-bottom:0;border-radius:var(--ec-border-radius-card)}.banner{display:flex;flex-direction:column;flex:1 1;min-height:2.5rem;position:relative;overflow-y:auto;background-color:var(--ec-banner-background-color, var(--ec-background-color-info));border-radius:var(--ec-banner-border-radius, var(--ec-border-radius-card));border:1px solid var(--ec-banner-border-color, var(--ec-color-info))}.banner-content{align-items:var(--ec-banner-align-items-content, normal);padding:.5rem 1rem;flex:none;margin:auto 0;color:var(--ec-banner-color, var(--ec-color-secondary-dark))}.banner-content ::ng-deep p{line-height:inherit}.ec-icon{color:var(--ec-banner-icon-color, var(--ec-color-info));font-size:1.125rem}ec-button{--ec-button-color-icon-hover: var(--ec-color-primary-dark);--ec-background-color-hover: rgba(26, 26, 35, .1);position:absolute;top:.1875rem;right:.25rem}ec-button+.banner-content{padding-right:2.75rem}.title{font-weight:700}.list{margin:0;padding-left:2em}.text+.list{margin-top:1em}.info:not(.toast){--ec-banner-background-color: var(--ec-background-color-info);--ec-banner-border-color: var(--ec-color-info);--ec-banner-icon-color: var(--ec-color-info)}.warning:not(.toast){--ec-banner-background-color: var(--ec-background-color-caution);--ec-banner-border-color: var(--ec-color-caution);--ec-banner-icon-color: var(--ec-color-caution)}.success:not(.toast){--ec-banner-background-color: var(--ec-background-color-success);--ec-banner-border-color: var(--ec-color-success);--ec-banner-icon-color: var(--ec-color-success)}.error:not(.toast){--ec-banner-background-color: var(--ec-background-color-danger);--ec-banner-border-color: var(--ec-color-danger);--ec-banner-icon-color: var(--ec-color-danger)}.pinned{border-radius:0;border-left:0;border-right:0}.promo:not(.toast){--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-secondary-light);--ec-color-link: var(--ec-color-link-light);border:none;background:var(--ec-background-color-promo)}.promo:not(.toast) ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15)}.toast{--ec-banner-background-color: var(--ec-color-gray-8);--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-primary-light);--ec-color-link: var(--ec-color-link-light);border:0;box-shadow:var(--ec-box-shadow)}.toast ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);top:.25rem;right:.25rem}\n"] }]
        }], ctorParameters: () => [{ type: i1.CacheService }], propDecorators: { hidden: [{
                type: HostBinding,
                args: ['hidden']
            }, {
                type: Input
            }], id: [{
                type: Input
            }], type: [{
                type: Input
            }], bannerStyle: [{
                type: Input
            }], title: [{
                type: Input
            }], text: [{
                type: Input
            }], list: [{
                type: Input
            }], showCloseBtn: [{
                type: Input
            }], autoHideOnClose: [{
                type: Input
            }], customIcon: [{
                type: Input
            }], rememberClosed: [{
                type: Input
            }], closed: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 