@semantic-components/ui-lab 0.62.0 → 0.63.0

package/src/lib/components/speed-dial/speed-dial-action.ts

@@ -0,0 +1,99 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  output,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: 'sc-speed-dial-action',
+  template: `
+    <button
+      type="button"
+      [class]="buttonClass()"
+      [disabled]="disabled()"
+      [attr.aria-label]="ariaLabel() || label()"
+      [title]="label()"
+      (click)="actionClick.emit()"
+    >
+      <span [class]="iconClass()" [innerHTML]="icon()"></span>
+      @if (showLabel()) {
+        <span class="sr-only">{{ label() }}</span>
+      }
+    </button>
+    @if (showLabel() && labelVisible()) {
+      <span [class]="labelClass()">{{ label() }}</span>
+    }
+  `,
+  styles: `
+    :host {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+    }
+
+    :host(.direction-up),
+    :host(.direction-down) {
+      flex-direction: row;
+    }
+
+    :host(.direction-left) {
+      flex-direction: row-reverse;
+    }
+
+    :host(.direction-right) {
+      flex-direction: row;
+    }
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScSpeedDialAction {
+  readonly icon = input.required<string>();
+  readonly label = input.required<string>();
+  readonly disabled = input(false);
+  readonly ariaLabel = input<string>();
+  readonly showLabel = input(true);
+  readonly labelVisible = input(true);
+  readonly size = input<'sm' | 'md' | 'lg'>('md');
+  readonly class = input<string>('');
+
+  readonly actionClick = output<void>();
+
+  protected readonly buttonClass = computed(() =>
+    cn(
+      'inline-flex items-center justify-center rounded-full',
+      'bg-secondary text-secondary-foreground',
+      'shadow-md hover:shadow-lg',
+      'transition-all duration-200',
+      'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      'disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:shadow-md',
+      this.sizeClasses(),
+      this.class(),
+    ),
+  );
+
+  protected readonly iconClass = computed(() =>
+    cn('inline-flex items-center justify-center', '[&>svg]:w-5 [&>svg]:h-5'),
+  );
+
+  protected readonly labelClass = computed(() =>
+    cn(
+      'text-sm font-medium whitespace-nowrap',
+      'bg-popover text-popover-foreground',
+      'px-2 py-1 rounded shadow-sm',
+    ),
+  );
+
+  private sizeClasses(): string {
+    const sizes = {
+      sm: 'h-10 w-10',
+      md: 'h-12 w-12',
+      lg: 'h-14 w-14',
+    };
+    return sizes[this.size()];
+  }
+}

package/src/lib/components/speed-dial/speed-dial-types.ts

@@ -0,0 +1,14 @@
+export type SpeedDialDirection = 'up' | 'down' | 'left' | 'right';
+
+export interface SpeedDialAction {
+  id: string;
+  icon: string;
+  label: string;
+  disabled?: boolean;
+  ariaLabel?: string;
+}
+
+export interface SpeedDialActionClickEvent {
+  action: SpeedDialAction;
+  index: number;
+}

package/src/lib/components/speed-dial/speed-dial.ts

@@ -0,0 +1,224 @@
+import {
+  afterNextRender,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  DestroyRef,
+  ElementRef,
+  inject,
+  input,
+  model,
+  output,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { ScSpeedDialAction } from './speed-dial-action';
+import type {
+  SpeedDialAction,
+  SpeedDialActionClickEvent,
+  SpeedDialDirection,
+} from './speed-dial-types';
+
+@Component({
+  selector: 'sc-speed-dial',
+  imports: [ScSpeedDialAction],
+  template: `
+    <div [class]="containerClass()" role="menu" [attr.aria-expanded]="open()">
+      <!-- Actions -->
+      <div [class]="actionsContainerClass()" [attr.aria-hidden]="!open()">
+        @for (action of actions(); track action.id; let i = $index) {
+          <div
+            [class]="actionWrapperClass(i)"
+            [style.transition-delay]="
+              open() ? i * 50 + 'ms' : (actions().length - 1 - i) * 30 + 'ms'
+            "
+          >
+            <sc-speed-dial-action
+              [icon]="action.icon"
+              [label]="action.label"
+              [disabled]="action.disabled ?? false"
+              [ariaLabel]="action.ariaLabel"
+              [showLabel]="showLabels()"
+              [labelVisible]="open()"
+              [size]="actionSize()"
+              [class]="
+                direction() === 'left'
+                  ? 'direction-left'
+                  : direction() === 'right'
+                    ? 'direction-right'
+                    : ''
+              "
+              (actionClick)="onActionClick(action, i)"
+            />
+          </div>
+        }
+      </div>
+
+      <!-- Main FAB button -->
+      <button
+        type="button"
+        [class]="fabClass()"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-expanded]="open()"
+        [attr.aria-haspopup]="true"
+        (click)="toggle()"
+      >
+        <span
+          [class]="fabIconClass()"
+          [innerHTML]="open() ? closeIcon() : icon()"
+        ></span>
+        @if (label() && !open()) {
+          <span class="sr-only">{{ label() }}</span>
+        }
+      </button>
+    </div>
+  `,
+  styles: `
+    :host {
+      display: inline-block;
+      position: relative;
+    }
+  `,
+  host: {
+    '(document:keydown.escape)': 'onEscape()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScSpeedDial {
+  private readonly elementRef = inject(ElementRef<HTMLElement>);
+  private readonly destroyRef = inject(DestroyRef);
+
+  readonly actions = input<SpeedDialAction[]>([]);
+  readonly direction = input<SpeedDialDirection>('up');
+  readonly icon = input<string>(
+    `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>`,
+  );
+  readonly closeIcon = input<string>(
+    `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18M6 6l12 12"/></svg>`,
+  );
+  readonly label = input<string>('Open actions');
+  readonly ariaLabel = input<string>('Speed dial');
+  readonly showLabels = input(true);
+  readonly closeOnActionClick = input(true);
+  readonly closeOnOutsideClick = input(true);
+  readonly size = input<'sm' | 'md' | 'lg'>('md');
+  readonly actionSize = input<'sm' | 'md' | 'lg'>('md');
+  readonly class = input<string>('');
+
+  readonly open = model(false);
+
+  readonly actionClick = output<SpeedDialActionClickEvent>();
+  readonly openChange = output<boolean>();
+
+  protected readonly containerClass = computed(() => {
+    const dir = this.direction();
+    return cn(
+      'relative inline-flex',
+      dir === 'up' && 'flex-col-reverse items-center',
+      dir === 'down' && 'flex-col items-center',
+      dir === 'left' && 'flex-row-reverse items-center',
+      dir === 'right' && 'flex-row items-center',
+      this.class(),
+    );
+  });
+
+  protected readonly actionsContainerClass = computed(() => {
+    const dir = this.direction();
+    return cn(
+      'flex',
+      dir === 'up' && 'flex-col-reverse items-center gap-3 mb-3',
+      dir === 'down' && 'flex-col items-center gap-3 mt-3',
+      dir === 'left' && 'flex-row-reverse items-center gap-3 mr-3',
+      dir === 'right' && 'flex-row items-center gap-3 ml-3',
+    );
+  });
+
+  protected readonly fabClass = computed(() =>
+    cn(
+      'inline-flex items-center justify-center rounded-full',
+      'bg-primary text-primary-foreground',
+      'shadow-lg hover:shadow-xl',
+      'transition-all duration-300',
+      'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      this.open() && 'rotate-0',
+      this.fabSizeClasses(),
+    ),
+  );
+
+  protected readonly fabIconClass = computed(() =>
+    cn(
+      'inline-flex items-center justify-center',
+      'transition-transform duration-300',
+      '[&>svg]:w-6 [&>svg]:h-6',
+    ),
+  );
+
+  protected actionWrapperClass(index: number): string {
+    return cn(
+      'transition-all duration-200 ease-out',
+      this.open()
+        ? 'opacity-100 scale-100 translate-y-0 translate-x-0'
+        : 'opacity-0 scale-75 pointer-events-none',
+      !this.open() && this.direction() === 'up' && 'translate-y-4',
+      !this.open() && this.direction() === 'down' && '-translate-y-4',
+      !this.open() && this.direction() === 'left' && 'translate-x-4',
+      !this.open() && this.direction() === 'right' && '-translate-x-4',
+    );
+  }
+
+  private fabSizeClasses(): string {
+    const sizes = {
+      sm: 'h-12 w-12',
+      md: 'h-14 w-14',
+      lg: 'h-16 w-16',
+    };
+    return sizes[this.size()];
+  }
+
+  constructor() {
+    afterNextRender(() => {
+      this.setupOutsideClickHandler();
+    });
+  }
+
+  toggle(): void {
+    this.open.update((v) => !v);
+    this.openChange.emit(this.open());
+  }
+
+  close(): void {
+    if (this.open()) {
+      this.open.set(false);
+      this.openChange.emit(false);
+    }
+  }
+
+  onActionClick(action: SpeedDialAction, index: number): void {
+    this.actionClick.emit({ action, index });
+    if (this.closeOnActionClick()) {
+      this.close();
+    }
+  }
+
+  onEscape(): void {
+    this.close();
+  }
+
+  private setupOutsideClickHandler(): void {
+    const handler = (event: MouseEvent) => {
+      if (!this.closeOnOutsideClick() || !this.open()) return;
+
+      const target = event.target as HTMLElement;
+      if (!this.elementRef.nativeElement.contains(target)) {
+        this.close();
+      }
+    };
+
+    document.addEventListener('click', handler);
+
+    this.destroyRef.onDestroy(() => {
+      document.removeEventListener('click', handler);
+    });
+  }
+}

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

