@semantic-components/carousel 0.63.0 → 0.65.0

package/src/lib/components/carousel/README.md

@@ -1,342 +0,0 @@
-# Carousel
-
-A carousel component built with Embla Carousel, featuring smooth animations, touch/swipe gestures, and plugin support.
-
-## Usage
-
-```html
-<div sc-carousel class="w-full max-w-xs">
-  <div sc-carousel-viewport>
-    <div sc-carousel-track>
-      <div sc-carousel-item>Slide 1</div>
-      <div sc-carousel-item>Slide 2</div>
-      <div sc-carousel-item>Slide 3</div>
-    </div>
-  </div>
-  <button sc-carousel-previous>
-    <svg si-chevron-left-icon></svg>
-    <span class="sr-only">Previous slide</span>
-  </button>
-  <button sc-carousel-next>
-    <svg si-chevron-right-icon></svg>
-    <span class="sr-only">Next slide</span>
-  </button>
-</div>
-```
-
-## Architecture
-
-The carousel uses a three-layer structure inspired by Embla Carousel's architecture:
-
-1. **ScCarousel** - The outer container that manages state, API, and keyboard navigation
-2. **ScCarouselViewport** - The overflow container (`overflow-hidden`) that Embla binds to
-3. **ScCarouselTrack** - The flex container that slides within the viewport
-4. **ScCarouselItem** - Individual slides on the track
-
-```
-┌─ ScCarousel (relative positioning, manages state)
-│  ├─ ScCarouselViewport (overflow-hidden, viewport for Embla)
-│  │  └─ ScCarouselTrack (flex container, the sliding track)
-│  │     ├─ ScCarouselItem (slide 1)
-│  │     ├─ ScCarouselItem (slide 2)
-│  │     └─ ScCarouselItem (slide 3)
-│  ├─ ScCarouselPrevious (navigation button)
-│  └─ ScCarouselNext (navigation button)
-```
-
-## Components
-
-### ScCarousel
-
-Main carousel container that manages state and keyboard navigation.
-
-**Selector:** `div[sc-carousel]`
-
-**Inputs:**
-
-| Input         | Type                         | Default        | Description                    |
-| ------------- | ---------------------------- | -------------- | ------------------------------ |
-| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Scroll direction               |
-| `options`     | `ScCarouselOptions`          | `{}`           | Embla carousel options         |
-| `plugins`     | `ScCarouselPlugin[]`         | `[]`           | Embla plugins (e.g., autoplay) |
-| `class`       | `string`                     | `''`           | Additional CSS classes         |
-
-### ScCarouselViewport
-
-The overflow container (viewport) that Embla binds to. This provides the visible window for the carousel.
-
-**Selector:** `div[sc-carousel-viewport]`
-
-**Inputs:**
-
-| Input   | Type     | Default | Description            |
-| ------- | -------- | ------- | ---------------------- |
-| `class` | `string` | `''`    | Additional CSS classes |
-
-### ScCarouselTrack
-
-The flex container (track) that moves within the viewport and holds carousel items. This is the element that slides left/right or up/down.
-
-**Selector:** `div[sc-carousel-track]`
-
-**Inputs:**
-
-| Input   | Type     | Default | Description            |
-| ------- | -------- | ------- | ---------------------- |
-| `class` | `string` | `''`    | Additional CSS classes |
-
-### ScCarouselItem
-
-Individual carousel slide.
-
-**Selector:** `div[sc-carousel-item]`
-
-**Inputs:**
-
-| Input   | Type     | Default | Description            |
-| ------- | -------- | ------- | ---------------------- |
-| `class` | `string` | `''`    | Additional CSS classes |
-
-### ScCarouselPrevious
-
-Previous slide navigation button. Content must be provided by the user (icon + screen reader text).
-
-**Selector:** `button[sc-carousel-previous]`
-
-**Inputs:**
-
-| Input   | Type     | Default | Description            |
-| ------- | -------- | ------- | ---------------------- |
-| `class` | `string` | `''`    | Additional CSS classes |
-
-**Example:**
-
-```html
-<button sc-carousel-previous>
-  <svg si-chevron-left-icon></svg>
-  <span class="sr-only">Previous slide</span>
-</button>
-```
-
-### ScCarouselNext
-
-Next slide navigation button. Content must be provided by the user (icon + screen reader text).
-
-**Selector:** `button[sc-carousel-next]`
-
-**Inputs:**
-
-| Input   | Type     | Default | Description            |
-| ------- | -------- | ------- | ---------------------- |
-| `class` | `string` | `''`    | Additional CSS classes |
-
-**Example:**
-
-```html
-<button sc-carousel-next>
-  <svg si-chevron-right-icon></svg>
-  <span class="sr-only">Next slide</span>
-</button>
-```
-
-## Examples
-
-### Default
-
-```html
-<div sc-carousel class="w-full max-w-xs">
-  <div sc-carousel-viewport>
-    <div sc-carousel-track>
-      @for (i of [1, 2, 3, 4, 5]; track i) {
-      <div sc-carousel-item>
-        <div class="p-1">
-          <div class="flex aspect-square items-center justify-center rounded-lg border">{{ i }}</div>
-        </div>
-      </div>
-      }
-    </div>
-  </div>
-  <button sc-carousel-previous>
-    <svg si-chevron-left-icon></svg>
-    <span class="sr-only">Previous slide</span>
-  </button>
-  <button sc-carousel-next>
-    <svg si-chevron-right-icon></svg>
-    <span class="sr-only">Next slide</span>
-  </button>
-</div>
-```
-
-### With Loop
-
-```typescript
-import { Component } from '@angular/core';
-
-@Component({
-  template: `
-    <div sc-carousel [options]="{ loop: true }" class="w-full max-w-xs">
-      <div sc-carousel-viewport>
-        <div sc-carousel-track>
-          @for (i of [1, 2, 3, 4, 5]; track i) {
-            <div sc-carousel-item>{{ i }}</div>
-          }
-        </div>
-      </div>
-      <button sc-carousel-previous>
-        <svg si-chevron-left-icon></svg>
-        <span class="sr-only">Previous slide</span>
-      </button>
-      <button sc-carousel-next>
-        <svg si-chevron-right-icon></svg>
-        <span class="sr-only">Next slide</span>
-      </button>
-    </div>
-  `,
-})
-export class MyComponent {}
-```
-
-### With Autoplay
-
-```typescript
-import { Component } from '@angular/core';
-import Autoplay from 'embla-carousel-autoplay';
-
-@Component({
-  template: `
-    <div sc-carousel [plugins]="plugins" class="w-full max-w-xs">
-      <div sc-carousel-viewport>
-        <div sc-carousel-track>
-          @for (i of items; track i) {
-            <div sc-carousel-item>{{ i }}</div>
-          }
-        </div>
-      </div>
-      <button sc-carousel-previous>
-        <svg si-chevron-left-icon></svg>
-        <span class="sr-only">Previous slide</span>
-      </button>
-      <button sc-carousel-next>
-        <svg si-chevron-right-icon></svg>
-        <span class="sr-only">Next slide</span>
-      </button>
-    </div>
-  `,
-})
-export class MyComponent {
-  plugins = [Autoplay({ delay: 2000, stopOnInteraction: true })];
-  items = [1, 2, 3, 4, 5];
-}
-```
-
-### Partial Items (Multiple Visible)
-
-```html
-<div sc-carousel [options]="{ align: 'start' }" class="w-full max-w-lg">
-  <div sc-carousel-viewport>
-    <div sc-carousel-track>
-      @for (i of items; track i) {
-      <div sc-carousel-item class="basis-1/3">
-        <!-- Shows 3 items at a time -->
-      </div>
-      }
-    </div>
-  </div>
-</div>
-```
-
-### Vertical Orientation
-
-```html
-<div sc-carousel orientation="vertical" [options]="{ align: 'start' }" class="w-full max-w-xs">
-  <div sc-carousel-viewport>
-    <div sc-carousel-track class="-mt-1 h-[270px]">
-      @for (i of items; track i) {
-      <div sc-carousel-item class="basis-1/2 pt-1">
-        <div class="p-1">
-          <div class="flex items-center justify-center rounded-lg border bg-card p-6">
-            <span class="text-3xl font-semibold">{{ i }}</span>
-          </div>
-        </div>
-      </div>
-      }
-    </div>
-  </div>
-  <button sc-carousel-previous>
-    <svg si-chevron-left-icon></svg>
-    <span class="sr-only">Previous slide</span>
-  </button>
-  <button sc-carousel-next>
-    <svg si-chevron-right-icon></svg>
-    <span class="sr-only">Next slide</span>
-  </button>
-</div>
-```
-
-## Features
-
-- **Embla Carousel**: Powered by Embla for smooth, physics-based animations
-- **Touch/Swipe**: Native touch and mouse drag support
-- **Horizontal/Vertical**: Supports both orientations
-- **Keyboard Navigation**: Arrow keys for navigation
-- **Plugin System**: Extend with plugins (autoplay, auto-scroll, etc.)
-- **Flexible Options**: Loop, alignment, slide spacing, and more
-- **Responsive**: Flexible sizing with basis classes
-- **Navigation Buttons**: Prev/next with auto-disable at boundaries
-- **Accessible**: ARIA roles and roledescription
-
-## Keyboard Navigation
-
-- `ArrowLeft`: Navigate to previous slide
-- `ArrowRight`: Navigate to next slide
-
-## Accessibility
-
-- `role="region"` with `aria-roledescription="carousel"` on container
-- `role="group"` with `aria-roledescription="slide"` on items
-- Screen reader text on navigation buttons
-- Disabled state for navigation at boundaries
-
-## Carousel Options
-
-The `options` input accepts all [Embla Carousel options](https://www.embla-carousel.com/api/options/):
-
-- `align`: `'start' | 'center' | 'end'` - Slide alignment
-- `loop`: `boolean` - Enable infinite loop
-- `skipSnaps`: `boolean` - Skip slides that can't be scrolled to
-- `dragFree`: `boolean` - Enable free scroll without snap points
-- `slidesToScroll`: `number | 'auto'` - Number of slides to scroll
-- `containScroll`: `'trimSnaps' | 'keepSnaps'` - Contain scroll behavior
-- And many more...
-
-## Plugins
-
-The carousel supports all Embla plugins via the `plugins` input:
-
-### Autoplay
-
-```bash
-npm install embla-carousel-autoplay
-```
-
-```typescript
-import Autoplay from 'embla-carousel-autoplay';
-
-export class MyComponent {
-  plugins = [
-    Autoplay({
-      delay: 3000,
-      stopOnInteraction: true,
-      stopOnMouseEnter: true,
-    }),
-  ];
-}
-```
-
-### Other Available Plugins
-
-- **embla-carousel-auto-scroll**: Automatic scrolling
-- **embla-carousel-class-names**: Dynamic class names on slides
-- **embla-carousel-fade**: Fade transition effect
-
-See [Embla Carousel Plugins](https://www.embla-carousel.com/plugins/) for more.

package/src/lib/components/carousel/carousel-item.ts

@@ -1,27 +0,0 @@
-import { computed, Directive, inject, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScCarousel } from './carousel';
-
-@Directive({
-  selector: 'div[sc-carousel-item]',
-  host: {
-    'data-slot': 'carousel-item',
-    role: 'group',
-    'aria-roledescription': 'slide',
-    '[class]': 'class()',
-  },
-})
-export class ScCarouselItem {
-  private readonly carousel = inject(ScCarousel);
-
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() => {
-    const isHorizontal = this.carousel.orientation() === 'horizontal';
-    return cn(
-      'min-w-0 shrink-0 grow-0 basis-full',
-      isHorizontal ? 'pl-4' : 'pt-4',
-      this.classInput(),
-    );
-  });
-}

package/src/lib/components/carousel/carousel-next.ts

@@ -1,46 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { buttonVariants, cn, ScButtonVariants } from '@semantic-components/ui';
-import { ScCarousel } from './carousel';
-
-@Component({
-  selector: 'button[sc-carousel-next]',
-  template: `
-    <ng-content />
-  `,
-  host: {
-    'data-slot': 'carousel-next',
-    type: 'button',
-    '[class]': 'class()',
-    '[disabled]': '!carousel.canScrollNext()',
-    '(click)': 'carousel.scrollNext()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScCarouselNext {
-  readonly carousel = inject(ScCarousel);
-
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  readonly variant = input<ScButtonVariants['variant']>('outline');
-  readonly size = input<ScButtonVariants['size']>('icon-sm');
-
-  protected readonly class = computed(() => {
-    const isHorizontal = this.carousel.orientation() === 'horizontal';
-    return cn(
-      buttonVariants({ variant: this.variant(), size: this.size() }),
-      'rounded-full absolute touch-manipulation',
-      isHorizontal
-        ? 'top-1/2 -right-12 -translate-y-1/2'
-        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
-      this.classInput(),
-    );
-  });
-}

package/src/lib/components/carousel/carousel-previous.ts

@@ -1,46 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { buttonVariants, cn, ScButtonVariants } from '@semantic-components/ui';
-import { ScCarousel } from './carousel';
-
-@Component({
-  selector: 'button[sc-carousel-previous]',
-  template: `
-    <ng-content />
-  `,
-  host: {
-    'data-slot': 'carousel-previous',
-    type: 'button',
-    '[class]': 'class()',
-    '[disabled]': '!carousel.canScrollPrev()',
-    '(click)': 'carousel.scrollPrev()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScCarouselPrevious {
-  readonly carousel = inject(ScCarousel);
-
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  readonly variant = input<ScButtonVariants['variant']>('outline');
-  readonly size = input<ScButtonVariants['size']>('icon-sm');
-
-  protected readonly class = computed(() => {
-    const isHorizontal = this.carousel.orientation() === 'horizontal';
-    return cn(
-      buttonVariants({ variant: this.variant(), size: this.size() }),
-      'rounded-full absolute touch-manipulation',
-      isHorizontal
-        ? 'top-1/2 -left-12 -translate-y-1/2'
-        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
-      this.classInput(),
-    );
-  });
-}

package/src/lib/components/carousel/carousel-track.ts

@@ -1,25 +0,0 @@
-import { computed, Directive, inject, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScCarousel } from './carousel';
-
-@Directive({
-  selector: 'div[sc-carousel-track]',
-  host: {
-    'data-slot': 'carousel-track',
-    '[class]': 'class()',
-  },
-})
-export class ScCarouselTrack {
-  private readonly carousel = inject(ScCarousel);
-
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() => {
-    const isHorizontal = this.carousel.orientation() === 'horizontal';
-    return cn(
-      'flex',
-      isHorizontal ? '-ml-4' : '-mt-4 flex-col',
-      this.classInput(),
-    );
-  });
-}

package/src/lib/components/carousel/carousel-viewport.ts

@@ -1,34 +0,0 @@
-import {
-  computed,
-  Component,
-  ElementRef,
-  inject,
-  input,
-  ViewEncapsulation,
-  ChangeDetectionStrategy,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Component({
-  selector: 'div[sc-carousel-viewport]',
-  template: `
-    <ng-content />
-  `,
-  host: {
-    'data-slot': 'carousel-viewport',
-    '[class]': 'class()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScCarouselViewport {
-  private readonly elementRef = inject(ElementRef<HTMLElement>);
-
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  readonly viewportElement = computed(() => this.elementRef.nativeElement);
-
-  protected readonly class = computed(() =>
-    cn('overflow-hidden', this.classInput()),
-  );
-}

package/src/lib/components/carousel/carousel.ts

@@ -1,104 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  contentChild,
-  input,
-  signal,
-  ViewEncapsulation,
-  DestroyRef,
-  inject,
-  afterNextRender,
-} from '@angular/core';
-import EmblaCarousel, {
-  type EmblaCarouselType,
-  EmblaOptionsType,
-  EmblaPluginType,
-} from 'embla-carousel';
-import { cn } from '@semantic-components/ui';
-import { ScCarouselViewport } from './carousel-viewport';
-
-export type ScCarouselOrientation = 'horizontal' | 'vertical';
-export type ScCarouselApi = EmblaCarouselType;
-export type ScCarouselOptions = EmblaOptionsType;
-export type ScCarouselPlugin = EmblaPluginType;
-
-@Component({
-  selector: 'div[sc-carousel]',
-  template: `
-    <ng-content />
-  `,
-  host: {
-    'data-slot': 'carousel',
-    role: 'region',
-    'aria-roledescription': 'carousel',
-    '[class]': 'class()',
-    '(keydown)': 'onKeyDown($event)',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScCarousel {
-  private readonly destroyRef = inject(DestroyRef);
-
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly orientation = input<ScCarouselOrientation>('horizontal');
-  readonly options = input<ScCarouselOptions>({});
-  readonly plugins = input<ScCarouselPlugin[]>([]);
-
-  private readonly viewport = contentChild(ScCarouselViewport);
-
-  readonly canScrollPrev = signal(false);
-  readonly canScrollNext = signal(false);
-
-  private api: ScCarouselApi | null = null;
-
-  protected readonly class = computed(() => cn('relative', this.classInput()));
-
-  constructor() {
-    afterNextRender(() => {
-      const viewportEl = this.viewport()?.viewportElement();
-      if (!viewportEl) return;
-
-      const opts = {
-        ...this.options(),
-        axis: (this.orientation() === 'horizontal' ? 'x' : 'y') as 'x' | 'y',
-      };
-
-      this.api = EmblaCarousel(viewportEl, opts, this.plugins());
-
-      this.updateScrollState();
-
-      this.api.on('select', () => this.updateScrollState());
-      this.api.on('reInit', () => this.updateScrollState());
-
-      this.destroyRef.onDestroy(() => {
-        this.api?.destroy();
-      });
-    });
-  }
-
-  scrollPrev(): void {
-    this.api?.scrollPrev();
-  }
-
-  scrollNext(): void {
-    this.api?.scrollNext();
-  }
-
-  private updateScrollState(): void {
-    if (!this.api) return;
-    this.canScrollPrev.set(this.api.canScrollPrev());
-    this.canScrollNext.set(this.api.canScrollNext());
-  }
-
-  protected onKeyDown(event: KeyboardEvent): void {
-    if (event.key === 'ArrowLeft') {
-      event.preventDefault();
-      this.scrollPrev();
-    } else if (event.key === 'ArrowRight') {
-      event.preventDefault();
-      this.scrollNext();
-    }
-  }
-}

package/tsconfig.json

@@ -1,28 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "isolatedModules": true,
-    "target": "es2022",
-    "moduleResolution": "bundler",
-    "strict": true,
-    "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "emitDecoratorMetadata": false,
-    "module": "preserve"
-  },
-  "angularCompilerOptions": {
-    "enableI18nLegacyMessageIdFormat": false,
-    "strictInjectionParameters": true,
-    "strictInputAccessModifiers": true,
-    "strictTemplates": true
-  },
-  "files": [],
-  "include": [],
-  "references": [
-    {
-      "path": "./tsconfig.lib.json"
-    }
-  ]
-}

package/tsconfig.lib.json

@@ -1,12 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": []
-  },
-  "include": ["src/**/*.ts"],
-  "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
-}

package/tsconfig.lib.prod.json

@@ -1,7 +0,0 @@
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {}
-}