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

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

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

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

@@ -1,61 +0,0 @@
-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);
-  });
-});