@@ -0,0 +1,41 @@
+# Spinner
+
+A loading indicator directive applied to an SVG icon.
+
+## Components
+
+- `ScSpinner` - A directive that adds spin animation and accessibility attributes to an SVG
+
+## Usage
+
+```html
+<svg sc-spinner si-loader-2-icon></svg>
+```
+
+## With Colors
+
+```html
+<svg sc-spinner si-loader-2-icon class="text-primary"></svg> <svg sc-spinner si-loader-2-icon class="text-blue-500"></svg>
+```
+
+## Custom Size
+
+```html
+<svg sc-spinner si-loader-2-icon class="size-8"></svg>
+```
+
+## In Buttons
+
+```html
+<button disabled>
+  <svg sc-spinner si-loader-2-icon></svg>
+  Loading...
+</button>
+```
+
+## Inputs
+
+| Input   | Type     | Default     | Description            |
+| ------- | -------- | ----------- | ---------------------- |
+| `class` | `string` | `''`        | Additional CSS classes |
+| `label` | `string` | `'Loading'` | Accessible aria-label  |

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

@@ -0,0 +1 @@
+export { ScSpinner } from './spinner';

package/src/lib/components/spinner/spinner.ts

@@ -0,0 +1,20 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: 'svg[sc-spinner]',
+  host: {
+    'data-slot': 'spinner',
+    role: 'status',
+    '[attr.aria-label]': 'ariaLabel()',
+    '[class]': 'class()',
+  },
+})
+export class ScSpinner {
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly ariaLabel = input<string>('Loading', { alias: 'aria-label' });
+
+  protected readonly class = computed(() =>
+    cn('size-4 animate-spin', this.classInput()),
+  );
+}

