Update simple combo samples (#2876)

Author: wnvko

src/app/data/cities15000-regions-countries.ts

@@ -176719,7 +176719,8 @@ export const cities: City[] = [
 ];
 
 export const getCitiesByPopulation = (population = 100000): City[] => cities
-    .filter(c => c.population > population);
+    .filter(c => c.population > population)
+    .sort((a, b) => b.population - a.population);
 
 export const getCountries = (countries: string[], population = 100000): Country[] => getCitiesByPopulation(population)
     .filter(c => countries.findIndex(s => s === c.country) > -1)

src/app/lists/combo/simple-combo-cascading/simple-combo-cascading.component.html

@@ -5,12 +5,13 @@
             (selectionChanging)="countryChanging($event)"
             placeholder="Choose Country..."
             [(ngModel)]="selectedCountry"
-            [displayKey]="'name'"></igx-simple-combo>
+            [displayKey]="'name'">
+        </igx-simple-combo>
     </div>
     <div class="combo-section">
-        <igx-simple-combo #province
+        <igx-simple-combo #region
             [data]="regionData"
-            (selectionChanging)="provinceChanging($event)"
+            (selectionChanging)="regionChanging($event)"
             placeholder="Choose Region..."
             [(ngModel)]="selectedRegion"
             [displayKey]="'name'"
@@ -23,7 +24,6 @@
             placeholder="Choose City..."
             [(ngModel)]="selectedCity"
             [displayKey]="'name'"
-            [valueKey]="'id'"
             [disabled]="citiesData.length === 0">
         </igx-simple-combo>
     </div>

src/app/lists/combo/simple-combo-cascading/simple-combo-cascading.component.ts

@@ -28,7 +28,7 @@ export class SimpleComboCascadingComponent implements OnInit {
         this.citiesData = [];
     }
 
-    public provinceChanging(e: ISimpleComboSelectionChangingEventArgs) {
+    public regionChanging(e: ISimpleComboSelectionChangingEventArgs) {
         this.selectedRegion = e.newSelection as Region;
         this.citiesData = getCitiesByCountry([this.selectedCountry?.name])
             .filter(c => c.region === this.selectedRegion?.name);

src/app/lists/combo/simple-combo-main/simple-combo-main.component.html

@@ -1,6 +1,6 @@
 <div class="sample-wrapper">
     <div class="combo-section">
-        <igx-simple-combo
+        <igx-simple-combo class="input-container"
             [data]="trendLineTypes"
             [(ngModel)]="trendLineType"
             [type]="'border'"

src/app/lists/combo/simple-combo-main/simple-combo-main.component.scss

@@ -8,3 +8,8 @@
     justify-content: space-between;
     margin-bottom: 3rem;
 }
+
+.input-container {
+    flex-grow: 1;
+    max-width: 300px;
+}

src/app/lists/combo/simple-combo-main/simple-combo-main.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { IgRect } from 'igniteui-angular-core';
 import { StockData, updatedStockData } from '../../../data/stocks-data';
 
@@ -7,7 +7,7 @@ import { StockData, updatedStockData } from '../../../data/stocks-data';
     templateUrl: 'simple-combo-main.component.html',
     styleUrls: ['simple-combo-main.component.scss']
 })
-export class SimpleComboMainComponent {
+export class SimpleComboMainComponent implements OnInit {
     public data: StockData[] = updatedStockData;
     public selectedRange: string;
     public trendLineType: string;
@@ -52,8 +52,6 @@ export class SimpleComboMainComponent {
                 startDate = this.data[0].time;
                 break;
         }
-        console.log('Start: ', startDate);
-        console.log('End: ', this.data[this.data.length - 1].time);
         this.windowRect = this.getWindowRect(startDate);
     }
 

src/app/lists/combo/simple-combo-styling/simple-combo-styling.component.html

@@ -1,5 +1,8 @@
 <div class="sample-wrapper">
     <div class="input-row">
-        <igx-simple-combo [data]="cities" [displayKey]="'name'"></igx-simple-combo>
+        <igx-simple-combo
+            [overlaySettings]="{ outlet: element.nativeElement }"
+            [data]="cities" [displayKey]="'name'">
+        </igx-simple-combo>
     </div>
 </div>

src/app/lists/combo/simple-combo-styling/simple-combo-styling.component.scss

@@ -1,4 +1,4 @@
-@import '../../../../variables';
+@use '../../../../variables' as *;
 
 // Browser samples related styling
 .sample-wrapper {
@@ -29,7 +29,7 @@ $custom-drop-down-theme: igx-drop-down-theme(
     $selected-focus-item-text-color: #1a5214,
 );
 
-:host {
+:host ::ng-deep {
     @include igx-css-vars($custom-simple-combo-theme);
     @include igx-css-vars($custom-drop-down-theme);
 }

src/app/lists/combo/simple-combo-styling/simple-combo-styling.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, ElementRef, OnInit } from '@angular/core';
 import { City, getCitiesByPopulation } from '../../../data/cities15000-regions-countries';
 
 @Component({
@@ -8,6 +8,9 @@ import { City, getCitiesByPopulation } from '../../../data/cities15000-regions-c
 })
 export class SimpleComboStylingComponent implements OnInit {
     public cities: City[];
+
+    constructor(public element: ElementRef) { }
+
     ngOnInit(): void {
         this.cities = getCitiesByPopulation(10000000);
     }

src/app/lists/combo/simple-combo-usage/simple-combo-usage.component.html

@@ -4,7 +4,7 @@
         </igx-simple-combo>
     </div>
     <div *ngIf="!!selectedCity">
-        <h6>Selected City:</h6>
+        <h6>Selected City's Id:</h6>
         <div>{{ selectedCity }}</div>
     </div>
 </div>