@salas-ds/cli 0.1.0 → 0.2.1

package/templates/angular/autocomplete/autocomplete.component.ts

@@ -0,0 +1,707 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  forwardRef,
+  OnInit,
+  ViewChild,
+  ElementRef,
+  HostListener,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { cn, debounce } from '../utils';
+import { LucideAngularModule } from 'lucide-angular';
+import { CommonModule } from '@angular/common';
+
+/**
+ * Select component types
+ */
+
+export type SelectSize = 'sm' | 'md' | 'lg';
+export type SelectVariant = 'default' | 'error' | 'success';
+
+export interface SelectOption<T = string> {
+  label: string;
+  value: T;
+  disabled?: boolean;
+  group?: string;
+}
+
+export interface SelectProps<T = string> {
+  size?: SelectSize;
+  variant?: SelectVariant;
+  disabled?: boolean;
+  required?: boolean;
+  placeholder?: string;
+  options: SelectOption<T>[];
+  value?: T;
+  name?: string;
+  id?: string;
+  multiple?: boolean;
+}
+
+/**
+ * Autocomplete component types
+ */
+
+
+/**
+ * - `'free'`: allows free text input beyond suggestions (default)
+ * - `'strict'`: only values from the options list are accepted (searchable select)
+ */
+export type AutocompleteMode = 'free' | 'strict';
+
+export interface AutocompleteProps<T = string> {
+  size?: SelectSize;
+  variant?: SelectVariant;
+  disabled?: boolean;
+  required?: boolean;
+  placeholder?: string;
+  options: SelectOption<T>[];
+  value?: T | T[];
+  name?: string;
+  id?: string;
+  multiple?: boolean;
+  searchable?: boolean;
+  filterable?: boolean;
+  loading?: boolean;
+  noResultsText?: string;
+  minSearchLength?: number;
+  mode?: AutocompleteMode;
+}
+
+
+@Component({
+  selector: 'salas-autocomplete',
+  standalone: true,
+  imports: [FormsModule, CommonModule, LucideAngularModule],
+  template: `
+    <div [class]="wrapperClasses" #wrapper>
+      <div [class]="inputWrapperClasses">
+        <span class="salas-autocomplete-search-icon" aria-hidden="true">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="11" cy="11" r="8"/>
+            <path d="m21 21-4.3-4.3"/>
+          </svg>
+        </span>
+        <input
+          [id]="id"
+          [name]="name"
+          [disabled]="disabled"
+          [required]="required"
+          [placeholder]="currentPlaceholder"
+          [class]="inputClasses"
+          [value]="inputDisplayValue"
+          (input)="onInput($event)"
+          (focus)="onFocus()"
+          (blur)="onBlur()"
+          (keydown)="onKeyDown($event)"
+          [attr.aria-invalid]="variant === 'error'"
+          [attr.aria-expanded]="isOpen"
+          [attr.aria-haspopup]="true"
+          [attr.aria-autocomplete]="mode === 'strict' ? 'both' : 'list'"
+          [attr.role]="'combobox'"
+          #inputEl
+        />
+        @if (displayValue && !disabled) {
+          <button
+            type="button"
+            class="salas-autocomplete-clear"
+            (click)="clearValue($event)"
+            aria-label="Clear"
+          >
+            <lucide-icon name="x" [size]="iconSize" />
+          </button>
+        }
+        @if (!displayValue || mode === 'strict') {
+          <lucide-icon
+            [name]="mode === 'strict' ? 'chevron-down' : (searchable ? '' : 'chevron-down')"
+            [size]="iconSize"
+            class="salas-autocomplete-icon"
+            [class.salas-autocomplete-icon--hidden]="mode === 'free' && searchable"
+            [class.salas-autocomplete-icon--rotate]="isOpen && mode === 'strict'"
+          />
+        }
+      </div>
+
+      @if (isOpen && filteredOptions.length > 0) {
+        <ul [class]="dropdownClasses" role="listbox">
+          @for (option of filteredOptions; track option.value) {
+            <li
+              [class]="getOptionClasses(option)"
+              (click)="selectOption(option)"
+              (mouseenter)="highlightedIndex = $index"
+              role="option"
+              [attr.aria-selected]="isSelected(option)"
+            >
+              {{ option.label }}
+            </li>
+          }
+        </ul>
+      }
+
+      @if (isOpen && filteredOptions.length === 0 && !loading) {
+        <div [class]="noResultsClasses">
+          {{ noResultsText }}
+        </div>
+      }
+
+      @if (loading) {
+        <div [class]="loadingClasses">
+          Loading...
+        </div>
+      }
+    </div>
+  `,
+  styles: [`
+    .salas-autocomplete-wrapper {
+      position: relative;
+      display: inline-block;
+      width: 100%;
+    }
+
+    .salas-autocomplete-input-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+    }
+
+    .salas-autocomplete {
+      position: relative;
+      z-index: 0;
+      width: 100%;
+      border-radius: 0.375rem;
+      border: 1px solid var(--salas-gray-300);
+      background-color: white;
+      padding: 0 0.75rem;
+      font-size: 0.875rem;
+      transition: all 0.2s;
+      outline: none;
+    }
+
+    .salas-autocomplete:focus {
+      border-color: var(--salas-primary-500);
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+    }
+
+    .salas-autocomplete:disabled {
+      background-color: var(--salas-gray-50);
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
+    .salas-autocomplete-search-icon {
+      position: absolute;
+      left: 0.75rem;
+      top: 50%;
+      transform: translateY(-50%);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 1.125rem;
+      height: 1.125rem;
+      color: var(--salas-gray-400);
+      pointer-events: none;
+      z-index: 2;
+      flex-shrink: 0;
+    }
+
+    .salas-autocomplete-search-icon svg {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+
+    .salas-autocomplete-search-icon + .salas-autocomplete {
+      padding-left: 2.5rem;
+    }
+
+    .salas-autocomplete-icon,
+    .salas-autocomplete-clear {
+      position: absolute;
+      right: 0.75rem;
+      color: var(--salas-gray-400);
+      pointer-events: none;
+      z-index: 1;
+      transition: transform 0.2s;
+    }
+
+    .salas-autocomplete-icon--hidden {
+      display: none;
+    }
+
+    .salas-autocomplete-icon--rotate {
+      transform: rotate(180deg);
+    }
+
+    .salas-autocomplete-clear {
+      cursor: pointer;
+      pointer-events: all;
+      background: none;
+      border: none;
+      padding: 0.25rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .salas-autocomplete-clear:hover {
+      color: var(--salas-gray-600);
+    }
+
+    /* Variants */
+    .salas-autocomplete--error {
+      border-color: var(--salas-destructive-500);
+    }
+
+    .salas-autocomplete--error:focus {
+      border-color: var(--salas-destructive-500);
+      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+    }
+
+    .salas-autocomplete--success {
+      border-color: var(--salas-success-500);
+    }
+
+    .salas-autocomplete--success:focus {
+      border-color: var(--salas-success-500);
+      box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
+    }
+
+    /* Sizes */
+    .salas-autocomplete--sm {
+      height: 2rem;
+      padding: 0 0.625rem;
+      font-size: 0.8125rem;
+    }
+
+    .salas-autocomplete--sm.salas-autocomplete-search-icon + .salas-autocomplete {
+      padding-left: 2rem;
+    }
+
+    .salas-autocomplete--md {
+      height: 2.5rem;
+    }
+
+    .salas-autocomplete--lg {
+      height: 3rem;
+      padding: 0 1rem;
+      font-size: 1rem;
+    }
+
+    .salas-autocomplete-dropdown {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      margin-top: 0.25rem;
+      background-color: white;
+      border: 1px solid var(--salas-gray-200);
+      border-radius: 0.375rem;
+      box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+      max-height: 15rem;
+      overflow-y: auto;
+      z-index: 1000;
+      list-style: none;
+      padding: 0.25rem;
+      margin: 0;
+    }
+
+    .salas-autocomplete-option {
+      padding: 0.5rem 0.75rem;
+      cursor: pointer;
+      border-radius: 0.25rem;
+      font-size: 0.875rem;
+    }
+
+    .salas-autocomplete-option:hover,
+    .salas-autocomplete-option--highlighted {
+      background-color: var(--salas-gray-100);
+    }
+
+    .salas-autocomplete-option--selected {
+      background-color: var(--salas-primary-50);
+      color: var(--salas-primary-600);
+    }
+
+    .salas-autocomplete-option--disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .salas-autocomplete-no-results,
+    .salas-autocomplete-loading {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      margin-top: 0.25rem;
+      padding: 0.75rem;
+      background-color: white;
+      border: 1px solid var(--salas-gray-200);
+      border-radius: 0.375rem;
+      box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+      text-align: center;
+      color: var(--salas-gray-500);
+      font-size: 0.875rem;
+      z-index: 1000;
+    }
+  `],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => SalasAutocompleteComponent),
+      multi: true,
+    },
+  ],
+})
+export class SalasAutocompleteComponent<T = string>
+  implements ControlValueAccessor, OnInit, AutocompleteProps<T>
+{
+  @ViewChild('wrapper', { static: true }) wrapper!: ElementRef<HTMLElement>;
+
+  @ViewChild('inputEl') inputEl?: ElementRef<HTMLInputElement>;
+
+  @Input() size: SelectSize = 'md';
+  @Input() variant: SelectVariant = 'default';
+  @Input() disabled = false;
+  @Input() required = false;
+  @Input() placeholder = '';
+  @Input() options: SelectOption<T>[] = [];
+  @Input() value?: T | T[];
+  @Input() name = '';
+  @Input() id = '';
+  @Input() multiple = false;
+  @Input() searchable = true;
+  @Input() filterable = true;
+  @Input() loading = false;
+  @Input() noResultsText = 'No results found';
+  @Input() minSearchLength = 0;
+  @Input() mode: AutocompleteMode = 'free';
+
+  @Output() valueChange = new EventEmitter<T | T[]>();
+  @Output() searchChange = new EventEmitter<string>();
+
+  isOpen = false;
+  searchQuery = '';
+  filteredOptions: SelectOption<T>[] = [];
+  highlightedIndex = -1;
+  displayValue = '';
+  private isSearching = false;
+
+  private onChange = (value: T | T[]) => {};
+  private onTouched = () => {};
+  private debouncedSearch = debounce((query: string) => {
+    this.searchChange.emit(query);
+  }, 300);
+
+  ngOnInit(): void {
+    this.filteredOptions = this.options;
+    this.updateDisplayValue();
+  }
+
+  @HostListener('document:click', ['$event'])
+  onClickOutside(event: MouseEvent): void {
+    if (!this.wrapper.nativeElement.contains(event.target as Node)) {
+      this.isOpen = false;
+      if (this.mode === 'strict') {
+        this.isSearching = false;
+        this.revertToSelectedValue();
+      } else if (this.isSearching) {
+        this.commitFreeText();
+      }
+    }
+  }
+
+  get wrapperClasses(): string {
+    return cn('salas-autocomplete-wrapper');
+  }
+
+  get inputWrapperClasses(): string {
+    return cn('salas-autocomplete-input-wrapper');
+  }
+
+  get inputClasses(): string {
+    return cn(
+      'salas-autocomplete',
+      `salas-autocomplete--${this.size}`,
+      this.variant !== 'default' && `salas-autocomplete--${this.variant}`
+    );
+  }
+
+  get dropdownClasses(): string {
+    return cn('salas-autocomplete-dropdown');
+  }
+
+  get noResultsClasses(): string {
+    return cn('salas-autocomplete-no-results');
+  }
+
+  get loadingClasses(): string {
+    return cn('salas-autocomplete-loading');
+  }
+
+  get iconSize(): number {
+    return this.size === 'sm' ? 16 : this.size === 'lg' ? 20 : 18;
+  }
+
+  get currentPlaceholder(): string {
+    if (this.mode === 'strict' && this.isSearching && this.displayValue) {
+      return this.displayValue;
+    }
+    return this.placeholder;
+  }
+
+  get inputDisplayValue(): string {
+    if (this.mode === 'strict' && this.isSearching) {
+      return this.searchQuery;
+    }
+    return this.isSearching ? this.searchQuery : this.displayValue;
+  }
+
+  onInput(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    this.searchQuery = target.value;
+    this.isSearching = true;
+    this.isOpen = true;
+    this.highlightedIndex = -1;
+
+    if (this.filterable) {
+      this.filterOptions();
+    }
+
+    if (this.searchQuery.length >= this.minSearchLength) {
+      this.debouncedSearch(this.searchQuery);
+    }
+  }
+
+  filterOptions(): void {
+    if (!this.searchQuery.trim()) {
+      this.filteredOptions = this.options;
+      return;
+    }
+
+    const query = this.searchQuery.toLowerCase();
+    this.filteredOptions = this.options.filter(
+      option =>
+        !option.disabled &&
+        option.label.toLowerCase().includes(query)
+    );
+  }
+
+  onFocus(): void {
+    if (!this.disabled) {
+      this.isOpen = true;
+      this.isSearching = false;
+      if (this.mode === 'strict') {
+        this.searchQuery = '';
+        this.filteredOptions = this.options;
+      } else if (this.filterable && !this.searchQuery) {
+        this.filteredOptions = this.options;
+      }
+    }
+  }
+
+  onBlur(): void {
+    setTimeout(() => {
+      if (this.wrapper.nativeElement.contains(document.activeElement)) {
+        return;
+      }
+
+      this.isOpen = false;
+
+      if (this.mode === 'strict') {
+        this.isSearching = false;
+        this.revertToSelectedValue();
+      } else if (this.isSearching) {
+        this.commitFreeText();
+      }
+
+      this.isSearching = false;
+      this.onTouched();
+    }, 200);
+  }
+
+  private revertToSelectedValue(): void {
+    this.searchQuery = '';
+    this.updateDisplayValue();
+  }
+
+  private commitFreeText(): void {
+    const text = this.searchQuery.trim();
+    this.searchQuery = '';
+    this.isSearching = false;
+    if (this.multiple) {
+      this.value = text ? ([text] as T[]) : ([] as T[]);
+      this.displayValue = text;
+    } else {
+      this.value = text as T;
+      this.displayValue = text;
+    }
+    this.onChange(this.value!);
+    this.valueChange.emit(this.value!);
+  }
+
+  private hasMatchingOption(query: string): boolean {
+    const q = query.toLowerCase().trim();
+    return this.options.some(o => o.label.toLowerCase() === q);
+  }
+
+  onKeyDown(event: KeyboardEvent): void {
+    if (!this.isOpen || this.filteredOptions.length === 0) {
+      if (event.key === 'ArrowDown' || event.key === 'Enter') {
+        this.isOpen = true;
+        this.filteredOptions = this.options;
+      }
+      return;
+    }
+
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        this.highlightedIndex = Math.min(
+          this.highlightedIndex + 1,
+          this.filteredOptions.length - 1
+        );
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.highlightedIndex = Math.max(this.highlightedIndex - 1, -1);
+        break;
+      case 'Enter':
+        event.preventDefault();
+        if (this.highlightedIndex >= 0) {
+          this.selectOption(this.filteredOptions[this.highlightedIndex]);
+        } else if (this.mode === 'strict' && this.filteredOptions.length === 1) {
+          this.selectOption(this.filteredOptions[0]);
+        } else if (this.mode === 'free' && this.searchQuery.trim()) {
+          this.commitFreeText();
+          this.isOpen = false;
+        }
+        break;
+      case 'Escape':
+        this.isOpen = false;
+        this.isSearching = false;
+        this.highlightedIndex = -1;
+        if (this.mode === 'strict') {
+          this.revertToSelectedValue();
+        }
+        break;
+      case 'Tab':
+        if (this.mode === 'strict') {
+          if (this.highlightedIndex >= 0) {
+            this.selectOption(this.filteredOptions[this.highlightedIndex]);
+          } else {
+            this.revertToSelectedValue();
+          }
+        } else if (this.mode === 'free' && this.isSearching) {
+          this.commitFreeText();
+        }
+        this.isOpen = false;
+        this.isSearching = false;
+        break;
+    }
+  }
+
+  selectOption(option: SelectOption<T>): void {
+    if (option.disabled) return;
+
+    if (this.multiple) {
+      const currentValues = Array.isArray(this.value) ? [...this.value] : [];
+      const index = currentValues.findIndex(v => this.isEqual(v, option.value));
+      if (index >= 0) {
+        currentValues.splice(index, 1);
+      } else {
+        currentValues.push(option.value);
+      }
+      this.value = currentValues as T[];
+      this.displayValue = currentValues
+        .map(v => this.options.find(o => this.isEqual(o.value, v))?.label)
+        .filter(Boolean)
+        .join(', ');
+    } else {
+      this.value = option.value;
+      this.displayValue = option.label;
+      this.isOpen = false;
+    }
+
+    this.searchQuery = '';
+    this.isSearching = false;
+    this.filteredOptions = this.options;
+
+    if (this.value !== undefined) {
+      this.onChange(this.value);
+      this.valueChange.emit(this.value);
+    }
+  }
+
+  clearValue(event: Event): void {
+    event.stopPropagation();
+    this.value = this.multiple ? ([] as T[]) : undefined;
+    this.displayValue = '';
+    this.searchQuery = '';
+    this.isSearching = false;
+    this.filteredOptions = this.options;
+    if (this.multiple) {
+      this.onChange([] as T[]);
+      this.valueChange.emit([] as T[]);
+    } else {
+      this.valueChange.emit(undefined as any);
+    }
+  }
+
+  isSelected(option: SelectOption<T>): boolean {
+    if (this.multiple && Array.isArray(this.value)) {
+      return this.value.some(v => this.isEqual(v, option.value));
+    }
+    if (this.value !== undefined) {
+      return this.isEqual(this.value as T, option.value);
+    }
+    return false;
+  }
+
+  getOptionClasses(option: SelectOption<T>): string {
+    return cn(
+      'salas-autocomplete-option',
+      this.isSelected(option) && 'salas-autocomplete-option--selected',
+      option.disabled && 'salas-autocomplete-option--disabled',
+      this.highlightedIndex === this.filteredOptions.indexOf(option) &&
+        'salas-autocomplete-option--highlighted'
+    );
+  }
+
+  updateDisplayValue(): void {
+    if (this.multiple && Array.isArray(this.value)) {
+      this.displayValue = this.value
+        .map(v => this.options.find(o => this.isEqual(o.value, v))?.label)
+        .filter(Boolean)
+        .join(', ');
+    } else if (this.value !== undefined) {
+      const option = this.options.find(o => this.isEqual(o.value, this.value as T));
+      this.displayValue = option?.label || '';
+    }
+  }
+
+  private isEqual(a: T, b: T): boolean {
+    return a === b;
+  }
+
+  // ControlValueAccessor implementation
+  writeValue(value: T | T[]): void {
+    this.value = value;
+    this.updateDisplayValue();
+  }
+
+  registerOnChange(fn: (value: T | T[]) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+}

package/templates/angular/autocomplete/autocomplete.module.ts

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { SalasAutocompleteComponent } from './autocomplete.component';
+
+@NgModule({
+  imports: [SalasAutocompleteComponent],
+  exports: [SalasAutocompleteComponent],
+})
+export class SalasAutocompleteModule {}