feat(query-builder): update overview and template samples

Author: igdmdimitrov

src/app/interactions/query-builder/query-builder-sample-1/query-builder-sample-1.component.html

@@ -2,7 +2,6 @@
     <igx-query-builder #queryBuilder
         [entities]="entities"
         [expressionTree]="expressionTree">
-        <igx-query-builder-header [title]="'Query Builder Overview'"></igx-query-builder-header>
     </igx-query-builder>
 
     <div class="output-area">

src/app/interactions/query-builder/query-builder-sample-1/query-builder-sample-1.component.scss

@@ -5,11 +5,7 @@
 }
 
 .output-area{
-    overflow-y: auto;
-    height: 200px;
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
-    margin-top: 15px;
-    margin-right: 15px;
+    box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.75);
     border-radius: 4px;
-    padding-left: 16px;
+    margin: 0 20px 20px 20px;
 }

src/app/interactions/query-builder/query-builder-sample-1/query-builder-sample-1.component.ts

@@ -1,11 +1,11 @@
 import { Component, OnInit } from '@angular/core';
-import { FilteringExpressionsTree, FilteringLogic, IExpressionTree, IgxBooleanFilteringOperand, IgxDateFilteringOperand, IgxNumberFilteringOperand, IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxStringFilteringOperand } from 'igniteui-angular';
+import { FilteringExpressionsTree, FilteringLogic, IExpressionTree, IgxBooleanFilteringOperand, IgxDateFilteringOperand, IgxNumberFilteringOperand, IgxQueryBuilderComponent, IgxStringFilteringOperand } from 'igniteui-angular';
 
 @Component({
     selector: 'app-query-builder-sample-1',
     styleUrls: ['./query-builder-sample-1.component.scss'],
     templateUrl: 'query-builder-sample-1.component.html',
-    imports: [IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent]
+    imports: [IgxQueryBuilderComponent]
 })
 export class QueryBuilderSample1Component implements OnInit {
     public entities: any[];
@@ -87,8 +87,8 @@ export class QueryBuilderSample1Component implements OnInit {
         const tree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Orders', ['*']);
         tree.filteringOperands.push({
             fieldName: 'CompanyID',
-            condition: IgxStringFilteringOperand.instance().condition('in'),
-            conditionName: 'in',
+            condition: IgxStringFilteringOperand.instance().condition('inQuery'),
+            conditionName: 'inQuery',
             searchTree: innerTree
         });
         tree.filteringOperands.push({

src/app/interactions/query-builder/query-builder-template-sample/query-builder-template-sample.component.scss

@@ -5,13 +5,9 @@
 }
 
 .output-area{
-    overflow-y: auto;
-    height: 200px;
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
-    margin-top: 15px;
-    margin-right: 15px;
+    box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.75);
     border-radius: 4px;
-    padding-left: 16px;
+    margin: 0 20px 20px 20px;
 }
 
 igx-radio-group{