ontotext-reusable-ui-components/onto-search/esm2015/lib/onto-search-column-selector/onto-search-column-selector.component.js

Unified reusable UI components designed for the Ontotext ecosystem.

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { FormControl } from '@angular/forms';
export class OntoSearchColumnSelector {
    constructor() {
        /**
         * Fired when the dropdown panel is closed.
         * Sends an array {@link SelectionColumn}
         */
        this.selectionChanged = new EventEmitter();
        this.selectCtrl = new FormControl();
        this.selection = [];
        this.isSelectionChanged = false;
    }
    ngOnChanges(changes) {
        var _a, _b, _c;
        const defaultColumns = (_a = changes === null || changes === void 0 ? void 0 : changes.defaultColumns) === null || _a === void 0 ? void 0 : _a.currentValue;
        const selectedColumns = (_b = changes === null || changes === void 0 ? void 0 : changes.selectedColumns) === null || _b === void 0 ? void 0 : _b.currentValue;
        const columnGroups = (_c = changes === null || changes === void 0 ? void 0 : changes.columnGroups) === null || _c === void 0 ? void 0 : _c.currentValue;
        if (defaultColumns && defaultColumns.length > 0 && !this.selectedColumns) {
            this.setFormColumnSelection(defaultColumns);
        }
        if (selectedColumns) {
            this.setFormColumnSelection(selectedColumns);
        }
        if (columnGroups === null || columnGroups === void 0 ? void 0 : columnGroups.length) {
            this.columnGroups.sort(this.compareColumnsByLabel);
        }
    }
    selectionChangedInternal($event) {
        this.isSelectionChanged = true;
        this.selection = $event.value;
    }
    onClosed() {
        if (this.isSelectionChanged) {
            this.isSelectionChanged = false;
            this.selectionChanged.next(this.selection);
        }
    }
    compareColumnsLabels(columnA, columnB) {
        return columnA.label === columnB.label;
    }
    resetColumns() {
        this.setFormColumnSelection(this.defaultColumns);
        this.onClosed();
    }
    setFormColumnSelection(columns) {
        this.selectCtrl.setValue([...columns]);
        this.selectCtrl.updateValueAndValidity();
        this.selection = columns;
        this.isSelectionChanged = true;
    }
    compareColumnsByLabel(columnA, columnB) {
        if (columnA.label > columnB.label) {
            return 1;
        }
        else if (columnB.label > columnA.label) {
            return -1;
        }
        return 0;
    }
}
OntoSearchColumnSelector.decorators = [
    { type: Component, args: [{
                selector: 'onto-search-column-selector',
                template: "<div class=\"onto-column-selector-component\" appCypressData=\"onto-column-selector-component\">\n  <button class=\"column-reset-button\" mat-raised-button appCypressData=\"column-reset-button\"\n          color=\"primary\"\n          (click)=\"resetColumns()\">{{'ONTO_COLUMN_SELECTOR.BUTTON.RESET' | transloco}}</button>\n  <div class=\"column-select\">\n    <mat-form-field class=\"form-field\">\n      <mat-label>{{'ONTO_COLUMN_SELECTOR.COLUMN_SELECTOR_PLACEHOLDER' | transloco}}</mat-label>\n      <mat-select multiple (selectionChange)=\"selectionChangedInternal($event)\"\n                  [formControl]=\"selectCtrl\" [compareWith]=\"compareColumnsLabels\"\n                  (closed)=\"onClosed()\" appCypressData=\"column-selection-dropdown\">\n        <mat-optgroup *ngFor=\"let columnGroup of columnGroups, let index = index\"\n                      [label]=\"columnGroup.label\" [attr.appCypressData]=\"'column-group-' + index\">\n          <mat-option *ngFor=\"let column of columnGroup.columns, let index = index\" [value]=\"column\"\n                      [attr.appCypressData]=\"'column-option-' + index\">\n            {{column.label}}\n          </mat-option>\n        </mat-optgroup>\n      </mat-select>\n    </mat-form-field>\n  </div>\n</div>\n",
                styles: [".onto-column-selector-component{align-items:center;box-sizing:border-box;display:flex;flex-direction:row;height:100%;place-content:center flex-start;width:100%}.onto-column-selector-component .column-select{box-sizing:border-box;flex:1 1}.onto-column-selector-component .form-field{display:inherit}.onto-column-selector-component .column-reset-button{margin-right:1em}"]
            },] }
];
OntoSearchColumnSelector.propDecorators = {
    columnGroups: [{ type: Input }],
    selectedColumns: [{ type: Input }],
    defaultColumns: [{ type: Input }],
    selectionChanged: [{ type: Output }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib250by1zZWFyY2gtY29sdW1uLXNlbGVjdG9yLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIvb3B0L2plbmtpbnNfam9icy93b3Jrc3BhY2UvcmV1c2FibGUtdWktY29tcG9uZW50cy1yZWxlYXNlL3Byb2plY3RzL29udG8tc2VhcmNoL3NyYy8iLCJzb3VyY2VzIjpbImxpYi9vbnRvLXNlYXJjaC1jb2x1bW4tc2VsZWN0b3Ivb250by1zZWFyY2gtY29sdW1uLXNlbGVjdG9yLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQWEsTUFBTSxFQUFnQixNQUFNLGVBQWUsQ0FBQztBQUUvRixPQUFPLEVBQUMsV0FBVyxFQUFDLE1BQU0sZ0JBQWdCLENBQUM7QUFTM0MsTUFBTSxPQUFPLHdCQUF3QjtJQUxyQztRQXlCRTs7O1dBR0c7UUFFSCxxQkFBZ0IsR0FBb0MsSUFBSSxZQUFZLEVBQXFCLENBQUM7UUFFMUYsZUFBVSxHQUFHLElBQUksV0FBVyxFQUFFLENBQUM7UUFDdkIsY0FBUyxHQUFzQixFQUFFLENBQUM7UUFDbEMsdUJBQWtCLEdBQUcsS0FBSyxDQUFDO0lBc0RyQyxDQUFDO0lBcERDLFdBQVcsQ0FBQyxPQUFzQjs7UUFDaEMsTUFBTSxjQUFjLFNBQUcsT0FBTyxhQUFQLE9BQU8sdUJBQVAsT0FBTyxDQUFFLGNBQWMsMENBQUUsWUFBWSxDQUFDO1FBQzdELE1BQU0sZUFBZSxTQUFHLE9BQU8sYUFBUCxPQUFPLHVCQUFQLE9BQU8sQ0FBRSxlQUFlLDBDQUFFLFlBQVksQ0FBQztRQUMvRCxNQUFNLFlBQVksU0FBRyxPQUFPLGFBQVAsT0FBTyx1QkFBUCxPQUFPLENBQUUsWUFBWSwwQ0FBRSxZQUFZLENBQUM7UUFFekQsSUFBSSxjQUFjLElBQUksY0FBYyxDQUFDLE1BQU0sR0FBRyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsZUFBZSxFQUFFO1lBQ3hFLElBQUksQ0FBQyxzQkFBc0IsQ0FBQyxjQUFjLENBQUMsQ0FBQztTQUM3QztRQUNELElBQUksZUFBZSxFQUFFO1lBQ25CLElBQUksQ0FBQyxzQkFBc0IsQ0FBQyxlQUFlLENBQUMsQ0FBQztTQUM5QztRQUNELElBQUksWUFBWSxhQUFaLFlBQVksdUJBQVosWUFBWSxDQUFFLE1BQU0sRUFBRTtZQUN4QixJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMscUJBQXFCLENBQUMsQ0FBQztTQUNwRDtJQUNILENBQUM7SUFFRCx3QkFBd0IsQ0FBQyxNQUF1QjtRQUM5QyxJQUFJLENBQUMsa0JBQWtCLEdBQUcsSUFBSSxDQUFDO1FBQy9CLElBQUksQ0FBQyxTQUFTLEdBQUcsTUFBTSxDQUFDLEtBQUssQ0FBQztJQUNoQyxDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUksSUFBSSxDQUFDLGtCQUFrQixFQUFFO1lBQzNCLElBQUksQ0FBQyxrQkFBa0IsR0FBRyxLQUFLLENBQUM7WUFDaEMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7U0FDNUM7SUFDSCxDQUFDO0lBRUQsb0JBQW9CLENBQUMsT0FBd0IsRUFBRSxPQUF3QjtRQUNyRSxPQUFPLE9BQU8sQ0FBQyxLQUFLLEtBQUssT0FBTyxDQUFDLEtBQUssQ0FBQztJQUN6QyxDQUFDO0lBRUQsWUFBWTtRQUNWLElBQUksQ0FBQyxzQkFBc0IsQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLENBQUM7UUFDakQsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDO0lBQ2xCLENBQUM7SUFFTyxzQkFBc0IsQ0FBQyxPQUEwQjtRQUN2RCxJQUFJLENBQUMsVUFBVSxDQUFDLFFBQVEsQ0FBQyxDQUFDLEdBQUcsT0FBTyxDQUFDLENBQUMsQ0FBQztRQUN2QyxJQUFJLENBQUMsVUFBVSxDQUFDLHNCQUFzQixFQUFFLENBQUM7UUFDekMsSUFBSSxDQUFDLFNBQVMsR0FBRyxPQUFPLENBQUM7UUFDekIsSUFBSSxDQUFDLGtCQUFrQixHQUFHLElBQUksQ0FBQztJQUNqQyxDQUFDO0lBRU8scUJBQXFCLENBQUMsT0FBd0IsRUFBRSxPQUF3QjtRQUM5RSxJQUFJLE9BQU8sQ0FBQyxLQUFLLEdBQUcsT0FBTyxDQUFDLEtBQUssRUFBRTtZQUNqQyxPQUFPLENBQUMsQ0FBQztTQUNWO2FBQU0sSUFBSSxPQUFPLENBQUMsS0FBSyxHQUFHLE9BQU8sQ0FBQyxLQUFLLEVBQUU7WUFDeEMsT0FBTyxDQUFDLENBQUMsQ0FBQztTQUNYO1FBQ0QsT0FBTyxDQUFDLENBQUM7SUFDWCxDQUFDOzs7WUF2RkYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSw2QkFBNkI7Z0JBQ3ZDLGd3Q0FBMkQ7O2FBRTVEOzs7MkJBS0UsS0FBSzs4QkFNTCxLQUFLOzZCQU9MLEtBQUs7K0JBT0wsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkNoYW5nZXMsIE91dHB1dCwgU2ltcGxlQ2hhbmdlc30gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge01hdFNlbGVjdENoYW5nZX0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvc2VsZWN0JztcbmltcG9ydCB7Rm9ybUNvbnRyb2x9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7U2VsZWN0aW9uQ29sdW1ufSBmcm9tICcuL21vZGVscy9zZWxlY3Rpb24tY29sdW1uJztcbmltcG9ydCB7U2VsZWN0aW9uQ29sdW1uR3JvdXB9IGZyb20gJy4vbW9kZWxzL3NlbGVjdGlvbi1jb2x1bW4tZ3JvdXAnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdvbnRvLXNlYXJjaC1jb2x1bW4tc2VsZWN0b3InLFxuICB0ZW1wbGF0ZVVybDogJy4vb250by1zZWFyY2gtY29sdW1uLXNlbGVjdG9yLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vb250by1zZWFyY2gtY29sdW1uLXNlbGVjdG9yLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgT250b1NlYXJjaENvbHVtblNlbGVjdG9yIGltcGxlbWVudHMgT25DaGFuZ2VzIHtcbiAgLyoqXG4gICAqIFRoZSBncm91cHMgb2YgY29sdW1ucyBpbmZvcm1hdGlvbiBmb3IgdGhlIGRyb3Bkb3duIHNlbGVjdFxuICAgKi9cbiAgQElucHV0KClcbiAgY29sdW1uR3JvdXBzOiBTZWxlY3Rpb25Db2x1bW5Hcm91cFtdO1xuXG4gIC8qKlxuICAgKiBTZXRzIHNlbGVjdGVkIGNvbHVtbnMgaW4gZHJvcGRvd24gc2VsZWN0XG4gICAqL1xuICBASW5wdXQoKVxuICBzZWxlY3RlZENvbHVtbnM6IFNlbGVjdGlvbkNvbHVtbltdO1xuXG4gIC8qKlxuICAgKiBTZXRzIGRlZmF1bHQgY29sdW1ucy4gU2hvd24gd2hlbiBubyBzZWxlY3RlZENvbHVtbnMgYXJlIHBhc3NlZCBhbmQgd2hlblxuICAgKiByZXNldCBidXR0b24gaXMgcHJlc3NlZFxuICAgKi9cbiAgQElucHV0KClcbiAgZGVmYXVsdENvbHVtbnM6IFNlbGVjdGlvbkNvbHVtbltdO1xuXG4gIC8qKlxuICAgKiBGaXJlZCB3aGVuIHRoZSBkcm9wZG93biBwYW5lbCBpcyBjbG9zZWQuXG4gICAqIFNlbmRzIGFuIGFycmF5IHtAbGluayBTZWxlY3Rpb25Db2x1bW59XG4gICAqL1xuICBAT3V0cHV0KClcbiAgc2VsZWN0aW9uQ2hhbmdlZDogRXZlbnRFbWl0dGVyPFNlbGVjdGlvbkNvbHVtbltdPiA9IG5ldyBFdmVudEVtaXR0ZXI8U2VsZWN0aW9uQ29sdW1uW10+KCk7XG5cbiAgc2VsZWN0Q3RybCA9IG5ldyBGb3JtQ29udHJvbCgpO1xuICBwcml2YXRlIHNlbGVjdGlvbjogU2VsZWN0aW9uQ29sdW1uW10gPSBbXTtcbiAgcHJpdmF0ZSBpc1NlbGVjdGlvbkNoYW5nZWQgPSBmYWxzZTtcblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgY29uc3QgZGVmYXVsdENvbHVtbnMgPSBjaGFuZ2VzPy5kZWZhdWx0Q29sdW1ucz8uY3VycmVudFZhbHVlO1xuICAgIGNvbnN0IHNlbGVjdGVkQ29sdW1ucyA9IGNoYW5nZXM/LnNlbGVjdGVkQ29sdW1ucz8uY3VycmVudFZhbHVlO1xuICAgIGNvbnN0IGNvbHVtbkdyb3VwcyA9IGNoYW5nZXM/LmNvbHVtbkdyb3Vwcz8uY3VycmVudFZhbHVlO1xuXG4gICAgaWYgKGRlZmF1bHRDb2x1bW5zICYmIGRlZmF1bHRDb2x1bW5zLmxlbmd0aCA+IDAgJiYgIXRoaXMuc2VsZWN0ZWRDb2x1bW5zKSB7XG4gICAgICB0aGlzLnNldEZvcm1Db2x1bW5TZWxlY3Rpb24oZGVmYXVsdENvbHVtbnMpO1xuICAgIH1cbiAgICBpZiAoc2VsZWN0ZWRDb2x1bW5zKSB7XG4gICAgICB0aGlzLnNldEZvcm1Db2x1bW5TZWxlY3Rpb24oc2VsZWN0ZWRDb2x1bW5zKTtcbiAgICB9XG4gICAgaWYgKGNvbHVtbkdyb3Vwcz8ubGVuZ3RoKSB7XG4gICAgICB0aGlzLmNvbHVtbkdyb3Vwcy5zb3J0KHRoaXMuY29tcGFyZUNvbHVtbnNCeUxhYmVsKTtcbiAgICB9XG4gIH1cblxuICBzZWxlY3Rpb25DaGFuZ2VkSW50ZXJuYWwoJGV2ZW50OiBNYXRTZWxlY3RDaGFuZ2UpOiB2b2lkIHtcbiAgICB0aGlzLmlzU2VsZWN0aW9uQ2hhbmdlZCA9IHRydWU7XG4gICAgdGhpcy5zZWxlY3Rpb24gPSAkZXZlbnQudmFsdWU7XG4gIH1cblxuICBvbkNsb3NlZCgpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5pc1NlbGVjdGlvbkNoYW5nZWQpIHtcbiAgICAgIHRoaXMuaXNTZWxlY3Rpb25DaGFuZ2VkID0gZmFsc2U7XG4gICAgICB0aGlzLnNlbGVjdGlvbkNoYW5nZWQubmV4dCh0aGlzLnNlbGVjdGlvbik7XG4gICAgfVxuICB9XG5cbiAgY29tcGFyZUNvbHVtbnNMYWJlbHMoY29sdW1uQTogU2VsZWN0aW9uQ29sdW1uLCBjb2x1bW5COiBTZWxlY3Rpb25Db2x1bW4pOiBib29sZWFuIHtcbiAgICByZXR1cm4gY29sdW1uQS5sYWJlbCA9PT0gY29sdW1uQi5sYWJlbDtcbiAgfVxuXG4gIHJlc2V0Q29sdW1ucygpOiB2b2lkIHtcbiAgICB0aGlzLnNldEZvcm1Db2x1bW5TZWxlY3Rpb24odGhpcy5kZWZhdWx0Q29sdW1ucyk7XG4gICAgdGhpcy5vbkNsb3NlZCgpO1xuICB9XG5cbiAgcHJpdmF0ZSBzZXRGb3JtQ29sdW1uU2VsZWN0aW9uKGNvbHVtbnM6IFNlbGVjdGlvbkNvbHVtbltdKTogdm9pZCB7XG4gICAgdGhpcy5zZWxlY3RDdHJsLnNldFZhbHVlKFsuLi5jb2x1bW5zXSk7XG4gICAgdGhpcy5zZWxlY3RDdHJsLnVwZGF0ZVZhbHVlQW5kVmFsaWRpdHkoKTtcbiAgICB0aGlzLnNlbGVjdGlvbiA9IGNvbHVtbnM7XG4gICAgdGhpcy5pc1NlbGVjdGlvbkNoYW5nZWQgPSB0cnVlO1xuICB9XG5cbiAgcHJpdmF0ZSBjb21wYXJlQ29sdW1uc0J5TGFiZWwoY29sdW1uQTogU2VsZWN0aW9uQ29sdW1uLCBjb2x1bW5COiBTZWxlY3Rpb25Db2x1bW4pOiBudW1iZXIge1xuICAgIGlmIChjb2x1bW5BLmxhYmVsID4gY29sdW1uQi5sYWJlbCkge1xuICAgICAgcmV0dXJuIDE7XG4gICAgfSBlbHNlIGlmIChjb2x1bW5CLmxhYmVsID4gY29sdW1uQS5sYWJlbCkge1xuICAgICAgcmV0dXJuIC0xO1xuICAgIH1cbiAgICByZXR1cm4gMDtcbiAgfVxufVxuIl19