@tacdaed/fragments 1.0.0-beta.3 → 1.0.0-beta.4

package/src/lib/components/selection-lists/multi-select/multi-select.component.ts

@@ -0,0 +1,372 @@
+import { NgTemplateOutlet } from "@angular/common";
+import { Component, ElementRef, HostListener, Input, QueryList, TemplateRef, ViewChild, ViewChildren, inject } from "@angular/core";
+import { DEFAULT_INPUT_MULTI_SELECT_WARNINGS_MESSAGES } from "../../input/input-consts";
+import { InputValidationComponent } from "../../input/input-validation/input-validation.component";
+import { SelectionListBase } from "../selection-lists-base";
+import { DEFAULT_SELECTION_LIST_ERROR_MESSAGES } from "../selection-lists-const";
+import { SelectionListItem } from "../selection-lists-interface";
+import { ChipComponent } from "../../status/chip/chip.component";
+import { TChipType } from "../../status/chip/chip.type";
+
+@Component({
+  selector: "frg-multi-select",
+  templateUrl: "./multi-select.component.html",
+  styleUrls: ["./multi-select.component.scss"],
+  imports: [NgTemplateOutlet, InputValidationComponent, ChipComponent]
+})
+export class MultiSelectComponent<T> extends SelectionListBase<Array<T>> {
+  private readonly elementRef = inject(ElementRef);
+
+  @Input() items: Array<SelectionListItem<T>> = [];
+  @Input() hasSearch: boolean = false;
+  @Input() optionTemplate?: TemplateRef<unknown>;
+  @Input() valuesTemplate?: TemplateRef<unknown>;
+  @Input() showChips: boolean = false;
+  @Input() chipsStyle: TChipType = "light";
+
+  @ViewChildren("optionButton") optionButtons!: QueryList<ElementRef<HTMLButtonElement>>;
+  @ViewChild("searchInput", { read: ElementRef }) searchInput?: ElementRef<HTMLInputElement>;
+
+  protected isOpen = false;
+  protected searchTerm = "";
+  protected selectedIds: Array<string> = [];
+
+  private focusedIndex = -1;
+
+  @HostListener("document:click", ['$event'])
+  closeDropdown(event: MouseEvent): void {
+    const target = event.target as HTMLElement;
+    const nativeElement = this.elementRef.nativeElement;
+
+    const clickedInside = nativeElement.contains(target);
+    const isSearchInput = target.closest('.options-search__input');
+
+    if (!clickedInside && !isSearchInput) {
+      this.isOpen = false;
+    }
+  }
+
+  public get filteredItems(): Array<SelectionListItem<T>> {
+    if (this.hasSearch && this.searchTerm && this.searchTerm.length > 2) {
+      const lower = this.searchTerm.toLowerCase();
+      const lowerWithTrim = this.searchTerm.toLowerCase().trim();
+
+      return this.items.filter(item =>
+        (item.label ?? '').toLowerCase().includes(lower)
+        || (item.label ?? '').toLowerCase().trim().includes(lowerWithTrim)
+      );
+    };
+
+    return this.items;
+  }
+
+  public get selectedLabels(): string {
+    return this.selectedItems.length ?
+      this.selectedItems.map(x => x.label ?? '').join(', ')
+      : this.placeholder || 'Select…';
+  }
+
+  public get selectedItems(): Array<SelectionListItem<T>> {
+    return this.items.filter(i => this.selectedIds.includes(i.id));
+  }
+
+  protected override get errorList(): string[] {
+    if (!this.control?.errors) return [];
+    const errors = this.control.errors;
+    return Object.keys(errors).map(key => {
+      if (this.errorMessages[key]) {
+        return this.errorMessages[key];
+      }
+
+      if (key === 'minlength' && errors[key]?.requiredLength) {
+        return `Minimum length is ${errors[key].requiredLength} characters.`;
+      }
+
+      if (key === 'maxlength' && errors[key]?.requiredLength) {
+        return `Maximum length is ${errors[key].requiredLength} characters.`;
+      }
+
+      return DEFAULT_SELECTION_LIST_ERROR_MESSAGES[key] || 'Invalid field.';
+    });
+  }
+
+  public toggleDropdown(event: Event): void {
+    event.stopPropagation();
+    const target = event.target as HTMLElement | null;
+
+    if (target?.closest('frg-chip') && this.showChips) return;
+    if (this.disabled) return;
+
+    this.isOpen = !this.isOpen;
+
+    if (this.isOpen) {
+      this.setDropdownDirection();
+      setTimeout(() => {
+        if (this.hasSearch && this.searchInput) {
+          this.searchInput.nativeElement.focus();
+          const len = this.searchInput.nativeElement.value.length;
+          this.searchInput.nativeElement.setSelectionRange(len, len);
+        } else {
+          this.focusFirstItem();
+        }
+      }, 0);
+    } else {
+      this.searchTerm = "";
+    }
+  }
+
+  public selectItem(item: SelectionListItem<T>, event: Event): void {
+    event.stopPropagation();
+    if (item.disabled) return;
+
+    this.updateSelection(item, item.selected);
+
+    this.value = this.selectedItems
+      .map(i => i.value)
+      .filter((v): v is T => v !== null);
+
+    this.focusedIndex = this.items.findIndex(i => i.id === item.id);
+
+    this.onChange(this.value);
+    this.onTouched();
+  }
+
+  protected removeItem(item: SelectionListItem<T>, event: MouseEvent): void {
+    event.stopPropagation();
+    if (this.disabled || !item.selected) return;
+
+    this.updateSelection(item, true);
+
+    const selectedValues = this.selectedItems
+      .map(i => i.value)
+      .filter((v): v is T => v !== null);
+
+    this.value = selectedValues.length ? selectedValues : null;
+
+    this.onChange(this.value);
+    this.onTouched();
+  }
+
+  protected removeItemById(id: string): void {
+    if (this.disabled) return;
+    const item = this.items.find(current => current.id === id);
+    if (!item || !item.selected) return;
+
+    this.updateSelection(item, true);
+
+    const selectedValues = this.selectedItems
+      .map(i => i.value)
+      .filter((v): v is T => v !== null);
+
+    this.value = selectedValues.length ? selectedValues : null;
+
+    this.onChange(this.value);
+    this.onTouched();
+  }
+
+  protected override clearValue(event: MouseEvent) {
+    event.stopPropagation();
+
+    for (const selectedItem of this.selectedItems) {
+      selectedItem.selected = false;
+    }
+
+    this.selectedIds = [];
+    this.value = null;
+    this.searchTerm = '';
+    this.isOpen = false;
+
+    this.onChange(null);
+    this.onTouched();
+  }
+
+  protected onKeyDown(event: KeyboardEvent): void {
+    if (this.disabled) return;
+
+    switch (event.key) {
+      case "Enter":
+      case " ":
+      case "Spacebar":
+        event.preventDefault();
+        this.toggleDropdown(event);
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+        if (!this.isOpen) this.isOpen = true;
+        setTimeout(() => {
+          if (this.hasSearch && this.searchInput) {
+            this.searchInput.nativeElement.focus();
+          } else {
+            this.focusFirstItem();
+          }
+        }, 0);
+        break;
+      case "Escape":
+        this.isOpen = false;
+        break;
+    }
+  }
+
+  protected onOptionKeyDown(event: KeyboardEvent, item: SelectionListItem<T>, index: number): void {
+    switch (event.key) {
+      case "Enter":
+      case " ":
+      case "Spacebar":
+        event.preventDefault();
+        this.selectItem(item, event);
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+        this.focusNextItem(index);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        this.focusPreviousItem(index);
+        break;
+      case "Escape":
+        event.preventDefault();
+        this.isOpen = false;
+        break;
+    }
+  }
+
+  protected override onBlur(event: FocusEvent): void {
+    const nativeElement = this.elementRef.nativeElement;
+    const relatedTarget = event.relatedTarget as Node;
+    if (!relatedTarget || !nativeElement.contains(relatedTarget)) {
+      this.isOpen = false;
+      this.searchTerm = '';
+    }
+  }
+
+  protected override onFocus(): void {
+    if (!this.disabled) {
+      this.isOpen = true;
+      this.setDropdownDirection();
+    }
+  }
+
+  protected onSearch(event: Event): void {
+    const target = event.target;
+    if (target instanceof HTMLInputElement) {
+      this.searchTerm = target.value ?? '';
+      this.focusedIndex = 0;
+    }
+  }
+
+  protected onSearchKeyDown(event: KeyboardEvent): void {
+    if (event.key === "Enter" && this.searchTerm.length > 2) {
+      event.preventDefault();
+      const exactMatch = this.filteredItems.find(i => i.label?.toLowerCase().includes(this.searchTerm.toLowerCase()));
+      if (exactMatch) {
+        this.selectItem(exactMatch, event);
+      }
+    }
+
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        setTimeout(() => this.focusFirstItem(), 0);
+        break;
+
+      case "Escape":
+        event.preventDefault();
+        this.isOpen = false;
+        break;
+    }
+  }
+
+  protected override updateDisabledState(_isDisabled: boolean): void {
+    //Intentionally left void, to implement in case is needed
+  }
+
+  protected updateSelection(item: SelectionListItem<T>, isAlreadySelected: boolean): void {
+    item.selected = !isAlreadySelected;
+
+    if (isAlreadySelected) {
+      this.selectedIds = this.selectedIds.filter(id => id !== item.id);
+    } else {
+      this.selectedIds.push(item.id);
+    }
+  }
+
+  protected override updateView(_value: Array<T> | null): void {
+    //Intentionally left void, to implement in case is needed
+  }
+
+  private focusFirstItem(): void {
+    const buttons = this.getEnabledButtons();
+    if (buttons.length > 0) {
+      this.focusedIndex = 0;
+      buttons[0].focus();
+    }
+  }
+
+  private focusNextItem(currentIndex: number = this.focusedIndex): void {
+    const buttons = this.getEnabledButtons();
+    if (buttons.length === 0) return;
+
+    const nextIndex = (currentIndex + 1) % buttons.length;
+    this.focusedIndex = nextIndex;
+    buttons[nextIndex].focus();
+  }
+
+  private focusPreviousItem(currentIndex: number = this.focusedIndex): void {
+    const buttons = this.getEnabledButtons();
+    if (buttons.length === 0) return;
+
+    const prevIndex = (currentIndex - 1 + buttons.length) % buttons.length;
+    this.focusedIndex = prevIndex;
+    buttons[prevIndex].focus();
+  }
+
+  private getEnabledButtons(): HTMLButtonElement[] {
+    return this.optionButtons
+      ? this.optionButtons.map(ref => ref.nativeElement).filter(btn => !btn.disabled)
+      : [];
+  }
+
+  private setDropdownDirection(): void {
+    const trigger: HTMLElement | undefined = this.elementRef.nativeElement.querySelector('.custom-select');
+    const searchTrigger: HTMLElement | undefined = this.elementRef.nativeElement.querySelector('.options-search__input');
+    const dropdownHeight: number = 240;
+
+    if(trigger || searchTrigger){
+      const rect = trigger?.getBoundingClientRect() || searchTrigger?.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+
+      const spaceBelow = viewportHeight - (rect?.bottom ?? 0);
+      const spaceAbove = (rect?.top ?? 0);
+
+      if (spaceBelow >= dropdownHeight) {
+        this.openDirection = 'down';
+      } else if (spaceAbove >= dropdownHeight) {
+        this.openDirection = 'top';
+      } else {
+        this.openDirection = spaceBelow > spaceAbove ? 'down' : 'top';
+      }
+    }
+  }
+
+  /**
+   * Returns warning messages. Consumers may pass arbitrary warnings via `warningMessages`.
+   * Falls back to DEFAULT_INPUT_MULTI_SELECT_WARNINGS_MESSAGES or a generic message.
+   */
+  protected override get warningList(): string[] {
+    return Object.keys(this.warningMessages).map(key => {
+      return (
+        this.warningMessages[key] ||
+        DEFAULT_INPUT_MULTI_SELECT_WARNINGS_MESSAGES[key] ||
+        ''
+      );
+    });
+  }
+
+  /**
+   * Returns whether any warnings are active.
+   */
+  protected get hasWarning(): boolean {
+    return this.warningList.length > 0;
+  }
+
+}

