fix: Remove manual change detection in favor of DI

Signed-off-by: Akshat Patel <[email protected]>

Author: Akshat55

src/grid/column.directive.ts

@@ -0,0 +1,161 @@
+import {
+	Directive,
+	HostBinding,
+	Input,
+	OnChanges,
+	OnDestroy,
+	OnInit,
+	Optional
+} from "@angular/core";
+import { Subscription } from "rxjs";
+import { GridService } from "./grid.service";
+
+@Directive({
+	selector: "[cdsCol], [ibmCol]"
+})
+export class ColumnDirective implements OnInit, OnChanges, OnDestroy {
+	@HostBinding("class")
+	get columnClasses(): string {
+		return this._columnClasses.join(" ");
+	}
+	set columnClasses(classes: string) {
+		this._columnClasses = classes.split(" ");
+	}
+
+	@Input() class = "";
+
+	/**
+	 * Defines columns width for specified breakpoint
+	 * Accepts the following formats:
+	 * - {[breakpoint]: number}
+	 * - {[breakpoint]: "auto"} - css only
+	 * - {[breakpoint]: {[start|end]: number}} - css only
+	 *
+	 * Example:
+	 * <div cdsCol [columnNumbers]={md: 3, lg: 4}></div>
+	 */
+	@Input() columnNumbers = {};
+
+	/**
+	 * Defines columns offset, which increases the left margin of the column.
+	 * This field will only work with flexbox grid.
+	 *
+	 * Accepts the following formats:
+	 * - {[breakpoint]: number}
+	 *
+	 * Example:
+	 * <div cdsCol [offsets]={md: 3, lg: 4}></div>
+	 */
+	@Input() offsets = {};
+
+	/**
+	 * Set to `true` to use css grid column hang class
+	 * This will only work when `isCss` property is set to true
+	 *
+	 * Useful when trying to align content across css grid/subgrid
+	 */
+	@Input() columnHang = false;
+
+	protected _columnClasses: string[] = [];
+
+	private isCssGrid = false;
+	private subscription = new Subscription();
+
+	constructor(@Optional() private gridService: GridService) {}
+
+	ngOnInit() {
+		if (this.gridService) {
+			this.gridService.gridObservable.subscribe((isCssGrid: boolean) => {
+				this.isCssGrid = isCssGrid;
+				this.updateColumnClasses();
+			});
+		} else {
+			this.updateColumnClasses();
+		}
+	}
+
+	ngOnChanges() {
+		this.updateColumnClasses();
+	}
+
+	/**
+	 * Unsubscribe from subscription
+	 */
+	ngOnDestroy() {
+		this.subscription.unsubscribe();
+	}
+
+	private updateColumnClasses() {
+		try {
+			this._columnClasses = [];
+			const columnKeys = Object.keys(this.columnNumbers);
+			console.log(columnKeys);
+
+			// Assign classes based on the type of grid used.
+			if (this.isCssGrid) {
+				// Default css grid class
+				this._columnClasses.push("cds--css-grid-column");
+				if (this.columnHang) {
+					this._columnClasses.push("cds--grid-column-hang");
+				}
+
+				columnKeys.forEach(key => {
+					/**
+					 * Passing in `auto` to a breakpoint as such: {'md': 'auto'}
+					 * will assign the element which will automatically determine the width of the column
+					 * for the breakpoint passed
+					 */
+					if (this.columnNumbers[key] === "auto") {
+						this._columnClasses.push(`cds--${key}:col-span-auto`);
+					} else if (typeof this.columnNumbers[key] === "object") {
+						/**
+						 * In css grid, objects can be passed to the keys in the following format:
+						 * {'md': {'start': 3}}
+						 *
+						 * These objects are used to position the column
+						 */
+						if (this.columnNumbers[key]["start"]) {
+							// col-start is simular equivalent of flex offset
+							this._columnClasses.push(`cds--${key}:col-start-${this.columnNumbers[key].start}`);
+						}
+						if (this.columnNumbers[key]["end"]) {
+							this._columnClasses.push(`cds--${key}:col-end-${this.columnNumbers[key].end}`);
+						}
+						if (this.columnNumbers[key]["span"]) {
+							this._columnClasses.push(`cds--${key}:col-span-${this.columnNumbers[key].span}`);
+						}
+					} else {
+						this._columnClasses.push(`cds--${key}:col-span-${this.columnNumbers[key]}`);
+					}
+				});
+			} else {
+				// Set column classes for flex grid
+				if (columnKeys.length <= 0) {
+					this._columnClasses.push("cds--col");
+				}
+
+				columnKeys.forEach(key => {
+					if (this.columnNumbers[key] === "nobreak") {
+						this._columnClasses.push(`cds--col-${key}`);
+					} else {
+						this._columnClasses.push(`cds--col-${key}-${this.columnNumbers[key]}`);
+					}
+				});
+
+				Object.keys(this.offsets).forEach(key => {
+					this._columnClasses.push(`cds--start-${key}-${this.offsets[key] + 1}`);
+				});
+			}
+		} catch (err) {
+			console.error(`Malformed \`offsets\` or \`columnNumbers\`: ${err}`);
+		}
+
+		/**
+		 * Append the classes passed so they aren't overriden when we set the column classes
+		 * from host binding
+		 */
+		if (this.class) {
+			this._columnClasses.push(this.class);
+		}
+	}
+}