Merge branch 'master' into apetrov/add-carousel-styling-sample

Author: adrianptrv

azure-devops/app-cd.yml

@@ -24,9 +24,9 @@ steps:
     fetchTags: true
 
   - task: NodeTool@0
-    displayName: Use Node 20.x
+    displayName: Use Node 22.x
     inputs:
-      versionSpec: 20.x
+      versionSpec: 22.x
 
   - task: PowerShell@2
     displayName: 'Replace with licensed angular-extras'

azure-devops/app-crm-cd-yml azure-devops/app-crm-cd.ymlazure-devops/app-crm-cd-yml renamed to azure-devops/app-crm-cd.yml

@@ -24,9 +24,9 @@ steps:
     fetchTags: true
 
   - task: NodeTool@0
-    displayName: Use Node 20.x
+    displayName: Use Node 22.x
     inputs:
-      versionSpec: 20.x
+      versionSpec: 22.x
 
   - task: PowerShell@2
     displayName: 'Replace with licensed angular-extras'

azure-devops/app-lob-cd.yml

@@ -24,9 +24,9 @@ steps:
     fetchTags: true
 
   - task: NodeTool@0
-    displayName: Use Node 20.x
+    displayName: Use Node 22.x
     inputs:
-      versionSpec: 20.x
+      versionSpec: 22.x
 
   - task: PowerShell@2
     displayName: 'Replace with licensed angular-extras'

live-editing/configs/TooltipConfigGenerator.ts

@@ -24,6 +24,20 @@ export class TooltipConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/interactions/tooltip/"
         }));
 
+        // Placement Tooltip Sample
+        configs.push(new Config({
+            component: 'TooltipPlacementComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/interactions/tooltip/"
+        }));
+
+        // Advanced Tooltip Sample
+        configs.push(new Config({
+            component: 'TooltipAdvancedComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/interactions/tooltip/"
+        }));
+
         // Style Tooltip Sample
         configs.push(new Config({
             component: 'TooltipStyleComponent',

package-lock.json

@@ -72,11 +72,11 @@
     "express": "^4.18.2",
     "file-saver": "^2.0.2",
     "hammerjs": "^2.0.8",
-    "igniteui-angular": "^20.1.0",
+    "igniteui-angular": "^20.1.4",
     "igniteui-angular-charts": "^19.0.1",
     "igniteui-angular-core": "^19.0.1",
     "igniteui-angular-extras": "^20.0.0",
-    "igniteui-angular-i18n": "^20.1.0",
+    "igniteui-angular-i18n": "^20.1.4",
     "igniteui-dockmanager": "^1.17.0",
     "igniteui-live-editing": "^3.1.1",
     "igniteui-webcomponents": "^6.2.0",
@@ -106,7 +106,7 @@
       "@angular/compiler": "^20.2.2"
     },
     "igniteui-angular-extras": {
-      "igniteui-angular": "^20.1.0"
+      "igniteui-angular": "^20.1.4"
     }
   },
   "devDependencies": {

package.json

@@ -1,4 +1,4 @@
-import { provideHttpClient, withInterceptorsFromDi } from "@angular/common/http";
+import { provideHttpClient, withFetch, withInterceptorsFromDi } from "@angular/common/http";
 import { ApplicationConfig, importProvidersFrom } from "@angular/core";
 import { FormsModule } from "@angular/forms";
 import { BrowserModule, HammerModule, provideClientHydration, withEventReplay } from "@angular/platform-browser";
@@ -16,7 +16,7 @@ export const AppConfig: ApplicationConfig = {
             HammerModule,
             NgbModule
         ),
-        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClient(withInterceptorsFromDi(), withFetch()),
         provideAnimations(),
         provideRouter(AppRoutes),
         OverflowService, provideClientHydration(withEventReplay())

src/app/app.config.ts

@@ -0,0 +1,18 @@
+<igx-list>
+  <igx-list-item [isHeader]="true">
+    Team Members (4)
+  </igx-list-item>
+  @for (member of members; track member) {
+    <igx-list-item>
+      <div class="wrapper">
+        <div>
+          <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
+          <igx-badge [icon]="member.icon" shape="square" class="badge-style !light-badge ![--background-color:#FF4E00] ![--border-radius:4px]"></igx-badge>
+        </div>
+        <div class="contact-container">
+          <span class="contact-name">{{ member.name }}</span>
+        </div>
+      </div>
+    </igx-list-item>
+  }
+</igx-list>

src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.html

@@ -0,0 +1 @@
+@use "layout.scss";

src/app/data-display/badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component.scss

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { Member } from '../model/member.model';
+import { IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent } from 'igniteui-angular';
+
+
+@Component({
+    selector: 'app-badge-tailwind-styling-sample',
+    styleUrls: ['./badge-tailwind-styling-sample.component.scss'],
+    templateUrl: './badge-tailwind-styling-sample.component.html',
+    imports: [IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent]
+})
+export class BadgeTailwindStylingSampleComponent {
+  public members: Member[] = [
+    new Member('Terrance Orta', 'online'),
+    new Member('Donna Price', 'online'),
+    new Member('Lisa Landers', 'away'),
+    new Member('Dorothy H. Spencer', 'offline')
+  ];
+}