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

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

@@ -1,372 +0,0 @@
-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

@@ -1,125 +0,0 @@
-<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>