/// /// Copyright 2015-2026 Micro Focus or one of its affiliates. /// /// Licensed under the Apache License, Version 2.0 (the "License"); /// you may not use this file except in compliance with the License. /// You may obtain a copy of the License at /// /// http://www.apache.org/licenses/LICENSE-2.0 /// /// Unless required by applicable law or agreed to in writing, software /// distributed under the License is distributed on an "AS IS" BASIS, /// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. /// See the License for the specific language governing permissions and /// limitations under the License. /// import { AfterContentInit, Component, ContentChildren, EventEmitter, inject, Input, OnDestroy, Output, QueryList, } from '@angular/core'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { SelectionService } from '../../directives/selection/selection.service'; import { SelectListItemComponent } from './select-list-item/select-list-item.component'; import { MultipleSelectListStrategy } from './strategies/multiple-select-list.strategy'; import { SingleSelectListStrategy } from './strategies/single-select-list.strategy'; @Component({ selector: 'ux-select-list', templateUrl: './select-list.component.html', providers: [SelectionService], host: { role: 'list', }, }) export class SelectListComponent implements AfterContentInit, OnDestroy { private readonly _selection = inject>(SelectionService); /** Determine if we allow multiple items to be selected */ @Input() set multiple(multiple: boolean) { this._selection.strategy.deselectAll(); this._selection.setStrategy( multiple ? new MultipleSelectListStrategy() : new SingleSelectListStrategy() ); } /** Set the selected items */ @Input() set selected(selected: T | ReadonlyArray) { // if the selection entered is the same as the current selection then do nothing if (this._selection.selection$.value === selected) { return; } // if selected is an array and has not items and there are no items currently selected also do nothing if ( Array.isArray(selected) && selected.length === 0 && this._selection.selection$.value.length === 0 ) { return; } // select only the specified items if (Array.isArray(selected)) { this._selection.selectOnly(...selected); } else { this._selection.selectOnly(selected as T); } } /** Emit when the selection changes */ @Output() selectedChange = new EventEmitter>(); /** Find all select list items */ @ContentChildren(SelectListItemComponent) items: QueryList>; /** Automatically unsubscribe all observables */ private readonly _onDestroy = new Subject(); constructor() { // set the selection strategy to single by default this._selection.setStrategy(new SingleSelectListStrategy()); // emit the selection changes when they occur this._selection.selection$ .pipe(takeUntil(this._onDestroy)) .subscribe(selection => this.selectedChange.emit(selection)); } ngAfterContentInit(): void { // supply the initial item set this._selection.dataset = this.items.map(item => item.data); // if the item set changes update the list this.items.changes .pipe(takeUntil(this._onDestroy)) .subscribe(() => (this._selection.dataset = this.items.map(item => item.data))); } ngOnDestroy(): void { this._onDestroy.next(); this._onDestroy.complete(); } }