carbon-components-angular
Version:
Next generation components
112 lines • 12 kB
JavaScript
import { Directive, HostBinding, Input, HostListener, Output, EventEmitter } from "@angular/core";
import * as i0 from "@angular/core";
export class ContentSwitcherOption {
constructor(renderer, hostElement) {
this.renderer = renderer;
this.hostElement = hostElement;
/**
* Internal name for the option.
* Should be something that identifies the option to the application.
* Accessible from the `ContentSwitcher` `selected` emitter
*/
this.name = "option";
/**
* Emits when the option is selected.
*/
this.selected = new EventEmitter();
this.onClick = new EventEmitter();
this.onFocus = new EventEmitter();
this.switcherClass = "cds--content-switcher-btn";
this.selectedClass = false;
this.role = "tab";
this.ariaSelected = false;
this.tabindex = "-1";
this._active = false;
}
/**
* Used to activate the option. Only one option may be `active` at a time
*/
set active(value) {
this._active = value;
this.selectedClass = value;
this.ariaSelected = value;
this.tabindex = value ? "0" : "-1";
}
get active() {
return this._active;
}
hostClick(event) {
this.onClick.emit(event);
// skip setting and emitting if the option is already active
if (this.active) {
return;
}
this.active = true;
this.selected.emit(true);
}
doFocus(event) {
this.onFocus.emit(event);
// skip setting and emitting if the option is already active
if (this.active) {
return;
}
this.active = true;
this.selected.emit(true);
}
/*
* encapsulating the content in a span with cds--content-switcher__label class
* to mimic what is done in the react version
*/
ngOnInit() {
const hostNativeElement = this.hostElement.nativeElement;
const spanWrapper = this.renderer.createElement("span");
this.renderer.addClass(spanWrapper, "cds--content-switcher__label");
const hostChildren = [];
hostNativeElement.childNodes.forEach(node => hostChildren.push(node));
hostChildren.forEach(node => {
this.renderer.removeChild(hostNativeElement, node);
this.renderer.appendChild(spanWrapper, node);
});
this.renderer.appendChild(hostNativeElement, spanWrapper);
}
}
ContentSwitcherOption.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ContentSwitcherOption, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
ContentSwitcherOption.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: ContentSwitcherOption, selector: "[cdsContentOption], [ibmContentOption]", inputs: { active: "active", name: "name" }, outputs: { selected: "selected", onClick: "onClick", onFocus: "onFocus" }, host: { listeners: { "click": "hostClick($event)", "focus": "doFocus($event)" }, properties: { "class": "this.switcherClass", "class.cds--content-switcher--selected": "this.selectedClass", "attr.role": "this.role", "attr.aria-selected": "this.ariaSelected", "attr.tabIndex": "this.tabindex" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ContentSwitcherOption, decorators: [{
type: Directive,
args: [{
selector: "[cdsContentOption], [ibmContentOption]"
}]
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { active: [{
type: Input
}], name: [{
type: Input
}], selected: [{
type: Output
}], onClick: [{
type: Output
}], onFocus: [{
type: Output
}], switcherClass: [{
type: HostBinding,
args: ["class"]
}], selectedClass: [{
type: HostBinding,
args: ["class.cds--content-switcher--selected"]
}], role: [{
type: HostBinding,
args: ["attr.role"]
}], ariaSelected: [{
type: HostBinding,
args: ["attr.aria-selected"]
}], tabindex: [{
type: HostBinding,
args: ["attr.tabIndex"]
}], hostClick: [{
type: HostListener,
args: ["click", ["$event"]]
}], doFocus: [{
type: HostListener,
args: ["focus", ["$event"]]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29udGVudC1zd2l0Y2hlci1vcHRpb24uZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbnRlbnQtc3dpdGNoZXIvY29udGVudC1zd2l0Y2hlci1vcHRpb24uZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTixTQUFTLEVBQ1QsV0FBVyxFQUNYLEtBQUssRUFDTCxZQUFZLEVBQ1osTUFBTSxFQUNOLFlBQVksRUFJWixNQUFNLGVBQWUsQ0FBQzs7QUFLdkIsTUFBTSxPQUFPLHFCQUFxQjtJQXVDakMsWUFBb0IsUUFBbUIsRUFBVSxXQUF1QjtRQUFwRCxhQUFRLEdBQVIsUUFBUSxDQUFXO1FBQVUsZ0JBQVcsR0FBWCxXQUFXLENBQVk7UUF4QnhFOzs7O1dBSUc7UUFDTSxTQUFJLEdBQUcsUUFBUSxDQUFDO1FBRXpCOztXQUVHO1FBQ08sYUFBUSxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7UUFFdkMsWUFBTyxHQUFHLElBQUksWUFBWSxFQUFjLENBQUM7UUFFekMsWUFBTyxHQUFHLElBQUksWUFBWSxFQUFjLENBQUM7UUFFN0Isa0JBQWEsR0FBRywyQkFBMkIsQ0FBQztRQUNaLGtCQUFhLEdBQUcsS0FBSyxDQUFDO1FBQ2xELFNBQUksR0FBRyxLQUFLLENBQUM7UUFDSixpQkFBWSxHQUFHLEtBQUssQ0FBQztRQUMxQixhQUFRLEdBQUcsSUFBSSxDQUFDO1FBRXBDLFlBQU8sR0FBRyxLQUFLLENBQUM7SUFFaUQsQ0FBQztJQXRDNUU7O09BRUc7SUFDSCxJQUFhLE1BQU0sQ0FBRSxLQUFjO1FBQ2xDLElBQUksQ0FBQyxPQUFPLEdBQUcsS0FBSyxDQUFDO1FBQ3JCLElBQUksQ0FBQyxhQUFhLEdBQUcsS0FBSyxDQUFDO1FBQzNCLElBQUksQ0FBQyxZQUFZLEdBQUcsS0FBSyxDQUFDO1FBQzFCLElBQUksQ0FBQyxRQUFRLEdBQUcsS0FBSyxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQztJQUNwQyxDQUFDO0lBRUQsSUFBSSxNQUFNO1FBQ1QsT0FBTyxJQUFJLENBQUMsT0FBTyxDQUFDO0lBQ3JCLENBQUM7SUE2QkQsU0FBUyxDQUFDLEtBQWlCO1FBQzFCLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3pCLDREQUE0RDtRQUM1RCxJQUFJLElBQUksQ0FBQyxNQUFNLEVBQUU7WUFBRSxPQUFPO1NBQUU7UUFDNUIsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUM7UUFDbkIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDMUIsQ0FBQztJQUdELE9BQU8sQ0FBQyxLQUFpQjtRQUN4QixJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUN6Qiw0REFBNEQ7UUFDNUQsSUFBSSxJQUFJLENBQUMsTUFBTSxFQUFFO1lBQUUsT0FBTztTQUFFO1FBQzVCLElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDO1FBQ25CLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQzFCLENBQUM7SUFFRDs7O01BR0U7SUFDRixRQUFRO1FBQ1AsTUFBTSxpQkFBaUIsR0FBSSxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQTZCLENBQUM7UUFDMUUsTUFBTSxXQUFXLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxhQUFhLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDeEQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsV0FBVyxFQUFFLDhCQUE4QixDQUFDLENBQUM7UUFDcEUsTUFBTSxZQUFZLEdBQWdCLEVBQUUsQ0FBQztRQUNyQyxpQkFBaUIsQ0FBQyxVQUFVLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDO1FBQ3RFLFlBQVksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLEVBQUU7WUFDM0IsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsaUJBQWlCLEVBQUUsSUFBSSxDQUFDLENBQUM7WUFDbkQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsV0FBVyxFQUFFLElBQUksQ0FBQyxDQUFDO1FBQzlDLENBQUMsQ0FBQyxDQUFDO1FBQ0gsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsaUJBQWlCLEVBQUUsV0FBVyxDQUFDLENBQUM7SUFDM0QsQ0FBQzs7a0hBMUVXLHFCQUFxQjtzR0FBckIscUJBQXFCOzJGQUFyQixxQkFBcUI7a0JBSGpDLFNBQVM7bUJBQUM7b0JBQ1YsUUFBUSxFQUFFLHdDQUF3QztpQkFDbEQ7eUhBS2EsTUFBTTtzQkFBbEIsS0FBSztnQkFnQkcsSUFBSTtzQkFBWixLQUFLO2dCQUtJLFFBQVE7c0JBQWpCLE1BQU07Z0JBRUcsT0FBTztzQkFBaEIsTUFBTTtnQkFFRyxPQUFPO3NCQUFoQixNQUFNO2dCQUVlLGFBQWE7c0JBQWxDLFdBQVc7dUJBQUMsT0FBTztnQkFDa0MsYUFBYTtzQkFBbEUsV0FBVzt1QkFBQyx1Q0FBdUM7Z0JBQzFCLElBQUk7c0JBQTdCLFdBQVc7dUJBQUMsV0FBVztnQkFDVyxZQUFZO3NCQUE5QyxXQUFXO3VCQUFDLG9CQUFvQjtnQkFDSCxRQUFRO3NCQUFyQyxXQUFXO3VCQUFDLGVBQWU7Z0JBTzVCLFNBQVM7c0JBRFIsWUFBWTt1QkFBQyxPQUFPLEVBQUUsQ0FBQyxRQUFRLENBQUM7Z0JBVWpDLE9BQU87c0JBRE4sWUFBWTt1QkFBQyxPQUFPLEVBQUUsQ0FBQyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuXHREaXJlY3RpdmUsXG5cdEhvc3RCaW5kaW5nLFxuXHRJbnB1dCxcblx0SG9zdExpc3RlbmVyLFxuXHRPdXRwdXQsXG5cdEV2ZW50RW1pdHRlcixcblx0RWxlbWVudFJlZixcblx0T25Jbml0LFxuXHRSZW5kZXJlcjJcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcblxuQERpcmVjdGl2ZSh7XG5cdHNlbGVjdG9yOiBcIltjZHNDb250ZW50T3B0aW9uXSwgW2libUNvbnRlbnRPcHRpb25dXCJcbn0pXG5leHBvcnQgY2xhc3MgQ29udGVudFN3aXRjaGVyT3B0aW9uIGltcGxlbWVudHMgT25Jbml0IHtcblx0LyoqXG5cdCAqIFVzZWQgdG8gYWN0aXZhdGUgdGhlIG9wdGlvbi4gT25seSBvbmUgb3B0aW9uIG1heSBiZSBgYWN0aXZlYCBhdCBhIHRpbWVcblx0ICovXG5cdEBJbnB1dCgpIHNldCBhY3RpdmUgKHZhbHVlOiBib29sZWFuKSB7XG5cdFx0dGhpcy5fYWN0aXZlID0gdmFsdWU7XG5cdFx0dGhpcy5zZWxlY3RlZENsYXNzID0gdmFsdWU7XG5cdFx0dGhpcy5hcmlhU2VsZWN0ZWQgPSB2YWx1ZTtcblx0XHR0aGlzLnRhYmluZGV4ID0gdmFsdWUgPyBcIjBcIiA6IFwiLTFcIjtcblx0fVxuXG5cdGdldCBhY3RpdmUoKSB7XG5cdFx0cmV0dXJuIHRoaXMuX2FjdGl2ZTtcblx0fVxuXG5cdC8qKlxuXHQgKiBJbnRlcm5hbCBuYW1lIGZvciB0aGUgb3B0aW9uLlxuXHQgKiBTaG91bGQgYmUgc29tZXRoaW5nIHRoYXQgaWRlbnRpZmllcyB0aGUgb3B0aW9uIHRvIHRoZSBhcHBsaWNhdGlvbi5cblx0ICogQWNjZXNzaWJsZSBmcm9tIHRoZSBgQ29udGVudFN3aXRjaGVyYCBgc2VsZWN0ZWRgIGVtaXR0ZXJcblx0ICovXG5cdEBJbnB1dCgpIG5hbWUgPSBcIm9wdGlvblwiO1xuXG5cdC8qKlxuXHQgKiBFbWl0cyB3aGVuIHRoZSBvcHRpb24gaXMgc2VsZWN0ZWQuXG5cdCAqL1xuXHRAT3V0cHV0KCkgc2VsZWN0ZWQgPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XG5cblx0QE91dHB1dCgpIG9uQ2xpY2sgPSBuZXcgRXZlbnRFbWl0dGVyPE1vdXNlRXZlbnQ+KCk7XG5cblx0QE91dHB1dCgpIG9uRm9jdXMgPSBuZXcgRXZlbnRFbWl0dGVyPEZvY3VzRXZlbnQ+KCk7XG5cblx0QEhvc3RCaW5kaW5nKFwiY2xhc3NcIikgc3dpdGNoZXJDbGFzcyA9IFwiY2RzLS1jb250ZW50LXN3aXRjaGVyLWJ0blwiO1xuXHRASG9zdEJpbmRpbmcoXCJjbGFzcy5jZHMtLWNvbnRlbnQtc3dpdGNoZXItLXNlbGVjdGVkXCIpIHNlbGVjdGVkQ2xhc3MgPSBmYWxzZTtcblx0QEhvc3RCaW5kaW5nKFwiYXR0ci5yb2xlXCIpIHJvbGUgPSBcInRhYlwiO1xuXHRASG9zdEJpbmRpbmcoXCJhdHRyLmFyaWEtc2VsZWN0ZWRcIikgYXJpYVNlbGVjdGVkID0gZmFsc2U7XG5cdEBIb3N0QmluZGluZyhcImF0dHIudGFiSW5kZXhcIikgdGFiaW5kZXggPSBcIi0xXCI7XG5cblx0cHJvdGVjdGVkIF9hY3RpdmUgPSBmYWxzZTtcblxuXHRjb25zdHJ1Y3Rvcihwcml2YXRlIHJlbmRlcmVyOiBSZW5kZXJlcjIsIHByaXZhdGUgaG9zdEVsZW1lbnQ6IEVsZW1lbnRSZWYpIHt9XG5cblx0QEhvc3RMaXN0ZW5lcihcImNsaWNrXCIsIFtcIiRldmVudFwiXSlcblx0aG9zdENsaWNrKGV2ZW50OiBNb3VzZUV2ZW50KSB7XG5cdFx0dGhpcy5vbkNsaWNrLmVtaXQoZXZlbnQpO1xuXHRcdC8vIHNraXAgc2V0dGluZyBhbmQgZW1pdHRpbmcgaWYgdGhlIG9wdGlvbiBpcyBhbHJlYWR5IGFjdGl2ZVxuXHRcdGlmICh0aGlzLmFjdGl2ZSkgeyByZXR1cm47IH1cblx0XHR0aGlzLmFjdGl2ZSA9IHRydWU7XG5cdFx0dGhpcy5zZWxlY3RlZC5lbWl0KHRydWUpO1xuXHR9XG5cblx0QEhvc3RMaXN0ZW5lcihcImZvY3VzXCIsIFtcIiRldmVudFwiXSlcblx0ZG9Gb2N1cyhldmVudDogRm9jdXNFdmVudCkge1xuXHRcdHRoaXMub25Gb2N1cy5lbWl0KGV2ZW50KTtcblx0XHQvLyBza2lwIHNldHRpbmcgYW5kIGVtaXR0aW5nIGlmIHRoZSBvcHRpb24gaXMgYWxyZWFkeSBhY3RpdmVcblx0XHRpZiAodGhpcy5hY3RpdmUpIHsgcmV0dXJuOyB9XG5cdFx0dGhpcy5hY3RpdmUgPSB0cnVlO1xuXHRcdHRoaXMuc2VsZWN0ZWQuZW1pdCh0cnVlKTtcblx0fVxuXG5cdC8qXG5cdCogZW5jYXBzdWxhdGluZyB0aGUgY29udGVudCBpbiBhIHNwYW4gd2l0aCBjZHMtLWNvbnRlbnQtc3dpdGNoZXJfX2xhYmVsIGNsYXNzXG5cdCogdG8gbWltaWMgd2hhdCBpcyBkb25lIGluIHRoZSByZWFjdCB2ZXJzaW9uXG5cdCovXG5cdG5nT25Jbml0KCk6IHZvaWQge1xuXHRcdGNvbnN0IGhvc3ROYXRpdmVFbGVtZW50ID0gKHRoaXMuaG9zdEVsZW1lbnQubmF0aXZlRWxlbWVudCBhcyBIVE1MRWxlbWVudCk7XG5cdFx0Y29uc3Qgc3BhbldyYXBwZXIgPSB0aGlzLnJlbmRlcmVyLmNyZWF0ZUVsZW1lbnQoXCJzcGFuXCIpO1xuXHRcdHRoaXMucmVuZGVyZXIuYWRkQ2xhc3Moc3BhbldyYXBwZXIsIFwiY2RzLS1jb250ZW50LXN3aXRjaGVyX19sYWJlbFwiKTtcblx0XHRjb25zdCBob3N0Q2hpbGRyZW46IENoaWxkTm9kZVtdID0gW107XG5cdFx0aG9zdE5hdGl2ZUVsZW1lbnQuY2hpbGROb2Rlcy5mb3JFYWNoKG5vZGUgPT4gaG9zdENoaWxkcmVuLnB1c2gobm9kZSkpO1xuXHRcdGhvc3RDaGlsZHJlbi5mb3JFYWNoKG5vZGUgPT4ge1xuXHRcdFx0dGhpcy5yZW5kZXJlci5yZW1vdmVDaGlsZChob3N0TmF0aXZlRWxlbWVudCwgbm9kZSk7XG5cdFx0XHR0aGlzLnJlbmRlcmVyLmFwcGVuZENoaWxkKHNwYW5XcmFwcGVyLCBub2RlKTtcblx0XHR9KTtcblx0XHR0aGlzLnJlbmRlcmVyLmFwcGVuZENoaWxkKGhvc3ROYXRpdmVFbGVtZW50LCBzcGFuV3JhcHBlcik7XG5cdH1cbn1cbiJdfQ==