@engie-group/fluid-design-system-angular
Version:
Fluid Design System Angular
56 lines • 10.4 kB
JavaScript
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewChild, ViewEncapsulation } from '@angular/core';
import { BadgeComponent } from '../badge/badge.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class TabComponent {
constructor(cdr) {
this.cdr = cdr;
/**
* Output that emits if tab is selected
*/
this.tabSelect = new EventEmitter();
/**
* Output that emits keyboard event
*/
this.tabMove = new EventEmitter();
}
/**
* @ignore
*/
setIsActive(isActive) {
this.isActive = isActive;
this.cdr.markForCheck();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TabComponent, isStandalone: true, selector: "nj-tab", inputs: { isDisabled: "isDisabled", ariaControls: "ariaControls", id: "id", tabContentId: "tabContentId", tabContentAriaLabelledBy: "tabContentAriaLabelledBy", isActive: "isActive", badgeOptions: "badgeOptions" }, outputs: { tabSelect: "tabSelect", tabMove: "tabMove" }, viewQueries: [{ propertyName: "contentTemplateRef", first: true, predicate: ["contentTemplate"], descendants: true }, { propertyName: "tab", first: true, predicate: ["tab"], descendants: true }], ngImport: i0, template: "<button class=\"nj-tab__item\" [ngClass]=\"{'nj-tab__item--active': isActive}\"\n role=\"tab\"\n [attr.aria-selected]=\"isActive\"\n [attr.aria-controls]=\"ariaControls\"\n [tabIndex]=\"isActive ? 0 : -1\"\n [disabled]=\"isDisabled\"\n (click)=\"tabSelect?.emit()\"\n (keydown)=\"tabMove?.emit($event)\"\n #tab\n >\n <ng-content></ng-content>\n <nj-badge\n *ngIf=\"badgeOptions\"\n size=\"md\"\n [variant]=\"badgeOptions.variant\"\n [emphasis]=\"badgeOptions.emphasis\"\n [value]=\"badgeOptions.value\"\n [capedValue]=\"badgeOptions.capedValue\"\n [unitLabel]=\"badgeOptions.unitLabel\"\n ></nj-badge>\n</button>\n<ng-template #contentTemplate>\n <ng-content select=\"[tab-content]\"></ng-content>\n</ng-template>\n", styles: [".nj-tab__item{height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BadgeComponent, selector: "nj-badge", inputs: ["emphasis", "variant", "size", "iconName", "value", "capedValue", "isUppercase", "unitLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-tab', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, BadgeComponent], template: "<button class=\"nj-tab__item\" [ngClass]=\"{'nj-tab__item--active': isActive}\"\n role=\"tab\"\n [attr.aria-selected]=\"isActive\"\n [attr.aria-controls]=\"ariaControls\"\n [tabIndex]=\"isActive ? 0 : -1\"\n [disabled]=\"isDisabled\"\n (click)=\"tabSelect?.emit()\"\n (keydown)=\"tabMove?.emit($event)\"\n #tab\n >\n <ng-content></ng-content>\n <nj-badge\n *ngIf=\"badgeOptions\"\n size=\"md\"\n [variant]=\"badgeOptions.variant\"\n [emphasis]=\"badgeOptions.emphasis\"\n [value]=\"badgeOptions.value\"\n [capedValue]=\"badgeOptions.capedValue\"\n [unitLabel]=\"badgeOptions.unitLabel\"\n ></nj-badge>\n</button>\n<ng-template #contentTemplate>\n <ng-content select=\"[tab-content]\"></ng-content>\n</ng-template>\n", styles: [".nj-tab__item{height:100%}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { isDisabled: [{
type: Input
}], ariaControls: [{
type: Input
}], id: [{
type: Input
}], tabContentId: [{
type: Input
}], tabContentAriaLabelledBy: [{
type: Input
}], isActive: [{
type: Input
}], badgeOptions: [{
type: Input
}], contentTemplateRef: [{
type: ViewChild,
args: ['contentTemplate']
}], tab: [{
type: ViewChild,
args: ['tab']
}], tabSelect: [{
type: Output
}], tabMove: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3RhYi90YWIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvdGFiL3RhYi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsWUFBWSxFQUFDLE1BQU0saUJBQWlCLENBQUM7QUFDN0MsT0FBTyxFQUNMLHVCQUF1QixFQUV2QixTQUFTLEVBRVQsWUFBWSxFQUNaLEtBQUssRUFDTCxNQUFNLEVBRU4sU0FBUyxFQUNULGlCQUFpQixFQUNsQixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUMsY0FBYyxFQUFDLE1BQU0sMEJBQTBCLENBQUM7OztBQWF4RCxNQUFNLE9BQU8sWUFBWTtJQXlEdkIsWUFBb0IsR0FBc0I7UUFBdEIsUUFBRyxHQUFILEdBQUcsQ0FBbUI7UUFWMUM7O1dBRUc7UUFDTyxjQUFTLEdBQXVCLElBQUksWUFBWSxFQUFRLENBQUM7UUFFbkU7O1dBRUc7UUFDTyxZQUFPLEdBQWdDLElBQUksWUFBWSxFQUFpQixDQUFDO0lBR25GLENBQUM7SUFFRDs7T0FFRztJQUNILFdBQVcsQ0FBQyxRQUFRO1FBQ2xCLElBQUksQ0FBQyxRQUFRLEdBQUcsUUFBUSxDQUFDO1FBQ3pCLElBQUksQ0FBQyxHQUFHLENBQUMsWUFBWSxFQUFFLENBQUM7SUFDMUIsQ0FBQzsrR0FsRVUsWUFBWTttR0FBWixZQUFZLHFoQkMxQnpCLHF5QkF3QkEscUZEQVksWUFBWSxpT0FBRSxjQUFjOzs0RkFFM0IsWUFBWTtrQkFUeEIsU0FBUzsrQkFDRSxRQUFRLG1CQUdELHVCQUF1QixDQUFDLE1BQU0saUJBQ2hDLGlCQUFpQixDQUFDLElBQUksY0FDekIsSUFBSSxXQUNQLENBQUMsWUFBWSxFQUFFLGNBQWMsQ0FBQzt3R0FPOUIsVUFBVTtzQkFBbEIsS0FBSztnQkFLRyxZQUFZO3NCQUFwQixLQUFLO2dCQUtHLEVBQUU7c0JBQVYsS0FBSztnQkFLRyxZQUFZO3NCQUFwQixLQUFLO2dCQUtHLHdCQUF3QjtzQkFBaEMsS0FBSztnQkFLRyxRQUFRO3NCQUFoQixLQUFLO2dCQUtHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBS3dCLGtCQUFrQjtzQkFBL0MsU0FBUzt1QkFBQyxpQkFBaUI7Z0JBS1YsR0FBRztzQkFBcEIsU0FBUzt1QkFBQyxLQUFLO2dCQUtOLFNBQVM7c0JBQWxCLE1BQU07Z0JBS0csT0FBTztzQkFBaEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tbW9uTW9kdWxlfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENoYW5nZURldGVjdG9yUmVmLFxuICBDb21wb25lbnQsXG4gIEVsZW1lbnRSZWYsXG4gIEV2ZW50RW1pdHRlcixcbiAgSW5wdXQsXG4gIE91dHB1dCxcbiAgVGVtcGxhdGVSZWYsXG4gIFZpZXdDaGlsZCxcbiAgVmlld0VuY2Fwc3VsYXRpb25cbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge0JhZGdlQ29tcG9uZW50fSBmcm9tICcuLi9iYWRnZS9iYWRnZS5jb21wb25lbnQnO1xuXG50eXBlIFRCYWRnZU9wdGlvbnMgPSBPbWl0PEJhZGdlQ29tcG9uZW50LCAnc2l6ZScgfCAnaWNvbk5hbWUnID47XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ25qLXRhYicsXG4gIHRlbXBsYXRlVXJsOiAnLi90YWIuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi90YWIuY29tcG9uZW50LnNjc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIEJhZGdlQ29tcG9uZW50XVxufSlcbmV4cG9ydCBjbGFzcyBUYWJDb21wb25lbnQge1xuXG4gIC8qKlxuICAgKiBXaGV0aGVyIHRhYiBpcyBkaXNhYmxlZCBvciBub3RcbiAgICovXG4gIEBJbnB1dCgpIGlzRGlzYWJsZWQ6IGJvb2xlYW47XG5cbiAgLyoqXG4gICAqIEFyaWEgY29udHJvbHMsIGZvciBhY2Nlc3NpYmlsaXR5IHJlYXNvbnNcbiAgICovXG4gIEBJbnB1dCgpIGFyaWFDb250cm9sczogc3RyaW5nO1xuXG4gIC8qKlxuICAgKiBJZCBvZiB0aGUgdGFiXG4gICAqL1xuICBASW5wdXQoKSBpZDogc3RyaW5nO1xuXG4gIC8qKlxuICAgKiBJZCBvZiB0aGUgY29udGVudFxuICAgKi9cbiAgQElucHV0KCkgdGFiQ29udGVudElkOiBzdHJpbmc7XG5cbiAgLyoqXG4gICAqIEFyaWEgbGFiZWxsZWQgYnkgd2hpY2ggd2lsbCBiZSBzZXQgb24gdGhlIGNvbnRlbnQsIGZvciBhY2Nlc3NpYmlsaXR5IHJlYXNvbnNcbiAgICovXG4gIEBJbnB1dCgpIHRhYkNvbnRlbnRBcmlhTGFiZWxsZWRCeTogc3RyaW5nO1xuXG4gIC8qKlxuICAgKiBXaGV0aGVyIHRhYiBpcyBhY3RpdmUgb3Igbm90XG4gICAqL1xuICBASW5wdXQoKSBpc0FjdGl2ZTogYm9vbGVhbjtcblxuICAvKipcbiAgICogT3B0aW9ucyBmb3IgdGhlIGJhZGdlIGluc2lkZSB0aGUgdGFiXG4gICAqL1xuICBASW5wdXQoKSBiYWRnZU9wdGlvbnM/OiBUQmFkZ2VPcHRpb25zO1xuXG4gIC8qKlxuICAgKiBAaWdub3JlXG4gICAqL1xuICBAVmlld0NoaWxkKCdjb250ZW50VGVtcGxhdGUnKSBjb250ZW50VGVtcGxhdGVSZWY6IFRlbXBsYXRlUmVmPGFueT47XG5cbiAgLyoqXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIEBWaWV3Q2hpbGQoJ3RhYicpIHRhYjogRWxlbWVudFJlZjxIVE1MQnV0dG9uRWxlbWVudD47XG5cbiAgLyoqXG4gICAqIE91dHB1dCB0aGF0IGVtaXRzIGlmIHRhYiBpcyBzZWxlY3RlZFxuICAgKi9cbiAgQE91dHB1dCgpIHRhYlNlbGVjdDogRXZlbnRFbWl0dGVyPHZvaWQ+ID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuXG4gIC8qKlxuICAgKiBPdXRwdXQgdGhhdCBlbWl0cyBrZXlib2FyZCBldmVudFxuICAgKi9cbiAgQE91dHB1dCgpIHRhYk1vdmU6IEV2ZW50RW1pdHRlcjxLZXlib2FyZEV2ZW50PiA9IG5ldyBFdmVudEVtaXR0ZXI8S2V5Ym9hcmRFdmVudD4oKTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGNkcjogQ2hhbmdlRGV0ZWN0b3JSZWYpIHtcbiAgfVxuXG4gIC8qKlxuICAgKiBAaWdub3JlXG4gICAqL1xuICBzZXRJc0FjdGl2ZShpc0FjdGl2ZSkge1xuICAgIHRoaXMuaXNBY3RpdmUgPSBpc0FjdGl2ZTtcbiAgICB0aGlzLmNkci5tYXJrRm9yQ2hlY2soKTtcbiAgfVxufVxuIiwiPGJ1dHRvbiBjbGFzcz1cIm5qLXRhYl9faXRlbVwiIFtuZ0NsYXNzXT1cInsnbmotdGFiX19pdGVtLS1hY3RpdmUnOiBpc0FjdGl2ZX1cIlxuICAgICAgICByb2xlPVwidGFiXCJcbiAgICAgICAgW2F0dHIuYXJpYS1zZWxlY3RlZF09XCJpc0FjdGl2ZVwiXG4gICAgICAgIFthdHRyLmFyaWEtY29udHJvbHNdPVwiYXJpYUNvbnRyb2xzXCJcbiAgICAgICAgW3RhYkluZGV4XT1cImlzQWN0aXZlID8gMCA6IC0xXCJcbiAgICAgICAgW2Rpc2FibGVkXT1cImlzRGlzYWJsZWRcIlxuICAgICAgICAoY2xpY2spPVwidGFiU2VsZWN0Py5lbWl0KClcIlxuICAgICAgICAoa2V5ZG93bik9XCJ0YWJNb3ZlPy5lbWl0KCRldmVudClcIlxuICAgICAgICAjdGFiXG4gICAgICAgID5cbiAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICA8bmotYmFkZ2VcbiAgICAqbmdJZj1cImJhZGdlT3B0aW9uc1wiXG4gICAgc2l6ZT1cIm1kXCJcbiAgICBbdmFyaWFudF09XCJiYWRnZU9wdGlvbnMudmFyaWFudFwiXG4gICAgW2VtcGhhc2lzXT1cImJhZGdlT3B0aW9ucy5lbXBoYXNpc1wiXG4gICAgW3ZhbHVlXT1cImJhZGdlT3B0aW9ucy52YWx1ZVwiXG4gICAgW2NhcGVkVmFsdWVdPVwiYmFkZ2VPcHRpb25zLmNhcGVkVmFsdWVcIlxuICAgIFt1bml0TGFiZWxdPVwiYmFkZ2VPcHRpb25zLnVuaXRMYWJlbFwiXG4gID48L25qLWJhZGdlPlxuPC9idXR0b24+XG48bmctdGVtcGxhdGUgI2NvbnRlbnRUZW1wbGF0ZT5cbiAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW3RhYi1jb250ZW50XVwiPjwvbmctY29udGVudD5cbjwvbmctdGVtcGxhdGU+XG4iXX0=