src/content-switcher/content-switcher-option.directive.ts
OnInit
| Selector | [cdsContentOption], [ibmContentOption] |
Properties |
|
Methods |
Inputs |
Outputs |
HostBindings |
HostListeners |
Accessors |
constructor(renderer: Renderer2, hostElement: ElementRef)
|
|||||||||
|
Parameters :
|
| active | |
Type : boolean
|
|
|
Used to activate the option. Only one option may be |
|
| name | |
Type : string
|
|
Default value : "option"
|
|
|
Internal name for the option.
Should be something that identifies the option to the application.
Accessible from the |
|
| onClick | |
Type : EventEmitter
|
|
| onFocus | |
Type : EventEmitter
|
|
| selected | |
Type : EventEmitter
|
|
|
Emits when the option is selected. |
|
| attr.aria-selected |
Type : boolean
|
Default value : false
|
| attr.role |
Type : string
|
Default value : "tab"
|
| attr.tabIndex |
Type : string
|
Default value : "-1"
|
| class |
Type : string
|
Default value : "cds--content-switcher-btn"
|
| class.cds--content-switcher--selected |
Type : boolean
|
Default value : false
|
| click |
Arguments : '$event'
|
| focus |
Arguments : '$event'
|
| doFocus | ||||||
doFocus(event: FocusEvent)
|
||||||
Decorators :
@HostListener('focus', ['$event'])
|
||||||
|
Parameters :
Returns :
void
|
| hostClick | ||||||
hostClick(event: MouseEvent)
|
||||||
Decorators :
@HostListener('click', ['$event'])
|
||||||
|
Parameters :
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| Protected _active |
Default value : false
|
| ariaSelected |
Default value : false
|
Decorators :
@HostBinding('attr.aria-selected')
|
| role |
Type : string
|
Default value : "tab"
|
Decorators :
@HostBinding('attr.role')
|
| selectedClass |
Default value : false
|
Decorators :
@HostBinding('class.cds--content-switcher--selected')
|
| switcherClass |
Type : string
|
Default value : "cds--content-switcher-btn"
|
Decorators :
@HostBinding('class')
|
| tabindex |
Type : string
|
Default value : "-1"
|
Decorators :
@HostBinding('attr.tabIndex')
|
| active | ||||||
getactive()
|
||||||
setactive(value: boolean)
|
||||||
|
Used to activate the option. Only one option may be
Parameters :
Returns :
void
|
import {
Directive,
HostBinding,
Input,
HostListener,
Output,
EventEmitter,
ElementRef,
OnInit,
Renderer2
} from "@angular/core";
@Directive({
selector: "[cdsContentOption], [ibmContentOption]"
})
export class ContentSwitcherOption implements OnInit {
/**
* Used to activate the option. Only one option may be `active` at a time
*/
@Input() set active (value: boolean) {
this._active = value;
this.selectedClass = value;
this.ariaSelected = value;
this.tabindex = value ? "0" : "-1";
}
get active() {
return this._active;
}
/**
* Internal name for the option.
* Should be something that identifies the option to the application.
* Accessible from the `ContentSwitcher` `selected` emitter
*/
@Input() name = "option";
/**
* Emits when the option is selected.
*/
@Output() selected = new EventEmitter<boolean>();
@Output() onClick = new EventEmitter<MouseEvent>();
@Output() onFocus = new EventEmitter<FocusEvent>();
@HostBinding("class") switcherClass = "cds--content-switcher-btn";
@HostBinding("class.cds--content-switcher--selected") selectedClass = false;
@HostBinding("attr.role") role = "tab";
@HostBinding("attr.aria-selected") ariaSelected = false;
@HostBinding("attr.tabIndex") tabindex = "-1";
protected _active = false;
constructor(private renderer: Renderer2, private hostElement: ElementRef) {}
@HostListener("click", ["$event"])
hostClick(event: MouseEvent) {
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);
}
@HostListener("focus", ["$event"])
doFocus(event: FocusEvent) {
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(): void {
const hostNativeElement = (this.hostElement.nativeElement as HTMLElement);
const spanWrapper = this.renderer.createElement("span");
this.renderer.addClass(spanWrapper, "cds--content-switcher__label");
const hostChildren: ChildNode[] = [];
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);
}
}