feat(carousel): update carousel samples for new documentation

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

@@ -10,7 +10,8 @@ import { TitleCasePipe } from '@angular/common';
 
 @Component({
     selector: 'app-carousel',
-    styleUrls: ['./carousel-animations-sample.component.scss'],
+    host: { class: 'ig-typography' },
+    styleUrls: ['./carousel-animations-sample.component.scss', '../carousel-bootstrap-theme.scss'],
     templateUrl: './carousel-animations-sample.component.html',
     imports: [IgxSelectComponent, IgxSwitchComponent, FormsModule, IgxSelectItemComponent, IgxCarouselComponent, IgxSlideComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxCardMediaDirective, IgxCardActionsComponent, IgxButtonDirective, IgxPrefixDirective, TitleCasePipe]
 })

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

@@ -0,0 +1,31 @@
+<div class="carousel-wrapper">
+  <div class="action-wrapper">
+    <div class="action">
+      <span class="action-label">Animation</span>
+      <igx-select type="border" [(ngModel)]="animationType">
+        @for (animation of animationTypes; track animation.value) {
+          <igx-select-item [value]="animation.value">{{ animation.label }}</igx-select-item>
+        }
+      </igx-select>
+    </div>
+    <div class="action">
+      <igx-switch labelPosition="before" [(ngModel)]="isCarouselVertical">Vertical</igx-switch>
+    </div>
+  </div>
+
+  <igx-carousel [animationType]="animationType" [indicators]="false" [vertical]="isCarouselVertical">
+    @for (slide of slides; track slide.title) {
+      <igx-slide>
+        <article class="slide-wrapper">
+          <div class="slide-content">
+            <span class="slide-label">{{ slide.label }}</span>
+            <h3>{{ slide.title }}</h3>
+            <p>{{ slide.subtitle }}</p>
+            <div class="slide-details"><span>{{ slide.detail }}</span><strong>{{ slide.metric }}</strong></div>
+          </div>
+          <div class="slide-preview" aria-hidden="true"><span></span><span></span><span></span></div>
+        </article>
+      </igx-slide>
+    }
+  </igx-carousel>
+</div>

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

@@ -0,0 +1,112 @@
+.carousel-wrapper {
+    display: flex;
+    width: min(860px, calc(100% - 32px));
+    flex-direction: column;
+    gap: 16px;
+    margin: 16px auto 0;
+}
+
+.action-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 24px;
+}
+
+.action { display: flex; align-items: center; gap: 8px; }
+.action-label { color: var(--ig-gray-700); }
+
+igx-select {
+    width: 150px;
+    --ig-size: 1;
+}
+
+:host ::ng-deep igx-select igx-input-group { --size: 2rem; }
+
+igx-switch { --ig-size: var(--ig-size-small); }
+
+igx-carousel {
+    height: 360px;
+    overflow: hidden;
+    border: 1px solid var(--ig-gray-300);
+    border-radius: 8px;
+    background: var(--ig-surface-500);
+}
+
+:host ::ng-deep .igx-slide {
+    height: 100%;
+}
+
+.slide-wrapper {
+    position: relative;
+    display: grid;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 56px 84px;
+    overflow: hidden;
+    place-items: center;
+    background:
+        linear-gradient(135deg, rgba(25, 118, 210, 0.08), transparent 46%),
+        linear-gradient(315deg, rgba(0, 150, 136, 0.10), transparent 42%),
+        var(--ig-gray-100);
+}
+
+.slide-content { width: min(460px, calc(100% - 128px)); max-width: 460px; color: var(--ig-gray-900); }
+
+.slide-label {
+    display: block;
+    margin-bottom: 12px;
+    color: var(--ig-primary-600);
+    font-size: 12px;
+    font-weight: 700;
+}
+
+.slide-content h3 { margin: 0; font-size: 32px; line-height: 1.15; }
+.slide-content p { margin: 12px 0 0; color: var(--ig-gray-700); font-size: 18px; line-height: 1.45; }
+
+.slide-details {
+    display: inline-flex;
+    align-items: center;
+    gap: 16px;
+    margin-top: 28px;
+    padding: 10px 14px;
+    border: 1px solid var(--ig-gray-300);
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.72);
+}
+
+.slide-details span { color: var(--ig-gray-700); }
+.slide-details strong { color: var(--ig-gray-900); }
+
+.slide-preview {
+    position: absolute;
+    top: 50%;
+    right: 84px;
+    display: grid;
+    width: 120px;
+    height: 220px;
+    grid-template-columns: repeat(3, 1fr);
+    align-items: center;
+    gap: 14px;
+    transform: translateY(-50%);
+}
+
+.slide-preview span {
+    display: block;
+    border-radius: 8px;
+    background: var(--ig-primary-100);
+    box-shadow: 0 10px 24px rgba(11, 31, 53, 0.12);
+}
+
+.slide-preview span:nth-child(1) { height: 120px; opacity: 0.55; }
+.slide-preview span:nth-child(2) { height: 180px; background: var(--ig-primary-300); }
+.slide-preview span:nth-child(3) { height: 92px; opacity: 0.75; }
+
+@media (max-width: 640px) {
+    .action-wrapper { align-items: flex-start; flex-direction: column; gap: 12px; }
+    .slide-wrapper { grid-template-columns: 1fr; gap: 28px; padding: 32px 64px; }
+    .slide-preview { position: static; width: 100%; height: 120px; transform: none; }
+    .slide-content h3 { font-size: 28px; }
+}

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

