Fix inconsistent templates rendering by nested components

Author: kvet

CHANGELOG.md

@@ -1,3 +1,23 @@
+## Unreleased
+
+### Breaking changes
+
+- Item template defined in `dxi-item` and `dxTemplate` now works consistently.
+
+Previously, the result of the `dxi-item` in the DxList was rendered as follows:
+```html
+<div class="dx-item-content">
+    <dxi-item>...</dxi-item>
+</div>
+```
+
+Currently, this will be rendered as follows:
+```html
+<dxi-item class="dx-item-content">
+    ...
+</dxi-item>
+```
+
 ## 16.2.3-rc.4 (2017-01-13)
 
 ### Features

src/core/nested-option.ts

@@ -1,5 +1,10 @@
 import { QueryList, ElementRef } from '@angular/core';
 
+declare function require(params: any): any;
+let $ = require('jquery');
+
+import { DX_TEMPLATE_WRAPPER_CLASS } from './template';
+
 export interface INestedOptionContainer {
     instance: any;
 }
@@ -138,8 +143,12 @@ export function extractTemplate(option: OptionWithTemplate, element: ElementRef)
     }
 
     option.template = {
-        render: (options) => {
-            return options.container.append(element.nativeElement);
+        render: (renderData) => {
+            if (renderData.container) {
+                renderData.container.append(element.nativeElement);
+            }
+            return $(element.nativeElement)
+                .addClass(DX_TEMPLATE_WRAPPER_CLASS);
         }
     };
 }

src/core/template.ts

@@ -13,7 +13,7 @@ import { DxTemplateHost } from './template-host';
 declare function require(params: any): any;
 let $ = require('jquery');
 
-const DX_TEMPLATE_WRAPPER_CLASS = 'dx-template-wrapper';
+export const DX_TEMPLATE_WRAPPER_CLASS = 'dx-template-wrapper';
 
 export class RenderData {
     model: any;

templates/nested-component.tst

@@ -21,6 +21,7 @@ import { <#= it.baseClass #> } from '<#= it.basePath #>';
 @Component({
     selector: '<#= it.selector #>',
     template: '<#? it.hasTemplate #><ng-content></ng-content><#?#>',
+    styles: ['<#? it.hasTemplate #>:host { display: block; }<#?#>'],
     providers: [NestedOptionHost]<#? it.inputs #>,
     inputs: [<#~ it.inputs :input:i #>
         '<#= input.name #>'<#? i < it.inputs.length-1 #>,<#?#><#~#>

tests/src/ui/list.spec.ts

@@ -111,6 +111,24 @@ describe('DxList', () => {
         expect(instance.element().find('.dx-item-content').eq(1).text()).toBe('Item 2');
     }));
 
+    it('should have correct item template', async(() => {
+        TestBed.overrideComponent(TestContainerComponent, {
+            set: {
+                template: `
+                    <dx-list>
+                        <dxi-item>item</dxi-item>
+                    </dx-list>
+                `
+            }
+        });
+        let fixture = TestBed.createComponent(TestContainerComponent);
+        fixture.detectChanges();
+
+        let instance = getWidget(fixture);
+        expect(instance.element().find('.dx-item-content').html()).toBe('item');
+        expect(instance.element().find('.dx-item-content').css('display')).toBe('block');
+    }));
+
     it('should react to item option change', async(() => {
         TestBed.overrideComponent(TestContainerComponent, {
             set: {