carbon-components-angular 5.57.2 → 5.57.3

package/docs/documentation/coverage.html

@@ -1493,9 +1493,9 @@
             </td>
             <td>injectable</td>
             <td>BaseModalService</td>
-            <td align="right" data-sort="66">
-                <span class="coverage-percent">66 %</span>
-                <span class="coverage-count">(4/6)</span>
+            <td align="right" data-sort="71">
+                <span class="coverage-percent">71 %</span>
+                <span class="coverage-count">(5/7)</span>
             </td>
         </tr>
         <tr class="low">
@@ -1589,9 +1589,9 @@
             </td>
             <td>injectable</td>
             <td>ModalService</td>
-            <td align="right" data-sort="71">
-                <span class="coverage-percent">71 %</span>
-                <span class="coverage-count">(5/7)</span>
+            <td align="right" data-sort="75">
+                <span class="coverage-percent">75 %</span>
+                <span class="coverage-count">(6/8)</span>
             </td>
         </tr>
         <tr class="very-good">

package/docs/documentation/injectables/BaseModalService.html

@@ -142,6 +142,10 @@ Uses PlaceholderService to track open instances, and for it's placeholder vi
                 <tr>
                     <td class="col-md-4">
                         <ul class="index-list">
+                            <li>
+                                    <span class="modifier">Protected</span>
+                                <a href="#environment" >environment</a>
+                            </li>
                             <li>
                                     <span class="modifier">Protected</span>
                                     <span class="modifier">Static</span>
@@ -192,7 +196,7 @@ Uses PlaceholderService to track open instances, and for it&#39;s placeholder vi
                 </tr>
                         <tr>
                             <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="17" class="link-to-prism">src/modal/base-modal.service.ts:17</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="36" class="link-to-prism">src/modal/base-modal.service.ts:36</a></div>
                             </td>
                         </tr>
 
@@ -257,8 +261,8 @@ Uses PlaceholderService to track open instances, and for it&#39;s placeholder vi
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="28"
-                                    class="link-to-prism">src/modal/base-modal.service.ts:28</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="47"
+                                    class="link-to-prism">src/modal/base-modal.service.ts:47</a></div>
                         </td>
                     </tr>
 
@@ -335,8 +339,8 @@ Uses PlaceholderService to track open instances, and for it&#39;s placeholder vi
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="71"
-                                    class="link-to-prism">src/modal/base-modal.service.ts:71</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="95"
+                                    class="link-to-prism">src/modal/base-modal.service.ts:95</a></div>
                         </td>
                     </tr>
 
@@ -391,6 +395,54 @@ When called without parameters it destroys the most recently created/top most mo
     <h3 id="inputs">
         Properties
     </h3>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="environment"></a>
+                    <span class="name">
+                            <span class="modifier">Protected</span>
+                        <span ><b>environment</b></span>
+                        <a href="#environment"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>    <code>EnvironmentInjector</code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>inject(EnvironmentInjector)</code>
+                    </td>
+                </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-line">Defined in <a href="" data-line="36" class="link-to-prism">src/modal/base-modal.service.ts:36</a></div>
+                        </td>
+                    </tr>
+
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Current module/component injection enviornment
+Allows modules to use providers from calling component</p>
+<p>Root Module/
+└── Lazy loaded Feature Module/
+     ├── Provides Service &amp; imports modules
+     ├── Modal component (component that extends base component)
+     └── Modal component launcher (dynamically creates modal component)</p>
+<p>Passing EnvironmentInjector in <code>createComponent</code> 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.</p>
+</div>
+                </td>
+            </tr>
+
+        </tbody>
+    </table>
     <table class="table table-sm table-bordered">
         <tbody>
             <tr>
@@ -417,7 +469,7 @@ When called without parameters it destroys the most recently created/top most mo
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="17" class="link-to-prism">src/modal/base-modal.service.ts:17</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="19" class="link-to-prism">src/modal/base-modal.service.ts:19</a></div>
                         </td>
                     </tr>
 
@@ -444,7 +496,7 @@ When called without parameters it destroys the most recently created/top most mo
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="22" class="link-to-prism">src/modal/base-modal.service.ts:22</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="41" class="link-to-prism">src/modal/base-modal.service.ts:41</a></div>
                         </td>
                     </tr>
 
@@ -460,7 +512,9 @@ When called without parameters it destroys the most recently created/top most mo
         <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import {
 	ComponentRef,
 	Injector,
-	Injectable
+	Injectable,
+	inject,
+	EnvironmentInjector
 } from &quot;@angular/core&quot;;
 import { PlaceholderService } from &quot;carbon-components-angular/placeholder&quot;;
 import { tap, delay } from &quot;rxjs/operators&quot;;
