@crediblefinance/credible-ui/esm2022/lib/cf-tabs/cf-tabs.component.mjs

Credible's standard UI library

import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class CfTabsComponent {
    tabs = [];
    changed = new EventEmitter();
    currentTab = '';
    theme = 'dark';
    constructor() { }
    ngOnInit() {
    }
    changeTab(tab) {
        this.currentTab = tab.value;
        this.changed.emit(tab);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CfTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: CfTabsComponent, selector: "cf-tabs", inputs: { tabs: "tabs", currentTab: "currentTab", theme: "theme" }, outputs: { changed: "changed" }, ngImport: i0, template: "<div class=\"app-cf-tabs container-fluid\" [ngClass]=\"theme\">\n    <div class=\"tabs\">\n        <span class=\"tab\" (click)=\"changeTab(tab)\" [ngClass]=\"{ 'tab-active': currentTab === tab.value }\"\n            *ngFor=\"let tab of tabs\">{{ tab.label }}</span>\n    </div>\n</div>", styles: [".app-cf-tabs{padding:0}.app-cf-tabs .tabs{display:flex;padding-bottom:.5rem;background-color:transparent;width:90%;overflow-x:auto;gap:1rem;margin-bottom:1rem}.app-cf-tabs .tabs .tab{padding:.2rem .5rem;background-color:transparent;width:max-content}.app-cf-tabs .tabs .tab:hover{cursor:pointer}.app-cf-tabs .tabs .tab-active{font-weight:700;border-bottom-left-radius:11%;border-bottom-right-radius:11%;padding-bottom:.5rem}.app-cf-tabs.dark .tabs .tab{color:gray}.app-cf-tabs.dark .tabs .tab-active{color:#fff;border-bottom:3px solid #cf0}.app-cf-tabs.light .tabs .tab{color:gray}.app-cf-tabs.light .tabs .tab-active{color:#000;border-bottom:3px solid black}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CfTabsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'cf-tabs', template: "<div class=\"app-cf-tabs container-fluid\" [ngClass]=\"theme\">\n    <div class=\"tabs\">\n        <span class=\"tab\" (click)=\"changeTab(tab)\" [ngClass]=\"{ 'tab-active': currentTab === tab.value }\"\n            *ngFor=\"let tab of tabs\">{{ tab.label }}</span>\n    </div>\n</div>", styles: [".app-cf-tabs{padding:0}.app-cf-tabs .tabs{display:flex;padding-bottom:.5rem;background-color:transparent;width:90%;overflow-x:auto;gap:1rem;margin-bottom:1rem}.app-cf-tabs .tabs .tab{padding:.2rem .5rem;background-color:transparent;width:max-content}.app-cf-tabs .tabs .tab:hover{cursor:pointer}.app-cf-tabs .tabs .tab-active{font-weight:700;border-bottom-left-radius:11%;border-bottom-right-radius:11%;padding-bottom:.5rem}.app-cf-tabs.dark .tabs .tab{color:gray}.app-cf-tabs.dark .tabs .tab-active{color:#fff;border-bottom:3px solid #cf0}.app-cf-tabs.light .tabs .tab{color:gray}.app-cf-tabs.light .tabs .tab-active{color:#000;border-bottom:3px solid black}\n"] }]
        }], ctorParameters: () => [], propDecorators: { tabs: [{
                type: Input
            }], changed: [{
                type: Output
            }], currentTab: [{
                type: Input
            }], theme: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2YtdGFicy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jcmVkaWJsZS11aS9zcmMvbGliL2NmLXRhYnMvY2YtdGFicy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jcmVkaWJsZS11aS9zcmMvbGliL2NmLXRhYnMvY2YtdGFicy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0gsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUNqRCxNQUFNLGVBQWUsQ0FBQzs7O0FBUXZCLE1BQU0sT0FBTyxlQUFlO0lBQ2YsSUFBSSxHQUFxQixFQUFFLENBQUM7SUFDM0IsT0FBTyxHQUFHLElBQUksWUFBWSxFQUFhLENBQUM7SUFDekMsVUFBVSxHQUF1QixFQUFFLENBQUM7SUFDcEMsS0FBSyxHQUFXLE1BQU0sQ0FBQztJQUVoQyxnQkFBZ0IsQ0FBQztJQUVqQixRQUFRO0lBQ1IsQ0FBQztJQUVELFNBQVMsQ0FBQyxHQUFjO1FBQ3BCLElBQUksQ0FBQyxVQUFVLEdBQUcsR0FBRyxDQUFDLEtBQUssQ0FBQztRQUM1QixJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUMzQixDQUFDO3VHQWRRLGVBQWU7MkZBQWYsZUFBZSxvSkNWNUIsK1JBS007OzJGREtPLGVBQWU7a0JBTDNCLFNBQVM7K0JBQ0ksU0FBUzt3REFLVixJQUFJO3NCQUFaLEtBQUs7Z0JBQ0ksT0FBTztzQkFBaEIsTUFBTTtnQkFDRSxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gICAgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCBUYWJPcHRpb24gZnJvbSAnLi90YWItb3B0aW9uLmludGVyZmFjZSc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnY2YtdGFicycsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2NmLXRhYnMuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL2NmLXRhYnMuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBDZlRhYnNDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICAgIEBJbnB1dCgpIHRhYnM6IEFycmF5PFRhYk9wdGlvbj4gPSBbXTtcbiAgICBAT3V0cHV0KCkgY2hhbmdlZCA9IG5ldyBFdmVudEVtaXR0ZXI8VGFiT3B0aW9uPigpO1xuICAgIEBJbnB1dCgpIGN1cnJlbnRUYWI6IFRhYk9wdGlvbiB8IHN0cmluZyA9ICcnO1xuICAgIEBJbnB1dCgpIHRoZW1lOiBzdHJpbmcgPSAnZGFyayc7XG5cbiAgICBjb25zdHJ1Y3RvcigpIHsgfVxuXG4gICAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgfVxuXG4gICAgY2hhbmdlVGFiKHRhYjogVGFiT3B0aW9uKSB7XG4gICAgICAgIHRoaXMuY3VycmVudFRhYiA9IHRhYi52YWx1ZTtcbiAgICAgICAgdGhpcy5jaGFuZ2VkLmVtaXQodGFiKTtcbiAgICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiYXBwLWNmLXRhYnMgY29udGFpbmVyLWZsdWlkXCIgW25nQ2xhc3NdPVwidGhlbWVcIj5cbiAgICA8ZGl2IGNsYXNzPVwidGFic1wiPlxuICAgICAgICA8c3BhbiBjbGFzcz1cInRhYlwiIChjbGljayk9XCJjaGFuZ2VUYWIodGFiKVwiIFtuZ0NsYXNzXT1cInsgJ3RhYi1hY3RpdmUnOiBjdXJyZW50VGFiID09PSB0YWIudmFsdWUgfVwiXG4gICAgICAgICAgICAqbmdGb3I9XCJsZXQgdGFiIG9mIHRhYnNcIj57eyB0YWIubGFiZWwgfX08L3NwYW4+XG4gICAgPC9kaXY+XG48L2Rpdj4iXX0=