list-selection-input 15.0.4

package/fesm2022/list-selection-input.mjs

@@ -0,0 +1,729 @@
+import * as i0 from '@angular/core';
+import { Pipe, inject, EventEmitter, forwardRef, Component, Input, Output, NgModule } from '@angular/core';
+import * as i2 from '@angular/forms';
+import { FormBuilder, Validators, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i3 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i5$1 from '@angular/material/button-toggle';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import * as i6 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
+import * as i7 from '@angular/material/slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import * as i4 from '@angular/material/core';
+import { MatOptionModule } from '@angular/material/core';
+import * as i5 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatInputModule } from '@angular/material/input';
+import { MatToolbarModule } from '@angular/material/toolbar';
+
+class SelectionBasic {
+    constructor(id = 0, value = '') {
+        this.id = id;
+        this.value = value;
+    }
+    static adapt(item) {
+        return new SelectionBasic(item?.id, (item?.value) ? item.value : item);
+    }
+}
+
+class SelectionItem {
+    constructor(id = crypto.randomUUID(), value = '', disabled, selected) {
+        this.id = id;
+        this.value = value;
+        this.disabled = disabled;
+        this.selected = selected;
+    }
+    static adapt(item) {
+        return new SelectionItem(item?.id, (item?.value) ? item.value : item, (item?.disabled) ? true : false, (item?.selected) ? true : false);
+    }
+}
+
+/*
+ * Public API Surface of selections
+ */
+
+class RemoveUnderscorePipe {
+    transform(value) {
+        return value ? value.replace(/_/g, " ") : value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RemoveUnderscorePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: RemoveUnderscorePipe, isStandalone: true, name: "removeUnderscore" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RemoveUnderscorePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'removeUnderscore',
+                    standalone: true
+                }]
+        }] });
+
+class ListSelectionInputComponent {
+    set minSelection(value) {
+        this._minSelection = (value) ? value : 0;
+    }
+    get minSelection() {
+        return this._minSelection;
+    }
+    set maxSelection(value) {
+        this._maxSelection = (value) ? value : 0;
+    }
+    get maxSelection() {
+        return this._maxSelection;
+    }
+    set multiple(value) {
+        this._multiple = (value) ? value : false;
+    }
+    get multiple() {
+        return this._multiple;
+    }
+    get isValid() {
+        return this.isValidRange(this.data);
+    }
+    set data(value) {
+        this.isObjects = this.hasObjects(value);
+        this._data = (value) ? value.map(item => SelectionItem.adapt(item)) : [];
+        const selectedObjects = this.data.filter(item => item.selected).map(item => item.value);
+        this.defaultDisabled = (!this.defaultDisabled) ? this.data.map(item => SelectionItem.adapt(item)).filter(item => item.disabled) : this.defaultDisabled;
+        if (this.multiple) {
+            const selected = (selectedObjects) ? selectedObjects : this.findFirst(selectedObjects);
+            this.selectionControl.patchValue(selected, { emitEvent: false });
+        }
+        else {
+            const selected = (selectedObjects.length === 0 && value.length > 0) ? [value[0]] : this.findFirst(selectedObjects);
+            this.selectionControl.patchValue(selected, { emitEvent: false });
+        }
+    }
+    get data() {
+        return this._data;
+    }
+    constructor() {
+        this.fb = inject(FormBuilder);
+        this.selectionControl = this.fb.control([], Validators.required);
+        this._minSelection = 0;
+        this._maxSelection = 0;
+        this._multiple = false;
+        this.defaultDisabled = [];
+        this.appearance = 'outline';
+        this._data = [];
+        this.selectionChange = new EventEmitter();
+        this.disabled = false;
+        this.formInitialized = false;
+        this.isArray = (obj) => Array.isArray(obj);
+        this.hasObjects = (obj) => (this.isArray(obj) && obj.length > 0) ? this.isObject(obj[0]) : false;
+        this.isObject = (obj) => typeof obj === 'object' && obj !== null && !Array.isArray(obj);
+        this.findFirst = (obj) => {
+            const found = this.data.find(item => obj.includes(item.value));
+            return (found) ? found.value : null;
+        };
+        this.onChange = () => { };
+        this.onTouch = () => { };
+        this.isObjects = false;
+        this.invalid = false;
+        this.updateSelection = (newData) => newData.filter(item => !item.selected).map(item => {
+            const dis = this.defaultDisabled.map(item => item.value);
+            return (dis.includes(item.value)) ? item.disabled = true : item.disabled = false;
+        });
+    }
+    ngOnInit() {
+        if (this.multiple) {
+            this.defaultDisabled = this.data.filter(item => item.disabled);
+            if (this.minSelection > 0 && this.minSelection > this.maxSelection) {
+                this.minSelection = this.maxSelection !== 0 ? this.maxSelection : this.minSelection;
+            }
+            else if (this.maxSelection > 0 && this.maxSelection < this.minSelection) {
+                this.maxSelection = this.minSelection;
+            }
+            this.maxSelection = this.maxSelection || this.data.length;
+        }
+    }
+    ngAfterViewInit() {
+        this.formInitialized = true;
+    }
+    writeValue(value) {
+        const selected = (this.isArray(value) && value.length > 1) ? this.findFirst(value) : value;
+        this.data
+            .map(item => {
+            item.selected = (value && value.includes(item.value)) ? true : false;
+            return item;
+        });
+        if (selected) {
+            if (this.multiple) {
+                this.selectionControl.patchValue(value, { emitEvent: false });
+            }
+            else {
+                if (!value || value.length === 0)
+                    return;
+                this.selectionControl.patchValue(this.findFirst(value), { emitEvent: false });
+                this.selectionControl.markAsDirty({ onlySelf: true });
+            }
+        }
+        if (this.formInitialized && !this.selectionControl.pristine) {
+            if (value === null)
+                this.selectionControl.reset();
+            this.selectionControl.markAsDirty({ onlySelf: true });
+            this.selectionControl.markAllAsTouched();
+        }
+        else if (this.formInitialized && this.selectionControl.pristine) {
+            if (value === null)
+                this.selectionControl.reset();
+        }
+        this.formInitialized = true;
+    }
+    validate(control) {
+        const isRequired = control.hasValidator(Validators.required) ? true : false;
+        let errors = { 'minRequired': false, 'maxExceeded': false };
+        if (!isRequired)
+            this.selectionControl.clearValidators();
+        if (this.minSelection > 0)
+            this.selectionControl.addValidators(Validators.minLength(this.minSelection));
+        const hasValue = (!this.selectionControl.value || this.selectionControl.value?.length === 0);
+        if (this.minSelection > 0) {
+            const hasMin = (this.selectionControl.value?.length + 1 <= this.minSelection) ? true : false;
+            errors.minRequired = hasMin;
+        }
+        if (this.maxSelection > 0) {
+            const hasMax = (this.selectionControl.value?.length >= this.maxSelection) ? true : false;
+            errors.maxExceeded = hasMax;
+        }
+        const hasErrors = this.selectedValues(errors, true).length > 0;
+        const values = this.selectedValues(this.selectionControl.value || [], true).length;
+        const hasValues = (this.minSelection > 0 && values > this.minSelection) || (this.maxSelection > 0 && values < this.maxSelection);
+        const finalErrors = (isRequired && !hasValues && hasErrors) ? errors : null;
+        return finalErrors;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        if (this.disabled) {
+            this.selectionControl.disable();
+        }
+        else {
+            this.selectionControl.enable();
+        }
+    }
+    onSelection(selection) {
+        this.invalid = false;
+        if (this.multiple) {
+            const checkboxSelected = selection.value;
+            const newData = this.data.map(item => SelectionItem.adapt(item));
+            newData.map(item => item.selected = checkboxSelected.includes(item.value) ? true : false);
+            if (this.isValidRange(newData))
+                this.data = newData;
+            const curSelected = this.data.filter(item => item.selected).length;
+            const prevSelected = newData.filter(item => item.selected).length;
+            if (curSelected > this.maxSelection) {
+                this.updateSelection(newData);
+            }
+            else {
+                if (prevSelected < curSelected) {
+                    this.updateSelection(newData);
+                }
+                else {
+                    if (curSelected >= this.maxSelection) {
+                        const dis = this.defaultDisabled.map(item => item.value);
+                        newData.filter(item => !item.selected).map(item => {
+                            return item.disabled = (dis.includes(item.value)) ? item.disabled : !item.disabled;
+                        });
+                    }
+                    else {
+                        this.updateSelection(newData);
+                    }
+                }
+            }
+            this.data = newData;
+            const sel = this.data.filter(item => item.selected).map(item => item.value);
+            this.selectionControl.patchValue(sel, { emitEvent: false });
+        }
+        selection = (selection?.value) ? selection.value : selection;
+        const selected = (this.multiple) ? this.isArray(selection) ? selection : [selection] : [selection];
+        const data = this.data.map(({ id, value }) => ({ id, value }));
+        const newData = data.filter((item) => selected.includes(item.value));
+        const selectedData = (this.isObjects) ? newData : newData.map(({ value }) => value);
+        this.selectionControl.markAllAsTouched();
+        this.selectionChange.emit(data);
+        this.onChange(selectedData);
+    }
+    findControlDisabled(control) {
+        const found = this.data.find(item => item.value === control);
+        const disabled = (found?.disabled) ? found.disabled : false;
+        return disabled;
+    }
+    isValidRange(data) {
+        const selected = data.filter(item => item.selected).length;
+        if (this.multiple) {
+            const isMin = (this.minSelection !== 0) ? selected >= this.minSelection : true;
+            const isMax = (this.maxSelection !== 0) ? selected <= this.maxSelection : true;
+            return isMin && isMax;
+        }
+        else {
+            return selected > 0;
+        }
+    }
+    selectedValues(obj, state = false) {
+        return Object.entries(obj).filter(([key, value]) => value === state).map(([key, _]) => key);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListSelectionInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListSelectionInputComponent, selector: "app-list-selection-input", inputs: { label: "label", placeholder: "placeholder", minSelection: "minSelection", maxSelection: "maxSelection", multiple: "multiple", appearance: "appearance", data: "data" }, outputs: { selectionChange: "selectionChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ListSelectionInputComponent),
+                multi: true
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => ListSelectionInputComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<div style=\"display: flex; flex-direction: column;\">\n  <div style=\"margin-bottom: .5rem; display: flex; flex-direction: column;\">\n    <mat-label style=\"font-size: larger;\">\n      {{ label }}\n    </mat-label>\n  </div>\n  <ng-container *ngIf=\"data && data.length > 0; else NODATA\">\n    <mat-form-field\n      style=\"display: flex;\"\n      [appearance]=\"appearance\"\n    >\n        <mat-select\n          [formControl]=\"selectionControl\"\n          (selectionChange)=\"onSelection($event)\"\n          [multiple]=\"multiple\"\n          [placeholder]=\"placeholder||''\"\n        >\n          <mat-option\n            *ngFor=\"let option of data\"\n            [value]=\"option.value\"\n            [disabled]=\"option.disabled\"\n            >\n            {{option.value}}\n          </mat-option>\n        </mat-select>\n    </mat-form-field>\n  </ng-container>\n  <ng-template #NODATA>\n    <div class=\"wrapper\">\n      <ng-content></ng-content>\n    </div>\n  </ng-template>\n</div>\n\n", styles: [".wrapper:not(:empty)+.default{display:none}\n"], 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: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListSelectionInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-list-selection-input', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ListSelectionInputComponent),
+                            multi: true
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => ListSelectionInputComponent),
+                            multi: true
+                        }
+                    ], template: "<div style=\"display: flex; flex-direction: column;\">\n  <div style=\"margin-bottom: .5rem; display: flex; flex-direction: column;\">\n    <mat-label style=\"font-size: larger;\">\n      {{ label }}\n    </mat-label>\n  </div>\n  <ng-container *ngIf=\"data && data.length > 0; else NODATA\">\n    <mat-form-field\n      style=\"display: flex;\"\n      [appearance]=\"appearance\"\n    >\n        <mat-select\n          [formControl]=\"selectionControl\"\n          (selectionChange)=\"onSelection($event)\"\n          [multiple]=\"multiple\"\n          [placeholder]=\"placeholder||''\"\n        >\n          <mat-option\n            *ngFor=\"let option of data\"\n            [value]=\"option.value\"\n            [disabled]=\"option.disabled\"\n            >\n            {{option.value}}\n          </mat-option>\n        </mat-select>\n    </mat-form-field>\n  </ng-container>\n  <ng-template #NODATA>\n    <div class=\"wrapper\">\n      <ng-content></ng-content>\n    </div>\n  </ng-template>\n</div>\n\n", styles: [".wrapper:not(:empty)+.default{display:none}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], minSelection: [{
+                type: Input
+            }], maxSelection: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], appearance: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], selectionChange: [{
+                type: Output
+            }] } });
+
+class ListSelectionInputDemoComponent {
+    constructor() {
+        this.fb = inject(FormBuilder);
+        this.data_1 = [
+            { id: 11, value: 'Telus' },
+            { id: 12, value: 'AT&T', disabled: true },
+            { id: 14, value: 'Bell', selected: true },
+            { id: 63, value: 'Rogers', selected: true }
+        ];
+        this.data_2 = ['Telus', 'AT&T', 'Bell', 'Rogers'];
+        //  SELECTIONS
+        this.selectionControl_1 = this.fb.control(null, Validators.required);
+        this.selectionControl_2 = this.fb.control(null, Validators.required);
+        this.selectionControl_3 = this.fb.control(null, Validators.required);
+        this.selectionControl_4 = this.fb.control(null);
+        this.selectionControl_5 = this.fb.control(null);
+        this.selectionControl_6 = this.fb.control(null, Validators.required);
+        this.selectionControl_7 = this.fb.control(null, Validators.required);
+        this.selectionControl_8 = this.fb.control(null, Validators.required);
+        //CHANGE DETECTION
+        this.changeDetection_1 = this.fb.control(false);
+        this.changeDetection_2 = this.fb.control(false);
+        this.changeDetection_3 = this.fb.control(false);
+        this.changeDetection_4 = this.fb.control(false);
+        this.changeDetection_5 = this.fb.control(false);
+        this.changeDetection_6 = this.fb.control(false);
+        this.changeDetection_7 = this.fb.control(false);
+        this.changeDetection_8 = this.fb.control(false);
+        this.data = this.data_2;
+    }
+    ngOnInit() {
+        // SELECTIONS
+        this.selectionControl_1.valueChanges.subscribe(data => {
+            if (this.changeDetection_1.value)
+                console.log('CHANGE:', data);
+        });
+        this.selectionControl_2.valueChanges.subscribe(data => {
+            if (this.changeDetection_2.value)
+                console.log('CHANGE:', data);
+        });
+        this.selectionControl_3.valueChanges.subscribe(data => {
+            if (this.changeDetection_3.value)
+                console.log('CHANGE:', data);
+        });
+        this.selectionControl_4.valueChanges.subscribe(data => {
+            if (this.changeDetection_4.value)
+                console.log('CHANGE:', data);
+        });
+        this.selectionControl_5.valueChanges.subscribe(data => {
+            if (this.changeDetection_5.value)
+                console.log('CHANGE:', data);
+        });
+        this.selectionControl_6.valueChanges.subscribe(data => {
+            if (this.changeDetection_6.value)
+                console.log('CHANGE:', data);
+        });
+        this.selectionControl_7.valueChanges.subscribe(data => {
+            if (this.changeDetection_7.value)
+                console.log('CHANGE:', data);
+        });
+        this.selectionControl_8.valueChanges.subscribe(data => {
+            if (this.changeDetection_8.value)
+                console.log('CHANGE:', data);
+        });
+    }
+    onPerformPatch() {
+        this.selectionControl_1.patchValue(['Bell']);
+        this.selectionControl_2.patchValue(['AT&T']);
+        this.selectionControl_3.patchValue(['Telus']);
+        this.selectionControl_4.patchValue(['Rogers']);
+        this.selectionControl_5.patchValue(['Bell']);
+        this.selectionControl_6.patchValue(['AT&T']);
+        this.selectionControl_7.patchValue(['Telus']);
+        this.selectionControl_8.patchValue(['Rogers']);
+    }
+    onChangeDataType(type) {
+        if (type === 'strings') {
+            this.data = this.data_2; //strings
+        }
+        else {
+            this.data = this.data_1; //objects
+        }
+    }
+    // DISABLE
+    onDisabled_1(disable) {
+        if (disable) {
+            this.selectionControl_1.disable();
+        }
+        else {
+            this.selectionControl_1.enable();
+        }
+    }
+    onDisabled_2(disable) {
+        if (disable) {
+            this.selectionControl_2.disable();
+        }
+        else {
+            this.selectionControl_2.enable();
+        }
+    }
+    onDisabled_3(disable) {
+        if (disable) {
+            this.selectionControl_3.disable();
+        }
+        else {
+            this.selectionControl_3.enable();
+        }
+    }
+    onDisabled_4(disable) {
+        if (disable) {
+            this.selectionControl_4.disable();
+        }
+        else {
+            this.selectionControl_4.enable();
+        }
+    }
+    onDisabled_5(disable) {
+        if (disable) {
+            this.selectionControl_5.disable();
+        }
+        else {
+            this.selectionControl_5.enable();
+        }
+    }
+    onDisabled_6(disable) {
+        if (disable) {
+            this.selectionControl_6.disable();
+        }
+        else {
+            this.selectionControl_6.enable();
+        }
+    }
+    onDisabled_7(disable) {
+        if (disable) {
+            this.selectionControl_7.disable();
+        }
+        else {
+            this.selectionControl_7.enable();
+        }
+    }
+    onDisabled_8(disable) {
+        if (disable) {
+            this.selectionControl_8.disable();
+        }
+        else {
+            this.selectionControl_8.enable();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListSelectionInputDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListSelectionInputDemoComponent, selector: "app-list-selection-demo", ngImport: i0, template: "<div style=\"display: flex;\">\n  <h1>List Selection FormControl</h1>\n  <div style=\"flex:1; text-align: right;\">\n    <div style=\"display: flex; gap: 2rem; flex-direction: row-reverse;\">\n      <mat-button-toggle (click)=\"onPerformPatch()\">Patch</mat-button-toggle>\n\n      <mat-button-toggle-group #varTypes=\"matButtonToggleGroup\" (change)=\"onChangeDataType(varTypes.value)\">\n        <mat-button-toggle value=\"strings\" checked=\"true\">Strings</mat-button-toggle>\n        <mat-button-toggle value=\"objects\" checked=\"false\">Objects</mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n  </div>\n</div>\n\n<h3>No Data - Projection of Error</h3>\n<app-list-selection-input error=\"No Data Provided\">\n  <h3 style=\"color: red; margin-top: 0; margin-bottom: 0;\">No Data</h3>\n</app-list-selection-input>\n\n<div style=\"margin-top: 2rem; margin-bottom: 1rem;\">\n  <mat-divider></mat-divider>\n</div>\n\n<div>\n  <h3 style=\"margin-bottom: 0;\">Single Selection - {{ varTypes.value | uppercase }}</h3>\n  <div>\n    <div style=\"display: flex;\">\n      <span style=\"flex:1\"></span>\n      <button mat-button (click)=\"selectionControl_1.reset()\">Reset</button>\n    </div>\n    <app-list-selection-input\n      [data]=\"data\"\n      [formControl]=\"selectionControl_1\"\n    ></app-list-selection-input>\n    <div *ngIf=\"error1.checked\">\n      <mat-error *ngIf=\"selectionControl_1.hasError('minRequired')\">You must have a minimun of 1 selected</mat-error>\n      <mat-error *ngIf=\"selectionControl_1.hasError('maxExceeded')\">maximum reached</mat-error>\n      <mat-error *ngIf=\"selectionControl_1.hasError('required')\">This field is Required</mat-error>\n    </div>\n    <div style=\"display: flex; gap: 2rem; margin-top: 1rem;\">\n      <mat-slide-toggle [formControl]=\"changeDetection_1\">Change Detection</mat-slide-toggle>\n      <mat-slide-toggle #error1>Display Error</mat-slide-toggle>\n      <mat-slide-toggle #disable1 (change)=\"onDisabled_1(disable1.checked)\">Disable</mat-slide-toggle>\n      <span style=\"flex:1\"></span>\n    </div>\n    <div style=\"margin-top: 2rem;\">\n      No Label or Placeholder<br>\n      Required<br>\n      Valid {{ selectionControl_1.valid }}<br>\n    </div>\n  </div>\n\n  <div style=\"margin-top: 2rem; margin-bottom: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div>\n    <div style=\"display: flex;\">\n      <span style=\"flex:1\"></span>\n      <button mat-button (click)=\"selectionControl_2.reset()\">Reset</button>\n    </div>\n    <app-list-selection-input\n      [data]=\"data\"\n      [formControl]=\"selectionControl_2\"\n      label=\"Providers\"\n      placeholder=\"Select Provider\"\n    ></app-list-selection-input>\n    <div *ngIf=\"error2.checked\">\n      <mat-error *ngIf=\"selectionControl_2.hasError('minRequired')\">You must have a minimum of 1 selected</mat-error>\n      <mat-error *ngIf=\"selectionControl_2.hasError('maxExceeded')\">maximum reached</mat-error>\n      <mat-error *ngIf=\"selectionControl_2.hasError('required')\">This field is Required</mat-error>\n    </div>\n    <div style=\"display: flex; gap: 2rem; margin-top: 1rem;\">\n      <mat-slide-toggle [formControl]=\"changeDetection_2\">Change Detection</mat-slide-toggle>\n      <mat-slide-toggle #error2>Display Error</mat-slide-toggle>\n      <mat-slide-toggle #disable2 (change)=\"onDisabled_2(disable2.checked)\">Disable</mat-slide-toggle>\n      <span style=\"flex:1\"></span>\n    </div>\n    <div style=\"margin-top: 2rem;\">\n      Label and Placeholder<br>\n      Required<br>\n      Valid {{ selectionControl_2.valid }}<br>\n    </div>\n    <div style=\"margin-top: .5rem; margin-bottom: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n  </div>\n\n  <div>\n    <div style=\"display: flex;\">\n      <span style=\"flex:1\"></span>\n      <button mat-button (click)=\"selectionControl_3.reset()\">Reset</button>\n    </div>\n    <app-list-selection-input\n      [data]=\"data\"\n      [formControl]=\"selectionControl_3\"\n      label=\"Providers\"\n      placeholder=\"Select Provider\"\n      appearance=\"fill\"\n    ></app-list-selection-input>\n    <div *ngIf=\"error3.checked\">\n      <mat-error *ngIf=\"selectionControl_3.hasError('minRequired')\">You must have a minimum of 1 selected</mat-error>\n      <mat-error *ngIf=\"selectionControl_3.hasError('maxExceeded')\">maximum reached</mat-error>\n      <mat-error *ngIf=\"selectionControl_3.hasError('required')\">This field is Required</mat-error>\n    </div>\n    <div style=\"display: flex; gap: 2rem; margin-top: 1rem;\">\n      <mat-slide-toggle [formControl]=\"changeDetection_3\">Change Detection</mat-slide-toggle>\n      <mat-slide-toggle #error3>Display Error</mat-slide-toggle>\n      <mat-slide-toggle #disable3 (change)=\"onDisabled_3(disable3.checked)\">Disable</mat-slide-toggle>\n      <span style=\"flex:1\"></span>\n    </div>\n    <div style=\"margin-top: 2rem;\">\n      Label and Placeholder<br>\n      Appearance is Fill<br>\n      Required<br>\n      Valid {{ selectionControl_3.valid }}<br>\n    </div>\n    <div style=\"margin-top: .5rem; margin-bottom: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n  </div>\n\n</div>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i5$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: ListSelectionInputComponent, selector: "app-list-selection-input", inputs: ["label", "placeholder", "minSelection", "maxSelection", "multiple", "appearance", "data"], outputs: ["selectionChange"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListSelectionInputDemoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-list-selection-demo', template: "<div style=\"display: flex;\">\n  <h1>List Selection FormControl</h1>\n  <div style=\"flex:1; text-align: right;\">\n    <div style=\"display: flex; gap: 2rem; flex-direction: row-reverse;\">\n      <mat-button-toggle (click)=\"onPerformPatch()\">Patch</mat-button-toggle>\n\n      <mat-button-toggle-group #varTypes=\"matButtonToggleGroup\" (change)=\"onChangeDataType(varTypes.value)\">\n        <mat-button-toggle value=\"strings\" checked=\"true\">Strings</mat-button-toggle>\n        <mat-button-toggle value=\"objects\" checked=\"false\">Objects</mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n  </div>\n</div>\n\n<h3>No Data - Projection of Error</h3>\n<app-list-selection-input error=\"No Data Provided\">\n  <h3 style=\"color: red; margin-top: 0; margin-bottom: 0;\">No Data</h3>\n</app-list-selection-input>\n\n<div style=\"margin-top: 2rem; margin-bottom: 1rem;\">\n  <mat-divider></mat-divider>\n</div>\n\n<div>\n  <h3 style=\"margin-bottom: 0;\">Single Selection - {{ varTypes.value | uppercase }}</h3>\n  <div>\n    <div style=\"display: flex;\">\n      <span style=\"flex:1\"></span>\n      <button mat-button (click)=\"selectionControl_1.reset()\">Reset</button>\n    </div>\n    <app-list-selection-input\n      [data]=\"data\"\n      [formControl]=\"selectionControl_1\"\n    ></app-list-selection-input>\n    <div *ngIf=\"error1.checked\">\n      <mat-error *ngIf=\"selectionControl_1.hasError('minRequired')\">You must have a minimun of 1 selected</mat-error>\n      <mat-error *ngIf=\"selectionControl_1.hasError('maxExceeded')\">maximum reached</mat-error>\n      <mat-error *ngIf=\"selectionControl_1.hasError('required')\">This field is Required</mat-error>\n    </div>\n    <div style=\"display: flex; gap: 2rem; margin-top: 1rem;\">\n      <mat-slide-toggle [formControl]=\"changeDetection_1\">Change Detection</mat-slide-toggle>\n      <mat-slide-toggle #error1>Display Error</mat-slide-toggle>\n      <mat-slide-toggle #disable1 (change)=\"onDisabled_1(disable1.checked)\">Disable</mat-slide-toggle>\n      <span style=\"flex:1\"></span>\n    </div>\n    <div style=\"margin-top: 2rem;\">\n      No Label or Placeholder<br>\n      Required<br>\n      Valid {{ selectionControl_1.valid }}<br>\n    </div>\n  </div>\n\n  <div style=\"margin-top: 2rem; margin-bottom: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <div>\n    <div style=\"display: flex;\">\n      <span style=\"flex:1\"></span>\n      <button mat-button (click)=\"selectionControl_2.reset()\">Reset</button>\n    </div>\n    <app-list-selection-input\n      [data]=\"data\"\n      [formControl]=\"selectionControl_2\"\n      label=\"Providers\"\n      placeholder=\"Select Provider\"\n    ></app-list-selection-input>\n    <div *ngIf=\"error2.checked\">\n      <mat-error *ngIf=\"selectionControl_2.hasError('minRequired')\">You must have a minimum of 1 selected</mat-error>\n      <mat-error *ngIf=\"selectionControl_2.hasError('maxExceeded')\">maximum reached</mat-error>\n      <mat-error *ngIf=\"selectionControl_2.hasError('required')\">This field is Required</mat-error>\n    </div>\n    <div style=\"display: flex; gap: 2rem; margin-top: 1rem;\">\n      <mat-slide-toggle [formControl]=\"changeDetection_2\">Change Detection</mat-slide-toggle>\n      <mat-slide-toggle #error2>Display Error</mat-slide-toggle>\n      <mat-slide-toggle #disable2 (change)=\"onDisabled_2(disable2.checked)\">Disable</mat-slide-toggle>\n      <span style=\"flex:1\"></span>\n    </div>\n    <div style=\"margin-top: 2rem;\">\n      Label and Placeholder<br>\n      Required<br>\n      Valid {{ selectionControl_2.valid }}<br>\n    </div>\n    <div style=\"margin-top: .5rem; margin-bottom: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n  </div>\n\n  <div>\n    <div style=\"display: flex;\">\n      <span style=\"flex:1\"></span>\n      <button mat-button (click)=\"selectionControl_3.reset()\">Reset</button>\n    </div>\n    <app-list-selection-input\n      [data]=\"data\"\n      [formControl]=\"selectionControl_3\"\n      label=\"Providers\"\n      placeholder=\"Select Provider\"\n      appearance=\"fill\"\n    ></app-list-selection-input>\n    <div *ngIf=\"error3.checked\">\n      <mat-error *ngIf=\"selectionControl_3.hasError('minRequired')\">You must have a minimum of 1 selected</mat-error>\n      <mat-error *ngIf=\"selectionControl_3.hasError('maxExceeded')\">maximum reached</mat-error>\n      <mat-error *ngIf=\"selectionControl_3.hasError('required')\">This field is Required</mat-error>\n    </div>\n    <div style=\"display: flex; gap: 2rem; margin-top: 1rem;\">\n      <mat-slide-toggle [formControl]=\"changeDetection_3\">Change Detection</mat-slide-toggle>\n      <mat-slide-toggle #error3>Display Error</mat-slide-toggle>\n      <mat-slide-toggle #disable3 (change)=\"onDisabled_3(disable3.checked)\">Disable</mat-slide-toggle>\n      <span style=\"flex:1\"></span>\n    </div>\n    <div style=\"margin-top: 2rem;\">\n      Label and Placeholder<br>\n      Appearance is Fill<br>\n      Required<br>\n      Valid {{ selectionControl_3.valid }}<br>\n    </div>\n    <div style=\"margin-top: .5rem; margin-bottom: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n  </div>\n\n</div>\n\n" }]
+        }], ctorParameters: function () { return []; } });
+
+class ListMultiSelectionDemoComponent {
+    constructor() {
+        this.fb = inject(FormBuilder);
+        this.data_1 = [
+            { id: 11, value: 'Telus' },
+            { id: 12, value: 'AT&T', disabled: true },
+            { id: 14, value: 'Bell', selected: true },
+            { id: 63, value: 'Rogers', selected: true }
+        ];
+        this.data_2 = ['Telus', 'AT&T', 'Bell', 'Rogers'];
+        //  SELECTIONS
+        this.selectionControl_1 = this.fb.control(null, Validators.required);
+        this.selectionControl_2 = this.fb.control(null, Validators.required);
+        this.selectionControl_3 = this.fb.control(null, Validators.required);
+        this.selectionControl_4 = this.fb.control(null);
+        this.selectionControl_5 = this.fb.control(null);
+        this.selectionControl_6 = this.fb.control(null, Validators.required);
+        this.selectionControl_7 = this.fb.control(null, Validators.required);
+        this.selectionControl_8 = this.fb.control(null, Validators.required);
+        //CHANGE DETECTION
+        this.changeDetection_1 = this.fb.control(false);
+        this.changeDetection_2 = this.fb.control(false);
+        this.changeDetection_3 = this.fb.control(false);
+        this.changeDetection_4 = this.fb.control(false);
+        this.changeDetection_5 = this.fb.control(false);
+        this.changeDetection_6 = this.fb.control(false);
+        this.changeDetection_7 = this.fb.control(false);
+        this.changeDetection_8 = this.fb.control(false);
+        this.data = this.data_2;
+    }
+    ngOnInit() {
+        // SELECTIONS
+        this.selectionControl_1.valueChanges.subscribe(data => {
+            if (this.changeDetection_1.value)
+                console.log('CHANGE:', data);
+        });
+        this.selectionControl_2.valueChanges.subscribe(data => {
+            if (this.changeDetection_2.value)
+                console.log('CHANGE:', data);
+        });
+        this.selectionControl_3.valueChanges.subscribe(data => {
+            if (this.changeDetection_3.value)
+                console.log('CHANGE:', data);
+        });
+        this.selectionControl_4.valueChanges.subscribe(data => {
+            if (this.changeDetection_4.value)
+                console.log('CHANGE:', data);
+        });
+        this.selectionControl_5.valueChanges.subscribe(data => {
+            if (this.changeDetection_5.value)
+                console.log('CHANGE:', data);
+        });
+        this.selectionControl_6.valueChanges.subscribe(data => {
+            if (this.changeDetection_6.value)
+                console.log('CHANGE:', data);
+        });
+        this.selectionControl_7.valueChanges.subscribe(data => {
+            if (this.changeDetection_7.value)
+                console.log('CHANGE:', data);
+        });
+        this.selectionControl_8.valueChanges.subscribe(data => {
+            if (this.changeDetection_8.value)
+                console.log('CHANGE:', data);
+        });
+    }
+    onPerformPatch() {
+        this.selectionControl_1.patchValue(['Bell']);
+        this.selectionControl_2.patchValue(['AT&T']);
+        this.selectionControl_3.patchValue(['Telus']);
+        this.selectionControl_4.patchValue(['Rogers']);
+        this.selectionControl_5.patchValue(['Bell']);
+        this.selectionControl_6.patchValue(['AT&T']);
+        this.selectionControl_7.patchValue(['Telus']);
+        this.selectionControl_8.patchValue(['Rogers']);
+    }
+    onChangeDataType(type) {
+        if (type === 'strings') {
+            this.data = this.data_2; //strings
+        }
+        else {
+            this.data = this.data_1; //objects
+        }
+    }
+    // DISABLE
+    onDisabled_1(disable) {
+        if (disable) {
+            this.selectionControl_1.disable();
+        }
+        else {
+            this.selectionControl_1.enable();
+        }
+    }
+    onDisabled_2(disable) {
+        if (disable) {
+            this.selectionControl_2.disable();
+        }
+        else {
+            this.selectionControl_2.enable();
+        }
+    }
+    onDisabled_3(disable) {
+        if (disable) {
+            this.selectionControl_3.disable();
+        }
+        else {
+            this.selectionControl_3.enable();
+        }
+    }
+    onDisabled_4(disable) {
+        if (disable) {
+            this.selectionControl_4.disable();
+        }
+        else {
+            this.selectionControl_4.enable();
+        }
+    }
+    onDisabled_5(disable) {
+        if (disable) {
+            this.selectionControl_5.disable();
+        }
+        else {
+            this.selectionControl_5.enable();
+        }
+    }
+    onDisabled_6(disable) {
+        if (disable) {
+            this.selectionControl_6.disable();
+        }
+        else {
+            this.selectionControl_6.enable();
+        }
+    }
+    onDisabled_7(disable) {
+        if (disable) {
+            this.selectionControl_7.disable();
+        }
+        else {
+            this.selectionControl_7.enable();
+        }
+    }
+    onDisabled_8(disable) {
+        if (disable) {
+            this.selectionControl_8.disable();
+        }
+        else {
+            this.selectionControl_8.enable();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListMultiSelectionDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListMultiSelectionDemoComponent, selector: "app-list-multi-selection-demo", ngImport: i0, template: "<div style=\"display: flex;\">\n  <h1>Multi List Selection FormControl</h1>\n  <div style=\"flex:1; text-align: right;\">\n    <div style=\"display: flex; gap: 2rem; flex-direction: row-reverse;\">\n      <mat-button-toggle (click)=\"onPerformPatch()\">Patch</mat-button-toggle>\n\n      <mat-button-toggle-group #varTypes=\"matButtonToggleGroup\" (change)=\"onChangeDataType(varTypes.value)\">\n        <mat-button-toggle value=\"strings\" checked=\"true\">Strings</mat-button-toggle>\n        <mat-button-toggle value=\"objects\" checked=\"false\">Objects</mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n  </div>\n</div>\n\n<h3>No Data - Projection of Error</h3>\n<app-list-selection-input error=\"No Data Provided\">\n  <h3 style=\"color: red; margin-top: 0; margin-bottom: 0;\">No Data</h3>\n</app-list-selection-input>\n\n<div style=\"margin-top: 2rem; margin-bottom: 1rem;\">\n  <mat-divider></mat-divider>\n</div>\n\n<div>\n  <h3 style=\"margin-bottom: 0;\">Multi Selection - {{ varTypes.value | uppercase }}</h3>\n\n  <div>\n    <div style=\"display: flex;\">\n      <span style=\"flex:1\"></span>\n      <button mat-button (click)=\"selectionControl_4.reset()\">Reset</button>\n    </div>\n    <app-list-selection-input\n      [data]=\"data\"\n      [formControl]=\"selectionControl_4\"\n      [multiple]=\"true\"\n    ></app-list-selection-input>\n    <div *ngIf=\"error4.checked\">\n      <mat-error *ngIf=\"selectionControl_4.hasError('minRequired')\">You must have a minimum of 1 selected</mat-error>\n      <mat-error *ngIf=\"selectionControl_4.hasError('maxExceeded')\">maximum reached</mat-error>\n      <mat-error *ngIf=\"selectionControl_4.hasError('required')\">This field is Required</mat-error>\n    </div>\n    <div style=\"display: flex; gap: 2rem; margin-top: 1rem;\">\n      <mat-slide-toggle [formControl]=\"changeDetection_4\">Change Detection</mat-slide-toggle>\n      <mat-slide-toggle #error4>Display Error</mat-slide-toggle>\n      <mat-slide-toggle #disable4 (change)=\"onDisabled_4(disable4.checked)\">Disable</mat-slide-toggle>\n      <span style=\"flex:1\"></span>\n    </div>\n    <div style=\"margin-top: 2rem;\">\n      No Label and Placeholder<br>\n      Not Required<br>\n      Valid {{ selectionControl_4.valid }}<br>\n    </div>\n    <div style=\"margin-top: .5rem; margin-bottom: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n  </div>\n\n  <div>\n    <div style=\"display: flex;\">\n      <span style=\"flex:1\"></span>\n      <button mat-button (click)=\"selectionControl_5.reset()\">Reset</button>\n    </div>\n    <app-list-selection-input\n      [formControl]=\"selectionControl_5\"\n      [multiple]=\"true\"\n      [data]=\"data\"\n      label=\"Sample Selection\"\n      placeholder=\"Select Provider\"\n    ></app-list-selection-input>\n    <div *ngIf=\"error5.checked\">\n      <mat-error *ngIf=\"selectionControl_5.hasError('minRequired')\">You must have a minimum of 1 selected</mat-error>\n      <mat-error *ngIf=\"selectionControl_5.hasError('maxExceeded')\">maximum reached</mat-error>\n      <mat-error *ngIf=\"selectionControl_5.hasError('required')\">This field is Required</mat-error>\n    </div>\n    <div style=\"display: flex; gap: 2rem; margin-top: 2rem;\">\n      <mat-slide-toggle [formControl]=\"changeDetection_5\">Change Detection</mat-slide-toggle>\n      <mat-slide-toggle #error5>Display Error</mat-slide-toggle>\n      <mat-slide-toggle #disable5 (change)=\"onDisabled_5(disable5.checked)\">Disable</mat-slide-toggle>\n      <span style=\"flex:1\"></span>\n    </div>\n    <div style=\"margin-top: 2rem;\">\n      Label and Placeholder<br>\n      Not Required<br>\n      Valid {{ selectionControl_5.valid }}<br>\n    </div>\n    <div style=\"margin-top: .5rem; margin-bottom: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n  </div>\n\n  <div>\n    <div style=\"display: flex;\">\n      <span style=\"flex:1\"></span>\n      <button mat-button (click)=\"selectionControl_6.reset()\">Reset</button>\n    </div>\n    <app-list-selection-input\n      [formControl]=\"selectionControl_6\"\n      [multiple]=\"true\"\n      [data]=\"data\"\n      placeholder=\"Select Provider\"\n      [minSelection]=\"2\"\n    ></app-list-selection-input>\n    <div *ngIf=\"error6.checked\">\n      <mat-error *ngIf=\"selectionControl_6.hasError('minRequired')\">You must have a minimum of 1 selected</mat-error>\n      <mat-error *ngIf=\"selectionControl_6.hasError('maxExceeded')\">maximum reached</mat-error>\n      <mat-error *ngIf=\"selectionControl_6.hasError('required')\">This field is Required</mat-error>\n    </div>\n    <div style=\"display: flex; gap: 2rem; margin-top: 2rem;\">\n      <mat-slide-toggle [formControl]=\"changeDetection_6\">Change Detection</mat-slide-toggle>\n      <mat-slide-toggle #error6>Display Error</mat-slide-toggle>\n      <mat-slide-toggle #disable6 (change)=\"onDisabled_6(disable6.checked)\">Disable</mat-slide-toggle>\n      <span style=\"flex:1\"></span>\n    </div>\n    <div style=\"margin-top: 2rem;\">\n      Placeholder<br>\n      Required<br>\n      Minimum of 2 Required<br>\n      Valid {{ selectionControl_6.valid }}<br>\n    </div>\n    <div style=\"margin-top: .5rem; margin-bottom: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n  </div>\n\n  <div>\n    <div style=\"display: flex;\">\n      <span style=\"flex:1\"></span>\n      <button mat-button (click)=\"selectionControl_7.reset()\">Reset</button>\n    </div>\n    <app-list-selection-input\n      [formControl]=\"selectionControl_7\"\n      [multiple]=\"true\"\n      [data]=\"data\"\n      [maxSelection]=\"2\"\n      placeholder=\"Select Provider\"\n    ></app-list-selection-input>\n    <div *ngIf=\"error7.checked\">\n      <mat-error *ngIf=\"selectionControl_7.hasError('minRequired')\">You must have a minimum of 1 selected</mat-error>\n      <mat-error *ngIf=\"selectionControl_7.hasError('maxExceeded')\">maximum reached</mat-error>\n      <mat-error *ngIf=\"selectionControl_7.hasError('required')\">This field is Required</mat-error>\n    </div>\n    <div style=\"display: flex; gap: 2rem; margin-top: 2rem;\">\n      <mat-slide-toggle [formControl]=\"changeDetection_7\">Change Detection</mat-slide-toggle>\n      <mat-slide-toggle #error7>Display Error</mat-slide-toggle>\n      <mat-slide-toggle #disable7 (change)=\"onDisabled_7(disable7.checked)\">Disable</mat-slide-toggle>\n      <span style=\"flex:1\"></span>\n    </div>\n    <div style=\"margin-top: 2rem;\">\n      Placeholder<br>\n      Required<br>\n      Maximum of 2 Required<br>\n      Valid {{ selectionControl_7.valid }}<br>\n    </div>\n    <div style=\"margin-top: .5rem; margin-bottom: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n  </div>\n\n  <div>\n    <div style=\"display: flex;\">\n      <span style=\"flex:1\"></span>\n      <button mat-button (click)=\"selectionControl_8.reset()\">Reset</button>\n    </div>\n    <app-list-selection-input\n      [formControl]=\"selectionControl_8\"\n      [multiple]=\"true\"\n      [data]=\"data\"\n      [minSelection]=\"1\"\n      [maxSelection]=\"2\"\n      placeholder=\"Select Provider\"\n    ></app-list-selection-input>\n    <div *ngIf=\"error8.checked\">\n      <mat-error *ngIf=\"selectionControl_8.hasError('minRequired')\">You must have a minimum of 1 selected</mat-error>\n      <mat-error *ngIf=\"selectionControl_8.hasError('maxExceeded')\">maximum reached</mat-error>\n      <mat-error *ngIf=\"selectionControl_8.hasError('required')\">This field is Required</mat-error>\n    </div>\n    <div style=\"display: flex; gap: 2rem; margin-top: 2rem;\">\n      <mat-slide-toggle [formControl]=\"changeDetection_8\">Change Detection</mat-slide-toggle>\n      <mat-slide-toggle #error8>Display Error</mat-slide-toggle>\n      <mat-slide-toggle #disable8 (change)=\"onDisabled_8(disable8.checked)\">Disable</mat-slide-toggle>\n      <span style=\"flex:1\"></span>\n    </div>\n    <div style=\"margin-top: 2rem;\">\n      Placeholder<br>\n      Required<br>\n      Minimum of 1 Required<br>\n      Maximum of 2 Required<br>\n      Valid {{ selectionControl_8.valid }}<br>\n    </div>\n    <div style=\"margin-top: .5rem; margin-bottom: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n  </div>\n\n</div>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i5$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: ListSelectionInputComponent, selector: "app-list-selection-input", inputs: ["label", "placeholder", "minSelection", "maxSelection", "multiple", "appearance", "data"], outputs: ["selectionChange"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListMultiSelectionDemoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-list-multi-selection-demo', template: "<div style=\"display: flex;\">\n  <h1>Multi List Selection FormControl</h1>\n  <div style=\"flex:1; text-align: right;\">\n    <div style=\"display: flex; gap: 2rem; flex-direction: row-reverse;\">\n      <mat-button-toggle (click)=\"onPerformPatch()\">Patch</mat-button-toggle>\n\n      <mat-button-toggle-group #varTypes=\"matButtonToggleGroup\" (change)=\"onChangeDataType(varTypes.value)\">\n        <mat-button-toggle value=\"strings\" checked=\"true\">Strings</mat-button-toggle>\n        <mat-button-toggle value=\"objects\" checked=\"false\">Objects</mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n  </div>\n</div>\n\n<h3>No Data - Projection of Error</h3>\n<app-list-selection-input error=\"No Data Provided\">\n  <h3 style=\"color: red; margin-top: 0; margin-bottom: 0;\">No Data</h3>\n</app-list-selection-input>\n\n<div style=\"margin-top: 2rem; margin-bottom: 1rem;\">\n  <mat-divider></mat-divider>\n</div>\n\n<div>\n  <h3 style=\"margin-bottom: 0;\">Multi Selection - {{ varTypes.value | uppercase }}</h3>\n\n  <div>\n    <div style=\"display: flex;\">\n      <span style=\"flex:1\"></span>\n      <button mat-button (click)=\"selectionControl_4.reset()\">Reset</button>\n    </div>\n    <app-list-selection-input\n      [data]=\"data\"\n      [formControl]=\"selectionControl_4\"\n      [multiple]=\"true\"\n    ></app-list-selection-input>\n    <div *ngIf=\"error4.checked\">\n      <mat-error *ngIf=\"selectionControl_4.hasError('minRequired')\">You must have a minimum of 1 selected</mat-error>\n      <mat-error *ngIf=\"selectionControl_4.hasError('maxExceeded')\">maximum reached</mat-error>\n      <mat-error *ngIf=\"selectionControl_4.hasError('required')\">This field is Required</mat-error>\n    </div>\n    <div style=\"display: flex; gap: 2rem; margin-top: 1rem;\">\n      <mat-slide-toggle [formControl]=\"changeDetection_4\">Change Detection</mat-slide-toggle>\n      <mat-slide-toggle #error4>Display Error</mat-slide-toggle>\n      <mat-slide-toggle #disable4 (change)=\"onDisabled_4(disable4.checked)\">Disable</mat-slide-toggle>\n      <span style=\"flex:1\"></span>\n    </div>\n    <div style=\"margin-top: 2rem;\">\n      No Label and Placeholder<br>\n      Not Required<br>\n      Valid {{ selectionControl_4.valid }}<br>\n    </div>\n    <div style=\"margin-top: .5rem; margin-bottom: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n  </div>\n\n  <div>\n    <div style=\"display: flex;\">\n      <span style=\"flex:1\"></span>\n      <button mat-button (click)=\"selectionControl_5.reset()\">Reset</button>\n    </div>\n    <app-list-selection-input\n      [formControl]=\"selectionControl_5\"\n      [multiple]=\"true\"\n      [data]=\"data\"\n      label=\"Sample Selection\"\n      placeholder=\"Select Provider\"\n    ></app-list-selection-input>\n    <div *ngIf=\"error5.checked\">\n      <mat-error *ngIf=\"selectionControl_5.hasError('minRequired')\">You must have a minimum of 1 selected</mat-error>\n      <mat-error *ngIf=\"selectionControl_5.hasError('maxExceeded')\">maximum reached</mat-error>\n      <mat-error *ngIf=\"selectionControl_5.hasError('required')\">This field is Required</mat-error>\n    </div>\n    <div style=\"display: flex; gap: 2rem; margin-top: 2rem;\">\n      <mat-slide-toggle [formControl]=\"changeDetection_5\">Change Detection</mat-slide-toggle>\n      <mat-slide-toggle #error5>Display Error</mat-slide-toggle>\n      <mat-slide-toggle #disable5 (change)=\"onDisabled_5(disable5.checked)\">Disable</mat-slide-toggle>\n      <span style=\"flex:1\"></span>\n    </div>\n    <div style=\"margin-top: 2rem;\">\n      Label and Placeholder<br>\n      Not Required<br>\n      Valid {{ selectionControl_5.valid }}<br>\n    </div>\n    <div style=\"margin-top: .5rem; margin-bottom: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n  </div>\n\n  <div>\n    <div style=\"display: flex;\">\n      <span style=\"flex:1\"></span>\n      <button mat-button (click)=\"selectionControl_6.reset()\">Reset</button>\n    </div>\n    <app-list-selection-input\n      [formControl]=\"selectionControl_6\"\n      [multiple]=\"true\"\n      [data]=\"data\"\n      placeholder=\"Select Provider\"\n      [minSelection]=\"2\"\n    ></app-list-selection-input>\n    <div *ngIf=\"error6.checked\">\n      <mat-error *ngIf=\"selectionControl_6.hasError('minRequired')\">You must have a minimum of 1 selected</mat-error>\n      <mat-error *ngIf=\"selectionControl_6.hasError('maxExceeded')\">maximum reached</mat-error>\n      <mat-error *ngIf=\"selectionControl_6.hasError('required')\">This field is Required</mat-error>\n    </div>\n    <div style=\"display: flex; gap: 2rem; margin-top: 2rem;\">\n      <mat-slide-toggle [formControl]=\"changeDetection_6\">Change Detection</mat-slide-toggle>\n      <mat-slide-toggle #error6>Display Error</mat-slide-toggle>\n      <mat-slide-toggle #disable6 (change)=\"onDisabled_6(disable6.checked)\">Disable</mat-slide-toggle>\n      <span style=\"flex:1\"></span>\n    </div>\n    <div style=\"margin-top: 2rem;\">\n      Placeholder<br>\n      Required<br>\n      Minimum of 2 Required<br>\n      Valid {{ selectionControl_6.valid }}<br>\n    </div>\n    <div style=\"margin-top: .5rem; margin-bottom: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n  </div>\n\n  <div>\n    <div style=\"display: flex;\">\n      <span style=\"flex:1\"></span>\n      <button mat-button (click)=\"selectionControl_7.reset()\">Reset</button>\n    </div>\n    <app-list-selection-input\n      [formControl]=\"selectionControl_7\"\n      [multiple]=\"true\"\n      [data]=\"data\"\n      [maxSelection]=\"2\"\n      placeholder=\"Select Provider\"\n    ></app-list-selection-input>\n    <div *ngIf=\"error7.checked\">\n      <mat-error *ngIf=\"selectionControl_7.hasError('minRequired')\">You must have a minimum of 1 selected</mat-error>\n      <mat-error *ngIf=\"selectionControl_7.hasError('maxExceeded')\">maximum reached</mat-error>\n      <mat-error *ngIf=\"selectionControl_7.hasError('required')\">This field is Required</mat-error>\n    </div>\n    <div style=\"display: flex; gap: 2rem; margin-top: 2rem;\">\n      <mat-slide-toggle [formControl]=\"changeDetection_7\">Change Detection</mat-slide-toggle>\n      <mat-slide-toggle #error7>Display Error</mat-slide-toggle>\n      <mat-slide-toggle #disable7 (change)=\"onDisabled_7(disable7.checked)\">Disable</mat-slide-toggle>\n      <span style=\"flex:1\"></span>\n    </div>\n    <div style=\"margin-top: 2rem;\">\n      Placeholder<br>\n      Required<br>\n      Maximum of 2 Required<br>\n      Valid {{ selectionControl_7.valid }}<br>\n    </div>\n    <div style=\"margin-top: .5rem; margin-bottom: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n  </div>\n\n  <div>\n    <div style=\"display: flex;\">\n      <span style=\"flex:1\"></span>\n      <button mat-button (click)=\"selectionControl_8.reset()\">Reset</button>\n    </div>\n    <app-list-selection-input\n      [formControl]=\"selectionControl_8\"\n      [multiple]=\"true\"\n      [data]=\"data\"\n      [minSelection]=\"1\"\n      [maxSelection]=\"2\"\n      placeholder=\"Select Provider\"\n    ></app-list-selection-input>\n    <div *ngIf=\"error8.checked\">\n      <mat-error *ngIf=\"selectionControl_8.hasError('minRequired')\">You must have a minimum of 1 selected</mat-error>\n      <mat-error *ngIf=\"selectionControl_8.hasError('maxExceeded')\">maximum reached</mat-error>\n      <mat-error *ngIf=\"selectionControl_8.hasError('required')\">This field is Required</mat-error>\n    </div>\n    <div style=\"display: flex; gap: 2rem; margin-top: 2rem;\">\n      <mat-slide-toggle [formControl]=\"changeDetection_8\">Change Detection</mat-slide-toggle>\n      <mat-slide-toggle #error8>Display Error</mat-slide-toggle>\n      <mat-slide-toggle #disable8 (change)=\"onDisabled_8(disable8.checked)\">Disable</mat-slide-toggle>\n      <span style=\"flex:1\"></span>\n    </div>\n    <div style=\"margin-top: 2rem;\">\n      Placeholder<br>\n      Required<br>\n      Minimum of 1 Required<br>\n      Maximum of 2 Required<br>\n      Valid {{ selectionControl_8.valid }}<br>\n    </div>\n    <div style=\"margin-top: .5rem; margin-bottom: 1rem;\">\n      <mat-divider></mat-divider>\n    </div>\n  </div>\n\n</div>\n\n" }]
+        }], ctorParameters: function () { return []; } });
+
+class ListSelectionInputModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListSelectionInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ListSelectionInputModule, declarations: [ListSelectionInputDemoComponent,
+            ListMultiSelectionDemoComponent,
+            ListSelectionInputComponent], imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatSliderModule,
+            MatButtonModule,
+            MatIconModule,
+            MatFormFieldModule,
+            MatToolbarModule,
+            MatCheckboxModule,
+            MatMenuModule,
+            MatButtonToggleModule,
+            MatDividerModule,
+            MatRadioModule,
+            MatInputModule,
+            MatAutocompleteModule,
+            RemoveUnderscorePipe,
+            MatSelectModule,
+            MatOptionModule,
+            MatSlideToggleModule], exports: [ListSelectionInputDemoComponent,
+            ListMultiSelectionDemoComponent,
+            ListSelectionInputComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListSelectionInputModule, imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatSliderModule,
+            MatButtonModule,
+            MatIconModule,
+            MatFormFieldModule,
+            MatToolbarModule,
+            MatCheckboxModule,
+            MatMenuModule,
+            MatButtonToggleModule,
+            MatDividerModule,
+            MatRadioModule,
+            MatInputModule,
+            MatAutocompleteModule,
+            MatSelectModule,
+            MatOptionModule,
+            MatSlideToggleModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListSelectionInputModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatSliderModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatFormFieldModule,
+                        MatToolbarModule,
+                        MatCheckboxModule,
+                        MatMenuModule,
+                        MatButtonToggleModule,
+                        MatDividerModule,
+                        MatRadioModule,
+                        MatInputModule,
+                        MatAutocompleteModule,
+                        RemoveUnderscorePipe,
+                        MatSelectModule,
+                        MatOptionModule,
+                        MatSlideToggleModule,
+                    ],
+                    declarations: [
+                        ListSelectionInputDemoComponent,
+                        ListMultiSelectionDemoComponent,
+                        ListSelectionInputComponent,
+                    ],
+                    exports: [
+                        ListSelectionInputDemoComponent,
+                        ListMultiSelectionDemoComponent,
+                        ListSelectionInputComponent,
+                    ]
+                }]
+        }] });
+
+/*
+ * Public API Surface of checkbox-selection-input
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ListMultiSelectionDemoComponent, ListSelectionInputComponent, ListSelectionInputDemoComponent, ListSelectionInputModule, RemoveUnderscorePipe, SelectionBasic, SelectionItem };
+//# sourceMappingURL=list-selection-input.mjs.map