Merge pull request #2105 from Licen-it/master

fix(ContentSwitcher): correctly displaying all switcher options (and update utils-position version)

Author: zvonimirfras

src/content-switcher/content-switcher-option.directive.ts

@@ -4,13 +4,16 @@ import {
 	Input,
 	HostListener,
 	Output,
-	EventEmitter
+	EventEmitter,
+	ElementRef,
+	OnInit,
+	Renderer2
 } from "@angular/core";
 
 @Directive({
 	selector: "[ibmContentOption]"
 })
-export class ContentSwitcherOption {
+export class ContentSwitcherOption implements OnInit {
 	/**
 	 * Used to activate the option. Only one option may be `active` at a time
 	 */
@@ -49,6 +52,8 @@ export class ContentSwitcherOption {
 
 	protected _active = false;
 
+	constructor(private renderer: Renderer2, private hostElement: ElementRef) {}
+
 	@HostListener("click", ["$event"])
 	hostClick(event: MouseEvent) {
 		this.onClick.emit(event);
@@ -66,4 +71,21 @@ export class ContentSwitcherOption {
 		this.active = true;
 		this.selected.emit(true);
 	}
+
+	/*
+	* encapsulating the content in a span with bx--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, "bx--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);
+	}
 }

src/content-switcher/content-switcher.component.ts

@@ -36,9 +36,7 @@ import { isFocusInLastItem, isFocusInFirstItem } from "carbon-components-angular
 			class="bx--content-switcher"
 			[class.bx--content-switcher--light]="theme === 'light'"
 			role="tablist">
-			<span class="bx--content-switcher__label">
-				<ng-content></ng-content>
-			</span>
+			<ng-content></ng-content>
 		</div>
 	`
 })

src/package.json

@@ -19,7 +19,7 @@
     "@carbon/icon-helpers": "10.9.0",
     "@carbon/icons": "10.20.0",
     "@carbon/telemetry": "0.0.0-alpha.6",
-    "@carbon/utils-position": "1.1.3",
+    "@carbon/utils-position": "1.1.4",
     "flatpickr": "4.6.1"
   }
 }