@origostudio/origo-design 0.0.49 → 0.0.51

package/packages/angular-renderer/src/components/primitives/multi-select/multi-select.component.scss

@@ -0,0 +1,240 @@
+:host {
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  font-family: var(--origo-typography-input-font-family);
+  font-size: var(--origo-typography-input-font-size);
+  font-weight: var(--origo-typography-input-font-weight);
+  line-height: var(--origo-typography-input-line-height);
+}
+
+:host(.origo-multi-select--fluid) {
+  display: block;
+  width: 100%;
+}
+
+.origo-multi-select__wrapper {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+}
+
+.origo-multi-select__control {
+  display: flex;
+  width: 100%;
+}
+
+.origo-multi-select__trigger {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--origo-color-surface-background);
+  color: var(--origo-color-text-primary);
+  padding: var(--origo-spacing-container-padding);
+  border: var(--origo-border-width-default) solid var(--origo-color-border-default);
+  border-radius: var(--origo-radius-sm);
+  box-shadow: var(--origo-shadow-sm);
+  font-family: inherit;
+  font-size: inherit;
+  text-align: start;
+  cursor: pointer;
+  transition: all var(--origo-duration-fast) ease-in-out;
+
+  &:hover:not(:disabled) {
+    border-color: var(--origo-color-border-hover);
+  }
+
+  &:active:not(:disabled) {
+    border-color: var(--origo-color-border-active);
+  }
+
+  &:focus,
+  &:focus-visible {
+    outline: var(--origo-border-width-thick) solid var(--origo-color-focus);
+    outline-offset: var(--origo-border-offset-negative);
+    border-color: var(--origo-color-focus);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: var(--origo-opacity-disabled);
+    background-color: var(--origo-color-surface-disabled);
+    color: var(--origo-color-text-disabled);
+  }
+}
+
+:host(.origo-multi-select--filled) .origo-multi-select__trigger {
+  background-color: var(--origo-color-surface-subtle);
+  border: none;
+}
+
+:host(.origo-multi-select--invalid) .origo-multi-select__trigger {
+  border-color: var(--origo-color-text-danger);
+}
+
+.origo-multi-select__display {
+  flex: 1;
+  overflow: hidden;
+}
+
+.origo-multi-select__label {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &--placeholder {
+    color: var(--origo-color-text-muted);
+  }
+}
+
+.origo-multi-select__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--origo-spacing-xs);
+}
+
+.origo-multi-select__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--origo-spacing-xs);
+  padding: var(--origo-spacing-xs) var(--origo-spacing-sm);
+  background-color: var(--origo-color-surface-subtle);
+  color: var(--origo-color-text-primary);
+  border-radius: var(--origo-radius-sm);
+  font-size: var(--origo-typography-caption-font-size);
+}
+
+.origo-multi-select__chip-remove {
+  cursor: pointer;
+  color: var(--origo-color-text-muted);
+
+  &:hover {
+    color: var(--origo-color-text-primary);
+  }
+}
+
+.origo-multi-select__icons {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--origo-spacing-xs);
+  margin-inline-start: var(--origo-spacing-sm);
+}
+
+.origo-multi-select__clear {
+  cursor: pointer;
+  color: var(--origo-color-text-muted);
+  font-size: var(--origo-typography-caption-font-size);
+
+  &:hover {
+    color: var(--origo-color-text-primary);
+  }
+}
+
+.origo-multi-select__arrow {
+  color: var(--origo-color-text-muted);
+  font-size: var(--origo-typography-caption-font-size);
+}
+
+.origo-multi-select__dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  margin-top: var(--origo-spacing-xs);
+  box-sizing: border-box;
+  background-color: var(--origo-color-surface-background);
+  border: var(--origo-border-width-default) solid var(--origo-color-border-default);
+  border-radius: var(--origo-radius-sm);
+  box-shadow: var(--origo-shadow-md);
+  max-height: 16rem;
+  overflow-y: auto;
+}
+
+.origo-multi-select__filter-input {
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--origo-spacing-xs);
+  background-color: var(--origo-color-surface-background);
+  color: var(--origo-color-text-primary);
+  border: var(--origo-border-width-default) solid var(--origo-color-border-default);
+  border-radius: var(--origo-radius-sm);
+  font-family: inherit;
+  font-size: inherit;
+
+  &:focus {
+    outline: var(--origo-border-width-thick) solid var(--origo-color-focus);
+    outline-offset: var(--origo-border-offset-negative);
+  }
+}
+
+.origo-multi-select__toggle-all {
+  display: flex;
+  align-items: center;
+  gap: var(--origo-spacing-xs);
+  padding: var(--origo-spacing-xs) var(--origo-spacing-container-padding);
+  border-bottom: var(--origo-border-width-default) solid var(--origo-color-border-default);
+  font-weight: bold;
+  font-size: var(--origo-typography-caption-font-size);
+  color: var(--origo-color-text-primary);
+  cursor: pointer;
+  background-color: var(--origo-color-surface-subtle);
+}
+
+.origo-multi-select__options {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.origo-multi-select__option {
+  display: flex;
+  align-items: center;
+  gap: var(--origo-spacing-xs);
+  padding: var(--origo-spacing-container-padding);
+  color: var(--origo-color-text-primary);
+  cursor: pointer;
+  transition: background-color var(--origo-duration-fast) ease-in-out;
+
+  &:hover,
+  &--active {
+    background-color: var(--origo-color-surface-subtle);
+  }
+
+  &--selected {
+    background-color: var(--origo-color-surface-subtle);
+  }
+
+  &--disabled {
+    opacity: var(--origo-opacity-disabled);
+    cursor: not-allowed;
+  }
+}
+
+.origo-multi-select__checkbox {
+  margin: 0;
+  accent-color: var(--origo-color-focus);
+}
+
+.origo-multi-select__no-options {
+  padding: var(--origo-spacing-container-padding);
+  color: var(--origo-color-text-muted);
+  text-align: center;
+}
+
+.origo-multi-select__error {
+  color: var(--origo-color-text-danger);
+  font-size: var(--origo-typography-caption-font-size);
+  margin-top: var(--origo-spacing-xs);
+}
+
+.origo-multi-select__help {
+  color: var(--origo-color-text-muted);
+  font-size: var(--origo-typography-caption-font-size);
+  margin-top: var(--origo-spacing-xs);
+}

package/packages/angular-renderer/src/components/primitives/multi-select/multi-select.component.ts

@@ -0,0 +1,362 @@
+import {
+  Component,
+  input,
+  model,
+  ChangeDetectionStrategy,
+  computed,
+  ViewEncapsulation,
+  inject,
+  effect,
+  untracked,
+  signal,
+  PLATFORM_ID,
+  HostListener,
+  ElementRef,
+} from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { InteractionContract } from '@origostudio/core';
+import { OrigoAdapter } from '../../../adapters/web/adapter';
+import { WebExperienceAdapterService } from '../../../adapters/web/experience-adapter.service';
+import { NormalizedOption, normalizeOptions, filterOptions } from '../select/selection-utils';
+
+export interface MultiSelectProps {
+  id?: string;
+  value?: Array<unknown>;
+  options: Array<unknown>;
+  optionLabel?: string;
+  optionValue?: string;
+  placeholder?: string;
+  filter?: boolean;
+  filterBy?: string;
+  filterPlaceholder?: string;
+  showToggleAll?: boolean;
+  maxSelectedLabels?: number;
+  selectedItemsLabel?: string;
+  display?: 'comma' | 'chip';
+  clearable?: boolean;
+  virtualScroll?: boolean;
+  itemSize?: number;
+  loading?: boolean;
+  disabled?: boolean;
+  readonly?: boolean;
+  required?: boolean;
+  invalid?: boolean;
+  errorText?: string;
+  helpText?: string;
+  variant?: 'outlined' | 'filled';
+  fluid?: boolean;
+  'aria-label'?: string;
+  'aria-describedby'?: string;
+  permissions?: Record<string, string>;
+  rules?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
+}
+
+@Component({
+  selector: 'origo-multi-select',
+  standalone: true,
+  templateUrl: './multi-select.component.html',
+  styleUrls: ['./multi-select.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.ShadowDom,
+  host: {
+    '[class.origo-multi-select]': 'true',
+    '[attr.data-testid]': 'contract().id ?? ""',
+    '[class.origo-multi-select--fluid]': 'computedFluid()',
+    '[class.origo-multi-select--outlined]': 'computedVariant() === "outlined"',
+    '[class.origo-multi-select--filled]': 'computedVariant() === "filled"',
+    '[class.origo-multi-select--invalid]': 'computedInvalid()',
+    '[class.origo-multi-select--disabled]': 'computedDisabled()',
+    '[class.origo-multi-select--readonly]': 'computedReadonly()',
+  },
+})
+export class MultiSelectComponent implements OrigoAdapter<MultiSelectProps> {
+  static readonly contractSchema = {
+    permissions: 'object',
+    rules: 'object',
+    metadata: 'object',
+    options: 'array',
+    value: 'array',
+    optionLabel: 'string',
+    optionValue: 'string',
+    placeholder: 'string',
+    filter: 'boolean',
+    filterBy: 'string',
+    filterPlaceholder: 'string',
+    showToggleAll: 'boolean',
+    maxSelectedLabels: 'number',
+    selectedItemsLabel: 'string',
+    display: 'string',
+    clearable: 'boolean',
+    virtualScroll: 'boolean',
+    itemSize: 'number',
+    loading: 'boolean',
+    disabled: 'boolean',
+    readonly: 'boolean',
+    required: 'boolean',
+    invalid: 'boolean',
+    errorText: 'string',
+    helpText: 'string',
+    variant: 'string',
+    fluid: 'boolean',
+    'aria-label': 'string',
+    'aria-describedby': 'string',
+  };
+  static readonly strictContract = false;
+
+  contract = input.required<InteractionContract<MultiSelectProps>>();
+  value = model<Array<unknown>>([]);
+
+  isOpen = signal<boolean>(false);
+  filterQuery = signal<string>('');
+  activeIndex = signal<number>(-1);
+
+  computedNormalizedOptions = computed(() => {
+    const props = this.contract().props;
+    return normalizeOptions(props?.options, props?.optionLabel, props?.optionValue);
+  });
+
+  filteredOptions = computed(() => {
+    const opts = this.computedNormalizedOptions();
+    if (!this.computedFilter() && !this.filterQuery()) {
+      return opts;
+    }
+    return filterOptions(opts, this.filterQuery(), 'contains');
+  });
+
+  computedSelectedOptions = computed(() => {
+    const current = new Set(this.value());
+    return this.computedNormalizedOptions().filter(opt => current.has(opt.value));
+  });
+
+  computedPlaceholder = computed(() => this.contract().props?.placeholder ?? 'Select options');
+  computedDisabled = computed(() => !!this.contract().props?.disabled);
+  computedReadonly = computed(() => !!this.contract().props?.readonly);
+  computedRequired = computed(() => !!this.contract().props?.required);
+  computedInvalid = computed(() => !!this.contract().props?.invalid);
+  computedFilter = computed(() => !!this.contract().props?.filter);
+  computedFilterPlaceholder = computed(
+    () => this.contract().props?.filterPlaceholder ?? 'Search...'
+  );
+  computedShowToggleAll = computed(() => this.contract().props?.showToggleAll ?? true);
+  computedClearable = computed(() => !!this.contract().props?.clearable);
+  computedDisplay = computed(() => this.contract().props?.display ?? 'comma');
+  computedMaxSelectedLabels = computed(() => this.contract().props?.maxSelectedLabels ?? 3);
+  computedSelectedItemsLabel = computed(
+    () => this.contract().props?.selectedItemsLabel ?? '{0} items selected'
+  );
+  computedVariant = computed(() => this.contract().props?.variant ?? 'outlined');
+  computedFluid = computed(() => !!this.contract().props?.fluid);
+  computedErrorText = computed(() => this.contract().props?.errorText ?? '');
+  computedHelpText = computed(() => this.contract().props?.helpText ?? '');
+
+  computedAriaLabel = computed(() => {
+    const label = this.contract().props?.['aria-label'];
+    if (label !== undefined && label !== null && String(label).trim() !== '') {
+      return String(label);
+    }
+    return this.computedPlaceholder();
+  });
+
+  computedAriaDescribedBy = computed(() => {
+    const parts: string[] = [];
+    const desc = this.contract().props?.['aria-describedby'];
+    if (desc) parts.push(String(desc));
+    if (this.computedErrorText()) parts.push(`${this.contract().id}-error`);
+    if (this.computedHelpText()) parts.push(`${this.contract().id}-help`);
+    return parts.length > 0 ? parts.join(' ') : undefined;
+  });
+
+  displaySummary = computed(() => {
+    const selected = this.computedSelectedOptions();
+    const count = selected.length;
+    if (count === 0) return '';
+    const max = this.computedMaxSelectedLabels();
+    if (count <= max) {
+      return selected.map(s => s.label).join(', ');
+    }
+    const template = this.computedSelectedItemsLabel();
+    return template.replace('{0}', String(count));
+  });
+
+  isAllSelected = computed(() => {
+    const filtered = this.filteredOptions().filter(o => !o.disabled);
+    if (filtered.length === 0) return false;
+    const current = new Set(this.value());
+    return filtered.every(o => current.has(o.value));
+  });
+
+  private experienceAdapter = inject(WebExperienceAdapterService);
+  private platformId = inject(PLATFORM_ID);
+  private elementRef = inject(ElementRef);
+
+  constructor() {
+    effect(() => {
+      const contractVal = this.contract().props?.value;
+      untracked(() => {
+        if (Array.isArray(contractVal)) {
+          const current = this.value();
+          if (
+            current.length !== contractVal.length ||
+            !current.every((v, i) => v === contractVal[i])
+          ) {
+            this.value.set([...contractVal]);
+          }
+        }
+      });
+    });
+  }
+
+  toggleOpen() {
+    if (this.computedDisabled() || this.computedReadonly()) return;
+    const next = !this.isOpen();
+    this.isOpen.set(next);
+    if (next) {
+      this.filterQuery.set('');
+      this.activeIndex.set(0);
+    }
+  }
+
+  isSelected(opt: NormalizedOption): boolean {
+    return this.value().includes(opt.value);
+  }
+
+  toggleOption(optionValue: unknown) {
+    if (this.computedDisabled() || this.computedReadonly()) return;
+    const current = [...this.value()];
+    const idx = current.indexOf(optionValue);
+    if (idx >= 0) {
+      current.splice(idx, 1);
+    } else {
+      current.push(optionValue);
+    }
+    this.value.set(current);
+    this.experienceAdapter.updateState(this.contract().id, 'value', current);
+  }
+
+  toggleAll() {
+    if (this.computedDisabled() || this.computedReadonly()) return;
+    const filtered = this.filteredOptions().filter(o => !o.disabled);
+    let nextValue: Array<unknown>;
+
+    if (this.isAllSelected()) {
+      const filteredSet = new Set(filtered.map(o => o.value));
+      nextValue = this.value().filter(v => !filteredSet.has(v));
+    } else {
+      const set = new Set(this.value());
+      for (const opt of filtered) {
+        set.add(opt.value);
+      }
+      nextValue = Array.from(set);
+    }
+
+    this.value.set(nextValue);
+    this.experienceAdapter.updateState(this.contract().id, 'value', nextValue);
+  }
+
+  removeOption(optionValue: unknown, event?: Event) {
+    event?.stopPropagation();
+    if (this.computedDisabled() || this.computedReadonly()) return;
+    const next = this.value().filter(v => v !== optionValue);
+    this.value.set(next);
+    this.experienceAdapter.updateState(this.contract().id, 'value', next);
+  }
+
+  clear(event?: Event) {
+    if (this.computedDisabled() || this.computedReadonly()) return;
+    event?.stopPropagation();
+    this.value.set([]);
+    this.experienceAdapter.updateState(this.contract().id, 'value', []);
+  }
+
+  onFilterInput(event: Event) {
+    const target = event.target as HTMLInputElement;
+    this.filterQuery.set(target.value);
+    this.activeIndex.set(0);
+  }
+
+  onKeydown(event: KeyboardEvent) {
+    if (this.computedDisabled() || this.computedReadonly()) return;
+
+    const opts = this.filteredOptions();
+    const count = opts.length;
+
+    switch (event.key) {
+      case 'ArrowDown': {
+        event.preventDefault();
+        if (!this.isOpen()) {
+          this.isOpen.set(true);
+          this.activeIndex.set(0);
+        } else if (count > 0) {
+          const next = (this.activeIndex() + 1) % count;
+          this.activeIndex.set(next);
+        }
+        break;
+      }
+      case 'ArrowUp': {
+        event.preventDefault();
+        if (!this.isOpen()) {
+          this.isOpen.set(true);
+          this.activeIndex.set(count - 1);
+        } else if (count > 0) {
+          const prev = (this.activeIndex() - 1 + count) % count;
+          this.activeIndex.set(prev);
+        }
+        break;
+      }
+      case 'Enter':
+      case ' ': {
+        const target = event.target as HTMLElement;
+        if (event.key === ' ' && target && target.tagName === 'INPUT') {
+          return;
+        }
+        event.preventDefault();
+        if (this.isOpen()) {
+          const idx = this.activeIndex();
+          if (idx >= 0 && idx < count && !opts[idx].disabled) {
+            this.toggleOption(opts[idx].value);
+          }
+        } else {
+          this.isOpen.set(true);
+        }
+        break;
+      }
+      case 'Escape': {
+        if (this.isOpen()) {
+          event.preventDefault();
+          this.isOpen.set(false);
+        }
+        break;
+      }
+      case 'Tab': {
+        if (this.isOpen()) {
+          this.isOpen.set(false);
+        }
+        break;
+      }
+      case 'Home': {
+        if (this.isOpen() && count > 0) {
+          event.preventDefault();
+          this.activeIndex.set(0);
+        }
+        break;
+      }
+      case 'End': {
+        if (this.isOpen() && count > 0) {
+          event.preventDefault();
+          this.activeIndex.set(count - 1);
+        }
+        break;
+      }
+    }
+  }
+
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: MouseEvent) {
+    if (!isPlatformBrowser(this.platformId)) return;
+    const clickedInside = this.elementRef.nativeElement.contains(event.target as Node);
+    if (!clickedInside && this.isOpen()) {
+      this.isOpen.set(false);
+    }
+  }
+}

package/packages/angular-renderer/src/components/primitives/select/select.component.html

@@ -1,15 +1,93 @@
-<select
-  [id]="contract().id"
-  [disabled]="computedDisabled()"
-  [required]="computedRequired()"
-  [attr.aria-label]="computedAriaLabel()"
-  [attr.aria-describedby]="computedAriaDescribedBy()"
-  (change)="onChange($event)"
->
-  @if (computedPlaceholder()) {
-    <option value="" disabled selected hidden>{{ computedPlaceholder() }}</option>
+<div class="origo-select__wrapper">
+  <div class="origo-select__control">
+    <button
+      type="button"
+      class="origo-select__trigger"
+      [id]="contract().id + '-trigger'"
+      role="combobox"
+      [attr.aria-expanded]="isOpen()"
+      [attr.aria-haspopup]="'listbox'"
+      [attr.aria-controls]="isOpen() ? contract().id + '-listbox' : null"
+      [attr.aria-activedescendant]="
+        isOpen() && activeIndex() >= 0 ? contract().id + '-option-' + activeIndex() : null
+      "
+      [attr.aria-invalid]="computedInvalid() ? 'true' : null"
+      [attr.aria-required]="computedRequired() ? 'true' : null"
+      [attr.aria-label]="computedAriaLabel()"
+      [attr.aria-describedby]="computedAriaDescribedBy()"
+      [disabled]="computedDisabled()"
+      (click)="toggleOpen()"
+      (keydown)="onKeydown($event)"
+    >
+      <span class="origo-select__label" [class.origo-select__label--placeholder]="!selectedLabel()">
+        {{ selectedLabel() || computedPlaceholder() }}
+      </span>
+      <span class="origo-select__icons">
+        @if (computedClearable() && value() && !computedDisabled() && !computedReadonly()) {
+          <span
+            class="origo-select__clear"
+            role="button"
+            tabindex="0"
+            aria-label="Clear selection"
+            (click)="clear($event)"
+            (keydown.enter)="clear($event)"
+            >✕</span
+          >
+        }
+        <span class="origo-select__arrow" aria-hidden="true">▼</span>
+      </span>
+    </button>
+  </div>
+
+  @if (isOpen()) {
+    <div
+      class="origo-select__dropdown"
+      [id]="contract().id + '-listbox'"
+      role="listbox"
+      [attr.aria-label]="computedAriaLabel()"
+    >
+      @if (computedFilter()) {
+        <div class="origo-select__filter-container">
+          <input
+            type="text"
+            class="origo-select__filter-input"
+            [placeholder]="computedFilterPlaceholder()"
+            [value]="filterQuery()"
+            (input)="onFilterInput($event)"
+            (keydown)="onKeydown($event)"
+            aria-label="Filter options"
+          />
+        </div>
+      }
+      <ul class="origo-select__options">
+        @for (opt of filteredOptions(); track opt.value; let idx = $index) {
+          @if (opt.group && (idx === 0 || filteredOptions()[idx - 1].group !== opt.group)) {
+            <li class="origo-select__group-label" role="presentation">{{ opt.group }}</li>
+          }
+          <li
+            class="origo-select__option"
+            [class.origo-select__option--selected]="opt.value === value()"
+            [class.origo-select__option--active]="activeIndex() === idx"
+            [class.origo-select__option--disabled]="opt.disabled"
+            [id]="contract().id + '-option-' + idx"
+            role="option"
+            [attr.aria-selected]="opt.value === value()"
+            [attr.aria-disabled]="opt.disabled ? 'true' : null"
+            (click)="!opt.disabled && selectOption(opt.value)"
+          >
+            {{ opt.label }}
+          </li>
+        } @empty {
+          <li class="origo-select__no-options" role="presentation">No options found</li>
+        }
+      </ul>
+    </div>
   }
-  @for (option of computedOptions(); track option.value) {
-    <option [value]="option.value" [selected]="value() === option.value">{{ option.label }}</option>
-  }
-</select>
+</div>
+
+@if (computedErrorText()) {
+  <div class="origo-select__error" [id]="contract().id + '-error'">{{ computedErrorText() }}</div>
+}
+@if (computedHelpText()) {
+  <div class="origo-select__help" [id]="contract().id + '-help'">{{ computedHelpText() }}</div>
+}