All files / filtered-search/values/multi-select si-filtered-search-multi-select.component.ts

97.36% Statements 37/38
100% Branches 10/10
94.11% Functions 16/17
96.96% Lines 32/33

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118                                                                        1x       17x 17x 17x 17x   17x 17x       34x       13x 13x         17x 17x 17x       6x 6x 5x 5x   1x 1x 1x   2x     2x   6x       16x 16x   25x   32x   32x             12x 12x     38x               17x              
/**
 * Copyright (c) Siemens 2016 - 2025
 * SPDX-License-Identifier: MIT
 */
import {
  ChangeDetectionStrategy,
  Component,
  computed,
  ElementRef,
  input,
  OnChanges,
  OnInit,
  signal,
  SimpleChanges,
  viewChild
} from '@angular/core';
import { SiTypeaheadDirective, TypeaheadMatch } from '@siemens/element-ng/typeahead';
import { SiTranslateModule, TranslatableString } from '@siemens/element-translate-ng/translate';
import { BehaviorSubject, Observable, switchMap } from 'rxjs';
import { map, tap } from 'rxjs/operators';
 
import { selectOptions, TypeaheadOptionCriterion } from '../../si-filtered-search-helper';
import { OptionCriterion } from '../../si-filtered-search.model';
import { SiFilteredSearchOptionValueBase } from '../si-filtered-search-option-value.base';
import { SiFilteredSearchValueBase } from '../si-filtered-search-value.base';
 
@Component({
  selector: 'si-filtered-search-multi-select',
  imports: [SiTranslateModule, SiTypeaheadDirective],
  templateUrl: './si-filtered-search-multi-select.component.html',
  styleUrl: './si-filtered-search-multi-select.component.scss',
  providers: [
    { provide: SiFilteredSearchValueBase, useExisting: SiFilteredSearchMultiSelectComponent }
  ],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class SiFilteredSearchMultiSelectComponent
  extends SiFilteredSearchOptionValueBase
  implements OnChanges, OnInit
{
  readonly itemCountText = input.required<TranslatableString>();
  protected override readonly valueInput = viewChild<ElementRef<HTMLInputElement>>('valueInput');
  protected readonly optionValue = signal<OptionCriterion[]>([]);
  protected readonly selectionChange = new BehaviorSubject<string[]>([]);
 
  readonly hasMultiSelections = computed(
    () => Array.isArray(this.criterionValue().value) && this.criterionValue().value!.length > 1
  );
 
  ngOnChanges(changes: SimpleChanges): void {
    if (
      changes.criterionValue &&
      this.criterionValue().value?.length !== this.optionValue().length
    ) {
      this.optionValue.set([]);
      this.selectionChange.next([]);
    }
  }
 
  ngOnInit(): void {
    this.inputChange.next('');
    this.selectionChange.next(this.criterionValue().value as string[]);
    this.buildOptionValue();
  }
 
  protected valueTypeaheadSelect(match: TypeaheadMatch): void {
    const option = match.option as OptionCriterion;
    if (match.itemSelected) {
      this.criterionValue.update(v => ({ ...v, value: [...v.value!, option.value] }));
      this.optionValue.update(v => [...v, option]);
    } else {
      const value = this.criterionValue();
      if (typeof value.value !== 'string') {
        this.criterionValue.set({
          ...value,
          value: value.value?.filter(elem => elem !== option.value)
        });
      }
      this.optionValue.update(v => v.filter(elem => elem.value !== option.value));
    }
    this.selectionChange.next(this.criterionValue().value as string[]);
  }
 
  protected override buildOptions(): Observable<TypeaheadOptionCriterion[]> | undefined {
    const translatedOptions = super.buildOptions();
    return translatedOptions?.pipe(
      switchMap(options =>
        this.selectionChange!.pipe(
          tap(value => {
            selectOptions(options, value);
          }),
          map(() => options)
        )
      )
    );
  }
 
  protected processTypeaheadOptions(options: TypeaheadOptionCriterion[]): void {
    const value = this.criterionValue().value as string[];
    this.optionValue.set(
      options.filter(
        option =>
          value.includes(option.value) ||
          // TODO: remove this. I don't know why, but it seems like previously FS accepted labels as well
          value.includes(option.translatedLabel)
      )
    );
    // Sneaky patch the value.
    // We did not emit a change, as no user interaction happened.
    // We should consider dropping this, but there is currently a unit test checking this behavior.
    value.splice(0, value.length, ...this.optionValue().map(option => option.value));
  }
 
  protected hasOptionValue(): boolean {
    return !!this.optionValue().length;
  }
}