Merge branch 'master' into rkaraivanov/selection-range-interface

Author: kdinev

projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss

@@ -148,6 +148,7 @@
     }
 
     %igx-dialog-title {
+        display: flex;
         color: --var($theme, 'title-color');
         padding: $dialog-title-padding;
 

src/app/dialog/dialog.sample.css

@@ -3,7 +3,7 @@
 }
 
 .login-form {
-    padding: 24px;
+    padding: 0 24px 24px 24px;
 }
 
 .icon {

src/app/dialog/dialog.sample.html

@@ -90,5 +90,38 @@ <h4 class="sample-title">Custom Dialog</h4>
                 </div>
             </igx-dialog>
         </article>
+
+        <article class="sample-column">
+            <h4 class="sample-title">Templated Dialog</h4>
+            <p class="sample-description">Detailed description to be added</p>
+            <br>
+            <button igxButton="raised" igxRipple (click)="templated.open()">Trigger</button>
+
+            <igx-dialog #templated [closeOnOutsideSelect]="true">
+                <igx-dialog-title>Title</igx-dialog-title>
+
+                <div class="login-form">
+                    <igx-input-group>
+                        <igx-prefix>
+                            <igx-icon>person</igx-icon>
+                        </igx-prefix>
+                        <input type="text" igxInput />
+                        <label igxLabel>Username</label>
+                    </igx-input-group>
+                    <igx-input-group>
+                        <igx-prefix>
+                            <igx-icon>lock</igx-icon>
+                        </igx-prefix>
+                        <label igxLabel>Password</label>
+                        <input type="password" igxInput />
+                    </igx-input-group>
+                </div>
+
+                <igx-dialog-actions>
+                    <button igxButton (click)="templated.close()">CANCEL</button>
+                    <button igxButton (click)="templated.close()">SIGN IN</button>
+                </igx-dialog-actions>
+            </igx-dialog>
+        </article>
     </section>
 </div>