@tacdaed/fragments 1.0.0-beta.0 → 1.0.0-beta.2

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

@@ -0,0 +1,170 @@
+<div class="frg-multi-select" [class.multi-select-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]="'Search…'"
+        aria-label="Search options"
+        role="searchbox"
+        [value]="searchTerm"
+        (input)="onSearch($event)"
+        (blur)="onBlur($event)"
+        (focus)="onFocus()"
+        (keydown)="onSearchKeyDown($event)"
+      />
+      <ng-container [ngTemplateOutlet]="buttonsTemplate"></ng-container>
+    </div>
+
+    @if(showChips && selectedItems.length) {
+      <div class="selected-chips selected-chips--below">
+        @for(item of selectedItems; track item.id) {
+          <frg-chip
+            [id]="item.id"
+            [label]="item.label || ''"
+            size="sm"
+            [style]="chipsStyle"
+            [removable]="true"
+            [disabled]="disabled"
+            (removed)="removeItemById($event)"
+          ></frg-chip>
+        }
+      </div>
+    } @else if(selectedItems.length) {
+      <div class="selected-labels">
+        {{ selectedLabels }}
+      </div>
+    }
+  } @else {
+    <div class="frg-multi-select__handle-buttons">
+      @if(showChips) {
+        <div
+          class="custom-select custom-select--chips"
+          [id]="id + '-options'"
+          [attr.name]="id + '-options'"
+          [class.open]="isOpen"
+          [class.disabled]="disabled"
+          [attr.tabindex]="disabled ? -1 : 0"
+          [attr.aria-expanded]="isOpen"
+          (click)="toggleDropdown($event)"
+          (keydown)="onKeyDown($event)"
+          [attr.aria-controls]="id + '-options'"
+        >
+          @if(selectedItems.length) {
+            <div class="selected-chips">
+              @for(item of selectedItems; track item.id) {
+                <frg-chip
+                  [id]="item.id"
+                  [label]="item.label || ''"
+                  size="sm"
+                  [style]="chipsStyle"
+                  [removable]="true"
+                  [disabled]="disabled"
+                  (removed)="removeItemById($event)"
+                ></frg-chip>
+              }
+            </div>
+          } @else {
+            <span class="selected-labels__text selected-labels__placeholder">{{ placeholder || 'Select.' }}</span>
+          }
+        </div>
+      } @else {
+        <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'"
+        >
+          @if(valuesTemplate) {
+            <ng-container 
+              [ngTemplateOutlet]="valuesTemplate" 
+              [ngTemplateOutletContext]="{ $implicit: selectedItems }"
+            ></ng-container>
+          } @else {
+            <span class="selected-labels__text" [class.selected-labels__placeholder]="!selectedItems.length">{{ selectedLabels }}</span>
+          }
+        </button>
+      }
+      <ng-container [ngTemplateOutlet]="buttonsTemplate"></ng-container>
+    </div>
+  }
+
+  @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]="selectedIds.includes(item.id)"
+          [disabled]="item.disabled"
+          (focus)="onFocus()"
+          (blur)="onBlur($event)"
+          (click)="selectItem(item, $event)"
+          (keydown)="onOptionKeyDown($event, item, idx)"
+        >
+          <input
+            type="checkbox"
+            [attr.id]="id + '-option-' + idx"
+            [attr.name]="id + '-option'"
+            [checked]="item.selected"
+            readonly
+          />
+          @if(optionTemplate) {
+            <ng-container [ngTemplateOutlet]="optionTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
+          } @else {
+            {{ item.label }}
+          }
+        </button>
+      }
+    </div>
+  }
+
+  <frg-input-validation
+    [errorList]="errorList"
+    [isFormInvalid]="hasError"
+  ></frg-input-validation>
+</div>
+
+<ng-template #buttonsTemplate>
+  <div class="multi-select__actions">
+    @if((value && selectedItems.length) || (hasSearch && searchTerm.length)) {
+      <button
+        type="button"
+        class="clear-button"
+        aria-label="Clear selection"
+        (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>
+</ng-template>
+

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

@@ -0,0 +1,312 @@
+@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-multi-select {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+
+    .options-search {
+      position: relative;
+      display: flex;
+      align-items: center;
+      width: 100%;
+      border-bottom: 2px solid $input-border-color;
+      transition: border-color 0.3s;
+
+      &:has(.open) {
+        border-color: $input-focus-border-color;
+      }
+
+      &.focus,
+      &:focus-visible,
+      &: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;
+      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;
+
+      &:has(.open) {
+        border-color: $input-focus-border-color;
+      }
+
+      &:hover,
+      &:focus-visible,
+      &.focus {
+        border-color: $input-focus-border-color;
+      }
+
+      .custom-select {
+        flex: 1 1 auto;
+        min-width: 0;
+        display: flex;
+        align-items: center;
+        padding: $input-padding;
+        padding-right: 3rem;
+        border: none;
+        background: transparent;
+        text-align: left;
+        font-size: 1rem;
+        overflow: hidden;
+
+        &:focus-visible {
+          outline: none;
+        }
+
+        &:disabled {
+          cursor: not-allowed;
+          opacity: 0.6;
+        }
+
+        &.open {
+          border-bottom-color: $color-primary;
+        }
+
+        .item-label {
+          flex: 1 1 auto;
+          min-width: 0; // critical for ellipsis in flex
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          opacity: 0.7;
+        }
+
+        .selected {
+          flex: 1 1 auto;
+          min-width: 0;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
+
+      .custom-select--chips {
+        min-height: 2.25rem;
+        cursor: pointer;
+      }
+
+      .custom-select--chips.disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
+
+    }
+
+    .multi-select__actions {
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      display: inline-flex;
+      align-items: center;
+      padding-right: 0.25rem;
+    }
+
+    .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: inline-flex;
+        gap: .75rem;
+        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 .fas {
+      line-height: 1;
+    }
+
+    .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);
+    }
+
+    .selected-labels {
+      padding: .2rem .5rem;
+      font-size: .875rem;
+      color: $color-dark-neutral;
+      
+      &__text {
+        color: $color-dark-neutral;
+      }
+      
+      &__placeholder {
+        color: $input-text-color;
+        opacity: 0.7;
+      }
+    }
+
+    .selected-chips {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 0.25rem;
+      min-height: 1.5rem;
+    }
+
+    .selected-chips--below {
+      padding: 0.25rem 0.5rem 0;
+    }
+
+    .custom-select--chips.disabled frg-chip {
+      pointer-events: none;
+      opacity: 0.6;
+    }
+
+    &.multi-select-error .options-search,
+    &.multi-select-error .frg-multi-select__handle-buttons {
+      border-bottom-color: $color-danger;
+    }
+
+    &.multi-select-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/multi-select/multi-select.component.spec.ts

@@ -0,0 +1,61 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { MultiSelectComponent } from './multi-select.component';
+import { SelectionListItem } from '../selection-lists-interface';
+
+describe('MultiSelectComponent', () => {
+  let fixture: ComponentFixture<MultiSelectComponent<string>>;
+  let component: MultiSelectComponent<string>;
+
+  const items: SelectionListItem<string>[] = [
+    { id: 'a', label: 'Alpha', value: 'alpha', selected: false },
+    { id: 'b', label: 'Beta', value: 'beta', selected: false }
+  ];
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MultiSelectComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MultiSelectComponent<string>);
+    component = fixture.componentInstance;
+    component.items = [...items];
+  });
+
+  it('opens dropdown when trigger is clicked', () => {
+    fixture.detectChanges();
+
+    const trigger = fixture.debugElement.query(By.css('.custom-select'));
+    trigger.nativeElement.click();
+
+    expect((component as any).isOpen).toBeTrue();
+  });
+
+  it('selects multiple items and updates value', () => {
+    const onChangeSpy = jasmine.createSpy('onChange');
+    component.registerOnChange(onChangeSpy);
+
+    fixture.detectChanges();
+
+    component.selectItem(items[0], new Event('click'));
+    component.selectItem(items[1], new Event('click'));
+
+    expect(component.value).toEqual(['alpha', 'beta']);
+    expect((component as any).selectedIds).toEqual(['a', 'b']);
+    expect(onChangeSpy).toHaveBeenCalledWith(['alpha', 'beta']);
+  });
+
+  it('clears selections', () => {
+    component.items = [
+      { id: 'a', label: 'Alpha', value: 'alpha', selected: true },
+      { id: 'b', label: 'Beta', value: 'beta', selected: true }
+    ];
+    (component as any).selectedIds = ['a', 'b'];
+    component.value = ['alpha', 'beta'];
+
+    (component as any).clearValue(new MouseEvent('click'));
+
+    expect(component.value).toBeNull();
+    expect((component as any).selectedIds.length).toBe(0);
+  });
+});