Merge branch 'master' into sstoychev/change-pagingmode-enum

Author: ChronosSF

package-lock.json

@@ -74,7 +74,7 @@
     "@types/source-map": "0.5.2",
     "express": "^4.21.1",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^17.1.0",
+    "igniteui-theming": "^17.2.0",
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.2",

package.json

@@ -73,7 +73,7 @@
         "tslib": "^2.3.0",
         "igniteui-trial-watermark": "^3.0.2",
         "lodash-es": "^4.17.21",
-        "igniteui-theming": "^17.1.0",
+        "igniteui-theming": "^17.2.0",
         "@igniteui/material-icons-extended": "^3.1.0"
     },
     "peerDependencies": {

projects/igniteui-angular/package.json

@@ -1648,6 +1648,18 @@
         [igxPrefix] {
             overflow: hidden;
         }
+
+        igx-prefix,
+        [igxPrefix] {
+            background: var(--igx-input-group-input-prefix-background, transparent);
+            color: var(--igx-input-group-input-prefix-color, var(--ig-primary-500));
+        }
+
+        igx-suffix,
+        [igxSuffix] {
+            background: var(--igx-input-group-input-suffix-background, transparent);
+            color: var(--igx-input-group-input-suffix-color, var(--ig-primary-500));
+        }
     }
 
     %igx-input-group-fluent-search--focused {
@@ -1731,6 +1743,10 @@
     %form-group-bundle--fluent--focus {
         border-color: var-get($theme, 'focused-border-color');
         border-width: rem(2px);
+
+        &:hover {
+            border-color: var-get($theme, 'focused-border-color');
+        }
     }
 
     %form-group-bundle-error--fluent,
@@ -1846,7 +1862,6 @@
     }
 
     %fluent-label-focused {
-        color: color(null, 'gray', 800);
         transform: translateY(0) scale(1);
     }
 

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-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,

projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss

@@ -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">

src/app/list/list.sample.html

@@ -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;
+}

src/app/list/list.sample.scss

@@ -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,15 +81,27 @@ 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 {
     public panelConfig: PropertyPanelConfig = {
         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
+            }
         }
     }