ontotext-reusable-ui-components/onto-search/esm2015/lib/onto-search-facet/dropdown-multi-select-facet/dropdown-multi-select-facet.component.js

Unified reusable UI components designed for the Ontotext ecosystem.

import { Component } from '@angular/core';
import { OntoSearchFacetComponent } from '../onto-search-facet.component';
import { FormControl } from '@angular/forms';
import { ReplaySubject } from 'rxjs';
import { untilComponentDestroyed } from '@w11k/ngx-componentdestroyed';
export class DropdownMultiSelectFacetComponent extends OntoSearchFacetComponent {
    constructor() {
        super(...arguments);
        /** control for the selected from multi-selection */
        this.selectedFormControl = new FormControl();
        /** control for the MatSelect filter keyword multi-selection */
        this.filteredFormControl = new FormControl();
        /** list of filtered by search keyword for multi-selection */
        this.filtered = new ReplaySubject(1);
    }
    ngOnChanges(changes) {
        super.ngOnChanges(changes);
        if (changes.data && changes.data.currentValue) {
            this.selectedFormControl.setValue(this.selected);
            this.init();
        }
    }
    init() {
        this.filtered.next(this.facetGroup.slice());
        this.selectedFormControl.setValue(this.selected);
        this.filteredFormControl.valueChanges
            .pipe(untilComponentDestroyed(this))
            .subscribe(() => {
            this.filter();
        });
    }
    filter() {
        if (!Array.isArray(this.facetGroup)) {
            return;
        }
        let search = this.filteredFormControl.value;
        if (!search) {
            this.filtered.next(this.facetGroup.slice());
            return;
        }
        search = search.toLowerCase();
        this.filtered.next(this.facetGroup.filter((item) => item.label.toLowerCase().indexOf(search) > -1));
    }
    onSelection($event) {
        const selection = $event.value;
        selection.forEach((item) => item.selected = true);
        this.facetGroup.filter((item) => selection.indexOf(item) === -1).map((item) => item.selected = false);
        this.selectedFacets = $event.value;
    }
    onOpenedChange(isOpen) {
        if (!isOpen) {
            const selection = {
                name: this.facetGroupName,
                selected: this.selectedFacets,
                count: this.countFacetResults()
            };
            this.onSelectionChange.emit(selection);
        }
    }
    countFacetResults() {
        let sum = 0;
        this.selectedFormControl.value.forEach((facet) => sum += facet.count);
        return sum;
    }
}
DropdownMultiSelectFacetComponent.decorators = [
    { type: Component, args: [{
                selector: 'onto-dropdown-multi-select-facet',
                template: "<div class=\"dropdown-multi-select\" appCypressData=\"dropdown-multi-select\">\n  <div appCypressData=\"facet-title\">\n    <ng-container *ngTemplateOutlet=\"facetTitleTemplate; context: {$implicit: facetGroupName}\">\n    </ng-container>\n  </div>\n  <mat-form-field>\n    <mat-select [formControl]=\"selectedFormControl\"  multiple @.disabled (selectionChange)=\"onSelection($event)\" (openedChange)=\"onOpenedChange($event)\">\n      <mat-select-trigger appCypressData=\"dropdown-multi-select\">\n        <span *ngFor=\"let facet of selectedFormControl.value; let index = index\" appCypressData=\"selected-facets\">\n          {{facet.label}}<span *ngIf=\"index < selectedFormControl.value.length - 1\">{{'ONTO_DROPDOWN.DELIMITER' | transloco}}</span>\n        </span>\n      </mat-select-trigger>\n      <onto-dropdown-multi-select [formControl]=\"filteredFormControl\"></onto-dropdown-multi-select>\n        <mat-option *ngFor=\"let item of filtered | async\" [value]=\"item\">\n        <ng-container *ngTemplateOutlet=\"facetTemplate; context: {$implicit: item}\">\n        </ng-container>\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n</div>\n",
                styles: [".dropdown-multi-select,.dropdown-multi-select mat-form-field{width:100%}"]
            },] }
];
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24tbXVsdGktc2VsZWN0LWZhY2V0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIvb3B0L2plbmtpbnNfam9icy93b3Jrc3BhY2UvcmV1c2FibGUtdWktY29tcG9uZW50cy1yZWxlYXNlL3Byb2plY3RzL29udG8tc2VhcmNoL3NyYy8iLCJzb3VyY2VzIjpbImxpYi9vbnRvLXNlYXJjaC1mYWNldC9kcm9wZG93bi1tdWx0aS1zZWxlY3QtZmFjZXQvZHJvcGRvd24tbXVsdGktc2VsZWN0LWZhY2V0LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFnQixNQUFNLGVBQWUsQ0FBQztBQUN2RCxPQUFPLEVBQUMsd0JBQXdCLEVBQUMsTUFBTSxnQ0FBZ0MsQ0FBQztBQUN4RSxPQUFPLEVBQUMsV0FBVyxFQUFDLE1BQU0sZ0JBQWdCLENBQUM7QUFDM0MsT0FBTyxFQUFDLGFBQWEsRUFBQyxNQUFNLE1BQU0sQ0FBQztBQUVuQyxPQUFPLEVBQUMsdUJBQXVCLEVBQUMsTUFBTSw4QkFBOEIsQ0FBQztBQVNyRSxNQUFNLE9BQU8saUNBQWtDLFNBQVEsd0JBQXdCO0lBTC9FOztRQU1FLG9EQUFvRDtRQUM3Qyx3QkFBbUIsR0FBZ0IsSUFBSSxXQUFXLEVBQUUsQ0FBQztRQUU1RCwrREFBK0Q7UUFDeEQsd0JBQW1CLEdBQWdCLElBQUksV0FBVyxFQUFFLENBQUM7UUFFNUQsNkRBQTZEO1FBQ3RELGFBQVEsR0FBc0MsSUFBSSxhQUFhLENBQXFCLENBQUMsQ0FBQyxDQUFDO0lBK0RoRyxDQUFDO0lBM0RDLFdBQVcsQ0FBQyxPQUFzQjtRQUNoQyxLQUFLLENBQUMsV0FBVyxDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBQzNCLElBQUksT0FBTyxDQUFDLElBQUksSUFBSSxPQUFPLENBQUMsSUFBSSxDQUFDLFlBQVksRUFBRTtZQUM3QyxJQUFJLENBQUMsbUJBQW1CLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxRQUFR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ci9jb3JlJztcbmltcG9ydCB7T250b1NlYXJjaEZhY2V0Q29tcG9uZW50fSBmcm9tICcuLi9vbnRvLXNlYXJjaC1mYWNldC5jb21wb25lbnQnO1xuaW1wb3J0IHtGb3JtQ29udHJvbH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHtSZXBsYXlTdWJqZWN0fSBmcm9tICdyeGpzJztcbmltcG9ydCB7U2VhcmNoRmFjZXRNb2RlbH0gZnJvbSAnLi4vbW9kZWxzL3NlYXJjaC1mYWNldC1tb2RlbCc7XG5pbXBvcnQge3VudGlsQ29tcG9uZW50RGVzdHJveWVkfSBmcm9tICdAdzExay9uZ3gtY29tcG9uZW50ZGVzdHJveWVkJztcbmltcG9ydCB7TWF0U2VsZWN0Q2hhbmdlfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9zZWxlY3QnO1xuaW1wb3J0IHtTZWFyY2hGYWNldFNlbGVjdGlvbn0gZnJvbSAnLi4vbW9kZWxzL3NlYXJjaC1mYWNldC1zZWxlY3Rpb24nO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdvbnRvLWRyb3Bkb3duLW11bHRpLXNlbGVjdC1mYWNldCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9kcm9wZG93bi1tdWx0aS1zZWxlY3QtZmFjZXQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9kcm9wZG93bi1tdWx0aS1zZWxlY3QtZmFjZXQuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBEcm9wZG93bk11bHRpU2VsZWN0RmFjZXRDb21wb25lbnQgZXh0ZW5kcyBPbnRvU2VhcmNoRmFjZXRDb21wb25lbnQge1xuICAvKiogY29udHJvbCBmb3IgdGhlIHNlbGVjdGVkIGZyb20gbXVsdGktc2VsZWN0aW9uICovXG4gIHB1YmxpYyBzZWxlY3RlZEZvcm1Db250cm9sOiBGb3JtQ29udHJvbCA9IG5ldyBGb3JtQ29udHJvbCgpO1xuXG4gIC8qKiBjb250cm9sIGZvciB0aGUgTWF0U2VsZWN0IGZpbHRlciBrZXl3b3JkIG11bHRpLXNlbGVjdGlvbiAqL1xuICBwdWJsaWMgZmlsdGVyZWRGb3JtQ29udHJvbDogRm9ybUNvbnRyb2wgPSBuZXcgRm9ybUNvbnRyb2woKTtcblxuICAvKiogbGlzdCBvZiBmaWx0ZXJlZCBieSBzZWFyY2gga2V5d29yZCBmb3IgbXVsdGktc2VsZWN0aW9uICovXG4gIHB1YmxpYyBmaWx0ZXJlZDogUmVwbGF5U3ViamVjdDxTZWFyY2hGYWNldE1vZGVsW10+ID0gbmV3IFJlcGxheVN1YmplY3Q8U2VhcmNoRmFjZXRNb2RlbFtdPigxKTtcblxuICBwcml2YXRlIHNlbGVjdGVkRmFjZXRzOiBTZWFyY2hGYWNldFNlbGVjdGlvbltdO1xuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcbiAgICBzdXBlci5uZ09uQ2hhbmdlcyhjaGFuZ2VzKTtcbiAgICBpZiAoY2hhbmdlcy5kYXRhICYmIGNoYW5nZXMuZGF0YS5jdXJyZW50VmFsdWUpIHtcbiAgICAgIHRoaXMuc2VsZWN0ZWRGb3JtQ29udHJvbC5zZXRWYWx1ZSh0aGlzLnNlbGVjdGVkKTtcbiAgICAgIHRoaXMuaW5pdCgpO1xuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgaW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLmZpbHRlcmVkLm5leHQodGhpcy5mYWNldEdyb3VwLnNsaWNlKCkpO1xuICAgIHRoaXMuc2VsZWN0ZWRGb3JtQ29udHJvbC5zZXRWYWx1ZSh0aGlzLnNlbGVjdGVkKTtcblxuICAgIHRoaXMuZmlsdGVyZWRGb3JtQ29udHJvbC52YWx1ZUNoYW5nZXNcbiAgICAgICAgLnBpcGUodW50aWxDb21wb25lbnREZXN0cm95ZWQodGhpcykpXG4gICAgICAgIC5zdWJzY3JpYmUoKCkgPT4ge1xuICAgICAgICAgIHRoaXMuZmlsdGVyKCk7XG4gICAgICAgIH0pO1xuICB9XG5cbiAgcHJpdmF0ZSBmaWx0ZXIoKTogdm9pZCB7XG4gICAgaWYgKCFBcnJheS5pc0FycmF5KHRoaXMuZmFjZXRHcm91cCkpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICBsZXQgc2VhcmNoID0gdGhpcy5maWx0ZXJlZEZvcm1Db250cm9sLnZhbHVlO1xuICAgIGlmICghc2VhcmNoKSB7XG4gICAgICB0aGlzLmZpbHRlcmVkLm5leHQodGhpcy5mYWNldEdyb3VwLnNsaWNlKCkpO1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIHNlYXJjaCA9IHNlYXJjaC50b0xvd2VyQ2FzZSgpO1xuXG4gICAgdGhpcy5maWx0ZXJlZC5uZXh0KFxuICAgICAgICB0aGlzLmZhY2V0R3JvdXAuZmlsdGVyKChpdGVtKSA9PiBpdGVtLmxhYmVsLnRvTG93ZXJDYXNlKCkuaW5kZXhPZihzZWFyY2gpID4gLTEpKTtcbiAgfVxuXG4gIHB1YmxpYyBvblNlbGVjdGlvbigkZXZlbnQ6IE1hdFNlbGVjdENoYW5nZSk6IHZvaWQge1xuICAgIGNvbnN0IHNlbGVjdGlvbiA9ICRldmVudC52YWx1ZTtcbiAgICBzZWxlY3Rpb24uZm9yRWFjaCgoaXRlbSkgPT4gaXRlbS5zZWxlY3RlZCA9IHRydWUpO1xuICAgIHRoaXMuZmFjZXRHcm91cC5maWx0ZXIoKGl0ZW0pID0+IHNlbGVjdGlvbi5pbmRleE9mKGl0ZW0pID09PSAtIDEpLm1hcCgoaXRlbSkgPT4gaXRlbS5zZWxlY3RlZCA9IGZhbHNlKTtcbiAgICB0aGlzLnNlbGVjdGVkRmFjZXRzID0gJGV2ZW50LnZhbHVlO1xuICB9XG5cbiAgcHVibGljIG9uT3BlbmVkQ2hhbmdlKGlzT3BlbjogYm9vbGVhbik6IHZvaWQge1xuICAgIGlmICghaXNPcGVuICkge1xuICAgICAgY29uc3Qgc2VsZWN0aW9uID0ge1xuICAgICAgICBuYW1lOiB0aGlzLmZhY2V0R3JvdXBOYW1lLFxuICAgICAgICBzZWxlY3RlZDogdGhpcy5zZWxlY3RlZEZhY2V0cyxcbiAgICAgICAgY291bnQ6IHRoaXMuY291bnRGYWNldFJlc3VsdHMoKVxuICAgICAgfTtcbiAgICAgIHRoaXMub25TZWxlY3Rpb25DaGFuZ2UuZW1pdChzZWxlY3Rpb24pO1xuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgY291bnRGYWNldFJlc3VsdHMoKTogbnVtYmVyIHtcbiAgICBsZXQgc3VtID0gMDtcbiAgICB0aGlzLnNlbGVjdGVkRm9ybUNvbnRyb2wudmFsdWUuZm9yRWFjaCgoZmFjZXQpID0+IHN1bSArPSBmYWNldC5jb3VudCk7XG4gICAgcmV0dXJuIHN1bTtcbiAgfVxufVxuIl19