var _form;
import { __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
import { Component, ContentChildren, EventEmitter, Input, Output, QueryList } from '@angular/core';
import { ZuiB, ZuiF } from '@material-zui/core';
import { ZUITabComponent } from './tab/index.component';
import { FormControl, NgForm } from '@angular/forms';
export class ZUITabsComponent {
    constructor() {
        /** 'start' | 'center' | 'end' */
        this.align = 'start';
        /** "above" | "below" */
        this.headerPosition = 'above';
        /** "300px", "400em", "500rem" */
        this.padding = '0';
        this.name = `zui-tabs-${ZuiF.uuid()}`;
        this.inkBarColor = '#3f51b5';
        this.animationDuration = '500ms';
        this.hideInkBarVal = false;
        this.hideHeaderVal = false;
        this.cardTypeVal = false;
        _form.set(this, void 0);
        this.modelChange = new EventEmitter();
        this.formControl = new FormControl();
        this.selectedTabChange = (event) => {
            const { index } = event;
            this.modelChange.emit(index);
        };
        this.onSelect = (item) => {
            if (!item.disabledVal)
                this.modelChange.emit(item.index);
        };
    }
    set model(value) {
        this.formControl.setValue(value !== null && value !== void 0 ? value : 0);
    }
    set stretchTabs(val) {
        this.stretchTabsVal = ZuiB.toBool(val);
    }
    set hideInkBar(val) {
        this.hideInkBarVal = ZuiB.toBool(val);
    }
    set hideHeader(val) {
        this.hideHeaderVal = ZuiB.toBool(val);
    }
    set cardType(val) {
        this.cardTypeVal = ZuiB.toBool(val);
    }
    set form(val) {
        if (val) {
            if (val instanceof NgForm) {
                __classPrivateFieldSet(this, _form, val.form);
            }
            else {
                __classPrivateFieldSet(this, _form, val);
            }
        }
    }
    ngAfterViewInit() {
        var _a;
        (_a = __classPrivateFieldGet(this, _form)) === null || _a === void 0 ? void 0 : _a.addControl(this.name, this.formControl);
        this.appItems.forEach((item, index) => (item.index = index));
    }
}
_form = new WeakMap();
ZUITabsComponent.decorators = [
    { type: Component, args: [{
                selector: 'zui-tabs',
                template: "<!-- wrap tabs -->\n<!-- https://stackblitz.com/edit/angular-wrapping-component-with-ng-content-1lf4ld?file=src%2Fapp%2Fapp.component.ts -->\n\n<ng-container *ngIf=\"hideHeaderVal\">\n  <ng-container *ngIf=\"type\">\n    <div *ngIf=\"type === 'step'\" class=\"d-flex align-items-center justify-content-center\">\n      <ng-container *ngFor=\"let item of appItems; let i = index\">\n        <div class=\"zui-tabs-steps\" [class.zui-tabs-steps__active]=\"i === formControl.value\" [class.zui-tabs-steps__disabled]=\"item.disabledVal\" (click)=\"onSelect(item)\">\n          <div class=\"ml-5\">{{ i + 1 }}</div>\n          <div>{{ item.label }}</div>\n        </div>\n        <div *ngIf=\"i !== appItems.length - 1\" class=\"zui-tabs-line\"></div>\n      </ng-container>\n    </div>\n  </ng-container>\n</ng-container>\n\n<mat-tab-group\n  #tabGroup\n  style=\"--c: {{ color }}; --bgColor: {{ backgroundColor }}; --inkBarColor: {{ inkBarColor }}\"\n  class=\"zui-tabs-group\"\n  [class.mat-elevation-z4]=\"cardTypeVal\"\n  [class.zui-tabs-hide-ink-bar]=\"hideInkBarVal\"\n  [class.zui-tabs-hide-header]=\"hideHeaderVal\"\n  [attr.mat-stretch-tabs]=\"stretchTabsVal\"\n  [attr.mat-align-tabs]=\"align\"\n  [headerPosition]=\"headerPosition\"\n  [animationDuration]=\"animationDuration\"\n  [ngStyle]=\"{width: width}\"\n  [selectedIndex]=\"formControl.value\"\n  (selectedTabChange)=\"selectedTabChange($event)\"\n>\n  <mat-tab *ngFor=\"let item of appItems; let i = index\" [disabled]=\"item.disabledVal\">\n    <ng-template mat-tab-label>\n      <mat-icon *ngIf=\"item?.prefixIcon\" class=\"mr-5\">{{ item.prefixIcon }}</mat-icon>\n      <span>{{ item.label }}</span>\n      <mat-icon *ngIf=\"item?.sufixIcon\" class=\"ml-5\">{{ item.sufixIcon }}</mat-icon>\n    </ng-template>\n    <div [ngStyle]=\"{padding: padding}\">\n      <ng-template *ngTemplateOutlet=\"item.template\"></ng-template>\n    </div>\n  </mat-tab>\n</mat-tab-group>\n\n<!-- <mat-tab-group>\n  <mat-tab *ngFor=\"let item of appItems; let i = index\">\n    <ng-template mat-tab-label>For {{ i }}</ng-template>\n    <ng-template matTabContent>\n      <div>Content - Loaded: {{ getTimeLoaded(i) | date: 'medium' }}</div>\n      <ng-template [ngTemplateOutlet]=\"item.template\"></ng-template>\n    </ng-template>\n  </mat-tab>\n</mat-tab-group> -->\n",
                styles: [".zui-tabs-steps{display:inline-flex;align-items:center;padding:5px 10px 5px 5px;border-radius:25px;font-weight:500;color:#757575;cursor:pointer}.zui-tabs-steps>div:first-child{border-radius:25px;color:#fff;width:25px;height:25px;line-height:25px;margin-right:5px;background-color:#dde0e5;text-align:center}.zui-tabs-steps__active{background-color:#eaefff;color:#2962ff}.zui-tabs-steps__active>div:first-child{background-color:#2962ff}.zui-tabs-steps__disabled{opacity:.6;cursor:auto}.zui-tabs-line{width:20px;height:2px;margin:0 5px;background-color:#e6e6e6;border-radius:10px}:host{display:block}:host ::ng-deep .zui-tabs-group mat-tab-header{background-color:var(--bgColor)}:host ::ng-deep .zui-tabs-group .mat-tab-label{color:var(--c)}:host ::ng-deep .zui-tabs-group .mat-tab-label-active{opacity:1}:host ::ng-deep .zui-tabs-group .mat-tab-disabled{color:rgba(0,0,0,.38)}:host ::ng-deep .zui-tabs-group .mat-ink-bar{background-color:var(--inkBarColor)}:host ::ng-deep .zui-tabs-hide-header mat-tab-header,:host ::ng-deep .zui-tabs-hide-ink-bar .mat-ink-bar{display:none}"]
            },] }
];
ZUITabsComponent.propDecorators = {
    align: [{ type: Input }],
    headerPosition: [{ type: Input }],
    width: [{ type: Input }],
    padding: [{ type: Input }],
    type: [{ type: Input }],
    name: [{ type: Input }],
    color: [{ type: Input }],
    backgroundColor: [{ type: Input }],
    inkBarColor: [{ type: Input }],
    animationDuration: [{ type: Input }],
    model: [{ type: Input }],
    stretchTabs: [{ type: Input }],
    hideInkBar: [{ type: Input }],
    hideHeader: [{ type: Input }],
    cardType: [{ type: Input }],
    form: [{ type: Input }],
    modelChange: [{ type: Output }],
    appItems: [{ type: ContentChildren, args: [ZUITabComponent,] }]
};
//# sourceMappingURL=index.component.js.map