@@ -0,0 +1,52 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { CarouselAnimationType, IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular/carousel';
+import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select';
+import { IgxSwitchComponent } from 'igniteui-angular/switch';
+
+@Component({
+    selector: 'app-carousel-animations',
+    host: { class: 'ig-typography' },
+    styleUrls: ['./carousel-animations.component.scss', '../carousel-bootstrap-theme.scss'],
+    templateUrl: './carousel-animations.component.html',
+    imports: [
+        FormsModule,
+        IgxCarouselComponent,
+        IgxSelectComponent,
+        IgxSelectItemComponent,
+        IgxSlideComponent,
+        IgxSwitchComponent
+    ]
+})
+export class CarouselAnimationsComponent {
+    public animationType: CarouselAnimationType = CarouselAnimationType.slide;
+    public isCarouselVertical = false;
+    public readonly animationTypes = [
+        { label: 'Slide', value: CarouselAnimationType.slide },
+        { label: 'Fade', value: CarouselAnimationType.fade },
+        { label: 'None', value: CarouselAnimationType.none }
+    ];
+    public readonly slides = [
+        {
+            detail: 'Best for sequential browsing',
+            label: '01',
+            metric: '320ms',
+            subtitle: 'Moves content horizontally or vertically to preserve directional context.',
+            title: 'Slide transition'
+        },
+        {
+            detail: 'Best for featured content',
+            label: '02',
+            metric: '240ms',
+            subtitle: 'Cross-fades between slides when the relationship between items is looser.',
+            title: 'Fade transition'
+        },
+        {
+            detail: 'Best for direct state changes',
+            label: '03',
+            metric: '0ms',
+            subtitle: 'Updates the active slide immediately for reduced motion or dense workflows.',
+            title: 'No transition'
+        }
+    ];
+}

src/app/layouts/carousel/carousel-bootstrap-theme.scss

@@ -0,0 +1,12 @@
+@use 'igniteui-angular/theming' as *;
+
+:host {
+    @include typography(
+        $font-family: $bootstrap-typeface,
+        $type-scale: $bootstrap-type-scale
+    );
+
+    ::ng-deep {
+        @include bootstrap-light-theme($light-bootstrap-palette);
+    }
+}

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

@@ -0,0 +1,71 @@
+<div class="carousel-container">
+  <igx-carousel>
+    <igx-slide class="slide-frame slide-coast">
+      <article class="slide-shell">
+        <form class="feature-card">
+          <div class="feature-copy">
+            <span class="slide-label">Featured route</span>
+            <h3>Coastal weekend</h3>
+            <p>Browse curated travel ideas and search directly from the active slide.</p>
+          </div>
+          <igx-input-group type="border">
+            <igx-prefix><igx-icon>search</igx-icon></igx-prefix>
+            <input igxInput type="text" placeholder="City or landmark" />
+          </igx-input-group>
+          <div class="chip-row" aria-label="Route highlights">
+            <span>3 stops</span>
+            <span>Sea view</span>
+            <span>Weekend</span>
+          </div>
+          <button igxButton="contained" type="reset">Explore</button>
+        </form>
+        <div class="feature-visual route-visual" aria-hidden="true"><span></span><span></span><span></span></div>
+      </article>
+    </igx-slide>
+
+    <igx-slide class="slide-frame slide-city">
+      <article class="slide-shell">
+        <section class="feature-card event-card">
+          <div class="feature-copy">
+            <span class="slide-label">City guide</span>
+            <h3>Museum night pass</h3>
+            <p>Reserve a late gallery visit and keep the event details visible in the active slide.</p>
+          </div>
+          <div class="event-summary" aria-label="Museum night pass details">
+            <div class="event-date" aria-hidden="true"><span>FRI</span><strong>18</strong><span>OCT</span></div>
+            <div class="event-details"><strong>6:30 PM - 10:00 PM</strong><span>North wing galleries</span></div>
+          </div>
+          <igx-checkbox>Send event reminder</igx-checkbox>
+          <button igxButton="contained">Notify Me</button>
+        </section>
+        <div class="event-visual" aria-hidden="true">
+          <span class="ticket ticket--back"></span>
+          <span class="ticket ticket--front"><span></span><span></span><span></span></span>
+        </div>
+      </article>
+    </igx-slide>
+
+    <igx-slide class="slide-frame slide-resort">
+      <article class="slide-shell">
+        <form class="feature-card offer-card">
+          <div class="feature-copy">
+            <span class="slide-label">Seasonal offer</span>
+            <h3>Resort day access</h3>
+            <p>Build a compact offer configuration that lets users review inclusions before applying a code.</p>
+          </div>
+          <div class="offer-summary" aria-label="Day pass summary">
+            <div><span>Day pass</span><strong>$89</strong></div>
+            <span>Pool access and spa credit included</span>
+          </div>
+          <div class="addon-row"><span>Lunch add-on</span><strong>+$18</strong></div>
+          <igx-input-group type="border">
+            <igx-prefix><igx-icon>lock</igx-icon></igx-prefix>
+            <input igxInput type="text" placeholder="Promo code" />
+          </igx-input-group>
+          <button igxButton="contained" type="reset">Apply Code</button>
+        </form>
+        <div class="amenity-visual" aria-hidden="true"><span></span><span></span><span></span></div>
+      </article>
+    </igx-slide>
+  </igx-carousel>
+</div>