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

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

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

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

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

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

@@ -1,17 +0,0 @@
-//#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

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

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