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

src/app/accordion-showcase/accordion-showcase.sample.html

@@ -0,0 +1,93 @@
+<h3 class="sample-title">Angular Accordion</h3>
+<igx-accordion #accordion id="igx-accordion">
+    <igx-expansion-panel>
+        <igx-expansion-panel-header>
+            <igx-expansion-panel-title>HTML5</igx-expansion-panel-title>
+        </igx-expansion-panel-header>
+        <igx-expansion-panel-body>
+            <igx-accordion>
+                <igx-expansion-panel>
+                    <igx-expansion-panel-header>
+                        <igx-expansion-panel-title>First</igx-expansion-panel-title>
+                    </igx-expansion-panel-header>
+                    <igx-expansion-panel-body>
+                        <div>
+                            Content1
+                        </div>
+                    </igx-expansion-panel-body>
+                </igx-expansion-panel>
+                <igx-expansion-panel>
+                    <igx-expansion-panel-header>
+                        <igx-expansion-panel-title>Second</igx-expansion-panel-title>
+                    </igx-expansion-panel-header>
+                    <igx-expansion-panel-body>
+                        <div>
+                            Content2
+                        </div>
+                    </igx-expansion-panel-body>
+                </igx-expansion-panel>
+            </igx-accordion>
+        </igx-expansion-panel-body>
+    </igx-expansion-panel>
+    <igx-expansion-panel>
+        <igx-expansion-panel-header>
+            <igx-expansion-panel-title>CSS3</igx-expansion-panel-title>
+        </igx-expansion-panel-header>
+        <igx-expansion-panel-body>
+            <div class="example-content">
+                Cascading Style Sheets (CSS) is a style sheet language used for
+                describing the presentation of a document written in a markup language
+                like HTML
+            </div>
+        </igx-expansion-panel-body>
+    </igx-expansion-panel>
+    <igx-expansion-panel>
+        <igx-expansion-panel-header>
+            <igx-expansion-panel-title>SASS/SCSS</igx-expansion-panel-title>
+        </igx-expansion-panel-header>
+        <igx-expansion-panel-body>
+            <div class="example-content">
+                Sass is a preprocessor scripting language that is interpreted or
+                compiled into Cascading Style Sheets (CSS).
+            </div>
+        </igx-expansion-panel-body>
+    </igx-expansion-panel>
+</igx-accordion>
+
+<h3 class="sample-title">WC Accordion</h3>
+<igc-accordion #accordion>
+    <igc-expansion-panel class="my-expansion-panel" id="html5" [collapsed]="false">
+        <span slot="title">HTML5</span>
+        <div>
+            <igc-accordion>
+                <igc-expansion-panel>
+                    <span slot="title">First</span>
+                    <div>
+                        Content1
+                    </div>
+                </igc-expansion-panel>
+                <igc-expansion-panel>
+                    <span slot="title">Second</span>
+                    <div>
+                        Content2
+                    </div>
+                </igc-expansion-panel>
+            </igc-accordion>
+        </div>
+    </igc-expansion-panel>
+    <igc-expansion-panel class="my-expansion-panel" id="css" [collapsed]="true">
+        <span slot="title">CSS3</span>
+        <div class="example-content">
+            Cascading Style Sheets (CSS) is a style sheet language used for
+            describing the presentation of a document written in a markup language
+            like HTML
+        </div>
+    </igc-expansion-panel>
+    <igc-expansion-panel class="my-expansion-panel" class="my-expansion-panel" id="scss" [collapsed]="false">
+        <span slot="title">SASS/SCSS</span>
+        <div class="example-content">
+            Sass is a preprocessor scripting language that is interpreted or
+            compiled into Cascading Style Sheets (CSS).
+        </div>
+    </igc-expansion-panel>
+</igc-accordion>

src/app/accordion-showcase/accordion-showcase.sample.scss

@@ -0,0 +1,3 @@
+#igx-accordion {
+    margin-bottom: 42px;
+}

src/app/accordion-showcase/accordion-showcase.sample.ts