package/src/lib/components/split-button/README.md

@@ -0,0 +1,99 @@
+# Split Button
+
+A button with a dropdown menu for additional actions. The main button performs the primary action, while the dropdown provides secondary options.
+
+## Installation
+
+```typescript
+import { ScSplitButton } from '@/ui/split-button';
+import type { SplitButtonAction, SplitButtonSize, SplitButtonVariant } from '@/ui/split-button';
+```
+
+## Usage
+
+### Basic Usage
+
+```html
+<sc-split-button label="Save" [actions]="actions" (mainClick)="onSave()" (actionClick)="onActionClick($event)" />
+```
+
+```typescript
+actions: SplitButtonAction[] = [
+  { id: 'save-draft', label: 'Save as Draft' },
+  { id: 'save-template', label: 'Save as Template' },
+  { id: 'discard', label: 'Discard', destructive: true },
+];
+```
+
+### With Icon
+
+```html
+<sc-split-button label="Download" [icon]="downloadIcon" [actions]="downloadActions" />
+```
+
+### Variant Options
+
+```html
+<sc-split-button label="Default" variant="default" [actions]="actions" />
+<sc-split-button label="Secondary" variant="secondary" [actions]="actions" />
+<sc-split-button label="Outline" variant="outline" [actions]="actions" />
+<sc-split-button label="Destructive" variant="destructive" [actions]="actions" />
+```
+
+### Size Variants
+
+```html
+<sc-split-button label="Small" size="sm" [actions]="actions" />
+<sc-split-button label="Medium" size="md" [actions]="actions" />
+<sc-split-button label="Large" size="lg" [actions]="actions" />
+```
+
+## API Reference
+
+### Inputs
+
+| Input      | Type                                                     | Default     | Description               |
+| ---------- | -------------------------------------------------------- | ----------- | ------------------------- |
+| `label`    | `string`                                                 | (required)  | Main button label         |
+| `actions`  | `SplitButtonAction[]`                                    | `[]`        | Dropdown menu actions     |
+| `icon`     | `string`                                                 | `undefined` | HTML icon for main button |
+| `variant`  | `'default' \| 'secondary' \| 'outline' \| 'destructive'` | `'default'` | Button style variant      |
+| `size`     | `'sm' \| 'md' \| 'lg'`                                   | `'md'`      | Button size               |
+| `disabled` | `boolean`                                                | `false`     | Disable the entire button |
+| `class`    | `string`                                                 | `''`        | Additional CSS classes    |
+
+### Outputs
+
+| Output        | Type                | Description                           |
+| ------------- | ------------------- | ------------------------------------- |
+| `mainClick`   | `void`              | Emitted when main button is clicked   |
+| `actionClick` | `SplitButtonAction` | Emitted when dropdown item is clicked |
+
+## Type Definitions
+
+```typescript
+interface SplitButtonAction {
+  id: string;
+  label: string;
+  icon?: string;
+  disabled?: boolean;
+  destructive?: boolean;
+}
+
+type SplitButtonVariant = 'default' | 'secondary' | 'outline' | 'destructive';
+type SplitButtonSize = 'sm' | 'md' | 'lg';
+```
+
+## Features
+
+- Split button with dropdown menu
+- Multiple style variants
+- Multiple size options
+- Main button with optional icon
+- Dropdown actions with optional icons
+- Destructive action styling
+- Disabled state for button and individual actions
+- Click outside to close dropdown
+- Escape key to close dropdown
+- Keyboard accessible
+- Animated chevron indicator

package/src/lib/components/split-button/index.ts

@@ -0,0 +1,6 @@
+export { ScSplitButton } from './split-button';
+export type {
+  SplitButtonAction,
+  SplitButtonSize,
+  SplitButtonVariant,
+} from './split-button-types';

package/src/lib/components/split-button/split-button-types.ts

@@ -0,0 +1,14 @@
+export interface SplitButtonAction {
+  id: string;
+  label: string;
+  icon?: string;
+  disabled?: boolean;
+  destructive?: boolean;
+}
+
+export type SplitButtonVariant =
+  | 'default'
+  | 'secondary'
+  | 'outline'
+  | 'destructive';
+export type SplitButtonSize = 'sm' | 'md' | 'lg';