systelab-components/esm2022/lib/twolist/two-list-sortable-list.component.mjs

systelab-components is a set of components that use wide accepted and adopted standard technologies like Angular and Bootstrap, as well as other popular libraries. Please read the ATTRIBUTION.md file for a complete list of dependencies.

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { AbstractSortableListComponent } from '../sortable-list/abstract-sortable-list.component';
import { DataFilterPipe } from './datafilter.pipe';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/cdk/drag-drop";
import * as i3 from "./datafilter.pipe";
export class TwoListSortableListComponent extends AbstractSortableListComponent {
    constructor() {
        super();
        this.dbClick = new EventEmitter();
    }
    getDescriptionField() {
        return 'displayName';
    }
    getSelectionField() {
        return 'isSelected';
    }
    getIcon(item) {
        return '';
    }
    selectElement(element, ev) {
        const visibleFilteredList = new DataFilterPipe().transform(this.elementsList, this.secondListSearch);
        this.currentSelectionStatus.selectVisible(element, visibleFilteredList, ev.shiftKey, ev.ctrlKey);
    }
    dbClickSelectedItem(element) {
        this.dbClick.emit(element);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: TwoListSortableListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: TwoListSortableListComponent, selector: "systelab-two-list-sortable-list", inputs: { currentSelectionStatus: "currentSelectionStatus", secondListSearch: "secondListSearch" }, outputs: { dbClick: "dbClick" }, usesInheritance: true, ngImport: i0, template: "<div class=\"slab-sortable-list text-nowrap\"\n     (onDragEnter)=\"handleDragEnter($event)\"\n     (onDragOver)=\"handleDragOver($event)\"\n     (onDragLeave)=\"handleDragLeave($event)\">\n    <div class=\"slab-sortable-list-row list-group w-100\" cdkDropList (cdkDropListDropped)=\"dropped($event)\">\n        <div *ngFor=\"let element of (elementsList| datafilter:secondListSearch); let i=index;\" [id]=\"'element'+i\"\n            (keydown)=\"removeElement(element, $event)\"\n            tabindex=\"-1\"\n            [ngClass]=\"{'slab-sortable-list-row slab-sortable-list-row-selected':getSelectionFieldValue(element),'slab-sortable-list-row':!getSelectionFieldValue(element)}\"\n             [class.slab-sortable-list-even-row]=\"0 === i % 2\"\n             [class.slab-sortable-list-odd-row]=\"1 === i % 2\"\n            (click)=\"selectElement(element,$event)\" (dblclick)=\"dbClickSelectedItem(element)\" cdkDrag [cdkDragDisabled]=\"!dragAndDropEnabled\">\n            <i *ngIf=\"showIcon\" class=\"mr-1 text-primary\" [ngClass]=\"getIcon(element)\"></i>{{getDescription(element)}}\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: i3.DataFilterPipe, name: "datafilter" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: TwoListSortableListComponent, decorators: [{
            type: Component,
            args: [{ selector: 'systelab-two-list-sortable-list', template: "<div class=\"slab-sortable-list text-nowrap\"\n     (onDragEnter)=\"handleDragEnter($event)\"\n     (onDragOver)=\"handleDragOver($event)\"\n     (onDragLeave)=\"handleDragLeave($event)\">\n    <div class=\"slab-sortable-list-row list-group w-100\" cdkDropList (cdkDropListDropped)=\"dropped($event)\">\n        <div *ngFor=\"let element of (elementsList| datafilter:secondListSearch); let i=index;\" [id]=\"'element'+i\"\n            (keydown)=\"removeElement(element, $event)\"\n            tabindex=\"-1\"\n            [ngClass]=\"{'slab-sortable-list-row slab-sortable-list-row-selected':getSelectionFieldValue(element),'slab-sortable-list-row':!getSelectionFieldValue(element)}\"\n             [class.slab-sortable-list-even-row]=\"0 === i % 2\"\n             [class.slab-sortable-list-odd-row]=\"1 === i % 2\"\n            (click)=\"selectElement(element,$event)\" (dblclick)=\"dbClickSelectedItem(element)\" cdkDrag [cdkDragDisabled]=\"!dragAndDropEnabled\">\n            <i *ngIf=\"showIcon\" class=\"mr-1 text-primary\" [ngClass]=\"getIcon(element)\"></i>{{getDescription(element)}}\n        </div>\n    </div>\n</div>\n" }]
        }], ctorParameters: () => [], propDecorators: { currentSelectionStatus: [{
                type: Input
            }], secondListSearch: [{
                type: Input
            }], dbClick: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHdvLWxpc3Qtc29ydGFibGUtbGlzdC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zeXN0ZWxhYi1jb21wb25lbnRzL3NyYy9saWIvdHdvbGlzdC90d28tbGlzdC1zb3J0YWJsZS1saXN0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3N5c3RlbGFiLWNvbXBvbmVudHMvc3JjL2xpYi9zb3J0YWJsZS1saXN0L2Fic3RyYWN0LXNvcnRhYmxlLWxpc3QuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUV2RSxPQUFPLEVBQUUsNkJBQTZCLEVBQUUsTUFBTSxtREFBbUQsQ0FBQztBQUNsRyxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sbUJBQW1CLENBQUM7Ozs7O0FBTW5ELE1BQU0sT0FBTyw0QkFBNkIsU0FBUSw2QkFBMEM7SUFPM0Y7UUFDQyxLQUFLLEVBQUUsQ0FBQztRQUhRLFlBQU8sR0FBOEIsSUFBSSxZQUFZLEVBQUUsQ0FBQztJQUl6RSxDQUFDO0lBRU0sbUJBQW1CO1FBQ3pCLE9BQU8sYUFBYSxDQUFDO0lBQ3RCLENBQUM7SUFFTSxpQkFBaUI7UUFDdkIsT0FBTyxZQUFZLENBQUM7SUFDckIsQ0FBQztJQUVNLE9BQU8sQ0FBQyxJQUFpQjtRQUMvQixPQUFPLEVBQUUsQ0FBQztJQUNYLENBQUM7SUFFZSxhQUFhLENBQUMsT0FBb0IsRUFBRSxFQUFpQjtRQUNwRSxNQUFNLG1CQUFtQixHQUFHLElBQUksY0FBYyxFQUFFLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxZQUFZLEVBQUUsSUFBSSxDQUFDLGdCQUFnQixDQUFDLENBQUM7UUFDckcsSUFBSSxDQUFDLHNCQUFzQixDQUFDLGFBQWEsQ0FBQyxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsRUFBRSxDQUFDLFFBQVEsRUFBRSxFQUFFLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDbEcsQ0FBQztJQUVlLG1CQUFtQixDQUFDLE9BQW9CO1FBQ3ZELElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBQzVCLENBQUM7OEdBOUJXLDRCQUE0QjtrR0FBNUIsNEJBQTRCLG1PQ1R6QywybUNBZ0JBOzsyRkRQYSw0QkFBNEI7a0JBSnhDLFNBQVM7K0JBQ0ksaUNBQWlDO3dEQUs5QixzQkFBc0I7c0JBQXJDLEtBQUs7Z0JBQ21CLGdCQUFnQjtzQkFBeEMsS0FBSztnQkFFVyxPQUFPO3NCQUF2QixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEN1cnJlbnRTZWxlY3Rpb25TdGF0dXMsIFR3b0xpc3RJdGVtIH0gZnJvbSAnLi90d28tbGlzdC11dGlsaXRpZXMnO1xuaW1wb3J0IHsgQWJzdHJhY3RTb3J0YWJsZUxpc3RDb21wb25lbnQgfSBmcm9tICcuLi9zb3J0YWJsZS1saXN0L2Fic3RyYWN0LXNvcnRhYmxlLWxpc3QuY29tcG9uZW50JztcbmltcG9ydCB7IERhdGFGaWx0ZXJQaXBlIH0gZnJvbSAnLi9kYXRhZmlsdGVyLnBpcGUnO1xuXG5AQ29tcG9uZW50KHtcblx0c2VsZWN0b3I6ICAgICdzeXN0ZWxhYi10d28tbGlzdC1zb3J0YWJsZS1saXN0Jyxcblx0dGVtcGxhdGVVcmw6ICcuLi9zb3J0YWJsZS1saXN0L2Fic3RyYWN0LXNvcnRhYmxlLWxpc3QuY29tcG9uZW50Lmh0bWwnXG59KVxuZXhwb3J0IGNsYXNzIFR3b0xpc3RTb3J0YWJsZUxpc3RDb21wb25lbnQgZXh0ZW5kcyBBYnN0cmFjdFNvcnRhYmxlTGlzdENvbXBvbmVudDxUd29MaXN0SXRlbT4ge1xuXG5cdEBJbnB1dCgpIHB1YmxpYyBjdXJyZW50U2VsZWN0aW9uU3RhdHVzOiBDdXJyZW50U2VsZWN0aW9uU3RhdHVzO1xuXHRASW5wdXQoKSBwdWJsaWMgb3ZlcnJpZGUgc2Vjb25kTGlzdFNlYXJjaDogc3RyaW5nO1xuXG5cdEBPdXRwdXQoKSBwdWJsaWMgZGJDbGljazogRXZlbnRFbWl0dGVyPFR3b0xpc3RJdGVtPiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuXHRjb25zdHJ1Y3RvcigpIHtcblx0XHRzdXBlcigpO1xuXHR9XG5cblx0cHVibGljIGdldERlc2NyaXB0aW9uRmllbGQoKTogc3RyaW5nIHtcblx0XHRyZXR1cm4gJ2Rpc3BsYXlOYW1lJztcblx0fVxuXG5cdHB1YmxpYyBnZXRTZWxlY3Rpb25GaWVsZCgpOiBzdHJpbmcge1xuXHRcdHJldHVybiAnaXNTZWxlY3RlZCc7XG5cdH1cblxuXHRwdWJsaWMgZ2V0SWNvbihpdGVtOiBUd29MaXN0SXRlbSk6IHN0cmluZyB7XG5cdFx0cmV0dXJuICcnO1xuXHR9XG5cblx0cHVibGljIG92ZXJyaWRlIHNlbGVjdEVsZW1lbnQoZWxlbWVudDogVHdvTGlzdEl0ZW0sIGV2OiBLZXlib2FyZEV2ZW50KSB7XG5cdFx0Y29uc3QgdmlzaWJsZUZpbHRlcmVkTGlzdCA9IG5ldyBEYXRhRmlsdGVyUGlwZSgpLnRyYW5zZm9ybSh0aGlzLmVsZW1lbnRzTGlzdCwgdGhpcy5zZWNvbmRMaXN0U2VhcmNoKTtcblx0XHR0aGlzLmN1cnJlbnRTZWxlY3Rpb25TdGF0dXMuc2VsZWN0VmlzaWJsZShlbGVtZW50LCB2aXNpYmxlRmlsdGVyZWRMaXN0LCBldi5zaGlmdEtleSwgZXYuY3RybEtleSk7XG5cdH1cblxuXHRwdWJsaWMgb3ZlcnJpZGUgZGJDbGlja1NlbGVjdGVkSXRlbShlbGVtZW50OiBUd29MaXN0SXRlbSkge1xuXHRcdHRoaXMuZGJDbGljay5lbWl0KGVsZW1lbnQpO1xuXHR9XG59XG4iLCI8ZGl2IGNsYXNzPVwic2xhYi1zb3J0YWJsZS1saXN0IHRleHQtbm93cmFwXCJcbiAgICAgKG9uRHJhZ0VudGVyKT1cImhhbmRsZURyYWdFbnRlcigkZXZlbnQpXCJcbiAgICAgKG9uRHJhZ092ZXIpPVwiaGFuZGxlRHJhZ092ZXIoJGV2ZW50KVwiXG4gICAgIChvbkRyYWdMZWF2ZSk9XCJoYW5kbGVEcmFnTGVhdmUoJGV2ZW50KVwiPlxuICAgIDxkaXYgY2xhc3M9XCJzbGFiLXNvcnRhYmxlLWxpc3Qtcm93IGxpc3QtZ3JvdXAgdy0xMDBcIiBjZGtEcm9wTGlzdCAoY2RrRHJvcExpc3REcm9wcGVkKT1cImRyb3BwZWQoJGV2ZW50KVwiPlxuICAgICAgICA8ZGl2ICpuZ0Zvcj1cImxldCBlbGVtZW50IG9mIChlbGVtZW50c0xpc3R8IGRhdGFmaWx0ZXI6c2Vjb25kTGlzdFNlYXJjaCk7IGxldCBpPWluZGV4O1wiIFtpZF09XCInZWxlbWVudCcraVwiXG4gICAgICAgICAgICAoa2V5ZG93bik9XCJyZW1vdmVFbGVtZW50KGVsZW1lbnQsICRldmVudClcIlxuICAgICAgICAgICAgdGFiaW5kZXg9XCItMVwiXG4gICAgICAgICAgICBbbmdDbGFzc109XCJ7J3NsYWItc29ydGFibGUtbGlzdC1yb3cgc2xhYi1zb3J0YWJsZS1saXN0LXJvdy1zZWxlY3RlZCc6Z2V0U2VsZWN0aW9uRmllbGRWYWx1ZShlbGVtZW50KSwnc2xhYi1zb3J0YWJsZS1saXN0LXJvdyc6IWdldFNlbGVjdGlvbkZpZWxkVmFsdWUoZWxlbWVudCl9XCJcbiAgICAgICAgICAgICBbY2xhc3Muc2xhYi1zb3J0YWJsZS1saXN0LWV2ZW4tcm93XT1cIjAgPT09IGkgJSAyXCJcbiAgICAgICAgICAgICBbY2xhc3Muc2xhYi1zb3J0YWJsZS1saXN0LW9kZC1yb3ddPVwiMSA9PT0gaSAlIDJcIlxuICAgICAgICAgICAgKGNsaWNrKT1cInNlbGVjdEVsZW1lbnQoZWxlbWVudCwkZXZlbnQpXCIgKGRibGNsaWNrKT1cImRiQ2xpY2tTZWxlY3RlZEl0ZW0oZWxlbWVudClcIiBjZGtEcmFnIFtjZGtEcmFnRGlzYWJsZWRdPVwiIWRyYWdBbmREcm9wRW5hYmxlZFwiPlxuICAgICAgICAgICAgPGkgKm5nSWY9XCJzaG93SWNvblwiIGNsYXNzPVwibXItMSB0ZXh0LXByaW1hcnlcIiBbbmdDbGFzc109XCJnZXRJY29uKGVsZW1lbnQpXCI+PC9pPnt7Z2V0RGVzY3JpcHRpb24oZWxlbWVudCl9fVxuICAgICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbjwvZGl2PlxuIl19