package/src/lib/components/selection-lists/selection-list/selection-list.component.html

@@ -0,0 +1,125 @@
+<div class="frg-selection-list"
+  [class.selection-list-error]="hasError"
+>
+  <label [attr.for]="id + '-options'">{{ label }}</label>
+
+  @if(hasSearch){
+    <div class="options-search">
+      <input
+        #searchInput
+        type="text"
+        [attr.name]="id + '-options'"
+        [attr.id]="id + '-options'"
+        class="options-search__input"
+        [class.open]="isOpen"
+        [attr.placeholder]="'Select…'"
+        aria-label="Search options"
+        role="searchbox"
+        [value]="searchTerm"
+        (input)="onSearch($event)"
+        (blur)="onBlur($event)"
+        (focus)="toggleDropdown($event)"
+        (keydown)="onSearchKeyDown($event)"
+      />
+      <div class="selection-list__actions">
+        @if(searchTerm.length){
+          <button
+            type="button"
+            class="clear-button"
+            aria-label="Clear input"
+            (click)="clearValue($event)"
+          >
+          <span class="fas fa-xmark"></span>
+          </button>
+        }
+        <button
+          type="button"
+          class="arrow-button"
+          [class.open]="isOpen"
+          aria-label="Toggle dropdown"
+          (click)="toggleDropdown($event)"
+        >
+          <span class="arrow-icon fas fa-chevron-down"></span>
+        </button>
+      </div>
+    </div>
+  } @else {
+    <div class="frg-selection-list__handle-buttons">
+      <button
+        type="button"
+        class="custom-select"
+        [id]="id + '-options'"
+        [attr.name]="id + '-options'"
+        [class.open]="isOpen"
+        [disabled]="disabled"
+        [attr.aria-expanded]="isOpen"
+        (click)="toggleDropdown($event)"
+        (keydown)="onKeyDown($event)"
+        [attr.aria-controls]="id + '-options'"
+      >
+        <span class="item-label" [class.selected]="selectedItem">
+          {{ selectedItem?.label || placeholder || 'Select…' }}
+        </span>
+      </button> 
+
+      <div class="selection-list__actions">
+        @if(value && selectedItem){
+          <button
+            type="button"
+            class="clear-button"
+            aria-label="Clear input"
+            (click)="clearValue($event)"
+          >
+            <span class="fas fa-xmark"></span>
+          </button>
+        }
+
+        <button
+          type="button"
+          class="arrow-button"
+          [class.open]="isOpen"
+          aria-label="Toggle dropdown"
+          (click)="toggleDropdown($event)"
+        >
+          <span class="arrow-icon fas fa-chevron-down"></span>
+        </button>
+      </div>
+    </div>
+  }
+  
+  <frg-input-validation
+    [errorList]="errorList"
+    [isFormInvalid]="hasError"
+  >
+  </frg-input-validation>
+
+  @if (isOpen) {
+    <div 
+      class="options"
+      [id]="id + '-options'"
+      [class.open-up]="openDirection === 'top'"
+      [class.open-down]="openDirection === 'down'"
+    >
+      @for (item of filteredItems; track item.id; let idx = $index) {
+        <button
+          #optionButton
+          type="button"
+          class="option"
+          [class.disabled]="item.disabled"
+          [class.selected]="item.id === selectedId"
+          [disabled]="item.disabled"
+          (focus)="onFocus()"
+          (blur)="onBlur($event)"
+          (click)="selectItem(item, $event)"
+          (keydown)="onOptionKeyDown($event, item, idx)"
+        >
+          @if(optionTemplate) {
+            <ng-container *ngTemplateOutlet="optionTemplate; context: { $implicit: item }"></ng-container>
+          } @else {
+            {{ item.label }}
+          }
+        </button>
+      }
+    </div>
+  }
+</div>