From 07b602fb5d3b910e883e9f7556c374e3dd2cfeb6 Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Tue, 24 Sep 2024 08:11:29 +0300
Subject: [PATCH 01/18] feat(sample): add compared to WC section with samples
 to compare components

---
 src/app/app.component.html                    |   8 +
 src/app/app.component.ts                      | 113 ++++++
 src/app/app.routes.ts                         | 113 +++++-
 .../avatar-showcase.sample.html               |  18 +
 .../avatar-showcase.sample.scss               |  11 +
 .../avatar-showcase/avatar-showcase.sample.ts |  14 +
 .../badge-showcase/badge-showcase.sample.html |  15 +
 .../badge-showcase/badge-showcase.sample.scss |  14 +
 .../badge-showcase/badge-showcase.sample.ts   |  14 +
 .../banner-showcase.sample.html               |  33 ++
 .../banner-showcase.sample.scss               |   9 +
 .../banner-showcase/banner-showcase.sample.ts |  44 +++
 .../button-showcase.sample.html               |  80 ++++
 .../button-showcase.sample.scss               |  21 ++
 .../button-showcase/button-showcase.sample.ts |  17 +
 .../buttonGroup-showcase.sample.html          |  44 +++
 .../buttonGroup-showcase.sample.ts            | 107 ++++++
 .../card-showcase/card-showcase.sample.html   |  69 ++++
 .../card-showcase/card-showcase.sample.scss   |  17 +
 src/app/card-showcase/card-showcase.sample.ts |  70 ++++
 .../chips-showcase/chips-showcase.sample.html | 112 ++++++
 .../chips-showcase/chips-showcase.sample.scss | 143 ++++++++
 .../chips-showcase/chips-showcase.sample.ts   |  53 +++
 .../combo-showcase/combo-showcase.sample.html |  32 ++
 .../combo-showcase/combo-showcase.sample.scss |  56 +++
 .../combo-showcase/combo-showcase.sample.ts   |  63 ++++
 .../date-picker-showcase.sample.html          |  38 ++
 .../date-picker-showcase.sample.scss          |  30 ++
 .../date-picker-showcase.sample.ts            |  28 ++
 .../dialog-showcase.sample.html               |  25 ++
 .../dialog-showcase.sample.scss               |  19 +
 .../dialog-showcase/dialog-showcase.sample.ts |  26 ++
 .../drop-down-showcase.sample.html            |  32 ++
 .../drop-down-showcase.sample.scss            |   9 +
 .../drop-down-showcase.sample.ts              | 224 ++++++++++++
 src/app/drop-down-showcase/foods.ts           |  43 +++
 .../expansion-panel-showcase-sample.html      |  33 ++
 .../expansion-panel-showcase-sample.scss      |  15 +
 .../expansion-panel-showcase-sample.ts        |  16 +
 .../input-group-showcase.sample.html          |  37 ++
 .../input-group-showcase.sample.scss          |   7 +
 .../input-group-showcase.sample.ts            | 143 ++++++++
 .../inputs-showcase.sample.html               |  51 +++
 .../inputs-showcase.sample.scss               |  27 ++
 .../inputs-showcase/inputs-showcase.sample.ts |  93 +++++
 .../list-showcase/list-showcase.sample.html   |  40 ++
 .../list-showcase/list-showcase.sample.scss   |  10 +
 src/app/list-showcase/list-showcase.sample.ts | 270 ++++++++++++++
 .../select-showcase.sample.html               |  37 ++
 .../select-showcase.sample.scss               |  10 +
 .../select-showcase/select-showcase.sample.ts | 168 +++++++++
 .../slider-showcase.sample.html               |  22 ++
 .../slider-showcase.sample.scss               |  12 +
 .../slider-showcase/slider-showcase.sample.ts | 100 +++++
 .../snackbar-showcase.sample.css              |   4 +
 .../snackbar-showcase.sample.html             |  35 ++
 .../snackbar-showcase.sample.ts               |  76 ++++
 .../stepper-showcase.sample.html              | 139 +++++++
 .../stepper-showcase.sample.scss              |  19 +
 .../stepper-showcase.sample.ts                | 169 +++++++++
 .../tabs-showcase/tabs-showcase.sample.html   | 101 +++++
 .../tabs-showcase/tabs-showcase.sample.scss   |  10 +
 src/app/tabs-showcase/tabs-showcase.sample.ts | 242 ++++++++++++
 .../toast-showcase/toast-showcase.sample.html |  25 ++
 .../toast-showcase/toast-showcase.sample.scss |  19 +
 .../toast-showcase/toast-showcase.sample.ts   |  14 +
 .../tree-showcase/tree-showcase.sample.html   |  39 ++
 .../tree-showcase/tree-showcase.sample.scss   |  16 +
 src/app/tree-showcase/tree-showcase.sample.ts | 346 ++++++++++++++++++
 69 files changed, 4108 insertions(+), 1 deletion(-)
 create mode 100644 src/app/avatar-showcase/avatar-showcase.sample.html
 create mode 100644 src/app/avatar-showcase/avatar-showcase.sample.scss
 create mode 100644 src/app/avatar-showcase/avatar-showcase.sample.ts
 create mode 100644 src/app/badge-showcase/badge-showcase.sample.html
 create mode 100644 src/app/badge-showcase/badge-showcase.sample.scss
 create mode 100644 src/app/badge-showcase/badge-showcase.sample.ts
 create mode 100644 src/app/banner-showcase/banner-showcase.sample.html
 create mode 100644 src/app/banner-showcase/banner-showcase.sample.scss
 create mode 100644 src/app/banner-showcase/banner-showcase.sample.ts
 create mode 100644 src/app/button-showcase/button-showcase.sample.html
 create mode 100644 src/app/button-showcase/button-showcase.sample.scss
 create mode 100644 src/app/button-showcase/button-showcase.sample.ts
 create mode 100644 src/app/buttonGroup-showcase/buttonGroup-showcase.sample.html
 create mode 100644 src/app/buttonGroup-showcase/buttonGroup-showcase.sample.ts
 create mode 100644 src/app/card-showcase/card-showcase.sample.html
 create mode 100644 src/app/card-showcase/card-showcase.sample.scss
 create mode 100644 src/app/card-showcase/card-showcase.sample.ts
 create mode 100644 src/app/chips-showcase/chips-showcase.sample.html
 create mode 100644 src/app/chips-showcase/chips-showcase.sample.scss
 create mode 100644 src/app/chips-showcase/chips-showcase.sample.ts
 create mode 100644 src/app/combo-showcase/combo-showcase.sample.html
 create mode 100644 src/app/combo-showcase/combo-showcase.sample.scss
 create mode 100644 src/app/combo-showcase/combo-showcase.sample.ts
 create mode 100644 src/app/date-picker-showcase/date-picker-showcase.sample.html
 create mode 100644 src/app/date-picker-showcase/date-picker-showcase.sample.scss
 create mode 100644 src/app/date-picker-showcase/date-picker-showcase.sample.ts
 create mode 100644 src/app/dialog-showcase/dialog-showcase.sample.html
 create mode 100644 src/app/dialog-showcase/dialog-showcase.sample.scss
 create mode 100644 src/app/dialog-showcase/dialog-showcase.sample.ts
 create mode 100644 src/app/drop-down-showcase/drop-down-showcase.sample.html
 create mode 100644 src/app/drop-down-showcase/drop-down-showcase.sample.scss
 create mode 100644 src/app/drop-down-showcase/drop-down-showcase.sample.ts
 create mode 100644 src/app/drop-down-showcase/foods.ts
 create mode 100644 src/app/expansion-panel-showcase/expansion-panel-showcase-sample.html
 create mode 100644 src/app/expansion-panel-showcase/expansion-panel-showcase-sample.scss
 create mode 100644 src/app/expansion-panel-showcase/expansion-panel-showcase-sample.ts
 create mode 100644 src/app/input-group-showcase/input-group-showcase.sample.html
 create mode 100644 src/app/input-group-showcase/input-group-showcase.sample.scss
 create mode 100644 src/app/input-group-showcase/input-group-showcase.sample.ts
 create mode 100644 src/app/inputs-showcase/inputs-showcase.sample.html
 create mode 100644 src/app/inputs-showcase/inputs-showcase.sample.scss
 create mode 100644 src/app/inputs-showcase/inputs-showcase.sample.ts
 create mode 100644 src/app/list-showcase/list-showcase.sample.html
 create mode 100644 src/app/list-showcase/list-showcase.sample.scss
 create mode 100644 src/app/list-showcase/list-showcase.sample.ts
 create mode 100644 src/app/select-showcase/select-showcase.sample.html
 create mode 100644 src/app/select-showcase/select-showcase.sample.scss
 create mode 100644 src/app/select-showcase/select-showcase.sample.ts
 create mode 100644 src/app/slider-showcase/slider-showcase.sample.html
 create mode 100644 src/app/slider-showcase/slider-showcase.sample.scss
 create mode 100644 src/app/slider-showcase/slider-showcase.sample.ts
 create mode 100644 src/app/snackbar-showcase/snackbar-showcase.sample.css
 create mode 100644 src/app/snackbar-showcase/snackbar-showcase.sample.html
 create mode 100644 src/app/snackbar-showcase/snackbar-showcase.sample.ts
 create mode 100644 src/app/stepper-showcase/stepper-showcase.sample.html
 create mode 100644 src/app/stepper-showcase/stepper-showcase.sample.scss
 create mode 100644 src/app/stepper-showcase/stepper-showcase.sample.ts
 create mode 100644 src/app/tabs-showcase/tabs-showcase.sample.html
 create mode 100644 src/app/tabs-showcase/tabs-showcase.sample.scss
 create mode 100644 src/app/tabs-showcase/tabs-showcase.sample.ts
 create mode 100644 src/app/toast-showcase/toast-showcase.sample.html
 create mode 100644 src/app/toast-showcase/toast-showcase.sample.scss
 create mode 100644 src/app/toast-showcase/toast-showcase.sample.ts
 create mode 100644 src/app/tree-showcase/tree-showcase.sample.html
 create mode 100644 src/app/tree-showcase/tree-showcase.sample.scss
 create mode 100644 src/app/tree-showcase/tree-showcase.sample.ts

diff --git a/src/app/app.component.html b/src/app/app.component.html
index ddb520bb27c..f35f73504ff 100644
--- a/src/app/app.component.html
+++ b/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>
 
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 5f727bf4b8d..3f4929c6124 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -698,6 +698,119 @@ export class AppComponent implements OnInit {
         }
     ].sort((componentLink1, componentLink2) => componentLink1.name > componentLink2.name ? 1 : -1);
 
+    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: '/card-showcase',
+            icon: 'radio_button_unchecked',
+            name: 'Card'
+        },
+        {
+            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: '/input-group-showcase',
+            icon: 'radio_button_unchecked',
+            name: 'Input Group'
+        },
+        {
+            link: '/inputs-showcase',
+            icon: 'radio_button_unchecked',
+            name: 'Inputs'
+        },
+        {
+            link: '/list-showcase',
+            icon: 'radio_button_unchecked',
+            name: 'List'
+        },
+        {
+            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: '/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' });
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 98e5cbb6460..7ae1353e545 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,22 +1,33 @@
 import { TreeGridAddRowSampleComponent } from './tree-grid-add-row/tree-grid-add-row.sample';
 import { Routes } from '@angular/router';
 import { AvatarSampleComponent } from './avatar/avatar.sample';
+import { AvatarShowcaseSampleComponent } from './avatar-showcase/avatar-showcase.sample';
 import { BadgeSampleComponent } from './badge/badge.sample';
+import { BadgeShowcaseSampleComponent } from './badge-showcase/badge-showcase.sample';
 import { ButtonSampleComponent } from './button/button.sample';
+import { ButtonShowcaseSampleComponent } from './button-showcase/button-showcase.sample';
 import { CalendarSampleComponent } from './calendar/calendar.sample';
 import { CardSampleComponent } from './card/card.sample';
+import { CardShowcaseSampleComponent } from './card-showcase/card-showcase.sample';
 import { CarouselSampleComponent } from './carousel/carousel.sample';
 import { ChipsSampleComponent } from './chips/chips.sample';
+import { ChipsShowcaseSampleComponent } from './chips-showcase/chips-showcase.sample';
 import { ExpansionPanelSampleComponent } from './expansion-panel/expansion-panel-sample';
+import { ExpansionPanelShowcaseSampleComponent } from './expansion-panel-showcase/expansion-panel-showcase-sample';
 import { DatePickerSampleComponent } from './date-picker/date-picker.sample';
+import { DatePickerShowcaseSampleComponent } from './date-picker-showcase/date-picker-showcase.sample';
 import { DialogSampleComponent } from './dialog/dialog.sample';
+import { DialogShowcaseSampleComponent } from './dialog-showcase/dialog-showcase.sample';
 import { DragDropSampleComponent } from './drag-drop/drag-drop.sample';
 import { MaskSampleComponent } from './mask/mask.sample';
 import { IconSampleComponent } from './icon/icon.sample';
 import { InputSampleComponent } from './input/input.sample';
+import { InputsShowcaseSampleComponent } from './inputs-showcase/inputs-showcase.sample';
 import { InputGroupSampleComponent } from './input-group/input-group.sample';
+import { InputGroupShowcaseSampleComponent } from './input-group-showcase/input-group-showcase.sample';
 import { LayoutSampleComponent } from './layout/layout.sample';
 import { ListSampleComponent } from './list/list.sample';
+import { ListShowcaseSampleComponent } from './list-showcase/list-showcase.sample';
 import { ListPanningSampleComponent } from './list-panning/list-panning.sample';
 import { ListPerformanceSampleComponent } from './list-performance/list-performance.sample';
 import { NavbarSampleComponent } from './navbar/navbar.sample';
@@ -24,8 +35,10 @@ import { NavdrawerSampleComponent } from './navdrawer/navdrawer.sample';
 import { ProgressbarSampleComponent } from './progressbar/progressbar.sample';
 import { RippleSampleComponent } from './ripple/ripple.sample';
 import { SliderSampleComponent } from './slider/slider.sample';
+import { SliderShowcaseSampleComponent } from './slider-showcase/slider-showcase.sample';
 import { SplitterSampleComponent } from './splitter/splitter.sample';
 import { SnackbarSampleComponent } from './snackbar/snackbar.sample';
+import { SnackbarShowcaseSampleComponent } from './snackbar-showcase/snackbar-showcase.sample';
 import { ColorsSampleComponent } from './styleguide/colors/color.sample';
 import { ShadowsSampleComponent } from './styleguide/shadows/shadows.sample';
 import { TypographySampleComponent } from './styleguide/typography/typography.sample';
@@ -37,6 +50,7 @@ import {
     BottomNavRoutingView3Component
 } from './bottomnav-routing/bottomnav-routing-views.sample';
 import { TabsSampleComponent } from './tabs/tabs.sample';
+import { TabsShowcaseSampleComponent } from './tabs-showcase/tabs-showcase.sample';
 import { TabsRoutingSampleComponent } from './tabs-routing/tabs-routing.sample';
 import {
     TabsRoutingView1Component,
@@ -45,6 +59,7 @@ import {
 } from './tabs-routing/tabs-routing-views.sample';
 import { TimePickerSampleComponent } from './time-picker/time-picker.sample';
 import { ToastSampleComponent } from './toast/toast.sample';
+import { ToastShowcaseSampleComponent } from './toast-showcase/toast-showcase.sample';
 import { VirtualForSampleComponent } from './virtual-for-directive/virtual-for.sample';
 import { GridCellEditingComponent } from './grid-cellEditing/grid-cellEditing.component';
 import { GridSampleComponent } from './grid/grid.sample';
@@ -62,11 +77,14 @@ import { GridToolbarSampleComponent } from './grid-toolbar/grid-toolbar.sample';
 import { GridToolbarCustomSampleComponent } from './grid-toolbar/grid-toolbar-custom.sample';
 import { GridVirtualizationSampleComponent } from './grid-remote-virtualization/grid-remote-virtualization.sample';
 import { ButtonGroupSampleComponent } from './buttonGroup/buttonGroup.sample';
+import { ButtonGroupShowcaseSampleComponent } from './buttonGroup-showcase/buttonGroup-showcase.sample';
 import { GridColumnGroupsSampleComponent } from './grid-column-groups/grid-column-groups.sample';
 import { DropDownSampleComponent } from './drop-down/drop-down.sample';
+import { DropDownShowcaseSampleComponent } from './drop-down-showcase/drop-down-showcase.sample';
 import { DropDownSizeSampleComponent } from './drop-down/drop-down-size/drop-down-size.sample';
 import { DropDownVirtualComponent } from './drop-down/drop-down-virtual/drop-down-virtual.component';
 import { ComboSampleComponent } from './combo/combo.sample';
+import { ComboShowcaseSampleComponent } from './combo-showcase/combo-showcase.sample';
 import { OverlaySampleComponent } from './overlay/overlay.sample';
 import { OverlayAnimationSampleComponent } from './overlay/overlay-animation.sample';
 import { OverlayPresetsSampleComponent } from './overlay/overlay-presets.sample';
@@ -81,8 +99,10 @@ import { HierarchicalGridRemoteSampleComponent } from './hierarchical-grid-remot
 import { HierarchicalGridUpdatingSampleComponent } from './hierarchical-grid-updating/hierarchical-grid-updating.sample';
 import { GridColumnPercentageWidthsSampleComponent } from './grid-percentage-columns/grid-percantge-widths.sample';
 import { BannerSampleComponent } from './banner/banner.sample';
+import { BannerShowcaseSampleComponent } from './banner-showcase/banner-showcase.sample';
 import { CalendarViewsSampleComponent } from './calendar-views/calendar-views.sample';
 import { SelectSampleComponent } from './select/select.sample';
+import { SelectShowcaseSampleComponent } from './select-showcase/select-showcase.sample';
 import { GridSearchComponent } from './grid-search/grid-search.sample';
 import { AutocompleteSampleComponent } from './autocomplete/autocomplete.sample';
 import { GridMRLSampleComponent } from './grid-multi-row-layout/grid-mrl.sample';
@@ -120,6 +140,7 @@ import { GridEventsComponent } from './grid-events/grid-events.component';
 import { GridRowAPISampleComponent } from './grid-row-api/grid-row-api.sample';
 import { GridUpdatesComponent } from './grid-updates-test/grid-updates.component';
 import { TreeSampleComponent } from './tree/tree.sample';
+import { TreeShowcaseSampleComponent } from './tree-showcase/tree-showcase.sample';
 import { GridColumnTypesSampleComponent } from './grid-column-types/grid-column-types.sample';
 import { AccordionSampleComponent } from './accordion/accordion.sample';
 import { GridLocalizationSampleComponent } from './grid-localization/grid-localization.sample';
@@ -130,6 +151,7 @@ import { PivotGridSampleComponent } from './pivot-grid/pivot-grid.sample';
 import { PivotGridHierarchySampleComponent } from './pivot-grid-hierarchy/pivot-grid-hierarchy.sample';
 import { PivotGridNoopSampleComponent } from './pivot-grid-noop/pivot-grid-noop.sample';
 import { IgxStepperSampleComponent as StepperSampleComponent } from './stepper/stepper.sample';
+import { IgxStepperShowcaseSampleComponent } from './stepper-showcase/stepper-showcase.sample';
 import { RatingSampleComponent } from './rating/rating.sample';
 import { RangeSliderComponent } from './slider/range-slider/range-slider.component';
 import { QueryBuilderComponent } from './query-builder/query-builder.sample';
@@ -164,22 +186,42 @@ export const appRoutes: Routes = [
         path: 'avatar',
         component: AvatarSampleComponent
     },
+    {
+        path: 'avatar-showcase',
+        component: AvatarShowcaseSampleComponent
+    },
     {
         path: 'badge',
         component: BadgeSampleComponent
     },
+    {
+        path: 'badge-showcase',
+        component: BadgeShowcaseSampleComponent
+    },
     {
         path: 'banner',
         component: BannerSampleComponent
     },
+    {
+        path: 'banner-showcase',
+        component: BannerShowcaseSampleComponent
+    },
     {
         path: 'select',
         component: SelectSampleComponent
     },
+    {
+        path: 'select-showcase',
+        component: SelectShowcaseSampleComponent
+    },
     {
         path: 'buttons',
         component: ButtonSampleComponent
     },
+    {
+        path: 'button-showcase',
+        component: ButtonShowcaseSampleComponent
+    },
     {
         path: 'calendar',
         component: CalendarSampleComponent
@@ -192,6 +234,10 @@ export const appRoutes: Routes = [
         path: 'card',
         component: CardSampleComponent
     },
+    {
+        path: 'card-showcase',
+        component: CardShowcaseSampleComponent
+    },
     {
         path: 'carousel',
         component: CarouselSampleComponent
@@ -200,13 +246,25 @@ export const appRoutes: Routes = [
         path: 'combo',
         component: ComboSampleComponent
     },
+    {
+        path: 'combo-showcase',
+        component: ComboShowcaseSampleComponent
+    },
     {
         path: 'expansionPanel',
         component: ExpansionPanelSampleComponent
     },
+    {
+        path: 'expansionPanel-showcase',
+        component: ExpansionPanelShowcaseSampleComponent
+    },
     {
         path: 'chip',
         component: ChipsSampleComponent
+    },
+    {
+        path: 'chip-showcase',
+        component: ChipsShowcaseSampleComponent
     },
 	{
         path: 'divider',
@@ -216,14 +274,26 @@ export const appRoutes: Routes = [
         path: 'datePicker',
         component: DatePickerSampleComponent
     },
+    {
+        path: 'datePicker-showcase',
+        component: DatePickerShowcaseSampleComponent
+    },
     {
         path: 'dialog',
         component: DialogSampleComponent
     },
+    {
+        path: 'dialog-showcase',
+        component: DialogShowcaseSampleComponent
+    },
     {
         path: 'dropDown',
         component: DropDownSampleComponent
     },
+    {
+        path: 'dropDown-showcase',
+        component: DropDownShowcaseSampleComponent
+    },
     {
         path: 'dropDown-density',
         component: DropDownSizeSampleComponent
@@ -252,10 +322,18 @@ export const appRoutes: Routes = [
         path: 'inputs',
         component: InputSampleComponent
     },
+    {
+        path: 'inputs-showcase',
+        component: InputsShowcaseSampleComponent
+    },
     {
         path: 'input-group',
         component: InputGroupSampleComponent
     },
+    {
+        path: 'input-group-showcase',
+        component: InputGroupShowcaseSampleComponent
+    },
     {
         path: 'layout',
         component: LayoutSampleComponent
@@ -264,6 +342,10 @@ export const appRoutes: Routes = [
         path: 'list',
         component: ListSampleComponent
     },
+    {
+        path: 'list-showcase',
+        component: ListShowcaseSampleComponent
+    },
     {
         path: 'listPanning',
         component: ListPanningSampleComponent
@@ -328,6 +410,10 @@ export const appRoutes: Routes = [
         path: 'slider',
         component: SliderSampleComponent
     },
+    {
+        path: 'slider-showcase',
+        component: SliderShowcaseSampleComponent
+    },
     {
         path: 'range-slider',
         component: RangeSliderComponent
@@ -340,6 +426,10 @@ export const appRoutes: Routes = [
         path: 'snackbar',
         component: SnackbarSampleComponent
     },
+    {
+        path: 'snackbar-showcase',
+        component: SnackbarShowcaseSampleComponent
+    },
     {
         path: 'colors',
         component: ColorsSampleComponent
@@ -376,6 +466,10 @@ export const appRoutes: Routes = [
         path: 'tabs',
         component: TabsSampleComponent
     },
+    {
+        path: 'tabs-showcase',
+        component: TabsShowcaseSampleComponent
+    },
     {
         path: 'tabs-routing',
         component: TabsRoutingSampleComponent,
@@ -393,6 +487,10 @@ export const appRoutes: Routes = [
         path: 'toast',
         component: ToastSampleComponent
     },
+    {
+        path: 'toast-showcase',
+        component: ToastShowcaseSampleComponent
+    },
     {
         path: 'virtualForDirective',
         component: VirtualForSampleComponent
@@ -509,6 +607,10 @@ export const appRoutes: Routes = [
         path: 'buttonGroup',
         component: ButtonGroupSampleComponent
     },
+    {
+        path: 'buttonGroup-showcase',
+        component: ButtonGroupShowcaseSampleComponent
+    },
     {
         path: 'gridColumnGroups',
         component: GridColumnGroupsSampleComponent
@@ -560,10 +662,15 @@ export const appRoutes: Routes = [
     {
         path: 'gridFinJS',
         component: MainComponent
-    }, {
+    },
+    {
         path: 'tree',
         component: TreeSampleComponent
     },
+    {
+        path: 'tree-showcase',
+        component: TreeShowcaseSampleComponent
+    },
     {
         path: 'gridUpdates',
         component: GridUpdatesComponent
@@ -676,6 +783,10 @@ export const appRoutes: Routes = [
         path: 'stepper',
         component: StepperSampleComponent
     },
+    {
+        path: 'stepper-showcase',
+        component: IgxStepperShowcaseSampleComponent
+    },
     {
         path: 'labelDirective',
         component: LabelSampleComponent
diff --git a/src/app/avatar-showcase/avatar-showcase.sample.html b/src/app/avatar-showcase/avatar-showcase.sample.html
new file mode 100644
index 00000000000..5306ec6d218
--- /dev/null
+++ b/src/app/avatar-showcase/avatar-showcase.sample.html
@@ -0,0 +1,18 @@
+<h4 class="sample-title">Angular vs WebComponents Avatar</h4>
+<div class="wrapper">
+    <article class="avatars-wrapper">
+        <div class="avatars">
+            <strong>Angular Avatars</strong>
+            <igx-avatar initials="AZ" shape="circle"></igx-avatar>
+            <igx-avatar initials="AZ" shape="rounded"></igx-avatar>
+            <igx-avatar initials="AZ" shape="square"></igx-avatar>
+        </div>
+
+        <div class="avatars">
+            <strong>WebComponents Avatars</strong>
+            <igc-avatar initials="AZ" shape="circle"></igc-avatar>
+            <igc-avatar initials="AZ" shape="rounded"></igc-avatar>
+            <igc-avatar initials="AZ" shape="square"></igc-avatar>
+        </div>
+    </article>
+</div>
diff --git a/src/app/avatar-showcase/avatar-showcase.sample.scss b/src/app/avatar-showcase/avatar-showcase.sample.scss
new file mode 100644
index 00000000000..7609447c847
--- /dev/null
+++ b/src/app/avatar-showcase/avatar-showcase.sample.scss
@@ -0,0 +1,11 @@
+.avatars-wrapper {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+}
+
+.avatars {
+    display: grid;
+    grid-auto-flow: row;
+    justify-items: center;
+    gap: 12px;
+}
diff --git a/src/app/avatar-showcase/avatar-showcase.sample.ts b/src/app/avatar-showcase/avatar-showcase.sample.ts
new file mode 100644
index 00000000000..d6efeebe568
--- /dev/null
+++ b/src/app/avatar-showcase/avatar-showcase.sample.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { IgxAvatarComponent } from 'igniteui-angular';
+import { defineComponents, IgcAvatarComponent } from "igniteui-webcomponents";
+
+defineComponents(IgcAvatarComponent);
+
+@Component({
+    selector: 'app-avatar-showcase-sample',
+    styleUrls: ['avatar-showcase.sample.scss'],
+    templateUrl: `avatar-showcase.sample.html`,
+    standalone: true,
+    imports: [IgxAvatarComponent]
+})
+export class AvatarShowcaseSampleComponent {}
diff --git a/src/app/badge-showcase/badge-showcase.sample.html b/src/app/badge-showcase/badge-showcase.sample.html
new file mode 100644
index 00000000000..75dab4806e4
--- /dev/null
+++ b/src/app/badge-showcase/badge-showcase.sample.html
@@ -0,0 +1,15 @@
+<h4 class="sample-title">Angular vs WebComponents Badge</h4>
+<div class="wrapper">
+    <div class="badges">
+        <strong>Angular Badge</strong>
+        <igx-badge value="8" shape="rounded"></igx-badge>
+        <igx-badge value="8" shape="square"></igx-badge>
+    </div>
+
+    <div class="badges">
+        <strong>WC Badge</strong>
+        <igc-badge shape="rounded"><span>8</span></igc-badge>
+        <igc-badge shape="square"><span>8</span></igc-badge>
+    </div>
+</div>
+
diff --git a/src/app/badge-showcase/badge-showcase.sample.scss b/src/app/badge-showcase/badge-showcase.sample.scss
new file mode 100644
index 00000000000..1b6386692ee
--- /dev/null
+++ b/src/app/badge-showcase/badge-showcase.sample.scss
@@ -0,0 +1,14 @@
+.wrapper {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+}
+
+.badges {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    > * {
+        margin-bottom: 8px;
+    }
+}
diff --git a/src/app/badge-showcase/badge-showcase.sample.ts b/src/app/badge-showcase/badge-showcase.sample.ts
new file mode 100644
index 00000000000..7bc04a97bd4
--- /dev/null
+++ b/src/app/badge-showcase/badge-showcase.sample.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { IgxBadgeComponent } from 'igniteui-angular';
+import { defineComponents, IgcBadgeComponent } from "igniteui-webcomponents";
+
+defineComponents(IgcBadgeComponent);
+
+@Component({
+    selector: 'app-badge-showcase-sample',
+    styleUrls: ['badge-showcase.sample.scss'],
+    templateUrl: 'badge-showcase.sample.html',
+    standalone: true,
+    imports: [IgxBadgeComponent]
+})
+export class BadgeShowcaseSampleComponent {}
diff --git a/src/app/banner-showcase/banner-showcase.sample.html b/src/app/banner-showcase/banner-showcase.sample.html
new file mode 100644
index 00000000000..1a612f1508d
--- /dev/null
+++ b/src/app/banner-showcase/banner-showcase.sample.html
@@ -0,0 +1,33 @@
+<h4 class="sample-title">Angular vs WebComponents Banner</h4>
+<div>
+    <igx-navbar actionButtonIcon="menu">
+        <button igxIconButton="flat">
+            <igx-icon>more_vert</igx-icon>
+        </button>
+    </igx-navbar>
+    <igx-banner #bannerNoSafeConnection [animationSettings]="animationSettings" (onOpened)="onOpen($event)" (onClosed)="onClose($event)">
+        Your connections is not private!
+        <igx-icon>lock</igx-icon>
+    </igx-banner>
+</div>
+
+<div>
+    <igx-navbar actionButtonIcon="menu">
+        <button igxIconButton="flat">
+            <igx-icon>more_vert</igx-icon>
+        </button>
+    </igx-navbar>
+    <igc-banner #bannerWC [animationSettings]="animationSettings" (onOpened)="onOpen($event)" (onClosed)="onClose($event)">
+        Your connections is not private!
+        <igx-icon slot="prefix">lock</igx-icon>
+        <div slot="actions">
+          <igc-button variant="flat">Dismiss</igc-button>
+        </div>
+      </igc-banner>
+</div>
+
+<div class="sample-actions">
+    <button igxButton="flat" igxRipple (click)="toggle()">Toggle Angular</button>
+    <button igxButton="flat" igxRipple (click)="bannerWC.toggle()">Toggle WC</button>
+</div>
+
diff --git a/src/app/banner-showcase/banner-showcase.sample.scss b/src/app/banner-showcase/banner-showcase.sample.scss
new file mode 100644
index 00000000000..ffe4e8efbee
--- /dev/null
+++ b/src/app/banner-showcase/banner-showcase.sample.scss
@@ -0,0 +1,9 @@
+:host,
+.sample-actions {
+    display: flex;
+    gap: 20px;
+}
+
+:host {
+    flex-direction: column;
+}
diff --git a/src/app/banner-showcase/banner-showcase.sample.ts b/src/app/banner-showcase/banner-showcase.sample.ts
new file mode 100644
index 00000000000..ca7f4783959
--- /dev/null
+++ b/src/app/banner-showcase/banner-showcase.sample.ts
@@ -0,0 +1,44 @@
+import { Component, ViewChild } from '@angular/core';
+import { useAnimation } from '@angular/animations';
+import { IgxBannerActionsDirective, IgxBannerComponent, IgxFlexDirective, IgxIconComponent, IgxLayoutDirective, IgxRippleDirective, IgxNavbarModule, IgxButtonModule } from 'igniteui-angular';
+import { growVerIn, growVerOut } from 'igniteui-angular/animations';
+import { defineComponents, IgcBannerComponent } from "igniteui-webcomponents";
+
+defineComponents(IgcBannerComponent);
+
+@Component({
+    selector: 'app-banner-showcase-sample',
+    templateUrl: `banner-showcase.sample.html`,
+    styleUrls: [`banner-showcase.sample.scss`],
+    standalone: true,
+    imports: [IgxBannerComponent, IgxIconComponent, IgxBannerActionsDirective, IgxRippleDirective, IgxLayoutDirective, IgxFlexDirective, IgxNavbarModule, IgxButtonModule]
+})
+export class BannerShowcaseSampleComponent {
+    @ViewChild('bannerNoSafeConnection', { static: true })
+    private bannerNoSafeConnection: IgxBannerComponent;
+
+    public animationSettings = { openAnimation: useAnimation(growVerIn, {
+        params: {
+            duration: '2000ms'
+        }
+    }), closeAnimation:  useAnimation(growVerOut)};
+    public toggle() {
+        if (this.bannerNoSafeConnection.collapsed) {
+            this.bannerNoSafeConnection.open();
+        } else {
+            this.bannerNoSafeConnection.close();
+        }
+    }
+
+    public onOpen(ev) {
+        console.log('Open', ev);
+    }
+
+    public onClose(ev) {
+        console.log('Close', ev);
+    }
+
+    public onButtonClick(ev) {
+        console.log('Button click', ev);
+    }
+}
diff --git a/src/app/button-showcase/button-showcase.sample.html b/src/app/button-showcase/button-showcase.sample.html
new file mode 100644
index 00000000000..b73e48094c0
--- /dev/null
+++ b/src/app/button-showcase/button-showcase.sample.html
@@ -0,0 +1,80 @@
+<div class="columns-container">
+    <article class="title">
+        <h4 class="sample-title">Angular Buttons</h4>
+        <h4 class="sample-title">WC Buttons</h4>
+    </article>
+
+    <div class="buttons-sample">
+        <div class="button-sample">
+            <button igxButton="flat">Flat</button>
+        </div>
+        <div class="button-sample">
+            <igc-button variant="flat"> Flat </igc-button>
+        </div>
+    </div>
+
+    <div class="buttons-sample">
+        <div class="button-sample">
+            <button igxButton="contained">Contained</button>
+        </div>
+
+        <div class="button-sample">
+            <igc-button variant="contained"> Contained </igc-button>
+        </div>
+    </div>
+
+    <div class="buttons-sample">
+        <div class="button-sample">
+            <button igxButton="outlined">Outlined</button>
+        </div>
+
+        <div class="button-sample">
+            <igc-button variant="outlined"> Outlined </igc-button>
+        </div>
+    </div>
+
+    <div class="buttons-sample">
+        <div class="button-sample">
+            <button igxButton="fab">
+                <igx-icon>favorite</igx-icon>
+            </button>
+        </div>
+
+        <div class="button-sample">
+            <igc-button variant="fab"><igx-icon>favorite</igx-icon></igc-button>
+        </div>
+    </div>
+
+    <div class="buttons-sample">
+        <div class="button-sample">
+            <button igxIconButton="flat">
+                <igx-icon family="fa-solid" name="fa-coffee"></igx-icon>
+            </button>
+        </div>
+        <div class="button-sample">
+            <igc-icon-button variant="flat">
+                <igx-icon family="fa-solid" name="fa-coffee"></igx-icon>
+            </igc-icon-button>
+        </div>
+        <div class="button-sample">
+            <button igxIconButton>
+                <igx-icon>favorite</igx-icon>
+            </button>
+        </div>
+        <div class="button-sample">
+            <igc-icon-button>
+                <igx-icon>favorite</igx-icon>
+            </igc-icon-button>
+        </div>
+        <div class="button-sample">
+            <button igxIconButton="outlined">
+                <igx-icon>cloud</igx-icon>
+            </button>
+        </div>
+        <div class="button-sample">
+            <igc-icon-button variant="outlined">
+                <igx-icon>cloud</igx-icon>
+            </igc-icon-button>
+        </div>
+    </div>
+</div>
diff --git a/src/app/button-showcase/button-showcase.sample.scss b/src/app/button-showcase/button-showcase.sample.scss
new file mode 100644
index 00000000000..e0ec01a5c76
--- /dev/null
+++ b/src/app/button-showcase/button-showcase.sample.scss
@@ -0,0 +1,21 @@
+.columns-container{
+    margin: 24px 16px;
+}
+
+.title {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    justify-items: center;
+}
+
+.buttons-sample {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-auto-rows: minmax(80px, auto);
+    align-items: center;
+}
+
+.button-sample {
+    justify-self: center;
+}
+
diff --git a/src/app/button-showcase/button-showcase.sample.ts b/src/app/button-showcase/button-showcase.sample.ts
new file mode 100644
index 00000000000..7239e32420d
--- /dev/null
+++ b/src/app/button-showcase/button-showcase.sample.ts
@@ -0,0 +1,17 @@
+import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Router } from '@angular/router';
+import { IgxButtonDirective, IgxButtonGroupComponent, IgxIconButtonDirective, IgxIconComponent, IgxIconService, IgxRippleDirective } from 'igniteui-angular';
+import { SizeSelectorComponent } from '../size-selector/size-selector.component';
+import { defineComponents, IgcButtonComponent, IgcIconButtonComponent} from "igniteui-webcomponents";
+
+defineComponents(IgcButtonComponent, IgcIconButtonComponent);
+
+@Component({
+    selector: 'app-button-showcase-sample',
+    styleUrls: ['button-showcase.sample.scss'],
+    templateUrl: 'button-showcase.sample.html',
+    encapsulation: ViewEncapsulation.None,
+    standalone: true,
+    imports: [IgxButtonDirective, IgxIconComponent, IgxButtonGroupComponent, IgxIconButtonDirective, IgxRippleDirective, SizeSelectorComponent]
+})
+export class ButtonShowcaseSampleComponent {}
diff --git a/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.html b/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.html
new file mode 100644
index 00000000000..3f3755254e3
--- /dev/null
+++ b/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.html
@@ -0,0 +1,44 @@
+<section class="sample-content">
+    <article class="sample-column">
+        <h4 class="sample-title">Angular ButtonGroup</h4>
+        <igx-buttongroup
+            [values]="alignOptions"
+        ></igx-buttongroup>
+    </article>
+
+    <article class="sample-column">
+        <h4 class="sample-title">WC ButtonGroup</h4>
+        <igc-button-group>
+            <igc-toggle-button>
+                <igx-icon name="format_align_left"></igx-icon>
+            </igc-toggle-button>
+            <igc-toggle-button>
+                <igx-icon name="format_align_center"></igx-icon>
+            </igc-toggle-button>
+            <igc-toggle-button>
+                <igx-icon name="format_align_right"></igx-icon>
+            </igc-toggle-button>
+            <igc-toggle-button>
+                <igx-icon name="format_align_justify"></igx-icon>
+            </igc-toggle-button>
+        </igc-button-group>
+    </article>
+
+    <article class="sample-column">
+        <igx-buttongroup
+            [selectionMode]="'multi'"
+            [values]="cities"
+            alignment="vertical"
+        >
+        </igx-buttongroup>
+    </article>
+
+    <article class="sample-column">
+        <igc-button-group alignment="vertical" selection="multiple">
+            <igc-toggle-button>Sofia</igc-toggle-button>
+            <igc-toggle-button>London</igc-toggle-button>
+            <igc-toggle-button>New York</igc-toggle-button>
+            <igc-toggle-button disabled="true">Tokyo</igc-toggle-button>
+        </igc-button-group>
+    </article>
+</section>
diff --git a/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.ts b/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.ts
new file mode 100644
index 00000000000..f5f7df5ae6f
--- /dev/null
+++ b/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.ts
@@ -0,0 +1,107 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NgFor } from '@angular/common';
+import { ButtonGroupAlignment, IgxButtonDirective, IgxButtonGroupComponent, IgxIconComponent, IgxLayoutDirective } from 'igniteui-angular';
+import { defineComponents, IgcButtonGroupComponent, IgcToggleButtonComponent} from "igniteui-webcomponents";
+
+defineComponents(IgcButtonGroupComponent, IgcToggleButtonComponent);
+interface IButton {
+    ripple?: string;
+    label?: string;
+    disabled?: boolean;
+    togglable?: boolean;
+    selected?: boolean;
+    color?: string;
+    bgcolor?: string;
+    icon?: string;
+}
+
+class Button {
+    public ripple: string;
+    public label: string;
+    public disabled: boolean;
+    public togglable: boolean;
+    public selected: boolean;
+    public color: string;
+    public bgcolor: string;
+    public icon: string;
+
+    constructor(obj?: IButton) {
+        this.ripple = obj.ripple || 'gray';
+        this.label = obj.label;
+        this.selected = obj.selected || false;
+        this.togglable = obj.togglable;
+        this.disabled = obj.disabled || false;
+        this.color = obj.color;
+        this.bgcolor = obj.bgcolor;
+        this.icon = obj.icon;
+    }
+}
+
+@Component({
+    selector: 'app-buttongroup-showcase-sample',
+    templateUrl: 'buttonGroup-showcase.sample.html',
+    standalone: true,
+    imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxIconComponent, NgFor, IgxLayoutDirective]
+})
+
+export class ButtonGroupShowcaseSampleComponent implements OnInit {
+    @ViewChild('programmatic')
+    private bg: IgxButtonGroupComponent;
+
+    public alignment: ButtonGroupAlignment = ButtonGroupAlignment.vertical;
+    public alignOptions: Button[];
+    public cities: Button[];
+
+    constructor() { }
+
+    public ngOnInit(): void {
+
+        this.alignOptions = [
+            new Button({
+                disabled: false,
+                icon: 'format_align_left',
+                selected: false
+            }),
+            new Button({
+                disabled: false,
+                icon: 'format_align_center',
+                selected: true
+            }),
+            new Button({
+                disabled: false,
+                icon: 'format_align_right',
+                selected: false
+            }),
+            new Button({
+                disabled: false,
+                icon: 'format_align_justify',
+                selected: true
+            })
+        ];
+
+
+        this.cities = [
+            new Button({
+                disabled: false,
+                label: 'Sofia',
+                selected: false,
+                togglable: false
+            }),
+            new Button({
+                disabled: false,
+                label: 'London',
+                selected: false
+            }),
+            new Button({
+                disabled: false,
+                label: 'New York',
+                selected: false
+            }),
+            new Button({
+                disabled: true,
+                label: 'Tokyo',
+                selected: false
+            })
+        ];
+    }
+}
\ No newline at end of file
diff --git a/src/app/card-showcase/card-showcase.sample.html b/src/app/card-showcase/card-showcase.sample.html
new file mode 100644
index 00000000000..66737f5abc4
--- /dev/null
+++ b/src/app/card-showcase/card-showcase.sample.html
@@ -0,0 +1,69 @@
+<div class="grid-container grid-container--fit">
+    <!--New York City Card Begins-->
+    <article class="card">
+        <h4 class="sample-title">Angular Card</h4>
+        <igx-card class="my-cool-card">
+            <igx-card-media>
+                <img [src]="cards[0].imageUrl">
+            </igx-card-media>
+
+            <igx-card-header [vertical]="false">
+                <igx-avatar [src]="cards[0].avatarUrl"></igx-avatar>
+                <h1 igxCardHeaderTitle>{{ cards[0].title }}</h1>
+                <h2 igxCardHeaderSubtitle>{{ cards[0].subtitle }}</h2>
+            </igx-card-header>
+
+            <igx-card-content>
+                <p>{{ cards[0].content }}</p>
+            </igx-card-content>
+
+            <igx-card-actions>
+                <button igxButton igxRipple>Read More</button>
+                <span igxIconButton="flat" igxRipple [igxRippleCentered]="true" *ngFor="let icon of cards[0].icons">
+                    <igx-icon>{{icon}}</igx-icon>
+                </span>
+            </igx-card-actions>
+
+        </igx-card>
+    </article>
+    <!--New York City Card End-->
+
+    <!--New York City Card Begins-->
+    <article class="card">
+        <h4 class="sample-title">WC Card</h4>
+        <igc-card>
+            <igc-card-media>
+              <img
+                src="assets/images/card/media/ny.jpg"
+              />
+            </igc-card-media>
+            <igc-card-header>
+              <igc-avatar slot="thumbnail" src="assets/images/card/avatars/statue_of_liberty.jpg">
+              </igc-avatar>
+              <span slot="title">New York City</span>
+              <span slot="subtitle">City in New York</span>
+            </igc-card-header>
+            <igc-card-content>
+                <span>
+                    New York City comspanrises 5 boroughs sitting where the Hudson River
+                    meets the Atlantic Ocean. At its core is Manhattan, a densely
+                    populated borough that’s among the world’s major commercial,
+                    financial and cultural centers.
+                </span>
+            </igc-card-content>
+            <igc-card-actions>
+              <igc-button slot="start" variant="flat">Read More</igc-button>
+              <igc-icon-button slot="end" variant="flat"><igx-icon>favorite</igx-icon></igc-icon-button>
+              <igc-icon-button
+                slot="end"
+                variant="flat"
+              ><igx-icon>bookmark</igx-icon></igc-icon-button>
+              <igc-icon-button
+                slot="end"
+                variant="flat"
+              ><igx-icon>share</igx-icon></igc-icon-button>
+            </igc-card-actions>
+          </igc-card>
+    </article>
+    <!--New York City Card End-->
+</div>
diff --git a/src/app/card-showcase/card-showcase.sample.scss b/src/app/card-showcase/card-showcase.sample.scss
new file mode 100644
index 00000000000..da62d2b2e8b
--- /dev/null
+++ b/src/app/card-showcase/card-showcase.sample.scss
@@ -0,0 +1,17 @@
+.grid-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    column-gap: 10px;
+    justify-content: space-between;
+    padding: 30px;
+}
+
+.card {
+    min-width: 320px;
+    max-width: 320px;
+    margin: 10px;
+
+    h4 {
+        margin-bottom: 1rem;
+    }
+}
diff --git a/src/app/card-showcase/card-showcase.sample.ts b/src/app/card-showcase/card-showcase.sample.ts
new file mode 100644
index 00000000000..4dd6fc738f6
--- /dev/null
+++ b/src/app/card-showcase/card-showcase.sample.ts
@@ -0,0 +1,70 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { NgFor } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IgxAvatarComponent, IgxButtonDirective, IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective, IgxIconButtonDirective, IgxIconComponent, IgxRippleDirective } from 'igniteui-angular';
+import { defineComponents, IgcCardComponent, IgcAvatarComponent, IgcButtonComponent, IgcIconButtonComponent} from "igniteui-webcomponents";
+
+defineComponents(IgcCardComponent, IgcAvatarComponent, IgcButtonComponent, IgcIconButtonComponent);
+
+export interface ICard {
+    title: string;
+    subtitle: string;
+    content: string;
+    imageUrl: string;
+    avatarUrl: string;
+    unit: string;
+    buttons: string[];
+    chip: string[];
+    icons: string[];
+}
+
+const cardFactory = (params: any): ICard => ({
+    title: params.title || 'Card Title',
+    subtitle: params.subtitle || 'Card Subtitle',
+    unit: params.unit || '°C',
+    content: params.content || 'Some card content should be place here.',
+    imageUrl: params.imageUrl || 'images/card/media/placeholder.jpg',
+    avatarUrl: params.avatarUrl || 'images/card/avatars/rupert_stadler.jpg',
+    buttons: params.buttons || ['ACTION1', 'ACTION2'],
+    chip: params.chip || ['ACTION1', 'ACTION2', 'ACTION3'],
+    icons: params.icons || ['favorite', 'bookmark', 'share']
+});
+
+@Component({
+    encapsulation: ViewEncapsulation.None,
+    selector: 'app-card-showcase-sample',
+    styleUrls: ['card-showcase.sample.scss'],
+    templateUrl: 'card-showcase.sample.html',
+    standalone: true,
+    imports: [
+        NgFor,
+        FormsModule,
+        IgxCardComponent,
+        IgxCardMediaDirective,
+        IgxCardHeaderComponent,
+        IgxCardContentDirective,
+        IgxCardActionsComponent,
+        IgxButtonDirective,
+        IgxRippleDirective,
+        IgxIconComponent,
+        IgxAvatarComponent,
+        IgxCardHeaderTitleDirective,
+        IgxCardHeaderSubtitleDirective,
+        IgxIconButtonDirective
+    ]
+})
+export class CardShowcaseSampleComponent {
+    public cards = [
+        cardFactory({
+            content: `New York City comprises 5 boroughs sitting where the
+            Hudson River meets the Atlantic Ocean. At its core is Manhattan,
+            a densely populated borough that’s among the world’s major commercial,
+            financial and cultural centers.`,
+            avatarUrl: 'assets/images/card/avatars/statue_of_liberty.jpg',
+            icons: ['favorite', 'bookmark', 'share'],
+            imageUrl: 'assets/images/card/media/ny.jpg',
+            subtitle: 'City in New York',
+            title: 'New York City'
+        }),
+    ];
+}
diff --git a/src/app/chips-showcase/chips-showcase.sample.html b/src/app/chips-showcase/chips-showcase.sample.html
new file mode 100644
index 00000000000..925e472c918
--- /dev/null
+++ b/src/app/chips-showcase/chips-showcase.sample.html
@@ -0,0 +1,112 @@
+<div class="sidebar-sample">
+    <div class="preview sample-min-width">
+        <div class="preview__sample">
+            <h6>Angular Chip</h6>
+            <igx-chip #me
+                [variant]="selected"
+                [style.--ig-size]="'var(--ig-size-' + sizeSelector.size + ')'"
+                [disabled]="isDisabled"
+                [selectable]="isSelectable"
+                [removable]="isRemovable"
+                [selected]="isSelected"
+                [draggable]="isDraggable"
+                [removeIcon]="customIcons ? myRemoveIcon : null"
+                [selectIcon]="customIcons ? mySelectIcon : null"
+                (remove)="removeChip(me)">
+                <igx-avatar igxPrefix *ngIf="hasAvatar" class="chip-area-avatar" [shape]="'circle'" initials="MP"></igx-avatar>
+                <igx-icon *ngIf="hasPrefix" igxPrefix>face</igx-icon>
+                Chip component
+                <igx-icon *ngIf="hasSuffix" igxSuffix>face</igx-icon>
+                <igx-circular-bar *ngIf="hasProgressbar" igxSuffix class="circular-sample" [indeterminate]="true"></igx-circular-bar>
+            </igx-chip>
+
+            <h6>WC Chip</h6>
+            <igc-chip #wc
+                [variant]="selected"
+                [style.--ig-size]="'var(--ig-size-' + sizeSelector.size + ')'"
+                [disabled]="isDisabled"
+                [selectable]="isSelectable"
+                [removable]="isRemovable"
+                [selected]="isSelected">
+                <span slot="prefix" *ngIf="hasAvatar" class="chip-area-avatar"><igx-avatar [shape]="'circle'" initials="MP"></igx-avatar></span>
+                <span slot="prefix" *ngIf="hasPrefix"><igx-icon>face</igx-icon></span>
+                <span slot="select" *ngIf="customIcons"><igx-icon family="fa-solid" name="fa-check-circle"></igx-icon></span>
+                Chip component
+                <span slot="suffix" *ngIf="hasSuffix"><igx-icon>face</igx-icon></span>
+                <span slot="suffix" *ngIf="hasProgressbar" class="circular-sample"><igx-circular-bar [indeterminate]="true"></igx-circular-bar></span>
+                <span slot="remove" *ngIf="customIcons"><igx-icon family="fa-solid" name="fa-trash-alt"></igx-icon></span>
+            </igc-chip>
+
+            <div class="preview__info">
+                <a href="https://github.com/IgniteUI/igniteui-angular/wiki/Chip-Component#selection" target="_blank">
+                    <igx-icon>link</igx-icon> Open wiki page.
+                </a>
+            </div>
+
+            <ng-template #mySelectIcon >
+                <igx-icon family="fa-solid" name="fa-check-circle"></igx-icon>
+            </ng-template>
+
+            <ng-template #myRemoveIcon>
+                <igx-icon family="fa-solid" name="fa-trash-alt"></igx-icon>
+            </ng-template>
+        </div>
+
+        <div class="preview__settings">
+            <igx-select
+                #model="ngModel"
+                [(ngModel)]="selected"
+                [ngModelOptions]="{standalone: true}"
+                [placeholder]="'Select chip variant'"
+                [style.--ig-size]="'var(--ig-size-small)'"
+                type="border" class="preview__variant-select">
+
+                <igx-select-item *ngFor="let type of chipTypes" [value]="type">
+                    {{type}}
+                </igx-select-item>
+            </igx-select>
+
+            <size-selector #sizeSelector></size-selector>
+
+            <igx-switch id="selectable" [(ngModel)]="isSelectable">
+                <label for="selectable">Selectable</label>
+            </igx-switch>
+
+            <igx-switch id="selected" [(ngModel)]="isSelected">
+                <label for="removable">Selected</label>
+            </igx-switch>
+
+            <igx-switch id="removable"  [(ngModel)]="isRemovable">
+                <label for="removable">Removable</label>
+            </igx-switch>
+
+            <igx-switch *ngIf="isRemovable" id="customIcons" [(ngModel)]="customIcons">
+                <label for="customIcons">Custom Icons</label>
+            </igx-switch>
+
+            <igx-switch id="addPrefix"  [(ngModel)]="hasPrefix">
+                <label for="addPrefix">Add prefix</label>
+            </igx-switch>
+
+            <igx-switch id="addSuffix"  [(ngModel)]="hasSuffix">
+                <label for="addSuffix">Add suffix</label>
+            </igx-switch>
+
+            <igx-switch id="hasAvatar" [(ngModel)]="hasAvatar">
+                <label for="hasAvatar">Add avatar</label>
+            </igx-switch>
+
+            <igx-switch id="hasProgressbar" [(ngModel)]="hasProgressbar">
+                <label for="hasProgressbar">Add progressbar</label>
+            </igx-switch>
+
+            <igx-switch id="draggable" [(ngModel)]="isDraggable">
+                <label for="draggable">Draggable</label>
+            </igx-switch>
+
+            <igx-switch id="disableChips"  [(ngModel)]="isDisabled">
+                <label for="disableChips">Disable chips</label>
+            </igx-switch>
+        </div>
+    </div>
+</div>
diff --git a/src/app/chips-showcase/chips-showcase.sample.scss b/src/app/chips-showcase/chips-showcase.sample.scss
new file mode 100644
index 00000000000..e2d8424d45d
--- /dev/null
+++ b/src/app/chips-showcase/chips-showcase.sample.scss
@@ -0,0 +1,143 @@
+@use '../../../projects/igniteui-angular/src/lib/core/styles/themes/utilities' as *;
+@use '../../../projects/igniteui-angular/src/lib/core/styles/components/chip/chip-component' as *;
+@use '../../../projects/igniteui-angular/src/lib/core/styles/components/chip/chip-theme' as *;
+
+igx-chip {
+    margin: rem(4px);
+}
+
+h6 {
+    margin-top: 24px;
+}
+
+.sample-title {
+    font-size: 16px;
+    font-weight: 900;
+}
+
+$padding: 16px;
+
+.sample-min-width {
+    min-width: 650px !important;
+}
+
+.preview {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border: 1px solid hsla(var(--ig-gray-300));
+    gap: $padding;
+    margin: 0 auto;
+
+    &__sample {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: $padding;
+        gap: $padding;
+        flex: 1;
+    }
+
+    &__settings {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        background: hsla(var(--ig-gray-50));
+        border-left: 1px solid hsla(var(--ig-gray-300));
+        padding: $padding;
+    }
+
+    &__comp-size {
+        margin-block-end: 16px;
+    }
+
+    &__variant-select {
+        margin-block-end: 16px;
+    }
+
+    &__info {
+        text-align: center;
+    }
+
+    a {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+        text-decoration: none;
+        color: hsla(var(--ig-secondary-600));
+        outline: none;
+
+        &:focus,
+        &:hover {
+            color: hsla(var(--ig-secondary-300));
+        }
+    }
+}
+
+.sidebar-sample {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+}
+
+.chip-column {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 20px;
+}
+
+.sample-sub-title {
+    font-size: 18px;
+    font-weight: 900;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.chip-avatar {
+    width: rem(24px);
+    height: rem(24px);
+    min-width: rem(24px);
+}
+
+.chip-storyboard {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    gap: 20px;
+
+    igx-chip {
+        margin: rem(4px);
+    }
+}
+
+.chip-area-connector {
+    color: currentColor;
+    opacity: .54;
+}
+
+.wrapperAreaCc,
+.wrapperAreaTo {
+    display: flex;
+    align-items: center;
+    max-width: 640px;
+    border-bottom: 1px solid color($default-palette, 'gray', 400);
+    min-height: 48px;
+    flex-wrap: wrap;
+}
+
+.dropAreaCc,
+.dropAreaTo {
+    padding: 0 1rem;
+    margin: .25rem;
+    border-radius: 1rem;
+    visibility: hidden;
+
+    &.dragOver {
+        color: color($default-palette, 'gray', 700);
+        background-color: color($default-palette, 'gray', 200);
+    }
+}
diff --git a/src/app/chips-showcase/chips-showcase.sample.ts b/src/app/chips-showcase/chips-showcase.sample.ts
new file mode 100644
index 00000000000..c20c1cbfd80
--- /dev/null
+++ b/src/app/chips-showcase/chips-showcase.sample.ts
@@ -0,0 +1,53 @@
+import { Component } from '@angular/core';
+import { NgFor, NgIf } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import {
+    IgxAvatarComponent,
+    IgxButtonGroupComponent,
+    IgxChipComponent,
+    IgxChipsAreaComponent,
+    IgxDropDirective,
+    IgxIconComponent,
+    IgxPrefixDirective,
+    IgxSelectComponent,
+    IgxSelectItemComponent,
+    IgxSuffixDirective,
+    IgxSwitchComponent,
+    IgxCircularProgressBarComponent,
+} from 'igniteui-angular';
+import { SizeSelectorComponent } from '../size-selector/size-selector.component';
+import { defineComponents, IgcChipComponent} from "igniteui-webcomponents";
+
+defineComponents(IgcChipComponent);
+
+@Component({
+    selector: 'app-chips-showcase-sample',
+    styleUrls: ['chips-showcase.sample.scss', '../app.component.scss'],
+    templateUrl: 'chips-showcase.sample.html',
+    standalone: true,
+    imports: [
+        IgxButtonGroupComponent,
+        IgxChipComponent,
+        IgxCircularProgressBarComponent,
+        IgxIconComponent,
+        IgxPrefixDirective,
+        IgxSelectComponent,
+        IgxSelectItemComponent,
+        IgxSuffixDirective,
+        IgxSwitchComponent,
+        IgxChipsAreaComponent,
+        NgFor,
+        NgIf,
+        FormsModule,
+        IgxAvatarComponent,
+        IgxDropDirective,
+        SizeSelectorComponent
+    ]
+})
+export class ChipsShowcaseSampleComponent {
+    public chipTypes = ['default', 'primary', 'info', 'success', 'warning', 'danger'];
+
+    public removeChip(chip: IgxChipComponent) {
+        chip.nativeElement.remove();
+    }
+}
diff --git a/src/app/combo-showcase/combo-showcase.sample.html b/src/app/combo-showcase/combo-showcase.sample.html
new file mode 100644
index 00000000000..498136e1708
--- /dev/null
+++ b/src/app/combo-showcase/combo-showcase.sample.html
@@ -0,0 +1,32 @@
+<div class="combo-sample">
+    <section class="combo-sample__section">
+        <h1 class="combo-sample__title">Angular and WC combo next to each other</h1>
+        <size-selector #sizeSelector></size-selector>
+        <igx-switch (click)="isDisabled = !isDisabled">{{isDisabled? 'Enable' : 'Disable'}}</igx-switch>
+        <form class="combo-sample__form" [style.--ig-size]="'var(--ig-size-' + sizeSelector.size + ')'">
+            <div class="combo-sample__row combo-sample__row--stretch">
+                <!-- Simple combo -->
+                <igx-combo [allowCustomValues]="true"
+                           name="falsyValueCombo"
+                           required
+                           [data]="uniqueFalsyData"
+                           displayKey="field"
+                           valueKey="value"
+                           type="border"
+                           [disabled]="isDisabled">
+                    <label igxLabel>Angular Combo</label>
+                    <igx-hint>Select a unique falsy value</igx-hint>
+                </igx-combo>
+                <igc-combo required
+                           [data]="uniqueFalsyData"
+                           display-key="field"
+                           value-key="value"
+                           outlined="true"
+                           [disabled]="isDisabled"
+                           placeholder="WC Combo">
+                    <igx-hint>Select a unique falsy value</igx-hint>
+                </igc-combo>
+            </div>
+        </form>
+    </section>
+</div>
diff --git a/src/app/combo-showcase/combo-showcase.sample.scss b/src/app/combo-showcase/combo-showcase.sample.scss
new file mode 100644
index 00000000000..5a2f711549d
--- /dev/null
+++ b/src/app/combo-showcase/combo-showcase.sample.scss
@@ -0,0 +1,56 @@
+.combo-sample {
+    display: flex;
+    flex-direction: column;
+    gap: 28px;
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 32px 16px;
+
+    &__section,
+    &__row {
+        display: flex;
+        gap: 16px
+    }
+
+    &__row {
+        &--stretch {
+            > * {
+                flex: 1;
+            }
+        }
+    }
+
+    &__section {
+        flex-direction: column;
+        padding: 16px;
+        border: 1px dashed hsla(var(--ig-gray-300));
+    }
+
+    &__form {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+    }
+
+    &__title {
+        font-weight: 600;
+        font-size: 20px;
+        letter-spacing: .4px;
+        margin: 0;
+        line-height: normal;
+    }
+
+    igx-simple-combo,
+    igx-combo {
+        max-width: 100%;
+        min-width: 30%;
+    }
+}
+
+.custom-combo-footer,
+.custom-combo-header {
+    text-align: center;
+    padding: 8px 16px;
+    background: hsla(var(--ig-gray-100));
+}
+
diff --git a/src/app/combo-showcase/combo-showcase.sample.ts b/src/app/combo-showcase/combo-showcase.sample.ts
new file mode 100644
index 00000000000..3953b0eeb29
--- /dev/null
+++ b/src/app/combo-showcase/combo-showcase.sample.ts
@@ -0,0 +1,63 @@
+import { ChangeDetectorRef, Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+    IgxButtonGroupComponent,
+    IgxComboAddItemDirective,
+    IgxComboComponent,
+    IgxComboFooterDirective,
+    IgxComboHeaderDirective,
+    IgxHintDirective,
+    IgxIconComponent,
+    IgxInputDirective,
+    IgxInputGroupComponent,
+    IgxLabelDirective,
+    IgxPrefixDirective,
+    IgxSimpleComboComponent,
+    IgxSwitchComponent,
+} from 'igniteui-angular';
+import { SizeSelectorComponent } from '../size-selector/size-selector.component';
+import { defineComponents, IgcComboComponent} from "igniteui-webcomponents";
+
+defineComponents(IgcComboComponent);
+
+
+@Component({
+    // eslint-disable-next-line @angular-eslint/component-selector
+    selector: 'combo-showcase-sample',
+    templateUrl: './combo-showcase.sample.html',
+    styleUrls: ['combo-showcase.sample.scss'],
+    standalone: true,
+    imports: [
+        IgxInputGroupComponent,
+        IgxInputDirective,
+        FormsModule,
+        IgxSimpleComboComponent,
+        IgxLabelDirective,
+        IgxHintDirective,
+        IgxComboComponent,
+        IgxComboHeaderDirective,
+        IgxComboFooterDirective,
+        IgxComboAddItemDirective,
+        IgxPrefixDirective,
+        IgxIconComponent,
+        IgxSwitchComponent,
+        IgxButtonGroupComponent,
+        SizeSelectorComponent,
+    ]
+})
+export class ComboShowcaseSampleComponent {
+    public isDisabled = false;
+    public uniqueFalsyData: any[];
+
+    constructor(
+        public cdr: ChangeDetectorRef) {
+        this.uniqueFalsyData = [
+            { field: 'null', value: null },
+            { field: 'true', value: true },
+            { field: 'false', value: false },
+            { field: 'empty', value: '' },
+            { field: 'undefined', value: undefined },
+            { field: 'NaN', value: NaN }
+        ];
+    }
+}
diff --git a/src/app/date-picker-showcase/date-picker-showcase.sample.html b/src/app/date-picker-showcase/date-picker-showcase.sample.html
new file mode 100644
index 00000000000..d6065b8e4cc
--- /dev/null
+++ b/src/app/date-picker-showcase/date-picker-showcase.sample.html
@@ -0,0 +1,38 @@
+        <div class="preview">
+            <h6>Angular Date Picker</h6>
+            <igx-date-picker mode="dialog" #dp1 [value]="date5" displayFormat="fullDate" showWeekNumbers="true" headerOrientation="vertical">
+                <label igxLabel>Select a Date</label>
+                <igx-suffix (click)="dp1.open()">
+                    <igx-icon>alarm</igx-icon>
+                </igx-suffix>
+                <ng-template igxPickerActions let-calendar>
+                    <button igxButton="flat" (click)="calendar.viewDate = today">Today</button>
+                    <button igxButton="flat" (click)="calendar.viewDate = nextYear">Next Year</button>
+                    <button igxButton="flat" (click)="dp1.selectToday()">Select Today</button>
+                </ng-template>
+            </igx-date-picker>
+
+            <h6>WC Date Picker</h6>
+            <igc-date-picker label="Select a Date" mode="dialog" #dpWC [value]="date5" display-format="full" show-week-numbers="true" header-orientation="vertical">
+                <span (click)="dpWC.show()" slot="suffix"><igx-icon>alarm</igx-icon></span>
+                    <div slot="actions">
+                        <igc-button variant="flat">Today</igc-button>
+                        <igc-button variant="flat">Next Year</igc-button>
+                        <igc-button variant="flat">Select Today</igc-button>
+                    </div>
+            </igc-date-picker>
+
+            <!-- <igc-date-picker
+                .activeDate=${args.activeDate}
+                ?disabled=${args.disabled}
+                ?invalid=${args.invalid}
+                ?readonly=${args.readOnly}
+                ?required=${args.required}
+                ?open=${args.open}
+                ?show-week-numbers=${args.showWeekNumbers}
+                ?hide-outside-days=${args.hideOutsideDays}
+                ?keep-open-on-outside-click=${args.keepOpenOnOutsideClick}
+                ?keep-open-on-select=${args.keepOpenOnSelect}
+                >
+                </igc-date-picker> -->
+        </div>
diff --git a/src/app/date-picker-showcase/date-picker-showcase.sample.scss b/src/app/date-picker-showcase/date-picker-showcase.sample.scss
new file mode 100644
index 00000000000..d5b24b762ff
--- /dev/null
+++ b/src/app/date-picker-showcase/date-picker-showcase.sample.scss
@@ -0,0 +1,30 @@
+.datepicker-column {
+    display: flex;
+    flex-flow: column nowrap;
+    flex: 1 0 20%;
+    align-content: flex-start;
+    margin: 16px 32px;
+    width: 270px;
+
+    button {
+        margin-top: 10px;
+    }
+}
+
+igx-date-picker {
+    margin-bottom: 10px;
+}
+
+.date-picker-sample-buttons {
+    margin-bottom: 16px;
+
+    button {
+        margin-right: 8px;
+        margin-bottom: 8px;
+    }
+}
+
+h6 {
+    margin-top: 32px;
+    margin-bottom: 12px;
+}
diff --git a/src/app/date-picker-showcase/date-picker-showcase.sample.ts b/src/app/date-picker-showcase/date-picker-showcase.sample.ts
new file mode 100644
index 00000000000..8a9f9ca1b42
--- /dev/null
+++ b/src/app/date-picker-showcase/date-picker-showcase.sample.ts
@@ -0,0 +1,28 @@
+import { Component, ViewChild } from '@angular/core';
+import { DateRangeDescriptor, DateRangeType, IgxButtonDirective, IgxDatePickerComponent, IgxIconComponent, IgxLabelDirective, IgxPickerActionsDirective, IgxRippleDirective, IgxSuffixDirective } from 'igniteui-angular';
+import { defineComponents, IgcDatePickerComponent, IgcButtonComponent} from "igniteui-webcomponents";
+
+defineComponents(IgcDatePickerComponent, IgcButtonComponent);
+
+@Component({
+    selector: 'app-date-picker-showcase-sample',
+    styleUrls: ['date-picker-showcase.sample.scss'],
+    templateUrl: 'date-picker-showcase.sample.html',
+    standalone: true,
+    imports: [IgxDatePickerComponent, IgxLabelDirective, IgxSuffixDirective, IgxIconComponent, IgxPickerActionsDirective, IgxButtonDirective, IgxRippleDirective]
+})
+
+export class DatePickerShowcaseSampleComponent {
+    public date1 = new Date();
+    public date2 = new Date(new Date(this.date1.getFullYear(), this.date1.getMonth(), this.date1.getDate() + 1));
+    public date3 = new Date(new Date(this.date2.getFullYear(), this.date2.getMonth(), this.date2.getDate() + 1));
+    public date4 = new Date(new Date(this.date3.getFullYear(), this.date3.getMonth(), this.date3.getDate() + 1));
+    public date5 = new Date(new Date(this.date4.getFullYear(), this.date4.getMonth(), this.date4.getDate() + 1));
+    public date6 = new Date(new Date(this.date5.getFullYear(), this.date5.getMonth(), this.date5.getDate() + 1));
+    public date7 = new Date(new Date(this.date6.getFullYear(), this.date6.getMonth(), this.date6.getDate() + 1));
+    public today = new Date(this.date1);
+    public nextYear = new Date(this.date1.getFullYear() + 1, this.date1.getMonth(), this.date1.getDate());
+
+    public disabledDates: DateRangeDescriptor[] = [{ type: DateRangeType.Specific, dateRange: [this.date1, this.date2, this.date3] }];
+    public specialDates: DateRangeDescriptor[] = [{ type: DateRangeType.Specific, dateRange: [this.date5, this.date6, this.date7] }];
+}
diff --git a/src/app/dialog-showcase/dialog-showcase.sample.html b/src/app/dialog-showcase/dialog-showcase.sample.html
new file mode 100644
index 00000000000..74dca196be1
--- /dev/null
+++ b/src/app/dialog-showcase/dialog-showcase.sample.html
@@ -0,0 +1,25 @@
+<section class="sample-content">
+    <article class="sample-column">
+        <h4 class="sample-title">Angular Dialog</h4>
+        <p class="sample-description">Detailed description to be added</p>
+        <br>
+        <button igxButton="contained" igxRipple (click)="dialog.open()">Trigger Dialog</button>
+        <igx-dialog #dialog title="Confirmation" leftButtonLabel="Cancel" (leftButtonSelect)="dialog.close()" rightButtonLabel="OK"
+                    (rightButtonSelect)="onDialogOKSelected($event)"
+                    message="Are you sure you want to delete the Microsoft_Annual_Report_2015.pdf and Microsoft_Annual_Report_2015.pdf files?">
+        </igx-dialog>
+    </article>
+
+    <article class="sample-column">
+        <h4 class="sample-title">WC Dialog</h4>
+        <p class="sample-description">Detailed description to be added</p>
+        <br>
+        <button igxButton="contained" igxRipple (click)="dialog.open()">Trigger Dialog</button>
+        <igc-dialog #dialog>
+            <span slot="title">Confirmation</span>
+            <span>Are you sure you want to delete the Microsoft_Annual_Report_2015.pdf and Microsoft_Annual_Report_2015.pdf files?</span>
+            <igc-button slot="footer" (click)="dialog.close()" variant="flat">Cancel</igc-button>
+            <igc-button slot="footer" (click)="onDialogOKSelected($event)" variant="contained">OK</igc-button>
+        </igc-dialog>
+    </article>
+</section>
diff --git a/src/app/dialog-showcase/dialog-showcase.sample.scss b/src/app/dialog-showcase/dialog-showcase.sample.scss
new file mode 100644
index 00000000000..f4a23705be2
--- /dev/null
+++ b/src/app/dialog-showcase/dialog-showcase.sample.scss
@@ -0,0 +1,19 @@
+::ng-deep .igx-dialog {
+    max-width: 60vw;
+}
+
+[igxButton] {
+    max-width: 200px;
+}
+
+.sample-column {
+    padding: 32px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    max-width: 350px;
+    margin-right: 16px;
+    border: 1px solid #999;
+    text-align: center;
+}
diff --git a/src/app/dialog-showcase/dialog-showcase.sample.ts b/src/app/dialog-showcase/dialog-showcase.sample.ts
new file mode 100644
index 00000000000..a0290d0a961
--- /dev/null
+++ b/src/app/dialog-showcase/dialog-showcase.sample.ts
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { IgxButtonDirective, IgxDialogActionsDirective, IgxDialogComponent, IgxDialogTitleDirective, IgxIconComponent, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxPrefixDirective, IgxRippleDirective, IgxSwitchComponent } from 'igniteui-angular';
+import { defineComponents, IgcDialogComponent, IgcButtonComponent} from "igniteui-webcomponents";
+
+defineComponents(IgcDialogComponent, IgcButtonComponent);
+
+@Component({
+    selector: 'app-dialog-showcase-sample',
+    styleUrls: ['dialog-showcase.sample.scss'],
+    templateUrl: 'dialog-showcase.sample.html',
+    standalone: true,
+    imports: [IgxButtonDirective, IgxRippleDirective, IgxSwitchComponent, IgxDialogComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxLabelDirective, IgxDialogTitleDirective, IgxDialogActionsDirective]
+})
+export class DialogShowcaseSampleComponent {
+    public onDialogOKSelected(args) {
+        // args.event - event
+        // args.dialog - dialog
+
+        // perform OK action
+        args.dialog.close();
+    }
+
+    public closeDialog(evt) {
+        console.log(evt);
+    }
+}
diff --git a/src/app/drop-down-showcase/drop-down-showcase.sample.html b/src/app/drop-down-showcase/drop-down-showcase.sample.html
new file mode 100644
index 00000000000..edbec0ba8d9
--- /dev/null
+++ b/src/app/drop-down-showcase/drop-down-showcase.sample.html
@@ -0,0 +1,32 @@
+<section class="sample-content">
+    <div class="sample-wrapper">
+        <strong>Angular DropDown</strong>
+        <button igxButton="contained" #button (click)="toggleDropDown()" [igxDropDownItemNavigation]="dropdown1">Toggle</button>
+        <igx-drop-down #dropdown1 (selectionChanging)="onSelection($event)" (opening)="onOpening()">
+            <igx-drop-down-item *ngFor="let item of items" [disabled]="item.disabled" [isHeader]="item.header"
+                                [selected]="item.selected">
+                    {{ item.field }}
+            </igx-drop-down-item>
+        </igx-drop-down>
+    </div>
+
+    <div class="sample-wrapper">
+        <strong>WC DropDown</strong>
+        <igc-dropdown id="dropdown2">
+            <igc-button slot="target">Toggle</igc-button>
+            <ng-container *ngFor="let item of items">
+                <ng-container *ngIf="item.header">
+                    <igc-dropdown-header>{{ item.field }}</igc-dropdown-header>
+                </ng-container>
+                <igc-dropdown-item 
+                    [disabled]="item.disabled" 
+                    [selected]="item.selected" 
+                    (click)="onSelection(item)">
+                    {{ item.field }}
+                </igc-dropdown-item>
+            </ng-container>
+        </igc-dropdown>
+    </div>
+</section>
+
+<div igxOverlayOutlet #outlet="overlay-outlet"></div>
diff --git a/src/app/drop-down-showcase/drop-down-showcase.sample.scss b/src/app/drop-down-showcase/drop-down-showcase.sample.scss
new file mode 100644
index 00000000000..9f68906188f
--- /dev/null
+++ b/src/app/drop-down-showcase/drop-down-showcase.sample.scss
@@ -0,0 +1,9 @@
+
+.sample-wrapper {
+    display: flex;
+    flex-direction: column;
+
+    >* {
+        margin-bottom: 16px;
+    }
+}
diff --git a/src/app/drop-down-showcase/drop-down-showcase.sample.ts b/src/app/drop-down-showcase/drop-down-showcase.sample.ts
new file mode 100644
index 00000000000..6a07bd98064
--- /dev/null
+++ b/src/app/drop-down-showcase/drop-down-showcase.sample.ts
@@ -0,0 +1,224 @@
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { NgFor, NgIf } from '@angular/common';
+
+import { foods } from './foods';
+import {
+	ConnectedPositioningStrategy,
+	IgxButtonDirective,
+	IgxButtonGroupComponent,
+	IgxDropDownComponent,
+	IgxDropDownGroupComponent,
+	IgxDropDownItemComponent,
+	IgxDropDownItemNavigationDirective,
+	IgxIconComponent,
+	IgxInputDirective,
+	IgxInputGroupComponent,
+	IgxOverlayOutletDirective,
+	IgxRippleDirective,
+	IgxToggleActionDirective,
+	IgxToggleDirective,
+	NoOpScrollStrategy,
+	OverlaySettings,
+} from 'igniteui-angular';
+import { defineComponents, IgcDropdownComponent, IgcButtonComponent} from "igniteui-webcomponents";
+
+defineComponents(IgcDropdownComponent, IgcButtonComponent);
+
+
+@Component({
+    // eslint-disable-next-line @angular-eslint/component-selector
+    selector: 'drop-down-showcase-sample',
+    templateUrl: './drop-down-showcase.sample.html',
+    styleUrls: ['drop-down-showcase.sample.scss'],
+    standalone: true,
+	imports: [
+		NgFor,
+		IgxButtonGroupComponent,
+		IgxButtonDirective,
+		IgxDropDownItemNavigationDirective,
+		IgxToggleActionDirective,
+		IgxDropDownComponent,
+		IgxDropDownItemComponent,
+		IgxToggleDirective,
+		IgxDropDownGroupComponent,
+		IgxInputGroupComponent,
+		IgxInputDirective,
+		IgxRippleDirective,
+		IgxOverlayOutletDirective,
+		IgxIconComponent,
+		NgIf,
+	],
+})
+export class DropDownShowcaseSampleComponent implements OnInit {
+    @ViewChild(IgxDropDownComponent, { static: true })
+    private igxDropDown: IgxDropDownComponent;
+    @ViewChild('dropdown3', { static: true })
+    private igxDropDownSelection: IgxDropDownComponent;
+    @ViewChild('button', { static: true })
+    private button: ElementRef;
+    @ViewChild(IgxOverlayOutletDirective, { static: true })
+    private igxOverlayOutlet: IgxOverlayOutletDirective;
+
+    public items: any[] = [];
+    public foods = foods;
+
+    public ngOnInit() {
+        this.igxDropDown.height = '400px';
+        this.igxDropDown.width = '180px';
+
+        const states = [
+            'New England',
+            'Connecticut',
+            'Maine',
+            'Massachusetts',
+            'New Hampshire',
+            'Rhode Island',
+            'Vermont',
+            'Mid-Atlantic',
+            'New Jersey',
+            'New York',
+            'Pennsylvania',
+            'East North Central',
+            'Illinois',
+            'Indiana',
+            'Michigan',
+            'Ohio',
+            'Wisconsin',
+            'West North Central',
+            'Iowa',
+            'Kansas',
+            'Minnesota',
+            'Missouri',
+            'Nebraska',
+            'North Dakota',
+            'South Dakota',
+            'South Atlantic',
+            'Delaware',
+            'Florida',
+            'Georgia',
+            'Maryland',
+            'North Carolina',
+            'South Carolina',
+            'Virginia',
+            'District of Columbia',
+            'West Virginia',
+            'East South Central',
+            'Alabama',
+            'Kentucky',
+            'Mississippi',
+            'Tennessee',
+            'West South Central',
+            'Arkansas',
+            'Louisiana',
+            'Oklahoma',
+            'Texas',
+            'Mountain',
+            'Arizona',
+            'Colorado',
+            'Idaho',
+            'Montana',
+            'Nevada',
+            'New Mexico',
+            'Utah',
+            'Wyoming',
+            'Pacific',
+            'Alaska',
+            'California',
+            'Hawaii',
+            'Oregon',
+            'Washington'];
+
+        const areas = [
+            'New England',
+            'Mid-Atlantic',
+            'East North Central',
+            'West North Central',
+            'South Atlantic',
+            'East South Central',
+            'West South Central',
+            'Mountain',
+            'Pacific'
+        ];
+
+        for (let i = 0; i < states.length; i += 1) {
+            const item = { field: states[i] };
+            if (areas.indexOf(states[i]) !== -1) {
+                item['header'] = true;
+            } else if (i % 7 === 4 || i > 49) {
+                item['disabled'] = true;
+            }
+            this.items.push(item);
+        }
+
+        this.items[3]['selected'] = true;
+    }
+
+    public toggleDropDown() {
+        const overlaySettings: OverlaySettings = {
+            positionStrategy: new ConnectedPositioningStrategy(),
+            scrollStrategy: new NoOpScrollStrategy(),
+            closeOnOutsideClick: false,
+            modal: false,
+            outlet: this.igxOverlayOutlet
+        };
+
+        overlaySettings.target = this.button.nativeElement;
+        this.igxDropDown.toggle(overlaySettings);
+    }
+
+    public toggleDropDownWC() {
+        const overlaySettings: OverlaySettings = {
+            positionStrategy: new ConnectedPositioningStrategy(),
+            scrollStrategy: new NoOpScrollStrategy(),
+            closeOnOutsideClick: false,
+            modal: false,
+            outlet: this.igxOverlayOutlet
+        };
+
+        overlaySettings.target = this.button.nativeElement;
+        this.igxDropDown.toggle(overlaySettings);
+    }
+
+    public open() {
+        const overlaySettings: OverlaySettings = {
+            positionStrategy: new ConnectedPositioningStrategy(),
+            scrollStrategy: new NoOpScrollStrategy(),
+            closeOnOutsideClick: false,
+            modal: false,
+            outlet: this.igxOverlayOutlet
+        };
+
+        overlaySettings.target = this.button.nativeElement;
+        this.igxDropDown.open(overlaySettings);
+    }
+
+    public close() {
+        this.igxDropDown.close();
+    }
+
+    public clearSelection() {
+        this.igxDropDownSelection.clearSelection();
+    }
+
+    public onSelection(event) {
+        console.log(event);
+        const old = event.oldSelection;
+        event.oldSelection = event.newSelection;
+        event.newSelection = old;
+    }
+
+    public onSelectionLogger(event) {
+        // event.cancel = true;
+        console.log(event);
+    }
+
+    public onSelectionMenu(eventArgs) {
+        eventArgs.cancel = true;
+
+        console.log(`new selection ${eventArgs.newSelection.element.nativeElement.textContent}`);
+        console.log(`old selection ${eventArgs.oldSelection ? eventArgs.oldSelection.element.nativeElement.textContent : ''}`);
+    }
+
+    public onOpening() {
+    }
+}
diff --git a/src/app/drop-down-showcase/foods.ts b/src/app/drop-down-showcase/foods.ts
new file mode 100644
index 00000000000..378f609468b
--- /dev/null
+++ b/src/app/drop-down-showcase/foods.ts
@@ -0,0 +1,43 @@
+export const foods: {
+    name: string;
+    entries: {
+        name: string;
+        refNo: string;
+    }[];
+}[] = [{
+    name: 'Vegetables',
+    entries: [{
+        name: 'Cucumber',
+        refNo: `00000`
+    }, {
+        name: 'Lettuce',
+        refNo: `00001`
+    }, {
+        name: 'Cabbage',
+        refNo: `00002`
+    }]
+}, {
+    name: 'Fruits',
+    entries: [{
+        name: 'Banana',
+        refNo: `10000`
+    }, {
+        name: 'Tomato',
+        refNo: `10001`
+    }, {
+        name: 'Kiwi',
+        refNo: `10002`
+    }]
+}, {
+    name: 'Meats',
+    entries: [{
+        name: 'Chicken',
+        refNo: `20000`
+    }, {
+        name: 'Beef',
+        refNo: `20001`
+    }, {
+        name: 'Veal',
+        refNo: `20002`
+    }]
+}];
diff --git a/src/app/expansion-panel-showcase/expansion-panel-showcase-sample.html b/src/app/expansion-panel-showcase/expansion-panel-showcase-sample.html
new file mode 100644
index 00000000000..ccaca5835e1
--- /dev/null
+++ b/src/app/expansion-panel-showcase/expansion-panel-showcase-sample.html
@@ -0,0 +1,33 @@
+<div class="flex-container">
+    <div class="flex-item">
+        <strong>Angular Expansion Panel</strong>
+        <igx-expansion-panel>
+            <igx-expansion-panel-header>
+                <igx-expansion-panel-title>
+                    The Expendables
+                </igx-expansion-panel-title>
+                <igx-expansion-panel-description>
+                    Action, Adventure, Thriller
+                </igx-expansion-panel-description>
+            </igx-expansion-panel-header>
+            <igx-expansion-panel-body>
+                Barney Ross leads the "Expendables", a band of highly skilled
+            mercenaries including knife enthusiast Lee Christmas, martial arts
+            expert Yin Yang, heavy weapons specialist Hale Caesar, demolitionist
+            Toll Road and loose-cannon sniper Gunner Jensen.
+            </igx-expansion-panel-body>
+        </igx-expansion-panel>
+    </div>
+    
+    <div class="flex-item">
+        <strong>WC Expansion Panel</strong>
+        <igc-expansion-panel>
+            <span slot="title">The Expendables</span>
+            <span slot="subtitle">Action, Adventure, Thriller</span>
+            <span>Barney Ross leads the "Expendables", a band of highly skilled
+              mercenaries including knife enthusiast Lee Christmas, martial arts
+              expert Yin Yang, heavy weapons specialist Hale Caesar, demolitionist
+              Toll Road and loose-cannon sniper Gunner Jensen.</span>
+       </igc-expansion-panel>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/expansion-panel-showcase/expansion-panel-showcase-sample.scss b/src/app/expansion-panel-showcase/expansion-panel-showcase-sample.scss
new file mode 100644
index 00000000000..7ef1e8c1bc6
--- /dev/null
+++ b/src/app/expansion-panel-showcase/expansion-panel-showcase-sample.scss
@@ -0,0 +1,15 @@
+.flex-container {
+    display: flex;
+    justify-content: space-around;
+}
+
+.flex-item {
+    width: 100%;
+
+    strong {
+        color: hsla(var(--ig-secondary-500));
+        display: block;
+        text-align: center;
+        margin-bottom: 12px;
+    }
+}
\ No newline at end of file
diff --git a/src/app/expansion-panel-showcase/expansion-panel-showcase-sample.ts b/src/app/expansion-panel-showcase/expansion-panel-showcase-sample.ts
new file mode 100644
index 00000000000..18441d01f52
--- /dev/null
+++ b/src/app/expansion-panel-showcase/expansion-panel-showcase-sample.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { NgIf } from '@angular/common';
+import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelHeaderComponent, IgxExpansionPanelIconDirective, IgxExpansionPanelTitleDirective } from 'igniteui-angular';
+import { defineComponents, IgcExpansionPanelComponent} from "igniteui-webcomponents";
+
+defineComponents(IgcExpansionPanelComponent);
+
+@Component({
+    // eslint-disable-next-line @angular-eslint/component-selector
+    selector: 'expansion-panel-showcase-sample',
+    templateUrl: './expansion-panel-showcase-sample.html',
+    styleUrls: ['expansion-panel-showcase-sample.scss'],
+    standalone: true,
+    imports: [IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, NgIf, IgxExpansionPanelIconDirective, IgxExpansionPanelBodyComponent]
+})
+export class ExpansionPanelShowcaseSampleComponent {}
diff --git a/src/app/input-group-showcase/input-group-showcase.sample.html b/src/app/input-group-showcase/input-group-showcase.sample.html
new file mode 100644
index 00000000000..6c3b6ccb8f6
--- /dev/null
+++ b/src/app/input-group-showcase/input-group-showcase.sample.html
@@ -0,0 +1,37 @@
+<div class="inputs-wrapper">
+    <strong>Angular Input</strong>
+    <igx-input-group [type]="inputType">
+        <label igxLabel>Web address</label>
+        <igx-icon igxPrefix>face</igx-icon>
+    
+        <input
+                name="inputValidityTest"
+                [required]="isRequired"
+                [disabled]="isDisabled"
+                pattern="^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$"
+                [(ngModel)]="inputValue"
+                igxInput
+                type="text"
+        />
+        <igx-hint>Type your web address</igx-hint>
+        <igx-suffix>
+            <igx-icon>face</igx-icon>
+        </igx-suffix>
+    </igx-input-group>
+    
+    <strong>WC Input</strong>
+    <igc-input #igcInput
+       label="Web component"
+       [required]="isRequired"
+       [disabled]="isDisabled"
+       [outlined]="isOutlined()">
+        <span slot="prefix"><igx-icon>face</igx-icon></span>
+        <span slot="suffix"><igx-icon>face</igx-icon></span>
+        <span slot="helper-text">
+            Web component
+            <strong *ngIf="inputType === 'line'" style="color: hsla(var(--ig-error-500))">
+                don't have {{inputType}} type!
+            </strong>
+        </span>
+    </igc-input>
+</div>
\ No newline at end of file
diff --git a/src/app/input-group-showcase/input-group-showcase.sample.scss b/src/app/input-group-showcase/input-group-showcase.sample.scss
new file mode 100644
index 00000000000..15f5cd4d5b0
--- /dev/null
+++ b/src/app/input-group-showcase/input-group-showcase.sample.scss
@@ -0,0 +1,7 @@
+strong {
+    color: hsla(var(--ig-secondary-500));
+    display: block;
+    text-align: center;
+    margin-top: 24px;
+    margin-bottom: 12px;
+}
\ No newline at end of file
diff --git a/src/app/input-group-showcase/input-group-showcase.sample.ts b/src/app/input-group-showcase/input-group-showcase.sample.ts
new file mode 100644
index 00000000000..17aa8819d28
--- /dev/null
+++ b/src/app/input-group-showcase/input-group-showcase.sample.ts
@@ -0,0 +1,143 @@
+import { Component, Inject, OnInit, AfterViewInit, ViewChild, ElementRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { UntypedFormBuilder, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NgIf, NgFor } from '@angular/common';
+
+import { defineComponents, IgcInputComponent, IgcIconComponent } from 'igniteui-webcomponents';
+import { ButtonGroupAlignment, IButtonGroupEventArgs, IGX_BUTTON_GROUP_DIRECTIVES, IGX_DATE_PICKER_DIRECTIVES, IGX_INPUT_GROUP_DIRECTIVES, IGX_INPUT_GROUP_TYPE, IGX_SELECT_DIRECTIVES, IgxIconComponent, IgxInputGroupType, IgxMaskDirective, IgxSwitchComponent } from 'igniteui-angular';
+import { SizeSelectorComponent } from '../size-selector/size-selector.component';
+
+defineComponents(IgcInputComponent, IgcIconComponent);
+
+interface Selection {
+    selected: boolean;
+    type?: IgxInputGroupType;
+    label: string;
+    togglable: boolean;
+}
+
+@Component({
+    // eslint-disable-next-line @angular-eslint/component-selector
+    selector: 'app-input-group-showcase-sample',
+    styleUrls: ['input-group-showcase.sample.scss'],
+    templateUrl: 'input-group-showcase.sample.html',
+    providers: [{ provide: IGX_INPUT_GROUP_TYPE, useValue: 'box' }],
+    standalone: true,
+    imports: [
+        FormsModule,
+        NgIf,
+        ReactiveFormsModule,
+        NgFor,
+        IGX_INPUT_GROUP_DIRECTIVES,
+        IGX_BUTTON_GROUP_DIRECTIVES,
+        IGX_DATE_PICKER_DIRECTIVES,
+        IGX_SELECT_DIRECTIVES,
+        IgxMaskDirective,
+        IgxIconComponent,
+        IgxSwitchComponent,
+        SizeSelectorComponent
+    ],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class InputGroupShowcaseSampleComponent implements OnInit, AfterViewInit {
+
+    @ViewChild('igcInput')
+    private igcInput: ElementRef;
+    public inputValue: any;
+    public isRequired = false;
+    public isDisabled = false;
+    public alignment: ButtonGroupAlignment = ButtonGroupAlignment.vertical;
+
+    public displayDensities: Selection[];
+    public inputType: IgxInputGroupType = null;
+    public inputTypes: Selection[];
+    public items: string[] = ['Orange', 'Apple', 'Banana', 'Mango'];
+
+    public myForm = this.fb.group({
+        myTextField: [],
+        myTextField2: ['', Validators.required],
+        mySelectField: []
+    });
+    public date = new Date();
+
+    public isOutlined() {
+        return this.inputType === 'border'
+    }
+
+    constructor(
+        private fb: UntypedFormBuilder,
+        @Inject(IGX_INPUT_GROUP_TYPE) public TOKEN: IgxInputGroupType
+    ) {
+        this.myForm.disable();
+    }
+
+    public ngOnInit(): void {
+        this.inputTypes = [
+            {
+                selected: this.inputType === 'line',
+                type: 'line',
+                label: 'Line',
+                togglable: true
+            },
+            {
+                selected: true,
+                type: 'box',
+                label: 'Box',
+                togglable: true,
+            },
+            {
+                selected: this.inputType === 'border',
+                type: 'border',
+                label: 'Border',
+                togglable: true,
+            },
+            {
+                selected: this.inputType === 'search',
+                type: 'search',
+                label: 'Search',
+                togglable: true,
+            },
+        ];
+    }
+
+    public ngAfterViewInit() {
+        console.log(`The InputGroupToken set for all material themed components
+            (that have no explicit type set on component OR sample lv) is: `,
+            this.TOKEN);
+    }
+
+    public selectInputType(event: IButtonGroupEventArgs) {
+        const currentType = this.inputTypes[event.index].type;
+        this.inputType = currentType;
+        this.igcInput.nativeElement.removeAttribute('outlined');
+        if (currentType === 'border') {
+            this.igcInput.nativeElement.setAttribute('outlined', 'true');
+        }
+        console.log('New type set is = ', currentType);
+    }
+
+    public enableText() {
+        this.myForm.get('myTextField').enable();
+        this.myForm.get('myTextField2').enable();
+    }
+
+    public disableText() {
+        this.myForm.get('myTextField').disable();
+        this.myForm.get('myTextField2').disable();
+    }
+
+    public enableSelect() {
+        this.myForm.get('mySelectField').enable();
+    }
+
+    public disableSelect() {
+        this.myForm.get('mySelectField').disable();
+    }
+
+    public enableForm() {
+        this.myForm.enable();
+    }
+
+    public disableForm() {
+        this.myForm.disable();
+    }
+}
diff --git a/src/app/inputs-showcase/inputs-showcase.sample.html b/src/app/inputs-showcase/inputs-showcase.sample.html
new file mode 100644
index 00000000000..bf8b47dcba2
--- /dev/null
+++ b/src/app/inputs-showcase/inputs-showcase.sample.html
@@ -0,0 +1,51 @@
+<section class="sample-content">
+    <article class="sample-column">
+        <h4 class="sample-title">Angular inputs</h4>
+
+        <div class="radio-group">
+            <igx-radio *ngFor="let item of ['Male', 'Female']" value="{{item}}" name="group" [(ngModel)]="user.gender" (click)="onClick($event)"
+                (change)="onRadioChanged($event)">{{item}}</igx-radio>
+        </div>
+    </article>
+
+    <article class="sample-column">
+        <h4 class="sample-title">WC inputs</h4>
+
+        <igc-radio-group name="group">
+            <igc-radio value="Male">Male</igc-radio>
+            <igc-radio value="Female">Female</igc-radio>
+        </igc-radio-group>
+    </article>
+
+    <article class="sample-column">
+        <igx-switch>
+            Label
+        </igx-switch>
+        <igx-switch disabled>
+            Label
+        </igx-switch>
+    </article>
+
+    <article class="sample-column">
+        <igc-switch>Label</igc-switch>
+        <igc-switch disabled>Label</igc-switch>
+    </article>
+
+    <article class="sample-column">
+        <igx-checkbox>
+            Label
+        </igx-checkbox>
+        <igx-checkbox disabled>
+            Label
+        </igx-checkbox>
+    </article>
+
+    <article class="sample-column">
+        <igc-checkbox>
+            Label
+        </igc-checkbox>
+        <igc-checkbox disabled>
+            Label
+        </igc-checkbox>
+    </article>
+</section>
diff --git a/src/app/inputs-showcase/inputs-showcase.sample.scss b/src/app/inputs-showcase/inputs-showcase.sample.scss
new file mode 100644
index 00000000000..899d434ba2c
--- /dev/null
+++ b/src/app/inputs-showcase/inputs-showcase.sample.scss
@@ -0,0 +1,27 @@
+.form-title {
+    margin-bottom: 16px;
+}
+
+igx-input-group + igx-input-group {
+    margin-top: 32px;
+}
+
+.radio-group {
+    display: flex;
+    flex-flow: column nowrap;
+}
+
+.settings {
+    margin-left: 16px;
+    width: 100%;
+    justify-content: space-between;
+}
+
+:host button {
+    align-self: flex-start;
+    margin-top: 1.5rem;
+}
+
+igx-switch, igc-switch {
+    margin-bottom: 16px;
+}
diff --git a/src/app/inputs-showcase/inputs-showcase.sample.ts b/src/app/inputs-showcase/inputs-showcase.sample.ts
new file mode 100644
index 00000000000..f6cf66efec2
--- /dev/null
+++ b/src/app/inputs-showcase/inputs-showcase.sample.ts
@@ -0,0 +1,93 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { NgFor } from '@angular/common';
+import { UntypedFormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { IChangeCheckboxEventArgs, IGX_INPUT_GROUP_DIRECTIVES, IGX_LIST_DIRECTIVES, IgxAvatarComponent, IgxButtonDirective, IgxCheckboxComponent, IgxIconComponent, IgxRadioComponent, IgxSwitchComponent } from 'igniteui-angular';
+import { defineComponents, IgcRadioComponent, IgcRadioGroupComponent, IgcSwitchComponent, IgcCheckboxComponent} from "igniteui-webcomponents";
+
+defineComponents(IgcRadioComponent, IgcRadioGroupComponent, IgcSwitchComponent, IgcCheckboxComponent);
+
+
+@Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-input-showcase-sample',
+    styleUrls: ['inputs-showcase.sample.scss'],
+    templateUrl: 'inputs-showcase.sample.html',
+    standalone: true,
+    imports: [FormsModule, NgFor, ReactiveFormsModule, IGX_INPUT_GROUP_DIRECTIVES, IGX_LIST_DIRECTIVES, IgxSwitchComponent, IgxIconComponent, IgxCheckboxComponent, IgxAvatarComponent, IgxRadioComponent, IgxButtonDirective]
+})
+export class InputsShowcaseSampleComponent {
+    public placeholder = 'Please enter a value';
+    public placeholderDate = new Date();
+    public selected = 'option1';
+    public airplaneMode = false;
+    public isToggled = false;
+    public isToggledWC = false; // Initial state
+
+    public myForm = this.fb.group({
+        checkbox: [],
+        switch: []
+    });
+
+    public user = {
+        comment: '',
+        firstName: 'John',
+        gender: 'Male',
+        lastName: 'Doe',
+        password: '1337s3cr3t',
+        registered: false,
+        subscribed: false,
+        dateOfBirth: new Date('07 July, 1987')
+    };
+    public user2 = {
+        comment: '',
+        firstName: 'John',
+        gender: 'Male',
+        lastName: 'Doe',
+        password: '1337s3cr3t',
+        registered: true,
+        subscribed: false,
+        dateOfBirth: new Date('01 July, 1954')
+    };
+    public settings = [{
+        name: 'WiFi',
+        icon: 'wifi',
+        active: true,
+        disabled: false
+    },
+    {
+        name: 'Bluetooth',
+        icon: 'bluetooth',
+        active: true,
+        disabled: false
+    }, {
+        name: 'Device Visibility',
+        icon: 'visibility',
+        active: false,
+        disabled: true
+    }];
+
+    constructor(private fb: UntypedFormBuilder) {}
+
+    public onClick(event: MouseEvent) {
+        console.log(event);
+    }
+
+    public onChange(value: string) {
+        console.log(value);
+    }
+
+    public onRadioChanged(event: IChangeCheckboxEventArgs) {
+        console.log(event);
+    }
+
+    public selectSecond() {
+        this.selected = 'option2';
+    }
+
+    public toggleAirplaneMode() {
+        this.settings.forEach(setting => {
+            setting.active = !this.airplaneMode;
+            setting.disabled = this.airplaneMode;
+        });
+    }
+}
diff --git a/src/app/list-showcase/list-showcase.sample.html b/src/app/list-showcase/list-showcase.sample.html
new file mode 100644
index 00000000000..da4a0d14625
--- /dev/null
+++ b/src/app/list-showcase/list-showcase.sample.html
@@ -0,0 +1,40 @@
+<div class="sample-wrapper list-sample-component">
+    <size-selector #sizeSelector></size-selector>
+
+    <section class="sample-content" [style.--ig-size]="'var(--ig-size-' + sizeSelector.size + ')'">
+
+        <article class="sample-column">
+            <strong>Angular List</strong>
+            <div class="list-sample">
+                <igx-list>
+                    <igx-list-item [isHeader]="true">Job positions</igx-list-item>
+                    <ng-template ngFor let-last="last" [ngForOf]="employeeItems" let-employee>
+                        <igx-list-item>
+                            <igx-avatar [src]="employee.imageURL" igxListThumbnail></igx-avatar>
+                            <h4 igxListLineTitle>{{employee.name}}</h4>
+                            <p igxListLineSubTitle>{{employee.position}}</p>
+                            <igx-icon igxListAction>more_horiz</igx-icon>
+                        </igx-list-item>
+                    </ng-template>
+                </igx-list>
+            </div>
+        </article>
+
+        <article class="sample-column">
+            <strong>WC List</strong>
+            <div class="list-sample">
+                <igc-list>
+                    <igc-list-header>
+                      <span>Job Positions</span>
+                    </igc-list-header>
+                    <ng-template ngFor let-last="last" [ngForOf]="employeeItems" let-employee>
+                        <igc-list-item>
+                            <igc-avatar slot="start" [src]="employee.imageURL"></igc-avatar>
+                            <span slot="title">{{employee.name}}</span>
+                            <span slot="subtitle">{{employee.position}}</span>
+                            <igx-icon slot="end">more_horiz</igx-icon>
+                        </igc-list-item>
+                    </ng-template>
+                </igc-list>
+            </div>
+        </article>
\ No newline at end of file
diff --git a/src/app/list-showcase/list-showcase.sample.scss b/src/app/list-showcase/list-showcase.sample.scss
new file mode 100644
index 00000000000..818746edf9c
--- /dev/null
+++ b/src/app/list-showcase/list-showcase.sample.scss
@@ -0,0 +1,10 @@
+span {
+    display: block;
+}
+
+strong {
+    color: hsla(var(--ig-secondary-500));
+    display: block;
+    text-align: center;
+    margin-bottom: 12px;
+}
\ No newline at end of file
diff --git a/src/app/list-showcase/list-showcase.sample.ts b/src/app/list-showcase/list-showcase.sample.ts
new file mode 100644
index 00000000000..df3d748b328
--- /dev/null
+++ b/src/app/list-showcase/list-showcase.sample.ts
@@ -0,0 +1,270 @@
+import {Component, ViewChild, ViewEncapsulation} from '@angular/core';
+import { NgFor } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import {
+    IGX_INPUT_GROUP_DIRECTIVES,
+    IGX_LIST_DIRECTIVES,
+    IgxAvatarComponent,
+    IgxBadgeComponent,
+    IgxButtonDirective,
+    IgxButtonGroupComponent,
+    IgxCardComponent,
+    IgxCheckboxComponent,
+    IgxDialogComponent,
+    IgxFilterDirective,
+    IgxFilterOptions,
+    IgxFilterPipe,
+    IgxIconComponent,
+    IgxListComponent,
+    IgxRippleDirective,
+    IgxSwitchComponent
+} from 'igniteui-angular';
+import { SizeSelectorComponent } from '../size-selector/size-selector.component';
+import { defineComponents, IgcListComponent, IgcAvatarComponent, IgcListHeaderComponent, IgcListItemComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcListComponent, IgcListHeaderComponent, IgcListItemComponent, IgcAvatarComponent);
+
+interface Employee {
+    imageURL: string;
+    name: string;
+    position: string;
+    description: string;
+}
+
+@Component({
+    selector: 'app-list-showcase-sample',
+    styleUrls: ['list-showcase.sample.scss'],
+    templateUrl: 'list-showcase.sample.html',
+    encapsulation: ViewEncapsulation.None,
+    standalone: true,
+    imports: [
+        NgFor,
+        FormsModule,
+        IgxButtonGroupComponent,
+        IgxBadgeComponent,
+        IgxCardComponent,
+        IgxRippleDirective,
+        IgxIconComponent,
+        IgxCheckboxComponent,
+        IgxAvatarComponent,
+        IgxSwitchComponent,
+        IgxFilterDirective,
+        IgxButtonDirective,
+        IgxDialogComponent,
+        IgxFilterPipe,
+        SizeSelectorComponent,
+        IGX_LIST_DIRECTIVES,
+        IGX_INPUT_GROUP_DIRECTIVES
+    ]
+})
+export class ListShowcaseSampleComponent {
+    @ViewChild('fruitList', { static: true })
+    private fruitList: IgxListComponent;
+
+    @ViewChild('checkbox', { static: true })
+    private checkbox: any;
+
+    @ViewChild('declarativeList', { static: true })
+    private declarativeList: any;
+
+    @ViewChild('addFruitDialog', { static: true })
+    private addFruitDialog: IgxDialogComponent;
+
+    public fruitsSearch: string;
+    public search1: string;
+    public search2: string;
+    public options = {};
+    public fruitsFilteredItemsCount = undefined;
+
+    public employeeItems: Employee[] = [{
+        imageURL: 'assets/images/avatar/18.jpg',
+        name: 'Marin Popov',
+        position: 'Web designer',
+        description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, vel?, consectetur adipisicing elit. Aperiam, vel?'
+    }, {
+        imageURL: 'assets/images/avatar/2.jpg',
+        name: 'Simeon Simeonov',
+        position: 'Front-end Developer',
+        description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, vel?, consectetur adipisicing elit. Aperiam, vel?'
+    }, {
+        imageURL: 'assets/images/avatar/7.jpg',
+        name: 'Stefan ivanov',
+        position: 'UX Architect',
+        description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, vel?, consectetur adipisicing elit. Aperiam, vel?'
+    }, {
+        imageURL: 'assets/images/avatar/6.jpg',
+        name: 'Svilen Dimchevski',
+        position: 'Graphic designer',
+        description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, vel, consectetur adipisicing elit. Aperiam, vel??'
+    }];
+    public navItems = [{
+        avatar: 'assets/images/avatar/1.jpg',
+        favorite: true,
+        key: '1',
+        link: '#',
+        phone: '770-504-2217',
+        text: 'Terrance Orta'
+    }, {
+        avatar: 'assets/images/avatar/2.jpg',
+        favorite: false,
+        key: '2',
+        link: '#',
+        phone: '423-676-2869',
+        text: 'Richard Mahoney'
+    }, {
+        avatar: 'assets/images/avatar/3.jpg',
+        favorite: false,
+        key: '3',
+        link: '#',
+        phone: '859-496-2817',
+        text: 'Donna Price'
+    }, {
+        avatar: 'assets/images/avatar/4.jpg',
+        favorite: false,
+        key: '4',
+        link: '#',
+        phone: '901-747-3428',
+        text: 'Lisa Landers'
+    }, {
+        avatar: 'assets/images/avatar/12.jpg',
+        favorite: true,
+        key: '5',
+        link: '#',
+        phone: '573-394-9254',
+        text: 'Dorothy H. Spencer'
+    }, {
+        avatar: 'assets/images/avatar/13.jpg',
+        favorite: false,
+        key: '6',
+        link: '#',
+        phone: '323-668-1482',
+        text: 'Stephanie May'
+    }, {
+        avatar: 'assets/images/avatar/14.jpg',
+        favorite: false,
+        key: '7',
+        link: '#',
+        phone: '401-661-3742',
+        text: 'Marianne Taylor'
+    }, {
+        avatar: 'assets/images/avatar/15.jpg',
+        favorite: true,
+        key: '8',
+        link: '#',
+        phone: '662-374-2920',
+        text: 'Tammie Alvarez'
+    }, {
+        avatar: 'assets/images/avatar/16.jpg',
+        favorite: true,
+        key: '9',
+        link: '#',
+        phone: '240-455-2267',
+        text: 'Charlotte Flores'
+    }, {
+        avatar: 'assets/images/avatar/17.jpg',
+        favorite: false,
+        key: '10',
+        link: '#',
+        phone: '724-742-0979',
+        text: 'Ward Riley'
+    }];
+
+    public fruits: Fruit[] = [];
+
+
+    public get fo1() {
+        const _fo = new IgxFilterOptions();
+        _fo.key = ['text', 'key'];
+        _fo.inputValue = this.search1;
+        return _fo;
+    }
+
+    public get fo2() {
+        const _fo = new IgxFilterOptions();
+
+        _fo.items = this.declarativeList.items;
+        _fo.inputValue = this.search2;
+
+        _fo.get_value = (item: any) => item.element.textContent.trim();
+
+        _fo.metConditionFn = (item: any) => {
+            item.hidden = false;
+        };
+
+        _fo.overdueConditionFn = (item: any) => {
+            item.hidden = true;
+        };
+
+        return _fo;
+    }
+
+    public get fruitsFilterOptions() {
+        const fruitsFilterOpts = new IgxFilterOptions();
+        fruitsFilterOpts.items = this.fruits;
+        fruitsFilterOpts.key = 'name';
+        fruitsFilterOpts.inputValue = this.fruitsSearch;
+        return fruitsFilterOpts;
+    }
+
+    public filteringHandler = (args) => {
+        args.cancel = !this.checkbox.checked;
+    };
+
+    public filteredHandler = () => { };
+
+    public onAddFruitButtonClicked(fruitName) {
+        this.addFruit(fruitName);
+        this.addFruitDialog.close();
+    }
+
+    public addFruit(fruitName) {
+        this.fruits.push({ id: this.fruits.length, name: fruitName });
+    }
+
+    public addFruits(fruits: string[]) {
+        fruits.forEach((fruit) => {
+            this.addFruit(fruit);
+        });
+    }
+
+    public deleteFruit(fruitId) {
+        let fruitIndex = -1;
+        for (let i = 0; i < this.fruits.length; i++) {
+            if (fruitId === this.fruits[i].id) {
+                fruitIndex = i;
+                break;
+            }
+        }
+
+        this.fruits.splice(fruitIndex, 1);
+    }
+
+    public fruitsFiltered(args) {
+        this.fruitsFilteredItemsCount = args.filteredItems.length;
+    }
+
+    public loadFruits() {
+        this.fruitList.isLoading = true;
+        setTimeout(() => {
+            this.addFruits([
+                'banana',
+                'orange',
+                'apple',
+                'kiwi',
+                'mango',
+                'strawberry',
+                'pear'
+            ]);
+            this.fruitList.isLoading = false;
+        }, 1000);
+    }
+
+    public toggleFavorite(contact: any) {
+        contact.favorite = !contact.favorite;
+    }
+}
+
+export interface Fruit {
+    id: number;
+    name: string;
+}
diff --git a/src/app/select-showcase/select-showcase.sample.html b/src/app/select-showcase/select-showcase.sample.html
new file mode 100644
index 00000000000..0f5483e03f4
--- /dev/null
+++ b/src/app/select-showcase/select-showcase.sample.html
@@ -0,0 +1,37 @@
+<size-selector #sizeSelector></size-selector>
+
+<div class="select-sample">
+    <strong>Angular Select</strong>
+    <igx-select
+                [placeholder]="'Pick One'"
+                (opening)="testOnOpening($event)"
+                (opened)="testOnOpened()"
+                (closing)="testOnClosing($event)"
+                (closed)="testOnClosed()"
+                (selectionChanging)="testOnSelection($event)"
+                [disabled]="false"
+                [type]="'border'"
+                [style.--ig-size]="'var(--ig-size-' + sizeSelector.size + ')'">
+        <label igxLabel>Sample Label</label>
+        <igx-icon igxPrefix>favorite</igx-icon>
+        <igx-hint>I am a Hint</igx-hint>
+        <igx-select-item [value] = "'Apple'" [disabled]="true">Apple</igx-select-item>
+        <igx-select-item [value] = "'Orange'">Orange</igx-select-item>
+        <igx-select-item [value] = "'Grapes'">Grapes</igx-select-item>
+        <igx-select-item [value] = "'Banana'">Banana</igx-select-item>
+    </igx-select>
+
+    <strong>WC Select</strong>
+    <igc-select
+        placeholder="Pick One"
+        label = "Sample label"
+        outlined="true"
+        [style.--ig-size]="'var(--ig-size-' + sizeSelector.size + ')'">
+        <igx-icon slot="prefix">favorite</igx-icon>
+        <span slot="helper-text">I am a Hint</span>
+        <igc-select-item [value] = "'Apple'" [disabled]="true">Apple</igc-select-item>
+        <igc-select-item [value] = "'Orange'">Orange</igc-select-item>
+        <igc-select-item [value] = "'Grapes'">Grapes</igc-select-item>
+        <igc-select-item [value] = "'Banana'">Banana</igc-select-item>
+    </igc-select>
+</div>
diff --git a/src/app/select-showcase/select-showcase.sample.scss b/src/app/select-showcase/select-showcase.sample.scss
new file mode 100644
index 00000000000..48d159bd9f9
--- /dev/null
+++ b/src/app/select-showcase/select-showcase.sample.scss
@@ -0,0 +1,10 @@
+strong {
+    color: hsla(var(--ig-secondary-500));
+    display: block;
+    text-align: center;
+    margin-bottom: 12px;
+}
+
+.select-sample {
+    margin-top: 24px;
+}
diff --git a/src/app/select-showcase/select-showcase.sample.ts b/src/app/select-showcase/select-showcase.sample.ts
new file mode 100644
index 00000000000..ec6e2f85b9a
--- /dev/null
+++ b/src/app/select-showcase/select-showcase.sample.ts
@@ -0,0 +1,168 @@
+import { Component, OnInit, ViewChildren, QueryList, ViewChild } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NgFor } from '@angular/common';
+import { IgxButtonDirective, IgxSelectComponent, IgxLabelDirective, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxSelectHeaderDirective, IgxSelectFooterDirective, IgxButtonGroupComponent, IgxSuffixDirective, IgxHintDirective, IgxSelectGroupComponent, IgxSwitchComponent, ISelectionEventArgs, CancelableEventArgs, HorizontalAlignment, VerticalAlignment, ConnectedPositioningStrategy, AbsoluteScrollStrategy } from 'igniteui-angular';
+import { scaleInTop, scaleOutBottom } from 'igniteui-angular/animations';
+import { SizeSelectorComponent } from '../size-selector/size-selector.component';
+import { defineComponents, IgcSelectGroupComponent, IgcSelectComponent, IgcSelectItemComponent, IgcSelectHeaderComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcSelectGroupComponent, IgcSelectComponent, IgcSelectItemComponent, IgcSelectHeaderComponent);
+
+@Component({
+    // eslint-disable-next-line @angular-eslint/component-selector
+    selector: 'app-select-showcase-sample',
+    styleUrls: ['./select-showcase.sample.scss'],
+    templateUrl: './select-showcase.sample.html',
+    standalone: true,
+    imports: [
+        IgxButtonDirective,
+        IgxSelectComponent,
+        FormsModule,
+        IgxLabelDirective,
+        IgxPrefixDirective,
+        IgxIconComponent,
+        IgxSelectItemComponent,
+        NgFor,
+        IgxSelectHeaderDirective,
+        IgxSelectFooterDirective,
+        IgxButtonGroupComponent,
+        IgxSuffixDirective,
+        IgxHintDirective,
+        IgxSelectGroupComponent,
+        ReactiveFormsModule,
+        IgxSwitchComponent,
+        SizeSelectorComponent
+    ]
+})
+export class SelectShowcaseSampleComponent implements OnInit {
+    @ViewChild('selectReactive', { read: IgxSelectComponent, static: true })
+    public select: IgxSelectComponent;
+    @ViewChild('model', { read: IgxSelectComponent, static: true })
+    public selectFruits: IgxSelectComponent;
+    @ViewChild('sizeSelect', { read: IgxSelectComponent, static: true })
+    public sizeSelect: IgxSelectComponent;
+
+    @ViewChildren(IgxSelectComponent) private selectComponents: QueryList<IgxSelectComponent>;
+
+    public isDisabled = false;
+
+    public items: any[] = [];
+    public value: 'opt1';
+    public disabledItemValue: 'InsideGroup1';
+    public fruits: string[] = ['Orange', 'Apple', 'Banana', 'Mango', 'Pear', 'Lemon', 'Peach', 'Apricot', 'Grapes', 'Cactus'];
+    public selected: string;
+    public selectRequired = true;
+
+    public reactiveForm: UntypedFormGroup;
+    public cities: string[] = [
+        'Sofia',
+        'Varna',
+        'Sozopol',
+        'Plovdiv',
+        'Ruse',
+        'Stara Zagora'
+    ];
+
+    public validationType = {
+        citiesSelect: [Validators.required]
+    };
+
+    constructor(fb: UntypedFormBuilder) {
+        this.reactiveForm = fb.group({
+            citiesSelect: ['', Validators.required]
+        });
+    }
+
+    public ngOnInit() {
+        for (let i = 1; i < 10; i++) {
+            const item = { field: 'opt' + i };
+            this.items.push(item);
+        }
+    }
+
+    public onSubmitReactive() { }
+
+    public selectBanana() {
+        this.selectFruits.setSelectedItem(3);
+    }
+
+    public setToNull() {
+        this.selectFruits.value = null;
+        this.selected = null;
+    }
+
+    public testOnSelection(evt: ISelectionEventArgs) {
+        console.log('testOnSelection.....................' + evt.cancel);
+    }
+
+    public testOnOpening(evt: CancelableEventArgs) {
+        console.log('testOnOpening.....................: ' + evt.cancel);
+    }
+
+    public testOnOpened() {
+        // console.log('testOnOpened.....................: ');
+    }
+
+    public testOnClosing(evt: CancelableEventArgs) {
+        console.log('testOnClosing.....................: ' + evt.cancel);
+    }
+
+    public testOnClosed() {
+        // console.log('testOnClosed.....................: ');
+    }
+
+    public handleToggle() {
+        // console.log('handleToggle.....................: ');
+        this.selectComponents.first.toggle();
+    }
+
+    public handleOpen() {
+        if (this.selectComponents.first.collapsed) {
+            const customCloseOnOutsideClick = {
+                closeOnOutsideClick: false
+            };
+            console.log('onOpen.....................:');
+            this.selectComponents.first.open(customCloseOnOutsideClick);
+        }
+    }
+
+    public handleClose() {
+        if (!this.selectComponents.first.collapsed) {
+            // console.log('onClose.....................: ');
+            this.selectComponents.first.close();
+        }
+    }
+
+    public openCustomOverlaySettings() {
+        if (this.selectComponents.first.collapsed) {
+            const positionSettings = {
+                target: this.selectComponents.first.inputGroup.element.nativeElement,
+                horizontalDirection: HorizontalAlignment.Right,
+                verticalDirection: VerticalAlignment.Bottom,
+                horizontalStartPoint: HorizontalAlignment.Left,
+                verticalStartPoint: VerticalAlignment.Bottom,
+                openAnimation: scaleInTop,
+                closeAnimation: scaleOutBottom
+            };
+
+            const customOverlaySettings = {
+                modal: true,
+                closeOnOutsideClick: false,
+                positionStrategy: new ConnectedPositioningStrategy(
+                    positionSettings
+                ),
+                scrollStrategy: new AbsoluteScrollStrategy()
+            };
+            console.log('onOpenCustomOverlaySettings.....................:  customOverlaySettings');
+            this.selectComponents.first.open(customOverlaySettings);
+        }
+    }
+
+    public btnClick() {
+        // console.log('clicked');
+    }
+
+    public headerFootedClick(event) {
+        console.log('Header/Footer clicked', event);
+    }
+}
diff --git a/src/app/slider-showcase/slider-showcase.sample.html b/src/app/slider-showcase/slider-showcase.sample.html
new file mode 100644
index 00000000000..e9535b99ac4
--- /dev/null
+++ b/src/app/slider-showcase/slider-showcase.sample.html
@@ -0,0 +1,22 @@
+<div class="sample-container">
+<article class="sample-item">
+    <strong>Angular Slider</strong>
+    <igx-slider
+        [showTicks]="true"
+        [primaryTickLabels]="primaryTickLabels"
+        [secondaryTickLabels]="secondaryTickLabels"
+        [ticksOrientation]="ticksOrientation"
+        [labels]="labels"
+        [secondaryTicks]="4">
+    </igx-slider>
+</article>
+
+<article class="sample-item">
+    <strong>WC Slider</strong>
+    <igc-slider primary-ticks="7" secondary-ticks="4">
+    <ng-container *ngFor="let label of labels">
+        <igc-slider-label>{{ label }}</igc-slider-label>
+    </ng-container>
+    </igc-slider>
+</article>
+</div>
diff --git a/src/app/slider-showcase/slider-showcase.sample.scss b/src/app/slider-showcase/slider-showcase.sample.scss
new file mode 100644
index 00000000000..ae129e23ede
--- /dev/null
+++ b/src/app/slider-showcase/slider-showcase.sample.scss
@@ -0,0 +1,12 @@
+.sample-container {
+    margin: 24px;
+}
+
+.sample-item {
+    margin-bottom: 60px;
+}
+
+strong {
+    display: block;
+    text-align: center;
+}
\ No newline at end of file
diff --git a/src/app/slider-showcase/slider-showcase.sample.ts b/src/app/slider-showcase/slider-showcase.sample.ts
new file mode 100644
index 00000000000..11020d9c401
--- /dev/null
+++ b/src/app/slider-showcase/slider-showcase.sample.ts
@@ -0,0 +1,100 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { NgFor } from '@angular/common';
+import { IgxSliderType, ISliderValueChangeEventArgs, IRangeSliderValue, TickLabelsOrientation, TicksOrientation, IgxButtonDirective, IgxSliderComponent, IgxTickLabelTemplateDirective } from 'igniteui-angular';
+import { defineComponents, IgcSliderComponent, IgcSliderLabelComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcSliderComponent, IgcSliderLabelComponent);
+
+class Task {
+    public title: string;
+    public percentCompleted: number;
+
+    constructor(title: string, percentCompeted: number) {
+        this.title = title;
+        this.percentCompleted = percentCompeted;
+    }
+}
+
+@Component({
+    selector: 'app-slider-showcase-sample',
+    styleUrls: ['slider-showcase.sample.scss'],
+    templateUrl: 'slider-showcase.sample.html',
+    standalone: true,
+    imports: [IgxSliderComponent, FormsModule, IgxTickLabelTemplateDirective, IgxButtonDirective, NgFor]
+})
+export class SliderShowcaseSampleComponent {
+    public labelOrientaion: TickLabelsOrientation = TickLabelsOrientation.Horizontal;
+    public ticksOrientation: TicksOrientation = TicksOrientation.Bottom;
+    public primaryTickLabels = true;
+    public secondaryTickLabels = true;
+    public sliderType: IgxSliderType = IgxSliderType.SLIDER;
+    public labelsDates = new Array<Date>();
+    public task: Task = new Task('Implement new app', 30);
+    public labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+
+    public rangeValue = 34;
+
+    public rangeLabel = {
+        lower: 2,
+        upper: 5
+    };
+
+    private _lowerValue: Date;
+    private _upperValue: Date;
+
+    constructor() {
+        for (let i = 0; i <= 500; i++) {
+            this.labelsDates.push(new Date(2019, 10, i));
+        }
+
+        this._lowerValue = this.labelsDates[0];
+        this._upperValue = this.labelsDates[this.labels.length - 1];
+    }
+
+    public get getLowerVal() {
+        return `${this._lowerValue.getDay()}/${this._lowerValue.getMonth()}/${this._lowerValue.getFullYear()}`;
+    }
+
+    public get getUpperVal() {
+        return `${this._upperValue.getDay()}/${this._upperValue.getMonth()}/${this._upperValue.getFullYear()}`;
+    }
+
+    public valueChange(evt: ISliderValueChangeEventArgs) {
+        this._lowerValue = this.labelsDates[(evt.value as IRangeSliderValue).lower];
+        this._upperValue = this.labelsDates[(evt.value as IRangeSliderValue).upper];
+    }
+
+    public changeLabels() {
+        this.labels = ['08:00', '12:00', '16:00', '20:00', '00:00'];
+    }
+
+    public changeLabelOrientation() {
+        if (this.labelOrientaion === TickLabelsOrientation.Horizontal) {
+            this.labelOrientaion = TickLabelsOrientation.TopToBottom;
+        } else if (this.labelOrientaion === TickLabelsOrientation.TopToBottom) {
+            this.labelOrientaion = TickLabelsOrientation.BottomToTop;
+        } else {
+            this.labelOrientaion = TickLabelsOrientation.Horizontal;
+        }
+    }
+
+    public changeTicksOrientation() {
+        if (this.ticksOrientation === TicksOrientation.Mirror) {
+            this.ticksOrientation = TicksOrientation.Top;
+        } else if (this.ticksOrientation === TicksOrientation.Top) {
+            this.ticksOrientation = TicksOrientation.Bottom;
+        } else {
+            this.ticksOrientation = TicksOrientation.Mirror;
+        }
+    }
+
+    public tickLabel(value, primary) {
+        if (primary) {
+            return Math.round(value);
+        }
+
+        return value;
+    }
+
+}
diff --git a/src/app/snackbar-showcase/snackbar-showcase.sample.css b/src/app/snackbar-showcase/snackbar-showcase.sample.css
new file mode 100644
index 00000000000..5fff386efdd
--- /dev/null
+++ b/src/app/snackbar-showcase/snackbar-showcase.sample.css
@@ -0,0 +1,4 @@
+.snackbar-sample {
+    position: relative;
+    height: 300px;
+}
diff --git a/src/app/snackbar-showcase/snackbar-showcase.sample.html b/src/app/snackbar-showcase/snackbar-showcase.sample.html
new file mode 100644
index 00000000000..005a3439ae9
--- /dev/null
+++ b/src/app/snackbar-showcase/snackbar-showcase.sample.html
@@ -0,0 +1,35 @@
+<div class="snackbars-wrapper">
+<div class="sample-wrapper">
+    <article class="sample-column">
+        <h4 class="sample-title">Snackbar</h4>
+        <div class="snackbar-sample">
+            <div class="snackbar-container">
+                <igx-snackbar
+                    #snackbar
+                    [outlet]="outlet"
+                    (animationStarted)="onAnimationStarted()"
+                    (animationDone)="onAnimationDone()"
+                    [actionText]="'Undo'"
+                >Snackbar Message
+                </igx-snackbar>
+            </div>
+            <div igxOverlayOutlet #outlet="overlay-outlet"></div>
+        </div>
+        <button igxButton (click)="toggleSnackbar()">Toggle Angular Snackbar</button>
+    </article>
+</div>
+
+<div class="sample-wrapper">
+    <article class="sample-column">
+        <button igxButton (click)="snackbar2.toggle()">Toggle WC Snackbar</button>
+        <div class="snackbar-sample">
+            <igc-snackbar #snackbar2 position="positionSettings">
+                Snackbar Message
+                <button slot="action" igxButton="flat">
+                    Undo
+                </button>
+            </igc-snackbar>
+        </div>
+    </article>
+</div>
+
diff --git a/src/app/snackbar-showcase/snackbar-showcase.sample.ts b/src/app/snackbar-showcase/snackbar-showcase.sample.ts
new file mode 100644
index 00000000000..a3f2df765f4
--- /dev/null
+++ b/src/app/snackbar-showcase/snackbar-showcase.sample.ts
@@ -0,0 +1,76 @@
+import { useAnimation } from '@angular/animations';
+import { Component, OnInit, ViewChild } from '@angular/core';
+// eslint-disable-next-line max-len
+import { HorizontalAlignment, IgxButtonDirective, IgxOverlayOutletDirective, IgxSnackbarComponent, PositionSettings, VerticalAlignment } from 'igniteui-angular';
+import { slideInLeft, slideInRight } from 'igniteui-angular/animations';
+import { defineComponents, IgcSnackbarComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcSnackbarComponent);
+
+@Component({
+    selector: 'app-snackbar-showcase-sample',
+    styleUrls: ['snackbar-showcase.sample.css'],
+    templateUrl: 'snackbar-showcase.sample.html',
+    standalone: true,
+    imports: [IgxSnackbarComponent, IgxOverlayOutletDirective, IgxButtonDirective]
+})
+export class SnackbarShowcaseSampleComponent implements OnInit {
+    @ViewChild('snackbar')
+    private snackbar: IgxSnackbarComponent;
+
+    public color: string;
+    public actionName: string;
+    public newPositionSettings: PositionSettings = {
+        openAnimation: useAnimation(slideInLeft, { params: { duration: '1000ms' } }),
+        closeAnimation: useAnimation(slideInRight, { params: { duration: '1000ms' } }),
+        horizontalDirection: HorizontalAlignment.Center,
+        verticalDirection: VerticalAlignment.Middle,
+        horizontalStartPoint: HorizontalAlignment.Center,
+        verticalStartPoint: VerticalAlignment.Middle,
+        minSize: { height: 100, width: 100 }
+    };
+
+    private _colors: string[];
+
+    public ngOnInit() {
+        this.color = 'mediumpurple';
+        this.actionName = 'Undo';
+        this._colors = [];
+    }
+
+    public changeColor(snackbar: IgxSnackbarComponent) {
+        const characters = '0123456789ABCDEF';
+        let color = '#';
+
+        for (let i = 0; i < 6; i++) {
+            color += characters[Math.floor(Math.random() * 16)];
+        }
+
+        this._colors.push(this.color);
+        this.color = color;
+
+        snackbar.open('Changed color to ' + this.color);
+    }
+
+    public undoColorChange(snackbar) {
+        this.color = this._colors.pop();
+
+        snackbar.close();
+    }
+
+    public onAnimationStarted() {
+        console.log('animation started');
+    }
+
+    public onAnimationDone() {
+        console.log('animation ended');
+    }
+
+    public toggleSnackbar() {
+        this.snackbar.toggle();
+    }
+
+    public close(element) {
+        element.close();
+    }
+}
diff --git a/src/app/stepper-showcase/stepper-showcase.sample.html b/src/app/stepper-showcase/stepper-showcase.sample.html
new file mode 100644
index 00000000000..7b64abbe836
--- /dev/null
+++ b/src/app/stepper-showcase/stepper-showcase.sample.html
@@ -0,0 +1,139 @@
+<div class="sample-stepper-wrapper">
+    <strong>Angular Stepper</strong>
+    <igx-stepper #stepper>
+        <igx-step completed #step (activeChange)="activeStepChange($event)" [isValid]="form1.form.valid">
+            <span igxStepTitle>Step 1</span>
+            <span igxStepSubtitle>(completed)</span>
+            <div igxStepContent class="sample-body" [tabIndex]="-1">
+                <form #form1="ngForm">
+                    <igx-input-group type="box">
+                        <input igxInput name="firstName" type="text" required />
+                        <label igxLabel for="firstName">First Name</label>
+                    </igx-input-group>
+
+                    <div class="nav-buttons">
+                        <button igxButton="contained" (click)="stepper.next()"
+                            [disabled]="!form1.form.valid && stepper.linear">NEXT
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </igx-step>
+        <igx-step [active]="true" #step (activeChange)="activeStepChange($event)" [isValid]="form1.form.valid"
+            [completed]="form1.form.valid && stepper.linear">
+            <span igxStepTitle>Step 2</span>
+            <span igxStepSubtitle>(default)</span>
+            <div igxStepContent class="sample-body" [tabIndex]="-1">
+                <form #form1="ngForm">
+                    <igx-input-group type="box">
+                        <input igxInput name="lastName" type="text" required />
+                        <label igxLabel for="lastName">Last Name</label>
+                    </igx-input-group>
+
+                    <div class="nav-buttons">
+                        <button igxButton="contained" (click)="stepper.prev()"
+                            [disabled]="!form1.form.valid && stepper.linear">PREV
+                        </button>
+                        <button igxButton="contained" (click)="stepper.next()"
+                            [disabled]="!form1.form.valid && stepper.linear">NEXT
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </igx-step>
+        <igx-step optional #step (activeChange)="activeStepChange($event)" [isValid]="form1.form.valid"
+            [completed]="form1.form.valid && stepper.linear">
+            <span igxStepTitle>Step 3</span>
+            <span igxStepSubtitle>(optional)</span>
+            <div igxStepContent class="sample-body" [tabIndex]="-1">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur
+                soluta nulla asperiores, officia ullam recusandae voluptatem omnis
+                perferendis vitae non magni magnam praesentium placeat nemo quas
+                repudiandae. Nisi, quo ex!
+
+                <div class="nav-buttons">
+                    <button igxButton="contained" (click)="stepper.prev()"
+                        [disabled]="!form1.form.valid && stepper.linear">PREV
+                    </button>
+                    <button igxButton="contained" (click)="stepper.next()"
+                        [disabled]="!form1.form.valid && stepper.linear">NEXT
+                    </button>
+                </div>
+            </div>
+        </igx-step>
+
+        <igx-step disabled #step (activeChange)="activeStepChange($event)" [isValid]="form1.form.valid"
+            [completed]="form1.form.valid && stepper.linear">
+            <span igxStepTitle>Step 4</span>
+            <span igxStepSubtitle>(disabled)</span>
+            <div igxStepContent class="sample-body" [tabIndex]="-1">
+                Tabbable content
+                <br />
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur
+                soluta nulla asperiores, officia ullam recusandae voluptatem omnis
+                perferendis vitae non magni magnam praesentium placeat nemo quas
+                repudiandae. Nisi, quo ex!
+            </div>
+        </igx-step>
+    </igx-stepper>
+</div>
+
+<div class="sample-stepper-wrapper">
+    <strong>WC Stepper</strong>
+    <igc-stepper #stepper2>
+      <igc-step complete>
+        <span slot="title">Step1</span>
+        <span slot="subtitle">(completed)</span>
+        <igc-input
+          label="First Name"
+          id="first-name"
+          name="first-name"
+          required
+        ></igc-input>
+        <div class="nav-buttons">
+            <igc-button (click)="stepper2.next()">Next</igc-button>
+        </div>
+      </igc-step>
+
+      <igc-step active>
+        <span slot="title">Step 2</span>
+        <span slot="subtitle">(default)</span>
+        <igc-input
+          label="Last Name"
+          id="last-name"
+          name="last-name"
+          required
+        ></igc-input>
+        <div class="nav-buttons">
+            <igc-button (click)="stepper2.prev()">Prev</igc-button>
+            <igc-button (click)="stepper2.next()">Next</igc-button>
+        </div>
+      </igc-step>
+
+      <igc-step optional>
+        <span slot="title">Step 3</span>
+        <span slot="subtitle">(Optional)</span>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur
+        soluta nulla asperiores, officia ullam recusandae voluptatem omnis
+        perferendis vitae non magni magnam praesentium placeat nemo quas
+        repudiandae. Nisi, quo ex!
+        <div class="nav-buttons">
+            <igc-button (click)="stepper2.prev()">Prev</igc-button>
+            <igc-button (click)="stepper2.next()">Next</igc-button>
+        </div>
+      </igc-step>
+
+      <igc-step disabled>
+        <span slot="title">Step 4</span>
+        <span slot="subtitle">(disabled)</span>
+        <div tabindex="0">
+          Tabbable content
+          <br />
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur
+          soluta nulla asperiores, officia ullam recusandae voluptatem omnis
+          perferendis vitae non magni magnam praesentium placeat nemo quas
+          repudiandae. Nisi, quo ex!
+        </div>
+      </igc-step>
+    </igc-stepper>
+</div>
diff --git a/src/app/stepper-showcase/stepper-showcase.sample.scss b/src/app/stepper-showcase/stepper-showcase.sample.scss
new file mode 100644
index 00000000000..885b25fa260
--- /dev/null
+++ b/src/app/stepper-showcase/stepper-showcase.sample.scss
@@ -0,0 +1,19 @@
+.nav-buttons {
+    margin: 40px 0;
+
+    > * {
+        margin-right: 16px;
+    }
+}
+
+.sample-stepper-wrapper {
+    margin: 16px 0;
+    padding: 16px;
+    border: 1px solid rgba(54, 54, 54, .43);
+}
+
+strong {
+    display: block;
+    text-align: center;
+    margin-bottom: 24px;
+}
diff --git a/src/app/stepper-showcase/stepper-showcase.sample.ts b/src/app/stepper-showcase/stepper-showcase.sample.ts
new file mode 100644
index 00000000000..e292f250236
--- /dev/null
+++ b/src/app/stepper-showcase/stepper-showcase.sample.ts
@@ -0,0 +1,169 @@
+import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
+import { NgIf } from '@angular/common';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { IgxButtonDirective, IgxButtonGroupComponent, IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxSuffixDirective, IgxSwitchComponent, IgxStepActiveIndicatorDirective, IgxIconComponent, IgxStepComponent, IgxStepIndicatorDirective, IgxStepTitleDirective, IgxStepSubtitleDirective, IgxStepContentDirective, IgxAvatarComponent, IgxBadgeComponent, IgxTimePickerComponent, IgxSelectComponent, IgxSelectItemComponent, IgxPrefixDirective, IgxHintDirective, IgxStepperComponent, HorizontalAnimationType, VerticalAnimationType, IgxStepType, IgxStepperTitlePosition, IgxStepperOrientation } from 'igniteui-angular';
+import { defineComponents, IgcStepperComponent, IgcButtonComponent, IgcInputComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcStepperComponent, IgcButtonComponent, IgcInputComponent);
+
+@Component({
+    templateUrl: 'stepper-showcase.sample.html',
+    styleUrls: ['stepper-showcase.sample.scss'],
+    standalone: true,
+    imports: [IgxButtonDirective, IgxButtonGroupComponent, IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxSwitchComponent, IgxStepperComponent, IgxStepActiveIndicatorDirective, IgxIconComponent, IgxStepComponent, IgxStepIndicatorDirective, IgxStepTitleDirective, IgxStepSubtitleDirective, IgxStepContentDirective, NgIf, IgxAvatarComponent, IgxBadgeComponent, IgxTimePickerComponent, ReactiveFormsModule, IgxSelectComponent, IgxSelectItemComponent, IgxPrefixDirective, IgxHintDirective]
+})
+export class IgxStepperShowcaseSampleComponent {
+    @ViewChild('stepper', { static: true }) public stepper: IgxStepperComponent;
+    public displayStep = false;
+    public horizontalAnimationType: HorizontalAnimationType = 'slide';
+    public verticalAnimationType: VerticalAnimationType = 'grow';
+    public animationDuration = 320;
+    public stepType: IgxStepType = IgxStepType.Full;
+    public titlePos: IgxStepperTitlePosition = IgxStepperTitlePosition.Bottom;
+    public setTitlePos = false;
+    public stepTypes = [];
+    public titlePositions = [];
+    public verticalAnimationTypes = [];
+    public horizontalAnimationTypes = [];
+
+    public user = {
+        firstName: 'John',
+        lastName: 'Doe'
+    };
+
+    public user1 = {
+        password: '1337s3cr3t',
+        phone: '',
+        dateOfBirth: new Date('07 July, 1987')
+    };
+
+    public user2 = {
+        firstName: 'Sam',
+        lastName: ''
+    };
+
+    public user3: UntypedFormGroup;
+    public user4: UntypedFormGroup;
+
+    constructor(private cdr: ChangeDetectorRef, fb: UntypedFormBuilder) {
+        this.stepTypes = [
+            {
+                label: 'Indicator', stepType: IgxStepType.Indicator,
+                selected: this.stepType === IgxStepType.Indicator, togglable: true
+            },
+            {
+                label: 'Title', stepType: IgxStepType.Title,
+                selected: this.stepType === IgxStepType.Title, togglable: true
+            },
+            {
+                label: 'Full', stepType: IgxStepType.Full,
+                selected: this.stepType === IgxStepType.Full, togglable: true
+            }
+        ];
+
+        this.titlePositions = [
+            {
+                label: 'Bottom', titlePos: IgxStepperTitlePosition.Bottom,
+                selected: this.titlePos === IgxStepperTitlePosition.Bottom, togglable: true
+            },
+            {
+                label: 'Top', titlePos: IgxStepperTitlePosition.Top,
+                selected: this.titlePos === IgxStepperTitlePosition.Top, togglable: true
+            },
+            {
+                label: 'End', titlePos: IgxStepperTitlePosition.End,
+                selected: this.titlePos === IgxStepperTitlePosition.End, togglable: true
+            },
+            {
+                label: 'Start', titlePos: IgxStepperTitlePosition.Start,
+                selected: this.titlePos === IgxStepperTitlePosition.Start, togglable: true
+            }
+        ];
+
+        this.horizontalAnimationTypes = [
+            {
+                label: 'slide', horizontalAnimationType: HorizontalAnimationType.slide,
+                selected: this.horizontalAnimationType === HorizontalAnimationType.slide, togglable: true
+            },
+            {
+                label: 'fade', horizontalAnimationType: HorizontalAnimationType.fade,
+                selected: this.horizontalAnimationType === HorizontalAnimationType.fade, togglable: true
+            },
+            {
+                label: 'none', horizontalAnimationType: HorizontalAnimationType.none,
+                selected: this.horizontalAnimationType === HorizontalAnimationType.none, togglable: true
+            }
+        ];
+
+        this.verticalAnimationTypes = [
+            {
+                label: 'grow', verticalAnimationType: VerticalAnimationType.Grow,
+                selected: this.verticalAnimationType === VerticalAnimationType.Grow, togglable: true
+            },
+            {
+                label: 'fade', verticalAnimationType: VerticalAnimationType.Fade,
+                selected: this.verticalAnimationType === VerticalAnimationType.Fade, togglable: true
+            },
+            {
+                label: 'none', verticalAnimationType: VerticalAnimationType.None,
+                selected: this.verticalAnimationType === VerticalAnimationType.None, togglable: true
+            }
+        ];
+
+        this.user3 = fb.group({
+            fullName: new UntypedFormControl('', Validators.required),
+            email: ['', Validators.required]
+        });
+
+        this.user4 = fb.group({
+            phone: ['', Validators.required],
+            dateTime: ['']
+        });
+    }
+
+    public toggleStepTypes(event) {
+        this.stepType = this.stepTypes[event.index].stepType;
+    }
+
+    public toggleHorizontalAnimations(event) {
+        this.horizontalAnimationType = this.horizontalAnimationTypes[event.index].horizontalAnimationType;
+    }
+
+    public toggleVerticalAnimations(event) {
+        this.verticalAnimationType = this.verticalAnimationTypes[event.index].verticalAnimationType;
+    }
+
+    public setTitlePosition(event) {
+        this.setTitlePos = event.checked;
+        this.stepper.titlePosition = event.checked ? this.titlePos : null;
+    }
+
+    public toggleTitlePos(event) {
+        this.titlePos = this.titlePositions[event.index].titlePos;
+        if (this.setTitlePos) {
+            this.stepper.titlePosition = this.titlePos;
+        }
+    }
+
+    public activeChanged() {
+        console.log('GOLQM ACTIVE CHANGED');
+    }
+
+    public activeStepChange(ev) {
+        console.log('MALUK CHANGE', ev);
+    }
+
+    public activeStepChanging(ev) {
+        console.log('ACTIVE STEP CHANGING');
+        // ev.cancel = true;
+        console.log(ev);
+    }
+
+    public changeOrientation() {
+        if (this.stepper.orientation === IgxStepperOrientation.Horizontal) {
+            this.stepper.orientation = IgxStepperOrientation.Vertical;
+        } else {
+            this.stepper.orientation = IgxStepperOrientation.Horizontal;
+        }
+    }
+}
diff --git a/src/app/tabs-showcase/tabs-showcase.sample.html b/src/app/tabs-showcase/tabs-showcase.sample.html
new file mode 100644
index 00000000000..e8ba95e09b2
--- /dev/null
+++ b/src/app/tabs-showcase/tabs-showcase.sample.html
@@ -0,0 +1,101 @@
+<div class="items-wrapper">
+    <div class="sample-wrapper">
+        <strong>Angular Tabs</strong>
+        <igx-tabs
+            #tabsNew
+            [selectedIndex]="3"
+            (selectedIndexChanging)="tabsSelectedIndexChanging($event)"
+            (selectedItemChange)="tabsSelectedItemChange($event)"
+        >
+            <igx-tab-item>
+                <igx-tab-header igxRipple>
+                    <igx-icon igxTabHeaderIcon>folder</igx-icon>
+                    <span igxTabHeaderLabel>Tab 1</span>
+                </igx-tab-header>
+                <igx-tab-content>
+                    Content 1
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius sapien ligula.
+                </igx-tab-content>
+            </igx-tab-item>
+
+            <igx-tab-item>
+                <igx-tab-header igxRipple>
+                    <igx-icon igxTabHeaderIcon>folder</igx-icon>
+                    <span igxTabHeaderLabel>{{tab2Label}}</span>
+                </igx-tab-header>
+                <igx-tab-content>
+                    <div class="sample-scrollable">
+                        <igx-list [allowRightPanning]="true" [allowLeftPanning]="true">
+                            <igx-list-item igxRipple="pink" igxRippleTarget=".igx-list__item"
+                                            *ngFor="let contact of contacts">
+                                <igx-avatar igxListThumbnail [src]="contact.avatar"></igx-avatar>
+                                <p igxListLineTitle>{{contact.text}}</p>
+                                <span igxListLineSubTitle>{{contact.phone}}</span>
+                                <igx-icon igxListAction>phone</igx-icon>
+                            </igx-list-item>
+                        </igx-list>
+                    </div>
+                </igx-tab-content>
+            </igx-tab-item>
+
+            <igx-tab-item>
+                <igx-tab-header igxRipple>
+                    <igx-icon igxTabHeaderIcon>folder</igx-icon>
+                    <span igxTabHeaderLabel>Tab 3 Lorem ipsum dolor</span>
+                </igx-tab-header>
+                <igx-tab-content>
+                    Content 3
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius sapien ligula.
+                </igx-tab-content>
+            </igx-tab-item>
+
+            <igx-tab-item [disabled]="true">
+                <igx-tab-header>
+                    <igx-icon igxTabHeaderIcon>folder</igx-icon>
+                    <span igxTabHeaderLabel>Tab 4 Disabled</span>
+                </igx-tab-header>
+                <igx-tab-content>
+                    Content 4
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius sapien ligula.
+                </igx-tab-content>
+            </igx-tab-item>
+        </igx-tabs>
+    </div>
+
+    <div class="sample-wrapper">
+        <strong>WC Tabs</strong>
+        <igc-tabs>
+            <igc-tab panel="first">
+                <igx-icon>folder</igx-icon>
+                Tab 1
+                </igc-tab>
+                <igc-tab panel="second">
+                <igx-icon >folder</igx-icon>
+                Tab 2
+                </igc-tab>
+                <igc-tab panel="third">
+                <igx-icon >folder</igx-icon>
+                Tab 3 Lorem ipsum dolor
+                </igc-tab>
+                <igc-tab panel="fourth" disabled>
+                <igx-icon >folder</igx-icon>
+                Tab 4 disabled
+                </igc-tab>
+                <igc-tab-panel id="first">Content 1 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat, eos?</igc-tab-panel>
+                <igc-tab-panel id="second">
+                <div class="sample-scrollable">
+                    <igx-list [allowRightPanning]="true" [allowLeftPanning]="true">
+                        <igx-list-item igxRipple="pink" igxRippleTarget=".igx-list__item"
+                                        *ngFor="let contact of contacts">
+                            <igx-avatar igxListThumbnail [src]="contact.avatar"></igx-avatar>
+                            <p igxListLineTitle>{{contact.text}}</p>
+                            <span igxListLineSubTitle>{{contact.phone}}</span>
+                            <igx-icon igxListAction>phone</igx-icon>
+                        </igx-list-item>
+                    </igx-list>
+                </div>
+                </igc-tab-panel>
+                <igc-tab-panel id="third">Content 3 Lorem ipsum dolor sit amet consectetur adipisicing elit. At, doloremque?</igc-tab-panel>
+        </igc-tabs>
+    </div>
+</div>
diff --git a/src/app/tabs-showcase/tabs-showcase.sample.scss b/src/app/tabs-showcase/tabs-showcase.sample.scss
new file mode 100644
index 00000000000..cf735fa6ed1
--- /dev/null
+++ b/src/app/tabs-showcase/tabs-showcase.sample.scss
@@ -0,0 +1,10 @@
+.items-wrapper {
+    height: 400px;
+}
+
+strong {
+    color: hsla(var(--ig-secondary-500));
+    display: block;
+    text-align: center;
+    margin-bottom: 24px;
+}
diff --git a/src/app/tabs-showcase/tabs-showcase.sample.ts b/src/app/tabs-showcase/tabs-showcase.sample.ts
new file mode 100644
index 00000000000..b76577974f8
--- /dev/null
+++ b/src/app/tabs-showcase/tabs-showcase.sample.ts
@@ -0,0 +1,242 @@
+import {Component, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';
+import { NgFor } from '@angular/common';
+import { IgxAvatarComponent, IgxButtonDirective, IgxButtonGroupComponent, IgxGridComponent, IgxIconButtonDirective, IgxIconComponent, IgxListActionDirective, IgxListComponent, IgxListItemComponent, IgxListLineSubTitleDirective, IgxListLineTitleDirective, IgxListThumbnailDirective, IgxPrefixDirective, IgxRippleDirective, IgxSuffixDirective, IgxTabContentComponent, IgxTabHeaderComponent, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsComponent, ITabsSelectedIndexChangingEventArgs, ITabsSelectedItemChangeEventArgs } from 'igniteui-angular';
+import { defineComponents, IgcTabsComponent, IgcTabComponent, IgcTabPanelComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcTabsComponent, IgcTabComponent, IgcTabPanelComponent);
+
+@Component({
+    selector: 'app-tabs-showcase-sample',
+    styleUrls: ['tabs-showcase.sample.scss'],
+    templateUrl: 'tabs-showcase.sample.html',
+    encapsulation: ViewEncapsulation.None,
+    standalone: true,
+    imports: [IgxButtonDirective, IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxRippleDirective, IgxIconComponent, IgxTabHeaderIconDirective, IgxIconButtonDirective, IgxTabHeaderLabelDirective, IgxTabContentComponent, IgxListComponent, NgFor, IgxListItemComponent, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxListActionDirective, IgxButtonGroupComponent, IgxPrefixDirective, IgxSuffixDirective, IgxGridComponent]
+})
+export class TabsShowcaseSampleComponent implements OnInit {
+
+    @ViewChild('tabsNew')
+    private tabs: IgxTabsComponent;
+
+    @ViewChild('dynamicTabs')
+    private dynamicTabs: IgxTabsComponent;
+
+    public tab2Label = 'Tab 2';
+
+    public tabAlignment = 'start';
+
+    public tabAlignments = [
+        { label: 'start', selected: this.tabAlignment === 'start', togglable: true },
+        { label: 'center', selected: this.tabAlignment === 'center', togglable: true },
+        { label: 'end', selected: this.tabAlignment === 'end', togglable: true },
+        { label: 'justify', selected: this.tabAlignment === 'justify', togglable: true }
+    ];
+
+    public scrollableTabs = [];
+
+    public data = [
+        /* eslint-disable max-len */
+        { ID: 'ALFKI', CompanyName: 'Alfreds Futterkiste', ContactName: 'Maria Anders', ContactTitle: 'Sales Representative', Address: 'Obere Str. 57', City: 'Berlin', Region: null, PostalCode: '12209', Country: 'Germany', Phone: '030-0074321', Fax: '030-0076545' },
+        { ID: 'ANATR', CompanyName: 'Ana Trujillo Emparedados y helados', ContactName: 'Ana Trujillo', ContactTitle: 'Owner', Address: 'Avda. de la Constitución 2222', City: 'México D.F.', Region: null, PostalCode: '05021', Country: 'Mexico', Phone: '(5) 555-4729', Fax: '(5) 555-3745' },
+        { ID: 'ANTON', CompanyName: 'Antonio Moreno Taquería', ContactName: 'Antonio Moreno', ContactTitle: 'Owner', Address: 'Mataderos 2312', City: 'México D.F.', Region: null, PostalCode: '05023', Country: 'Mexico', Phone: '(5) 555-3932', Fax: null },
+        { ID: 'AROUT', CompanyName: 'Around the Horn', ContactName: 'Thomas Hardy', ContactTitle: 'Sales Representative', Address: '120 Hanover Sq.', City: 'London', Region: null, PostalCode: 'WA1 1DP', Country: 'UK', Phone: '(171) 555-7788', Fax: '(171) 555-6750' },
+        { ID: 'BERGS', CompanyName: 'Berglunds snabbköp', ContactName: 'Christina Berglund', ContactTitle: 'Order Administrator', Address: 'Berguvsvägen 8', City: 'Luleå', Region: null, PostalCode: 'S-958 22', Country: 'Sweden', Phone: '0921-12 34 65', Fax: '0921-12 34 67' },
+        { ID: 'BLAUS', CompanyName: 'Blauer See Delikatessen', ContactName: 'Hanna Moos', ContactTitle: 'Sales Representative', Address: 'Forsterstr. 57', City: 'Mannheim', Region: null, PostalCode: '68306', Country: 'Germany', Phone: '0621-08460', Fax: '0621-08924' },
+        { ID: 'BLONP', CompanyName: 'Blondesddsl père et fils', ContactName: 'Frédérique Citeaux', ContactTitle: 'Marketing Manager', Address: '24, place Kléber', City: 'Strasbourg', Region: null, PostalCode: '67000', Country: 'France', Phone: '88.60.15.31', Fax: '88.60.15.32' },
+        { ID: 'BOLID', CompanyName: 'Bólido Comidas preparadas', ContactName: 'Martín Sommer', ContactTitle: 'Owner', Address: 'C/ Araquil, 67', City: 'Madrid', Region: null, PostalCode: '28023', Country: 'Spain', Phone: '(91) 555 22 82', Fax: '(91) 555 91 99' },
+        { ID: 'BONAP', CompanyName: 'Bon app\'', ContactName: 'Laurence Lebihan', ContactTitle: 'Owner', Address: '12, rue des Bouchers', City: 'Marseille', Region: null, PostalCode: '13008', Country: 'France', Phone: '91.24.45.40', Fax: '91.24.45.41' },
+        { ID: 'BOTTM', CompanyName: 'Bottom-Dollar Markets', ContactName: 'Elizabeth Lincoln', ContactTitle: 'Accounting Manager', Address: '23 Tsawassen Blvd.', City: 'Tsawassen', Region: 'BC', PostalCode: 'T2F 8M4', Country: 'Canada', Phone: '(604) 555-4729', Fax: '(604) 555-3745' },
+        { ID: 'BSBEV', CompanyName: 'B\'s Beverages', ContactName: 'Victoria Ashworth', ContactTitle: 'Sales Representative', Address: 'Fauntleroy Circus', City: 'London', Region: null, PostalCode: 'EC2 5NT', Country: 'UK', Phone: '(171) 555-1212', Fax: null },
+        { ID: 'CACTU', CompanyName: 'Cactus Comidas para llevar', ContactName: 'Patricio Simpson', ContactTitle: 'Sales Agent', Address: 'Cerrito 333', City: 'Buenos Aires', Region: null, PostalCode: '1010', Country: 'Argentina', Phone: '(1) 135-5555', Fax: '(1) 135-4892' },
+        { ID: 'CENTC', CompanyName: 'Centro comercial Moctezuma', ContactName: 'Francisco Chang', ContactTitle: 'Marketing Manager', Address: 'Sierras de Granada 9993', City: 'México D.F.', Region: null, PostalCode: '05022', Country: 'Mexico', Phone: '(5) 555-3392', Fax: '(5) 555-7293' },
+        { ID: 'CHOPS', CompanyName: 'Chop-suey Chinese', ContactName: 'Yang Wang', ContactTitle: 'Owner', Address: 'Hauptstr. 29', City: 'Bern', Region: null, PostalCode: '3012', Country: 'Switzerland', Phone: '0452-076545', Fax: null },
+        { ID: 'COMMI', CompanyName: 'Comércio Mineiro', ContactName: 'Pedro Afonso', ContactTitle: 'Sales Associate', Address: 'Av. dos Lusíadas, 23', City: 'Sao Paulo', Region: 'SP', PostalCode: '05432-043', Country: 'Brazil', Phone: '(11) 555-7647', Fax: null },
+        { ID: 'CONSH', CompanyName: 'Consolidated Holdings', ContactName: 'Elizabeth Brown', ContactTitle: 'Sales Representative', Address: 'Berkeley Gardens 12 Brewery', City: 'London', Region: null, PostalCode: 'WX1 6LT', Country: 'UK', Phone: '(171) 555-2282', Fax: '(171) 555-9199' },
+        { ID: 'DRACD', CompanyName: 'Drachenblut Delikatessen', ContactName: 'Sven Ottlieb', ContactTitle: 'Order Administrator', Address: 'Walserweg 21', City: 'Aachen', Region: null, PostalCode: '52066', Country: 'Germany', Phone: '0241-039123', Fax: '0241-059428' },
+        { ID: 'DUMON', CompanyName: 'Du monde entier', ContactName: 'Janine Labrune', ContactTitle: 'Owner', Address: '67, rue des Cinquante Otages', City: 'Nantes', Region: null, PostalCode: '44000', Country: 'France', Phone: '40.67.88.88', Fax: '40.67.89.89' },
+        { ID: 'EASTC', CompanyName: 'Eastern Connection', ContactName: 'Ann Devon', ContactTitle: 'Sales Agent', Address: '35 King George', City: 'London', Region: null, PostalCode: 'WX3 6FW', Country: 'UK', Phone: '(171) 555-0297', Fax: '(171) 555-3373' },
+        { ID: 'ERNSH', CompanyName: 'Ernst Handel', ContactName: 'Roland Mendel', ContactTitle: 'Sales Manager', Address: 'Kirchgasse 6', City: 'Graz', Region: null, PostalCode: '8010', Country: 'Austria', Phone: '7675-3425', Fax: '7675-3426' },
+        { ID: 'FAMIA', CompanyName: 'Familia Arquibaldo', ContactName: 'Aria Cruz', ContactTitle: 'Marketing Assistant', Address: 'Rua Orós, 92', City: 'Sao Paulo', Region: 'SP', PostalCode: '05442-030', Country: 'Brazil', Phone: '(11) 555-9857', Fax: null },
+        { ID: 'FISSA', CompanyName: 'FISSA Fabrica Inter. Salchichas S.A.', ContactName: 'Diego Roel', ContactTitle: 'Accounting Manager', Address: 'C/ Moralzarzal, 86', City: 'Madrid', Region: null, PostalCode: '28034', Country: 'Spain', Phone: '(91) 555 94 44', Fax: '(91) 555 55 93' },
+        { ID: 'FOLIG', CompanyName: 'Folies gourmandes', ContactName: 'Martine Rancé', ContactTitle: 'Assistant Sales Agent', Address: '184, chaussée de Tournai', City: 'Lille', Region: null, PostalCode: '59000', Country: 'France', Phone: '20.16.10.16', Fax: '20.16.10.17' },
+        { ID: 'FOLKO', CompanyName: 'Folk och fä HB', ContactName: 'Maria Larsson', ContactTitle: 'Owner', Address: 'Åkergatan 24', City: 'Bräcke', Region: null, PostalCode: 'S-844 67', Country: 'Sweden', Phone: '0695-34 67 21', Fax: null },
+        { ID: 'FRANK', CompanyName: 'Frankenversand', ContactName: 'Peter Franken', ContactTitle: 'Marketing Manager', Address: 'Berliner Platz 43', City: 'München', Region: null, PostalCode: '80805', Country: 'Germany', Phone: '089-0877310', Fax: '089-0877451' },
+        { ID: 'FRANR', CompanyName: 'France restauration', ContactName: 'Carine Schmitt', ContactTitle: 'Marketing Manager', Address: '54, rue Royale', City: 'Nantes', Region: null, PostalCode: '44000', Country: 'France', Phone: '40.32.21.21', Fax: '40.32.21.20' },
+        { ID: 'FRANS', CompanyName: 'Franchi S.p.A.', ContactName: 'Paolo Accorti', ContactTitle: 'Sales Representative', Address: 'Via Monte Bianco 34', City: 'Torino', Region: null, PostalCode: '10100', Country: 'Italy', Phone: '011-4988260', Fax: '011-4988261' }
+    ];
+    public localData;
+    public lastYear = new Date().getFullYear() - 1;
+    public employeesHData = [
+            {
+              EmployeeID: '56250fa57ab1535722e564a6',
+              FirstName: 'Downs',
+              LastName: 'Holcomb',
+              Country: 'Italy',
+              Age: 35,
+              RegisteredDate2: new Date(this.lastYear, 7, 25),
+              IsActive2: false,
+              EmployeeID2: '56250fa57ab1535722e564a6',
+              FirstName2: 'Downs',
+              LastName2: 'Holcomb',
+              Country2: 'Italy',
+              Age2: 35
+            },
+            {
+              EmployeeID: '56250fa5c0fd04f12555d44d',
+              FirstName: 'Mckenzie',
+              LastName: 'Calderon',
+              Country: 'USA',
+              Age: 26,
+              RegisteredDate: new Date(this.lastYear - 1, 9, 22),
+              IsActive: false,
+              RegisteredDate2: new Date(this.lastYear, 7, 25),
+              IsActive2: false,
+              EmployeeID2: '56250fa57ab1535722e564a6',
+              FirstName2: 'Downs',
+              LastName2: 'Holcomb',
+              Country2: 'Italy',
+              Age2: 35
+
+            },
+            {
+              EmployeeID: '56250fa565a7bcc21f6bd15e',
+              FirstName: 'Howell',
+              LastName: 'Hawkins',
+              Country: 'Canada',
+              Age: 25,
+              RegisteredDate: new Date(this.lastYear, 8, 8),
+              IsActive: false,
+              RegisteredDate2: new Date(this.lastYear, 7, 25),
+              IsActive2: false,
+              EmployeeID2: '56250fa57ab1535722e564a6',
+              FirstName2: 'Downs',
+              LastName2: 'Holcomb',
+              Country2: 'Italy',
+              Age2: 35
+            },
+            {
+              EmployeeID: '56250fa5d71a83c33f3f6479',
+              FirstName: 'Sheppard',
+              LastName: 'Nicholson',
+              Country: 'Italy',
+              Age: 49,
+              RegisteredDate: new Date(this.lastYear - 1, 6, 28),
+              IsActive: false,
+              RegisteredDate2: new Date(this.lastYear, 7, 25),
+              IsActive2: false,
+              EmployeeID2: '56250fa57ab1535722e564a6',
+              FirstName2: 'Downs',
+              LastName2: 'Holcomb',
+              Country2: 'Italy',
+              Age2: 35
+            },
+            {
+              EmployeeID: '56250fa546abbe8c616d37eb',
+              FirstName: 'Bettye',
+              LastName: 'Trujillo',
+              Country: 'Canada',
+              Age: 37,
+              RegisteredDate: new Date(new Date().setDate(-20)),
+              IsActive: false,
+              RegisteredDate2: new Date(this.lastYear, 7, 25),
+              IsActive2: false,
+              EmployeeID2: '56250fa57ab1535722e564a6',
+              FirstName2: 'Downs',
+              LastName2: 'Holcomb',
+              Country2: 'Italy',
+              Age2: 35
+            }];
+
+    public contacts: any[] = [{
+        avatar: 'assets/images/avatar/1.jpg',
+        favorite: true,
+        key: '1',
+        link: '#',
+        phone: '770-504-2217',
+        text: 'Terrance Orta'
+    }, {
+        avatar: 'assets/images/avatar/2.jpg',
+        favorite: false,
+        key: '2',
+        link: '#',
+        phone: '423-676-2869',
+        text: 'Richard Mahoney'
+    }, {
+        avatar: 'assets/images/avatar/3.jpg',
+        favorite: false,
+        key: '3',
+        link: '#',
+        phone: '859-496-2817',
+        text: 'Donna Price'
+    }, {
+        avatar: 'assets/images/avatar/4.jpg',
+        favorite: false,
+        key: '4',
+        link: '#',
+        phone: '901-747-3428',
+        text: 'Lisa Landers'
+    }];
+
+    public tabsArray = [
+        { name: 'Tab 1', selected: true },
+        { name: 'Tab 2', selected: true }
+    ];
+
+    public ngOnInit(): void {
+        for (let i = 0; i < 20; i++) {
+            const tab = 'Tab ' + i;
+            this.scrollableTabs.push(tab);
+        }
+        this.localData = this.employeesHData;
+    }
+
+    public addTab() {
+        const contact = {
+            text: 'John Doe',
+            phone: '555-555-5555'
+        };
+        this.contacts.push(contact);
+
+        requestAnimationFrame(() => {
+            this.dynamicTabs.selectedIndex = this.contacts.length -1;
+        });
+    }
+
+    public addSelectedTab() {
+        this.tabsArray.forEach(t => {
+            t.selected = false;
+        });
+        this.tabsArray.push({ name: 'New Tab', selected: true });
+    }
+
+    public closeTab(i: number) {
+        this.contacts.splice(i, 1);
+    }
+
+    public changeSelectedIndex() {
+        this.tabs.selectedIndex = 1;
+    }
+
+    public renameTab2() {
+        this.tab2Label = 'Tab 2 Extra Long Header';
+    }
+
+    public changeTabSelected() {
+        this.tabs.items.toArray()[1].selected = true;
+    }
+
+    public selectAlignment(event) {
+        this.tabAlignment = this.tabAlignments[event.index].label;
+    }
+
+    public tabsSelectedIndexChanging(_args: ITabsSelectedIndexChangingEventArgs) {
+        // if (args.newIndex === 1) {
+        //     args.cancel = true;
+        // }
+    }
+
+    public tabsSelectedItemChange(_args: ITabsSelectedItemChangeEventArgs) {
+        // console.log(args);
+    }
+}
+
diff --git a/src/app/toast-showcase/toast-showcase.sample.html b/src/app/toast-showcase/toast-showcase.sample.html
new file mode 100644
index 00000000000..f03d5152ac1
--- /dev/null
+++ b/src/app/toast-showcase/toast-showcase.sample.html
@@ -0,0 +1,25 @@
+<div class="columns-container">
+
+    <article class="column">
+        <h4 class="sample-title">Angular Toast vs WebComponents Toast</h4>
+        <div class="btn-group">
+            <button
+                igxButton="contained"
+                igxRipple="white"
+                (click)="toastWC.toggle(); toast.toggle()"
+            >
+            Toggle Toasts
+            </button>
+        </div>
+    </article>
+</div>
+
+<div igxOverlayOutlet #outlet="overlay-outlet"></div>
+
+<igx-toast #toast [outlet]="outlet">
+    Angular Toast will self-destruct in 4 seconds.
+</igx-toast>
+
+<igc-toast #toastWC position="middle">
+    WC Toast will self-destruct in 4 seconds.
+</igc-toast>
diff --git a/src/app/toast-showcase/toast-showcase.sample.scss b/src/app/toast-showcase/toast-showcase.sample.scss
new file mode 100644
index 00000000000..d14115563f6
--- /dev/null
+++ b/src/app/toast-showcase/toast-showcase.sample.scss
@@ -0,0 +1,19 @@
+.columns-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    column-gap: 16px;
+    margin: 16px;
+}
+
+.column {
+    margin: 16px 0;
+}
+
+.btn-group {
+    display: flex;
+    margin-top: 16px;
+}
+
+button {
+    margin-right: 16px;
+}
diff --git a/src/app/toast-showcase/toast-showcase.sample.ts b/src/app/toast-showcase/toast-showcase.sample.ts
new file mode 100644
index 00000000000..2345dff9355
--- /dev/null
+++ b/src/app/toast-showcase/toast-showcase.sample.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { IgxButtonDirective, IgxOverlayOutletDirective, IgxRippleDirective, IgxToastComponent } from 'igniteui-angular';
+import { defineComponents, IgcToastComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcToastComponent);
+
+@Component({
+    selector: 'app-toast-showcase-sample',
+    styleUrls: ['toast-showcase.sample.scss'],
+    templateUrl: 'toast-showcase.sample.html',
+    standalone: true,
+    imports: [IgxButtonDirective, IgxRippleDirective, IgxOverlayOutletDirective, IgxToastComponent]
+})
+export class ToastShowcaseSampleComponent {}
diff --git a/src/app/tree-showcase/tree-showcase.sample.html b/src/app/tree-showcase/tree-showcase.sample.html
new file mode 100644
index 00000000000..f1c3a768d4a
--- /dev/null
+++ b/src/app/tree-showcase/tree-showcase.sample.html
@@ -0,0 +1,39 @@
+<size-selector #sizeSelector></size-selector>
+
+<div class="wrapper">
+    <div class="tree-container">
+        <strong>Angular Tree</strong>
+        <igx-tree [toggleNodeOnClick]="true" [style.--ig-size]="'var(--ig-size-' + sizeSelector.size + ')'">
+            <igx-tree-node *ngFor="let node of data" [data]="node">
+                {{ node.CompanyName }}
+                <igx-tree-node *ngFor="let child of node.ChildCompanies" [data]="child">
+                    {{ child.CompanyName }}
+                    <igx-tree-node *ngFor="let leafchild of child.ChildCompanies" [data]="leafchild">
+                        {{ leafchild.CompanyName }}
+                    </igx-tree-node>
+                </igx-tree-node>
+            </igx-tree-node>
+        </igx-tree>
+    </div>
+    
+    <div class="tree-container">
+        <strong>WC Tree</strong>
+          <igc-tree toggle-node-on-click="true" [style.--ig-size]="'var(--ig-size-' + sizeSelector.size + ')'">
+            <ng-container *ngFor="let node of data">
+                <igc-tree-item [label]="node.CompanyName">
+                    <ng-container *ngIf="node.ChildCompanies && node.ChildCompanies.length">
+                        <ng-container *ngFor="let child of node.ChildCompanies">
+                            <igc-tree-item [label]="child.CompanyName">
+                                <ng-container *ngIf="child.ChildCompanies && child.ChildCompanies.length">
+                                    <ng-container *ngFor="let leafchild of child.ChildCompanies">
+                                        <igc-tree-item [label]="leafchild.CompanyName"></igc-tree-item>
+                                    </ng-container>
+                                </ng-container>
+                            </igc-tree-item>
+                        </ng-container>
+                    </ng-container>
+                </igc-tree-item>
+            </ng-container>
+        </igc-tree>
+    </div>
+</div>
diff --git a/src/app/tree-showcase/tree-showcase.sample.scss b/src/app/tree-showcase/tree-showcase.sample.scss
new file mode 100644
index 00000000000..385d1c2f89d
--- /dev/null
+++ b/src/app/tree-showcase/tree-showcase.sample.scss
@@ -0,0 +1,16 @@
+.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+}
+
+.tree-container {
+    margin: 16px;
+    max-width: 350px;
+}
+
+strong {
+    color: hsla(var(--ig-secondary-500));
+    display: block;
+    margin-top: 16px;
+    margin-bottom: 24px;
+}
\ No newline at end of file
diff --git a/src/app/tree-showcase/tree-showcase.sample.ts b/src/app/tree-showcase/tree-showcase.sample.ts
new file mode 100644
index 00000000000..076eef28270
--- /dev/null
+++ b/src/app/tree-showcase/tree-showcase.sample.ts
@@ -0,0 +1,346 @@
+import { useAnimation } from '@angular/animations';
+import { NgFor, NgTemplateOutlet, NgIf, AsyncPipe } from '@angular/common';
+import { AfterViewInit, ChangeDetectorRef, Component, ViewChild } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+    IgxTreeNodeComponent,
+    IgxTreeSearchResolver,
+    IgxTreeComponent,
+    ITreeNodeTogglingEventArgs,
+    ITreeNodeToggledEventArgs,
+    ITreeNodeSelectionEvent,
+    IgxTreeNode,
+    IgxButtonDirective,
+    IgxButtonGroupComponent,
+    IgxIconComponent,
+    IgxInputDirective,
+    IgxInputGroupComponent,
+    IgxLabelDirective,
+    IgxLayoutDirective, 
+    IgxSwitchComponent,
+    IgxTreeNodeLinkDirective,
+    IgxTreeExpandIndicatorDirective
+} from 'igniteui-angular';
+import { Subject } from 'rxjs';
+import { cloneDeep } from 'lodash-es';
+import { HIERARCHICAL_SAMPLE_DATA } from '../shared/sample-data';
+import { growVerIn, growVerOut } from 'igniteui-angular/animations';
+import { SizeSelectorComponent } from '../size-selector/size-selector.component';
+import { defineComponents, IgcTreeComponent, IgcTreeItemComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcTreeComponent, IgcTreeItemComponent);
+
+interface CompanyData {
+    ID: string;
+    CompanyName?: string;
+    ContactName?: string;
+    ContactTitle?: string;
+    Address?: string;
+    City?: string;
+    Region?: string;
+    PostalCode?: string;
+    Country?: string;
+    Phone?: string;
+    Fax?: string;
+    ChildCompanies?: CompanyData[];
+    selected?: boolean;
+    expanded?: boolean;
+    disabled?: boolean;
+    active?: boolean;
+}
+
+@Component({
+    selector: 'app-tree-showcase-sample',
+    templateUrl: 'tree-showcase.sample.html',
+    styleUrls: ['tree-showcase.sample.scss'],
+    standalone: true,
+    imports: [
+        IgxLayoutDirective,
+        IgxInputGroupComponent,
+        IgxInputDirective,
+        IgxButtonDirective,
+        IgxLabelDirective,
+        FormsModule,
+        IgxSwitchComponent,
+        IgxButtonGroupComponent,
+        IgxTreeComponent, 
+        IgxTreeNodeComponent,
+        NgFor,
+        IgxTreeNodeLinkDirective,
+        IgxTreeExpandIndicatorDirective,
+        NgTemplateOutlet,
+        IgxIconComponent,
+        NgIf,
+        AsyncPipe,
+        SizeSelectorComponent
+    ]
+})
+export class TreeShowcaseSampleComponent implements AfterViewInit {
+    @ViewChild('tree1', { static: true })
+    public tree: IgxTreeComponent;
+
+    @ViewChild('test', { static: true })
+    public testNode: IgxTreeNodeComponent<any>;
+
+    public selectionModes = [];
+
+    public selectionMode = 'Cascading';
+
+    public animationDuration = 400;
+
+    public data: CompanyData[];
+
+    public singleBranchExpand = false;
+
+    public asyncItems = new Subject<CompanyData[]>();
+    public loadDuration = 6000;
+    private iteration = 0;
+    private addedIndex = 0;
+
+    private initData: CompanyData[];
+
+    constructor(private cdr: ChangeDetectorRef) {
+        this.selectionModes = [
+            { label: 'None', selectMode: 'None', selected: this.selectionMode === 'None', togglable: true },
+            { label: 'Multiple', selectMode: 'Multiple', selected: this.selectionMode === 'Multiple', togglable: true },
+            { label: 'Cascade', selectMode: 'Cascading', selected: this.selectionMode === 'Cascading', togglable: true }
+        ];
+        this.data = cloneDeep(HIERARCHICAL_SAMPLE_DATA);
+        this.initData = cloneDeep(HIERARCHICAL_SAMPLE_DATA);
+        this.mapData(this.data);
+    }
+
+    public setDummy() {
+        this.data = generateHierarchicalData('ChildCompanies', 3, 6, 0);
+    }
+
+    public handleNodeExpanding(_event: ITreeNodeTogglingEventArgs) {
+        // do something w/ data
+    }
+
+    public handleNodeExpanded(_event: ITreeNodeToggledEventArgs) {
+        // do something w/ data
+    }
+
+    public handleNodeCollapsing(_event: ITreeNodeTogglingEventArgs) {
+        // do something w/ data
+    }
+
+    public handleNodeCollapsed(_event: ITreeNodeToggledEventArgs) {
+        // do something w/ data
+    }
+
+
+    public addDataChild(key: string) {
+        const targetNode = this.getNodeByName(key);
+        if (!targetNode.data.ChildCompanies) {
+            targetNode.data.ChildCompanies = [];
+        }
+        const data = targetNode.data.ChildCompanies;
+        data.push(Object.assign({}, data[data.length - 1],
+            { CompanyName: `Added ${this.addedIndex++}`, selected: this.addedIndex % 2 === 0, ChildCompanies: [] }));
+        this.cdr.detectChanges();
+    }
+
+    public deleteLastChild(key: string) {
+        const targetNode = this.getNodeByName(key);
+        if (!targetNode.data.ChildCompanies) {
+            targetNode.data.ChildCompanies = [];
+        }
+        const data = targetNode.data.ChildCompanies;
+        data.splice(data.length - 1, 1);
+    }
+
+    public deleteNodesFromParent(key: string, deleteNodes: string) {
+        const parent = this.getNodeByName(key);
+        const nodeIds = deleteNodes.split(';');
+        nodeIds.forEach((nodeId) => {
+            const index = parent.data.ChildCompanies.findIndex(e => e.ID === nodeId);
+            parent.data.ChildCompanies.splice(index, 1);
+        });
+    }
+
+    public addSeveralNodes(key: string) {
+        const targetNode = this.getNodeByName(key);
+        if (!targetNode.data.ChildCompanies) {
+            targetNode.data.ChildCompanies = [];
+        }
+        const arr = [{
+            ID: 'Some1',
+            CompanyName: 'Test 1',
+            selected: false,
+            ChildCompanies: [{
+                ID: 'Some4',
+                CompanyName: 'Test 5',
+                selected: true,
+            }]
+        },
+        {
+            ID: 'Some2',
+            CompanyName: 'Test 2',
+            selected: false
+        },
+        {
+            ID: 'Some3',
+            CompanyName: 'Test 3',
+            selected: false
+        }];
+        this.getNodeByName(key).data.ChildCompanies = arr;
+        this.cdr.detectChanges();
+    }
+
+    public handleRemote(node: IgxTreeNodeComponent<any>, event: boolean) {
+        console.log(event);
+        node.loading = true;
+        setTimeout(() => {
+            const newData: CompanyData[] = [];
+            for (let i = 0; i < 10; i++) {
+                newData.push({
+                    ID: `Remote ${i}`,
+                    CompanyName: `Remote ${i}`
+                });
+            }
+            node.loading = false;
+            this.asyncItems.next(newData);
+        }, this.loadDuration);
+    }
+
+    public ngAfterViewInit() {
+        this.tree.nodes.toArray().forEach(node => {
+            node.selectedChange.subscribe(() => {});
+        });
+    }
+
+    public toggleSelectionMode() { }
+
+    public addItem() {
+        const newArray = [...this.data];
+        const children = Math.floor(Math.random() * 4);
+        const createChildren = (count: number): CompanyData[] => {
+            const array = [];
+            for (let i = 0; i < count; i++) {
+                this.iteration++;
+                array.push({
+                    ID: `TEST${this.iteration}`,
+                    CompanyName: `TEST${this.iteration}`
+                });
+            }
+            return array;
+        };
+
+        this.iteration++;
+        newArray.push({
+            ID: `TEST${this.iteration}`,
+            CompanyName: `TEST${this.iteration}`,
+            ChildCompanies: createChildren(children)
+        });
+        this.data = newArray;
+    }
+
+    public resetData() {
+        this.data = [...this.initData];
+    }
+
+    public get animationSettings() {
+        return {
+            openAnimation: useAnimation(growVerIn, {
+                params: {
+                    duration: `${this.animationDuration}ms`
+                }
+            }),
+            closeAnimation: useAnimation(growVerOut, {
+                params: {
+                    duration: `${this.animationDuration}ms`
+                }
+            })
+        };
+    }
+
+    public selectSpecific() {
+        this.tree.nodes.toArray()[0].selected = true;
+        this.tree.nodes.toArray()[14].selected = true;
+        this.tree.nodes.toArray()[1].selected = true;
+        this.tree.nodes.toArray()[4].selected = true;
+    }
+
+    public selectAll() {
+        this.tree.nodes.toArray().forEach(node => node.selected = true);
+    }
+
+    public deselectSpecific() {
+        const arr = [
+            this.tree.nodes.toArray()[0],
+            this.tree.nodes.toArray()[14],
+            this.tree.nodes.toArray()[1],
+            this.tree.nodes.toArray()[4]
+        ];
+        this.tree.deselectAll(arr);
+    }
+
+    public deselectAll() {
+        this.tree.deselectAll();
+    }
+
+    public changeNodeSelectionState() {
+        this.tree.nodes.toArray()[8].selected = !this.tree.nodes.toArray()[8].selected;
+    }
+
+    public changeNodeData() {
+        this.tree.nodes.toArray()[8].data.selected = !this.tree.nodes.toArray()[8].data.selected;
+        this.cdr.detectChanges();
+    }
+
+    public nodeSelection(event: ITreeNodeSelectionEvent) {
+        // console.log(event);
+        if (event.newSelection.find(x => x.data.ID === 'igxTreeNode_1')) {
+            //event.newSelection = [...event.newSelection, this.tree.nodes.toArray()[0]];
+        }
+    }
+
+    public customSearch(term: string) {
+        const searchResult = this.tree.findNodes(term, this.containsComparer);
+        // console.log(searchResult);
+        return searchResult;
+    }
+
+    public activeNodeChanged(_event: IgxTreeNode<any>) {
+        // active node changed
+    }
+
+    public keydown(_event: KeyboardEvent) {
+        // console.log(evt);
+    }
+
+    private mapData(data: any[]) {
+        data.forEach(x => {
+            x.selected = false;
+            if (x.hasOwnProperty('ChildCompanies') && x.ChildCompanies.length) {
+                this.mapData(x.ChildCompanies);
+            }
+        });
+    }
+
+    private containsComparer: IgxTreeSearchResolver =
+        (term: any, node: IgxTreeNodeComponent<any>) => node.data?.ID?.toLowerCase()?.indexOf(term.toLowerCase()) > -1;
+
+    private getNodeByName(key: string) {
+        return this.tree.findNodes(key, (_term: string, n: IgxTreeNodeComponent<any>) => n.data?.ID === _term)[0];
+    }
+}
+
+
+const generateHierarchicalData = (childKey: string, level = 7, children = 6, iter = 0): any[] => {
+    const returnArray = [];
+    if (level === 0) {
+        return returnArray;
+    }
+    for (let i = 0; i < children; i++) {
+        // create Root member
+        iter++;
+        returnArray.push({
+            ID: `Dummy${iter}`, CompanyName: `Dummy-${iter}`,
+            [childKey]: generateHierarchicalData(childKey, children, level - 1)
+        });
+    }
+    return returnArray;
+};

From ce7524fbdf448b73474bf3c04c5a3842575efe3f Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Tue, 24 Sep 2024 09:10:57 +0300
Subject: [PATCH 02/18] feat(demos): clear out samples a bit more

---
 .../button-showcase/button-showcase.sample.ts |   5 +-
 .../date-picker-showcase.sample.html          |  24 +--
 .../date-picker-showcase.sample.scss          |  22 --
 .../date-picker-showcase.sample.ts            |   2 +-
 .../drop-down-showcase.sample.scss            |   6 +
 .../drop-down-showcase.sample.ts              |   4 -
 .../inputs-showcase/inputs-showcase.sample.ts |  28 ---
 src/app/list-showcase/list-showcase.sample.ts | 192 +----------------
 .../select-showcase.sample.html               |   5 -
 .../select-showcase/select-showcase.sample.ts | 121 +----------
 .../slider-showcase/slider-showcase.sample.ts |  79 +------
 .../snackbar-showcase.sample.html             |   4 +-
 .../snackbar-showcase.sample.ts               |  57 +----
 .../stepper-showcase.sample.html              |   8 +-
 .../stepper-showcase.sample.ts                | 162 +-------------
 .../tabs-showcase/tabs-showcase.sample.html   |   4 +-
 src/app/tabs-showcase/tabs-showcase.sample.ts | 203 +-----------------
 src/app/tree-showcase/tree-showcase.sample.ts |  17 --
 18 files changed, 37 insertions(+), 906 deletions(-)

diff --git a/src/app/button-showcase/button-showcase.sample.ts b/src/app/button-showcase/button-showcase.sample.ts
index 7239e32420d..20cc0d7c399 100644
--- a/src/app/button-showcase/button-showcase.sample.ts
+++ b/src/app/button-showcase/button-showcase.sample.ts
@@ -1,6 +1,5 @@
-import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { Router } from '@angular/router';
-import { IgxButtonDirective, IgxButtonGroupComponent, IgxIconButtonDirective, IgxIconComponent, IgxIconService, IgxRippleDirective } from 'igniteui-angular';
+import { Component, ViewEncapsulation } from '@angular/core';
+import { IgxButtonDirective, IgxButtonGroupComponent, IgxIconButtonDirective, IgxIconComponent, IgxRippleDirective } from 'igniteui-angular';
 import { SizeSelectorComponent } from '../size-selector/size-selector.component';
 import { defineComponents, IgcButtonComponent, IgcIconButtonComponent} from "igniteui-webcomponents";
 
diff --git a/src/app/date-picker-showcase/date-picker-showcase.sample.html b/src/app/date-picker-showcase/date-picker-showcase.sample.html
index d6065b8e4cc..15fc8ad6d2a 100644
--- a/src/app/date-picker-showcase/date-picker-showcase.sample.html
+++ b/src/app/date-picker-showcase/date-picker-showcase.sample.html
@@ -15,24 +15,10 @@ <h6>Angular Date Picker</h6>
             <h6>WC Date Picker</h6>
             <igc-date-picker label="Select a Date" mode="dialog" #dpWC [value]="date5" display-format="full" show-week-numbers="true" header-orientation="vertical">
                 <span (click)="dpWC.show()" slot="suffix"><igx-icon>alarm</igx-icon></span>
-                    <div slot="actions">
-                        <igc-button variant="flat">Today</igc-button>
-                        <igc-button variant="flat">Next Year</igc-button>
-                        <igc-button variant="flat">Select Today</igc-button>
-                    </div>
+                <div slot="actions">
+                    <igc-button variant="flat">Today</igc-button>
+                    <igc-button variant="flat">Next Year</igc-button>
+                    <igc-button variant="flat">Select Today</igc-button>
+                </div>
             </igc-date-picker>
-
-            <!-- <igc-date-picker
-                .activeDate=${args.activeDate}
-                ?disabled=${args.disabled}
-                ?invalid=${args.invalid}
-                ?readonly=${args.readOnly}
-                ?required=${args.required}
-                ?open=${args.open}
-                ?show-week-numbers=${args.showWeekNumbers}
-                ?hide-outside-days=${args.hideOutsideDays}
-                ?keep-open-on-outside-click=${args.keepOpenOnOutsideClick}
-                ?keep-open-on-select=${args.keepOpenOnSelect}
-                >
-                </igc-date-picker> -->
         </div>
diff --git a/src/app/date-picker-showcase/date-picker-showcase.sample.scss b/src/app/date-picker-showcase/date-picker-showcase.sample.scss
index d5b24b762ff..b587440b294 100644
--- a/src/app/date-picker-showcase/date-picker-showcase.sample.scss
+++ b/src/app/date-picker-showcase/date-picker-showcase.sample.scss
@@ -1,29 +1,7 @@
-.datepicker-column {
-    display: flex;
-    flex-flow: column nowrap;
-    flex: 1 0 20%;
-    align-content: flex-start;
-    margin: 16px 32px;
-    width: 270px;
-
-    button {
-        margin-top: 10px;
-    }
-}
-
 igx-date-picker {
     margin-bottom: 10px;
 }
 
-.date-picker-sample-buttons {
-    margin-bottom: 16px;
-
-    button {
-        margin-right: 8px;
-        margin-bottom: 8px;
-    }
-}
-
 h6 {
     margin-top: 32px;
     margin-bottom: 12px;
diff --git a/src/app/date-picker-showcase/date-picker-showcase.sample.ts b/src/app/date-picker-showcase/date-picker-showcase.sample.ts
index 8a9f9ca1b42..81d0e770738 100644
--- a/src/app/date-picker-showcase/date-picker-showcase.sample.ts
+++ b/src/app/date-picker-showcase/date-picker-showcase.sample.ts
@@ -1,4 +1,4 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component } from '@angular/core';
 import { DateRangeDescriptor, DateRangeType, IgxButtonDirective, IgxDatePickerComponent, IgxIconComponent, IgxLabelDirective, IgxPickerActionsDirective, IgxRippleDirective, IgxSuffixDirective } from 'igniteui-angular';
 import { defineComponents, IgcDatePickerComponent, IgcButtonComponent} from "igniteui-webcomponents";
 
diff --git a/src/app/drop-down-showcase/drop-down-showcase.sample.scss b/src/app/drop-down-showcase/drop-down-showcase.sample.scss
index 9f68906188f..09b38ce1b93 100644
--- a/src/app/drop-down-showcase/drop-down-showcase.sample.scss
+++ b/src/app/drop-down-showcase/drop-down-showcase.sample.scss
@@ -7,3 +7,9 @@
         margin-bottom: 16px;
     }
 }
+
+igc-dropdown::part(base) {
+    height: 400px;
+    width: 180px;
+    overflow: auto;
+}
\ No newline at end of file
diff --git a/src/app/drop-down-showcase/drop-down-showcase.sample.ts b/src/app/drop-down-showcase/drop-down-showcase.sample.ts
index 6a07bd98064..989a072b056 100644
--- a/src/app/drop-down-showcase/drop-down-showcase.sample.ts
+++ b/src/app/drop-down-showcase/drop-down-showcase.sample.ts
@@ -1,7 +1,5 @@
 import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
 import { NgFor, NgIf } from '@angular/common';
-
-import { foods } from './foods';
 import {
 	ConnectedPositioningStrategy,
 	IgxButtonDirective,
@@ -52,7 +50,6 @@ defineComponents(IgcDropdownComponent, IgcButtonComponent);
 export class DropDownShowcaseSampleComponent implements OnInit {
     @ViewChild(IgxDropDownComponent, { static: true })
     private igxDropDown: IgxDropDownComponent;
-    @ViewChild('dropdown3', { static: true })
     private igxDropDownSelection: IgxDropDownComponent;
     @ViewChild('button', { static: true })
     private button: ElementRef;
@@ -60,7 +57,6 @@ export class DropDownShowcaseSampleComponent implements OnInit {
     private igxOverlayOutlet: IgxOverlayOutletDirective;
 
     public items: any[] = [];
-    public foods = foods;
 
     public ngOnInit() {
         this.igxDropDown.height = '400px';
diff --git a/src/app/inputs-showcase/inputs-showcase.sample.ts b/src/app/inputs-showcase/inputs-showcase.sample.ts
index f6cf66efec2..122431ea9a4 100644
--- a/src/app/inputs-showcase/inputs-showcase.sample.ts
+++ b/src/app/inputs-showcase/inputs-showcase.sample.ts
@@ -48,23 +48,6 @@ export class InputsShowcaseSampleComponent {
         subscribed: false,
         dateOfBirth: new Date('01 July, 1954')
     };
-    public settings = [{
-        name: 'WiFi',
-        icon: 'wifi',
-        active: true,
-        disabled: false
-    },
-    {
-        name: 'Bluetooth',
-        icon: 'bluetooth',
-        active: true,
-        disabled: false
-    }, {
-        name: 'Device Visibility',
-        icon: 'visibility',
-        active: false,
-        disabled: true
-    }];
 
     constructor(private fb: UntypedFormBuilder) {}
 
@@ -79,15 +62,4 @@ export class InputsShowcaseSampleComponent {
     public onRadioChanged(event: IChangeCheckboxEventArgs) {
         console.log(event);
     }
-
-    public selectSecond() {
-        this.selected = 'option2';
-    }
-
-    public toggleAirplaneMode() {
-        this.settings.forEach(setting => {
-            setting.active = !this.airplaneMode;
-            setting.disabled = this.airplaneMode;
-        });
-    }
 }
diff --git a/src/app/list-showcase/list-showcase.sample.ts b/src/app/list-showcase/list-showcase.sample.ts
index df3d748b328..67b0370a174 100644
--- a/src/app/list-showcase/list-showcase.sample.ts
+++ b/src/app/list-showcase/list-showcase.sample.ts
@@ -1,4 +1,4 @@
-import {Component, ViewChild, ViewEncapsulation} from '@angular/core';
+import {Component, ViewEncapsulation} from '@angular/core';
 import { NgFor } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import {
@@ -12,10 +12,8 @@ import {
     IgxCheckboxComponent,
     IgxDialogComponent,
     IgxFilterDirective,
-    IgxFilterOptions,
     IgxFilterPipe,
     IgxIconComponent,
-    IgxListComponent,
     IgxRippleDirective,
     IgxSwitchComponent
 } from 'igniteui-angular';
@@ -58,24 +56,6 @@ interface Employee {
     ]
 })
 export class ListShowcaseSampleComponent {
-    @ViewChild('fruitList', { static: true })
-    private fruitList: IgxListComponent;
-
-    @ViewChild('checkbox', { static: true })
-    private checkbox: any;
-
-    @ViewChild('declarativeList', { static: true })
-    private declarativeList: any;
-
-    @ViewChild('addFruitDialog', { static: true })
-    private addFruitDialog: IgxDialogComponent;
-
-    public fruitsSearch: string;
-    public search1: string;
-    public search2: string;
-    public options = {};
-    public fruitsFilteredItemsCount = undefined;
-
     public employeeItems: Employee[] = [{
         imageURL: 'assets/images/avatar/18.jpg',
         name: 'Marin Popov',
@@ -97,174 +77,4 @@ export class ListShowcaseSampleComponent {
         position: 'Graphic designer',
         description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, vel, consectetur adipisicing elit. Aperiam, vel??'
     }];
-    public navItems = [{
-        avatar: 'assets/images/avatar/1.jpg',
-        favorite: true,
-        key: '1',
-        link: '#',
-        phone: '770-504-2217',
-        text: 'Terrance Orta'
-    }, {
-        avatar: 'assets/images/avatar/2.jpg',
-        favorite: false,
-        key: '2',
-        link: '#',
-        phone: '423-676-2869',
-        text: 'Richard Mahoney'
-    }, {
-        avatar: 'assets/images/avatar/3.jpg',
-        favorite: false,
-        key: '3',
-        link: '#',
-        phone: '859-496-2817',
-        text: 'Donna Price'
-    }, {
-        avatar: 'assets/images/avatar/4.jpg',
-        favorite: false,
-        key: '4',
-        link: '#',
-        phone: '901-747-3428',
-        text: 'Lisa Landers'
-    }, {
-        avatar: 'assets/images/avatar/12.jpg',
-        favorite: true,
-        key: '5',
-        link: '#',
-        phone: '573-394-9254',
-        text: 'Dorothy H. Spencer'
-    }, {
-        avatar: 'assets/images/avatar/13.jpg',
-        favorite: false,
-        key: '6',
-        link: '#',
-        phone: '323-668-1482',
-        text: 'Stephanie May'
-    }, {
-        avatar: 'assets/images/avatar/14.jpg',
-        favorite: false,
-        key: '7',
-        link: '#',
-        phone: '401-661-3742',
-        text: 'Marianne Taylor'
-    }, {
-        avatar: 'assets/images/avatar/15.jpg',
-        favorite: true,
-        key: '8',
-        link: '#',
-        phone: '662-374-2920',
-        text: 'Tammie Alvarez'
-    }, {
-        avatar: 'assets/images/avatar/16.jpg',
-        favorite: true,
-        key: '9',
-        link: '#',
-        phone: '240-455-2267',
-        text: 'Charlotte Flores'
-    }, {
-        avatar: 'assets/images/avatar/17.jpg',
-        favorite: false,
-        key: '10',
-        link: '#',
-        phone: '724-742-0979',
-        text: 'Ward Riley'
-    }];
-
-    public fruits: Fruit[] = [];
-
-
-    public get fo1() {
-        const _fo = new IgxFilterOptions();
-        _fo.key = ['text', 'key'];
-        _fo.inputValue = this.search1;
-        return _fo;
-    }
-
-    public get fo2() {
-        const _fo = new IgxFilterOptions();
-
-        _fo.items = this.declarativeList.items;
-        _fo.inputValue = this.search2;
-
-        _fo.get_value = (item: any) => item.element.textContent.trim();
-
-        _fo.metConditionFn = (item: any) => {
-            item.hidden = false;
-        };
-
-        _fo.overdueConditionFn = (item: any) => {
-            item.hidden = true;
-        };
-
-        return _fo;
-    }
-
-    public get fruitsFilterOptions() {
-        const fruitsFilterOpts = new IgxFilterOptions();
-        fruitsFilterOpts.items = this.fruits;
-        fruitsFilterOpts.key = 'name';
-        fruitsFilterOpts.inputValue = this.fruitsSearch;
-        return fruitsFilterOpts;
-    }
-
-    public filteringHandler = (args) => {
-        args.cancel = !this.checkbox.checked;
-    };
-
-    public filteredHandler = () => { };
-
-    public onAddFruitButtonClicked(fruitName) {
-        this.addFruit(fruitName);
-        this.addFruitDialog.close();
-    }
-
-    public addFruit(fruitName) {
-        this.fruits.push({ id: this.fruits.length, name: fruitName });
-    }
-
-    public addFruits(fruits: string[]) {
-        fruits.forEach((fruit) => {
-            this.addFruit(fruit);
-        });
-    }
-
-    public deleteFruit(fruitId) {
-        let fruitIndex = -1;
-        for (let i = 0; i < this.fruits.length; i++) {
-            if (fruitId === this.fruits[i].id) {
-                fruitIndex = i;
-                break;
-            }
-        }
-
-        this.fruits.splice(fruitIndex, 1);
-    }
-
-    public fruitsFiltered(args) {
-        this.fruitsFilteredItemsCount = args.filteredItems.length;
-    }
-
-    public loadFruits() {
-        this.fruitList.isLoading = true;
-        setTimeout(() => {
-            this.addFruits([
-                'banana',
-                'orange',
-                'apple',
-                'kiwi',
-                'mango',
-                'strawberry',
-                'pear'
-            ]);
-            this.fruitList.isLoading = false;
-        }, 1000);
-    }
-
-    public toggleFavorite(contact: any) {
-        contact.favorite = !contact.favorite;
-    }
-}
-
-export interface Fruit {
-    id: number;
-    name: string;
 }
diff --git a/src/app/select-showcase/select-showcase.sample.html b/src/app/select-showcase/select-showcase.sample.html
index 0f5483e03f4..8b2e0c0383a 100644
--- a/src/app/select-showcase/select-showcase.sample.html
+++ b/src/app/select-showcase/select-showcase.sample.html
@@ -4,11 +4,6 @@
     <strong>Angular Select</strong>
     <igx-select
                 [placeholder]="'Pick One'"
-                (opening)="testOnOpening($event)"
-                (opened)="testOnOpened()"
-                (closing)="testOnClosing($event)"
-                (closed)="testOnClosed()"
-                (selectionChanging)="testOnSelection($event)"
                 [disabled]="false"
                 [type]="'border'"
                 [style.--ig-size]="'var(--ig-size-' + sizeSelector.size + ')'">
diff --git a/src/app/select-showcase/select-showcase.sample.ts b/src/app/select-showcase/select-showcase.sample.ts
index ec6e2f85b9a..6ed208dd828 100644
--- a/src/app/select-showcase/select-showcase.sample.ts
+++ b/src/app/select-showcase/select-showcase.sample.ts
@@ -1,8 +1,7 @@
-import { Component, OnInit, ViewChildren, QueryList, ViewChild } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Component, ViewChild } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NgFor } from '@angular/common';
-import { IgxButtonDirective, IgxSelectComponent, IgxLabelDirective, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxSelectHeaderDirective, IgxSelectFooterDirective, IgxButtonGroupComponent, IgxSuffixDirective, IgxHintDirective, IgxSelectGroupComponent, IgxSwitchComponent, ISelectionEventArgs, CancelableEventArgs, HorizontalAlignment, VerticalAlignment, ConnectedPositioningStrategy, AbsoluteScrollStrategy } from 'igniteui-angular';
-import { scaleInTop, scaleOutBottom } from 'igniteui-angular/animations';
+import { IgxButtonDirective, IgxSelectComponent, IgxLabelDirective, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxSelectHeaderDirective, IgxSelectFooterDirective, IgxButtonGroupComponent, IgxSuffixDirective, IgxHintDirective, IgxSelectGroupComponent, IgxSwitchComponent } from 'igniteui-angular';
 import { SizeSelectorComponent } from '../size-selector/size-selector.component';
 import { defineComponents, IgcSelectGroupComponent, IgcSelectComponent, IgcSelectItemComponent, IgcSelectHeaderComponent } from 'igniteui-webcomponents';
 
@@ -34,7 +33,7 @@ defineComponents(IgcSelectGroupComponent, IgcSelectComponent, IgcSelectItemCompo
         SizeSelectorComponent
     ]
 })
-export class SelectShowcaseSampleComponent implements OnInit {
+export class SelectShowcaseSampleComponent {
     @ViewChild('selectReactive', { read: IgxSelectComponent, static: true })
     public select: IgxSelectComponent;
     @ViewChild('model', { read: IgxSelectComponent, static: true })
@@ -42,45 +41,8 @@ export class SelectShowcaseSampleComponent implements OnInit {
     @ViewChild('sizeSelect', { read: IgxSelectComponent, static: true })
     public sizeSelect: IgxSelectComponent;
 
-    @ViewChildren(IgxSelectComponent) private selectComponents: QueryList<IgxSelectComponent>;
-
-    public isDisabled = false;
-
-    public items: any[] = [];
-    public value: 'opt1';
-    public disabledItemValue: 'InsideGroup1';
     public fruits: string[] = ['Orange', 'Apple', 'Banana', 'Mango', 'Pear', 'Lemon', 'Peach', 'Apricot', 'Grapes', 'Cactus'];
     public selected: string;
-    public selectRequired = true;
-
-    public reactiveForm: UntypedFormGroup;
-    public cities: string[] = [
-        'Sofia',
-        'Varna',
-        'Sozopol',
-        'Plovdiv',
-        'Ruse',
-        'Stara Zagora'
-    ];
-
-    public validationType = {
-        citiesSelect: [Validators.required]
-    };
-
-    constructor(fb: UntypedFormBuilder) {
-        this.reactiveForm = fb.group({
-            citiesSelect: ['', Validators.required]
-        });
-    }
-
-    public ngOnInit() {
-        for (let i = 1; i < 10; i++) {
-            const item = { field: 'opt' + i };
-            this.items.push(item);
-        }
-    }
-
-    public onSubmitReactive() { }
 
     public selectBanana() {
         this.selectFruits.setSelectedItem(3);
@@ -90,79 +52,4 @@ export class SelectShowcaseSampleComponent implements OnInit {
         this.selectFruits.value = null;
         this.selected = null;
     }
-
-    public testOnSelection(evt: ISelectionEventArgs) {
-        console.log('testOnSelection.....................' + evt.cancel);
-    }
-
-    public testOnOpening(evt: CancelableEventArgs) {
-        console.log('testOnOpening.....................: ' + evt.cancel);
-    }
-
-    public testOnOpened() {
-        // console.log('testOnOpened.....................: ');
-    }
-
-    public testOnClosing(evt: CancelableEventArgs) {
-        console.log('testOnClosing.....................: ' + evt.cancel);
-    }
-
-    public testOnClosed() {
-        // console.log('testOnClosed.....................: ');
-    }
-
-    public handleToggle() {
-        // console.log('handleToggle.....................: ');
-        this.selectComponents.first.toggle();
-    }
-
-    public handleOpen() {
-        if (this.selectComponents.first.collapsed) {
-            const customCloseOnOutsideClick = {
-                closeOnOutsideClick: false
-            };
-            console.log('onOpen.....................:');
-            this.selectComponents.first.open(customCloseOnOutsideClick);
-        }
-    }
-
-    public handleClose() {
-        if (!this.selectComponents.first.collapsed) {
-            // console.log('onClose.....................: ');
-            this.selectComponents.first.close();
-        }
-    }
-
-    public openCustomOverlaySettings() {
-        if (this.selectComponents.first.collapsed) {
-            const positionSettings = {
-                target: this.selectComponents.first.inputGroup.element.nativeElement,
-                horizontalDirection: HorizontalAlignment.Right,
-                verticalDirection: VerticalAlignment.Bottom,
-                horizontalStartPoint: HorizontalAlignment.Left,
-                verticalStartPoint: VerticalAlignment.Bottom,
-                openAnimation: scaleInTop,
-                closeAnimation: scaleOutBottom
-            };
-
-            const customOverlaySettings = {
-                modal: true,
-                closeOnOutsideClick: false,
-                positionStrategy: new ConnectedPositioningStrategy(
-                    positionSettings
-                ),
-                scrollStrategy: new AbsoluteScrollStrategy()
-            };
-            console.log('onOpenCustomOverlaySettings.....................:  customOverlaySettings');
-            this.selectComponents.first.open(customOverlaySettings);
-        }
-    }
-
-    public btnClick() {
-        // console.log('clicked');
-    }
-
-    public headerFootedClick(event) {
-        console.log('Header/Footer clicked', event);
-    }
 }
diff --git a/src/app/slider-showcase/slider-showcase.sample.ts b/src/app/slider-showcase/slider-showcase.sample.ts
index 11020d9c401..9366f926c4c 100644
--- a/src/app/slider-showcase/slider-showcase.sample.ts
+++ b/src/app/slider-showcase/slider-showcase.sample.ts
@@ -1,21 +1,11 @@
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { NgFor } from '@angular/common';
-import { IgxSliderType, ISliderValueChangeEventArgs, IRangeSliderValue, TickLabelsOrientation, TicksOrientation, IgxButtonDirective, IgxSliderComponent, IgxTickLabelTemplateDirective } from 'igniteui-angular';
+import { IgxSliderType, TickLabelsOrientation, TicksOrientation, IgxButtonDirective, IgxSliderComponent, IgxTickLabelTemplateDirective } from 'igniteui-angular';
 import { defineComponents, IgcSliderComponent, IgcSliderLabelComponent } from 'igniteui-webcomponents';
 
 defineComponents(IgcSliderComponent, IgcSliderLabelComponent);
 
-class Task {
-    public title: string;
-    public percentCompleted: number;
-
-    constructor(title: string, percentCompeted: number) {
-        this.title = title;
-        this.percentCompleted = percentCompeted;
-    }
-}
-
 @Component({
     selector: 'app-slider-showcase-sample',
     styleUrls: ['slider-showcase.sample.scss'],
@@ -29,72 +19,5 @@ export class SliderShowcaseSampleComponent {
     public primaryTickLabels = true;
     public secondaryTickLabels = true;
     public sliderType: IgxSliderType = IgxSliderType.SLIDER;
-    public labelsDates = new Array<Date>();
-    public task: Task = new Task('Implement new app', 30);
     public labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
-
-    public rangeValue = 34;
-
-    public rangeLabel = {
-        lower: 2,
-        upper: 5
-    };
-
-    private _lowerValue: Date;
-    private _upperValue: Date;
-
-    constructor() {
-        for (let i = 0; i <= 500; i++) {
-            this.labelsDates.push(new Date(2019, 10, i));
-        }
-
-        this._lowerValue = this.labelsDates[0];
-        this._upperValue = this.labelsDates[this.labels.length - 1];
-    }
-
-    public get getLowerVal() {
-        return `${this._lowerValue.getDay()}/${this._lowerValue.getMonth()}/${this._lowerValue.getFullYear()}`;
-    }
-
-    public get getUpperVal() {
-        return `${this._upperValue.getDay()}/${this._upperValue.getMonth()}/${this._upperValue.getFullYear()}`;
-    }
-
-    public valueChange(evt: ISliderValueChangeEventArgs) {
-        this._lowerValue = this.labelsDates[(evt.value as IRangeSliderValue).lower];
-        this._upperValue = this.labelsDates[(evt.value as IRangeSliderValue).upper];
-    }
-
-    public changeLabels() {
-        this.labels = ['08:00', '12:00', '16:00', '20:00', '00:00'];
-    }
-
-    public changeLabelOrientation() {
-        if (this.labelOrientaion === TickLabelsOrientation.Horizontal) {
-            this.labelOrientaion = TickLabelsOrientation.TopToBottom;
-        } else if (this.labelOrientaion === TickLabelsOrientation.TopToBottom) {
-            this.labelOrientaion = TickLabelsOrientation.BottomToTop;
-        } else {
-            this.labelOrientaion = TickLabelsOrientation.Horizontal;
-        }
-    }
-
-    public changeTicksOrientation() {
-        if (this.ticksOrientation === TicksOrientation.Mirror) {
-            this.ticksOrientation = TicksOrientation.Top;
-        } else if (this.ticksOrientation === TicksOrientation.Top) {
-            this.ticksOrientation = TicksOrientation.Bottom;
-        } else {
-            this.ticksOrientation = TicksOrientation.Mirror;
-        }
-    }
-
-    public tickLabel(value, primary) {
-        if (primary) {
-            return Math.round(value);
-        }
-
-        return value;
-    }
-
 }
diff --git a/src/app/snackbar-showcase/snackbar-showcase.sample.html b/src/app/snackbar-showcase/snackbar-showcase.sample.html
index 005a3439ae9..25db52d3af5 100644
--- a/src/app/snackbar-showcase/snackbar-showcase.sample.html
+++ b/src/app/snackbar-showcase/snackbar-showcase.sample.html
@@ -7,8 +7,6 @@ <h4 class="sample-title">Snackbar</h4>
                 <igx-snackbar
                     #snackbar
                     [outlet]="outlet"
-                    (animationStarted)="onAnimationStarted()"
-                    (animationDone)="onAnimationDone()"
                     [actionText]="'Undo'"
                 >Snackbar Message
                 </igx-snackbar>
@@ -23,7 +21,7 @@ <h4 class="sample-title">Snackbar</h4>
     <article class="sample-column">
         <button igxButton (click)="snackbar2.toggle()">Toggle WC Snackbar</button>
         <div class="snackbar-sample">
-            <igc-snackbar #snackbar2 position="positionSettings">
+            <igc-snackbar #snackbar2>
                 Snackbar Message
                 <button slot="action" igxButton="flat">
                     Undo
diff --git a/src/app/snackbar-showcase/snackbar-showcase.sample.ts b/src/app/snackbar-showcase/snackbar-showcase.sample.ts
index a3f2df765f4..98d57a86e78 100644
--- a/src/app/snackbar-showcase/snackbar-showcase.sample.ts
+++ b/src/app/snackbar-showcase/snackbar-showcase.sample.ts
@@ -1,8 +1,6 @@
-import { useAnimation } from '@angular/animations';
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 // eslint-disable-next-line max-len
-import { HorizontalAlignment, IgxButtonDirective, IgxOverlayOutletDirective, IgxSnackbarComponent, PositionSettings, VerticalAlignment } from 'igniteui-angular';
-import { slideInLeft, slideInRight } from 'igniteui-angular/animations';
+import { IgxButtonDirective, IgxOverlayOutletDirective, IgxSnackbarComponent } from 'igniteui-angular';
 import { defineComponents, IgcSnackbarComponent } from 'igniteui-webcomponents';
 
 defineComponents(IgcSnackbarComponent);
@@ -14,63 +12,14 @@ defineComponents(IgcSnackbarComponent);
     standalone: true,
     imports: [IgxSnackbarComponent, IgxOverlayOutletDirective, IgxButtonDirective]
 })
-export class SnackbarShowcaseSampleComponent implements OnInit {
+export class SnackbarShowcaseSampleComponent {
     @ViewChild('snackbar')
     private snackbar: IgxSnackbarComponent;
 
     public color: string;
     public actionName: string;
-    public newPositionSettings: PositionSettings = {
-        openAnimation: useAnimation(slideInLeft, { params: { duration: '1000ms' } }),
-        closeAnimation: useAnimation(slideInRight, { params: { duration: '1000ms' } }),
-        horizontalDirection: HorizontalAlignment.Center,
-        verticalDirection: VerticalAlignment.Middle,
-        horizontalStartPoint: HorizontalAlignment.Center,
-        verticalStartPoint: VerticalAlignment.Middle,
-        minSize: { height: 100, width: 100 }
-    };
-
-    private _colors: string[];
-
-    public ngOnInit() {
-        this.color = 'mediumpurple';
-        this.actionName = 'Undo';
-        this._colors = [];
-    }
-
-    public changeColor(snackbar: IgxSnackbarComponent) {
-        const characters = '0123456789ABCDEF';
-        let color = '#';
-
-        for (let i = 0; i < 6; i++) {
-            color += characters[Math.floor(Math.random() * 16)];
-        }
-
-        this._colors.push(this.color);
-        this.color = color;
-
-        snackbar.open('Changed color to ' + this.color);
-    }
-
-    public undoColorChange(snackbar) {
-        this.color = this._colors.pop();
-
-        snackbar.close();
-    }
-
-    public onAnimationStarted() {
-        console.log('animation started');
-    }
-
-    public onAnimationDone() {
-        console.log('animation ended');
-    }
 
     public toggleSnackbar() {
         this.snackbar.toggle();
     }
-
-    public close(element) {
-        element.close();
-    }
 }
diff --git a/src/app/stepper-showcase/stepper-showcase.sample.html b/src/app/stepper-showcase/stepper-showcase.sample.html
index 7b64abbe836..065d17d10b3 100644
--- a/src/app/stepper-showcase/stepper-showcase.sample.html
+++ b/src/app/stepper-showcase/stepper-showcase.sample.html
@@ -1,7 +1,7 @@
 <div class="sample-stepper-wrapper">
     <strong>Angular Stepper</strong>
     <igx-stepper #stepper>
-        <igx-step completed #step (activeChange)="activeStepChange($event)" [isValid]="form1.form.valid">
+        <igx-step completed #step [isValid]="form1.form.valid">
             <span igxStepTitle>Step 1</span>
             <span igxStepSubtitle>(completed)</span>
             <div igxStepContent class="sample-body" [tabIndex]="-1">
@@ -19,7 +19,7 @@
                 </form>
             </div>
         </igx-step>
-        <igx-step [active]="true" #step (activeChange)="activeStepChange($event)" [isValid]="form1.form.valid"
+        <igx-step [active]="true" #step [isValid]="form1.form.valid"
             [completed]="form1.form.valid && stepper.linear">
             <span igxStepTitle>Step 2</span>
             <span igxStepSubtitle>(default)</span>
@@ -41,7 +41,7 @@
                 </form>
             </div>
         </igx-step>
-        <igx-step optional #step (activeChange)="activeStepChange($event)" [isValid]="form1.form.valid"
+        <igx-step optional #step [isValid]="form1.form.valid"
             [completed]="form1.form.valid && stepper.linear">
             <span igxStepTitle>Step 3</span>
             <span igxStepSubtitle>(optional)</span>
@@ -62,7 +62,7 @@
             </div>
         </igx-step>
 
-        <igx-step disabled #step (activeChange)="activeStepChange($event)" [isValid]="form1.form.valid"
+        <igx-step disabled #step [isValid]="form1.form.valid"
             [completed]="form1.form.valid && stepper.linear">
             <span igxStepTitle>Step 4</span>
             <span igxStepSubtitle>(disabled)</span>
diff --git a/src/app/stepper-showcase/stepper-showcase.sample.ts b/src/app/stepper-showcase/stepper-showcase.sample.ts
index e292f250236..15e7760bb4b 100644
--- a/src/app/stepper-showcase/stepper-showcase.sample.ts
+++ b/src/app/stepper-showcase/stepper-showcase.sample.ts
@@ -1,7 +1,7 @@
-import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
+import { Component } from '@angular/core';
 import { NgIf } from '@angular/common';
-import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { IgxButtonDirective, IgxButtonGroupComponent, IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxSuffixDirective, IgxSwitchComponent, IgxStepActiveIndicatorDirective, IgxIconComponent, IgxStepComponent, IgxStepIndicatorDirective, IgxStepTitleDirective, IgxStepSubtitleDirective, IgxStepContentDirective, IgxAvatarComponent, IgxBadgeComponent, IgxTimePickerComponent, IgxSelectComponent, IgxSelectItemComponent, IgxPrefixDirective, IgxHintDirective, IgxStepperComponent, HorizontalAnimationType, VerticalAnimationType, IgxStepType, IgxStepperTitlePosition, IgxStepperOrientation } from 'igniteui-angular';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { IgxButtonDirective, IgxButtonGroupComponent, IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxSuffixDirective, IgxSwitchComponent, IgxStepActiveIndicatorDirective, IgxIconComponent, IgxStepComponent, IgxStepIndicatorDirective, IgxStepTitleDirective, IgxStepSubtitleDirective, IgxStepContentDirective, IgxAvatarComponent, IgxBadgeComponent, IgxTimePickerComponent, IgxSelectComponent, IgxSelectItemComponent, IgxPrefixDirective, IgxHintDirective, IgxStepperComponent } from 'igniteui-angular';
 import { defineComponents, IgcStepperComponent, IgcButtonComponent, IgcInputComponent } from 'igniteui-webcomponents';
 
 defineComponents(IgcStepperComponent, IgcButtonComponent, IgcInputComponent);
@@ -12,158 +12,4 @@ defineComponents(IgcStepperComponent, IgcButtonComponent, IgcInputComponent);
     standalone: true,
     imports: [IgxButtonDirective, IgxButtonGroupComponent, IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxSwitchComponent, IgxStepperComponent, IgxStepActiveIndicatorDirective, IgxIconComponent, IgxStepComponent, IgxStepIndicatorDirective, IgxStepTitleDirective, IgxStepSubtitleDirective, IgxStepContentDirective, NgIf, IgxAvatarComponent, IgxBadgeComponent, IgxTimePickerComponent, ReactiveFormsModule, IgxSelectComponent, IgxSelectItemComponent, IgxPrefixDirective, IgxHintDirective]
 })
-export class IgxStepperShowcaseSampleComponent {
-    @ViewChild('stepper', { static: true }) public stepper: IgxStepperComponent;
-    public displayStep = false;
-    public horizontalAnimationType: HorizontalAnimationType = 'slide';
-    public verticalAnimationType: VerticalAnimationType = 'grow';
-    public animationDuration = 320;
-    public stepType: IgxStepType = IgxStepType.Full;
-    public titlePos: IgxStepperTitlePosition = IgxStepperTitlePosition.Bottom;
-    public setTitlePos = false;
-    public stepTypes = [];
-    public titlePositions = [];
-    public verticalAnimationTypes = [];
-    public horizontalAnimationTypes = [];
-
-    public user = {
-        firstName: 'John',
-        lastName: 'Doe'
-    };
-
-    public user1 = {
-        password: '1337s3cr3t',
-        phone: '',
-        dateOfBirth: new Date('07 July, 1987')
-    };
-
-    public user2 = {
-        firstName: 'Sam',
-        lastName: ''
-    };
-
-    public user3: UntypedFormGroup;
-    public user4: UntypedFormGroup;
-
-    constructor(private cdr: ChangeDetectorRef, fb: UntypedFormBuilder) {
-        this.stepTypes = [
-            {
-                label: 'Indicator', stepType: IgxStepType.Indicator,
-                selected: this.stepType === IgxStepType.Indicator, togglable: true
-            },
-            {
-                label: 'Title', stepType: IgxStepType.Title,
-                selected: this.stepType === IgxStepType.Title, togglable: true
-            },
-            {
-                label: 'Full', stepType: IgxStepType.Full,
-                selected: this.stepType === IgxStepType.Full, togglable: true
-            }
-        ];
-
-        this.titlePositions = [
-            {
-                label: 'Bottom', titlePos: IgxStepperTitlePosition.Bottom,
-                selected: this.titlePos === IgxStepperTitlePosition.Bottom, togglable: true
-            },
-            {
-                label: 'Top', titlePos: IgxStepperTitlePosition.Top,
-                selected: this.titlePos === IgxStepperTitlePosition.Top, togglable: true
-            },
-            {
-                label: 'End', titlePos: IgxStepperTitlePosition.End,
-                selected: this.titlePos === IgxStepperTitlePosition.End, togglable: true
-            },
-            {
-                label: 'Start', titlePos: IgxStepperTitlePosition.Start,
-                selected: this.titlePos === IgxStepperTitlePosition.Start, togglable: true
-            }
-        ];
-
-        this.horizontalAnimationTypes = [
-            {
-                label: 'slide', horizontalAnimationType: HorizontalAnimationType.slide,
-                selected: this.horizontalAnimationType === HorizontalAnimationType.slide, togglable: true
-            },
-            {
-                label: 'fade', horizontalAnimationType: HorizontalAnimationType.fade,
-                selected: this.horizontalAnimationType === HorizontalAnimationType.fade, togglable: true
-            },
-            {
-                label: 'none', horizontalAnimationType: HorizontalAnimationType.none,
-                selected: this.horizontalAnimationType === HorizontalAnimationType.none, togglable: true
-            }
-        ];
-
-        this.verticalAnimationTypes = [
-            {
-                label: 'grow', verticalAnimationType: VerticalAnimationType.Grow,
-                selected: this.verticalAnimationType === VerticalAnimationType.Grow, togglable: true
-            },
-            {
-                label: 'fade', verticalAnimationType: VerticalAnimationType.Fade,
-                selected: this.verticalAnimationType === VerticalAnimationType.Fade, togglable: true
-            },
-            {
-                label: 'none', verticalAnimationType: VerticalAnimationType.None,
-                selected: this.verticalAnimationType === VerticalAnimationType.None, togglable: true
-            }
-        ];
-
-        this.user3 = fb.group({
-            fullName: new UntypedFormControl('', Validators.required),
-            email: ['', Validators.required]
-        });
-
-        this.user4 = fb.group({
-            phone: ['', Validators.required],
-            dateTime: ['']
-        });
-    }
-
-    public toggleStepTypes(event) {
-        this.stepType = this.stepTypes[event.index].stepType;
-    }
-
-    public toggleHorizontalAnimations(event) {
-        this.horizontalAnimationType = this.horizontalAnimationTypes[event.index].horizontalAnimationType;
-    }
-
-    public toggleVerticalAnimations(event) {
-        this.verticalAnimationType = this.verticalAnimationTypes[event.index].verticalAnimationType;
-    }
-
-    public setTitlePosition(event) {
-        this.setTitlePos = event.checked;
-        this.stepper.titlePosition = event.checked ? this.titlePos : null;
-    }
-
-    public toggleTitlePos(event) {
-        this.titlePos = this.titlePositions[event.index].titlePos;
-        if (this.setTitlePos) {
-            this.stepper.titlePosition = this.titlePos;
-        }
-    }
-
-    public activeChanged() {
-        console.log('GOLQM ACTIVE CHANGED');
-    }
-
-    public activeStepChange(ev) {
-        console.log('MALUK CHANGE', ev);
-    }
-
-    public activeStepChanging(ev) {
-        console.log('ACTIVE STEP CHANGING');
-        // ev.cancel = true;
-        console.log(ev);
-    }
-
-    public changeOrientation() {
-        if (this.stepper.orientation === IgxStepperOrientation.Horizontal) {
-            this.stepper.orientation = IgxStepperOrientation.Vertical;
-        } else {
-            this.stepper.orientation = IgxStepperOrientation.Horizontal;
-        }
-    }
-}
+export class IgxStepperShowcaseSampleComponent {}
diff --git a/src/app/tabs-showcase/tabs-showcase.sample.html b/src/app/tabs-showcase/tabs-showcase.sample.html
index e8ba95e09b2..d6998a756ce 100644
--- a/src/app/tabs-showcase/tabs-showcase.sample.html
+++ b/src/app/tabs-showcase/tabs-showcase.sample.html
@@ -4,8 +4,6 @@
         <igx-tabs
             #tabsNew
             [selectedIndex]="3"
-            (selectedIndexChanging)="tabsSelectedIndexChanging($event)"
-            (selectedItemChange)="tabsSelectedItemChange($event)"
         >
             <igx-tab-item>
                 <igx-tab-header igxRipple>
@@ -21,7 +19,7 @@
             <igx-tab-item>
                 <igx-tab-header igxRipple>
                     <igx-icon igxTabHeaderIcon>folder</igx-icon>
-                    <span igxTabHeaderLabel>{{tab2Label}}</span>
+                    <span igxTabHeaderLabel>Tab 2</span>
                 </igx-tab-header>
                 <igx-tab-content>
                     <div class="sample-scrollable">
diff --git a/src/app/tabs-showcase/tabs-showcase.sample.ts b/src/app/tabs-showcase/tabs-showcase.sample.ts
index b76577974f8..80e78a4d259 100644
--- a/src/app/tabs-showcase/tabs-showcase.sample.ts
+++ b/src/app/tabs-showcase/tabs-showcase.sample.ts
@@ -1,6 +1,6 @@
-import {Component, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';
+import {Component, ViewEncapsulation} from '@angular/core';
 import { NgFor } from '@angular/common';
-import { IgxAvatarComponent, IgxButtonDirective, IgxButtonGroupComponent, IgxGridComponent, IgxIconButtonDirective, IgxIconComponent, IgxListActionDirective, IgxListComponent, IgxListItemComponent, IgxListLineSubTitleDirective, IgxListLineTitleDirective, IgxListThumbnailDirective, IgxPrefixDirective, IgxRippleDirective, IgxSuffixDirective, IgxTabContentComponent, IgxTabHeaderComponent, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsComponent, ITabsSelectedIndexChangingEventArgs, ITabsSelectedItemChangeEventArgs } from 'igniteui-angular';
+import { IgxAvatarComponent, IgxButtonDirective, IgxIconButtonDirective, IgxIconComponent, IgxListActionDirective, IgxListComponent, IgxListItemComponent, IgxListLineSubTitleDirective, IgxListLineTitleDirective, IgxListThumbnailDirective, IgxPrefixDirective, IgxRippleDirective, IgxSuffixDirective, IgxTabContentComponent, IgxTabHeaderComponent, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsComponent } from 'igniteui-angular';
 import { defineComponents, IgcTabsComponent, IgcTabComponent, IgcTabPanelComponent } from 'igniteui-webcomponents';
 
 defineComponents(IgcTabsComponent, IgcTabComponent, IgcTabPanelComponent);
@@ -11,142 +11,9 @@ defineComponents(IgcTabsComponent, IgcTabComponent, IgcTabPanelComponent);
     templateUrl: 'tabs-showcase.sample.html',
     encapsulation: ViewEncapsulation.None,
     standalone: true,
-    imports: [IgxButtonDirective, IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxRippleDirective, IgxIconComponent, IgxTabHeaderIconDirective, IgxIconButtonDirective, IgxTabHeaderLabelDirective, IgxTabContentComponent, IgxListComponent, NgFor, IgxListItemComponent, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxListActionDirective, IgxButtonGroupComponent, IgxPrefixDirective, IgxSuffixDirective, IgxGridComponent]
+    imports: [IgxButtonDirective, IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxRippleDirective, IgxIconComponent, IgxTabHeaderIconDirective, IgxIconButtonDirective, IgxTabHeaderLabelDirective, IgxTabContentComponent, IgxListComponent, NgFor, IgxListItemComponent, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxListActionDirective, IgxPrefixDirective, IgxSuffixDirective]
 })
-export class TabsShowcaseSampleComponent implements OnInit {
-
-    @ViewChild('tabsNew')
-    private tabs: IgxTabsComponent;
-
-    @ViewChild('dynamicTabs')
-    private dynamicTabs: IgxTabsComponent;
-
-    public tab2Label = 'Tab 2';
-
-    public tabAlignment = 'start';
-
-    public tabAlignments = [
-        { label: 'start', selected: this.tabAlignment === 'start', togglable: true },
-        { label: 'center', selected: this.tabAlignment === 'center', togglable: true },
-        { label: 'end', selected: this.tabAlignment === 'end', togglable: true },
-        { label: 'justify', selected: this.tabAlignment === 'justify', togglable: true }
-    ];
-
-    public scrollableTabs = [];
-
-    public data = [
-        /* eslint-disable max-len */
-        { ID: 'ALFKI', CompanyName: 'Alfreds Futterkiste', ContactName: 'Maria Anders', ContactTitle: 'Sales Representative', Address: 'Obere Str. 57', City: 'Berlin', Region: null, PostalCode: '12209', Country: 'Germany', Phone: '030-0074321', Fax: '030-0076545' },
-        { ID: 'ANATR', CompanyName: 'Ana Trujillo Emparedados y helados', ContactName: 'Ana Trujillo', ContactTitle: 'Owner', Address: 'Avda. de la Constitución 2222', City: 'México D.F.', Region: null, PostalCode: '05021', Country: 'Mexico', Phone: '(5) 555-4729', Fax: '(5) 555-3745' },
-        { ID: 'ANTON', CompanyName: 'Antonio Moreno Taquería', ContactName: 'Antonio Moreno', ContactTitle: 'Owner', Address: 'Mataderos 2312', City: 'México D.F.', Region: null, PostalCode: '05023', Country: 'Mexico', Phone: '(5) 555-3932', Fax: null },
-        { ID: 'AROUT', CompanyName: 'Around the Horn', ContactName: 'Thomas Hardy', ContactTitle: 'Sales Representative', Address: '120 Hanover Sq.', City: 'London', Region: null, PostalCode: 'WA1 1DP', Country: 'UK', Phone: '(171) 555-7788', Fax: '(171) 555-6750' },
-        { ID: 'BERGS', CompanyName: 'Berglunds snabbköp', ContactName: 'Christina Berglund', ContactTitle: 'Order Administrator', Address: 'Berguvsvägen 8', City: 'Luleå', Region: null, PostalCode: 'S-958 22', Country: 'Sweden', Phone: '0921-12 34 65', Fax: '0921-12 34 67' },
-        { ID: 'BLAUS', CompanyName: 'Blauer See Delikatessen', ContactName: 'Hanna Moos', ContactTitle: 'Sales Representative', Address: 'Forsterstr. 57', City: 'Mannheim', Region: null, PostalCode: '68306', Country: 'Germany', Phone: '0621-08460', Fax: '0621-08924' },
-        { ID: 'BLONP', CompanyName: 'Blondesddsl père et fils', ContactName: 'Frédérique Citeaux', ContactTitle: 'Marketing Manager', Address: '24, place Kléber', City: 'Strasbourg', Region: null, PostalCode: '67000', Country: 'France', Phone: '88.60.15.31', Fax: '88.60.15.32' },
-        { ID: 'BOLID', CompanyName: 'Bólido Comidas preparadas', ContactName: 'Martín Sommer', ContactTitle: 'Owner', Address: 'C/ Araquil, 67', City: 'Madrid', Region: null, PostalCode: '28023', Country: 'Spain', Phone: '(91) 555 22 82', Fax: '(91) 555 91 99' },
-        { ID: 'BONAP', CompanyName: 'Bon app\'', ContactName: 'Laurence Lebihan', ContactTitle: 'Owner', Address: '12, rue des Bouchers', City: 'Marseille', Region: null, PostalCode: '13008', Country: 'France', Phone: '91.24.45.40', Fax: '91.24.45.41' },
-        { ID: 'BOTTM', CompanyName: 'Bottom-Dollar Markets', ContactName: 'Elizabeth Lincoln', ContactTitle: 'Accounting Manager', Address: '23 Tsawassen Blvd.', City: 'Tsawassen', Region: 'BC', PostalCode: 'T2F 8M4', Country: 'Canada', Phone: '(604) 555-4729', Fax: '(604) 555-3745' },
-        { ID: 'BSBEV', CompanyName: 'B\'s Beverages', ContactName: 'Victoria Ashworth', ContactTitle: 'Sales Representative', Address: 'Fauntleroy Circus', City: 'London', Region: null, PostalCode: 'EC2 5NT', Country: 'UK', Phone: '(171) 555-1212', Fax: null },
-        { ID: 'CACTU', CompanyName: 'Cactus Comidas para llevar', ContactName: 'Patricio Simpson', ContactTitle: 'Sales Agent', Address: 'Cerrito 333', City: 'Buenos Aires', Region: null, PostalCode: '1010', Country: 'Argentina', Phone: '(1) 135-5555', Fax: '(1) 135-4892' },
-        { ID: 'CENTC', CompanyName: 'Centro comercial Moctezuma', ContactName: 'Francisco Chang', ContactTitle: 'Marketing Manager', Address: 'Sierras de Granada 9993', City: 'México D.F.', Region: null, PostalCode: '05022', Country: 'Mexico', Phone: '(5) 555-3392', Fax: '(5) 555-7293' },
-        { ID: 'CHOPS', CompanyName: 'Chop-suey Chinese', ContactName: 'Yang Wang', ContactTitle: 'Owner', Address: 'Hauptstr. 29', City: 'Bern', Region: null, PostalCode: '3012', Country: 'Switzerland', Phone: '0452-076545', Fax: null },
-        { ID: 'COMMI', CompanyName: 'Comércio Mineiro', ContactName: 'Pedro Afonso', ContactTitle: 'Sales Associate', Address: 'Av. dos Lusíadas, 23', City: 'Sao Paulo', Region: 'SP', PostalCode: '05432-043', Country: 'Brazil', Phone: '(11) 555-7647', Fax: null },
-        { ID: 'CONSH', CompanyName: 'Consolidated Holdings', ContactName: 'Elizabeth Brown', ContactTitle: 'Sales Representative', Address: 'Berkeley Gardens 12 Brewery', City: 'London', Region: null, PostalCode: 'WX1 6LT', Country: 'UK', Phone: '(171) 555-2282', Fax: '(171) 555-9199' },
-        { ID: 'DRACD', CompanyName: 'Drachenblut Delikatessen', ContactName: 'Sven Ottlieb', ContactTitle: 'Order Administrator', Address: 'Walserweg 21', City: 'Aachen', Region: null, PostalCode: '52066', Country: 'Germany', Phone: '0241-039123', Fax: '0241-059428' },
-        { ID: 'DUMON', CompanyName: 'Du monde entier', ContactName: 'Janine Labrune', ContactTitle: 'Owner', Address: '67, rue des Cinquante Otages', City: 'Nantes', Region: null, PostalCode: '44000', Country: 'France', Phone: '40.67.88.88', Fax: '40.67.89.89' },
-        { ID: 'EASTC', CompanyName: 'Eastern Connection', ContactName: 'Ann Devon', ContactTitle: 'Sales Agent', Address: '35 King George', City: 'London', Region: null, PostalCode: 'WX3 6FW', Country: 'UK', Phone: '(171) 555-0297', Fax: '(171) 555-3373' },
-        { ID: 'ERNSH', CompanyName: 'Ernst Handel', ContactName: 'Roland Mendel', ContactTitle: 'Sales Manager', Address: 'Kirchgasse 6', City: 'Graz', Region: null, PostalCode: '8010', Country: 'Austria', Phone: '7675-3425', Fax: '7675-3426' },
-        { ID: 'FAMIA', CompanyName: 'Familia Arquibaldo', ContactName: 'Aria Cruz', ContactTitle: 'Marketing Assistant', Address: 'Rua Orós, 92', City: 'Sao Paulo', Region: 'SP', PostalCode: '05442-030', Country: 'Brazil', Phone: '(11) 555-9857', Fax: null },
-        { ID: 'FISSA', CompanyName: 'FISSA Fabrica Inter. Salchichas S.A.', ContactName: 'Diego Roel', ContactTitle: 'Accounting Manager', Address: 'C/ Moralzarzal, 86', City: 'Madrid', Region: null, PostalCode: '28034', Country: 'Spain', Phone: '(91) 555 94 44', Fax: '(91) 555 55 93' },
-        { ID: 'FOLIG', CompanyName: 'Folies gourmandes', ContactName: 'Martine Rancé', ContactTitle: 'Assistant Sales Agent', Address: '184, chaussée de Tournai', City: 'Lille', Region: null, PostalCode: '59000', Country: 'France', Phone: '20.16.10.16', Fax: '20.16.10.17' },
-        { ID: 'FOLKO', CompanyName: 'Folk och fä HB', ContactName: 'Maria Larsson', ContactTitle: 'Owner', Address: 'Åkergatan 24', City: 'Bräcke', Region: null, PostalCode: 'S-844 67', Country: 'Sweden', Phone: '0695-34 67 21', Fax: null },
-        { ID: 'FRANK', CompanyName: 'Frankenversand', ContactName: 'Peter Franken', ContactTitle: 'Marketing Manager', Address: 'Berliner Platz 43', City: 'München', Region: null, PostalCode: '80805', Country: 'Germany', Phone: '089-0877310', Fax: '089-0877451' },
-        { ID: 'FRANR', CompanyName: 'France restauration', ContactName: 'Carine Schmitt', ContactTitle: 'Marketing Manager', Address: '54, rue Royale', City: 'Nantes', Region: null, PostalCode: '44000', Country: 'France', Phone: '40.32.21.21', Fax: '40.32.21.20' },
-        { ID: 'FRANS', CompanyName: 'Franchi S.p.A.', ContactName: 'Paolo Accorti', ContactTitle: 'Sales Representative', Address: 'Via Monte Bianco 34', City: 'Torino', Region: null, PostalCode: '10100', Country: 'Italy', Phone: '011-4988260', Fax: '011-4988261' }
-    ];
-    public localData;
-    public lastYear = new Date().getFullYear() - 1;
-    public employeesHData = [
-            {
-              EmployeeID: '56250fa57ab1535722e564a6',
-              FirstName: 'Downs',
-              LastName: 'Holcomb',
-              Country: 'Italy',
-              Age: 35,
-              RegisteredDate2: new Date(this.lastYear, 7, 25),
-              IsActive2: false,
-              EmployeeID2: '56250fa57ab1535722e564a6',
-              FirstName2: 'Downs',
-              LastName2: 'Holcomb',
-              Country2: 'Italy',
-              Age2: 35
-            },
-            {
-              EmployeeID: '56250fa5c0fd04f12555d44d',
-              FirstName: 'Mckenzie',
-              LastName: 'Calderon',
-              Country: 'USA',
-              Age: 26,
-              RegisteredDate: new Date(this.lastYear - 1, 9, 22),
-              IsActive: false,
-              RegisteredDate2: new Date(this.lastYear, 7, 25),
-              IsActive2: false,
-              EmployeeID2: '56250fa57ab1535722e564a6',
-              FirstName2: 'Downs',
-              LastName2: 'Holcomb',
-              Country2: 'Italy',
-              Age2: 35
-
-            },
-            {
-              EmployeeID: '56250fa565a7bcc21f6bd15e',
-              FirstName: 'Howell',
-              LastName: 'Hawkins',
-              Country: 'Canada',
-              Age: 25,
-              RegisteredDate: new Date(this.lastYear, 8, 8),
-              IsActive: false,
-              RegisteredDate2: new Date(this.lastYear, 7, 25),
-              IsActive2: false,
-              EmployeeID2: '56250fa57ab1535722e564a6',
-              FirstName2: 'Downs',
-              LastName2: 'Holcomb',
-              Country2: 'Italy',
-              Age2: 35
-            },
-            {
-              EmployeeID: '56250fa5d71a83c33f3f6479',
-              FirstName: 'Sheppard',
-              LastName: 'Nicholson',
-              Country: 'Italy',
-              Age: 49,
-              RegisteredDate: new Date(this.lastYear - 1, 6, 28),
-              IsActive: false,
-              RegisteredDate2: new Date(this.lastYear, 7, 25),
-              IsActive2: false,
-              EmployeeID2: '56250fa57ab1535722e564a6',
-              FirstName2: 'Downs',
-              LastName2: 'Holcomb',
-              Country2: 'Italy',
-              Age2: 35
-            },
-            {
-              EmployeeID: '56250fa546abbe8c616d37eb',
-              FirstName: 'Bettye',
-              LastName: 'Trujillo',
-              Country: 'Canada',
-              Age: 37,
-              RegisteredDate: new Date(new Date().setDate(-20)),
-              IsActive: false,
-              RegisteredDate2: new Date(this.lastYear, 7, 25),
-              IsActive2: false,
-              EmployeeID2: '56250fa57ab1535722e564a6',
-              FirstName2: 'Downs',
-              LastName2: 'Holcomb',
-              Country2: 'Italy',
-              Age2: 35
-            }];
-
+export class TabsShowcaseSampleComponent {
     public contacts: any[] = [{
         avatar: 'assets/images/avatar/1.jpg',
         favorite: true,
@@ -176,67 +43,5 @@ export class TabsShowcaseSampleComponent implements OnInit {
         phone: '901-747-3428',
         text: 'Lisa Landers'
     }];
-
-    public tabsArray = [
-        { name: 'Tab 1', selected: true },
-        { name: 'Tab 2', selected: true }
-    ];
-
-    public ngOnInit(): void {
-        for (let i = 0; i < 20; i++) {
-            const tab = 'Tab ' + i;
-            this.scrollableTabs.push(tab);
-        }
-        this.localData = this.employeesHData;
-    }
-
-    public addTab() {
-        const contact = {
-            text: 'John Doe',
-            phone: '555-555-5555'
-        };
-        this.contacts.push(contact);
-
-        requestAnimationFrame(() => {
-            this.dynamicTabs.selectedIndex = this.contacts.length -1;
-        });
-    }
-
-    public addSelectedTab() {
-        this.tabsArray.forEach(t => {
-            t.selected = false;
-        });
-        this.tabsArray.push({ name: 'New Tab', selected: true });
-    }
-
-    public closeTab(i: number) {
-        this.contacts.splice(i, 1);
-    }
-
-    public changeSelectedIndex() {
-        this.tabs.selectedIndex = 1;
-    }
-
-    public renameTab2() {
-        this.tab2Label = 'Tab 2 Extra Long Header';
-    }
-
-    public changeTabSelected() {
-        this.tabs.items.toArray()[1].selected = true;
-    }
-
-    public selectAlignment(event) {
-        this.tabAlignment = this.tabAlignments[event.index].label;
-    }
-
-    public tabsSelectedIndexChanging(_args: ITabsSelectedIndexChangingEventArgs) {
-        // if (args.newIndex === 1) {
-        //     args.cancel = true;
-        // }
-    }
-
-    public tabsSelectedItemChange(_args: ITabsSelectedItemChangeEventArgs) {
-        // console.log(args);
-    }
 }
 
diff --git a/src/app/tree-showcase/tree-showcase.sample.ts b/src/app/tree-showcase/tree-showcase.sample.ts
index 076eef28270..b2dcb92783b 100644
--- a/src/app/tree-showcase/tree-showcase.sample.ts
+++ b/src/app/tree-showcase/tree-showcase.sample.ts
@@ -327,20 +327,3 @@ export class TreeShowcaseSampleComponent implements AfterViewInit {
         return this.tree.findNodes(key, (_term: string, n: IgxTreeNodeComponent<any>) => n.data?.ID === _term)[0];
     }
 }
-
-
-const generateHierarchicalData = (childKey: string, level = 7, children = 6, iter = 0): any[] => {
-    const returnArray = [];
-    if (level === 0) {
-        return returnArray;
-    }
-    for (let i = 0; i < children; i++) {
-        // create Root member
-        iter++;
-        returnArray.push({
-            ID: `Dummy${iter}`, CompanyName: `Dummy-${iter}`,
-            [childKey]: generateHierarchicalData(childKey, children, level - 1)
-        });
-    }
-    return returnArray;
-};

From f8959c21dd2bb56f5f35f26685c567edac1200da Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Tue, 24 Sep 2024 11:45:00 +0300
Subject: [PATCH 03/18] feat(demos): update wc slider and igc fab button

---
 .../button-showcase/button-showcase.sample.html |  2 +-
 .../slider-showcase/slider-showcase.sample.html |  2 +-
 src/app/tree-showcase/tree-showcase.sample.ts   | 17 +++++++++++++++++
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/app/button-showcase/button-showcase.sample.html b/src/app/button-showcase/button-showcase.sample.html
index b73e48094c0..13b21f22e48 100644
--- a/src/app/button-showcase/button-showcase.sample.html
+++ b/src/app/button-showcase/button-showcase.sample.html
@@ -41,7 +41,7 @@ <h4 class="sample-title">WC Buttons</h4>
         </div>
 
         <div class="button-sample">
-            <igc-button variant="fab"><igx-icon>favorite</igx-icon></igc-button>
+            <igc-button variant="fab"><igc-icon name="favorite"></igc-icon></igc-button>
         </div>
     </div>
 
diff --git a/src/app/slider-showcase/slider-showcase.sample.html b/src/app/slider-showcase/slider-showcase.sample.html
index e9535b99ac4..599c48599d2 100644
--- a/src/app/slider-showcase/slider-showcase.sample.html
+++ b/src/app/slider-showcase/slider-showcase.sample.html
@@ -13,7 +13,7 @@
 
 <article class="sample-item">
     <strong>WC Slider</strong>
-    <igc-slider primary-ticks="7" secondary-ticks="4">
+    <igc-slider primary-ticks="7" secondary-ticks="4" discrete-track>
     <ng-container *ngFor="let label of labels">
         <igc-slider-label>{{ label }}</igc-slider-label>
     </ng-container>
diff --git a/src/app/tree-showcase/tree-showcase.sample.ts b/src/app/tree-showcase/tree-showcase.sample.ts
index b2dcb92783b..076eef28270 100644
--- a/src/app/tree-showcase/tree-showcase.sample.ts
+++ b/src/app/tree-showcase/tree-showcase.sample.ts
@@ -327,3 +327,20 @@ export class TreeShowcaseSampleComponent implements AfterViewInit {
         return this.tree.findNodes(key, (_term: string, n: IgxTreeNodeComponent<any>) => n.data?.ID === _term)[0];
     }
 }
+
+
+const generateHierarchicalData = (childKey: string, level = 7, children = 6, iter = 0): any[] => {
+    const returnArray = [];
+    if (level === 0) {
+        return returnArray;
+    }
+    for (let i = 0; i < children; i++) {
+        // create Root member
+        iter++;
+        returnArray.push({
+            ID: `Dummy${iter}`, CompanyName: `Dummy-${iter}`,
+            [childKey]: generateHierarchicalData(childKey, children, level - 1)
+        });
+    }
+    return returnArray;
+};

From 9e0dcbbdca8e05a41f13506e47f271fa82710d0b Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Tue, 24 Sep 2024 12:05:17 +0300
Subject: [PATCH 04/18] fix(demos): revert igc fab button

---
 src/app/button-showcase/button-showcase.sample.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/button-showcase/button-showcase.sample.html b/src/app/button-showcase/button-showcase.sample.html
index 13b21f22e48..b73e48094c0 100644
--- a/src/app/button-showcase/button-showcase.sample.html
+++ b/src/app/button-showcase/button-showcase.sample.html
@@ -41,7 +41,7 @@ <h4 class="sample-title">WC Buttons</h4>
         </div>
 
         <div class="button-sample">
-            <igc-button variant="fab"><igc-icon name="favorite"></igc-icon></igc-button>
+            <igc-button variant="fab"><igx-icon>favorite</igx-icon></igc-button>
         </div>
     </div>
 

From d940c968fcf05219315657a469f090c2b926868a Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Wed, 25 Sep 2024 08:31:05 +0300
Subject: [PATCH 05/18] feat(demos): make igc components have igc components
 slotted in them

---
 .../avatar-showcase/avatar-showcase.sample.ts |  3 +-
 .../badge-showcase/badge-showcase.sample.ts   |  3 +-
 .../banner-showcase.sample.html               |  2 +-
 .../banner-showcase/banner-showcase.sample.ts | 10 ++++--
 .../button-showcase.sample.html               |  2 +-
 .../button-showcase/button-showcase.sample.ts |  8 +++--
 .../buttonGroup-showcase.sample.html          | 28 +++++++--------
 .../buttonGroup-showcase.sample.ts            |  3 +-
 .../card-showcase/card-showcase.sample.html   | 12 ++-----
 src/app/card-showcase/card-showcase.sample.ts | 13 +++++--
 .../chips-showcase/chips-showcase.sample.html |  4 +--
 .../chips-showcase/chips-showcase.sample.ts   | 36 +++++++++++++++++--
 .../combo-showcase/combo-showcase.sample.ts   |  4 +--
 .../date-picker-showcase.sample.html          |  4 +--
 .../date-picker-showcase.sample.ts            | 10 ++++--
 .../dialog-showcase/dialog-showcase.sample.ts |  3 +-
 .../drop-down-showcase.sample.ts              |  3 +-
 .../expansion-panel-showcase-sample.html      |  4 +--
 .../expansion-panel-showcase-sample.ts        |  3 +-
 .../input-group-showcase.sample.html          | 30 ++++++++--------
 .../input-group-showcase.sample.ts            |  5 ++-
 .../inputs-showcase.sample.html               |  2 +-
 .../inputs-showcase/inputs-showcase.sample.ts |  4 +--
 .../list-showcase/list-showcase.sample.html   |  2 +-
 src/app/list-showcase/list-showcase.sample.ts | 10 ++++--
 .../select-showcase.sample.html               |  2 +-
 .../select-showcase/select-showcase.sample.ts | 10 ++++--
 .../slider-showcase/slider-showcase.sample.ts |  3 +-
 .../snackbar-showcase.sample.ts               |  3 +-
 .../stepper-showcase.sample.ts                |  3 +-
 src/app/tabs-showcase/tabs-showcase.sample.ts |  3 +-
 .../toast-showcase/toast-showcase.sample.ts   |  3 +-
 src/app/tree-showcase/tree-showcase.sample.ts |  3 +-
 33 files changed, 154 insertions(+), 84 deletions(-)

diff --git a/src/app/avatar-showcase/avatar-showcase.sample.ts b/src/app/avatar-showcase/avatar-showcase.sample.ts
index d6efeebe568..ef4a1f03c06 100644
--- a/src/app/avatar-showcase/avatar-showcase.sample.ts
+++ b/src/app/avatar-showcase/avatar-showcase.sample.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { IgxAvatarComponent } from 'igniteui-angular';
 import { defineComponents, IgcAvatarComponent } from "igniteui-webcomponents";
 
@@ -8,6 +8,7 @@ defineComponents(IgcAvatarComponent);
     selector: 'app-avatar-showcase-sample',
     styleUrls: ['avatar-showcase.sample.scss'],
     templateUrl: `avatar-showcase.sample.html`,
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
     standalone: true,
     imports: [IgxAvatarComponent]
 })
diff --git a/src/app/badge-showcase/badge-showcase.sample.ts b/src/app/badge-showcase/badge-showcase.sample.ts
index 7bc04a97bd4..814356e0842 100644
--- a/src/app/badge-showcase/badge-showcase.sample.ts
+++ b/src/app/badge-showcase/badge-showcase.sample.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { IgxBadgeComponent } from 'igniteui-angular';
 import { defineComponents, IgcBadgeComponent } from "igniteui-webcomponents";
 
@@ -8,6 +8,7 @@ defineComponents(IgcBadgeComponent);
     selector: 'app-badge-showcase-sample',
     styleUrls: ['badge-showcase.sample.scss'],
     templateUrl: 'badge-showcase.sample.html',
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
     standalone: true,
     imports: [IgxBadgeComponent]
 })
diff --git a/src/app/banner-showcase/banner-showcase.sample.html b/src/app/banner-showcase/banner-showcase.sample.html
index 1a612f1508d..65741da5801 100644
--- a/src/app/banner-showcase/banner-showcase.sample.html
+++ b/src/app/banner-showcase/banner-showcase.sample.html
@@ -19,7 +19,7 @@ <h4 class="sample-title">Angular vs WebComponents Banner</h4>
     </igx-navbar>
     <igc-banner #bannerWC [animationSettings]="animationSettings" (onOpened)="onOpen($event)" (onClosed)="onClose($event)">
         Your connections is not private!
-        <igx-icon slot="prefix">lock</igx-icon>
+        <igc-icon slot="prefix" name="lock"></igc-icon>
         <div slot="actions">
           <igc-button variant="flat">Dismiss</igc-button>
         </div>
diff --git a/src/app/banner-showcase/banner-showcase.sample.ts b/src/app/banner-showcase/banner-showcase.sample.ts
index ca7f4783959..ab8b17b9d7f 100644
--- a/src/app/banner-showcase/banner-showcase.sample.ts
+++ b/src/app/banner-showcase/banner-showcase.sample.ts
@@ -1,15 +1,19 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild } from '@angular/core';
 import { useAnimation } from '@angular/animations';
 import { IgxBannerActionsDirective, IgxBannerComponent, IgxFlexDirective, IgxIconComponent, IgxLayoutDirective, IgxRippleDirective, IgxNavbarModule, IgxButtonModule } from 'igniteui-angular';
 import { growVerIn, growVerOut } from 'igniteui-angular/animations';
-import { defineComponents, IgcBannerComponent } from "igniteui-webcomponents";
+import { defineComponents, IgcBannerComponent, IgcIconComponent, registerIconFromText } from "igniteui-webcomponents";
 
-defineComponents(IgcBannerComponent);
+defineComponents(IgcBannerComponent, IgcIconComponent);
+
+const lock = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/></svg>'
+registerIconFromText("lock", lock);
 
 @Component({
     selector: 'app-banner-showcase-sample',
     templateUrl: `banner-showcase.sample.html`,
     styleUrls: [`banner-showcase.sample.scss`],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
     standalone: true,
     imports: [IgxBannerComponent, IgxIconComponent, IgxBannerActionsDirective, IgxRippleDirective, IgxLayoutDirective, IgxFlexDirective, IgxNavbarModule, IgxButtonModule]
 })
diff --git a/src/app/button-showcase/button-showcase.sample.html b/src/app/button-showcase/button-showcase.sample.html
index b73e48094c0..13b21f22e48 100644
--- a/src/app/button-showcase/button-showcase.sample.html
+++ b/src/app/button-showcase/button-showcase.sample.html
@@ -41,7 +41,7 @@ <h4 class="sample-title">WC Buttons</h4>
         </div>
 
         <div class="button-sample">
-            <igc-button variant="fab"><igx-icon>favorite</igx-icon></igc-button>
+            <igc-button variant="fab"><igc-icon name="favorite"></igc-icon></igc-button>
         </div>
     </div>
 
diff --git a/src/app/button-showcase/button-showcase.sample.ts b/src/app/button-showcase/button-showcase.sample.ts
index 20cc0d7c399..a085c6bcfb8 100644
--- a/src/app/button-showcase/button-showcase.sample.ts
+++ b/src/app/button-showcase/button-showcase.sample.ts
@@ -1,14 +1,18 @@
-import { Component, ViewEncapsulation } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewEncapsulation } from '@angular/core';
 import { IgxButtonDirective, IgxButtonGroupComponent, IgxIconButtonDirective, IgxIconComponent, IgxRippleDirective } from 'igniteui-angular';
 import { SizeSelectorComponent } from '../size-selector/size-selector.component';
-import { defineComponents, IgcButtonComponent, IgcIconButtonComponent} from "igniteui-webcomponents";
+import { defineComponents, IgcButtonComponent, IgcIconButtonComponent, registerIconFromText} from "igniteui-webcomponents";
 
 defineComponents(IgcButtonComponent, IgcIconButtonComponent);
 
+const favorite = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>'
+registerIconFromText("favorite", favorite );
+
 @Component({
     selector: 'app-button-showcase-sample',
     styleUrls: ['button-showcase.sample.scss'],
     templateUrl: 'button-showcase.sample.html',
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
     encapsulation: ViewEncapsulation.None,
     standalone: true,
     imports: [IgxButtonDirective, IgxIconComponent, IgxButtonGroupComponent, IgxIconButtonDirective, IgxRippleDirective, SizeSelectorComponent]
diff --git a/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.html b/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.html
index 3f3755254e3..e185ed6cc4e 100644
--- a/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.html
+++ b/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.html
@@ -4,36 +4,36 @@ <h4 class="sample-title">Angular ButtonGroup</h4>
         <igx-buttongroup
             [values]="alignOptions"
         ></igx-buttongroup>
+
+        <br/>
+
+        <igx-buttongroup
+            [selectionMode]="'multi'"
+            [values]="cities"
+            alignment="vertical"
+        >
+        </igx-buttongroup>
     </article>
 
     <article class="sample-column">
         <h4 class="sample-title">WC ButtonGroup</h4>
         <igc-button-group>
-            <igc-toggle-button>
+            <igc-toggle-button value="align_left">
                 <igx-icon name="format_align_left"></igx-icon>
             </igc-toggle-button>
-            <igc-toggle-button>
+            <igc-toggle-button value="align_center">
                 <igx-icon name="format_align_center"></igx-icon>
             </igc-toggle-button>
-            <igc-toggle-button>
+            <igc-toggle-button value="align_right">
                 <igx-icon name="format_align_right"></igx-icon>
             </igc-toggle-button>
-            <igc-toggle-button>
+            <igc-toggle-button value="align_justify" selected>
                 <igx-icon name="format_align_justify"></igx-icon>
             </igc-toggle-button>
         </igc-button-group>
-    </article>
 
-    <article class="sample-column">
-        <igx-buttongroup
-            [selectionMode]="'multi'"
-            [values]="cities"
-            alignment="vertical"
-        >
-        </igx-buttongroup>
-    </article>
+        <br/>
 
-    <article class="sample-column">
         <igc-button-group alignment="vertical" selection="multiple">
             <igc-toggle-button>Sofia</igc-toggle-button>
             <igc-toggle-button>London</igc-toggle-button>
diff --git a/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.ts b/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.ts
index f5f7df5ae6f..fe853c85d1d 100644
--- a/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.ts
+++ b/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, ViewChild } from '@angular/core';
 import { NgFor } from '@angular/common';
 import { ButtonGroupAlignment, IgxButtonDirective, IgxButtonGroupComponent, IgxIconComponent, IgxLayoutDirective } from 'igniteui-angular';
 import { defineComponents, IgcButtonGroupComponent, IgcToggleButtonComponent} from "igniteui-webcomponents";
@@ -40,6 +40,7 @@ class Button {
 @Component({
     selector: 'app-buttongroup-showcase-sample',
     templateUrl: 'buttonGroup-showcase.sample.html',
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
     standalone: true,
     imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxIconComponent, NgFor, IgxLayoutDirective]
 })
diff --git a/src/app/card-showcase/card-showcase.sample.html b/src/app/card-showcase/card-showcase.sample.html
index 66737f5abc4..67c24d48447 100644
--- a/src/app/card-showcase/card-showcase.sample.html
+++ b/src/app/card-showcase/card-showcase.sample.html
@@ -53,15 +53,9 @@ <h4 class="sample-title">WC Card</h4>
             </igc-card-content>
             <igc-card-actions>
               <igc-button slot="start" variant="flat">Read More</igc-button>
-              <igc-icon-button slot="end" variant="flat"><igx-icon>favorite</igx-icon></igc-icon-button>
-              <igc-icon-button
-                slot="end"
-                variant="flat"
-              ><igx-icon>bookmark</igx-icon></igc-icon-button>
-              <igc-icon-button
-                slot="end"
-                variant="flat"
-              ><igx-icon>share</igx-icon></igc-icon-button>
+              <igc-icon-button slot="end" variant="flat" name="favorite"></igc-icon-button>
+              <igc-icon-button slot="end" variant="flat" name="bookmark"></igc-icon-button>
+              <igc-icon-button slot="end" variant="flat" name="share"></igc-icon-button>
             </igc-card-actions>
           </igc-card>
     </article>
diff --git a/src/app/card-showcase/card-showcase.sample.ts b/src/app/card-showcase/card-showcase.sample.ts
index 4dd6fc738f6..526cf56d28b 100644
--- a/src/app/card-showcase/card-showcase.sample.ts
+++ b/src/app/card-showcase/card-showcase.sample.ts
@@ -1,11 +1,19 @@
-import { Component, ViewEncapsulation } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewEncapsulation } from '@angular/core';
 import { NgFor } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { IgxAvatarComponent, IgxButtonDirective, IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective, IgxIconButtonDirective, IgxIconComponent, IgxRippleDirective } from 'igniteui-angular';
-import { defineComponents, IgcCardComponent, IgcAvatarComponent, IgcButtonComponent, IgcIconButtonComponent} from "igniteui-webcomponents";
+import { defineComponents, IgcCardComponent, IgcAvatarComponent, IgcButtonComponent, IgcIconButtonComponent, registerIconFromText} from "igniteui-webcomponents";
 
 defineComponents(IgcCardComponent, IgcAvatarComponent, IgcButtonComponent, IgcIconButtonComponent);
 
+const favorite = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>'
+const share = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></svg>'
+const bookmark = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"/></svg>'
+
+registerIconFromText("favorite", favorite);
+registerIconFromText("share", share);
+registerIconFromText("bookmark", bookmark);
+
 export interface ICard {
     title: string;
     subtitle: string;
@@ -35,6 +43,7 @@ const cardFactory = (params: any): ICard => ({
     selector: 'app-card-showcase-sample',
     styleUrls: ['card-showcase.sample.scss'],
     templateUrl: 'card-showcase.sample.html',
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
     standalone: true,
     imports: [
         NgFor,
diff --git a/src/app/chips-showcase/chips-showcase.sample.html b/src/app/chips-showcase/chips-showcase.sample.html
index 925e472c918..19736448c28 100644
--- a/src/app/chips-showcase/chips-showcase.sample.html
+++ b/src/app/chips-showcase/chips-showcase.sample.html
@@ -28,12 +28,12 @@ <h6>WC Chip</h6>
                 [selectable]="isSelectable"
                 [removable]="isRemovable"
                 [selected]="isSelected">
-                <span slot="prefix" *ngIf="hasAvatar" class="chip-area-avatar"><igx-avatar [shape]="'circle'" initials="MP"></igx-avatar></span>
+                <span slot="prefix" *ngIf="hasAvatar" class="chip-area-avatar"><igc-avatar initials="MP" shape="circle"></igc-avatar></span>
                 <span slot="prefix" *ngIf="hasPrefix"><igx-icon>face</igx-icon></span>
                 <span slot="select" *ngIf="customIcons"><igx-icon family="fa-solid" name="fa-check-circle"></igx-icon></span>
                 Chip component
                 <span slot="suffix" *ngIf="hasSuffix"><igx-icon>face</igx-icon></span>
-                <span slot="suffix" *ngIf="hasProgressbar" class="circular-sample"><igx-circular-bar [indeterminate]="true"></igx-circular-bar></span>
+                <span slot="suffix" *ngIf="hasProgressbar" class="circular-sample"><igc-circular-progress [indeterminate]="true"></igc-circular-progress></span>
                 <span slot="remove" *ngIf="customIcons"><igx-icon family="fa-solid" name="fa-trash-alt"></igx-icon></span>
             </igc-chip>
 
diff --git a/src/app/chips-showcase/chips-showcase.sample.ts b/src/app/chips-showcase/chips-showcase.sample.ts
index c20c1cbfd80..b6857ed7d7a 100644
--- a/src/app/chips-showcase/chips-showcase.sample.ts
+++ b/src/app/chips-showcase/chips-showcase.sample.ts
@@ -1,7 +1,8 @@
-import { Component } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { NgFor, NgIf } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import {
+    IChipsAreaSelectEventArgs,
     IgxAvatarComponent,
     IgxButtonGroupComponent,
     IgxChipComponent,
@@ -16,14 +17,15 @@ import {
     IgxCircularProgressBarComponent,
 } from 'igniteui-angular';
 import { SizeSelectorComponent } from '../size-selector/size-selector.component';
-import { defineComponents, IgcChipComponent} from "igniteui-webcomponents";
+import { defineComponents, IgcChipComponent, IgcAvatarComponent, IgcButtonComponent, IgcIconButtonComponent, IgcCircularProgressComponent} from "igniteui-webcomponents";
 
-defineComponents(IgcChipComponent);
+defineComponents(IgcChipComponent, IgcAvatarComponent, IgcButtonComponent, IgcIconButtonComponent, IgcCircularProgressComponent);
 
 @Component({
     selector: 'app-chips-showcase-sample',
     styleUrls: ['chips-showcase.sample.scss', '../app.component.scss'],
     templateUrl: 'chips-showcase.sample.html',
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
     standalone: true,
     imports: [
         IgxButtonGroupComponent,
@@ -47,7 +49,35 @@ defineComponents(IgcChipComponent);
 export class ChipsShowcaseSampleComponent {
     public chipTypes = ['default', 'primary', 'info', 'success', 'warning', 'danger'];
 
+    public isDisabled = false;
+
+    public isRemovable = false;
+
+    public isSelectable = false;
+
+    public hasSuffix = false;
+
+    public hasPrefix = false;
+
+    public hasAvatar = false;
+
+    public hasProgressbar = false;
+
+    public customIcons = false;
+
+    public isDraggable = false;
+
+    public selected: string;
+
+    public isSelected = false;
+
+    public size: string = 'large';
+
     public removeChip(chip: IgxChipComponent) {
         chip.nativeElement.remove();
     }
+
+    public onChipsSelected(event: IChipsAreaSelectEventArgs) {
+        console.log(event);
+    }
 }
diff --git a/src/app/combo-showcase/combo-showcase.sample.ts b/src/app/combo-showcase/combo-showcase.sample.ts
index 3953b0eeb29..09a0d474035 100644
--- a/src/app/combo-showcase/combo-showcase.sample.ts
+++ b/src/app/combo-showcase/combo-showcase.sample.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component } from '@angular/core';
+import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import {
     IgxButtonGroupComponent,
@@ -20,12 +20,12 @@ import { defineComponents, IgcComboComponent} from "igniteui-webcomponents";
 
 defineComponents(IgcComboComponent);
 
-
 @Component({
     // eslint-disable-next-line @angular-eslint/component-selector
     selector: 'combo-showcase-sample',
     templateUrl: './combo-showcase.sample.html',
     styleUrls: ['combo-showcase.sample.scss'],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
     standalone: true,
     imports: [
         IgxInputGroupComponent,
diff --git a/src/app/date-picker-showcase/date-picker-showcase.sample.html b/src/app/date-picker-showcase/date-picker-showcase.sample.html
index 15fc8ad6d2a..7386843eb25 100644
--- a/src/app/date-picker-showcase/date-picker-showcase.sample.html
+++ b/src/app/date-picker-showcase/date-picker-showcase.sample.html
@@ -1,6 +1,6 @@
         <div class="preview">
             <h6>Angular Date Picker</h6>
-            <igx-date-picker mode="dialog" #dp1 [value]="date5" displayFormat="fullDate" showWeekNumbers="true" headerOrientation="vertical">
+            <igx-date-picker mode="dialog" type="box" #dp1 [value]="date5" displayFormat="fullDate" showWeekNumbers="true" headerOrientation="vertical">
                 <label igxLabel>Select a Date</label>
                 <igx-suffix (click)="dp1.open()">
                     <igx-icon>alarm</igx-icon>
@@ -14,7 +14,7 @@ <h6>Angular Date Picker</h6>
 
             <h6>WC Date Picker</h6>
             <igc-date-picker label="Select a Date" mode="dialog" #dpWC [value]="date5" display-format="full" show-week-numbers="true" header-orientation="vertical">
-                <span (click)="dpWC.show()" slot="suffix"><igx-icon>alarm</igx-icon></span>
+                <span (click)="dpWC.show()" slot="suffix"><igc-icon name="alarm"></igc-icon></span>
                 <div slot="actions">
                     <igc-button variant="flat">Today</igc-button>
                     <igc-button variant="flat">Next Year</igc-button>
diff --git a/src/app/date-picker-showcase/date-picker-showcase.sample.ts b/src/app/date-picker-showcase/date-picker-showcase.sample.ts
index 81d0e770738..3fd08555d05 100644
--- a/src/app/date-picker-showcase/date-picker-showcase.sample.ts
+++ b/src/app/date-picker-showcase/date-picker-showcase.sample.ts
@@ -1,13 +1,17 @@
-import { Component } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { DateRangeDescriptor, DateRangeType, IgxButtonDirective, IgxDatePickerComponent, IgxIconComponent, IgxLabelDirective, IgxPickerActionsDirective, IgxRippleDirective, IgxSuffixDirective } from 'igniteui-angular';
-import { defineComponents, IgcDatePickerComponent, IgcButtonComponent} from "igniteui-webcomponents";
+import { defineComponents, IgcDatePickerComponent, IgcButtonComponent, IgcIconComponent, registerIconFromText} from "igniteui-webcomponents";
 
-defineComponents(IgcDatePickerComponent, IgcButtonComponent);
+defineComponents(IgcDatePickerComponent, IgcButtonComponent,IgcIconComponent);
+
+const alarm = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12.5 8H11v6l4.75 2.85.75-1.23-4-2.37V8zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/></svg>'
+registerIconFromText('alarm', alarm);
 
 @Component({
     selector: 'app-date-picker-showcase-sample',
     styleUrls: ['date-picker-showcase.sample.scss'],
     templateUrl: 'date-picker-showcase.sample.html',
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
     standalone: true,
     imports: [IgxDatePickerComponent, IgxLabelDirective, IgxSuffixDirective, IgxIconComponent, IgxPickerActionsDirective, IgxButtonDirective, IgxRippleDirective]
 })
diff --git a/src/app/dialog-showcase/dialog-showcase.sample.ts b/src/app/dialog-showcase/dialog-showcase.sample.ts
index a0290d0a961..91c5a30b956 100644
--- a/src/app/dialog-showcase/dialog-showcase.sample.ts
+++ b/src/app/dialog-showcase/dialog-showcase.sample.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { IgxButtonDirective, IgxDialogActionsDirective, IgxDialogComponent, IgxDialogTitleDirective, IgxIconComponent, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxPrefixDirective, IgxRippleDirective, IgxSwitchComponent } from 'igniteui-angular';
 import { defineComponents, IgcDialogComponent, IgcButtonComponent} from "igniteui-webcomponents";
 
@@ -8,6 +8,7 @@ defineComponents(IgcDialogComponent, IgcButtonComponent);
     selector: 'app-dialog-showcase-sample',
     styleUrls: ['dialog-showcase.sample.scss'],
     templateUrl: 'dialog-showcase.sample.html',
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
     standalone: true,
     imports: [IgxButtonDirective, IgxRippleDirective, IgxSwitchComponent, IgxDialogComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxLabelDirective, IgxDialogTitleDirective, IgxDialogActionsDirective]
 })
diff --git a/src/app/drop-down-showcase/drop-down-showcase.sample.ts b/src/app/drop-down-showcase/drop-down-showcase.sample.ts
index 989a072b056..c4970a26b26 100644
--- a/src/app/drop-down-showcase/drop-down-showcase.sample.ts
+++ b/src/app/drop-down-showcase/drop-down-showcase.sample.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { Component, OnInit, ViewChild, ElementRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { NgFor, NgIf } from '@angular/common';
 import {
 	ConnectedPositioningStrategy,
@@ -28,6 +28,7 @@ defineComponents(IgcDropdownComponent, IgcButtonComponent);
     selector: 'drop-down-showcase-sample',
     templateUrl: './drop-down-showcase.sample.html',
     styleUrls: ['drop-down-showcase.sample.scss'],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
     standalone: true,
 	imports: [
 		NgFor,
diff --git a/src/app/expansion-panel-showcase/expansion-panel-showcase-sample.html b/src/app/expansion-panel-showcase/expansion-panel-showcase-sample.html
index ccaca5835e1..21977abfe36 100644
--- a/src/app/expansion-panel-showcase/expansion-panel-showcase-sample.html
+++ b/src/app/expansion-panel-showcase/expansion-panel-showcase-sample.html
@@ -24,10 +24,10 @@
         <igc-expansion-panel>
             <span slot="title">The Expendables</span>
             <span slot="subtitle">Action, Adventure, Thriller</span>
-            <span>Barney Ross leads the "Expendables", a band of highly skilled
+            <div>Barney Ross leads the "Expendables", a band of highly skilled
               mercenaries including knife enthusiast Lee Christmas, martial arts
               expert Yin Yang, heavy weapons specialist Hale Caesar, demolitionist
-              Toll Road and loose-cannon sniper Gunner Jensen.</span>
+              Toll Road and loose-cannon sniper Gunner Jensen.</div>
        </igc-expansion-panel>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/app/expansion-panel-showcase/expansion-panel-showcase-sample.ts b/src/app/expansion-panel-showcase/expansion-panel-showcase-sample.ts
index 18441d01f52..91e3c559dd2 100644
--- a/src/app/expansion-panel-showcase/expansion-panel-showcase-sample.ts
+++ b/src/app/expansion-panel-showcase/expansion-panel-showcase-sample.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { NgIf } from '@angular/common';
 import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelHeaderComponent, IgxExpansionPanelIconDirective, IgxExpansionPanelTitleDirective } from 'igniteui-angular';
 import { defineComponents, IgcExpansionPanelComponent} from "igniteui-webcomponents";
@@ -10,6 +10,7 @@ defineComponents(IgcExpansionPanelComponent);
     selector: 'expansion-panel-showcase-sample',
     templateUrl: './expansion-panel-showcase-sample.html',
     styleUrls: ['expansion-panel-showcase-sample.scss'],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
     standalone: true,
     imports: [IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, NgIf, IgxExpansionPanelIconDirective, IgxExpansionPanelBodyComponent]
 })
diff --git a/src/app/input-group-showcase/input-group-showcase.sample.html b/src/app/input-group-showcase/input-group-showcase.sample.html
index 6c3b6ccb8f6..79c10302d1b 100644
--- a/src/app/input-group-showcase/input-group-showcase.sample.html
+++ b/src/app/input-group-showcase/input-group-showcase.sample.html
@@ -1,17 +1,18 @@
+<size-selector #sizeSelector></size-selector>
 <div class="inputs-wrapper">
     <strong>Angular Input</strong>
-    <igx-input-group [type]="inputType">
+    <igx-input-group [type]="inputType" [style.--ig-size]="'var(--ig-size-' + sizeSelector.size + ')'">
         <label igxLabel>Web address</label>
         <igx-icon igxPrefix>face</igx-icon>
     
         <input
-                name="inputValidityTest"
-                [required]="isRequired"
-                [disabled]="isDisabled"
-                pattern="^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$"
-                [(ngModel)]="inputValue"
-                igxInput
-                type="text"
+            name="inputValidityTest"
+            [required]="isRequired"
+            [disabled]="isDisabled"
+            pattern="^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$"
+            [(ngModel)]="inputValue"
+            igxInput
+            type="text"
         />
         <igx-hint>Type your web address</igx-hint>
         <igx-suffix>
@@ -21,12 +22,13 @@
     
     <strong>WC Input</strong>
     <igc-input #igcInput
-       label="Web component"
-       [required]="isRequired"
-       [disabled]="isDisabled"
-       [outlined]="isOutlined()">
-        <span slot="prefix"><igx-icon>face</igx-icon></span>
-        <span slot="suffix"><igx-icon>face</igx-icon></span>
+        [style.--ig-size]="'var(--ig-size-' + sizeSelector.size + ')'"
+        label="Web component"
+        [required]="isRequired"
+        [disabled]="isDisabled"
+        [outlined]="isOutlined()">
+        <span slot="prefix"><igc-icon name="face"></igc-icon></span>
+        <span slot="suffix"><igc-icon name="face"></igc-icon></span>
         <span slot="helper-text">
             Web component
             <strong *ngIf="inputType === 'line'" style="color: hsla(var(--ig-error-500))">
diff --git a/src/app/input-group-showcase/input-group-showcase.sample.ts b/src/app/input-group-showcase/input-group-showcase.sample.ts
index 17aa8819d28..e446dc53e9a 100644
--- a/src/app/input-group-showcase/input-group-showcase.sample.ts
+++ b/src/app/input-group-showcase/input-group-showcase.sample.ts
@@ -2,12 +2,15 @@ import { Component, Inject, OnInit, AfterViewInit, ViewChild, ElementRef, CUSTOM
 import { UntypedFormBuilder, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NgIf, NgFor } from '@angular/common';
 
-import { defineComponents, IgcInputComponent, IgcIconComponent } from 'igniteui-webcomponents';
+import { defineComponents, IgcInputComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents';
 import { ButtonGroupAlignment, IButtonGroupEventArgs, IGX_BUTTON_GROUP_DIRECTIVES, IGX_DATE_PICKER_DIRECTIVES, IGX_INPUT_GROUP_DIRECTIVES, IGX_INPUT_GROUP_TYPE, IGX_SELECT_DIRECTIVES, IgxIconComponent, IgxInputGroupType, IgxMaskDirective, IgxSwitchComponent } from 'igniteui-angular';
 import { SizeSelectorComponent } from '../size-selector/size-selector.component';
 
 defineComponents(IgcInputComponent, IgcIconComponent);
 
+const face = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 11.75c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zm6 0c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-.29.02-.58.05-.86 2.36-1.05 4.23-2.98 5.21-5.37C11.07 8.33 14.05 10 17.42 10c.78 0 1.53-.09 2.25-.26.21.71.33 1.47.33 2.26 0 4.41-3.59 8-8 8z"/></svg>'
+registerIconFromText('face', face);
+
 interface Selection {
     selected: boolean;
     type?: IgxInputGroupType;
diff --git a/src/app/inputs-showcase/inputs-showcase.sample.html b/src/app/inputs-showcase/inputs-showcase.sample.html
index bf8b47dcba2..9df0255db62 100644
--- a/src/app/inputs-showcase/inputs-showcase.sample.html
+++ b/src/app/inputs-showcase/inputs-showcase.sample.html
@@ -12,7 +12,7 @@ <h4 class="sample-title">Angular inputs</h4>
         <h4 class="sample-title">WC inputs</h4>
 
         <igc-radio-group name="group">
-            <igc-radio value="Male">Male</igc-radio>
+            <igc-radio checked value="Male">Male</igc-radio>
             <igc-radio value="Female">Female</igc-radio>
         </igc-radio-group>
     </article>
diff --git a/src/app/inputs-showcase/inputs-showcase.sample.ts b/src/app/inputs-showcase/inputs-showcase.sample.ts
index 122431ea9a4..5b39fbef9c7 100644
--- a/src/app/inputs-showcase/inputs-showcase.sample.ts
+++ b/src/app/inputs-showcase/inputs-showcase.sample.ts
@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { NgFor } from '@angular/common';
 import { UntypedFormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { IChangeCheckboxEventArgs, IGX_INPUT_GROUP_DIRECTIVES, IGX_LIST_DIRECTIVES, IgxAvatarComponent, IgxButtonDirective, IgxCheckboxComponent, IgxIconComponent, IgxRadioComponent, IgxSwitchComponent } from 'igniteui-angular';
@@ -6,12 +6,12 @@ import { defineComponents, IgcRadioComponent, IgcRadioGroupComponent, IgcSwitchC
 
 defineComponents(IgcRadioComponent, IgcRadioGroupComponent, IgcSwitchComponent, IgcCheckboxComponent);
 
-
 @Component({
     changeDetection: ChangeDetectionStrategy.OnPush,
     selector: 'app-input-showcase-sample',
     styleUrls: ['inputs-showcase.sample.scss'],
     templateUrl: 'inputs-showcase.sample.html',
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
     standalone: true,
     imports: [FormsModule, NgFor, ReactiveFormsModule, IGX_INPUT_GROUP_DIRECTIVES, IGX_LIST_DIRECTIVES, IgxSwitchComponent, IgxIconComponent, IgxCheckboxComponent, IgxAvatarComponent, IgxRadioComponent, IgxButtonDirective]
 })
diff --git a/src/app/list-showcase/list-showcase.sample.html b/src/app/list-showcase/list-showcase.sample.html
index da4a0d14625..e60a53f0577 100644
--- a/src/app/list-showcase/list-showcase.sample.html
+++ b/src/app/list-showcase/list-showcase.sample.html
@@ -32,7 +32,7 @@ <h4 igxListLineTitle>{{employee.name}}</h4>
                             <igc-avatar slot="start" [src]="employee.imageURL"></igc-avatar>
                             <span slot="title">{{employee.name}}</span>
                             <span slot="subtitle">{{employee.position}}</span>
-                            <igx-icon slot="end">more_horiz</igx-icon>
+                            <igc-icon slot="end" name="more_horiz"></igc-icon>
                         </igc-list-item>
                     </ng-template>
                 </igc-list>
diff --git a/src/app/list-showcase/list-showcase.sample.ts b/src/app/list-showcase/list-showcase.sample.ts
index 67b0370a174..15dbbecced1 100644
--- a/src/app/list-showcase/list-showcase.sample.ts
+++ b/src/app/list-showcase/list-showcase.sample.ts
@@ -1,4 +1,4 @@
-import {Component, ViewEncapsulation} from '@angular/core';
+import {Component, CUSTOM_ELEMENTS_SCHEMA, ViewEncapsulation} from '@angular/core';
 import { NgFor } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import {
@@ -18,9 +18,12 @@ import {
     IgxSwitchComponent
 } from 'igniteui-angular';
 import { SizeSelectorComponent } from '../size-selector/size-selector.component';
-import { defineComponents, IgcListComponent, IgcAvatarComponent, IgcListHeaderComponent, IgcListItemComponent } from 'igniteui-webcomponents';
+import { defineComponents, IgcListComponent, IgcAvatarComponent, IgcListHeaderComponent, IgcListItemComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents';
 
-defineComponents(IgcListComponent, IgcListHeaderComponent, IgcListItemComponent, IgcAvatarComponent);
+defineComponents(IgcListComponent, IgcListHeaderComponent, IgcListItemComponent, IgcAvatarComponent, IgcIconComponent);
+
+const more_horiz = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>'
+registerIconFromText('more_horiz', more_horiz)
 
 interface Employee {
     imageURL: string;
@@ -33,6 +36,7 @@ interface Employee {
     selector: 'app-list-showcase-sample',
     styleUrls: ['list-showcase.sample.scss'],
     templateUrl: 'list-showcase.sample.html',
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
     encapsulation: ViewEncapsulation.None,
     standalone: true,
     imports: [
diff --git a/src/app/select-showcase/select-showcase.sample.html b/src/app/select-showcase/select-showcase.sample.html
index 8b2e0c0383a..3773b3e92bf 100644
--- a/src/app/select-showcase/select-showcase.sample.html
+++ b/src/app/select-showcase/select-showcase.sample.html
@@ -22,7 +22,7 @@
         label = "Sample label"
         outlined="true"
         [style.--ig-size]="'var(--ig-size-' + sizeSelector.size + ')'">
-        <igx-icon slot="prefix">favorite</igx-icon>
+        <igc-icon slot="prefix" name="favorite"></igc-icon>
         <span slot="helper-text">I am a Hint</span>
         <igc-select-item [value] = "'Apple'" [disabled]="true">Apple</igc-select-item>
         <igc-select-item [value] = "'Orange'">Orange</igc-select-item>
diff --git a/src/app/select-showcase/select-showcase.sample.ts b/src/app/select-showcase/select-showcase.sample.ts
index 6ed208dd828..46cae0bd8aa 100644
--- a/src/app/select-showcase/select-showcase.sample.ts
+++ b/src/app/select-showcase/select-showcase.sample.ts
@@ -1,17 +1,21 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NgFor } from '@angular/common';
 import { IgxButtonDirective, IgxSelectComponent, IgxLabelDirective, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxSelectHeaderDirective, IgxSelectFooterDirective, IgxButtonGroupComponent, IgxSuffixDirective, IgxHintDirective, IgxSelectGroupComponent, IgxSwitchComponent } from 'igniteui-angular';
 import { SizeSelectorComponent } from '../size-selector/size-selector.component';
-import { defineComponents, IgcSelectGroupComponent, IgcSelectComponent, IgcSelectItemComponent, IgcSelectHeaderComponent } from 'igniteui-webcomponents';
+import { defineComponents, IgcSelectGroupComponent, IgcSelectComponent, IgcSelectItemComponent, IgcSelectHeaderComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents';
 
-defineComponents(IgcSelectGroupComponent, IgcSelectComponent, IgcSelectItemComponent, IgcSelectHeaderComponent);
+defineComponents(IgcSelectGroupComponent, IgcSelectComponent, IgcSelectItemComponent, IgcSelectHeaderComponent, IgcIconComponent);
+
+const favorite = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>';
+registerIconFromText('favorite', favorite);
 
 @Component({
     // eslint-disable-next-line @angular-eslint/component-selector
     selector: 'app-select-showcase-sample',
     styleUrls: ['./select-showcase.sample.scss'],
     templateUrl: './select-showcase.sample.html',
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
     standalone: true,
     imports: [
         IgxButtonDirective,
diff --git a/src/app/slider-showcase/slider-showcase.sample.ts b/src/app/slider-showcase/slider-showcase.sample.ts
index 9366f926c4c..2d32a294d9e 100644
--- a/src/app/slider-showcase/slider-showcase.sample.ts
+++ b/src/app/slider-showcase/slider-showcase.sample.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { NgFor } from '@angular/common';
 import { IgxSliderType, TickLabelsOrientation, TicksOrientation, IgxButtonDirective, IgxSliderComponent, IgxTickLabelTemplateDirective } from 'igniteui-angular';
@@ -10,6 +10,7 @@ defineComponents(IgcSliderComponent, IgcSliderLabelComponent);
     selector: 'app-slider-showcase-sample',
     styleUrls: ['slider-showcase.sample.scss'],
     templateUrl: 'slider-showcase.sample.html',
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
     standalone: true,
     imports: [IgxSliderComponent, FormsModule, IgxTickLabelTemplateDirective, IgxButtonDirective, NgFor]
 })
diff --git a/src/app/snackbar-showcase/snackbar-showcase.sample.ts b/src/app/snackbar-showcase/snackbar-showcase.sample.ts
index 98d57a86e78..46020cb1e52 100644
--- a/src/app/snackbar-showcase/snackbar-showcase.sample.ts
+++ b/src/app/snackbar-showcase/snackbar-showcase.sample.ts
@@ -1,4 +1,4 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild } from '@angular/core';
 // eslint-disable-next-line max-len
 import { IgxButtonDirective, IgxOverlayOutletDirective, IgxSnackbarComponent } from 'igniteui-angular';
 import { defineComponents, IgcSnackbarComponent } from 'igniteui-webcomponents';
@@ -9,6 +9,7 @@ defineComponents(IgcSnackbarComponent);
     selector: 'app-snackbar-showcase-sample',
     styleUrls: ['snackbar-showcase.sample.css'],
     templateUrl: 'snackbar-showcase.sample.html',
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
     standalone: true,
     imports: [IgxSnackbarComponent, IgxOverlayOutletDirective, IgxButtonDirective]
 })
diff --git a/src/app/stepper-showcase/stepper-showcase.sample.ts b/src/app/stepper-showcase/stepper-showcase.sample.ts
index 15e7760bb4b..ba2de9d4fbf 100644
--- a/src/app/stepper-showcase/stepper-showcase.sample.ts
+++ b/src/app/stepper-showcase/stepper-showcase.sample.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { NgIf } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { IgxButtonDirective, IgxButtonGroupComponent, IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, IgxSuffixDirective, IgxSwitchComponent, IgxStepActiveIndicatorDirective, IgxIconComponent, IgxStepComponent, IgxStepIndicatorDirective, IgxStepTitleDirective, IgxStepSubtitleDirective, IgxStepContentDirective, IgxAvatarComponent, IgxBadgeComponent, IgxTimePickerComponent, IgxSelectComponent, IgxSelectItemComponent, IgxPrefixDirective, IgxHintDirective, IgxStepperComponent } from 'igniteui-angular';
@@ -9,6 +9,7 @@ defineComponents(IgcStepperComponent, IgcButtonComponent, IgcInputComponent);
 @Component({
     templateUrl: 'stepper-showcase.sample.html',
     styleUrls: ['stepper-showcase.sample.scss'],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
     standalone: true,
     imports: [IgxButtonDirective, IgxButtonGroupComponent, IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxSwitchComponent, IgxStepperComponent, IgxStepActiveIndicatorDirective, IgxIconComponent, IgxStepComponent, IgxStepIndicatorDirective, IgxStepTitleDirective, IgxStepSubtitleDirective, IgxStepContentDirective, NgIf, IgxAvatarComponent, IgxBadgeComponent, IgxTimePickerComponent, ReactiveFormsModule, IgxSelectComponent, IgxSelectItemComponent, IgxPrefixDirective, IgxHintDirective]
 })
diff --git a/src/app/tabs-showcase/tabs-showcase.sample.ts b/src/app/tabs-showcase/tabs-showcase.sample.ts
index 80e78a4d259..add86fddf41 100644
--- a/src/app/tabs-showcase/tabs-showcase.sample.ts
+++ b/src/app/tabs-showcase/tabs-showcase.sample.ts
@@ -1,4 +1,4 @@
-import {Component, ViewEncapsulation} from '@angular/core';
+import {Component, CUSTOM_ELEMENTS_SCHEMA, ViewEncapsulation} from '@angular/core';
 import { NgFor } from '@angular/common';
 import { IgxAvatarComponent, IgxButtonDirective, IgxIconButtonDirective, IgxIconComponent, IgxListActionDirective, IgxListComponent, IgxListItemComponent, IgxListLineSubTitleDirective, IgxListLineTitleDirective, IgxListThumbnailDirective, IgxPrefixDirective, IgxRippleDirective, IgxSuffixDirective, IgxTabContentComponent, IgxTabHeaderComponent, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsComponent } from 'igniteui-angular';
 import { defineComponents, IgcTabsComponent, IgcTabComponent, IgcTabPanelComponent } from 'igniteui-webcomponents';
@@ -9,6 +9,7 @@ defineComponents(IgcTabsComponent, IgcTabComponent, IgcTabPanelComponent);
     selector: 'app-tabs-showcase-sample',
     styleUrls: ['tabs-showcase.sample.scss'],
     templateUrl: 'tabs-showcase.sample.html',
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
     encapsulation: ViewEncapsulation.None,
     standalone: true,
     imports: [IgxButtonDirective, IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxRippleDirective, IgxIconComponent, IgxTabHeaderIconDirective, IgxIconButtonDirective, IgxTabHeaderLabelDirective, IgxTabContentComponent, IgxListComponent, NgFor, IgxListItemComponent, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxListActionDirective, IgxPrefixDirective, IgxSuffixDirective]
diff --git a/src/app/toast-showcase/toast-showcase.sample.ts b/src/app/toast-showcase/toast-showcase.sample.ts
index 2345dff9355..4584d535acc 100644
--- a/src/app/toast-showcase/toast-showcase.sample.ts
+++ b/src/app/toast-showcase/toast-showcase.sample.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { IgxButtonDirective, IgxOverlayOutletDirective, IgxRippleDirective, IgxToastComponent } from 'igniteui-angular';
 import { defineComponents, IgcToastComponent } from 'igniteui-webcomponents';
 
@@ -8,6 +8,7 @@ defineComponents(IgcToastComponent);
     selector: 'app-toast-showcase-sample',
     styleUrls: ['toast-showcase.sample.scss'],
     templateUrl: 'toast-showcase.sample.html',
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
     standalone: true,
     imports: [IgxButtonDirective, IgxRippleDirective, IgxOverlayOutletDirective, IgxToastComponent]
 })
diff --git a/src/app/tree-showcase/tree-showcase.sample.ts b/src/app/tree-showcase/tree-showcase.sample.ts
index 076eef28270..953bacbc1c6 100644
--- a/src/app/tree-showcase/tree-showcase.sample.ts
+++ b/src/app/tree-showcase/tree-showcase.sample.ts
@@ -1,6 +1,6 @@
 import { useAnimation } from '@angular/animations';
 import { NgFor, NgTemplateOutlet, NgIf, AsyncPipe } from '@angular/common';
-import { AfterViewInit, ChangeDetectorRef, Component, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import {
     IgxTreeNodeComponent,
@@ -53,6 +53,7 @@ interface CompanyData {
     selector: 'app-tree-showcase-sample',
     templateUrl: 'tree-showcase.sample.html',
     styleUrls: ['tree-showcase.sample.scss'],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
     standalone: true,
     imports: [
         IgxLayoutDirective,

From cba8da99e3b347e21a40c8ddbcd51023971cfbb4 Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Tue, 1 Oct 2024 12:05:04 +0300
Subject: [PATCH 06/18] feat(demos): slot igc items directly in chip demo

---
 src/app/chips-showcase/chips-showcase.sample.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/chips-showcase/chips-showcase.sample.html b/src/app/chips-showcase/chips-showcase.sample.html
index 19736448c28..45a7b3d6896 100644
--- a/src/app/chips-showcase/chips-showcase.sample.html
+++ b/src/app/chips-showcase/chips-showcase.sample.html
@@ -28,13 +28,13 @@ <h6>WC Chip</h6>
                 [selectable]="isSelectable"
                 [removable]="isRemovable"
                 [selected]="isSelected">
-                <span slot="prefix" *ngIf="hasAvatar" class="chip-area-avatar"><igc-avatar initials="MP" shape="circle"></igc-avatar></span>
-                <span slot="prefix" *ngIf="hasPrefix"><igx-icon>face</igx-icon></span>
-                <span slot="select" *ngIf="customIcons"><igx-icon family="fa-solid" name="fa-check-circle"></igx-icon></span>
+                <span *ngIf="hasAvatar" class="chip-area-avatar"><igc-avatar slot="prefix" initials="MP" shape="circle"></igc-avatar></span>
+                <span *ngIf="hasPrefix"><igx-icon slot="prefix">face</igx-icon></span>
+                <span *ngIf="customIcons"><igx-icon slot="select" family="fa-solid" name="fa-check-circle"></igx-icon></span>
                 Chip component
-                <span slot="suffix" *ngIf="hasSuffix"><igx-icon>face</igx-icon></span>
-                <span slot="suffix" *ngIf="hasProgressbar" class="circular-sample"><igc-circular-progress [indeterminate]="true"></igc-circular-progress></span>
-                <span slot="remove" *ngIf="customIcons"><igx-icon family="fa-solid" name="fa-trash-alt"></igx-icon></span>
+                <span *ngIf="hasSuffix"><igx-icon slot="suffix">face</igx-icon></span>
+                <span *ngIf="hasProgressbar" class="circular-sample"><igc-circular-progress slot="suffix" [indeterminate]="true"></igc-circular-progress></span>
+                <span *ngIf="customIcons"><igx-icon slot="remove" family="fa-solid" name="fa-trash-alt"></igx-icon></span>
             </igc-chip>
 
             <div class="preview__info">

From 8575910eba0ec238a6be38c3dc9e78ebc976c1ff Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Tue, 1 Oct 2024 16:03:19 +0300
Subject: [PATCH 07/18] demos(properties-panel): add initial spec file

---
 .../propertiesPanel/Properties-Panel-Spec.md  | 81 +++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 src/app/propertiesPanel/Properties-Panel-Spec.md

diff --git a/src/app/propertiesPanel/Properties-Panel-Spec.md b/src/app/propertiesPanel/Properties-Panel-Spec.md
new file mode 100644
index 00000000000..0d054f4ae21
--- /dev/null
+++ b/src/app/propertiesPanel/Properties-Panel-Spec.md
@@ -0,0 +1,81 @@
+# Properties Panel Specification 
+
+### Contents
+
+1. [Overview & Objectives](#overview)
+2. [User Stories](#user-stories)
+3. [Functionality](#functionality)
+
+### Owned by
+**Team Name**: Design and Web Development (DnD)
+
+**Developer**: Dilyana Yarabanova
+
+### Requires approval from
+- [x] Simeon Simeonov | Date:
+
+### Signed off by
+- [x] Simeon Simeonov | Date: 
+
+## Revision History
+
+| Version | Users           | Date             | Notes         |
+|--------:|-----------------|------------------|---------------|
+|       1 | Simeon Simeonov | Date: 1 Oct 2024 | Initial draft |
+
+## <a name='overview'>1. Overview & Objectives</a>
+
+The properties panel aims to provide a unified User Interface for configuring components in various app samples. It is configured via a standardized data model.
+
+### Acceptance criteria 
+
+1. Should be able to configure the panel using a data object specifying the configuration properties and their default values.
+2. Should generate UI elements for the provided data object.
+3. Should emit event with the updated properties when the user changes them. 
+
+```html
+<app-properties-panel [config]="config"></app-properties-panel>
+```
+
+```ts
+@Component({
+    selector: "app-sample",
+    ...
+})
+export class AppSampleComponent {
+    public config = {
+        disabled: {
+            label?: 'Disabled',
+            control: {
+                type: 'boolean',
+                labels?: ''
+            }
+        },
+        locale: {
+            label: 'Change Locale',
+            control: {
+                type: 'button-group',
+                options: ['en', 'fr', 'ru', 'es'],
+                labels: ['EN', 'FR', 'RU', 'ES'],
+                defaultValue: 'en'
+            },
+        },
+        months_num: {
+            label: 'Number of months',
+            control: {
+                type: 'number',
+                defaultValue: 1,
+                min?: 1,
+                max?: 4,
+                step?: 1
+            }
+        }
+    }
+}
+```
+
+**End-user stories:**
+
+
+## <a name='functionality'>3. Functionality</a>
+

From 6a48e036ca68f1f1a30ef81e55cc14cbb698a656 Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Thu, 3 Oct 2024 15:47:59 +0300
Subject: [PATCH 08/18] feat(properties-panel): add properties panel component

---
 .../properties-panel.component.html           |  71 +++++++++
 .../properties-panel.component.scss           |  26 ++++
 .../properties-panel.component.spec.ts        |  23 +++
 .../properties-panel.component.ts             | 138 ++++++++++++++++++
 .../propertiesPanel/Properties-Panel-Spec.md  |  64 +++++++-
 5 files changed, 315 insertions(+), 7 deletions(-)
 create mode 100644 src/app/properties-panel/properties-panel.component.html
 create mode 100644 src/app/properties-panel/properties-panel.component.scss
 create mode 100644 src/app/properties-panel/properties-panel.component.spec.ts
 create mode 100644 src/app/properties-panel/properties-panel.component.ts

diff --git a/src/app/properties-panel/properties-panel.component.html b/src/app/properties-panel/properties-panel.component.html
new file mode 100644
index 00000000000..10a6060c12f
--- /dev/null
+++ b/src/app/properties-panel/properties-panel.component.html
@@ -0,0 +1,71 @@
+<div id="properties-panel" [formGroup]="form">
+    <div *ngFor="let key of getConfigKeys()">
+        <label *ngIf="getControlType(key) !== 'boolean'">{{ config[key]?.label || (key | titlecase) }}</label>
+
+        <!-- Text Input -->
+        <igx-input-group *ngIf="getControlType(key) === 'text'" type="border">
+            <input [formControlName]="key" igxInput type="text">
+        </igx-input-group>
+
+        <!-- Number Input -->
+        <igx-input-group *ngIf="getControlType(key) === 'number'" type="border">
+            <input [formControlName]="key" igxInput type="number">
+        </igx-input-group>
+
+        <!-- Range Input -->
+        <igx-slider *ngIf="getControlType(key) === 'range'" [formControlName]="key" type="range"
+            [lowerValue]="config[key]?.control?.min ?? 0" [upperValue]="config[key]?.control?.max ?? 100"
+            [minValue]="config[key]?.control?.min ?? 0" [maxValue]="config[key]?.control?.max ?? 100"
+            [step]="config[key]?.control?.step ?? 1" [primaryTicks]="3" [secondaryTicks]="3">
+        </igx-slider>
+
+        <!-- Boolean Switch -->
+        <div *ngIf="getControlType(key) === 'boolean'" class="switch-container">
+            <label>{{ config[key]?.label || (key | titlecase) }}</label>
+            <igx-switch [formControlName]="key"></igx-switch>
+        </div>
+
+        <!-- Date Picker -->
+        <igx-date-picker *ngIf="getControlType(key) === 'date'" [formControlName]="key" mode="dialog"></igx-date-picker>
+
+        <!-- Time Picker -->
+        <igx-time-picker *ngIf="getControlType(key) === 'time'" [formControlName]="key"></igx-time-picker>
+
+        <!-- Date Time Editor Input -->
+        <div id="date-time" *ngIf="getControlType(key) === 'date-time'" [formControlName]="key">
+            <igx-date-picker mode="dialog"></igx-date-picker>
+            <igx-time-picker></igx-time-picker>
+        </div>
+
+        <!-- Vertical Radio Group -->
+        <igx-radio-group *ngIf="getControlType(key) === 'radio'" [alignment]="alignment" [formControlName]="key">
+            <igx-radio *ngFor="let option of getOptions(key); let i = index" value="{{option}}">
+                {{ getLabels(key)[i] }}
+            </igx-radio>
+        </igx-radio-group>
+
+        <!-- Inline Radio Group -->
+        <igx-radio-group *ngIf="getControlType(key) === 'radio-inline'" [formControlName]="key">
+            <igx-radio *ngFor="let option of getOptions(key); let i = index" value="{{option}}">
+                {{ getLabels(key)[i] }}
+            </igx-radio>
+        </igx-radio-group>
+
+        <!-- Button Group -->
+        <div *ngIf="getControlType(key) === 'button-group'">
+            <igx-buttongroup [selectionMode]="'single'">
+                <button igxButton *ngFor="let option of getOptions(key); let i = index"
+                    [selected]="form.controls[key].value === option" (click)="form.controls[key].setValue(option)">
+                    {{ getLabels(key)[i] }}
+                </button>
+            </igx-buttongroup>
+        </div>
+
+        <!-- Select Dropdown -->
+        <igx-select [placeholder]="'Pick One'" [type]="'border'" *ngIf="getControlType(key) === 'select'"
+            [formControlName]="key">
+            <igx-select-item *ngFor="let option of getOptions(key)" [value]="option">{{ option }}</igx-select-item>
+        </igx-select>
+        <br>
+    </div>
+</div>
diff --git a/src/app/properties-panel/properties-panel.component.scss b/src/app/properties-panel/properties-panel.component.scss
new file mode 100644
index 00000000000..f171a21a7da
--- /dev/null
+++ b/src/app/properties-panel/properties-panel.component.scss
@@ -0,0 +1,26 @@
+#properties-panel {
+    background: hsla(var(--ig-gray-50));
+    border: 1px solid hsla(var(--ig-gray-300));
+    padding: 1rem;
+    overflow-x: auto;
+}
+
+#date-time {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px;
+}
+
+igx-input-group {
+    --ig-size: var(--ig-size-small);
+}
+
+.switch-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    label {
+        margin: 0;
+    }
+}
diff --git a/src/app/properties-panel/properties-panel.component.spec.ts b/src/app/properties-panel/properties-panel.component.spec.ts
new file mode 100644
index 00000000000..e507a6a5bc2
--- /dev/null
+++ b/src/app/properties-panel/properties-panel.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PropertiesPanelComponent } from './properties-panel.component';
+
+describe('PropertiesPanelComponent', () => {
+  let component: PropertiesPanelComponent;
+  let fixture: ComponentFixture<PropertiesPanelComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PropertiesPanelComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PropertiesPanelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/properties-panel/properties-panel.component.ts b/src/app/properties-panel/properties-panel.component.ts
new file mode 100644
index 00000000000..1b53452c8f9
--- /dev/null
+++ b/src/app/properties-panel/properties-panel.component.ts
@@ -0,0 +1,138 @@
+import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
+import {
+    IgxButtonGroupComponent,
+    IgxButtonDirective,
+    IgxInputDirective,
+    IgxInputGroupComponent,
+    IgxInputGroupModule,
+    IgxSliderComponent,
+    IgxTickLabelTemplateDirective,
+    IgxSwitchComponent,
+    IgxRadioModule,
+    RadioGroupAlignment,
+    IgxSelectComponent,
+    IgxSelectItemComponent,
+    IgxDatePickerComponent,
+    IgxTimePickerComponent,
+    IgxDateTimeEditorModule
+} from 'igniteui-angular';
+
+export interface PropertyPanelConfig {
+    [key: string]: {
+        label?: string;
+        control: {
+            type: 'boolean' | 'number' | 'range' | 'radio' | 'radio-inline' | 'button-group' | 'select' | 'text' | 'date' | 'time' | 'date-time',
+            options?: any[];
+            labels?: string[];
+            min?: number;
+            max?: number;
+            step?: number;
+            defaultValue?: any;
+        };
+    };
+}
+
+@Component({
+    selector: 'app-properties-panel',
+    standalone: true,
+    templateUrl: './properties-panel.component.html',
+    styleUrl: './properties-panel.component.scss',
+    imports: [
+        ReactiveFormsModule,
+        CommonModule,
+        IgxButtonDirective,
+        IgxButtonGroupComponent,
+        IgxInputDirective,
+        IgxInputGroupComponent,
+        IgxInputGroupModule,
+        IgxSliderComponent,
+        IgxTickLabelTemplateDirective,
+        IgxSwitchComponent,
+        IgxRadioModule,
+        IgxSelectComponent,
+        IgxSelectItemComponent,
+        IgxDatePickerComponent,
+        IgxTimePickerComponent,
+        IgxDateTimeEditorModule
+    ]
+})
+
+export class PropertiesPanelComponent implements OnInit {
+    @Input() public config!: PropertyPanelConfig;
+    @Output() public propertyChanged: EventEmitter<{ key: string; value: any }> = new EventEmitter<{ key: string; value: any }>();
+
+    public form!: FormGroup;
+    public alignment = RadioGroupAlignment.vertical;
+
+    public ngOnInit(): void {
+        this.form = this.createFormGroup(this.config);
+        this.emitInitialValues();
+        this.form.valueChanges.subscribe(this.onFormValueChange.bind(this));
+    }
+
+    private onFormValueChange(value: any): void {
+        Object.keys(value).forEach(key => {
+            this.propertyChanged.emit({ key, value: value[key] });
+        });
+    }
+
+    private emitInitialValues(): void {
+        Object.keys(this.config).forEach(key => {
+            const defaultValue = this.config[key]?.control?.defaultValue;
+            if (defaultValue !== undefined) {
+                this.propertyChanged.emit({ key, value: defaultValue });
+                this.form.controls[key].setValue(defaultValue);
+            }
+        });
+    }
+
+    private createFormGroup(config: PropertyPanelConfig): FormGroup {
+        const group: Record<string, FormControl> = {};
+        Object.keys(config).forEach(key => {
+            const defaultValue = config[key]?.control?.defaultValue ?? '';
+            group[key] = new FormControl(defaultValue);
+        });
+        return new FormGroup(group);
+    }
+
+    // Public method to retrieve the control type for the template
+    public getControlType(key: string): string {
+        return this.config[key].control.type;
+    }
+
+    // Public method to retrieve options for specific controls
+    public getOptions(key: string): any {
+        return this.config[key].control.options;
+    }
+
+    // Retrieve the labels for a given control (if any)
+    public getLabels(key: string): string[] {
+        const labels = this.config[key].control.labels || [];
+        const options = this.getOptions(key);
+        return labels.length > 0 ? labels : options.map(option => option.toString());
+    }
+
+    // Retrieve the keys of the config to iterate over in the template
+    public getConfigKeys(): string[] {
+        return Object.keys(this.config);
+    }
+}
+
+
+// This is the event handler that you should use in the parent class
+
+// public propertyChanges: { [key: string]: any } = {};
+
+// public onPropertyChange(propertyChange: { key: string; value: any }): void {
+//     console.log('Property Changed:', propertyChange);
+//     this.propertyChanges[propertyChange.key] = propertyChange.value;
+// }
+
+// And use this in the template of the component
+
+// <app-properties-panel
+//   [config]="panelConfig"
+//   (propertyChanged)="onPropertyChange($event)">
+// </app-properties-panel>
diff --git a/src/app/propertiesPanel/Properties-Panel-Spec.md b/src/app/propertiesPanel/Properties-Panel-Spec.md
index 0d054f4ae21..cbf4318f3f9 100644
--- a/src/app/propertiesPanel/Properties-Panel-Spec.md
+++ b/src/app/propertiesPanel/Properties-Panel-Spec.md
@@ -1,4 +1,4 @@
-# Properties Panel Specification 
+# Properties Panel Specification
 
 ### Contents
 
@@ -7,31 +7,35 @@
 3. [Functionality](#functionality)
 
 ### Owned by
+
 **Team Name**: Design and Web Development (DnD)
 
 **Developer**: Dilyana Yarabanova
 
 ### Requires approval from
+
 - [x] Simeon Simeonov | Date:
 
 ### Signed off by
-- [x] Simeon Simeonov | Date: 
+
+- [x] Simeon Simeonov | Date:
 
 ## Revision History
 
 | Version | Users           | Date             | Notes         |
-|--------:|-----------------|------------------|---------------|
+| ------: | --------------- | ---------------- | ------------- |
 |       1 | Simeon Simeonov | Date: 1 Oct 2024 | Initial draft |
+|       2 | Dilyana Yarabanova | Date: 3 Oct 2024 | Update Specification |
 
 ## <a name='overview'>1. Overview & Objectives</a>
 
 The properties panel aims to provide a unified User Interface for configuring components in various app samples. It is configured via a standardized data model.
 
-### Acceptance criteria 
+### Acceptance criteria
 
 1. Should be able to configure the panel using a data object specifying the configuration properties and their default values.
 2. Should generate UI elements for the provided data object.
-3. Should emit event with the updated properties when the user changes them. 
+3. Should emit event with the updated properties when the user changes them.
 
 ```html
 <app-properties-panel [config]="config"></app-properties-panel>
@@ -60,7 +64,7 @@ export class AppSampleComponent {
                 defaultValue: 'en'
             },
         },
-        months_num: {
+        monthsNum: {
             label: 'Number of months',
             control: {
                 type: 'number',
@@ -76,6 +80,52 @@ export class AppSampleComponent {
 
 **End-user stories:**
 
-
 ## <a name='functionality'>3. Functionality</a>
 
+1. Here's a table of the available control types and how to use them:
+
+| Control Type | Description                                                                                                                                                     |
+| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| boolean      | Provides a toggle for switching between possible states. config = { disabled: { control: { type: 'boolean'}}}                                                   |
+| number       | Provides a numeric input to include the range of all possible values. config = { monthsNum: { control: { type: 'number', min:1, max:30, step: 2 }}}             |
+| range        | Provides a slider component to include all possible values. config = { odd: { control: { type: 'range', min: 1, max: 30, step: 3 }}}                            |
+| radio        | Provides a set of radio buttons based on the available options. config = { contact: { control: { type: 'radio', options: ['email', 'phone', 'mail'] }}}         |
+| radio-inline | Provides a set of inlined radio buttons based on the available options. config = { contact: { control: { type: 'radio', options: ['email', 'phone', 'mail'] }}} |
+| button-group | Provides a button group with the available options config = { locale: { control: { type: 'button-group', options: ['en', 'fr', 'ru', 'es']}}}                   |
+| select       | Provides a drop-down list component to handle single value selection. config = { age: { control: { type: 'select', options: [20, 30, 40, 50] }}}                |
+| text         | Provides a freeform text input. config = { label: { control: { type: 'text' }}}                                                                                 |
+| date         | Provides a datepicker component to handle date selection. config = { startDate: { control: { type: 'date' }}}                                                   |
+| time         | Provides a timepicker component to handle time selection. config = { startDate: { control: { type: 'date' }}}                                                   |
+| date-time    | Provides an input component with date-time editor directive to handle date and time selection/change. config = { startDate: { control: { type: 'date' }}}       |
+
+2. You can also add label to show the user the name or a short description of the property.
+
+```ts
+public config = {
+    monthsNum: {
+        label: 'Number of months',
+        control: {
+            type: 'number',
+        }
+    }
+}
+```
+
+That way above the control, there will be a label - "Number of months" so the user has better understanding of what this property does.
+
+3. Labels for the controls are also available, if you want to show the property values in a more visually pleasing way:
+
+```ts
+public config = {
+    locale: {
+        control: {
+            type: 'button-group',
+            options: ['en', 'fr', 'ru', 'es'],
+            labels: ['EN', 'FR', 'RU', 'ES'],
+            defaultValue: 'en'
+        },
+    },
+}
+```
+
+Using labels for the options, in this example, the text of the buttons will use the capitalized values from `labels`, but will pass to the property the values from `options`. You can also see how we use `defaultValue` in this example and it's available for all control types.

From dc1e77d817c2497f6a17a9dbee0b234ae755ae18 Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Tue, 8 Oct 2024 10:41:46 +0300
Subject: [PATCH 09/18] feat(properties-panel): update template and ts file

---
 .../properties-panel.component.html           | 110 ++++++++++--------
 .../properties-panel.component.ts             |  71 ++++++++---
 2 files changed, 116 insertions(+), 65 deletions(-)

diff --git a/src/app/properties-panel/properties-panel.component.html b/src/app/properties-panel/properties-panel.component.html
index 10a6060c12f..bae1b16b6f5 100644
--- a/src/app/properties-panel/properties-panel.component.html
+++ b/src/app/properties-panel/properties-panel.component.html
@@ -1,71 +1,89 @@
 <div id="properties-panel" [formGroup]="form">
     <div *ngFor="let key of getConfigKeys()">
-        <label *ngIf="getControlType(key) !== 'boolean'">{{ config[key]?.label || (key | titlecase) }}</label>
+        @if (getControlType(key) !== 'boolean') {
+            <label>
+                {{ config[key]?.label || (key | titlecase) }}
+            </label>
+        }
 
         <!-- Text Input -->
-        <igx-input-group *ngIf="getControlType(key) === 'text'" type="border">
-            <input [formControlName]="key" igxInput type="text">
-        </igx-input-group>
+        @if (getControlType(key) === 'text') {
+            <igx-input-group type="border">
+                <input [formControlName]="key" igxInput type="text">
+            </igx-input-group>
+        }
 
         <!-- Number Input -->
-        <igx-input-group *ngIf="getControlType(key) === 'number'" type="border">
-            <input [formControlName]="key" igxInput type="number">
-        </igx-input-group>
+        @if (getControlType(key) === 'number') {
+            <igx-input-group type="border">
+                <input [formControlName]="key" igxInput type="number" [min]="config[key]?.control?.min ?? 0"
+                    [max]="config[key]?.control?.max">
+            </igx-input-group>
+        }
 
         <!-- Range Input -->
-        <igx-slider *ngIf="getControlType(key) === 'range'" [formControlName]="key" type="range"
-            [lowerValue]="config[key]?.control?.min ?? 0" [upperValue]="config[key]?.control?.max ?? 100"
-            [minValue]="config[key]?.control?.min ?? 0" [maxValue]="config[key]?.control?.max ?? 100"
-            [step]="config[key]?.control?.step ?? 1" [primaryTicks]="3" [secondaryTicks]="3">
-        </igx-slider>
+        @if (getControlType(key) === 'range') {
+            <igx-slider [formControlName]="key" type="range" [lowerValue]="config[key]?.control?.min ?? 0"
+                [upperValue]="config[key]?.control?.max ?? 100" [minValue]="config[key]?.control?.min ?? 0"
+                [maxValue]="config[key]?.control?.max ?? 100" [step]="config[key]?.control?.step ?? 1" [primaryTicks]="3"
+                [secondaryTicks]="3">
+            </igx-slider>
+        }
 
         <!-- Boolean Switch -->
-        <div *ngIf="getControlType(key) === 'boolean'" class="switch-container">
-            <label>{{ config[key]?.label || (key | titlecase) }}</label>
-            <igx-switch [formControlName]="key"></igx-switch>
-        </div>
+        @if (getControlType(key) === 'boolean') {
+            <div class="switch-container">
+                <igx-switch [formControlName]="key"></igx-switch>
+                <label>{{ config[key]?.label || (key | titlecase) }}</label>
+            </div>
+        }
 
         <!-- Date Picker -->
-        <igx-date-picker *ngIf="getControlType(key) === 'date'" [formControlName]="key" mode="dialog"></igx-date-picker>
+        @if (getControlType(key) === 'date') {
+            <igx-date-picker [formControlName]="key" mode="dialog"></igx-date-picker>
+        }
 
         <!-- Time Picker -->
-        <igx-time-picker *ngIf="getControlType(key) === 'time'" [formControlName]="key"></igx-time-picker>
+        @if (getControlType(key) === 'time') {
+            <igx-time-picker [formControlName]="key"></igx-time-picker>
+        }
 
         <!-- Date Time Editor Input -->
-        <div id="date-time" *ngIf="getControlType(key) === 'date-time'" [formControlName]="key">
-            <igx-date-picker mode="dialog"></igx-date-picker>
-            <igx-time-picker></igx-time-picker>
-        </div>
+        @if (getControlType(key) === 'date-time') {
+            <div id="date-time" [formControlName]="key">
+                <igx-date-picker mode="dialog"></igx-date-picker>
+                <igx-time-picker></igx-time-picker>
+            </div>
+        }
 
-        <!-- Vertical Radio Group -->
-        <igx-radio-group *ngIf="getControlType(key) === 'radio'" [alignment]="alignment" [formControlName]="key">
-            <igx-radio *ngFor="let option of getOptions(key); let i = index" value="{{option}}">
-                {{ getLabels(key)[i] }}
-            </igx-radio>
-        </igx-radio-group>
-
-        <!-- Inline Radio Group -->
-        <igx-radio-group *ngIf="getControlType(key) === 'radio-inline'" [formControlName]="key">
-            <igx-radio *ngFor="let option of getOptions(key); let i = index" value="{{option}}">
-                {{ getLabels(key)[i] }}
-            </igx-radio>
-        </igx-radio-group>
+        <!-- Radio Group -->
+        @if (getControlType(key) === 'radio' || getControlType(key) === 'radio-inline') {
+            <igx-radio-group [formControlName]="key" [alignment]="getControlType(key) === 'radio-inline' ? null : radioAlignment">
+                <igx-radio *ngFor="let option of getControlOptions(key); let i = index" value="{{option}}">
+                    {{ getControlLabels(key)[i] }}
+                </igx-radio>
+            </igx-radio-group>
+        }
 
         <!-- Button Group -->
-        <div *ngIf="getControlType(key) === 'button-group'">
-            <igx-buttongroup [selectionMode]="'single'">
-                <button igxButton *ngFor="let option of getOptions(key); let i = index"
-                    [selected]="form.controls[key].value === option" (click)="form.controls[key].setValue(option)">
-                    {{ getLabels(key)[i] }}
-                </button>
-            </igx-buttongroup>
-        </div>
+        @if (getControlType(key) === 'button-group') {
+        <igx-buttongroup [selectionMode]="'single'">
+            <button igxButton *ngFor="let option of getControlOptions(key); let i = index"
+                [selected]="form.controls[key].value === option" (click)="form.controls[key].setValue(option)">
+                {{ getControlLabels(key)[i] }}
+            </button>
+        </igx-buttongroup>
+        }
 
         <!-- Select Dropdown -->
-        <igx-select [placeholder]="'Pick One'" [type]="'border'" *ngIf="getControlType(key) === 'select'"
-            [formControlName]="key">
-            <igx-select-item *ngFor="let option of getOptions(key)" [value]="option">{{ option }}</igx-select-item>
+        @if (getControlType(key) === 'select') {
+        <igx-select [placeholder]="'Pick One'" [type]="'border'" [formControlName]="key">
+            <igx-select-item *ngFor="let option of getControlOptions(key)" [value]="option">{{ option }}</igx-select-item>
         </igx-select>
+        }
+
         <br>
+
+        <ng-content></ng-content>
     </div>
 </div>
diff --git a/src/app/properties-panel/properties-panel.component.ts b/src/app/properties-panel/properties-panel.component.ts
index 1b53452c8f9..30cd67c7c7e 100644
--- a/src/app/properties-panel/properties-panel.component.ts
+++ b/src/app/properties-panel/properties-panel.component.ts
@@ -19,12 +19,26 @@ import {
     IgxDateTimeEditorModule
 } from 'igniteui-angular';
 
-export interface PropertyPanelConfig {
+export type ControlType =
+    'boolean' |
+    'number' |
+    'range' |
+    'radio' |
+    'radio-inline' |
+    'button-group' |
+    'select' |
+    'text' |
+    'date' |
+    'time' |
+    'date-time';
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export type PropertyPanelConfig = {
     [key: string]: {
         label?: string;
         control: {
-            type: 'boolean' | 'number' | 'range' | 'radio' | 'radio-inline' | 'button-group' | 'select' | 'text' | 'date' | 'time' | 'date-time',
-            options?: any[];
+            type: ControlType,
+            options?: string[];
             labels?: string[];
             min?: number;
             max?: number;
@@ -63,8 +77,8 @@ export class PropertiesPanelComponent implements OnInit {
     @Input() public config!: PropertyPanelConfig;
     @Output() public propertyChanged: EventEmitter<{ key: string; value: any }> = new EventEmitter<{ key: string; value: any }>();
 
-    public form!: FormGroup;
-    public alignment = RadioGroupAlignment.vertical;
+    protected form!: FormGroup;
+    protected radioAlignment = RadioGroupAlignment.vertical;
 
     public ngOnInit(): void {
         this.form = this.createFormGroup(this.config);
@@ -72,23 +86,46 @@ export class PropertiesPanelComponent implements OnInit {
         this.form.valueChanges.subscribe(this.onFormValueChange.bind(this));
     }
 
-    private onFormValueChange(value: any): void {
+    protected onFormValueChange(value: any): void {
         Object.keys(value).forEach(key => {
-            this.propertyChanged.emit({ key, value: value[key] });
+            const controlConfig = this.config[key]?.control;
+
+            if (controlConfig?.type === 'number') {
+                const maxValue = controlConfig.max;
+                const minValue = controlConfig.min;
+                let controlValue = parseFloat(value[key]);
+
+                // Check if value exceeds min or max limits
+                if (maxValue !== undefined && controlValue > maxValue) {
+                    controlValue = maxValue;
+                }
+                if (minValue !== undefined && controlValue < minValue) {
+                    controlValue = minValue;
+                }
+
+                // Only update form control if value changes
+                if (this.form.controls[key].value !== controlValue) {
+                    this.form.controls[key].setValue(controlValue, { emitEvent: false });
+                }
+
+                this.propertyChanged.emit({ key, value: controlValue });
+            } else {
+                this.propertyChanged.emit({ key, value: value[key] });
+            }
         });
     }
 
-    private emitInitialValues(): void {
+    protected emitInitialValues(): void {
         Object.keys(this.config).forEach(key => {
             const defaultValue = this.config[key]?.control?.defaultValue;
-            if (defaultValue !== undefined) {
+            if (defaultValue !== undefined && defaultValue !== null) {
                 this.propertyChanged.emit({ key, value: defaultValue });
                 this.form.controls[key].setValue(defaultValue);
             }
         });
     }
 
-    private createFormGroup(config: PropertyPanelConfig): FormGroup {
+    protected createFormGroup(config: PropertyPanelConfig): FormGroup {
         const group: Record<string, FormControl> = {};
         Object.keys(config).forEach(key => {
             const defaultValue = config[key]?.control?.defaultValue ?? '';
@@ -97,25 +134,21 @@ export class PropertiesPanelComponent implements OnInit {
         return new FormGroup(group);
     }
 
-    // Public method to retrieve the control type for the template
-    public getControlType(key: string): string {
+    protected getControlType(key: string): string {
         return this.config[key].control.type;
     }
 
-    // Public method to retrieve options for specific controls
-    public getOptions(key: string): any {
+    protected getControlOptions(key: string): any {
         return this.config[key].control.options;
     }
 
-    // Retrieve the labels for a given control (if any)
-    public getLabels(key: string): string[] {
+    protected getControlLabels(key: string): string[] {
         const labels = this.config[key].control.labels || [];
-        const options = this.getOptions(key);
+        const options = this.getControlOptions(key);
         return labels.length > 0 ? labels : options.map(option => option.toString());
     }
 
-    // Retrieve the keys of the config to iterate over in the template
-    public getConfigKeys(): string[] {
+    protected getConfigKeys(): string[] {
         return Object.keys(this.config);
     }
 }

From 5af87675b59d9c7541385bd5c099fe6e8edf0553 Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Wed, 9 Oct 2024 15:35:17 +0300
Subject: [PATCH 10/18] feat(properties-panel): make propertyChangeService and
 wrap the panel in a navdrawer

---
 src/app/app.component.html                    | 12 ++++
 src/app/app.component.ts                      | 11 ++-
 .../avatar-showcase.sample.html               | 18 +++--
 .../avatar-showcase/avatar-showcase.sample.ts | 65 ++++++++++++++++-
 .../badge-showcase/badge-showcase.sample.html |  7 +-
 .../badge-showcase/badge-showcase.sample.ts   | 56 ++++++++++++++-
 .../properties-panel.component.html           | 71 ++++++++++---------
 .../properties-panel.component.scss           |  7 --
 .../properties-panel.component.ts             | 69 +++---------------
 src/app/property-change.service.spec.ts       | 16 +++++
 src/app/property-change.service.ts            | 45 ++++++++++++
 11 files changed, 261 insertions(+), 116 deletions(-)
 create mode 100644 src/app/property-change.service.spec.ts
 create mode 100644 src/app/property-change.service.ts

diff --git a/src/app/app.component.html b/src/app/app.component.html
index f35f73504ff..e629a1f8d2f 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -68,6 +68,18 @@
         </ng-template>
     </igx-nav-drawer>
 
+    <igx-nav-drawer #paneldrawer
+        [pin]="true"
+        position="right"
+        [isOpen]="!!panelConfig"
+        id="paneldrawer">
+
+        <ng-template igxDrawer *ngIf="panelConfig">
+            <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">
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 3f4929c6124..79a8c2663b3 100644
--- a/src/app/app.component.ts
+++ b/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 './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 = {
@@ -811,10 +816,14 @@ export class AppComponent implements OnInit {
         }
     ].sort((componentLink1, componentLink2) => componentLink1.name > componentLink2.name ? 1 : -1);
 
-    constructor(private router: Router, private iconService: IgxIconService) {
+    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) {
diff --git a/src/app/avatar-showcase/avatar-showcase.sample.html b/src/app/avatar-showcase/avatar-showcase.sample.html
index 5306ec6d218..4479e3b0f6e 100644
--- a/src/app/avatar-showcase/avatar-showcase.sample.html
+++ b/src/app/avatar-showcase/avatar-showcase.sample.html
@@ -1,18 +1,22 @@
 <h4 class="sample-title">Angular vs WebComponents Avatar</h4>
-<div class="wrapper">
+<div class="wrapper" [ngStyle]="{'--ig-size': 'var(--ig-size-' + size + ')'}">
     <article class="avatars-wrapper">
         <div class="avatars">
             <strong>Angular Avatars</strong>
-            <igx-avatar initials="AZ" shape="circle"></igx-avatar>
-            <igx-avatar initials="AZ" shape="rounded"></igx-avatar>
-            <igx-avatar initials="AZ" shape="square"></igx-avatar>
+            <p>Avatar with an image</p>
+            <igx-avatar [src]="src" [shape]="shape"></igx-avatar>
+
+            <p>Avatar with initials</p>
+            <igx-avatar [initials]="initials || 'RK'" [shape]="shape"></igx-avatar>
         </div>
 
         <div class="avatars">
             <strong>WebComponents Avatars</strong>
-            <igc-avatar initials="AZ" shape="circle"></igc-avatar>
-            <igc-avatar initials="AZ" shape="rounded"></igc-avatar>
-            <igc-avatar initials="AZ" shape="square"></igc-avatar>
+            <p>Avatar with an image</p>
+            <igc-avatar [src]="src" [shape]="shape"></igc-avatar>
+
+            <p>Avatar with initials</p>
+            <igc-avatar [initials]="initials || 'RK'" [shape]="shape"></igc-avatar>
         </div>
     </article>
 </div>
diff --git a/src/app/avatar-showcase/avatar-showcase.sample.ts b/src/app/avatar-showcase/avatar-showcase.sample.ts
index ef4a1f03c06..0d46007b79b 100644
--- a/src/app/avatar-showcase/avatar-showcase.sample.ts
+++ b/src/app/avatar-showcase/avatar-showcase.sample.ts
@@ -1,6 +1,9 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, OnDestroy, OnInit } from '@angular/core';
 import { IgxAvatarComponent } from 'igniteui-angular';
+import { CommonModule } from '@angular/common';
 import { defineComponents, IgcAvatarComponent } from "igniteui-webcomponents";
+import { PropertyPanelConfig, PropertiesPanelComponent } from '../properties-panel/properties-panel.component';
+import { PropertyChangeService } from '../property-change.service';
 
 defineComponents(IgcAvatarComponent);
 
@@ -10,6 +13,62 @@ defineComponents(IgcAvatarComponent);
     templateUrl: `avatar-showcase.sample.html`,
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
     standalone: true,
-    imports: [IgxAvatarComponent]
+    imports: [CommonModule, IgxAvatarComponent, PropertiesPanelComponent]
 })
-export class AvatarShowcaseSampleComponent {}
+
+export class AvatarShowcaseSampleComponent implements OnInit, OnDestroy {
+    constructor(protected propertyChangeService: PropertyChangeService) { }
+
+    public ngOnInit(): void {
+        this.propertyChangeService.setPanelConfig(this.panelConfig);
+    }
+
+    public ngOnDestroy(): void {
+        this.propertyChangeService.clearPanelConfig();
+    }
+
+    public get src(): string {
+        return this.propertyChangeService.getProperty('src');
+    }
+
+    public get shape(): string {
+        return this.propertyChangeService.getProperty('shape');
+    }
+
+    public get initials(): string {
+        return this.propertyChangeService.getProperty('initials');
+    }
+
+    public get size(): string {
+        return this.propertyChangeService.getProperty('size');
+    }
+
+    public panelConfig: PropertyPanelConfig = {
+        size: {
+            control: {
+                type: 'button-group',
+                options: ['small', 'medium', 'large'],
+                defaultValue: 'medium'
+            }
+        },
+        shape: {
+            control: {
+                type: 'radio-inline',
+                options: ['circle', 'rounded', 'square'],
+                defaultValue: 'circle'
+            }
+        },
+        src: {
+            label: 'The image source to use',
+            control: {
+                type: 'text',
+                defaultValue: 'https://images.unsplash.com/photo-1514041790697-53f1f86214d2?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b7ac79503fbe78855a346c8d814f95ba&auto=format&fit=crop&w=1650&q=80'
+            }
+        },
+        initials: {
+            control: {
+                type: 'text'
+            }
+        }
+    }
+}
diff --git a/src/app/badge-showcase/badge-showcase.sample.html b/src/app/badge-showcase/badge-showcase.sample.html
index 75dab4806e4..db40d91b09c 100644
--- a/src/app/badge-showcase/badge-showcase.sample.html
+++ b/src/app/badge-showcase/badge-showcase.sample.html
@@ -2,14 +2,11 @@ <h4 class="sample-title">Angular vs WebComponents Badge</h4>
 <div class="wrapper">
     <div class="badges">
         <strong>Angular Badge</strong>
-        <igx-badge value="8" shape="rounded"></igx-badge>
-        <igx-badge value="8" shape="square"></igx-badge>
+        <igx-badge [type]="angularVariant" value="8" [shape]="shape"></igx-badge>
     </div>
 
     <div class="badges">
         <strong>WC Badge</strong>
-        <igc-badge shape="rounded"><span>8</span></igc-badge>
-        <igc-badge shape="square"><span>8</span></igc-badge>
+        <igc-badge [variant]="webComponentVariant" [shape]="shape"><span>8</span></igc-badge>
     </div>
 </div>
-
diff --git a/src/app/badge-showcase/badge-showcase.sample.ts b/src/app/badge-showcase/badge-showcase.sample.ts
index 814356e0842..fcc3b587bac 100644
--- a/src/app/badge-showcase/badge-showcase.sample.ts
+++ b/src/app/badge-showcase/badge-showcase.sample.ts
@@ -1,6 +1,8 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, OnDestroy, OnInit } from '@angular/core';
 import { IgxBadgeComponent } from 'igniteui-angular';
 import { defineComponents, IgcBadgeComponent } from "igniteui-webcomponents";
+import { PropertyPanelConfig } from '../properties-panel/properties-panel.component';
+import { PropertyChangeService } from '../property-change.service';
 
 defineComponents(IgcBadgeComponent);
 
@@ -12,4 +14,54 @@ defineComponents(IgcBadgeComponent);
     standalone: true,
     imports: [IgxBadgeComponent]
 })
-export class BadgeShowcaseSampleComponent {}
+
+export class BadgeShowcaseSampleComponent implements OnInit, OnDestroy {
+    public panelConfig: PropertyPanelConfig = {
+        shape: {
+            control: {
+                type: 'button-group',
+                options: ['rounded', 'square'],
+                defaultValue: 'rounded'
+            }
+        },
+        variant: {
+            control: {
+                type: 'select',
+                options: ['default', 'info', 'success', 'warning', 'error']
+            }
+        }
+    };
+
+    constructor(protected propertyChangeService: PropertyChangeService) { }
+
+    public ngOnInit(): void {
+        this.propertyChangeService.setPanelConfig(this.panelConfig);
+    }
+
+    public ngOnDestroy(): void {
+        this.propertyChangeService.clearPanelConfig();
+    }
+
+    private variantMapping: { [key: string]: { angular: string; webComponent: string } } = {
+        default: { angular: 'default', webComponent: 'primary' },
+        error: { angular: 'error', webComponent: 'danger' },
+        info: { angular: 'info', webComponent: 'info' },
+        success: { angular: 'success', webComponent: 'success' },
+        warning: { angular: 'warning', webComponent: 'warning' },
+    };
+
+    public get angularVariant(): string {
+        const variant = this.propertyChangeService.getProperty('variant') || 'default';
+        return this.variantMapping[variant]?.angular || 'default';
+    }
+
+    public get webComponentVariant(): string {
+        const variant = this.propertyChangeService.getProperty('variant') || 'default';
+        return this.variantMapping[variant]?.webComponent || 'primary';
+    }
+
+    public get shape(): string {
+        return this.propertyChangeService.getProperty('shape');
+    }
+}
+
diff --git a/src/app/properties-panel/properties-panel.component.html b/src/app/properties-panel/properties-panel.component.html
index bae1b16b6f5..bf03c7ceb41 100644
--- a/src/app/properties-panel/properties-panel.component.html
+++ b/src/app/properties-panel/properties-panel.component.html
@@ -1,68 +1,72 @@
 <div id="properties-panel" [formGroup]="form">
     <div *ngFor="let key of getConfigKeys()">
         @if (getControlType(key) !== 'boolean') {
-            <label>
-                {{ config[key]?.label || (key | titlecase) }}
-            </label>
+        <label>
+            {{ config[key]?.label || (key | titlecase) }}
+        </label>
         }
 
         <!-- Text Input -->
         @if (getControlType(key) === 'text') {
-            <igx-input-group type="border">
-                <input [formControlName]="key" igxInput type="text">
-            </igx-input-group>
+        <igx-input-group type="border">
+            <input [formControlName]="key" igxInput type="text" />
+        </igx-input-group>
         }
 
         <!-- Number Input -->
         @if (getControlType(key) === 'number') {
-            <igx-input-group type="border">
-                <input [formControlName]="key" igxInput type="number" [min]="config[key]?.control?.min ?? 0"
-                    [max]="config[key]?.control?.max">
-            </igx-input-group>
+        <igx-input-group type="border">
+            <input [formControlName]="key" igxInput type="number" [min]="config[key]?.control?.min ?? 0"
+                [max]="config[key]?.control?.max" />
+        </igx-input-group>
         }
 
         <!-- Range Input -->
         @if (getControlType(key) === 'range') {
-            <igx-slider [formControlName]="key" type="range" [lowerValue]="config[key]?.control?.min ?? 0"
-                [upperValue]="config[key]?.control?.max ?? 100" [minValue]="config[key]?.control?.min ?? 0"
-                [maxValue]="config[key]?.control?.max ?? 100" [step]="config[key]?.control?.step ?? 1" [primaryTicks]="3"
-                [secondaryTicks]="3">
-            </igx-slider>
+        <igx-slider [formControlName]="key" type="range" [lowerValue]="config[key]?.control?.min ?? 0"
+            [upperValue]="config[key]?.control?.max ?? 100" [minValue]="config[key]?.control?.min ?? 0"
+            [maxValue]="config[key]?.control?.max ?? 100" [step]="config[key]?.control?.step ?? 1" [primaryTicks]="3"
+            [secondaryTicks]="3">
+        </igx-slider>
         }
 
         <!-- Boolean Switch -->
         @if (getControlType(key) === 'boolean') {
-            <div class="switch-container">
-                <igx-switch [formControlName]="key"></igx-switch>
-                <label>{{ config[key]?.label || (key | titlecase) }}</label>
-            </div>
+        <div class="switch-container">
+            <igx-switch [formControlName]="key"></igx-switch>
+            <label>{{ config[key]?.label || (key | titlecase) }}</label>
+        </div>
         }
 
         <!-- Date Picker -->
         @if (getControlType(key) === 'date') {
-            <igx-date-picker [formControlName]="key" mode="dialog"></igx-date-picker>
+        <igx-date-picker [formControlName]="key" mode="dialog"></igx-date-picker>
         }
 
         <!-- Time Picker -->
         @if (getControlType(key) === 'time') {
-            <igx-time-picker [formControlName]="key"></igx-time-picker>
+        <igx-time-picker [formControlName]="key"></igx-time-picker>
         }
 
         <!-- Date Time Editor Input -->
         @if (getControlType(key) === 'date-time') {
-            <div id="date-time" [formControlName]="key">
-                <igx-date-picker mode="dialog"></igx-date-picker>
-                <igx-time-picker></igx-time-picker>
-            </div>
+        <div id="date-time" [formControlName]="key">
+            <igx-date-picker mode="dialog"></igx-date-picker>
+            <igx-time-picker></igx-time-picker>
+        </div>
         }
 
         <!-- Radio Group -->
-        @if (getControlType(key) === 'radio' || getControlType(key) === 'radio-inline') {
-            <igx-radio-group [formControlName]="key" [alignment]="getControlType(key) === 'radio-inline' ? null : radioAlignment">
-                <igx-radio *ngFor="let option of getControlOptions(key); let i = index" value="{{option}}">
-                    {{ getControlLabels(key)[i] }}
-                </igx-radio>
-            </igx-radio-group>
+        @if (
+        getControlType(key) === 'radio' || getControlType(key) === 'radio-inline'
+        ) {
+        <igx-radio-group [formControlName]="key" [alignment]="
+          getControlType(key) === 'radio-inline' ? null : radioAlignment
+        ">
+            <igx-radio *ngFor="let option of getControlOptions(key); let i = index" value="{{ option }}">
+                {{ getControlLabels(key)[i] }}
+            </igx-radio>
+        </igx-radio-group>
         }
 
         <!-- Button Group -->
@@ -78,11 +82,12 @@
         <!-- Select Dropdown -->
         @if (getControlType(key) === 'select') {
         <igx-select [placeholder]="'Pick One'" [type]="'border'" [formControlName]="key">
-            <igx-select-item *ngFor="let option of getControlOptions(key)" [value]="option">{{ option }}</igx-select-item>
+            <igx-select-item *ngFor="let option of getControlOptions(key)" [value]="option">{{ option
+                }}</igx-select-item>
         </igx-select>
         }
 
-        <br>
+        <br />
 
         <ng-content></ng-content>
     </div>
diff --git a/src/app/properties-panel/properties-panel.component.scss b/src/app/properties-panel/properties-panel.component.scss
index f171a21a7da..45d5e804809 100644
--- a/src/app/properties-panel/properties-panel.component.scss
+++ b/src/app/properties-panel/properties-panel.component.scss
@@ -1,10 +1,3 @@
-#properties-panel {
-    background: hsla(var(--ig-gray-50));
-    border: 1px solid hsla(var(--ig-gray-300));
-    padding: 1rem;
-    overflow-x: auto;
-}
-
 #date-time {
     display: grid;
     grid-template-columns: 1fr 1fr;
diff --git a/src/app/properties-panel/properties-panel.component.ts b/src/app/properties-panel/properties-panel.component.ts
index 30cd67c7c7e..f77e2c53fc4 100644
--- a/src/app/properties-panel/properties-panel.component.ts
+++ b/src/app/properties-panel/properties-panel.component.ts
@@ -1,6 +1,7 @@
 import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
+import { PropertyChangeService } from '../property-change.service';
 import {
     IgxButtonGroupComponent,
     IgxButtonDirective,
@@ -80,60 +81,33 @@ export class PropertiesPanelComponent implements OnInit {
     protected form!: FormGroup;
     protected radioAlignment = RadioGroupAlignment.vertical;
 
+    constructor(private propertyChangeService: PropertyChangeService) { }
+
     public ngOnInit(): void {
         this.form = this.createFormGroup(this.config);
-        this.emitInitialValues();
+        this.propertyChangeService.emitInitialValues(this.config);
         this.form.valueChanges.subscribe(this.onFormValueChange.bind(this));
     }
 
     protected onFormValueChange(value: any): void {
-        Object.keys(value).forEach(key => {
-            const controlConfig = this.config[key]?.control;
-
-            if (controlConfig?.type === 'number') {
-                const maxValue = controlConfig.max;
-                const minValue = controlConfig.min;
-                let controlValue = parseFloat(value[key]);
-
-                // Check if value exceeds min or max limits
-                if (maxValue !== undefined && controlValue > maxValue) {
-                    controlValue = maxValue;
-                }
-                if (minValue !== undefined && controlValue < minValue) {
-                    controlValue = minValue;
-                }
-
-                // Only update form control if value changes
-                if (this.form.controls[key].value !== controlValue) {
-                    this.form.controls[key].setValue(controlValue, { emitEvent: false });
-                }
-
-                this.propertyChanged.emit({ key, value: controlValue });
-            } else {
-                this.propertyChanged.emit({ key, value: value[key] });
-            }
-        });
-    }
-
-    protected emitInitialValues(): void {
-        Object.keys(this.config).forEach(key => {
-            const defaultValue = this.config[key]?.control?.defaultValue;
-            if (defaultValue !== undefined && defaultValue !== null) {
-                this.propertyChanged.emit({ key, value: defaultValue });
-                this.form.controls[key].setValue(defaultValue);
-            }
+        Object.keys(value).forEach((key) => {
+            this.propertyChangeService.updateProperty(key, value[key]);
         });
     }
 
     protected createFormGroup(config: PropertyPanelConfig): FormGroup {
         const group: Record<string, FormControl> = {};
-        Object.keys(config).forEach(key => {
+        Object.keys(config).forEach((key) => {
             const defaultValue = config[key]?.control?.defaultValue ?? '';
             group[key] = new FormControl(defaultValue);
         });
         return new FormGroup(group);
     }
 
+    protected getConfigKeys(): string[] {
+        return Object.keys(this.config);
+    }
+
     protected getControlType(key: string): string {
         return this.config[key].control.type;
     }
@@ -147,25 +121,4 @@ export class PropertiesPanelComponent implements OnInit {
         const options = this.getControlOptions(key);
         return labels.length > 0 ? labels : options.map(option => option.toString());
     }
-
-    protected getConfigKeys(): string[] {
-        return Object.keys(this.config);
-    }
 }
-
-
-// This is the event handler that you should use in the parent class
-
-// public propertyChanges: { [key: string]: any } = {};
-
-// public onPropertyChange(propertyChange: { key: string; value: any }): void {
-//     console.log('Property Changed:', propertyChange);
-//     this.propertyChanges[propertyChange.key] = propertyChange.value;
-// }
-
-// And use this in the template of the component
-
-// <app-properties-panel
-//   [config]="panelConfig"
-//   (propertyChanged)="onPropertyChange($event)">
-// </app-properties-panel>
diff --git a/src/app/property-change.service.spec.ts b/src/app/property-change.service.spec.ts
new file mode 100644
index 00000000000..18094b35f60
--- /dev/null
+++ b/src/app/property-change.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { PropertyChangeService } from './property-change.service';
+
+describe('PropertyChangeService', () => {
+  let service: PropertyChangeService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(PropertyChangeService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/property-change.service.ts b/src/app/property-change.service.ts
new file mode 100644
index 00000000000..474bf7e6bf8
--- /dev/null
+++ b/src/app/property-change.service.ts
@@ -0,0 +1,45 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { PropertyPanelConfig } from './properties-panel/properties-panel.component';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class PropertyChangeService {
+    private propertyChanges = new BehaviorSubject<{ [key: string]: any }>({});
+    public propertyChanges$ = this.propertyChanges.asObservable();
+
+    private panelConfig = new BehaviorSubject<PropertyPanelConfig | null>(null);
+    public panelConfig$ = this.panelConfig.asObservable();
+
+    public updateProperty(key: string, value: any): void {
+        const currentChanges = this.propertyChanges.getValue();
+        currentChanges[key] = value;
+        this.propertyChanges.next(currentChanges);
+    }
+
+    public emitInitialValues(config: PropertyPanelConfig): void {
+        this.panelConfig.next(config);
+        Object.keys(config).forEach((key) => {
+            const defaultValue = config[key]?.control?.defaultValue;
+            if (defaultValue !== undefined && defaultValue !== null) {
+                this.updateProperty(key, defaultValue);
+            }
+        });
+    }
+
+    public setPanelConfig(config: PropertyPanelConfig | null): void {
+        this.panelConfig.next(config);
+    }
+
+    public clearPanelConfig(): void {
+        this.panelConfig.next(null);
+    }
+
+    public getProperty(key: string): any {
+        const changes = this.propertyChanges.getValue();
+        const config = this.panelConfig.getValue();
+        return changes[key] !== undefined ? changes[key] : config?.[key]?.control?.defaultValue;
+    }
+}
+

From 1f23f844fad95329e55badd77ad2702549498cee Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Fri, 11 Oct 2024 12:56:00 +0300
Subject: [PATCH 11/18] feat(property-panel): create service for event
 handling, use navdrawer for panel

---
 src/app/app.component.html                    |   8 +-
 src/app/app.component.scss                    |   4 +
 src/app/app.component.ts                      |   9 +-
 src/app/app.routes.ts                         |   5 +
 .../avatar-showcase.sample.html               |   4 +-
 .../avatar-showcase/avatar-showcase.sample.ts |  59 +++++-----
 .../badge-showcase/badge-showcase.sample.ts   |  20 ++--
 .../button-showcase.sample.html               |  73 +-----------
 .../button-showcase/button-showcase.sample.ts |  39 ++++++-
 .../buttonGroup-showcase.sample.html          |  49 ++++----
 .../buttonGroup-showcase.sample.ts            | 109 +++++++++++-------
 .../icon-button-showcase.sample.html          |  18 +++
 .../icon-button-showcase.sample.scss          |  21 ++++
 .../icon-button-showcase.sample.ts            |  51 ++++++++
 src/app/pageHeading/pageHeading.component.ts  |  12 +-
 src/app/pageHeading/pageHeading.styles.scss   |   6 +
 src/app/pageHeading/pageHeading.template.html |  18 ++-
 .../properties-panel.component.html           |   5 +-
 .../properties-panel.component.scss           |   8 ++
 .../properties-panel.component.ts             |   5 +-
 .../property-change.service.spec.ts           |   0
 .../property-change.service.ts                |  20 +++-
 src/styles/_app-layout.scss                   |   2 +-
 23 files changed, 331 insertions(+), 214 deletions(-)
 create mode 100644 src/app/icon-button-showcase/icon-button-showcase.sample.html
 create mode 100644 src/app/icon-button-showcase/icon-button-showcase.sample.scss
 create mode 100644 src/app/icon-button-showcase/icon-button-showcase.sample.ts
 rename src/app/{ => properties-panel}/property-change.service.spec.ts (100%)
 rename src/app/{ => properties-panel}/property-change.service.ts (65%)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index e629a1f8d2f..fc09efd6e8b 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -68,13 +68,15 @@
         </ng-template>
     </igx-nav-drawer>
 
-    <igx-nav-drawer #paneldrawer
+    <igx-nav-drawer
+        *ngIf="panelConfig"
+        #paneldrawer
         [pin]="true"
         position="right"
-        [isOpen]="!!panelConfig"
+        [isOpen]="panelConfig"
         id="paneldrawer">
 
-        <ng-template igxDrawer *ngIf="panelConfig">
+        <ng-template igxDrawer>
             <app-properties-panel [config]="panelConfig"></app-properties-panel>
         </ng-template>
 
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 2347fbdcaf7..271ac7a24fd 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,3 +1,7 @@
 .test {
     color: red;
 }
+
+#paneldrawer {
+    --igx-nav-drawer-size: 27rem;
+}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 79a8c2663b3..132728edde1 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -7,7 +7,7 @@ import { IgxIconComponent } from '../../projects/igniteui-angular/src/lib/icon/i
 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 './property-change.service';
+import { PropertyChangeService } from './properties-panel/property-change.service';
 
 @Component({
     selector: 'app-root',
@@ -764,6 +764,11 @@ export class AppComponent implements OnInit {
             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',
@@ -822,7 +827,7 @@ export class AppComponent implements OnInit {
 
         this.propertyChangeService.panelConfig$.subscribe(config => {
             this.panelConfig = config;
-         });
+        });
 
         router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
             for (const component of this.componentLinks) {
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 7ae1353e545..fe1787bb947 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -21,6 +21,7 @@ import { DialogShowcaseSampleComponent } from './dialog-showcase/dialog-showcase
 import { DragDropSampleComponent } from './drag-drop/drag-drop.sample';
 import { MaskSampleComponent } from './mask/mask.sample';
 import { IconSampleComponent } from './icon/icon.sample';
+import { IconButtonShowcaseSampleComponent } from './icon-button-showcase/icon-button-showcase.sample';
 import { InputSampleComponent } from './input/input.sample';
 import { InputsShowcaseSampleComponent } from './inputs-showcase/inputs-showcase.sample';
 import { InputGroupSampleComponent } from './input-group/input-group.sample';
@@ -314,6 +315,10 @@ export const appRoutes: Routes = [
         path: 'icon',
         component: IconSampleComponent
     },
+    {
+        path: 'icon-button-showcase',
+        component: IconButtonShowcaseSampleComponent
+    },
     {
         path: 'lazyIconModule',
         loadChildren: () => import('./icon/LazyModule/lazyIcon.module').then(m => m.LazyIconModule)
diff --git a/src/app/avatar-showcase/avatar-showcase.sample.html b/src/app/avatar-showcase/avatar-showcase.sample.html
index 4479e3b0f6e..0d4059f60fe 100644
--- a/src/app/avatar-showcase/avatar-showcase.sample.html
+++ b/src/app/avatar-showcase/avatar-showcase.sample.html
@@ -7,7 +7,7 @@ <h4 class="sample-title">Angular vs WebComponents Avatar</h4>
             <igx-avatar [src]="src" [shape]="shape"></igx-avatar>
 
             <p>Avatar with initials</p>
-            <igx-avatar [initials]="initials || 'RK'" [shape]="shape"></igx-avatar>
+            <igx-avatar [initials]="initials" [shape]="shape"></igx-avatar>
         </div>
 
         <div class="avatars">
@@ -16,7 +16,7 @@ <h4 class="sample-title">Angular vs WebComponents Avatar</h4>
             <igc-avatar [src]="src" [shape]="shape"></igc-avatar>
 
             <p>Avatar with initials</p>
-            <igc-avatar [initials]="initials || 'RK'" [shape]="shape"></igc-avatar>
+            <igc-avatar [initials]="initials" [shape]="shape"></igc-avatar>
         </div>
     </article>
 </div>
diff --git a/src/app/avatar-showcase/avatar-showcase.sample.ts b/src/app/avatar-showcase/avatar-showcase.sample.ts
index 0d46007b79b..491f27ebaa1 100644
--- a/src/app/avatar-showcase/avatar-showcase.sample.ts
+++ b/src/app/avatar-showcase/avatar-showcase.sample.ts
@@ -1,9 +1,9 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA, OnDestroy, OnInit } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit } from '@angular/core';
 import { IgxAvatarComponent } from 'igniteui-angular';
 import { CommonModule } from '@angular/common';
 import { defineComponents, IgcAvatarComponent } from "igniteui-webcomponents";
 import { PropertyPanelConfig, PropertiesPanelComponent } from '../properties-panel/properties-panel.component';
-import { PropertyChangeService } from '../property-change.service';
+import { PropertyChangeService } from '../properties-panel/property-change.service';
 
 defineComponents(IgcAvatarComponent);
 
@@ -16,33 +16,7 @@ defineComponents(IgcAvatarComponent);
     imports: [CommonModule, IgxAvatarComponent, PropertiesPanelComponent]
 })
 
-export class AvatarShowcaseSampleComponent implements OnInit, OnDestroy {
-    constructor(protected propertyChangeService: PropertyChangeService) { }
-
-    public ngOnInit(): void {
-        this.propertyChangeService.setPanelConfig(this.panelConfig);
-    }
-
-    public ngOnDestroy(): void {
-        this.propertyChangeService.clearPanelConfig();
-    }
-
-    public get src(): string {
-        return this.propertyChangeService.getProperty('src');
-    }
-
-    public get shape(): string {
-        return this.propertyChangeService.getProperty('shape');
-    }
-
-    public get initials(): string {
-        return this.propertyChangeService.getProperty('initials');
-    }
-
-    public get size(): string {
-        return this.propertyChangeService.getProperty('size');
-    }
-
+export class AvatarShowcaseSampleComponent implements OnInit {
     public panelConfig: PropertyPanelConfig = {
         size: {
             control: {
@@ -55,7 +29,7 @@ export class AvatarShowcaseSampleComponent implements OnInit, OnDestroy {
             control: {
                 type: 'radio-inline',
                 options: ['circle', 'rounded', 'square'],
-                defaultValue: 'circle'
+                defaultValue: 'square'
             }
         },
         src: {
@@ -67,8 +41,31 @@ export class AvatarShowcaseSampleComponent implements OnInit, OnDestroy {
         },
         initials: {
             control: {
-                type: 'text'
+                type: 'text',
+                defaultValue: 'RK'
             }
         }
     }
+
+    constructor(protected propertyChangeService: PropertyChangeService) {}
+
+    public ngOnInit() {
+        this.propertyChangeService.setPanelConfig(this.panelConfig);
+    }
+
+    protected get src() {
+        return this.propertyChangeService.getProperty('src');
+    }
+
+    protected get shape() {
+        return this.propertyChangeService.getProperty('shape');
+    }
+
+    protected get initials() {
+        return this.propertyChangeService.getProperty('initials');
+    }
+
+    protected get size() {
+        return this.propertyChangeService.getProperty('size');
+    }
 }
diff --git a/src/app/badge-showcase/badge-showcase.sample.ts b/src/app/badge-showcase/badge-showcase.sample.ts
index fcc3b587bac..2f57f5fd9bd 100644
--- a/src/app/badge-showcase/badge-showcase.sample.ts
+++ b/src/app/badge-showcase/badge-showcase.sample.ts
@@ -1,8 +1,8 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA, OnDestroy, OnInit } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit } from '@angular/core';
 import { IgxBadgeComponent } from 'igniteui-angular';
 import { defineComponents, IgcBadgeComponent } from "igniteui-webcomponents";
 import { PropertyPanelConfig } from '../properties-panel/properties-panel.component';
-import { PropertyChangeService } from '../property-change.service';
+import { PropertyChangeService } from '../properties-panel/property-change.service';
 
 defineComponents(IgcBadgeComponent);
 
@@ -15,7 +15,7 @@ defineComponents(IgcBadgeComponent);
     imports: [IgxBadgeComponent]
 })
 
-export class BadgeShowcaseSampleComponent implements OnInit, OnDestroy {
+export class BadgeShowcaseSampleComponent implements OnInit {
     public panelConfig: PropertyPanelConfig = {
         shape: {
             control: {
@@ -32,16 +32,12 @@ export class BadgeShowcaseSampleComponent implements OnInit, OnDestroy {
         }
     };
 
-    constructor(protected propertyChangeService: PropertyChangeService) { }
+    constructor(protected propertyChangeService: PropertyChangeService) {}
 
-    public ngOnInit(): void {
+    public ngOnInit() {
         this.propertyChangeService.setPanelConfig(this.panelConfig);
     }
 
-    public ngOnDestroy(): void {
-        this.propertyChangeService.clearPanelConfig();
-    }
-
     private variantMapping: { [key: string]: { angular: string; webComponent: string } } = {
         default: { angular: 'default', webComponent: 'primary' },
         error: { angular: 'error', webComponent: 'danger' },
@@ -50,17 +46,17 @@ export class BadgeShowcaseSampleComponent implements OnInit, OnDestroy {
         warning: { angular: 'warning', webComponent: 'warning' },
     };
 
-    public get angularVariant(): string {
+    public get angularVariant() {
         const variant = this.propertyChangeService.getProperty('variant') || 'default';
         return this.variantMapping[variant]?.angular || 'default';
     }
 
-    public get webComponentVariant(): string {
+    public get webComponentVariant() {
         const variant = this.propertyChangeService.getProperty('variant') || 'default';
         return this.variantMapping[variant]?.webComponent || 'primary';
     }
 
-    public get shape(): string {
+    public get shape() {
         return this.propertyChangeService.getProperty('shape');
     }
 }
diff --git a/src/app/button-showcase/button-showcase.sample.html b/src/app/button-showcase/button-showcase.sample.html
index 13b21f22e48..632959155f3 100644
--- a/src/app/button-showcase/button-showcase.sample.html
+++ b/src/app/button-showcase/button-showcase.sample.html
@@ -1,80 +1,15 @@
 <div class="columns-container">
     <article class="title">
-        <h4 class="sample-title">Angular Buttons</h4>
-        <h4 class="sample-title">WC Buttons</h4>
+        <h4 class="sample-title">Angular Button</h4>
+        <h4 class="sample-title">WC Button</h4>
     </article>
 
     <div class="buttons-sample">
         <div class="button-sample">
-            <button igxButton="flat">Flat</button>
+            <button [igxButton]="variant" [disabled]="disabled">Button</button>
         </div>
         <div class="button-sample">
-            <igc-button variant="flat"> Flat </igc-button>
-        </div>
-    </div>
-
-    <div class="buttons-sample">
-        <div class="button-sample">
-            <button igxButton="contained">Contained</button>
-        </div>
-
-        <div class="button-sample">
-            <igc-button variant="contained"> Contained </igc-button>
-        </div>
-    </div>
-
-    <div class="buttons-sample">
-        <div class="button-sample">
-            <button igxButton="outlined">Outlined</button>
-        </div>
-
-        <div class="button-sample">
-            <igc-button variant="outlined"> Outlined </igc-button>
-        </div>
-    </div>
-
-    <div class="buttons-sample">
-        <div class="button-sample">
-            <button igxButton="fab">
-                <igx-icon>favorite</igx-icon>
-            </button>
-        </div>
-
-        <div class="button-sample">
-            <igc-button variant="fab"><igc-icon name="favorite"></igc-icon></igc-button>
-        </div>
-    </div>
-
-    <div class="buttons-sample">
-        <div class="button-sample">
-            <button igxIconButton="flat">
-                <igx-icon family="fa-solid" name="fa-coffee"></igx-icon>
-            </button>
-        </div>
-        <div class="button-sample">
-            <igc-icon-button variant="flat">
-                <igx-icon family="fa-solid" name="fa-coffee"></igx-icon>
-            </igc-icon-button>
-        </div>
-        <div class="button-sample">
-            <button igxIconButton>
-                <igx-icon>favorite</igx-icon>
-            </button>
-        </div>
-        <div class="button-sample">
-            <igc-icon-button>
-                <igx-icon>favorite</igx-icon>
-            </igc-icon-button>
-        </div>
-        <div class="button-sample">
-            <button igxIconButton="outlined">
-                <igx-icon>cloud</igx-icon>
-            </button>
-        </div>
-        <div class="button-sample">
-            <igc-icon-button variant="outlined">
-                <igx-icon>cloud</igx-icon>
-            </igc-icon-button>
+            <igc-button [variant]="variant" [disabled]="disabled">Button</igc-button>
         </div>
     </div>
 </div>
diff --git a/src/app/button-showcase/button-showcase.sample.ts b/src/app/button-showcase/button-showcase.sample.ts
index a085c6bcfb8..3952947fad9 100644
--- a/src/app/button-showcase/button-showcase.sample.ts
+++ b/src/app/button-showcase/button-showcase.sample.ts
@@ -1,7 +1,8 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewEncapsulation } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewEncapsulation, OnInit } from '@angular/core';
 import { IgxButtonDirective, IgxButtonGroupComponent, IgxIconButtonDirective, IgxIconComponent, IgxRippleDirective } from 'igniteui-angular';
-import { SizeSelectorComponent } from '../size-selector/size-selector.component';
 import { defineComponents, IgcButtonComponent, IgcIconButtonComponent, registerIconFromText} from "igniteui-webcomponents";
+import { PropertyPanelConfig } from '../properties-panel/properties-panel.component';
+import { PropertyChangeService } from '../properties-panel/property-change.service';
 
 defineComponents(IgcButtonComponent, IgcIconButtonComponent);
 
@@ -15,6 +16,36 @@ registerIconFromText("favorite", favorite );
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
     encapsulation: ViewEncapsulation.None,
     standalone: true,
-    imports: [IgxButtonDirective, IgxIconComponent, IgxButtonGroupComponent, IgxIconButtonDirective, IgxRippleDirective, SizeSelectorComponent]
+    imports: [IgxButtonDirective, IgxIconComponent, IgxButtonGroupComponent, IgxIconButtonDirective, IgxRippleDirective]
 })
-export class ButtonShowcaseSampleComponent {}
+export class ButtonShowcaseSampleComponent implements OnInit {
+    public panelConfig: PropertyPanelConfig = {
+        variant: {
+            control: {
+                type: "select",
+                options: ['flat', 'contained', 'outlined', 'fab'],
+                defaultValue: 'flat'
+            }
+        },
+        disabled: {
+            control: {
+                type: "boolean",
+                defaultValue: false
+            }
+        }
+    }
+
+    constructor(protected propertyChangeService: PropertyChangeService) {}
+
+    public ngOnInit(): void {
+        this.propertyChangeService.setPanelConfig(this.panelConfig);
+    }
+
+    protected get variant() {
+        return this.propertyChangeService.getProperty('variant');
+    }
+
+    protected get disabled() {
+        return this.propertyChangeService.getProperty('disabled');
+    }
+}
diff --git a/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.html b/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.html
index e185ed6cc4e..6b63f00971b 100644
--- a/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.html
+++ b/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.html
@@ -1,44 +1,35 @@
 <section class="sample-content">
     <article class="sample-column">
         <h4 class="sample-title">Angular ButtonGroup</h4>
-        <igx-buttongroup
-            [values]="alignOptions"
-        ></igx-buttongroup>
-
-        <br/>
 
         <igx-buttongroup
-            [selectionMode]="'multi'"
-            [values]="cities"
-            alignment="vertical"
+            [selectionMode]="angularSelection"
+            [alignment]="alignment"
+            [disabled]="disabled"
         >
+            <button
+                    igxButton
+                    *ngFor="let city of cities"
+                    [selected]="city.selected"
+                >
+                    {{ city.label }}
+            </button>
         </igx-buttongroup>
     </article>
 
     <article class="sample-column">
         <h4 class="sample-title">WC ButtonGroup</h4>
-        <igc-button-group>
-            <igc-toggle-button value="align_left">
-                <igx-icon name="format_align_left"></igx-icon>
-            </igc-toggle-button>
-            <igc-toggle-button value="align_center">
-                <igx-icon name="format_align_center"></igx-icon>
-            </igc-toggle-button>
-            <igc-toggle-button value="align_right">
-                <igx-icon name="format_align_right"></igx-icon>
-            </igc-toggle-button>
-            <igc-toggle-button value="align_justify" selected>
-                <igx-icon name="format_align_justify"></igx-icon>
-            </igc-toggle-button>
-        </igc-button-group>
 
-        <br/>
-
-        <igc-button-group alignment="vertical" selection="multiple">
-            <igc-toggle-button>Sofia</igc-toggle-button>
-            <igc-toggle-button>London</igc-toggle-button>
-            <igc-toggle-button>New York</igc-toggle-button>
-            <igc-toggle-button disabled="true">Tokyo</igc-toggle-button>
+        <igc-button-group
+        [selection]="webComponentSelection"
+        [alignment]="alignment"
+        [disabled]="disabled">
+            <igc-toggle-button *ngFor="let city of cities"
+                [disabled]="city.disabled"
+                [value]="city.label"
+                [selected]="city.selected">
+                {{ city.label }}
+            </igc-toggle-button>
         </igc-button-group>
     </article>
 </section>
diff --git a/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.ts b/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.ts
index fe853c85d1d..0f8bbd0e8e3 100644
--- a/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.ts
+++ b/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.ts
@@ -1,7 +1,9 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, ViewChild } from '@angular/core';
 import { NgFor } from '@angular/common';
 import { ButtonGroupAlignment, IgxButtonDirective, IgxButtonGroupComponent, IgxIconComponent, IgxLayoutDirective } from 'igniteui-angular';
-import { defineComponents, IgcButtonGroupComponent, IgcToggleButtonComponent} from "igniteui-webcomponents";
+import { defineComponents, IgcButtonGroupComponent, IgcToggleButtonComponent } from "igniteui-webcomponents";
+import { PropertyPanelConfig } from '../properties-panel/properties-panel.component';
+import { PropertyChangeService } from '../properties-panel/property-change.service';
 
 defineComponents(IgcButtonGroupComponent, IgcToggleButtonComponent);
 interface IButton {
@@ -46,63 +48,82 @@ class Button {
 })
 
 export class ButtonGroupShowcaseSampleComponent implements OnInit {
-    @ViewChild('programmatic')
-    private bg: IgxButtonGroupComponent;
-
-    public alignment: ButtonGroupAlignment = ButtonGroupAlignment.vertical;
-    public alignOptions: Button[];
-    public cities: Button[];
-
-    constructor() { }
+    public cities = [];
 
     public ngOnInit(): void {
-
-        this.alignOptions = [
-            new Button({
-                disabled: false,
-                icon: 'format_align_left',
-                selected: false
-            }),
-            new Button({
-                disabled: false,
-                icon: 'format_align_center',
-                selected: true
-            }),
-            new Button({
-                disabled: false,
-                icon: 'format_align_right',
-                selected: false
-            }),
-            new Button({
-                disabled: false,
-                icon: 'format_align_justify',
-                selected: true
-            })
-        ];
-
-
         this.cities = [
-            new Button({
+            {
                 disabled: false,
                 label: 'Sofia',
-                selected: false,
+                selected: true,
                 togglable: false
-            }),
-            new Button({
+            },
+            {
                 disabled: false,
                 label: 'London',
                 selected: false
-            }),
-            new Button({
+            },
+            {
                 disabled: false,
                 label: 'New York',
                 selected: false
-            }),
-            new Button({
+            },
+            {
                 disabled: true,
                 label: 'Tokyo',
                 selected: false
-            })
+            }
         ];
+
+        this.propertyChangeService.setPanelConfig(this.panelConfig);
     }
-}
\ No newline at end of file
+
+    public panelConfig: PropertyPanelConfig = {
+        disabled: {
+            control: {
+                type: 'boolean',
+                defaultValue: false
+            }
+        },
+        alignment: {
+            control: {
+                type: 'button-group',
+                options: ['horizontal', 'vertical'],
+                defaultValue: 'horizontal'
+            }
+        },
+        selection: {
+            control: {
+                type: 'select',
+                options: ['single', 'single-required', 'multiple'],
+                defaultValue: 'single'
+            }
+        }
+    }
+
+    constructor(protected propertyChangeService: PropertyChangeService) {}
+
+    private selectionMapping: { [key: string]: { angular: string; webComponent: string } } = {
+        multiple: { angular: 'multi', webComponent: 'multiple' },
+        singleRequired: { angular: 'singleRequired', webComponent: 'single-required' },
+
+    };
+
+    protected get angularSelection() {
+        const selection = this.propertyChangeService.getProperty('selection') || 'multi';
+        return this.selectionMapping[selection]?.angular || selection;
+    }
+
+    protected get webComponentSelection() {
+        const selection = this.propertyChangeService.getProperty('selection') || 'multiple';
+        return this.selectionMapping[selection]?.webComponent || selection;
+    }
+
+    protected get disabled() {
+        return this.propertyChangeService.getProperty('disabled')
+    }
+
+    protected get alignment() {
+        return this.propertyChangeService.getProperty('alignment')
+    }
+}
diff --git a/src/app/icon-button-showcase/icon-button-showcase.sample.html b/src/app/icon-button-showcase/icon-button-showcase.sample.html
new file mode 100644
index 00000000000..4a1292cf095
--- /dev/null
+++ b/src/app/icon-button-showcase/icon-button-showcase.sample.html
@@ -0,0 +1,18 @@
+<div class="columns-container">
+    <article class="title">
+        <h4 class="sample-title">Angular Icon Button</h4>
+        <h4 class="sample-title">WC Icon Button</h4>
+    </article>
+
+    <div class="buttons-sample">
+        <div class="button-sample">
+            <button [igxIconButton]="variant" [disabled]="disabled">
+                <igx-icon>favorite</igx-icon>
+            </button>
+        </div>
+        <div class="button-sample">
+            <igc-icon-button name="favorite" [variant]="variant" [disabled]="disabled">
+            </igc-icon-button>
+        </div>
+    </div>
+</div>
diff --git a/src/app/icon-button-showcase/icon-button-showcase.sample.scss b/src/app/icon-button-showcase/icon-button-showcase.sample.scss
new file mode 100644
index 00000000000..e0ec01a5c76
--- /dev/null
+++ b/src/app/icon-button-showcase/icon-button-showcase.sample.scss
@@ -0,0 +1,21 @@
+.columns-container{
+    margin: 24px 16px;
+}
+
+.title {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    justify-items: center;
+}
+
+.buttons-sample {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-auto-rows: minmax(80px, auto);
+    align-items: center;
+}
+
+.button-sample {
+    justify-self: center;
+}
+
diff --git a/src/app/icon-button-showcase/icon-button-showcase.sample.ts b/src/app/icon-button-showcase/icon-button-showcase.sample.ts
new file mode 100644
index 00000000000..6d8f5141196
--- /dev/null
+++ b/src/app/icon-button-showcase/icon-button-showcase.sample.ts
@@ -0,0 +1,51 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewEncapsulation, OnInit } from '@angular/core';
+import { IgxIconButtonDirective, IgxIconComponent, IgxRippleDirective } from 'igniteui-angular';
+import { defineComponents, IgcIconButtonComponent, registerIconFromText} from "igniteui-webcomponents";
+import { PropertyPanelConfig } from '../properties-panel/properties-panel.component';
+import { PropertyChangeService } from '../properties-panel/property-change.service';
+
+defineComponents( IgcIconButtonComponent);
+
+const favorite = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>'
+registerIconFromText("favorite", favorite );
+
+@Component({
+    selector: 'app-icon-button-showcase-sample',
+    styleUrls: ['icon-button-showcase.sample.scss'],
+    templateUrl: 'icon-button-showcase.sample.html',
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    encapsulation: ViewEncapsulation.None,
+    standalone: true,
+    imports: [IgxIconComponent, IgxIconButtonDirective, IgxRippleDirective]
+})
+export class IconButtonShowcaseSampleComponent implements OnInit {
+    public panelConfig: PropertyPanelConfig = {
+        variant: {
+            control: {
+                type: "button-group",
+                options: ['flat', 'contained', 'outlined'],
+                defaultValue: 'flat'
+            }
+        },
+        disabled: {
+            control: {
+                type: "boolean",
+                defaultValue: false
+            }
+        }
+    }
+
+    constructor(protected propertyChangeService: PropertyChangeService) {}
+
+    public ngOnInit() {
+        this.propertyChangeService.setPanelConfig(this.panelConfig);
+    }
+
+    protected get variant() {
+        return this.propertyChangeService.getProperty('variant');
+    }
+
+    protected get disabled() {
+        return this.propertyChangeService.getProperty('disabled');
+    }
+}
diff --git a/src/app/pageHeading/pageHeading.component.ts b/src/app/pageHeading/pageHeading.component.ts
index 316b48e0056..c5270b3f280 100644
--- a/src/app/pageHeading/pageHeading.component.ts
+++ b/src/app/pageHeading/pageHeading.component.ts
@@ -1,15 +1,23 @@
 import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { IgxButtonDirective, IgxIconButtonDirective, IgxIconComponent, IgxRippleDirective, IgxToggleActionDirective } from 'igniteui-angular';
-
+import { PropertyChangeService } from '../properties-panel/property-change.service';
 
 @Component({
     selector: 'app-page-header',
     styleUrls: ['./pageHeading.styles.scss'],
     templateUrl: './pageHeading.template.html',
     standalone: true,
-    imports: [IgxButtonDirective, IgxRippleDirective, IgxToggleActionDirective, IgxIconComponent, IgxIconButtonDirective]
+    imports: [IgxButtonDirective, IgxRippleDirective, IgxToggleActionDirective, IgxIconComponent, IgxIconButtonDirective, CommonModule]
 })
 export class PageHeaderComponent {
     @Input()
     public title: string;
+    public panelConfig: any;
+
+    constructor(protected propertyChangeService: PropertyChangeService) {
+        this.propertyChangeService.panelConfig$.subscribe(config => {
+            this.panelConfig = config;
+        });
+    }
 }
diff --git a/src/app/pageHeading/pageHeading.styles.scss b/src/app/pageHeading/pageHeading.styles.scss
index 0a84f698292..76b0b2fcc7d 100644
--- a/src/app/pageHeading/pageHeading.styles.scss
+++ b/src/app/pageHeading/pageHeading.styles.scss
@@ -24,11 +24,17 @@
 .sample-header {
     display: flex;
     align-items: center;
+    justify-content: space-between;
     height: rem(90px);
     padding: 0 rem(16px);
     background: hsla(var(--ig-primary-500));
     overflow: hidden;
 
+    .wrapper {
+        display: flex;
+        align-items: center;
+    }
+
     .title {
         color: hsla(var(--ig-primary-500-contrast));
         margin: 0;
diff --git a/src/app/pageHeading/pageHeading.template.html b/src/app/pageHeading/pageHeading.template.html
index 5d5df185647..f7b0e004c9e 100644
--- a/src/app/pageHeading/pageHeading.template.html
+++ b/src/app/pageHeading/pageHeading.template.html
@@ -1,12 +1,22 @@
 <div class="sample-header">
-    <button igxIconButton="flat"
+    <div class="wrapper">
+        <button igxIconButton="flat"
             igxRipple
             [igxRippleCentered]="true"
             igxToggleAction="navdrawer"
             class="hamburger">
         <igx-icon>menu</igx-icon>
+        </button>
+        <h5 class="title">
+            {{ title }}
+        </h5>
+    </div>
+    <button *ngIf="panelConfig"
+            igxIconButton="flat"
+            igxRipple
+            [igxRippleCentered]="true"
+            igxToggleAction="paneldrawer"
+            class="toggle-properties-panel">
+        <igx-icon>settings</igx-icon>
     </button>
-    <h5 class="title">
-        {{ title }}
-    </h5>
 </div>
diff --git a/src/app/properties-panel/properties-panel.component.html b/src/app/properties-panel/properties-panel.component.html
index bf03c7ceb41..d3a9970d6e9 100644
--- a/src/app/properties-panel/properties-panel.component.html
+++ b/src/app/properties-panel/properties-panel.component.html
@@ -1,4 +1,5 @@
 <div id="properties-panel" [formGroup]="form">
+    <h5 class="panel-title">Properties Panel</h5>
     <div *ngFor="let key of getConfigKeys()">
         @if (getControlType(key) !== 'boolean') {
         <label>
@@ -82,8 +83,8 @@
         <!-- Select Dropdown -->
         @if (getControlType(key) === 'select') {
         <igx-select [placeholder]="'Pick One'" [type]="'border'" [formControlName]="key">
-            <igx-select-item *ngFor="let option of getControlOptions(key)" [value]="option">{{ option
-                }}</igx-select-item>
+            <igx-select-item *ngFor="let option of getControlOptions(key)" [value]="option">
+                {{ option }}</igx-select-item>
         </igx-select>
         }
 
diff --git a/src/app/properties-panel/properties-panel.component.scss b/src/app/properties-panel/properties-panel.component.scss
index 45d5e804809..fca6ac1bf5e 100644
--- a/src/app/properties-panel/properties-panel.component.scss
+++ b/src/app/properties-panel/properties-panel.component.scss
@@ -4,6 +4,10 @@
     gap: 10px;
 }
 
+#properties-panel {
+    padding: .5rem;
+}
+
 igx-input-group {
     --ig-size: var(--ig-size-small);
 }
@@ -17,3 +21,7 @@ igx-input-group {
         margin: 0;
     }
 }
+
+.panel-title {
+    margin-bottom: 2rem;
+}
diff --git a/src/app/properties-panel/properties-panel.component.ts b/src/app/properties-panel/properties-panel.component.ts
index f77e2c53fc4..de26700d42f 100644
--- a/src/app/properties-panel/properties-panel.component.ts
+++ b/src/app/properties-panel/properties-panel.component.ts
@@ -1,7 +1,7 @@
-import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
-import { PropertyChangeService } from '../property-change.service';
+import { PropertyChangeService } from './property-change.service';
 import {
     IgxButtonGroupComponent,
     IgxButtonDirective,
@@ -76,7 +76,6 @@ export type PropertyPanelConfig = {
 
 export class PropertiesPanelComponent implements OnInit {
     @Input() public config!: PropertyPanelConfig;
-    @Output() public propertyChanged: EventEmitter<{ key: string; value: any }> = new EventEmitter<{ key: string; value: any }>();
 
     protected form!: FormGroup;
     protected radioAlignment = RadioGroupAlignment.vertical;
diff --git a/src/app/property-change.service.spec.ts b/src/app/properties-panel/property-change.service.spec.ts
similarity index 100%
rename from src/app/property-change.service.spec.ts
rename to src/app/properties-panel/property-change.service.spec.ts
diff --git a/src/app/property-change.service.ts b/src/app/properties-panel/property-change.service.ts
similarity index 65%
rename from src/app/property-change.service.ts
rename to src/app/properties-panel/property-change.service.ts
index 474bf7e6bf8..f11c721d567 100644
--- a/src/app/property-change.service.ts
+++ b/src/app/properties-panel/property-change.service.ts
@@ -1,15 +1,16 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
-import { PropertyPanelConfig } from './properties-panel/properties-panel.component';
+import { PropertyPanelConfig } from './properties-panel.component';
+import { NavigationEnd, Router } from '@angular/router';
 
 @Injectable({
     providedIn: 'root',
 })
 export class PropertyChangeService {
-    private propertyChanges = new BehaviorSubject<{ [key: string]: any }>({});
+    private propertyChanges = new BehaviorSubject<PropertyPanelConfig>({});
     public propertyChanges$ = this.propertyChanges.asObservable();
 
-    private panelConfig = new BehaviorSubject<PropertyPanelConfig | null>(null);
+    public panelConfig = new BehaviorSubject<PropertyPanelConfig | null>(null);
     public panelConfig$ = this.panelConfig.asObservable();
 
     public updateProperty(key: string, value: any): void {
@@ -28,7 +29,7 @@ export class PropertyChangeService {
         });
     }
 
-    public setPanelConfig(config: PropertyPanelConfig | null): void {
+    public setPanelConfig(config: PropertyPanelConfig): void {
         this.panelConfig.next(config);
     }
 
@@ -38,8 +39,15 @@ export class PropertyChangeService {
 
     public getProperty(key: string): any {
         const changes = this.propertyChanges.getValue();
-        const config = this.panelConfig.getValue();
-        return changes[key] !== undefined ? changes[key] : config?.[key]?.control?.defaultValue;
+        return changes[key];
+    }
+
+    constructor(private router: Router) {
+        this.router.events.subscribe(event => {
+            if (event instanceof NavigationEnd) {
+                this.clearPanelConfig();
+            }
+        });
     }
 }
 
diff --git a/src/styles/_app-layout.scss b/src/styles/_app-layout.scss
index b76a329fc73..3e5a5abba3d 100644
--- a/src/styles/_app-layout.scss
+++ b/src/styles/_app-layout.scss
@@ -47,7 +47,7 @@
 
     .content {
         position: relative;
-        overflow-y: scroll;
+        overflow-y: auto;
         perspective: 5000px;
         padding-top: 90px;
         flex: 1;

From 3a0411ffb0934b192a285b5c4d33525082db1d52 Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Wed, 16 Oct 2024 09:59:14 +0300
Subject: [PATCH 12/18] gc -m "feat(property-panel): enable adding custom
 controls"

---
 src/app/app.component.html                    |   1 -
 src/app/app.component.ts                      |   5 +
 src/app/app.routes.ts                         |   5 +
 .../avatar-showcase/avatar-showcase.sample.ts |   4 +-
 .../buttonGroup-showcase.sample.html          |  27 +-
 .../buttonGroup-showcase.sample.ts            |  48 +--
 .../calendar-showcase.sample.html             |  81 +++++
 .../calendar-showcase.sample.scss             |  34 ++
 .../calendar-showcase.sample.ts               | 297 ++++++++++++++++++
 .../properties-panel.component.html           |   8 +-
 .../properties-panel.component.scss           |  31 +-
 .../properties-panel.component.ts             |   7 +-
 .../property-change.service.ts                |  32 +-
 13 files changed, 494 insertions(+), 86 deletions(-)
 create mode 100644 src/app/calendar-showcase/calendar-showcase.sample.html
 create mode 100644 src/app/calendar-showcase/calendar-showcase.sample.scss
 create mode 100644 src/app/calendar-showcase/calendar-showcase.sample.ts

diff --git a/src/app/app.component.html b/src/app/app.component.html
index fc09efd6e8b..7b36cae85b2 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -79,7 +79,6 @@
         <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">
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 132728edde1..b0507f90365 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -729,6 +729,11 @@ export class AppComponent implements OnInit {
             icon: 'radio_button_unchecked',
             name: 'Button Group'
         },
+        {
+            link: '/calendar-showcase',
+            icon: 'radio_button_unchecked',
+            name: 'Calendar'
+        },
         {
             link: '/card-showcase',
             icon: 'radio_button_unchecked',
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index fe1787bb947..9a458437e0d 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -7,6 +7,7 @@ import { BadgeShowcaseSampleComponent } from './badge-showcase/badge-showcase.sa
 import { ButtonSampleComponent } from './button/button.sample';
 import { ButtonShowcaseSampleComponent } from './button-showcase/button-showcase.sample';
 import { CalendarSampleComponent } from './calendar/calendar.sample';
+import { CalendarShowcaseSampleComponent } from './calendar-showcase/calendar-showcase.sample';
 import { CardSampleComponent } from './card/card.sample';
 import { CardShowcaseSampleComponent } from './card-showcase/card-showcase.sample';
 import { CarouselSampleComponent } from './carousel/carousel.sample';
@@ -227,6 +228,10 @@ export const appRoutes: Routes = [
         path: 'calendar',
         component: CalendarSampleComponent
     },
+    {
+        path: 'calendar-showcase',
+        component: CalendarShowcaseSampleComponent
+    },
     {
         path: 'calendar-views',
         component: CalendarViewsSampleComponent
diff --git a/src/app/avatar-showcase/avatar-showcase.sample.ts b/src/app/avatar-showcase/avatar-showcase.sample.ts
index 491f27ebaa1..78837ff6670 100644
--- a/src/app/avatar-showcase/avatar-showcase.sample.ts
+++ b/src/app/avatar-showcase/avatar-showcase.sample.ts
@@ -2,7 +2,7 @@ import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit } from '@angular/core';
 import { IgxAvatarComponent } from 'igniteui-angular';
 import { CommonModule } from '@angular/common';
 import { defineComponents, IgcAvatarComponent } from "igniteui-webcomponents";
-import { PropertyPanelConfig, PropertiesPanelComponent } from '../properties-panel/properties-panel.component';
+import { PropertyPanelConfig } from '../properties-panel/properties-panel.component';
 import { PropertyChangeService } from '../properties-panel/property-change.service';
 
 defineComponents(IgcAvatarComponent);
@@ -13,7 +13,7 @@ defineComponents(IgcAvatarComponent);
     templateUrl: `avatar-showcase.sample.html`,
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
     standalone: true,
-    imports: [CommonModule, IgxAvatarComponent, PropertiesPanelComponent]
+    imports: [CommonModule, IgxAvatarComponent]
 })
 
 export class AvatarShowcaseSampleComponent implements OnInit {
diff --git a/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.html b/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.html
index 6b63f00971b..7cf0b89e9bc 100644
--- a/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.html
+++ b/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.html
@@ -1,33 +1,30 @@
 <section class="sample-content">
     <article class="sample-column">
         <h4 class="sample-title">Angular ButtonGroup</h4>
-
         <igx-buttongroup
-            [selectionMode]="angularSelection"
-            [alignment]="alignment"
-            [disabled]="disabled"
-        >
+        [selectionMode]="angularSelection"
+        [alignment]="alignment"
+        [disabled]="disabled">
             <button
-                    igxButton
-                    *ngFor="let city of cities"
-                    [selected]="city.selected"
-                >
-                    {{ city.label }}
+            igxButton
+            *ngFor="let city of cities"
+            [selected]="city.selected">
+                {{ city.label }}
             </button>
         </igx-buttongroup>
     </article>
 
     <article class="sample-column">
         <h4 class="sample-title">WC ButtonGroup</h4>
-
         <igc-button-group
         [selection]="webComponentSelection"
         [alignment]="alignment"
         [disabled]="disabled">
-            <igc-toggle-button *ngFor="let city of cities"
-                [disabled]="city.disabled"
-                [value]="city.label"
-                [selected]="city.selected">
+            <igc-toggle-button
+            *ngFor="let city of cities"
+            [disabled]="city.disabled"
+            [value]="city.label"
+            [selected]="city.selected">
                 {{ city.label }}
             </igc-toggle-button>
         </igc-button-group>
diff --git a/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.ts b/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.ts
index 0f8bbd0e8e3..07b5e7bbb34 100644
--- a/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.ts
+++ b/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.ts
@@ -1,43 +1,11 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, ViewChild } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit } from '@angular/core';
 import { NgFor } from '@angular/common';
-import { ButtonGroupAlignment, IgxButtonDirective, IgxButtonGroupComponent, IgxIconComponent, IgxLayoutDirective } from 'igniteui-angular';
+import { IgxButtonDirective, IgxButtonGroupComponent, IgxIconComponent, IgxLayoutDirective } from 'igniteui-angular';
 import { defineComponents, IgcButtonGroupComponent, IgcToggleButtonComponent } from "igniteui-webcomponents";
 import { PropertyPanelConfig } from '../properties-panel/properties-panel.component';
 import { PropertyChangeService } from '../properties-panel/property-change.service';
 
 defineComponents(IgcButtonGroupComponent, IgcToggleButtonComponent);
-interface IButton {
-    ripple?: string;
-    label?: string;
-    disabled?: boolean;
-    togglable?: boolean;
-    selected?: boolean;
-    color?: string;
-    bgcolor?: string;
-    icon?: string;
-}
-
-class Button {
-    public ripple: string;
-    public label: string;
-    public disabled: boolean;
-    public togglable: boolean;
-    public selected: boolean;
-    public color: string;
-    public bgcolor: string;
-    public icon: string;
-
-    constructor(obj?: IButton) {
-        this.ripple = obj.ripple || 'gray';
-        this.label = obj.label;
-        this.selected = obj.selected || false;
-        this.togglable = obj.togglable;
-        this.disabled = obj.disabled || false;
-        this.color = obj.color;
-        this.bgcolor = obj.bgcolor;
-        this.icon = obj.icon;
-    }
-}
 
 @Component({
     selector: 'app-buttongroup-showcase-sample',
@@ -79,12 +47,6 @@ export class ButtonGroupShowcaseSampleComponent implements OnInit {
     }
 
     public panelConfig: PropertyPanelConfig = {
-        disabled: {
-            control: {
-                type: 'boolean',
-                defaultValue: false
-            }
-        },
         alignment: {
             control: {
                 type: 'button-group',
@@ -98,6 +60,12 @@ export class ButtonGroupShowcaseSampleComponent implements OnInit {
                 options: ['single', 'single-required', 'multiple'],
                 defaultValue: 'single'
             }
+        },
+        disabled: {
+            control: {
+                type: 'boolean',
+                defaultValue: false
+            }
         }
     }
 
diff --git a/src/app/calendar-showcase/calendar-showcase.sample.html b/src/app/calendar-showcase/calendar-showcase.sample.html
new file mode 100644
index 00000000000..980e02a1c61
--- /dev/null
+++ b/src/app/calendar-showcase/calendar-showcase.sample.html
@@ -0,0 +1,81 @@
+<div class="preview sample-min-width">
+    <div class="preview__sample">
+        <div class="calendar-wrapper">
+            <strong>Angular Calendar</strong>
+            <igx-calendar
+                #calendar
+                [selection]="selectionAngular"
+                [locale]="propertyChangeService.getProperty('locale')"
+                [hideOutsideDays]="hideOutsideDays"
+                [monthsViewNumber]="monthsViewNumber"
+                [weekStart]="weekStartAngular"
+                [headerOrientation]="headerOrientation"
+                [orientation]="viewOrientation"
+                [showWeekNumbers]="showWeekNumbers"
+                [hasHeader]="!hideHeader"
+                [formatOptions]="formatOptions"
+                [disabledDates]="disabledDates"
+                [specialDates]="specialDates"
+                (selected)="onSelection($event)"
+                (viewDateChanged)="viewDateChanged($event)"
+                (activeViewChanged)="activeViewChanged($event)">
+            >
+            </igx-calendar>
+        </div>
+
+        <div class="calendar-wrapper">
+            <strong>WC Calendar</strong>
+            <igc-calendar
+                [locale]="locale"
+                [visibleMonths]="monthsViewNumber"
+                [showWeekNumbers]="showWeekNumbers"
+                [selection]="selectionWC"
+                [hideHeader]="hideHeader"
+                [hideOutsideDays]="hideOutsideDays"
+                [headerOrientation]="headerOrientation"
+                [orientation]="viewOrientation"
+                [weekStart]="weekStartWC"
+                [formatOptions]="formatOptions"
+                [disabledDates]="disabledDates"
+                [specialDates]="specialDates"
+            >
+            </igc-calendar>
+        </div>
+    </div>
+
+    <ng-template #customControls>
+        <div class="custom-controls">
+            <label>Special Dates</label>
+            <igx-date-range-picker
+                mode="dialog"
+                [(ngModel)]="specialRange"
+            ></igx-date-range-picker>
+
+            <label>Weekday format</label>
+            <igx-buttongroup selectionMode="singleRequired">
+                <button
+                    igxButton
+                    *ngFor="let option of ['narrow', 'short', 'long']"
+                    value="option"
+                    (click)="setWeekDayFormat(option)"
+                    [selected]="option === formatOptions['weekday']"
+                >
+                    {{option}}
+                </button>
+            </igx-buttongroup>
+
+            <label>Month format</label>
+            <igx-buttongroup selectionMode="singleRequired">
+                <button
+                    igxButton
+                    *ngFor="let option of ['numeric', '2-digit', 'narrow', 'short', 'long']"
+                    value="option"
+                    (click)="setMonthFormat(option)"
+                    [selected]="option === formatOptions['month']"
+                >
+                    {{option}}
+                </button>
+            </igx-buttongroup>
+        </div>
+    </ng-template>
+</div>
diff --git a/src/app/calendar-showcase/calendar-showcase.sample.scss b/src/app/calendar-showcase/calendar-showcase.sample.scss
new file mode 100644
index 00000000000..f41d4368b6a
--- /dev/null
+++ b/src/app/calendar-showcase/calendar-showcase.sample.scss
@@ -0,0 +1,34 @@
+.calendar-wrapper {
+    flex-basis: 100px;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+
+    strong {
+        display: block;
+        text-align: center;
+        padding: 10px;
+    }
+}
+
+.preview {
+    display: flex;
+    overflow: hidden;
+    height: 100%;
+
+    &__sample {
+        display: flex;
+        flex-wrap: wrap;
+        padding: 2rem;
+        gap: 2rem;
+        overflow: auto;
+        flex-grow: 1;
+    }
+}
+
+.custom-controls {
+    > *:not(label) {
+        display: block;
+        margin-bottom: 16px;
+    }
+}
diff --git a/src/app/calendar-showcase/calendar-showcase.sample.ts b/src/app/calendar-showcase/calendar-showcase.sample.ts
new file mode 100644
index 00000000000..ee14165aa49
--- /dev/null
+++ b/src/app/calendar-showcase/calendar-showcase.sample.ts
@@ -0,0 +1,297 @@
+import {
+    Component,
+    // ViewChild,
+    CUSTOM_ELEMENTS_SCHEMA,
+    OnInit,
+    TemplateRef,
+    ViewChild,
+} from "@angular/core";
+import { NgFor, DatePipe, DATE_PIPE_DEFAULT_OPTIONS } from "@angular/common";
+import { FormsModule } from "@angular/forms";
+import {
+    // IFormattingOptions,
+    IgxButtonDirective,
+    IgxButtonGroupComponent,
+    IgxDateRangePickerModule,
+    IgxCalendarComponent,
+    IgxCardComponent,
+    IgxHintDirective,
+    IgxIconComponent,
+    IgxInputDirective,
+    IgxInputGroupComponent,
+    IgxLabelDirective,
+    IgxRippleDirective,
+    IgxSwitchComponent,
+    IViewDateChangeEventArgs,
+    IgxCalendarView,
+    IFormattingOptions,
+    DateRange,
+    DateRangeDescriptor,
+    DateRangeType,
+} from "igniteui-angular";
+import { PropertyPanelConfig } from '../properties-panel/properties-panel.component';
+import { PropertyChangeService } from '../properties-panel/property-change.service';
+// import { DateRangeDescriptor, DateRangeType } from 'igniteui-angular';
+
+import { defineComponents, IgcCalendarComponent } from "igniteui-webcomponents";
+
+defineComponents(IgcCalendarComponent);
+
+@Component({
+    selector: "app-calendar-showcase-sample",
+    templateUrl: "calendar-showcase.sample.html",
+    styleUrls: ["calendar-showcase.sample.scss"],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    standalone: true,
+    providers: [
+        {
+            provide: DATE_PIPE_DEFAULT_OPTIONS,
+            useValue: { dateFormat: 'longDate', }
+        }
+    ],
+    imports: [
+        IgxButtonDirective,
+        IgxRippleDirective,
+        IgxDateRangePickerModule,
+        IgxCardComponent,
+        IgxCalendarComponent,
+        IgxButtonGroupComponent,
+        IgxInputGroupComponent,
+        IgxLabelDirective,
+        IgxInputDirective,
+        IgxHintDirective,
+        FormsModule,
+        IgxSwitchComponent,
+        IgxIconComponent,
+        NgFor,
+        DatePipe,
+    ],
+})
+export class CalendarShowcaseSampleComponent implements OnInit {
+    @ViewChild('customControls', { static: true }) public customControlsTemplate!: TemplateRef<any>;
+    private _today = new Date();
+
+    private _formatOptions: IFormattingOptions = {
+        day: "numeric",
+        month: "long",
+        weekday: "narrow",
+        year: "numeric",
+    };
+
+    public panelConfig: PropertyPanelConfig = {
+        locale: {
+            label: 'Change Locale',
+            control: {
+                type: 'button-group',
+                options: ['EN', 'BG', 'DE', 'FR', 'JP'],
+                defaultValue: 'EN'
+            }
+        },
+        weekStart: {
+            control: {
+                type: 'button-group',
+                options: ['monday', 'sunday'],
+                defaultValue: 'monday'
+            }
+        },
+        selection: {
+            control: {
+                type: 'button-group',
+                options: ['single', 'multiple', 'range'],
+                defaultValue: 'single'
+            }
+        },
+        headerOrientation: {
+            control: {
+                type: 'button-group',
+                options: ['horizontal', 'vertical'],
+                defaultValue: 'horizontal'
+            }
+        },
+        viewOrientation: {
+            control: {
+                type: 'button-group',
+                options: ['horizontal', 'vertical'],
+                defaultValue: 'horizontal'
+            }
+        },
+        hideHeader: {
+            control: {
+                type: 'boolean',
+                defaultValue: false
+            }
+        },
+        hideOutsideDays: {
+            control: {
+                type: 'boolean',
+                defaultValue: false
+            }
+        },
+        showWeekNumbers: {
+            control: {
+                type: 'boolean',
+                defaultValue: false
+            }
+        },
+        monthsViewNumber: {
+            control: {
+                type: 'number',
+                min: 1,
+                max: 4,
+                defaultValue: 1
+            }
+        }
+    }
+
+    constructor(protected propertyChangeService: PropertyChangeService) { }
+
+    private weekStartMap = {
+        monday: 1,
+        sunday: 7
+    };
+
+    private selectionMap = {
+        single: 'single',
+        multiple: 'multi',
+        range: 'range'
+    };
+
+    public get locale() {
+        return this.propertyChangeService.getProperty('locale');
+    }
+
+    public get weekStartWC() {
+        return this.propertyChangeService.getProperty('weekStart') || 'monday';
+    }
+
+    public get weekStartAngular() {
+        const weekStart = this.propertyChangeService.getProperty('weekStart') || 'monday';
+        return this.weekStartMap[weekStart];
+    }
+
+    public get selectionWC() {
+        return this.propertyChangeService.getProperty('selection');
+    }
+
+    public get selectionAngular() {
+        const selection = this.propertyChangeService.getProperty('selection');
+        return this.selectionMap[selection];
+    }
+
+    public get headerOrientation() {
+        return this.propertyChangeService.getProperty('headerOrientation');
+    }
+
+    public get viewOrientation() {
+        return this.propertyChangeService.getProperty('viewOrientation');
+    }
+
+    public get hideHeader() {
+        return this.propertyChangeService.getProperty('hideHeader');
+    }
+
+    public get hideOutsideDays() {
+        return this.propertyChangeService.getProperty('hideOutsideDays');
+    }
+
+    public get showWeekNumbers() {
+        return this.propertyChangeService.getProperty('showWeekNumbers');
+    }
+
+    public get monthsViewNumber() {
+        return this.propertyChangeService.getProperty('monthsViewNumber');
+    }
+
+    public ngOnInit(): void {
+        this.propertyChangeService.setPanelConfig(this.panelConfig);
+        this.propertyChangeService.setCustomControls(this.customControlsTemplate);
+    }
+
+    public onSelection(event: Date | Date[]) {
+        console.log(`Selected Date(s): ${event}`);
+    }
+
+    protected viewDateChanged(event: IViewDateChangeEventArgs) {
+        console.table(event);
+    }
+
+    protected activeViewChanged(view: IgxCalendarView) {
+        console.log(`Selected View: ${view}`);
+    }
+
+    protected set formatOptions(value: IFormattingOptions) {
+        this._formatOptions = value;
+    }
+
+    protected get formatOptions(): IFormattingOptions {
+        return this._formatOptions;
+    }
+
+    protected setWeekDayFormat(format: IFormattingOptions["weekday"] | string) {
+        this.formatOptions = {
+            ...this.formatOptions,
+            weekday: format as IFormattingOptions["weekday"],
+        };
+    }
+
+    protected setMonthFormat(format: IFormattingOptions["month"] | string) {
+        this.formatOptions = {
+            ...this.formatOptions,
+            month: format as IFormattingOptions["month"],
+        };
+    }
+
+    protected disabledDates = [
+        {
+            type: DateRangeType.Specific,
+            dateRange: [
+                new Date(this._today.getFullYear(), this._today.getMonth(), 0),
+                new Date(this._today.getFullYear(), this._today.getMonth(), 20),
+                new Date(this._today.getFullYear(), this._today.getMonth(), 21),
+            ],
+        },
+    ];
+
+    protected mySpecialDates = [
+        {
+            type: DateRangeType.Specific,
+            dateRange: [
+                new Date(this._today.getFullYear(), this._today.getMonth(), 1),
+                new Date(this._today.getFullYear(), this._today.getMonth(), 3),
+                new Date(this._today.getFullYear(), this._today.getMonth(), 7),
+            ],
+        },
+    ];
+
+    private _specialRange: DateRange = {
+        start: new Date(this._today.getFullYear(), this._today.getMonth(), 8),
+        end: new Date(this._today.getFullYear(), this._today.getMonth(), 10),
+    };
+
+    protected set specialRange(value: DateRange) {
+        this.specialDates = value;
+        this._specialRange = value;
+    };
+
+    protected get specialRange(): DateRange {
+        return this._specialRange;
+    }
+
+    private _specialDates: DateRangeDescriptor[] = [{
+        type: DateRangeType.Between,
+        dateRange: [this.specialRange.start as Date, this.specialRange.end as Date]
+    }]
+
+    protected get specialDates(): DateRangeDescriptor[] {
+        return this._specialDates;
+    }
+
+    protected set specialDates(dates: DateRange) {
+        this._specialDates = [
+            {
+                type: DateRangeType.Between,
+                dateRange: [dates.start as Date, dates.end as Date]
+            }
+        ]
+    }
+}
diff --git a/src/app/properties-panel/properties-panel.component.html b/src/app/properties-panel/properties-panel.component.html
index d3a9970d6e9..364769215ee 100644
--- a/src/app/properties-panel/properties-panel.component.html
+++ b/src/app/properties-panel/properties-panel.component.html
@@ -87,9 +87,9 @@ <h5 class="panel-title">Properties Panel</h5>
                 {{ option }}</igx-select-item>
         </igx-select>
         }
-
-        <br />
-
-        <ng-content></ng-content>
     </div>
+
+    <ng-container *ngIf="customControlsTemplate">
+        <ng-container *ngTemplateOutlet="customControlsTemplate"></ng-container>
+    </ng-container>
 </div>
diff --git a/src/app/properties-panel/properties-panel.component.scss b/src/app/properties-panel/properties-panel.component.scss
index fca6ac1bf5e..a684efefc90 100644
--- a/src/app/properties-panel/properties-panel.component.scss
+++ b/src/app/properties-panel/properties-panel.component.scss
@@ -6,22 +6,27 @@
 
 #properties-panel {
     padding: .5rem;
-}
 
-igx-input-group {
-    --ig-size: var(--ig-size-small);
-}
+    igx-input-group {
+        --ig-size: var(--ig-size-small);
+    }
 
-.switch-container {
-    display: flex;
-    align-items: center;
-    gap: 8px;
+    .switch-container {
+        display: flex;
+        align-items: center;
+        gap: 8px;
 
-    label {
-        margin: 0;
+        label {
+            margin: 0;
+        }
     }
-}
 
-.panel-title {
-    margin-bottom: 2rem;
+    .panel-title {
+        margin-bottom: 2rem;
+    }
+
+
+     > *:not(:last-child) {
+        margin-bottom: 16px;
+    }
 }
diff --git a/src/app/properties-panel/properties-panel.component.ts b/src/app/properties-panel/properties-panel.component.ts
index de26700d42f..bafcb1f27d1 100644
--- a/src/app/properties-panel/properties-panel.component.ts
+++ b/src/app/properties-panel/properties-panel.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, TemplateRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
 import { PropertyChangeService } from './property-change.service';
@@ -79,6 +79,7 @@ export class PropertiesPanelComponent implements OnInit {
 
     protected form!: FormGroup;
     protected radioAlignment = RadioGroupAlignment.vertical;
+    protected customControlsTemplate: TemplateRef<any> | null = null;
 
     constructor(private propertyChangeService: PropertyChangeService) { }
 
@@ -86,6 +87,10 @@ export class PropertiesPanelComponent implements OnInit {
         this.form = this.createFormGroup(this.config);
         this.propertyChangeService.emitInitialValues(this.config);
         this.form.valueChanges.subscribe(this.onFormValueChange.bind(this));
+
+        this.propertyChangeService.customControls$.subscribe(template => {
+            this.customControlsTemplate = template;
+          });
     }
 
     protected onFormValueChange(value: any): void {
diff --git a/src/app/properties-panel/property-change.service.ts b/src/app/properties-panel/property-change.service.ts
index f11c721d567..872c23998f1 100644
--- a/src/app/properties-panel/property-change.service.ts
+++ b/src/app/properties-panel/property-change.service.ts
@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, TemplateRef } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import { PropertyPanelConfig } from './properties-panel.component';
 import { NavigationEnd, Router } from '@angular/router';
@@ -10,14 +10,11 @@ export class PropertyChangeService {
     private propertyChanges = new BehaviorSubject<PropertyPanelConfig>({});
     public propertyChanges$ = this.propertyChanges.asObservable();
 
-    public panelConfig = new BehaviorSubject<PropertyPanelConfig | null>(null);
+    public panelConfig = new BehaviorSubject<PropertyPanelConfig>({});
     public panelConfig$ = this.panelConfig.asObservable();
 
-    public updateProperty(key: string, value: any): void {
-        const currentChanges = this.propertyChanges.getValue();
-        currentChanges[key] = value;
-        this.propertyChanges.next(currentChanges);
-    }
+    private customControlsSource = new BehaviorSubject<TemplateRef<any> | null>(null);
+    public customControls$ = this.customControlsSource.asObservable();
 
     public emitInitialValues(config: PropertyPanelConfig): void {
         this.panelConfig.next(config);
@@ -29,6 +26,17 @@ export class PropertyChangeService {
         });
     }
 
+    public updateProperty(key: string, value: any): void {
+        const currentChanges = this.propertyChanges.getValue();
+        currentChanges[key] = value;
+        this.propertyChanges.next(currentChanges);
+    }
+
+    public getProperty(key: string): any {
+        const changes = this.propertyChanges.getValue();
+        return changes[key];
+    }
+
     public setPanelConfig(config: PropertyPanelConfig): void {
         this.panelConfig.next(config);
     }
@@ -37,15 +45,19 @@ export class PropertyChangeService {
         this.panelConfig.next(null);
     }
 
-    public getProperty(key: string): any {
-        const changes = this.propertyChanges.getValue();
-        return changes[key];
+    public setCustomControls(controls: TemplateRef<any>): void {
+        this.customControlsSource.next(controls);
+    }
+
+    public clearCustomControls(): void {
+        this.customControlsSource.next(null);
     }
 
     constructor(private router: Router) {
         this.router.events.subscribe(event => {
             if (event instanceof NavigationEnd) {
                 this.clearPanelConfig();
+                this.clearCustomControls();
             }
         });
     }

From 9cfe5101c054e258f7b0eaa4aad3c22f719ef2b4 Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Wed, 16 Oct 2024 11:03:37 +0300
Subject: [PATCH 13/18] feat(demos): update mapping values and pageHeading

---
 .../badge-showcase/badge-showcase.sample.html |  2 +-
 .../badge-showcase/badge-showcase.sample.ts   | 29 ++++++++++++-------
 .../buttonGroup-showcase.sample.html          |  2 +-
 .../buttonGroup-showcase.sample.ts            | 19 ++++++------
 .../chips-showcase/chips-showcase.sample.html |  8 ++---
 src/app/pageHeading/pageHeading.styles.scss   |  4 +++
 .../properties-panel.component.spec.ts        | 23 ---------------
 .../property-change.service.spec.ts           | 16 ----------
 8 files changed, 37 insertions(+), 66 deletions(-)
 delete mode 100644 src/app/properties-panel/properties-panel.component.spec.ts
 delete mode 100644 src/app/properties-panel/property-change.service.spec.ts

diff --git a/src/app/badge-showcase/badge-showcase.sample.html b/src/app/badge-showcase/badge-showcase.sample.html
index db40d91b09c..c5a63e2a512 100644
--- a/src/app/badge-showcase/badge-showcase.sample.html
+++ b/src/app/badge-showcase/badge-showcase.sample.html
@@ -7,6 +7,6 @@ <h4 class="sample-title">Angular vs WebComponents Badge</h4>
 
     <div class="badges">
         <strong>WC Badge</strong>
-        <igc-badge [variant]="webComponentVariant" [shape]="shape"><span>8</span></igc-badge>
+        <igc-badge [variant]="wcVariant" [shape]="shape"><span>8</span></igc-badge>
     </div>
 </div>
diff --git a/src/app/badge-showcase/badge-showcase.sample.ts b/src/app/badge-showcase/badge-showcase.sample.ts
index 2f57f5fd9bd..d1cea11f097 100644
--- a/src/app/badge-showcase/badge-showcase.sample.ts
+++ b/src/app/badge-showcase/badge-showcase.sample.ts
@@ -38,22 +38,29 @@ export class BadgeShowcaseSampleComponent implements OnInit {
         this.propertyChangeService.setPanelConfig(this.panelConfig);
     }
 
-    private variantMapping: { [key: string]: { angular: string; webComponent: string } } = {
-        default: { angular: 'default', webComponent: 'primary' },
-        error: { angular: 'error', webComponent: 'danger' },
-        info: { angular: 'info', webComponent: 'info' },
-        success: { angular: 'success', webComponent: 'success' },
-        warning: { angular: 'warning', webComponent: 'warning' },
+    // private variantMapping: { [key: string]: { angular: string; webComponent: string } } = {
+    //     default: { angular: 'default', webComponent: 'primary' },
+    //     error: { angular: 'error', webComponent: 'danger' },
+    //     info: { angular: 'info', webComponent: 'info' },
+    //     success: { angular: 'success', webComponent: 'success' },
+    //     warning: { angular: 'warning', webComponent: 'warning' },
+    // };
+
+    private variantMap = {
+        default: 'primary',
+        info: 'info',
+        success: 'success',
+        warning: 'warning',
+        error: 'danger',
     };
 
     public get angularVariant() {
-        const variant = this.propertyChangeService.getProperty('variant') || 'default';
-        return this.variantMapping[variant]?.angular || 'default';
+        return this.propertyChangeService.getProperty('variant');
     }
 
-    public get webComponentVariant() {
-        const variant = this.propertyChangeService.getProperty('variant') || 'default';
-        return this.variantMapping[variant]?.webComponent || 'primary';
+    public get wcVariant() {
+        const variant = this.propertyChangeService.getProperty('variant');
+        return this.variantMap[variant];
     }
 
     public get shape() {
diff --git a/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.html b/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.html
index 7cf0b89e9bc..843c596dc9f 100644
--- a/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.html
+++ b/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.html
@@ -17,7 +17,7 @@ <h4 class="sample-title">Angular ButtonGroup</h4>
     <article class="sample-column">
         <h4 class="sample-title">WC ButtonGroup</h4>
         <igc-button-group
-        [selection]="webComponentSelection"
+        [selection]="wcSelection"
         [alignment]="alignment"
         [disabled]="disabled">
             <igc-toggle-button
diff --git a/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.ts b/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.ts
index 07b5e7bbb34..71a6b5ea770 100644
--- a/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.ts
+++ b/src/app/buttonGroup-showcase/buttonGroup-showcase.sample.ts
@@ -57,7 +57,7 @@ export class ButtonGroupShowcaseSampleComponent implements OnInit {
         selection: {
             control: {
                 type: 'select',
-                options: ['single', 'single-required', 'multiple'],
+                options: ['single', 'singleRequired', 'multiple'],
                 defaultValue: 'single'
             }
         },
@@ -71,20 +71,19 @@ export class ButtonGroupShowcaseSampleComponent implements OnInit {
 
     constructor(protected propertyChangeService: PropertyChangeService) {}
 
-    private selectionMapping: { [key: string]: { angular: string; webComponent: string } } = {
-        multiple: { angular: 'multi', webComponent: 'multiple' },
-        singleRequired: { angular: 'singleRequired', webComponent: 'single-required' },
-
+    private selectionMap = {
+        single: 'single',
+        multiple: 'multi',
+        singleRequired: 'single-required'
     };
 
     protected get angularSelection() {
-        const selection = this.propertyChangeService.getProperty('selection') || 'multi';
-        return this.selectionMapping[selection]?.angular || selection;
+        return this.propertyChangeService.getProperty('selection');
     }
 
-    protected get webComponentSelection() {
-        const selection = this.propertyChangeService.getProperty('selection') || 'multiple';
-        return this.selectionMapping[selection]?.webComponent || selection;
+    public get wcSelection() {
+        const selection = this.propertyChangeService.getProperty('selection');
+        return this.selectionMap[selection];
     }
 
     protected get disabled() {
diff --git a/src/app/chips-showcase/chips-showcase.sample.html b/src/app/chips-showcase/chips-showcase.sample.html
index 45a7b3d6896..b0514063fba 100644
--- a/src/app/chips-showcase/chips-showcase.sample.html
+++ b/src/app/chips-showcase/chips-showcase.sample.html
@@ -29,12 +29,12 @@ <h6>WC Chip</h6>
                 [removable]="isRemovable"
                 [selected]="isSelected">
                 <span *ngIf="hasAvatar" class="chip-area-avatar"><igc-avatar slot="prefix" initials="MP" shape="circle"></igc-avatar></span>
-                <span *ngIf="hasPrefix"><igx-icon slot="prefix">face</igx-icon></span>
-                <span *ngIf="customIcons"><igx-icon slot="select" family="fa-solid" name="fa-check-circle"></igx-icon></span>
+                <span *ngIf="hasPrefix" slot="prefix"><igx-icon>face</igx-icon></span>
+                <span *ngIf="customIcons" slot="select"><igx-icon family="fa-solid" name="fa-check-circle"></igx-icon></span>
                 Chip component
-                <span *ngIf="hasSuffix"><igx-icon slot="suffix">face</igx-icon></span>
+                <span *ngIf="hasSuffix" slot="suffix"><igx-icon>face</igx-icon></span>
                 <span *ngIf="hasProgressbar" class="circular-sample"><igc-circular-progress slot="suffix" [indeterminate]="true"></igc-circular-progress></span>
-                <span *ngIf="customIcons"><igx-icon slot="remove" family="fa-solid" name="fa-trash-alt"></igx-icon></span>
+                <span *ngIf="customIcons" slot="remove"><igx-icon family="fa-solid" name="fa-trash-alt"></igx-icon></span>
             </igc-chip>
 
             <div class="preview__info">
diff --git a/src/app/pageHeading/pageHeading.styles.scss b/src/app/pageHeading/pageHeading.styles.scss
index 757853c4edf..3c7795aa2d1 100644
--- a/src/app/pageHeading/pageHeading.styles.scss
+++ b/src/app/pageHeading/pageHeading.styles.scss
@@ -46,4 +46,8 @@
         overflow: hidden;
         text-overflow: ellipsis;
     }
+
+    .toggle-properties-panel {
+        color: var(--ph-foreground);
+    }
 }
diff --git a/src/app/properties-panel/properties-panel.component.spec.ts b/src/app/properties-panel/properties-panel.component.spec.ts
deleted file mode 100644
index e507a6a5bc2..00000000000
--- a/src/app/properties-panel/properties-panel.component.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { PropertiesPanelComponent } from './properties-panel.component';
-
-describe('PropertiesPanelComponent', () => {
-  let component: PropertiesPanelComponent;
-  let fixture: ComponentFixture<PropertiesPanelComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [PropertiesPanelComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(PropertiesPanelComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/properties-panel/property-change.service.spec.ts b/src/app/properties-panel/property-change.service.spec.ts
deleted file mode 100644
index 18094b35f60..00000000000
--- a/src/app/properties-panel/property-change.service.spec.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { PropertyChangeService } from './property-change.service';
-
-describe('PropertyChangeService', () => {
-  let service: PropertyChangeService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(PropertyChangeService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

From 3e0f6213f1f6d6c75276ad7df848730a1527e6fd Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Wed, 16 Oct 2024 13:05:32 +0300
Subject: [PATCH 14/18] fix(badge): update badge sample

---
 src/app/badge-showcase/badge-showcase.sample.ts | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/app/badge-showcase/badge-showcase.sample.ts b/src/app/badge-showcase/badge-showcase.sample.ts
index d1cea11f097..373ecb3a60d 100644
--- a/src/app/badge-showcase/badge-showcase.sample.ts
+++ b/src/app/badge-showcase/badge-showcase.sample.ts
@@ -37,15 +37,6 @@ export class BadgeShowcaseSampleComponent implements OnInit {
     public ngOnInit() {
         this.propertyChangeService.setPanelConfig(this.panelConfig);
     }
-
-    // private variantMapping: { [key: string]: { angular: string; webComponent: string } } = {
-    //     default: { angular: 'default', webComponent: 'primary' },
-    //     error: { angular: 'error', webComponent: 'danger' },
-    //     info: { angular: 'info', webComponent: 'info' },
-    //     success: { angular: 'success', webComponent: 'success' },
-    //     warning: { angular: 'warning', webComponent: 'warning' },
-    // };
-
     private variantMap = {
         default: 'primary',
         info: 'info',
@@ -60,7 +51,7 @@ export class BadgeShowcaseSampleComponent implements OnInit {
 
     public get wcVariant() {
         const variant = this.propertyChangeService.getProperty('variant');
-        return this.variantMap[variant];
+        return this.variantMap[variant] || 'primary';
     }
 
     public get shape() {

From 345d06a80b37d65b2965f717acf66f864bb382db Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Wed, 16 Oct 2024 17:38:26 +0300
Subject: [PATCH 15/18] feat(demos): add properties panel to carousel and chips
 demos

---
 src/app/app.component.ts                      |   5 +
 src/app/app.routes.ts                         |   5 +
 .../badge-showcase/badge-showcase.sample.html |   4 +-
 .../badge-showcase/badge-showcase.sample.ts   |   9 +
 .../button-showcase.sample.html               |   2 +-
 .../button-showcase/button-showcase.sample.ts |  12 +-
 .../calendar-showcase.sample.ts               |  34 ++--
 .../card-showcase/card-showcase.sample.scss   |   4 +-
 .../carousel-showcase.sample.html             |  35 ++++
 .../carousel-showcase.sample.scss             |   5 +
 .../carousel-showcase.sample.ts               | 182 ++++++++++++++++++
 .../chips-showcase/chips-showcase.sample.html | 106 ++++------
 .../chips-showcase/chips-showcase.sample.scss | 144 ++------------
 .../chips-showcase/chips-showcase.sample.ts   |  91 +++++++--
 14 files changed, 395 insertions(+), 243 deletions(-)
 create mode 100644 src/app/carousel-showcase/carousel-showcase.sample.html
 create mode 100644 src/app/carousel-showcase/carousel-showcase.sample.scss
 create mode 100644 src/app/carousel-showcase/carousel-showcase.sample.ts

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index b0507f90365..63f281f321b 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -739,6 +739,11 @@ export class AppComponent implements OnInit {
             icon: 'radio_button_unchecked',
             name: 'Card'
         },
+        {
+            link: '/carousel-showcase',
+            icon: 'radio_button_unchecked',
+            name: 'Carousel'
+        },
         {
             link: '/chip-showcase',
             icon: 'radio_button_unchecked',
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 9a458437e0d..32a2f680b73 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -11,6 +11,7 @@ import { CalendarShowcaseSampleComponent } from './calendar-showcase/calendar-sh
 import { CardSampleComponent } from './card/card.sample';
 import { CardShowcaseSampleComponent } from './card-showcase/card-showcase.sample';
 import { CarouselSampleComponent } from './carousel/carousel.sample';
+import { CarouselShowcaseSampleComponent } from './carousel-showcase/carousel-showcase.sample';
 import { ChipsSampleComponent } from './chips/chips.sample';
 import { ChipsShowcaseSampleComponent } from './chips-showcase/chips-showcase.sample';
 import { ExpansionPanelSampleComponent } from './expansion-panel/expansion-panel-sample';
@@ -248,6 +249,10 @@ export const appRoutes: Routes = [
         path: 'carousel',
         component: CarouselSampleComponent
     },
+    {
+        path: 'carousel-showcase',
+        component: CarouselShowcaseSampleComponent
+    },
     {
         path: 'combo',
         component: ComboSampleComponent
diff --git a/src/app/badge-showcase/badge-showcase.sample.html b/src/app/badge-showcase/badge-showcase.sample.html
index c5a63e2a512..4aa27dadd56 100644
--- a/src/app/badge-showcase/badge-showcase.sample.html
+++ b/src/app/badge-showcase/badge-showcase.sample.html
@@ -2,11 +2,11 @@ <h4 class="sample-title">Angular vs WebComponents Badge</h4>
 <div class="wrapper">
     <div class="badges">
         <strong>Angular Badge</strong>
-        <igx-badge [type]="angularVariant" value="8" [shape]="shape"></igx-badge>
+        <igx-badge [type]="angularVariant" value="8" [shape]="shape" [outlined]="outlined"></igx-badge>
     </div>
 
     <div class="badges">
         <strong>WC Badge</strong>
-        <igc-badge [variant]="wcVariant" [shape]="shape"><span>8</span></igc-badge>
+        <igc-badge [variant]="wcVariant" [shape]="shape" [outlined]="outlined"><span>8</span></igc-badge>
     </div>
 </div>
diff --git a/src/app/badge-showcase/badge-showcase.sample.ts b/src/app/badge-showcase/badge-showcase.sample.ts
index 373ecb3a60d..ac3582e13f7 100644
--- a/src/app/badge-showcase/badge-showcase.sample.ts
+++ b/src/app/badge-showcase/badge-showcase.sample.ts
@@ -29,6 +29,11 @@ export class BadgeShowcaseSampleComponent implements OnInit {
                 type: 'select',
                 options: ['default', 'info', 'success', 'warning', 'error']
             }
+        },
+        outlined: {
+            control: {
+                type: 'boolean',
+            }
         }
     };
 
@@ -57,5 +62,9 @@ export class BadgeShowcaseSampleComponent implements OnInit {
     public get shape() {
         return this.propertyChangeService.getProperty('shape');
     }
+
+    public get outlined() {
+        return this.propertyChangeService.getProperty('outlined');
+    }
 }
 
diff --git a/src/app/button-showcase/button-showcase.sample.html b/src/app/button-showcase/button-showcase.sample.html
index 632959155f3..818e5421aaa 100644
--- a/src/app/button-showcase/button-showcase.sample.html
+++ b/src/app/button-showcase/button-showcase.sample.html
@@ -4,7 +4,7 @@ <h4 class="sample-title">Angular Button</h4>
         <h4 class="sample-title">WC Button</h4>
     </article>
 
-    <div class="buttons-sample">
+    <div class="buttons-sample" [style.--ig-size]="'var(--ig-size-' + size + ')'">
         <div class="button-sample">
             <button [igxButton]="variant" [disabled]="disabled">Button</button>
         </div>
diff --git a/src/app/button-showcase/button-showcase.sample.ts b/src/app/button-showcase/button-showcase.sample.ts
index 3952947fad9..687bb77ee6f 100644
--- a/src/app/button-showcase/button-showcase.sample.ts
+++ b/src/app/button-showcase/button-showcase.sample.ts
@@ -20,9 +20,15 @@ registerIconFromText("favorite", favorite );
 })
 export class ButtonShowcaseSampleComponent implements OnInit {
     public panelConfig: PropertyPanelConfig = {
+        size: {
+            control: {
+                type: "button-group",
+                options: ['small', 'medium', 'large'],
+            }
+        },
         variant: {
             control: {
-                type: "select",
+                type: "button-group",
                 options: ['flat', 'contained', 'outlined', 'fab'],
                 defaultValue: 'flat'
             }
@@ -41,6 +47,10 @@ export class ButtonShowcaseSampleComponent implements OnInit {
         this.propertyChangeService.setPanelConfig(this.panelConfig);
     }
 
+    protected get size() {
+        return this.propertyChangeService.getProperty('size');
+    }
+
     protected get variant() {
         return this.propertyChangeService.getProperty('variant');
     }
diff --git a/src/app/calendar-showcase/calendar-showcase.sample.ts b/src/app/calendar-showcase/calendar-showcase.sample.ts
index ee14165aa49..fc48a4d05b3 100644
--- a/src/app/calendar-showcase/calendar-showcase.sample.ts
+++ b/src/app/calendar-showcase/calendar-showcase.sample.ts
@@ -1,6 +1,5 @@
 import {
     Component,
-    // ViewChild,
     CUSTOM_ELEMENTS_SCHEMA,
     OnInit,
     TemplateRef,
@@ -9,7 +8,6 @@ import {
 import { NgFor, DatePipe, DATE_PIPE_DEFAULT_OPTIONS } from "@angular/common";
 import { FormsModule } from "@angular/forms";
 import {
-    // IFormattingOptions,
     IgxButtonDirective,
     IgxButtonGroupComponent,
     IgxDateRangePickerModule,
@@ -31,7 +29,6 @@ import {
 } from "igniteui-angular";
 import { PropertyPanelConfig } from '../properties-panel/properties-panel.component';
 import { PropertyChangeService } from '../properties-panel/property-change.service';
-// import { DateRangeDescriptor, DateRangeType } from 'igniteui-angular';
 
 import { defineComponents, IgcCalendarComponent } from "igniteui-webcomponents";
 
@@ -88,6 +85,7 @@ export class CalendarShowcaseSampleComponent implements OnInit {
             }
         },
         weekStart: {
+            label: 'Week Start',
             control: {
                 type: 'button-group',
                 options: ['monday', 'sunday'],
@@ -102,6 +100,7 @@ export class CalendarShowcaseSampleComponent implements OnInit {
             }
         },
         headerOrientation: {
+            label: 'Header Orientation',
             control: {
                 type: 'button-group',
                 options: ['horizontal', 'vertical'],
@@ -109,6 +108,7 @@ export class CalendarShowcaseSampleComponent implements OnInit {
             }
         },
         viewOrientation: {
+            label: 'View Orientation',
             control: {
                 type: 'button-group',
                 options: ['horizontal', 'vertical'],
@@ -116,24 +116,28 @@ export class CalendarShowcaseSampleComponent implements OnInit {
             }
         },
         hideHeader: {
+            label: 'Hide Header',
             control: {
                 type: 'boolean',
                 defaultValue: false
             }
         },
         hideOutsideDays: {
+            label: 'Hide Outside Days',
             control: {
                 type: 'boolean',
                 defaultValue: false
             }
         },
         showWeekNumbers: {
+            label: 'Show Week Numbers',
             control: {
                 type: 'boolean',
                 defaultValue: false
             }
         },
         monthsViewNumber: {
+            label: 'Number of Months',
             control: {
                 type: 'number',
                 min: 1,
@@ -156,49 +160,49 @@ export class CalendarShowcaseSampleComponent implements OnInit {
         range: 'range'
     };
 
-    public get locale() {
+    protected get locale() {
         return this.propertyChangeService.getProperty('locale');
     }
 
-    public get weekStartWC() {
+    protected get weekStartWC() {
         return this.propertyChangeService.getProperty('weekStart') || 'monday';
     }
 
-    public get weekStartAngular() {
+    protected get weekStartAngular() {
         const weekStart = this.propertyChangeService.getProperty('weekStart') || 'monday';
         return this.weekStartMap[weekStart];
     }
 
-    public get selectionWC() {
+    protected get selectionWC() {
         return this.propertyChangeService.getProperty('selection');
     }
 
-    public get selectionAngular() {
+    protected get selectionAngular() {
         const selection = this.propertyChangeService.getProperty('selection');
         return this.selectionMap[selection];
     }
 
-    public get headerOrientation() {
+    protected get headerOrientation() {
         return this.propertyChangeService.getProperty('headerOrientation');
     }
 
-    public get viewOrientation() {
+    protected get viewOrientation() {
         return this.propertyChangeService.getProperty('viewOrientation');
     }
 
-    public get hideHeader() {
+    protected get hideHeader() {
         return this.propertyChangeService.getProperty('hideHeader');
     }
 
-    public get hideOutsideDays() {
+    protected get hideOutsideDays() {
         return this.propertyChangeService.getProperty('hideOutsideDays');
     }
 
-    public get showWeekNumbers() {
+    protected get showWeekNumbers() {
         return this.propertyChangeService.getProperty('showWeekNumbers');
     }
 
-    public get monthsViewNumber() {
+    protected get monthsViewNumber() {
         return this.propertyChangeService.getProperty('monthsViewNumber');
     }
 
@@ -207,7 +211,7 @@ export class CalendarShowcaseSampleComponent implements OnInit {
         this.propertyChangeService.setCustomControls(this.customControlsTemplate);
     }
 
-    public onSelection(event: Date | Date[]) {
+    protected onSelection(event: Date | Date[]) {
         console.log(`Selected Date(s): ${event}`);
     }
 
diff --git a/src/app/card-showcase/card-showcase.sample.scss b/src/app/card-showcase/card-showcase.sample.scss
index da62d2b2e8b..2377e721531 100644
--- a/src/app/card-showcase/card-showcase.sample.scss
+++ b/src/app/card-showcase/card-showcase.sample.scss
@@ -1,8 +1,8 @@
 .grid-container {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    grid-template-columns: repeat(2, minmax(320px, 1fr));
     column-gap: 10px;
-    justify-content: space-between;
+    justify-items: center;
     padding: 30px;
 }
 
diff --git a/src/app/carousel-showcase/carousel-showcase.sample.html b/src/app/carousel-showcase/carousel-showcase.sample.html
new file mode 100644
index 00000000000..240a2f3839c
--- /dev/null
+++ b/src/app/carousel-showcase/carousel-showcase.sample.html
@@ -0,0 +1,35 @@
+<div class="sample-content">
+    <section class="sample-wrapper" style="width: 100%">
+        <h4 class="sample-title">Angular Carousel</h4>
+        <igx-carousel #car
+        [pause]="!disablePauseOnInteraction"
+        [loop]="!disableLoop"
+        [indicators]="!hideIndicators"
+        [navigation]="!hideNavigation"
+        [vertical]="vertical"
+        [interval]="interval"
+        [animationType]="animationType"
+        [indicatorsOrientation]="angularIndicatorsOrientation"
+        [maximumIndicatorsCount]="maximumIndicatorsCount">
+            <igx-slide *ngFor="let slide of slides;" [active]="slide.active">
+                <img [src]="slide.image">
+            </igx-slide>
+        </igx-carousel>
+
+        <h4 class="sample-title">WC Carousel</h4>
+        <igc-carousel
+        [disableLoop]="disableLoop"
+        [disablePauseOnInteraction]="disablePauseOnInteraction"
+        [hideIndicators]="hideIndicators"
+        [hideNavigation]="hideNavigation"
+        [vertical]="vertical"
+        [interval]="interval"
+        [animationType]="animationType"
+        [indicatorsOrientation]="wcIndicatorsOrientation"
+        [maximumIndicatorsCount]="maximumIndicatorsCount">
+            <igc-carousel-slide *ngFor="let slide of slides;" [active]="slide.active">
+                <img [src]="slide.image" />
+            </igc-carousel-slide>
+        </igc-carousel>
+    </section>
+</div>
diff --git a/src/app/carousel-showcase/carousel-showcase.sample.scss b/src/app/carousel-showcase/carousel-showcase.sample.scss
new file mode 100644
index 00000000000..da73c14b961
--- /dev/null
+++ b/src/app/carousel-showcase/carousel-showcase.sample.scss
@@ -0,0 +1,5 @@
+.sample-wrapper {
+    igx-carousel {
+        margin-bottom: 64px;
+    }
+}
diff --git a/src/app/carousel-showcase/carousel-showcase.sample.ts b/src/app/carousel-showcase/carousel-showcase.sample.ts
new file mode 100644
index 00000000000..fe015bee576
--- /dev/null
+++ b/src/app/carousel-showcase/carousel-showcase.sample.ts
@@ -0,0 +1,182 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit } from '@angular/core';
+import { NgFor, NgIf } from '@angular/common';
+import { IgxButtonDirective, IgxCarouselComponent, IgxCarouselIndicatorDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, IgxSlideComponent, IgxSwitchComponent, IgxToggleActionDirective } from 'igniteui-angular';
+import { PropertyPanelConfig } from '../properties-panel/properties-panel.component';
+import { PropertyChangeService } from '../properties-panel/property-change.service';
+import {
+    IgcButtonComponent,
+    IgcCarouselComponent,
+    IgcIconComponent,
+    IgcInputComponent,
+    IgcTextareaComponent,
+    defineComponents,
+    registerIconFromText,
+  } from 'igniteui-webcomponents';
+
+  defineComponents(
+    IgcCarouselComponent,
+    IgcIconComponent,
+    IgcInputComponent,
+    IgcButtonComponent,
+    IgcTextareaComponent
+  );
+
+  const icons = [
+    {
+      name: 'previous',
+      text: '<svg fill="#000000" width="24" height="24" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M0 220.8C0 266.416 37.765 304 83.2 304h35.647a93.148 93.148 0 0 0 7.929 22.064c-2.507 22.006 3.503 44.978 15.985 62.791C143.9 441.342 180.159 480 242.701 480H264c60.063 0 98.512-40 127.2-40h2.679c5.747 4.952 13.536 8 22.12 8h64c17.673 0 32-12.894 32-28.8V188.8c0-15.906-14.327-28.8-32-28.8h-64c-8.584 0-16.373 3.048-22.12 8H391.2c-6.964 0-14.862-6.193-30.183-23.668l-.129-.148-.131-.146c-8.856-9.937-18.116-20.841-25.851-33.253C316.202 80.537 304.514 32 259.2 32c-56.928 0-92 35.286-92 83.2 0 8.026.814 15.489 2.176 22.4H83.2C38.101 137.6 0 175.701 0 220.8zm48 0c0-18.7 16.775-35.2 35.2-35.2h158.4c0-17.325-26.4-35.2-26.4-70.4 0-26.4 20.625-35.2 44-35.2 8.794 0 20.445 32.712 34.926 56.1 9.074 14.575 19.524 27.225 30.799 39.875 16.109 18.374 33.836 36.633 59.075 39.596v176.752C341.21 396.087 309.491 432 264 432h-21.299c-40.524 0-57.124-22.197-50.601-61.325-14.612-8.001-24.151-33.979-12.925-53.625-19.365-18.225-17.787-46.381-4.95-61.05H83.2C64.225 256 48 239.775 48 220.8zM448 360c13.255 0 24 10.745 24 24s-10.745 24-24 24-24-10.745-24-24 10.745-24 24-24z"/></svg>',
+    },
+    {
+      name: 'next',
+      text: `<svg fill="#000000" width="24" height="24" viewBox="0 0 589.308 589.308" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
+      <path d="M503.587,148.307c-47.736-34.885-96.696-87.517-154.225-104.652c-5.508-1.836-9.18,1.836-10.403,6.12
+      c-3.672,1.836-6.732,4.896-6.732,10.404c-1.836,39.168-1.836,78.947-1.224,118.115c-49.572-1.224-99.145-1.836-149.328-1.224
+      c-34.272,0.612-128.52-7.956-156.06,22.032c-4.896-1.225-10.404,1.224-12.852,6.731c-18.36,45.288-12.24,102.816-9.792,151.164
+      c2.448,56.916,6.12,113.832,11.016,170.748c0,2.448,1.224,4.284,2.448,5.508c0,3.061,2.448,6.12,7.344,6.732
+      c41.616,6.731,90.576,9.792,131.58-0.612c11.016-2.448,11.016-15.3,4.284-20.808c17.748-58.141-7.344-118.116,5.508-176.868
+      c55.692,3.672,112.608,1.224,168.912-1.836c0,29.988-1.224,59.976-3.672,89.964c0,1.224,0,2.448,0.612,3.672
+      c-0.612,2.448-0.612,4.284-1.225,6.732c-1.224,7.956,5.509,18.972,15.301,15.3c59.363-23.256,105.264-57.528,154.224-96.696
+      c34.271-27.54,87.516-66.096,89.964-114.443C591.103,204.61,530.515,167.891,503.587,148.307z"/>
+      </svg>`,
+    },
+  ];
+
+  icons.forEach((icon) => {
+    registerIconFromText(icon.name, icon.text, 'material');
+  });
+
+@Component({
+    selector: 'app-carousel-showcase-sample',
+    styleUrls: ['carousel-showcase.sample.scss'],
+    templateUrl: 'carousel-showcase.sample.html',
+    standalone: true,
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    imports: [IgxSwitchComponent, IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, NgFor, IgxDropDownItemComponent, IgxCarouselComponent, IgxSlideComponent, IgxCarouselIndicatorDirective, NgIf]
+})
+export class CarouselShowcaseSampleComponent implements OnInit {
+    public panelConfig: PropertyPanelConfig = {
+        disableLoop: {
+            label: 'Disable Loop',
+            control: {
+                type: 'boolean'
+            }
+        },
+        disablePauseOnInteraction: {
+            label: 'Disable Pause on Interaction',
+            control: {
+                type: 'boolean'
+            }
+        },
+        hideNavigation: {
+            label: 'Hide Navigation',
+            control: {
+                type: 'boolean'
+            }
+        },
+        hideIndicators: {
+            label: 'Hide Indicator',
+            control: {
+                type: 'boolean'
+            }
+        },
+        vertical: {
+            control: {
+                type: 'boolean',
+                defaultValue: false
+            }
+        },
+        interval: {
+            control: {
+                type: 'number',
+                min: 500
+            }
+        },
+        animationType: {
+            label: 'Animation Type',
+            control: {
+                type: 'button-group',
+                options: ['slide', 'fade', 'none'],
+                defaultValue: 'slide'
+            }
+        },
+        indicatorsOrientation: {
+            label: 'Indicators Orientation',
+            control: {
+                type: 'button-group',
+                options: ['start', 'end'],
+                defaultValue: 'end'
+            }
+        },
+        maximumIndicatorsCount: {
+            label: 'Maximum Indicators Count',
+            control: {
+                type: 'number',
+                defaultValue: 10
+            }
+        }
+    }
+
+    protected get disableLoop(){
+        return this.propertyChangeService.getProperty('disableLoop');
+    }
+
+    protected get disablePauseOnInteraction(){
+        return this.propertyChangeService.getProperty('disablePauseOnInteraction');
+    }
+
+    protected get hideIndicators(){
+        return this.propertyChangeService.getProperty('hideIndicators');
+    }
+
+    protected get hideNavigation(){
+        return this.propertyChangeService.getProperty('hideNavigation');
+    }
+
+    protected get vertical(){
+        return this.propertyChangeService.getProperty('vertical');
+    }
+
+    protected get interval(){
+        return this.propertyChangeService.getProperty('interval');
+    }
+
+    protected get animationType(){
+        return this.propertyChangeService.getProperty('animationType');
+    }
+
+    private indicatorsOrientationMap = {
+        start: 'top',
+        end: 'bottom',
+    };
+
+    protected get angularIndicatorsOrientation() {
+        const orientation = this.propertyChangeService.getProperty('indicatorsOrientation');
+        return this.indicatorsOrientationMap[orientation] || 'bottom';
+    }
+
+    protected get wcIndicatorsOrientation() {
+        return this.propertyChangeService.getProperty('indicatorsOrientation');
+    }
+
+    protected get maximumIndicatorsCount() {
+        return this.propertyChangeService.getProperty('maximumIndicatorsCount');
+    }
+
+    public slides = [];
+
+    constructor(protected propertyChangeService: PropertyChangeService) {
+        this.addNewSlide();
+    }
+
+    public ngOnInit() {
+        this.propertyChangeService.setPanelConfig(this.panelConfig);
+    }
+
+    public addNewSlide() {
+        this.slides.push(
+            {image: 'assets/images/carousel/slide1@x2.jpg', active: true},
+            {image: 'assets/images/carousel/slide2@x2.jpg', active: false},
+            {image: 'assets/images/carousel/slide3@x2.jpg', active: false}
+        );
+    }
+}
diff --git a/src/app/chips-showcase/chips-showcase.sample.html b/src/app/chips-showcase/chips-showcase.sample.html
index b0514063fba..87b8678e573 100644
--- a/src/app/chips-showcase/chips-showcase.sample.html
+++ b/src/app/chips-showcase/chips-showcase.sample.html
@@ -3,13 +3,12 @@
         <div class="preview__sample">
             <h6>Angular Chip</h6>
             <igx-chip #me
-                [variant]="selected"
-                [style.--ig-size]="'var(--ig-size-' + sizeSelector.size + ')'"
-                [disabled]="isDisabled"
-                [selectable]="isSelectable"
-                [removable]="isRemovable"
-                [selected]="isSelected"
-                [draggable]="isDraggable"
+                [variant]="variant"
+                [style.--ig-size]="'var(--ig-size-' + size + ')'"
+                [disabled]="disabled"
+                [selectable]="selectable"
+                [removable]="removable"
+                [selected]="selected"
                 [removeIcon]="customIcons ? myRemoveIcon : null"
                 [selectIcon]="customIcons ? mySelectIcon : null"
                 (remove)="removeChip(me)">
@@ -22,27 +21,21 @@ <h6>Angular Chip</h6>
 
             <h6>WC Chip</h6>
             <igc-chip #wc
-                [variant]="selected"
-                [style.--ig-size]="'var(--ig-size-' + sizeSelector.size + ')'"
-                [disabled]="isDisabled"
-                [selectable]="isSelectable"
-                [removable]="isRemovable"
-                [selected]="isSelected">
-                <span *ngIf="hasAvatar" class="chip-area-avatar"><igc-avatar slot="prefix" initials="MP" shape="circle"></igc-avatar></span>
+                [variant]="variant"
+                [style.--ig-size]="'var(--ig-size-' + size + ')'"
+                [disabled]="disabled"
+                [selectable]="selectable"
+                [removable]="removable"
+                [selected]="selected">
+                <igc-avatar *ngIf="hasAvatar" class="chip-area-avatar" slot="prefix" initials="MP" shape="circle"></igc-avatar>
                 <span *ngIf="hasPrefix" slot="prefix"><igx-icon>face</igx-icon></span>
                 <span *ngIf="customIcons" slot="select"><igx-icon family="fa-solid" name="fa-check-circle"></igx-icon></span>
                 Chip component
                 <span *ngIf="hasSuffix" slot="suffix"><igx-icon>face</igx-icon></span>
-                <span *ngIf="hasProgressbar" class="circular-sample"><igc-circular-progress slot="suffix" [indeterminate]="true"></igc-circular-progress></span>
+                <igc-circular-progress *ngIf="hasProgressbar" class="circular-sample" slot="suffix" [indeterminate]="true"></igc-circular-progress>
                 <span *ngIf="customIcons" slot="remove"><igx-icon family="fa-solid" name="fa-trash-alt"></igx-icon></span>
             </igc-chip>
 
-            <div class="preview__info">
-                <a href="https://github.com/IgniteUI/igniteui-angular/wiki/Chip-Component#selection" target="_blank">
-                    <igx-icon>link</igx-icon> Open wiki page.
-                </a>
-            </div>
-
             <ng-template #mySelectIcon >
                 <igx-icon family="fa-solid" name="fa-check-circle"></igx-icon>
             </ng-template>
@@ -52,61 +45,28 @@ <h6>WC Chip</h6>
             </ng-template>
         </div>
 
-        <div class="preview__settings">
-            <igx-select
-                #model="ngModel"
-                [(ngModel)]="selected"
-                [ngModelOptions]="{standalone: true}"
-                [placeholder]="'Select chip variant'"
-                [style.--ig-size]="'var(--ig-size-small)'"
-                type="border" class="preview__variant-select">
-
-                <igx-select-item *ngFor="let type of chipTypes" [value]="type">
-                    {{type}}
-                </igx-select-item>
-            </igx-select>
-
-            <size-selector #sizeSelector></size-selector>
-
-            <igx-switch id="selectable" [(ngModel)]="isSelectable">
-                <label for="selectable">Selectable</label>
-            </igx-switch>
-
-            <igx-switch id="selected" [(ngModel)]="isSelected">
-                <label for="removable">Selected</label>
-            </igx-switch>
+        <ng-template #customControls>
+            <div class="custom-controls">
+                <igx-switch *ngIf="removable" id="customIcons" [(ngModel)]="customIcons">
+                    <label for="customIcons">Custom Icons</label>
+                </igx-switch>
 
-            <igx-switch id="removable"  [(ngModel)]="isRemovable">
-                <label for="removable">Removable</label>
-            </igx-switch>
+                <igx-switch id="addPrefix"  [(ngModel)]="hasPrefix">
+                    <label for="addPrefix">Add prefix</label>
+                </igx-switch>
 
-            <igx-switch *ngIf="isRemovable" id="customIcons" [(ngModel)]="customIcons">
-                <label for="customIcons">Custom Icons</label>
-            </igx-switch>
+                <igx-switch id="addSuffix"  [(ngModel)]="hasSuffix">
+                    <label for="addSuffix">Add suffix</label>
+                </igx-switch>
 
-            <igx-switch id="addPrefix"  [(ngModel)]="hasPrefix">
-                <label for="addPrefix">Add prefix</label>
-            </igx-switch>
+                <igx-switch id="hasAvatar" [(ngModel)]="hasAvatar">
+                    <label for="hasAvatar">Add avatar</label>
+                </igx-switch>
 
-            <igx-switch id="addSuffix"  [(ngModel)]="hasSuffix">
-                <label for="addSuffix">Add suffix</label>
-            </igx-switch>
-
-            <igx-switch id="hasAvatar" [(ngModel)]="hasAvatar">
-                <label for="hasAvatar">Add avatar</label>
-            </igx-switch>
-
-            <igx-switch id="hasProgressbar" [(ngModel)]="hasProgressbar">
-                <label for="hasProgressbar">Add progressbar</label>
-            </igx-switch>
-
-            <igx-switch id="draggable" [(ngModel)]="isDraggable">
-                <label for="draggable">Draggable</label>
-            </igx-switch>
-
-            <igx-switch id="disableChips"  [(ngModel)]="isDisabled">
-                <label for="disableChips">Disable chips</label>
-            </igx-switch>
-        </div>
+                <igx-switch id="hasProgressbar" [(ngModel)]="hasProgressbar">
+                    <label for="hasProgressbar">Add progressbar</label>
+                </igx-switch>
+            </div>
+        </ng-template>
     </div>
 </div>
diff --git a/src/app/chips-showcase/chips-showcase.sample.scss b/src/app/chips-showcase/chips-showcase.sample.scss
index e2d8424d45d..49fa8c1b01f 100644
--- a/src/app/chips-showcase/chips-showcase.sample.scss
+++ b/src/app/chips-showcase/chips-showcase.sample.scss
@@ -1,143 +1,25 @@
-@use '../../../projects/igniteui-angular/src/lib/core/styles/themes/utilities' as *;
-@use '../../../projects/igniteui-angular/src/lib/core/styles/components/chip/chip-component' as *;
-@use '../../../projects/igniteui-angular/src/lib/core/styles/components/chip/chip-theme' as *;
-
-igx-chip {
-    margin: rem(4px);
-}
-
 h6 {
     margin-top: 24px;
 }
 
-.sample-title {
-    font-size: 16px;
-    font-weight: 900;
-}
-
-$padding: 16px;
-
-.sample-min-width {
-    min-width: 650px !important;
-}
-
-.preview {
+.preview__sample {
     display: flex;
+    flex-direction: column;
     align-items: center;
-    justify-content: space-between;
-    border: 1px solid hsla(var(--ig-gray-300));
-    gap: $padding;
-    margin: 0 auto;
-
-    &__sample {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        padding: $padding;
-        gap: $padding;
-        flex: 1;
-    }
-
-    &__settings {
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-        background: hsla(var(--ig-gray-50));
-        border-left: 1px solid hsla(var(--ig-gray-300));
-        padding: $padding;
-    }
-
-    &__comp-size {
-        margin-block-end: 16px;
-    }
-
-    &__variant-select {
-        margin-block-end: 16px;
-    }
-
-    &__info {
-        text-align: center;
-    }
+    justify-content: center;
+    padding: 1rem;
+    gap: 1rem;
+    flex: 1;
+}
 
-    a {
+.custom-controls {
+   igx-switch {
         display: flex;
         align-items: center;
-        justify-content: center;
-        gap: 4px;
-        text-decoration: none;
-        color: hsla(var(--ig-secondary-600));
-        outline: none;
+        margin-bottom: 16px;
 
-        &:focus,
-        &:hover {
-            color: hsla(var(--ig-secondary-300));
+        label {
+            margin: 0;
         }
-    }
-}
-
-.sidebar-sample {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 20px;
-}
-
-.chip-column {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-bottom: 20px;
-}
-
-.sample-sub-title {
-    font-size: 18px;
-    font-weight: 900;
-    margin-top: 0;
-    margin-bottom: 0;
-}
-
-.chip-avatar {
-    width: rem(24px);
-    height: rem(24px);
-    min-width: rem(24px);
-}
-
-.chip-storyboard {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    gap: 20px;
-
-    igx-chip {
-        margin: rem(4px);
-    }
-}
-
-.chip-area-connector {
-    color: currentColor;
-    opacity: .54;
-}
-
-.wrapperAreaCc,
-.wrapperAreaTo {
-    display: flex;
-    align-items: center;
-    max-width: 640px;
-    border-bottom: 1px solid color($default-palette, 'gray', 400);
-    min-height: 48px;
-    flex-wrap: wrap;
-}
-
-.dropAreaCc,
-.dropAreaTo {
-    padding: 0 1rem;
-    margin: .25rem;
-    border-radius: 1rem;
-    visibility: hidden;
-
-    &.dragOver {
-        color: color($default-palette, 'gray', 700);
-        background-color: color($default-palette, 'gray', 200);
-    }
+   }
 }
diff --git a/src/app/chips-showcase/chips-showcase.sample.ts b/src/app/chips-showcase/chips-showcase.sample.ts
index b6857ed7d7a..1afa15169cf 100644
--- a/src/app/chips-showcase/chips-showcase.sample.ts
+++ b/src/app/chips-showcase/chips-showcase.sample.ts
@@ -1,4 +1,4 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { NgFor, NgIf } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import {
@@ -18,6 +18,8 @@ import {
 } from 'igniteui-angular';
 import { SizeSelectorComponent } from '../size-selector/size-selector.component';
 import { defineComponents, IgcChipComponent, IgcAvatarComponent, IgcButtonComponent, IgcIconButtonComponent, IgcCircularProgressComponent} from "igniteui-webcomponents";
+import { PropertyPanelConfig } from '../properties-panel/properties-panel.component';
+import { PropertyChangeService } from '../properties-panel/property-change.service';
 
 defineComponents(IgcChipComponent, IgcAvatarComponent, IgcButtonComponent, IgcIconButtonComponent, IgcCircularProgressComponent);
 
@@ -46,32 +48,85 @@ defineComponents(IgcChipComponent, IgcAvatarComponent, IgcButtonComponent, IgcIc
         SizeSelectorComponent
     ]
 })
-export class ChipsShowcaseSampleComponent {
-    public chipTypes = ['default', 'primary', 'info', 'success', 'warning', 'danger'];
-
-    public isDisabled = false;
-
-    public isRemovable = false;
-
-    public isSelectable = false;
+export class ChipsShowcaseSampleComponent implements OnInit {
+    @ViewChild('customControls', { static: true }) public customControlsTemplate!: TemplateRef<any>;
+
+    public panelConfig : PropertyPanelConfig = {
+        variant: {
+            control: {
+                type: 'select',
+                options: ['default', 'primary', 'info', 'success', 'warning', 'danger']
+            }
+        },
+        size: {
+            control: {
+                type: 'button-group',
+                options: ['small', 'medium', 'large'],
+                defaultValue: 'large'
+            }
+        },
+        disabled: {
+            control: {
+                type: 'boolean',
+                defaultValue: false
+            }
+        },
+        selectable: {
+            control: {
+                type: 'boolean',
+                defaultValue: false
+            }
+        },
+        selected: {
+            control: {
+                type: 'boolean',
+                defaultValue: false
+            }
+        },
+        removable: {
+            control: {
+                type: 'boolean',
+                defaultValue: false
+            }
+        },
+    }
 
-    public hasSuffix = false;
+    constructor(protected propertyChangeService: PropertyChangeService){}
 
-    public hasPrefix = false;
+    public ngOnInit() {
+        this.propertyChangeService.setPanelConfig(this.panelConfig);
+        this.propertyChangeService.setCustomControls(this.customControlsTemplate)
+    }
 
-    public hasAvatar = false;
+    protected get variant() {
+        return this.propertyChangeService.getProperty('variant');
+    }
 
-    public hasProgressbar = false;
+    protected get size() {
+        return this.propertyChangeService.getProperty('size');
+    }
 
-    public customIcons = false;
+    protected get disabled() {
+        return this.propertyChangeService.getProperty('disabled');
+    }
 
-    public isDraggable = false;
+    protected get removable() {
+        return this.propertyChangeService.getProperty('removable');
+    }
 
-    public selected: string;
+    protected get selectable() {
+        return this.propertyChangeService.getProperty('selectable');
+    }
 
-    public isSelected = false;
+    protected get selected() {
+        return this.propertyChangeService.getProperty('selected');
+    }
 
-    public size: string = 'large';
+    public hasSuffix = false;
+    public hasPrefix = false;
+    public hasAvatar = false;
+    public hasProgressbar = false;
+    public customIcons = false;
 
     public removeChip(chip: IgxChipComponent) {
         chip.nativeElement.remove();

From 9612434ca7c94ce1df1353278383db45e3903bd2 Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Thu, 17 Oct 2024 10:46:30 +0300
Subject: [PATCH 16/18] feat(dialog/dropdown/exp-panel): add properties panel

---
 .../dialog-showcase.sample.html               | 24 +++++---
 .../dialog-showcase.sample.scss               |  4 ++
 .../dialog-showcase/dialog-showcase.sample.ts | 51 ++++++++++++++---
 .../drop-down-showcase.sample.html            |  9 +--
 .../drop-down-showcase.sample.scss            |  2 +-
 .../drop-down-showcase.sample.ts              |  1 -
 .../expansion-panel-showcase-sample.html      | 10 ++--
 .../expansion-panel-showcase-sample.ts        | 56 ++++++++++++++++++-
 .../icon-button-showcase.sample.html          |  2 +-
 .../icon-button-showcase.sample.ts            | 10 ++++
 10 files changed, 140 insertions(+), 29 deletions(-)

diff --git a/src/app/dialog-showcase/dialog-showcase.sample.html b/src/app/dialog-showcase/dialog-showcase.sample.html
index 74dca196be1..56abc789937 100644
--- a/src/app/dialog-showcase/dialog-showcase.sample.html
+++ b/src/app/dialog-showcase/dialog-showcase.sample.html
@@ -4,9 +4,15 @@ <h4 class="sample-title">Angular Dialog</h4>
         <p class="sample-description">Detailed description to be added</p>
         <br>
         <button igxButton="contained" igxRipple (click)="dialog.open()">Trigger Dialog</button>
-        <igx-dialog #dialog title="Confirmation" leftButtonLabel="Cancel" (leftButtonSelect)="dialog.close()" rightButtonLabel="OK"
-                    (rightButtonSelect)="onDialogOKSelected($event)"
-                    message="Are you sure you want to delete the Microsoft_Annual_Report_2015.pdf and Microsoft_Annual_Report_2015.pdf files?">
+        <igx-dialog #dialog
+        [title]="title"
+        [closeOnEscape]="!keepOpenOnEscape"
+        [closeOnOutsideSelect]="closeOnOutsideClick"
+        leftButtonLabel="Cancel"
+        (leftButtonSelect)="dialog.close()"
+        rightButtonLabel="OK"
+        (rightButtonSelect)="onDialogOKSelected($event)"
+        message="Are you sure you want to delete the Microsoft_Annual_Report_2015.pdf and Microsoft_Annual_Report_2015.pdf files?">
         </igx-dialog>
     </article>
 
@@ -14,12 +20,14 @@ <h4 class="sample-title">Angular Dialog</h4>
         <h4 class="sample-title">WC Dialog</h4>
         <p class="sample-description">Detailed description to be added</p>
         <br>
-        <button igxButton="contained" igxRipple (click)="dialog.open()">Trigger Dialog</button>
-        <igc-dialog #dialog>
-            <span slot="title">Confirmation</span>
+        <button igxButton="contained" igxRipple (click)="dialogWC.show()">Trigger Dialog</button>
+        <igc-dialog #dialogWC
+        [title]="title"
+        [keepOpenOnEscape]="keepOpenOnEscape"
+        [closeOnOutsideClick]="closeOnOutsideClick">
             <span>Are you sure you want to delete the Microsoft_Annual_Report_2015.pdf and Microsoft_Annual_Report_2015.pdf files?</span>
-            <igc-button slot="footer" (click)="dialog.close()" variant="flat">Cancel</igc-button>
-            <igc-button slot="footer" (click)="onDialogOKSelected($event)" variant="contained">OK</igc-button>
+            <igc-button slot="footer" (click)="dialogWC.hide()" variant="flat">Cancel</igc-button>
+            <igc-button slot="footer" (click)="dialogWC.hide()" variant="flat">OK</igc-button>
         </igc-dialog>
     </article>
 </section>
diff --git a/src/app/dialog-showcase/dialog-showcase.sample.scss b/src/app/dialog-showcase/dialog-showcase.sample.scss
index f4a23705be2..dc22a6646ac 100644
--- a/src/app/dialog-showcase/dialog-showcase.sample.scss
+++ b/src/app/dialog-showcase/dialog-showcase.sample.scss
@@ -2,6 +2,10 @@
     max-width: 60vw;
 }
 
+igc-dialog::part(base) {
+    max-width: 30vw;
+}
+
 [igxButton] {
     max-width: 200px;
 }
diff --git a/src/app/dialog-showcase/dialog-showcase.sample.ts b/src/app/dialog-showcase/dialog-showcase.sample.ts
index 91c5a30b956..57fa3734670 100644
--- a/src/app/dialog-showcase/dialog-showcase.sample.ts
+++ b/src/app/dialog-showcase/dialog-showcase.sample.ts
@@ -1,6 +1,8 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit } from '@angular/core';
 import { IgxButtonDirective, IgxDialogActionsDirective, IgxDialogComponent, IgxDialogTitleDirective, IgxIconComponent, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxPrefixDirective, IgxRippleDirective, IgxSwitchComponent } from 'igniteui-angular';
 import { defineComponents, IgcDialogComponent, IgcButtonComponent} from "igniteui-webcomponents";
+import { PropertyPanelConfig } from '../properties-panel/properties-panel.component';
+import { PropertyChangeService } from '../properties-panel/property-change.service';
 
 defineComponents(IgcDialogComponent, IgcButtonComponent);
 
@@ -12,16 +14,51 @@ defineComponents(IgcDialogComponent, IgcButtonComponent);
     standalone: true,
     imports: [IgxButtonDirective, IgxRippleDirective, IgxSwitchComponent, IgxDialogComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxLabelDirective, IgxDialogTitleDirective, IgxDialogActionsDirective]
 })
-export class DialogShowcaseSampleComponent {
-    public onDialogOKSelected(args) {
-        // args.event - event
-        // args.dialog - dialog
+export class DialogShowcaseSampleComponent implements OnInit {
+    public panelConfig : PropertyPanelConfig = {
+        keepOpenOnEscape: {
+            label: 'Keep Open on Escape',
+            control: {
+                type: 'boolean'
+            }
+        },
+        closeOnOutsideClick: {
+            label: 'Close on Outside Click',
+            control: {
+                type: 'boolean'
+            }
+        },
+        title: {
+            control: {
+                type: 'text',
+                defaultValue: 'Confirmation'
+            }
+        }
+    }
+
+    constructor(private propertyChangeService: PropertyChangeService){}
+
+    public ngOnInit() {
+        this.propertyChangeService.setPanelConfig(this.panelConfig);
+    }
+
+    protected get keepOpenOnEscape() {
+        return this.propertyChangeService.getProperty('keepOpenOnEscape');
+    }
+
+    protected get closeOnOutsideClick() {
+        return this.propertyChangeService.getProperty('closeOnOutsideClick');
+    }
+
+    protected get title() {
+        return this.propertyChangeService.getProperty('title');
+    }
 
-        // perform OK action
+    protected onDialogOKSelected(args) {
         args.dialog.close();
     }
 
-    public closeDialog(evt) {
+    protected closeDialog(evt) {
         console.log(evt);
     }
 }
diff --git a/src/app/drop-down-showcase/drop-down-showcase.sample.html b/src/app/drop-down-showcase/drop-down-showcase.sample.html
index edbec0ba8d9..13e07b00d6b 100644
--- a/src/app/drop-down-showcase/drop-down-showcase.sample.html
+++ b/src/app/drop-down-showcase/drop-down-showcase.sample.html
@@ -12,15 +12,16 @@
 
     <div class="sample-wrapper">
         <strong>WC DropDown</strong>
-        <igc-dropdown id="dropdown2">
+        <igc-dropdown id="dropdownWC">
             <igc-button slot="target">Toggle</igc-button>
             <ng-container *ngFor="let item of items">
                 <ng-container *ngIf="item.header">
                     <igc-dropdown-header>{{ item.field }}</igc-dropdown-header>
                 </ng-container>
-                <igc-dropdown-item 
-                    [disabled]="item.disabled" 
-                    [selected]="item.selected" 
+                <igc-dropdown-item
+                    *ngIf="!item.header"
+                    [disabled]="item.disabled"
+                    [selected]="item.selected"
                     (click)="onSelection(item)">
                     {{ item.field }}
                 </igc-dropdown-item>
diff --git a/src/app/drop-down-showcase/drop-down-showcase.sample.scss b/src/app/drop-down-showcase/drop-down-showcase.sample.scss
index 09b38ce1b93..37ad14609fd 100644
--- a/src/app/drop-down-showcase/drop-down-showcase.sample.scss
+++ b/src/app/drop-down-showcase/drop-down-showcase.sample.scss
@@ -12,4 +12,4 @@ igc-dropdown::part(base) {
     height: 400px;
     width: 180px;
     overflow: auto;
-}
\ No newline at end of file
+}
diff --git a/src/app/drop-down-showcase/drop-down-showcase.sample.ts b/src/app/drop-down-showcase/drop-down-showcase.sample.ts
index c4970a26b26..b9922d027b7 100644
--- a/src/app/drop-down-showcase/drop-down-showcase.sample.ts
+++ b/src/app/drop-down-showcase/drop-down-showcase.sample.ts
@@ -22,7 +22,6 @@ import { defineComponents, IgcDropdownComponent, IgcButtonComponent} from "ignit
 
 defineComponents(IgcDropdownComponent, IgcButtonComponent);
 
-
 @Component({
     // eslint-disable-next-line @angular-eslint/component-selector
     selector: 'drop-down-showcase-sample',
diff --git a/src/app/expansion-panel-showcase/expansion-panel-showcase-sample.html b/src/app/expansion-panel-showcase/expansion-panel-showcase-sample.html
index 21977abfe36..1d992d93150 100644
--- a/src/app/expansion-panel-showcase/expansion-panel-showcase-sample.html
+++ b/src/app/expansion-panel-showcase/expansion-panel-showcase-sample.html
@@ -1,8 +1,8 @@
 <div class="flex-container">
     <div class="flex-item">
         <strong>Angular Expansion Panel</strong>
-        <igx-expansion-panel>
-            <igx-expansion-panel-header>
+        <igx-expansion-panel [collapsed]="!open">
+            <igx-expansion-panel-header [disabled]="disabled" [iconPosition]="indicatorPositionAngular">
                 <igx-expansion-panel-title>
                     The Expendables
                 </igx-expansion-panel-title>
@@ -18,10 +18,10 @@
             </igx-expansion-panel-body>
         </igx-expansion-panel>
     </div>
-    
+
     <div class="flex-item">
         <strong>WC Expansion Panel</strong>
-        <igc-expansion-panel>
+        <igc-expansion-panel [open]="open" [disabled]="disabled" [indicatorPosition]="indicatorPositionWC">
             <span slot="title">The Expendables</span>
             <span slot="subtitle">Action, Adventure, Thriller</span>
             <div>Barney Ross leads the "Expendables", a band of highly skilled
@@ -30,4 +30,4 @@
               Toll Road and loose-cannon sniper Gunner Jensen.</div>
        </igc-expansion-panel>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/expansion-panel-showcase/expansion-panel-showcase-sample.ts b/src/app/expansion-panel-showcase/expansion-panel-showcase-sample.ts
index 91e3c559dd2..0c293a5d51a 100644
--- a/src/app/expansion-panel-showcase/expansion-panel-showcase-sample.ts
+++ b/src/app/expansion-panel-showcase/expansion-panel-showcase-sample.ts
@@ -1,6 +1,8 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit } from '@angular/core';
 import { NgIf } from '@angular/common';
 import { IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelHeaderComponent, IgxExpansionPanelIconDirective, IgxExpansionPanelTitleDirective } from 'igniteui-angular';
+import { PropertyPanelConfig } from '../properties-panel/properties-panel.component';
+import { PropertyChangeService } from '../properties-panel/property-change.service';
 import { defineComponents, IgcExpansionPanelComponent} from "igniteui-webcomponents";
 
 defineComponents(IgcExpansionPanelComponent);
@@ -14,4 +16,54 @@ defineComponents(IgcExpansionPanelComponent);
     standalone: true,
     imports: [IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, NgIf, IgxExpansionPanelIconDirective, IgxExpansionPanelBodyComponent]
 })
-export class ExpansionPanelShowcaseSampleComponent {}
+export class ExpansionPanelShowcaseSampleComponent implements OnInit {
+    public panelConfig: PropertyPanelConfig = {
+        indicatorPosition: {
+            label: 'Indicator Position',
+            control: {
+                type: 'radio-inline',
+                options: ['start', 'end'],
+                defaultValue: 'start'
+            }
+        },
+        open: {
+            control: {
+                type: 'boolean'
+            }
+        },
+        disabled: {
+            control: {
+                type: 'boolean',
+                defaultValue: false
+            }
+        }
+    }
+
+    constructor(public propertyChangeService: PropertyChangeService) {}
+
+    public ngOnInit() {
+        this.propertyChangeService.setPanelConfig(this.panelConfig);
+    }
+
+    protected get open(){
+        return this.propertyChangeService.getProperty('open');
+    }
+
+    protected get disabled(){
+        return this.propertyChangeService.getProperty('disabled');
+    }
+
+    private indicatorPositionMap = {
+        start: 'left',
+        end: 'right'
+    };
+
+    protected get indicatorPositionWC(){
+        return this.propertyChangeService.getProperty('indicatorPosition');
+    }
+
+    protected get indicatorPositionAngular(){
+        const position = this.propertyChangeService.getProperty('indicatorPosition');
+        return this.indicatorPositionMap[position];
+    }
+}
diff --git a/src/app/icon-button-showcase/icon-button-showcase.sample.html b/src/app/icon-button-showcase/icon-button-showcase.sample.html
index 4a1292cf095..4080f63c86c 100644
--- a/src/app/icon-button-showcase/icon-button-showcase.sample.html
+++ b/src/app/icon-button-showcase/icon-button-showcase.sample.html
@@ -4,7 +4,7 @@ <h4 class="sample-title">Angular Icon Button</h4>
         <h4 class="sample-title">WC Icon Button</h4>
     </article>
 
-    <div class="buttons-sample">
+    <div class="buttons-sample" [style.--ig-size]="'var(--ig-size-' + size + ')'">
         <div class="button-sample">
             <button [igxIconButton]="variant" [disabled]="disabled">
                 <igx-icon>favorite</igx-icon>
diff --git a/src/app/icon-button-showcase/icon-button-showcase.sample.ts b/src/app/icon-button-showcase/icon-button-showcase.sample.ts
index 6d8f5141196..7f0f858afe0 100644
--- a/src/app/icon-button-showcase/icon-button-showcase.sample.ts
+++ b/src/app/icon-button-showcase/icon-button-showcase.sample.ts
@@ -20,6 +20,12 @@ registerIconFromText("favorite", favorite );
 })
 export class IconButtonShowcaseSampleComponent implements OnInit {
     public panelConfig: PropertyPanelConfig = {
+        size: {
+            control: {
+                type: "button-group",
+                options: ['small', 'medium', 'large'],
+            }
+        },
         variant: {
             control: {
                 type: "button-group",
@@ -41,6 +47,10 @@ export class IconButtonShowcaseSampleComponent implements OnInit {
         this.propertyChangeService.setPanelConfig(this.panelConfig);
     }
 
+    protected get size() {
+        return this.propertyChangeService.getProperty('size');
+    }
+
     protected get variant() {
         return this.propertyChangeService.getProperty('variant');
     }

From e5d89ce2a81393c333ecf5418789f8fdfe4fc9ef Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Thu, 17 Oct 2024 14:33:47 +0300
Subject: [PATCH 17/18] feat(demos): separate inputs sample and add properties
 panel

---
 src/app/app.component.ts                      |  18 ++-
 src/app/app.routes.ts                         |  20 +++-
 .../checkbox-showcase.sample.html             |  33 ++++++
 .../checkbox-showcase.sample.scss             |   4 +
 .../checkbox-showcase.sample.ts               | 106 ++++++++++++++++++
 .../inputs-showcase.sample.html               |  51 ---------
 .../inputs-showcase.sample.scss               |  27 -----
 .../inputs-showcase/inputs-showcase.sample.ts |  65 -----------
 .../radio-showcase/radio-showcase.sample.html |  35 ++++++
 .../radio-showcase/radio-showcase.sample.scss |   4 +
 .../radio-showcase/radio-showcase.sample.ts   |  95 ++++++++++++++++
 .../switch-showcase.sample.html               |  31 +++++
 .../switch-showcase.sample.scss               |   4 +
 .../switch-showcase/switch-showcase.sample.ts |  96 ++++++++++++++++
 14 files changed, 437 insertions(+), 152 deletions(-)
 create mode 100644 src/app/checkbox-showcase/checkbox-showcase.sample.html
 create mode 100644 src/app/checkbox-showcase/checkbox-showcase.sample.scss
 create mode 100644 src/app/checkbox-showcase/checkbox-showcase.sample.ts
 delete mode 100644 src/app/inputs-showcase/inputs-showcase.sample.html
 delete mode 100644 src/app/inputs-showcase/inputs-showcase.sample.scss
 delete mode 100644 src/app/inputs-showcase/inputs-showcase.sample.ts
 create mode 100644 src/app/radio-showcase/radio-showcase.sample.html
 create mode 100644 src/app/radio-showcase/radio-showcase.sample.scss
 create mode 100644 src/app/radio-showcase/radio-showcase.sample.ts
 create mode 100644 src/app/switch-showcase/switch-showcase.sample.html
 create mode 100644 src/app/switch-showcase/switch-showcase.sample.scss
 create mode 100644 src/app/switch-showcase/switch-showcase.sample.ts

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 63f281f321b..d3b85e2d551 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -744,6 +744,11 @@ export class AppComponent implements OnInit {
             icon: 'radio_button_unchecked',
             name: 'Carousel'
         },
+        {
+            link: '/checkbox-showcase',
+            icon: 'radio_button_unchecked',
+            name: 'Checkbox'
+        },
         {
             link: '/chip-showcase',
             icon: 'radio_button_unchecked',
@@ -785,14 +790,14 @@ export class AppComponent implements OnInit {
             name: 'Input Group'
         },
         {
-            link: '/inputs-showcase',
+            link: '/list-showcase',
             icon: 'radio_button_unchecked',
-            name: 'Inputs'
+            name: 'List'
         },
         {
-            link: '/list-showcase',
+            link: '/radio-showcase',
             icon: 'radio_button_unchecked',
-            name: 'List'
+            name: 'Radio'
         },
         {
             link: '/select-showcase',
@@ -814,6 +819,11 @@ export class AppComponent implements OnInit {
             icon: 'radio_button_unchecked',
             name: 'Stepper'
         },
+        {
+            link: '/switch-showcase',
+            icon: 'radio_button_unchecked',
+            name: 'Switch'
+        },
         {
             link: '/tabs-showcase',
             icon: 'radio_button_unchecked',
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 32a2f680b73..21a26069d67 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -12,6 +12,7 @@ import { CardSampleComponent } from './card/card.sample';
 import { CardShowcaseSampleComponent } from './card-showcase/card-showcase.sample';
 import { CarouselSampleComponent } from './carousel/carousel.sample';
 import { CarouselShowcaseSampleComponent } from './carousel-showcase/carousel-showcase.sample';
+import { CheckboxShowcaseSampleComponent } from './checkbox-showcase/checkbox-showcase.sample';
 import { ChipsSampleComponent } from './chips/chips.sample';
 import { ChipsShowcaseSampleComponent } from './chips-showcase/chips-showcase.sample';
 import { ExpansionPanelSampleComponent } from './expansion-panel/expansion-panel-sample';
@@ -25,7 +26,6 @@ import { MaskSampleComponent } from './mask/mask.sample';
 import { IconSampleComponent } from './icon/icon.sample';
 import { IconButtonShowcaseSampleComponent } from './icon-button-showcase/icon-button-showcase.sample';
 import { InputSampleComponent } from './input/input.sample';
-import { InputsShowcaseSampleComponent } from './inputs-showcase/inputs-showcase.sample';
 import { InputGroupSampleComponent } from './input-group/input-group.sample';
 import { InputGroupShowcaseSampleComponent } from './input-group-showcase/input-group-showcase.sample';
 import { LayoutSampleComponent } from './layout/layout.sample';
@@ -42,6 +42,7 @@ import { SliderShowcaseSampleComponent } from './slider-showcase/slider-showcase
 import { SplitterSampleComponent } from './splitter/splitter.sample';
 import { SnackbarSampleComponent } from './snackbar/snackbar.sample';
 import { SnackbarShowcaseSampleComponent } from './snackbar-showcase/snackbar-showcase.sample';
+import { SwitchShowcaseSampleComponent } from './switch-showcase/switch-showcase.sample';
 import { ColorsSampleComponent } from './styleguide/colors/color.sample';
 import { ShadowsSampleComponent } from './styleguide/shadows/shadows.sample';
 import { TypographySampleComponent } from './styleguide/typography/typography.sample';
@@ -92,6 +93,7 @@ import { OverlaySampleComponent } from './overlay/overlay.sample';
 import { OverlayAnimationSampleComponent } from './overlay/overlay-animation.sample';
 import { OverlayPresetsSampleComponent } from './overlay/overlay-presets.sample';
 import { RadioSampleComponent } from './radio/radio.sample';
+import { RadioShowcaseSampleComponent } from './radio-showcase/radio-showcase.sample';
 import { TooltipSampleComponent } from './tooltip/tooltip.sample';
 import { GridCellStylingSampleComponent } from './gird-cell-styling/grid-cell-styling.sample';
 import { GridRowEditSampleComponent } from './grid-row-edit/grid-row-edit-sample.component';
@@ -253,6 +255,10 @@ export const appRoutes: Routes = [
         path: 'carousel-showcase',
         component: CarouselShowcaseSampleComponent
     },
+    {
+        path: 'checkbox-showcase',
+        component: CheckboxShowcaseSampleComponent
+    },
     {
         path: 'combo',
         component: ComboSampleComponent
@@ -337,10 +343,6 @@ export const appRoutes: Routes = [
         path: 'inputs',
         component: InputSampleComponent
     },
-    {
-        path: 'inputs-showcase',
-        component: InputsShowcaseSampleComponent
-    },
     {
         path: 'input-group',
         component: InputGroupSampleComponent
@@ -409,6 +411,10 @@ export const appRoutes: Routes = [
         path: 'radio',
         component: RadioSampleComponent
     },
+    {
+        path: 'radio-showcase',
+        component: RadioShowcaseSampleComponent
+    },
     {
         path: 'rating',
         component: RatingSampleComponent
@@ -445,6 +451,10 @@ export const appRoutes: Routes = [
         path: 'snackbar-showcase',
         component: SnackbarShowcaseSampleComponent
     },
+    {
+        path: 'switch-showcase',
+        component: SwitchShowcaseSampleComponent
+    },
     {
         path: 'colors',
         component: ColorsSampleComponent
diff --git a/src/app/checkbox-showcase/checkbox-showcase.sample.html b/src/app/checkbox-showcase/checkbox-showcase.sample.html
new file mode 100644
index 00000000000..1f0cd5031f3
--- /dev/null
+++ b/src/app/checkbox-showcase/checkbox-showcase.sample.html
@@ -0,0 +1,33 @@
+<div class="wrapper">
+    <article class="sample-column">
+        <h4 class="sample-title">Angular Checkbox</h4>
+
+        <igx-checkbox
+        [indeterminate]="indeterminate"
+        [required]="required"
+        [disabled]="disabled"
+        [invalid]="invalid"
+        [checked]="checked"
+        [labelPosition]="labelPosition"
+        [name]="name"
+        [value]="value">
+            Label
+        </igx-checkbox>
+    </article>
+
+    <article class="sample-column">
+        <h4 class="sample-title">WC Checkbox</h4>
+
+        <igc-checkbox
+        [indeterminate]="indeterminate"
+        [required]="required"
+        [disabled]="disabled"
+        [invalid]="invalid"
+        [checked]="checked"
+        [labelPosition]="labelPosition"
+        [name]="name"
+        [value]="value">
+            Label
+        </igc-checkbox>
+    </article>
+</div>
diff --git a/src/app/checkbox-showcase/checkbox-showcase.sample.scss b/src/app/checkbox-showcase/checkbox-showcase.sample.scss
new file mode 100644
index 00000000000..9df693180a4
--- /dev/null
+++ b/src/app/checkbox-showcase/checkbox-showcase.sample.scss
@@ -0,0 +1,4 @@
+.wrapper {
+    display: inline-grid;
+    grid-template-columns: 1fr 1fr;
+}
diff --git a/src/app/checkbox-showcase/checkbox-showcase.sample.ts b/src/app/checkbox-showcase/checkbox-showcase.sample.ts
new file mode 100644
index 00000000000..6cbce85e2ee
--- /dev/null
+++ b/src/app/checkbox-showcase/checkbox-showcase.sample.ts
@@ -0,0 +1,106 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit } from '@angular/core';
+import { IgxCheckboxComponent } from 'igniteui-angular';
+import { defineComponents, IgcCheckboxComponent} from "igniteui-webcomponents";
+import { PropertyPanelConfig } from '../properties-panel/properties-panel.component';
+import { PropertyChangeService } from '../properties-panel/property-change.service';
+
+defineComponents(IgcCheckboxComponent);
+
+@Component({
+    selector: 'app-checkbox-showcase-sample',
+    styleUrls: ['checkbox-showcase.sample.scss'],
+    templateUrl: 'checkbox-showcase.sample.html',
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    standalone: true,
+    imports: [IgxCheckboxComponent]
+})
+export class CheckboxShowcaseSampleComponent implements OnInit {
+    public panelConfig : PropertyPanelConfig = {
+        indeterminate: {
+            control: {
+                type: 'boolean',
+                defaultValue: false
+            }
+        },
+        required: {
+            control: {
+                type: 'boolean',
+                defaultValue: false
+            }
+        },
+        disabled: {
+            control: {
+                type: 'boolean',
+                defaultValue: false
+            }
+        },
+        invalid: {
+            control: {
+                type: 'boolean',
+                defaultValue: false
+            }
+        },
+        checked: {
+            control: {
+                type: 'boolean',
+                defaultValue: false
+            }
+        },
+        labelPosition: {
+            control: {
+                type: 'button-group',
+                options: ['before', 'after'],
+                defaultValue: 'after'
+            }
+        },
+        name: {
+            control: {
+                type: 'text'
+            }
+        },
+        value: {
+            control: {
+                type: 'text'
+            }
+        },
+    }
+
+    constructor(private propertyChangeService : PropertyChangeService) {}
+
+    public ngOnInit() {
+        this.propertyChangeService.setPanelConfig(this.panelConfig);
+    }
+
+    protected get indeterminate() {
+        return this.propertyChangeService.getProperty('indeterminate');
+    }
+
+    protected get required() {
+        return this.propertyChangeService.getProperty('required');
+    }
+
+    protected get disabled() {
+        return this.propertyChangeService.getProperty('disabled');
+    }
+
+    protected get invalid() {
+        return this.propertyChangeService.getProperty('invalid');
+    }
+
+    protected get checked() {
+        return this.propertyChangeService.getProperty('checked');
+    }
+
+    protected get labelPosition() {
+        return this.propertyChangeService.getProperty('labelPosition');
+    }
+
+    protected get name() {
+        return this.propertyChangeService.getProperty('name');
+    }
+
+    protected get value() {
+        return this.propertyChangeService.getProperty('value');
+    }
+
+}
diff --git a/src/app/inputs-showcase/inputs-showcase.sample.html b/src/app/inputs-showcase/inputs-showcase.sample.html
deleted file mode 100644
index 9df0255db62..00000000000
--- a/src/app/inputs-showcase/inputs-showcase.sample.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<section class="sample-content">
-    <article class="sample-column">
-        <h4 class="sample-title">Angular inputs</h4>
-
-        <div class="radio-group">
-            <igx-radio *ngFor="let item of ['Male', 'Female']" value="{{item}}" name="group" [(ngModel)]="user.gender" (click)="onClick($event)"
-                (change)="onRadioChanged($event)">{{item}}</igx-radio>
-        </div>
-    </article>
-
-    <article class="sample-column">
-        <h4 class="sample-title">WC inputs</h4>
-
-        <igc-radio-group name="group">
-            <igc-radio checked value="Male">Male</igc-radio>
-            <igc-radio value="Female">Female</igc-radio>
-        </igc-radio-group>
-    </article>
-
-    <article class="sample-column">
-        <igx-switch>
-            Label
-        </igx-switch>
-        <igx-switch disabled>
-            Label
-        </igx-switch>
-    </article>
-
-    <article class="sample-column">
-        <igc-switch>Label</igc-switch>
-        <igc-switch disabled>Label</igc-switch>
-    </article>
-
-    <article class="sample-column">
-        <igx-checkbox>
-            Label
-        </igx-checkbox>
-        <igx-checkbox disabled>
-            Label
-        </igx-checkbox>
-    </article>
-
-    <article class="sample-column">
-        <igc-checkbox>
-            Label
-        </igc-checkbox>
-        <igc-checkbox disabled>
-            Label
-        </igc-checkbox>
-    </article>
-</section>
diff --git a/src/app/inputs-showcase/inputs-showcase.sample.scss b/src/app/inputs-showcase/inputs-showcase.sample.scss
deleted file mode 100644
index 899d434ba2c..00000000000
--- a/src/app/inputs-showcase/inputs-showcase.sample.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-.form-title {
-    margin-bottom: 16px;
-}
-
-igx-input-group + igx-input-group {
-    margin-top: 32px;
-}
-
-.radio-group {
-    display: flex;
-    flex-flow: column nowrap;
-}
-
-.settings {
-    margin-left: 16px;
-    width: 100%;
-    justify-content: space-between;
-}
-
-:host button {
-    align-self: flex-start;
-    margin-top: 1.5rem;
-}
-
-igx-switch, igc-switch {
-    margin-bottom: 16px;
-}
diff --git a/src/app/inputs-showcase/inputs-showcase.sample.ts b/src/app/inputs-showcase/inputs-showcase.sample.ts
deleted file mode 100644
index 5b39fbef9c7..00000000000
--- a/src/app/inputs-showcase/inputs-showcase.sample.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { Component, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { NgFor } from '@angular/common';
-import { UntypedFormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { IChangeCheckboxEventArgs, IGX_INPUT_GROUP_DIRECTIVES, IGX_LIST_DIRECTIVES, IgxAvatarComponent, IgxButtonDirective, IgxCheckboxComponent, IgxIconComponent, IgxRadioComponent, IgxSwitchComponent } from 'igniteui-angular';
-import { defineComponents, IgcRadioComponent, IgcRadioGroupComponent, IgcSwitchComponent, IgcCheckboxComponent} from "igniteui-webcomponents";
-
-defineComponents(IgcRadioComponent, IgcRadioGroupComponent, IgcSwitchComponent, IgcCheckboxComponent);
-
-@Component({
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    selector: 'app-input-showcase-sample',
-    styleUrls: ['inputs-showcase.sample.scss'],
-    templateUrl: 'inputs-showcase.sample.html',
-    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    standalone: true,
-    imports: [FormsModule, NgFor, ReactiveFormsModule, IGX_INPUT_GROUP_DIRECTIVES, IGX_LIST_DIRECTIVES, IgxSwitchComponent, IgxIconComponent, IgxCheckboxComponent, IgxAvatarComponent, IgxRadioComponent, IgxButtonDirective]
-})
-export class InputsShowcaseSampleComponent {
-    public placeholder = 'Please enter a value';
-    public placeholderDate = new Date();
-    public selected = 'option1';
-    public airplaneMode = false;
-    public isToggled = false;
-    public isToggledWC = false; // Initial state
-
-    public myForm = this.fb.group({
-        checkbox: [],
-        switch: []
-    });
-
-    public user = {
-        comment: '',
-        firstName: 'John',
-        gender: 'Male',
-        lastName: 'Doe',
-        password: '1337s3cr3t',
-        registered: false,
-        subscribed: false,
-        dateOfBirth: new Date('07 July, 1987')
-    };
-    public user2 = {
-        comment: '',
-        firstName: 'John',
-        gender: 'Male',
-        lastName: 'Doe',
-        password: '1337s3cr3t',
-        registered: true,
-        subscribed: false,
-        dateOfBirth: new Date('01 July, 1954')
-    };
-
-    constructor(private fb: UntypedFormBuilder) {}
-
-    public onClick(event: MouseEvent) {
-        console.log(event);
-    }
-
-    public onChange(value: string) {
-        console.log(value);
-    }
-
-    public onRadioChanged(event: IChangeCheckboxEventArgs) {
-        console.log(event);
-    }
-}
diff --git a/src/app/radio-showcase/radio-showcase.sample.html b/src/app/radio-showcase/radio-showcase.sample.html
new file mode 100644
index 00000000000..5b4e0d07e4b
--- /dev/null
+++ b/src/app/radio-showcase/radio-showcase.sample.html
@@ -0,0 +1,35 @@
+<section class="wrapper">
+    <article class="sample-column">
+        <h4 class="sample-title">Angular Radio</h4>
+
+        <igx-radio-group name="angGroup" value="Bar" [required]="required" [alignment]="alignment">
+            <igx-radio [checked]="checked"
+            [disabled]="disabled"
+            [invalid]="invalid"
+            [labelPosition]="labelPosition"
+            value="Foo">Foo</igx-radio>
+
+            <igx-radio
+            [disabled]="disabled"
+            [invalid]="invalid"
+            [labelPosition]="labelPosition"
+            value="Bar">Bar</igx-radio>
+        </igx-radio-group>
+    </article>
+
+    <article class="sample-column">
+        <h4 class="sample-title">WC Radio</h4>
+
+        <igc-radio-group name="wcGroup" value="Bar" [alignment]="alignment">
+            <igc-radio [checked]="checked" [required]="required"
+            [disabled]="disabled" [invalid]="invalid"
+            [labelPosition]="labelPosition"
+            value="Foo">Foo</igc-radio>
+
+            <igc-radio [disabled]="disabled"
+            [invalid]="invalid"
+            [labelPosition]="labelPosition"
+            value="Bar">Bar</igc-radio>
+        </igc-radio-group>
+    </article>
+</section>
diff --git a/src/app/radio-showcase/radio-showcase.sample.scss b/src/app/radio-showcase/radio-showcase.sample.scss
new file mode 100644
index 00000000000..9df693180a4
--- /dev/null
+++ b/src/app/radio-showcase/radio-showcase.sample.scss
@@ -0,0 +1,4 @@
+.wrapper {
+    display: inline-grid;
+    grid-template-columns: 1fr 1fr;
+}
diff --git a/src/app/radio-showcase/radio-showcase.sample.ts b/src/app/radio-showcase/radio-showcase.sample.ts
new file mode 100644
index 00000000000..53fe2831022
--- /dev/null
+++ b/src/app/radio-showcase/radio-showcase.sample.ts
@@ -0,0 +1,95 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IgxRadioComponent, IgxRadioGroupDirective, RadioGroupAlignment } from 'igniteui-angular';
+import { defineComponents, IgcRadioComponent, IgcRadioGroupComponent} from "igniteui-webcomponents";
+import { PropertyPanelConfig } from '../properties-panel/properties-panel.component';
+import { PropertyChangeService } from '../properties-panel/property-change.service';
+
+defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
+
+@Component({
+    selector: 'app-radio-showcase-sample',
+    styleUrls: ['radio-showcase.sample.scss'],
+    templateUrl: 'radio-showcase.sample.html',
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    standalone: true,
+    imports: [IgxRadioComponent, IgxRadioGroupDirective, CommonModule]
+})
+export class RadioShowcaseSampleComponent implements OnInit {
+    public panelConfig : PropertyPanelConfig = {
+        alignment: {
+            control: {
+                type: 'button-group',
+                options: ['vertical', 'horizontal']
+            }
+        },
+        labelPosition: {
+            label: 'Label Position',
+            control: {
+                type: 'button-group',
+                options: ['before', 'after'],
+                defaultValue: 'after'
+            }
+        },
+        checked: {
+            control: {
+                type: 'boolean',
+                defaultValue: false
+            }
+        },
+        required: {
+            control: {
+                type: 'boolean',
+                defaultValue: false
+            }
+        },
+        disabled: {
+            control: {
+                type: 'boolean',
+                defaultValue: false
+            }
+        },
+        invalid: {
+            control: {
+                type: 'boolean',
+                defaultValue: false
+            }
+        },
+    }
+
+    constructor(private propertyChangeService : PropertyChangeService) {}
+
+    public ngOnInit() {
+        this.propertyChangeService.setPanelConfig(this.panelConfig);
+    }
+
+    private alignmentMap = {
+        vertical: RadioGroupAlignment.vertical,
+        horizontal: RadioGroupAlignment.horizontal,
+    };
+
+    public get alignment(): RadioGroupAlignment {
+        const alignment = this.propertyChangeService.getProperty('alignment');
+        return this.alignmentMap[alignment] || RadioGroupAlignment.vertical;
+    }
+
+    protected get required() {
+        return this.propertyChangeService.getProperty('required');
+    }
+
+    protected get disabled() {
+        return this.propertyChangeService.getProperty('disabled');
+    }
+
+    protected get invalid() {
+        return this.propertyChangeService.getProperty('invalid');
+    }
+
+    protected get checked() {
+        return this.propertyChangeService.getProperty('checked');
+    }
+
+    protected get labelPosition() {
+        return this.propertyChangeService.getProperty('labelPosition');
+    }
+}
diff --git a/src/app/switch-showcase/switch-showcase.sample.html b/src/app/switch-showcase/switch-showcase.sample.html
new file mode 100644
index 00000000000..bc741064b2a
--- /dev/null
+++ b/src/app/switch-showcase/switch-showcase.sample.html
@@ -0,0 +1,31 @@
+<section class="wrapper">
+    <article class="sample-column">
+        <h4 class="sample-title">Angular Switch</h4>
+
+        <igx-switch
+        [required]="required"
+        [disabled]="disabled"
+        [invalid]="invalid"
+        [checked]="checked"
+        [labelPosition]="labelPosition"
+        [name]="name"
+        [value]="value">
+            Label
+        </igx-switch>
+    </article>
+
+    <article class="sample-column">
+        <h4 class="sample-title">WC Switch</h4>
+
+        <igc-switch
+        [required]="required"
+        [disabled]="disabled"
+        [invalid]="invalid"
+        [checked]="checked"
+        [labelPosition]="labelPosition"
+        [name]="name"
+        [value]="value">
+            Label
+        </igc-switch>
+    </article>
+</section>
diff --git a/src/app/switch-showcase/switch-showcase.sample.scss b/src/app/switch-showcase/switch-showcase.sample.scss
new file mode 100644
index 00000000000..9df693180a4
--- /dev/null
+++ b/src/app/switch-showcase/switch-showcase.sample.scss
@@ -0,0 +1,4 @@
+.wrapper {
+    display: inline-grid;
+    grid-template-columns: 1fr 1fr;
+}
diff --git a/src/app/switch-showcase/switch-showcase.sample.ts b/src/app/switch-showcase/switch-showcase.sample.ts
new file mode 100644
index 00000000000..6f9be730ced
--- /dev/null
+++ b/src/app/switch-showcase/switch-showcase.sample.ts
@@ -0,0 +1,96 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit } from '@angular/core';
+import { IgxSwitchComponent } from 'igniteui-angular';
+import { defineComponents, IgcSwitchComponent} from "igniteui-webcomponents";
+import { PropertyPanelConfig } from '../properties-panel/properties-panel.component';
+import { PropertyChangeService } from '../properties-panel/property-change.service';
+
+defineComponents(IgcSwitchComponent);
+
+@Component({
+    selector: 'app-switch-showcase-sample',
+    styleUrls: ['switch-showcase.sample.scss'],
+    templateUrl: 'switch-showcase.sample.html',
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    standalone: true,
+    imports: [IgxSwitchComponent]
+})
+export class SwitchShowcaseSampleComponent implements OnInit {
+    public panelConfig : PropertyPanelConfig = {
+        required: {
+            control: {
+                type: 'boolean',
+                defaultValue: false
+            }
+        },
+        disabled: {
+            control: {
+                type: 'boolean',
+                defaultValue: false
+            }
+        },
+        invalid: {
+            control: {
+                type: 'boolean',
+                defaultValue: false
+            }
+        },
+        checked: {
+            control: {
+                type: 'boolean',
+                defaultValue: false
+            }
+        },
+        labelPosition: {
+            control: {
+                type: 'button-group',
+                options: ['before', 'after'],
+                defaultValue: 'after'
+            }
+        },
+        name: {
+            control: {
+                type: 'text'
+            }
+        },
+        value: {
+            control: {
+                type: 'text'
+            }
+        },
+    }
+
+    constructor(private propertyChangeService : PropertyChangeService) {}
+
+    public ngOnInit() {
+        this.propertyChangeService.setPanelConfig(this.panelConfig);
+    }
+
+    protected get required() {
+        return this.propertyChangeService.getProperty('required');
+    }
+
+    protected get disabled() {
+        return this.propertyChangeService.getProperty('disabled');
+    }
+
+    protected get invalid() {
+        return this.propertyChangeService.getProperty('invalid');
+    }
+
+    protected get checked() {
+        return this.propertyChangeService.getProperty('checked');
+    }
+
+    protected get labelPosition() {
+        return this.propertyChangeService.getProperty('labelPosition');
+    }
+
+    protected get name() {
+        return this.propertyChangeService.getProperty('name');
+    }
+
+    protected get value() {
+        return this.propertyChangeService.getProperty('value');
+    }
+
+}

From 5922fe25a333aff74fb1470e8de92451349c074f Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Thu, 17 Oct 2024 17:11:49 +0300
Subject: [PATCH 18/18] feat(slider): add properties panel to slider sample

---
 .../slider-showcase.sample.html               |  40 +++-
 .../slider-showcase/slider-showcase.sample.ts | 180 ++++++++++++++++--
 2 files changed, 199 insertions(+), 21 deletions(-)

diff --git a/src/app/slider-showcase/slider-showcase.sample.html b/src/app/slider-showcase/slider-showcase.sample.html
index 599c48599d2..e37e0372a2c 100644
--- a/src/app/slider-showcase/slider-showcase.sample.html
+++ b/src/app/slider-showcase/slider-showcase.sample.html
@@ -2,21 +2,43 @@
 <article class="sample-item">
     <strong>Angular Slider</strong>
     <igx-slider
-        [showTicks]="true"
-        [primaryTickLabels]="primaryTickLabels"
-        [secondaryTickLabels]="secondaryTickLabels"
-        [ticksOrientation]="ticksOrientation"
-        [labels]="labels"
-        [secondaryTicks]="4">
+        [value]="value"
+        [disabled]="disabled"
+        [minValue]="minValue"
+        [maxValue]="maxValue"
+        [step]="step"
+        [primaryTickLabels]="!primaryTickLabels"
+        [secondaryTickLabels]="!secondaryTickLabels"
+        [ticksOrientation]="ticksOrientationAngular"
+        [tickLabelsOrientation]="angularTickLabelOrientation"
+        [primaryTicks]="primaryTicks"
+        [secondaryTicks]="secondaryTicks"
+        [lowerBound]="lowerBound"
+        [upperBound]="upperBound"
+        [showTicks]="primaryTicks || secondaryTicks">
     </igx-slider>
 </article>
 
 <article class="sample-item">
     <strong>WC Slider</strong>
-    <igc-slider primary-ticks="7" secondary-ticks="4" discrete-track>
-    <ng-container *ngFor="let label of labels">
+    <igc-slider
+    [value]="value"
+    [disabled]="disabled"
+    [min]="minValue"
+    [max]="maxValue"
+    [step]="step"
+    [tickOrientation]="ticksOrientationWC"
+    [tickLabelRotation]="wcTickLabelOrientation"
+    [primaryTicks]="primaryTicks"
+    [secondaryTicks]="secondaryTicks"
+    [lowerBound]="lowerBound"
+    [upperBound]="upperBound"
+    [hidePrimaryLabels]="primaryTickLabels"
+    [hideSecondaryLabels]="secondaryTickLabels"
+    [attr.discrete-track]="step > 1 ? true : null">
+    <!-- <ng-container *ngFor="let label of labels">
         <igc-slider-label>{{ label }}</igc-slider-label>
-    </ng-container>
+    </ng-container> -->
     </igc-slider>
 </article>
 </div>
diff --git a/src/app/slider-showcase/slider-showcase.sample.ts b/src/app/slider-showcase/slider-showcase.sample.ts
index 2d32a294d9e..5d50645e926 100644
--- a/src/app/slider-showcase/slider-showcase.sample.ts
+++ b/src/app/slider-showcase/slider-showcase.sample.ts
@@ -1,8 +1,8 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { NgFor } from '@angular/common';
-import { IgxSliderType, TickLabelsOrientation, TicksOrientation, IgxButtonDirective, IgxSliderComponent, IgxTickLabelTemplateDirective } from 'igniteui-angular';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit } from '@angular/core';
+import { TicksOrientation, IgxSliderComponent, TickLabelsOrientation } from 'igniteui-angular';
 import { defineComponents, IgcSliderComponent, IgcSliderLabelComponent } from 'igniteui-webcomponents';
+import { PropertyPanelConfig } from '../properties-panel/properties-panel.component';
+import { PropertyChangeService } from '../properties-panel/property-change.service';
 
 defineComponents(IgcSliderComponent, IgcSliderLabelComponent);
 
@@ -12,13 +12,169 @@ defineComponents(IgcSliderComponent, IgcSliderLabelComponent);
     templateUrl: 'slider-showcase.sample.html',
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
     standalone: true,
-    imports: [IgxSliderComponent, FormsModule, IgxTickLabelTemplateDirective, IgxButtonDirective, NgFor]
+    imports: [IgxSliderComponent]
 })
-export class SliderShowcaseSampleComponent {
-    public labelOrientaion: TickLabelsOrientation = TickLabelsOrientation.Horizontal;
-    public ticksOrientation: TicksOrientation = TicksOrientation.Bottom;
-    public primaryTickLabels = true;
-    public secondaryTickLabels = true;
-    public sliderType: IgxSliderType = IgxSliderType.SLIDER;
-    public labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+export class SliderShowcaseSampleComponent implements OnInit {
+    public panelConfig : PropertyPanelConfig = {
+        value: {
+            control: {
+                type: 'number'
+            }
+        },
+        minValue: {
+            label: 'Min Value',
+            control: {
+                type: 'number'
+            }
+        },
+        maxValue: {
+            label: 'Max Value',
+            control: {
+                type: 'number'
+            }
+        },
+        step: {
+            control: {
+                type: 'number'
+            }
+        },
+        lowerBound: {
+            label: 'Lower Bound',
+            control: {
+                type: 'number'
+            }
+        },
+        upperBound: {
+            label: 'Upper Bound',
+            control: {
+                type: 'number'
+            }
+        },
+        primaryTicks: {
+            label: 'Primary Ticks',
+            control: {
+                type: 'number'
+            }
+        },
+        secondaryTicks: {
+            label: 'Secondary Ticks',
+            control: {
+                type: 'number'
+            }
+        },
+        ticksOrientation: {
+            label: 'Ticks Orientation',
+            control: {
+                type: 'button-group',
+                options: ['mirror', 'start', 'end'],
+                defaultValue: 'end'
+            }
+        },
+        tickLabelOrientation: {
+            label: 'Tick Label Orientation',
+            control: {
+                type: 'button-group',
+                options: ['0', '90', '-90'],
+                labels: ['horizontal', 'top to bottom', 'bottom to top'],
+                defaultValue: '0'
+            }
+        },
+        disabled: {
+            control: {
+                type: 'boolean'
+            }
+        },
+        primaryTickLabels: {
+            label: 'Hide Primary Tick Labels',
+            control: {
+                type: 'boolean'
+            }
+        },
+        secondaryTickLabels: {
+            label: 'Hide Secondary Tick Labels',
+            control: {
+                type: 'boolean'
+            }
+        }
+    }
+
+    constructor(protected propertyChangeService: PropertyChangeService) {}
+
+    public ngOnInit() {
+        this.propertyChangeService.setPanelConfig(this.panelConfig);
+    }
+
+    private ticksOrientationMap = {
+        start: TicksOrientation.Top,
+        end: TicksOrientation.Bottom,
+        mirror: TicksOrientation.Mirror
+    };
+
+    private tickLabelOrientationMap: { [key: string]: TickLabelsOrientation } = {
+        '0': TickLabelsOrientation.Horizontal,
+        '90': TickLabelsOrientation.TopToBottom,
+        '-90': TickLabelsOrientation.BottomToTop,
+    };
+
+    protected get angularTickLabelOrientation(): TickLabelsOrientation {
+        const orientation = this.propertyChangeService.getProperty('tickLabelOrientation');
+        return this.tickLabelOrientationMap[orientation] ?? TickLabelsOrientation.Horizontal;
+    }
+
+    protected get wcTickLabelOrientation(): number {
+        return this.propertyChangeService.getProperty('tickLabelOrientation');
+    }
+
+    protected get value(): number {
+        return this.propertyChangeService.getProperty('value') || 0;
+    }
+
+    protected get disabled(): boolean {
+        return !!this.propertyChangeService.getProperty('disabled');
+    }
+
+    protected get minValue(): number {
+        return this.propertyChangeService.getProperty('minValue') || 0;
+    }
+
+    protected get maxValue(): number {
+        return this.propertyChangeService.getProperty('maxValue') || 100;
+    }
+
+    protected get step(): number {
+        return this.propertyChangeService.getProperty('step') || 1;
+    }
+
+    protected get lowerBound(): number {
+        return this.propertyChangeService.getProperty('lowerBound') || 0;
+    }
+
+    protected get upperBound(): number {
+        return this.propertyChangeService.getProperty('upperBound') || 100;
+    }
+
+    protected get primaryTicks(): number {
+        return this.propertyChangeService.getProperty('primaryTicks') || 0;
+    }
+
+    protected get secondaryTicks(): number {
+        return this.propertyChangeService.getProperty('secondaryTicks') || 0;
+    }
+
+    protected get ticksOrientationAngular(): TicksOrientation {
+        const orientation = this.propertyChangeService.getProperty('ticksOrientation');
+        return this.ticksOrientationMap[orientation] || TicksOrientation.Bottom;
+    }
+
+    protected get ticksOrientationWC(): string {
+        return this.propertyChangeService.getProperty('ticksOrientation');
+    }
+
+    protected get primaryTickLabels(): boolean {
+        return !!this.propertyChangeService.getProperty('primaryTickLabels');
+    }
+
+    protected get secondaryTickLabels(): boolean {
+        return !!this.propertyChangeService.getProperty('secondaryTickLabels');
+    }
 }