updating vnext with changes done only in master

projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.ts

@@ -57,7 +57,7 @@ export class HastDuplicateLayouts implements PipeTransform {
     imports: [IgxGridComponent, IgxConditionalFormattingDirective, IgxChartIntegrationDirective, IgxContextMenuDirective, IgxBadgeComponent, IgxColumnComponent, IgxCellTemplateDirective, NgClass, IgxDividerDirective, DockSlotComponent, DecimalPipe, TitleCasePipe, CurrencyPipe, FilterTypePipe, HastDuplicateLayouts],
     schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
-export class DataAnalysisDockManagerComponent implements OnInit, AfterViewInit  {
+export class DataAnalysisDockManagerComponent implements OnInit, AfterViewInit {
     @ViewChild('grid', { read: IgxGridComponent, static: true })
     public grid: IgxGridComponent;
 
@@ -121,16 +121,10 @@ export class DataAnalysisDockManagerComponent implements OnInit, AfterViewInit
         this.cdr.detectChanges();
 
         this.grid.rangeSelected.subscribe(range => {
-            this.grid.columns.forEach((column) => {
-                if (column.selected) {
-                    column.selected = false;
-                }
-            });
             this.createChartCommonLogic();
         });
 
         this.grid.columnSelectionChanging.pipe(debounceTime(100)).subscribe((args: IColumnSelectionEventArgs) => {
-            this.grid.clearCellSelection();
             this.createChartCommonLogic();
         });
     }
@@ -232,7 +226,7 @@ export class DataAnalysisDockManagerComponent implements OnInit, AfterViewInit
     }
 
     private clearViewContainer(viewContainerRef: ViewContainerRef) {
-        for (let i = viewContainerRef.length -1; i >= 0; i--) {
+        for (let i = viewContainerRef.length - 1; i >= 0; i--) {
             const viewRef = viewContainerRef.get(i);
             if (viewRef) {
                 const componentInstance = (viewRef as any).context;

projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.ts

@@ -42,4 +42,4 @@ export class GridDynamicChartDataComponent implements OnInit, AfterViewInit {
     public formatCurrency(value: number) {
         return '$' + value.toFixed(3);
     }
-}
+}

src/app/layouts/carousel/carousel-animations-sample/carousel-animations-sample.component.html

@@ -1,38 +1,39 @@
-<div class="carousel-animation-wrapper">
+<div class="carousel-wrapper">
   <div class="action-wrapper">
-    <span>Current animation: </span>
-    <span class="select-container">
-      <igx-select #select [(ngModel)]="carousel.animationType">
+    <div class="action">
+      <span>Animation type</span>
+      <igx-select #select [type]="'border'" [(ngModel)]="carousel.animationType">
         @for (animation of animations; track animation) {
           <igx-select-item [value]="animation">
             {{animation | titlecase}}
           </igx-select-item>
         }
-      </igx-select>
-    </span>
-  </div>
-  <div class="carousel-wrapper">
-    <igx-carousel #carousel [indicators]="false">
-      @for (slide of slides; track slide) {
-        <igx-slide>
-          <div class="slide-wrapper">
-            <igx-card elevated>
-              <igx-card-header>
-                <h4 igxCardHeaderTitle>{{slide.heading}}</h4>
-              </igx-card-header>
-              <igx-card-content>
-                <p>{{slide.description}}</p>
-              </igx-card-content>
-              <igx-card-media>
-                <img [src]="slide.image">
-              </igx-card-media>
-              <igx-card-actions>
-                <a igxButton href="{{slide.link}}" target="_blank" rel="noopener" style="text-decoration: none;" igxStart>visit page</a>
-              </igx-card-actions>
-            </igx-card>
-          </div>
-        </igx-slide>
-      }
-    </igx-carousel>
+        </igx-select>
+    </div>
+    <div class="action">
+      <igx-switch labelPosition="before" [(ngModel)]="carousel.vertical">Vertical alignment</igx-switch>
+    </div>
   </div>
+  <igx-carousel #carousel [indicators]="false">
+    @for (slide of slides; track slide) {
+      <igx-slide>
+        <div class="slide-wrapper">
+          <igx-card>
+            <igx-card-header>
+              <h3 igxCardHeaderTitle>{{slide.heading}}</h3>
+            </igx-card-header>
+            <igx-card-content>
+              <p>{{slide.description}}</p>
+            </igx-card-content>
+            <igx-card-media>
+              <img [src]="slide.image">
+            </igx-card-media>
+            <igx-card-actions>
+              <a igxButton href="{{slide.link}}" target="_blank" rel="noopener" igxStart>visit page</a>
+            </igx-card-actions>
+          </igx-card>
+        </div>
+      </igx-slide>
+    }
+  </igx-carousel>
 </div>

src/app/layouts/carousel/carousel-animations-sample/carousel-animations-sample.component.scss

@@ -1,59 +1,55 @@
+.carousel-wrapper {
+    height: 600px;
+    width: 90%;
+    margin: 20px auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.action-wrapper {
+    height: 40px;
+    width: 500px;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+}
+
+.action {
+    display: flex;
+    align-items: center;
+}
+
 .slide-wrapper {
-    max-height: 600px;
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100%;
     padding: 10px;
- 
+
     img {
         width: 100%;
     }
 }
-
-.carousel-wrapper {
-    max-height: 600px;
-    height: 100%;
-    width: 90%;
-    margin: 20px auto;
-}
-
-.action-wrapper {
-    height: 40px;
-    width: 70%;
-    display: flex;
-    align-items: baseline;
-    margin-bottom: 1rem;
-    margin-left: 5.7rem;
-}
-
-.carousel-animation-wrapper {
-    height: 700px;
-    margin: 16px auto;
-    display: flex;
-    flex-flow: column;
-}
-
-.igx-card {
-    box-shadow: none;
+
+igx-carousel {
+    border: 0.5px solid #dde0e4;
 }
-
-.select-container {
+
+igx-select {
+    width: 150px;
     margin-left: 10px;
+    --ig-size: var(--ig-size-small);
 }
-
-span:first-child {
-    position: relative;
-    bottom: 2px;
+
+igx-card {
+    border: none;
 }
-
-igx-select {
-    width: 150px;
+
+igx-card-header {
+    padding: 8px 16px;
+}
+
+a {
+    text-decoration: none;
 }
-
-::ng-deep {
-    .input.igx-input-group__input {
-        top: 10px;
-        left: 10px;
-    }
-}

src/app/layouts/carousel/carousel-animations-sample/carousel-animations-sample.component.ts

@@ -1,27 +1,20 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { IgxCarouselComponent, IgxSelectComponent, IgxSelectItemComponent, IgxSlideComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxCardMediaDirective, IgxCardActionsComponent, IgxButtonDirective, IgxPrefixDirective } from 'igniteui-angular';
+import { Component, ViewChild } from '@angular/core';
+import { IgxCarouselComponent, IgxSelectComponent, IgxSelectItemComponent, IgxSlideComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxCardMediaDirective, IgxCardActionsComponent, IgxButtonDirective, IgxPrefixDirective, IgxSwitchComponent } from 'igniteui-angular';
 import { FormsModule } from '@angular/forms';
 import { TitleCasePipe } from '@angular/common';
 
 @Component({
     selector: 'app-carousel',
     styleUrls: ['./carousel-animations-sample.component.scss'],
     templateUrl: './carousel-animations-sample.component.html',
-    imports: [IgxSelectComponent, FormsModule, IgxSelectItemComponent, IgxCarouselComponent, IgxSlideComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxCardMediaDirective, IgxCardActionsComponent, IgxButtonDirective, IgxPrefixDirective, TitleCasePipe]
+    imports: [IgxSelectComponent, IgxSwitchComponent, FormsModule, IgxSelectItemComponent, IgxCarouselComponent, IgxSlideComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxCardMediaDirective, IgxCardActionsComponent, IgxButtonDirective, IgxPrefixDirective, TitleCasePipe]
 })
-export class CarouselAnimationsSampleComponent implements OnInit {
+export class CarouselAnimationsSampleComponent {
   @ViewChild('carousel', { static: true }) public carousel: IgxCarouselComponent;
 
-  public slides: any[] = [];
   public animations = ['slide', 'fade', 'none'];
-
-  public ngOnInit() {
-    this.addSlides();
-  }
-
-  public addSlides() {
-    this.slides.push(
-      {
+  public slides: any[] = [
+    {
         description: '30+ Material-based Angular components to code speedy web apps faster.',
         heading: 'Ignite UI for Angular',
         image: 'assets/images/carousel/slide1-angular.png',
@@ -39,6 +32,5 @@ export class CarouselAnimationsSampleComponent implements OnInit {
         image: 'assets/images/carousel/slide3-aspnet.png',
         link: 'https://www.infragistics.com/products/aspnet'
       }
-    );
-  }
+  ];
 }