carbon-components-angular
Version:
Next generation components
163 lines • 12.7 kB
JavaScript
import { Component, Input, Output, EventEmitter, TemplateRef, HostBinding } 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();
/**
* Used to set the id property on the element.
*/
this.attrClass = this.id;
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;
}
}
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" }, outputs: { selected: "selected" }, host: { properties: { "attr.id": "this.attrClass" } }, ngImport: i0, template: `
<div
[attr.tabindex]="tabIndex"
role="tabpanel"
*ngIf="shouldRender()"
class="cds--tab-content"
[ngStyle]="{'display': active ? null : 'none'}"
[attr.aria-labelledby]="id + '-header'"
aria-live="polite">
<ng-content></ng-content>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"
[ngStyle]="{'display': active ? null : 'none'}"
[attr.aria-labelledby]="id + '-header'"
aria-live="polite">
<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
}], selected: [{
type: Output
}], attrClass: [{
type: HostBinding,
args: ["attr.id"]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy90YWJzL3RhYi5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNOLFNBQVMsRUFFVCxLQUFLLEVBQ0wsTUFBTSxFQUNOLFlBQVksRUFDWixXQUFXLEVBQ1gsV0FBVyxFQUNYLE1BQU0sZUFBZSxDQUFDOzs7QUFFdkI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7RUEyQ0U7QUFnQkYsTUFBTSxPQUFPLEdBQUc7SUFmaEI7UUFpQkM7OztXQUdHO1FBQ0ksc0JBQWlCLEdBQUcsS0FBSyxDQUFDO1FBaUJqQzs7O1dBR0c7UUFDTSxXQUFNLEdBQUcsS0FBSyxDQUFDO1FBQ3hCOztXQUVHO1FBQ00sYUFBUSxHQUFHLEtBQUssQ0FBQztRQUVqQixhQUFRLEdBQUcsQ0FBQyxDQUFDO1FBQ3RCOztXQUVHO1FBQ00sT0FBRSxHQUFHLFNBQVMsR0FBRyxDQUFDLE9BQU8sRUFBRSxFQUFFLENBQUM7UUFPdkM7O1dBRUc7UUFDTyxhQUFRLEdBQXVCLElBQUksWUFBWSxFQUFRLENBQUM7UUFFbEU7O1dBRUc7UUFDcUIsY0FBUyxHQUFHLElBQUksQ0FBQyxFQUFFLENBQUM7UUFNbEMsaUJBQVksR0FBRyxLQUFLLENBQUM7S0F5Qi9CO0lBN0NBOztPQUVHO0lBQ0gsSUFBYSxXQUFXLENBQUMsV0FBb0I7UUFDNUMsSUFBSSxDQUFDLFlBQVksR0FBRyxXQUFXLENBQUM7SUFDakMsQ0FBQztJQVdELElBQUksV0FBVztRQUNkLE9BQU8sSUFBSSxDQUFDLFlBQVksQ0FBQztJQUMxQixDQUFDO0lBSUQ7OztPQUdHO0lBQ0gsUUFBUTtRQUNQLElBQUksSUFBSSxDQUFDLE9BQU8sWUFBWSxXQUFXLEVBQUU7WUFDeEMsSUFBSSxDQUFDLGlCQUFpQixHQUFHLElBQUksQ0FBQztTQUM5QjtJQUNGLENBQUM7SUFFRDs7T0FFRztJQUNILFFBQVE7UUFDUCxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3RCLENBQUM7SUFFRDs7TUFFRTtJQUNGLFlBQVk7UUFDWCxPQUFPLElBQUksQ0FBQyxNQUFNLElBQUksSUFBSSxDQUFDLFdBQVcsQ0FBQztJQUN4QyxDQUFDOztBQWpGYyxXQUFPLEdBQUcsQ0FBRSxDQUFBO2dHQURmLEdBQUc7b0ZBQUgsR0FBRywwVEFiTDs7Ozs7Ozs7Ozs7RUFXVDsyRkFFVyxHQUFHO2tCQWZmLFNBQVM7bUJBQUM7b0JBQ1YsUUFBUSxFQUFFLGtCQUFrQjtvQkFDNUIsUUFBUSxFQUFFOzs7Ozs7Ozs7OztFQVdUO2lCQUNEOzhCQVlTLE9BQU87c0JBQWYsS0FBSztnQkFPRyxLQUFLO3NCQUFiLEtBQUs7Z0JBSUcsT0FBTztzQkFBZixLQUFLO2dCQUtHLE1BQU07c0JBQWQsS0FBSztnQkFJRyxRQUFRO3NCQUFoQixLQUFLO2dCQUVHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBSUcsRUFBRTtzQkFBVixLQUFLO2dCQUlPLFdBQVc7c0JBQXZCLEtBQUs7Z0JBTUksUUFBUTtzQkFBakIsTUFBTTtnQkFLaUIsU0FBUztzQkFBaEMsV0FBVzt1QkFBQyxTQUFTIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcblx0Q29tcG9uZW50LFxuXHRPbkluaXQsXG5cdElucHV0LFxuXHRPdXRwdXQsXG5cdEV2ZW50RW1pdHRlcixcblx0VGVtcGxhdGVSZWYsXG5cdEhvc3RCaW5kaW5nXG59IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5cbi8qKlxuKiBUaGUgYFRhYmAgY29tcG9uZW50IGlzIGEgY2hpbGQgb2YgdGhlIGBUYWJzYCBjb21wb25lbnQuXG4qIEl0IHJlcHJlc2VudHMgb25lIGBUYWJgIGl0ZW0gYW5kIGl0cyBjb250ZW50IHdpdGhpbiBhIHBhbmVsIG9mIG90aGVyIGBUYWJgIGl0ZW1zLlxuKlxuKlxuKiBgVGFiYCB0YWtlcyBhIHN0cmluZyBvciBgVGVtcGxhdGVSZWZgIGZvciB0aGUgaGVhZGVyLCBhbmQgYW55IGNvbnRlbnQgZm9yIHRoZSBib2R5IG9mIHRoZSB0YWIuXG4qIERpc2FibGVkIHN0YXRlcyBzaG91bGQgYmUgaGFuZGxlZCBieSB0aGUgYXBwbGljYXRpb24gKGllLiBzd2l0Y2ggdG8gdGhlIHRhYiwgYnV0IGRpc3BsYXkgc29tZVxuKiBpbmRpY2F0aW9uIGFzIHRvIF93aHlfIHRoZSB0YWIgaXMgZGlzYWJsZWQpLlxuKlxuKiBXaGVuIHRoZSB0YWIgaXMgc2VsZWN0ZWQgdGhlIGBzZWxlY3RgIG91dHB1dCB3aWxsIGJlIHRyaWdnZXJlZC5cbiogVGhlIGBzZWxlY3RgIG91dHB1dCB3aWxsIGFsc28gYmUgdHJpZ2dlcmVkIGZvciB0aGUgYWN0aXZlIHRhYiB3aGVuIHRoZSB0YWJzIGFyZSBsb2FkZWQgb3IgdXBkYXRlZC5cbipcbipcbiogVGFiIHdpdGggc3RyaW5nIGhlYWRlcjpcbipcbiogYGBgaHRtbFxuKiA8Y2RzLXRhYiBoZWFkaW5nPSd0YWIxJz5cbiogXHR0YWIgMSBjb250ZW50XG4qIDwvY2RzLXRhYj5cbiogYGBgXG4qXG4qIFRhYiB3aXRoIGN1c3RvbSBoZWFkZXI6XG4qXG4qIGBgYGh0bWxcbiogPG5nLXRlbXBsYXRlICN0YWJIZWFkaW5nPlxuKiBcdDxzdmcgY2RzSWNvbj1cImZhY2Vib29rXCJcbiogXHRcdHNpemU9XCJzbVwiXG4qIFx0XHRzdHlsZT1cIm1hcmdpbi1yaWdodDogN3B4O1wiPlxuKiBcdDwvc3ZnPlxuKiBcdEhlbGxvIFRhYiAxXG4qIDwvbmctdGVtcGxhdGU+XG4qIDxjZHMtdGFicz5cbiogXHQ8Y2RzLXRhYiBbaGVhZGluZ109XCJ0YWJIZWFkaW5nXCI+XG4qIFx0XHRUYWIgMSBjb250ZW50IDxzdmcgY2RzSWNvbj1cImFsZXJ0XCIgc2l6ZT1cImxnXCI+PC9zdmc+XG4qIFx0PC9jZHMtdGFiPlxuKiBcdDxjZHMtdGFiIGhlYWRpbmc9J1RhYjInPlxuKiBcdFx0VGFiIDIgY29udGVudFxuKiBcdDwvY2RzLXRhYj5cbiogXHQ8Y2RzLXRhYiBoZWFkaW5nPSdUYWIzJz5cbiogXHRcdFRhYiAzIGNvbnRlbnRcbiogXHQ8L2Nkcy10YWI+XG4qIDwvY2RzLXRhYnM+XG4qIGBgYFxuKi9cbkBDb21wb25lbnQoe1xuXHRzZWxlY3RvcjogXCJjZHMtdGFiLCBpYm0tdGFiXCIsXG5cdHRlbXBsYXRlOiBgXG5cdFx0PGRpdlxuXHRcdFx0W2F0dHIudGFiaW5kZXhdPVwidGFiSW5kZXhcIlxuXHRcdFx0cm9sZT1cInRhYnBhbmVsXCJcblx0XHRcdCpuZ0lmPVwic2hvdWxkUmVuZGVyKClcIlxuXHRcdFx0Y2xhc3M9XCJjZHMtLXRhYi1jb250ZW50XCJcblx0XHRcdFtuZ1N0eWxlXT1cInsnZGlzcGxheSc6IGFjdGl2ZSA/IG51bGwgOiAnbm9uZSd9XCJcblx0XHRcdFthdHRyLmFyaWEtbGFiZWxsZWRieV09XCJpZCArICctaGVhZGVyJ1wiXG5cdFx0XHRhcmlhLWxpdmU9XCJwb2xpdGVcIj5cblx0XHRcdDxuZy1jb250ZW50PjwvbmctY29udGVudD5cblx0XHQ8L2Rpdj5cblx0YFxufSlcbmV4cG9ydCBjbGFzcyBUYWIgaW1wbGVtZW50cyBPbkluaXQge1xuXHRwcml2YXRlIHN0YXRpYyBjb3VudGVyID0gMDtcblx0LyoqXG5cdCAqIEJvb2xlYW4gdmFsdWUgcmVmbGVjdHMgaWYgdGhlIGBUYWJgIGlzIHVzaW5nIGEgY3VzdG9tIHRlbXBsYXRlIGZvciB0aGUgaGVhZGluZy5cblx0ICogRGVmYXVsdCB2YWx1ZSBpcyBmYWxzZS5cblx0ICovXG5cdHB1YmxpYyBoZWFkaW5nSXNUZW1wbGF0ZSA9IGZhbHNlO1xuXG5cdC8qKlxuXHQgKiBUaGUgYFRhYmAncyB0aXRsZSB0byBiZSBkaXNwbGF5ZWQgb3IgY3VzdG9tIHRlbWFwbGF0ZSBmb3IgdGhlIGBUYWJgIGhlYWRpbmcuXG5cdCAqL1xuXHRASW5wdXQoKSBoZWFkaW5nOiBzdHJpbmcgfCBUZW1wbGF0ZVJlZjxhbnk+O1xuXHQvKipcblx0ICogT3B0aW9uYWwgb3ZlcnJpZGUgZm9yIHRoZSBgdGFiSXRlbSdzYCdzIHRpdGxlIGF0dHJpYnV0ZSB3aGljaCBpcyBzZXQgaW4gYFRhYkhlYWRlcnNgLlxuXHQgKiBgdGFiSXRlbWAncyB0aXRsZSBhdHRyaWJ1dGUgaXMgYXV0b21hdGljYWxseSBzZXQgdG8gYGhlYWRpbmdgLlxuXHQgKlxuXHQgKiBZb3UgbWlnaHQgd2FudCB0byB1c2UgdGhpcyBpZiB5b3Ugc2V0IGBoZWFkaW5nYCB0byBhIGBUZW1wbGF0ZVJlZmAuXG5cdCAqL1xuXHRASW5wdXQoKSB0aXRsZTogc3RyaW5nO1xuXHQvKipcblx0ICogQWxsb3dzIHRoZSB1c2VyIHRvIHBhc3MgZGF0YSB0byB0aGUgY3VzdG9tIHRlbXBsYXRlIGZvciB0aGUgYFRhYmAgaGVhZGluZy5cblx0ICovXG5cdEBJbnB1dCgpIGNvbnRleHQ6IGFueTtcblx0LyoqXG5cdCAqIEluZGljYXRlcyB3aGV0aGVyIHRoZSBgVGFiYCBpcyBhY3RpdmUvc2VsZWN0ZWQuXG5cdCAqIERldGVybWluZXMgd2hldGhlciBpdCdzIGBUYWJQYW5lbGAgaXMgcmVuZGVyZWQuXG5cdCAqL1xuXHRASW5wdXQoKSBhY3RpdmUgPSBmYWxzZTtcblx0LyoqXG5cdCAqIEluZGljYXRlcyB3aGV0aGVyIG9yIG5vdCB0aGUgYFRhYmAgaXRlbSBpcyBkaXNhYmxlZC5cblx0ICovXG5cdEBJbnB1dCgpIGRpc2FibGVkID0gZmFsc2U7XG5cblx0QElucHV0KCkgdGFiSW5kZXggPSAwO1xuXHQvKipcblx0ICogU2V0cyB0aGUgaWQgb2YgdGhlIGBUYWJgLiBXaWxsIGJlIHVuaXF1ZWx5IGdlbmVyYXRlZCBpZiBub3QgcHJvdmlkZWQuXG5cdCAqL1xuXHRASW5wdXQoKSBpZCA9IGBuLXRhYi0ke1RhYi5jb3VudGVyKyt9YDtcblx0LyoqXG5cdCAqIFNldCB0byB0cnVlIHRvIGhhdmUgVGFiIGl0ZW1zIGNhY2hlZCBhbmQgbm90IHJlbG9hZGVkIG9uIHRhYiBzd2l0Y2hpbmcuXG5cdCAqL1xuXHRASW5wdXQoKSBzZXQgY2FjaGVBY3RpdmUoc2hvdWxkQ2FjaGU6IGJvb2xlYW4pIHtcblx0XHR0aGlzLl9jYWNoZUFjdGl2ZSA9IHNob3VsZENhY2hlO1xuXHR9XG5cdC8qKlxuXHQgKiBWYWx1ZSAnc2VsZWN0ZWQnIHRvIGJlIGVtaXR0ZWQgYWZ0ZXIgYSBuZXcgYFRhYmAgaXMgc2VsZWN0ZWQuXG5cdCAqL1xuXHRAT3V0cHV0KCkgc2VsZWN0ZWQ6IEV2ZW50RW1pdHRlcjx2b2lkPiA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcblxuXHQvKipcblx0ICogVXNlZCB0byBzZXQgdGhlIGlkIHByb3BlcnR5IG9uIHRoZSBlbGVtZW50LlxuXHQgKi9cblx0QEhvc3RCaW5kaW5nKFwiYXR0ci5pZFwiKSBhdHRyQ2xhc3MgPSB0aGlzLmlkO1xuXG5cdGdldCBjYWNoZUFjdGl2ZSgpIHtcblx0XHRyZXR1cm4gdGhpcy5fY2FjaGVBY3RpdmU7XG5cdH1cblxuXHRwcm90ZWN0ZWQgX2NhY2hlQWN0aXZlID0gZmFsc2U7XG5cblx0LyoqXG5cdCAqIENoZWNrcyBmb3IgY3VzdG9tIGhlYWRpbmcgdGVtcGxhdGUgb24gaW5pdGlhbGl6YXRpb24gYW5kIHVwZGF0ZXMgdGhlIHZhbHVlXG5cdCAqIG9mIHRoZSBib29sZWFuICdoZWFkaW5nSXNUZW1wbGF0ZScuXG5cdCAqL1xuXHRuZ09uSW5pdCgpIHtcblx0XHRpZiAodGhpcy5oZWFkaW5nIGluc3RhbmNlb2YgVGVtcGxhdGVSZWYpIHtcblx0XHRcdHRoaXMuaGVhZGluZ0lzVGVtcGxhdGUgPSB0cnVlO1xuXHRcdH1cblx0fVxuXG5cdC8qKlxuXHQgKiBFbWl0IHRoZSBzdGF0dXMgb2YgdGhlIGBUYWJgLCBzcGVjaWZpY2FsbHkgJ3NlbGVjdCcgYW5kICdzZWxlY3RlZCcgcHJvcGVydGllcy5cblx0ICovXG5cdGRvU2VsZWN0KCkge1xuXHRcdHRoaXMuc2VsZWN0ZWQuZW1pdCgpO1xuXHR9XG5cblx0LyoqXG5cdCogUmV0dXJucyB2YWx1ZSBpbmRpY2F0aW5nIHdoZXRoZXIgdGhpcyBgVGFiYCBzaG91bGQgYmUgcmVuZGVyZWQgaW4gYSBgVGFiUGFuZWxgLlxuXHQqL1xuXHRzaG91bGRSZW5kZXIoKSB7XG5cdFx0cmV0dXJuIHRoaXMuYWN0aXZlIHx8IHRoaXMuY2FjaGVBY3RpdmU7XG5cdH1cbn1cbiJdfQ==