@@ -0,0 +1,16 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { IGX_ACCORDION_DIRECTIVES } from 'igniteui-angular';
+import { IgcAccordionComponent, IgcExpansionPanelComponent, defineComponents } from 'igniteui-webcomponents';
+
+defineComponents(IgcAccordionComponent, IgcExpansionPanelComponent);
+
+@Component({
+    selector: 'app-accordion-showcase-sample',
+    templateUrl: 'accordion-showcase.sample.html',
+    styleUrls: ['accordion-showcase.sample.scss'],
+    standalone: true,
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    imports: [FormsModule, IGX_ACCORDION_DIRECTIVES]
+})
+export class AccordionShowcaseSampleComponent {}

src/app/app.component.html

@@ -31,10 +31,18 @@
             <!--Style guide-->
             <span igxDrawerItem [isHeader]="true">Style</span>
 
-            <span *ngFor="let item of styleLinks" 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>
+                <span *ngFor="let item of styleLinks" 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>
+
+                <!--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>
         </ng-template>
 
         <ng-template *ngIf="drawerState.miniVariant" igxDrawerMini>
@@ -56,6 +64,21 @@
         </ng-template>
     </igx-nav-drawer>
 
+    @let config = (propertyChangeService.panelConfig$ | async | keyvalue)?.length > 0;
+
+    <igx-nav-drawer
+        *ngIf="config"
+        #paneldrawer
+        [pin]="true"
+        position="right"
+        [isOpen]="config"
+        id="paneldrawer">
+
+        <ng-template igxDrawer>
+            <app-properties-panel></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

@@ -1,11 +1,13 @@
-import { Component, OnInit, ViewChild, HostBinding } from '@angular/core';
+import { Component, OnInit, ViewChild, HostBinding, inject } from '@angular/core';
 import { Router, NavigationStart, NavigationEnd, RouterLinkActive, RouterLink, RouterOutlet } from '@angular/router';
 import { filter } from 'rxjs/operators';
 import { IgxNavigationDrawerComponent, IgxIconService, IgxRippleDirective } from 'igniteui-angular';
 import { PageHeaderComponent } from './pageHeading/pageHeading.component';
 import { IgxIconComponent } from '../../projects/igniteui-angular/src/lib/icon/icon.component';
-import { NgFor, NgIf } from '@angular/common';
+import { CommonModule } from '@angular/common';
 import { IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, IgxNavDrawerMiniTemplateDirective } from '../../projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.directives';
+import { PropertiesPanelComponent } from './properties-panel/properties-panel.component';
+import { PropertyChangeService } from './properties-panel/property-change.service';
 
 @Component({
     selector: 'app-root',
@@ -16,15 +18,15 @@ import { IgxNavDrawerTemplateDirective, IgxNavDrawerItemDirective, IgxNavDrawerM
 		IgxNavigationDrawerComponent,
 		IgxNavDrawerTemplateDirective,
 		IgxNavDrawerItemDirective,
-		NgFor,
 		RouterLinkActive,
 		RouterLink,
 		IgxIconComponent,
-		NgIf,
+		CommonModule,
 		IgxNavDrawerMiniTemplateDirective,
 		PageHeaderComponent,
 		RouterOutlet,
 		IgxRippleDirective,
+        PropertiesPanelComponent
 	],
 })
 export class AppComponent implements OnInit {
@@ -34,6 +36,8 @@ export class AppComponent implements OnInit {
     @ViewChild('navdrawer', { read: IgxNavigationDrawerComponent, static: true })
     public navdrawer;
 
+    protected propertyChangeService = inject(PropertyChangeService);
+
     public urlString: string;
 
     public drawerState = {
@@ -698,6 +702,159 @@ export class AppComponent implements OnInit {
         }
     ].sort((componentLink1, componentLink2) => componentLink1.name > componentLink2.name ? 1 : -1);
 
+    public WcCompareLinks = [
+        {
+            link: '/accordion-showcase',
+            icon: 'radio_button_unchecked',
+            name: 'Accordion'
+        },
+        {
+            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: '/circular-progress-showcase',
+            icon: 'radio_button_unchecked',
+            name: 'Circular Progress'
+        },
+        {
+            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: '/linear-progress',
+            icon: 'radio_button_unchecked',
+            name: 'Linear Progress'
+        },
+        {
+            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) {
         iconService.setFamily('fa-solid', { className: 'fa', type: 'font', prefix: 'fa-'});
         iconService.setFamily('fa-brands', { className: 'fab', type: 'font' });