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; } } |