import { Component, Renderer2, Input } from '@angular/core';
import { SpinnerService } from '../../spinner.service';
import { loggerCreate } from '../../../logger';
import * as i0 from "@angular/core";
import * as i1 from "../../spinner.service";
import * as i2 from "@angular/common";
import * as i3 from "@angular/router";
export class SpinnerChartsNoDataComponent {
    constructor(spinnerService, renderer) {
        this.spinnerService = spinnerService;
        this.renderer = renderer;
        this.isOpened = false;
        this.placement = 'content';
        this.config = {};
        this.autoopen = false;
        this.logger = loggerCreate(this.constructor['name']);
    }
    toggleElement() {
        if (!this.toggleFadeElement) {
            return;
        }
        this.renderer.addClass(this.toggleFadeElement, 'fade-hidden');
        if (this.isOpened) {
            this.renderer.addClass(this.toggleFadeElement, 'fade-hidden');
        }
        else {
            this.renderer.removeClass(this.toggleFadeElement, 'fade-hidden');
        }
    }
    ngOnInit() {
        if (this.autoopen) {
            this.isOpened = this.autoopen;
        }
        this.logger.log(`spinner.subscribe {placement: ${this.placement}, isOpened: ${this.isOpened}}`);
        this.spinnerEventSubscription = this.spinnerService.spinnerEvent.subscribe((spinnerStateEvent) => {
            if (this.placement !== spinnerStateEvent.placement) {
                return false;
            }
            this.isOpened = spinnerStateEvent.state;
            this.toggleElement();
        });
    }
    ngAfterViewInit() {
        this.toggleElement();
    }
    ngOnDestroy() {
        this.spinnerService.resetState(this.placement);
        this.spinnerEventSubscription.unsubscribe();
    }
    ngOnChanges(changes) {
        if (changes.config) {
            this.chartsConfig = changes.config.currentValue ? changes.config.currentValue.chartsConfig : null;
        }
    }
}
SpinnerChartsNoDataComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SpinnerChartsNoDataComponent, deps: [{ token: i1.SpinnerService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
SpinnerChartsNoDataComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SpinnerChartsNoDataComponent, selector: "epom-spinner-charts-no-data", inputs: { placement: "placement", config: "config", toggleFadeElement: "toggleFadeElement", autoopen: "autoopen" }, usesOnChanges: true, ngImport: i0, template: "<div\n  data-qa=\"spinner-charts-no-data\"\n  class=\"component-no-data component-charts-no-data fade-hidden\"\n  [ngClass]=\"{'fade-visible': isOpened, 'inside-component': chartsConfig?.insideComponent}\"\n>\n  <ng-container *ngIf=\"chartsConfig && chartsConfig.title\">\n    <div data-qa=\"spinner-no-data-title\" class=\"config-title\">{{ chartsConfig.title }}</div>\n  </ng-container>\n  <ng-container *ngIf=\"chartsConfig && chartsConfig.noDataText\">\n    <div data-qa=\"spinner-no-data-text\" class=\"config-no-data\">{{ chartsConfig.noDataText }}</div>\n    <div *ngIf=\"chartsConfig.buttons\">\n      <div class=\"button-list\" *ngFor=\"let buttonItem of chartsConfig.buttons\">\n        <button\n          data-qa=\"spinner-no-data-button\"\n          *ngIf=\"!chartsConfig.insideComponent\"\n          class=\"button button-primary\"\n          [routerLink]=\"buttonItem.url\"\n        >\n          {{ buttonItem.title }}\n        </button>\n        <a\n          data-qa=\"spinner-no-data-link\"\n          *ngIf=\"chartsConfig.insideComponent\"\n          class=\"button-link button-link-primary\"\n          [routerLink]=\"buttonItem.url\"\n        >\n          {{ buttonItem.title }}\n        </a>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"!chartsConfig || !chartsConfig.noDataText\">\n    <div class=\"config-no-data\">No available data to show.</div>\n  </ng-container>\n</div>\n", styles: [".config-title{font-size:var(--font-headline-3);font-weight:var(--font-weight-bold);line-height:24px;color:var(--neutral-on-main-neutral-color);margin-bottom:8px}.config-no-data{color:var(--neutral-outline-color);font-size:var(--font-body-2);font-weight:var(--font-weight-regular);line-height:21px}.config-search-no-data{font-size:12px;line-height:18px;color:var(--neutral-outline-color)}.button-list{margin-top:16px}.inside-component .config-title{font-size:var(--font-headline-4);line-height:21px}.inside-component .config-no-data{font-size:var(--font-caption);line-height:18px}.component-table-no-data{border-radius:0 0 3px 3px;border:1px solid var(--neutral-outline-variant-color, #c4c6d0)}.search-no-data{font-size:12px;line-height:18px;color:var(--neutral-on-main-neutral-color, #1a1c1e);font-weight:var(--font-weight-semibold)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SpinnerChartsNoDataComponent, decorators: [{
            type: Component,
            args: [{ selector: 'epom-spinner-charts-no-data', template: "<div\n  data-qa=\"spinner-charts-no-data\"\n  class=\"component-no-data component-charts-no-data fade-hidden\"\n  [ngClass]=\"{'fade-visible': isOpened, 'inside-component': chartsConfig?.insideComponent}\"\n>\n  <ng-container *ngIf=\"chartsConfig && chartsConfig.title\">\n    <div data-qa=\"spinner-no-data-title\" class=\"config-title\">{{ chartsConfig.title }}</div>\n  </ng-container>\n  <ng-container *ngIf=\"chartsConfig && chartsConfig.noDataText\">\n    <div data-qa=\"spinner-no-data-text\" class=\"config-no-data\">{{ chartsConfig.noDataText }}</div>\n    <div *ngIf=\"chartsConfig.buttons\">\n      <div class=\"button-list\" *ngFor=\"let buttonItem of chartsConfig.buttons\">\n        <button\n          data-qa=\"spinner-no-data-button\"\n          *ngIf=\"!chartsConfig.insideComponent\"\n          class=\"button button-primary\"\n          [routerLink]=\"buttonItem.url\"\n        >\n          {{ buttonItem.title }}\n        </button>\n        <a\n          data-qa=\"spinner-no-data-link\"\n          *ngIf=\"chartsConfig.insideComponent\"\n          class=\"button-link button-link-primary\"\n          [routerLink]=\"buttonItem.url\"\n        >\n          {{ buttonItem.title }}\n        </a>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"!chartsConfig || !chartsConfig.noDataText\">\n    <div class=\"config-no-data\">No available data to show.</div>\n  </ng-container>\n</div>\n", styles: [".config-title{font-size:var(--font-headline-3);font-weight:var(--font-weight-bold);line-height:24px;color:var(--neutral-on-main-neutral-color);margin-bottom:8px}.config-no-data{color:var(--neutral-outline-color);font-size:var(--font-body-2);font-weight:var(--font-weight-regular);line-height:21px}.config-search-no-data{font-size:12px;line-height:18px;color:var(--neutral-outline-color)}.button-list{margin-top:16px}.inside-component .config-title{font-size:var(--font-headline-4);line-height:21px}.inside-component .config-no-data{font-size:var(--font-caption);line-height:18px}.component-table-no-data{border-radius:0 0 3px 3px;border:1px solid var(--neutral-outline-variant-color, #c4c6d0)}.search-no-data{font-size:12px;line-height:18px;color:var(--neutral-on-main-neutral-color, #1a1c1e);font-weight:var(--font-weight-semibold)}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.SpinnerService }, { type: i0.Renderer2 }]; }, propDecorators: { placement: [{
                type: Input
            }], config: [{
                type: Input
            }], toggleFadeElement: [{
                type: Input
            }], autoopen: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 