first version

libs/ui/layout/src/lib/carousel/carousel.component.css

@@ -0,0 +1,20 @@
+:host .carousel-container /deep/ > * {
+  flex-shrink: 0;
+}
+:host {
+  position: relative;
+}
+.carousel-step-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 6px;
+  position: relative;
+}
+.carousel-step-dot:after {
+  content: '';
+  position: absolute;
+  left: -4px;
+  top: -4px;
+  width: 14px;
+  height: 14px;
+}

libs/ui/layout/src/lib/carousel/carousel.component.html

@@ -0,0 +1,16 @@
+<div #carouselOverflowContainer class="overflow-hidden h-full w-full">
+  <div class="carousel-container flex flex-row" [ngClass]="containerClass">
+    <ng-content></ng-content>
+  </div>
+</div>
+<div
+  class="absolute right-0 top-0 flex flex-row justify-center gap-[10px] p-1"
+  [ngClass]="stepsContainerClass"
+>
+  <button
+    *ngFor="let step of steps; let i = index"
+    class="carousel-step-dot"
+    (click)="scrollToStep(i)"
+    [ngClass]="selectedStep === i ? 'bg-secondary' : 'bg-gray-400'"
+  ></button>
+</div>

libs/ui/layout/src/lib/carousel/carousel.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { CarouselComponent } from './carousel.component'
+
+describe('CarouselComponent', () => {
+  let component: CarouselComponent
+  let fixture: ComponentFixture<CarouselComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [CarouselComponent],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(CarouselComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

libs/ui/layout/src/lib/carousel/carousel.component.stories.ts

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/angular'
+import { CarouselComponent } from './carousel.component'
+import { componentWrapperDecorator } from '@storybook/angular'
+
+const meta: Meta<CarouselComponent> = {
+  component: CarouselComponent,
+  title: 'Layout/CarouselComponent',
+  decorators: [
+    componentWrapperDecorator(
+      (story) =>
+        `<div class="border border-gray-300 h-[150px] w-[800px] overflow-auto" style="resize: both">${story}</div>`
+    ),
+  ],
+}
+export default meta
+type Story = StoryObj<CarouselComponent>
+
+export const Primary: Story = {
+  args: {},
+  render: (args) => ({
+    props: args,
+    template: `
+    <gn-ui-carousel containerClass='py-4 gap-4 h-full'>
+      <div class='border border-black w-[160px] ml-[calc(50%-80px)]'>
+        First box
+      </div>
+      <div class='border border-black w-[240px]'>
+        Second box
+      </div>
+      <div class='border border-black w-[180px]'>
+        Third box
+      </div>
+      <div class='border border-black w-[120px]'>
+        Fourth box
+      </div>
+      <div class='border border-black w-[280px] mr-[calc(50%-140px)]'>
+        Fifth box
+      </div>
+    </gn-ui-carousel>
+`,
+  }),
+}

libs/ui/layout/src/lib/carousel/carousel.component.ts

@@ -0,0 +1,50 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  ViewChild,
+} from '@angular/core'
+import EmblaCarousel, { EmblaCarouselType } from 'embla-carousel'
+
+@Component({
+  selector: 'gn-ui-carousel',
+  templateUrl: './carousel.component.html',
+  styleUrls: ['./carousel.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CarouselComponent implements AfterViewInit {
+  @Input() containerClass = ''
+  @Input() stepsContainerClass = ''
+  @ViewChild('carouselOverflowContainer')
+  carouselOverflowContainer: ElementRef
+  steps: number[] = []
+  selectedStep = -1
+  emblaApi: EmblaCarouselType
+
+  constructor(private changeDetector: ChangeDetectorRef) {}
+
+  ngAfterViewInit() {
+    this.emblaApi = EmblaCarousel(
+      this.carouselOverflowContainer.nativeElement,
+      {
+        duration: 15,
+      }
+    )
+    const refreshSteps = () => {
+      this.steps = this.emblaApi.scrollSnapList()
+      this.selectedStep = this.emblaApi.selectedScrollSnap()
+      this.changeDetector.detectChanges()
+    }
+    this.emblaApi
+      .on('init', refreshSteps)
+      .on('reInit', refreshSteps)
+      .on('select', refreshSteps)
+  }
+
+  scrollToStep(stepIndex: number) {
+    this.emblaApi.scrollTo(stepIndex)
+  }
+}

libs/ui/layout/src/lib/ui-layout.module.ts

@@ -6,6 +6,7 @@ import { StickyHeaderComponent } from './sticky-header/sticky-header.component'
 import { AnchorLinkDirective } from './anchor-link/anchor-link.directive'
 import { ExpandablePanelButtonComponent } from './expandable-panel-button/expandable-panel-button.component'
 import { MatIconModule } from '@angular/material/icon'
+import { CarouselComponent } from './carousel/carousel.component'
 
 @NgModule({
   imports: [CommonModule, MatIconModule, TranslateModule.forChild()],
@@ -14,12 +15,14 @@ import { MatIconModule } from '@angular/material/icon'
     StickyHeaderComponent,
     AnchorLinkDirective,
     ExpandablePanelButtonComponent,
+    CarouselComponent,
   ],
   exports: [
     ExpandablePanelComponent,
     StickyHeaderComponent,
     AnchorLinkDirective,
     ExpandablePanelButtonComponent,
+    CarouselComponent,
   ],
 })
 export class UiLayoutModule {}

package.json

@@ -81,6 +81,7 @@
     "date-fns": "^2.29.3",
     "document-register-element": "^1.14.10",
     "duration-relativetimeformat": "^2.0.3",
+    "embla-carousel": "^8.0.0-rc14",
     "express": "^4.17.1",
     "moment": "^2.29.4",
     "ng-table-virtual-scroll": "^1.4.1",