cfc-ds
Version:
Design System do Conselho Federal de Contabilidade baseado no govbr-ds
71 lines • 11.4 kB
JavaScript
// tab-item.component.ts
import { Component, Input, HostBinding, HostListener, Optional, Inject, forwardRef } from '@angular/core';
import { TabComponent } from '../tab/tab.component'; // Ajuste o caminho de importação conforme necessário
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../tab/tab.component";
export class TabItemComponent {
el;
tabComponent;
label = '';
icon = '';
counter;
id = '';
active = false;
disabled = false;
constructor(el, tabComponent) {
this.el = el;
this.tabComponent = tabComponent;
}
onClick() {
if (this.disabled) {
return;
}
if (!this.tabComponent) {
console.warn('TabItemComponent: TabComponent parent not found');
return;
}
// Encontrar o índice deste item
const parent = this.el.nativeElement.parentElement;
if (!parent)
return;
const items = Array.from(parent.querySelectorAll('cfc-tab-item'));
const index = items.indexOf(this.el.nativeElement);
if (index !== -1) {
this.tabComponent.selectTab(index);
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabItemComponent, deps: [{ token: i0.ElementRef }, { token: forwardRef(() => TabComponent), optional: true }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TabItemComponent, selector: "cfc-tab-item", inputs: { label: "label", icon: "icon", counter: "counter", id: "id", active: "active", disabled: "disabled" }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.active", "class.disabled": "this.disabled" } }, ngImport: i0, template: "<!-- tab-item/tab-item.component.html -->\r\n<div class=\"tab-item\" \r\n role=\"tab\" \r\n [attr.aria-selected]=\"active\" \r\n [attr.aria-disabled]=\"disabled\" \r\n [attr.id]=\"id\">\r\n <div class=\"tab-item-content\" \r\n [class.vertical-layout]=\"icon && label\" \r\n [attr.data-tooltip]=\"!label && icon ? label : null\">\r\n <i *ngIf=\"icon\" class=\"tab-item-icon\" [class]=\"icon\"></i>\r\n <span *ngIf=\"label\" class=\"tab-item-label\">{{label}}</span>\r\n </div>\r\n <span *ngIf=\"counter !== undefined\" class=\"tab-item-counter\">({{counter}})</span>\r\n</div>", styles: [":host{display:inline-block;position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;padding:16px;transition:all .2s ease;box-sizing:border-box;min-width:90px;text-align:center}:host.active{color:#06c;font-weight:500}:host.active:after{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:2px;background-color:#06c}:host.disabled{opacity:.5;pointer-events:none}.tab-item{display:flex;flex-direction:column;align-items:center}.tab-item-content{display:flex;align-items:center;justify-content:center;gap:8px}.tab-item-content.vertical-layout{flex-direction:column;text-align:center}.tab-item-icon{font-size:20px;display:flex;align-items:center;justify-content:center}.tab-item-label{font-size:14px;line-height:20px;white-space:nowrap}.tab-item-counter{margin-top:4px;font-size:12px;color:#666}@media (max-width: 576px){:host{min-width:70px;padding:12px 8px}.tab-item-content{flex-direction:column;gap:4px}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabItemComponent, decorators: [{
type: Component,
args: [{ selector: 'cfc-tab-item', template: "<!-- tab-item/tab-item.component.html -->\r\n<div class=\"tab-item\" \r\n role=\"tab\" \r\n [attr.aria-selected]=\"active\" \r\n [attr.aria-disabled]=\"disabled\" \r\n [attr.id]=\"id\">\r\n <div class=\"tab-item-content\" \r\n [class.vertical-layout]=\"icon && label\" \r\n [attr.data-tooltip]=\"!label && icon ? label : null\">\r\n <i *ngIf=\"icon\" class=\"tab-item-icon\" [class]=\"icon\"></i>\r\n <span *ngIf=\"label\" class=\"tab-item-label\">{{label}}</span>\r\n </div>\r\n <span *ngIf=\"counter !== undefined\" class=\"tab-item-counter\">({{counter}})</span>\r\n</div>", styles: [":host{display:inline-block;position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;padding:16px;transition:all .2s ease;box-sizing:border-box;min-width:90px;text-align:center}:host.active{color:#06c;font-weight:500}:host.active:after{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:2px;background-color:#06c}:host.disabled{opacity:.5;pointer-events:none}.tab-item{display:flex;flex-direction:column;align-items:center}.tab-item-content{display:flex;align-items:center;justify-content:center;gap:8px}.tab-item-content.vertical-layout{flex-direction:column;text-align:center}.tab-item-icon{font-size:20px;display:flex;align-items:center;justify-content:center}.tab-item-label{font-size:14px;line-height:20px;white-space:nowrap}.tab-item-counter{margin-top:4px;font-size:12px;color:#666}@media (max-width: 576px){:host{min-width:70px;padding:12px 8px}.tab-item-content{flex-direction:column;gap:4px}}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i2.TabComponent, decorators: [{
type: Optional
}, {
type: Inject,
args: [forwardRef(() => TabComponent)]
}] }], propDecorators: { label: [{
type: Input
}], icon: [{
type: Input
}], counter: [{
type: Input
}], id: [{
type: Input
}], active: [{
type: Input
}, {
type: HostBinding,
args: ['class.active']
}], disabled: [{
type: Input
}, {
type: HostBinding,
args: ['class.disabled']
}], onClick: [{
type: HostListener,
args: ['click']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLWl0ZW0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY2ZjLWRzL3NyYy9saWIvY29tcG9uZW50cy90YWJJdGVtL3RhYi1pdGVtLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NmYy1kcy9zcmMvbGliL2NvbXBvbmVudHMvdGFiSXRlbS90YWItaXRlbS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSx3QkFBd0I7QUFDeEIsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQWMsV0FBVyxFQUFFLFlBQVksRUFBRSxRQUFRLEVBQUUsTUFBTSxFQUFFLFVBQVUsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN0SCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sc0JBQXNCLENBQUMsQ0FBQyxxREFBcUQ7Ozs7QUFPMUcsTUFBTSxPQUFPLGdCQUFnQjtJQVNqQjtJQUNvRDtJQVRyRCxLQUFLLEdBQVcsRUFBRSxDQUFDO0lBQ25CLElBQUksR0FBVyxFQUFFLENBQUM7SUFDbEIsT0FBTyxDQUFxQjtJQUM1QixFQUFFLEdBQVcsRUFBRSxDQUFDO0lBQ2EsTUFBTSxHQUFZLEtBQUssQ0FBQztJQUN0QixRQUFRLEdBQVksS0FBSyxDQUFDO0lBRWxFLFlBQ1UsRUFBYyxFQUNzQyxZQUEwQjtRQUQ5RSxPQUFFLEdBQUYsRUFBRSxDQUFZO1FBQ3NDLGlCQUFZLEdBQVosWUFBWSxDQUFjO0lBQ3JGLENBQUM7SUFHSixPQUFPO1FBQ0wsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7WUFDbEIsT0FBTztRQUNULENBQUM7UUFFRCxJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO1lBQ3ZCLE9BQU8sQ0FBQyxJQUFJLENBQUMsaURBQWlELENBQUMsQ0FBQztZQUNoRSxPQUFPO1FBQ1QsQ0FBQztRQUVELGdDQUFnQztRQUNoQyxNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsQ0FBQyxhQUFhLENBQUM7UUFDbkQsSUFBSSxDQUFDLE1BQU07WUFBRSxPQUFPO1FBRXBCLE1BQU0sS0FBSyxHQUFHLEtBQUssQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLGdCQUFnQixDQUFDLGNBQWMsQ0FBQyxDQUFDLENBQUM7UUFDbEUsTUFBTSxLQUFLLEdBQUcsS0FBSyxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1FBRW5ELElBQUksS0FBSyxLQUFLLENBQUMsQ0FBQyxFQUFFLENBQUM7WUFDakIsSUFBSSxDQUFDLFlBQVksQ0FBQyxTQUFTLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDckMsQ0FBQztJQUNILENBQUM7d0dBbENVLGdCQUFnQiw0Q0FVTCxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsWUFBWSxDQUFDOzRGQVZ6QyxnQkFBZ0IscVNDVDdCLHNtQkFhTTs7NEZESk8sZ0JBQWdCO2tCQUw1QixTQUFTOytCQUNFLGNBQWM7OzBCQWNyQixRQUFROzswQkFBSSxNQUFNOzJCQUFDLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxZQUFZLENBQUM7eUNBVDNDLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLEVBQUU7c0JBQVYsS0FBSztnQkFDZ0MsTUFBTTtzQkFBM0MsS0FBSzs7c0JBQUksV0FBVzt1QkFBQyxjQUFjO2dCQUNJLFFBQVE7c0JBQS9DLEtBQUs7O3NCQUFJLFdBQVc7dUJBQUMsZ0JBQWdCO2dCQVF0QyxPQUFPO3NCQUROLFlBQVk7dUJBQUMsT0FBTyIsInNvdXJjZXNDb250ZW50IjpbIi8vIHRhYi1pdGVtLmNvbXBvbmVudC50c1xyXG5pbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBFbGVtZW50UmVmLCBIb3N0QmluZGluZywgSG9zdExpc3RlbmVyLCBPcHRpb25hbCwgSW5qZWN0LCBmb3J3YXJkUmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IFRhYkNvbXBvbmVudCB9IGZyb20gJy4uL3RhYi90YWIuY29tcG9uZW50JzsgLy8gQWp1c3RlIG8gY2FtaW5obyBkZSBpbXBvcnRhw6fDo28gY29uZm9ybWUgbmVjZXNzw6FyaW9cclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnY2ZjLXRhYi1pdGVtJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vdGFiLWl0ZW0uY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL3RhYi1pdGVtLmNvbXBvbmVudC5zY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIFRhYkl0ZW1Db21wb25lbnQge1xyXG4gIEBJbnB1dCgpIGxhYmVsOiBzdHJpbmcgPSAnJztcclxuICBASW5wdXQoKSBpY29uOiBzdHJpbmcgPSAnJztcclxuICBASW5wdXQoKSBjb3VudGVyOiBudW1iZXIgfCB1bmRlZmluZWQ7XHJcbiAgQElucHV0KCkgaWQ6IHN0cmluZyA9ICcnO1xyXG4gIEBJbnB1dCgpIEBIb3N0QmluZGluZygnY2xhc3MuYWN0aXZlJykgYWN0aXZlOiBib29sZWFuID0gZmFsc2U7XHJcbiAgQElucHV0KCkgQEhvc3RCaW5kaW5nKCdjbGFzcy5kaXNhYmxlZCcpIGRpc2FibGVkOiBib29sZWFuID0gZmFsc2U7XHJcblxyXG4gIGNvbnN0cnVjdG9yKFxyXG4gICAgcHJpdmF0ZSBlbDogRWxlbWVudFJlZixcclxuICAgIEBPcHRpb25hbCgpIEBJbmplY3QoZm9yd2FyZFJlZigoKSA9PiBUYWJDb21wb25lbnQpKSBwcml2YXRlIHRhYkNvbXBvbmVudDogVGFiQ29tcG9uZW50XHJcbiAgKSB7fVxyXG5cclxuICBASG9zdExpc3RlbmVyKCdjbGljaycpXHJcbiAgb25DbGljaygpIHtcclxuICAgIGlmICh0aGlzLmRpc2FibGVkKSB7XHJcbiAgICAgIHJldHVybjtcclxuICAgIH1cclxuXHJcbiAgICBpZiAoIXRoaXMudGFiQ29tcG9uZW50KSB7XHJcbiAgICAgIGNvbnNvbGUud2FybignVGFiSXRlbUNvbXBvbmVudDogVGFiQ29tcG9uZW50IHBhcmVudCBub3QgZm91bmQnKTtcclxuICAgICAgcmV0dXJuO1xyXG4gICAgfVxyXG4gICAgXHJcbiAgICAvLyBFbmNvbnRyYXIgbyDDrW5kaWNlIGRlc3RlIGl0ZW1cclxuICAgIGNvbnN0IHBhcmVudCA9IHRoaXMuZWwubmF0aXZlRWxlbWVudC5wYXJlbnRFbGVtZW50O1xyXG4gICAgaWYgKCFwYXJlbnQpIHJldHVybjtcclxuICAgIFxyXG4gICAgY29uc3QgaXRlbXMgPSBBcnJheS5mcm9tKHBhcmVudC5xdWVyeVNlbGVjdG9yQWxsKCdjZmMtdGFiLWl0ZW0nKSk7XHJcbiAgICBjb25zdCBpbmRleCA9IGl0ZW1zLmluZGV4T2YodGhpcy5lbC5uYXRpdmVFbGVtZW50KTtcclxuICAgIFxyXG4gICAgaWYgKGluZGV4ICE9PSAtMSkge1xyXG4gICAgICB0aGlzLnRhYkNvbXBvbmVudC5zZWxlY3RUYWIoaW5kZXgpO1xyXG4gICAgfVxyXG4gIH1cclxufSIsIjwhLS0gdGFiLWl0ZW0vdGFiLWl0ZW0uY29tcG9uZW50Lmh0bWwgLS0+XHJcbjxkaXYgY2xhc3M9XCJ0YWItaXRlbVwiIFxyXG4gICAgIHJvbGU9XCJ0YWJcIiBcclxuICAgICBbYXR0ci5hcmlhLXNlbGVjdGVkXT1cImFjdGl2ZVwiIFxyXG4gICAgIFthdHRyLmFyaWEtZGlzYWJsZWRdPVwiZGlzYWJsZWRcIiBcclxuICAgICBbYXR0ci5pZF09XCJpZFwiPlxyXG4gIDxkaXYgY2xhc3M9XCJ0YWItaXRlbS1jb250ZW50XCIgXHJcbiAgICAgICBbY2xhc3MudmVydGljYWwtbGF5b3V0XT1cImljb24gJiYgbGFiZWxcIiBcclxuICAgICAgIFthdHRyLmRhdGEtdG9vbHRpcF09XCIhbGFiZWwgJiYgaWNvbiA/IGxhYmVsIDogbnVsbFwiPlxyXG4gICAgPGkgKm5nSWY9XCJpY29uXCIgY2xhc3M9XCJ0YWItaXRlbS1pY29uXCIgW2NsYXNzXT1cImljb25cIj48L2k+XHJcbiAgICA8c3BhbiAqbmdJZj1cImxhYmVsXCIgY2xhc3M9XCJ0YWItaXRlbS1sYWJlbFwiPnt7bGFiZWx9fTwvc3Bhbj5cclxuICA8L2Rpdj5cclxuICA8c3BhbiAqbmdJZj1cImNvdW50ZXIgIT09IHVuZGVmaW5lZFwiIGNsYXNzPVwidGFiLWl0ZW0tY291bnRlclwiPih7e2NvdW50ZXJ9fSk8L3NwYW4+XHJcbjwvZGl2PiJdfQ==