feat(combo): update samples content

src/app/lists/combo/combo-features/combo-features.component.html

@@ -1,12 +1,31 @@
+<div class="combo-features">
+    <div class="combo-column">
+        <igx-combo type="border" [data]="lData" displayKey="field" valueKey="field"
+            searchPlaceholder="Search…" [allowCustomValues]="customValues"
+            [disableFiltering]="disableFiltering" [showSearchCaseIcon]="showSearchCaseIcon"
+            [groupKey]="grouping ? 'region' : ''" [disabled]="disabled" [(ngModel)]="selection">
+            <label igxLabel>Location</label>
+        </igx-combo>
 
-<igx-combo #combo class="combo" [data]="lData" [displayKey]="'field'" [valueKey]="'field'"
-    placeholder="Location(s)" searchPlaceholder="Search..." [allowCustomValues]="customValues"
-    (addition)="handleAddition($event)" [disableFiltering]="disableFiltering"
-    [showSearchCaseIcon]="showSearchCaseIcon" [itemsMaxHeight]="255" [disabled]="disabled">
-</igx-combo>
+        <div class="selection-panel">
+            <span class="selection-title" id="features-selection-title">Selection</span>
+            @if (selection.length) {
+                <ul class="selection-list" aria-labelledby="features-selection-title">
+                    @for (item of selection; track item) {
+                        <li>{{ item }}</li>
+                    }
+                </ul>
+            } @else {
+                <span class="selection-empty">No items selected</span>
+            }
+        </div>
+    </div>
 
-<igx-switch [(ngModel)]="disableFiltering">Disable Filtering</igx-switch><br />
-<igx-switch [disabled]="disableFiltering" [(ngModel)]="showSearchCaseIcon">Show Case-sensitive Icon</igx-switch><br />
-<igx-switch [(ngModel)]="customValues">Allow Custom Values</igx-switch><br />
-<igx-switch (change)="enableGroups($event)">Enable Grouping</igx-switch><br />
-<igx-switch [(ngModel)]="disabled">Disable Combo</igx-switch>
+    <div class="controls">
+        <igx-switch [(ngModel)]="disableFiltering">Disable Filtering</igx-switch>
+        <igx-switch [disabled]="disableFiltering" [(ngModel)]="showSearchCaseIcon">Show Case-sensitive Icon</igx-switch>
+        <igx-switch [(ngModel)]="customValues">Allow Custom Values</igx-switch>
+        <igx-switch [(ngModel)]="grouping">Enable Grouping</igx-switch>
+        <igx-switch [(ngModel)]="disabled">Disable Combo</igx-switch>
+    </div>
+</div>

src/app/lists/combo/combo-features/combo-features.component.scss

@@ -1,4 +1,86 @@
-.combo, igx-switch {
-    margin: 8px;
-    width: 430px;
+:host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+}
+
+/* The combo sits in the middle, and the switches in the space on its right. */
+.combo-features {
+    display: grid;
+    flex: 1;
+    grid-template-columns: 1fr minmax(0, 22.5rem) 1fr;
+    align-items: center;
+    column-gap: 6rem;
+    padding: 1rem;
+}
+
+/* Keeps room below the combo for its open dropdown, so the two stay centered together. */
+.combo-column {
+    grid-column: 2;
+    min-height: 17.5rem;
+}
+
+/* The selected values of the combo, under it. */
+.selection-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    margin-top: 1.25rem;
+    padding: 0.75rem 1rem;
+}
+
+.selection-title {
+    color: var(--ig-gray-900);
+    font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family));
+    font-size: var(--ig-subtitle-2-font-size);
+    font-weight: var(--ig-subtitle-2-font-weight);
+    line-height: var(--ig-subtitle-2-line-height);
+    letter-spacing: var(--ig-subtitle-2-letter-spacing);
+}
+
+.selection-list,
+.selection-empty {
+    font-family: var(--ig-body-2-font-family, var(--ig-font-family));
+    font-size: var(--ig-body-2-font-size);
+    font-weight: var(--ig-body-2-font-weight);
+    line-height: var(--ig-body-2-line-height);
+    letter-spacing: var(--ig-body-2-letter-spacing);
+}
+
+/* A long selection scrolls, so the column keeps its height and the combo stays in place. */
+.selection-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    max-height: 8rem;
+    margin: 0;
+    padding: 0;
+    overflow-y: auto;
+    list-style: none;
+    color: var(--ig-gray-700);
+}
+
+.selection-empty {
+    color: var(--ig-gray-500);
+}
+
+.controls {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1.625rem;
+}
+
+@media (max-width: 50rem) {
+    .combo-features {
+        grid-template-columns: minmax(0, 22.5rem);
+        justify-content: center;
+        row-gap: 2rem;
+    }
+
+    .combo-column {
+        grid-column: 1;
+        min-height: 0;
+    }
 }

