From 86cd161bff417582535155b23184a3ec914d2231 Mon Sep 17 00:00:00 2001
From: sivanova <sivanova@infragistics.com>
Date: Fri, 11 Apr 2025 16:27:54 +0300
Subject: [PATCH 1/2] fix(list): focus styles

---
 .../lib/core/styles/components/list/_list-theme.scss | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss
index 7605e2504f9..ee2f3119d64 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss
@@ -425,7 +425,6 @@
         justify-content: center;
         border-radius: var-get($theme, 'item-border-radius');
         color: var-get($theme, 'item-text-color');
-        background: var-get($theme, 'item-background');
 
         @if $bootstrap-theme or $variant == 'fluent' {
             border-bottom: var-get($theme, 'border-width') solid var-get($theme, 'border-color');
@@ -436,9 +435,6 @@
         }
 
         &:hover {
-            color: var-get($theme, 'item-text-color-hover');
-            background: var-get($theme, 'item-background-hover');
-
             %igx-list__item-lines {
                 color: currentColor;
             }
@@ -544,9 +540,15 @@
         align-items: center;
         position: relative;
         border-radius: var-get($theme, 'item-border-radius');
-        background: inherit;
+        background: var-get($theme, 'item-background');
         z-index: 2;
         gap: if($variant == 'indigo', rem(8px), rem(16px));
+
+        &:hover,
+        &:focus-within {
+            color: var-get($theme, 'item-text-color-hover');
+            background: var-get($theme, 'item-background-hover');
+        }
     }
 
     %igx-list-header,

From 79220ec64680d6e90a656214a796a314ba08ce5c Mon Sep 17 00:00:00 2001
From: sivanova <sivanova@infragistics.com>
Date: Mon, 14 Apr 2025 11:48:08 +0300
Subject: [PATCH 2/2] refactor(list-sample): add panning option

---
 src/app/list/list.sample.html | 12 +++++++++++-
 src/app/list/list.sample.scss | 18 ++++++++++++++++++
 src/app/list/list.sample.ts   | 25 +++++++++++++++++++++++--
 3 files changed, 52 insertions(+), 3 deletions(-)

diff --git a/src/app/list/list.sample.html b/src/app/list/list.sample.html
index c58c9218e77..a1e71892699 100644
--- a/src/app/list/list.sample.html
+++ b/src/app/list/list.sample.html
@@ -2,7 +2,17 @@
     <section class="sample-content" [igSize]="properties.size">
         <article class="sample-column">
             <h5 class="sample-title">Angular List</h5>
-            <igx-list>
+            <igx-list [allowLeftPanning]="properties.enablePanning" [allowRightPanning]="properties.enablePanning">
+                <ng-template igxListItemLeftPanning>
+                    <div class="pan pan--left">
+                        <igx-icon>delete</igx-icon>Delete
+                    </div>
+                </ng-template>
+                <ng-template igxListItemRightPanning>
+                    <div class="pan pan--right">
+                        <igx-icon>call</igx-icon>Dial
+                    </div>
+                </ng-template>
                 <igx-list-item [isHeader]="true" selected>Employees List</igx-list-item>
                 @for (employee of employeeItems; track employee) {
                     <igx-list-item [selected]="employee.selected">
diff --git a/src/app/list/list.sample.scss b/src/app/list/list.sample.scss
index ca19d5bb78c..c28c9cd3c75 100644
--- a/src/app/list/list.sample.scss
+++ b/src/app/list/list.sample.scss
@@ -1,3 +1,21 @@
 .sample-title {
     text-align: center;
 }
+
+.pan {
+    display: flex;
+    color: white;
+    width: 100%;
+    padding-left: 10px;
+    align-items: center;
+}
+
+.pan--left {
+    flex-direction: row-reverse;
+    background-color:orange;
+}
+
+.pan--right {
+    flex-direction: row;
+    background-color:limegreen;
+}
diff --git a/src/app/list/list.sample.ts b/src/app/list/list.sample.ts
index 7e1ca2ae378..5cc31545450 100644
--- a/src/app/list/list.sample.ts
+++ b/src/app/list/list.sample.ts
@@ -30,6 +30,8 @@ import {
     PropertyChangeService,
     PropertyPanelConfig,
 } from '../properties-panel/property-change.service';
+import { HAMMER_GESTURE_CONFIG, HammerModule } from '@angular/platform-browser';
+import Hammer from 'hammerjs';
 
 defineComponents(
     IgcListComponent,
@@ -79,7 +81,18 @@ interface Employee {
         IgxAvatarComponent,
         IgxButtonModule,
         IgxButtonDirective,
-        IgSizeDirective
+        IgSizeDirective,
+        HammerModule
+    ],
+    providers: [
+        {
+            provide: HAMMER_GESTURE_CONFIG,
+            useClass: class {
+                public overrides = {
+                    pan: { direction: Hammer.DIRECTION_HORIZONTAL }
+                }
+            }
+        }
     ]
 })
 export class ListSampleComponent {
@@ -87,7 +100,8 @@ export class ListSampleComponent {
         size: {
             control: {
                 type: 'button-group',
-                options: ['small', 'medium', 'large']
+                options: ['small', 'medium', 'large'],
+                defaultValue: 'medium'
             }
         },
         hideTitle: {
@@ -145,6 +159,13 @@ export class ListSampleComponent {
                 type: 'boolean',
                 defaultValue: false
             }
+        },
+        enablePanning: {
+            label: 'Item Panning',
+            control: {
+                type: 'boolean',
+                defaultValue: false
+            }
         }
     }