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

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

@@ -0,0 +1,267 @@
+@use "sass:color";
+@use './../../../../../assets/styles/scss/variables' as *;
+
+:host {
+  display: block;
+  font-family: $input-font-family;
+
+  label {
+    display: flex;
+    font-size: $font-size-xs;
+    color: $input-text-color;
+    padding: $input-padding 0;
+  }
+
+  .frg-selection-list {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+
+    .options-search {
+      position: relative;
+      display: flex;
+      align-items: center;
+      gap: 0;
+      width: 100%;
+      border-bottom: 2px solid $input-border-color;
+      transition: border-color 0.3s;
+
+      &.focus,
+      &:hover {
+        border-color: $input-focus-border-color;
+      }
+
+      &__input {
+        flex: 1;
+        padding: $input-padding;
+        padding-right: 3rem;
+        border: none;
+        background: transparent;
+        font-family: $input-font-family;
+        font-size: 1rem;
+        color: $color-dark-neutral;
+        cursor: pointer;
+        outline: none;
+
+        &::placeholder {
+          color: $input-text-color;
+          opacity: 0.7;
+        }
+
+        &:disabled {
+          cursor: not-allowed;
+          opacity: 0.6;
+        }
+      }
+
+    }
+
+    &__handle-buttons {
+      display: flex;
+      align-items: center;
+      gap: 0;
+      width: 100%;
+      border-bottom: 2px solid $input-border-color;
+      background: transparent;
+      font-family: $input-font-family;
+      color: $input-text-color;
+      cursor: pointer;
+      transition: border-color 0.3s;
+      position: relative;
+
+      &:hover,
+      &.focus {
+        border-color: $input-focus-border-color;
+      }
+
+      .custom-select {
+        flex: 1;
+        padding: $input-padding;
+        padding-right: 3rem;
+        border: none;
+        background: transparent;
+        text-align: left;
+        display: flex;
+        align-items: center;
+        font-size: 1rem;
+
+        &:focus-visible {
+          outline: none;
+        }
+
+        &:disabled {
+          cursor: not-allowed;
+          opacity: 0.6;
+        }
+
+        &.open {
+          border-bottom-color: $color-primary;
+        }
+
+        .item-label {
+          flex: 1;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          margin-right: 0.5rem;
+          color: $input-text-color;
+          opacity: 0.7;
+        }
+
+        .selected {
+          flex: 1;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          margin-right: 0.5rem;
+          opacity: 1;
+          color: $color-dark-neutral;
+        }
+      }
+    }
+
+    .options {
+      position: absolute;
+      left: 0;
+      right: 0;
+      background: #fff;
+      border-radius: 0.25rem;
+      box-shadow: $box-shadow-md;
+      z-index: 10;
+      max-height: 240px;
+      overflow-y: auto;
+      animation: dropdown-fade-in 0.2s ease-in-out;
+
+      &::-webkit-scrollbar {
+        width: 0.3rem;
+        background-color: transparent;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-color: $color-primary;
+        border-radius: 0.1rem;
+      }
+
+      &::-webkit-scrollbar-thumb:hover {
+        background-color: color.adjust($color-primary, $lightness: -10%);
+      }
+
+      .option {
+        display: block;
+        width: 100%;
+        padding: 0.5rem 1rem;
+        background: transparent;
+        border: none;
+        text-align: left;
+        color: $input-text-color;
+        font-size: 0.95rem;
+        cursor: pointer;
+        transition: background-color 0.15s ease, color 0.15s ease;
+
+        &:hover:not(:disabled),
+        &:focus-visible:not(:disabled) {
+          background-color: color.scale($color-primary, $lightness: 90%);
+          outline: none;
+        }
+
+        &.selected {
+          background-color: color.scale($color-primary, $lightness: 85%);
+        }
+
+        &:disabled,
+        &.disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+      }
+
+      &.open-down {
+        top: calc(100% + 0.25rem);
+      }
+
+      &.open-up {
+        bottom: calc(100% + 0.25rem);
+      }
+    }
+
+    .clear-button,
+    .arrow-button {
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      padding: 0;
+      width: 1.25rem;
+      height: 1.25rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.75rem;
+      line-height: 1;
+      color: $color-dark-neutral;
+    }
+
+    .clear-button {
+      font-size: 0.75rem;
+    }
+
+    .clear-button .fas {
+      line-height: 1;
+    }
+
+    .selection-list__actions {
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      display: inline-flex;
+      align-items: center;
+      gap: 0.125rem;
+      padding-right: 0.25rem;
+    }
+
+    .arrow-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      transition: transform 0.3s ease;
+
+      &:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
+    }
+
+    .arrow-icon {
+      font-size: 0.75rem;
+      transition: transform 0.3s ease;
+    }
+
+    .arrow-button.open .arrow-icon {
+      transform: rotate(180deg);
+    }
+
+    &.selection-list-error .options-search, 
+    &.selection-list-error .frg-selection-list__handle-buttons {
+      border-bottom-color: $color-danger;
+    }
+
+    &.selection-list-error label {
+      color: $color-danger;
+    }
+
+    @keyframes dropdown-fade-in {
+      from {
+        opacity: 0;
+        transform: translateY(-10px);
+      }
+
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+  }
+}

