import { Component, Input, Output, EventEmitter, ViewEncapsulation } from "@angular/core";
import { getElementValue } from "../../@interfaces/eagna.interface";
import * as i0 from "@angular/core";
import * as i1 from "@angular/router";
import * as i2 from "../../@services/eagna.service";
import * as i3 from "@angular/common";
import * as i4 from "@angular/material/core";
import * as i5 from "@angular/material/form-field";
import * as i6 from "@angular/material/icon";
import * as i7 from "@angular/material/select";
import * as i8 from "@angular/material/tabs";
import * as i9 from "@angular/material/badge";
export class TabComponent {
    constructor(_activatedRoute, _eagnaService) {
        this._activatedRoute = _activatedRoute;
        this._eagnaService = _eagnaService;
        this.stackUp = false;
        this.slim = false;
        this.value = 0;
        this.valueChange = new EventEmitter();
        this.checkVisited = false;
        this.tabType = "route";
        this.noRouterOutlet = false;
        this.align = "start";
        this.getElementValue = getElementValue;
    }
    getAlign() {
        return this.align;
    }
    /* public getElementValue(tab: TabsData, attr: string): any{
      if(tab[attr]){
          if(typeof(tab[attr]) == "function"){
              return tab[attr](tab);
          } else{
              return tab[attr];
          }
      }
      return '';
    } */
    onSelectedTabChange(event) {
        //  console.log('onSelectedTabChange(event)', event);
        // console.log('this.value', this.value);
        const whichTab = this.tabsData[this.value];
        if (whichTab.onClick) {
            whichTab.onClick(event);
        }
        whichTab.visited = true;
        // whichTab.badgeClass='accent';
        this.valueChange.emit(this.value);
    }
    onClickEvent(link, e) {
        if (link.onClick) {
            link.onClick(e);
        }
        else {
            if (e.ctrlKey) {
                e.preventDefault();
                e.stopPropagation();
                this._eagnaService.gotoPage(this.getElementValue(link, 'path'), this.navigationExtras, true);
            }
        }
    }
    ngOnInit() {
        let whichTab = this.tabsData[this.value];
        if (whichTab != null) {
            whichTab.visited = true;
        }
        if (!this.navigationExtras) {
            this.navigationExtras = { relativeTo: this._activatedRoute };
        }
    }
    // ngOnChanges(changes:SimpleChanges){
    //   console.log(changes);
    //   let whichTab = this.tabsData[this.value];
    //   if (whichTab != null){
    //     whichTab.visited=true;
    //   }
    // }
    ngDoCheck() {
        if (this.checkVisited && this.tabsData && this.value != null) {
            this.tabsData.every((x) => { return x.visited != true; });
            if (this.tabsData.every((x) => { return x.visited != true; })) {
                this.tabsData[this.value].visited = true;
            }
        }
    }
}
TabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TabComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.EagnaService }], target: i0.ɵɵFactoryTarget.Component });
TabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: TabComponent, selector: "eagna-tabs", inputs: { stackUp: "stackUp", slim: "slim", value: "value", fillBackground: "fillBackground", checkVisited: "checkVisited", tabType: "tabType", tabsData: "tabsData", noRouterOutlet: "noRouterOutlet", align: "align", navigationExtras: "navigationExtras" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div *ngIf=\"tabType=='static-simple'\"  [ngClass]=\"{'tab-bg-fill':fillBackground}\">\r\n    <!-- b {{align}} -->\r\n    <mat-tab-group mat-align-tabs=\"end\" id=\"eagnaTab\">\r\n        <mat-tab *ngFor=\"let link of tabsData\" [label]=\"link.label\"\r\n            (click)=\"onClickEvent(link, $event)\"> <!-- (click)=\"link.onClick != null && link.onClick($event)\" -->\r\n            <!-- any content -->\r\n        </mat-tab>\r\n    </mat-tab-group>\r\n</div>\r\n\r\n<div *ngIf=\"tabType=='static-complex' && stackUp == false\" [ngClass]=\"{'tab-bg-fill':fillBackground}\">\r\n    <mat-tab-group class=\"remove-border-bottom\" [ngClass]=\"{'mat-tab-slim':slim == true || slim == 'medium','medium':slim == 'medium' }\" [selectedIndex]=\"value\" (selectedIndexChange)=\"value = $event\"\r\n        (selectedTabChange)=\"onSelectedTabChange($event)\" id=\"eagnaTab\"> <!-- [mat-align-tabs]=\"align\" -->\r\n        <ng-container *ngFor=\"let link of tabsData\">\r\n            <mat-tab *ngIf=\"!getElementValue(link, 'hidden')\" [disabled]=\"getElementValue(link, 'disabled')\" >\r\n                <ng-template mat-tab-label style=\"height: 26px !important\">\r\n\r\n                    <span class=\"block badge-large\" [ngClass]=\"{'p-r-8':link.badgeValue !=null, 'tab-unvisited':(link.visited ==false ),'tab-visited':(link.visited ==true )}\" [matBadge]=\"getElementValue(link, 'badgeValue')\" matBadgeSize=\"small\" >\r\n                            <!-- [matBadgeColor]=\"(link.visited ==false ) ? 'primary' : 'rr-good'\" -->\r\n                        <mat-icon [class]=\"link.iconClass\" [title]=\"link.tooltip\" *ngIf=\"link.icon\">{{link.icon}} </mat-icon>{{link.label}}\r\n\r\n                    </span>\r\n                </ng-template>\r\n            </mat-tab>\r\n        </ng-container>\r\n    </mat-tab-group>\r\n</div>\r\n<div *ngIf=\"tabType=='static-complex' && stackUp == true\" [ngClass]=\"{'tab-bg-fill':fillBackground}\">\r\n\r\n    <mat-form-field appearance=\"fill\">\r\n        <mat-select [(value)]=\"value\" (selectionChange)=\"onSelectedTabChange($event)\">\r\n          <mat-option *ngFor=\"let link of tabsData;let idx=index;\" [value]=\"idx\">\r\n            {{link.label}}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n\r\n        <!-- <ng-container *ngFor=\"let link of tabsData\">\r\n            <div *ngIf=\"!(link.hidden != null && link.hidden())\" [disabled]=\"link.disabled && link.disabled()\" >\r\n\r\n\r\n                    <span class=\"block badge-large\" [ngClass]=\"{'p-r-8':link.badgeValue !=null, 'tab-unvisited':(link.visited ==false ),'tab-visited':(link.visited ==true )}\" [matBadge]=\"link.badgeValue\" matBadgeSize=\"small\" >\r\n\r\n                        <mat-icon [class]=\"link.iconClass\" [title]=\"link.tooltip\" *ngIf=\"link.icon\">{{link.icon}} </mat-icon>{{link.label}}\r\n                    </span>\r\n\r\n            </div>\r\n        </ng-container> -->\r\n\r\n</div>\r\n\r\n<div *ngIf=\"tabType=='route'\"  [ngClass]=\"{'tab-bg-fill':fillBackground}\">\r\n    <nav mat-tab-nav-bar class=\"remove-border-bottom\" id=\"eagnaTab\">\r\n        <span *ngFor=\"let tab of tabsData\" style=\"border-bottom: none !important\">\r\n            <!-- [routerLinkActiveOptions]=\"{ exact: false }\"  [replaceUrl]=\"true\"-->\r\n            <ng-container *ngIf=\"tab\">\r\n                <a mat-tab-link *ngIf=\"tab && !getElementValue(tab, 'hidden')\"\r\n                    [disabled]=\"getElementValue(tab, 'disabled')\"\r\n                    [ngClass]=\"{'font-condensed': true, 'link-active': getElementValue(tab, 'isActive') || rla.isActive}\"\r\n                    [routerLink]=\"getElementValue(tab, 'path')\" (click)=\"onClickEvent(tab, $event)\"\r\n                    [routerLinkActive]=\"['font-rr-primary', 'b-rr-primary']\" #rla=\"routerLinkActive\"\r\n                    [active]=\"getElementValue(tab, 'isActive') || rla.isActive\">\r\n                    <mat-icon *ngIf=\"tab.icon\" class=\"p-r-5\">{{tab.icon}}</mat-icon><span [innerHtml]=\"tab.label\"></span>\r\n                </a>\r\n            </ng-container>\r\n            \r\n        </span>\r\n    </nav>\r\n    <router-outlet *ngIf=\"!noRouterOutlet\"></router-outlet>\r\n</div>\r\n\r\n<!-- <div>\r\n    <ng-content>\r\n\r\n    </ng-content>\r\n</div> -->", styles: [".mat-tab-group.remove-border-bottom .mat-tab-header{border-bottom:none!important}.mat-tab-nav-bar.remove-border-bottom .mat-ink-bar{display:none!important}.mat-tab-link{height:32px!important;padding:0 8px!important;font-size:14px!important;font-weight:100!important;min-width:unset!important;opacity:1!important}.mat-tab-label{height:32px!important}.mat-tab-links{margin-top:8px}.mat-tab-nav-bar{border-bottom:none!important}.link-active,.link-active2{color:#10069f!important;border-bottom:2px solid #10069f;padding:0 12px!important}.tab-bg-fill{background:white}.tab-bg-fill .mat-tab-header{height:36px}.dark .tab-bg-fill{background:#424242}.dark .tab-bg-fill .mat-tab-header{height:36px}.tab-visited .mat-badge-content{background-color:#034f00f1!important}.tab-unvisited .mat-badge-content{background-color:#10069f!important}.dark .tab-visited .mat-badge-content{background-color:#61f95b!important;color:gray}.dark .tab-unvisited .mat-badge-content{background-color:#4f98ff!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i8.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i8.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i8.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["color"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "directive", type: i8.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matTabLink"] }, { kind: "directive", type: i9.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: TabComponent, decorators: [{
            type: Component,
            args: [{ selector: "eagna-tabs", encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"tabType=='static-simple'\"  [ngClass]=\"{'tab-bg-fill':fillBackground}\">\r\n    <!-- b {{align}} -->\r\n    <mat-tab-group mat-align-tabs=\"end\" id=\"eagnaTab\">\r\n        <mat-tab *ngFor=\"let link of tabsData\" [label]=\"link.label\"\r\n            (click)=\"onClickEvent(link, $event)\"> <!-- (click)=\"link.onClick != null && link.onClick($event)\" -->\r\n            <!-- any content -->\r\n        </mat-tab>\r\n    </mat-tab-group>\r\n</div>\r\n\r\n<div *ngIf=\"tabType=='static-complex' && stackUp == false\" [ngClass]=\"{'tab-bg-fill':fillBackground}\">\r\n    <mat-tab-group class=\"remove-border-bottom\" [ngClass]=\"{'mat-tab-slim':slim == true || slim == 'medium','medium':slim == 'medium' }\" [selectedIndex]=\"value\" (selectedIndexChange)=\"value = $event\"\r\n        (selectedTabChange)=\"onSelectedTabChange($event)\" id=\"eagnaTab\"> <!-- [mat-align-tabs]=\"align\" -->\r\n        <ng-container *ngFor=\"let link of tabsData\">\r\n            <mat-tab *ngIf=\"!getElementValue(link, 'hidden')\" [disabled]=\"getElementValue(link, 'disabled')\" >\r\n                <ng-template mat-tab-label style=\"height: 26px !important\">\r\n\r\n                    <span class=\"block badge-large\" [ngClass]=\"{'p-r-8':link.badgeValue !=null, 'tab-unvisited':(link.visited ==false ),'tab-visited':(link.visited ==true )}\" [matBadge]=\"getElementValue(link, 'badgeValue')\" matBadgeSize=\"small\" >\r\n                            <!-- [matBadgeColor]=\"(link.visited ==false ) ? 'primary' : 'rr-good'\" -->\r\n                        <mat-icon [class]=\"link.iconClass\" [title]=\"link.tooltip\" *ngIf=\"link.icon\">{{link.icon}} </mat-icon>{{link.label}}\r\n\r\n                    </span>\r\n                </ng-template>\r\n            </mat-tab>\r\n        </ng-container>\r\n    </mat-tab-group>\r\n</div>\r\n<div *ngIf=\"tabType=='static-complex' && stackUp == true\" [ngClass]=\"{'tab-bg-fill':fillBackground}\">\r\n\r\n    <mat-form-field appearance=\"fill\">\r\n        <mat-select [(value)]=\"value\" (selectionChange)=\"onSelectedTabChange($event)\">\r\n          <mat-option *ngFor=\"let link of tabsData;let idx=index;\" [value]=\"idx\">\r\n            {{link.label}}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n\r\n        <!-- <ng-container *ngFor=\"let link of tabsData\">\r\n            <div *ngIf=\"!(link.hidden != null && link.hidden())\" [disabled]=\"link.disabled && link.disabled()\" >\r\n\r\n\r\n                    <span class=\"block badge-large\" [ngClass]=\"{'p-r-8':link.badgeValue !=null, 'tab-unvisited':(link.visited ==false ),'tab-visited':(link.visited ==true )}\" [matBadge]=\"link.badgeValue\" matBadgeSize=\"small\" >\r\n\r\n                        <mat-icon [class]=\"link.iconClass\" [title]=\"link.tooltip\" *ngIf=\"link.icon\">{{link.icon}} </mat-icon>{{link.label}}\r\n                    </span>\r\n\r\n            </div>\r\n        </ng-container> -->\r\n\r\n</div>\r\n\r\n<div *ngIf=\"tabType=='route'\"  [ngClass]=\"{'tab-bg-fill':fillBackground}\">\r\n    <nav mat-tab-nav-bar class=\"remove-border-bottom\" id=\"eagnaTab\">\r\n        <span *ngFor=\"let tab of tabsData\" style=\"border-bottom: none !important\">\r\n            <!-- [routerLinkActiveOptions]=\"{ exact: false }\"  [replaceUrl]=\"true\"-->\r\n            <ng-container *ngIf=\"tab\">\r\n                <a mat-tab-link *ngIf=\"tab && !getElementValue(tab, 'hidden')\"\r\n                    [disabled]=\"getElementValue(tab, 'disabled')\"\r\n                    [ngClass]=\"{'font-condensed': true, 'link-active': getElementValue(tab, 'isActive') || rla.isActive}\"\r\n                    [routerLink]=\"getElementValue(tab, 'path')\" (click)=\"onClickEvent(tab, $event)\"\r\n                    [routerLinkActive]=\"['font-rr-primary', 'b-rr-primary']\" #rla=\"routerLinkActive\"\r\n                    [active]=\"getElementValue(tab, 'isActive') || rla.isActive\">\r\n                    <mat-icon *ngIf=\"tab.icon\" class=\"p-r-5\">{{tab.icon}}</mat-icon><span [innerHtml]=\"tab.label\"></span>\r\n                </a>\r\n            </ng-container>\r\n            \r\n        </span>\r\n    </nav>\r\n    <router-outlet *ngIf=\"!noRouterOutlet\"></router-outlet>\r\n</div>\r\n\r\n<!-- <div>\r\n    <ng-content>\r\n\r\n    </ng-content>\r\n</div> -->", styles: [".mat-tab-group.remove-border-bottom .mat-tab-header{border-bottom:none!important}.mat-tab-nav-bar.remove-border-bottom .mat-ink-bar{display:none!important}.mat-tab-link{height:32px!important;padding:0 8px!important;font-size:14px!important;font-weight:100!important;min-width:unset!important;opacity:1!important}.mat-tab-label{height:32px!important}.mat-tab-links{margin-top:8px}.mat-tab-nav-bar{border-bottom:none!important}.link-active,.link-active2{color:#10069f!important;border-bottom:2px solid #10069f;padding:0 12px!important}.tab-bg-fill{background:white}.tab-bg-fill .mat-tab-header{height:36px}.dark .tab-bg-fill{background:#424242}.dark .tab-bg-fill .mat-tab-header{height:36px}.tab-visited .mat-badge-content{background-color:#034f00f1!important}.tab-unvisited .mat-badge-content{background-color:#10069f!important}.dark .tab-visited .mat-badge-content{background-color:#61f95b!important;color:gray}.dark .tab-unvisited .mat-badge-content{background-color:#4f98ff!important}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i2.EagnaService }]; }, propDecorators: { stackUp: [{
                type: Input
            }], slim: [{
                type: Input
            }], value: [{
                type: Input
            }], valueChange: [{
                type: Output
            }], fillBackground: [{
                type: Input
            }], checkVisited: [{
                type: Input
            }], tabType: [{
                type: Input
            }], tabsData: [{
                type: Input
            }], noRouterOutlet: [{
                type: Input
            }], align: [{
                type: Input
            }], navigationExtras: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 