carbon-components-angular
Version:
Next generation components
137 lines • 14 kB
JavaScript
import { Component, Input, ContentChildren, Output, EventEmitter, HostListener } from "@angular/core";
import { ContentSwitcherOption } from "./content-switcher-option.directive";
import { isFocusInLastItem, isFocusInFirstItem } from "carbon-components-angular/common";
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
/**
* The content switcher can be used for toggling between distinct options.
* Similar to tabs, but without an associated content panel.
*
* Get started with importing the module:
*
* ```typescript
* import { ContentSwitcherModule } from 'carbon-components-angular';
* ```
*
* ```html
* <cds-content-switcher (selected)="selected($event)">
* <button cdsContentOption>First section</button>
* <button cdsContentOption>Second section</button>
* <button cdsContentOption>Third section</button>
* </cds-content-switcher>
* ```
*
* [See demo](../../?path=/story/components-content-switcher--basic)
*/
export class ContentSwitcher {
constructor(elementRef) {
this.elementRef = elementRef;
this.ariaLabel = "content switcher";
/**
* Set content switcher size
*/
this.size = "md";
/**
* Emits the activated `ContentSwitcherOption`
*/
this.selected = new EventEmitter();
}
ngAfterViewInit() {
const firstActive = this.options.find(option => option.active);
// delay setting active until the DOM has settled
if (!firstActive) {
setTimeout(() => this.options.first.active = true);
}
// subscribe to each item, emit when one is selected, and reset the active states
this.options.forEach(option => {
option.selected.subscribe((_) => {
const active = option;
this.options.forEach(option => {
if (option !== active) {
option.active = false;
}
});
this.selected.emit(active);
});
});
}
hostkeys(event) {
const buttonList = Array.from(this.elementRef.nativeElement.querySelectorAll("[cdsContentOption], [ibmContentOption]"));
switch (event.key) {
case "ArrowRight":
event.preventDefault();
if (!isFocusInLastItem(event, buttonList)) {
const index = buttonList.findIndex(item => item === event.target);
buttonList[index + 1].focus();
}
else {
buttonList[0].focus();
}
break;
case "ArrowLeft":
event.preventDefault();
if (!isFocusInFirstItem(event, buttonList)) {
const index = buttonList.findIndex(item => item === event.target);
buttonList[index - 1].focus();
}
else {
buttonList[buttonList.length - 1].focus();
}
break;
case "Home":
event.preventDefault();
buttonList[0].focus();
break;
case "End":
event.preventDefault();
buttonList[buttonList.length - 1].focus();
break;
}
}
}
ContentSwitcher.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ContentSwitcher, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
ContentSwitcher.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ContentSwitcher, selector: "cds-content-switcher, ibm-content-switcher", inputs: { ariaLabel: "ariaLabel", size: "size" }, outputs: { selected: "selected" }, host: { listeners: { "keydown": "hostkeys($event)" } }, queries: [{ propertyName: "options", predicate: ContentSwitcherOption }], ngImport: i0, template: `
<div
[attr.aria-label]="ariaLabel"
class="cds--content-switcher"
[ngClass]="{
'cds--content-switcher--sm': size === 'sm',
'cds--content-switcher--md': size === 'md',
'cds--content-switcher--lg': size === 'lg'
}"
role="tablist">
<ng-content></ng-content>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ContentSwitcher, decorators: [{
type: Component,
args: [{
selector: "cds-content-switcher, ibm-content-switcher",
template: `
<div
[attr.aria-label]="ariaLabel"
class="cds--content-switcher"
[ngClass]="{
'cds--content-switcher--sm': size === 'sm',
'cds--content-switcher--md': size === 'md',
'cds--content-switcher--lg': size === 'lg'
}"
role="tablist">
<ng-content></ng-content>
</div>
`
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { ariaLabel: [{
type: Input
}], size: [{
type: Input
}], selected: [{
type: Output
}], options: [{
type: ContentChildren,
args: [ContentSwitcherOption]
}], hostkeys: [{
type: HostListener,
args: ["keydown", ["$event"]]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29udGVudC1zd2l0Y2hlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29udGVudC1zd2l0Y2hlci9jb250ZW50LXN3aXRjaGVyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ04sU0FBUyxFQUNULEtBQUssRUFDTCxlQUFlLEVBRWYsTUFBTSxFQUNOLFlBQVksRUFFWixZQUFZLEVBRVosTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0scUNBQXFDLENBQUM7QUFDNUUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLGtCQUFrQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7OztBQUV6Rjs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQW1CRztBQWlCSCxNQUFNLE9BQU8sZUFBZTtJQWUzQixZQUFzQixVQUFzQjtRQUF0QixlQUFVLEdBQVYsVUFBVSxDQUFZO1FBZG5DLGNBQVMsR0FBRyxrQkFBa0IsQ0FBQztRQUV4Qzs7V0FFRztRQUNNLFNBQUksR0FBdUIsSUFBSSxDQUFDO1FBRXpDOztXQUVHO1FBQ08sYUFBUSxHQUFHLElBQUksWUFBWSxFQUF5QixDQUFDO0lBSWhCLENBQUM7SUFFaEQsZUFBZTtRQUNkLE1BQU0sV0FBVyxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxFQUFFLENBQUMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQy9ELGlEQUFpRDtRQUNqRCxJQUFJLENBQUMsV0FBVyxFQUFFO1lBQ2pCLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDLENBQUM7U0FDbkQ7UUFDRCxpRkFBaUY7UUFDakYsSUFBSSxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsTUFBTSxDQUFDLEVBQUU7WUFDN0IsTUFBTSxDQUFDLFFBQVEsQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFVLEVBQUUsRUFBRTtnQkFDeEMsTUFBTSxNQUFNLEdBQUcsTUFBTSxDQUFDO2dCQUN0QixJQUFJLENBQUMsT0FBTyxDQUFDLE9BQU8sQ0FBQyxNQUFNLENBQUMsRUFBRTtvQkFDN0IsSUFBSSxNQUFNLEtBQUssTUFBTSxFQUFFO3dCQUN0QixNQUFNLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQztxQkFDdEI7Z0JBQ0YsQ0FBQyxDQUFDLENBQUM7Z0JBQ0gsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7WUFDNUIsQ0FBQyxDQUFDLENBQUM7UUFDSixDQUFDLENBQUMsQ0FBQztJQUNKLENBQUM7SUFHRCxRQUFRLENBQUMsS0FBb0I7UUFDNUIsTUFBTSxVQUFVLEdBQUcsS0FBSyxDQUFDLElBQUksQ0FBTSxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxnQkFBZ0IsQ0FBQyx3Q0FBd0MsQ0FBQyxDQUFDLENBQUM7UUFFN0gsUUFBUSxLQUFLLENBQUMsR0FBRyxFQUFFO1lBQ2xCLEtBQUssWUFBWTtnQkFDaEIsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO2dCQUN2QixJQUFJLENBQUMsaUJBQWlCLENBQUMsS0FBSyxFQUFFLFVBQVUsQ0FBQyxFQUFHO29CQUMzQyxNQUFNLEtBQUssR0FBRyxVQUFVLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsSUFBSSxLQUFLLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQztvQkFDbEUsVUFBVSxDQUFDLEtBQUssR0FBRyxDQUFDLENBQUMsQ0FBQyxLQUFLLEVBQUUsQ0FBQztpQkFDOUI7cUJBQU07b0JBQ04sVUFBVSxDQUFDLENBQUMsQ0FBQyxDQUFDLEtBQUssRUFBRSxDQUFDO2lCQUN0QjtnQkFDRCxNQUFNO1lBRVAsS0FBSyxXQUFXO2dCQUNmLEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztnQkFDdkIsSUFBSSxDQUFDLGtCQUFrQixDQUFDLEtBQUssRUFBRSxVQUFVLENBQUMsRUFBRztvQkFDNUMsTUFBTSxLQUFLLEdBQUcsVUFBVSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLElBQUksS0FBSyxLQUFLLENBQUMsTUFBTSxDQUFDLENBQUM7b0JBQ2xFLFVBQVUsQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDLENBQUMsS0FBSyxFQUFFLENBQUM7aUJBQzlCO3FCQUFNO29CQUNOLFVBQVUsQ0FBQyxVQUFVLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDLEtBQUssRUFBRSxDQUFDO2lCQUMxQztnQkFDRCxNQUFNO1lBRVAsS0FBSyxNQUFNO2dCQUNWLEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztnQkFDdkIsVUFBVSxDQUFDLENBQUMsQ0FBQyxDQUFDLEtBQUssRUFBRSxDQUFDO2dCQUN0QixNQUFNO1lBRVAsS0FBSyxLQUFLO2dCQUNULEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztnQkFDdkIsVUFBVSxDQUFDLFVBQVUsQ0FBQyxNQUFNLEdBQUcsQ0FBQyxDQUFDLENBQUMsS0FBSyxFQUFFLENBQUM7Z0JBQzFDLE1BQU07U0FDUDtJQUNGLENBQUM7OzRHQXhFVyxlQUFlO2dHQUFmLGVBQWUsdVBBYVYscUJBQXFCLDZCQTNCNUI7Ozs7Ozs7Ozs7OztFQVlUOzJGQUVXLGVBQWU7a0JBaEIzQixTQUFTO21CQUFDO29CQUNWLFFBQVEsRUFBRSw0Q0FBNEM7b0JBQ3RELFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7O0VBWVQ7aUJBQ0Q7aUdBRVMsU0FBUztzQkFBakIsS0FBSztnQkFLRyxJQUFJO3NCQUFaLEtBQUs7Z0JBS0ksUUFBUTtzQkFBakIsTUFBTTtnQkFFaUMsT0FBTztzQkFBOUMsZUFBZTt1QkFBQyxxQkFBcUI7Z0JBeUJ0QyxRQUFRO3NCQURQLFlBQVk7dUJBQUMsU0FBUyxFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcblx0Q29tcG9uZW50LFxuXHRJbnB1dCxcblx0Q29udGVudENoaWxkcmVuLFxuXHRRdWVyeUxpc3QsXG5cdE91dHB1dCxcblx0RXZlbnRFbWl0dGVyLFxuXHRBZnRlclZpZXdJbml0LFxuXHRIb3N0TGlzdGVuZXIsXG5cdEVsZW1lbnRSZWZcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IENvbnRlbnRTd2l0Y2hlck9wdGlvbiB9IGZyb20gXCIuL2NvbnRlbnQtc3dpdGNoZXItb3B0aW9uLmRpcmVjdGl2ZVwiO1xuaW1wb3J0IHsgaXNGb2N1c0luTGFzdEl0ZW0sIGlzRm9jdXNJbkZpcnN0SXRlbSB9IGZyb20gXCJjYXJib24tY29tcG9uZW50cy1hbmd1bGFyL2NvbW1vblwiO1xuXG4vKipcbiAqIFRoZSBjb250ZW50IHN3aXRjaGVyIGNhbiBiZSB1c2VkIGZvciB0b2dnbGluZyBiZXR3ZWVuIGRpc3RpbmN0IG9wdGlvbnMuXG4gKiBTaW1pbGFyIHRvIHRhYnMsIGJ1dCB3aXRob3V0IGFuIGFzc29jaWF0ZWQgY29udGVudCBwYW5lbC5cbiAqXG4gKiBHZXQgc3RhcnRlZCB3aXRoIGltcG9ydGluZyB0aGUgbW9kdWxlOlxuICpcbiAqIGBgYHR5cGVzY3JpcHRcbiAqIGltcG9ydCB7IENvbnRlbnRTd2l0Y2hlck1vZHVsZSB9IGZyb20gJ2NhcmJvbi1jb21wb25lbnRzLWFuZ3VsYXInO1xuICogYGBgXG4gKlxuICogYGBgaHRtbFxuICogPGNkcy1jb250ZW50LXN3aXRjaGVyIChzZWxlY3RlZCk9XCJzZWxlY3RlZCgkZXZlbnQpXCI+XG4gKlx0XHQ8YnV0dG9uIGNkc0NvbnRlbnRPcHRpb24+Rmlyc3Qgc2VjdGlvbjwvYnV0dG9uPlxuICpcdFx0PGJ1dHRvbiBjZHNDb250ZW50T3B0aW9uPlNlY29uZCBzZWN0aW9uPC9idXR0b24+XG4gKlx0XHQ8YnV0dG9uIGNkc0NvbnRlbnRPcHRpb24+VGhpcmQgc2VjdGlvbjwvYnV0dG9uPlxuICogPC9jZHMtY29udGVudC1zd2l0Y2hlcj5cbiAqIGBgYFxuICpcbiAqIFtTZWUgZGVtb10oLi4vLi4vP3BhdGg9L3N0b3J5L2NvbXBvbmVudHMtY29udGVudC1zd2l0Y2hlci0tYmFzaWMpXG4gKi9cbkBDb21wb25lbnQoe1xuXHRzZWxlY3RvcjogXCJjZHMtY29udGVudC1zd2l0Y2hlciwgaWJtLWNvbnRlbnQtc3dpdGNoZXJcIixcblx0dGVtcGxhdGU6IGBcblx0XHQ8ZGl2XG5cdFx0XHRbYXR0ci5hcmlhLWxhYmVsXT1cImFyaWFMYWJlbFwiXG5cdFx0XHRjbGFzcz1cImNkcy0tY29udGVudC1zd2l0Y2hlclwiXG5cdFx0XHRbbmdDbGFzc109XCJ7XG5cdFx0XHRcdCdjZHMtLWNvbnRlbnQtc3dpdGNoZXItLXNtJzogc2l6ZSA9PT0gJ3NtJyxcblx0XHRcdFx0J2Nkcy0tY29udGVudC1zd2l0Y2hlci0tbWQnOiBzaXplID09PSAnbWQnLFxuXHRcdFx0XHQnY2RzLS1jb250ZW50LXN3aXRjaGVyLS1sZyc6IHNpemUgPT09ICdsZydcblx0XHRcdH1cIlxuXHRcdFx0cm9sZT1cInRhYmxpc3RcIj5cblx0XHRcdDxuZy1jb250ZW50PjwvbmctY29udGVudD5cblx0XHQ8L2Rpdj5cblx0YFxufSlcbmV4cG9ydCBjbGFzcyBDb250ZW50U3dpdGNoZXIgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0IHtcblx0QElucHV0KCkgYXJpYUxhYmVsID0gXCJjb250ZW50IHN3aXRjaGVyXCI7XG5cblx0LyoqXG5cdCAqIFNldCBjb250ZW50IHN3aXRjaGVyIHNpemVcblx0ICovXG5cdEBJbnB1dCgpIHNpemU6IFwic21cIiB8IFwibWRcIiB8IFwibGdcIiA9IFwibWRcIjtcblxuXHQvKipcblx0ICogRW1pdHMgdGhlIGFjdGl2YXRlZCBgQ29udGVudFN3aXRjaGVyT3B0aW9uYFxuXHQgKi9cblx0QE91dHB1dCgpIHNlbGVjdGVkID0gbmV3IEV2ZW50RW1pdHRlcjxDb250ZW50U3dpdGNoZXJPcHRpb24+KCk7XG5cblx0QENvbnRlbnRDaGlsZHJlbihDb250ZW50U3dpdGNoZXJPcHRpb24pIG9wdGlvbnM6IFF1ZXJ5TGlzdDxDb250ZW50U3dpdGNoZXJPcHRpb24+O1xuXG5cdGNvbnN0cnVjdG9yKHByb3RlY3RlZCBlbGVtZW50UmVmOiBFbGVtZW50UmVmKSB7fVxuXG5cdG5nQWZ0ZXJWaWV3SW5pdCgpIHtcblx0XHRjb25zdCBmaXJzdEFjdGl2ZSA9IHRoaXMub3B0aW9ucy5maW5kKG9wdGlvbiA9PiBvcHRpb24uYWN0aXZlKTtcblx0XHQvLyBkZWxheSBzZXR0aW5nIGFjdGl2ZSB1bnRpbCB0aGUgRE9NIGhhcyBzZXR0bGVkXG5cdFx0aWYgKCFmaXJzdEFjdGl2ZSkge1xuXHRcdFx0c2V0VGltZW91dCgoKSA9PiB0aGlzLm9wdGlvbnMuZmlyc3QuYWN0aXZlID0gdHJ1ZSk7XG5cdFx0fVxuXHRcdC8vIHN1YnNjcmliZSB0byBlYWNoIGl0ZW0sIGVtaXQgd2hlbiBvbmUgaXMgc2VsZWN0ZWQsIGFuZCByZXNldCB0aGUgYWN0aXZlIHN0YXRlc1xuXHRcdHRoaXMub3B0aW9ucy5mb3JFYWNoKG9wdGlvbiA9PiB7XG5cdFx0XHRvcHRpb24uc2VsZWN0ZWQuc3Vic2NyaWJlKChfOiBib29sZWFuKSA9PiB7XG5cdFx0XHRcdGNvbnN0IGFjdGl2ZSA9IG9wdGlvbjtcblx0XHRcdFx0dGhpcy5vcHRpb25zLmZvckVhY2gob3B0aW9uID0+IHtcblx0XHRcdFx0XHRpZiAob3B0aW9uICE9PSBhY3RpdmUpIHtcblx0XHRcdFx0XHRcdG9wdGlvbi5hY3RpdmUgPSBmYWxzZTtcblx0XHRcdFx0XHR9XG5cdFx0XHRcdH0pO1xuXHRcdFx0XHR0aGlzLnNlbGVjdGVkLmVtaXQoYWN0aXZlKTtcblx0XHRcdH0pO1xuXHRcdH0pO1xuXHR9XG5cblx0QEhvc3RMaXN0ZW5lcihcImtleWRvd25cIiwgW1wiJGV2ZW50XCJdKVxuXHRob3N0a2V5cyhldmVudDogS2V5Ym9hcmRFdmVudCkge1xuXHRcdGNvbnN0IGJ1dHRvbkxpc3QgPSBBcnJheS5mcm9tPGFueT4odGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQucXVlcnlTZWxlY3RvckFsbChcIltjZHNDb250ZW50T3B0aW9uXSwgW2libUNvbnRlbnRPcHRpb25dXCIpKTtcblxuXHRcdHN3aXRjaCAoZXZlbnQua2V5KSB7XG5cdFx0XHRjYXNlIFwiQXJyb3dSaWdodFwiOlxuXHRcdFx0XHRldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuXHRcdFx0XHRpZiAoIWlzRm9jdXNJbkxhc3RJdGVtKGV2ZW50LCBidXR0b25MaXN0KSkgIHtcblx0XHRcdFx0XHRjb25zdCBpbmRleCA9IGJ1dHRvbkxpc3QuZmluZEluZGV4KGl0ZW0gPT4gaXRlbSA9PT0gZXZlbnQudGFyZ2V0KTtcblx0XHRcdFx0XHRidXR0b25MaXN0W2luZGV4ICsgMV0uZm9jdXMoKTtcblx0XHRcdFx0fSBlbHNlIHtcblx0XHRcdFx0XHRidXR0b25MaXN0WzBdLmZvY3VzKCk7XG5cdFx0XHRcdH1cblx0XHRcdFx0YnJlYWs7XG5cblx0XHRcdGNhc2UgXCJBcnJvd0xlZnRcIjpcblx0XHRcdFx0ZXZlbnQucHJldmVudERlZmF1bHQoKTtcblx0XHRcdFx0aWYgKCFpc0ZvY3VzSW5GaXJzdEl0ZW0oZXZlbnQsIGJ1dHRvbkxpc3QpKSAge1xuXHRcdFx0XHRcdGNvbnN0IGluZGV4ID0gYnV0dG9uTGlzdC5maW5kSW5kZXgoaXRlbSA9PiBpdGVtID09PSBldmVudC50YXJnZXQpO1xuXHRcdFx0XHRcdGJ1dHRvbkxpc3RbaW5kZXggLSAxXS5mb2N1cygpO1xuXHRcdFx0XHR9IGVsc2Uge1xuXHRcdFx0XHRcdGJ1dHRvbkxpc3RbYnV0dG9uTGlzdC5sZW5ndGggLSAxXS5mb2N1cygpO1xuXHRcdFx0XHR9XG5cdFx0XHRcdGJyZWFrO1xuXG5cdFx0XHRjYXNlIFwiSG9tZVwiOlxuXHRcdFx0XHRldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuXHRcdFx0XHRidXR0b25MaXN0WzBdLmZvY3VzKCk7XG5cdFx0XHRcdGJyZWFrO1xuXG5cdFx0XHRjYXNlIFwiRW5kXCI6XG5cdFx0XHRcdGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG5cdFx0XHRcdGJ1dHRvbkxpc3RbYnV0dG9uTGlzdC5sZW5ndGggLSAxXS5mb2N1cygpO1xuXHRcdFx0XHRicmVhaztcblx0XHR9XG5cdH1cbn1cbiJdfQ==