package/src/lib/components/selection-lists/selection-list/selection-list.component.spec.ts

@@ -0,0 +1,66 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { SelectionListComponent } from './selection-list.component';
+import { SelectionListItem } from '../selection-lists-interface';
+
+describe('SelectionListComponent', () => {
+  let fixture: ComponentFixture<SelectionListComponent<string>>;
+  let component: SelectionListComponent<string>;
+
+  const items: SelectionListItem<string>[] = [
+    { id: 'a', label: 'Apple', value: 'apple', selected: false },
+    { id: 'b', label: 'Banana', value: 'banana', selected: false }
+  ];
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SelectionListComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SelectionListComponent<string>);
+    component = fixture.componentInstance;
+    component.items = [...items];
+  });
+
+  it('shows placeholder text when no selection', () => {
+    component.placeholder = 'Pick one';
+
+    fixture.detectChanges();
+
+    const label = fixture.debugElement.query(By.css('.item-label'));
+    expect(label.nativeElement.textContent).toContain('Pick one');
+  });
+
+  it('toggles dropdown on click', () => {
+    fixture.detectChanges();
+
+    const trigger = fixture.debugElement.query(By.css('.custom-select'));
+    trigger.nativeElement.click();
+
+    expect((component as any).isOpen).toBeTrue();
+  });
+
+  it('selects an item and closes dropdown', () => {
+    const onChangeSpy = jasmine.createSpy('onChange');
+    component.registerOnChange(onChangeSpy);
+
+    fixture.detectChanges();
+
+    component.selectItem(items[0], new Event('click'));
+
+    expect(component.value).toBe('apple');
+    expect((component as any).selectedId).toBe('a');
+    expect((component as any).isOpen).toBeFalse();
+    expect(onChangeSpy).toHaveBeenCalledWith('apple');
+  });
+
+  it('filters items when search term is long enough', () => {
+    component.hasSearch = true;
+    (component as any).searchTerm = 'app';
+
+    fixture.detectChanges();
+
+    expect(component.filteredItems.length).toBe(1);
+    expect(component.filteredItems[0].label).toBe('Apple');
+  });
+});

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

