carbon-components-angular
Version:
Next generation components
145 lines • 13.5 kB
JavaScript
import { Component, Input, ContentChildren, ContentChild, HostBinding } from "@angular/core";
import { Tab } from "./tab.component";
import { TabHeadersVertical } from "./tab-headers-vertical.component";
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "./tab-headers-vertical.component";
import * as i3 from "./tab-skeleton.component";
/**
* `TabsVertical` is a vertical-orientation variant of `Tabs`. It expects a set
* of `<cds-tab>` elements as children and renders the headers vertically.
*
* ```html
* <cds-tabs-vertical>
* <cds-tab heading='tab1'>tab 1 content</cds-tab>
* <cds-tab heading='tab2'>tab 2 content</cds-tab>
* </cds-tabs-vertical>
* ```
*/
export class TabsVertical {
constructor() {
this.cssGridClass = true;
/**
* Set to `true` to have `Tab` items cached and not reloaded on tab switching.
*/
this.cacheActive = false;
/**
* Set to 'true' to have tabs automatically activated and have their content displayed when they receive focus.
*/
this.followFocus = true;
/**
* When `true`, sets each tab panel `tabindex` to `-1` for navigation-style usage.
*/
this.isNavigation = false;
/**
* When `true`, renders the tabs skeleton loading state.
*/
this.skeleton = false;
}
get hostHeight() {
return this.height || null;
}
ngAfterContentInit() {
if (this.tabHeaders) {
this.tabHeaders.cacheActive = this.cacheActive;
}
this.tabs.forEach(tab => {
tab.tabIndex = this.isNavigation ? null : 0;
});
}
ngOnChanges(changes) {
if (this.tabHeaders && changes.cacheActive) {
this.tabHeaders.cacheActive = this.cacheActive;
}
if (this.tabs && changes.isNavigation) {
this.tabs.forEach(tab => {
tab.tabIndex = this.isNavigation ? null : 0;
});
}
}
hasTabHeaders() {
return this.tabs.length > 0;
}
}
TabsVertical.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TabsVertical, deps: [], target: i0.ɵɵFactoryTarget.Component });
TabsVertical.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TabsVertical, selector: "cds-tabs-vertical, ibm-tabs-vertical", inputs: { cacheActive: "cacheActive", followFocus: "followFocus", isNavigation: "isNavigation", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby", height: "height", skeleton: "skeleton" }, host: { properties: { "class.cds--css-grid": "this.cssGridClass", "style.height": "this.hostHeight" } }, queries: [{ propertyName: "tabHeaders", first: true, predicate: TabHeadersVertical, descendants: true }, { propertyName: "tabs", predicate: Tab }], usesOnChanges: true, ngImport: i0, template: `
<ng-container *ngIf="skeleton">
<cds-tabs-skeleton [contained]="true"></cds-tabs-skeleton>
</ng-container>
<ng-container *ngIf="!skeleton">
<cds-tab-headers-vertical
*ngIf="hasTabHeaders()"
[tabs]="tabs"
[followFocus]="followFocus"
[cacheActive]="cacheActive"
[contentBefore]="before"
[contentAfter]="after"
[ariaLabel]="ariaLabel"
[ariaLabelledby]="ariaLabelledby">
</cds-tab-headers-vertical>
<ng-content></ng-content>
<ng-template #before>
<ng-content select="[before]"></ng-content>
</ng-template>
<ng-template #after>
<ng-content select="[after]"></ng-content>
</ng-template>
</ng-container>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.TabHeadersVertical, selector: "cds-tab-headers-vertical, ibm-tab-headers-vertical", inputs: ["tabs", "translations"] }, { kind: "component", type: i3.TabSkeleton, selector: "cds-tabs-skeleton, ibm-tabs-skeleton", inputs: ["numOftabs", "contained"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TabsVertical, decorators: [{
type: Component,
args: [{
selector: "cds-tabs-vertical, ibm-tabs-vertical",
template: `
<ng-container *ngIf="skeleton">
<cds-tabs-skeleton [contained]="true"></cds-tabs-skeleton>
</ng-container>
<ng-container *ngIf="!skeleton">
<cds-tab-headers-vertical
*ngIf="hasTabHeaders()"
[tabs]="tabs"
[followFocus]="followFocus"
[cacheActive]="cacheActive"
[contentBefore]="before"
[contentAfter]="after"
[ariaLabel]="ariaLabel"
[ariaLabelledby]="ariaLabelledby">
</cds-tab-headers-vertical>
<ng-content></ng-content>
<ng-template #before>
<ng-content select="[before]"></ng-content>
</ng-template>
<ng-template #after>
<ng-content select="[after]"></ng-content>
</ng-template>
</ng-container>
`
}]
}], propDecorators: { cssGridClass: [{
type: HostBinding,
args: ["class.cds--css-grid"]
}], hostHeight: [{
type: HostBinding,
args: ["style.height"]
}], cacheActive: [{
type: Input
}], followFocus: [{
type: Input
}], isNavigation: [{
type: Input
}], ariaLabel: [{
type: Input
}], ariaLabelledby: [{
type: Input
}], height: [{
type: Input
}], skeleton: [{
type: Input
}], tabs: [{
type: ContentChildren,
args: [Tab, { descendants: false }]
}], tabHeaders: [{
type: ContentChild,
args: [TabHeadersVertical]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFicy12ZXJ0aWNhbC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvdGFicy90YWJzLXZlcnRpY2FsLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ04sU0FBUyxFQUNULEtBQUssRUFDTCxlQUFlLEVBR2YsWUFBWSxFQUNaLFdBQVcsRUFHWCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsR0FBRyxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDdEMsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7Ozs7O0FBRXRFOzs7Ozs7Ozs7O0dBVUc7QUE0QkgsTUFBTSxPQUFPLFlBQVk7SUEzQnpCO1FBNEJxQyxpQkFBWSxHQUFHLElBQUksQ0FBQztRQUl4RDs7V0FFRztRQUNNLGdCQUFXLEdBQUcsS0FBSyxDQUFDO1FBQzdCOztXQUVHO1FBQ00sZ0JBQVcsR0FBRyxJQUFJLENBQUM7UUFDNUI7O1dBRUc7UUFDTSxpQkFBWSxHQUFHLEtBQUssQ0FBQztRQWM5Qjs7V0FFRztRQUNNLGFBQVEsR0FBRyxLQUFLLENBQUM7S0FrQzFCO0lBakVBLElBQWlDLFVBQVU7UUFDMUMsT0FBTyxJQUFJLENBQUMsTUFBTSxJQUFJLElBQUksQ0FBQztJQUM1QixDQUFDO0lBd0NELGtCQUFrQjtRQUNqQixJQUFJLElBQUksQ0FBQyxVQUFVLEVBQUU7WUFDcEIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQztTQUMvQztRQUNELElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxFQUFFO1lBQ3ZCLEdBQUcsQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDN0MsQ0FBQyxDQUFDLENBQUM7SUFDSixDQUFDO0lBRUQsV0FBVyxDQUFDLE9BQXNCO1FBQ2pDLElBQUksSUFBSSxDQUFDLFVBQVUsSUFBSSxPQUFPLENBQUMsV0FBVyxFQUFFO1lBQzNDLElBQUksQ0FBQyxVQUFVLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQyxXQUFXLENBQUM7U0FDL0M7UUFDRCxJQUFJLElBQUksQ0FBQyxJQUFJLElBQUksT0FBTyxDQUFDLFlBQVksRUFBRTtZQUN0QyxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUMsRUFBRTtnQkFDdkIsR0FBRyxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztZQUM3QyxDQUFDLENBQUMsQ0FBQztTQUNIO0lBQ0YsQ0FBQztJQUVELGFBQWE7UUFDWixPQUFPLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQztJQUM3QixDQUFDOzt5R0FsRVcsWUFBWTs2RkFBWixZQUFZLGlhQTBDVixrQkFBa0IsMERBSmYsR0FBRyxrREEvRFY7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0VBdUJUOzJGQUVXLFlBQVk7a0JBM0J4QixTQUFTO21CQUFDO29CQUNWLFFBQVEsRUFBRSxzQ0FBc0M7b0JBQ2hELFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7RUF1QlQ7aUJBQ0Q7OEJBRW9DLFlBQVk7c0JBQS9DLFdBQVc7dUJBQUMscUJBQXFCO2dCQUNELFVBQVU7c0JBQTFDLFdBQVc7dUJBQUMsY0FBYztnQkFNbEIsV0FBVztzQkFBbkIsS0FBSztnQkFJRyxXQUFXO3NCQUFuQixLQUFLO2dCQUlHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBSUcsU0FBUztzQkFBakIsS0FBSztnQkFJRyxjQUFjO3NCQUF0QixLQUFLO2dCQUtHLE1BQU07c0JBQWQsS0FBSztnQkFJRyxRQUFRO3NCQUFoQixLQUFLO2dCQUt3QyxJQUFJO3NCQUFqRCxlQUFlO3VCQUFDLEdBQUcsRUFBRSxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUU7Z0JBSVYsVUFBVTtzQkFBM0MsWUFBWTt1QkFBQyxrQkFBa0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xyXG5cdENvbXBvbmVudCxcclxuXHRJbnB1dCxcclxuXHRDb250ZW50Q2hpbGRyZW4sXHJcblx0UXVlcnlMaXN0LFxyXG5cdEFmdGVyQ29udGVudEluaXQsXHJcblx0Q29udGVudENoaWxkLFxyXG5cdEhvc3RCaW5kaW5nLFxyXG5cdE9uQ2hhbmdlcyxcclxuXHRTaW1wbGVDaGFuZ2VzXHJcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcclxuaW1wb3J0IHsgVGFiIH0gZnJvbSBcIi4vdGFiLmNvbXBvbmVudFwiO1xyXG5pbXBvcnQgeyBUYWJIZWFkZXJzVmVydGljYWwgfSBmcm9tIFwiLi90YWItaGVhZGVycy12ZXJ0aWNhbC5jb21wb25lbnRcIjtcclxuXHJcbi8qKlxyXG4gKiBgVGFic1ZlcnRpY2FsYCBpcyBhIHZlcnRpY2FsLW9yaWVudGF0aW9uIHZhcmlhbnQgb2YgYFRhYnNgLiBJdCBleHBlY3RzIGEgc2V0XHJcbiAqIG9mIGA8Y2RzLXRhYj5gIGVsZW1lbnRzIGFzIGNoaWxkcmVuIGFuZCByZW5kZXJzIHRoZSBoZWFkZXJzIHZlcnRpY2FsbHkuXHJcbiAqXHJcbiAqIGBgYGh0bWxcclxuICogPGNkcy10YWJzLXZlcnRpY2FsPlxyXG4gKiBcdDxjZHMtdGFiIGhlYWRpbmc9J3RhYjEnPnRhYiAxIGNvbnRlbnQ8L2Nkcy10YWI+XHJcbiAqIFx0PGNkcy10YWIgaGVhZGluZz0ndGFiMic+dGFiIDIgY29udGVudDwvY2RzLXRhYj5cclxuICogPC9jZHMtdGFicy12ZXJ0aWNhbD5cclxuICogYGBgXHJcbiAqL1xyXG5AQ29tcG9uZW50KHtcclxuXHRzZWxlY3RvcjogXCJjZHMtdGFicy12ZXJ0aWNhbCwgaWJtLXRhYnMtdmVydGljYWxcIixcclxuXHR0ZW1wbGF0ZTogYFxyXG5cdFx0PG5nLWNvbnRhaW5lciAqbmdJZj1cInNrZWxldG9uXCI+XHJcblx0XHRcdDxjZHMtdGFicy1za2VsZXRvbiBbY29udGFpbmVkXT1cInRydWVcIj48L2Nkcy10YWJzLXNrZWxldG9uPlxyXG5cdFx0PC9uZy1jb250YWluZXI+XHJcblx0XHQ8bmctY29udGFpbmVyICpuZ0lmPVwiIXNrZWxldG9uXCI+XHJcblx0XHRcdDxjZHMtdGFiLWhlYWRlcnMtdmVydGljYWxcclxuXHRcdFx0XHQqbmdJZj1cImhhc1RhYkhlYWRlcnMoKVwiXHJcblx0XHRcdFx0W3RhYnNdPVwidGFic1wiXHJcblx0XHRcdFx0W2ZvbGxvd0ZvY3VzXT1cImZvbGxvd0ZvY3VzXCJcclxuXHRcdFx0XHRbY2FjaGVBY3RpdmVdPVwiY2FjaGVBY3RpdmVcIlxyXG5cdFx0XHRcdFtjb250ZW50QmVmb3JlXT1cImJlZm9yZVwiXHJcblx0XHRcdFx0W2NvbnRlbnRBZnRlcl09XCJhZnRlclwiXHJcblx0XHRcdFx0W2FyaWFMYWJlbF09XCJhcmlhTGFiZWxcIlxyXG5cdFx0XHRcdFthcmlhTGFiZWxsZWRieV09XCJhcmlhTGFiZWxsZWRieVwiPlxyXG5cdFx0XHQ8L2Nkcy10YWItaGVhZGVycy12ZXJ0aWNhbD5cclxuXHRcdFx0PG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxyXG5cdFx0XHQ8bmctdGVtcGxhdGUgI2JlZm9yZT5cclxuXHRcdFx0XHQ8bmctY29udGVudCBzZWxlY3Q9XCJbYmVmb3JlXVwiPjwvbmctY29udGVudD5cclxuXHRcdFx0PC9uZy10ZW1wbGF0ZT5cclxuXHRcdFx0PG5nLXRlbXBsYXRlICNhZnRlcj5cclxuXHRcdFx0XHQ8bmctY29udGVudCBzZWxlY3Q9XCJbYWZ0ZXJdXCI+PC9uZy1jb250ZW50PlxyXG5cdFx0XHQ8L25nLXRlbXBsYXRlPlxyXG5cdFx0PC9uZy1jb250YWluZXI+XHJcblx0YFxyXG59KVxyXG5leHBvcnQgY2xhc3MgVGFic1ZlcnRpY2FsIGltcGxlbWVudHMgQWZ0ZXJDb250ZW50SW5pdCwgT25DaGFuZ2VzIHtcclxuXHRASG9zdEJpbmRpbmcoXCJjbGFzcy5jZHMtLWNzcy1ncmlkXCIpIGNzc0dyaWRDbGFzcyA9IHRydWU7XHJcblx0QEhvc3RCaW5kaW5nKFwic3R5bGUuaGVpZ2h0XCIpIGdldCBob3N0SGVpZ2h0KCkge1xyXG5cdFx0cmV0dXJuIHRoaXMuaGVpZ2h0IHx8IG51bGw7XHJcblx0fVxyXG5cdC8qKlxyXG5cdCAqIFNldCB0byBgdHJ1ZWAgdG8gaGF2ZSBgVGFiYCBpdGVtcyBjYWNoZWQgYW5kIG5vdCByZWxvYWRlZCBvbiB0YWIgc3dpdGNoaW5nLlxyXG5cdCAqL1xyXG5cdEBJbnB1dCgpIGNhY2hlQWN0aXZlID0gZmFsc2U7XHJcblx0LyoqXHJcblx0ICogU2V0IHRvICd0cnVlJyB0byBoYXZlIHRhYnMgYXV0b21hdGljYWxseSBhY3RpdmF0ZWQgYW5kIGhhdmUgdGhlaXIgY29udGVudCBkaXNwbGF5ZWQgd2hlbiB0aGV5IHJlY2VpdmUgZm9jdXMuXHJcblx0ICovXHJcblx0QElucHV0KCkgZm9sbG93Rm9jdXMgPSB0cnVlO1xyXG5cdC8qKlxyXG5cdCAqIFdoZW4gYHRydWVgLCBzZXRzIGVhY2ggdGFiIHBhbmVsIGB0YWJpbmRleGAgdG8gYC0xYCBmb3IgbmF2aWdhdGlvbi1zdHlsZSB1c2FnZS5cclxuXHQgKi9cclxuXHRASW5wdXQoKSBpc05hdmlnYXRpb24gPSBmYWxzZTtcclxuXHQvKipcclxuXHQgKiBTZXRzIHRoZSBhcmlhIGxhYmVsIG9uIHRoZSBgVGFiSGVhZGVyc1ZlcnRpY2FsYHMgbmF2IGVsZW1lbnQuXHJcblx0ICovXHJcblx0QElucHV0KCkgYXJpYUxhYmVsOiBzdHJpbmc7XHJcblx0LyoqXHJcblx0ICogU2V0cyB0aGUgYXJpYSBsYWJlbGxlZGJ5IG9uIHRoZSBgVGFiSGVhZGVyc1ZlcnRpY2FsYHMgbmF2IGVsZW1lbnQuXHJcblx0ICovXHJcblx0QElucHV0KCkgYXJpYUxhYmVsbGVkYnk6IHN0cmluZztcclxuXHQvKipcclxuXHQgKiAqKk9wdGlvbmFsKio6IGV4cGxpY2l0IGhlaWdodCBmb3IgdGhlIHZlcnRpY2FsIHRhYiBsaXN0IGNvbnRhaW5lcjsgYWNjZXB0cyBhbnlcclxuXHQgKiB2YWxpZCBDU1MgaGVpZ2h0IHZhbHVlLlxyXG5cdCAqL1xyXG5cdEBJbnB1dCgpIGhlaWdodDogc3RyaW5nO1xyXG5cdC8qKlxyXG5cdCAqIFdoZW4gYHRydWVgLCByZW5kZXJzIHRoZSB0YWJzIHNrZWxldG9uIGxvYWRpbmcgc3RhdGUuXHJcblx0ICovXHJcblx0QElucHV0KCkgc2tlbGV0b24gPSBmYWxzZTtcclxuXHJcblx0LyoqXHJcblx0ICogTWFpbnRhaW5zIGEgYFF1ZXJ5TGlzdGAgb2YgdGhlIGBUYWJgIGVsZW1lbnRzIGFuZCB1cGRhdGVzIGlmIGBUYWJgcyBhcmUgYWRkZWQgb3IgcmVtb3ZlZC5cclxuXHQgKi9cclxuXHRAQ29udGVudENoaWxkcmVuKFRhYiwgeyBkZXNjZW5kYW50czogZmFsc2UgfSkgdGFiczogUXVlcnlMaXN0PFRhYj47XHJcblx0LyoqXHJcblx0ICogQ29udGVudCBjaGlsZCBvZiB0aGUgcHJvamVjdGVkIGhlYWRlciBjb21wb25lbnQuXHJcblx0ICovXHJcblx0QENvbnRlbnRDaGlsZChUYWJIZWFkZXJzVmVydGljYWwpIHRhYkhlYWRlcnM7XHJcblxyXG5cdG5nQWZ0ZXJDb250ZW50SW5pdCgpIHtcclxuXHRcdGlmICh0aGlzLnRhYkhlYWRlcnMpIHtcclxuXHRcdFx0dGhpcy50YWJIZWFkZXJzLmNhY2hlQWN0aXZlID0gdGhpcy5jYWNoZUFjdGl2ZTtcclxuXHRcdH1cclxuXHRcdHRoaXMudGFicy5mb3JFYWNoKHRhYiA9PiB7XHJcblx0XHRcdHRhYi50YWJJbmRleCA9IHRoaXMuaXNOYXZpZ2F0aW9uID8gbnVsbCA6IDA7XHJcblx0XHR9KTtcclxuXHR9XHJcblxyXG5cdG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpIHtcclxuXHRcdGlmICh0aGlzLnRhYkhlYWRlcnMgJiYgY2hhbmdlcy5jYWNoZUFjdGl2ZSkge1xyXG5cdFx0XHR0aGlzLnRhYkhlYWRlcnMuY2FjaGVBY3RpdmUgPSB0aGlzLmNhY2hlQWN0aXZlO1xyXG5cdFx0fVxyXG5cdFx0aWYgKHRoaXMudGFicyAmJiBjaGFuZ2VzLmlzTmF2aWdhdGlvbikge1xyXG5cdFx0XHR0aGlzLnRhYnMuZm9yRWFjaCh0YWIgPT4ge1xyXG5cdFx0XHRcdHRhYi50YWJJbmRleCA9IHRoaXMuaXNOYXZpZ2F0aW9uID8gbnVsbCA6IDA7XHJcblx0XHRcdH0pO1xyXG5cdFx0fVxyXG5cdH1cclxuXHJcblx0aGFzVGFiSGVhZGVycygpIHtcclxuXHRcdHJldHVybiB0aGlzLnRhYnMubGVuZ3RoID4gMDtcclxuXHR9XHJcbn1cclxuIl19