src/app/lists/combo/combo-features/combo-features.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { IgxComboComponent } from 'igniteui-angular/combo';
+import { IgxLabelDirective } from 'igniteui-angular/input-group';
 import { IgxSwitchComponent } from 'igniteui-angular/switch';
 import { localData } from './local-data';
 import { FormsModule } from '@angular/forms';
@@ -8,25 +9,18 @@ import { FormsModule } from '@angular/forms';
     selector: 'app-combo',
     styleUrls: ['./combo-features.component.scss'],
     templateUrl: './combo-features.component.html',
-    imports: [IgxComboComponent, IgxSwitchComponent, FormsModule]
+    imports: [IgxComboComponent, IgxLabelDirective, IgxSwitchComponent, FormsModule]
 })
 export class ComboFeaturesComponent implements OnInit{
-    @ViewChild('combo', { read: IgxComboComponent, static: true }) public combo: IgxComboComponent;
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    public GROUP_KEY = 'region';
     public lData: any[];
     public disableFiltering = false;
     public showSearchCaseIcon = false;
-    public customValues = true;
+    public customValues = false;
+    public grouping = false;
     public disabled = false;
+    public selection: string[] = [];
 
     public ngOnInit() {
         this.lData = localData;
     }
-
-    public handleAddition(event) { }
-
-    public enableGroups(event) {
-        this.combo.groupKey = event.checked ? this.GROUP_KEY : '';
-    }
 }

src/app/lists/combo/combo-features/local-data.ts

@@ -12,10 +12,9 @@ const division = {
     'South Atlantic 01': ['Delaware', 'Florida', 'Georgia', 'Maryland'],
     'South Atlantic 02': ['North Carolina', 'South Carolina', 'Virginia',
         'District of Columbia', 'West Virginia'],
-    'South Atlantic 03': ['District of Columbia', 'West Virginia'],
     'East South Central 01': ['Alabama', 'Kentucky'],
     'East South Central 02': ['Mississippi', 'Tennessee'],
-    'West South Central': ['Arkansas', 'Louisiana', 'Oklahome', 'Texas'],
+    'West South Central': ['Arkansas', 'Louisiana', 'Oklahoma', 'Texas'],
     'Mountain': ['Arizona', 'Colorado', 'Idaho', 'Montana', 'Nevada', 'New Mexico', 'Utah', 'Wyoming'],
     'Pacific 01': ['Alaska', 'California'],
     'Pacific 02': ['Hawaii', 'Oregon', 'Washington']
@@ -27,7 +26,8 @@ for (const key of keys) {
     division[key].map((e) => {
         localData.push({
             field: e,
-            region: key.substring(0, key.length - 3)
+            // The number only splits a region into shorter lists: "Pacific 01" is "Pacific".
+            region: key.replace(/ \d+$/, '')
         });
     });
 }

src/app/lists/combo/combo-overlay/combo-overlay.component.html

@@ -1,7 +1,27 @@
-<igx-combo
-    placeholder="Choose option(s)"
-    [data]="items"
-    valueKey="name"
-    displayKey="name"
-    [overlaySettings]="overlaySettings">
-</igx-combo>
+<div class="combo-column">
+    <igx-combo
+        #combo
+        type="border"
+        [data]="people"
+        valueKey="name"
+        displayKey="name"
+        groupKey="department"
+        searchPlaceholder="Search people…"
+        [(ngModel)]="selectedPeople"
+        [overlaySettings]="overlaySettings">
+        <label igxLabel>Team members</label>
+    </igx-combo>
+
+    <div class="selection-panel">
+        <span class="selection-title" id="overlay-selection-title">Selection</span>
+        @if (selectedPeople.length) {
+            <ul class="selection-list" aria-labelledby="overlay-selection-title">
+                @for (person of selectedPeople; track person) {
+                    <li>{{ person }}</li>
+                }
+            </ul>
+        } @else {
+            <span class="selection-empty">No items selected</span>
+        }
+    </div>
+</div>

src/app/lists/combo/combo-overlay/combo-overlay.component.scss

@@ -1,4 +1,56 @@
-.igx-combo {
-    width: 430px;
-    margin: 8px;
+:host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+}
+
+/* Keeps room below the combo for its open list, so the two stay centered together. */
+.combo-column {
+    width: 22.5rem;
+    min-height: 18.5rem;
+}
+
+/* The selected values of the combo, under it. */
+.selection-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    margin-top: 1.25rem;
+    padding: 0.75rem 1rem;
+}
+
+.selection-title {
+    color: var(--ig-gray-900);
+    font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family));
+    font-size: var(--ig-subtitle-2-font-size);
+    font-weight: var(--ig-subtitle-2-font-weight);
+    line-height: var(--ig-subtitle-2-line-height);
+    letter-spacing: var(--ig-subtitle-2-letter-spacing);
+}
+
+.selection-list,
+.selection-empty {
+    font-family: var(--ig-body-2-font-family, var(--ig-font-family));
+    font-size: var(--ig-body-2-font-size);
+    font-weight: var(--ig-body-2-font-weight);
+    line-height: var(--ig-body-2-line-height);
+    letter-spacing: var(--ig-body-2-letter-spacing);
+}
+
+/* A long selection scrolls, so the column keeps its height and the combo stays in place. */
+.selection-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    max-height: 8rem;
+    margin: 0;
+    padding: 0;
+    overflow-y: auto;
+    list-style: none;
+    color: var(--ig-gray-700);
+}
+
+.selection-empty {
+    color: var(--ig-gray-500);
 }