@@ -0,0 +1,315 @@
+import { NgTemplateOutlet } from "@angular/common";
+import { Component, ElementRef, HostListener, Input, QueryList, TemplateRef, ViewChild, ViewChildren, inject } from "@angular/core";
+import { SelectionListBase } from "../selection-lists-base";
+import { DEFAULT_SELECTION_LIST_ERROR_MESSAGES } from "../selection-lists-const";
+import { SelectionListItem } from "../selection-lists-interface";
+import { InputValidationComponent } from "../../input/input-validation/input-validation.component";
+import { DEFAULT_INPUT_SELECTION_LIST_WARNINGS_MESSAGES } from "../../input/input-consts";
+
+@Component({
+  selector: "frg-selection-list",
+  templateUrl: "./selection-list.component.html",
+  styleUrls: ["./selection-list.component.scss"],
+  imports: [NgTemplateOutlet, InputValidationComponent]
+})
+export class SelectionListComponent<T> extends SelectionListBase<T> {
+  private readonly elementRef = inject(ElementRef);
+
+  @Input() items: Array<SelectionListItem<T>> = [];
+  @Input() optionTemplate?: TemplateRef<unknown>;
+  @Input() hasSearch: boolean = false;
+
+  @ViewChildren("optionButton") optionButtons!: QueryList<ElementRef<HTMLButtonElement>>;
+  @ViewChild("searchInput", { read: ElementRef }) searchInput?: ElementRef<HTMLInputElement>;
+
+  protected isOpen = false;
+  protected searchTerm = "";
+  protected selectedId: 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 selectedItem(): SelectionListItem<T> | null {
+    return this.items.find(i => i.id === this.selectedId) ?? null;
+  }
+
+  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.';
+    });
+  }
+
+  /**
+   * Returns warning messages. Consumers may pass arbitrary warnings via `warningMessages`.
+   * Falls back to DEFAULT_INPUT_SELECTION_LIST_WARNINGS_MESSAGES or a generic message.
+   */
+  protected override get warningList(): string[] {
+    return Object.keys(this.warningMessages).map(key => {
+      return (
+        this.warningMessages[key] ||
+        DEFAULT_INPUT_SELECTION_LIST_WARNINGS_MESSAGES[key] ||
+        ''
+      );
+    });
+  }
+
+  /**
+   * Returns whether any warnings are active.
+   */
+  protected get hasWarning(): boolean {
+    return this.warningList.length > 0;
+  }
+
+  public toggleDropdown(event: Event): void {
+    event.stopPropagation();
+    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.selectedId = item.id;
+    this.value = item.value;
+    this.isOpen = false;
+    this.focusedIndex = this.items.findIndex(i => i.id === item.id);
+
+    if (this.hasSearch) {
+      this.searchTerm = item.label ?? '';
+    }
+
+    this.onChange(this.value);
+    this.onTouched();
+  }
+
+  protected override clearValue(event: MouseEvent) {
+    event.stopPropagation();
+
+    this.selectedId = '';
+    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;
+      if(this.selectedItem){
+        this.searchTerm = this.selectedItem.label;
+      } else {
+        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") {
+      event.preventDefault();
+      const exactMatch = this.filteredItems.find(i => i.label?.toLowerCase() === 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 override updateView(_value: 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';
+      }
+    }
+  }
+
+}

package/src/lib/components/selection-lists/selection-lists-base.ts

@@ -0,0 +1,35 @@
+import { Directive, OnInit } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { InputBase } from '../input/input-base';
+import { SelectionListPosition } from './selection-lists.type';
+
+/**
+ * Base class for input components, providing common functionality for form controls.
+ * This class implements ControlValueAccessor to integrate with Angular forms.
+ * Subclasses must implement the abstract methods to update the view and disabled state.
+ * It also provides properties for label, placeholder, required state, and error handling.
+ * The errorMessages property can be customized to provide specific validation messages.
+ * The hasError getter can be used in templates to conditionally display error messages.
+ * Subclasses should call super.ngOnInit() if they override ngOnInit().
+ *
+ * @see ControlValueAccessor
+ */
+@Directive()
+export abstract class SelectionListBase<T> extends InputBase<T> implements ControlValueAccessor, OnInit {
+  /**
+   * Direction of selection list when it opens.
+   */
+  protected openDirection: SelectionListPosition = 'down';
+
+  /**
+   * Clear the value of input
+   */
+  protected abstract clearValue(event: Event): void;
+
+  /**
+   * Handles selection change event.
+   * Subclasses can override to provide custom behavior.
+   * Default implementation does nothing.
+   */
+  protected onSelectionChange(_: Event): void { }
+}

package/src/lib/components/selection-lists/selection-lists-const.ts

@@ -0,0 +1,17 @@
+//#region [ERRORS]
+export const DEFAULT_SELECTION_LIST_ERROR_MESSAGES: Record<string, string> = {
+  required: 'This field is required.',
+  minlength: 'The value is too short.',
+  maxlength: 'The value is too long.',
+  pattern: 'The value does not match the required pattern.',
+};
+//#endregion
+
+//#region [WARNINGS]
+// export const DEFAULT_INPUT_NUMBER_WARNING_MESSAGES: Record<string, string> = {
+//   min:'The minimium value allowed is {{limit}}',
+//   max: 'The maximum value allowed is {{limit}}',
+//   step: 'The value does not match the required step increment value of {{limit}}',
+//   precision: 'The value exceeds the allowed number of decimal places value of {{limit}}',
+// };
+//#endregion

package/src/lib/components/selection-lists/selection-lists-interface.ts

@@ -0,0 +1,7 @@
+export interface SelectionListItem<T> {
+  id: string;
+  label: string;
+  value: T | null;
+  selected: boolean;
+  disabled?: boolean;
+}

package/src/lib/components/selection-lists/selection-lists.type.ts

@@ -0,0 +1 @@
+export type SelectionListPosition = 'top' | 'down';