@semantic-components/ui-lab 0.62.0 → 0.63.0

package/src/lib/components/menu/menu-sub-provider.ts

@@ -0,0 +1,52 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  contentChild,
+  effect,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { SIGNAL, signalSetFn } from '@angular/core/primitives/signals';
+import { cn } from '@semantic-components/ui';
+import { ScMenuSubTrigger } from './menu-sub-trigger';
+import { ScMenuSub } from './menu-sub';
+
+@Component({
+  selector: 'div[sc-menu-sub-provider]',
+  imports: [],
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'menu-sub-provider',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScMenuSubProvider {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  private readonly triggerChild = contentChild(ScMenuSubTrigger);
+  private readonly content = contentChild(ScMenuSub, {
+    descendants: true,
+  });
+
+  readonly origin = computed(() => this.triggerChild()?.overlayOrigin);
+  readonly menuItem = computed(() => this.triggerChild()?.menuItem);
+  readonly submenu = computed(() => this.content()?.menu);
+
+  protected readonly class = computed(() => cn('relative', this.classInput()));
+
+  constructor() {
+    // Auto-connect trigger's submenu to the content's menu
+    effect(() => {
+      const menuItem = this.triggerChild()?.menuItem;
+      const submenu = this.content()?.menu;
+      if (menuItem && submenu) {
+        signalSetFn(menuItem.submenu[SIGNAL], submenu);
+      }
+    });
+  }
+}

package/src/lib/components/menu/menu-sub-trigger.ts

@@ -0,0 +1,34 @@
+import { CdkOverlayOrigin } from '@angular/cdk/overlay';
+import { MenuItem } from '@angular/aria/menu';
+import { computed, Directive, inject, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: 'div[sc-menu-sub-trigger]',
+  hostDirectives: [
+    {
+      directive: MenuItem,
+      inputs: ['value'],
+    },
+    CdkOverlayOrigin,
+  ],
+  host: {
+    'data-slot': 'menu-sub-trigger',
+    '[class]': 'class()',
+  },
+})
+export class ScMenuSubTrigger {
+  readonly menuItem = inject(MenuItem);
+  readonly overlayOrigin = inject(CdkOverlayOrigin);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors',
+      'hover:bg-accent hover:text-accent-foreground',
+      'data-[active=true]:bg-accent data-[active=true]:text-accent-foreground',
+      'aria-disabled:pointer-events-none aria-disabled:opacity-50',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/menu/menu-sub.ts

@@ -0,0 +1,41 @@
+import { Menu, MenuContent } from '@angular/aria/menu';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: 'div[sc-menu-sub]',
+  imports: [MenuContent],
+  hostDirectives: [Menu],
+  template: `
+    <ng-template ngMenuContent>
+      <ng-content />
+    </ng-template>
+  `,
+  host: {
+    'data-slot': 'menu-sub',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScMenuSub {
+  readonly menu = inject(Menu);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-md',
+      this.menu.visible()
+        ? 'opacity-100 visible transition-[opacity,visibility] duration-150 ease-out'
+        : 'opacity-0 invisible transition-[opacity,visibility] duration-150 ease-in [transition-delay:0s,150ms]',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/menu/menu-trigger.ts

@@ -0,0 +1,27 @@
+import { CdkOverlayOrigin } from '@angular/cdk/overlay';
+import { MenuTrigger } from '@angular/aria/menu';
+import { computed, Directive, inject, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: 'button[sc-menu-trigger]',
+  hostDirectives: [MenuTrigger, CdkOverlayOrigin],
+  host: {
+    'data-slot': 'menu-trigger',
+    '[class]': 'class()',
+  },
+})
+export class ScMenuTrigger {
+  readonly trigger = inject(MenuTrigger);
+  readonly overlayOrigin = inject(CdkOverlayOrigin);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'inline-flex h-9 cursor-pointer items-center justify-center gap-2 rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-xs transition-colors',
+      'hover:bg-accent hover:text-accent-foreground',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/menu/menu.ts

@@ -0,0 +1,41 @@
+import { Menu, MenuContent } from '@angular/aria/menu';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: 'div[sc-menu]',
+  imports: [MenuContent],
+  hostDirectives: [Menu],
+  template: `
+    <ng-template ngMenuContent>
+      <ng-content />
+    </ng-template>
+  `,
+  host: {
+    'data-slot': 'menu',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScMenu {
+  readonly menu = inject(Menu);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-md',
+      this.menu.visible()
+        ? 'opacity-100 visible transition-[opacity,visibility] duration-150 ease-out'
+        : 'opacity-0 invisible transition-[opacity,visibility] duration-150 ease-in [transition-delay:0s,150ms]',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/multi-select/README.md

@@ -0,0 +1,155 @@
+# Multi-Select
+
+Select multiple options from a dropdown with chips, search, and select-all functionality.
+
+## Components
+
+- `ScMultiSelect` - Multi-selection dropdown with chips
+
+## Usage
+
+### Basic Usage
+
+```html
+<sc-multi-select [(value)]="selectedValues" [options]="options" placeholder="Select options..." />
+```
+
+### With Select All
+
+```html
+<sc-multi-select [options]="options" [showSelectAll]="true" placeholder="Select..." />
+```
+
+### Count Display (No Chips)
+
+```html
+<sc-multi-select [options]="options" [showChips]="false" placeholder="Select..." />
+```
+
+## API
+
+### ScMultiSelect
+
+| Input               | Type                  | Default               | Description            |
+| ------------------- | --------------------- | --------------------- | ---------------------- |
+| `class`             | `string`              | `''`                  | Additional CSS classes |
+| `placeholder`       | `string`              | `'Select options...'` | Placeholder text       |
+| `disabled`          | `boolean`             | `false`               | Disable the select     |
+| `options`           | `MultiSelectOption[]` | `[]`                  | Available options      |
+| `searchable`        | `boolean`             | `true`                | Enable search input    |
+| `showChips`         | `boolean`             | `true`                | Show chips vs count    |
+| `showSelectAll`     | `boolean`             | `false`               | Show select all option |
+| `showClearAll`      | `boolean`             | `true`                | Show clear all button  |
+| `maxDisplayedChips` | `number`              | `3`                   | Max chips before "+N"  |
+
+| Output         | Type                | Description                  |
+| -------------- | ------------------- | ---------------------------- |
+| `value`        | `string[]`          | Two-way binding for values   |
+| `valueChange`  | `string[]`          | Emits when selection changes |
+| `optionSelect` | `MultiSelectOption` | Emits when option selected   |
+| `optionRemove` | `MultiSelectOption` | Emits when option removed    |
+
+| Method                 | Returns               | Description          |
+| ---------------------- | --------------------- | -------------------- |
+| `focus()`              | `void`                | Focus the trigger    |
+| `getSelectedOptions()` | `MultiSelectOption[]` | Get selected options |
+
+## MultiSelectOption Interface
+
+```typescript
+interface MultiSelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+```
+
+## Features
+
+- **Chip Display**: Selected items shown as removable chips
+- **Count Display**: Alternative compact display showing "N selected"
+- **Searchable**: Filter options by typing
+- **Select All**: Quickly select/deselect all visible options
+- **Clear All**: Remove all selections at once
+- **Disabled Options**: Individual options can be disabled
+- **Keyboard Navigation**: Escape to close dropdown
+
+## Examples
+
+### Basic Multi-Select
+
+```typescript
+@Component({
+  template: `
+    <sc-multi-select [(value)]="selectedFruits" [options]="fruits" placeholder="Select fruits..." />
+  `,
+})
+export class FruitPicker {
+  selectedFruits = signal<string[]>([]);
+  fruits: MultiSelectOption[] = [
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'cherry', label: 'Cherry' },
+  ];
+}
+```
+
+### With Disabled Options
+
+```typescript
+const frameworks: MultiSelectOption[] = [
+  { value: 'react', label: 'React' },
+  { value: 'angular', label: 'Angular' },
+  { value: 'vue', label: 'Vue' },
+  { value: 'svelte', label: 'Svelte', disabled: true },
+];
+```
+
+### Form Integration
+
+```html
+<form class="space-y-4">
+  <div>
+    <label>Select your interests</label>
+    <sc-multi-select [(value)]="interests" [options]="interestOptions" [showSelectAll]="true" placeholder="Choose interests..." />
+  </div>
+  <button type="submit">Save</button>
+</form>
+```
+
+### Without Search
+
+```html
+<sc-multi-select [options]="sizes" [searchable]="false" placeholder="Select sizes..." />
+```
+
+### Handling Selection Changes
+
+```typescript
+@Component({
+  template: `
+    <sc-multi-select [options]="options" (valueChange)="onSelectionChange($event)" (optionSelect)="onOptionSelected($event)" (optionRemove)="onOptionRemoved($event)" />
+  `,
+})
+export class SelectHandler {
+  onSelectionChange(values: string[]) {
+    console.log('Selected values:', values);
+  }
+
+  onOptionSelected(option: MultiSelectOption) {
+    console.log('Added:', option.label);
+  }
+
+  onOptionRemoved(option: MultiSelectOption) {
+    console.log('Removed:', option.label);
+  }
+}
+```
+
+## Accessibility
+
+- Trigger has `aria-expanded` and `aria-haspopup="listbox"`
+- Dropdown has `role="listbox"` and `aria-multiselectable="true"`
+- Options have `role="option"` and `aria-selected`
+- Chip remove buttons have descriptive `aria-label`
+- Keyboard support (Escape to close)

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

@@ -0,0 +1,2 @@
+export { ScMultiSelect } from './multi-select';
+export type { MultiSelectOption } from './multi-select';