carbon-components-angular
Version:
Next generation components
175 lines • 13.8 kB
JavaScript
import { Component, Input, Output, EventEmitter, TemplateRef } from "@angular/core";
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
/**
* The `Tab` component is a child of the `Tabs` component.
* It represents one `Tab` item and its content within a panel of other `Tab` items.
*
*
* `Tab` takes a string or `TemplateRef` for the header, and any content for the body of the tab.
* Disabled states should be handled by the application (ie. switch to the tab, but display some
* indication as to _why_ the tab is disabled).
*
* When the tab is selected the `select` output will be triggered.
* The `select` output will also be triggered for the active tab when the tabs are loaded or updated.
*
*
* Tab with string header:
*
* ```html
* <cds-tab heading='tab1'>
* tab 1 content
* </cds-tab>
* ```
*
* Tab with custom header:
*
* ```html
* <ng-template #tabHeading>
* <svg cdsIcon="facebook"
* size="sm"
* style="margin-right: 7px;">
* </svg>
* Hello Tab 1
* </ng-template>
* <cds-tabs>
* <cds-tab [heading]="tabHeading">
* Tab 1 content <svg cdsIcon="alert" size="lg"></svg>
* </cds-tab>
* <cds-tab heading='Tab2'>
* Tab 2 content
* </cds-tab>
* <cds-tab heading='Tab3'>
* Tab 3 content
* </cds-tab>
* </cds-tabs>
* ```
*/
export class Tab {
constructor() {
/**
* Boolean value reflects if the `Tab` is using a custom template for the heading.
* Default value is false.
*/
this.headingIsTemplate = false;
/**
* Indicates whether the `Tab` is active/selected.
* Determines whether it's `TabPanel` is rendered.
*/
this.active = false;
/**
* Indicates whether or not the `Tab` item is disabled.
*/
this.disabled = false;
this.tabIndex = 0;
/**
* Sets the id of the `Tab`. Will be uniquely generated if not provided.
*/
this.id = `n-tab-${Tab.counter++}`;
/**
* Value 'selected' to be emitted after a new `Tab` is selected.
*/
this.selected = new EventEmitter();
this._cacheActive = false;
}
/**
* Set to true to have Tab items cached and not reloaded on tab switching.
*/
set cacheActive(shouldCache) {
this._cacheActive = shouldCache;
}
get cacheActive() {
return this._cacheActive;
}
/**
* Checks for custom heading template on initialization and updates the value
* of the boolean 'headingIsTemplate'.
*/
ngOnInit() {
if (this.heading instanceof TemplateRef) {
this.headingIsTemplate = true;
}
}
/**
* Emit the status of the `Tab`, specifically 'select' and 'selected' properties.
*/
doSelect() {
this.selected.emit();
}
/**
* Returns value indicating whether this `Tab` should be rendered in a `TabPanel`.
*/
shouldRender() {
return this.active || this.cacheActive;
}
isTemplate(value) {
return value instanceof TemplateRef;
}
}
Tab.counter = 0;
Tab.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Tab, deps: [], target: i0.ɵɵFactoryTarget.Component });
Tab.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: Tab, selector: "cds-tab, ibm-tab", inputs: { heading: "heading", title: "title", context: "context", active: "active", disabled: "disabled", tabIndex: "tabIndex", id: "id", cacheActive: "cacheActive", tabContent: "tabContent", templateContext: "templateContext" }, outputs: { selected: "selected" }, ngImport: i0, template: `
<div
[attr.tabindex]="tabIndex"
role="tabpanel"
*ngIf="shouldRender()"
class="cds--tab-content"
[id]="id"
[ngStyle]="{'display': active ? null : 'none'}"
[attr.aria-labelledby]="id + '-header'"
aria-live="polite">
<ng-template
*ngIf="isTemplate(tabContent)"
[ngTemplateOutlet]="tabContent"
[ngTemplateOutletContext]="{ $implicit: templateContext }">
</ng-template>
<ng-content></ng-content>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Tab, decorators: [{
type: Component,
args: [{
selector: "cds-tab, ibm-tab",
template: `
<div
[attr.tabindex]="tabIndex"
role="tabpanel"
*ngIf="shouldRender()"
class="cds--tab-content"
[id]="id"
[ngStyle]="{'display': active ? null : 'none'}"
[attr.aria-labelledby]="id + '-header'"
aria-live="polite">
<ng-template
*ngIf="isTemplate(tabContent)"
[ngTemplateOutlet]="tabContent"
[ngTemplateOutletContext]="{ $implicit: templateContext }">
</ng-template>
<ng-content></ng-content>
</div>
`
}]
}], propDecorators: { heading: [{
type: Input
}], title: [{
type: Input
}], context: [{
type: Input
}], active: [{
type: Input
}], disabled: [{
type: Input
}], tabIndex: [{
type: Input
}], id: [{
type: Input
}], cacheActive: [{
type: Input
}], tabContent: [{
type: Input
}], templateContext: [{
type: Input
}], selected: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy90YWJzL3RhYi5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNOLFNBQVMsRUFFVCxLQUFLLEVBQ0wsTUFBTSxFQUNOLFlBQVksRUFDWixXQUFXLEVBRVgsTUFBTSxlQUFlLENBQUM7OztBQUV2Qjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztFQTJDRTtBQXNCRixNQUFNLE9BQU8sR0FBRztJQXJCaEI7UUF1QkM7OztXQUdHO1FBQ0ksc0JBQWlCLEdBQUcsS0FBSyxDQUFDO1FBaUJqQzs7O1dBR0c7UUFDTSxXQUFNLEdBQUcsS0FBSyxDQUFDO1FBQ3hCOztXQUVHO1FBQ00sYUFBUSxHQUFHLEtBQUssQ0FBQztRQUVqQixhQUFRLEdBQUcsQ0FBQyxDQUFDO1FBQ3RCOztXQUVHO1FBQ00sT0FBRSxHQUFHLFNBQVMsR0FBRyxDQUFDLE9BQU8sRUFBRSxFQUFFLENBQUM7UUFldkM7O1dBRUc7UUFDTyxhQUFRLEdBQXVCLElBQUksWUFBWSxFQUFRLENBQUM7UUFNeEQsaUJBQVksR0FBRyxLQUFLLENBQUM7S0E2Qi9CO0lBcERBOztPQUVHO0lBQ0gsSUFBYSxXQUFXLENBQUMsV0FBb0I7UUFDNUMsSUFBSSxDQUFDLFlBQVksR0FBRyxXQUFXLENBQUM7SUFDakMsQ0FBQztJQWNELElBQUksV0FBVztRQUNkLE9BQU8sSUFBSSxDQUFDLFlBQVksQ0FBQztJQUMxQixDQUFDO0lBSUQ7OztPQUdHO0lBQ0gsUUFBUTtRQUNQLElBQUksSUFBSSxDQUFDLE9BQU8sWUFBWSxXQUFXLEVBQUU7WUFDeEMsSUFBSSxDQUFDLGlCQUFpQixHQUFHLElBQUksQ0FBQztTQUM5QjtJQUNGLENBQUM7SUFFRDs7T0FFRztJQUNILFFBQVE7UUFDUCxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3RCLENBQUM7SUFFRDs7TUFFRTtJQUNGLFlBQVk7UUFDWCxPQUFPLElBQUksQ0FBQyxNQUFNLElBQUksSUFBSSxDQUFDLFdBQVcsQ0FBQztJQUN4QyxDQUFDO0lBRU0sVUFBVSxDQUFDLEtBQUs7UUFDdEIsT0FBTyxLQUFLLFlBQVksV0FBVyxDQUFDO0lBQ3JDLENBQUM7O0FBeEZjLFdBQU8sR0FBRyxDQUFFLENBQUE7Z0dBRGYsR0FBRztvRkFBSCxHQUFHLGlVQW5CTDs7Ozs7Ozs7Ozs7Ozs7Ozs7RUFpQlQ7MkZBRVcsR0FBRztrQkFyQmYsU0FBUzttQkFBQztvQkFDVixRQUFRLEVBQUUsa0JBQWtCO29CQUM1QixRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7O0VBaUJUO2lCQUNEOzhCQVlTLE9BQU87c0JBQWYsS0FBSztnQkFPRyxLQUFLO3NCQUFiLEtBQUs7Z0JBSUcsT0FBTztzQkFBZixLQUFLO2dCQUtHLE1BQU07c0JBQWQsS0FBSztnQkFJRyxRQUFRO3NCQUFoQixLQUFLO2dCQUVHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBSUcsRUFBRTtzQkFBVixLQUFLO2dCQUlPLFdBQVc7c0JBQXZCLEtBQUs7Z0JBTUcsVUFBVTtzQkFBbEIsS0FBSztnQkFJRyxlQUFlO3NCQUF2QixLQUFLO2dCQUlJLFFBQVE7c0JBQWpCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuXHRDb21wb25lbnQsXG5cdE9uSW5pdCxcblx0SW5wdXQsXG5cdE91dHB1dCxcblx0RXZlbnRFbWl0dGVyLFxuXHRUZW1wbGF0ZVJlZixcblx0SG9zdEJpbmRpbmdcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcblxuLyoqXG4qIFRoZSBgVGFiYCBjb21wb25lbnQgaXMgYSBjaGlsZCBvZiB0aGUgYFRhYnNgIGNvbXBvbmVudC5cbiogSXQgcmVwcmVzZW50cyBvbmUgYFRhYmAgaXRlbSBhbmQgaXRzIGNvbnRlbnQgd2l0aGluIGEgcGFuZWwgb2Ygb3RoZXIgYFRhYmAgaXRlbXMuXG4qXG4qXG4qIGBUYWJgIHRha2VzIGEgc3RyaW5nIG9yIGBUZW1wbGF0ZVJlZmAgZm9yIHRoZSBoZWFkZXIsIGFuZCBhbnkgY29udGVudCBmb3IgdGhlIGJvZHkgb2YgdGhlIHRhYi5cbiogRGlzYWJsZWQgc3RhdGVzIHNob3VsZCBiZSBoYW5kbGVkIGJ5IHRoZSBhcHBsaWNhdGlvbiAoaWUuIHN3aXRjaCB0byB0aGUgdGFiLCBidXQgZGlzcGxheSBzb21lXG4qIGluZGljYXRpb24gYXMgdG8gX3doeV8gdGhlIHRhYiBpcyBkaXNhYmxlZCkuXG4qXG4qIFdoZW4gdGhlIHRhYiBpcyBzZWxlY3RlZCB0aGUgYHNlbGVjdGAgb3V0cHV0IHdpbGwgYmUgdHJpZ2dlcmVkLlxuKiBUaGUgYHNlbGVjdGAgb3V0cHV0IHdpbGwgYWxzbyBiZSB0cmlnZ2VyZWQgZm9yIHRoZSBhY3RpdmUgdGFiIHdoZW4gdGhlIHRhYnMgYXJlIGxvYWRlZCBvciB1cGRhdGVkLlxuKlxuKlxuKiBUYWIgd2l0aCBzdHJpbmcgaGVhZGVyOlxuKlxuKiBgYGBodG1sXG4qIDxjZHMtdGFiIGhlYWRpbmc9J3RhYjEnPlxuKiBcdHRhYiAxIGNvbnRlbnRcbiogPC9jZHMtdGFiPlxuKiBgYGBcbipcbiogVGFiIHdpdGggY3VzdG9tIGhlYWRlcjpcbipcbiogYGBgaHRtbFxuKiA8bmctdGVtcGxhdGUgI3RhYkhlYWRpbmc+XG4qIFx0PHN2ZyBjZHNJY29uPVwiZmFjZWJvb2tcIlxuKiBcdFx0c2l6ZT1cInNtXCJcbiogXHRcdHN0eWxlPVwibWFyZ2luLXJpZ2h0OiA3cHg7XCI+XG4qIFx0PC9zdmc+XG4qIFx0SGVsbG8gVGFiIDFcbiogPC9uZy10ZW1wbGF0ZT5cbiogPGNkcy10YWJzPlxuKiBcdDxjZHMtdGFiIFtoZWFkaW5nXT1cInRhYkhlYWRpbmdcIj5cbiogXHRcdFRhYiAxIGNvbnRlbnQgPHN2ZyBjZHNJY29uPVwiYWxlcnRcIiBzaXplPVwibGdcIj48L3N2Zz5cbiogXHQ8L2Nkcy10YWI+XG4qIFx0PGNkcy10YWIgaGVhZGluZz0nVGFiMic+XG4qIFx0XHRUYWIgMiBjb250ZW50XG4qIFx0PC9jZHMtdGFiPlxuKiBcdDxjZHMtdGFiIGhlYWRpbmc9J1RhYjMnPlxuKiBcdFx0VGFiIDMgY29udGVudFxuKiBcdDwvY2RzLXRhYj5cbiogPC9jZHMtdGFicz5cbiogYGBgXG4qL1xuQENvbXBvbmVudCh7XG5cdHNlbGVjdG9yOiBcImNkcy10YWIsIGlibS10YWJcIixcblx0dGVtcGxhdGU6IGBcblx0XHQ8ZGl2XG5cdFx0XHRbYXR0ci50YWJpbmRleF09XCJ0YWJJbmRleFwiXG5cdFx0XHRyb2xlPVwidGFicGFuZWxcIlxuXHRcdFx0Km5nSWY9XCJzaG91bGRSZW5kZXIoKVwiXG5cdFx0XHRjbGFzcz1cImNkcy0tdGFiLWNvbnRlbnRcIlxuXHRcdFx0W2lkXT1cImlkXCJcblx0XHRcdFtuZ1N0eWxlXT1cInsnZGlzcGxheSc6IGFjdGl2ZSA/IG51bGwgOiAnbm9uZSd9XCJcblx0XHRcdFthdHRyLmFyaWEtbGFiZWxsZWRieV09XCJpZCArICctaGVhZGVyJ1wiXG5cdFx0XHRhcmlhLWxpdmU9XCJwb2xpdGVcIj5cblx0XHRcdDxuZy10ZW1wbGF0ZVxuXHRcdFx0XHQqbmdJZj1cImlzVGVtcGxhdGUodGFiQ29udGVudClcIlxuXHRcdFx0XHRbbmdUZW1wbGF0ZU91dGxldF09XCJ0YWJDb250ZW50XCJcblx0XHRcdFx0W25nVGVtcGxhdGVPdXRsZXRDb250ZXh0XT1cInsgJGltcGxpY2l0OiB0ZW1wbGF0ZUNvbnRleHQgfVwiPlxuXHRcdFx0PC9uZy10ZW1wbGF0ZT5cblx0XHRcdDxuZy1jb250ZW50PjwvbmctY29udGVudD5cblx0XHQ8L2Rpdj5cblx0YFxufSlcbmV4cG9ydCBjbGFzcyBUYWIgaW1wbGVtZW50cyBPbkluaXQge1xuXHRwcml2YXRlIHN0YXRpYyBjb3VudGVyID0gMDtcblx0LyoqXG5cdCAqIEJvb2xlYW4gdmFsdWUgcmVmbGVjdHMgaWYgdGhlIGBUYWJgIGlzIHVzaW5nIGEgY3VzdG9tIHRlbXBsYXRlIGZvciB0aGUgaGVhZGluZy5cblx0ICogRGVmYXVsdCB2YWx1ZSBpcyBmYWxzZS5cblx0ICovXG5cdHB1YmxpYyBoZWFkaW5nSXNUZW1wbGF0ZSA9IGZhbHNlO1xuXG5cdC8qKlxuXHQgKiBUaGUgYFRhYmAncyB0aXRsZSB0byBiZSBkaXNwbGF5ZWQgb3IgY3VzdG9tIHRlbWFwbGF0ZSBmb3IgdGhlIGBUYWJgIGhlYWRpbmcuXG5cdCAqL1xuXHRASW5wdXQoKSBoZWFkaW5nOiBzdHJpbmcgfCBUZW1wbGF0ZVJlZjxhbnk+O1xuXHQvKipcblx0ICogT3B0aW9uYWwgb3ZlcnJpZGUgZm9yIHRoZSBgdGFiSXRlbSdzYCdzIHRpdGxlIGF0dHJpYnV0ZSB3aGljaCBpcyBzZXQgaW4gYFRhYkhlYWRlcnNgLlxuXHQgKiBgdGFiSXRlbWAncyB0aXRsZSBhdHRyaWJ1dGUgaXMgYXV0b21hdGljYWxseSBzZXQgdG8gYGhlYWRpbmdgLlxuXHQgKlxuXHQgKiBZb3UgbWlnaHQgd2FudCB0byB1c2UgdGhpcyBpZiB5b3Ugc2V0IGBoZWFkaW5nYCB0byBhIGBUZW1wbGF0ZVJlZmAuXG5cdCAqL1xuXHRASW5wdXQoKSB0aXRsZTogc3RyaW5nO1xuXHQvKipcblx0ICogQWxsb3dzIHRoZSB1c2VyIHRvIHBhc3MgZGF0YSB0byB0aGUgY3VzdG9tIHRlbXBsYXRlIGZvciB0aGUgYFRhYmAgaGVhZGluZy5cblx0ICovXG5cdEBJbnB1dCgpIGNvbnRleHQ6IGFueTtcblx0LyoqXG5cdCAqIEluZGljYXRlcyB3aGV0aGVyIHRoZSBgVGFiYCBpcyBhY3RpdmUvc2VsZWN0ZWQuXG5cdCAqIERldGVybWluZXMgd2hldGhlciBpdCdzIGBUYWJQYW5lbGAgaXMgcmVuZGVyZWQuXG5cdCAqL1xuXHRASW5wdXQoKSBhY3RpdmUgPSBmYWxzZTtcblx0LyoqXG5cdCAqIEluZGljYXRlcyB3aGV0aGVyIG9yIG5vdCB0aGUgYFRhYmAgaXRlbSBpcyBkaXNhYmxlZC5cblx0ICovXG5cdEBJbnB1dCgpIGRpc2FibGVkID0gZmFsc2U7XG5cblx0QElucHV0KCkgdGFiSW5kZXggPSAwO1xuXHQvKipcblx0ICogU2V0cyB0aGUgaWQgb2YgdGhlIGBUYWJgLiBXaWxsIGJlIHVuaXF1ZWx5IGdlbmVyYXRlZCBpZiBub3QgcHJvdmlkZWQuXG5cdCAqL1xuXHRASW5wdXQoKSBpZCA9IGBuLXRhYi0ke1RhYi5jb3VudGVyKyt9YDtcblx0LyoqXG5cdCAqIFNldCB0byB0cnVlIHRvIGhhdmUgVGFiIGl0ZW1zIGNhY2hlZCBhbmQgbm90IHJlbG9hZGVkIG9uIHRhYiBzd2l0Y2hpbmcuXG5cdCAqL1xuXHRASW5wdXQoKSBzZXQgY2FjaGVBY3RpdmUoc2hvdWxkQ2FjaGU6IGJvb2xlYW4pIHtcblx0XHR0aGlzLl9jYWNoZUFjdGl2ZSA9IHNob3VsZENhY2hlO1xuXHR9XG5cdC8qKlxuXHQgKiBBbGxvd3MgbGlmZSBjeWNsZSBob29rcyB0byBiZSBjYWxsZWQgb24gdGhlIHJlbmRlcmVkIGNvbnRlbnRcblx0ICovXG5cdEBJbnB1dCgpIHRhYkNvbnRlbnQ6IFRlbXBsYXRlUmVmPGFueT47XG5cdC8qKlxuXHQgKiBPcHRpb25hbCBkYXRhIGZvciB0ZW1wbGF0ZXMgcGFzc2VkIGFzIGltcGxpY2l0IGNvbnRleHRcblx0ICovXG5cdEBJbnB1dCgpIHRlbXBsYXRlQ29udGV4dDogYW55O1xuXHQvKipcblx0ICogVmFsdWUgJ3NlbGVjdGVkJyB0byBiZSBlbWl0dGVkIGFmdGVyIGEgbmV3IGBUYWJgIGlzIHNlbGVjdGVkLlxuXHQgKi9cblx0QE91dHB1dCgpIHNlbGVjdGVkOiBFdmVudEVtaXR0ZXI8dm9pZD4gPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG5cblx0Z2V0IGNhY2hlQWN0aXZlKCkge1xuXHRcdHJldHVybiB0aGlzLl9jYWNoZUFjdGl2ZTtcblx0fVxuXG5cdHByb3RlY3RlZCBfY2FjaGVBY3RpdmUgPSBmYWxzZTtcblxuXHQvKipcblx0ICogQ2hlY2tzIGZvciBjdXN0b20gaGVhZGluZyB0ZW1wbGF0ZSBvbiBpbml0aWFsaXphdGlvbiBhbmQgdXBkYXRlcyB0aGUgdmFsdWVcblx0ICogb2YgdGhlIGJvb2xlYW4gJ2hlYWRpbmdJc1RlbXBsYXRlJy5cblx0ICovXG5cdG5nT25Jbml0KCkge1xuXHRcdGlmICh0aGlzLmhlYWRpbmcgaW5zdGFuY2VvZiBUZW1wbGF0ZVJlZikge1xuXHRcdFx0dGhpcy5oZWFkaW5nSXNUZW1wbGF0ZSA9IHRydWU7XG5cdFx0fVxuXHR9XG5cblx0LyoqXG5cdCAqIEVtaXQgdGhlIHN0YXR1cyBvZiB0aGUgYFRhYmAsIHNwZWNpZmljYWxseSAnc2VsZWN0JyBhbmQgJ3NlbGVjdGVkJyBwcm9wZXJ0aWVzLlxuXHQgKi9cblx0ZG9TZWxlY3QoKSB7XG5cdFx0dGhpcy5zZWxlY3RlZC5lbWl0KCk7XG5cdH1cblxuXHQvKipcblx0KiBSZXR1cm5zIHZhbHVlIGluZGljYXRpbmcgd2hldGhlciB0aGlzIGBUYWJgIHNob3VsZCBiZSByZW5kZXJlZCBpbiBhIGBUYWJQYW5lbGAuXG5cdCovXG5cdHNob3VsZFJlbmRlcigpIHtcblx0XHRyZXR1cm4gdGhpcy5hY3RpdmUgfHwgdGhpcy5jYWNoZUFjdGl2ZTtcblx0fVxuXG5cdHB1YmxpYyBpc1RlbXBsYXRlKHZhbHVlKSB7XG5cdFx0cmV0dXJuIHZhbHVlIGluc3RhbmNlb2YgVGVtcGxhdGVSZWY7XG5cdH1cbn1cbiJdfQ==