src/app/lists/combo/combo-overlay/combo-overlay.component.ts

@@ -1,22 +1,47 @@
-import { Component } from '@angular/core';
-import { GlobalPositionStrategy, OverlaySettings } from 'igniteui-angular/core';
+import { AfterViewInit, Component, ViewChild } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { OverlaySettings } from 'igniteui-angular/core';
 import { IgxComboComponent } from 'igniteui-angular/combo';
-import { scaleInCenter, scaleOutCenter } from 'igniteui-angular/animations';
+import { IgxLabelDirective } from 'igniteui-angular/input-group';
 
 @Component({
     selector: 'app-combo-overlay',
     templateUrl: 'combo-overlay.component.html',
     styleUrls: ['combo-overlay.component.scss'],
-    imports: [IgxComboComponent]
+    imports: [IgxComboComponent, IgxLabelDirective, FormsModule]
 })
-export class ComboOverlayComponent {
-    public items = [{ name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' },
-    { name: 'Option 4' }, { name: 'Option 5' }, { name: 'Option 6' },
-    { name: 'Option 7' }, { name: 'Option 8' }, { name: 'Option 9' }];
+export class ComboOverlayComponent implements AfterViewInit {
+    @ViewChild('combo', { static: true })
+    public combo: IgxComboComponent;
 
+    public people = [
+        { name: 'Ana Petrova', department: 'Engineering' },
+        { name: 'Marc Lee', department: 'Engineering' },
+        { name: 'Priya Nair', department: 'Engineering' },
+        { name: 'Tom Becker', department: 'Engineering' },
+        { name: 'Yuki Sato', department: 'Engineering' },
+        { name: 'Daniel Kim', department: 'Finance' },
+        { name: 'Elena Popescu', department: 'Finance' },
+        { name: 'Grace Okafor', department: 'Finance' },
+        { name: 'Hugo Martin', department: 'Marketing' },
+        { name: 'Isabel Costa', department: 'Marketing' },
+        { name: 'Lena Fischer', department: 'Marketing' },
+        { name: 'Jonas Berg', department: 'Sales' },
+        { name: 'Omar Haddad', department: 'Sales' },
+        { name: 'Sofia Rossi', department: 'Sales' }
+    ];
+
+    public selectedPeople = ['Ana Petrova', 'Marc Lee'];
+
+    /* Merged over the combo's own settings, so the list still opens below the combo.
+       A modal overlay dims the page behind the list, and a click outside closes it. */
     public overlaySettings: OverlaySettings = {
-        positionStrategy: new GlobalPositionStrategy({ openAnimation: scaleInCenter, closeAnimation: scaleOutCenter }),
         modal: true,
         closeOnOutsideClick: true
     };
+
+    // Opens the list on load, so the sample shows the overlay right away.
+    public ngAfterViewInit() {
+        this.combo.open();
+    }
 }