feat(demos): add compared to WC section with samples to compare components

src/app/app.component.html

@@ -36,6 +36,14 @@
                     <igx-icon>{{item.icon}}</igx-icon>
                     <span class="navdrawer-ellipsis">{{item.name}}</span>
                 </span>
+
+                <!--WC Comparisons-->
+                <span igxDrawerItem [isHeader]="true">Compared to WC</span>
+
+                <span *ngFor="let item of WcCompareLinks" igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{item.link}}">
+                    <igx-icon>{{item.icon}}</igx-icon>
+                    <span class="navdrawer-ellipsis">{{item.name}}</span>
+                </span>
             </nav>
         </ng-template>
 
@@ -60,6 +68,19 @@
         </ng-template>
     </igx-nav-drawer>
 
+    <igx-nav-drawer
+        *ngIf="panelConfig"
+        #paneldrawer
+        [pin]="true"
+        position="right"
+        [isOpen]="panelConfig"
+        id="paneldrawer">
+
+        <ng-template igxDrawer>
+            <app-properties-panel [config]="panelConfig"></app-properties-panel>
+        </ng-template>
+    </igx-nav-drawer>
+
     <div [style.paddingLeft]="drawerState.miniVariant && !drawerState.pin ? '60px' : null" class="content">
         <app-page-header [title]="urlString"></app-page-header>
         <div class="sample-wrapper">

src/app/app.component.scss

@@ -1,3 +1,7 @@
 .test {
     color: red;
 }
+
+#paneldrawer {
+    --igx-nav-drawer-size: 27rem;
+}

src/app/app.component.ts

@@ -6,6 +6,8 @@ import { PageHeaderComponent } from './pageHeading/pageHeading.component';
 import { IgxIconComponent } from '../../projects/igniteui-angular/src/lib/icon/icon.component';
 import { NgFor, NgIf } from '@angular/common';
 import { IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, IgxNavDrawerMiniTemplateDirective } from '../../projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.directives';
+import { PropertiesPanelComponent, PropertyPanelConfig } from './properties-panel/properties-panel.component';
+import { PropertyChangeService } from './properties-panel/property-change.service';
 
 @Component({
     selector: 'app-root',
@@ -25,6 +27,7 @@ import { IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, IgxNavDrawerM
 		PageHeaderComponent,
 		RouterOutlet,
 		IgxRippleDirective,
+        PropertiesPanelComponent
 	],
 })
 export class AppComponent implements OnInit {
@@ -34,6 +37,8 @@ export class AppComponent implements OnInit {
     @ViewChild('navdrawer', { read: IgxNavigationDrawerComponent, static: true })
     public navdrawer;
 
+    public panelConfig: PropertyPanelConfig | null = null;
+
     public urlString: string;
 
     public drawerState = {
@@ -698,10 +703,152 @@ export class AppComponent implements OnInit {
         }
     ].sort((componentLink1, componentLink2) => componentLink1.name > componentLink2.name ? 1 : -1);
 
-    constructor(private router: Router, private iconService: IgxIconService) {
+    public WcCompareLinks = [
+        {
+            link: '/avatar-showcase',
+            icon: 'radio_button_unchecked',
+            name: 'Avatar'
+        },
+        {
+            link: '/badge-showcase',
+            icon: 'radio_button_unchecked',
+            name: 'Badge'
+        },
+        {
+            link: '/banner-showcase',
+            icon: 'radio_button_unchecked',
+            name: 'Banner'
+        },
+        {
+            link: '/button-showcase',
+            icon: 'radio_button_unchecked',
+            name: 'Buttons'
+        },
+        {
+            link: '/buttonGroup-showcase',
+            icon: 'radio_button_unchecked',
+            name: 'Button Group'
+        },
+        {
+            link: '/calendar-showcase',
+            icon: 'radio_button_unchecked',
+            name: 'Calendar'
+        },
+        {
+            link: '/card-showcase',
+            icon: 'radio_button_unchecked',
+            name: 'Card'
+        },
+        {
+            link: '/carousel-showcase',
+            icon: 'radio_button_unchecked',
+            name: 'Carousel'
+        },
+        {
+            link: '/checkbox-showcase',
+            icon: 'radio_button_unchecked',
+            name: 'Checkbox'
+        },
+        {
+            link: '/chip-showcase',
+            icon: 'radio_button_unchecked',
+            name: 'Chips'
+        },
+        {
+            link: '/combo-showcase',
+            icon: 'radio_button_unchecked',
+            name: 'Combo'
+        },
+        {
+            link: '/datePicker-showcase',
+            icon: 'radio_button_unchecked',
+            name: 'Date Picker'
+        },
+        {
+            link: '/dialog-showcase',
+            icon: 'radio_button_unchecked',
+            name: 'Dialog'
+        },
+        {
+            link: '/dropDown-showcase',
+            icon: 'radio_button_unchecked',
+            name: 'DropDown'
+        },
+        {
+            link: '/expansionPanel-showcase',
+            icon: 'radio_button_unchecked',
+            name: 'Expansion Panel'
+        },
+        {
+            link: '/icon-button-showcase',
+            icon: 'radio_button_unchecked',
+            name: 'Icon Button'
+        },
+        {
+            link: '/input-group-showcase',
+            icon: 'radio_button_unchecked',
+            name: 'Input Group'
+        },
+        {
+            link: '/list-showcase',
+            icon: 'radio_button_unchecked',
+            name: 'List'
+        },
+        {
+            link: '/radio-showcase',
+            icon: 'radio_button_unchecked',
+            name: 'Radio'
+        },
+        {
+            link: '/select-showcase',
+            icon: 'radio_button_unchecked',
+            name: 'Select'
+        },
+        {
+            link: '/slider-showcase',
+            icon: 'radio_button_unchecked',
+            name: 'Slider'
+        },
+        {
+            link: '/snackbar-showcase',
+            icon: 'radio_button_unchecked',
+            name: 'Snackbar'
+        },
+        {
+            link: '/stepper-showcase',
+            icon: 'radio_button_unchecked',
+            name: 'Stepper'
+        },
+        {
+            link: '/switch-showcase',
+            icon: 'radio_button_unchecked',
+            name: 'Switch'
+        },
+        {
+            link: '/tabs-showcase',
+            icon: 'radio_button_unchecked',
+            name: 'Tabs'
+        },
+        {
+            link: '/toast-showcase',
+            icon: 'radio_button_unchecked',
+            name: 'Toast'
+        },
+        {
+            link: '/tree-showcase',
+            icon: 'radio_button_unchecked',
+            name: 'Tree'
+        }
+    ].sort((componentLink1, componentLink2) => componentLink1.name > componentLink2.name ? 1 : -1);
+
+    constructor(private router: Router, private iconService: IgxIconService, private propertyChangeService: PropertyChangeService) {
         iconService.setFamily('fa-solid', { className: 'fa', type: 'font', prefix: 'fa-'});
         iconService.setFamily('fa-brands', { className: 'fab', type: 'font' });
 
+        this.propertyChangeService.panelConfig$.subscribe(config => {
+            this.panelConfig = config;
+        });
+
         router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
             for (const component of this.componentLinks) {
                 if (component.link === router.url) {