@semantic-components/ui-lab 0.62.0 → 0.63.0

package/src/lib/components/multi-select/multi-select.ts

@@ -0,0 +1,394 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  input,
+  model,
+  output,
+  signal,
+  ViewEncapsulation,
+  viewChild,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+export interface MultiSelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+@Component({
+  selector: 'sc-multi-select',
+  exportAs: 'scMultiSelect',
+  template: `
+    <div [class]="containerClass()">
+      <!-- Trigger -->
+      <button
+        #triggerEl
+        type="button"
+        [class]="triggerClass()"
+        [disabled]="disabled()"
+        (click)="toggleDropdown()"
+        [attr.aria-expanded]="dropdownOpen()"
+        [attr.aria-haspopup]="'listbox'"
+      >
+        <div class="flex flex-wrap gap-1 flex-1">
+          @if (selectedOptions().length === 0) {
+            <span class="text-muted-foreground">{{ placeholder() }}</span>
+          } @else if (showChips()) {
+            @for (option of selectedOptions(); track option.value) {
+              <span [class]="chipClass()">
+                {{ option.label }}
+                <button
+                  type="button"
+                  class="ml-1 hover:text-foreground focus:outline-none"
+                  (click)="removeOption($event, option)"
+                  [attr.aria-label]="'Remove ' + option.label"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    class="size-3"
+                  >
+                    <path d="M18 6 6 18M6 6l12 12" />
+                  </svg>
+                </button>
+              </span>
+            }
+          } @else {
+            <span>{{ selectedOptions().length }} selected</span>
+          }
+        </div>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          class="size-4 shrink-0 text-muted-foreground"
+        >
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      </button>
+
+      <!-- Dropdown -->
+      @if (dropdownOpen()) {
+        <div
+          [class]="dropdownClass()"
+          role="listbox"
+          aria-multiselectable="true"
+        >
+          <!-- Search -->
+          @if (searchable()) {
+            <div class="p-2 border-b">
+              <input
+                #searchInput
+                type="text"
+                [class]="searchInputClass()"
+                placeholder="Search..."
+                [value]="searchQuery()"
+                (input)="onSearchInput($event)"
+                (keydown)="onSearchKeydown($event)"
+              />
+            </div>
+          }
+
+          <!-- Select All -->
+          @if (showSelectAll()) {
+            <div class="p-1 border-b">
+              <button
+                type="button"
+                [class]="selectAllClass()"
+                (click)="toggleSelectAll()"
+              >
+                <div [class]="checkboxClass(allSelected())">
+                  @if (allSelected()) {
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="3"
+                      class="size-3"
+                    >
+                      <path d="M20 6 9 17l-5-5" />
+                    </svg>
+                  } @else if (someSelected()) {
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="3"
+                      class="size-3"
+                    >
+                      <path d="M5 12h14" />
+                    </svg>
+                  }
+                </div>
+                <span>Select All</span>
+              </button>
+            </div>
+          }
+
+          <!-- Options -->
+          <div class="max-h-48 overflow-y-auto p-1">
+            @for (option of filteredOptions(); track option.value) {
+              <button
+                type="button"
+                role="option"
+                [class]="optionClass(option)"
+                [disabled]="option.disabled"
+                [attr.aria-selected]="isSelected(option)"
+                (click)="toggleOption(option)"
+              >
+                <div [class]="checkboxClass(isSelected(option))">
+                  @if (isSelected(option)) {
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="3"
+                      class="size-3"
+                    >
+                      <path d="M20 6 9 17l-5-5" />
+                    </svg>
+                  }
+                </div>
+                <span>{{ option.label }}</span>
+              </button>
+            } @empty {
+              <div class="px-2 py-6 text-center text-sm text-muted-foreground">
+                No options found
+              </div>
+            }
+          </div>
+
+          <!-- Clear All -->
+          @if (showClearAll() && selectedOptions().length > 0) {
+            <div class="p-2 border-t">
+              <button
+                type="button"
+                class="w-full text-sm text-muted-foreground hover:text-foreground"
+                (click)="clearAll()"
+              >
+                Clear all
+              </button>
+            </div>
+          }
+        </div>
+      }
+    </div>
+
+    @if (dropdownOpen()) {
+      <div class="fixed inset-0 z-40" (click)="closeDropdown()"></div>
+    }
+  `,
+  host: {
+    'data-slot': 'multi-select',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScMultiSelect {
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly placeholder = input<string>('Select options...');
+  readonly disabled = input<boolean>(false);
+  readonly options = input<MultiSelectOption[]>([]);
+  readonly searchable = input<boolean>(true);
+  readonly showChips = input<boolean>(true);
+  readonly showSelectAll = input<boolean>(false);
+  readonly showClearAll = input<boolean>(true);
+  readonly maxDisplayedChips = input<number>(3);
+
+  readonly value = model<string[]>([]);
+
+  readonly valueChange = output<string[]>();
+  readonly optionSelect = output<MultiSelectOption>();
+  readonly optionRemove = output<MultiSelectOption>();
+
+  protected readonly dropdownOpen = signal(false);
+  protected readonly searchQuery = signal('');
+
+  private readonly searchInput =
+    viewChild<ElementRef<HTMLInputElement>>('searchInput');
+  private readonly triggerEl =
+    viewChild<ElementRef<HTMLButtonElement>>('triggerEl');
+
+  protected readonly selectedOptions = computed(() => {
+    const selected = this.value();
+    return this.options().filter((o) => selected.includes(o.value));
+  });
+
+  protected readonly filteredOptions = computed(() => {
+    const query = this.searchQuery().toLowerCase();
+    if (!query) return this.options();
+    return this.options().filter((o) => o.label.toLowerCase().includes(query));
+  });
+
+  protected readonly allSelected = computed(() => {
+    const filtered = this.filteredOptions().filter((o) => !o.disabled);
+    return (
+      filtered.length > 0 &&
+      filtered.every((o) => this.value().includes(o.value))
+    );
+  });
+
+  protected readonly someSelected = computed(() => {
+    const filtered = this.filteredOptions().filter((o) => !o.disabled);
+    const selected = filtered.filter((o) => this.value().includes(o.value));
+    return selected.length > 0 && selected.length < filtered.length;
+  });
+
+  protected readonly containerClass = computed(() =>
+    cn('relative', this.classInput()),
+  );
+
+  protected readonly triggerClass = computed(() =>
+    cn(
+      'flex min-h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-1.5 text-sm shadow-sm',
+      'hover:bg-accent/50',
+      'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+      'transition-colors',
+    ),
+  );
+
+  protected readonly chipClass = computed(() =>
+    cn(
+      'inline-flex items-center gap-1 rounded-md bg-secondary px-2 py-0.5 text-xs font-medium text-secondary-foreground',
+    ),
+  );
+
+  protected readonly dropdownClass = computed(() =>
+    cn(
+      'absolute left-0 top-full mt-1 z-50 w-full rounded-md border bg-popover shadow-md',
+      'animate-in fade-in-0 zoom-in-95',
+    ),
+  );
+
+  protected readonly searchInputClass = computed(() =>
+    cn(
+      'flex h-8 w-full rounded-md border border-input bg-transparent px-2 py-1 text-sm',
+      'placeholder:text-muted-foreground',
+      'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+    ),
+  );
+
+  protected readonly selectAllClass = computed(() =>
+    cn(
+      'flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm',
+      'hover:bg-accent hover:text-accent-foreground',
+    ),
+  );
+
+  protected optionClass(option: MultiSelectOption): string {
+    return cn(
+      'flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm',
+      'hover:bg-accent hover:text-accent-foreground',
+      'focus-visible:outline-none focus-visible:bg-accent',
+      option.disabled && 'opacity-50 cursor-not-allowed',
+    );
+  }
+
+  protected checkboxClass(checked: boolean): string {
+    return cn(
+      'flex size-4 shrink-0 items-center justify-center rounded-sm border border-primary',
+      checked && 'bg-primary text-primary-foreground',
+    );
+  }
+
+  isSelected(option: MultiSelectOption): boolean {
+    return this.value().includes(option.value);
+  }
+
+  toggleDropdown(): void {
+    if (this.dropdownOpen()) {
+      this.closeDropdown();
+    } else {
+      this.openDropdown();
+    }
+  }
+
+  openDropdown(): void {
+    this.dropdownOpen.set(true);
+    this.searchQuery.set('');
+    if (this.searchable()) {
+      setTimeout(() => {
+        this.searchInput()?.nativeElement.focus();
+      });
+    }
+  }
+
+  closeDropdown(): void {
+    this.dropdownOpen.set(false);
+    this.searchQuery.set('');
+  }
+
+  toggleOption(option: MultiSelectOption): void {
+    if (option.disabled) return;
+
+    const current = this.value();
+    if (current.includes(option.value)) {
+      this.value.set(current.filter((v) => v !== option.value));
+      this.optionRemove.emit(option);
+    } else {
+      this.value.set([...current, option.value]);
+      this.optionSelect.emit(option);
+    }
+    this.valueChange.emit(this.value());
+  }
+
+  removeOption(event: Event, option: MultiSelectOption): void {
+    event.stopPropagation();
+    const current = this.value();
+    this.value.set(current.filter((v) => v !== option.value));
+    this.optionRemove.emit(option);
+    this.valueChange.emit(this.value());
+  }
+
+  toggleSelectAll(): void {
+    const filtered = this.filteredOptions().filter((o) => !o.disabled);
+    if (this.allSelected()) {
+      // Deselect all filtered
+      const filteredValues = filtered.map((o) => o.value);
+      this.value.set(this.value().filter((v) => !filteredValues.includes(v)));
+    } else {
+      // Select all filtered
+      const current = new Set(this.value());
+      filtered.forEach((o) => current.add(o.value));
+      this.value.set([...current]);
+    }
+    this.valueChange.emit(this.value());
+  }
+
+  clearAll(): void {
+    this.value.set([]);
+    this.valueChange.emit([]);
+  }
+
+  onSearchInput(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    this.searchQuery.set(input.value);
+  }
+
+  onSearchKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Escape') {
+      this.closeDropdown();
+      this.triggerEl()?.nativeElement.focus();
+    }
+  }
+
+  focus(): void {
+    this.triggerEl()?.nativeElement.focus();
+  }
+
+  getSelectedOptions(): MultiSelectOption[] {
+    return this.selectedOptions();
+  }
+}

package/src/lib/components/native-checkbox/README.md

@@ -0,0 +1,113 @@
+# Native Checkbox
+
+A directive that styles native `<input type="checkbox">` elements while preserving native form behavior.
+
+## Why Native Checkbox?
+
+Unlike `ScCheckbox` (which is a custom component), `ScNativeCheckbox` is a directive for native HTML checkbox inputs. This provides:
+
+- **Native form integration** - Works with `ngModel`, Reactive Forms, and Signal Forms
+- **No ControlValueAccessor needed** - The native input handles all form state
+- **Browser accessibility** - Leverages built-in browser accessibility features
+- **Smaller bundle** - No custom form control logic
+
+## Components
+
+- `ScNativeCheckbox` - Directive for `<input type="checkbox">`
+
+## Usage
+
+### Basic
+
+```html
+<input scNativeCheckbox id="terms" (change)="onCheck($event)" />
+<label for="terms">Accept terms</label>
+```
+
+### With ngModel
+
+```html
+<input scNativeCheckbox [(ngModel)]="accepted" id="terms" />
+<label for="terms">Accept terms</label>
+```
+
+### With Signal Forms
+
+```typescript
+import { signal } from '@angular/core';
+import { form, FormField } from '@angular/forms/signals';
+
+readonly formModel = signal({ newsletter: false });
+readonly checkboxForm = form(this.formModel);
+```
+
+```html
+<input scNativeCheckbox type="checkbox" id="newsletter" [formField]="checkboxForm.newsletter" />
+<label for="newsletter">Subscribe</label>
+```
+
+Note: Add `FormField` to your component's `imports` array to use the `[formField]` directive. When using `[formField]`, you cannot use other property bindings like `[checked]` on the same element.
+
+### Indeterminate State
+
+```html
+<input scNativeCheckbox [indeterminate]="someSelected" id="select-all" />
+<label for="select-all">Select all</label>
+```
+
+### Disabled
+
+```html
+<input scNativeCheckbox disabled id="disabled" />
+<label for="disabled">Disabled checkbox</label>
+```
+
+## Inputs
+
+| Input           | Type      | Default | Description                              |
+| --------------- | --------- | ------- | ---------------------------------------- |
+| `checked`       | `boolean` | -       | Checked state (for programmatic control) |
+| `indeterminate` | `boolean` | `false` | Whether checkbox is indeterminate        |
+| `class`         | `string`  | `''`    | Additional CSS classes                   |
+
+## Architecture
+
+### Styling Approach
+
+The directive uses `appearance: none` to hide the native checkbox appearance and applies custom styles via Tailwind CSS classes. The checkmark icon is rendered as a background-image using inline SVG data URIs.
+
+```
+┌─────────────────────────────────────┐
+│  Native <input type="checkbox">     │
+│  ┌─────────────────────────────┐    │
+│  │  appearance: none           │    │
+│  │  + Tailwind border/bg       │    │
+│  │  + SVG background-image     │    │
+│  └─────────────────────────────┘    │
+└─────────────────────────────────────┘
+```
+
+### State Tracking
+
+The directive listens to `change` and `input` events to track the native checked state, then conditionally shows the checkmark SVG via `background-image`.
+
+CSS pseudo-classes (`:checked`, `:disabled`, `:focus-visible`) handle visual state changes natively.
+
+### Comparison with ScCheckbox
+
+| Feature              | ScCheckbox          | ScNativeCheckbox       |
+| -------------------- | ------------------- | ---------------------- |
+| Type                 | Component           | Directive              |
+| Form Integration     | Two-way via model() | Native form controls   |
+| ARIA                 | Manual attributes   | Native browser support |
+| Checkmark            | SVG in template     | SVG background-image   |
+| Signal Forms         | FormCheckboxControl | FormCheckboxControl    |
+| ControlValueAccessor | Not implemented     | Not needed             |
+
+## Accessibility
+
+- Native `<input type="checkbox">` provides built-in accessibility
+- Works with `<label for="id">` associations
+- Keyboard accessible (Space to toggle, Tab to navigate)
+- Focus ring styling via `:focus-visible`
+- Disabled state via native `disabled` attribute

package/src/lib/components/native-checkbox/index.ts

@@ -0,0 +1 @@
+export * from './native-checkbox';

package/src/lib/components/native-checkbox/native-checkbox.ts

@@ -0,0 +1,116 @@
+import {
+  afterNextRender,
+  computed,
+  Directive,
+  effect,
+  ElementRef,
+  inject,
+  input,
+  PLATFORM_ID,
+  signal,
+} from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { cn } from '@semantic-components/ui';
+
+const checkSvgLight = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")`;
+const indeterminateSvgLight = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' x2='19' y1='12' y2='12'/%3E%3C/svg%3E")`;
+
+const checkSvgDark = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")`;
+const indeterminateSvgDark = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' x2='19' y1='12' y2='12'/%3E%3C/svg%3E")`;
+
+@Directive({
+  selector: 'input[scNativeCheckbox]',
+  host: {
+    type: 'checkbox',
+    'data-slot': 'checkbox',
+    '[class]': 'class()',
+    '[style.background-image]': 'backgroundImage()',
+    '[style.background-size]': '"100% 100%"',
+    '[style.background-position]': '"center"',
+    '[style.background-repeat]': '"no-repeat"',
+    '(change)': 'onChange()',
+    '(input)': 'onChange()',
+  },
+})
+export class ScNativeCheckbox {
+  private readonly elementRef = inject(ElementRef<HTMLInputElement>);
+  private readonly platformId = inject(PLATFORM_ID);
+
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly checkedInput = input<boolean | undefined>(undefined, {
+    alias: 'checked',
+  });
+  readonly indeterminate = input<boolean>(false);
+
+  protected readonly internalChecked = signal(false);
+  protected readonly isDarkMode = signal(false);
+
+  constructor() {
+    // Set indeterminate state on the native element
+    effect(() => {
+      this.elementRef.nativeElement.indeterminate = this.indeterminate();
+    });
+
+    // Sync checked state from input to both internal signal and native element
+    effect(() => {
+      const checked = this.checkedInput();
+      if (checked !== undefined) {
+        this.internalChecked.set(checked);
+        this.elementRef.nativeElement.checked = checked;
+      }
+    });
+
+    // Detect dark mode and watch for changes
+    if (isPlatformBrowser(this.platformId)) {
+      afterNextRender(() => {
+        // Initial detection
+        this.updateDarkMode();
+
+        // Watch for class changes on document element
+        const observer = new MutationObserver(() => {
+          this.updateDarkMode();
+        });
+
+        observer.observe(document.documentElement, {
+          attributes: true,
+          attributeFilter: ['class'],
+        });
+
+        // Sync initial checked state from native element
+        if (this.checkedInput() === undefined) {
+          this.internalChecked.set(this.elementRef.nativeElement.checked);
+        }
+      });
+    }
+  }
+
+  private updateDarkMode(): void {
+    this.isDarkMode.set(document.documentElement.classList.contains('dark'));
+  }
+
+  protected readonly class = computed(() =>
+    cn(
+      'peer h-4 w-4 shrink-0 appearance-none rounded-sm border border-primary bg-background ring-offset-background transition-colors',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+      'checked:bg-primary checked:border-primary',
+      'indeterminate:bg-primary indeterminate:border-primary',
+      this.classInput(),
+    ),
+  );
+
+  protected readonly backgroundImage = computed(() => {
+    const isDark = this.isDarkMode();
+    if (this.indeterminate()) {
+      return isDark ? indeterminateSvgDark : indeterminateSvgLight;
+    }
+    if (this.internalChecked()) {
+      return isDark ? checkSvgDark : checkSvgLight;
+    }
+    return 'none';
+  });
+
+  protected onChange(): void {
+    this.internalChecked.set(this.elementRef.nativeElement.checked);
+  }
+}