@@ -475,6 +529,23 @@ export class BaseModalService {
 	// track all our open modals
 	protected static modalList: Array&lt;ComponentRef&lt;any&gt;&gt; &#x3D; [];
 
+	/**
+	 * Current module/component injection enviornment
+	 * Allows modules to use providers from calling component
+	 *
+	 * Root Module/
+	 * └── Lazy loaded Feature Module/
+	 * 	 ├── Provides Service &amp; imports modules
+	 * 	 ├── Modal component (component that extends base component)
+	 * 	 └── Modal component launcher (dynamically creates modal component)
+	 *
+	 * Passing EnvironmentInjector in &#x60;createComponent&#x60; 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 &#x3D; inject(EnvironmentInjector);
+
 	/**
 	 * Creates an instance of &#x60;ModalService&#x60;.
 	 */
@@ -493,7 +564,12 @@ export class BaseModalService {
 			useValue: data.inputs[inputName]
 		}));
 		const injector &#x3D; Injector.create({ providers: inputProviders });
-		const component &#x3D; this.placeholderService.createComponent(data.component, injector);
+		const component &#x3D; this.placeholderService.createComponent(
+			data.component,
+			injector,
+			undefined,
+			this.environment
+		);
 		let focusedElement &#x3D; document.activeElement as HTMLElement;
 		setTimeout(() &#x3D;&gt; {
 			component.instance.open &#x3D; true;

package/docs/documentation/injectables/ModalService.html

@@ -155,6 +155,10 @@ Uses PlaceholderService to track open instances, and for it's placeholder vi
                                     <span class="modifier">Public</span>
                                 <a href="#placeholderService" >placeholderService</a>
                             </li>
+                            <li>
+                                    <span class="modifier">Protected</span>
+                                <a href="#environment" >environment</a>
+                            </li>
                             <li>
                                     <span class="modifier">Protected</span>
                                     <span class="modifier">Static</span>
@@ -369,7 +373,7 @@ click: clickFunction,
                     </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in         <code><a href="../injectables/BaseModalService.html#source" target="_self" >BaseModalService:28</a></code>
+                                <div class="io-line">Defined in         <code><a href="../injectables/BaseModalService.html#source" target="_self" >BaseModalService:47</a></code>
 </div>
                         </td>
                     </tr>
@@ -453,7 +457,7 @@ click: clickFunction,
                     </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in         <code><a href="../injectables/BaseModalService.html#source" target="_self" >BaseModalService:71</a></code>
+                                <div class="io-line">Defined in         <code><a href="../injectables/BaseModalService.html#source" target="_self" >BaseModalService:95</a></code>
 </div>
                         </td>
                     </tr>
@@ -543,6 +547,61 @@ When called without parameters it destroys the most recently created/top most mo
 
         </tbody>
     </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="environment"></a>
+                    <span class="name">
+                            <span class="modifier">Protected</span>
+                        <span ><b>environment</b></span>
+                        <a href="#environment"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>    <code>EnvironmentInjector</code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>inject(EnvironmentInjector)</code>
+                    </td>
+                </tr>
+                        <tr>
+                            <td class="col-md-4">
+                                <div class="io-line">Inherited from         <code><a href="../injectables/BaseModalService.html" target="_self" >BaseModalService</a></code>
+</div>
+                            </td>
+                        </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-line">Defined in         <code><a href="../injectables/BaseModalService.html#source" target="_self" >BaseModalService:36</a></code>
+</div>
+                        </td>
+                    </tr>
+
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Current module/component injection enviornment
+Allows modules to use providers from calling component</p>
+<p>Root Module/
+└── Lazy loaded Feature Module/
+     ├── Provides Service &amp; imports modules
+     ├── Modal component (component that extends base component)
+     └── Modal component launcher (dynamically creates modal component)</p>
+<p>Passing EnvironmentInjector in <code>createComponent</code> 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.</p>
+</div>
+                </td>
+            </tr>
+
+        </tbody>
+    </table>
     <table class="table table-sm table-bordered">
         <tbody>
             <tr>
@@ -575,7 +634,7 @@ When called without parameters it destroys the most recently created/top most mo
                         </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in         <code><a href="../injectables/BaseModalService.html#source" target="_self" >BaseModalService:17</a></code>
+                                <div class="io-line">Defined in         <code><a href="../injectables/BaseModalService.html#source" target="_self" >BaseModalService:19</a></code>
 </div>
                         </td>
                     </tr>

package/docs/documentation/injectables/PlaceholderService.html

@@ -224,8 +224,8 @@ Also used to insert/remove components from that view.</p>
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="70"
-                                    class="link-to-prism">src/placeholder/placeholder.service.ts:70</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="83"
+                                    class="link-to-prism">src/placeholder/placeholder.service.ts:83</a></div>
                         </td>
                     </tr>
 
@@ -296,15 +296,15 @@ Also used to insert/remove components from that view.</p>
             </tr>
             <tr>
                 <td class="col-md-4">
-<code>createComponent(component: ComponentRef<any>, injector: Injector, id?: <a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank">any</a>)</code>
+<code>createComponent(component: ComponentRef<any>, injector: Injector, id?: <a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank">any</a>, environment: EnvironmentInjector)</code>
                 </td>
             </tr>
 
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="36"
-                                    class="link-to-prism">src/placeholder/placeholder.service.ts:36</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="38"
+                                    class="link-to-prism">src/placeholder/placeholder.service.ts:38</a></div>
                         </td>
                     </tr>
 
@@ -323,6 +323,7 @@ Also used to insert/remove components from that view.</p>
                                             <td>Name</td>
                                                 <td>Type</td>
                                             <td>Optional</td>
+                                                <td>Default value</td>
                                         </tr>
                                     </thead>
                                     <tbody>
@@ -336,6 +337,8 @@ Also used to insert/remove components from that view.</p>
                                                     No
                                             </td>
 
+                                            <td>
+                                            </td>
 
                                         </tr>
                                         <tr>
@@ -348,6 +351,8 @@ Also used to insert/remove components from that view.</p>
                                                     No
                                             </td>
 
+                                            <td>
+                                            </td>
 
                                         </tr>
                                         <tr>
@@ -360,6 +365,23 @@ Also used to insert/remove components from that view.</p>
                                                     Yes
                                             </td>
 
+                                            <td>
+                                            </td>
+
+                                        </tr>
+                                        <tr>
+                                                <td>environment</td>
+                                            <td>
+                                                        <code>EnvironmentInjector</code>
+                                            </td>
+
+                                            <td>
+                                                    No
+                                            </td>
+
+                                            <td>
+                                                    <code>undefined</code>
+                                            </td>
 
                                         </tr>
                                     </tbody>
@@ -396,8 +418,8 @@ Also used to insert/remove components from that view.</p>
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="51"
-                                    class="link-to-prism">src/placeholder/placeholder.service.ts:51</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="64"
+                                    class="link-to-prism">src/placeholder/placeholder.service.ts:64</a></div>
                         </td>
                     </tr>
 
@@ -463,8 +485,8 @@ Also used to insert/remove components from that view.</p>
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="55"
-                                    class="link-to-prism">src/placeholder/placeholder.service.ts:55</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="68"
+                                    class="link-to-prism">src/placeholder/placeholder.service.ts:68</a></div>
                         </td>
                     </tr>
 
@@ -542,8 +564,8 @@ Also used to insert/remove components from that view.</p>
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="84"
-                                    class="link-to-prism">src/placeholder/placeholder.service.ts:84</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="97"
+                                    class="link-to-prism">src/placeholder/placeholder.service.ts:97</a></div>
                         </td>
                     </tr>
 
@@ -621,8 +643,8 @@ Also used to insert/remove components from that view.</p>
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="63"
-                                    class="link-to-prism">src/placeholder/placeholder.service.ts:63</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="76"
+                                    class="link-to-prism">src/placeholder/placeholder.service.ts:76</a></div>
                         </td>
                     </tr>
 
@@ -688,8 +710,8 @@ Also used to insert/remove components from that view.</p>
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="25"
-                                    class="link-to-prism">src/placeholder/placeholder.service.ts:25</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="27"
+                                    class="link-to-prism">src/placeholder/placeholder.service.ts:27</a></div>
                         </td>
                     </tr>
 
@@ -769,8 +791,8 @@ Also used to insert/remove components from that view.</p>
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="77"
-                                    class="link-to-prism">src/placeholder/placeholder.service.ts:77</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="90"
+                                    class="link-to-prism">src/placeholder/placeholder.service.ts:90</a></div>
                         </td>
                     </tr>
 
@@ -859,7 +881,7 @@ Also used to insert/remove components from that view.</p>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="21" class="link-to-prism">src/placeholder/placeholder.service.ts:21</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="23" class="link-to-prism">src/placeholder/placeholder.service.ts:23</a></div>
                         </td>
                     </tr>
 
@@ -897,7 +919,7 @@ Also used to insert/remove components from that view.</p>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="17" class="link-to-prism">src/placeholder/placeholder.service.ts:17</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="19" class="link-to-prism">src/placeholder/placeholder.service.ts:19</a></div>
                         </td>
                     </tr>
 
@@ -919,7 +941,9 @@ Also used to insert/remove components from that view.</p>
         <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import {
 	ComponentRef,
 	ViewContainerRef,
-	Injector
+	Injector,
+	EnvironmentInjector,
+	inject
 } from &quot;@angular/core&quot;;
 import { Injectable } from &quot;@angular/core&quot;;
 
@@ -951,7 +975,12 @@ export class PlaceholderService {
 	/**
 	 * Creates and returns component in the view.
 	 */
-	createComponent(component: ComponentRef&lt;any&gt;, injector: Injector, id?: any): ComponentRef&lt;any&gt; {
+	createComponent(
+		component: ComponentRef&lt;any&gt;,
+		injector: Injector,
+		id?: any,
+		environment: EnvironmentInjector &#x3D; undefined
+	): ComponentRef&lt;any&gt; {
 		if (id) {
 			if (!this.viewContainerMap.has(id)) {
 				console.error(&#x60;No view container with id ${id} found&#x60;);
@@ -963,7 +992,13 @@ export class PlaceholderService {
 			console.error(&quot;No view container defined! Likely due to a missing &#x60;cds-placeholder&#x60;&quot;);
 			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&lt;any&gt;) {