@semantic-components/ui-lab 0.62.0 → 0.63.0

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

@@ -0,0 +1,183 @@
+# Marquee
+
+Scrolling content with smooth infinite animations, multiple directions, and customizable speed.
+
+## Components
+
+- `ScMarquee` - Main marquee container with duplicate content support
+- `ScMarqueeItem` - Individual item in the marquee
+- `ScMarqueeClone` - Clone container for seamless looping
+- `ScMarqueeFade` - Wrapper that adds gradient fade effects
+- `ScAutoMarquee` - Self-contained auto-looping marquee
+- `ScMarqueeText` - Simple text-only marquee
+
+## Usage
+
+### Text Marquee
+
+```html
+<sc-marquee-text text="Breaking news: This is scrolling text!" [duration]="15" />
+```
+
+### Content Marquee
+
+```html
+<sc-marquee [duration]="30" [gap]="24">
+  @for (item of items; track item) {
+  <div sc-marquee-item>{{ item }}</div>
+  }
+  <ng-container sc-marquee-clone>
+    @for (item of items; track item) {
+    <div sc-marquee-item>{{ item }}</div>
+    }
+  </ng-container>
+</sc-marquee>
+```
+
+### Vertical Marquee
+
+```html
+<sc-marquee direction="vertical" [duration]="20">
+  <!-- items -->
+</sc-marquee>
+```
+
+### Reversed Direction
+
+```html
+<sc-marquee [reverse]="true">
+  <!-- items -->
+</sc-marquee>
+```
+
+## API
+
+### ScMarquee
+
+| Input          | Type                         | Default        | Description              |
+| -------------- | ---------------------------- | -------------- | ------------------------ |
+| `class`        | `string`                     | `''`           | Additional CSS classes   |
+| `direction`    | `'horizontal' \| 'vertical'` | `'horizontal'` | Scroll direction         |
+| `duration`     | `number`                     | `40`           | Animation duration (sec) |
+| `gap`          | `number`                     | `16`           | Gap between items (px)   |
+| `pauseOnHover` | `boolean`                    | `true`         | Pause animation on hover |
+| `reverse`      | `boolean`                    | `false`        | Reverse scroll direction |
+
+### ScMarqueeText
+
+| Input          | Type      | Default | Description                   |
+| -------------- | --------- | ------- | ----------------------------- |
+| `class`        | `string`  | `''`    | Additional CSS classes        |
+| `text`         | `string`  | -       | **Required.** Text to display |
+| `separator`    | `string`  | `'•'`   | Separator between repetitions |
+| `duration`     | `number`  | `20`    | Animation duration (sec)      |
+| `pauseOnHover` | `boolean` | `true`  | Pause animation on hover      |
+| `reverse`      | `boolean` | `false` | Reverse scroll direction      |
+
+### ScMarqueeItem
+
+| Input   | Type     | Default | Description            |
+| ------- | -------- | ------- | ---------------------- |
+| `class` | `string` | `''`    | Additional CSS classes |
+
+### ScMarqueeClone
+
+| Input   | Type     | Default | Description            |
+| ------- | -------- | ------- | ---------------------- |
+| `class` | `string` | `''`    | Additional CSS classes |
+
+### ScMarqueeFade
+
+| Input       | Type                         | Default        | Description            |
+| ----------- | ---------------------------- | -------------- | ---------------------- |
+| `class`     | `string`                     | `''`           | Additional CSS classes |
+| `direction` | `'horizontal' \| 'vertical'` | `'horizontal'` | Fade direction         |
+| `fadeSize`  | `string`                     | `'5rem'`       | Size of fade gradient  |
+
+## Examples
+
+### Logo Carousel
+
+```html
+<sc-marquee [duration]="30" [gap]="48">
+  @for (logo of logos; track logo) {
+  <div sc-marquee-item class="w-32 h-16 flex items-center justify-center border rounded">{{ logo }}</div>
+  }
+  <ng-container sc-marquee-clone>
+    @for (logo of logos; track logo) {
+    <div sc-marquee-item class="w-32 h-16 flex items-center justify-center border rounded">{{ logo }}</div>
+    }
+  </ng-container>
+</sc-marquee>
+```
+
+### Testimonials
+
+```html
+<sc-marquee [duration]="40" [gap]="24">
+  @for (testimonial of testimonials; track testimonial.name) {
+  <div sc-marquee-item class="w-80 p-4 border rounded">
+    <p>"{{ testimonial.quote }}"</p>
+    <p class="font-medium">{{ testimonial.name }}</p>
+  </div>
+  }
+  <ng-container sc-marquee-clone>
+    <!-- duplicate content -->
+  </ng-container>
+</sc-marquee>
+```
+
+### Vertical Notifications
+
+```html
+<div class="h-48 overflow-hidden">
+  <sc-marquee direction="vertical" [duration]="20">
+    @for (notification of notifications; track notification.id) {
+    <div sc-marquee-item class="p-3 border rounded">{{ notification.icon }} {{ notification.title }}</div>
+    }
+    <ng-container sc-marquee-clone>
+      <!-- duplicate content -->
+    </ng-container>
+  </sc-marquee>
+</div>
+```
+
+### Stacked Marquees
+
+```html
+<div class="space-y-2">
+  <sc-marquee [duration]="30"><!-- row 1 --></sc-marquee>
+  <sc-marquee [duration]="25" [reverse]="true"><!-- row 2 --></sc-marquee>
+  <sc-marquee [duration]="35"><!-- row 3 --></sc-marquee>
+</div>
+```
+
+### Speed Variations
+
+```html
+<!-- Fast -->
+<sc-marquee-text text="Fast" [duration]="10" />
+
+<!-- Normal -->
+<sc-marquee-text text="Normal" [duration]="20" />
+
+<!-- Slow -->
+<sc-marquee-text text="Slow" [duration]="40" />
+```
+
+## How It Works
+
+The marquee creates seamless infinite scrolling by:
+
+1. Displaying the original content
+2. Displaying a clone of the content (via `sc-marquee-clone`)
+3. Animating both together with CSS animations
+4. When the first set scrolls out, the second set takes its place seamlessly
+
+For `sc-marquee-text`, the text is automatically duplicated multiple times internally.
+
+## Accessibility
+
+- Clone content is marked with `aria-hidden="true"` to prevent duplicate screen reader announcements
+- Pause on hover allows users to read content
+- Animations respect `prefers-reduced-motion` media query (can be added via CSS)

