fix: styles of context menu item content

when no icons or only select icons are used the item name was diplayed with 1rem icon width

Author: krava11i

src/context-menu/context-menu-item.component.ts

@@ -33,7 +33,11 @@ import { ItemClickEvent } from "./context-menu.types";
 	`,
 	styles: [`
 		:host {
-			grid-template-columns: 1rem 1fr max-content;
+			grid-template-columns: 1fr max-content;
+
+			&[icon], &[type="checkbox"], &[type="radio"] {
+				grid-template-columns: 1rem 1fr max-content;
+			}
 		}
 	`]
 })

src/context-menu/context-menu.component.ts

@@ -47,11 +47,6 @@ export class ContextMenuComponent implements OnChanges, AfterViewInit {
 	@HostBinding("attr.tabindex") tabindex = "-1";
 	@HostBinding("style.left.px") get leftPosition() { return this.position.left; }
 	@HostBinding("style.top.px") get topPosition() { return this.position.top; }
-
-	/**
-	 * @todo - convert to getter in v6, should resolve expression has changed
-	 * after switching to on OnPush Change Detection Strategy
-	 */
 	@HostBinding("class.cds--menu--with-icons") iconClass = false;
 
 	constructor(protected elementRef: ElementRef) { }
@@ -66,8 +61,8 @@ export class ContextMenuComponent implements OnChanges, AfterViewInit {
 		setTimeout(() => {
 			const nativeElement = this.elementRef.nativeElement;
 			if (nativeElement) {
-				this.iconClass = !!nativeElement
-					.querySelector(".cds--menu-item .cds--menu-item__icon svg");
+				this.iconClass = !!this.elementRef.nativeElement
+					.querySelectorAll(".cds--menu-item[icon], .cds--menu-item[type='checkbox'], .cds--menu-item[type='radio']").length;
 			}
 		});
 	}