carbon-components-angular
Version:
Next generation components
121 lines • 13 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";
/**
* @internal
* When `automatic`, the focused switcher will be selected by default. For `manual`,
* user will have to manually select via Enter/space (which fire the native click handler)
*/
this.selectionMode = "automatic";
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;
}
// In manual selection mode, focus only moves focus, not select switcher
if (this.selectionMode === "manual") {
return;
}
this.active = true;
this.selected.emit(true);
}
/*
* Wrap projected content in a span with the `cds--content-switcher__label` class.
*/
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29udGVudC1zd2l0Y2hlci1vcHRpb24uZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbnRlbnQtc3dpdGNoZXIvY29udGVudC1zd2l0Y2hlci1vcHRpb24uZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTixTQUFTLEVBQ1QsV0FBVyxFQUNYLEtBQUssRUFDTCxZQUFZLEVBQ1osTUFBTSxFQUNOLFlBQVksRUFJWixNQUFNLGVBQWUsQ0FBQzs7QUFLdkIsTUFBTSxPQUFPLHFCQUFxQjtJQThDakMsWUFBb0IsUUFBbUIsRUFBVSxXQUF1QjtRQUFwRCxhQUFRLEdBQVIsUUFBUSxDQUFXO1FBQVUsZ0JBQVcsR0FBWCxXQUFXLENBQVk7UUEvQnhFOzs7O1dBSUc7UUFDTSxTQUFJLEdBQUcsUUFBUSxDQUFDO1FBRXpCOztXQUVHO1FBQ08sYUFBUSxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7UUFFdkMsWUFBTyxHQUFHLElBQUksWUFBWSxFQUFjLENBQUM7UUFFekMsWUFBTyxHQUFHLElBQUksWUFBWSxFQUFjLENBQUM7UUFFN0Isa0JBQWEsR0FBRywyQkFBMkIsQ0FBQztRQUNaLGtCQUFhLEdBQUcsS0FBSyxDQUFDO1FBQ2xELFNBQUksR0FBRyxLQUFLLENBQUM7UUFDSixpQkFBWSxHQUFHLEtBQUssQ0FBQztRQUMxQixhQUFRLEdBQUcsSUFBSSxDQUFDO1FBRTlDOzs7O1dBSUc7UUFDSSxrQkFBYSxHQUEyQixXQUFXLENBQUM7UUFFakQsWUFBTyxHQUFHLEtBQUssQ0FBQztJQUVpRCxDQUFDO0lBN0M1RTs7T0FFRztJQUNILElBQWEsTUFBTSxDQUFFLEtBQWM7UUFDbEMsSUFBSSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUM7UUFDckIsSUFBSSxDQUFDLGFBQWEsR0FBRyxLQUFLLENBQUM7UUFDM0IsSUFBSSxDQUFDLFlBQVksR0FBRyxLQUFLLENBQUM7UUFDMUIsSUFB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Zyxcblx0SW5wdXQsXG5cdEhvc3RMaXN0ZW5lcixcblx0T3V0cHV0LFxuXHRFdmVudEVtaXR0ZXIsXG5cdEVsZW1lbnRSZWYsXG5cdE9uSW5pdCxcblx0UmVuZGVyZXIyXG59IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5cbkBEaXJlY3RpdmUoe1xuXHRzZWxlY3RvcjogXCJbY2RzQ29udGVudE9wdGlvbl0sIFtpYm1Db250ZW50T3B0aW9uXVwiXG59KVxuZXhwb3J0IGNsYXNzIENvbnRlbnRTd2l0Y2hlck9wdGlvbiBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cdC8qKlxuXHQgKiBVc2VkIHRvIGFjdGl2YXRlIHRoZSBvcHRpb24uIE9ubHkgb25lIG9wdGlvbiBtYXkgYmUgYGFjdGl2ZWAgYXQgYSB0aW1lXG5cdCAqL1xuXHRASW5wdXQoKSBzZXQgYWN0aXZlICh2YWx1ZTogYm9vbGVhbikge1xuXHRcdHRoaXMuX2FjdGl2ZSA9IHZhbHVlO1xuXHRcdHRoaXMuc2VsZWN0ZWRDbGFzcyA9IHZhbHVlO1xuXHRcdHRoaXMuYXJpYVNlbGVjdGVkID0gdmFsdWU7XG5cdFx0dGhpcy50YWJpbmRleCA9IHZhbHVlID8gXCIwXCIgOiBcIi0xXCI7XG5cdH1cblxuXHRnZXQgYWN0aXZlKCkge1xuXHRcdHJldHVybiB0aGlzLl9hY3RpdmU7XG5cdH1cblxuXHQvKipcblx0ICogSW50ZXJuYWwgbmFtZSBmb3IgdGhlIG9wdGlvbi5cblx0ICogU2hvdWxkIGJlIHNvbWV0aGluZyB0aGF0IGlkZW50aWZpZXMgdGhlIG9wdGlvbiB0byB0aGUgYXBwbGljYXRpb24uXG5cdCAqIEFjY2Vzc2libGUgZnJvbSB0aGUgYENvbnRlbnRTd2l0Y2hlcmAgYHNlbGVjdGVkYCBlbWl0dGVyXG5cdCAqL1xuXHRASW5wdXQoKSBuYW1lID0gXCJvcHRpb25cIjtcblxuXHQvKipcblx0ICogRW1pdHMgd2hlbiB0aGUgb3B0aW9uIGlzIHNlbGVjdGVkLlxuXHQgKi9cblx0QE91dHB1dCgpIHNlbGVjdGVkID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xuXG5cdEBPdXRwdXQoKSBvbkNsaWNrID0gbmV3IEV2ZW50RW1pdHRlcjxNb3VzZUV2ZW50PigpO1xuXG5cdEBPdXRwdXQoKSBvbkZvY3VzID0gbmV3IEV2ZW50RW1pdHRlcjxGb2N1c0V2ZW50PigpO1xuXG5cdEBIb3N0QmluZGluZyhcImNsYXNzXCIpIHN3aXRjaGVyQ2xhc3MgPSBcImNkcy0tY29udGVudC1zd2l0Y2hlci1idG5cIjtcblx0QEhvc3RCaW5kaW5nKFwiY2xhc3MuY2RzLS1jb250ZW50LXN3aXRjaGVyLS1zZWxlY3RlZFwiKSBzZWxlY3RlZENsYXNzID0gZmFsc2U7XG5cdEBIb3N0QmluZGluZyhcImF0dHIucm9sZVwiKSByb2xlID0gXCJ0YWJcIjtcblx0QEhvc3RCaW5kaW5nKFwiYXR0ci5hcmlhLXNlbGVjdGVkXCIpIGFyaWFTZWxlY3RlZCA9IGZhbHNlO1xuXHRASG9zdEJpbmRpbmcoXCJhdHRyLnRhYkluZGV4XCIpIHRhYmluZGV4ID0gXCItMVwiO1xuXG5cdC8qKlxuXHQgKiBAaW50ZXJuYWxcblx0ICogV2hlbiBgYXV0b21hdGljYCwgdGhlIGZvY3VzZWQgc3dpdGNoZXIgd2lsbCBiZSBzZWxlY3RlZCBieSBkZWZhdWx0LiBGb3IgYG1hbnVhbGAsXG5cdCAqIHVzZXIgd2lsbCBoYXZlIHRvIG1hbnVhbGx5IHNlbGVjdCB2aWEgRW50ZXIvc3BhY2UgKHdoaWNoIGZpcmUgdGhlIG5hdGl2ZSBjbGljayBoYW5kbGVyKVxuXHQgKi9cblx0cHVibGljIHNlbGVjdGlvbk1vZGU6IFwiYXV0b21hdGljXCIgfCBcIm1hbnVhbFwiID0gXCJhdXRvbWF0aWNcIjtcblxuXHRwcm90ZWN0ZWQgX2FjdGl2ZSA9IGZhbHNlO1xuXG5cdGNvbnN0cnVjdG9yKHByaXZhdGUgcmVuZGVyZXI6IFJlbmRlcmVyMiwgcHJpdmF0ZSBob3N0RWxlbWVudDogRWxlbWVudFJlZikge31cblxuXHRASG9zdExpc3RlbmVyKFwiY2xpY2tcIiwgW1wiJGV2ZW50XCJdKVxuXHRob3N0Q2xpY2soZXZlbnQ6IE1vdXNlRXZlbnQpIHtcblx0XHR0aGlzLm9uQ2xpY2suZW1pdChldmVudCk7XG5cdFx0Ly8gc2tpcCBzZXR0aW5nIGFuZCBlbWl0dGluZyBpZiB0aGUgb3B0aW9uIGlzIGFscmVhZHkgYWN0aXZlXG5cdFx0aWYgKHRoaXMuYWN0aXZlKSB7IHJldHVybjsgfVxuXHRcdHRoaXMuYWN0aXZlID0gdHJ1ZTtcblx0XHR0aGlzLnNlbGVjdGVkLmVtaXQodHJ1ZSk7XG5cdH1cblxuXHRASG9zdExpc3RlbmVyKFwiZm9jdXNcIiwgW1wiJGV2ZW50XCJdKVxuXHRkb0ZvY3VzKGV2ZW50OiBGb2N1c0V2ZW50KSB7XG5cdFx0dGhpcy5vbkZvY3VzLmVtaXQoZXZlbnQpO1xuXHRcdC8vIHNraXAgc2V0dGluZyBhbmQgZW1pdHRpbmcgaWYgdGhlIG9wdGlvbiBpcyBhbHJlYWR5IGFjdGl2ZVxuXHRcdGlmICh0aGlzLmFjdGl2ZSkgeyByZXR1cm47IH1cblx0XHQvLyBJbiBtYW51YWwgc2VsZWN0aW9uIG1vZGUsIGZvY3VzIG9ubHkgbW92ZXMgZm9jdXMsIG5vdCBzZWxlY3Qgc3dpdGNoZXJcblx0XHRpZiAodGhpcy5zZWxlY3Rpb25Nb2RlID09PSBcIm1hbnVhbFwiKSB7XG5cdFx0XHRyZXR1cm47XG5cdFx0fVxuXHRcdHRoaXMuYWN0aXZlID0gdHJ1ZTtcblx0XHR0aGlzLnNlbGVjdGVkLmVtaXQodHJ1ZSk7XG5cdH1cblxuXHQvKlxuXHQgKiBXcmFwIHByb2plY3RlZCBjb250ZW50IGluIGEgc3BhbiB3aXRoIHRoZSBgY2RzLS1jb250ZW50LXN3aXRjaGVyX19sYWJlbGAgY2xhc3MuXG5cdCAqL1xuXHRuZ09uSW5pdCgpOiB2b2lkIHtcblx0XHRjb25zdCBob3N0TmF0aXZlRWxlbWVudCA9ICh0aGlzLmhvc3RFbGVtZW50Lm5hdGl2ZUVsZW1lbnQgYXMgSFRNTEVsZW1lbnQpO1xuXHRcdGNvbnN0IHNwYW5XcmFwcGVyID0gdGhpcy5yZW5kZXJlci5jcmVhdGVFbGVtZW50KFwic3BhblwiKTtcblx0XHR0aGlzLnJlbmRlcmVyLmFkZENsYXNzKHNwYW5XcmFwcGVyLCBcImNkcy0tY29udGVudC1zd2l0Y2hlcl9fbGFiZWxcIik7XG5cdFx0Y29uc3QgaG9zdENoaWxkcmVuOiBDaGlsZE5vZGVbXSA9IFtdO1xuXHRcdGhvc3ROYXRpdmVFbGVtZW50LmNoaWxkTm9kZXMuZm9yRWFjaChub2RlID0+IGhvc3RDaGlsZHJlbi5wdXNoKG5vZGUpKTtcblx0XHRob3N0Q2hpbGRyZW4uZm9yRWFjaChub2RlID0+IHtcblx0XHRcdHRoaXMucmVuZGVyZXIucmVtb3ZlQ2hpbGQoaG9zdE5hdGl2ZUVsZW1lbnQsIG5vZGUpO1xuXHRcdFx0dGhpcy5yZW5kZXJlci5hcHBlbmRDaGlsZChzcGFuV3JhcHBlciwgbm9kZSk7XG5cdFx0fSk7XG5cdFx0dGhpcy5yZW5kZXJlci5hcHBlbmRDaGlsZChob3N0TmF0aXZlRWxlbWVudCwgc3BhbldyYXBwZXIpO1xuXHR9XG59XG4iXX0=