package/src/lib/components/marquee/auto-marquee.ts

@@ -0,0 +1,73 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: 'sc-auto-marquee',
+  template: `
+    <div [class]="trackClass()">
+      <div [class]="contentClass()">
+        <ng-content />
+      </div>
+      <div [class]="contentClass()" aria-hidden="true">
+        <ng-content select="[clone]" />
+      </div>
+    </div>
+  `,
+  host: {
+    'data-slot': 'auto-marquee',
+    '[class]': 'class()',
+    '[style.--marquee-duration]': 'duration() + "s"',
+    '[style.--marquee-gap]': 'gap() + "px"',
+    '[attr.data-pause-on-hover]': 'pauseOnHover() || null',
+  },
+  styles: `
+    [data-slot='auto-marquee'] {
+      --marquee-duration: 30s;
+      --marquee-gap: 16px;
+      overflow: hidden;
+    }
+
+    [data-slot='auto-marquee'] [data-slot='auto-marquee-track'] {
+      display: flex;
+      gap: var(--marquee-gap);
+      width: max-content;
+      animation: auto-marquee-scroll var(--marquee-duration) linear infinite;
+    }
+
+    [data-slot='auto-marquee'][data-pause-on-hover]:hover
+      [data-slot='auto-marquee-track'] {
+      animation-play-state: paused;
+    }
+
+    @keyframes auto-marquee-scroll {
+      from {
+        transform: translateX(0);
+      }
+      to {
+        transform: translateX(calc(-50% - var(--marquee-gap) / 2));
+      }
+    }
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScAutoMarquee {
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly duration = input<number>(30);
+  readonly gap = input<number>(16);
+  readonly pauseOnHover = input<boolean>(true);
+
+  protected readonly class = computed(() => cn('w-full', this.classInput()));
+
+  protected readonly trackClass = computed(() => cn('flex'));
+
+  protected readonly contentClass = computed(() =>
+    cn('flex shrink-0 items-center gap-[--marquee-gap]'),
+  );
+}

package/src/lib/components/marquee/index.ts

@@ -0,0 +1,6 @@
+export { ScMarquee } from './marquee';
+export { ScMarqueeItem } from './marquee-item';
+export { ScMarqueeClone } from './marquee-clone';
+export { ScMarqueeFade } from './marquee-fade';
+export { ScAutoMarquee } from './auto-marquee';
+export { ScMarqueeText } from './marquee-text';

package/src/lib/components/marquee/marquee-clone.ts

@@ -0,0 +1,17 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: '[sc-marquee-clone]',
+  host: {
+    'data-slot': 'marquee-clone',
+    '[class]': 'class()',
+  },
+})
+export class ScMarqueeClone {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('flex-shrink-0', this.classInput()),
+  );
+}

package/src/lib/components/marquee/marquee-fade.ts

@@ -0,0 +1,53 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: 'sc-marquee-fade',
+  template: `
+    <div [class]="fadeLeftClass()"></div>
+    <ng-content />
+    <div [class]="fadeRightClass()"></div>
+  `,
+  host: {
+    'data-slot': 'marquee-fade',
+    '[class]': 'class()',
+    '[attr.data-direction]': 'direction()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScMarqueeFade {
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly direction = input<'horizontal' | 'vertical'>('horizontal');
+  readonly fadeSize = input<string>('5rem');
+
+  protected readonly class = computed(() =>
+    cn('relative overflow-hidden', this.classInput()),
+  );
+
+  protected readonly fadeLeftClass = computed(() => {
+    const isVertical = this.direction() === 'vertical';
+    return cn(
+      'pointer-events-none absolute z-10 from-background to-transparent',
+      isVertical
+        ? `top-0 left-0 right-0 h-[${this.fadeSize()}] bg-gradient-to-b`
+        : `left-0 top-0 bottom-0 w-[${this.fadeSize()}] bg-gradient-to-r`,
+    );
+  });
+
+  protected readonly fadeRightClass = computed(() => {
+    const isVertical = this.direction() === 'vertical';
+    return cn(
+      'pointer-events-none absolute z-10 from-background to-transparent',
+      isVertical
+        ? `bottom-0 left-0 right-0 h-[${this.fadeSize()}] bg-gradient-to-t`
+        : `right-0 top-0 bottom-0 w-[${this.fadeSize()}] bg-gradient-to-l`,
+    );
+  });
+}

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

@@ -0,0 +1,17 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: '[sc-marquee-item]',
+  host: {
+    'data-slot': 'marquee-item',
+    '[class]': 'class()',
+  },
+})
+export class ScMarqueeItem {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('flex-shrink-0', this.classInput()),
+  );
+}

package/src/lib/components/marquee/marquee-text.ts

@@ -0,0 +1,80 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: 'sc-marquee-text',
+  template: `
+    <div [class]="trackClass()">
+      <span [class]="textClass()">{{ text() }}</span>
+      <span [class]="separatorClass()">{{ separator() }}</span>
+      <span [class]="textClass()">{{ text() }}</span>
+      <span [class]="separatorClass()">{{ separator() }}</span>
+      <span [class]="textClass()">{{ text() }}</span>
+      <span [class]="separatorClass()">{{ separator() }}</span>
+      <span [class]="textClass()">{{ text() }}</span>
+      <span [class]="separatorClass()">{{ separator() }}</span>
+    </div>
+  `,
+  host: {
+    'data-slot': 'marquee-text',
+    '[class]': 'class()',
+    '[style.--text-duration]': 'duration() + "s"',
+    '[attr.data-pause-on-hover]': 'pauseOnHover() || null',
+    '[attr.data-reverse]': 'reverse() || null',
+  },
+  styles: `
+    [data-slot='marquee-text'] {
+      --text-duration: 20s;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
+    [data-slot='marquee-text'] > div {
+      display: inline-block;
+      animation: marquee-text-scroll var(--text-duration) linear infinite;
+    }
+
+    [data-slot='marquee-text'][data-reverse] > div {
+      animation-direction: reverse;
+    }
+
+    [data-slot='marquee-text'][data-pause-on-hover]:hover > div {
+      animation-play-state: paused;
+    }
+
+    @keyframes marquee-text-scroll {
+      from {
+        transform: translateX(0);
+      }
+      to {
+        transform: translateX(-50%);
+      }
+    }
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScMarqueeText {
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly text = input.required<string>();
+  readonly separator = input<string>('•');
+  readonly duration = input<number>(20);
+  readonly pauseOnHover = input<boolean>(true);
+  readonly reverse = input<boolean>(false);
+
+  protected readonly class = computed(() => cn('w-full', this.classInput()));
+
+  protected readonly trackClass = computed(() => cn('whitespace-nowrap'));
+
+  protected readonly textClass = computed(() => cn('inline-block px-4'));
+
+  protected readonly separatorClass = computed(() =>
+    cn('inline-block px-2 text-muted-foreground'),
+  );
+}

package/src/lib/components/marquee/marquee.ts

@@ -0,0 +1,96 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: 'sc-marquee',
+  template: `
+    <div [class]="innerClass()">
+      <ng-content />
+    </div>
+    <div [class]="innerClass()" aria-hidden="true">
+      <ng-content select="[sc-marquee-clone]" />
+    </div>
+  `,
+  host: {
+    'data-slot': 'marquee',
+    '[class]': 'class()',
+    '[style.--duration]': 'duration() + "s"',
+    '[style.--gap]': 'gap() + "px"',
+    '[attr.data-direction]': 'direction()',
+    '[attr.data-pause-on-hover]': 'pauseOnHover() || null',
+    '[attr.data-reverse]': 'reverse() || null',
+  },
+  styles: `
+    [data-slot='marquee'] {
+      --duration: 40s;
+      --gap: 16px;
+      display: flex;
+      overflow: hidden;
+      gap: var(--gap);
+    }
+
+    [data-slot='marquee'] > div {
+      display: flex;
+      flex-shrink: 0;
+      gap: var(--gap);
+      animation: marquee var(--duration) linear infinite;
+    }
+
+    [data-slot='marquee'][data-direction='vertical'] {
+      flex-direction: column;
+    }
+
+    [data-slot='marquee'][data-direction='vertical'] > div {
+      flex-direction: column;
+      animation-name: marquee-vertical;
+    }
+
+    [data-slot='marquee'][data-reverse] > div {
+      animation-direction: reverse;
+    }
+
+    [data-slot='marquee'][data-pause-on-hover]:hover > div {
+      animation-play-state: paused;
+    }
+
+    @keyframes marquee {
+      from {
+        transform: translateX(0);
+      }
+      to {
+        transform: translateX(calc(-100% - var(--gap)));
+      }
+    }
+
+    @keyframes marquee-vertical {
+      from {
+        transform: translateY(0);
+      }
+      to {
+        transform: translateY(calc(-100% - var(--gap)));
+      }
+    }
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScMarquee {
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly direction = input<'horizontal' | 'vertical'>('horizontal');
+  readonly duration = input<number>(40);
+  readonly gap = input<number>(16);
+  readonly pauseOnHover = input<boolean>(true);
+  readonly reverse = input<boolean>(false);
+
+  protected readonly class = computed(() => cn(this.classInput()));
+
+  protected readonly innerClass = computed(() =>
+    cn('flex shrink-0 items-center justify-around'),
+  );
+}