ngx-surveys/esm2022/lib/form-item/form-item-radio/selection-list/selection-list.component.mjs

Angular 18+ survey / form builder

import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/material/list";
export class SelectionListComponent {
    constructor() {
        this.editable = true;
        this.options = [];
        this.selectionChange = new EventEmitter();
        this.init = true;
    }
    ngOnInit() {
    }
    isOptionSelected(option) {
        return this.multiple ? (this.value || []).indexOf(option.optionValue) >= 0 : this.value === option.optionValue;
    }
    onSelectionChange(event) {
        //console.log(event, this.selectedOptions);
        this.value = this.multiple ? this.selectedOptions.selectedOptions.selected.map(op => op.value) : event.options[0].value;
        this.selectionChange.emit(this.value);
    }
    ngOnChanges(changes) {
        if (changes.multiple && changes.multiple.previousValue !== changes.multiple.currentValue) {
            this.init = false;
            //console.log(changes);
            setTimeout(() => { this.init = true; }, 10);
        }
    }
    onOptionClick(event, option) {
        /*
        console.log(event, option);
        if (!this.required){
            if (this.multiple && this.value.indexOf(option.optionValue)>=0 && Array.isArray(this.value)){
              this.value=this.value.filter(str=>str!==option.optionValue);
              this.selectionChange.emit(this.value);
            }
            else if (this.value===option.optionValue) {
              this.value='';
              this.selectionChange.emit(this.value);
            }
        }
        */
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: SelectionListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: SelectionListComponent, selector: "app-selection-list", inputs: { label: "label", editable: "editable", required: "required", multiple: "multiple", options: "options", value: "value" }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "selectedOptions", first: true, predicate: ["selectedOptions"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-selection-list #selectedOptions *ngIf=\"init\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    [disabled]=\"!editable\"\n\n    [multiple]=\"multiple\"\n>\n    <!--\n        [selected]=\"isOptionSelected(option)\"\n    -->\n    <mat-list-option *ngFor=\"let option of options\"\n        [value]=\"option.optionValue\"\n        [selected]=\"isOptionSelected(option)\"\n        (click)=\"onOptionClick($event, option)\"\n    >\n        <span>{{option.label}}</span>\n        <!--\n        <mat-pseudo-checkbox *ngIf=\"!multiple && isOptionSelected(option)\" class=\"mat-pseudo-checkbox mat-pseudo-checkbox-checked\"></mat-pseudo-checkbox>\n        -->\n    </mat-list-option>\n</mat-selection-list>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i2.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: SelectionListComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-selection-list', template: "<mat-selection-list #selectedOptions *ngIf=\"init\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    [disabled]=\"!editable\"\n\n    [multiple]=\"multiple\"\n>\n    <!--\n        [selected]=\"isOptionSelected(option)\"\n    -->\n    <mat-list-option *ngFor=\"let option of options\"\n        [value]=\"option.optionValue\"\n        [selected]=\"isOptionSelected(option)\"\n        (click)=\"onOptionClick($event, option)\"\n    >\n        <span>{{option.label}}</span>\n        <!--\n        <mat-pseudo-checkbox *ngIf=\"!multiple && isOptionSelected(option)\" class=\"mat-pseudo-checkbox mat-pseudo-checkbox-checked\"></mat-pseudo-checkbox>\n        -->\n    </mat-list-option>\n</mat-selection-list>\n" }]
        }], ctorParameters: () => [], propDecorators: { label: [{
                type: Input
            }], editable: [{
                type: Input
            }], required: [{
                type: Input
            }], multiple: [{
                type: Input
            }], options: [{
                type: Input
            }], selectionChange: [{
                type: Output
            }], value: [{
                type: Input
            }], selectedOptions: [{
                type: ViewChild,
                args: ['selectedOptions', { static: false }]
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0aW9uLWxpc3QuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXN1cnZleXMvc3JjL2xpYi9mb3JtLWl0ZW0vZm9ybS1pdGVtLXJhZGlvL3NlbGVjdGlvbi1saXN0L3NlbGVjdGlvbi1saXN0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zdXJ2ZXlzL3NyYy9saWIvZm9ybS1pdGVtL2Zvcm0taXRlbS1yYWRpby9zZWxlY3Rpb24tbGlzdC9zZWxlY3Rpb24tbGlzdC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBNEIsTUFBTSxlQUFlLENBQUM7Ozs7QUFTcEgsTUFBTSxPQUFPLHNCQUFzQjtJQWVqQztRQVpTLGFBQVEsR0FBVSxJQUFJLENBQUM7UUFHdkIsWUFBTyxHQUF1QixFQUFFLENBQUM7UUFDaEMsb0JBQWUsR0FBRyxJQUFJLFlBQVksRUFBcUIsQ0FBQztRQU0zRCxTQUFJLEdBQVMsSUFBSSxDQUFDO0lBRVQsQ0FBQztJQUVqQixRQUFRO0lBQ1IsQ0FBQztJQUVELGdCQUFnQixDQUFDLE1BQXlCO1FBQ3hDLE9BQU8sSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsS0FBSyxJQUFJLEVBQUUsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxNQUFNLENBQUMsV0FBVyxDQUFDLElBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsS0FBSyxLQUFHLE1BQU0sQ0FBQyxXQUFXLENBQUM7SUFDOUcsQ0FBQztJQUVELGlCQUFpQixDQUFDLEtBQTZCO1FBQzdDLDJDQUEyQztRQUMzQyxJQUFJLENBQUMsS0FBSyxHQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxlQUFlLENBQUMsZUFBZSxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFBLEVBQUUsQ0FBQSxFQUFFLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDO1FBQ3BILElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN4QyxDQUFDO0lBRUQsV0FBVyxDQUFDLE9BQXFCO1FBQy9CLElBQUksT0FBTyxDQUFDLFFBQVEsSUFBSSxPQUFPLENBQUMsUUFBUSxDQUFDLGFBQWEsS0FBRyxPQUFPLENBQUMsUUFBUSxDQUFDLFlBQVksRUFBQyxDQUFDO1lBQ3RGLElBQUksQ0FBQyxJQUFJLEdBQUMsS0FBSyxDQUFDO1lBQ2hCLHVCQUF1QjtZQUN2QixVQUFVLENBQUMsR0FBRSxFQUFFLEdBQUMsSUFBSSxDQUFDLElBQUksR0FBQyxJQUFJLENBQUMsQ0FBQSxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUM7UUFDeEMsQ0FBQztJQUNILENBQUM7SUFFRCxhQUFhLENBQUMsS0FBSyxFQUFFLE1BQXlCO1FBQzVDOzs7Ozs7Ozs7Ozs7VUFZRTtJQUNKLENBQUM7K0dBcERVLHNCQUFzQjttR0FBdEIsc0JBQXNCLHNYQ1RuQywwc0JBb0JBOzs0RkRYYSxzQkFBc0I7a0JBTGxDLFNBQVM7K0JBQ0Usb0JBQW9CO3dEQU1yQixLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNJLGVBQWU7c0JBQXhCLE1BQU07Z0JBRUUsS0FBSztzQkFBYixLQUFLO2dCQUVrRCxlQUFlO3NCQUF0RSxTQUFTO3VCQUFDLGlCQUFpQixFQUFFLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQsIFZpZXdDaGlsZCwgT25DaGFuZ2VzLCBTaW1wbGVDaGFuZ2VzIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBNYXRTZWxlY3Rpb25MaXN0LCBNYXRTZWxlY3Rpb25MaXN0Q2hhbmdlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvbGlzdCc7XG5pbXBvcnQgeyBGb3JtSXRlbU9wdGlvbkl0ZW0gfSBmcm9tICcuLi8uLi9mb3JtLWl0ZW0nO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhcHAtc2VsZWN0aW9uLWxpc3QnLFxuICB0ZW1wbGF0ZVVybDogJy4vc2VsZWN0aW9uLWxpc3QuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9zZWxlY3Rpb24tbGlzdC5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIFNlbGVjdGlvbkxpc3RDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcyB7XG5cbiAgQElucHV0KCkgbGFiZWw6IHN0cmluZztcbiAgQElucHV0KCkgZWRpdGFibGU6IGJvb2xlYW49dHJ1ZTtcbiAgQElucHV0KCkgcmVxdWlyZWQ6IGJvb2xlYW47XG4gIEBJbnB1dCgpIG11bHRpcGxlOiBib29sZWFuO1xuICBASW5wdXQoKSBvcHRpb25zOiBGb3JtSXRlbU9wdGlvbkl0ZW1bXT1bXTtcbiAgQE91dHB1dCgpIHNlbGVjdGlvbkNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nIHwgc3RyaW5nW10+KCk7XG5cbiAgQElucHV0KCkgdmFsdWU6IHN0cmluZyB8IHN0cmluZ1tdO1xuXG4gIEBWaWV3Q2hpbGQoJ3NlbGVjdGVkT3B0aW9ucycsIHsgc3RhdGljOiBmYWxzZSB9KSBwdWJsaWMgc2VsZWN0ZWRPcHRpb25zOk1hdFNlbGVjdGlvbkxpc3Q7XG5cbiAgcHVibGljIGluaXQ6Ym9vbGVhbj10cnVlO1xuXG4gIGNvbnN0cnVjdG9yKCkgeyB9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gIH1cblxuICBpc09wdGlvblNlbGVjdGVkKG9wdGlvbjpGb3JtSXRlbU9wdGlvbkl0ZW0pe1xuICAgIHJldHVybiB0aGlzLm11bHRpcGxlID8gKHRoaXMudmFsdWUgfHwgW10pLmluZGV4T2Yob3B0aW9uLm9wdGlvblZhbHVlKSA+PTAgOiB0aGlzLnZhbHVlPT09b3B0aW9uLm9wdGlvblZhbHVlO1xuICB9XG5cbiAgb25TZWxlY3Rpb25DaGFuZ2UoZXZlbnQ6IE1hdFNlbGVjdGlvbkxpc3RDaGFuZ2Upe1xuICAgIC8vY29uc29sZS5sb2coZXZlbnQsIHRoaXMuc2VsZWN0ZWRPcHRpb25zKTtcbiAgICB0aGlzLnZhbHVlPXRoaXMubXVsdGlwbGUgPyB0aGlzLnNlbGVjdGVkT3B0aW9ucy5zZWxlY3RlZE9wdGlvbnMuc2VsZWN0ZWQubWFwKG9wPT5vcC52YWx1ZSkgOiBldmVudC5vcHRpb25zWzBdLnZhbHVlO1xuICAgIHRoaXMuc2VsZWN0aW9uQ2hhbmdlLmVtaXQodGhpcy52YWx1ZSk7XG4gIH1cblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOlNpbXBsZUNoYW5nZXMpe1xuICAgIGlmIChjaGFuZ2VzLm11bHRpcGxlICYmIGNoYW5nZXMubXVsdGlwbGUucHJldmlvdXNWYWx1ZSE9PWNoYW5nZXMubXVsdGlwbGUuY3VycmVudFZhbHVlKXtcbiAgICAgIHRoaXMuaW5pdD1mYWxzZTtcbiAgICAgIC8vY29uc29sZS5sb2coY2hhbmdlcyk7XG4gICAgICBzZXRUaW1lb3V0KCgpPT57dGhpcy5pbml0PXRydWU7fSwgMTApO1xuICAgIH1cbiAgfVxuXG4gIG9uT3B0aW9uQ2xpY2soZXZlbnQsIG9wdGlvbjpGb3JtSXRlbU9wdGlvbkl0ZW0pe1xuICAgIC8qXG4gICAgY29uc29sZS5sb2coZXZlbnQsIG9wdGlvbik7XG4gICAgaWYgKCF0aGlzLnJlcXVpcmVkKXtcbiAgICAgICAgaWYgKHRoaXMubXVsdGlwbGUgJiYgdGhpcy52YWx1ZS5pbmRleE9mKG9wdGlvbi5vcHRpb25WYWx1ZSk+PTAgJiYgQXJyYXkuaXNBcnJheSh0aGlzLnZhbHVlKSl7XG4gICAgICAgICAgdGhpcy52YWx1ZT10aGlzLnZhbHVlLmZpbHRlcihzdHI9PnN0ciE9PW9wdGlvbi5vcHRpb25WYWx1ZSk7XG4gICAgICAgICAgdGhpcy5zZWxlY3Rpb25DaGFuZ2UuZW1pdCh0aGlzLnZhbHVlKTtcbiAgICAgICAgfVxuICAgICAgICBlbHNlIGlmICh0aGlzLnZhbHVlPT09b3B0aW9uLm9wdGlvblZhbHVlKSB7XG4gICAgICAgICAgdGhpcy52YWx1ZT0nJztcbiAgICAgICAgICB0aGlzLnNlbGVjdGlvbkNoYW5nZS5lbWl0KHRoaXMudmFsdWUpO1xuICAgICAgICB9XG4gICAgfVxuICAgICovXG4gIH1cblxufVxuIiwiPG1hdC1zZWxlY3Rpb24tbGlzdCAjc2VsZWN0ZWRPcHRpb25zICpuZ0lmPVwiaW5pdFwiXG4gICAgKHNlbGVjdGlvbkNoYW5nZSk9XCJvblNlbGVjdGlvbkNoYW5nZSgkZXZlbnQpXCJcbiAgICBbZGlzYWJsZWRdPVwiIWVkaXRhYmxlXCJcblxuICAgIFttdWx0aXBsZV09XCJtdWx0aXBsZVwiXG4+XG4gICAgPCEtLVxuICAgICAgICBbc2VsZWN0ZWRdPVwiaXNPcHRpb25TZWxlY3RlZChvcHRpb24pXCJcbiAgICAtLT5cbiAgICA8bWF0LWxpc3Qtb3B0aW9uICpuZ0Zvcj1cImxldCBvcHRpb24gb2Ygb3B0aW9uc1wiXG4gICAgICAgIFt2YWx1ZV09XCJvcHRpb24ub3B0aW9uVmFsdWVcIlxuICAgICAgICBbc2VsZWN0ZWRdPVwiaXNPcHRpb25TZWxlY3RlZChvcHRpb24pXCJcbiAgICAgICAgKGNsaWNrKT1cIm9uT3B0aW9uQ2xpY2soJGV2ZW50LCBvcHRpb24pXCJcbiAgICA+XG4gICAgICAgIDxzcGFuPnt7b3B0aW9uLmxhYmVsfX08L3NwYW4+XG4gICAgICAgIDwhLS1cbiAgICAgICAgPG1hdC1wc2V1ZG8tY2hlY2tib3ggKm5nSWY9XCIhbXVsdGlwbGUgJiYgaXNPcHRpb25TZWxlY3RlZChvcHRpb24pXCIgY2xhc3M9XCJtYXQtcHNldWRvLWNoZWNrYm94IG1hdC1wc2V1ZG8tY2hlY2tib3gtY2hlY2tlZFwiPjwvbWF0LXBzZXVkby1jaGVja2JveD5cbiAgICAgICAgLS0+XG4gICAgPC9tYXQtbGlzdC1vcHRpb24+XG48L21hdC1zZWxlY3Rpb24tbGlzdD5cbiJdfQ==