Merge branch 'master' into dependabot/npm_and_yarn/integration/ng15/serialize-javascript-6.0.2

Author: Akshat55

integration/ng14/angular.json

@@ -44,7 +44,7 @@
                 {
                   "type": "initial",
                   "maximumWarning": "500kb",
-                  "maximumError": "1mb"
+                  "maximumError": "1.5mb"
                 },
                 {
                   "type": "anyComponentStyle",

src/modal/base-modal.service.ts

@@ -1,7 +1,9 @@
 import {
 	ComponentRef,
 	Injector,
-	Injectable
+	Injectable,
+	inject,
+	EnvironmentInjector
 } from "@angular/core";
 import { PlaceholderService } from "carbon-components-angular/placeholder";
 import { tap, delay } from "rxjs/operators";
@@ -16,6 +18,23 @@ export class BaseModalService {
 	// track all our open modals
 	protected static modalList: Array<ComponentRef<any>> = [];
 
+	/**
+	 * Current module/component injection enviornment
+	 * Allows modules to use providers from calling component
+	 *
+	 * Root Module/
+	 * └── Lazy loaded Feature Module/
+	 * 	 ├── Provides Service & imports modules
+	 * 	 ├── Modal component (component that extends base component)
+	 * 	 └── Modal component launcher (dynamically creates modal component)
+	 *
+	 * Passing EnvironmentInjector in `createComponent` will look for provider declaration in feature
+	 * module instead of root module. This is required to pass correct context in a lazy-loaded applications.
+	 * Services injected in root, will also be available as feature module enviornment will also hierarchically inherit
+	 * the root services.
+	 */
+	protected environment: EnvironmentInjector = inject(EnvironmentInjector);
+
 	/**
 	 * Creates an instance of `ModalService`.
 	 */
@@ -34,7 +53,12 @@ export class BaseModalService {
 			useValue: data.inputs[inputName]
 		}));
 		const injector = Injector.create({ providers: inputProviders });
-		const component = this.placeholderService.createComponent(data.component, injector);
+		const component = this.placeholderService.createComponent(
+			data.component,
+			injector,
+			undefined,
+			this.environment
+		);
 		let focusedElement = document.activeElement as HTMLElement;
 		setTimeout(() => {
 			component.instance.open = true;

src/placeholder/placeholder.service.ts

@@ -1,7 +1,9 @@
 import {
 	ComponentRef,
 	ViewContainerRef,
-	Injector
+	Injector,
+	EnvironmentInjector,
+	inject
 } from "@angular/core";
 import { Injectable } from "@angular/core";
 
@@ -33,7 +35,12 @@ export class PlaceholderService {
 	/**
 	 * Creates and returns component in the view.
 	 */
-	createComponent(component: ComponentRef<any>, injector: Injector, id?: any): ComponentRef<any> {
+	createComponent(
+		component: ComponentRef<any>,
+		injector: Injector,
+		id?: any,
+		environment: EnvironmentInjector = undefined
+	): ComponentRef<any> {
 		if (id) {
 			if (!this.viewContainerMap.has(id)) {
 				console.error(`No view container with id ${id} found`);
@@ -45,7 +52,13 @@ export class PlaceholderService {
 			console.error("No view container defined! Likely due to a missing `cds-placeholder`");
 			return;
 		}
-		return this.viewContainerRef.createComponent(component as any, { index: this.viewContainerRef.length, injector });
+		return this.viewContainerRef.createComponent(component as any,
+			{
+				index: this.viewContainerRef.length,
+				injector,
+				environmentInjector: environment
+			}
+		);
 	}
 
 	destroyComponent(component: ComponentRef<any>) {

src/tooltip/tooltip.component.ts

@@ -144,8 +144,13 @@ export class Tooltip extends PopoverContainer implements OnChanges, AfterContent
 		this.handleChange(false);
 
 		// Ignore first change since content is not initialized
-		if ((changes.autoAlign && !changes.autoAlign.firstChange)
-			|| (changes.disabled && !changes.disabled.firstChange && !changes.disabled.currentValue)) {
+		if (
+			(changes.autoAlign && !changes.autoAlign.firstChange)
+			|| (changes.disabled && !changes.disabled.firstChange && !changes.disabled.currentValue)
+			// If description is set to empty string when open & autoAlign is true then set to a new value
+			// positioning of popover is broken because popover content ref/caret no longer exists
+			|| changes.description
+		) {
 			/**
 			 * When `disabled` is `true`, popover content node is removed. So when re-enabling `disabled`,
 			 * we manually update view so querySelector can detect the popover content node.
@@ -155,7 +160,7 @@ export class Tooltip extends PopoverContainer implements OnChanges, AfterContent
 
 			// Reset the inline styles
 			this.popoverContentRef = this.elementRef.nativeElement.querySelector(".cds--popover-content");
-			this.popoverContentRef.setAttribute("style", "");
+			this.popoverContentRef?.setAttribute("style", "");
 			this.caretRef = this.elementRef.nativeElement.querySelector("span.cds--popover-caret");
 		}