flexacore-ui-dev/dist/svelte/angular/fc-tabs.component.js

Universal UI Framework for CDN, React, Angular, Vue, Svelte with TypeScript support

"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FCTabsComponent = exports.FCTabComponent = void 0;
const core_1 = require("@angular/core");
let FCTabComponent = class FCTabComponent {
    constructor() {
        this.title = '';
        this.active = false;
        this.disabled = false;
    }
};
exports.FCTabComponent = FCTabComponent;
__decorate([
    (0, core_1.Input)(),
    __metadata("design:type", String)
], FCTabComponent.prototype, "title", void 0);
__decorate([
    (0, core_1.Input)(),
    __metadata("design:type", Boolean)
], FCTabComponent.prototype, "active", void 0);
__decorate([
    (0, core_1.Input)(),
    __metadata("design:type", Boolean)
], FCTabComponent.prototype, "disabled", void 0);
exports.FCTabComponent = FCTabComponent = __decorate([
    (0, core_1.Component)({
        selector: 'fc-tab',
        template: `
    <div [ngClass]="['fc-tab-pane', active ? 'fc-tab-pane-active' : '']" *ngIf="active">
      <ng-content></ng-content>
    </div>
  `
    })
], FCTabComponent);
let FCTabsComponent = class FCTabsComponent {
    constructor() {
        this.activeIndex = 0;
        this.activeIndexChange = new core_1.EventEmitter();
    }
    ngAfterContentInit() {
        this.selectTab(this.activeIndex);
    }
    selectTab(index) {
        if (index >= 0 && index < this.tabs.length && !this.tabs.toArray()[index].disabled) {
            this.tabs.forEach((tab, i) => tab.active = i === index);
            this.activeIndex = index;
            this.activeIndexChange.emit(index);
        }
    }
};
exports.FCTabsComponent = FCTabsComponent;
__decorate([
    (0, core_1.ContentChildren)(FCTabComponent),
    __metadata("design:type", core_1.QueryList)
], FCTabsComponent.prototype, "tabs", void 0);
__decorate([
    (0, core_1.Input)(),
    __metadata("design:type", Number)
], FCTabsComponent.prototype, "activeIndex", void 0);
__decorate([
    (0, core_1.Output)(),
    __metadata("design:type", Object)
], FCTabsComponent.prototype, "activeIndexChange", void 0);
exports.FCTabsComponent = FCTabsComponent = __decorate([
    (0, core_1.Component)({
        selector: 'fc-tabs',
        template: `
    <div class="fc-tabs">
      <div class="fc-tabs-nav">
        <button 
          *ngFor="let tab of tabs; let i = index"
          [ngClass]="['fc-tabs-tab', tab.active ? 'fc-tabs-tab-active' : '', tab.disabled ? 'fc-tabs-tab-disabled' : '']"
          (click)="selectTab(i)"
          [disabled]="tab.disabled"
        >
          {{ tab.title }}
        </button>
      </div>
      <div class="fc-tabs-content">
        <ng-content></ng-content>
      </div>
    </div>
  `
    })
], FCTabsComponent);